/* ==========================================================================
   KINGHOME — contact page stylesheet (assets/css/contact.css)
   --------------------------------------------------------------------------
   This file owns the contact page's bands and nothing else. It loads after
   tokens.css and style.css and every selector below is scoped under the page
   wrapper `.gh-contact`, so it cannot reach the rest of the site: the shared
   header (.ghh-*), the shared footer (.ghf-*) and the pages beside it stay as
   they are, and so do the shared form classes (.field*, .form__actions, .note)
   the front page's own enquiry form uses.

   The page works from the supplied contact handoff
   (kinghome-contact-final-handoff.html). That file is a stack of <style> blocks
   overriding one another, so the numbers here are the *effective* ones its
   cascade lands on — not the first value each property was given. Where the
   design speaks a language of its own the site's is used instead: the colours
   are the tokens in tokens.css, the two page headings are the site's own type
   steps, the buttons are the site's .btn family (this file only places them and
   states their look on a dark band), the radii and shadows are the site tokens,
   the rhythm is the site's .18s/.2s, and the font is var(--font-body) through-
   out. The headings inside a band keep the design's sizes, because those are
   the hierarchy and the white space inside the band.

   The page's width comes from the site's global .wrap, never from a local copy
   of it, so the bands line up with the header above and the footer below. The
   one band that is deliberately edge to edge is the factory visit, whose own
   design takes its wrap full width; the two columns there carry their gutters.

   Bands: 1 base · 2 hero · 3 routes · 4 direct contact · 5 the enquiry panel ·
   6 quote tips · 7 multi-line list · 8 products · 9 sample · 10 factory visit ·
   11 breakpoints · 12 reduced motion.
   ========================================================================== */

/* ======================================================= 1 · base and type
   The wrapper carries no colour of its own: the page draws from the site
   tokens, so its ink, its hairlines and its accent are the ones the header, the
   footer and the other pages already use. */
.gh-contact{background:var(--color-background);color:var(--color-ink);overflow-wrap:break-word}
/* A link inside the copy is not underlined here; .btn is excluded so a button
   keeps the colours style.css gives it. */
.gh-contact a:not(.btn){color:inherit;text-decoration:none}
/* Body copy is the site's secondary ink. The eyebrow is excluded by name: the
   markup writes it as <p class="eyebrow">, and an unfiltered `.gh-contact p`
   would out-specify `.eyebrow` and grey out every label on the page. */
.gh-contact p:not(.eyebrow){color:var(--color-muted)}
/* Every heading on the page is one of the site's own steps — this is the one
   place the design's type sizes are traded for the site's scale. h1 is the
   .display step (style.css:39, restated at 516 / DESIGN §5: 44–56px, weight 800,
   tracking -.035em), h2 the .h2 step (28–34px, tracking -.028em) and every module
   heading below the .h3 step (style.css:41, restated at 518: 1.3rem) — the module
   rules further down carry the design's margins but no size of their own, because
   the design runs seven heading sizes (88/59/52/44/31/30/27/25/23/22/18) and this
   site's system has three. The two visit labels keep a smaller step so they stay
   sub-labels. Line-height 1.14 and the zeroed margin come from the site's
   `h1,h2,h3,h4` rule (style.css:17), so they are not repeated here. */
.gh-contact h1{font-size:clamp(2.75rem,4.6vw,3.5rem);font-weight:800;letter-spacing:-.035em;margin:20px 0 24px}
.gh-contact h2{font-size:clamp(1.75rem,2.6vw,2.125rem);font-weight:800;letter-spacing:-.028em;margin:0 0 20px}
.gh-contact h3{font-size:1.3rem;font-weight:800;margin:0 0 10px}
/* The small heading is the site's shared .eyebrow with the design's 28px leading
   rule in the accent. */
.gh-contact .eyebrow{display:flex;align-items:center;gap:11px}
.gh-contact .eyebrow::before{content:"";flex:0 0 auto;width:28px;height:1px;background:var(--color-label)}
.gh-contact .intro .eyebrow,.gh-contact .center-head .eyebrow{justify-content:center}
/* The band rhythm the design's `section{padding:125px 0}` sets, and the 78px
   the smallest screens drop to. The factory visit is the one band with no
   gutter of its own (its two columns carry their own padding); the hero is in
   the list because the design's `section` rule reaches it as well. */
.gh-contact .hero,.gh-contact .intro,.gh-contact .inquiry,.gh-contact .quote,.gh-contact .multi,.gh-contact .products,.gh-contact .sample{padding:125px 0}
/* A ghost button on one of the page's dark bands keeps a light rule and inverts
   to the band's own light ink on hover. style.css:58 states this for a
   `.section--dark`, which none of these bands is, so it is restated here; the
   line is a white hairline because --color-dark-line all but disappears against
   --color-dark. */
