/* TechShield Epoxy Floors — static site styles
   Brand: navy / gold / red on charcoal + warm white */
:root{
  /* Brand palette sampled from the TechShield shield logo:
     charcoal shield, brushed-steel lettering, deep red chevron */
  --navy:#141414; --navy-2:#1f1f1f; --navy-3:#2f2f2f;      /* coal */
  --gold:#b9bdc2; --gold-2:#e4e6e8;                         /* steel */
  --red:#c3110d; --red-2:#9c0f0c; --red-3:#d81e18;
  --red-on-dark:#ff5f56;   /* brand red lightened for small text on coal: AA at 5.8:1 */
  --ink:#1a1a1a; --muted:#5c6168; --line:#dcdee2;
  --bg:#ffffff; --bg-2:#f6f6f7; --bg-3:#ebecee;
  --radius:12px; --shadow:0 8px 28px rgba(0,0,0,.12);
  --max:1160px;
  --head:"Barlow Condensed","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;padding-bottom:64px}
img,svg{max-width:100%;height:auto}
a{color:var(--navy-3);text-underline-offset:3px}
a:hover{color:var(--red)}
h1,h2,h3,h4{font-family:var(--head);line-height:1.08;color:var(--navy);margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:clamp(2.4rem,6.2vw,4.2rem);font-weight:800;text-transform:uppercase}
h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:700;text-transform:uppercase}
h3{font-size:1.5rem;font-weight:700}
p{margin:0 0 1.1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section.alt{background:var(--bg-2)}
.section.dark{background:var(--navy);color:#e9eaec}
.section.dark h2,.section.dark h3{color:#fff}
.eyebrow{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;color:var(--red);font-weight:700;font-size:1.05rem;margin-bottom:.4em;display:block}
.dark .eyebrow{color:var(--red-on-dark)}
.lead{font-size:1.18rem;color:var(--muted);max-width:60ch}
.dark .lead{color:#c6c8cc}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#000;padding:10px 14px;z-index:99}
.skip:focus{left:8px;top:8px}

/* header */
.topbar{background:var(--navy);color:#cbcdd1;font-size:.88rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--red);box-shadow:0 2px 12px rgba(0,0,0,.09)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:74px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--navy)}
.brand img{width:54px;height:54px;flex:none;object-fit:contain;display:block}
.site-footer .brand img{width:60px;height:60px}
.brand b{font-family:var(--head);font-size:1.6rem;letter-spacing:.03em;text-transform:uppercase;line-height:1;display:block}
.brand small{font-family:var(--head);font-size:.88rem;letter-spacing:.21em;color:var(--red);text-transform:uppercase;font-weight:700;display:block}
.site-footer .brand small{color:var(--gold)}
nav.main ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;align-items:center}
nav.main a{display:block;padding:10px 9px;text-decoration:none;font-weight:600;font-size:.92rem;color:var(--navy);border-radius:8px;white-space:nowrap}
nav.main a:hover,nav.main a[aria-current="page"]{background:var(--bg-3);color:var(--red)}
/* Phones and small tablets: no menu button. The header stacks and the links
   become a single horizontally scrollable strip. */
@media(max-width:880px){
  .site-header .wrap{flex-direction:column;align-items:stretch;gap:0;padding-top:10px;padding-bottom:0;min-height:0}
  .brand{align-self:flex-start;padding-bottom:8px}
  nav.main{margin:0 -20px;border-top:1px solid var(--line)}
  nav.main ul{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:0;padding:0 14px;flex-wrap:nowrap}
  nav.main ul::-webkit-scrollbar{display:none}
  nav.main li{flex:0 0 auto}
  nav.main a{padding:13px 10px;border-radius:0;font-size:.92rem;border-bottom:3px solid transparent}
  nav.main a[aria-current="page"]{background:transparent;border-bottom-color:var(--red);color:var(--red)}
  /* the sticky bottom bar already carries Call / Text / Free Quote on phones,
     so the duplicate CTA comes out of the scroll strip */
  nav.main li:last-child{display:none}
  /* fade on the right edge so it reads as scrollable */
  nav.main{position:relative}
  nav.main::after{content:"";position:absolute;top:1px;right:0;bottom:0;width:34px;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),#fff 72%)}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:10px;font-weight:800;text-decoration:none;border:2px solid transparent;font-size:1rem;cursor:pointer;font-family:var(--body);line-height:1.1}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-2);color:#fff}
.btn-gold{background:linear-gradient(180deg,#e9ebec 0%,#c3c7cb 52%,#9ea3a9 100%);color:#141414;border-color:#8c9197;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}.btn-gold:hover{background:linear-gradient(180deg,#fff 0%,#d4d7da 52%,#aeb3b9 100%);color:#141414}
.btn-line{border-color:#fff;color:#fff}.btn-line:hover{background:#fff;color:var(--navy)}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--navy-3);color:#fff}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

/* hero */
.hero{position:relative;color:#fff;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,#2f2f2f 100%);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url(../img/swatch-flake.svg) center/520px;opacity:.09;mix-blend-mode:screen}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,var(--red) 0%,var(--red-3) 45%,var(--gold) 100%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;padding-top:56px;padding-bottom:64px}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--red-3);text-shadow:0 1px 0 rgba(0,0,0,.35)}
.hero p.lead{color:#d4d6da}
.hero.small .wrap{grid-template-columns:1.2fr .8fr;padding-top:42px;padding-bottom:48px}
.hero.single .wrap{grid-template-columns:1fr}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0;padding:0;list-style:none}
.pill-row li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:6px 12px;border-radius:999px;font-size:.88rem;font-weight:600}
@media(max-width:900px){.hero .wrap,.hero.small .wrap{grid-template-columns:1fr;padding-top:36px;padding-bottom:44px}}
/* Phones/stacked hero: drop the top form; the page's closing form takes the lead. */
@media(max-width:900px){.hero-form{display:none}}

/* form card */
.card-form{background:#fff;color:var(--ink);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border-top:6px solid var(--red)}
.card-form h2{font-size:1.75rem;margin-bottom:.15em}
.card-form .sub{color:var(--muted);font-size:.95rem;margin-bottom:14px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f{margin-bottom:12px}
.f label{display:block;font-weight:700;font-size:.88rem;margin-bottom:4px;color:var(--navy)}
.f input,.f select,.f textarea{width:100%;padding:12px;border:1.5px solid #c9ccd0;border-radius:9px;font:inherit;background:#fff;color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{outline:3px solid rgba(185,189,194,.45);border-color:var(--gold)}
.f textarea{min-height:84px;resize:vertical}
.check{display:flex;gap:10px;font-size:.82rem;color:var(--muted);align-items:flex-start;margin:6px 0 14px}
.check input{margin-top:3px;flex:none}
.card-form .btn{width:100%}
.hp{position:absolute;left:-9999px}
/* Phones: the quote form ran 1,144px — 1.4 screens for eight short questions.
   Keep the short pairs side by side instead of collapsing them, and tighten
   label size and field padding.
   The one thing NOT reduced is input font-size: iOS Safari auto-zooms the
   whole page when you focus an input below 16px, which is far worse than a
   tall form. Inputs stay at 17px; everything around them gets smaller. */
@media(max-width:700px){
  .f-row{grid-template-columns:1fr 1fr;gap:10px}
  .f{margin-bottom:9px}
  .f label{font-size:.78rem;margin-bottom:3px;line-height:1.25}
  .f input,.f select,.f textarea{padding:9px 10px;border-radius:8px}
  .f textarea{min-height:62px}
  .f input[type="file"]{padding:7px 10px}
  .check{font-size:.75rem;margin:2px 0 12px;line-height:1.35}
}
/* Only the very narrowest screens lose the two-up pairs. */
@media(max-width:319px){.f-row{grid-template-columns:1fr}}

/* trust bar */
.trust{background:linear-gradient(180deg,#e4e6e8,#b9bdc2);color:#141414;border-top:1px solid #cfd2d6;border-bottom:1px solid #9ea2a8}
.trust ul{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;list-style:none;margin:0;padding:14px 0;font-weight:800;font-size:.95rem;text-transform:uppercase;letter-spacing:.03em}
.trust li::before{content:"✓ ";color:var(--red)}

/* grids and cards */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:960px){.g3,.g4,.g5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.card h3{margin-bottom:.3em}
.card.hot{border-top:5px solid var(--red)}
.price{font-family:var(--head);font-size:2.4rem;font-weight:800;color:var(--red);line-height:1}
.price small{font-size:1rem;color:var(--muted);font-weight:600;font-family:var(--body)}
.step{counter-increment:s;position:relative;padding-top:54px}
.step::before{content:counter(s);position:absolute;top:0;left:0;width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;border:2px solid var(--red);font:800 1.5rem var(--head);display:grid;place-items:center}
.steps{counter-reset:s}
.checks{list-style:none;padding:0;margin:0 0 1em}
.checks li{padding-left:28px;position:relative;margin-bottom:8px}
.checks li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:900}

/* swatches */
.swatch{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;text-decoration:none;color:inherit;display:block}
.swatch img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.swatch div{padding:14px 16px}
.swatch b{font-family:var(--head);font-size:1.3rem;color:var(--navy);text-transform:uppercase;display:block}
.swatch span{font-size:.9rem;color:var(--muted)}
.note-small{font-size:.82rem;color:var(--muted)}

/* tables */
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.97rem}
.tbl th{background:var(--navy);color:#fff;text-align:left;padding:12px 14px;font-family:var(--head);font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase}
.tbl td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
.tbl tr:nth-child(even) td{background:var(--bg-2)}
.tbl-wrap{overflow-x:auto}

/* estimator */
.est{background:var(--navy);color:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.est h3{color:#fff;font-size:1.8rem}
.est .f label{color:#d4d6da}
.est .out{margin-top:6px;padding:16px;border-radius:10px;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.35)}
.est .out strong{font-family:var(--head);font-size:2.4rem;color:var(--gold-2);display:block;line-height:1.05}
.est .out small{color:#bdc0c5}

/* faq */
details.faq{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:10px}
details.faq summary{cursor:pointer;padding:16px 18px;font-weight:700;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:14px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--red);font-size:1.4rem;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq .a{padding:0 18px 16px;color:var(--ink)}

/* breadcrumbs, area chips */
.crumbs{font-size:.85rem;margin-bottom:14px;color:#9ea2a8}
.crumbs a{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.chips a{display:inline-block;padding:9px 16px;border-radius:999px;border:1.5px solid var(--navy);text-decoration:none;font-weight:700;color:var(--navy);background:#fff}
.chips a:hover{background:var(--navy);color:#fff}
.callout{border-left:6px solid var(--gold);background:#f4f4f5;padding:16px 20px;border-radius:8px;margin:20px 0}
.prose{max-width:76ch}
.prose h2{margin-top:1.4em}
.prose h3{margin-top:1.2em}
.two{display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:start}
/* grid items must be allowed to shrink below their min-content, or a wide
   child (the warranty table inside a padded .card) pushes the whole page
   wider than a phone screen and the document scrolls sideways. */
.two>*{min-width:0}

/* system build diagrams */
.diag-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start;margin-top:26px}
@media(max-width:980px){.diag-grid{grid-template-columns:1fr}}
.diag-fig{margin:0}
.sysdiag{width:100%;height:auto;display:block;max-width:640px}
.sysdiag .dg-t{font-family:var(--head);font-size:20px;font-weight:700;fill:var(--ink)}
.sysdiag .dg-d{font-size:15.5px;fill:var(--muted)}
.diag-fig figcaption{font-size:.85rem;color:var(--muted);margin-top:10px;max-width:640px}
.diag-spec{min-width:0}

/* flake colour picker */
.fc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:30px;align-items:start;margin-top:26px}
@media(max-width:900px){.fc{grid-template-columns:1fr}}
.fc-room{margin:0;min-width:0}
.fc-room img{width:100%;height:auto;display:block;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--bg-3);
  transition:opacity .18s ease}
.fc-room.is-swapping img{opacity:.35}
.fc-room figcaption{font-size:.88rem;color:var(--muted);margin-top:10px}
.fc-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;min-width:0;
  max-height:620px;overflow-y:auto;padding:2px 6px 2px 2px;overscroll-behavior:contain}
@media(max-width:900px){.fc-picker{grid-template-columns:repeat(4,minmax(0,1fr));max-height:none;overflow:visible}}
/* Phones: the grid of swatches becomes one swipeable strip under the big
   picture. Twenty-one chips stacked three-across pushed the page content a
   long way down; a strip keeps the photo and the choices on one screen.
   A partly visible chip at the right edge is the cue that it scrolls. */
@media(max-width:700px){
  .fc-picker{display:flex;flex-wrap:nowrap;grid-template-columns:none;
    overflow-x:auto;overflow-y:hidden;max-height:none;gap:10px;
    scroll-snap-type:x proximity;scroll-padding-left:2px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    padding:2px 2px 10px;margin-bottom:-6px}
  .fc-picker::-webkit-scrollbar{height:4px}
  .fc-picker::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
  .fc-picker .fc-chip{flex:0 0 auto;width:104px;scroll-snap-align:start}
  .fc-picker .fc-chip span{font-size:.76rem;padding:6px 7px}
}
.fc-chip{display:block;width:100%;padding:0;border:2px solid var(--line);background:#fff;
  border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;font:inherit;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.fc-chip img{width:100%;aspect-ratio:1;height:auto;object-fit:cover;display:block}
.fc-chip span{display:block;padding:7px 8px;font-weight:700;font-size:.8rem;color:var(--ink);line-height:1.2}
.fc-chip:hover{border-color:var(--navy-3);transform:translateY(-2px)}
.fc-chip[aria-checked="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(195,17,13,.16)}
.fc-chip:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* two-column checklist (What the price includes) */
@media(min-width:780px){.checks.two-col{column-count:2;column-gap:40px}
.checks.two-col li{break-inside:avoid;-webkit-column-break-inside:avoid}}
.two .tbl-wrap{max-width:100%}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.side{position:sticky;top:96px}

/* footer */
.site-footer{background:#0d0d0d;color:#aeb2b8;padding:52px 0 26px;margin-top:0}
.site-footer h4{color:#fff;font-size:1.2rem;text-transform:uppercase;letter-spacing:.08em}
.site-footer a{color:#dcdee1;text-decoration:none}
.site-footer a:hover{color:var(--gold-2)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:7px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;font-size:.84rem;display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}

/* sticky mobile action bar */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--navy);box-shadow:0 -4px 16px rgba(0,0,0,.25)}
.actionbar a{padding:15px 6px;text-align:center;color:#fff;text-decoration:none;font-weight:800;font-size:.95rem;border-right:1px solid rgba(255,255,255,.12)}
.actionbar a:last-child{border-right:0;background:var(--red)}
.actionbar a:first-child{background:var(--gold);color:#141414}
@media(min-width:900px){
  body{padding-bottom:0}
  .actionbar{display:none}
}
@media print{.actionbar,.site-header,.topbar{display:none}}

/* photo-backed section ("Prep is the product") */
.section.photo{position:relative;background:var(--navy);color:#e9eaec;overflow:hidden;isolation:isolate}
.section.photo::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:url(../img/prep-grinder.webp);background-size:cover;background-position:56% 46%;background-repeat:no-repeat}
.section.photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(13,13,13,.97) 0%,rgba(13,13,13,.91) 40%,rgba(13,13,13,.46) 62%,rgba(13,13,13,.56) 100%)}
.section.photo h2,.section.photo h3{color:#fff}
.section.photo p{color:#d4d6da}
.section.photo .eyebrow{color:var(--red-on-dark);text-shadow:0 1px 3px rgba(0,0,0,.85)}
.section.photo .checks li{color:#e9eaec}
.section.photo .checks li::before{color:var(--red-on-dark)}
.section.photo .note-small{color:#aeb2b8}
@media(max-width:900px){
  .section.photo::before{background-position:58% 38%}
  .section.photo::after{background:linear-gradient(180deg,rgba(13,13,13,.9) 0%,rgba(13,13,13,.86) 55%,rgba(13,13,13,.92) 100%)}
}

/* hero with a real job photo behind it.
   Overlay and image ride on ::before together so ::after stays the accent bar. */
.hero.photo::before{
  background-image:linear-gradient(100deg,rgba(13,13,13,.93) 0%,rgba(13,13,13,.84) 30%,rgba(13,13,13,.44) 58%,rgba(13,13,13,.52) 100%),
                   url(../img/prep-grinder.webp);
  background-size:cover,cover;background-position:center,58% 48%;background-repeat:no-repeat,no-repeat;
  opacity:1;mix-blend-mode:normal}
.hero.photo .wrap{position:relative;z-index:1}
.hero.photo .eyebrow{color:var(--gold-2);text-shadow:0 1px 4px rgba(0,0,0,.8)}
@media(max-width:900px){
  .hero.photo::before{
    background-image:linear-gradient(180deg,rgba(13,13,13,.93) 0%,rgba(13,13,13,.9) 50%,rgba(13,13,13,.95) 100%),
                     url(../img/prep-grinder.webp);
    background-position:center,54% 42%}
}

/* equal-height cards in a grid: push the CTA to the bottom edge */
.grid .card{display:flex;flex-direction:column}
.grid .card > *:last-child{margin-bottom:0}
.grid .card > p:last-child:has(.btn){margin-top:auto}
.grid .card .checks{margin-bottom:18px}

/* verifiable credential panel */
.card.cred{border-top:5px solid var(--red);background:#fff}
.cred-tag{display:inline-block;font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;
  font-size:.82rem;font-weight:700;color:#fff;background:var(--navy);padding:4px 10px;border-radius:5px;margin-bottom:10px}
.card.cred h3{margin-bottom:.2em}
.card.cred .tbl td:first-child{width:42%;color:var(--muted)}
.card.cred .tbl th{display:none}
.trust a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.trust a:hover{color:var(--red-2)}

/* white cards sitting inside a dark section keep dark text */
.section.dark .card,.section.photo .card{color:var(--ink);background:#fff}
.section.dark .card h3,.section.photo .card h3,
.section.dark .card h4,.section.photo .card h4{color:var(--navy)}
.section.dark .card p,.section.photo .card p,
.section.dark .card li,.section.photo .card li{color:var(--ink)}
.section.dark .card .note-small,.section.photo .card .note-small{color:var(--muted)}
.section.dark .card a:not(.btn),.section.photo .card a:not(.btn){color:var(--navy-3)}

/* photo with caption (team / project shots) */
.photo-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.photo-card img{display:block;width:100%;height:auto}
.photo-card figcaption{padding:14px 16px;font-size:.88rem;color:var(--muted);line-height:1.5}
.photo-card figcaption b{color:var(--navy)}

/* value-card line icons */
.card.val .vicon{width:42px;height:42px;display:block;margin-bottom:14px}
.card.val h3{margin-bottom:.3em}

/* project gallery tiles */
.grid.shots .shot{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05);transition:box-shadow .15s,transform .15s}
.grid.shots .shot:hover{box-shadow:0 8px 24px rgba(0,0,0,.14);transform:translateY(-2px)}
.grid.shots .shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.grid.shots .shot span{display:block;padding:12px 15px;font-size:.9rem;color:var(--muted)}

/* before / after comparison slider */
.ba-wrap{display:grid;gap:26px}
@media(min-width:1000px){.ba-wrap{grid-template-columns:1fr 1fr}}
.ba{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.ba-media{position:relative;line-height:0}
.ba img{display:block;width:100%;height:auto}
.ba-rev{position:absolute;top:0;left:0;right:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-tag{position:absolute;top:12px;z-index:3;font-family:var(--head);text-transform:uppercase;
  letter-spacing:.12em;font-size:.78rem;font-weight:700;color:#fff;background:rgba(13,13,13,.82);
  padding:5px 11px;border-radius:5px;line-height:1.2;pointer-events:none}
.ba-b{left:12px}
.ba-a{right:12px;background:var(--red)}
.ba-bar{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);z-index:4;pointer-events:none;transform:translateX(-50%)}
.ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;
  border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35);display:grid;place-items:center}
.ba-grip::before{content:"";width:0;height:0;border:6px solid transparent;
  border-right-color:var(--navy);margin-right:16px;position:absolute}
.ba-grip::after{content:"";width:0;height:0;border:6px solid transparent;
  border-left-color:var(--navy);margin-left:16px;position:absolute}
.ba-range{position:absolute;inset:0;width:100%;height:100%;z-index:5;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100vh;cursor:ew-resize}
.ba-range::-moz-range-thumb{width:44px;height:100vh;border:0;cursor:ew-resize}
.ba-range:focus-visible{opacity:1;outline:3px solid var(--red);outline-offset:-3px}
.ba figcaption{padding:13px 16px;font-size:.9rem;line-height:1.5;
  color:var(--muted);background:#fff}
.ba figcaption span{display:block;font-size:.8rem;color:#8a8f96;margin-top:2px}

/* scroll-snap carousel */
.car{position:relative}
.car-track{display:flex;gap:20px;list-style:none;margin:0;padding:2px 0 4px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:3px solid var(--red);outline-offset:4px;border-radius:var(--radius)}
.car-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start}
@media(min-width:960px){.car-slide{flex-basis:calc(50% - 10px)}}
.car-slide > .shot{height:100%}
/* Carousel tiles sit side by side, so every photo needs the same shape.
   Portrait phone shots next to landscape ones otherwise leave ragged gaps. */
.car-slide .shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.car-slide .shot{display:flex;flex-direction:column}
.car-slide .shot span{flex:1}
.car-btn{position:absolute;top:38%;z-index:6;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.96);box-shadow:0 3px 14px rgba(0,0,0,.22);
  display:grid;place-items:center;cursor:pointer;padding:0;transition:opacity .15s,transform .15s}
.car-btn svg{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.car-btn:hover{transform:scale(1.06)}
.car-btn:disabled{opacity:0;pointer-events:none}
.car-prev{left:-14px}
.car-next{right:-14px}
@media(max-width:620px){.car-prev{left:4px}.car-next{right:4px}}
.car-dots{display:flex;gap:9px;justify-content:center;margin-top:16px}
.car-dot{width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:#c3c7cc;transition:background .15s,transform .15s}
.car-dot.is-on{background:var(--red);transform:scale(1.25)}
.section.dark .car-dot{background:#4a4e54}
.section.dark .car-dot.is-on{background:var(--red-on-dark)}
/* Touch: vertical swipes over a before/after photo scroll the page (pan-y);
   horizontal drags are read in JS and move the divider. The range input stays
   for mouse and keyboard, but on touch screens it is taken out of the way,
   because a full-size native slider swallows the swipe the page needs. */
.ba-media{touch-action:pan-y}
@media(pointer:coarse){.ba-range{pointer-events:none}}

/* equal-height carousel slides */
.car-track{align-items:stretch}
.car-slide > .ba{height:100%;display:flex;flex-direction:column}
.car-slide > .ba figcaption{flex:1 0 auto}

/* interior heroes are shorter than the homepage, so the photo shows through
   higher up where the crumbs and eyebrow sit. Stronger wash + lighter type. */
.hero.photo.small::before{
  background-image:linear-gradient(100deg,rgba(13,13,13,.97) 0%,rgba(13,13,13,.93) 42%,rgba(13,13,13,.58) 66%,rgba(13,13,13,.66) 100%),
                   url(../img/prep-grinder.webp);
  background-position:center,58% 52%}
.hero.photo .crumbs{color:#dcdee1}
.hero.photo .crumbs a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hero.photo .crumbs span{color:#c6c8cc}
@media(max-width:900px){
  .hero.photo.small::before{
    background-image:linear-gradient(180deg,rgba(13,13,13,.94) 0%,rgba(13,13,13,.91) 50%,rgba(13,13,13,.95) 100%),
                     url(../img/prep-grinder.webp);
    background-position:center,54% 46%}
}

/* social profile icons */
.soc-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.soc{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);transition:background .15s,transform .15s}
.soc svg{width:21px;height:21px;fill:#dfe6f4}
.soc:hover{background:var(--red);transform:translateY(-2px)}
.soc:hover svg{fill:#fff}
.soc:focus-visible{outline:3px solid var(--red-on-dark);outline-offset:2px}

/* Warranty table: three columns do not fit in a narrow space (a phone, or the
   side card next to the FAQ on desktop), so each row stacks into a block -
   system name on top, location and warranty labelled underneath. Keyed to the
   width the table actually has, not the screen. */
.tbl-wrap:has(.tbl-stack){container-type:inline-size}
@container (max-width:520px){
  .tbl-stack thead{display:none}
  .tbl-stack,.tbl-stack tbody,.tbl-stack tr,.tbl-stack td{display:block;width:100%}
  .tbl-stack tr{padding:12px 14px;border-top:1px solid var(--line)}
  .tbl-stack tbody tr:first-child{border-top:0}
  .tbl-stack tr:nth-child(even){background:var(--bg-2)}
  .tbl-stack td,.tbl-stack tr:nth-child(even) td{padding:0;border:0;background:none}
  .tbl-stack td:first-child{font-weight:600;margin-bottom:4px}
  .tbl-stack td[data-label]{font-size:.93rem;line-height:1.5}
  .tbl-stack td[data-label]::before{content:attr(data-label) ": ";color:var(--muted)}
}
@supports not (container-type:inline-size){@media(max-width:600px){
  .tbl-stack thead{display:none}
  .tbl-stack,.tbl-stack tbody,.tbl-stack tr,.tbl-stack td{display:block;width:100%}
  .tbl-stack tr{padding:12px 14px;border-top:1px solid var(--line)}
  .tbl-stack td,.tbl-stack tr:nth-child(even) td{padding:0;border:0;background:none}
  .tbl-stack td:first-child{font-weight:600;margin-bottom:4px}
  .tbl-stack td[data-label]::before{content:attr(data-label) ": ";color:var(--muted)}
}}

/* Performance badges ("Built to resist"): four shield icons with a label */
.resist{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.resist .rb{text-align:center}
.resist .rb img{display:block;width:100%;max-width:176px;height:auto;margin:0 auto 12px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}  /* transparent shields: shadow follows the shield, no tile */
.resist .rb h3{color:#fff;font-size:1.25rem;margin:0 0 6px}
.resist .rb p{color:#c9ccd1;font-size:.92rem;line-height:1.5;margin:0}
@media(max-width:900px){.resist{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}}
@media(max-width:400px){.resist .rb img{max-width:132px}.resist .rb h3{font-size:1.1rem}.resist .rb p{font-size:.86rem}}
/* performance band sits directly above the dark quote band: a hairline keeps them distinct */
.resist-band + .section.dark{border-top:1px solid rgba(255,255,255,.09)}
.resist-band{padding-bottom:56px}

/* Phones: finish cards become a horizontal swipe strip. The next card peeks in
   at the right edge, which is the cue that it scrolls (the pattern used by
   Airbnb, Home Depot and Apple's product rows). */
@media(max-width:700px){
  .grid.swipe{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    margin:0 -20px;padding:4px 20px 14px;scroll-padding-left:20px;scrollbar-width:none}
  .grid.swipe::-webkit-scrollbar{display:none}
  .grid.swipe>.swatch{flex:0 0 74%;scroll-snap-align:start}
  .grid.swipe>.swatch div{padding:11px 13px}
  .grid.swipe>.swatch b{font-size:1.15rem}
  .grid.swipe>.swatch span{font-size:.84rem}
}

/* ---- Phone experience pass -------------------------------------------
   Measured at 390x844 before this block: top bar 94px + sticky header 129px
   = 223px (26% of the screen) of chrome before any content, permanently. */
@media(max-width:700px){
  /* Call / Text already live in the bottom action bar, so the top info bar is a duplicate */
  .topbar{display:none}
  /* compact header */
  .site-header .wrap{padding-top:6px}
  .brand{padding-bottom:5px;gap:9px}
  .brand img{width:40px;height:40px}
  .brand b{font-size:1.32rem}
  .brand small{font-size:.74rem;letter-spacing:.18em}
  nav.main a{padding:11px 10px}
  /* tap targets: 44px minimum (Apple HIG), checkbox enlarged */
  .soc{width:44px;height:44px}
  .check input{width:22px;height:22px;margin-top:0}
  .f select,.f input:not([type=checkbox]):not([type=file]){min-height:46px}
  .car-dots{gap:16px}
  .car-dot{position:relative}
  .car-dot::after{content:"";position:absolute;inset:-12px}
  .site-footer li{margin:0}
  .site-footer li a{display:block;padding:9px 0}
  /* fine print stays readable */
  .note-small{font-size:.86rem}
}
/* header slides away while scrolling down and comes back on any scroll up
   (the pattern used by Safari, Chrome and most news/retail sites) */
.site-header{transition:transform .22s ease}
.site-header.hdr-hide{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}
@media(max-width:700px){.crumbs a{display:inline-block;padding:12px 2px;margin:-12px 0}}
/* Phones: headline, one short supporting paragraph and the main buttons fit
   on the first screen. The paragraph is clamped to 3 lines (still fully in
   the HTML for search); the two buttons sit side by side. */
@media(max-width:700px){
  .hero .wrap,.hero.small .wrap{padding-top:22px;padding-bottom:30px}
  .hero h1{font-size:2.15rem;margin-bottom:.35em}
  .hero .eyebrow{font-size:.78rem;letter-spacing:.1em;margin-bottom:.5em}
  .hero p.lead{font-size:1rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hero .btn-row{margin-top:14px;gap:10px;flex-wrap:nowrap}
  .hero .btn-row .btn{flex:1 1 0;padding:13px 10px;font-size:.95rem;white-space:nowrap}
  .hero .pill-row{display:none}
  .hero .crumbs{margin-bottom:8px}
}
@media(max-width:700px){
  .trust ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
  .trust li{font-size:.86rem;line-height:1.25}
}
/* Phones: the same swipe strip for text cards (What we coat, process steps,
   values, standards, vendor documents). Text cards get a wider slot than
   photo cards so a paragraph is still comfortable to read. */
@media(max-width:700px){
  .grid.swipe>*{flex:0 0 84%;scroll-snap-align:start;margin:0}
  .grid.swipe>.swatch{flex-basis:74%}
  .grid.swipe>.card,.grid.swipe>.step{display:flex;flex-direction:column}
  /* city links: a compact two-column list instead of five stacked cards */
  .grid.cities{grid-template-columns:1fr 1fr;gap:10px}
  .grid.cities .card{padding:14px 14px}
  .grid.cities .card h3{font-size:1.15rem;margin-bottom:2px}
  .grid.cities .card p{font-size:.84rem}
}

/* "Built to last" badges: smaller icons everywhere, and a swipe strip on phones */
.resist .rb img{max-width:118px;margin-bottom:10px}
.resist .rb h3{font-size:1.12rem}
@media(max-width:900px){.resist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .resist{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;
    margin:20px -20px 0;padding:4px 20px 8px;scroll-padding-left:20px}
  .resist::-webkit-scrollbar{display:none}
  .resist .rb{flex:0 0 58%;scroll-snap-align:start;background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:16px 14px}
  .resist .rb img{max-width:84px}
  .resist .rb h3{font-size:1.02rem}
  .resist .rb p{font-size:.84rem}
}

/* "Not sure of the size?" helper inside the quote form */
.sqft-help{margin:-2px 0 12px;font-size:.9rem}
.sqft-help summary{cursor:pointer;color:var(--red);font-weight:700;list-style:none;padding:6px 0;display:inline-block}
.sqft-help summary::-webkit-details-marker{display:none}
.sqft-help summary::before{content:"+ ";font-weight:800}
.sqft-help[open] summary::before{content:"\2212  "}
.sqft-help[open]{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:4px 12px 2px}
.sqft-out{font-weight:700;color:var(--navy);margin:0 0 10px;min-height:1px}
@media(max-width:700px){.sqft-help summary{padding:10px 0}}

/* "Free quote" button in the header on phones (desktop uses the nav button) */
.hdr-cta{display:none}
@media(max-width:880px){
  .site-header .wrap{position:relative}
  .hdr-cta{display:inline-flex;position:absolute;right:20px;top:9px;padding:10px 16px;font-size:.92rem;border-radius:9px}
}
@media(max-width:700px){.hdr-cta{top:6px;padding:9px 14px}}
/* brief highlight when a "Free quote" button lands on the form */
.card-form.is-target{animation:qpulse 1.4s ease}
@keyframes qpulse{0%{box-shadow:0 0 0 0 rgba(195,17,13,.55)}70%{box-shadow:0 0 0 14px rgba(195,17,13,0)}100%{box-shadow:var(--shadow)}}
@media(prefers-reduced-motion:reduce){.card-form.is-target{animation:none}}
@media(max-width:700px){.hdr-cta{min-height:44px;top:4px;padding:0 15px}}

/* Phones only: "Get My Free Quote" joins Call / Text in the top banner,
   full width on its own row under the two */
.m-only{display:none}
@media(max-width:700px){
  .hero .btn-row{flex-wrap:wrap}
  .hero .btn-row .m-only{display:inline-flex;flex:1 1 100%}
}