/* Theme Name: Icoflask
   Description: Jinhua Gaolan Metal Products — stainless steel drinkware B2B theme.
   Structure lives in inc/content-model.json; design tokens in assets/css/tokens.css. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-d);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
figure{margin:0}
h1,h2,h3,h4{margin:0;color:var(--charcoal);font-family:var(--display);
  font-weight:600;letter-spacing:-.015em}
h1{font-size:clamp(34px,4.6vw,58px);line-height:1.06;max-width:16em}
h2{font-size:clamp(25px,2.6vw,34px);line-height:1.16}
h3{font-size:18px;line-height:1.35;letter-spacing:-.01em}
h4{font-size:15.5px;line-height:1.4}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.15em}
li{margin-bottom:.35em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(56px,7vw,104px) 0}
.section--tight{padding:clamp(36px,4vw,60px) 0}
.section--light{background:var(--off)}
.section--dark{background:var(--charcoal);color:#C4C9CE}
.section--line{border-top:1px solid var(--line)}
.skip{position:absolute;left:-9999px;top:0;z-index:50;background:#fff;padding:12px 18px;
  border:1px solid var(--line);border-radius:var(--r-btn);font-size:14px;font-weight:600}
.skip:focus{left:16px;top:12px}
.eyebrow{margin:0 0 14px;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--label)}
/* The description voice, on every template: one step under the body copy, and a
   notch tighter than the mockup scale it was built from — that read a little large
   and loosely leaded beside its headings. 19px/1.6 became at most 17px at 1.5,
   approved on the home page and promoted here, so no page carries its own scale.
   The heading above it gets 14px of air (see "Section heading" below); the first
   screen keeps its own, slightly wider gap (.page-hero .lede, .hero__text .lede). */
.lede{max-width:62ch;font-size:clamp(16px,1.25vw,17px);line-height:1.5;color:#4C535B}
.note{margin:0 0 1em;font-size:13px;color:var(--muted)}
.sec-head{max-width:74ch;margin-bottom:clamp(30px,3.6vw,48px)}
.sec-head p:last-child{margin-bottom:0}
.mono-num{font-variant-numeric:tabular-nums}
.empty{margin:0;padding:22px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--off);font-size:14.5px;color:var(--muted)}

/* ---------- Buttons (§16: medium radius, one accent, no pill) ---------------
   cursor:pointer is stated rather than assumed: these classes are worn by <button>
   and <input type=submit> as well as by <a>, and a button element does not get the
   hand cursor from the browser. Everything the site makes clickable carries it. */
.btn,.btn-2,.btn-light,.btn-ghost-l{display:inline-block;padding:13px 22px;border-radius:var(--r-btn);
  border:1px solid var(--accent);background:var(--accent);color:#fff;font-size:15px;font-weight:600;
  cursor:pointer}