.gh-contact .hero .btn--ghost,.gh-contact .multi .btn--ghost{color:var(--color-dark-ink);border-color:rgba(255,255,255,.34)}
.gh-contact .hero .btn--ghost:hover,.gh-contact .multi .btn--ghost:hover{background:var(--color-dark-ink);border-color:var(--color-dark-ink);color:var(--color-dark)}

/* ======================================================= 2 · band 1 — hero
   The picture is the markup's own layer behind the copy, pushed to the right
   two thirds of the band, with the design's left-to-right scrim over it. The
   photograph is the one place on this page that is faded rather than
   recoloured, so the scrim is the design's own; the slot's size label is the
   only text that sits on the picture, kept legible in the dark block's ink. */
.gh-contact .hero{position:relative;overflow:hidden;min-height:var(--gh-hero-h);background:var(--color-dark);color:var(--color-dark-ink)}
.gh-contact .hero-photo{position:absolute;inset:0 0 0 44%;opacity:.58}
/* rgba(22,25,29,·) is --color-dark used as a shade of its own block. */
.gh-contact .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,25,29,1) 0%,rgba(22,25,29,.75) 31%,rgba(22,25,29,.06) 100%)}
.gh-contact .hero-photo .photo{position:relative;margin:0;height:100%;border:0;border-radius:0;background:var(--color-dark)}
.gh-contact .hero-photo .photo__img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0;border-radius:0}
.gh-contact .hero-photo .photo__meta{position:absolute;right:20px;bottom:14px;z-index:2;margin:0;max-width:280px;justify-content:flex-end;font-size:11px;text-align:right;color:var(--color-dark-muted)}
/* The gutter is the site's, so only the vertical padding of the design's
   `.hero .wrap` is stated here and the 28px sides stay inherited. */
.gh-contact .hero .wrap{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;min-height:var(--gh-hero-h);padding-top:71px;padding-bottom:38px}
.gh-contact .hero .eyebrow{color:var(--color-label)}
.gh-contact .hero h1{max-width:800px}
.gh-contact .hero p{max-width:560px;font-size:17px;color:var(--color-dark-muted)}
.gh-contact .hero-actions{display:flex;flex-wrap:wrap;gap:10px}
/* The three facts under the hero, on one hairline that follows the dark block's
   own line token. They keep the shape of the About page's opening statistics band
   (about.css: `.kh-stats b` / `.kh-stats span`), two steps down from its own
   sizes: at this width the band's 1.6–2.6rem display step sat too heavy under an
   h1 that is already the page's largest line, so the label is 1.5–1.9rem here and
   the line beneath it .9rem. The label takes the same orange the About band's own
   numbers carry (--gh-accent), on the same dark ground: the two pages open on the
   same colour for their figures, the description line staying muted under it. */
.gh-contact .hero-bottom{display:flex;align-items:flex-end;gap:28px;padding-top:28px;border-top:1px solid var(--color-dark-line)}
.gh-contact .hero-bottom b{display:block;font-size:clamp(1.5rem,2.2vw,1.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--gh-accent)}
.gh-contact .hero-bottom span{display:block;margin-top:5px;font-size:.9rem;line-height:1.4;color:var(--color-dark-muted)}
.gh-contact .hero-bottom div{padding-right:28px;border-right:1px solid var(--color-dark-line)}
.gh-contact .hero-bottom div:last-child{border:0}

/* ======================================================= 3 · band 2 — routes
   Three cards on one row, each a column that puts its button on the floor of
   the card. The card carries the design's frame — hairline, soft shadow — with
   the site's line and shadow tokens. */
.gh-contact .intro{background:var(--color-surface);text-align:center}
.gh-contact .intro h2{max-width:770px;margin:19px auto}
.gh-contact .intro .lead{max-width:690px;margin:0 auto;font-size:19px;line-height:1.5;font-weight:500;color:var(--color-ink)}
.gh-contact .routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;align-items:stretch;max-width:none;margin:76px auto 0}
.gh-contact .route{display:flex;flex-direction:column;align-items:flex-start;min-height:620px;padding:53px;border:1px solid var(--color-line-strong);background:var(--color-surface);box-shadow:var(--shadow-soft);text-align:left}
.gh-contact .route-icon{flex:0 0 auto;display:grid;place-items:center;width:64px;height:64px;padding:16px;border:0;border-radius:var(--radius-control);background:var(--color-accent-soft);color:var(--color-accent-deep)}
.gh-contact .route-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gh-contact .route h3{margin:41px 0 20px}
.gh-contact .route p{max-width:360px;margin:0;font-size:16px;line-height:1.45}
/* One button on the floor of each card, its own label centred in it: the card's
   copy is left-aligned, but the button reads as a control rather than a line.
   All three are the site's .btn--ghost, not its filled .btn: three solid orange
   blocks in a row weighed more than the cards they sat in. Nothing about their
   own look is restated here — the outline is the ghost's own light hairline
   (--color-line-strong, the same token as the card's border), the label is ink,
   and hover is the site's ghost hover (surface fill, accent outline and label). */
