/* ---- Work Sans, self-hosted -----------------------------------------------
   Was two render-blocking requests to fonts.googleapis.com + fonts.gstatic.com
   on the critical path of every page. Google serves this family as a VARIABLE
   font -- all six declared weights (200-700) resolve to one file per subset --
   so each subset is a single @font-face with a weight RANGE rather than six
   near-identical blocks. unicode-range is copied verbatim from Google's own
   CSS, so the browser still downloads only the subset a page actually needs.
   --------------------------------------------------------------------------- */
@font-face{font-family:'Work Sans';font-style:normal;font-weight:200 700;font-display:swap;src:url(/assets/fonts/work-sans-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:200 700;font-display:swap;src:url(/assets/fonts/work-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:200 700;font-display:swap;src:url(/assets/fonts/work-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ==========================================================================
   Ardent Quality Care — design system
   One stylesheet for all four pages, so header, footer, buttons, cards and
   rhythm are identical everywhere and can only change in one place.
   Type and spacing are fluid (clamp) rather than stepped at breakpoints:
   the layout is the same shape on every device and only its scale changes,
   which is what keeps a 380px phone and a 1900px monitor looking related.
   ========================================================================== */

:root{
  /* Palette, sampled from the supplied designs */
  --cream:#fffeed;
  --cream-2:#eef2f6;
  --ink:#171200;
  /* Retoned 2026-09-01 from the supplied reference: the band moved from a
     purple-leaning #211f34 to the reference blue. Also paints the footer. */
  --navy:#102a44;
  /* Card/band surface, kept a step lighter than --navy so the cards still
     read as panels sitting on the band. Was #08585b. Also used by prose
     links and the contact form success note. */
  --teal:#1d4b73;
  --olive:#1d4b73;
  --olive-dk:#102a44;
  --ink-bar:#06131f;
  --khaki:#dce4ec;
  --gold:#847539;
  --gold-lt:#c2a065;
  --white:#fff;
  --text-light:#fffeed;
  --muted:#666558;
  --muted-on-dark:rgba(255,254,237,.78);
  --line:rgba(20,20,15,.12);

  /* Fluid type. min at 360px, max at 1440px. */
  --t-display:clamp(2.1rem,1.28rem + 3.65vw,4.125rem);
  --t-h1:clamp(1.75rem,1.25rem + 2.25vw,3rem);
  --t-h2:clamp(1.8rem,1.3rem + 2.3vw,3.75rem);
  --t-h3:clamp(1.05rem,.97rem + .4vw,1.25rem);
  --t-body:clamp(.95rem,.92rem + .14vw,1rem);
  --t-sm:clamp(.85rem,.83rem + .1vw,.9375rem);
  --t-label:clamp(.78rem,.74rem + .16vw,.8125rem);

  /* Fluid spacing scale */
  --s-1:clamp(.4rem,.35rem + .2vw,.6rem);
  --s-2:clamp(.7rem,.6rem + .3vw,1rem);
  --s-3:clamp(1rem,.85rem + .5vw,1.5rem);
  --s-4:clamp(1.4rem,1.15rem + .9vw,2.25rem);
  --s-5:clamp(2rem,1.6rem + 1.5vw,3.25rem);
  --s-6:clamp(2.75rem,2.1rem + 2.4vw,4.75rem);
  --s-7:clamp(3rem,2.1rem + 2.8vw,5.625rem);

  --gutter:clamp(1.375rem,.55rem + 2.9vw,3.125rem);
  --max:1920px;
  --r:14px;
  --r-pill:999px;
  --nav-h:clamp(76px,64px + 4.3vw,111px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:'Work Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--t-body);line-height:1.5;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--s-7)}
.section-sm{padding-block:var(--s-6)}

h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.02em;line-height:1.2}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:600;letter-spacing:-.01em;line-height:1.3}
p{margin:0 0 var(--s-2)}
p:last-child{margin-bottom:0}

.display{font-size:var(--t-display);font-weight:200;line-height:1.2;letter-spacing:-.02em}
.lede{font-size:clamp(1.08rem,1rem + .38vw,1.3125rem);line-height:1.55;color:var(--muted);max-width:62ch}
.label{
  display:block;font-size:var(--t-label);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:var(--s-2);
}
.muted{color:var(--muted)}
.on-dark{color:var(--text-light)}
.on-dark .muted,.on-dark .lede{color:var(--muted-on-dark)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.85em 1.5em;border:0;border-radius:var(--r-pill);
  font:inherit;font-size:var(--t-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:var(--text-light)}
.btn-gold:hover,.btn-gold:focus-visible{background:#6d6030}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:var(--olive)}
.btn-light{background:var(--white);color:var(--ink)}
.btn-light:hover{background:var(--cream)}
.btn-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--cream)}
.btn .arrow{font-size:.9em;line-height:1}

/* ---- header ---- */
.site-header{
  position:sticky;top:0;z-index:50;background:#000;color:var(--text-light);
}
.header-inner{
  min-height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
}
/* Wordmark only, as in the supplied design -- the leaf mark appears once, on
   the Services page, and nowhere else. */
.brand{
  display:block;text-decoration:none;color:var(--text-light);
  font-weight:700;letter-spacing:-.005em;line-height:1.12;
  font-size:clamp(.95rem,.86rem + .4vw,1.25rem);white-space:nowrap;
}
.brand span{display:block}
.nav{display:flex;align-items:center;gap:clamp(1rem,.6rem + 1.4vw,2rem)}
.nav a{
  font-size:var(--t-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding-block:.4em;border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--gold)}
.nav a[aria-current="page"]{border-bottom-color:var(--gold)}
.nav-cta{margin-left:clamp(.25rem,1vw,1rem)}
.burger{
  display:none;width:44px;height:44px;border:0;background:transparent;color:inherit;
  cursor:pointer;align-items:center;justify-content:center;
}
.burger span{display:block;width:22px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor}
.burger span::before{top:-7px}
.burger span::after{top:7px}

@media(max-width:860px){
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;background:var(--ink);padding:var(--s-2) var(--gutter) var(--s-4);
    border-top:1px solid rgba(255,254,237,.12);
  }
  .nav[hidden]{display:none}
  .nav a{padding-block:.95em;border-bottom:1px solid rgba(255,254,237,.1);font-size:.82rem}
  .nav a:hover,.nav a[aria-current="page"]{border-bottom-color:rgba(255,254,237,.1);color:var(--gold-lt)}
  .nav-cta{margin:var(--s-3) 0 0;justify-content:center}
  .burger{display:flex}
}

/* ---- hero ---- */
.hero{position:relative;min-height:clamp(380px,58vh,620px);display:grid;align-items:center;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,20,15,.86) 0%,rgba(20,20,15,.64) 45%,rgba(20,20,15,.22) 100%);
}
.hero-inner{position:relative;z-index:1;padding-block:var(--s-6)}
/* Measure lives on the text, not on .container -- overriding the container's
   max-width made `margin-inline:auto` centre the hero and pushed it out of
   line with every other section on the page. */
.hero h1{max-width:19ch}
.hero h1{color:var(--text-light);font-weight:600;font-size:var(--t-display);line-height:1.08}
.hero p{color:rgba(255,254,237,.9);margin-top:var(--s-3);max-width:46ch;font-size:clamp(.98rem,.92rem + .3vw,1.15rem)}
.hero .btn{margin-top:var(--s-4)}

/* ---- generic split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:center}
.split img{border-radius:var(--r);width:100%;height:100%;object-fit:cover;max-height:520px}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:var(--s-4)}}

/* ---- cards ---- */
.grid{display:grid;gap:var(--s-3)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

.card{padding:var(--s-4);border-radius:var(--r);height:100%}
.card-teal{background:var(--teal);color:var(--text-light);text-align:center}
.card-teal h3{color:var(--text-light);margin-bottom:var(--s-2)}
.card-teal p{color:rgba(255,254,237,.85);font-size:var(--t-sm)}
.card-olive{background:var(--olive);color:var(--text-light)}
.card-olive h3{color:var(--text-light);margin-bottom:var(--s-2)}
.card-olive .card-icon{width:clamp(48px,4vw,58px);height:auto;margin-bottom:var(--s-5);color:var(--cream);opacity:.9}
.card-olive .card-sub{font-size:var(--t-sm);color:rgba(255,254,237,.72);margin-bottom:.5em}
.card-olive ul{margin:0;padding-left:1.15em;display:grid;gap:.3em}
.card-olive li{font-size:var(--t-sm);color:rgba(255,254,237,.9)}

/* ---- bands ---- */
.band-navy{background:var(--navy);color:var(--text-light)}
.band-teal{background:var(--teal);color:var(--text-light)}
.band-cream2{background:var(--cream-2)}
.band-white{background:var(--white)}
.band-khaki{background:var(--khaki)}
.band-olive-dk{background:var(--olive-dk);color:var(--text-light)}

/* ---- client logos ---- */
.logos{
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-4);align-items:center;
  margin-top:var(--s-5);
}
.logos img{width:100%;max-width:184px;height:auto;margin-inline:auto;opacity:1}
@media(max-width:900px){.logos{grid-template-columns:repeat(3,1fr);gap:var(--s-3)}}
@media(max-width:460px){.logos{grid-template-columns:repeat(2,1fr)}}

/* ---- quote ---- */
.quote{max-width:60ch}
.quote blockquote{margin:0;font-size:clamp(1.05rem,.95rem + .6vw,1.5rem);font-weight:300;line-height:1.4}
.quote cite{display:block;margin-top:var(--s-2);font-style:normal;font-size:var(--t-sm);color:var(--muted)}

/* ---- form ---- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-4);margin-top:var(--s-5)}
.field{display:flex;flex-direction:column;gap:.35rem}
.field-full{grid-column:1/-1}
.field label{font-size:var(--t-sm);color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--t-body);color:var(--ink);
  padding:.55em 0;border:0;border-bottom:1.5px solid var(--line);background:transparent;border-radius:0;
}
.field textarea{min-height:5.5em;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
/* One column wide, as drawn in the reference -- not the full form width. */
.form .btn{grid-column:1/2;justify-content:center;justify-self:stretch}
@media(max-width:700px){.form .btn{grid-column:1/-1}}
.form-note{grid-column:1/-1;font-size:var(--t-sm);margin:0}
.form-note[data-state="error"]{color:#a3341f}
.form-note[data-state="sent"]{color:var(--teal)}
@media(max-width:700px){.form{grid-template-columns:1fr}}

/* ---- contact block ---- */
.contact-block{background:var(--olive-dk);color:var(--text-light);border-radius:var(--r);padding:var(--s-6) var(--s-4);text-align:center}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-top:var(--s-5)}
.contact-grid h3{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,254,237,.7);margin-bottom:var(--s-2)}
.contact-grid a{color:var(--text-light)}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;gap:var(--s-3)}}