.btn:hover{background:var(--accent-d);border-color:var(--accent-d);color:#fff;text-decoration:none}
.btn-2{border-color:var(--line-2);background:transparent;color:var(--charcoal)}
.btn-2:hover{border-color:var(--steel);color:var(--charcoal);text-decoration:none}
.btn-light{border-color:#fff;background:#fff;color:var(--charcoal)}
.btn-light:hover{background:var(--accent-t);border-color:var(--accent-t);color:var(--charcoal);text-decoration:none}
.btn-ghost-l{border-color:rgba(255,255,255,.42);background:transparent;color:#fff}
.btn-ghost-l:hover{border-color:#fff;color:#fff;text-decoration:none}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.tlink{font-size:13.5px;font-weight:600}
.tlink::after{content:" \2192"}

/* ---------- Header, primary navigation, dropdowns --------------------------- */
.site-header{position:sticky;top:0;z-index:30;background:var(--white);
  border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;gap:26px;min-height:76px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;color:var(--charcoal)}
.brand:hover{color:var(--charcoal);text-decoration:none}
.brand .txt b{display:block;font-size:17px;font-weight:600;line-height:1.1;letter-spacing:-.01em}
.brand .txt i{display:block;font-style:normal;font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.nav-main{margin-left:auto}
.nav-main ul.menu{display:flex;align-items:center;gap:26px;margin:0;padding:0;list-style:none}
.nav-main li{margin:0;position:relative}
.nav-main a{display:block;padding:6px 0;font-size:14.5px;font-weight:500;
  color:var(--charcoal-3);font-family:inherit;background:none;border:0;text-align:left;cursor:pointer}
/* Resources and About open a dropdown instead of leading anywhere, so their label is
   set like the text it is: the default arrow, and no colour change while the pointer
   is over it. A visitor who sees a link's two signals there — the hand cursor and the
   accent — expects a page behind the words (owner's instruction). What still says a
   menu opens is the chevron after the label, and the menu opens on hover as before. */
.nav-main .menu-label{display:block;padding:6px 0;font-size:14.5px;font-weight:500;
  color:var(--charcoal-3);font-family:inherit;background:none;border:0;text-align:left;
  cursor:default}
.nav-main a:hover,.nav-main .current-menu-item>a{color:var(--accent);text-decoration:none}
.nav-main .menu-item-has-children>a::after,
.nav-main .menu-item-has-children>.menu-label::after{content:"";display:inline-block;width:5px;height:5px;
  margin-left:7px;border-right:1.4px solid var(--steel);border-bottom:1.4px solid var(--steel);
  transform:translateY(-2px) rotate(45deg)}
.nav-main .sub-menu{position:absolute;top:100%;left:-16px;display:none;flex-direction:column;
  gap:0;min-width:250px;margin:0;padding:8px 0;list-style:none;background:#fff;
  border:1px solid var(--line);border-radius:var(--r)}
.nav-main .sub-menu li{margin:0}
.nav-main .sub-menu a{padding:9px 18px;font-size:14px;font-weight:500;white-space:nowrap}
.nav-main .sub-menu a:hover{background:var(--off)}
.nav-main .menu-item-has-children:hover>.sub-menu,
.nav-main .menu-item-has-children:focus-within>.sub-menu{display:flex}
.hdr .btn{padding:11px 18px;font-size:14px}
@media (max-width:1080px){
  .hdr{gap:18px}
  .nav-main{order:3;width:100%;margin-left:0;overflow-x:auto;border-top:1px solid var(--line)}
  .nav-main ul.menu{flex-wrap:nowrap;gap:20px;padding:11px 0}
  .nav-main .sub-menu{position:static;display:flex;flex-direction:row;gap:20px;min-width:0;
    padding:0;border:0;background:transparent}
  .nav-main .sub-menu a{padding:0}
  .nav-main .menu-item-has-children>a::after,
  .nav-main .menu-item-has-children>.menu-label::after{display:none}
}
@media (max-width:520px){.brand .txt i{display:none}}

/* ---------- Breadcrumb, page hero, child-page list -------------------------- */
.breadcrumb{margin:0 0 18px;font-size:12.5px;color:var(--muted)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.breadcrumb li{margin:0}
.breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--line-2)}
.breadcrumb a{color:var(--muted)}
.page-hero{padding:clamp(40px,5vw,78px) 0 clamp(30px,3.4vw,52px)}
.page-hero h1{max-width:22em}
.page-hero .lede{margin:20px 0 0}
.page-hero .note{margin:16px 0 0}
.children{margin:clamp(28px,3vw,40px) 0 0}
.children ul{margin:0;padding:0;list-style:none}
.children li{margin:0;border-bottom:1px solid var(--line)}
.children a{display:flex;justify-content:space-between;gap:16px;padding:14px 2px;
  font-size:15.5px;font-weight:600;color:var(--charcoal)}
.children a:hover{color:var(--accent);text-decoration:none}
.children span{font-weight:400;color:var(--muted);font-size:13.5px}

/* ---------- Reference figures strip (home hero) ---------------------------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.facts div{padding:18px 22px;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0}
.facts b{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--charcoal)}
.facts span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){.facts{grid-template-columns:repeat(2,1fr)}
  .facts div:nth-child(3){border-left:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:520px){.facts{grid-template-columns:1fr}
  .facts div{border-left:0;border-top:1px solid var(--line)}
  .facts div:first-child{border-top:0}}

/* ---------- Grids, cards, lists (§6 grid · §15 restrained cards) ------------ */
.grid{display:grid;gap:clamp(16px,2vw,26px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:1024px){.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.split{grid-template-columns:1fr}.g-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:10px;height:100%;padding:20px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff}
.card h3{font-size:16px}
.card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.card .more{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:600}
a.card:hover{border-color:var(--line-2);text-decoration:none}
.plain{list-style:none;margin:0 0 1em;padding:0}
.plain li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.plain li b{color:var(--charcoal);font-weight:600}
.strip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1em;padding:0;list-style:none}
.strip li{margin:0;padding:7px 12px;border:1px solid var(--line);border-radius:2px;
  background:var(--off);font-size:12.5px;color:var(--charcoal-3)}
.tag{display:inline-block;padding:4px 9px;border:1px solid var(--line-2);border-radius:2px;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ratio{display:flex;height:9px;margin:16px 0 12px;border-radius:2px;overflow:hidden}
.ratio i{display:block;height:100%}
.ratio .a{flex:0 0 82.5%;background:var(--accent)}
.ratio .b{flex:1;background:var(--steel-2)}
.legend{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:1em;font-size:13px;color:var(--muted)}
.legend b{color:var(--charcoal);font-weight:600}
.legend i{display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:2px}

/* ---------- Process language (§18: number + title + explanation) ----------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
.steps li{padding:20px 22px 22px 0;border-top:1px solid var(--line);margin:0}
.steps .n{display:block;margin-bottom:10px;font-size:12px;font-weight:600;
  letter-spacing:.12em;color:var(--accent)}
.steps h3{margin-bottom:6px;font-size:15.5px}
.steps p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
@media (max-width:1024px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- Specification table (§17) --------------------------------------- */
.spec-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.spec{width:100%;border-collapse:collapse;font-size:14.5px}
table.spec caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
table.spec th,table.spec td{padding:13px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
table.spec thead th{background:var(--off);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel)}
table.spec tbody tr:last-child th,table.spec tbody tr:last-child td{border-bottom:0}
table.spec tbody th{width:26%;font-weight:600;color:var(--charcoal)}
table.spec td{color:var(--muted)}
@media (max-width:700px){
  table.spec thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.spec tbody th,table.spec tbody td{display:block;width:auto;border-bottom:0;padding:2px 18px}
  table.spec tbody th{padding-top:14px}
  table.spec tbody td{padding-bottom:14px}
  table.spec tbody tr{display:block;border-bottom:1px solid var(--line)}
}

/* The specification is printed as three tables — the model's own values, the
   capacities it is ordered in, and the packing each one ships in — so a long
   range stays readable. The grid tables label each cell on a phone, where the
   header row is out of sight. */
.spec-group+.spec-group{margin-top:34px}
.spec-group__title{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel)}
@media (max-width:700px){
  table.spec--grid tbody td{padding:3px 18px}
  table.spec--grid tbody td[data-th]::before{content:attr(data-th);display:block;
    font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--steel);margin-bottom:1px}
  table.spec--grid tbody td[data-th="Item No."]{padding-top:14px}
  table.spec--grid tbody tr td:last-child{padding-bottom:14px}
}

/* ---------- Media placeholders (§7 image language · §8 material) ------------
   A brushed-steel gradient stands in for photography so crop rhythm and the
   material language can be judged before real assets exist.                   */
.ph{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(168deg,#FAFAF9 0%,#EEEFEF 36%,#DDDFE1 62%,#F4F5F5 100%)}
.ph::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 1px,rgba(31,35,40,.03) 1px 3px)}
.ph>span{position:absolute;left:12px;bottom:11px;z-index:2;padding:3px 7px;border-radius:2px;
  background:rgba(255,255,255,.82);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#5F666E}
.ph img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover}
.r-43{aspect-ratio:4/3}
.r-11{aspect-ratio:1/1}
.r-169{aspect-ratio:16/9}
.r-32{aspect-ratio:3/2}
.r-45{aspect-ratio:4/5}

/* ---------- Video slots (components/media-video.php) -------------------------
   A film is watched where it stands: the browser's own controls in the same .ph
   frame an image slot uses, with a poster holding the frame until someone presses
   play. The film is contained, never cropped — a 16:9 frame with 4:3 footage
   letterboxes honestly instead of cutting the picture.                        */
.vid__frame--film{background:var(--charcoal)}
.vid__frame video{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:contain}
/* Before a film exists the frame prints what the film has to be, with the play mark
   sitting where the browser will draw its own control once the file is in place. */
.vid__empty{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:15px;padding:20px;text-align:center}
.vid__play{display:flex;align-items:center;justify-content:center;width:58px;height:58px;
  border:1px solid var(--line-2);border-radius:50%;background:rgba(255,255,255,.82);color:var(--accent)}
.vid__play svg{display:block;margin-left:2px}
.vid__brief{margin:0;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}

/* ---------- Entries (archive cards, article body) -------------------------- */
.card h3 a{color:var(--charcoal)}
.card h3 a:hover{color:var(--accent)}
/* A step or gate title that links the capability record for that step stays a heading:
   the accent arrives on hover, the way a linked card heading already behaves. */
.flow__b h3 a,.qa-gate__b h3 a,.qa-check h3 a,.pd-rail__b h3 a{color:var(--charcoal)}
.flow__b h3 a:hover,.qa-gate__b h3 a:hover,.qa-check h3 a:hover,.pd-rail__b h3 a:hover{color:var(--accent)}

/* A capability name used as a title is a way into the record that documents it. The
   website owner's instruction: that reference is drawn in the accent blue and keeps its
   → marker, like every other link that leads somewhere on this site, and it warms to the
   capability signal under the pointer:
     · .cap-link is set by icoflask_capability_name() wherever a capability is linked;
     · the → marker is printed only inside a heading, so the same link used mid-sentence
       keeps reading as a sentence (Laser engraving and silk printing, …) — that sentence
       form stays warm at rest and on hover, without a marker (the block below colours it);
     · a title with no record behind it — an aggregate such as Logo & Printing — has no
       marker, so linked and unlinked titles no longer look alike;
     · --accent-l is the accent that reads on charcoal, --warm-l the warm signal on it. */
h2 .cap-link::after,h3 .cap-link::after,h4 .cap-link::after{
  content:"\2192";display:inline-block;margin-left:.4em;color:var(--accent);
  transition:transform var(--dur-fast) ease,color var(--dur-fast) ease}
h2 .cap-link:hover::after,h3 .cap-link:hover::after,h4 .cap-link:hover::after{
  transform:translateX(3px);color:var(--warm)}
.section--dark .cap-link::after,.section--dark2 .cap-link::after{color:var(--accent-l)}
@media (prefers-reduced-motion:reduce){
  h2 .cap-link::after,h3 .cap-link::after,h4 .cap-link::after{transition:none}
  h2 .cap-link:hover::after,h3 .cap-link:hover::after,h4 .cap-link:hover::after{transform:none}}

/* ---------- Where a capability is referenced, and where it is only mentioned ----
   The website owner's follow-up after the application page: a capability referenced as a
   way in — a card title, a process step, a name in a rail — is drawn in the accent blue,
   marker and all, while the same name read inside a sentence is left exactly as it was,
   warm and underlined, so a paragraph keeps reading as a paragraph.
     · on charcoal each form uses its light tint, --accent-l and --warm-l;
     · the /capabilities/ index is the one place the owner took the signal back out: its
       twelve cards print the record title straight from get_the_title(), so the title is a
       card heading rather than a capability name inside a sentence, and a grid of twelve
       warm headings read as noise (owner's instruction). Those titles therefore keep the
       heading colour every other card in the theme uses — .mcard h3 a below — and take the
       accent on hover, with the card's own entry cues (media corner mark, footer button,
       whole-card overlay) carrying the way in; page-capabilities.css holds that hover.
       Nothing in this file names those cards any more, so listing .mcard.cap-card here
       again is all it would take to colour them.
   The containers are named on purpose: .card h3 a, the step and gate lists and .mcard h3 a
   each set a colour of their own, so a bare .cap-link would lose to them. A bare .cap-link
   — a reference that sits in neither a heading nor a sentence, as the application page's
   link frames do — keeps the warm colour here; that page states the accent for its own
   frames. */
.cap-link,
.card h3 a.cap-link,.card h4 a.cap-link,
.flow__b h3 a.cap-link,.qa-gate__b h3 a.cap-link,.qa-check h3 a.cap-link,.pd-rail__b h3 a.cap-link,
.mcard h3 a.cap-link{color:var(--warm)}
/* The reference form: the same name used as a title takes the accent. */
h2 .cap-link,h3 .cap-link,h4 .cap-link,
.card h2 a.cap-link,.card h3 a.cap-link,.card h4 a.cap-link,
.flow__b h3 a.cap-link,.qa-gate__b h3 a.cap-link,.qa-check h3 a.cap-link,.pd-rail__b h3 a.cap-link,
.mcard h3 a.cap-link{color:var(--accent)}
/* A capability name inside a sentence is underlined at rest (website owner's follow-up:
   the colour alone was still too quiet to read as a link). The sentence form only: a name
   used as a title carries the → marker instead, and a title with both was rejected —
   the owner's screenshot of the development rail showed the two signals fighting.
   Deliberately tied to <p> and not to <li>: the step, gate and rail lists put their
   heading inside a list item (components/process-rows.php, .pd-rail, .qa-gate__b), so a
   list-item rule underlined every title in them. */
p .cap-link{text-decoration:underline;text-underline-offset:3px}
/* Hover deepens the colour only, for the forms that already carry the warm signal: a
   capability name inside a sentence, and a link frame a page colours for itself. A title
   that carries the marker never gains a line, at rest or under the pointer. */
.cap-link:hover,.cap-link:focus-visible,
.card h3 a.cap-link:hover,.card h4 a.cap-link:hover,
.flow__b h3 a.cap-link:hover,.qa-gate__b h3 a.cap-link:hover,.qa-check h3 a.cap-link:hover,.pd-rail__b h3 a.cap-link:hover,
.mcard h3 a.cap-link:hover{color:var(--warm-d)}
/* The reference form warms to the brick red under the pointer — the signal the sentence
   form already carries, so a hovered title says what the link is. */
h2 .cap-link:hover,h2 .cap-link:focus-visible,
h3 .cap-link:hover,h3 .cap-link:focus-visible,
h4 .cap-link:hover,h4 .cap-link:focus-visible,
.card h2 a.cap-link:hover,.card h2 a.cap-link:focus-visible,
.card h3 a.cap-link:hover,.card h3 a.cap-link:focus-visible,
.card h4 a.cap-link:hover,.card h4 a.cap-link:focus-visible,
.flow__b h3 a.cap-link:hover,.qa-gate__b h3 a.cap-link:hover,
.qa-check h3 a.cap-link:hover,.pd-rail__b h3 a.cap-link:hover,
.mcard h3 a.cap-link:hover{color:var(--warm)}
.section--dark .cap-link,.section--dark2 .cap-link,
.section--dark .cap-link:hover,.section--dark2 .cap-link:hover,
.section--dark .card h3 a.cap-link,.section--dark2 .card h3 a.cap-link,
.section--dark .mcard h3 a.cap-link,.section--dark2 .mcard h3 a.cap-link{color:var(--warm-l)}
/* On charcoal the reference form reads from the light accent and warms on hover, where
   the dark brick red would sink into the ground: the light warm signal is used instead. */
:is(.section--dark,.section--dark2) :is(h2,h3,h4) .cap-link,
:is(.section--dark,.section--dark2) .card :is(h2,h3,h4) a.cap-link,
:is(.section--dark,.section--dark2) .mcard h3 a.cap-link{color:var(--accent-l)}
:is(.section--dark,.section--dark2) :is(h2,h3,h4) .cap-link:hover,
:is(.section--dark,.section--dark2) :is(h2,h3,h4) .cap-link:hover::after,
:is(.section--dark,.section--dark2) .card :is(h2,h3,h4) a.cap-link:hover,
:is(.section--dark,.section--dark2) .mcard h3 a.cap-link:hover{color:var(--warm-l)}
.meta{margin:0 0 8px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--steel)}
.entry-content{max-width:74ch}
.entry-content h2{margin:1.6em 0 .5em;font-size:clamp(22px,2.2vw,28px)}
.entry-content h3{margin:1.4em 0 .4em}
.entry-content ul,.entry-content ol{margin:0 0 1.2em;padding-left:1.2em}
.entry-content img{border-radius:var(--r)}
.entry-content blockquote{margin:1.4em 0;padding-left:18px;border-left:2px solid var(--line-2);color:var(--muted)}
.pagination{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;font-size:14px}
.pagination .page-numbers{padding:8px 13px;border:1px solid var(--line);border-radius:var(--r-btn);color:var(--charcoal)}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff}
.pagination a.page-numbers:hover{border-color:var(--steel);text-decoration:none}
.post-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;margin-top:40px;
  padding-top:20px;border-top:1px solid var(--line);font-size:14px}