.gh-contact .route .btn{width:100%;margin-top:auto;text-align:center}
/* The design lets this line wrap inside the card; a 27-character address does
   not fit a route card on a tablet, so it breaks rather than runs over its
   neighbour. */
.gh-contact .route-phone,.gh-contact .route-email{margin-top:20px;font-size:15px;font-weight:700;color:var(--color-ink);overflow-wrap:anywhere}
.gh-contact .route-qr{width:190px;height:190px;margin:20px auto 24px;overflow:hidden;border-radius:var(--radius-control);background:var(--color-placeholder);box-shadow:var(--shadow-soft)}
.gh-contact .route-qr .photo{margin:0;height:100%;border:0;border-radius:0;background:var(--color-placeholder)}
.gh-contact .route-qr .photo__img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0;border-radius:0}
/* A code is 190/170px wide at its narrowest: the slot's own size label would
   wrap over it, and what the code is, is already said under it (.qr b, or the
   route's own wording and number). */
.gh-contact .route-qr .photo__meta{display:none}

/* ======================================================= 4 · band 3 — direct contact
   The channels on the left, the enquiry panel on the right. The numbered list is
   a hairline table: the card's border is the strong line token, the ink rule on
   top is the design's own. */
.gh-contact .inquiry{background:var(--color-surface);border-top:1px solid var(--color-line-strong);border-bottom:1px solid var(--color-line-strong)}
.gh-contact .inquiry-grid{display:grid;grid-template-columns:.74fr 1.26fr;gap:82px;align-items:start}
.gh-contact .direct>p{max-width:350px}
.gh-contact .direct-list{margin-top:42px;border-top:1px solid var(--color-ink)}
.gh-contact .direct-item{display:grid;grid-template-columns:30px minmax(0,1fr);gap:15px;padding:17px 0;border-bottom:1px solid var(--color-line-strong)}
.gh-contact .direct-item>span{font-size:11px;font-weight:700;color:var(--color-accent)}
.gh-contact .direct-item b{display:block;margin-bottom:5px;font-size:10px;letter-spacing:.12em;color:var(--color-label)}
.gh-contact .direct-item a,.gh-contact .direct-item strong{font-size:16px;overflow-wrap:anywhere}
.gh-contact .direct-item a:hover{color:var(--color-accent)}
.gh-contact .direct-item p{margin:3px 0 0;font-size:12px}
.gh-contact .qr-title{margin:28px 0 11px;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--color-label)}
.gh-contact .qrs{display:flex;gap:10px}
.gh-contact .qr{width:128px;padding:10px;background:var(--color-surface);text-align:center}
.gh-contact .qr .photo{width:100%;aspect-ratio:1;margin:0;border:0;border-radius:0;background:var(--color-placeholder)}
.gh-contact .qr .photo__img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0;border-radius:0}
.gh-contact .qr .photo__meta{display:none}
.gh-contact .qr b{display:block;margin-top:7px;font-size:12px}

/* ======================================================= 5 · band 3 — the enquiry panel
   The panel is one of the bands; the form inside it is the site's own builder
   output (inc/inquiry-form.php, variant 'contact': .form .form--contact,
   .field / .field--wide / .field__label / .field__note / .field__files /
   .form__actions), skinned here to the design's panel: a two-column field grid
   on a 17/19px rhythm whose wide rows cross both columns. Every rule is scoped
   to this panel, so the same builder keeps its own look on the front page and
   on /request-a-quote/. The panel itself is the design's .form and the builder
   is a .form as well, so nothing here is written as a bare `.form` rule: the
   panel is .form-panel and the builder's own markup is reached through it. */
.gh-contact .form-panel{display:block;padding:36px;border:1px solid var(--color-line-strong);background:var(--color-surface)}
.gh-contact .form-top{display:flex;justify-content:space-between;gap:15px}
.gh-contact .required{padding-top:10px;font-size:11px;color:var(--color-muted)}
.gh-contact .form-panel>p{margin:0 0 26px;font-size:14px}
.gh-contact .form-panel form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 19px;margin:0}
/* The site's own form grid sends every .field across both columns
   (style.css:223, `.field:not(.field--half){grid-column:1/-1}`); on this panel the
   fields pair up instead — name with business email, company with country/market,
   how we can help with product interest, estimated quantity with glass thickness —
   and only the wide ones cross both tracks again. Three classes here against the
   two of the site's rule, so each field takes its own track back. */
