/* ==========================================================================
   AirGuide Manufacturing - core stylesheet
   Palette taken from the logo: navy #001F5F, green #008541, on white.
   ========================================================================== */

:root{
  --navy:#001f5f;
  --navy-700:#0b2d73;
  --navy-100:#e8edf7;
  --green:#008541;
  --green-700:#046b37;
  --green-100:#e4f3ea;
  --ink:#0f1520;
  --body:#4d5766;
  /* 4.5:1 or better on every light ground it sits on (white, wash, the
     page-head gradient) - the WCAG AA minimum for body-size text */
  --muted:#5f6a7d;
  --line:#e3e8f0;
  --line-soft:#eef2f8;
  --wash:#f7f9fc;
  --tile:#547392;            /* matches the product photography background */
  --white:#fff;
  --radius:14px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(15,21,32,.05), 0 1px 3px rgba(15,21,32,.05);
  --shadow:0 10px 30px -12px rgba(0,31,95,.18), 0 2px 6px rgba(15,21,32,.04);
  --shadow-lg:0 24px 60px -20px rgba(0,31,95,.28);
  --maxw:1200px;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,-apple-system,sans-serif;
}

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

html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,1.2rem + 3.2vw,3.4rem);letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,1.1rem + 1.7vw,2.35rem)}
h3{font-size:1.16rem;letter-spacing:-.01em}
h4{font-size:1rem}
p{margin:0 0 1.1em}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--green-700)}
img{max-width:100%;display:block}
ul{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.4em}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px}
/* The first thing Tab reaches on every page, and invisible until it does. */
.skip-link{
  position:absolute;left:16px;top:-100px;z-index:300;padding:12px 18px;
  background:var(--navy);color:#fff;border-radius:var(--radius-sm);font-weight:650;font-size:.92rem;
}
.skip-link:focus{top:12px;color:#fff}
/* main takes focus from the skip link (tabindex=-1); no ring round the whole page */
main:focus{outline:none}
/* Links inside running text are underlined, so they do not rely on colour alone. */
.crumbs a,
main p a:not([class]){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}

/* ---------- layout helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:84px 0}
.section--tight{padding:58px 0}
.section--wash{background:var(--wash);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.narrow{max-width:760px}
.center.narrow{margin-left:auto;margin-right:auto}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-700);margin:0 0 14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--green);display:block}
.section-head{max-width:720px;margin-bottom:44px}
.section-head.center{margin-left:auto;margin-right:auto}
.section-head p{font-size:1.05rem;margin-bottom:0}
.lead{font-size:1.12rem;line-height:1.6}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:999px;border:1.5px solid transparent;
  font-size:.94rem;font-weight:650;letter-spacing:.01em;cursor:pointer;
  transition:transform .15s ease,background .18s ease,box-shadow .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
/* inline-flex above out-specifies [hidden], so state it explicitly */
.btn[hidden]{display:none}
.btn--primary{background:var(--navy);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--navy-700);color:#fff;box-shadow:var(--shadow)}
.btn--green{background:var(--green);color:#fff}
.btn--green:hover{background:var(--green-700);color:#fff}
.btn--ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn--ghost:hover{border-color:var(--navy);color:var(--navy);background:#fff}
.btn--light{background:#fff;color:var(--navy)}
.btn--light:hover{background:#eef3fb;color:var(--navy)}
.btn--outline-light{border-color:rgba(255,255,255,.45);color:#fff}
.btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.btn--sm{padding:10px 18px;font-size:.86rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.arrow-link{display:inline-flex;align-items:center;gap:7px;font-weight:650;font-size:.92rem;color:var(--navy)}
.arrow-link svg{transition:transform .18s ease}
.arrow-link:hover svg{transform:translateX(3px)}

/* ---------- top utility bar ---------- */
.utility{background:var(--navy);color:#c9d6ef;font-size:.79rem;letter-spacing:.01em}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px}
.utility ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.utility li{margin:0;display:flex;align-items:center;gap:7px}
.utility a{color:#fff}
.utility a:hover{color:#6fdc9b}
.utility .dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex:none}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:14px;min-height:78px;position:relative}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:34px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{
  padding:9px 11px;border-radius:8px;font-size:.93rem;font-weight:550;color:var(--ink);
  transition:background .16s ease,color .16s ease;
}
.nav a:hover{background:var(--navy-100);color:var(--navy)}
.nav a.is-active{color:var(--navy);font-weight:700;box-shadow:inset 0 -2px 0 var(--green)}
/* the .nav a rules above out-specify .btn, so restate what the button needs */
.nav a.btn{padding:11px 17px;border-radius:999px}
.nav a.btn--primary{background:var(--navy);color:#fff}
.nav a.btn--primary:hover{background:var(--navy-700);color:#fff}
.header-cta{margin-left:6px}
.nav-toggle{
  display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);
  background:#fff;border-radius:10px;cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle span::before{transform:translateY(-6px)}
.nav-toggle span::after{transform:translateY(4px)}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-2px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  padding:76px 0 72px;
  background:
    radial-gradient(900px 420px at 88% -8%,#eef3fb 0%,rgba(255,255,255,0) 62%),
    radial-gradient(700px 380px at -6% 108%,#eaf5ee 0%,rgba(255,255,255,0) 60%),#fff;
}
.hero .wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center}
.hero h1{margin-bottom:20px}
.hero .lead{max-width:36em;margin-bottom:26px}
.promise-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding:0;list-style:none}
.promise-chips li{
  margin:0;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 16px 8px 12px;font-size:.85rem;font-weight:650;color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.promise-chips svg{flex:none;color:var(--green)}

.hero-collage{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.shot{
  background:var(--tile);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:4/3;
}
.shot img{width:100%;height:100%;object-fit:cover}

/* ---------- stat strip ---------- */
.stat-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--wash)}
.stat-strip .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding-left:0;padding-right:0}
.stat{padding:28px 20px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:1.5rem;color:var(--navy);letter-spacing:-.02em;line-height:1.2}
.stat span{display:block;font-size:.79rem;color:var(--muted);margin-top:4px;letter-spacing:.02em}

/* ---------- cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d3ddec}
.card__media{background:var(--tile);aspect-ratio:3/2;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card__body h3{margin-bottom:8px}
.card__body p{font-size:.93rem;margin-bottom:16px}
.card__body .arrow-link{margin-top:auto}
.card__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.card__tags li{
  margin:0;font-size:.71rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--navy);background:var(--navy-100);border-radius:999px;padding:4px 10px;
}

/* feature blocks */
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.feature .icon{
  width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--green-100);color:var(--green-700);margin-bottom:16px;
}
.feature--navy .icon{background:var(--navy-100);color:var(--navy)}
.feature h3{margin-bottom:6px}
.feature p{font-size:.93rem;margin-bottom:0}

/* split media/text */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split--reverse .split__media{order:2}
.split__media{border-radius:var(--radius);overflow:hidden;background:var(--tile);box-shadow:var(--shadow)}
/* for artwork that already carries its own white ground */
.split__media--plain{background:#fff;border:1px solid var(--line)}
.split__media img{width:100%}
.checklist{list-style:none;padding:0;margin:0 0 26px}
.checklist li{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;font-size:.97rem}
.checklist svg{flex:none;color:var(--green);margin-top:4px}
.checklist b{color:var(--ink)}

/* ---------- navy band ---------- */
.band-navy{background:var(--navy);color:#c2cfe8}
.band-navy h2,.band-navy h3{color:#fff}
.band-navy .eyebrow{color:#6fdc9b}
.band-navy .eyebrow::before{background:#6fdc9b}
.promise-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16);
  border-radius:var(--radius);overflow:hidden;margin-top:40px;
}
.promise-grid > div{background:var(--navy);padding:32px 28px}
.promise-grid b{display:block;color:#fff;font-size:1.15rem;margin-bottom:8px;letter-spacing:-.01em}
.promise-grid p{font-size:.93rem;margin:0}
.promise-grid .num{font-size:.75rem;font-weight:700;letter-spacing:.14em;color:#6fdc9b;display:block;margin-bottom:14px}

/* ---------- CTA band ---------- */
.cta{background:linear-gradient(180deg,#fff 0%,var(--wash) 100%);border-top:1px solid var(--line-soft);padding:70px 0}
.cta-inner{
  background:var(--navy);border-radius:20px;padding:54px 52px;color:#c2cfe8;
  display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;box-shadow:var(--shadow-lg);
  background-image:radial-gradient(620px 320px at 100% 0%,rgba(0,133,65,.4) 0%,rgba(0,31,95,0) 68%);
}
.cta-inner h2{color:#fff;margin-bottom:10px}
.cta-inner p{margin:0;font-size:1.02rem}
.cta-inner .btn-row{justify-content:flex-end}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#98a3b5;font-size:.9rem;padding:62px 0 0}
.site-footer h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
/* .footnote's grey is for light grounds; on the dark footer it takes the footer's own */
.site-footer .footnote{color:#98a3b5}
.site-footer a{color:#c3ccda}
.site-footer a:hover{color:#6fdc9b}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:9px}
/* The logo's lettering as live text rather than the logo image. Anybody at its
   widest and heaviest is the nearest web font to the wordmark; this size puts
   the capitals where the old 32px-tall logo had them, about 20px tall and
   250px wide. Pages load only these seven glyphs of it (text=AIRGUDE). */
.footer-brand .footer-wordmark{
  font-family:"Anybody","Arial Black",sans-serif;font-weight:900;font-stretch:150%;
  font-size:30px;line-height:32px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;margin:0 0 18px;
}
.footer-brand p{max-width:34em;font-size:.9rem}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.badge{
  font-size:.69rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.2);color:#dfe5ee;border-radius:6px;padding:5px 10px;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.82rem;
}
.footnote{font-size:.8rem;color:var(--muted);line-height:1.6}

/* ---------- interior page header ---------- */
.page-head{
  padding:60px 0 52px;
  background:radial-gradient(800px 320px at 84% 0%,#eef3fb 0%,rgba(255,255,255,0) 66%),#fff;
  border-bottom:1px solid var(--line-soft);
}
.page-head h1{font-size:clamp(1.9rem,1.2rem + 2.2vw,2.85rem);margin-bottom:14px}
.page-head p{max-width:64ch;font-size:1.08rem;margin-bottom:0}
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--navy)}

/* ---------- product catalogue ---------- */
.toolbar{
  position:sticky;top:78px;z-index:40;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:14px 0;
}
.toolbar .wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.search{position:relative;flex:1;min-width:230px;max-width:400px}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search input{
  width:100%;padding:11px 14px 11px 40px;border:1px solid var(--line);border-radius:999px;
  font:inherit;font-size:.92rem;background:#fff;color:var(--ink);
}
.search input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,31,95,.1)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.filters button{
  font:inherit;font-size:.83rem;font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--body);transition:all .16s ease;
}
.filters button:hover{border-color:var(--navy);color:var(--navy)}
.filters button.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.result-count{font-size:.84rem;color:var(--muted);width:100%;margin:0}

.cat-block{padding:54px 0;border-bottom:1px solid var(--line-soft)}
.cat-head{display:grid;grid-template-columns:290px 1fr;gap:40px;align-items:start;margin-bottom:30px}
.cat-head .shot{aspect-ratio:3/2}
.cat-head h2{font-size:1.55rem;margin-bottom:10px}
.cat-head p{margin-bottom:0;font-size:.97rem}
.model-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* Product tile: placeholder shot, model name, type, then the pricing and
   availability lines. The whole tile is the link to the product page. */
.model{
  border:1px solid var(--line);border-radius:10px;padding:18px 16px 20px;background:#fff;
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  color:var(--body);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.model:hover{border-color:#c9d6ef;box-shadow:var(--shadow);transform:translateY(-2px);color:var(--body)}
.model-shot{
  width:100%;aspect-ratio:4/3;margin-bottom:12px;border-radius:var(--radius-sm);
  background:#fff;border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.model-shot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;padding:9px}
.model b{
  color:var(--navy);font-size:.88rem;font-weight:700;line-height:1.35;letter-spacing:-.01em;
  text-transform:uppercase;
}
.model:hover b{color:var(--navy-700)}
.model .meta{font-size:.76rem;color:var(--ink);font-weight:600;letter-spacing:.02em}
.model-price{margin-top:auto;padding-top:9px;font-size:.79rem;font-weight:700;color:var(--green-700)}
.model-avail{font-size:.78rem;color:var(--green-700)}
.no-results{padding:60px 0;text-align:center;color:var(--muted);display:none}
.is-hidden{display:none !important}

/* ---------- single product page ---------- */
.product-page{padding:38px 0 64px}
.pd-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:54px;align-items:start}
.pd-media{position:sticky;top:110px}
.pd-shot{
  display:block;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:22px;transition:border-color .16s ease,box-shadow .16s ease;
}
.pd-shot:hover{border-color:#c9d6ef;box-shadow:var(--shadow)}
.pd-shot img{width:100%;height:auto;display:block}
.pd-descriptor{
  font-size:1.02rem;font-weight:650;color:var(--green-700);margin:-6px 0 14px;line-height:1.45;
}
.pd-shotnote{font-size:.79rem;color:var(--muted);margin:12px 0 0;line-height:1.55}
.pd-info h1{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.1rem);text-transform:uppercase;color:var(--navy);margin-bottom:12px}
.pd-info .lead{margin-bottom:22px}
.pd-buy{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--wash);
  padding:20px 22px;margin-bottom:24px;
}
.pd-price{display:block;font-size:1.05rem;font-weight:700;color:var(--green-700);margin-bottom:4px}
.pd-avail{display:block;font-size:.9rem;color:var(--green-700)}
.pd-buy .btn-row{margin-top:16px}
.pd-buy .login-note{font-size:.79rem;color:var(--muted);margin:14px 0 0;line-height:1.55}
.pd-docs{list-style:none;padding:0;margin:0}
/* specifications, as its own band under the hero rather than stacked in the
   narrow info column - two columns of rows so twelve of them stay scannable */
.pd-keyspecs{border-top:1px solid var(--line-soft)}
.pd-keyspecs h2{font-size:1.3rem;margin:0 0 18px}
.pd-keyspecs .footnote{margin:20px 0 0}
.pd-specs{margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:52px}
.pd-specs > div{
  display:grid;grid-template-columns:150px 1fr;gap:18px;
  padding:12px 2px;border-top:1px solid var(--line-soft);
}
.pd-specs dt{font-size:.83rem;font-weight:700;color:var(--ink);letter-spacing:.02em}
.pd-specs dd{margin:0;font-size:.92rem}
/* sheet detail: model variants, construction notes, ordering options */
.pd-detail{border-top:1px solid var(--line-soft)}
.pd-detail-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:52px;align-items:start}
/* grid children default to min-width:auto, which lets the wide dimension table
   push the whole page sideways - let them shrink so the table scrolls instead */
.pd-detail-grid > *{min-width:0}
.pd-detail-grid--single{grid-template-columns:1fr;max-width:820px}
.pd-detail h2{font-size:1.3rem;margin:0 0 18px}
.pd-detail-main h2 + *{margin-top:0}
.pd-detail-main > h2 ~ h2{margin-top:38px}
.variant-list{margin:0}
.variant-list > div{
  display:grid;grid-template-columns:170px 1fr;gap:20px;
  padding:13px 2px;border-bottom:1px solid var(--line-soft);
}
.variant-list > div:first-child{border-top:1px solid var(--line)}
.variant-list dt{font-size:.9rem;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.variant-list dd{margin:0;font-size:.93rem}
.sheet-notes{margin:0;padding-left:1.25em}
.sheet-notes li{font-size:.94rem;line-height:1.6;margin-bottom:11px}
.pd-options{
  background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;
}
.pd-options h2{font-size:1.15rem;margin-bottom:16px}
.opt-group{margin-bottom:20px}
.opt-group:last-of-type{margin-bottom:0}
.opt-group h3{
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);margin:0 0 9px;
}
.opt-group ul{list-style:none;padding:0;margin:0}
.opt-group li{
  position:relative;padding-left:24px;font-size:.88rem;line-height:1.5;margin-bottom:7px;
}
.opt-group li::before{
  content:"";position:absolute;left:0;top:.3em;width:12px;height:12px;
  border:1.5px solid var(--muted);border-radius:3px;background:#fff;
}
.opt-note{font-size:.79rem;color:var(--muted);margin:18px 0 0;line-height:1.55}

/* slot dimension tables lifted off the ASD sheets */
.sheet-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 6px}
.sheet-table{border-collapse:collapse;width:100%;min-width:640px;font-size:.86rem}
.sheet-table caption{
  caption-side:top;text-align:left;font-size:.8rem;color:var(--muted);
  padding:0 0 10px;line-height:1.5;
}
.sheet-table th,.sheet-table td{
  padding:9px 10px;text-align:center;border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
.sheet-table thead th{
  background:var(--wash);color:var(--ink);font-weight:700;font-size:.8rem;
  border-bottom:1px solid var(--line);
}
.sheet-table tbody th{
  text-align:left;font-weight:650;color:var(--ink);background:#fff;
}
.sheet-table th.rowhead,.sheet-table tbody th{min-width:190px}

/* paint + size selection - line-wide, repeated on every product page */
.pd-selection{border-top:1px solid var(--line-soft)}
.sel-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.sel-col h2{font-size:1.4rem;margin-bottom:20px}
.sel-col h3{
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);margin:26px 0 12px;
}
.sel-col > h3:first-child{margin-top:0}
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:27px;font-size:.93rem;line-height:1.55;margin-bottom:10px}
.ticks li::before{
  content:"";position:absolute;left:3px;top:.42em;width:10px;height:6px;
  border-left:2.2px solid var(--green);border-bottom:2.2px solid var(--green);
  transform:rotate(-45deg);
}
.swatches{
  list-style:none;padding:0;margin:0 0 22px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:16px;
}
.swatches li{margin:0;font-size:.76rem;line-height:1.4}
.sw{
  display:block;height:64px;margin-bottom:9px;border-radius:var(--radius-sm);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.sw--custom{background:conic-gradient(from 210deg,#c9d3e6,#5a4634,#1c1e22,#aeb4ba,#f7f8fa,#c9d3e6)}
.swatches b{display:block;color:var(--ink);font-size:.83rem;letter-spacing:-.01em}
.swatches .note{color:var(--muted)}
.match-note{
  font-size:.9rem;line-height:1.6;margin:0 0 12px;padding:14px 18px;
  background:var(--green-100);border-radius:var(--radius-sm);border-left:3px solid var(--green);
}
.match-note b{color:var(--ink)}
.sel-size{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  margin-top:46px;padding:28px 32px;background:var(--wash);
  border:1px solid var(--line);border-radius:var(--radius);
}
.sel-size h2{font-size:1.25rem;margin-bottom:8px}
.sel-size p{margin:0;font-size:.96rem}
.sel-size .icon{
  flex:none;width:44px;height:44px;border-radius:11px;background:var(--navy-100);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
}

.pd-related{border-top:1px solid var(--line-soft)}
.pd-related h2{font-size:1.35rem;margin-bottom:22px}
.pd-missing{padding:70px 0 90px;text-align:center}
.pd-missing h1{margin-bottom:14px}

/* ---------- 404 ---------- */
.nf-head{padding:64px 0 56px}
.nf-code{
  font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green-700);margin:0 0 10px;
}
.nf-head h1{margin-bottom:14px}
.nf-lede{color:var(--muted);margin:0 auto 30px;max-width:56ch}
.nf-search{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 0 22px}
.nf-search .search{flex:1 1 340px;max-width:420px}
.nf-h2{font-size:1.25rem;margin:0 0 20px}
.nf-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nf-cats a{
  display:block;padding:18px 20px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);transition:border-color .16s ease,box-shadow .16s ease;
}
.nf-cats a:hover{border-color:#c9d6ef;box-shadow:var(--shadow)}
.nf-cats b{display:block;color:var(--navy);font-size:.95rem;margin-bottom:5px}
.nf-cats span{display:block;color:var(--muted);font-size:.84rem;line-height:1.5}

/* ---------- document lists ---------- */
.doc-list{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.doc-list li{margin:0;border-bottom:1px solid var(--line-soft)}
.doc-list li:last-child{border-bottom:0}
.doc-list a{display:flex;align-items:center;gap:14px;padding:14px 20px;color:var(--ink);font-size:.93rem;transition:background .15s ease}
.doc-list a:hover{background:var(--wash);color:var(--navy)}
.pdf-ico{
  flex:none;width:30px;height:30px;border-radius:7px;background:var(--navy-100);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:.58rem;font-weight:800;letter-spacing:.02em;
}
.doc-list .size{margin-left:auto;font-size:.78rem;color:var(--muted);white-space:nowrap}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.83rem;font-weight:650;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:.94rem;
  background:#fff;color:var(--ink);
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,31,95,.1)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Show/hide password. The wrapper and button are built by assets/js/main.js,
   so without JavaScript the field stays a plain password box. */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:46px}
.pw-toggle{
  position:absolute;top:0;right:0;width:42px;height:100%;display:flex;align-items:center;
  justify-content:center;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;
  border-radius:0 9px 9px 0;transition:color .16s ease;
}
.pw-toggle:hover{color:var(--navy)}
.pw-toggle:focus-visible{outline:2px solid var(--navy);outline-offset:-3px;border-radius:9px}
.form-note{font-size:.8rem;color:var(--muted);margin:14px 0 0}
.form-status{margin-top:16px;padding:13px 16px;border-radius:9px;background:var(--green-100);color:var(--green-700);font-size:.9rem;font-weight:600}
.info-block{border-left:2px solid var(--green);padding:2px 0 2px 20px;margin-bottom:28px}
.info-block h3{font-size:.95rem;margin-bottom:4px}
.info-block p{font-size:.94rem;margin-bottom:0}

/* ---------- misc ---------- */
.pill-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.pill-list li{margin:0;border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:.85rem;color:var(--ink);background:#fff}
.timeline{list-style:none;padding:0;margin:0;border-left:2px solid var(--line)}
.timeline li{margin:0;padding:0 0 30px 28px;position:relative}
.timeline li::before{
  content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--green);border:3px solid #fff;box-shadow:0 0 0 1px var(--line);
}
.timeline span{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-700)}
.timeline b{display:block;color:var(--ink);font-size:1.02rem}
.timeline p{font-size:.93rem;margin:4px 0 0}


/* ---------- engineering test data link ---------- */
.pd-testdata{border-top:1px solid var(--line-soft)}
.td-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 28px;
}
.td-icon{
  flex:none;width:46px;height:46px;border-radius:11px;background:var(--navy-100);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.td-body h2{font-size:1.15rem;margin:0 0 6px}
.td-body p{margin:0;font-size:.92rem}
.td-covers{font-size:.82rem;color:var(--muted);margin-top:8px;line-height:1.55}
.td-covers b{color:var(--ink)}

/* ==========================================================================
   Quote cart - header button, add-to-cart modal, drawer
   ========================================================================== */
.cart-btn{
  order:3;flex:none;position:relative;width:44px;height:44px;border:1px solid var(--line);
  background:#fff;border-radius:10px;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.cart-btn:hover{border-color:var(--navy);color:var(--navy);box-shadow:var(--shadow-sm)}
.cart-count{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--green);color:#fff;
  font-size:.7rem;font-weight:700;line-height:20px;text-align:center;
  box-shadow:0 0 0 2px #fff;
}

.ag-overlay{
  position:fixed;inset:0;background:rgba(10,16,28,.55);z-index:100;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
body.ag-locked{overflow:hidden}

/* ---- add-to-cart modal ---- */
.ag-modal{
  position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;
  padding:20px;pointer-events:none;
}
.ag-modal-inner{
  pointer-events:auto;background:#fff;border-radius:var(--radius);width:min(620px,100%);
  max-height:min(88vh,780px);display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
}
.ag-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 24px 16px;border-bottom:1px solid var(--line);
}
.ag-modal-head h2{font-size:1.15rem;margin:0;letter-spacing:-.01em}
.ag-modal-head .eyebrow{margin-bottom:8px}
.ag-x{
  flex:none;width:34px;height:34px;border:1px solid var(--line);background:#fff;
  border-radius:8px;cursor:pointer;font-size:1.3rem;line-height:1;color:var(--body);
}
.ag-x:hover{border-color:var(--navy);color:var(--navy)}
.ag-modal-body{padding:6px 24px 4px;overflow-y:auto}
.ag-modal-foot{
  display:flex;align-items:center;gap:14px;justify-content:flex-end;
  padding:16px 24px;border-top:1px solid var(--line);background:var(--wash);
  border-radius:0 0 var(--radius) var(--radius);
}

.ag-group{border:0;padding:0;margin:18px 0 0}
.ag-group:last-child{margin-bottom:18px}
.ag-group legend{
  padding:0;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);margin-bottom:10px;
}
.ag-group legend i{
  font-style:normal;letter-spacing:.04em;text-transform:none;color:var(--muted);font-weight:600;
}
.ag-hint{font-size:.78rem;color:var(--muted);margin:8px 0 0;line-height:1.5}

.ag-size{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ag-size label,.ag-custom,.ag-qty{
  display:flex;flex-direction:column;gap:6px;font-size:.8rem;font-weight:650;color:var(--ink);
}
.ag-size input,.ag-custom input,.ag-group textarea{
  font:inherit;font-size:.92rem;font-weight:400;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fff;color:var(--ink);width:100%;
}
.ag-group textarea{resize:vertical}
.ag-size input:focus,.ag-custom input:focus,.ag-group textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,31,95,.1);
}
.ag-custom{margin-top:12px}
/* the flex display above out-specifies [hidden], so state it explicitly */
.ag-custom[hidden]{display:none}

.ag-paints{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:8px}
.ag-paint{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;
}
.ag-paint:hover{border-color:#c9d6ef}
.ag-sw{flex:none;width:20px;height:20px;border-radius:5px;border:1px solid rgba(15,21,32,.18)}
.ag-sw--custom{
  background:conic-gradient(from 210deg,#c9d3e6,#5a4634,#1c1e22,#aeb4ba,#f7f8fa,#c9d3e6);
}

.ag-opt{display:flex;align-items:flex-start;gap:9px;padding:5px 0;font-size:.9rem;cursor:pointer}
.ag-opt input{margin-top:3px;flex:none}

.ag-qty{flex-direction:row;align-items:center;gap:10px;margin-right:auto}
.ag-qty input{
  font:inherit;width:72px;padding:9px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-weight:600;
}

/* ---- cart drawer ---- */
.ag-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:#fff;z-index:110;
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
  transform:translateX(100%);
  /* Off-screen is not enough: closed, it would still be tabbed through and read
     out. visibility drops it from both, once the slide-out has finished. */
  visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;
}
.ag-drawer.is-open{transform:none;visibility:visible;transition:transform .22s ease}
.ag-drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 22px;border-bottom:1px solid var(--line);
}
.ag-drawer-head h2{margin:0;font-size:1.1rem;display:flex;align-items:center;gap:10px}
.ag-badge{
  display:inline-block;min-width:22px;padding:0 7px;border-radius:999px;background:var(--green);
  color:#fff;font-size:.72rem;font-weight:700;line-height:22px;text-align:center;
}
.ag-lines{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.ag-line{
  display:flex;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line-soft);margin:0;
}
.ag-line-main{flex:1;min-width:0}
.ag-line-name{display:block;font-weight:700;font-size:.9rem;color:var(--navy);line-height:1.35}
.ag-line-type{display:block;font-size:.75rem;color:var(--muted);margin-top:2px}
.ag-line-opts{list-style:none;margin:8px 0 0;padding:0}
.ag-line-opts li{font-size:.78rem;color:var(--body);line-height:1.5;margin:0}
.ag-line-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ag-stepper{
  display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;
}
.ag-stepper button{
  width:28px;height:28px;border:0;background:#fff;cursor:pointer;font-size:1rem;
  line-height:1;color:var(--ink);
}
.ag-stepper button:hover:not(:disabled){background:var(--navy-100);color:var(--navy)}
.ag-stepper button:disabled{color:var(--muted);cursor:not-allowed;background:var(--wash)}
.ag-stepper span{min-width:28px;text-align:center;font-size:.85rem;font-weight:700}
.ag-rm{
  border:0;background:none;cursor:pointer;font:inherit;font-size:.75rem;color:var(--muted);padding:0;
}
.ag-rm:hover{color:#b3261e;text-decoration:underline}
.ag-drawer-foot{padding:18px 22px;border-top:1px solid var(--line);background:var(--wash)}
.ag-note{font-size:.78rem;color:var(--muted);line-height:1.55;margin:0 0 14px}
.ag-empty{padding:46px 26px;text-align:center;color:var(--body)}
.ag-empty p{margin-bottom:10px}
.ag-empty .btn{margin-top:12px}

/* ---- toast ---- */
.ag-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:120;
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:999px;
  font-size:.88rem;max-width:min(560px,92vw);text-align:center;line-height:1.45;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.ag-toast.is-on{opacity:1;transform:translate(-50%,0)}
.ag-toast.is-warn{background:#7a2018;border-radius:var(--radius)}

/* ---- cart summary beside the quote form ---- */
.cart-summary{
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
  background:var(--wash);margin-bottom:28px;
}
.cart-summary h3{font-size:1.02rem;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.ag-summary-lines{list-style:none;margin:0 0 4px;padding:0}
.ag-summary-lines > li{padding:10px 0;border-top:1px solid var(--line-soft);font-size:.9rem}
.ag-summary-lines > li:first-child{border-top:0}
.ag-summary-lines > li > span{color:var(--muted);font-weight:600}
.ag-summary-lines ul{list-style:none;margin:5px 0 0;padding:0}
.ag-summary-lines ul li{font-size:.78rem;color:var(--muted);line-height:1.5;margin:0}

/* ==========================================================================
   Accounts - header button, sign in / sign up, profile, quote history
   ========================================================================== */
.account-btn{
  order:2;flex:none;display:inline-flex;align-items:center;gap:8px;
  height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink);font-size:.86rem;font-weight:600;white-space:nowrap;
  transition:border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.account-btn:hover{border-color:var(--navy);color:var(--navy);box-shadow:var(--shadow-sm)}
.account-btn.is-signed-in{border-color:var(--green);color:var(--green-700)}
.account-btn.is-signed-in:hover{border-color:var(--green-700);color:var(--green-700)}
.account-btn svg{flex:none}

.auth-single{max-width:520px;margin-left:auto;margin-right:auto}
/* Sign-in code entry: wide-spaced digits, so a six-character code reads as six. */
.code-input{
  font-size:1.5rem;font-weight:700;letter-spacing:.42em;text-align:center;
  font-variant-numeric:tabular-nums;padding-left:calc(14px + .42em) !important;
}
.code-input::placeholder{color:var(--line);letter-spacing:.42em;font-weight:600}

.auth-lede{font-size:.92rem;color:var(--body);line-height:1.6;margin:-8px 0 20px}

.auth-alt{
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line-soft);
  font-size:.9rem;color:var(--body);
}
.auth-alt a{font-weight:650}
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.auth-single h2,.account-grid h2{font-size:1.25rem;margin-bottom:20px}

.auth-why{
  background:var(--navy-100);border-left:3px solid var(--navy);border-radius:var(--radius-sm);
  padding:14px 18px;font-size:.92rem;color:var(--ink);line-height:1.6;
  max-width:520px;margin:0 auto 24px;
}

.auth-gate{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--wash);
  padding:32px 34px;
}
.auth-gate h2{font-size:1.3rem;margin-bottom:10px}
.auth-gate p{font-size:.96rem;margin-bottom:20px}

.field .req,.field .opt,.field--radios legend .opt{
  font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  margin-left:6px;
}
.field .req{color:var(--green-700)}
.field-note{font-size:.78rem;color:var(--muted);margin:6px 0 0}
.field-error{font-size:.8rem;color:#b3261e;margin:6px 0 0;line-height:1.5}
.field input:disabled{background:var(--wash);color:var(--muted)}

.field--radios{border:0;padding:0;margin:0 0 18px}
.field--radios legend{
  padding:0;font-size:.82rem;font-weight:650;color:var(--ink);margin-bottom:10px;
}
/* .field label is display:block and .field input is width:100%, so a radio
   row has to opt out of both or the control stretches and wraps. */
.field--radios .radio{
  display:inline-flex;align-items:center;gap:8px;margin:0 18px 0 0;
  font-size:.92rem;font-weight:400;color:var(--body);cursor:pointer;width:auto;
}
.field--radios .radio input[type="radio"]{
  width:auto;flex:none;margin:0;padding:0;accent-color:var(--navy);
}

.form-error,.form-status{
  font-size:.9rem;line-height:1.6;margin:0 0 16px;padding:12px 16px;border-radius:var(--radius-sm);
}
.form-error{background:#fdecea;border-left:3px solid #b3261e;color:#7a2018}
.form-status{background:var(--navy-100);border-left:3px solid var(--navy);color:var(--ink)}
.form-status.is-ok{background:var(--green-100);border-left-color:var(--green);color:var(--green-700)}

/* Account deletion: set apart below the everyday details, and closed until
   asked for, so it is easy to find and hard to hit by accident. On a wide
   screen it lines up under the details card. */
.danger-card{margin-top:40px;max-width:calc(50% - 20px);border-color:#f0d4d1}
.danger-card h2{font-size:1.1rem;margin-bottom:8px}
.danger-card > p{font-size:.92rem;margin-bottom:18px}
.danger-warning{
  font-size:.9rem;line-height:1.6;color:#7a2018;background:#fdecea;
  border-radius:var(--radius-sm);padding:12px 16px;margin:0 0 18px;
}
.btn--danger{background:#b3261e;color:#fff}
.btn--danger:hover{background:#8c1d17;color:#fff}
.btn--danger-ghost{border-color:#e3b4af;color:#b3261e;background:#fff}
.btn--danger-ghost:hover{border-color:#b3261e;color:#8c1d17;background:#fff}

.q-identity{display:flex;flex-direction:column;gap:2px;font-size:.9rem;margin:0 0 10px}
.q-identity b{color:var(--ink);font-size:.95rem}
.q-identity span{color:var(--body)}

.quote-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.quote-list li{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;
  padding:14px 2px;border-bottom:1px solid var(--line-soft);
}
.quote-list b{color:var(--navy);font-size:.92rem;letter-spacing:-.01em}
.q-project{font-size:.88rem;color:var(--ink);margin-left:8px}
.q-meta{display:block;font-size:.78rem;color:var(--muted);margin-top:3px}
.q-status{
  flex:none;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:var(--navy-100);color:var(--navy);
}
.q-status--quoted{background:var(--green-100);color:var(--green-700)}
.q-status--closed{background:var(--line-soft);color:var(--muted)}

/* ---------- contact directory ---------- */
.dept{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px 20px}
.dept h3{
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);
  margin-bottom:15px;padding-bottom:11px;border-bottom:1px solid var(--line-soft);
}
.dept-people{list-style:none;padding:0;margin:0}
.dept-people li{display:flex;flex-direction:column;gap:2px;margin:0 0 17px}
.dept-people li:last-child{margin-bottom:0}
.dept-people b{font-size:.95rem;color:var(--ink);letter-spacing:-.01em}
.dept-role{font-size:.78rem;color:var(--muted)}
/* Extension and address sit on one line, wrapping to two in a narrow card. */
.dept-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-top:4px;font-size:.85rem}
.dept-ext{flex:none;font-weight:650;color:var(--green-700);font-variant-numeric:tabular-nums}
.dept-mail{color:var(--body);word-break:break-word}
.dept-ext:hover,.dept-mail:hover{color:var(--navy)}

.dept-principal{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;margin:0 0 26px;
  padding:14px 18px;background:#fff;border:1px solid var(--line);border-left:2px solid var(--green);
  border-radius:var(--radius-sm);font-size:.95rem;
}
.dept-principal b{color:var(--ink)}
.dept-principal span{color:var(--muted);font-size:.83rem}

/* ---------- legal pages (terms, privacy) ---------- */
.legal-layout{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start}

.legal-toc{position:sticky;top:110px}
.legal-toc h2{
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;
}
.legal-toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.legal-toc li{margin:0;counter-increment:toc}
.legal-toc a{
  display:flex;gap:9px;padding:6px 0;font-size:.86rem;line-height:1.45;color:var(--body);
  border-bottom:1px solid var(--line-soft);
}
.legal-toc a::before{content:counter(toc);color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.legal-toc a:hover{color:var(--navy)}
.legal-toc a:hover::before{color:var(--green-700)}

/* Anchor targets have to clear the sticky header when jumped to. */
.legal-body section{scroll-margin-top:100px}
.legal-body{counter-reset:legal;max-width:70ch}
.legal-body > section{margin-bottom:38px}
.legal-body > section:last-child{margin-bottom:0}
.legal-body h2{
  counter-increment:legal;font-size:1.18rem;margin-bottom:12px;
  display:flex;gap:12px;align-items:baseline;
}
.legal-body h2::before{
  content:counter(legal);font-size:.85rem;font-weight:700;color:var(--green-700);
  font-variant-numeric:tabular-nums;flex:none;
}
.legal-body h3{font-size:.97rem;margin:22px 0 8px}
.legal-body p{font-size:.95rem;line-height:1.75;margin-bottom:14px}
.legal-body ul{margin:0 0 14px;padding-left:20px}
.legal-body li{margin-bottom:7px;font-size:.95rem;line-height:1.7}
.legal-body > section > *:last-child{margin-bottom:0}

.legal-meta{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 30px;padding:0 0 22px;
  border-bottom:1px solid var(--line);font-size:.84rem;color:var(--muted);
}
.legal-meta b{color:var(--ink);font-weight:650}

.legal-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--wash);border:1px solid var(--line-soft);border-radius:4px;padding:1px 5px;
}

/* A field the company still has to supply. Loud on purpose. */
.legal-fill{
  background:#fff4d6;border-bottom:1px dashed #b98900;color:#6b5000;
  padding:1px 5px;border-radius:3px;font-weight:600;
}

/* Delete this rule together with the .legal-draft blocks once counsel signs off. */
.legal-draft{
  background:#fdecea;border-left:3px solid #b3261e;color:#7a2018;border-radius:var(--radius-sm);
  padding:16px 20px;margin-bottom:30px;font-size:.88rem;line-height:1.65;
}
.legal-draft b{display:block;margin-bottom:4px;color:#7a2018}

/* ---------- consent checkbox ---------- */
.field--check{margin-bottom:22px}
/* Same opt-out as .field--radios: .field label is display:block and .field input
   is width:100%, either of which would wreck an inline checkbox row. */
.field--check .check{
  display:flex;align-items:flex-start;gap:10px;margin:0;width:auto;
  font-size:.88rem;font-weight:400;line-height:1.6;color:var(--body);cursor:pointer;
}
.field--check .check input[type="checkbox"]{
  width:auto;flex:none;margin:3px 0 0;padding:0;accent-color:var(--navy);
}
.field--check a{font-weight:650;text-decoration:underline}

/* ---------- homepage intro animation ---------- */
/* Scoped to body.home so only the front page plays it. The off-screen start
   positions live inside the keyframes, so the prefers-reduced-motion rule at
   the bottom of this file (animation:none) leaves everything in place. */

/* The hero copy and collage fly in from outside the viewport; the hero clips
   its own overflow so that travel never becomes a horizontal scrollbar. */
.home .hero{overflow:hidden}
@supports (overflow:clip){.home .hero{overflow:clip}}
/* Same idea vertically for the stat strip, which rises from below the fold. */
.home .strip-clip{overflow:hidden}

@keyframes ag-drop-in{
  from{transform:translateY(-160px)}
  to{transform:none}
}
@keyframes ag-in-left{
  from{transform:translateX(calc(-100% - 50vw))}
  to{transform:none}
}
@keyframes ag-in-right{
  from{transform:translateX(calc(100% + 50vw))}
  to{transform:none}
}
@keyframes ag-in-up{
  from{transform:translateY(calc(100% + 40vh))}
  to{transform:none}
}
@keyframes ag-settle{
  from{transform:translateX(64px);opacity:0}
  to{transform:none;opacity:1}
}

/* utility bar and header travel together as one top bar */
.home .utility,
.home .site-header{animation:ag-drop-in .72s cubic-bezier(.22,1,.3,1) both}

.home .hero-copy{animation:ag-in-left 1s cubic-bezier(.16,1,.3,1) .2s both}

.home .hero-collage{animation:ag-in-right 1s cubic-bezier(.16,1,.3,1) .28s both}
/* the tiles trail in on top of the collage's own travel */
.home .hero-collage .shot{animation:ag-settle .7s cubic-bezier(.16,1,.3,1) both}
.home .hero-collage .shot:nth-child(1){animation-delay:.5s}
.home .hero-collage .shot:nth-child(2){animation-delay:.58s}
.home .hero-collage .shot:nth-child(3){animation-delay:.66s}
.home .hero-collage .shot:nth-child(4){animation-delay:.74s}

.home .stat-strip{animation:ag-in-up .9s cubic-bezier(.16,1,.3,1) .62s both}

/* once the hero copy has landed, its eyebrow rule draws and the chips pop in */
.home .hero .eyebrow::before{transform-origin:left;animation:ag-line .8s cubic-bezier(.16,1,.3,1) .85s backwards}
.home .promise-chips li{animation:ag-pop .55s cubic-bezier(.34,1.56,.64,1) backwards}
.home .promise-chips li:nth-child(1){animation-delay:.95s}
.home .promise-chips li:nth-child(2){animation-delay:1.03s}
.home .promise-chips li:nth-child(3){animation-delay:1.11s}
.home .promise-chips li:nth-child(4){animation-delay:1.19s}

/* ---------- scroll reveals ---------- */
/* On pages whose body has .motion, main.js tags the
   blocks below the fold with .rv (plus a variant class) and adds .is-in as
   each one scrolls into view, with --rv-d staggering whatever arrives
   together. The motion only touches opacity, clip-path and the individual
   translate/scale properties, with a backwards-only fill, so it never fights
   the hover transforms on cards and buttons and leaves nothing behind once it
   has played. With no JS, or with reduced motion, main.js adds no .rv and the
   page is simply static. */
@media screen{
  .motion .rv:not(.is-in){opacity:0}
}
.motion .rv.is-in{animation:ag-rise .85s cubic-bezier(.16,1,.3,1) var(--rv-d,0s) backwards}
.motion .rv--left.is-in{animation-name:ag-rise-left}
.motion .rv--fade.is-in{animation-name:ag-fade;animation-duration:1s}
.motion .rv--zoom.is-in{animation-name:ag-zoom;animation-duration:1s}
.motion .rv--pop.is-in{animation:ag-pop .55s cubic-bezier(.34,1.56,.64,1) var(--rv-d,0s) backwards}
/* split photos slide in from the side they sit on (main.js picks the side),
   then settle inside their frame. Sections clip sideways overflow so a photo
   travelling in from the right never flashes a horizontal scrollbar; clip,
   unlike hidden, leaves vertical overflow and sticky positioning alone. */
.motion .rv--from-left.is-in{animation:ag-from-left 1.1s cubic-bezier(.16,1,.3,1) var(--rv-d,0s) backwards}
.motion .rv--from-right.is-in{animation:ag-from-right 1.1s cubic-bezier(.16,1,.3,1) var(--rv-d,0s) backwards}
.motion main > section{overflow-x:clip}

/* follow-through inside a block that has just revealed */
.motion .split__media.is-in img,
.motion .card.is-in .card__media img{animation:ag-unzoom 1.4s cubic-bezier(.16,1,.3,1) var(--rv-d,0s) backwards}
.motion .feature.is-in .icon,
.motion .timeline li.is-in::before{animation:ag-pop .6s cubic-bezier(.34,1.56,.64,1) calc(var(--rv-d,0s) + .3s) backwards}
.motion .eyebrow.is-in::before{transform-origin:left;animation:ag-line .8s cubic-bezier(.16,1,.3,1) calc(var(--rv-d,0s) + .25s) backwards}

/* main.js counts the stat figures up from zero; fixed-width digits stop them jittering */
.motion .stat b{font-variant-numeric:tabular-nums}

/* inner pages have no hero intro, so the page heading rises in on load instead */
.motion .page-head .wrap > *{animation:ag-rise .9s cubic-bezier(.16,1,.3,1) backwards}
.motion .page-head .wrap > :nth-child(2){animation-delay:.08s}
.motion .page-head .wrap > :nth-child(3){animation-delay:.16s}

@keyframes ag-rise{from{opacity:0;translate:0 36px}}
@keyframes ag-rise-left{from{opacity:0;translate:-30px 0}}
@keyframes ag-fade{from{opacity:0}}
@keyframes ag-zoom{from{opacity:0;scale:.94;translate:0 30px}}
@keyframes ag-from-left{from{opacity:0;translate:-160px 0}}
@keyframes ag-from-right{from{opacity:0;translate:160px 0}}
@keyframes ag-unzoom{from{scale:1.16}}
@keyframes ag-pop{from{opacity:0;scale:.5}}
@keyframes ag-line{from{scale:0 1}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  /* The table of contents stops being a sidebar and becomes a card above the text. */
  .legal-layout{grid-template-columns:1fr;gap:34px}
  .legal-toc{
    position:static;background:var(--wash);border:1px solid var(--line);
    border-radius:var(--radius);padding:20px 22px;
  }
  .legal-body{max-width:none}
  .hero-collage{max-width:520px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .model-grid{grid-template-columns:repeat(3,1fr)}
  .stat-strip .wrap{grid-template-columns:repeat(3,1fr)}
  .stat{border-bottom:1px solid var(--line)}
  .stat:nth-child(3){border-right:0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .cta-inner{grid-template-columns:1fr;padding:44px 34px}
  .cta-inner .btn-row{justify-content:flex-start}
  .cat-head{grid-template-columns:1fr;gap:22px}
  .cat-head .shot{max-width:300px}
}
@media (max-width:1150px){
  .account-grid{grid-template-columns:1fr;gap:34px}
  .danger-card{max-width:none}
  .utility .util-links{display:none}
  .site-header .wrap{gap:12px;min-height:66px}
  .brand img{height:auto;width:min(230px,52vw)}
  .nav-toggle{display:flex;margin-left:8px}
  .cart-btn{order:0;margin-left:8px}
  .account-btn{order:0;margin-left:auto;padding:0 12px}
  /* Icon-only here, but the label stays for screen readers: hidden visually,
     not with display:none, or the link would have no name at all. */
  .account-btn span{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  }
  .nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:10px 16px 18px;display:none;box-shadow:var(--shadow);
  }
  .nav.is-open{display:flex}
  .nav a{padding:13px 10px;border-radius:8px;font-size:1rem}
  .nav a.is-active{box-shadow:none;background:var(--navy-100)}
  .header-cta{margin:10px 0 0}
  .split,.contact-grid{grid-template-columns:1fr;gap:34px}
  .pd-grid{grid-template-columns:1fr;gap:34px}
  .sel-grid{grid-template-columns:1fr;gap:38px}
  .pd-detail-grid{grid-template-columns:1fr;gap:36px}
  .td-card{grid-template-columns:auto 1fr;gap:16px;padding:20px 22px}
  .td-card .btn{grid-column:1/-1;justify-self:start;margin-top:4px}
  .variant-list > div{grid-template-columns:1fr;gap:3px;padding:11px 2px}
  .sel-size{grid-template-columns:1fr;gap:14px;padding:24px 22px;margin-top:36px}
  .pd-media{position:static;max-width:420px}
  .pd-specs{grid-template-columns:1fr}
  .nf-cats{grid-template-columns:1fr}
  .pd-specs > div{grid-template-columns:1fr;gap:2px;padding:11px 2px}
  .split--reverse .split__media{order:0}
  .g2,.g3,.promise-grid{grid-template-columns:1fr}
  /* The rule above suits the big picture cards, but leaves nine short directory
     cards in a very long stack - hold them at two columns instead. */
  #directory .grid{grid-template-columns:repeat(2,1fr)}
  .section{padding:58px 0}
  .toolbar{top:0}
}
@media (max-width:620px){
  #directory .grid{grid-template-columns:1fr}
  .site-header .wrap{gap:8px;padding-left:16px;padding-right:16px}
  /* .btn is nowrap by default; this one is a sentence, so let it wrap */
  .auth-gate{padding:24px 20px}
  .auth-gate .btn{white-space:normal;text-align:center}
  .brand img{width:min(200px,44vw)}
  .cart-btn,.account-btn,.nav-toggle{width:40px;height:40px}
  .account-btn{padding:0}
  .nav-toggle{margin-left:6px}
  .ag-size{grid-template-columns:1fr}
  .ag-modal{padding:0}
  .ag-modal-inner{max-height:100vh;height:100%;width:100%;border-radius:0}
  .ag-modal-foot{border-radius:0}
  .g4,.model-grid{grid-template-columns:1fr 1fr}
  .stat-strip .wrap{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-right:1px solid var(--line)}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-inner{padding:36px 24px}
  .toolbar{position:static}
}
@media (max-width:420px){
  .g4{grid-template-columns:1fr}
  .model-grid{gap:12px}
  .model{padding:14px 10px 16px}
  .model b{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
@media print{
  .site-header,.utility,.toolbar,.cta,.site-footer{display:none}
}