/* ==========================================================================
   KAZ COATINGS — kazcoatings.com
   Single stylesheet. No build step, no preprocessor. Edit directly.

   Order: fonts → tokens → base → surfaces → components → sections →
          footer → mobile bar → responsive → reduced motion
   ========================================================================== */

/* ============ FONTS (self-hosted — never link Google Fonts) ============
   Montserrat ships as a variable font, so one file covers 400/500/700.
   Barlow Condensed is two static instances (500 wordmark, 600 UI).
   Latin subset only — the site has no non-latin copy. */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-var-latin.woff2') format('woff2-variations'),
       url('../fonts/montserrat-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ============ TOKENS ============ */
:root{
  --orange:#FF6A00; --orange-dark:#CC5500; --orange-lt:#FF8534;
  --black:#1A1A1A; --deep:#0F0F0F; --charcoal:#2B2B2B;
  --offwhite:#F5F3EF; --silver:#A8AAAE; --midgray:#6E6E72;
  --hair:rgba(245,243,239,.13);
  --hair-dk:rgba(26,26,26,.14);
  --r:10px; --r-sm:6px;
  --panel-shadow:0 18px 44px rgba(0,0,0,.55);
  --edge:inset 0 1px 0 rgba(245,243,239,.07);
  --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,sans-serif;
  color:var(--offwhite); line-height:1.65; background:var(--deep);
  -webkit-font-smoothing:antialiased; position:relative;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Keyboard focus ring. Orange on dark, dark on the light/orange sections. */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
.s-light a:focus-visible,.trust a:focus-visible,.final a:focus-visible{outline-color:var(--black)}

/* Skip link — visible only when focused */
.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{left:14px;top:14px;background:var(--orange);color:#FFF;
  padding:12px 20px;border-radius:var(--r-sm);font-weight:600}

/* ============ FIXED METALLIC BACKGROUND ============ */
.bg-base,.bg-veil{position:fixed;inset:0;z-index:-3;pointer-events:none}
.bg-base{
  background:
    radial-gradient(ellipse 46% 34% at 78% 16%, rgba(255,106,0,.52), transparent 64%),
    radial-gradient(ellipse 38% 30% at 22% 72%, rgba(255,133,52,.34), transparent 62%),
    radial-gradient(ellipse 44% 32% at 52% 44%, rgba(245,243,239,.20), transparent 60%),
    radial-gradient(ellipse 34% 26% at 8% 20%, rgba(168,170,174,.20), transparent 62%),
    radial-gradient(ellipse 40% 30% at 92% 84%, rgba(255,106,0,.26), transparent 62%),
    linear-gradient(152deg,#121213 0%,#1E1E20 38%,#0C0C0D 72%,#171718 100%);
}
.bg-veil{
  z-index:-2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:cover; mix-blend-mode:overlay; opacity:.72;
}
.bg-grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

/* ============ TYPE ============ */
.eyebrow{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.22em;color:var(--silver);
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
.eyebrow .sl{color:var(--orange);letter-spacing:0}
h1,h2,h3{font-weight:700;line-height:1.12;letter-spacing:-.015em}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:1.12rem;letter-spacing:0;line-height:1.3}
.lede{color:var(--silver);font-size:1.05rem;max-width:60ch;margin-top:18px}
section{padding:100px 0;position:relative}

/* ============ SECTION SURFACES ============ */
.s-dark{background:rgba(26,26,26,.955);border-top:1px solid var(--hair);box-shadow:var(--edge)}
.s-deep{background:rgba(15,15,15,.94);border-top:1px solid var(--hair);box-shadow:var(--edge)}
.s-char{background:rgba(43,43,43,.94);border-top:1px solid var(--hair);box-shadow:var(--edge)}
.s-open{background:rgba(15,15,15,.62);border-top:1px solid rgba(255,106,0,.22)}
.s-light{background:var(--offwhite);color:var(--black)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:1.06rem;
  letter-spacing:.11em;text-transform:uppercase;padding:17px 34px;
  border:1.5px solid transparent;border-radius:var(--r-sm);cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange);color:#FFF;box-shadow:0 6px 18px rgba(255,106,0,.28)}
.btn-primary:hover{background:var(--orange-dark)}
.btn-ghost{background:transparent;color:var(--offwhite);border-color:rgba(245,243,239,.32)}
.btn-ghost:hover{border-color:var(--offwhite);background:rgba(245,243,239,.08)}
.btn-dark{background:var(--black);color:var(--offwhite);border-color:var(--black)}
.btn-dark:hover{background:var(--charcoal)}

/* ============ LOGO LOCKUP ============ */
.lockup{display:flex;align-items:center;gap:15px}
.symbol{width:54px;height:54px;flex:none;object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(255,106,0,.28))}
.wordmark{display:flex;flex-direction:column;gap:6px}
.mark{
  font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:1.42rem;
  text-transform:uppercase;letter-spacing:.16em;white-space:nowrap;line-height:1;
  position:relative;overflow:hidden;
}
.mark .k{color:var(--orange)}
.mark .s1{color:var(--offwhite)}
.mark .s2{color:var(--orange)}
.mark .c{color:var(--offwhite)}
.tagline{
  font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:.63rem;
  text-transform:uppercase;letter-spacing:.235em;color:var(--silver);
  white-space:nowrap;line-height:1;
}

/* typewriter reveal — header only, once on load */
.type .mark{width:0;animation:type 1.15s steps(16,end) .25s forwards}
.type .mark::after{
  content:"";position:absolute;right:0;top:6%;height:88%;width:2px;
  background:var(--orange);animation:blink .5s steps(1) 6, fadeout .01s 3.1s forwards;
}
.type .symbol{opacity:0;animation:pop .5s cubic-bezier(.2,.9,.3,1.4) forwards}
.type .tagline{opacity:0;animation:fadeup .6s ease 1.5s forwards}
@keyframes type{to{width:100%}}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes fadeout{to{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.72) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ============ HEADER ============ */
header{position:sticky;top:0;z-index:60;background:rgba(12,12,13,.92);
  backdrop-filter:blur(11px);border-bottom:1px solid var(--hair)}
.nav{display:flex;align-items:center;justify-content:space-between;height:96px}
.navlinks{display:flex;gap:46px;align-items:center}
.navlinks a{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:1rem;
  text-transform:uppercase;letter-spacing:.13em;color:var(--silver);transition:color .18s;
  white-space:nowrap}
.navlinks a:hover{color:var(--offwhite)}
.nav .btn{padding:13px 26px;font-size:.96rem;margin-left:26px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;
  cursor:pointer}
.burger span{width:24px;height:2px;background:var(--offwhite);display:block;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
/* burger → X while the panel is open */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile nav panel — hidden entirely above 960px, where .navlinks takes over */
.mobilenav{display:none;border-top:1px solid var(--hair);background:rgba(12,12,13,.98)}
.mobilenav a{display:block;padding:17px 0;border-bottom:1px solid var(--hair);
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:1.06rem;
  text-transform:uppercase;letter-spacing:.13em;color:var(--silver)}
.mobilenav a:last-child{border-bottom:0}
.mobilenav a:hover{color:var(--offwhite)}

/* ============ HERO ============ */
/* The photo's brightest region — daylight through the open door and its
   reflection — sits left of centre, which is exactly where the headline goes.
   background-position pushes that toward the left edge so the quieter interior
   wall lands behind the type wherever the image gets cropped horizontally.
   The ::before gradient below does the rest of the work. */
.hero{min-height:86vh;display:flex;align-items:center;padding:110px 0 96px;position:relative;
  background-image:url('../img/hero-bg-1408.webp');
  background-size:cover;background-position:72% center;background-repeat:no-repeat;
  background-color:var(--deep)}
@media(max-width:960px){
  .hero{background-image:url('../img/hero-bg-960.webp')}
}
/* Scrim strength is set by measured contrast, not by eye. The stops hold the
   headline, subhead and eyebrow at WCAG AA over the photo while leaving the
   right-hand side of the shot readable as an image. */
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(10,10,11,.96) 0%,rgba(10,10,11,.92) 44%,
    rgba(10,10,11,.74) 72%,rgba(10,10,11,.40) 100%)}
/* Below 960px the copy spans nearly the full width, so the ramp has to stay
   dark all the way across rather than falling off to the right. */
@media(max-width:960px){
  .hero::before{background:linear-gradient(96deg,rgba(10,10,11,.95) 0%,
    rgba(10,10,11,.88) 50%,rgba(10,10,11,.74) 100%)}
}
.hero .wrap{position:relative;z-index:2}
.hero-inner{max-width:830px;border-left:2px solid var(--orange);padding-left:34px}
.hero h1{font-size:clamp(2.3rem,5.6vw,4.15rem);margin-bottom:26px;
  text-shadow:0 3px 26px rgba(0,0,0,.6)}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero-sub{font-size:1.16rem;color:#C9CBCE;max-width:56ch;margin-bottom:38px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}

/* ============ INTERIOR PAGE HEADER ============ */
/* Masthead for pages below the homepage: the hero's orange left rule and
   type scale, without the 86vh height or the photo. */
.pagehead{padding:74px 0 64px;background:rgba(15,15,15,.72);
  border-bottom:1px solid var(--hair)}
.pagehead .inner{max-width:830px;border-left:2px solid var(--orange);padding-left:34px}
.pagehead h1{font-size:clamp(2rem,4.4vw,3.3rem)}

/* ============ TRUST BAR ============ */
.trust{background:var(--orange);position:relative;z-index:3;
  box-shadow:0 14px 34px rgba(0,0,0,.42)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{padding:28px 26px;border-right:1px solid rgba(26,26,26,.20);
  display:flex;gap:14px;align-items:flex-start}
.trust-item:last-child{border-right:0}
.trust-item svg{width:24px;height:24px;stroke:#FFF;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
.trust-item strong{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:1.1rem;letter-spacing:.11em;text-transform:uppercase;color:#FFF;margin-bottom:3px}
.trust-item span{display:block;font-size:.84rem;color:rgba(255,255,255,.9);line-height:1.45}

/* ============ SERVICES ============ */
.sec-head{margin-bottom:56px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:linear-gradient(165deg,#303032 0%,#232325 100%);
  padding:42px 34px 38px;border:1px solid var(--hair);border-radius:var(--r);
  box-shadow:var(--panel-shadow),var(--edge);position:relative;overflow:hidden;
  transition:border-color .2s ease,transform .2s ease}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--orange);transition:width .2s ease}
.card:hover{border-color:rgba(255,106,0,.42);transform:translateY(-3px)}
.card:hover::before{width:3px}
.card .ico{width:32px;height:32px;stroke:var(--orange);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:22px}
/* Cards are h3 under a section h2 on the homepage, but h2 on the services
   index where there is no section heading above them. Same look either way. */
.card h2,.card h3{font-size:1.12rem;letter-spacing:0;line-height:1.3;margin-bottom:12px}
.card p{font-size:.93rem;color:var(--silver);margin-bottom:20px}
.card .more{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.94rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}

/* ============ GALLERY ============ */
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:44px;flex-wrap:wrap}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.slot{position:relative;overflow:hidden;border-radius:var(--r);
  background:linear-gradient(140deg,#1F1F21 0%,#2A2A2E 52%,#151516 100%);
  border:1px solid var(--hair);box-shadow:var(--panel-shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:18px;transition:border-color .2s}
.slot:hover{border-color:rgba(255,106,0,.35)}
/* Lead slot spans 2x2 so it lands at the 4:3 the hero shot is briefed at. */
.slot.lead{grid-column:span 2;grid-row:span 2}
.slot .lbl{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.78rem;
  letter-spacing:.19em;text-transform:uppercase;color:rgba(255,106,0,.85);margin-bottom:7px}
.slot .desc{font-size:.79rem;color:var(--midgray);line-height:1.45;max-width:26ch}
.slot .tag{position:absolute;top:12px;left:12px;border-radius:4px;
  font-family:'Barlow Condensed',sans-serif;font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:#FFF;background:rgba(255,106,0,.92);padding:4px 9px}

/* Portrait placeholder — the About page photo slot. 4:5 crop. */
.slot.portrait{aspect-ratio:4/5;height:auto}
.bio{margin-top:0;align-items:start}
.bio h2{margin-bottom:14px}

/* ============ DIFFERENTIATORS ============ */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;margin-top:54px}
.diff-item{border:1px solid var(--hair);border-radius:var(--r);padding:30px 28px;
  background:rgba(26,26,26,.62);box-shadow:var(--edge)}
.diff-item h3{margin-bottom:12px}
.diff-item h3 .sl{color:var(--orange);margin-right:9px;font-family:'Barlow Condensed',sans-serif}
.diff-item p{font-size:.95rem;color:var(--silver)}

/* ============ PROCESS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:54px}
.step{background:linear-gradient(165deg,#232325 0%,#1A1A1B 100%);padding:34px 28px 32px;
  border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--panel-shadow),var(--edge)}
.step .num{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:2.5rem;
  color:var(--orange);line-height:1;display:block;margin-bottom:16px}
.step h3{margin-bottom:11px;font-size:1.04rem}
.step p{font-size:.9rem;color:var(--silver)}
.procshots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
/* 3:2 — the ratio the process shots are briefed at */
.procshots .slot{aspect-ratio:3/2;height:auto}

/* ============ SHOWCASE ============ */
.s-light .eyebrow{color:var(--midgray)}
.found-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start}
.s-light h2{margin-bottom:22px}
/* Body copy only — scoped so it can't repaint .eyebrow or the card's .price */
.s-light .found-grid>div>p:not(.eyebrow){color:#43464A;margin-bottom:18px;max-width:56ch}
.terms{border-left:2px solid var(--orange);padding:4px 0 4px 24px;margin:30px 0}
.terms li{list-style:none;font-size:.95rem;color:#43464A;padding:9px 0;
  border-bottom:1px solid var(--hair-dk)}
.terms li:last-child{border-bottom:0}
.terms li b{color:var(--black);font-weight:600}
.found-card{background:var(--black);color:var(--offwhite);border-radius:var(--r);
  overflow:hidden;box-shadow:0 22px 50px rgba(26,26,26,.34)}
/* 5:3 — briefed at 900x540 */
.found-shot{aspect-ratio:5/3;background:linear-gradient(140deg,#232326 0%,#2E2E33 50%,#161617 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-bottom:1px solid var(--hair);text-align:center;padding:16px}
.found-shot .lbl{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.78rem;
  letter-spacing:.19em;text-transform:uppercase;color:rgba(255,106,0,.85);margin-bottom:7px}
.found-shot .desc{font-size:.79rem;color:var(--midgray);line-height:1.45;max-width:26ch}
.found-body{padding:32px 30px 34px}
.found-card .price{font-family:'Barlow Condensed',sans-serif;font-size:2.5rem;font-weight:600;
  color:var(--orange);line-height:1.05}
.found-card .price small{display:block;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--silver);font-weight:500;margin-top:9px}
.found-card .fp{color:var(--silver)!important;font-size:.92rem;margin:18px 0 26px!important}
.found-card .btn{width:100%}

/* ============ AREA ============ */
.cities{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;max-width:920px}
.cities a,.cities span{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:1rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--silver);
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:9px 17px;transition:all .18s}
.cities a:hover{border-color:var(--orange);color:var(--orange);background:rgba(255,106,0,.07)}

/* ============ FAQ ============ */
.faq-list{margin-top:48px;max-width:900px;border:1px solid var(--hair);border-radius:var(--r);
  overflow:hidden;background:rgba(26,26,26,.55)}
details{border-bottom:1px solid var(--hair)}
details:last-child{border-bottom:0}
summary{cursor:pointer;list-style:none;padding:24px 56px 24px 26px;position:relative;
  font-weight:600;font-size:1.03rem;transition:color .18s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--orange)}
summary::after{content:"+";position:absolute;right:24px;top:50%;transform:translateY(-50%);
  color:var(--orange);font-size:1.55rem;font-weight:400;line-height:1}
details[open] summary::after{content:"\2013"}
details p{padding:0 40px 26px 26px;color:var(--silver);font-size:.95rem;max-width:70ch}

/* ============ GALLERY (/gallery/) ============ */
.gfilter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:36px}
.gchip{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.92rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--silver);
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:11px 16px;
  min-height:44px;display:inline-flex;align-items:center;transition:all .18s;cursor:pointer;
  background:transparent}
.gchip:hover{border-color:var(--orange);color:var(--orange)}
.gchip.on{background:var(--orange);border-color:var(--orange);color:#FFF}

.ggrid{display:grid;grid-template-columns:1fr;gap:26px}
.gcard{background:linear-gradient(165deg,#303032 0%,#232325 100%);
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--panel-shadow),var(--edge)}
.gcard.is-hidden{display:none}
.gbody{padding:22px 20px 24px}
.gbody h2{font-size:1.12rem;letter-spacing:0;line-height:1.3;margin-bottom:8px}
.gmeta{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.86rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.gcap{font-size:.93rem;color:var(--silver)}
.gempty{color:var(--midgray);padding:30px 0}

.gshot{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gshot img{width:100%;height:auto;display:block}
.gthumbs{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.gthumbs img{border-radius:var(--r-sm);aspect-ratio:4/3;object-fit:cover}

/* Before/after slider. Without JS the range still works — it is a real input. */
.ba{position:relative;overflow:hidden;background:#141415;touch-action:pan-y}
.ba img{width:100%;height:100%;display:block;object-fit:cover;position:absolute;inset:0}
.ba-before-wrap{position:absolute;inset:0;width:50%;overflow:hidden;will-change:width}
.ba-before-wrap img{width:auto;height:100%;max-width:none}
.ba-tagb,.ba-taga{position:absolute;top:12px;z-index:3;border-radius:4px;padding:4px 9px;
  font-family:'Barlow Condensed',sans-serif;font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:#FFF;background:rgba(15,15,15,.78);pointer-events:none}
.ba-tagb{left:12px}
.ba-taga{right:12px;background:rgba(255,106,0,.92)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--orange);
  z-index:3;pointer-events:none;transform:translateX(-1px)}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;
  margin:-19px 0 0 -19px;border-radius:50%;background:var(--orange);
  box-shadow:0 2px 12px rgba(0,0,0,.5)}
.ba-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;
  cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.ba-range:focus-visible{opacity:1;outline:2px solid var(--orange);outline-offset:-4px}

/* Lightbox */
.lbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,9,.94);padding:20px}
.lbox[hidden]{display:none}
.lbox figure{max-width:1200px;max-height:100%;display:flex;flex-direction:column;gap:12px}
.lbox img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r);margin:0 auto}
.lbox figcaption{color:var(--silver);font-size:.86rem;text-align:center}
.lbox-close{position:absolute;top:14px;right:14px;width:48px;height:48px;cursor:pointer;
  background:rgba(26,26,26,.9);border:1px solid var(--hair);border-radius:50%;
  color:var(--offwhite);font-size:1.6rem;line-height:1}
.lbox-close:hover{border-color:var(--orange);color:var(--orange)}

@media(min-width:760px){
  .ggrid{grid-template-columns:1fr 1fr}
}

/* ============ FORMS ============ */
/* Honeypot: off-screen rather than display:none. Some bots skip hidden inputs,
   and a positioned field still gets filled. aria-hidden keeps it off the
   accessibility tree so nobody using a screen reader ever meets it. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.kform{max-width:640px}
.kform.wide{max-width:820px}
.kform label{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;font-size:.82rem;color:var(--silver);
  margin:20px 0 7px}
.kform .req{color:var(--orange)}
/* 16px minimum or iOS zooms the whole page on focus. */
.kform input[type=text],.kform input[type=tel],.kform input[type=email],
.kform select,.kform textarea{
  width:100%;font-family:'Montserrat',sans-serif;font-size:16px;color:var(--offwhite);
  background:rgba(15,15,15,.8);border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:13px 12px;min-height:50px}
.kform textarea{line-height:1.55;resize:vertical}
.kform input[type=file]{width:100%;color:var(--silver);font-size:14px;padding:12px 0}
.kform input:focus-visible,.kform select:focus-visible,.kform textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px}
.kform .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kform .btn.block{width:100%;margin-top:26px;min-height:54px}
.kform .hint{color:var(--midgray);font-size:.84rem;margin-top:8px;line-height:1.5}

.msg{border-radius:var(--r-sm);padding:13px 15px;margin:16px 0;font-size:.92rem;
  border:1px solid var(--hair);background:rgba(26,26,26,.7);max-width:820px}
.msg.err{border-color:#8c2f2f;background:rgba(80,26,26,.45)}

.contactcard{background:var(--charcoal);border:1px solid var(--hair);border-radius:var(--r);
  box-shadow:var(--panel-shadow),var(--edge);padding:26px 22px}
.contactcard h2{font-size:1.05rem;letter-spacing:0;margin-bottom:16px}
.contactcard .btn.block{width:100%}

@media(max-width:640px){
  .kform .two{grid-template-columns:1fr;gap:0}
}

/* ============ FINAL CTA ============ */
.final{background:var(--orange);color:#FFF;text-align:center;
  box-shadow:0 -12px 34px rgba(0,0,0,.35)}
.final h2{margin-bottom:16px;color:#FFF}
.final p{max-width:52ch;margin:0 auto 34px;color:rgba(255,255,255,.93)}
.final .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.final .btn-ghost{border-color:rgba(255,255,255,.55);color:#FFF}
.final .btn-ghost:hover{background:rgba(255,255,255,.15);border-color:#FFF}

/* ============ FOOTER ============ */
footer{background:rgba(10,10,11,.97);padding:76px 0 0;font-size:.9rem;
  border-top:1px solid var(--hair);position:relative}
/* Row gap runs wider than the column gap: when this stacks, the wordmark's
   tagline sits directly above the next column heading. */
/* The tagline is nowrap, so column 1 bottoms out at its min-content width
   (~270px) around 1000px and the tagline ends flush with the column edge.
   The column gap is the only thing separating it from Services — 44px left
   only ~15px of visible air, so it runs wider. */
.f-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:56px 52px;padding-bottom:52px}
.f-col .lockup{margin-bottom:18px}
.f-col h2{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.9rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--offwhite);margin-bottom:20px}
.f-col a,.f-col p{color:var(--silver);display:block;margin-bottom:9px;transition:color .18s}
.f-col a:hover{color:var(--orange)}
/* A linked column heading should still read as the heading, not as a list item */
.f-col h2 a{color:inherit;display:inline;margin:0}
.f-col h2 a:hover{color:var(--orange)}
.f-col .symbol{width:46px;height:46px}
.f-col .mark{font-size:1.24rem}
.f-col .tagline{font-size:.57rem}
.f-contact{display:flex;align-items:center;gap:11px;margin-bottom:11px;color:var(--silver)}
.f-contact svg{width:16px;height:16px;stroke:var(--orange);fill:none;stroke-width:1.7;flex:none}
.f-contact a{display:inline;margin:0}
.f-nap{margin-top:22px;font-style:normal}
/* Retained while the footer markup is pulled — the profiles aren't live yet. */
.social{display:flex;gap:14px;margin-top:18px}
.social svg{width:19px;height:19px;fill:var(--silver);transition:fill .18s}
.social a{margin-bottom:0}
.social a:hover svg{fill:var(--offwhite)}
.f-hours{margin-top:24px}
.f-bar{border-top:1px solid var(--hair);padding:24px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;color:var(--midgray);font-size:.82rem}
.f-bar a{color:var(--midgray)}
.f-bar a:hover{color:var(--orange)}

/* ============ MOBILE BAR ============ */
.mbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;
  box-shadow:0 -6px 20px rgba(0,0,0,.5)}
/* Tracking is tighter than the other buttons so the full phone number fits
   inside half a 320px viewport without wrapping. */
.mbar a{flex:1;padding:17px 6px;text-align:center;font-family:'Barlow Condensed',sans-serif;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.94rem;
  white-space:nowrap}
.mbar .call{background:var(--black);color:var(--offwhite)}
.mbar .quote{background:var(--orange);color:#FFF}

/* ============ SCROLL REVEAL ============ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* Nav collapses earlier than the rest of the layout. With the 46px link gap,
   the lockup + links + button stop fitting comfortably around 1050px, well
   before the 960px breakpoint the content grids use. */
@media(max-width:1060px){
  .navlinks{display:none}.burger{display:flex}.nav .btn{display:none}
  .mobilenav.open{display:block}
}
@media(max-width:960px){
  .grid3,.steps{grid-template-columns:repeat(2,1fr)}
  .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(2){border-right:0}
  .trust-item:nth-child(1),.trust-item:nth-child(2){border-bottom:1px solid rgba(26,26,26,.2)}
  .found-grid{grid-template-columns:1fr;gap:40px}
  .f-grid{grid-template-columns:1fr;gap:52px}
}
@media(max-width:640px){
  section{padding:68px 0}
  .wrap{padding:0 20px}
  /* Two trust columns need ~207px each for the longest label; below 640px
     that overflows the viewport, so they stack. */
  .trust-grid{grid-template-columns:1fr}
  .trust-item{border-right:0;border-bottom:1px solid rgba(26,26,26,.2)}
  .trust-item:last-child{border-bottom:0}
  .grid3,.steps,.grid2,.procshots{grid-template-columns:1fr}
  .hero{min-height:auto;padding:76px 0 66px}
  .hero-inner{padding-left:22px}
  .pagehead{padding:52px 0 46px}
  .pagehead .inner{padding-left:22px}
  /* As a flex row each phrase wraps inside its own item, which splits the
     line into "LEGGARI® CERTIFIED / APPLICATOR" beside "// FRANKLIN, / INDIANA".
     Flowing it as text wraps it as one sentence instead. */
  .eyebrow{display:block}
  .eyebrow .sl{margin:0 5px}
  .nav{height:82px}
  .symbol{width:44px;height:44px}
  .mark{font-size:1.16rem;letter-spacing:.14em}
  .tagline{font-size:.54rem;letter-spacing:.19em}
  .gal-grid{grid-template-columns:1fr;grid-auto-rows:190px}
  .slot.lead{grid-column:span 1;grid-row:span 1}
  .hero-cta .btn{width:100%}
  .mbar{display:flex}
  body{padding-bottom:58px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .type .mark{width:auto}.type .symbol,.type .tagline{opacity:1}
  .rv{opacity:1;transform:none}
}