.gh-contact .form-panel .field{display:grid;grid-template-columns:minmax(0,1fr);grid-column:auto;gap:7px;min-width:0}
.gh-contact .form-panel .field--wide,.gh-contact .form-panel .field__files,.gh-contact .form-panel .field__error{grid-column:1 / -1}
.gh-contact .form-panel .field__label{font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--color-ink)}
.gh-contact .form-panel .field__note{font-weight:400;color:var(--color-muted)}
/* The controls carry the design's 47px measure and its square corners, the way
   the site's own page skins treat a form control; the border, the surface, the
   .18s ease transition and the select's own arrow stay the site's .field rule,
   which is why the select keeps its room on the right. */
.gh-contact .form-panel input,.gh-contact .form-panel select,.gh-contact .form-panel textarea{min-height:47px;padding:11px 12px;border-radius:0;font-size:14px}
.gh-contact .form-panel select{padding-right:42px}
.gh-contact .form-panel textarea{min-height:125px;resize:vertical}
/* The attachment row is the design's dashed tray, built around the real file
   control the project keeps: the design's two-line description (the label and
   the hint) on the left, the control's own button on the right, the chosen file
   names on the line below. The label pair occupies the left column's two rows
   and the button is centred against them, which is where the design puts
   `.upload-label`'s button; the input is laid out row-reverse so its
   ::file-selector-button lands at the tray's right edge. */
.gh-contact .form-panel .field:has(input[type="file"]){grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;min-height:76px;padding:15px 17px;border:1px dashed rgba(13,13,15,.32);background:var(--color-surface-soft)}
.gh-contact .form-panel .field:has(input[type="file"]) .field__label{grid-column:1;grid-row:1;font-size:13px}
.gh-contact .form-panel .field:has(input[type="file"]) .field__hint{grid-column:1;grid-row:2;font-size:11px}
.gh-contact .form-panel .field:has(input[type="file"]) input[type="file"]{grid-column:2;grid-row:1 / span 2;align-self:center;display:flex;flex-direction:row-reverse;align-items:center;gap:12px;width:auto;min-height:0;padding:0;border:0;background-color:transparent;font-size:12px;cursor:pointer}
.gh-contact .form-panel .field:has(input[type="file"]) .field__files{grid-column:1 / -1;grid-row:3}
.gh-contact .form-panel input[type="file"]::file-selector-button{margin:0 12px 0 0;padding:10px 13px;border:1px solid var(--color-line-strong);border-radius:0;background-color:var(--color-surface);color:var(--color-ink);font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.gh-contact .form-panel input[type="file"]::file-selector-button:hover{border-color:var(--color-accent);color:var(--color-accent)}
.gh-contact .form-panel .field__files{margin:0;font-size:11px;color:var(--color-muted)}
/* The submit row is the site's .form__actions; the design gives it no rule
   above it, a 17px gap and 24px of air. The button is the row's only child —
   this panel prints no reply-time note — and the consent line below it carries
   the design's 11px. */
.gh-contact .form-panel .form__actions{grid-column:1 / -1;gap:17px;margin-top:24px;padding-top:0;border-top:0}
.gh-contact .form-panel .form__actions .small{margin:0;font-size:11px}
/* The consent sentence is the contact panel's own (inc/inquiry-form.php adds it to
   this variant only). It takes the row under the button — full width of the
   actions block, after the button and its note — and the policy it names stays a
   link, which the page's own `a:not(.btn)` rule would otherwise flatten. */
.gh-contact .form-panel .form__actions .form__consent{flex:1 0 100%;order:2;max-width:64ch;line-height:1.5}
.gh-contact .form-panel .form__consent a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px}
.gh-contact .form-panel .form__consent a:hover{color:var(--color-accent-deep)}
/* A failed submission or a receipt: the site's own .note look, with the space
   the panel needs under it. */
.gh-contact .form-panel .note{grid-column:1 / -1;margin:0 0 20px}
/* The panel's live line under the form: the design's one-line status. Empty
   until the site answers, so it takes the same 1em the design's own paragraph
   leaves below itself. */
.gh-contact .form-panel .status{margin:0 0 1em;font-size:12px;color:var(--color-accent)}

/* ======================================================= 6 · band 4 — quote tips
   Three steps on one hairline that runs behind the icons. The line is the
   design's own; only the icons sit above it. */
