/* =====================================================================
   GNMK Homepage (.gnh)  — brand re-skin built on the design system.
   Loaded only on the front page. Generic components (.gn-btn, .gn-card,
   .gn-marquee, .gn-reveal, .gn-counter, .gn-eyebrow) come from design-system.css.
   ===================================================================== */

.gnh { font-family: var(--gn-ff-body); color: var(--gn-ink); background: var(--gn-bg); overflow-x: hidden; }
.gnh *, .gnh *::before, .gnh *::after { box-sizing: border-box; }
.gnh img { max-width: 100%; height: auto; display: block; }
.gnh a { color: inherit; text-decoration: none; }
.gnh .gn-section--dark .gn-lead { color: #C9C9C4; }
.gnh-center { text-align: center; margin-top: 2rem; }

/* ---------- Header ---------- */
.gnh-head { position: sticky; top: 0; z-index: 200; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--gn-line); }
.gnh-head__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.gnh-brand__img { height: 50px; width: auto; }
.gnh-nav { display: flex; gap: 1.4rem; margin-left: auto; font-weight: 600; font-size: .98rem; }
.gnh-nav a { color: var(--gn-ink-2); position: relative; padding: .3em 0; transition: color .2s var(--gn-ease); }
.gnh-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--gn-green); transition: width .25s var(--gn-ease); }
.gnh-nav a:hover { color: var(--gn-ink); } .gnh-nav a:hover::after { width: 100%; }
.gnh-head__cta { display: flex; align-items: center; gap: 1rem; margin-left: 1rem; }
.gnh-head__phone { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; color: var(--gn-ink); white-space: nowrap; }
.gnh-head__phone svg { width: 1.05em; height: 1.05em; color: var(--gn-green-700); }
@media (max-width: 1040px) { .gnh-nav { display: none; } .gnh-head__cta { margin-left: auto; } }
@media (max-width: 560px) { .gnh-head__phone span { display: none; } }

/* ---------- Hero ---------- */
.gnh-hero { padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) 0 clamp(2rem,1rem+3vw,3.5rem); background:
   radial-gradient(120% 120% at 100% 0%, var(--gn-green-tint) 0%, transparent 45%),
   radial-gradient(100% 100% at 0% 100%, var(--gn-red-tint) 0%, transparent 40%), var(--gn-bg); }
.gnh-hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.gnh-hero__title { margin: .5rem 0 1rem; }
.gnh-hero__sub { margin-bottom: 1.6rem; max-width: 52ch; }
.gnh-hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }
.gnh-hero__bullets { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.gnh-hero__bullets li { position: relative; padding-left: 1.5em; font-weight: 500; color: var(--gn-ink-2); }
.gnh-hero__bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--gn-green-700); font-weight: 800; }
.gnh-hero__audience { font-size: var(--gn-step--1); color: var(--gn-mute); border-left: 3px solid var(--gn-green); padding-left: 1rem; max-width: 60ch; }
.gnh-hero__audience a { color: var(--gn-green-700); font-weight: 700; }
@media (max-width: 880px) { .gnh-hero__inner { grid-template-columns: 1fr; } }

