/* ==========================================================================
   KINGHOME — front page band stylesheet (assets/css/home.css)
   --------------------------------------------------------------------------
   This file owns the front page's own bands and nothing else. It is loaded
   after tokens.css and style.css, and every selector below is scoped under the
   page wrapper `.gh-home`, so it cannot reach the rest of the site and it
   restates nothing from style.css globally (.section, .wrap, .card, .btn,
   .eyebrow, .lede and the tokens stay exactly as they are).

   The layout is the hard-edged editorial language of the design
   (replica-contract.md §1): square corners, hairlines, one orange accent, no
   shadows, no rounded card chrome. The shared header (.ghh-*) and footer
   (.ghf-*) are NOT here — chrome.css owns those two.

   Bands in this file, in the order of replica-contract.md §3:
     2  hero              .gh-hero
     3  counter strip     .gh-counters-band / .gh-counters
     4  product range     .gh-range
     5  procurement       .gh-cards / .gh-band__foot
     6  OEM & ODM         .gh-split / .gh-checks / .gh-rows
     7  execution         .gh-split--photo / .gh-photo / .gh-steps
     8  checkpoints       .gh-table
     9  documentation     .gh-cards--2 / .gh-card--ink
     10 how we work       .gh-flow
     11 supply base       .gh-visits
     12 buyer questions   .gh-faq
     13 buyer resources   .gh-cards--3 / .gh-card--link
     14 enquiry band      .gh-enquiry__split (ink 40% / light 60%, .form--compact)
   ========================================================================== */

/* ======================================================= 1 · design tokens
   replica-contract.md §1. Declared here on .gh-home and duplicated on :root in
   chrome.css: the two files must not depend on each other's order. Three local
   additions are marked `local` — they name the light band's own colour and the
   gutter/rhythm metrics the bands share. */
.gh-home{
  /* dark bands, and text on dark */
  --gh-ink:#15171b;
  --gh-ink-2:#1f2227;
  --gh-ink-ink:#f5f5f4;
  --gh-ink-muted:rgba(255,255,255,.66);
  --gh-ink-line:rgba(255,255,255,.16);
  /* light bands, and text on light */
  --gh-cream:#f2efe9;
  --gh-white:#ffffff;
  --gh-light:#faf9f7;                     /* local: the --light band's colour */
  --gh-ink-text:#141416;
  --gh-muted:#5b6067;
  --gh-line:rgba(13,13,15,.14);
  /* the one accent */
  --gh-accent:var(--kinghome-red);
  --gh-accent-deep:var(--kinghome-red-hover);
  /* metrics: the wrap, the band gutter, the vertical rhythm */
  --gh-wrap:1240px;
  --gh-pad:28px;                          /* local */
  --gh-band-y:clamp(72px,9vw,132px);      /* local: --tight halves it */
}

/* ======================================================= 2 · shared primitives
   The band shell (§1): .gh-band is the full-bleed block, .gh-band__inner is the
   wrap, .gh-band__head carries the shared eyebrow/headline/lede pattern. */
.gh-home{padding:0;background:var(--gh-white);color:var(--gh-ink-text);overflow-wrap:break-word}
.gh-home .gh-band{position:relative;padding:var(--gh-band-y) 0;background:var(--gh-white);color:var(--gh-ink-text)}
.gh-home .gh-band--tight{padding:calc(var(--gh-band-y) / 2) 0}
.gh-home .gh-band--white{background:var(--gh-white)}
.gh-home .gh-band--cream{background:var(--gh-cream)}
.gh-home .gh-band--light{background:var(--gh-light)}
.gh-home .gh-band--ink{background:var(--gh-ink);color:var(--gh-ink-ink)}
.gh-home .gh-band__inner{max-width:var(--gh-wrap);margin:0 auto;padding:0 var(--gh-pad)}
.gh-home .gh-band__head{max-width:78ch;margin:0 0 clamp(34px,4.4vw,60px)}
.gh-home .gh-band__foot{margin:clamp(34px,4.4vw,56px) 0 0;text-align:center}

/* type: eyebrow, the two headline steps, the lede, the small-caps label */
.gh-home .gh-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gh-accent)}
.gh-home .gh-eyebrow::before{content:"";flex:0 0 44px;height:2px;background:var(--gh-accent)}
.gh-home .gh-h1{margin:0;font-size:clamp(2.6rem,6.2vw,5.2rem);font-weight:800;line-height:1.02;letter-spacing:-.03em}
.gh-home .gh-h2{margin:0;font-size:clamp(1.9rem,3.9vw,3.15rem);font-weight:800;line-height:1.06;letter-spacing:-.028em}
.gh-home .gh-lede{margin:18px 0 0;max-width:62ch;font-size:1.06rem;line-height:1.62;color:var(--gh-muted)}
.gh-home .gh-band--ink .gh-lede{color:var(--gh-ink-muted)}
.gh-home .gh-label{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* buttons (§1): square, uppercase, the arrow carried in the label */
.gh-home .gh-btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:19px 30px;border:1px solid transparent;border-radius:0;font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.1;text-transform:uppercase;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease}
.gh-home .gh-btn--solid{background:var(--gh-accent);border-color:var(--gh-accent);color:#fff}
.gh-home .gh-btn--solid:hover{background:var(--gh-accent-deep);border-color:var(--gh-accent-deep);color:#fff}
.gh-home .gh-btn--outline{background:transparent;border-color:currentColor;color:var(--gh-ink-text)}
.gh-home .gh-btn--outline:hover{border-color:var(--gh-accent);color:var(--gh-accent)}
.gh-home .gh-band--ink .gh-btn--outline,
.gh-home .gh-hero .gh-btn--outline{color:var(--gh-ink-ink)}
.gh-home .gh-band--ink .gh-btn--outline:hover,
.gh-home .gh-hero .gh-btn--outline:hover{border-color:var(--gh-accent);color:var(--gh-accent)}
.gh-home .gh-btn__arrow{font-size:1.05em;line-height:1;transition:transform .18s ease}
.gh-home .gh-btn:hover .gh-btn__arrow{transform:translateX(3px)}

/* the quiet link, and the arrow the design prints after a link label. A link
   that already carries its own arrow element keeps it: the :has() guard below
   drops the generated one instead of printing a second arrow. */
.gh-home .gh-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gh-accent);text-decoration:none}
.gh-home .gh-link:hover{text-decoration:underline;text-underline-offset:3px}
.gh-home .gh-link::after,
.gh-home .gh-range-card__link::after,
.gh-home .gh-card__cta::after{content:"→";font-size:1.05em;line-height:1;transition:transform .18s ease}
.gh-home .gh-link:has(.gh-btn__arrow)::after,
.gh-home .gh-link:has([aria-hidden="true"])::after,
.gh-home .gh-range-card__link:has(.gh-btn__arrow)::after,
.gh-home .gh-range-card__link:has([aria-hidden="true"])::after,
.gh-home .gh-card__cta:has(.gh-btn__arrow)::after,
.gh-home .gh-card__cta:has([aria-hidden="true"])::after{content:none}
.gh-home .gh-link:hover::after,
.gh-home .gh-range-card__link:hover::after,
.gh-home .gh-card__cta:hover::after{transform:translateX(3px)}

/* focus: the accent ring, on every control this page adds */
.gh-home a:focus-visible,
.gh-home button:focus-visible,
.gh-home summary:focus-visible,
.gh-home input:focus-visible,
.gh-home select:focus-visible,
.gh-home textarea:focus-visible{outline:2px solid var(--gh-accent);outline-offset:3px}

/* ======================================================= 3 · band 2 — hero
   A dark, full-bleed photographic opening. The photograph is the markup's
   .gh-hero__bg, laid behind everything (z-index:-1 inside an isolated stacking
   context) with a left-to-right scrim painted over it: strong enough on the
   left that white text reads, open enough on the right that the picture shows.
   The panel (__window) is pinned bottom-right on desktop and drops into normal
   flow below 760px — below that it is the last block of the hero. */
.gh-home .gh-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--gh-ink);color:var(--gh-ink-ink)}
.gh-home .gh-hero__bg{position:absolute;inset:0;z-index:-1}
.gh-home .gh-hero__bg .photo{margin:0;height:100%;border:0;border-radius:0;background:var(--gh-ink-2)}
.gh-home .gh-hero__bg .photo__img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0;border-radius:0}
.gh-home .gh-hero__bg .photo__meta{position:absolute;right:20px;bottom:14px;margin:0;max-width:280px;justify-content:flex-end;font-size:11px;text-align:right}
.gh-home .gh-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,13,15,.96) 0%,rgba(13,13,15,.9) 34%,rgba(13,13,15,.62) 68%,rgba(13,13,15,.4) 100%)}
.gh-home .gh-hero__inner{position:relative;z-index:1;max-width:var(--gh-wrap);margin:0 auto;padding:clamp(84px,12vw,150px) var(--gh-pad) clamp(64px,8vw,96px)}

/* the headline column takes roughly 62% of the wrap from 760px; the line row and
   the two actions keep the full width, so all six lines sit in one wrapping row */
@media(min-width:760px){
  .gh-home .gh-hero .gh-eyebrow,
  .gh-home .gh-hero .gh-h1,
  .gh-home .gh-hero .gh-lede{max-width:62%}
  .gh-home .gh-hero__inner{padding-bottom:clamp(150px,12vw,172px)}
}
/* between 760px and 1000px the wrap is narrow enough that the pinned panel and
   the 62% text column would share a band, so the content is lifted clear of it */
@media(min-width:760px) and (max-width:999px){
  .gh-home .gh-hero__inner{padding-bottom:clamp(236px,26vw,268px)}
}

/* the six line links: one wrapping row, each prefixed with an orange + */
.gh-home .gh-hero__lines{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin:clamp(30px,3.6vw,44px) 0 0;padding:0;list-style:none}
.gh-home .gh-hero__line{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none}
.gh-home .gh-hero__line::before{content:"+";font-size:14px;font-weight:700;letter-spacing:0;color:var(--gh-accent)}
.gh-home .gh-hero__line a{color:inherit;text-decoration:none}
.gh-home .gh-hero__line:hover,
.gh-home .gh-hero__line:hover a{color:var(--gh-accent)}
.gh-home .gh-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:clamp(28px,3.4vw,40px) 0 0}