.gh-contact .quote{background:var(--color-surface-soft);text-align:center}
.gh-contact .center-head{max-width:750px;margin:0 auto}
.gh-contact .center-head p{font-size:16px}
.gh-contact .quote-line{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin:55px auto 0}
.gh-contact .quote-line::before{content:"";position:absolute;left:16.66%;right:16.66%;top:31px;height:1px;background:var(--color-line-strong)}
.gh-contact .quote-step{position:relative;padding:0 30px}
.gh-contact .quote-icon{position:relative;z-index:1;display:grid;place-items:center;width:74px;height:74px;margin:0 auto 22px;padding:18px;border:1px solid var(--color-accent);border-radius:0;background:var(--color-surface);color:var(--color-accent)}
.gh-contact .quote-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.gh-contact .quote-step h3{margin-top:4px}
.gh-contact .quote-step p{margin:0;font-size:13px}

/* ======================================================= 7 · band 5 — a multi-line list
   Copy on the left, the picture on the right, on the site's dark block. The
   example list is a panel one step lighter than the band, the way a .card sits
   inside a .section--dark on every other page (style.css:92). */
.gh-contact .multi{background:var(--color-dark);color:var(--color-dark-ink)}
.gh-contact .multi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;align-items:center}
.gh-contact .multi .eyebrow{color:var(--color-label)}
.gh-contact .multi-copy h2{max-width:520px}
.gh-contact .multi-copy>p{max-width:480px;color:var(--color-dark-muted)}
.gh-contact .example{margin-top:30px;padding:26px;background:rgba(255,255,255,.045);color:var(--color-dark-ink)}
.gh-contact .example h3{margin:16px 0}
.gh-contact .example ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-dark-line)}
.gh-contact .example li{padding:9px 0;border-bottom:1px solid var(--color-dark-line);font-size:13px;color:var(--color-dark-muted)}
.gh-contact .example li::before{content:"•";padding-right:10px;color:var(--color-accent-soft)}
.gh-contact .multi-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.gh-contact .multi-photo{position:relative;height:680px;align-self:stretch;background:var(--color-placeholder)}
.gh-contact .multi-photo .photo{position:relative;margin:0;height:100%;border:0;border-radius:0;background:var(--color-placeholder)}
.gh-contact .multi-photo .photo__img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:top;border:0;border-radius:0}
/* The one picture whose size label stays: the slot has room for it, so the
   client still reads on the page itself what has to be shot and at what size. */
.gh-contact .multi-photo .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(--color-dark-muted);font-size:11px;line-height:1.35}

/* ======================================================= 8 · band 6 — products
   The eleven chips are links into the form, so each one keeps a hover that is a
   lift and a colour change rather than a second button. */
.gh-contact .products{background:var(--color-surface);text-align:center}
.gh-contact .product-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:950px;margin:54px auto 0}
.gh-contact .product-tags a{padding:12px 15px;border:1px solid var(--color-line-strong);background:var(--color-surface);font-size:12px;font-weight:700;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.gh-contact .product-tags a:hover{transform:translateY(-3px);border-color:var(--color-accent);color:var(--color-accent);box-shadow:var(--shadow-lift)}
/* The note under the chips is the design's quiet footnote above a rule, not the
   .note callout the site uses for feedback, so the callout's fill and its accent
   edge are stood down here. */
.gh-contact .products .note{max-width:625px;margin:28px auto 0;padding:18px 0 0;border:0;border-top:1px solid var(--color-ink);border-radius:0;background:transparent;font-size:14px}
.gh-contact .product-button{margin-top:20px}

/* ======================================================= 9 · band 7 — sample
   Two cards that answer the two questions a sample raises. The icon is the same
   .route-icon as the routes band, one step larger and outlined in the accent. */
.gh-contact .sample{background:var(--color-surface-soft);text-align:center}
.gh-contact .sample-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:1030px;margin:57px auto 0}
.gh-contact .sample-card{display:flex;flex-direction:column;align-items:center;min-height:285px;padding:34px;border:1px solid var(--color-line-strong);background:var(--color-surface)}
.gh-contact .sample-card .route-icon{width:74px;height:74px;margin-bottom:2px;padding:18px;border:1px solid var(--color-accent);border-radius:0;background:var(--color-accent-soft);color:var(--color-accent)}
/* the larger icon takes the design's lighter stroke, as it does in the quote band */
.gh-contact .sample-card .route-icon svg{stroke-width:1.65}
.gh-contact .sample-card h3{margin:25px 0 9px}
.gh-contact .sample-card p{max-width:390px;margin:0;font-size:13px}
.gh-contact .sample-card a{margin-top:auto;padding-top:18px;font-size:12px;font-weight:700}
/* The same trailing arrow the site's own card CTAs carry (.gh-card__cta::after). */
.gh-contact .sample-card a::after{content:" ↗";font-size:16px;color:var(--color-accent)}
.gh-contact .sample-card a:hover{color:var(--color-accent)}