/* ---- footer ---- */
.site-footer{background:var(--navy);color:var(--text-light);padding-block:var(--s-6) 0}
.footer-bar{background:var(--ink-bar);margin-top:var(--s-5)}
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.footer-bottom a{color:rgba(255,254,237,.7);font-size:var(--t-sm);text-decoration:none}
.footer-bottom a:hover{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-4)}
.footer-brand{font-size:clamp(1.15rem,1rem + .5vw,1.5rem);font-weight:700;line-height:1.1;margin-bottom:var(--s-3)}
.site-footer h3{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,254,237,.6);margin-bottom:var(--s-2);font-weight:700}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55em}
.site-footer a{color:var(--text-light);text-decoration:none;font-size:var(--t-sm)}
.site-footer a:hover{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px}
/* Beats `.site-footer a` above, which otherwise forces the button's label
   white on its white background. */
.site-footer a.btn-light{color:var(--ink);text-decoration:none}
.site-footer a.btn-light:hover{color:var(--ink);background:var(--cream);text-decoration:none}
.footer-bottom{
  padding-block:var(--s-3);
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;
  font-size:var(--t-sm);color:rgba(255,254,237,.7);
}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px}

/* Testimonials (About). Centred columns on a dark band, as in the design. */
.tmnl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-5)}
.tmnl{text-align:center;max-width:34ch;margin-inline:auto}
.tmnl .stars{color:var(--gold-lt);letter-spacing:.18em;font-size:1rem;margin-bottom:var(--s-3)}
.tmnl blockquote{margin:0;font-size:var(--t-sm);line-height:1.6;color:rgba(255,254,237,.85)}
.tmnl cite{display:block;margin-top:var(--s-3);font-style:normal;font-size:var(--t-sm);color:rgba(255,254,237,.7)}
.tmnl cite b{display:block;font-weight:400}
@media(max-width:860px){.tmnl-grid{grid-template-columns:1fr;gap:var(--s-4)}}
/* The mission portrait is taller than the landscape shots .split img is sized for. */
.split.split-media img{max-height:none;aspect-ratio:4/3}

/* Footer page-nav sits bolder and uppercase, matching the design. */
.footer-nav a{text-transform:uppercase;font-weight:700;letter-spacing:.1em;font-size:var(--t-label)}
.footer-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
/* About: the three olive cards are deep blocks with the copy sitting mid-card. */
.band-khaki .card-olive{
  min-height:clamp(190px,16vw,250px);padding:var(--s-5);
  display:flex;flex-direction:column;justify-content:center;
}
/* Card titles sit larger than the site's small eyebrow label. */
.band-khaki .card-olive .label{
  margin-bottom:var(--s-4);
  font-size:clamp(1rem,.9rem + .45vw,1.2rem);
  letter-spacing:.08em;line-height:1.3;
}
/* Mission copy aligns to the top of the portrait, not its centre. */
.split.split-media{align-items:start}

/* Contact: the design runs this image taller than the standard split crop, and
   the form's submit is a rounded rectangle rather than the site's pill. */
.split .form + *,
.section .split > img.contact-img{max-height:min(660px,46vw)}
.form .btn[type="submit"]{border-radius:8px;justify-content:center;width:100%;max-width:360px}

/* ---------------------------------------------------------------
   Measured against the 1:1 reference renders (1534px home, 1920px
   services/contact). Numbers below are read off those captures.
   --------------------------------------------------------------- */

/* Home service cards: 378px tall, 30px gutters. */
/* 1fr rows make every row match the tallest, so the tiles stay identical
   whether the grid is 4-up, 2-up or stacked. Without it the single-column
   phone layout gave each card its own row and they sized to their own copy. */