/* the pinned panel: a dark slab with the orange rule down its left edge */
.gh-home .gh-hero__window{position:absolute;right:var(--gh-pad);bottom:clamp(28px,4vw,52px);z-index:2;width:min(360px,42%);padding:22px 24px;background:rgba(23,24,27,.94);border-left:2px solid var(--gh-accent)}
.gh-home .gh-hero__window h2,
.gh-home .gh-hero__window h3,
.gh-home .gh-hero__window strong{display:block;margin:0;font-size:1rem;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:#fff}
.gh-home .gh-hero__window p{margin:8px 0 0;font-size:.92rem;line-height:1.6;color:var(--gh-ink-muted)}
.gh-home .gh-hero__window > :first-child{margin-top:0}
@media(max-width:759px){
  .gh-home .gh-hero__window{position:static;width:auto;max-width:none;margin:34px 0 0}
}

/* ======================================================= 4 · band 3 — counters
   A white strip, not a full band: four equal cells divided by hairlines, the
   number at 800 weight with its unit beside it and the label uppercased under
   it. Two columns from 640px, four from 1040px; while the cells are stacked the
   divider turns horizontal so no cell is fenced off on its own. */
.gh-home .gh-counters-band{background:var(--gh-white);padding:clamp(44px,5.4vw,72px) 0}
.gh-home .gh-counters{display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0;list-style:none}
.gh-home .gh-counter{border-top:1px solid var(--gh-line);padding:20px 0 0}
.gh-home .gh-counters > .gh-counter + .gh-counter{margin-top:22px}
.gh-home .gh-counter__num{display:block;font-size:clamp(2rem,3.6vw,3.1rem);font-weight:800;line-height:1.02;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.gh-home .gh-counter__unit{margin-left:7px;font-size:.4em;font-weight:700;letter-spacing:.04em;color:var(--gh-muted)}
.gh-home .gh-counter__label{display:block;margin:12px 0 0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gh-accent)}
@media(min-width:640px){
  .gh-home .gh-counters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gh-home .gh-counter{border-top:0;border-left:1px solid var(--gh-line);padding:4px 26px}
  .gh-home .gh-counters > .gh-counter + .gh-counter{margin-top:0}
  .gh-home .gh-counter:nth-child(odd){border-left:0;padding-left:0}
  .gh-home .gh-counter:nth-child(even){padding-right:0}
  .gh-home .gh-counter:nth-child(n+3){margin-top:32px}
}
@media(min-width:1040px){
  .gh-home .gh-counters{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gh-home .gh-counter:nth-child(odd){border-left:1px solid var(--gh-line);padding-left:26px}
  .gh-home .gh-counter:first-child{border-left:0;padding-left:0}
  .gh-home .gh-counter:nth-child(even){padding-right:26px}
  .gh-home .gh-counter:last-child{padding-right:0}
  .gh-home .gh-counter:nth-child(n+3){margin-top:0}
}

/* ======================================================= 5 · band 4 — the range
   The centre of the page: three columns from 1000px, two from 700px, one below.
   Each card is a square-cornered figure with its caption laid over the picture:
   the photograph fills the card, a dark gradient rises from the bottom so the
   words stay legible on any photograph, and the whole card lifts slightly on
   hover — border colour only, never a shadow. */
.gh-home .gh-range__head{max-width:82ch;margin:0 0 clamp(34px,4.4vw,60px)}
.gh-home .gh-range__grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,2vw,26px);margin:0;padding:0;list-style:none}
@media(min-width:700px){.gh-home .gh-range__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.gh-home .gh-range__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gh-home .gh-range-card{position:relative;display:block;margin:0;overflow:hidden;border:1px solid var(--gh-line);background:var(--gh-ink);color:var(--gh-ink-ink);text-decoration:none;transition:transform .22s ease,border-color .22s ease}
.gh-home .gh-range-card:hover{transform:translateY(-4px);border-color:var(--gh-accent)}
.gh-home .gh-range-card__media{position:relative;margin:0;background:var(--gh-ink-2)}
.gh-home .gh-range-card__body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(18px,2.2vw,26px);background:linear-gradient(to top,rgba(13,13,15,.97) 0%,rgba(13,13,15,.92) 32%,rgba(13,13,15,.58) 68%,rgba(13,13,15,0) 100%)}
.gh-home .gh-range-card__label{display:block;margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gh-accent)}
.gh-home .gh-range-card__title{margin:0;font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:700;line-height:1.25;color:#fff}
.gh-home .gh-range-card__text{margin:10px 0 0;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.8)}
.gh-home .gh-range-card__link{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin:12px 0 0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none}

/* ------------------------------------------------------- photographs in a band
   components/photo-slot.php prints the figure, the image and the placeholder's
   own label; inside these bands the slot is cropped to one ratio, squared off
   and stripped of its radius. The placeholder label is kept — nothing a wide
   screen shows is hidden — and rests on the picture as a small ink chip so it
   stays readable whatever the tone or the crop underneath it. */
.gh-home .gh-range-card__media .photo,
.gh-home .gh-visit__media .photo,
.gh-home .gh-photo__media .photo{margin:0;height:auto;aspect-ratio:4/3;border:0;border-radius:0;background:var(--gh-ink-2)}
.gh-home .gh-range-card__media .photo__img,
.gh-home .gh-visit__media .photo__img,
.gh-home .gh-photo__media .photo__img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0;border-radius:0}
.gh-home .gh-range-card__media .photo__meta,
.gh-home .gh-visit__media .photo__meta,
.gh-home .gh-photo__media .photo__meta{position:absolute;left:14px;top:14px;z-index:2;max-width:calc(100% - 28px);margin:0;flex-direction:column;gap:3px;padding:7px 10px;background:rgba(13,13,15,.72);color:var(--gh-ink-muted);font-size:11px;line-height:1.35}
.gh-home .gh-range-card__media .photo__meta .mono,
.gh-home .gh-visit__media .photo__meta .mono,
.gh-home .gh-photo__media .photo__meta .mono{font-size:10px;letter-spacing:.06em;color:var(--gh-ink-ink)}
.gh-home .gh-photo__media .photo{aspect-ratio:3/2}

/* ======================================================= 6 · cards — bands 5, 9, 13
   One card family for the three card bands: band 5 (.gh-cards — six numbered
   cards 01–06 with the centred CTA in .gh-band__foot), band 9 (.gh-cards--2 —
   a 2 x 2 grid of .gh-card--ink panels inside the ink band) and band 13
   (.gh-cards--3 — three .gh-card--link panels). Square, one hairline, no
   shadow: a card that is itself a link lifts, the others only darken their
   border, so nothing on the page pretends to have depth. */
.gh-home .gh-cards{display:grid;grid-template-columns:1fr;gap:clamp(16px,1.8vw,24px);margin:0;padding:0;list-style:none}
@media(min-width:640px){.gh-home .gh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:700px){.gh-home .gh-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){
  .gh-home .gh-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gh-home .gh-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.gh-home .gh-cards--2{grid-template-columns:1fr}
@media(min-width:560px){.gh-home .gh-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gh-home .gh-card{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,30px);border:1px solid var(--gh-line);background:var(--gh-white);color:var(--gh-ink-text);transition:border-color .2s ease,transform .2s ease}
.gh-home .gh-card__num{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gh-accent);font-variant-numeric:tabular-nums}
.gh-home .gh-card__label{display:block;margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gh-accent)}
.gh-home .gh-card__title{margin:12px 0 0;font-size:clamp(1.08rem,1.5vw,1.22rem);font-weight:700;line-height:1.25}
.gh-home .gh-card__label + .gh-card__title{margin-top:0}
.gh-home .gh-card__text{margin:10px 0 0;font-size:.95rem;line-height:1.62;color:var(--gh-muted)}
.gh-home .gh-card__cta{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin:auto 0 0;padding-top:16px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gh-accent)}

/* a card that is the link itself (band 13) */
.gh-home .gh-card--link{text-decoration:none;color:inherit}
.gh-home .gh-card--link:hover{transform:translateY(-3px);border-color:var(--gh-accent)}
.gh-home .gh-card--link .gh-card__title{transition:color .18s ease}
.gh-home .gh-card--link:hover .gh-card__title{color:var(--gh-accent)}

/* the ink panels of band 9 — the panel tone, not the white card tone */
.gh-home .gh-band--ink .gh-card,
.gh-home .gh-card--ink{border-color:var(--gh-ink-line);background:var(--gh-ink-2);color:var(--gh-ink-ink)}
.gh-home .gh-band--ink .gh-card__title,
.gh-home .gh-card--ink .gh-card__title{color:#fff}
.gh-home .gh-band--ink .gh-card__text,
.gh-home .gh-card--ink .gh-card__text{color:var(--gh-ink-muted)}
.gh-home .gh-band--ink .gh-card:hover,
.gh-home .gh-card--ink:hover{border-color:var(--gh-accent)}

/* ======================================================= 7 · the split, and band 6
   The page's one split layout — aside left, main right — shared by band 6
   (ticked items + numbered rows), band 7 (photograph + steps, picture left,
   .gh-split--photo), band 9 (heading + the 2 x 2 ink grid) and bands 12 and 14
   (heading beside the faq and beside the form). It stacks below 900px: the
   columns change order of reading only, nothing is dropped. */
.gh-home .gh-split{display:grid;grid-template-columns:1fr;gap:clamp(36px,4.4vw,64px);align-items:start}
@media(min-width:900px){
  .gh-home .gh-split{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .gh-home .gh-split--photo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.gh-home .gh-split__aside,
.gh-home .gh-split__main{min-width:0}

/* band 6, left: four ticked items on hairlines */
.gh-home .gh-checks{margin:0;padding:0;list-style:none}
.gh-home .gh-check{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--gh-line);font-size:1rem;line-height:1.6}
.gh-home .gh-check:last-child{border-bottom:1px solid var(--gh-line)}
.gh-home .gh-check__mark{flex:0 0 auto;width:13px;height:8px;margin:9px 0 0;border-left:2px solid var(--gh-accent);border-bottom:2px solid var(--gh-accent);transform:rotate(-45deg)}
.gh-home .gh-checks--tight .gh-check{padding:12px 0;font-size:.96rem}
.gh-home .gh-band--ink .gh-check{border-color:var(--gh-ink-line)}
.gh-home .gh-band--ink .gh-check__mark{border-color:var(--gh-accent)}

/* band 6, right: the numbered rows 01–08, two to a row from 700px */
.gh-home .gh-rows{display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0;list-style:none}
@media(min-width:700px){.gh-home .gh-rows{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,44px)}}
.gh-home .gh-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 16px;padding:16px 0;border-top:1px solid var(--gh-line)}
.gh-home .gh-row__num{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gh-accent);font-variant-numeric:tabular-nums}
.gh-home .gh-row__title{margin:0;font-size:1rem;font-weight:700;line-height:1.35}
.gh-home .gh-row__text{grid-column:2;margin:6px 0 0;font-size:.94rem;line-height:1.6;color:var(--gh-muted)}

/* ======================================================= 8 · band 7 — execution
   The photograph carries the band's claim on its own bar: an ink strip with the
   orange rule down its left edge. The six steps sit beside it as numbered
   hairline rows, two to a row from 640px. */
.gh-home .gh-photo{margin:0}
.gh-home .gh-photo__media{position:relative;margin:0;background:var(--gh-ink-2)}
.gh-home .gh-photo__bar{margin:0;padding:18px 20px;background:var(--gh-ink);border-left:2px solid var(--gh-accent);color:var(--gh-ink-ink);font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.4;text-transform:uppercase}
.gh-home .gh-steps{display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0;list-style:none}
@media(min-width:640px){.gh-home .gh-steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,44px)}}
.gh-home .gh-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 16px;padding:16px 0;border-top:1px solid var(--gh-line)}
.gh-home .gh-step__num{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gh-accent);font-variant-numeric:tabular-nums}
.gh-home .gh-step__title{margin:0;font-size:1rem;font-weight:700;line-height:1.35}
.gh-home .gh-step__text{grid-column:2;margin:6px 0 0;font-size:.94rem;line-height:1.6;color:var(--gh-muted)}