/* ======================================================= 10 · band 8 — factory visit
   The band is the site's dark block with no gutter of its own: the left column
   carries the page's copy on the dark, the right column is a light panel inside
   it. The design's two-track grid, its clamp() gutter and its centred alignment
   are kept, with one change: the tracks now carry the same share of the band and
   the right panel spends less of its own on margins and padding, because the
   design's ratio left the panel narrower than the longest line of its list, so
   the list broke mid-phrase. At 900px the two columns stack as before. */
.gh-contact .factory-visit{padding:0;background:var(--color-dark);color:var(--color-dark-ink)}
/* The design takes this band's wrap edge to edge (`.factory-visit>.wrap` is
   width:100%, max-width:none, margin:0). The global .wrap's 28px sides are stood
   down with it, because the two columns below carry their own gutters and a
   second one here would stop the band being full width. This is the only place
   on the page the site's gutter is not the one in use. */
.gh-contact .factory-visit>.wrap{width:100%;max-width:none;margin:0;padding:0}
.gh-contact .visit-two-column{display:grid;grid-template-columns:minmax(0,1fr) minmax(520px,1.06fr);gap:clamp(40px,4.6vw,88px);align-items:center;min-height:650px}
.gh-contact .visit-left{align-self:center;padding:96px clamp(32px,7vw,128px);padding-right:0}
.gh-contact .visit-left .eyebrow{margin-bottom:18px;color:var(--color-label)}
.gh-contact .visit-left h2{margin:0 0 20px;color:var(--color-dark-ink)}
.gh-contact .visit-left h3{margin:0 0 16px;letter-spacing:-.03em;color:var(--color-dark-ink)}
.gh-contact .visit-left>p{max-width:510px;font-size:16px;color:var(--color-dark-muted)}
/* the design drops the rule over the address and keeps its space */
.gh-contact .visit-address{margin-top:37px;padding-top:21px}
.gh-contact .visit-address small,.gh-contact .visit-policy small{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--color-label)}
.gh-contact .visit-address h3,.gh-contact .visit-policy h3{margin:9px 0 5px;font-size:1.05rem}
.gh-contact .visit-address p,.gh-contact .visit-policy p{margin:0;font-size:13px;color:var(--color-dark-muted)}
.gh-contact .visit-policy{margin-top:22px}
.gh-contact .visit-left .btn{margin-top:32px}
/* The panel is inset on all four sides — its own light rectangle inside the dark
   band, not a column that reaches the band's edge — and its inner air is one step
   smaller than the design's, so the dark frame around it reads and the panel sits
   inside the band rather than filling it. */
.gh-contact .visit-right{display:flex;flex-direction:column;justify-content:center;align-self:auto;min-height:460px;margin:clamp(48px,5.4vw,88px) clamp(26px,4vw,80px) clamp(48px,5.4vw,88px) clamp(26px,3vw,58px);padding:46px clamp(24px,2.8vw,44px);background:var(--color-glass);color:var(--color-ink)}
/* The heading takes the panel's full width: it is one line at every desktop
   width now that the panel is wider, and its own 420px cap would break it. */
.gh-contact .visit-right h3{max-width:none;margin:0 0 23px;color:var(--color-ink)}
.gh-contact .visit-right ul{list-style:none;margin:0;padding:0}
.gh-contact .visit-right li{padding:12px 0;font-size:14px;color:var(--color-ink)}
.gh-contact .visit-right li::before{content:"✓";margin-right:10px;font-weight:800;color:var(--color-accent)}

/* ======================================================= 11 · breakpoints
   The design's own four steps: 900 · 750 · 650 · 560. The 650 step only ever
   carried the factory visit's padding, which the band's later `padding:0` wins
   over at every width, so nothing survives from it. The grid keeps the site's
   .wrap at every width, so the gutter stays the site's.
   At 900: the picture moves left, the three cards tighten, both two-column
   bands stack, and the form reaches a visitor before the contact channels do. */
