/* ============================================================
   NC Inflatable Repairs
   Palette pulled from the logo: shop black, safety yellow,
   NC green, with a light industrial paper base.
   ============================================================ */

:root{
  --ink:      #16160F;
  --ink-2:    #23231A;
  --graphite: #4A4A40;
  --paper:    #EBEAE3;
  --paper-2:  #F5F4EF;
  --line:     #C9C7BC;
  --yellow:   #FFC72C;
  --yellow-d: #E0A800;
  --green:    #4E9B2E;
  --white:    #FFFFFF;

  --wrap: 1140px;
  --r: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Barlow', system-ui, -apple-system, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--yellow); color:var(--ink);
  padding:.7rem 1.1rem; font-weight:700;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--green);
  outline-offset:3px;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

/* ---------- type roles ---------- */
.eyebrow{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.82rem;
  color:var(--graphite);
  margin:0 0 .8rem;
}
.eyebrow--light{ color:var(--yellow); }

.h2{
  font-family:'Archivo Black', sans-serif;
  font-weight:400;
  font-size:clamp(1.9rem, 4.2vw, 2.9rem);
  line-height:1.05;
  letter-spacing:-.015em;
  margin:0 0 2.4rem;
  max-width:20ch;
}
.h2--light{ color:var(--white); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:baseline; gap:.5rem;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none;
  padding:.75rem 1.3rem;
  border-radius:var(--r);
  border:2px solid transparent;
  transition:transform .12s ease, background-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn--call{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
.btn--call:hover{ background:var(--yellow-d); border-color:var(--yellow-d); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.45); }
.btn--ghost:hover{ border-color:var(--yellow); color:var(--yellow); transform:translateY(-2px); }
.btn--lg{ padding:1rem 1.7rem; font-size:1.05rem; }
.btn--block{ width:100%; justify-content:center; border:none; cursor:pointer; font-size:1.05rem; }
.btn__label{ font-size:.78em; opacity:.7; }
.btn__num{ font-size:1em; }

/* ---------- top bar ---------- */
.bar{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  border-bottom:3px solid var(--yellow);
}
.bar__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:10px 24px;
  display:flex; align-items:center; gap:1.5rem;
}
.bar__brand{ flex:0 0 auto; }
.bar__brand img{ height:52px; width:auto; }
.bar__nav{ display:flex; gap:1.6rem; margin-left:auto; }
.bar__nav a{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  font-size:.95rem; color:var(--paper); text-decoration:none;
  padding-bottom:2px; border-bottom:2px solid transparent;
}
.bar__nav a:hover{ color:var(--yellow); border-bottom-color:var(--yellow); }