.band-navy .grid-4{gap:30px;grid-auto-rows:1fr}
.band-navy .card-teal{height:100%}
.band-navy .card-teal{
  min-height:378px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:var(--s-4) var(--s-3);
}
.band-navy .card-teal h3{margin-bottom:var(--s-3)}

/* Footer: navy band runs 489px — 85px top padding, 323px of content, 81px bottom. */

/* Bottom bar is exactly 64px: 24 + 16 + 24. */
.footer-bottom{padding-block:24px;line-height:16px}

/* Hero measures 723px tall at a 1534px viewport. */
.hero{min-height:clamp(420px,47vw,760px)}

/* The grey About band on the home page carries a 661px-tall image. */
.band-cream2 .split img{max-height:661px}

/* ---- per-section geometry, measured off the 1:1 reference captures ---- */

/* Footer rhythm: heading->item pitch 62px, item->item 70px. The brand sits
   ~92px above the column headings rather than top-aligning with them. */

/* Home, grey About band: 761px = 50 + 661px image + 50. */
.band-cream2{padding-block:50px}
.band-cream2 .split img{height:661px;max-height:661px}

/* Home, navy band: 98 + label + 54 + 378px cards + 101. */
.band-navy{padding-block:98px 101px}

/* Home, quote band: the reference runs the quote wide, on one line. */
.s-quote{padding-block:96px 70px}
.quote{max-width:none}

/* Home, teal industries band: 115 + 232 + 141. */
.band-teal{padding-block:115px 141px}
.band-teal .logos{margin-top:56px}

/* Services cards: reference rows are 542px and 467px with a 30px gutter, and
   the icon sits at the top with a deep gap before the title. */
.grid-3{gap:30px}
.section .card-olive{padding:56px 48px}
.section .card-olive .card-icon{margin-bottom:118px}
/* The About page's khaki cards keep their own tighter treatment. */
.band-khaki .card-olive{padding:var(--s-5)}

/* Contact: dark block is 464px inside a white band padded 50 / 100. */
.contact-block{min-height:464px;display:flex;flex-direction:column;justify-content:center}
#main .s-contact{padding-block:50px 100px}

/* Contact form: reference field rhythm is looser. */
.form{gap:var(--s-5) var(--s-4)}

/* Services "Why" band: reference runs 402px total. */
#main .s-why{padding-block:52px}
/* Services cards: trim the icon gap so the two rows land on 542 / 467. */
.section .card-olive .card-icon{margin-bottom:85px}
/* Contact form rhythm. */
.form{gap:60px var(--s-4)}
/* Home teal band content. */
.band-teal .logos{margin-top:74px}

/* ---- Header, measured off the reference at 1534px ----
   wordmark 274px wide (28px), nav gap 30px, nav->cta 45px,
   gold pill 175x50 vertically centred in the 111px bar. */
.brand{font-size:clamp(19px,12px + 1.05vw,28px);white-space:nowrap}
.nav a{font-size:13.5px}
.nav{gap:30px}
.nav-cta{margin-left:15px}
.nav a.nav-cta{padding:0 17.5px;height:50px;line-height:1}

/* ---- Hero, measured off the reference at 1534px ----
   h1 70px with a 97px line pitch, body ~29px, and a light, near-uniform
   grey wash over a desaturated photo (not a heavy left-hand vignette). */
.hero h1{
  font-size:clamp(2.2rem,1.35rem + 3.1vw,4.375rem);
  line-height:1.4;font-weight:700;max-width:770px;letter-spacing:-.02em;
}
.hero p{
  font-size:clamp(1.05rem,.85rem + 1.2vw,1.8125rem);
  line-height:1.6;max-width:820px;margin-top:var(--s-4);
}
.hero img{filter:saturate(.55)}
.hero::after{
  /* Was a flat rgba(25,24,17,.54) across the whole hero, which tinted the
     subject as heavily as the empty space behind the copy. Same hue, but
     ramped left-to-right: dense where the headline sits so the type keeps its
     contrast, thinning out over the right so the technician and the motion
     loop read clearly. 100deg matches the angle the section was built on. */
  background:linear-gradient(100deg,
    rgba(16,42,68,.82) 0%,
    rgba(16,42,68,0) 50%);
}

/* Hero content is bottom-weighted in the reference, not vertically centred,
   and sits ~12px further in than the standard gutter. */
.hero{align-items:center}
.hero-inner{padding-block:0;padding-inline-start:calc(var(--gutter) + 12px)}
.hero p{margin-top:var(--s-3)}
.hero .btn{margin-top:12px}

/* =================================================================
   Footer — rebuilt as one coherent block. Columns top-align on a
   shared baseline, list rhythm is even, and the CTA sits on the same
   line as the other column headings.
   ================================================================= */
.site-footer{padding-block:80px 0}
.footer-grid{
  grid-template-columns:1.4fr .8fr 1.1fr 1.25fr;
  gap:40px clamp(20px,2.2vw,48px);
  align-items:start;
}
.footer-brand{font-size:clamp(1.2rem,.95rem + .72vw,1.6rem);line-height:1.2;margin:0;font-weight:700;white-space:nowrap}
.site-footer h3{
  font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,254,237,.5);font-weight:700;line-height:1.2;
  margin:0 0 16px;padding-top:2px;
}
.site-footer ul{display:grid;gap:14px;list-style:none;margin:0;padding:0}
.site-footer a{font-size:1rem;line-height:1.5}
.footer-nav{gap:12px}
.footer-nav a{font-size:var(--t-label);letter-spacing:.1em}
/* the quote button aligns with the top of the adjacent lists */
.footer-grid .btn-light{margin-top:2px}
.footer-bar{margin-top:72px}
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .site-footer h3{padding-top:0}
}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;gap:32px}}

/* ---- section rhythm / text flow ----
   The icon-to-title gap in the service cards read as a broken gap rather
   than deliberate space; tighten it and let the grid even the rows out. */
.section .card-olive .card-icon{margin-bottom:44px}
.section .card-olive{padding:48px 44px}
.card-olive ul{gap:.5em}
.card-olive li,.card-olive .card-sub{line-height:1.55}
/* comfortable measures for running copy */
.lede{max-width:60ch}
.card-teal p{line-height:1.55}

/* ---- section label variants ---- */
.label-gold{color:var(--gold-lt);font-weight:700}