@media(max-width:900px){
  /* The hero's own height is not restated at any step: it is --gh-hero-h
     (chrome.css), the one value the home, about and contact heroes share, and
     a local override here would be exactly what made the three pages differ. */
  .gh-contact .hero-photo{left:22%}
  .gh-contact .hero-bottom{flex-wrap:wrap}
  .gh-contact .hero-bottom div{border:0}
  .gh-contact .routes{gap:18px}
  .gh-contact .route{min-height:550px;padding:30px}
  .gh-contact .route-qr{width:150px;height:150px}
  .gh-contact .inquiry-grid,.gh-contact .multi-grid{grid-template-columns:minmax(0,1fr);gap:45px}
  .gh-contact .form-panel{order:-1}
  .gh-contact .quote-line::before{display:none}
  .gh-contact .multi-photo{height:450px}
  .gh-contact .sample-grid{gap:15px}
  .gh-contact .visit-two-column{grid-template-columns:minmax(0,1fr);gap:0}
  .gh-contact .visit-left{padding:65px clamp(28px,6vw,64px)}
  .gh-contact .visit-right{min-height:0;margin:0;padding:58px clamp(28px,6vw,64px)}
}
/* Only the left column's gutter changes at 750. The right column's shrinking
   padding is the wider rule above, which the handoff declares after this one, so
   that is the value the design lands on and the one kept here. */
@media(max-width:750px){
  .gh-contact .visit-left{padding:56px 24px}
}
/* At 560 the bands drop to 78px, every grid goes single-column, and the hero
   keeps the shared 620px phone floor of --gh-hero-h (chrome.css) rather than a
   value of its own. The route heading keeps the 25px of the 900 step here — the
   design's 560 rule moves its margins only. */
@media(max-width:560px){
  .gh-contact .hero .wrap{padding-top:60px}
  .gh-contact .hero p{font-size:16px}
  .gh-contact .hero-actions .btn{width:100%}
  /* One column, as the About page's own statistics band does at this width: two
     tracks would squeeze the display-size label of a fact into two lines. */
  .gh-contact .hero-bottom{display:grid;grid-template-columns:minmax(0,1fr);gap:17px;margin-top:40px}
  .gh-contact .hero-bottom div{padding:0}
  .gh-contact .inquiry,.gh-contact .quote,.gh-contact .multi,.gh-contact .products,.gh-contact .sample{padding:78px 0}
  .gh-contact .routes,.gh-contact .quote-line,.gh-contact .sample-grid{grid-template-columns:minmax(0,1fr)}
  .gh-contact .routes{margin-top:48px;gap:18px}
  .gh-contact .route{min-height:0;padding:30px}
  .gh-contact .route h3{margin:27px 0 13px}
  .gh-contact .route .btn{margin-top:25px}
  .gh-contact .route-qr{width:170px;height:170px}
  .gh-contact .form-panel{padding:28px 18px}
  .gh-contact .form-panel form{grid-template-columns:minmax(0,1fr)}
  /* the attachment tray stacks as the design's own 560 rule does: description,
     then the file control on its own full-width row */
  .gh-contact .form-panel .field:has(input[type="file"]){grid-template-columns:minmax(0,1fr)}
  .gh-contact .form-panel .field:has(input[type="file"]) input[type="file"]{grid-column:1;grid-row:3;width:100%;margin-top:8px}
  .gh-contact .form-panel .field:has(input[type="file"]) .field__files{grid-row:4}
  .gh-contact .form-panel .form__actions{display:block}
  .gh-contact .form-panel .form__actions .btn{width:100%;margin-bottom:12px}
  .gh-contact .quote-line{gap:40px;margin-top:45px}
  .gh-contact .quote-step{padding:0}
  .gh-contact .quote-icon,.gh-contact .sample-card .route-icon{width:66px;height:66px;padding:16px}
  .gh-contact .multi-actions .btn{width:100%}
  .gh-contact .multi-photo{height:330px}
}

/* ======================================================= 12 · reduced motion */
@media(prefers-reduced-motion:reduce){
  .gh-contact .product-tags a{transition:none}
}

/* --------------------------------------------------------------- motion
   The card bands reveal the way the home page and the About page do: the card
   rises and settles, one after the next (--i is written by assets/js/motion.js),
   the icon inside lands a beat later and the photograph settles back from its
   crop. Each .is-in rule restates the element's own transition, because the
   shared reveal in style.css owns the shorthand, so the hover feedback has to
   keep working on the very cards that fade in. */