/* Placeholders */
.gnh-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; background: var(--gn-surface-2); border: 2px dashed #CFCFC7; border-radius: var(--gn-radius-lg); color: var(--gn-mute); padding: 1.5rem; }
.gnh-ph--hero { aspect-ratio: 4 / 3.2; }
.gnh-ph__saw { width: 56px; height: 56px; fill: var(--gn-charcoal); opacity: .55; }
.gnh-ph__label { font-weight: 800; letter-spacing: .12em; font-size: .8rem; color: var(--gn-ink-2); }
.gnh-ph__hint { font-size: .82rem; }
.gnh-ph--dark { background: #232323; border-color: #3a3a3a; color: #9a9a9a; aspect-ratio: 4/3; }
.gnh-ph--tile { aspect-ratio: 4/3; font-weight: 600; color: var(--gn-ink-2); background: linear-gradient(135deg, var(--gn-surface-2), #E9E8E1); }

/* Section head block */
.gnh-head-block { max-width: 64ch; margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.8rem); }
.gnh-head-block .gn-eyebrow { margin-bottom: .8rem; }
.gnh-head-block .gn-lead { margin-top: .9rem; }
.gnh-head-block--center { margin-inline: auto; text-align: center; }
.gnh-head-block--center .gn-eyebrow::before { } /* keep number */

/* ---------- Capabilities marquee band ---------- */
.gnh-marquee-band { background: var(--gn-ink); padding: .9rem 0; }
.gnh-marquee-band .gn-marquee__item { color: #EDEDEA; font-size: var(--gn-step-0); font-weight: 600; }
.gnh-marquee-band .gn-marquee__item .dot { background: var(--gn-green); }

/* ---------- Stats ---------- */
.gnh-stats__inner { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; text-align: center; }
.gnh-stat { padding: 1.2rem .5rem; border-right: 1px solid var(--gn-line); }
.gnh-stat:last-child { border-right: 0; }
.gnh-stat .gn-counter { display: block; color: var(--gn-green-700); }
.gnh-stat__label { display: block; margin-top: .4rem; color: var(--gn-mute); font-size: var(--gn-step--1); font-weight: 500; }
.gnh-confirm { display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--gn-red); padding: .1em .5em; border-radius: 4px; vertical-align: middle; margin-left: .35em; }
@media (max-width: 620px) { .gnh-stats__inner { grid-template-columns: repeat(2,1fr); } .gnh-stat:nth-child(2){border-right:0;} }

/* ---------- Why cards (uses .gn-card) ---------- */
.gnh-why__grid { margin-top: 1.5rem; }
.gn-card__num { display: block; margin-bottom: .4rem; }

/* ---------- Factory & machinery (dark) ---------- */
.gnh-machines { margin-bottom: clamp(2rem,1rem+3vw,3.5rem); }
.gnh-machine { background: #232323; border: 1px solid #333; border-radius: var(--gn-radius); padding: 1.1rem; transition: transform .25s var(--gn-ease), border-color .25s; }
.gnh-machine:hover { transform: translateY(-4px); border-color: var(--gn-green-700); }
.gnh-machine__media { margin-bottom: 1rem; }
.gnh-machine h3 { color: #fff; margin: 0 0 .5rem; }
.gnh-machine p { color: #BdBdB8; color: #BFBFBA; font-size: var(--gn-step-0); }
.gnh-flow { background: linear-gradient(180deg,#202020,#1c1c1c); border: 1px solid #333; border-radius: var(--gn-radius-lg); padding: clamp(1.4rem,1rem+2vw,2.4rem); }
.gnh-flow__title { color: #fff; font-family: var(--gn-ff-display); font-weight: 600; font-size: var(--gn-step-2); margin: 0 0 1.4rem; }
.gnh-flow__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7,1fr); gap: .5rem; counter-reset: step; }
.gnh-flow__steps li { position: relative; padding: 1rem .6rem; border-radius: 12px; background: #2a2a2a; display: flex; flex-direction: column; gap: .25rem; }
.gnh-flow__steps li::after { content: "→"; position: absolute; right: -.65rem; top: 50%; transform: translateY(-50%); color: var(--gn-green); font-weight: 800; z-index: 2; }
.gnh-flow__steps li:last-child::after { display: none; }
.gnh-flow__n { font-family: var(--gn-ff-display); font-size: 1.4rem; color: var(--gn-green); line-height: 1; }
.gnh-flow__t { color: #fff; font-weight: 700; font-size: .95rem; }
.gnh-flow__steps small { color: #9a9a9a; font-size: .76rem; line-height: 1.3; }
@media (max-width: 900px) { .gnh-flow__steps { grid-template-columns: repeat(2,1fr); } .gnh-flow__steps li::after{ content:""; } }
@media (max-width: 480px) { .gnh-flow__steps { grid-template-columns: 1fr; } }

/* ---------- Kitchen shapes ---------- */
.gnh-shapes__grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 1rem; }
.gnh-shape { background: var(--gn-bg); border: 1px solid var(--gn-line); border-radius: var(--gn-radius); padding: 1.4rem 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; transition: transform .22s var(--gn-ease), border-color .22s, box-shadow .22s; box-shadow: var(--gn-shadow-sm); }
.gnh-shape:hover { transform: translateY(-5px); border-color: var(--gn-green); box-shadow: var(--gn-shadow); }
.gnh-shape svg { width: 46px; height: 46px; fill: var(--gn-charcoal); transition: fill .22s; }
.gnh-shape:hover svg { fill: var(--gn-green-700); }
.gnh-shape__name { font-family: var(--gn-ff-display); font-weight: 600; font-size: 1.15rem; }
.gnh-shape__hint { font-size: .82rem; color: var(--gn-mute); }
@media (max-width: 900px) { .gnh-shapes__grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 520px) { .gnh-shapes__grid { grid-template-columns: repeat(2,1fr); } }

/* ---------- Also (wardrobes / carpentry) ---------- */
.gnh-also__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,.7rem+1.5vw,2rem); }
.gnh-also__card { display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden; border: 1px solid var(--gn-line); border-radius: var(--gn-radius-lg); background: var(--gn-bg); box-shadow: var(--gn-shadow-sm); transition: transform .25s var(--gn-ease), box-shadow .25s; }
.gnh-also__card:hover { transform: translateY(-4px); box-shadow: var(--gn-shadow); }
.gnh-also__copy { padding: clamp(1.2rem,1rem+1vw,1.8rem); align-self: center; }
.gnh-also__copy h3 { margin: .4rem 0 .6rem; }
.gnh-also__copy p { color: var(--gn-mute); font-size: var(--gn-step-0); }
.gnh-link { display: inline-block; margin-top: .8rem; color: var(--gn-green-700); font-weight: 700; }
.gnh-also__media { overflow: hidden; }
.gnh-also__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--gn-ease); }
.gnh-also__card:hover .gnh-also__media img { transform: scale(1.05); }
@media (max-width: 820px) { .gnh-also__grid { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .gnh-also__card { grid-template-columns: 1fr; } .gnh-also__media { aspect-ratio: 16/10; } }

/* ---------- Pricing (dark) ---------- */
.gnh-tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; align-items: stretch; }
.gnh-tier { background: #232323; border: 1px solid #353535; border-radius: var(--gn-radius-lg); padding: 1.6rem; display: flex; flex-direction: column; }
.gnh-tier--featured { border-color: var(--gn-green); box-shadow: 0 0 0 1px var(--gn-green), 0 20px 50px -20px rgba(0,191,99,.4); transform: translateY(-6px); }
.gnh-tier__name { font-family: var(--gn-ff-display); font-size: 1.3rem; color: #fff; font-weight: 600; display: flex; align-items: center; gap: .6rem; }
.gnh-tier__badge { font-family: var(--gn-ff-body); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #06351f; background: var(--gn-green); padding: .25em .6em; border-radius: 999px; }
.gnh-tier__price { display: block; font-family: var(--gn-ff-display); font-size: 2.2rem; color: var(--gn-green); font-weight: 600; margin: .6rem 0 1rem; }
.gnh-tier__price span { font-size: .9rem; color: #9a9a9a; font-family: var(--gn-ff-body); font-weight: 500; }
.gnh-tier__price sup.gnh-confirm { font-size: .55rem; }
.gnh-tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.gnh-tier li { position: relative; padding-left: 1.5em; color: #D6D6D2; font-size: .95rem; }
.gnh-tier li::before { content: "✓"; position: absolute; left: 0; color: var(--gn-green); font-weight: 800; }
.gnh-pricing__foot { color: #A8A8A3; text-align: center; max-width: 70ch; margin: 1.6rem auto 0; font-size: var(--gn-step--1); }
@media (max-width: 820px) { .gnh-tiers { grid-template-columns: 1fr; } .gnh-tier--featured { transform: none; } }

/* ---------- Brand marquee chips ---------- */
.gnh-brands__title { text-align: center; color: var(--gn-mute); font-weight: 600; letter-spacing: .04em; margin-bottom: 1.2rem; }
.gnh-brandchip { font-family: var(--gn-ff-display); font-weight: 600; font-size: clamp(1.5rem,1rem+2vw,2.4rem); color: var(--gn-charcoal); display: inline-flex; flex-direction: column; line-height: 1; }
.gnh-brandchip small { font-family: var(--gn-ff-body); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gn-mute); margin-top: .25rem; }

/* ---------- What's inside (hardware grid) ---------- */
.gnh-hw__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.gnh-hw__grid figure { margin: 0; background: var(--gn-surface); border: 1px solid var(--gn-line); border-radius: var(--gn-radius); padding: 1rem; text-align: center; transition: transform .22s var(--gn-ease), border-color .22s; }
.gnh-hw__grid figure:hover { transform: translateY(-4px); border-color: var(--gn-green); }
.gnh-hw__grid img { height: 96px; width: auto; margin: 0 auto .7rem; object-fit: contain; }
.gnh-hw__grid figcaption { font-weight: 600; font-size: .9rem; color: var(--gn-ink-2); }
@media (max-width: 820px) { .gnh-hw__grid { grid-template-columns: repeat(2,1fr); } }

/* ---------- Gallery ---------- */
.gnh-gallery__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.gnh-muted-foot { text-align: center; color: var(--gn-mute); margin-top: 1.2rem; font-size: var(--gn-step--1); }
@media (max-width: 820px) { .gnh-gallery__grid { grid-template-columns: repeat(2,1fr); } }

/* ---------- Reviews ---------- */
.gnh-review { background: var(--gn-bg); border: 1px solid var(--gn-line); border-radius: var(--gn-radius); padding: 1.5rem; box-shadow: var(--gn-shadow-sm); }
.gnh-review__stars { color: #F5A623; letter-spacing: 2px; margin-bottom: .7rem; }
.gnh-review p { font-size: var(--gn-step-0); color: var(--gn-ink-2); margin: 0 0 1rem; }
.gnh-review footer { font-size: .85rem; color: var(--gn-mute); }
.gnh-review footer strong { color: var(--gn-ink); }

/* ---------- B2B job-work ---------- */
.gnh-audience { margin-bottom: clamp(1.5rem,1rem+2vw,2.5rem); }
.gnh-aud { background: var(--gn-surface); border: 1px solid var(--gn-line); border-radius: var(--gn-radius); padding: 1.4rem; }
.gnh-aud svg { width: 30px; height: 30px; color: var(--gn-green-700); margin-bottom: .7rem; }
.gnh-aud h4 { margin: 0 0 .5rem; font-family: var(--gn-ff-display); font-weight: 600; font-size: 1.2rem; }
.gnh-aud p { color: var(--gn-mute); font-size: .92rem; margin: 0 0 .8rem; }
.gnh-aud__tag { font-size: .76rem; font-weight: 600; color: var(--gn-green-700); background: var(--gn-green-tint); padding: .3em .7em; border-radius: 999px; display: inline-block; }
.gnh-job__layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.2rem,1rem+1.5vw,2.2rem); align-items: start; }
.gnh-job__pitch-title { font-family: var(--gn-ff-display); font-weight: 600; font-size: var(--gn-step-1); margin: 0 0 1rem; }
.gnh-job__bullets { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.gnh-job__bullets li { position: relative; padding-left: 1.6em; color: var(--gn-ink-2); }
.gnh-job__bullets li::before { content: "→"; position: absolute; left: 0; color: var(--gn-green-700); font-weight: 800; }
@media (max-width: 880px) { .gnh-job__layout { grid-template-columns: 1fr; } }

/* Calculator */
.gnh-calc { background: var(--gn-ink); color: #fff; border-radius: var(--gn-radius-lg); padding: clamp(1.3rem,1rem+1.5vw,2rem); box-shadow: var(--gn-shadow); }
.gnh-calc__pill { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #06351f; background: var(--gn-green); padding: .35em .8em; border-radius: 999px; margin-bottom: .8rem; }
.gnh-calc__head h3 { color: #fff; margin: 0 0 1.2rem; }
.gnh-calc__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; margin-bottom: 1.2rem; }
.gnh-calc__field { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; color: #BFBFBA; font-weight: 600; }
.gnh-calc__field small { color: #8a8a8a; font-weight: 500; }
.gnh-calc__field select, .gnh-calc__field input { font-family: var(--gn-ff-body); font-size: 1rem; padding: .7em .8em; border-radius: 10px; border: 1px solid #3a3a3a; background: #2a2a2a; color: #fff; }
.gnh-calc__field select:focus, .gnh-calc__field input:focus { outline: 2px solid var(--gn-green); border-color: var(--gn-green); }
.gnh-calc__results { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; background: #2a2a2a; border-radius: var(--gn-radius); padding: 1.2rem; margin-bottom: 1rem; }
.gnh-calc__label { font-size: .8rem; color: #9a9a9a; }
.gnh-calc__big { display: block; font-family: var(--gn-ff-display); font-size: clamp(1.8rem,1.4rem+1.6vw,2.6rem); color: var(--gn-green); font-weight: 600; line-height: 1.1; }
.gnh-calc__per { font-size: .82rem; color: #9a9a9a; }
.gnh-calc__compare { display: flex; flex-direction: column; gap: .6rem; justify-content: center; }
.gnh-calc__cmp { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; color: #BFBFBA; }
.gnh-calc__cmp strong { color: #fff; }
.gnh-calc__cmp--save strong { color: var(--gn-green); }
.gnh-calc__foot { font-size: .76rem; color: #9a9a9a; margin: 0 0 1rem; }
.gnh-calc__foot .gnh-confirm { background: var(--gn-red); }
@media (max-width: 520px) { .gnh-calc__row { grid-template-columns: 1fr; } .gnh-calc__results { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.gnh-faq__inner { max-width: 820px; margin-inline: auto; }
.gnh-faq__list { display: flex; flex-direction: column; gap: .7rem; }
.gnh-faq__list details { background: var(--gn-bg); border: 1px solid var(--gn-line); border-radius: 12px; padding: 0 1.2rem; transition: border-color .2s, box-shadow .2s; }
.gnh-faq__list details[open] { border-color: var(--gn-green); box-shadow: var(--gn-shadow-sm); }
.gnh-faq__list summary { cursor: pointer; list-style: none; padding: 1.1rem 0; font-weight: 700; color: var(--gn-ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.gnh-faq__list summary::-webkit-details-marker { display: none; }
.gnh-faq__list summary::after { content: "+"; color: var(--gn-green-700); font-size: 1.4rem; font-weight: 400; transition: transform .2s; }
.gnh-faq__list details[open] summary::after { transform: rotate(45deg); }
.gnh-faq__list p { margin: 0 0 1.1rem; color: var(--gn-mute); }

/* ---------- Final CTA (dark) ---------- */
.gnh-final__inner { text-align: center; max-width: 760px; margin-inline: auto; }
.gnh-final__inner h2 { color: #fff; }
.gnh-final__inner p { color: #C9C9C4; margin: 1rem 0 1.8rem; font-size: var(--gn-step-1); }
.gnh-final__ctas { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.gn-btn--lg { padding: 1.1em 1.9em; font-size: var(--gn-step-1); }

/* ---------- Footer ---------- */
.gnh-foot { background: #161616; color: #C9C9C4; padding: clamp(2.5rem,2rem+2vw,4rem) 0 1.5rem; }
.gnh-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.gnh-foot__logo { height: 56px; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: .96; }
.gnh-foot__tagline { font-size: .9rem; color: #9a9a9a; max-width: 32ch; }
.gnh-foot h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .9rem; }
.gnh-foot address { font-style: normal; color: #B8B8B3; line-height: 1.7; font-size: .92rem; }
.gnh-foot__col p { font-size: .92rem; line-height: 1.8; }
.gnh-foot__col a:hover { color: var(--gn-green); }
.gnh-foot ul { list-style: none; margin: 0; padding: 0; line-height: 2; font-size: .92rem; }
.gnh-foot__base { border-top: 1px solid #2a2a2a; margin-top: 2.5rem; padding-top: 1.4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; font-size: .8rem; color: #7a7a7a; }
@media (max-width: 820px) { .gnh-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .gnh-foot__grid { grid-template-columns: 1fr; } }

/* Logo uses charcoal saw — invert trick won't keep green/red; instead show as-is on light, and on dark footer keep a white plate */
.gnh-foot__logo { filter: none; background: #fff; padding: 8px 12px; border-radius: 10px; }

/* =====================================================================
   Image-fill update (2026-06-01) — hero photo, proof strip, upgraded
   shape diagrams, brass machine-icon tiles, "what we build" row.
   ===================================================================== */

/* Hero image */
.gnh-hero__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--gn-radius-lg); box-shadow: var(--gn-shadow); }

/* Non-numeric proof strip (replaces numeric counters) */
.gnh-proof__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1.6rem; }
.gnh-proof__item { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: var(--gn-ink-2); font-size: var(--gn-step-0); }
.gnh-proof__item svg { width: 1.15em; height: 1.15em; fill: none; stroke: var(--gn-green-700); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Upgraded top-down shape diagrams */
.gnh-shape .gnh-shape__svg { width: 74px; height: auto; fill: var(--gn-charcoal); transition: fill .22s var(--gn-ease); }
.gnh-shape:hover .gnh-shape__svg { fill: var(--gn-green-700); }
.gnh-shape__svg .gnh-hob { fill: var(--gn-green); }

/* Machine icon tiles (brass line-icons on dark — interim, no stock) */
.gnh-machine__icon { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: var(--gn-radius); }
.gnh-machine__icon svg { width: 64px; height: 64px; color: #C49A63; }
.gnh-soon { font-family: var(--gn-ff-body); font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #9a9a9a; background: #1f1f1f; border: 1px solid #383838; padding: .3em .8em; border-radius: 999px; }

/* What we build row */
.gnh-build__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-bottom: 1.6rem; }
.gnh-build__chip { background: var(--gn-bg); border: 1px solid var(--gn-line); border-radius: var(--gn-radius); padding: 1.1rem .6rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .55rem; transition: transform .2s var(--gn-ease), border-color .2s, box-shadow .2s; box-shadow: var(--gn-shadow-sm); }
.gnh-build__chip:hover { transform: translateY(-4px); border-color: var(--gn-green); box-shadow: var(--gn-shadow); }
.gnh-build__chip .gnh-shape__svg { width: 60px; height: auto; fill: var(--gn-charcoal); }
.gnh-build__chip span { font-weight: 600; font-size: .9rem; color: var(--gn-ink-2); }
@media (max-width: 820px) { .gnh-build__row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .gnh-build__row { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   v3 PREMIUM REFINEMENT (2026-06-01)
   One warm accent (brass) · cream base · charcoal ink · more air ·
   photography-forward · one dark band · editorial rhythm. Scoped to .gnh.
   ===================================================================== */
.gnh {
  /* ONE accent = brass. Green/red vars remapped to brass so all prior usage unifies. */
  --gn-green: #9A7B43; --gn-green-600: #876A37; --gn-green-700: #6E552B; --gn-green-tint: #F1E9D8;
  --gn-red:   #9A7B43; --gn-red-600: #6E552B; --gn-red-tint: #F1E9D8;
  --gn-charcoal: #3A332B;
  --gn-ink: #241F19; --gn-ink-2: #43392E; --gn-mute: #7C7263;
  --gn-bg: #FBF8F2; --gn-surface: #F5EFE4; --gn-surface-2: #EFE7D7; --gn-cream: #FBF8F2;
  --gn-line: #E8DFCD; --gn-dark: #221D17;
  --gn-radius: 8px; --gn-radius-lg: 12px;
  --gn-section-y: clamp(4.5rem, 3.5rem + 4vw, 9rem);
  --gn-shadow:    0 1px 2px rgba(58,46,28,.05), 0 22px 48px -28px rgba(58,46,28,.24);
  --gn-shadow-sm: 0 1px 2px rgba(58,46,28,.05), 0 10px 26px -18px rgba(58,46,28,.22);
  /* calmer type scale */
  --gn-step-5: clamp(2.2rem, 1.7rem + 2.2vw, 3.5rem);
  --gn-step-4: clamp(1.9rem, 1.55rem + 1.5vw, 2.8rem);
  --gn-step-3: clamp(1.5rem, 1.3rem + 1vw, 2.05rem);
  --gn-step-2: clamp(1.28rem, 1.15rem + .55vw, 1.55rem);
  --gn-step-1: clamp(1.1rem, 1.02rem + .35vw, 1.28rem);
  line-height: 1.62;
}
.gnh, .gnh p, .gnh li, .gnh address { letter-spacing: .003em; }
.gnh strong, .gnh b { font-weight: 600; }
.gnh .gn-display, .gnh .gn-h1, .gnh .gn-h2, .gnh .gn-h3 { font-weight: 500; letter-spacing: -.01em; line-height: 1.12; }
.gnh .gn-display { line-height: 1.05; }
/* accent word = quiet italic, no colour clash */
.gnh .gn-accent, .gnh .gn-accent--green { color: inherit; font-style: italic; font-weight: 500; }
.gnh .gn-lead { color: var(--gn-mute); line-height: 1.6; }

/* Eyebrow — brass, refined */
.gnh .gn-eyebrow { color: var(--gn-green-700); font-weight: 600; letter-spacing: .2em; font-size: .76rem; }
.gnh .gn-eyebrow::before { color: var(--gn-green-700); border-color: var(--gn-line); }
.gnh-head-block { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.4rem); }
.gnh-head-block .gn-eyebrow { margin-bottom: 1rem; }

/* Buttons — one brass primary, one outline secondary; gentle */
.gnh .gn-btn { border-radius: 6px; font-weight: 600; box-shadow: none; padding: .9em 1.6em; letter-spacing: .01em; transition: background .2s var(--gn-ease), color .2s var(--gn-ease), transform .2s var(--gn-ease); }
.gnh .gn-btn:hover { transform: translateY(-1px); box-shadow: none; }
.gnh .gn-btn--primary { background: var(--gn-green); color: #fff; }
.gnh .gn-btn--primary:hover { background: var(--gn-green-700); }
.gnh .gn-btn--red { background: var(--gn-green); color: #fff; }
.gnh .gn-btn--red:hover { background: var(--gn-green-700); }
.gnh .gn-btn--ghost { background: transparent; color: var(--gn-ink); border: 1px solid #CDBE9F; }
.gnh .gn-btn--ghost:hover { background: var(--gn-ink); color: var(--gn-bg); border-color: var(--gn-ink); }
.gnh .gn-btn--whatsapp { background: var(--gn-ink); color: #FBF8F2; }
.gnh .gn-btn--whatsapp:hover { background: var(--gn-green-700); color: #fff; }
.gnh .gn-section--dark .gn-btn--ghost { color: #fff; border-color: rgba(247,240,228,.4); }
.gnh .gn-section--dark .gn-btn--ghost:hover { background: #fff; color: var(--gn-dark); }

/* Header */
.gnh-head { background: rgba(251,248,242,.9); }
.gnh-head__phone svg { color: var(--gn-green-700); }
.gnh-nav a::after { background: var(--gn-green-700); }

/* Hero — photography-forward, calm, no coloured gradient */
.gnh-hero { background: var(--gn-bg); padding: clamp(2rem,1rem+3vw,4.5rem) 0 clamp(3rem,2rem+3vw,5.5rem); }
.gnh-hero__inner { grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,1.4rem+3vw,5rem); align-items: center; }
.gnh-hero__title { margin: .6rem 0 1.3rem; }
.gnh-hero__sub { margin-bottom: 1.8rem; }
.gnh-hero__bullets { gap: .55rem 1.6rem; margin-bottom: 1.6rem; }
.gnh-hero__bullets li::before { color: var(--gn-green-700); }
.gnh-hero__audience { border-left-color: var(--gn-green); color: var(--gn-mute); }
.gnh-hero__audience a { color: var(--gn-green-700); }
.gnh-hero__img { aspect-ratio: 5 / 5.2; border-radius: var(--gn-radius-lg); box-shadow: var(--gn-shadow); }
@media (max-width: 880px) { .gnh-hero__img { aspect-ratio: 4 / 3.2; } }

/* Capabilities marquee — understated */
.gnh .gn-marquee__track { --gn-marquee-dur: 50s; }
.gnh-marquee-band { background: var(--gn-surface); border-block: 1px solid var(--gn-line); padding: 1.05rem 0; }
.gnh-marquee-band .gn-marquee__item { color: var(--gn-mute); font-weight: 600; font-size: var(--gn-step-0); letter-spacing: .02em; }
.gnh-marquee-band .gn-marquee__item .dot { background: var(--gn-green); width: .34em; height: .34em; }

/* Proof strip */
.gnh-proof__item { color: var(--gn-ink-2); font-weight: 500; }
.gnh-proof__item svg { stroke: var(--gn-green-700); }
.gnh-proof { border-bottom: 1px solid var(--gn-line); }

/* Cards — quiet */
.gnh .gn-card { background: var(--gn-bg); border: 1px solid var(--gn-line); border-radius: var(--gn-radius-lg); box-shadow: none; padding: clamp(1.6rem,1.2rem+1.4vw,2.4rem); }
.gnh .gn-card:hover { transform: none; box-shadow: var(--gn-shadow-sm); border-color: #DCD2BA; }
.gnh .gn-card__num { color: var(--gn-green-700); font-weight: 500; }

/* Factory — the ONE dark band; tiles blend (no patchy squares) */
.gnh-factory.gn-section--dark { background: var(--gn-dark); }
.gnh-factory .gn-lead { color: #C9C0AE; }
.gnh-machine { background: transparent; border: 1px solid rgba(232,223,205,.16); border-radius: var(--gn-radius-lg); }
.gnh-machine:hover { transform: none; border-color: rgba(201,169,106,.55); }
.gnh-machine h3 { color: #fff; }
.gnh-machine p { color: #BCB3A1; }
.gnh-machine__icon { background: transparent; border: 1px dashed rgba(232,223,205,.22); }
.gnh-machine__icon svg { color: #C9A96A; }
.gnh-soon { background: rgba(0,0,0,.22); border: 1px solid rgba(232,223,205,.16); color: #C7BEAC; }
.gnh-flow { background: rgba(255,255,255,.03); border: 1px solid rgba(232,223,205,.13); }
.gnh-flow__title { color: #fff; font-weight: 500; }
.gnh-flow__steps li { background: rgba(255,255,255,.04); }
.gnh-flow__n, .gnh-flow__steps li::after { color: #C9A96A; }

/* Shapes */
.gnh-shape { box-shadow: none; border-radius: var(--gn-radius-lg); }
.gnh-shape:hover { transform: translateY(-3px); border-color: #DCD2BA; box-shadow: var(--gn-shadow-sm); }
.gnh-shape .gnh-shape__svg { fill: var(--gn-charcoal); }
.gnh-shape:hover .gnh-shape__svg { fill: var(--gn-green-700); }
.gnh-shape__svg .gnh-hob { fill: var(--gn-green); }
.gnh-shape__name { font-weight: 500; }

/* "Also" — editorial alternating image-left / image-right rows */
.gnh-also__grid { grid-template-columns: 1fr; gap: clamp(2.5rem,2rem+2vw,5rem); }
.gnh-also__card { grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem,1rem+2vw,3.5rem); background: transparent; border: 0; border-radius: 0; box-shadow: none; align-items: center; }
.gnh-also__card:hover { transform: none; box-shadow: none; }
.gnh-also__card:nth-of-type(2) .gnh-also__media { order: -1; }
.gnh-also__copy { padding: 0; }
.gnh-also__media { border-radius: var(--gn-radius-lg); box-shadow: var(--gn-shadow); aspect-ratio: 4/3; }
.gnh-link { color: var(--gn-green-700); }
@media (max-width: 760px) { .gnh-also__card, .gnh-also__card:nth-of-type(2) { grid-template-columns: 1fr; } .gnh-also__card:nth-of-type(2) .gnh-also__media { order: 0; } }

/* Pricing — LIGHT now */
.gnh-pricing { background: var(--gn-surface); }
.gnh-tier { background: var(--gn-bg); border: 1px solid var(--gn-line); }
.gnh-tier--featured { border-color: var(--gn-green); box-shadow: var(--gn-shadow); transform: none; }
.gnh-tier__name { color: var(--gn-ink); font-weight: 500; }
.gnh-tier__badge { background: var(--gn-green); color: #fff; }
.gnh-tier__price { color: var(--gn-green-700); font-weight: 500; }
.gnh-tier__price span { color: var(--gn-mute); }
.gnh-tier li { color: var(--gn-ink-2); }
.gnh-tier li::before { color: var(--gn-green-700); }
.gnh-pricing__foot { color: var(--gn-mute); }

/* Brand chips */
.gnh-brandchip { color: var(--gn-charcoal); font-weight: 500; }
.gnh-brands__title { color: var(--gn-mute); }

/* Hardware grid */
.gnh-hw__grid figure { background: var(--gn-surface); border-color: var(--gn-line); }
.gnh-hw__grid figure:hover { border-color: var(--gn-green); transform: translateY(-3px); }

/* Reviews */
.gnh-review { border-color: var(--gn-line); box-shadow: var(--gn-shadow-sm); }
.gnh-review__stars { color: #C9A96A; }

/* B2B audience + calculator — LIGHT */
.gnh-aud { background: var(--gn-surface); border-color: var(--gn-line); }
.gnh-aud svg { color: var(--gn-green-700); }
.gnh-aud h4 { font-weight: 500; }
.gnh-aud__tag { color: var(--gn-green-700); background: var(--gn-green-tint); }
.gnh-job__bullets li::before { color: var(--gn-green-700); }
.gnh-calc { background: var(--gn-bg); color: var(--gn-ink); border: 1px solid var(--gn-line); box-shadow: var(--gn-shadow); }
.gnh-calc__pill { background: var(--gn-green); color: #fff; }
.gnh-calc__head h3 { color: var(--gn-ink); }
.gnh-calc__field { color: var(--gn-ink-2); }
.gnh-calc__field small { color: var(--gn-mute); }
.gnh-calc__field select, .gnh-calc__field input { background: var(--gn-surface); border-color: var(--gn-line); color: var(--gn-ink); }
.gnh-calc__field select:focus, .gnh-calc__field input:focus { outline-color: var(--gn-green); border-color: var(--gn-green); }
.gnh-calc__results { background: var(--gn-surface); }
.gnh-calc__label, .gnh-calc__per { color: var(--gn-mute); }
.gnh-calc__big { color: var(--gn-green-700); font-weight: 500; }
.gnh-calc__cmp { color: var(--gn-ink-2); }
.gnh-calc__cmp strong { color: var(--gn-ink); }
.gnh-calc__cmp--save strong { color: var(--gn-green-700); }
.gnh-calc__foot { color: var(--gn-mute); }

/* FAQ */
.gnh-faq__list details { border-color: var(--gn-line); }
.gnh-faq__list details[open] { border-color: var(--gn-green); }
.gnh-faq__list summary { font-weight: 600; }
.gnh-faq__list summary::after { color: var(--gn-green-700); }

/* Final CTA — LIGHT warm */
.gnh-final { background: var(--gn-surface); }
.gnh-final__inner h2 { color: var(--gn-ink); }
.gnh-final__inner p { color: var(--gn-mute); }

/* Footer — warm dark */
.gnh-foot { background: #211C16; }
.gnh-foot__col a:hover { color: #C9A96A; }
.gnh-foot__base { border-top-color: #3a3228; }

/* Mobile header — compact CTA so nothing overflows (sticky bar carries WhatsApp) */
@media (max-width: 600px) {
  .gnh-head__cta .gn-btn--whatsapp span { display: none; }
  .gnh-head__cta .gn-btn--whatsapp { padding: .7em .85em; }
  .gnh-head__inner { gap: 1rem; }
}

/* Clean print — beat hello-elementor reset.css `a[href]:after{content:" ("attr(href)")"}`.
   High specificity (html body …) + !important so it wins regardless of load order. */
@media print {
  html body a[href]::after, html body a[href]:after,
  a[href]::after, a[href]:after,
  .gnh a[href]::after, .gnh a[href]:after { content: "" !important; }
  abbr[title]::after, abbr[title]:after { content: "" !important; }
  .gn-stickybar, .gnmk-mobile-cta { display: none !important; }
}

/* Hardware "What's Inside" — uniform square photo tiles (cover, no black bands) */
.gnh-hw__grid figure { padding: 0; overflow: hidden; background: var(--gn-bg); }
.gnh-hw__grid img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin: 0; display: block; }
.gnh-hw__grid figcaption { padding: .75rem .5rem; }

/* "from" price label */
.gnh-tier__price .gnh-from { display: block; font-family: var(--gn-ff-body); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gn-mute); margin-bottom: .15rem; }