/* ---- testimonials ---- */
.s-testimonials .tgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:48px;align-items:stretch;
}
.tcard{display:flex;flex-direction:column}
.tcard cite{margin-top:auto}
.tcard{
  background:var(--cream);border:1px solid rgba(20,18,0,.08);border-radius:var(--r);
  padding:36px 34px;
}
.tcard blockquote{margin:0;font-size:1rem;line-height:1.65;color:var(--ink)}
.tcard blockquote p{margin:0 0 1em}
.tcard blockquote p:last-child{margin-bottom:0}
.tmore{margin-top:.5em}
.tmore summary{
  cursor:pointer;list-style:none;font-weight:600;color:var(--olive);
  font-size:var(--t-sm);padding:.35em 0;
}
.tmore summary::-webkit-details-marker{display:none}
.tmore summary::after{content:" \2193";}
.tmore[open] summary::after{content:" \2191";}
.tmore summary:hover{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
/* Once expanded, the toggle moves below the revealed text and becomes a
   collapse control, so it reads as the end of the quote rather than a
   stray "read more" sitting above copy that is already on screen. */
.tmore[open]{display:flex;flex-direction:column}
.tmore[open] summary{order:1;margin-top:.5em;margin-bottom:0}
.tmore summary [data-less]{display:none}
.tmore[open] summary [data-more]{display:none}
.tmore[open] summary [data-less]{display:inline}
.tcard cite{
  display:block;margin-top:24px;padding-top:18px;border-top:1px solid rgba(20,18,0,.1);
  font-style:normal;font-size:var(--t-sm);color:var(--muted);
}
.tcard cite b{display:block;font-weight:700;color:var(--ink);margin-bottom:2px}
@media(max-width:980px){.s-testimonials .tgrid{grid-template-columns:1fr;gap:24px}}

/* ---- experience across the food industry ---- */
.s-experience{text-align:center}
.exp-intro{margin:var(--s-3) auto 0;max-width:60ch}
.s-experience h2{max-width:20ch;margin-inline:auto}
.exp-list{
  list-style:none;margin:48px 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
}
.exp-list li{
  border:1.5px solid rgba(255,254,237,.45);border-radius:var(--r-pill);
  padding:.7em 1.5em;font-size:var(--t-sm);font-weight:600;letter-spacing:.02em;
}

/* ---- consultation CTA ---- */
.s-cta{text-align:center}
.s-cta .lede{margin:var(--s-3) auto var(--s-4);max-width:56ch}

/* ---- footer nav: bold + gold per the brief ---- */
.footer-nav a{color:var(--gold-lt);font-weight:700}
.footer-nav a:hover{color:var(--cream)}
.footer-mark{display:block;width:clamp(48px,3.6vw,58px);height:auto;margin-bottom:18px}

/* footer CTA: trim horizontal padding so it clears its column at 1024-1200 */
.footer-grid .btn{padding-inline:1.2em}

/* =================================================================
   Button hover / focus — lift, shadow and a nudged arrow, on top of
   the existing colour change so the state reads at a glance.
   ================================================================= */
.btn{position:relative}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 10px 22px rgba(20,18,0,.26)}
.btn:active{transform:translateY(0);box-shadow:0 4px 10px rgba(20,18,0,.22)}
.btn .arrow{transition:transform .22s ease}
.btn:hover .arrow,.btn:focus-visible .arrow{transform:translate(3px,3px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* light buttons sit on light ground, so they need a tint as well as a lift */
.btn-light:hover,.btn-light:focus-visible{background:var(--cream);box-shadow:0 10px 22px rgba(20,18,0,.18)}
/* nav underline grows from the left rather than snapping on */
.nav a:not(.nav-cta){position:relative;border-bottom-color:transparent}
.nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav a:not(.nav-cta):hover::after,
.nav a:not(.nav-cta):focus-visible::after,
.nav a[aria-current="page"]:not(.nav-cta)::after{transform:scaleX(1)}
/* footer + inline links get an animated underline too */
.site-footer a:not(.btn),.tmore summary{transition:color .2s ease}

/* =================================================================
   Parallax frames. The image is oversized inside a clipping frame so
   it can be shifted on scroll without ever exposing an edge. The
   shift itself is driven from JS (rAF + getBoundingClientRect) —
   CSS scroll timelines are unreliable inside sticky/clipped boxes.
   ================================================================= */
.px{overflow:hidden;border-radius:var(--r);width:100%;height:100%;max-height:520px}
.px img{
  width:100%;height:100%;max-height:none;border-radius:0;object-fit:cover;display:block;
  transform:scale(1.3);will-change:transform;
}
.band-cream2 .split .px{height:661px;max-height:661px}
/* Mission image was outpainted to 4:3 so the frame no longer has to run tall. */
.split.split-media .px{max-height:none;aspect-ratio:4/3;height:auto}
.px-contact{max-height:min(660px,46vw)}
.hero img{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .px img{transform:none !important}
  .hero img{transform:none !important}
  .btn:hover,.btn:focus-visible{transform:none}
}

/* =================================================================
   Tile hover. The lift colours are the lightest step that keeps BOTH
   the heading (cream) and the 85%-opacity body copy above AA:
   teal  #08585b -> #096468  (6.81 / 4.82)
   olive #584e26 -> #655a2c  (6.77 / 4.79)
   ================================================================= */
.card{transition:background .28s ease,transform .28s ease,box-shadow .28s ease}
.card-teal:hover{background:#265d8c}
.card-olive:hover{background:#265d8c}
.card-teal:hover,.card-olive:hover{
  transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.3);
}
/* testimonial cards sit on white, so they warm and gain edge definition */
.tcard{transition:background .28s ease,border-color .28s ease,transform .28s ease,box-shadow .28s ease}
.tcard:hover{
  background:#eef2f6;border-color:rgba(20,18,0,.2);
  transform:translateY(-4px);box-shadow:0 16px 32px rgba(20,18,0,.14);
}
/* the industry pills read as small tiles - fill them on hover */
.exp-list li{transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease}
.exp-list li:hover{
  background:var(--text-light);border-color:var(--text-light);color:var(--teal);transform:translateY(-3px);
}
@media(prefers-reduced-motion:reduce){
  .card-teal:hover,.card-olive:hover,.tcard:hover,.exp-list li:hover{transform:none}
}

/* Header CTA reverses on hover: the gold fill and cream label swap, with a
   gold ring so the button keeps its shape against the black bar.
   Gold #847539 on cream #fffeed = 4.50:1 (AA), the same pair inverted. */
.nav a.nav-cta:hover,.nav a.nav-cta:focus-visible{
  background:var(--text-light);
  color:var(--gold);
  box-shadow:inset 0 0 0 2px var(--gold),0 10px 22px rgba(0,0,0,.35);
}

/* Hero image is anchored to the top: `object-position` puts the whole cover
   crop at the bottom, and `transform-origin` makes the scroll zoom expand
   downwards, so the top of the frame is never cut at any scale. */
.hero img{object-position:50% 0;transform-origin:50% 0}

/* "What we help with" tiles carry plenty of vertical room, so the titles
   can run larger than the site's default h3. */
.card-teal h3{
  font-size:clamp(1.15rem,1rem + .65vw,1.5rem);line-height:1.3;
  /* em-based measure forces two lines at every size, and `balance` splits
     them evenly instead of leaving one word stranded */
  max-width:11.5em;margin-inline:auto;text-wrap:balance;
}

/* "Why Ardent Quality Care?" copy runs wider than the site's default 60ch
   measure so it fills the band rather than sitting as a narrow column. */
.s-why .lede{max-width:min(100%,62rem)}

/* Footer brand column shrinks to the wordmark, so centring the mark inside it
   lines the logo up with the text rather than the full grid column. */
.footer-grid > div:first-child{display:flex;flex-direction:column;align-items:center;width:fit-content}

/* =================================================================
   MOBILE PASS (<=760px)
   Several bands and cards carry fixed pixel values derived from the
   1534/1920 reference captures. Those are desktop numbers and are far
   too large on a phone, so they are re-stated here in mobile terms,
   and short blocks are centred where that reads better stacked.
   ================================================================= */
@media(max-width:760px){

  /* ---- band rhythm: one consistent vertical step ---- */
  .band-cream2,
  .band-navy,
  .band-teal,
  .band-khaki,
  .band-olive-dk,
  #main .s-why,
  #main .s-contact,
  .section,
  .section-sm{padding-block:56px}
  .band-teal{padding-block:56px 60px}

  /* ---- cards: reclaim the space eaten by desktop padding ---- */
  .section .card-olive{padding:28px 22px}
  .section .card-olive .card-icon{margin-bottom:24px;width:46px}
  .band-khaki .card-olive{padding:28px 24px;min-height:0;justify-content:flex-start}
  .band-navy .card-teal{min-height:0;padding:32px 24px}
  .band-navy .grid-4{gap:16px;margin-top:32px !important}
  .grid-3{gap:16px}
  .tcard{padding:26px 22px}
  .contact-block{min-height:0;padding:36px 22px}

  /* ---- media: desktop frame heights are too tall on a phone ---- */
  .px{max-height:320px}
  .band-cream2 .split .px{height:auto;aspect-ratio:4/3;max-height:none}
  /* desktop pins this image to 661px; it must fill the mobile frame instead */
  .band-cream2 .split img{height:100%;max-height:none}
  .split.split-media .px{aspect-ratio:4/3;max-height:300px}
  .px-contact{max-height:300px}

  /* ---- hero ---- */
  .hero-inner{padding-inline-start:var(--gutter);padding-block:50px}
  .hero h1{max-width:none}
  .hero p{max-width:none}

  /* ---- centred blocks: short, stacked content reads better centred ---- */
  .band-cream2 .split > div{text-align:center}
  .band-cream2 .split > div .lede{margin-inline:auto}
  .band-navy > .container > .label,
  .s-testimonials > .container > .label{text-align:center}
  .band-khaki .card-olive{text-align:center}
  .band-khaki .card-olive .label{margin-bottom:14px}

  /* ---- footer: stacked columns centre, mark stays over the wordmark ---- */
  .site-footer{padding-block:56px 0}
  .footer-bar{margin-top:44px}
  .footer-grid{text-align:center;gap:34px}
  .footer-grid > div:first-child{margin-inline:auto}
  .site-footer h3{margin-bottom:14px;padding-top:0}
  .site-footer ul{gap:10px}
  .footer-grid .btn{margin-inline:auto}
  .footer-legal{justify-content:center;gap:var(--s-3)}
  .footer-bottom{justify-content:center;text-align:center;gap:10px;padding-block:18px}

  /* ---- experience pills ---- */
  /* the desktop 60px row gap is far too airy once fields stack */
  .form{gap:26px var(--s-3);margin-top:var(--s-4)}
  .exp-list{gap:10px;margin-top:32px}
  .exp-list li{padding:.6em 1.1em}
}

/* very small phones */
@media(max-width:400px){
  .section .card-olive{padding:24px 18px}
  .band-navy .card-teal{padding:28px 18px}
  .tcard{padding:22px 18px}
}

/* =================================================================
   Touch targets. Several links rendered only 14-19px tall, well under
   the 44px touch guidance (and under WCAG 2.2's 24px floor). Height is
   added with flex centring so the type size is unchanged.
   ================================================================= */
@media(max-width:900px){
  .site-footer a:not(.btn),
  .footer-bottom a,
  .contact-grid a,
  .brand{display:inline-flex;align-items:center;min-height:44px}
  .footer-nav a,.site-footer ul a{justify-content:center}
  .site-footer ul{gap:2px}
  .footer-legal{gap:var(--s-4)}
  .footer-bottom{padding-block:10px}
  /* keep the tel/mailto pair from colliding once each is 44px tall */
  .contact-grid li,.contact-grid p{margin:0}
}

/* Brand lock-up: reversed AQC mark sits beside the wordmark in the black bar. */
.brand{display:inline-flex;align-items:center;gap:clamp(9px,.8vw,13px)}
.brand-mark{width:clamp(32px,24px + 1.15vw,46px);height:auto;flex:none}
@media(max-width:420px){.brand-mark{width:30px}.brand{gap:8px}}

/* Wordmark + tagline stack beside the mark. `.brand span{display:block}` is
   more specific than a bare `.brand-text`, so this has to out-specify it or the
   column silently renders as two blocks with no flex control. Sized in `em` so
   the pair scales with the brand's own clamp rather than drifting from it. */
.brand .brand-text{display:flex;flex-direction:column;justify-content:center;gap:.16em}
.brand-tagline{
  /* `em` keeps it proportional to the wordmark, but the brand's own clamp
     bottoms out at 19px, which would render this at 7.6px -- too small to read.
     The floor and ceiling bound it at both ends. */
  font-size:clamp(9px,.4em,12px);
  font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  line-height:1.25;color:rgba(255,254,237,.72);
}
/* Below this the bar cannot carry the tagline without shunting the burger off
   the right edge, so the wordmark stands on its own. Matches the width at which
   the mark already steps down. */
/* `.brand span{display:block}` is (0,1,1) and a media query adds no
   specificity, so a bare `.brand-tagline` here loses to it and the rule
   silently does nothing. Qualify it to (0,2,0). */
@media(max-width:420px){.brand .brand-tagline{display:none}}

/* Headings balance their lines so a single word is never left stranded on the
   last line. The hero is excluded: its measure is tuned to reproduce the
   reference wrapping exactly, and balancing would override that. */
h1,h2,h3,.card-teal h3{text-wrap:balance}
/* `balance` evens line lengths but will still strand a final word on longer
   headings; `pretty` is the one that specifically avoids that last-line orphan. */
.display{text-wrap:balance}
.lede,p{text-wrap:pretty}
/* Hero keeps its tuned reference wrapping at the widths it was measured at,
   and balances below that rather than stranding "Trust". */
.hero h1,.hero p{text-wrap:wrap}
@media(max-width:1499px){.hero h1{text-wrap:balance}}
/* "Practical partnership" was breaking one-word-per-line in the 2-up range */
@media(max-width:1080px){.band-khaki .card-olive .label{font-size:1rem;letter-spacing:.06em}}

/* Binds the final two words so the last line is never a lone word. Released on
   small screens, where the pair would be too wide for the measure. */
.nobreak{white-space:nowrap}
@media(max-width:339px){.nobreak{white-space:normal}}

/* Between 1081 and 1360 the four teal cards are only ~194-235px wide, which
   pushes "Retailer Compliance" onto a third line on its own. Taper the title
   through that band so every card holds two lines. */
@media(min-width:1081px) and (max-width:1360px){
  .card-teal h3{font-size:19px}
}

/* <picture> is a layout no-op so the image still positions against .hero / .px.
   `display:contents` promotes the picture's own children to grid items, and a
   <source> is not display:none by default -- it was claiming a second grid row
   in the hero, and align-content:stretch then split the spare height between
   that empty row and the content, pushing the copy off centre. Sources carry
   metadata only and should never generate a box; hiding them does not affect
   the browser's image selection, which reads the DOM, not CSS. */
.hero picture,.px picture{display:contents}
picture source{display:none}

/* Headings inside a two-column split have roughly half the width of a
   full-bleed one, so 66px forces four lines and strands the final word.
   56px lets them settle into three balanced lines. The Services page heading
   is full-width and keeps the reference 66px. */
.split .display{font-size:clamp(2rem,1.25rem + 2.6vw,3.5rem)}

/* Card titles are h2 for a clean document outline (no h1->h3 skip); they keep
   the visual weight of an h3. */
.card h2{font-size:var(--t-h3);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.card-olive h2,.card-teal h2{color:var(--text-light);margin-bottom:var(--s-2)}
.card-teal h2{font-size:clamp(1.15rem,1rem + .65vw,1.5rem);line-height:1.3;max-width:11.5em;margin-inline:auto;text-wrap:balance}
.band-khaki .card-olive h2.label{margin-bottom:var(--s-4)}
@media(min-width:1081px) and (max-width:1360px){.card-teal h2{font-size:19px}}

/* ==========================================================================
   Legal documents — Privacy Policy and Accessibility Statement
   ==========================================================================
   These exist as real pages at /aqc/privacy and /aqc/accessibility AND open in
   a dialog from the footer. The page is the source of truth; the dialog fetches
   from it. That ordering is deliberate: a policy needs a stable URL you can
   link to from a quote or an email, it has to survive JavaScript being off or
   failing, and a legal document that exists only inside a modal is one a
   regulator cannot cite.
   ========================================================================== */

.legal{max-width:78ch}
.legal .lede{max-width:none}
.legal-meta{margin-top:var(--s-3);font-size:var(--t-sm);color:var(--muted)}

.prose + .prose{margin-top:var(--s-5)}
.prose h2{font-size:clamp(1.25rem,1.1rem + .7vw,1.75rem);margin-bottom:var(--s-2)}
.prose h3{font-size:var(--t-h3);font-weight:700;margin:var(--s-3) 0 var(--s-1)}
.prose p,.prose li{font-size:var(--t-body);line-height:1.65;color:var(--ink)}
.prose p + p{margin-top:var(--s-2)}
.prose ul{margin:var(--s-2) 0 0;padding-left:1.25em}
.prose li + li{margin-top:var(--s-1)}
.prose a{color:var(--teal);text-underline-offset:3px}
.prose a:hover,.prose a:focus-visible{color:var(--olive)}
.prose code{font-size:.92em;background:var(--cream-2);padding:.1em .35em;border-radius:4px}

/* ---- the dialog ---------------------------------------------------------
   <dialog> + showModal() rather than a hand-rolled div: the browser supplies
   the focus trap, Escape to close, inertness of the page behind, and returns
   focus to the trigger on close. Re-implementing those correctly is most of
   the work of an accessible modal, and getting any one of them wrong is what
   makes home-made modals unusable with a screen reader. */
.legal-dialog{
  border:0;padding:0;max-width:min(72ch,94vw);width:100%;
  max-height:min(86dvh,900px);border-radius:var(--r);background:var(--white);
  color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden;
}
.legal-dialog::backdrop{background:rgba(23,18,0,.6)}
.legal-dialog[open]{display:flex;flex-direction:column}

.legal-dialog .ld-head{
  flex:none;display:flex;align-items:flex-start;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);background:var(--cream);
}
.legal-dialog .ld-head h2{flex:1;min-width:0;font-size:clamp(1.15rem,1rem + .6vw,1.5rem)}
.legal-dialog .ld-body{flex:1;min-height:0;overflow-y:auto;padding:var(--s-4);-webkit-overflow-scrolling:touch}
.legal-dialog .ld-body > .container{padding-inline:0;max-width:none}
/* The document's own H1 and the eyebrow are replaced by the dialog's title bar. */
.legal-dialog .ld-body h1,.legal-dialog .ld-body .label{display:none}
.legal-dialog .ld-body .lede{margin-bottom:var(--s-4)}

.ld-close{
  flex:none;display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);
  color:var(--ink);cursor:pointer;font-size:1.1rem;line-height:1;
}
.ld-close:hover{background:var(--cream-2)}
.ld-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.ld-foot{
  flex:none;padding:var(--s-2) var(--s-4);border-top:1px solid var(--line);
  background:var(--cream);font-size:var(--t-sm);
}
.ld-foot a{color:var(--teal)}

@media (max-width:600px){
  /* Near full-screen on a phone: a centred card with margins wastes the little
     height there is, and these are long documents. */
  .legal-dialog{max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
  .legal-dialog .ld-body{padding:var(--s-3) var(--gutter)}
}

@media (prefers-reduced-motion:no-preference){
  .legal-dialog[open]{animation:ld-in .22s ease}
  @keyframes ld-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* =================================================================
   One button treatment sitewide: gold fill with the cream label,
   inverting on hover and focus to a cream fill with a gold label.
   The 2px gold ring is what keeps the inverted state readable on the
   pale bands -- a bare cream fill on #f3f3f3 all but disappears.
   Declared last so it supersedes the earlier per-variant rules.
   ================================================================= */
.btn,
.btn-gold,
.btn-dark,
.btn-light,
.btn-outline,
.site-footer a.btn,
.site-footer a.btn-light{
  background:var(--gold);
  color:var(--text-light);
  box-shadow:none;
}
.btn:hover,.btn:focus-visible,
.btn-gold:hover,.btn-gold:focus-visible,
.btn-dark:hover,.btn-dark:focus-visible,
.btn-light:hover,.btn-light:focus-visible,
.btn-outline:hover,.btn-outline:focus-visible,
.site-footer a.btn:hover,.site-footer a.btn:focus-visible,
.site-footer a.btn-light:hover,.site-footer a.btn-light:focus-visible,
.nav a.nav-cta:hover,.nav a.nav-cta:focus-visible{
  background:var(--text-light);
  color:var(--gold);
  box-shadow:inset 0 0 0 2px var(--gold),0 10px 22px rgba(20,18,0,.22);
}
@media(prefers-reduced-motion:reduce){
  .btn:hover,.btn:focus-visible{transform:none}
}


/* ---------------------------------------------------------------------------
   Mission portrait: crop to the text, don't set its own height.
   The 4:3 frame sized itself from the column width, so how far it hung past the
   copy depended entirely on the viewport -- 218px below at 1900px wide, and
   actually SHORTER than the copy by 1440px. Stretching the row and letting the
   frame fill it makes the two columns end on the same line at every width.
   The image itself needs no change: it is already height:100% + object-fit:
   cover inside an overflow:hidden frame, and its scale(1.3) is the headroom the
   parallax translates within -- so it keeps working, just against a shorter box.
   Two columns only. Below 861px the grid stacks, where a frame with no
   intrinsic height would collapse; the existing mobile rules still own that.
   --------------------------------------------------------------------------- */
@media(min-width:861px){
  .split.split-media{align-items:stretch}
  .split.split-media .px{
    aspect-ratio:auto;height:auto;max-height:none;position:relative;min-height:0;
  }
  /* Absolutely positioned so the image contributes NOTHING to sizing the grid
     row. Clearing the 4/3 aspect-ratio is not enough on its own: an in-flow
     <img> still offers its intrinsic height to an auto row, and height:100%
     does not suppress that -- which is why the frame kept resolving to the
     image's own proportions at wide viewports (638px against 423px of copy)
     while already matching at 1440px. Out of flow, the row is the copy's
     height and object-fit:cover does the cropping. The scale(1.3) the parallax
     translates within is unaffected, and .px is already overflow:hidden. */
  .split.split-media .px img{
    position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
    /* Anchor the crop to the TOP of the source so it comes off the bottom.
       The frame is 2.02:1 against a 1.34:1 image, so cover already discards a
       third of the height, and the parallax scale takes the visible window down
       to ~51% of it -- while the subject spans ~73%, head at 9% and hands at
       82%. The window cannot hold all of her, so a literal 50% centre is what
       was cutting her head. Anchoring at 0 keeps the head and trims the desk. */
    object-position:50% 0;
    /* No parallax zoom on this one. .px img carries a static scale(1.3) as the
       headroom the effect animates within, but against this letterboxed frame
       that zoom eats 11.5% off the top and left the head clearing the edge by
       ~1.3% -- inside a band of viewports it would have clipped outright.
       Unzoomed, the window starts at the very top of the source, so the head
       keeps ~9% of clear space and the crop falls entirely on the desk. */
    transform:none;
  }
}

/* Footer wordmark tagline, mirroring the header lock-up. Deliberately a SIBLING
   of .footer-brand rather than a child: that paragraph is data-edit-type="text",
   and the manager rewrites a node's own text, so nesting this inside it would
   put the tagline in the firing line of an ordinary wordmark edit. The brand
   column is already a centred flex column, so this just stacks underneath. */
.footer-tagline{
  margin:7px 0 0;
  font-size:12px;
  font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  line-height:1.25;color:rgba(255,254,237,.72);
}

/* ---------------------------------------------------------------------------
   Hero motion loop. Layered OVER the still (which stays as the fallback
   underneath) and UNDER .hero::after, so the existing gradient still does the
   text-contrast work. Mirrors every treatment the still gets -- cover,
   object-position and the saturate/sepia grade -- or the loop would read as a
   different photograph the moment it started.
   Hidden, revealing the still beneath, when motion is unwelcome or the source
   is wrong: reduced-motion, and under 592px where the markup swaps to the
   square mobile crop that this 2:1 clip cannot stand in for.
   --------------------------------------------------------------------------- */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 0;
  filter:saturate(.55);
  pointer-events:none;
}
@media(max-width:592px){.hero-video{display:none}}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}




/* Blue variant: the industries pills fill cream on hover; point their text at
   the deep navy rather than the mid blue so the fill still reads as a lift. */
.exp-list li:hover{color:var(--navy)}

/* ---------------------------------------------------------------------------
   Blue variant band rhythm.

   --navy, --olive-dk and --teal drive three surfaces that sit next to each
   other, so they have to stay mutually distinct. Mapping the warm palette's two
   darks onto one navy put the cards band and the testimonials on the SAME
   colour, back to back, which reads as a single slab.

   So the cards band takes the light cool tone and holds dark blue cards -- the
   same shape the warm build uses -- leaving --navy to the footer alone:
     cream2 #eef2f6 -> khaki #dce4ec (blue cards) -> #102a44 -> #1d4b73 -> cream2
   --------------------------------------------------------------------------- */
.band-navy{background:var(--khaki);color:var(--ink)}

/* The industries band sat on --teal, the same blue as the cards, which left it
   only 1.61:1 against the deep navy testimonials directly above -- two dark
   bands with a boundary you had to hunt for. Decoupled: the cards keep the
   mid blue where they need to hold their own against a LIGHT band, and the
   band takes a lighter step so the two darks read apart (2.5:1). Cream on this
   is 5.6:1. */
.band-teal{background:#2a6a9e}

/* Menu bar in the scheme's deep navy rather than black, matching the footer and
   the testimonials band. The mobile drawer is repainted with it too: that panel
   was on --ink, which is the BODY TEXT colour and the .btn-dark fill, so it
   cannot be retoned at the token -- it has to be overridden here or every
   paragraph on the site turns navy. Cream on this is 14.3:1. */
.site-header{background:var(--navy)}
@media(max-width:860px){ .nav{background:var(--navy)} }

/* Testimonial cards white rather than the warm --cream (#fffeed), which read as
   pale gold against the navy band. Overridden on the card, not the token:
   --cream is also the page background and would take the whole site with it.
   The border is neutralised at the same time -- it was a warm rgba(20,18,0,...)
   that tinted the edge of an otherwise cool card. */
.tcard{background:#fff;border-color:rgba(16,42,68,.12)}
.tcard cite{border-top-color:rgba(16,42,68,.14)}

/* Mark above the closing CTA heading, matching how the Services page uses the
   same asset: 132px wide, var(--s-4) beneath, on a WHITE band.
   The band has to be white. The PNG's corner pixel is transparent, but 82% of
   the file is an opaque white rounded plate -- on the #f3f3f3 band that plate
   showed as a visible box around the mark. Services sits it on band-white,
   which is why it reads as a clean mark there and not as a tile. */
.s-cta{background:#fff}
.s-cta .cta-mark{
  display:block;margin:0 auto var(--s-4);
  width:132px;height:auto;max-width:100%;
}

/* ---- home "What we help with": hover reveals the service detail ----------
   Hard constraint: the un-hovered cards must look exactly as they did before
   this feature existed. That rules out keeping the hidden lists in the layout
   to reserve their height -- doing so made every card ~80px taller at rest and
   shifted the titles off a shared baseline.

   So the list is out of the flow until it is wanted, and the card grows to fit
   it on hover. To stop that growth reflowing the band, each card sits in a slot
   that stays in the grid while the card itself goes absolute on hover. The row
   is `grid-auto-rows:1fr` across all four, so its height keeps coming from the
   three cards that are still in flow -- no magic numbers, and nothing below the
   section moves. */
.card-slot{position:relative;display:grid}

.card-detail{
  display:none;
  margin:0;padding-left:1.2em;
  gap:.3em;text-align:left;
}
.card-detail li{
  font-size:var(--t-sm);line-height:1.45;
  color:rgba(255,254,237,.9);
}

.card-slot:hover > .card-reveal{
  position:absolute;inset:0 0 auto 0;
  /* .card sets height:100%, which pins the card to the slot and leaves the list
     overflowing out of the bottom instead of growing the card. min-height keeps
     it filling the slot; height:auto is what lets it exceed it. */
  height:auto;min-height:100%;
  z-index:6;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45);
}
.card-slot:hover .card-summary{display:none}
.card-slot:hover .card-detail{display:grid;animation:cardDetailIn .28s ease both}

@keyframes cardDetailIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .card-slot:hover .card-detail{animation-duration:.01ms}
}

/* Phones keep the cards exactly as they are: there is no hover to open the
   list, and a tap firing :hover would otherwise swap the summary out. */
@media(max-width:700px){
  .card-slot:hover > .card-reveal{position:static;box-shadow:none;z-index:auto}
  .card-slot:hover .card-summary{display:block}
  .card-slot:hover .card-detail{display:none}
}

/* ---- services cards on the home page's ground -----------------------------
   The cards themselves already match: --teal and --olive are the same #1d4b73
   in this variant, so the only difference was what sat behind them -- cream on
   Services, the pale blue-grey on Home.

   Its own class rather than reusing .band-navy or .band-khaki. Both carry
   layout for the cards they normally wrap: .band-navy sizes .card-teal and sets
   its own 98/101 padding, and .band-khaki restyles .card-olive's padding and
   alignment. Borrowing either would have quietly changed the spacing here as
   well as the colour, and only the colour was asked for. */
.band-help{background:var(--khaki);color:var(--ink)}

/* ---- About and Contact sit on the home page's About AQC ground ------------
   Set on the body rather than on each section: those pages open with an
   un-banded .section, which simply shows the body through, and doing it here
   also covers any gap between sections and below the last one. The sections
   that carry their own band (khaki, olive-dk, white) are unaffected, which is
   what keeps the page's existing rhythm intact. */
body.page-soft{background:var(--cream-2)}

/* ---- home tiles link through to their service -----------------------------
   The tiles are anchors now, so they need the link defaults taken back off --
   nothing else in this stylesheet resets an <a> that is styled as a card. */
a.card-reveal{
  text-decoration:none;color:var(--text-light);
  cursor:pointer;
}
a.card-reveal h3{color:var(--text-light)}

/* Being focusable is the point of using a real link, so the keyboard gets the
   same reveal the mouse does, and a visible ring to go with it. */
.card-slot:focus-within > .card-reveal{
  position:absolute;inset:0 0 auto 0;
  height:auto;min-height:100%;
  z-index:6;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45);
}
.card-slot:focus-within .card-summary{display:none}
.card-slot:focus-within .card-detail{display:grid}
a.card-reveal:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---- services: landing on a linked card ----------------------------------
   The header is sticky, so an anchor would otherwise drop the card underneath
   it. scroll-margin-top reserves the header's height plus a little air; the
   header is 111px on desktop and 81px once it collapses. */
.card-olive[id]{scroll-margin-top:135px}
@media(max-width:760px){
  .card-olive[id]{scroll-margin-top:105px}
}

/* Six near-identical cards, so confirm which one the click landed on rather
   than leaving the visitor to work it out. */
.card-olive[id]:target{
  outline:3px solid var(--gold);
  outline-offset:4px;
}

@media(max-width:700px){
  /* Matches the hover rule above: no reveal on a touch screen, and tapping a
     tile should navigate rather than swap its contents first. */
  .card-slot:focus-within > .card-reveal{position:static;box-shadow:none;z-index:auto}
  .card-slot:focus-within .card-summary{display:block}
  .card-slot:focus-within .card-detail{display:none}
}

/* ---- touch tablets, not just phones ---------------------------------------
   The 700px guard above catches phones, but an iPad reports 768 to 1024px and
   has no hover either, so it fell through to the desktop reveal. A tap set
   :focus-within, the card jumped to absolute and expanded, and then the page
   navigated to the service -- so the tile flashed open on its way out.

   Gating on the input rather than the viewport covers every touch device
   whatever its width, and still leaves a mouse in a narrow window able to
   hover. The detail itself is not lost on touch: each tile links through to
   the matching section on Services, which carries the same list. */
@media (hover:none){
  .card-slot:hover > .card-reveal,
  .card-slot:focus-within > .card-reveal{position:static;box-shadow:none;z-index:auto}
  .card-slot:hover .card-summary,
  .card-slot:focus-within .card-summary{display:block}
  .card-slot:hover .card-detail,
  .card-slot:focus-within .card-detail{display:none}
}

/* ---- mobile hero: the loop on top, the statement under it -----------------
   Phones used to get the square still with the headline laid over it, and the
   video was suppressed because a 2:1 clip cannot fill a square crop. Overlaying
   type on a busy factory frame at 390px is also the hardest place to read it --
   the gradient had to be heavy enough to fight the subject, which dulled the
   photograph.

   So the hero stops being a stack on a phone and becomes two stacked pieces:
   the same loop desktop gets, at its own 2:1 ratio so nothing is cropped, and
   the headline below it on the navy the header, cards and footer already use.
   White on #102a44 is about 15:1, and the band reads as the foot of the hero
   rather than a new section, so it still blends into the page before the pale
   About band underneath.

   The still stays in the markup as the reduced-motion fallback and swaps back
   in below. --------------------------------------------------------------- */
@media(max-width:592px){
  .hero{
    display:block;min-height:0;overflow:visible;
    background:var(--navy);
  }
  /* The gradient existed to hold contrast over the photograph. The type is off
     the image now, so it would only darken the loop. */
  .hero::after{content:none}

  .hero picture{display:block}
  .hero img{display:none}

  .hero-video{
    display:block;position:static;
    width:100%;height:auto;
    /* 3:2 rather than the clip's native 2:1. At 390px the full frame is only
       196px tall and spends its left third on a blank wall with the technician
       clipped at the right edge. Cropping to 3:2 lifts it to 260px and centres
       her; 60% on the x-axis keeps her and the conveyor in frame for the whole
       6.9s loop, checked frame by frame. */
    aspect-ratio:3/2;
    object-fit:cover;object-position:60% 50%;
  }

  .hero-inner{
    position:static;z-index:auto;
    padding:26px var(--gutter) 34px;
  }
  .hero h1{max-width:none}
  .hero p{margin-top:12px;max-width:none}
  .hero .btn{margin-top:20px}
}

/* No loop when motion is unwelcome: the still comes back, in flow, in its place. */
@media(max-width:592px) and (prefers-reduced-motion:reduce){
  .hero img{display:block;position:static;width:100%;height:auto}
  .hero-video{display:none}
}

/* ---- mission: wide copy, square headshot ----------------------------------
   The portrait was a 4:3 landscape filling half the row, so at 1920 the copy
   sat on a 784px measure beside an 872px photograph. The image column is now a
   square that tops out at 400px, and the copy takes the width that frees up.

   The copy block is capped rather than left to fill: with a 400px image the
   text column is ~1400px at 1920, and a 1400px measure is unreadable. 58rem
   (928px) is as wide as it goes -- still about 18% more than before -- and the
   cap sits on the block, not the paragraph, so the headline and the body share
   one right edge. .lede's own 60ch cap is lifted here so it can reach that
   measure instead of stopping short at 784px.

   Below 861px .split is already one column, so only the square carries over. */
@media(min-width:861px){
  .split.split-media{
    grid-template-columns:minmax(0,1fr) clamp(260px,22vw,400px);
    align-items:start;
  }
  .split.split-media > div:first-child{max-width:70rem}
  .split.split-media .lede{max-width:none}
}
.split.split-media .px{aspect-ratio:1/1;max-height:none;height:auto}

/* Stacked, the square would take the full column -- 793px tall at the 860px
   breakpoint, which is far more than a headshot needs. Capped, and left-aligned
   with the copy above it rather than centred, since this band's text is ranged
   left. Phones are already under the cap, so it only bites on tablets. */
@media(max-width:860px){
  .split.split-media .px{max-width:420px}
}

/* The attributions sat at three different heights because .tcard cite's
   margin-top:auto (which bottom-aligns it in the flex column) is clobbered by
   the later .tcard cite rule setting margin-top:24px for the gap above its
   rule. Growing the quote instead pushes the cite down without touching that
   gap, so all three attributions share a baseline whatever the quote length. */
.tcard blockquote{flex:1 1 auto}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields they can tell are hidden; aria-hidden and tabindex -1 keep it away
   from screen readers and the tab order, so only a script fills it in. */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* Submission feedback. role="status" on the element already announces it. */
.form-note{margin:var(--s-3) 0 0;font-size:var(--t-sm);line-height:1.5;min-height:1.2em}
.form-note.is-ok{color:#1d6b3f;font-weight:600}
.form-note.is-err{color:#a1291f;font-weight:600}

/* The role sits between the name and the company. Italic separates the three
   lines from each other without another weight or colour, and it needs its own
   rule because .tcard cite sets font-style:normal to undo the browser's default
   italic on <cite>. A span rather than <i> or <em>: this is a typographic
   distinction, not emphasis, so it belongs in the stylesheet. */
.tcard cite .role{font-style:italic}