.gh-contact{--gh-contact-ease:cubic-bezier(.22,.61,.36,1);--gh-contact-step:110ms}
html.gh-motion .gh-contact .route,
html.gh-motion .gh-contact .sample-card,
html.gh-motion .gh-contact .quote-step{opacity:0;translate:0 28px;scale:.965}
html.gh-motion .gh-contact .direct-item,
html.gh-motion .gh-contact .qr,
html.gh-motion .gh-contact .multi-copy,
html.gh-motion .gh-contact .visit-left,
html.gh-motion .gh-contact .visit-right,
html.gh-motion .gh-contact .form-panel,
html.gh-motion .gh-contact .product-tags{opacity:0;translate:0 20px}
html.gh-motion .gh-contact .route.is-in,
html.gh-motion .gh-contact .sample-card.is-in,
html.gh-motion .gh-contact .quote-step.is-in{opacity:1;translate:none;scale:1;transition:opacity .55s var(--gh-contact-ease),translate .62s var(--gh-contact-ease),scale .7s var(--gh-contact-ease),transform .35s ease,box-shadow .35s ease,border-color .3s ease;transition-delay:calc(var(--i,0) * var(--gh-contact-step)),calc(var(--i,0) * var(--gh-contact-step)),calc(var(--i,0) * var(--gh-contact-step)),0s,0s,0s}
html.gh-motion .gh-contact .direct-item.is-in,
html.gh-motion .gh-contact .qr.is-in,
html.gh-motion .gh-contact .multi-copy.is-in,
html.gh-motion .gh-contact .visit-left.is-in,
html.gh-motion .gh-contact .visit-right.is-in,
html.gh-motion .gh-contact .form-panel.is-in,
html.gh-motion .gh-contact .product-tags.is-in{opacity:1;translate:none;transition:opacity .5s var(--gh-contact-ease),translate .6s var(--gh-contact-ease);transition-delay:calc(var(--i,0) * var(--gh-contact-step))}
/* The icon inside a card lands just after the card itself has settled. */
html.gh-motion .gh-contact .route .route-icon,
html.gh-motion .gh-contact .sample-card .route-icon,
html.gh-motion .gh-contact .quote-step .quote-icon{opacity:0;scale:.78}
html.gh-motion .gh-contact .route.is-in .route-icon,
html.gh-motion .gh-contact .sample-card.is-in .route-icon,
html.gh-motion .gh-contact .quote-step.is-in .quote-icon{opacity:1;scale:1;transition:opacity .45s ease,scale .6s var(--gh-contact-ease),transform .3s ease;transition-delay:calc(var(--i,0) * var(--gh-contact-step) + 130ms),calc(var(--i,0) * var(--gh-contact-step) + 130ms),0s}
/* The photograph beside the purchasing list settles back from a slight crop. */
html.gh-motion .gh-contact .multi-photo .photo__img{scale:1.06}
html.gh-motion .gh-contact .multi-photo.is-in .photo__img{scale:1;transition:scale 1.2s var(--gh-contact-ease);transition-delay:calc(var(--i,0) * var(--gh-contact-step))}
/* The rule behind the three quote steps draws itself once the first step lands.
   Both rules ask for :has(), so a browser without it keeps the drawn rule. */
html.gh-motion .gh-contact .quote-line:has(.quote-step)::before{transform:scaleX(0);transform-origin:0 50%}
html.gh-motion .gh-contact .quote-line:has(.quote-step.is-in)::before{transform:scaleX(1);transition:transform .7s var(--gh-contact-ease) .12s}
/* Hover: the card lifts and its edge takes the accent, the way the About cards do. */
.gh-contact .route,.gh-contact .sample-card{transition:transform .35s var(--gh-contact-ease),box-shadow .35s var(--gh-contact-ease),border-color .3s ease}
.gh-contact .route:hover,.gh-contact .sample-card:hover{transform:translateY(-6px);border-color:var(--color-accent);box-shadow:var(--shadow-lift)}
.gh-contact .route .route-icon,.gh-contact .sample-card .route-icon{transition:transform .3s ease}
.gh-contact .route:hover .route-icon,.gh-contact .sample-card:hover .route-icon{transform:translateY(-4px) scale(1.06)}
@media(prefers-reduced-motion:reduce){
  html.gh-motion .gh-contact .route,html.gh-motion .gh-contact .sample-card,html.gh-motion .gh-contact .quote-step,html.gh-motion .gh-contact .direct-item,html.gh-motion .gh-contact .qr,html.gh-motion .gh-contact .multi-copy,html.gh-motion .gh-contact .visit-left,html.gh-motion .gh-contact .visit-right,html.gh-motion .gh-contact .form-panel,html.gh-motion .gh-contact .product-tags{opacity:1;translate:none;scale:1;transition:none}
  html.gh-motion .gh-contact .route .route-icon,html.gh-motion .gh-contact .sample-card .route-icon,html.gh-motion .gh-contact .quote-step .quote-icon{opacity:1;scale:1;transition:none}
  html.gh-motion .gh-contact .multi-photo .photo__img{scale:1;transition:none}
  html.gh-motion .gh-contact .quote-line:has(.quote-step)::before{transform:none;transition:none}
}