/* ---------- Search form (404, fallback listing) ---------------------------- */
.search-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;max-width:520px;margin:28px 0 0}
.search-form label{flex:1 1 240px;min-width:0;margin:0}
.search-form .search-field{width:100%;padding:12px 14px;border:1px solid var(--line-2);
  border-radius:var(--r-btn);background:var(--white);color:var(--charcoal);font:inherit;font-size:15px}
.search-form .search-field::placeholder{color:var(--steel)}
.search-form .search-submit{padding:12px 22px;border:1px solid var(--charcoal);border-radius:var(--r-btn);
  background:var(--charcoal);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.search-form .search-submit:hover{background:var(--accent);border-color:var(--accent)}
.screen-reader-text{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}

/* ---------- Footer --------------------------------------------------------- */
.site-footer{background:var(--charcoal);color:#A7ADB4;padding:clamp(48px,5vw,76px) 0 26px}
.site-footer h3,.site-footer h2{margin-bottom:14px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#8E959C}
.site-footer ul{list-style:none;margin:0;padding:0;font-size:14px}
.site-footer li{margin-bottom:9px}
.site-footer a{color:#DDE0E3}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
.footer-grid .identity{font-size:14px;line-height:1.7;max-width:34ch}
.footer-grid .identity b{display:block;margin-bottom:8px;font-size:16px;font-weight:600;color:#fff}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;margin-top:40px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.13);font-size:12.5px}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Dark band overrides (§4.5 20% charcoal) ------------------------ */
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.section--dark .eyebrow{color:var(--label-l)}
.section--dark .lede{color:#C4C9CE}
.section--dark p,.section--dark .note{color:#A7ADB4}
.section--dark .plain li{border-bottom-color:rgba(255,255,255,.14)}
.section--dark .plain li b{color:#fff}
.section--dark .card{background:transparent;border-color:rgba(255,255,255,.16)}
.section--dark .card h3 a,.section--dark .card h3{color:#fff}
.section--dark .card p{color:#A7ADB4}
.section--dark .empty{background:transparent;border-color:rgba(255,255,255,.16);color:#A7ADB4}
.section--dark .steps li{border-top-color:rgba(255,255,255,.16)}
.section--dark .steps .n{color:#7FB0CC}
.section--dark .steps p{color:#A7ADB4}
.section--dark .strip li{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#DDE0E3}
.section--dark a{color:#fff}

/* ---------- Motion (§20 restrained: a 6px fade-in only) --------------------
   Scoped to .js so the page is fully visible when JavaScript never runs.      */
.js .reveal{opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Enquiry form (§4.8 Request a Quote · §4.9 Contact Us) -----------
   The form is one white card, so it reads as a single object on whatever band
   it sits on, and the field grid keeps every label with its own input. */
.enquiry-wrap{max-width:880px}
.enquiry-form{margin:0;padding:clamp(22px,2.8vw,34px);border:1px solid var(--line);
  border-radius:var(--r);background:var(--white);box-shadow:0 26px 44px -38px rgba(31,35,40,.55)}
/* The optional heading line inside the card (components/enquiry-form.php
   'heading'): where the form is a column of the first screen, it names itself so
   the column reads as one object rather than a stack of fields. */
.enquiry-form .form-head{margin:0 0 clamp(18px,2vw,24px);padding-bottom:clamp(14px,1.6vw,18px);
  border-bottom:1px solid var(--line)}
.enquiry-form .field{margin:0}
.enquiry-form .field-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(16px,1.7vw,20px) clamp(18px,2vw,26px);margin-bottom:clamp(16px,1.7vw,20px)}
.enquiry-form .field--wide{grid-column:1/-1}
.enquiry-form label{display:block;margin:0 0 7px;font-size:13px;font-weight:600;color:var(--charcoal)}
.enquiry-form .req{margin-left:3px;color:var(--accent)}
.enquiry-form input[type=text],.enquiry-form input[type=email],.enquiry-form input[type=tel],
.enquiry-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line-2);
  border-radius:var(--r-btn);background:var(--white);color:var(--ink);font-family:inherit;
  font-size:15px;line-height:1.5;
  transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.enquiry-form input[type=text]:hover,.enquiry-form input[type=email]:hover,
.enquiry-form input[type=tel]:hover,.enquiry-form textarea:hover{border-color:var(--steel-2)}
.enquiry-form input:focus,.enquiry-form textarea:focus{border-color:var(--accent);outline:0;
  box-shadow:0 0 0 3px var(--accent-t)}
.enquiry-form textarea{min-height:132px;resize:vertical}
.enquiry-form input[type=file]{width:100%;padding:12px 14px;border:1px dashed var(--line-2);
  border-radius:var(--r-btn);background:var(--off);font-size:14px;color:var(--muted)}
.enquiry-form .field-hint{display:block;margin-top:7px;font-size:12.5px;color:var(--muted)}
.enquiry-form .form-foot{display:grid;gap:14px;margin-top:clamp(22px,2.4vw,28px);
  padding-top:clamp(20px,2.2vw,26px);border-top:1px solid var(--line)}
.enquiry-form .form-foot .btn{width:100%;padding:15px 24px;text-align:center}
.enquiry-form .form-note{font-size:12.5px;line-height:1.6;color:var(--muted)}
.enquiry-form .form-status{margin:18px 0 0;padding:13px 16px;border-left:3px solid var(--line-2);
  background:var(--off);font-size:14px;color:var(--ink)}
.enquiry-form .form-status:empty{display:none}
.enquiry-form[data-state=success] .form-status{border-left-color:var(--accent)}
.enquiry-form[data-state=error] .form-status{border-left-color:var(--charcoal)}
.enquiry-form[data-state=submitting] .btn{opacity:.72}
/* Honeypot field: kept off-canvas for people, still filled by bots. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.enquiry-form .field-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Landing pattern vocabulary.
   Built for front-page.php and reused by every other page template:
   hero split + reference bar · sized image slots · media cards · customization
   sequence · process rows · measure bar · restrained motion.
   Sources: 网站规划.md §4.1 (home modules) · DESIGN新.md V1.1 (§3 style, §6
   grid, §15 cards, §18 process, §20 motion, §21 mobile).
   Every image slot prints its own pixel size, so a real photo can replace it
   one by one. Nothing in this block is required to read the page.
   ========================================================================== */

/* ---------- Hero: positioning split + reference bar ------------------------ */
.hero{padding:clamp(40px,5.4vw,84px) 0 clamp(34px,4.4vw,68px)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.6vw,68px);
  align-items:center}
.hero__text h1{max-width:19ch}
.hero__text .lede{margin:22px 0 0}
/* The intro as short bulleted lines (components/page-hero.php 'points'): the
   lede's own type and width, one small dot per line and a little air between
   them. The dot is drawn rather than left to the browser's marker, so its size
   and colour match the rest of the site. */
.hero__points{display:grid;gap:12px;list-style:none;padding:0}
.hero__points li{position:relative;padding-left:19px}
.hero__points li::before{content:"";position:absolute;left:2px;top:.68em;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
/* A label above those lines (components/page-hero.php 'pointsLabel'): the card
   kicker's voice in the accent blue, so a list of what makes an answer usable
   names itself, with a clear gap above it and the list held close under it
   (website owner's instruction: blue, and further from the text above). */
.hero__points-t.kicker{margin:clamp(30px,3.4vw,46px) 0 0;color:var(--accent)}
.hero__points-t+.hero__points{margin-top:11px}
.hero__note{margin:18px 0 0;max-width:54ch;font-size:13.5px;color:var(--muted)}
/* The first screen's short list of routes (components/page-hero.php 'links'):
   a quiet hairline list under the buttons, the same measure as the intro, so a
   hero whose photograph is tall does not leave its text column half empty. The
   label repeats the .eyebrow type; the note is the description voice. */
.hero__links{margin:clamp(24px,2.8vw,34px) 0 0;max-width:56ch}
.hero__links-t{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--label)}
.hero__links ul{margin:11px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.hero__links li{margin:0;padding:11px 0 12px;border-bottom:1px solid var(--line)}
.hero__links a{font-size:15px;font-weight:600;color:var(--charcoal)}
/* The arrow keeps leading the eye by itself — no pointer needed: a slow nudge
   that steps right, holds, and settles back, staggered row by row so the three
   lines breathe instead of marching in unison. Inline-block so the transform has
   an element to move, and long enough between steps that it reads as a hint
   rather than a spinner.

   The arrow carries --warm, the site's second signal (the brick red the home
   page gives a capability name), so these three routes read as entry points
   rather than as ordinary blue links — on white it is 6.0:1 against the 8.4:1
   the label already has. The label turns warm with it on hover and on keyboard
   focus, so one link never shows two signals at once. */
@keyframes arrowNudge{
  0%,52%{transform:translateX(0)}
  66%,74%{transform:translateX(5px)}
  100%{transform:translateX(0)}
}
.hero__links a::after{content:" \2192";display:inline-block;color:var(--warm);
  animation:arrowNudge 4s ease-in-out infinite}
.hero__links li:nth-child(2) a::after{animation-delay:.45s}
.hero__links li:nth-child(3) a::after{animation-delay:.9s}
.hero__links a:hover,.hero__links a:focus-visible{color:var(--warm-d);text-decoration:none}
.hero__links span{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.section--dark .hero__links ul,.section--dark2 .hero__links ul{border-top-color:var(--hairline-dark)}
.section--dark .hero__links li,.section--dark2 .hero__links li{border-bottom-color:var(--hairline-dark)}
.section--dark .hero__links a,.section--dark2 .hero__links a{color:#fff}
/* The warm signal on charcoal is --warm-l, not --warm: the brick red would sit at
   about 2.4:1 there, while the light warm is 7.6:1. */
.section--dark .hero__links a::after,.section--dark2 .hero__links a::after{color:var(--warm-l)}
.section--dark .hero__links a:hover,.section--dark2 .hero__links a:hover,
.section--dark .hero__links a:focus-visible,.section--dark2 .hero__links a:focus-visible{color:var(--warm-l)}
.section--dark .hero__links span,.section--dark2 .hero__links span{color:#A7ADB4}
.hero__media{margin:0}
/* The split hero's second column when it is an object rather than a photograph
   (components/page-hero.php 'aside') — a form card, a contact card. */
.hero__aside{margin:0;min-width:0;width:100%}
/* That second column when it is the enquiry form (components/page-hero.php 'aside'
   + components/enquiry-form.php, class .hero__form): the card keeps the site's form
   styling and is only trimmed towards the height of the text beside it — a shorter
   message box, tighter field gaps — so the box stays one card and the two columns
   of the first screen end near each other. Shared by the hub first screens that
   carry the enquiry, so the same card is not trimmed twice. */
.hero__form .enquiry-form{padding:clamp(18px,1.9vw,24px)}
.hero__form .enquiry-form label{margin-bottom:5px}
.hero__form .enquiry-form .field-grid{gap:14px 18px;margin-bottom:14px}
.hero__form .enquiry-form textarea{min-height:84px}
.hero__form .enquiry-form .form-foot{margin-top:16px;padding-top:14px;gap:10px}
.hero__form .enquiry-form .form-foot .btn{padding:14px 24px}
.hero__form .enquiry-form .form-status{margin-top:12px}
@media (max-width:860px){
  .hero__form .enquiry-form .field-grid{gap:13px 22px;margin-bottom:13px}
}
@media (max-width:640px){
  .hero__form .enquiry-form .field-grid{gap:13px 0;margin-bottom:13px}
}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}}

/* ---------- Hero cover: the first screen as a photograph -------------------
   The band carries a photograph and the words centred inside it — eyebrow,
   title, intro and buttons on one axis, the block itself centred in the band.
   The photographed band keeps the picture's own light and relies on a shadow
   under the type, not on a wash across the frame. Without a photograph the band
   keeps the site's dark ground, so the first screen is presentable before the
   shoot exists; the slot it wants is printed in the corner
   (components/page-hero.php). The type colours come from .section--dark, which
   this hero is used with.                                                    */
.hero--cover{position:relative;isolation:isolate;overflow:hidden;
  display:grid;align-content:center;min-height:clamp(400px,58vh,640px);
  padding:clamp(64px,7vw,108px) 0 clamp(56px,6vw,92px);
  background:linear-gradient(168deg,#2E343B 0%,#252A30 46%,#1F2328 100%)}

/* A photographed cover sits in a band the owner sets: 70% of the browser window,
   never shorter than 460px nor taller than 660px, so a desktop first screen always
   leaves about 30% of the window for the section under it — the reader sees content
   after one roll of the wheel. It is never taller than the photograph itself needs
   at that width, so a narrow desktop window trims nothing left and right. The 16:9
   file is therefore cropped top and bottom, centred (about 22% at 1440×900);
   below 900px the type needs the height more than the photograph does, so the
   clamped band stays. */
@media (min-width:900px){
  .hero--cover.hero--cover-photo{height:min(clamp(460px,70vh,660px),calc(100vw * var(--hero-h,1080) / var(--hero-w,1920)));min-height:min-content}
}
/* The first screen the owner settled on for the catalogue and the customization
   section — the five product categories and the five pages under Customization: the
   band plus the 77px header runs to the foot of the window but for a 96px strip of
   the section beneath, so the fold carries the photograph itself and only the top of
   the next row rather than stopping at 70% of the window. The ceiling is still the
   photograph's own fit, so a very wide window never blows the file up past its
   natural size. Every first screen outside this set keeps the shorter band above.
   The band's own padding is asymmetric (the wider top gap belongs to a band that ends
   the page, not to one that is a photograph) and the type sat about 8px below the
   middle of the frame; the two are evened, so the words sit on the photograph's
   centre line. */
@media (min-width:900px){
  .hero--cover.hero--cover-fold{height:min(calc(100vh - 173px),calc(100vw * var(--hero-h,1080) / var(--hero-w,1920)));min-height:min-content}
}
.hero--cover.hero--cover-fold{padding-top:clamp(56px,6vw,92px)}
.hero--cover::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(112% 80% at 50% 0%,rgba(44,91,141,.34),rgba(31,35,40,0) 64%)}
.hero--cover .hero__bg{position:absolute;inset:0;z-index:-2}
.hero--cover .hero__bg img{width:100%;height:100%;object-fit:cover}
/* A cover whose subject stands high in the frame trims the photograph unevenly: the
   page names the share of the excess taken off the top (--hero-focus), the rest comes
   off the bottom, so the object is never lost to a bite out of head and foot at once. */
.hero--cover.hero--cover-focus .hero__bg img{object-position:50% var(--hero-focus,0%)}
/* A photographed cover carries no dark wash across the picture: the band read
   too dark over the photograph (website owner's instruction), so the frame keeps
   its own light and the words keep themselves readable instead — a soft shadow on
   the type follows the letters rather than dimming the photograph under it. */
.hero--cover-photo::before{background:none}
/* The settled first screen takes one shade more than that: a 15% veil, so the
   photograph reads a little deeper without going back to the old wash. It sits on
   the fold band only; first screens outside this set are untouched. */
.hero--cover.hero--cover-fold::before{background:rgba(18,21,25,.15)}
/* The intro line under the title set full white at the owner's request, so it
   carries the heading's own weight against the photograph instead of dropping to
   the muted grey the dark bands put body copy in. */
.hero--cover.hero--cover-fold .hero__text .lede{color:var(--white)}
/* The crumb set full white, the same weight the title and the intro carry: the grey
   it shares with the other photographed bands left it the weakest line on the page
   (website owner's instruction). The separators stay a step dimmer, so the trail
   still reads as its items rather than one sentence. */
.hero--cover.hero--cover-fold .breadcrumb{color:var(--white)}
/* The second button in this band: under the pointer the outline stays white, the
   button fills white and the words take the brand blue (website owner's
   instruction). The filled button beside it carries white type, so the row still
   reads as one pair of actions rather than two outlines. Keyboard focus takes the
   same colours, so the state is visible without a pointer. */
.hero--cover.hero--cover-fold .cta-row .btn-2:hover,
.hero--cover.hero--cover-fold .cta-row .btn-2:focus-visible{
  border-color:var(--white);background:var(--white);color:var(--accent);text-decoration:none}
.hero--cover-photo .hero__text,
.hero--cover-photo .breadcrumb{text-shadow:0 1px 20px rgba(12,15,18,.55)}
.hero--cover .wrap{position:relative;z-index:1}
.hero--cover .hero__text{max-width:min(940px,100%);margin:0 auto;text-align:center}
.hero--cover .hero__text h1{max-width:24ch;margin:0 auto;
  font-size:clamp(30px,4.4vw,56px);line-height:1.05;letter-spacing:-.02em}
.hero--cover .hero__text .lede{margin:22px auto 0;max-width:62ch}
.hero--cover .hero__note{margin:16px auto 0;max-width:62ch}
.hero--cover .cta-row{justify-content:center;margin-top:30px}
.hero--cover .breadcrumb{margin-bottom:26px;color:#A7ADB4}
.hero--cover .breadcrumb ol{justify-content:center}
.hero--cover .breadcrumb li+li::before{color:rgba(255,255,255,.3)}
.hero__slot{position:absolute;right:var(--pad);bottom:clamp(12px,1.6vw,20px);z-index:1;
  margin:0;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.46)}
@media (max-width:640px){.hero__slot{display:none}}

.refbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:clamp(34px,4vw,54px) 0 0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line)}
.refbar--2{grid-template-columns:repeat(2,1fr)}
.refbar__i{padding:20px 22px;background:var(--white)}
.refbar__k{margin:0;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.refbar__v{margin:8px 0 0;font-family:var(--display);font-size:22px;font-weight:600;line-height:1.2;
  color:var(--charcoal);font-variant-numeric:tabular-nums}
.refbar__d{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
@media (max-width:860px){.refbar{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.refbar,.refbar--2{grid-template-columns:1fr}}
.section--light .refbar,.section--off .refbar{border-color:var(--line-2)}
.section--light .refbar__i,.section--off .refbar__i{background:var(--off)}
.section--dark .refbar__i,.section--dark2 .refbar__i{background:var(--charcoal)}
.section--dark2 .refbar__i{background:var(--charcoal-2)}
.section--dark .refbar,.section--dark2 .refbar{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.section--dark .refbar__v,.section--dark2 .refbar__v{color:#fff}
.section--dark .refbar__k,.section--dark2 .refbar__k{color:var(--label-l)}
.section--dark .refbar__d,.section--dark2 .refbar__d{color:#A7ADB4}

/* ---------- Sized image slots --------------------------------------------
   A slot is a .ph frame plus the printed pixel size, so the owner can see at
   a glance what a photograph has to be. A real photo drops straight in.     */
.fig{display:flex;flex-direction:column;gap:10px;min-width:0;margin:0}
.fig .ph{width:100%}
.fig-cap{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.fig-cap b{font-weight:600;color:var(--charcoal-3)}
.fig-cap span{display:block;margin-top:2px}
.fig--dark .ph{background:linear-gradient(168deg,#2E343B 0%,#252A30 46%,#1F2328 100%);
  border-color:rgba(255,255,255,.14)}
.fig--dark .ph::after,.section--dark .ph::after{background:repeating-linear-gradient(90deg,
  rgba(255,255,255,.05) 0 1px,rgba(255,255,255,.02) 1px 3px)}
.fig--dark .ph>span,.section--dark .ph>span,.section--dark2 .ph>span{
  background:rgba(255,255,255,.12);color:#DDE0E3}
.section--dark .ph,.section--dark2 .ph{
  background:linear-gradient(168deg,#2E343B 0%,#252A30 46%,#1F2328 100%);border-color:rgba(255,255,255,.14)}
.section--dark .fig-cap,.section--dark2 .fig-cap{color:#A7ADB4}
.section--dark .fig-cap b,.section--dark2 .fig-cap b{color:#DDE0E3}

/* ---------- Media cards (§15 restrained: light border, no heavy shadow) ---- */
.mcard{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:0;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.mcard__m{flex:0 0 auto}
.mcard__m .fig{gap:0}
.mcard__m .ph{border:0;border-bottom:1px solid var(--line);border-radius:0}
.mcard__b{display:flex;flex:1 1 auto;flex-direction:column;gap:10px;padding:clamp(20px,2.2vw,28px)}
.mcard__i{margin:0;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}
.mcard h3{margin:0}
.mcard h3 a{color:var(--charcoal)}
.mcard__b>p:not(.mcard__i){margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.mcard__f{margin-top:auto;padding-top:4px}
/* A product card reads as one block: the photograph is square and sits on the
   body without a rule between them, and its one-sentence teaser is held to three
   lines so a card never turns into a paragraph. */
.mcard--product .mcard__m .ph{border-bottom:0}
.mcard--product .mcard__b>p:not(.mcard__i){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
/* The photograph is square and carries its own margin, so the body starts close
   under it: the model name and its one sentence sit high in the card instead of
   halfway down it. */
.mcard--product .mcard__b{padding-top:clamp(10px,0.9vw,12px);gap:8px}
/* A studio photograph keeps a white margin under the product, so the body is
   drawn up into that margin: the model name reads as belonging to the picture
   instead of floating a hand's width below it. */
.mcard--product .mcard__m{margin-bottom:-12px}
/* The series name ("Insulated Water Bottle") keeps to one line even in the narrow
   row of four, so it is set a step down and gives up the wide tracking a
   full-width card can afford; a series longer than the column ends in an ellipsis
   rather than a second line. */
.mcard--product .mcard__i{font-size:10px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The second view of a product, shown while the pointer is on the card: the picture
   is drawn over the card's first one and simply becomes visible, so a catalogue row
   answers "what else is there" without a click and without a script. */
.mcard__m{position:relative}
/* The picture inside a .ph frame carries z-index 2, so the swap has to be drawn
   above it rather than merely after it in the markup. */
.mcard__swap{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.mcard:hover .mcard__swap{opacity:1}
.mcard .ph img{transition:transform .7s var(--ease)}
.mcard:hover{border-color:var(--line-2)}
.mcard:hover h3 a{color:var(--accent);text-decoration:none}
.mcard:hover .ph img{transform:scale(1.03)}
.section--dark .mcard,.section--dark2 .mcard{background:transparent;border-color:var(--hairline-dark)}
.section--dark .mcard__m .ph{border-bottom-color:var(--hairline-dark)}
.section--dark .mcard__i{color:var(--label-l)}
.section--dark .mcard h3,.section--dark .mcard h3 a{color:#fff}
.section--dark .mcard__b>p:not(.mcard__i){color:#A7ADB4}

/* ---------- Customization sequence (§10: base → colour → logo → surface) --- */
.seq{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,18px);
  margin:0;padding:0;list-style:none}
.seq li{margin:0}
.seq__n{display:block;margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.15em;
  color:var(--accent);font-variant-numeric:tabular-nums}
.seq .ph{aspect-ratio:1/1}
.seq__l{display:block;margin:9px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--charcoal-3)}
.section--dark .seq__n,.section--dark2 .seq__n{color:var(--label-l)}
.section--dark .seq__l,.section--dark2 .seq__l{color:#DDE0E3}
@media (max-width:1080px){.seq{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.seq{grid-template-columns:repeat(2,1fr)}}

/* ---------- Process rows (§18: number + short title + one explanation) ----- */
.flow{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.flow li{margin:0}
.flow__row{display:grid;grid-template-columns:88px 1fr;gap:20px;padding:24px 0;
  border-bottom:1px solid var(--line)}
.flow__n{margin:0;font-family:var(--display);font-size:26px;font-weight:600;line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums}
.flow__b h3{margin:0 0 6px}
.flow__b p{margin:0;max-width:68ch;font-size:14.5px;line-height:1.6;color:var(--muted)}
.flow--compact .flow__row{grid-template-columns:52px 1fr;gap:16px;padding:14px 0}
.flow--compact .flow__n{font-size:15px}
.flow--compact .flow__b h3{margin-bottom:2px;font-size:15.5px}
.flow--compact .flow__b p{font-size:13.5px}
@media (max-width:640px){.flow__row{grid-template-columns:56px 1fr;gap:14px;padding:18px 0}
  .flow__n{font-size:20px}}
.section--dark .flow,.section--dark2 .flow{border-top-color:var(--hairline-dark)}
.section--dark .flow__row,.section--dark2 .flow__row{border-bottom-color:var(--hairline-dark)}
.section--dark .flow__n,.section--dark2 .flow__n{color:var(--label-l)}
.section--dark .flow__b p,.section--dark2 .flow__b p{color:#A7ADB4}

/* The process line: a rule that draws itself when the block is reached. */
.flow-line{position:relative;height:2px;margin:0 0 clamp(22px,2.6vw,34px);
  background:var(--line);overflow:hidden}
.flow-line::after{content:"";position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s var(--ease);
  transition-delay:var(--d,0ms)}
.js .flow-line.in::after{transform:scaleX(1)}
.section--dark .flow-line,.section--dark2 .flow-line{background:var(--hairline-dark)}

/* ---------- Measure bar (§4.6: the 70/20/10 balance stated as a proportion) - */
.measure{margin:clamp(22px,2.6vw,32px) 0 0}
.measure__t{margin:0;font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
.measure__track{height:8px;margin:12px 0 10px;border-radius:2px;background:#3B4148;overflow:hidden}
.measure__fill{display:block;height:100%;width:var(--w,0);background:var(--accent)}
.measure .legend{margin:0}
.legend .k-a{background:var(--accent)}
.legend .k-b{background:var(--steel-2)}
.section--dark .measure__t,.section--dark2 .measure__t{color:var(--label-l)}

/* ---------- Layout helpers shared by the sections -------------------------- */
.section[id]{scroll-margin-top:96px}
.section--off{background:var(--off)}
.section--grey{background:var(--light)}
.section--dark2{background:var(--charcoal-2);color:#C4C9CE}
.section--dark2 h1,.section--dark2 h2,.section--dark2 h3{color:#fff}
.section--dark2 .eyebrow{color:var(--label-l)}
.section--dark2 .lede{color:#C4C9CE}
.section--dark2 p,.section--dark2 .note{color:#A7ADB4}
.section--dark2 .card{background:transparent;border-color:var(--hairline-dark)}
.section--dark2 .card h3,.section--dark2 .card h3 a{color:#fff}
.section--dark2 .card p{color:#A7ADB4}
.section--dark2 .empty{background:transparent;border-color:var(--hairline-dark);color:#A7ADB4}
.split--start{align-items:start}
.split--wide{gap:clamp(30px,4.6vw,68px)}
.stack{display:grid;gap:clamp(18px,2.2vw,26px)}
.tiles-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.head-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(26px,3vw,38px)}
.head-actions--line{padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line)}
.note-block{margin:clamp(22px,2.6vw,32px) 0 0;padding:18px 20px;border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:var(--r);background:var(--off);
  font-size:13.5px;line-height:1.6;color:var(--muted)}
.note-block b{color:var(--charcoal)}
@media (max-width:560px){.tiles-2{grid-template-columns:1fr}}
.section--dark .note-block,.section--dark2 .note-block{background:rgba(255,255,255,.04);
  border-color:var(--hairline-dark);border-left-color:var(--label-l);color:#A7ADB4}
.section--dark .note-block b,.section--dark2 .note-block b{color:#fff}
.section--dark .head-actions--line,.section--dark2 .head-actions--line{border-top-color:var(--hairline-dark)}

/* ---------- Motion (§20: gentle fade-in, small image reveal, hover) --------
   Every rule is scoped to .js so the page is fully readable without it, and
   the reduced-motion block at the end turns the whole layer off.             */
[data-reveal]{--d:0ms}
.js [data-reveal],.js .fig--reveal{opacity:0;transform:translateY(6px);
  transition:opacity var(--dur-mid) ease,transform var(--dur-mid) ease;transition-delay:var(--d,0ms)}
.js [data-reveal].in,.js .fig--reveal.in{opacity:1;transform:none}
.js .fig--reveal .ph::before{content:"";position:absolute;inset:0;z-index:3;background:var(--white);
  transform:scaleY(1);transform-origin:50% 100%;transition:transform .95s var(--ease);
  transition-delay:var(--d,0ms)}
.js .fig--reveal.in .ph::before{transform:scaleY(0)}
.js .section--dark .fig--reveal .ph::before{background:var(--charcoal)}
.site-header{transition:box-shadow .24s ease}
.site-header.is-stuck{box-shadow:0 1px 0 var(--line),var(--shadow-1)}
.tlink::after{display:inline-block;transition:transform var(--dur-fast) ease}
.tlink:hover::after{transform:translateX(3px)}

/* First screen: staged entrance, then a curtain over the hero photograph. */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes curtainUp{from{transform:scaleY(1)}to{transform:scaleY(0)}}
.hero__grid .hero__text>*{animation:riseIn .7s var(--ease) both}
.hero__grid .hero__text>*:nth-child(2){animation-delay:.08s}
.hero__grid .hero__text>*:nth-child(3){animation-delay:.16s}
.hero__grid .hero__text>*:nth-child(4){animation-delay:.24s}
.hero__grid .hero__text>*:nth-child(5){animation-delay:.3s}
.hero__media{animation:riseIn .8s .12s var(--ease) both}
.hero__media .ph::before{content:"";position:absolute;inset:0;z-index:3;background:var(--white);
  transform-origin:50% 100%;animation:curtainUp 1s .44s var(--ease) both}
.section--dark .hero__media .ph::before{background:var(--charcoal)}
.refbar__i{animation:riseIn .6s var(--ease) both}
.refbar__i:nth-child(1){animation-delay:.3s}
.refbar__i:nth-child(2){animation-delay:.36s}
.refbar__i:nth-child(3){animation-delay:.42s}
.refbar__i:nth-child(4){animation-delay:.48s}

/* Spacing helpers used when the sections are assembled. */
.block-space{margin-top:clamp(38px,4.6vw,60px)}
.block-space-sm{margin-top:clamp(22px,2.8vw,34px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js [data-reveal],.js .fig--reveal{opacity:1;transform:none;transition:none;
    transition-delay:0ms}
  .js .fig--reveal .ph::before,.js .flow-line::after{display:none}
  .js .measure__fill{width:var(--w,0);transition:none}
  .hero__links a::after{animation:none}
  .mcard .ph img,.mcard:hover .ph img{transition:none;transform:none}
  .hero__grid .hero__text>*,.hero__media,.hero__media .ph::before,.refbar__i{
    animation:none!important;opacity:1!important;transform:none!important}
  .tlink::after{transition:none}
}

/* ---------- Dark-band polish for the pattern vocabulary -------------------- */
.section--dark .legend,.section--dark2 .legend{color:#A7ADB4}
.section--dark .legend b,.section--dark2 .legend b{color:#fff}
.section--dark .note b,.section--dark2 .note b{color:#fff}
.section--dark .seq .ph,.section--dark2 .seq .ph{border-color:var(--hairline-dark)}
.section--dark h3{color:#fff}

/* ---------- Measure bar (§13: a proportion stated, not implied) ------------ */
.measure{margin:clamp(22px,2.6vw,32px) 0 0}
.measure__t{margin:0;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.measure__track{height:8px;margin:12px 0 10px;border-radius:2px;background:#3B4148;overflow:hidden}
.measure__fill{display:block;height:100%;width:var(--w,0);background:var(--accent)}
.measure .legend{margin:0}
.legend .k-a{background:var(--accent)}
.legend .k-b{background:var(--steel-2)}
.section--dark .measure__t,.section--dark2 .measure__t{color:var(--label-l)}

/* ---------- Layout helpers shared by the sections ------------------------- */
.section[id]{scroll-margin-top:96px}
.section--off{background:var(--off)}
.section--grey{background:var(--light)}
.section--dark2{background:var(--charcoal-2);color:#C4C9CE}
.section--dark2 h1,.section--dark2 h2,.section--dark2 h3{color:#fff}
.section--dark2 .eyebrow{color:var(--label-l)}
.section--dark2 .lede{color:#C4C9CE}
.section--dark2 p,.section--dark2 .note{color:#A7ADB4}
.section--dark2 .card{background:transparent;border-color:var(--hairline-dark)}
.section--dark2 .card h3,.section--dark2 .card h3 a{color:#fff}
.section--dark2 .card p{color:#A7ADB4}
.split--start{align-items:start}
.split--wide{gap:clamp(30px,4.6vw,68px)}
.stack{display:grid;gap:clamp(18px,2.2vw,26px)}
.stack--sm{gap:14px}
.tiles-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.head-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:clamp(26px,3vw,38px)}
.block-note{margin:clamp(22px,2.6vw,32px) 0 0;padding:18px 20px;border:1px solid var(--line);
  border-left:3px solid var(--line-2);border-radius:var(--r);background:var(--off);
  font-size:13.5px;line-height:1.6;color:var(--muted)}
.block-note b{color:var(--charcoal)}
.block-note p{margin:0}
.block-note p+p{margin-top:10px}
@media (max-width:560px){.tiles-2{grid-template-columns:1fr}}
.section--dark .block-note,.section--dark2 .block-note{background:rgba(255,255,255,.04);
  border-color:var(--hairline-dark);border-left-color:var(--label-l);color:#A7ADB4}
.section--dark .block-note b,.section--dark2 .block-note b{color:#fff}

/* ---------- Motion (§20: gentle fade-in, small image reveal, one process
   line, a measure bar that fills) ------------------------------------------
   Optional by design: every entrance rule is scoped to html.js, and
   prefers-reduced-motion turns the whole layer off. Without it the page is
   simply still — never blank, never unreachable.                            */
[data-reveal]{--d:0ms}
.js [data-reveal]{opacity:0;transform:translateY(6px);
  transition:opacity var(--dur-mid) ease,transform var(--dur-mid) ease;
  transition-delay:var(--d,0ms)}
.js [data-reveal].in{opacity:1;transform:none}

/* A photograph is uncovered rather than moved, so its crop never shifts. */
.js .fig--reveal .ph::before{content:"";position:absolute;inset:0;z-index:3;
  background:var(--white);transform:scaleY(1);transform-origin:50% 100%;
  transition:transform .95s var(--ease);transition-delay:var(--d,0ms)}
.js .fig--reveal.in .ph::before{transform:scaleY(0)}
.js .section--dark .fig--reveal .ph::before,
.js .section--dark2 .fig--reveal .ph::before{background:var(--charcoal)}

/* The measure bar fills once, when it is reached. */
.js .measure__fill{width:0;transition:width 1.2s var(--ease)}
.js .measure.in .measure__fill{width:var(--w,0)}

/* The sticky header separates from the page as soon as it scrolls. */
.site-header{transition:box-shadow .24s ease}
.site-header.is-stuck{box-shadow:0 1px 0 var(--line),var(--shadow-1)}

/* Links step forward instead of flashing. */
.tlink::after{display:inline-block;transition:transform var(--dur-fast) ease}
.tlink:hover::after{transform:translateX(3px)}

/* ---------- First screen: one staged entrance, CSS only ------------------- */
@keyframes heroRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes heroCurtain{from{transform:scaleY(1)}to{transform:scaleY(0)}}
.hero--split .hero__text>*{animation:heroRise .7s var(--ease) both}
.hero--split .hero__text>*:nth-child(2){animation-delay:.08s}
.hero--split .hero__text>*:nth-child(3){animation-delay:.16s}
.hero--split .hero__text>*:nth-child(4){animation-delay:.24s}
.hero--split .hero__text>*:nth-child(5){animation-delay:.3s}
.hero--split .hero__media{animation:heroRise .8s .12s var(--ease) both}
.hero--split .hero__aside{animation:heroRise .8s .12s var(--ease) both}
.hero--split .hero__media .ph::before{content:"";position:absolute;inset:0;z-index:3;
  background:var(--white);transform-origin:50% 100%;
  animation:heroCurtain 1s .44s var(--ease) both}
.hero--split .refbar__i{animation:heroRise .6s var(--ease) both}
.hero--split .refbar__i:nth-child(2){animation-delay:.32s}
.hero--split .refbar__i:nth-child(3){animation-delay:.4s}
.hero--split .refbar__i:nth-child(4){animation-delay:.48s}

@media (prefers-reduced-motion:reduce){
  .hero--split .hero__text>*,.hero--split .hero__media,.hero--split .hero__aside,
  .hero--split .refbar__i{
    animation:none;opacity:1;transform:none}
  .hero--split .hero__media .ph::before,.js .fig--reveal .ph::before{display:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none;transition-delay:0ms}
  .js .flow-line::after{transform:scaleX(1)}
  .js .measure__fill{width:var(--w,0);transition:none}
  .mcard .ph img,.mcard:hover .ph img,.tlink::after,.tlink:hover::after{transition:none;transform:none}
  .site-header{transition:none}
}

/* ---------- Spacing steps used between blocks inside a section ------------- */
.mt-md{margin-top:clamp(20px,2.4vw,30px)}
.mt-lg{margin-top:clamp(36px,4.4vw,60px)}
.mb-md{margin-bottom:clamp(20px,2.4vw,30px)}
.section--dark .legend,.section--dark2 .legend{color:#A7ADB4}
.section--dark .legend b,.section--dark2 .legend b{color:#fff}
.section--dark .seq__n,.section--dark2 .seq__n{color:var(--label-l)}
.section--dark .plain li,.section--dark2 .plain li{border-bottom-color:var(--hairline-dark)}
.section--dark .plain li b,.section--dark2 .plain li b{color:#fff}
.section--dark .head-actions .btn-2,.section--dark2 .head-actions .btn-2{
  border-color:rgba(255,255,255,.42);color:#fff}
.section--dark .head-actions .btn-2:hover{border-color:#fff;color:#fff}

/* Small muted label above a card title (card index, record type, "Capability"). */
.kicker{margin:0;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}
.card .kicker{margin-bottom:2px}
.section--dark .kicker,.section--dark2 .kicker{color:var(--label-l)}
.section--dark .card .kicker,.section--dark2 .card .kicker{color:var(--label-l)}

/* ==========================================================================
   Home module pass — the ten modules of front-page.php, refined in place.
   Nothing here changes the pattern vocabulary: it adds the two variants the
   sections asked for (a centred action row, an accent card), the two-column
   process list, the dark-band button colours and the WhatsApp control.
   ========================================================================== */

/* ---------- 1 · Section heading: the lede sits close under the heading ------
   The eyebrow keeps its 14px and the heading gets the same gap under it — 14px on
   a wide screen, 12px on a phone — so the paragraph reads as a second voice rather
   than arriving after a break. This rule used to reach 22px, which is the gap the
   owner asked to close. The first screen keeps its own wider gap.            */
.sec-head .lede{margin-top:clamp(12px,1vw,14px)}

/* ---------- 2 · A closing action row, centred when the block is centred ---- */
.head-actions--center{justify-content:center}
.head-actions--tight{margin-top:clamp(20px,2.2vw,26px)}

/* ---------- 3 · The one card in a grid that is a next step, not a capability
   Tinted with the accent instead of white, and marked with the accent edge,
   so it separates from the five capability cards without a second colour.   */
.card--accent{background:var(--accent-t);border-color:#C6D8E7;border-left:3px solid var(--accent);
  box-shadow:0 20px 34px -30px rgba(31,35,40,.55)}
.card--accent .kicker{color:var(--accent)}
.card--accent h3{color:var(--accent-d)}
.card--accent p{color:#46586A}
.card--accent .more{color:var(--accent-d)}
.card--accent:hover{border-color:#B4CCE0}

/* ---------- 4 · Process rows in two columns (§18, long process) ------------
   Each row keeps its number and its own rule, so the list still reads in order
   when the eye follows the column rather than the page.                     */
.flow--2{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(26px,3.6vw,58px);
  border-top:0}
.flow--2>li{display:flex;margin:0}
.flow--2 .flow__row{width:100%;border-top:1px solid var(--line-2);border-bottom:0}
@media (max-width:860px){.flow--2{grid-template-columns:1fr}}

/* ---------- 5 · Buttons on a dark band ------------------------------------
   .section--dark a re-colours every bare link to white, which left a filled
   button with a white label on a white fill. A button states its own colours. */
.section--dark .btn,.section--dark2 .btn{background:var(--accent);border-color:var(--accent);color:#fff}
.section--dark .btn:hover,.section--dark2 .btn:hover{background:var(--accent-d);
  border-color:var(--accent-d);color:#fff}
.section--dark .btn-light,.section--dark2 .btn-light{background:#fff;border-color:#fff;color:var(--charcoal)}
.section--dark .btn-light:hover,.section--dark2 .btn-light:hover{background:var(--accent-t);
  border-color:var(--accent-t);color:var(--charcoal)}

/* ---------- 6 · WhatsApp --------------------------------------------------
   The one control on the site whose colour is how it is recognised, so it keeps
   WhatsApp's green. It is the floating tile in the corner of every page: the chat
   route lives there, and no page carries a second green button beside its own.  */

/* The tile the owner chose for it: the
   green app icon, squared off with a rounded corner, carrying the outline mark in
   white. It is fixed at the lower-right of the window, so the route is on every
   page without a band of its own — footer.php prints it once, for every template.
   Hovering it, or reaching it with the keyboard, brings out the short sentence
   beside it; that same sentence is the link's own name, so one wording serves the
   visitor who reads it and the one who hears it.                              */
.wa-float{position:fixed;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);
  z-index:40;display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:23%;color:#fff;
  background:linear-gradient(168deg,#6AD46F 0%,#41BC5A 55%,#2EA54C 100%);
  box-shadow:0 6px 18px rgba(20,23,27,.32)}
.wa-float__i{flex:0 0 auto;width:34px;height:34px}
.wa-float:hover,.wa-float:focus{color:#fff;text-decoration:none;filter:brightness(1.06);
  box-shadow:0 9px 24px rgba(20,23,27,.42)}
.wa-float:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* The sentence is in the document from the first paint and only becomes visible,
   so the link is never nameless to a screen reader or to a crawler. */
.wa-float__tip{position:absolute;right:calc(100% + 12px);top:50%;
  transform:translate(6px,-50%);padding:9px 13px;border-radius:var(--r-btn);
  background:var(--white);color:var(--charcoal);font-size:13.5px;font-weight:600;
  line-height:1.2;white-space:nowrap;box-shadow:0 4px 16px rgba(20,23,27,.24);
  opacity:0;pointer-events:none}
.wa-float__tip::after{content:"";position:absolute;left:100%;top:50%;margin-top:-5px;
  border:5px solid transparent;border-left-color:var(--white)}
.wa-float:hover .wa-float__tip,.wa-float:focus .wa-float__tip{opacity:1;
  transform:translate(0,-50%)}
@supports (padding:max(0px)){
  .wa-float{right:max(clamp(14px,2vw,24px),env(safe-area-inset-right));
    bottom:max(clamp(14px,2vw,24px),env(safe-area-inset-bottom))}
}
@media (max-width:520px){.wa-float{width:52px;height:52px}
  .wa-float__i{width:31px;height:31px}
  .wa-float__tip{font-size:12.5px;padding:8px 11px}}
@media (prefers-reduced-motion:no-preference){
  .wa-float{transition:box-shadow .18s ease,filter .18s ease}
  .wa-float__tip{transition:opacity .16s ease,transform .16s ease}}

/* ---------- 7 · The note box, once its section is white --------------------
   It was a near-white panel on a grey band; on white that reads as no box at
   all, so it takes the accent tint the next-step card uses, with the darker
   body colour that tint needs for readable text.                            */
.block-note{background:var(--accent-t);border-color:#C6D8E7;border-left-color:var(--accent);
  color:#46586A}

/* ---------- 8 · An outline button whose outline is the primary colour ------
   Default state: blue outline, near-black label on the page's own background.
   Hover/focus: the box fills with the primary colour and the label turns
   white, so the click target never changes size or position.               */
.btn-2--accent{border-color:var(--accent);color:var(--charcoal)}
.btn-2--accent:hover,.btn-2--accent:focus{border-color:var(--accent);background:var(--accent);
  color:#fff;text-decoration:none}

/* ---------- 9 · Thank-you screen ------------------------------------------
   The end of a form submission, not a page anyone browses to. It states the one
   fact the visitor needs, then offers the next step: the message and its buttons
   are centred, and the page keeps the same band rhythm as the rest of the site. */
.thanks{text-align:center;padding-bottom:clamp(26px,3vw,40px)}
.thanks h1{max-width:27ch;margin:0 auto}
.thanks .lede{max-width:58ch;margin:22px auto 0}
.thanks .eyebrow{color:var(--accent)}
.thanks .head-actions{justify-content:center}
.thanks-ref{margin:clamp(22px,2.6vw,32px) auto 0;max-width:58ch;font-size:13.5px;
  line-height:1.6;color:var(--muted)}
.thanks-ref b{color:var(--charcoal)}
.section--dark .thanks-ref b,.section--dark2 .thanks-ref b{color:#fff}

/* ==========================================================================
   10 · Contact page — the first screen's picture.
   The card the page used to draw in code is gone: the owner supplies the team
   photograph as one image (the contact_hero_image field on the page,
   inc/shape.json), and the shared media slot holds it in the frame every other
   image slot on the site uses — printing the 1200 × 800 it wants until the
   picture is attached, then unchanged.
   ========================================================================== */

/* ---------- 10b · The map -------------------------------------------------
   Google's keyless embed in the same frame language as the image slots: one
   border, one radius, and the location named underneath so the address is
   readable even if the embed never paints.                                  */
.map{margin:0}
.map iframe{display:block;width:100%;height:clamp(300px,38vw,420px);border:1px solid var(--line);
  border-radius:var(--r);background:var(--off)}
.map figcaption{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* ---------- 11 · Legal pages ----------------------------------------------
   Privacy Policy, Terms & Conditions and Cookie Policy share one shape: a
   contents rail that stays in view beside numbered sections. The rail is plain
   anchors — no JavaScript, no scroll library.                             */
.legal-split{align-items:stretch;grid-template-columns:minmax(0,250px) minmax(0,1fr)}
.legal-nav ul{position:sticky;top:104px;list-style:none;margin:14px 0 0;padding:0}
.legal-nav a{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color var(--dur-fast)}
.legal-nav a:hover{color:var(--accent)}
.legal-nav__n{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--steel);padding-top:2px}
.legal-nav__date{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--steel)}
.legal-body{max-width:780px}
.legal-sec{padding:clamp(24px,2.8vw,38px) 0;scroll-margin-top:104px}
.legal-sec+.legal-sec{border-top:1px solid var(--line)}
.legal-sec:first-child{padding-top:0}
.legal-sec .kicker{margin-bottom:10px}
.legal-sec h2{margin:0 0 14px;font-size:clamp(19px,1.7vw,23px);line-height:1.25;
  font-family:var(--display);color:var(--charcoal)}
.legal-sec p{margin:0 0 14px;font-size:15px;line-height:1.75;color:var(--ink)}
.legal-sec p:last-child{margin-bottom:0}
.legal-sec .plain{margin-bottom:0}
.legal-sec .plain li{font-size:14.5px;line-height:1.65}
.plain--tight li{padding:9px 0}
.plain--tight li:last-child{border-bottom:0}
.legal-also{margin:clamp(24px,2.6vw,34px) 0 0}
.legal-also__links{display:flex;flex-wrap:wrap;gap:18px;margin:8px 0 0}
@media (max-width:900px){
  .legal-split{grid-template-columns:1fr}
  .legal-nav ul{position:static;margin-top:10px}
  .legal-nav__date{margin-top:10px}
}

/* ---------- 12 · The FAQ block ---------------------------------------------
   One question-and-answer block for the two places the site prints the shape's
   `faqs` rows: the product category pages (their own rows, or the site-wide ones
   as the fallback) and the FAQ page under Resources, which prints the site-wide
   rows on their own. It lives here rather than in either page's local stylesheet
   because both render it, and one block means one wording of the same row shape.
   Drawn by the built-in accordion (assets/wp-behaviors, `accordion` over
   `disclosure`): a button[data-trigger] and a [data-panel] per row, with
   aria-expanded carrying the state. The runtime wraps the panel in its own motion
   box, so the panel is styled through the attribute selector and never by moving it.
   Hairlines between rows, the question in the charcoal the site's headings use, and
   a +/− mark that follows aria-expanded — the mark the runtime keeps, not a class of
   this file's own. The words in the panel belong to the site record; nothing here
   writes an answer. */
.faq{max-width:920px;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{margin:0}
.faq__q [data-trigger]{display:flex;width:100%;align-items:flex-start;justify-content:space-between;
  gap:clamp(16px,2vw,32px);padding:clamp(16px,1.8vw,22px) 0;border:0;background:none;
  color:var(--charcoal);font-family:inherit;font-size:clamp(16px,1.4vw,18px);font-weight:600;
  line-height:1.4;text-align:left;cursor:pointer;transition:color var(--dur-fast) ease}
.faq__q [data-trigger]:hover{color:var(--accent)}
.faq__q [data-trigger]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq__q [data-trigger]::after{content:"+";flex:0 0 auto;font-size:20px;font-weight:600;line-height:1;
  color:var(--accent)}
.faq__q [data-trigger][aria-expanded="true"]::after{content:"\2212"}
.faq [data-panel] p{margin:0 0 clamp(16px,1.8vw,22px);max-width:72ch;font-size:15.5px;line-height:1.65;
  color:var(--muted)}