/* ======================================================= 9 · band 8 — checkpoints
   A hairline-ruled list rather than a table element: the ordinal sits in a
   fixed-width first column at a large pale weight, the label is bold beside it,
   and the description is right-aligned on desktop while on a phone it stacks
   under the label in the second column. */
.gh-home .gh-table{margin:0;padding:0;border-top:1px solid var(--gh-line);list-style:none}
.gh-home .gh-table__row{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:2px 16px;padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--gh-line)}
.gh-home .gh-table__num{font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:800;line-height:1;letter-spacing:-.04em;color:rgba(13,13,15,.18);font-variant-numeric:tabular-nums}
.gh-home .gh-table__label{font-size:1.02rem;font-weight:700;line-height:1.35}
.gh-home .gh-table__text{grid-column:2;margin:8px 0 0;font-size:.95rem;line-height:1.6;color:var(--gh-muted)}
@media(min-width:760px){
  .gh-home .gh-table__row{grid-template-columns:4.4rem minmax(0,1fr) minmax(0,.88fr);gap:0 28px;align-items:baseline}
  .gh-home .gh-table__text{grid-column:3;margin:0;text-align:left}
}

/* ======================================================= 10 · band 10 — how we work
   The five-column step row: five columns at the widest, two from 560px, one
   below. Each step opens with the orange mark on its hairline, then STEP 01,
   the title and its line. */
.gh-home .gh-flow{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,34px);margin:0;padding:0;list-style:none}
@media(min-width:560px){.gh-home .gh-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.gh-home .gh-flow{grid-template-columns:repeat(5,minmax(0,1fr))}}
.gh-home .gh-flow__step{padding-top:22px;border-top:1px solid var(--gh-line)}
.gh-home .gh-flow__dot{display:block;width:9px;height:9px;margin:0 0 16px;background:var(--gh-accent)}
.gh-home .gh-flow__label{display:block;margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gh-accent)}
.gh-home .gh-flow__title{margin:0;font-size:1.02rem;font-weight:700;line-height:1.3}
.gh-home .gh-flow__text{margin:10px 0 0;font-size:.92rem;line-height:1.6;color:var(--gh-muted)}

/* ======================================================= 11 · band 11 — supply base
   Three photographs, one per way an order is handled, each labelled above its
   own title: two columns from 700px, three from 1000px. */
.gh-home .gh-visits{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.4vw,40px);margin:0;padding:0;list-style:none}
@media(min-width:700px){.gh-home .gh-visits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.gh-home .gh-visits{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gh-home .gh-visit{margin:0}
.gh-home .gh-visit__media{position:relative;margin:0;background:var(--gh-ink-2)}
.gh-home .gh-visit__label{display:block;margin:16px 0 8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gh-accent)}
.gh-home .gh-visit__title{margin:0;font-size:1.06rem;font-weight:700;line-height:1.3}
.gh-home .gh-visit__text{margin:8px 0 0;font-size:.94rem;line-height:1.62;color:var(--gh-muted)}

/* ======================================================= 12 · band 12 — buyer questions
   <details>/<summary> rows on hairlines, no JavaScript at all: the question is
   bold, the answer muted, and the mark in the right margin swaps from + to −
   while its row is [open]. The first row is opened by the markup (`open`), not
   from here. The question may be a heading inside the summary, so headings are
   neutralised to inherit the row's own type.
   (Band 13 is the card family above: .gh-cards--3, .gh-card--link, .gh-card__cta.) */
.gh-home .gh-faq{margin:0;border-top:1px solid var(--gh-line)}
.gh-home .gh-faq__item{border-bottom:1px solid var(--gh-line)}
.gh-home .gh-faq__summary{display:flex;align-items:flex-start;gap:18px;min-height:60px;padding:20px 0;font-size:1.02rem;font-weight:700;line-height:1.45;cursor:pointer;list-style:none}
.gh-home .gh-faq__summary::-webkit-details-marker{display:none}
.gh-home .gh-faq__summary::marker{content:""}
.gh-home .gh-faq__summary h2,
.gh-home .gh-faq__summary h3,
.gh-home .gh-faq__summary h4{display:inline;font:inherit;letter-spacing:inherit}
.gh-home .gh-faq__mark{flex:0 0 auto;margin-left:auto;font-size:1.25rem;font-weight:700;line-height:1.15;color:var(--gh-accent);transition:transform .18s ease}
.gh-home .gh-faq__mark::before{content:"+"}
.gh-home .gh-faq__item[open] .gh-faq__mark::before{content:"−"}
.gh-home .gh-faq__item[open] .gh-faq__mark{transform:rotate(180deg)}
.gh-home .gh-faq__answer{margin:0;padding:0 0 22px;max-width:74ch;font-size:.98rem;line-height:1.66;color:var(--gh-muted)}

/* ======================================================= 13 · band 14 — enquiry
   Superseded by region 31 below, which carries the reference page's two-panel
   layout. What survives from this region is the re-toning of the shared form
   classes scoped under .gh-enquiry: the whitespace, the checkbox line and the
   notice keep their rules there, and region 31 overrides what the compact
   variant (.form--compact) changes. The form is the site's own, built by
   gh_inquiry_form_html() from components/inquiry-form.php; only its own classes
   are touched, so the same form on /request-a-quote/ keeps its appearance. */
.gh-home .gh-enquiry__aside{max-width:54ch}
.gh-home .gh-enquiry__form{padding:clamp(22px,2.6vw,34px);border:1px solid var(--gh-ink-line);background:var(--gh-ink-2)}
.gh-home .gh-enquiry .form{display:grid;grid-template-columns:1fr;gap:18px;margin:0}
.gh-home .gh-enquiry .field{display:grid;gap:8px;min-width:0}
.gh-home .gh-enquiry .field__label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gh-ink-ink)}
.gh-home .gh-enquiry .field input,
.gh-home .gh-enquiry .field select,
.gh-home .gh-enquiry .field textarea{width:100%;padding:14px 16px;border:1px solid var(--gh-line);border-radius:0;background-color:var(--gh-white);color:var(--gh-ink-text);font:inherit;font-size:.96rem;transition:border-color .18s ease}
.gh-home .gh-enquiry .field textarea{min-height:130px;resize:vertical}
.gh-home .gh-enquiry .field input::placeholder,
.gh-home .gh-enquiry .field textarea::placeholder{color:rgba(13,13,15,.45)}
.gh-home .gh-enquiry .field input:hover,
.gh-home .gh-enquiry .field select:hover,
.gh-home .gh-enquiry .field textarea:hover{border-color:var(--gh-muted)}
.gh-home .gh-enquiry .field input:focus,
.gh-home .gh-enquiry .field select:focus,
.gh-home .gh-enquiry .field textarea:focus{border-color:var(--gh-accent);box-shadow:none}
.gh-home .gh-enquiry .field select{appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,rgba(13,13,15,.55) 50%),linear-gradient(135deg,rgba(13,13,15,.55) 50%,transparent 50%);background-position:calc(100% - 21px) 24px,calc(100% - 15px) 24px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.gh-home .gh-enquiry .field--check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:4px 0}
.gh-home .gh-enquiry .field--check input{width:18px;height:18px;flex:0 0 auto;margin:3px 0 0;padding:0;background-color:transparent;border-color:var(--gh-ink-line);accent-color:var(--gh-accent)}
.gh-home .gh-enquiry .field--check .field__label{font-size:.94rem;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.6;color:var(--gh-ink-ink)}
.gh-home .gh-enquiry .field__hint{font-size:.8rem;color:var(--gh-ink-muted)}
.gh-home .gh-enquiry .field__req{color:var(--gh-accent)}
.gh-home .gh-enquiry .field__error{font-size:.84rem;color:var(--gh-accent)}
.gh-home .gh-enquiry .field--invalid input,
.gh-home .gh-enquiry .field--invalid select,
.gh-home .gh-enquiry .field--invalid textarea{border-color:var(--gh-accent)}
.gh-home .gh-enquiry .field input[type="file"]{padding:12px 14px;border:1px dashed var(--gh-ink-line);background-color:transparent;color:var(--gh-ink-ink)}
.gh-home .gh-enquiry .field input[type="file"]::file-selector-button{margin-right:14px;padding:9px 14px;border:0;border-radius:0;background:var(--gh-accent);color:#fff;font:inherit;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.gh-home .gh-enquiry .form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:4px 0 0;padding-top:22px;border-top:1px solid var(--gh-ink-line)}
.gh-home .gh-enquiry .form__actions .btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:19px 30px;border:1px solid var(--gh-accent);border-radius:0;background:var(--gh-accent);color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.1;text-transform:uppercase;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}
.gh-home .gh-enquiry .form__actions .btn:hover{background:var(--gh-accent-deep);border-color:var(--gh-accent-deep);color:#fff;transform:none}
.gh-home .gh-enquiry .form__actions .small{flex:1 1 220px;max-width:44ch;margin:0;font-size:.82rem;color:var(--gh-ink-muted)}
.gh-home .gh-enquiry .note{margin:0 0 18px;padding:15px 18px;border-left:3px solid var(--gh-accent);border-radius:0;background:rgba(201,31,45,.14);color:var(--gh-ink-ink);font-size:.92rem}

/* ======================================================= 14 · small screens
   Nothing a wide screen carries is hidden at 390px: every band keeps its
   elements, the grids collapse to one column and the words stay. The gutter
   narrows and the vertical rhythm tightens through the two local metrics. */
@media(max-width:759px){
  .gh-home{--gh-pad:20px;--gh-band-y:clamp(56px,12vw,76px)}
  .gh-home .gh-band__head{margin-bottom:32px}
  .gh-home .gh-btn{padding:17px 22px}
  .gh-home .gh-range-card__body{padding:18px 18px 16px}
  .gh-home .gh-range-card__media .photo__meta,
  .gh-home .gh-visit__media .photo__meta,
  .gh-home .gh-photo__media .photo__meta{left:10px;top:10px}
  .gh-home .gh-enquiry__form{padding:20px 18px}
  .gh-home .gh-faq__summary{font-size:1rem}
}

/* ======================================================= 15 · reduced motion
   Every movement this file adds on hover is dropped; colour changes stay, so a
   hover still answers without moving anything. */
@media(prefers-reduced-motion:reduce){
  .gh-home .gh-btn,
  .gh-home .gh-btn__arrow,
  .gh-home .gh-link::after,
  .gh-home .gh-range-card,
  .gh-home .gh-range-card__link::after,
  .gh-home .gh-card,
  .gh-home .gh-card__title,
  .gh-home .gh-card--link,
  .gh-home .gh-card__cta::after,
  .gh-home .gh-faq__mark{transition:none}
  .gh-home .gh-btn:hover .gh-btn__arrow,
  .gh-home .gh-link:hover::after,
  .gh-home .gh-range-card:hover,
  .gh-home .gh-range-card:hover .gh-range-card__link::after,
  .gh-home .gh-card__cta:hover::after,
  .gh-home .gh-card--link:hover,
  .gh-home .gh-faq__item[open] .gh-faq__mark{transform:none}
}

/* ======================================================= 16 · industrial home refresh
   Extra cadence for the front-page revision: the hero reads as a dark technical
   stage, trust figures as a precision strip, and content bands alternate between
   restrained paper surfaces. No script is needed; native details stays native. */
/* The stage itself comes from --gh-hero-h (chrome.css), the one height the home,
   about and contact heroes share; this page only says how its own stage fills. */
.gh-home .gh-hero{min-height:var(--gh-hero-h);display:grid;align-items:end}
.gh-home .gh-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 72%);mask-image:linear-gradient(90deg,#000,transparent 72%)}
.gh-home .gh-hero .gh-h1{max-width:13ch;text-wrap:balance}
.gh-home .gh-hero .gh-lede{max-width:58ch}
.gh-home .gh-counters-band{border-bottom:1px solid var(--gh-line)}
.gh-home .gh-counter__num{color:var(--gh-ink)}
.gh-home .gh-range-card{min-height:420px}
.gh-home .gh-range-card__media,.gh-home .gh-range-card__media .photo{height:100%}
.gh-home .gh-range-card__body{padding-top:72px}
/* The cream and light bands are one flat value each, never a gradient: a band that
   changes tone along its own height is not the same value as the same band on the
   about or contact page. The ladder the three pages share: white #ffffff, light band
   #faf9f7 (--gh-light), cream band #f2efe9 (--gh-cream). */
.gh-home .gh-card,.gh-home .gh-row,.gh-home .gh-step{position:relative}
.gh-home .gh-card::before{content:"";display:block;width:28px;height:2px;margin:0 0 22px;background:var(--gh-accent)}
.gh-home .gh-card--link::before{transition:width .2s ease}
.gh-home .gh-card--link:hover::before{width:52px}
.gh-home .gh-band--ink .gh-card::before{background:var(--gh-accent)}
.gh-home .gh-table__row{isolation:isolate}
.gh-home .gh-flow__step{padding-right:12px}
.gh-home .gh-flow__dot{box-shadow:14px 0 0 rgba(201,31,45,.22)}
.gh-home .gh-enquiry{background:radial-gradient(circle at 82% 15%,#31323a 0,transparent 29%),var(--gh-ink)}
@media(max-width:759px){
  .gh-home .gh-range-card{min-height:390px}
}
@media(prefers-reduced-motion:reduce){
  .gh-home .gh-card--link::before,.gh-home .gh-table__row,.gh-home .gh-table__row::before{transition:none}
}

/* ======================================================= 17 · screenshot-calibrated opening
   Pixel rhythm for the supplied desktop reference: 1240px content column, a 760px
   hero stage below the 119px two-row chrome, then a 118px four-cell fact strip and
   a centered 3 × 2 product matrix. These rules intentionally sit last. */
@media(min-width:1100px){
  .gh-home{--gh-wrap:1240px;--gh-pad:0}
  .gh-home .gh-hero{min-height:var(--gh-hero-h);height:var(--gh-hero-h);align-items:stretch}
  .gh-home .gh-hero__inner{width:1240px;max-width:calc(100% - 56px);padding:137px 0 0;margin:0 auto}
  .gh-home .gh-hero .gh-eyebrow,.gh-home .gh-hero .gh-h1,.gh-home .gh-hero .gh-lede{max-width:850px}
  .gh-home .gh-hero .gh-h1{max-width:850px;font-size:clamp(4.75rem,6.2vw,5.4rem);line-height:.98;letter-spacing:-.055em}
  .gh-home .gh-hero .gh-lede{max-width:780px;margin-top:24px;font-size:1.08rem;line-height:1.55}
  .gh-home .gh-hero__lines{gap:8px 23px;margin-top:37px}
  .gh-home .gh-hero__actions{margin-top:18px;gap:12px}
  .gh-home .gh-hero .gh-btn{min-height:55px;padding:18px 25px}
  .gh-home .gh-hero__window{right:max(28px,calc((100% - 1240px) / 2));bottom:0;width:310px;min-height:130px;padding:28px 0 20px 34px;background:rgba(13,13,15,.94)}
  .gh-home .gh-hero__window::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gh-accent)}
  .gh-home .gh-counters-band{height:118px;padding:0}
  .gh-home .gh-counters-band .gh-band__inner{max-width:none;padding:0}
  .gh-home .gh-counters{max-width:none;grid-template-columns:repeat(4,1fr);height:118px}
  .gh-home .gh-counter{display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--gh-line);padding:0 max(28px,calc((100vw - 1240px) / 2));margin:0!important}
  .gh-home .gh-counter:first-child{border-left:0;padding-left:max(28px,calc((100vw - 1240px) / 2) + 28px)}
  .gh-home .gh-counter:last-child{padding-right:max(28px,calc((100vw - 1240px) / 2) + 28px)}
  .gh-home .gh-counter__num{font-size:2rem;letter-spacing:-.045em}
  .gh-home .gh-counter__label{margin-top:8px;font-size:10px}
  .gh-home .gh-range{padding:102px 0 112px}
  .gh-home .gh-range__head{max-width:790px;margin:0 auto 49px;text-align:center}
  .gh-home .gh-range__head .gh-eyebrow{justify-content:center;margin-bottom:22px}
  .gh-home .gh-range__head .gh-lede{margin-left:auto;margin-right:auto;max-width:650px}
  .gh-home .gh-range__grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .gh-home .gh-range-card{height:480px;min-height:480px;border:0}
  .gh-home .gh-range-card__body{padding:0 30px 27px;background:linear-gradient(to top,rgba(10,11,13,.97) 0%,rgba(10,11,13,.77) 42%,rgba(10,11,13,0) 76%)}
  .gh-home .gh-range-card__label{margin-bottom:13px;font-size:10px}
  .gh-home .gh-range-card__title{font-size:1.45rem;letter-spacing:-.03em}
  .gh-home .gh-range-card__text{font-size:.92rem;line-height:1.48}
  .gh-home .gh-range-card__link{margin-top:12px;font-size:10px}
  .gh-home .gh-range-card__media .photo__meta{display:none}
}
@media(min-width:760px) and (max-width:1099px){
  .gh-home .gh-hero__inner{padding-left:28px;padding-right:28px}
}