/* ---------- hero ---------- */
.hero{
  background:var(--ink);
  color:var(--white);
  padding:clamp(3.5rem, 8vw, 6rem) 0 0;
  overflow:hidden;
}
.hero__inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:24px;
}
.hero__h1{
  font-family:'Archivo Black', sans-serif;
  font-weight:400;
  font-size:clamp(2.4rem, 7.5vw, 5.2rem);
  line-height:.98;
  letter-spacing:-.025em;
  margin:0 0 1.4rem;
  max-width:16ch;
}
.hero__h1 .hl{
  color:var(--yellow);
}
.hero__sub{
  max-width:56ch;
  font-size:clamp(1.02rem, 1.6vw, 1.22rem);
  color:#D9D7CC;
  margin:0 0 2.2rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* signature: tear stitching itself shut */
.seam{ margin-top:clamp(3rem, 7vw, 5rem); }
.seam svg{ width:100%; height:70px; display:block; }
.seam__tear{
  fill:none;
  stroke:#4A4A40;
  stroke-width:3;
  stroke-linejoin:round;
}
.seam__stitch{
  fill:none;
  stroke:var(--yellow);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:16 13;
  stroke-dashoffset:1000;
  animation:stitch 2.1s cubic-bezier(.5,.05,.2,1) .35s forwards;
  opacity:0;
}
.seam__stitch--b{
  stroke-width:2;
  stroke-dasharray:6 23;
  transform:translateY(7px);
  animation-delay:.55s;
}
@keyframes stitch{
  from{ stroke-dashoffset:1000; opacity:0; }
  10%{ opacity:1; }
  to{ stroke-dashoffset:0; opacity:1; }
}
.seam__caption{
  font-family:'Barlow Condensed', sans-serif;
  text-transform:uppercase; letter-spacing:.2em; font-size:.78rem;
  color:#7C7A6C; margin:.4rem 0 0; text-align:center;
}

/* hazard band — used exactly once */
.hazard{
  height:18px;
  background:repeating-linear-gradient(
    -45deg,
    var(--yellow) 0 22px,
    var(--ink) 22px 44px
  );
}

/* ---------- sections ---------- */
.sec{ padding:clamp(3.5rem, 7vw, 5.5rem) 0; }
.sec--paper{ background:var(--paper); }
.sec--ink{ background:var(--ink); color:#DAD8CD; }
.sec--tight{ padding-top:0; }

/* ---------- what we fix ---------- */
.fix{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  border-top:2px solid var(--ink);
}
.fix__item{
  padding:2rem 1.6rem 2.2rem 0;
  border-bottom:1px solid var(--line);
  position:relative;
}
.fix__item::before{
  content:"";
  position:absolute; top:-2px; left:0; width:44px; height:4px;
  background:var(--yellow);
}
.fix__item h3{
  font-family:'Archivo Black', sans-serif; font-weight:400;
  font-size:1.28rem; margin:.2rem 0 .6rem; letter-spacing:-.01em;
}
.fix__item p{ margin:0; color:var(--graphite); font-size:1rem; }

/* ---------- steps ---------- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.step{ position:relative; padding-top:1.4rem; border-top:2px solid #3B3B30; }
.step__n{
  display:block;
  font-family:'Archivo Black', sans-serif;
  font-size:2.6rem; line-height:1;
  color:var(--yellow);
  margin-bottom:.5rem;
}
.step h3{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:1.22rem; color:var(--white); margin:0 0 .5rem;
}
.step p{ margin:0; font-size:.99rem; color:#ABA99C; }

/* ---------- why ---------- */
.why{
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
.why__item{
  background:var(--paper-2);
  border-left:5px solid var(--green);
  padding:1.5rem 1.4rem;
  border-radius:var(--r);
}
.why__item h3{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:1.15rem; margin:0 0 .5rem;
}
.why__item p{ margin:0; color:var(--graphite); font-size:.99rem; }

/* ---------- work / gallery ---------- */
.shots{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.shot{ margin:0; }
.shot img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r);
  border:2px solid var(--ink);
}
.shot figcaption{
  font-family:'Barlow Condensed', sans-serif;
  text-transform:uppercase; letter-spacing:.14em; font-size:.8rem;
  color:var(--graphite); margin-top:.6rem;
}
/* graceful placeholder if a photo hasn't been added yet */
.shot.is-empty img{ display:none; }
.shot.is-empty::before{
  content:"Add photo";
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3;
  border:2px dashed var(--line);
  border-radius:var(--r);
  background:var(--paper-2);
  font-family:'Barlow Condensed', sans-serif;
  text-transform:uppercase; letter-spacing:.18em; font-size:.85rem;
  color:#9C9A8E;
}

/* ---------- contact ---------- */
.contact{
  display:grid; gap:3rem;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:start;
}
.contact__lede{ max-width:48ch; color:#ABA99C; margin:-1.6rem 0 2rem; }

.form__row{ margin-bottom:1.1rem; }
.form__grid{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
.form label{
  display:block;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  font-size:.85rem; color:var(--yellow); margin-bottom:.35rem;
}
.form input, .form textarea{
  width:100%;
  background:var(--ink-2);
  border:2px solid #3B3B30;
  border-radius:var(--r);
  color:var(--white);
  font-family:'Barlow', sans-serif;
  font-size:1rem;
  padding:.75rem .85rem;
}
.form input::placeholder, .form textarea::placeholder{ color:#6E6C60; }
.form input:focus, .form textarea:focus{ border-color:var(--yellow); outline:none; }
.form textarea{ resize:vertical; }
.form__note{
  font-size:.88rem; color:#8A887B; margin:.8rem 0 0; text-align:center;
}

.contact__info{ display:grid; gap:1.1rem; }
.card{
  background:var(--ink-2);
  border:1px solid #34342A;
  border-radius:var(--r);
  padding:1.3rem 1.4rem;
}
.card--area p{ margin:0; font-size:.97rem; color:#ABA99C; }
.bignum{
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(1.6rem, 3.6vw, 2.05rem);
  color:var(--yellow);
  text-decoration:none;
  letter-spacing:-.02em;
  display:inline-block;
}
.bignum:hover{ color:var(--white); }
.card address{
  font-style:normal; color:var(--white); font-size:1.06rem; line-height:1.5;
}
.lnk{
  display:inline-block; margin-top:.6rem;
  font-family:'Barlow Condensed', sans-serif;
  text-transform:uppercase; letter-spacing:.1em; font-size:.85rem; font-weight:600;
  color:var(--green); text-decoration:none; border-bottom:2px solid var(--green);
}
.lnk:hover{ color:var(--yellow); border-bottom-color:var(--yellow); }

.hours{ width:100%; border-collapse:collapse; font-size:.95rem; }
.hours th{
  text-align:left; font-weight:500; color:#ABA99C;
  padding:.28rem 0; font-family:'Barlow', sans-serif;
}
.hours td{ text-align:right; color:var(--white); padding:.28rem 0; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); border-top:3px solid var(--yellow); padding:3rem 0 1.5rem; color:#9C9A8E; }
.foot__inner{ display:flex; flex-wrap:wrap; gap:2.5rem; align-items:flex-start; justify-content:space-between; }
.foot__logo{ width:250px; height:auto; }
.foot__cols{ display:flex; gap:3.5rem; flex-wrap:wrap; }
.foot h4{
  font-family:'Barlow Condensed', sans-serif;
  text-transform:uppercase; letter-spacing:.14em; font-size:.85rem;
  color:var(--yellow); margin:0 0 .7rem;
}
.foot ul{ list-style:none; margin:0; padding:0; font-size:.96rem; line-height:1.9; }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--yellow); }
.foot__legal{
  max-width:var(--wrap); margin:2.5rem auto 0; padding:1.2rem 24px 0;
  border-top:1px solid #2E2E24;
  font-size:.85rem; color:#6E6C60;
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .contact{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .bar__nav{ display:none; }
  .bar__call{ margin-left:auto; }
  .bar__brand img{ height:44px; }
  .fix__item{ padding-right:0; }
  .form__grid{ grid-template-columns:1fr; }
  .foot__cols{ gap:2.2rem; }
}
@media (max-width: 420px){
  .btn__label{ display:none; }
  .hero__cta .btn{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .seam__stitch{ stroke-dashoffset:0; opacity:1; }
}

/* ============================================================
   Additions: kicker, service deep-dives, service area, FAQ
   ============================================================ */

.kicker{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.16em;
  font-size:clamp(.9rem, 1.6vw, 1.05rem);
  color:var(--yellow);
  margin:0 0 1rem;
}

.hero__meta{
  font-family:'Barlow Condensed', sans-serif;
  text-transform:uppercase; letter-spacing:.1em;
  font-size:.85rem; color:#8A887B;
  margin:1.6rem 0 0;
}

.hero__sub strong{ color:var(--white); font-weight:600; }

.lede{
  max-width:62ch;
  font-size:1.08rem;
  color:var(--graphite);
  margin:-1.6rem 0 2.6rem;
}

/* ---------- service deep-dives ---------- */
.svc{
  display:grid; gap:0;
  border-top:2px solid var(--ink);
}
.svc__item{
  padding:2.2rem 0 2.4rem;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
  gap:1.5rem 3rem;
  align-items:start;
}
.svc__item h3{
  font-family:'Archivo Black', sans-serif; font-weight:400;
  font-size:clamp(1.3rem, 2.4vw, 1.75rem);
  line-height:1.1; letter-spacing:-.015em;
  margin:0;
  position:relative; padding-top:1rem;
}
.svc__item h3::before{
  content:""; position:absolute; top:0; left:0; width:44px; height:4px;
  background:var(--yellow);
}
.svc__item > p{ margin:0 0 1rem; color:var(--graphite); grid-column:2; }
.svc__item > p:last-child{ margin-bottom:0; }
.svc__tags{
  font-family:'Barlow Condensed', sans-serif;
  text-transform:uppercase; letter-spacing:.1em;
  font-size:.82rem; color:var(--ink) !important;
  border-top:1px solid var(--line); padding-top:.8rem;
}

/* ---------- service area ---------- */
.areas{
  list-style:none; margin:0 0 1.4rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.areas li{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:100px;
  padding:.35rem .95rem;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:.85rem;
}
.areas__note{ margin:0; color:var(--graphite); font-size:.99rem; max-width:60ch; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid #34342A; }
.faq__q{ border-bottom:1px solid #34342A; }
.faq__q summary{
  cursor:pointer; list-style:none;
  padding:1.15rem 2.5rem 1.15rem 0;
  position:relative;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(1.02rem, 2vw, 1.2rem);
  color:var(--white);
}
.faq__q summary::-webkit-details-marker{ display:none; }
.faq__q summary::after{
  content:"+";
  position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
  font-family:'Archivo Black', sans-serif;
  font-size:1.4rem; color:var(--yellow); line-height:1;
}
.faq__q[open] summary::after{ content:"\2013"; }
.faq__q summary:hover{ color:var(--yellow); }
.faq__a{ padding:0 2.5rem 1.4rem 0; }
.faq__a p{ margin:0; color:#ABA99C; max-width:72ch; }

@media (max-width: 760px){
  .svc__item{ grid-template-columns:1fr; gap:1rem; }
  .svc__item > p{ grid-column:1; }
  .lede{ margin-bottom:2rem; }
}

/* ============================================================
   Form states — Formspree AJAX success / error / validation
   ============================================================ */

/* Honeypot: hidden from people, visible to bots. Not display:none,
   because some bots skip those. */
.hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; opacity:0;
  pointer-events:none;
}

.opt{ opacity:.55; font-weight:500; letter-spacing:.06em; }

/* Banners collapse entirely until Formspree puts text in them */
.form__success:empty,
.form__alert:empty,
.form__err:empty{ display:none; }

.form__success{
  background:rgba(78,155,46,.14);
  border-left:5px solid var(--green);
  border-radius:var(--r);
  color:#CFEAC0;
  padding:1rem 1.15rem;
  margin-bottom:1.6rem;
  font-size:1.02rem;
}
.form__alert{
  background:rgba(214,72,52,.14);
  border-left:5px solid #D64834;
  border-radius:var(--r);
  color:#F3C3BA;
  padding:1rem 1.15rem;
  margin-bottom:1.6rem;
  font-size:1.02rem;
}

.form__err{
  display:block;
  margin-top:.35rem;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  font-size:.82rem;
  color:#F09A8B;
}

/* Fields Formspree flags come back with aria-invalid */
.form [aria-invalid="true"]{
  border-color:#D64834;
  background:rgba(214,72,52,.08);
}

/* Button while the request is in flight */
.form button[disabled]{
  opacity:.55;
  cursor:progress;
  transform:none;
}

/* Date input needs help staying legible on a dark field in Chrome */
.form input[type="date"]{
  color-scheme:dark;
  min-height:calc(1rem * 1.6 + 1.5rem + 4px);
}