/* Integration note for the parent: this file has to be enqueued after style.css
   (functions.php is not ours to edit) — wp_enqueue_style('kinghome-home',
   $uri . '/assets/css/home.css', ['zeroy-site'], null) — and it assumes the page
   body is wrapped in .gh-home before get_footer(). The reveal motion is the
   site's own hook: html.gh-motion [data-motion="reveal"] in style.css. */

/* ======================================================= 18 · reference-page mid bands
   The market-positioning, documentation and resource treatments complete the
   reference page's alternating dark/light editorial rhythm. */
.gh-home .gh-positioning{background:var(--gh-ink);color:var(--gh-ink-ink)}
.gh-home .gh-positioning__head{max-width:790px;margin-left:auto;margin-right:auto;text-align:center}
.gh-home .gh-positioning__head .gh-eyebrow{justify-content:center}
.gh-home .gh-positioning__head .gh-lede{margin-left:auto;margin-right:auto;color:var(--gh-ink-muted)}
.gh-home .gh-positioning__grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--gh-ink-line);border-left:1px solid var(--gh-ink-line)}
.gh-home .gh-positioning__card{position:relative;min-height:240px;padding:30px;border-right:1px solid var(--gh-ink-line);border-bottom:1px solid var(--gh-ink-line);background:var(--gh-ink);transition:background .2s ease}
.gh-home .gh-positioning__card:hover{background:var(--gh-ink-2)}
.gh-home .gh-positioning__icon{display:grid;place-items:center;width:48px;height:48px;margin:0 0 26px;border:1px solid rgba(255,255,255,.18);color:var(--gh-accent);transition:border-color .2s ease,background .2s ease}
.gh-home .gh-positioning__icon svg{display:block;width:24px;height:24px}
.gh-home .gh-positioning__card:hover .gh-positioning__icon{border-color:var(--gh-accent);background:rgba(201,31,45,.1)}
.gh-home .gh-positioning__card h3{margin:0;font-size:1.15rem;line-height:1.28;color:#fff}
.gh-home .gh-positioning__card p{margin:10px 0 0;font-size:.94rem;line-height:1.62;color:var(--gh-ink-muted)}
.gh-home .gh-positioning__card .gh-link{min-height:34px;margin-top:11px;color:#fff;font-size:10px}
.gh-home .gh-positioning__callout{display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin-top:32px;padding:26px 0 0;border-top:1px solid var(--gh-ink-line)}
.gh-home .gh-positioning__callout p{max-width:70ch;margin:0;font-size:1rem;line-height:1.62;color:var(--gh-ink-muted)}
.gh-home .gh-positioning__callout strong{color:#fff}
.gh-home .gh-docs__note{margin:24px 0 0;padding:16px 18px;border-left:2px solid var(--gh-accent);background:rgba(201,31,45,.09);font-size:.92rem;line-height:1.62;color:var(--gh-muted)}
.gh-home .gh-doc-card::before{display:none}
.gh-home .gh-doc-card__icon{display:grid;place-items:center;width:44px;height:44px;margin:0 0 22px;border:1px solid var(--gh-line-strong);color:var(--gh-accent);font-size:1.35rem;line-height:1}
.gh-home .gh-resource{padding:0 0 28px;overflow:hidden}
.gh-home .gh-resource::before{display:none}
.gh-home .gh-resource__visual{display:grid;place-items:center;min-height:154px;margin:0 0 25px;background:linear-gradient(135deg,#21242c,#383c43);color:#fff;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.gh-home .gh-resource .gh-card__label,.gh-home .gh-resource .gh-card__title,.gh-home .gh-resource .gh-card__text,.gh-home .gh-resource .gh-card__cta{margin-left:28px;margin-right:28px}
.gh-home .gh-resource .gh-card__text{margin-top:10px}
.gh-home .gh-resource .gh-card__cta{margin-top:auto;padding-top:18px}
@media(min-width:700px){.gh-home .gh-positioning__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.gh-home .gh-positioning__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gh-home .gh-positioning__callout{flex-direction:row;align-items:center;justify-content:space-between;gap:44px}.gh-home .gh-positioning__callout .gh-btn{flex:0 0 auto}}
@media(max-width:759px){.gh-home .gh-positioning__card{min-height:0;padding:25px 20px}.gh-home .gh-resource .gh-card__label,.gh-home .gh-resource .gh-card__title,.gh-home .gh-resource .gh-card__text,.gh-home .gh-resource .gh-card__cta{margin-left:20px;margin-right:20px}}

.gh-home .gh-meet__head{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
.gh-home .gh-meet__head .gh-eyebrow{justify-content:center}
.gh-home .gh-meet__head .gh-lede{margin-left:auto;margin-right:auto}
.gh-home .gh-meet{display:grid;grid-template-columns:1fr;gap:18px}
.gh-home .gh-meet__card{min-height:250px;padding:30px;border:1px solid var(--gh-line);background:var(--gh-light);transition:border-color .2s ease,transform .2s ease}
.gh-home .gh-meet__card:hover{border-color:var(--gh-accent);transform:translateY(-3px)}
.gh-home .gh-meet__label{margin:0 0 50px;color:var(--gh-accent);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.gh-home .gh-meet__card h3{margin:0;font-size:1.35rem;line-height:1.25}
.gh-home .gh-meet__card > p:last-child{margin:12px 0 0;color:var(--gh-muted);font-size:.95rem;line-height:1.62}
@media(min-width:700px){.gh-home .gh-meet{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ======================================================= 19 · factory counter strip
   The first two bands state what the factory is rather than what a product does:
   each counter cell now carries the number with its unit, a solid uppercase label
   in ink (not the accent, so the row reads as evidence rather than as a link) and
   one muted line under it. The cells size to their own line, so the strip is a
   minimum height rather than the fixed 118px the number-only strip used. */
.gh-home .gh-counters--factory .gh-counter{justify-content:flex-start;gap:0}
.gh-home .gh-counters--factory .gh-counter__num{font-size:clamp(1.9rem,3.4vw,2.9rem)}
.gh-home .gh-counters--factory .gh-counter__label{margin-top:14px;color:var(--gh-ink);font-size:12px;letter-spacing:.12em}
.gh-home .gh-counters--factory .gh-counter__body{margin:10px 0 0;max-width:36ch;font-size:.9rem;line-height:1.58;color:var(--gh-muted)}
@media(min-width:1100px){
  .gh-home .gh-counters-band{height:auto;padding:clamp(34px,3.6vw,52px) 0}
  .gh-home .gh-counters--factory{height:auto;min-height:158px}
  .gh-home .gh-counters--factory .gh-counter{padding-top:0;padding-bottom:0}
}
@media(max-width:1099px){
  .gh-home .gh-counters--factory .gh-counter__body{max-width:none}
}/* ======================================================= 20 · counter strip — label-led rhythm
   Reference tie-out: the strip reads label-first, with one short three-line line of
   grey text under it, and the columns pulled apart by a real gutter so the hairlines
   sit in the middle of the space rather than against the next cell's text. The number
   steps back to a supporting size so the uppercase label carries the row. Gutters are a
   grid column-gap and each group draws its own hairline on its right-hand side, centred
   in the gutter, so every column keeps identical leading space and the text never
   touches a divider. The cells stretch to the row height instead of sizing to their own
   copy, which keeps the three internal hairlines exactly the same length even though the
   descriptions run to a different number of lines. */
.gh-home .gh-counters--factory{align-items:stretch;row-gap:32px}
.gh-home .gh-counters--factory .gh-counter{border:0;border-top:1px solid var(--gh-line);padding:22px 0 0}
.gh-home .gh-counters--factory .gh-counter:first-child{border-top:0;padding-top:0}
.gh-home .gh-counters--factory .gh-counter__num{font-size:clamp(1.5rem,2.1vw,2.05rem);letter-spacing:-.03em;color:var(--gh-accent)}
.gh-home .gh-counters--factory .gh-counter__unit{margin-left:2px;font-size:1em;font-weight:800;letter-spacing:0;color:var(--gh-accent)}
.gh-home .gh-counters--factory .gh-counter__label{margin:12px 0 0;color:var(--gh-ink);font-size:1rem;font-weight:800;letter-spacing:.06em;line-height:1.26}
.gh-home .gh-counters--factory .gh-counter__body{margin:12px 0 0;max-width:31ch;font-size:.94rem;line-height:1.68;color:var(--gh-muted)}
@media(min-width:640px){
  .gh-home .gh-counters--factory{column-gap:clamp(26px,3.2vw,52px);row-gap:34px}
  .gh-home .gh-counters--factory .gh-counter,
  .gh-home .gh-counters--factory .gh-counter:nth-child(odd),
  .gh-home .gh-counters--factory .gh-counter:nth-child(even),
  .gh-home .gh-counters--factory .gh-counter:nth-child(n+3){border:0;padding:0;margin-top:0;position:relative}
  .gh-home .gh-counters--factory .gh-counter__body{max-width:34ch}
  /* the hairlines are the three internal ones only: each group draws its own rule on
     its right-hand side, and the closing group keeps none, so the strip does not end
     on a line. In the wrapped two-column view only the left column carries a rule. */
  .gh-home .gh-counters--factory .gh-counter:nth-child(odd)::after,
  .gh-home .gh-counters--factory .gh-counter:nth-child(n+3)::before{content:"";position:absolute;background:var(--gh-line);pointer-events:none}
  .gh-home .gh-counters--factory .gh-counter:nth-child(odd)::after{left:calc(100% + clamp(26px,3.2vw,52px) / 2);top:0;bottom:0;width:1px}
  /* while the cells wrap into two columns, the rule between the two rows runs
     horizontally under the upper group */
  .gh-home .gh-counters--factory .gh-counter:nth-child(n+3)::before{left:0;right:0;top:calc(-1 * 34px / 2);height:1px}
}
@media(min-width:1100px){
  /* the strip stays full-bleed here, so the outer gutters come from the band wrap
     rather than from each cell; without this the first and last cells would sit
     flush against the viewport edge. */
  .gh-home .gh-counters-band .gh-band__inner{max-width:none;padding:0 clamp(28px,4vw,64px)}
  .gh-home .gh-counters--factory{height:auto;min-height:0;align-items:stretch}
}
@media(min-width:1040px){
  /* four across: the row rule is not used, and the second group joins the other two
     internal rules, so cells 1-3 are divided and the strip still ends on whitespace */
  .gh-home .gh-counters--factory .gh-counter:nth-child(n+3)::before{display:none}
  .gh-home .gh-counters--factory .gh-counter:nth-child(2)::after{content:"";position:absolute;left:calc(100% + clamp(26px,3.2vw,52px) / 2);top:0;bottom:0;width:1px;background:var(--gh-line);pointer-events:none}
  .gh-home .gh-counters--factory .gh-counter + .gh-counter{position:relative}
}/* ======================================================= 21 · procurement control head + number chips
   This band was the page's one narrow left-aligned head; it now shares the centred
   head treatment, and its 01–06 markers are pale accent chips instead of a hairline
   over a bare numeral. Scoped to .gh-control so the other card bands keep their
   own number and rule treatment. */
.gh-home .gh-control__head{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
.gh-home .gh-control__head .gh-eyebrow{justify-content:center}
.gh-home .gh-control__head .gh-lede{margin-left:auto;margin-right:auto}
.gh-home .gh-control .gh-card::before{display:none}
.gh-home .gh-control .gh-card__num{display:grid;place-items:center;width:52px;height:44px;margin:0 0 30px;background:#f8e2da;color:var(--gh-accent-deep);font-size:12px;font-weight:800;letter-spacing:.07em}
@media(max-width:639px){.gh-home .gh-control .gh-card__num{width:46px;height:40px;margin-bottom:24px}}/* ======================================================= 22 · OEM & ODM — 40/60 split, bordered option cards
   The band's aside carries the argument and the option list carries the detail, so
   the columns are weighted 40/60 instead of the shared near-even split. Each option
   is now a bordered card: the number leads its own line, the title and description
   are separated by a fixed gap, and grid stretch keeps the two cards of a row equal
   in height. Both columns start on the same top line, so the two text blocks read
   flush top and bottom. Scoped to .gh-split--oem / .gh-rows--cards so the other
   split bands (9, 12, 14) and the plain .gh-rows lists keep their own treatment. */
@media(min-width:1040px){
  .gh-home .gh-split--oem{grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:clamp(40px,4.6vw,72px)}
}
.gh-home .gh-split--oem .gh-split__aside,
.gh-home .gh-split--oem .gh-split__main{align-self:start}
.gh-home .gh-rows--cards{column-gap:clamp(20px,2.4vw,28px);row-gap:clamp(16px,1.8vw,22px)}
.gh-home .gh-rows--cards .gh-row{display:block;padding:clamp(20px,2.2vw,26px);border:1px solid var(--gh-line);background:var(--gh-white)}
.gh-home .gh-rows--cards .gh-row:hover{border-color:var(--gh-line-strong)}
.gh-home .gh-rows--cards .gh-row__num{margin:0 0 clamp(18px,2vw,26px)}
.gh-home .gh-rows--cards .gh-row__title{margin:0;font-size:1.02rem}
.gh-home .gh-rows--cards .gh-row__text{margin:12px 0 0}
@media(max-width:699px){
  .gh-home .gh-rows--cards{row-gap:14px}
  .gh-home .gh-rows--cards .gh-row{padding:18px 18px 20px}
}/* ======================================================= 23 · QUALITY CHECKPOINTS band
   This band now sits on ink: it follows the white execution band, and two light
   bands in a row left too much empty white between them, so the checkpoint list is
   the page's second dark block. The head is a centred column (eyebrow, headline,
   lede) like the procurement head above it, and the list is re-toned for dark: the
   ordinal becomes a pale white, the label white, the description a muted white.
   The hover colour block (−16px bleed each side) is the one already defined in
   region 16, re-toned here to lift rather than darken. */
.gh-home .gh-band__head--center{max-width:790px;margin-left:auto;margin-right:auto;text-align:center}
.gh-home .gh-band__head--center .gh-eyebrow{justify-content:center;margin-bottom:22px}
.gh-home .gh-band__head--center .gh-lede{margin-left:auto;margin-right:auto;max-width:650px}
.gh-home .gh-band--ink .gh-table{border-top-color:var(--gh-ink-line)}
.gh-home .gh-band--ink .gh-table__row{border-bottom-color:var(--gh-ink-line)}
.gh-home .gh-band--ink .gh-table__num{color:rgba(255,255,255,.32)}
.gh-home .gh-band--ink .gh-table__label{color:#fff}
.gh-home .gh-band--ink .gh-table__text{color:var(--gh-ink-muted)}

/* ======================================================= 24 · checkpoint-row hover
   The row must be its own positioning context (@see position:relative below — without
   it the sweep and the edge bar anchor to the whole band instead of the hovered row).
   Selected state: a soft light wash sweeping in from the left inside the row, a
   vermilion edge bar opening vertically, the ordinal 01–06 taking the accent and
   lifting slightly, the label and description stepping 10px right and brightening,
   and the row's own hairline warming to the accent. Opacity/transform only, so the
   row never changes height or moves its neighbours. */
.gh-home .gh-table__row{position:relative;isolation:isolate;transition:border-bottom-color .3s ease}
.gh-home .gh-table__row::before{content:"";position:absolute;inset:0 -16px;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.055) 58%,rgba(255,255,255,0));opacity:0;transform:translate3d(-1.8rem,0,0);transition:opacity .3s ease,transform .48s cubic-bezier(.19,.74,.28,.99)}
.gh-home .gh-table__row::after{content:"";position:absolute;left:-16px;top:0;bottom:0;width:2px;z-index:-1;background:var(--gh-accent);transform:scaleY(0);transition:transform .4s cubic-bezier(.19,.74,.28,.99)}
.gh-home .gh-table__row:hover::before,
.gh-home .gh-table__row:focus-within::before{opacity:1;transform:none}
.gh-home .gh-table__row:hover::after,
.gh-home .gh-table__row:focus-within::after{transform:scaleY(1)}
.gh-home .gh-table__num,
.gh-home .gh-table__label,
.gh-home .gh-table__text{transition:transform .42s cubic-bezier(.19,.74,.28,.99),color .28s ease}
.gh-home .gh-table__row:hover,
.gh-home .gh-table__row:focus-within{border-bottom-color:rgba(201,31,45,.5)}
.gh-home .gh-table__row:hover .gh-table__num,
.gh-home .gh-table__row:focus-within .gh-table__num{color:var(--gh-accent);transform:translate3d(0,-2px,0) scale(1.06)}
.gh-home .gh-table__row:hover .gh-table__label,
.gh-home .gh-table__row:focus-within .gh-table__label,
.gh-home .gh-table__row:hover .gh-table__text,
.gh-home .gh-table__row:focus-within .gh-table__text{transform:translate3d(10px,0,0)}
.gh-home .gh-table__row:hover .gh-table__text,
.gh-home .gh-table__row:focus-within .gh-table__text{color:rgba(255,255,255,.86)}

/* ======================================================= 25 · OEM option boxes — vermilion hover (lighter)
   The eight bordered option boxes answer in the accent itself, kept light so the
   band stays calm: a pale vermilion wash instead of a solid fill, the vermilion
   frame, the ordinal reading in the accent and the type staying dark, with a 3px
   lift and a soft shadow. */
.gh-home .gh-rows--cards .gh-row{transition:background-color .28s ease,border-color .28s ease,transform .28s ease,box-shadow .28s ease}
.gh-home .gh-rows--cards .gh-row:hover,
.gh-home .gh-rows--cards .gh-row:focus-within{background-color:rgba(201,31,45,.1);border-color:var(--gh-accent);transform:translate3d(0,-3px,0);box-shadow:0 12px 26px rgba(13,13,15,.08)}
.gh-home .gh-rows--cards .gh-row:hover .gh-row__num,
.gh-home .gh-rows--cards .gh-row:focus-within .gh-row__num{color:var(--gh-accent-deep)}

@media(prefers-reduced-motion:reduce){
  .gh-home .gh-table__row::before,.gh-home .gh-table__row::after,
  .gh-home .gh-table__num,.gh-home .gh-table__label,.gh-home .gh-table__text,
  .gh-home .gh-rows--cards .gh-row,.gh-home .gh-rows--cards .gh-row__num,
  .gh-home .gh-rows--cards .gh-row__title,.gh-home .gh-rows--cards .gh-row__text{transition:none}
  .gh-home .gh-table__row:hover .gh-table__num,
  .gh-home .gh-table__row:hover .gh-table__label,
  .gh-home .gh-table__row:hover .gh-table__text,
  .gh-home .gh-rows--cards .gh-row:hover{transform:none}
}/* ======================================================= 26 · controlled-execution frame — equal-height photo
   The left photograph has to be exactly as tall as the right column of six steps, so
   the picture is no longer locked to a 3:2 ratio here: the row stretches, the figure
   fills the media box (absolutely positioned, so it matches the flex-resolved height
   without percentage chains), and the 1200 × 800 placeholder keeps standing in until
   a real photograph is attached. A minimum keeps the picture from collapsing when the
   right column is short; the caption chip stays pinned to the picture's top-left. */
@media(min-width:900px){
  .gh-home .gh-split--photo{align-items:stretch}
  .gh-home .gh-split--photo .gh-photo{display:flex;flex-direction:column;align-self:stretch;height:100%}
  .gh-home .gh-split--photo .gh-photo__media{position:relative;flex:1 1 auto;min-height:340px}
  .gh-home .gh-split--photo .gh-photo__media .photo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .gh-home .gh-split--photo .gh-photo__media .photo__img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  /* While the slot still holds the labelled placeholder, the placehold.co picture is
     shown whole (object-fit:contain) on the placeholder's own light tone, so the size
     and the brief stay readable at any box height; a real photograph is cropped to
     fill the box instead. */
  .gh-home .gh-split--photo .gh-photo__media .photo:has(.photo__meta){background:#f2f6f8}
  .gh-home .gh-split--photo .gh-photo__media .photo:has(.photo__meta) .photo__img{object-fit:contain}
  .gh-home .gh-split--photo .gh-photo__bar{flex:0 0 auto}
}/* ======================================================= 27 · documentation support — 40/60 split and drawn icons
   The band carries a 40 / 60 split so the heading column reads as a caption beside the
   four cards, and each card's icon is now a line drawing matched to its own subject
   (declaration sheets, a dimensioned drawing, a ticked inspection clipboard, a packing
   list leaving the works) sitting in a pale-rose stamp box in the page's existing
   accent family. Scoped to .gh-split--docs / .gh-doc-card so no other band moves. */
@media(min-width:900px){
  .gh-home .gh-split--docs{grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:clamp(40px,4.6vw,72px)}
}
.gh-home .gh-doc-card__icon{width:48px;height:48px;margin:0 0 24px;border:1px solid rgba(201,31,45,.22);background:#fdeee9;color:var(--gh-accent);transition:border-color .2s ease,background .2s ease}
.gh-home .gh-doc-card__icon svg{display:block;width:22px;height:22px}
.gh-home .gh-doc-card:hover{border-color:rgba(201,31,45,.32)}
.gh-home .gh-doc-card:hover .gh-doc-card__icon{border-color:var(--gh-accent);background:#fbe3da}/* ---------------------------------------------------------------- 28 · meet the supply base
   The band is ink-black and each of the three cards is a photograph position:
   the picture fills the card and the label, title and paragraph sit on a bottom
   scrim. Until an upload arrives, the slot prints its labelled placehold.co
   placeholder — size and brief in the top-left corner — so the three pictures
   can be replaced one by one without a theme change. */
.gh-home .gh-meet-band .gh-meet__head .gh-eyebrow{color:var(--gh-accent)}
.gh-home .gh-meet--photo{gap:22px}
.gh-home .gh-meet--photo .gh-meet__card{position:relative;min-height:0;padding:0;border:0;background:var(--gh-ink-2);overflow:hidden}
.gh-home .gh-meet--photo .gh-meet__card:hover{border-color:transparent;transform:none}
.gh-home .gh-meet__media{height:100%}
.gh-home .gh-meet__media .photo{margin:0;height:100%;aspect-ratio:4/3;border:0;border-radius:0;background:var(--gh-ink-2)}
.gh-home .gh-meet__media .photo__img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0;border-radius:0}
.gh-home .gh-meet__media .photo__meta{position:absolute;left:14px;top:14px;right:14px;z-index:3;flex-direction:column;gap:3px;margin:0;padding:7px 10px;background:rgba(13,13,15,.72);color:var(--gh-ink-muted);font-size:11px;line-height:1.35;text-align:left}
.gh-home .gh-meet__media .photo__meta .mono{font-size:10px;letter-spacing:.06em;color:#fff}
.gh-home .gh-meet__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:64px 24px 26px;background:linear-gradient(to top,rgba(5,5,6,.92) 0%,rgba(5,5,6,.74) 44%,rgba(5,5,6,0) 100%)}
.gh-home .gh-meet--photo .gh-meet__label{margin:0 0 12px;color:var(--gh-accent);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.gh-home .gh-meet__body h3{margin:0;color:#fff;font-size:1.3rem;line-height:1.25}
.gh-home .gh-meet__body p:last-child{margin:11px 0 0;color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.6}
@media(min-width:700px) and (max-width:899px){.gh-home .gh-meet--photo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.gh-home .gh-meet--photo{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:699px){.gh-home .gh-meet__media .photo__meta{left:10px;top:10px;right:10px}.gh-home .gh-meet__body{padding:56px 18px 20px}}/* ---------------------------------------------------------------- 29 · buyer questions
   The band's own 40 / 60 split: the heading column reads as a caption beside the
   accordion, and the gap matches the other editorial splits on the page. Scoped to
   .gh-split--faq, so the generic .gh-split default (0.92 / 1.08) still governs the
   other bands. */
@media(min-width:900px){
  .gh-home .gh-split--faq{grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:clamp(40px,4.6vw,72px)}
  .gh-home .gh-split--faq .gh-split__aside,
  .gh-home .gh-split--faq .gh-split__main{align-self:start}
}/* ---------------------------------------------------------------- 30 · counter strip grid line
   The strip states the factory above the range, so its four cells line up with the
   first-screen column rather than with the viewport: at 1100px and up the band inner
   mirrors .gh-hero__inner exactly (a 1240px column with a 28px side margin), which
   puts the first cell's number on the same left edge as the hero headline and the
   last cell's text on the same right edge as the hero copy. The gutters stay the
   grid's own column-gap and each hairline is drawn centred in a gutter, so the four
   columns keep identical leading space and no text ever sits against a divider. */
@media(min-width:1100px){
  .gh-home .gh-counters-band .gh-band__inner{width:1240px;max-width:calc(100% - 56px);margin:0 auto;padding:0}
}/* ---------------------------------------------------------------- 31 · enquiry band, two-panel layout
   The closing band is the reference page's composition rather than a dark band
   with a card in it: an ink panel (40%) carrying the eyebrow, headline, paragraph
   and the four points, flush against a light panel (60%) carrying the short form,
   the two filling the band's height inside the page's own column. Everything is
   scoped to .gh-enquiry, so the same form on /request-a-quote/ keeps its look, and
   the field rules below reach only the compact variant (.form--compact). */
.gh-home .gh-enquiry{padding:0;background:var(--gh-white);color:var(--gh-ink-text)}
.gh-home .gh-enquiry__inner{padding:0}
.gh-home .gh-enquiry__split{display:grid;grid-template-columns:minmax(0,1fr)}
.gh-home .gh-enquiry__aside{max-width:none;padding:clamp(38px,5vw,92px) clamp(24px,4vw,64px);background:var(--gh-ink);color:var(--gh-ink-ink);position:relative;overflow:hidden;isolation:isolate}
/* The panel's photograph: a cover image under an ink scrim, so the white copy
   keeps its contrast while the panel separates itself from the ink footer below.
   The placeholder states the 1200 × 1400 crop an upload has to fill. */
.gh-home .gh-enquiry__bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.gh-home .gh-enquiry__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,15,.72),rgba(13,13,15,.88))}
.gh-home .gh-enquiry__head,.gh-home .gh-enquiry__list{position:relative;z-index:1}
.gh-home .gh-enquiry__head .gh-h2{font-size:clamp(2.1rem,4.5vw,3.9rem);line-height:1.03}
.gh-home .gh-enquiry__head .gh-lede{max-width:44ch;color:var(--gh-ink-muted)}
.gh-home .gh-enquiry__list{margin:clamp(38px,5vw,86px) 0 0;padding:0;list-style:none}
.gh-home .gh-enquiry__item{display:flex;gap:18px;align-items:flex-start;padding:19px 0;border-top:1px solid var(--gh-ink-line);font-size:.98rem;line-height:1.55;color:var(--gh-ink-ink)}
.gh-home .gh-enquiry__item:last-child{border-bottom:1px solid var(--gh-ink-line)}
.gh-home .gh-enquiry__arrow{flex:0 0 auto;color:var(--gh-accent);line-height:1.5}
.gh-home .gh-enquiry__form{padding:clamp(32px,4.6vw,92px) clamp(22px,4vw,72px);border:0;background:var(--gh-light)}/* the short form: underlined fields on two columns, label above the line, the one
   accent on the submit button. Nothing here is a bordered box, so the panel reads
   as a document rather than a card. */
.gh-home .gh-enquiry .form--compact{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,2.8vw,34px) clamp(24px,3vw,44px);margin:0}
.gh-home .gh-enquiry .form--compact .field{gap:10px}
.gh-home .gh-enquiry .form--compact .field__label{font-size:11px;letter-spacing:.14em;color:var(--gh-ink-text)}
.gh-home .gh-enquiry .form--compact .field input,
.gh-home .gh-enquiry .form--compact .field select,
.gh-home .gh-enquiry .form--compact .field textarea{width:100%;padding:8px 0 12px;border:0;border-bottom:1px solid rgba(13,13,15,.26);border-radius:0;background-color:transparent;color:var(--gh-ink-text);font-size:1.02rem;transition:border-color .18s ease}
.gh-home .gh-enquiry .form--compact .field textarea{min-height:96px;padding-top:4px;resize:vertical}
/* The attachment is the one control in this panel that is not a line of text on a
   rule: a dashed frame carries it and the button inside it is the accent. The hint
   under it is re-toned here, because region 13's on-ink muted tone is invisible on
   this light panel. */
.gh-home .gh-enquiry .form--compact .field input[type="file"]{padding:12px 14px;border:1px dashed rgba(13,13,15,.32);background-color:transparent;color:var(--gh-ink-text);font-size:.92rem;cursor:pointer}
.gh-home .gh-enquiry .form--compact .field input[type="file"]:hover{border-color:var(--gh-accent)}
.gh-home .gh-enquiry .form--compact .field input[type="file"]::file-selector-button{margin-right:14px;padding:9px 14px;border:0;border-radius:0;background:var(--gh-accent);color:#fff;font:inherit;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.gh-home .gh-enquiry .form--compact .field input[type="file"]::file-selector-button:hover{background:var(--gh-accent-deep)}
.gh-home .gh-enquiry .form--compact .field__hint{color:var(--gh-muted);font-size:.82rem}
.gh-home .gh-enquiry .form--compact .field input::placeholder,
.gh-home .gh-enquiry .form--compact .field textarea::placeholder{color:rgba(13,13,15,.4)}
.gh-home .gh-enquiry .form--compact .field input:hover,
.gh-home .gh-enquiry .form--compact .field select:hover,
.gh-home .gh-enquiry .form--compact .field textarea:hover{border-bottom-color:rgba(13,13,15,.5)}
.gh-home .gh-enquiry .form--compact .field input:focus,
.gh-home .gh-enquiry .form--compact .field select:focus,
.gh-home .gh-enquiry .form--compact .field textarea:focus{border-bottom-color:var(--gh-accent);box-shadow:none;outline:none}
.gh-home .gh-enquiry .form--compact .field select{appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,rgba(13,13,15,.6) 50%),linear-gradient(135deg,rgba(13,13,15,.6) 50%,transparent 50%);background-position:calc(100% - 15px) 18px,calc(100% - 9px) 18px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;cursor:pointer}
.gh-home .gh-enquiry .form--compact .field--check{grid-column:1 / -1;min-height:0;padding:0;column-gap:12px}
.gh-home .gh-enquiry .form--compact .field--check input{width:17px;height:17px;border-color:rgba(13,13,15,.4);accent-color:var(--gh-accent)}
.gh-home .gh-enquiry .form--compact .field--check .field__label{font-size:.88rem;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.5;color:var(--gh-muted)}
.gh-home .gh-enquiry .form--compact .field__req{color:var(--gh-accent)}
.gh-home .gh-enquiry .form--compact .field__error{font-size:.82rem;color:var(--gh-accent)}
.gh-home .gh-enquiry .form--compact .field--invalid input,
.gh-home .gh-enquiry .form--compact .field--invalid textarea{border-bottom-color:var(--gh-accent)}
.gh-home .gh-enquiry .form--compact .form__actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin:clamp(8px,1.6vw,20px) 0 0;padding-top:0;border-top:0}
.gh-home .gh-enquiry .form--compact .form__actions .btn{display:inline-flex;align-items:center;gap:14px;min-height:64px;padding:22px 34px;border:1px solid var(--gh-accent);border-radius:0;background:var(--gh-accent);color:#fff;font-size:13px;font-weight:700;letter-spacing:.1em;line-height:1.1;text-transform:uppercase;cursor:pointer;transition:background .18s ease,border-color .18s ease}
.gh-home .gh-enquiry .form--compact .form__actions .btn:hover{background:var(--gh-accent-deep);border-color:var(--gh-accent-deep);color:#fff;transform:none}
.gh-home .gh-enquiry .form--compact .btn__arrow{font-size:1.05em;line-height:1;transition:transform .18s ease}
.gh-home .gh-enquiry .form--compact .form__actions .btn:hover .btn__arrow{transform:translateX(3px)}
.gh-home .gh-enquiry .form--compact .form__actions .small{flex:1 1 240px;max-width:34ch;margin:0;font-size:.86rem;color:var(--gh-muted)}
.gh-home .gh-enquiry .form--compact .note{margin:0 0 20px;padding:14px 18px;border-left:3px solid var(--gh-accent);background:rgba(201,31,45,.1);color:var(--gh-ink-text);font-size:.9rem}
/* the fields pair up as soon as there is room for two of them (640px), so the
   panel reads as a two-column document on a laptop or a tablet: name beside
   company, business email beside country / market, business type beside product
   interest, with the requirement and the attachment each across the full width.
   Each pair states its own row, so the columns hold together even if the field
   table is reordered; the panels themselves only sit side by side from 900px,
   where the form panel is wide enough for two fields to keep their own leading. */
@media(min-width:640px){
  .gh-home .gh-enquiry .form--compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gh-home .gh-enquiry .form--compact > .field:has(#gh-inquirer-name){grid-column:1;grid-row:1}
  .gh-home .gh-enquiry .form--compact > .field:has(#gh-company-name){grid-column:2;grid-row:1}
  .gh-home .gh-enquiry .form--compact > .field:has(#gh-inquirer-email){grid-column:1;grid-row:2}
  .gh-home .gh-enquiry .form--compact > .field:has(#gh-country){grid-column:2;grid-row:2}
  .gh-home .gh-enquiry .form--compact > .field:has(#gh-customer-type){grid-column:1;grid-row:3}
  .gh-home .gh-enquiry .form--compact > .field:has(#gh-product-category){grid-column:2;grid-row:3}
  .gh-home .gh-enquiry .form--compact > .field:has(#gh-inquiry-message){grid-column:1 / -1;grid-row:4}
  .gh-home .gh-enquiry .form--compact > .field:has(#gh-attachment-file){grid-column:1 / -1;grid-row:5}
  .gh-home .gh-enquiry .form--compact > .form__actions{grid-column:1 / -1;grid-row:6}
}
@media(min-width:900px){
  /* 40 / 60: the ink panel carries the words and the form panel carries the
     fields, which are the half that needs the room. */
  .gh-home .gh-enquiry__split{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
}
@media(max-width:639px){
  /* The compact form carries its two-column rule on the element itself (see
     inc/inquiry-form.php), so a phone has to override an inline declaration to
     get one column — only !important does that. Inline styles never beat
     !important, which is why this one rule carries it. */
  .gh-home .gh-enquiry .form--compact{grid-template-columns:minmax(0,1fr) !important}
  .gh-home .gh-enquiry__aside{padding:clamp(34px,9vw,52px) var(--gh-pad)}
  .gh-home .gh-enquiry__form{padding:clamp(30px,8vw,44px) var(--gh-pad)}
}
@media(prefers-reduced-motion:reduce){
  .gh-home .gh-enquiry .form--compact .btn__arrow{transition:none}
  .gh-home .gh-enquiry .form--compact .form__actions .btn:hover .btn__arrow{transform:none}
}

/* ======================================================= 32 · motion for the five card bands
   COMPLETE PRODUCT RANGE, BUILT AROUND YOUR MARKET, PROCUREMENT CONTROL, OEM & ODM
   CAPABILITIES and DOCUMENTATION SUPPORT now read as one choreography instead of five
   separate fades. The hook is still the site's own (assets/js/motion.js: data-motion
   ="reveal" on an item, data-motion="group" on the list that staggers it, --i written
   per item), so nothing here moves when the script is missing or the visitor asked for
   less motion — the global rule in style.css keeps its say on every other band.

   One rhythm runs through all five: 24–28px of travel over a little under two thirds of
   a second, 90ms between two items, and an ease that settles rather than stops. Each
   band then adds the detail its own subject asks for — the photograph settling inside the
   range cards, the accent rule drawing over the market grid, the number box dropping
   into the procurement cards, the four ticks of the OEM aside drawing one after the
   other, and the icon stamps landing a beat after their documentation cards.
   --------------------------------------------------------------------------------- */
.gh-home{--gh-motion-ease:cubic-bezier(.22,.61,.36,1);--gh-motion-step:90ms}

/* The head of each band arrives in beats: the eyebrow first with its rule drawing from
   the left, then the headline, then the lede. An ink aside hands over to its own list
   or note rather than moving as one block. */
html.gh-motion .gh-beat[data-motion="reveal"]{opacity:1;translate:none;transition:none}
html.gh-motion .gh-beat[data-motion="reveal"]:not(.is-in) .gh-eyebrow,
html.gh-motion .gh-beat[data-motion="reveal"]:not(.is-in) .gh-h2,
html.gh-motion .gh-beat[data-motion="reveal"]:not(.is-in) .gh-lede,
html.gh-motion .gh-beat[data-motion="reveal"]:not(.is-in) .gh-docs__note,
html.gh-motion .gh-beat[data-motion="reveal"]:not(.is-in) .gh-checks{opacity:0;translate:0 14px}
html.gh-motion .gh-beat[data-motion="reveal"]:not(.is-in) .gh-eyebrow::before{transform:scaleX(0)}
html.gh-motion .gh-beat[data-motion="reveal"]:not(.is-in) .gh-check__mark{opacity:0;scale:.5}
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-eyebrow,
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-h2,
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-lede,
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-docs__note,
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-checks{opacity:1;translate:none;transition:opacity .5s var(--gh-motion-ease),translate .62s var(--gh-motion-ease)}
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-eyebrow::before{transform:scaleX(1);transition:transform .6s var(--gh-motion-ease) .1s}
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-h2{transition-delay:.1s}
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-lede{transition-delay:.19s}
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-docs__note,
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-checks{transition-delay:.28s}
/* the four answered points are ticked off one after the other as the list lands */
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-check__mark{opacity:1;scale:1;transition:opacity .3s ease,scale .5s var(--gh-motion-ease)}
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-check:nth-child(1) .gh-check__mark{transition-delay:.34s,.34s}
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-check:nth-child(2) .gh-check__mark{transition-delay:.4s,.4s}
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-check:nth-child(3) .gh-check__mark{transition-delay:.46s,.46s}
html.gh-motion .gh-beat[data-motion="reveal"].is-in .gh-check:nth-child(4) .gh-check__mark{transition-delay:.52s,.52s}

/* COMPLETE PRODUCT RANGE — the card lands, the photograph settles inside it, and the
   caption lifts clear of the picture so the words are readable while the image moves. */
html.gh-motion .gh-range-card[data-motion="reveal"]{opacity:0;translate:0 28px;scale:.985}
html.gh-motion .gh-range-card[data-motion="reveal"].is-in{opacity:1;translate:none;scale:1;transition:opacity .6s var(--gh-motion-ease),translate .7s var(--gh-motion-ease),scale .8s var(--gh-motion-ease),transform .26s ease,border-color .26s ease;transition-delay:calc(var(--i,0) * var(--gh-motion-step)),calc(var(--i,0) * var(--gh-motion-step)),calc(var(--i,0) * var(--gh-motion-step)),0s,0s}
html.gh-motion .gh-range-card[data-motion="reveal"] .gh-range-card__media .photo__img{scale:1.07}
html.gh-motion .gh-range-card[data-motion="reveal"].is-in .gh-range-card__media .photo__img{scale:1;transition:scale 1.2s var(--gh-motion-ease),transform .5s ease;transition-delay:calc(var(--i,0) * var(--gh-motion-step)),0s}
/* the scrim stays where it is and the words rise out of it: lifting the body itself
   would pull its bottom edge off the card and leave a strip of bare photograph */
.gh-home .gh-range-card__label,
.gh-home .gh-range-card__title,
.gh-home .gh-range-card__text,
.gh-home .gh-range-card__link{transition:transform .4s var(--gh-motion-ease)}
.gh-home .gh-range-card:hover .gh-range-card__label,
.gh-home .gh-range-card:hover .gh-range-card__title,
.gh-home .gh-range-card:hover .gh-range-card__text,
.gh-home .gh-range-card:hover .gh-range-card__link{transform:translateY(-5px)}
.gh-home .gh-range-card:hover .gh-range-card__media .photo__img{transform:scale(1.04)}

/* BUILT AROUND YOUR MARKET — the hairline grid holds still while the cell and its icon
   land, and the accent rule draws across the cell as the pointer arrives. */
html.gh-motion .gh-positioning__card[data-motion="reveal"]{opacity:0;translate:0 22px}
html.gh-motion .gh-positioning__card[data-motion="reveal"].is-in{opacity:1;translate:none;transition:opacity .55s var(--gh-motion-ease),translate .65s var(--gh-motion-ease),background .2s ease;transition-delay:calc(var(--i,0) * var(--gh-motion-step)),calc(var(--i,0) * var(--gh-motion-step)),0s}
html.gh-motion .gh-positioning__card[data-motion="reveal"] .gh-positioning__icon{opacity:0;scale:.82}
html.gh-motion .gh-positioning__card[data-motion="reveal"].is-in .gh-positioning__icon{opacity:1;scale:1;transition:opacity .45s ease,scale .6s var(--gh-motion-ease),border-color .2s ease,background .2s ease;transition-delay:calc(var(--i,0) * var(--gh-motion-step) + 130ms),calc(var(--i,0) * var(--gh-motion-step) + 130ms),0s,0s}
.gh-home .gh-positioning__card::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--gh-accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--gh-motion-ease)}
.gh-home .gh-positioning__card:hover::after,
.gh-home .gh-positioning__card:focus-within::after{transform:scaleX(1)}

/* PROCUREMENT CONTROL — these cards carried no hover answer at all, so they now take
   one from the page's own vocabulary: the border and the rule over it, the number box
   filling with the accent, and a 3px lift. */
.gh-home .gh-control .gh-card{position:relative;transition:border-color .26s ease,background-color .26s ease,transform .3s ease}
.gh-home .gh-control .gh-card::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--gh-accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--gh-motion-ease)}
.gh-home .gh-control .gh-card:hover,
.gh-home .gh-control .gh-card:focus-within{border-color:var(--gh-accent);transform:translate3d(0,-3px,0)}
.gh-home .gh-control .gh-card:hover::after,
.gh-home .gh-control .gh-card:focus-within::after{transform:scaleX(1)}
.gh-home .gh-control .gh-card__num{transition:background .26s ease,color .26s ease}
.gh-home .gh-control .gh-card:hover .gh-card__num,
.gh-home .gh-control .gh-card:focus-within .gh-card__num{background:var(--gh-accent);color:#fff}
html.gh-motion .gh-control .gh-card[data-motion="reveal"]{opacity:0;translate:0 24px}
html.gh-motion .gh-control .gh-card[data-motion="reveal"].is-in{opacity:1;translate:none;transition:opacity .55s var(--gh-motion-ease),translate .65s var(--gh-motion-ease),border-color .26s ease,background-color .26s ease,transform .3s ease;transition-delay:calc(var(--i,0) * var(--gh-motion-step)),calc(var(--i,0) * var(--gh-motion-step)),0s,0s,0s}
/* the number box drops into the card a beat after it lands */
html.gh-motion .gh-control .gh-card[data-motion="reveal"] .gh-card__num{opacity:0;translate:0 -8px}
html.gh-motion .gh-control .gh-card[data-motion="reveal"].is-in .gh-card__num{opacity:1;translate:none;transition:opacity .45s ease,translate .55s var(--gh-motion-ease),background .26s ease,color .26s ease;transition-delay:calc(var(--i,0) * var(--gh-motion-step) + 110ms),calc(var(--i,0) * var(--gh-motion-step) + 110ms),0s,0s}

/* OEM & ODM CAPABILITIES — eight cards, so the wave has to step through all eight
   rather than stop at the sixth (see motion.js), and each ordinal comes with its card. */
html.gh-motion .gh-rows--cards .gh-row[data-motion="reveal"]{opacity:0;translate:0 24px}
html.gh-motion .gh-rows--cards .gh-row[data-motion="reveal"].is-in{opacity:1;translate:none;transition:opacity .55s var(--gh-motion-ease),translate .65s var(--gh-motion-ease),background-color .28s ease,border-color .28s ease,transform .28s ease,box-shadow .28s ease;transition-delay:calc(var(--i,0) * var(--gh-motion-step)),calc(var(--i,0) * var(--gh-motion-step)),0s,0s,0s,0s}
html.gh-motion .gh-rows--cards .gh-row[data-motion="reveal"] .gh-row__num{opacity:0;translate:0 -8px}
html.gh-motion .gh-rows--cards .gh-row[data-motion="reveal"].is-in .gh-row__num{opacity:1;translate:none;transition:opacity .45s ease,translate .55s var(--gh-motion-ease),color .28s ease;transition-delay:calc(var(--i,0) * var(--gh-motion-step) + 100ms),calc(var(--i,0) * var(--gh-motion-step) + 100ms),0s}

/* DOCUMENTATION SUPPORT — the icon stamp lands a beat after its card, and lifts on hover. */
html.gh-motion .gh-docs .gh-doc-card[data-motion="reveal"]{opacity:0;translate:0 22px}
html.gh-motion .gh-docs .gh-doc-card[data-motion="reveal"].is-in{opacity:1;translate:none;transition:opacity .55s var(--gh-motion-ease),translate .65s var(--gh-motion-ease),border-color .2s ease;transition-delay:calc(var(--i,0) * var(--gh-motion-step)),calc(var(--i,0) * var(--gh-motion-step)),0s}
html.gh-motion .gh-docs .gh-doc-card[data-motion="reveal"] .gh-doc-card__icon{opacity:0;scale:.78}
html.gh-motion .gh-docs .gh-doc-card[data-motion="reveal"].is-in .gh-doc-card__icon{opacity:1;scale:1;transition:opacity .45s ease,scale .6s var(--gh-motion-ease),border-color .2s ease,background .2s ease,transform .3s ease;transition-delay:calc(var(--i,0) * var(--gh-motion-step) + 130ms),calc(var(--i,0) * var(--gh-motion-step) + 130ms),0s,0s,0s}
.gh-home .gh-docs .gh-doc-card:hover .gh-doc-card__icon,
.gh-home .gh-docs .gh-doc-card:focus-within .gh-doc-card__icon{transform:translateY(-3px)}

/* The two closers of these bands — the market callout and the procurement foot — were
   the only parts of them that still arrived without moving, so they take a plain,
   slightly slower rise of their own. */
html.gh-motion .gh-positioning__callout[data-motion="reveal"],
html.gh-motion .gh-control .gh-band__foot[data-motion="reveal"]{opacity:0;translate:0 18px}
html.gh-motion .gh-positioning__callout[data-motion="reveal"].is-in,
html.gh-motion .gh-control .gh-band__foot[data-motion="reveal"].is-in{opacity:1;translate:none;transition:opacity .6s var(--gh-motion-ease),translate .7s var(--gh-motion-ease)}

/* Nothing moves for a visitor who asked for less motion: every hidden state above is
   returned to its resting value, and the two rules stop drawing. */
@media(prefers-reduced-motion:reduce){
  html.gh-motion .gh-beat[data-motion="reveal"] .gh-eyebrow,
  html.gh-motion .gh-beat[data-motion="reveal"] .gh-h2,
  html.gh-motion .gh-beat[data-motion="reveal"] .gh-lede,
  html.gh-motion .gh-beat[data-motion="reveal"] .gh-docs__note,
  html.gh-motion .gh-beat[data-motion="reveal"] .gh-checks,
  html.gh-motion .gh-beat[data-motion="reveal"] .gh-check__mark,
  html.gh-motion .gh-range-card[data-motion="reveal"],
  html.gh-motion .gh-range-card[data-motion="reveal"] .gh-range-card__media .photo__img,
  html.gh-motion .gh-positioning__card[data-motion="reveal"],
  html.gh-motion .gh-positioning__card[data-motion="reveal"] .gh-positioning__icon,
  html.gh-motion .gh-control .gh-card[data-motion="reveal"],
  html.gh-motion .gh-control .gh-card[data-motion="reveal"] .gh-card__num,
  html.gh-motion .gh-rows--cards .gh-row[data-motion="reveal"],
  html.gh-motion .gh-rows--cards .gh-row[data-motion="reveal"] .gh-row__num,
  html.gh-motion .gh-docs .gh-doc-card[data-motion="reveal"],
  html.gh-motion .gh-docs .gh-doc-card[data-motion="reveal"] .gh-doc-card__icon,
  html.gh-motion .gh-positioning__callout[data-motion="reveal"],
  html.gh-motion .gh-control .gh-band__foot[data-motion="reveal"]{opacity:1;translate:none;scale:1;transition:none}
  html.gh-motion .gh-beat[data-motion="reveal"] .gh-eyebrow::before{transform:none;transition:none}
  .gh-home .gh-positioning__card::after,
  .gh-home .gh-control .gh-card::after{transition:none}
}