/* Greenfield Bridging — homepage styles.
   Tokens live in design-system/tokens/*.css (loaded first via design-system/styles.css).
   Values here follow the approved v3 design reference exactly. */

/* ---------- Page ---------- */
/* --wrap-pad is the page gutter. Every full-bleed element (the fact bands, the header
   bar, the nav panel) cancels or repeats it, so it has to be one value rather than the
   same number written out in four media queries — they drifted apart once already and
   clipped the menu button off the right edge at 320px. */
html { background: var(--gf-paper); --header-h: 84px; --wrap-pad: 40px; }
body {
  background: var(--gf-paper);
  color: var(--gf-slate-700);
  font-family: var(--font-sans);
  font-weight: 300;
  min-width: 320px;
  overflow-x: hidden;
}
a { color: var(--gf-teal-700); text-decoration: none; transition: color 120ms linear; }
a:hover { color: var(--gf-teal-400); }
button { font-family: var(--font-sans); }
input { font-family: var(--font-sans); }
input:focus { outline: 2px solid var(--gf-teal-400); outline-offset: 0; }
:focus-visible { outline: 2px solid var(--gf-teal-400); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--gf-teal-400); color: var(--gf-teal-900); padding: 12px 16px; font-weight: 500;
}
.skip-link:focus { left: 8px; top: 8px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--wrap-pad); }

/* ---------- Shared pieces ---------- */
.btn {
  display: inline-block;
  font-size: 15px; font-weight: 500; line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
.btn--solid { background: var(--gf-teal-400); color: var(--gf-teal-900); padding: 16px 26px; border: 0; }
.btn--solid:hover { background: var(--gf-teal-600); color: #FFFFFF; }
.btn--outline { border: 1px solid rgba(255,255,255,0.42); color: #FFFFFF; padding: 15px 26px; background: none; }
.btn--outline:hover { border-color: var(--gf-teal-400); color: var(--gf-teal-400); }
.btn--band.btn--solid { padding: 15px 24px; }
.btn--band.btn--outline { padding: 14px 24px; }
.btn--submit { padding: 15px 28px; }

.eyebrow {
  margin: 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4;
  color: var(--gf-teal-700);
}
.eyebrow--dark { color: var(--gf-teal-400); }

.section-heading {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-bottom: 12px;
}
.section-heading--ink { border-bottom: 2px solid var(--gf-teal-900); }
.section-heading--hairline { border-bottom: 1px solid var(--gf-line-300); }
.section-heading h2 {
  margin: 0;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1.3;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gf-teal-900);
}
.section-note { font-size: 13px; font-weight: 300; color: var(--gf-slate-500); text-align: right; flex: 0 1 auto; }

.accent-bar { width: 88px; height: 5px; background: var(--gf-teal-400); }

.footnote { margin: 14px 0 0; font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--gf-slate-500); }

/* Plus / minus mark: two 2px rules. The vertical rule hides when open. */
.plus { position: relative; display: block; width: 14px; height: 14px; flex: 0 0 auto; }
.plus::before, .plus::after { content: ""; position: absolute; background: currentColor; display: block; }
.plus::before { top: 6px; left: 0; width: 14px; height: 2px; }
.plus::after { top: 0; left: 6px; width: 2px; height: 14px; transition: opacity 180ms linear; }
.plus--teal { color: var(--gf-teal-400); }

/* ---------- 1. Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: var(--gf-teal-900);
  border-bottom: 1px solid rgba(255,255,255,0.42);
  transition: border-color 160ms linear;
}
.site-header.is-past { border-bottom-color: var(--gf-teal-900); }
.site-header .wrap {
  height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 30px;
}
.wordmark { display: block; flex: 0 0 auto; opacity: 0; pointer-events: none; transition: opacity 200ms linear; }
.site-header.is-past .wordmark { opacity: 1; pointer-events: auto; }
.wordmark img { width: 168px; height: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 400; margin-left: auto; }
.site-nav a { color: rgba(255,255,255,0.86); white-space: nowrap; }
.site-nav a:hover { color: var(--gf-teal-400); }
.site-nav a.is-current { color: #FFFFFF; font-weight: 500; }
.site-header .btn-phone {
  background: var(--gf-teal-400); color: var(--gf-teal-900);
  padding: 13px 20px; font-size: 14.5px; font-weight: 500;
  transition: background-color 120ms linear, color 120ms linear;
}
.site-header .btn-phone:hover { background: var(--gf-teal-600); color: #FFFFFF; }

/* js/main.js lifts .btn-phone out of .site-nav so the nav can collapse on mobile while
   the number stays on the bar. It then sits between them, so the wrap's own gap has to
   match the nav's or the desktop spacing shifts. Both are stepped together below. */
.site-header .wrap > .btn-phone { flex: 0 0 auto; }

/* The menu control. A word plus the system's plus mark — there is no icon set to draw a
   hamburger from, and .expand-all on the homepage already sets this precedent. */
.nav-toggle {
  display: none;
  align-items: center; gap: 10px; flex: 0 0 auto;
  background: none; border: 1px solid rgba(255,255,255,0.42); cursor: pointer;
  padding: 12px 14px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF;
  transition: border-color 120ms linear, color 120ms linear;
}
.nav-toggle:hover { border-color: var(--gf-teal-400); color: var(--gf-teal-400); }
.site-header[data-nav-open="1"] .nav-toggle .plus::after { opacity: 0; }

/* ---------- 2. Hero ---------- */
@keyframes gfP1 { from { opacity: 0; transform: translate(-120%, -14%) rotate(-90deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes gfP2 { from { opacity: 0; transform: translate(0, -150%) rotate(180deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes gfP3 { from { opacity: 0; transform: translate(0, 150%) rotate(180deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes gfP4 { from { opacity: 0; transform: translate(120%, 14%) rotate(90deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes gfSettle { 0%, 68% { transform: none; } 78% { transform: scale(1.035); } 100% { transform: none; } }
@keyframes gfUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gfRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes gfFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gfZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

.hero {
  position: relative; overflow: hidden;
  background: var(--gf-teal-900);
  min-height: 720px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + 56px) 0 0;
}
.hero-photo {
  position: absolute; inset: 0;
  background-image: url("../assets/hero-family.jpeg");
  background-size: cover; background-position: 76% 42%;
  animation: gfZoom 2600ms cubic-bezier(.2,.7,.2,1) both;
}
.hero-scrim { position: absolute; inset: 0; }
.hero-scrim--x { background: linear-gradient(90deg, #0A2626 0%, rgba(10,38,38,0.86) 34%, rgba(10,38,38,0.5) 62%, rgba(10,38,38,0.32) 100%); }
.hero-scrim--y { background: linear-gradient(0deg, rgba(10,38,38,0.88) 0%, rgba(10,38,38,0.22) 46%, rgba(10,38,38,0.5) 100%); }
.hero-content { position: relative; width: 100%; padding-bottom: 64px; }

.mark { position: relative; width: 100%; max-width: 460px; animation: gfSettle 2200ms cubic-bezier(.2,.8,.2,1) 200ms both; }
.mark-box { position: relative; width: 100%; padding-bottom: 30%; }
.mark-piece { position: absolute; inset: 0; overflow: hidden; animation: 1100ms cubic-bezier(.2,.85,.22,1) both; }
.mark-piece img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.mark-piece--1 { clip-path: inset(0 74% 0 0);   animation-name: gfP1; animation-delay: 260ms; }
.mark-piece--2 { clip-path: inset(0 49% 0 26%); animation-name: gfP2; animation-delay: 420ms; }
.mark-piece--3 { clip-path: inset(0 25% 0 51%); animation-name: gfP3; animation-delay: 580ms; }
.mark-piece--4 { clip-path: inset(0 0 0 75%);   animation-name: gfP4; animation-delay: 740ms; }
.mark-rule { height: 5px; background: var(--gf-teal-400); transform-origin: left center; margin-top: 14px; animation: gfUnderline 700ms cubic-bezier(.2,.8,.2,1) 1650ms both; }

.hero-eyebrow { margin-top: 34px; animation: gfRise 700ms cubic-bezier(.2,.8,.2,1) 1750ms both; }
.hero-title {
  margin: 20px 0 0; max-width: 19ch;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(38px, 4.2vw, 62px); line-height: 1.05; letter-spacing: -0.02em;
  color: #FFFFFF; text-wrap: pretty;
  animation: gfRise 700ms cubic-bezier(.2,.8,.2,1) 1870ms both;
}
.hero-lead {
  margin: 22px 0 0; max-width: 52ch;
  font-weight: 300; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.86);
  animation: gfRise 700ms cubic-bezier(.2,.8,.2,1) 1990ms both;
}
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px;
  animation: gfRise 700ms cubic-bezier(.2,.8,.2,1) 2110ms both;
}
.btn-replay {
  background: none; border: 0; padding: 0 0 0 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gf-teal-400); transition: color 120ms linear;
}
.btn-replay:hover { color: #FFFFFF; }

.hero-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,0.42);
  margin: 56px -26px 0;
  animation: gfFade 800ms linear 2300ms both;
}
.fact { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100px; padding: 24px 26px 26px; }
.fact-figure { font-family: var(--font-serif); font-weight: 400; font-size: 27px; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.12; }
.fact-caption { margin: 4px 0 0; font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.66); line-height: 1.35; }

/* ---------- 3. Uses accordion ---------- */
.section .wrap { padding-top: 76px; }
.uses-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 24px; }
.lead { margin: 0; max-width: 62ch; font-weight: 300; font-size: 17px; line-height: 1.55; color: var(--gf-slate-700); }
.expand-all {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gf-teal-700); transition: color 120ms linear;
}
.expand-all:hover { color: var(--gf-teal-400); }
.expand-all[aria-expanded="true"] .plus::after { opacity: 0; }

.uses {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--gf-line-200); margin-top: 32px; align-content: start;
}
.use { background: #FFFFFF; padding: 0 24px; transition: background-color 120ms linear; }
.use:hover { background: var(--gf-paper-sunk); }
.use-head-wrap { margin: 0; font: inherit; letter-spacing: normal; }
.use-head {
  display: flex; align-items: baseline; gap: 16px; width: 100%;
  padding: 18px 0; margin: 0; cursor: pointer;
  background: none; border: 0; text-align: left; color: inherit;
}
.use-text { flex: 1; display: block; }
.use-kicker { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gf-teal-700); }
.use-title { display: block; margin-top: 6px; font-family: var(--font-serif); font-weight: 400; font-size: 19px; letter-spacing: -0.02em; line-height: 1.22; color: var(--gf-teal-900); }
.use[data-open="1"] .plus::after { opacity: 0; }

.use-body {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms linear;
}
.use-body > div { overflow: hidden; min-height: 0; }
.use-body p { margin: 0; padding-bottom: 20px; max-width: 44ch; font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--gf-slate-700); }
.use[data-open="1"] .use-body { grid-template-rows: 1fr; opacity: 1; }

/* ---------- 4. Split ink band ---------- */
.split { margin-top: 76px; }
.split-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; min-height: 400px; background: var(--gf-teal-900); }
.split-copy {
  padding: 64px clamp(40px, 5vw, 96px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  max-width: 720px; margin-left: auto; width: 100%;
}
.split-title { margin: 26px 0 0; max-width: 22ch; font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: #FFFFFF; }
.split-lead { margin: 20px 0 0; max-width: 46ch; font-weight: 300; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.86); }
.split-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.split-photo { position: relative; min-height: 340px; background-image: url("../assets/bank-house.jpg"); background-size: cover; background-position: center; }
.split-scrim { position: absolute; inset: 0; background: var(--gf-photo-scrim); }

/* ---------- 5. Reviews — the five-star ribbon ----------
   A teal tint band rather than paper: the three closing rows (reviews, callback, footer)
   were all shallow and all light, so the page trailed off. The tint gives this one a
   surface of its own and steps ink → tint → ink into the footer.

   Stars are five teal squares, not an icon font — the design system has no iconography,
   and the swatch is one of the two shapes that stand in for it. */
.section--reviews { background: var(--gf-teal-050); border-top: 2px solid var(--gf-teal-900); }
.section--reviews .wrap { padding-top: 60px; }
.rv-foot { padding-top: 0 !important; padding-bottom: 56px; }

.rv-summary { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px; margin-top: 30px; }
.rv-score { flex: 0 0 auto; }
.rv-figure {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(40px, 4.4vw, 62px); line-height: 1; letter-spacing: -0.02em; color: var(--gf-teal-900);
}
.rv-caption { margin: 8px 0 0; max-width: 22ch; font-size: 13.5px; font-weight: 300; line-height: 1.45; color: var(--gf-slate-500); }
.rv-lead { margin: 4px 0 0; flex: 1 1 340px; max-width: 52ch; font-weight: 300; font-size: 16.5px; line-height: 1.55; color: var(--gf-slate-700); }

/* A phone cannot hover, so the sentence promising a hover behaviour is simply untrue
   there. Keyed off the pointer rather than the width: what matters is the input device. */
@media (hover: none) { .rv-hover-note { display: none; } }

.rv-stars { display: flex; gap: 4px; }
.rv-stars i { display: block; width: 12px; height: 12px; background: var(--gf-teal-400); }
.rv-stars--lg { margin-top: 12px; }
.rv-stars--lg i { width: 16px; height: 16px; }

/* Full-bleed marquee. The track holds the cards twice over, so translating it exactly
   -50% lands on an identical frame and the loop is seamless. */
.rv-ribbon {
  margin-top: 44px; overflow: hidden;
  border-top: 2px solid var(--gf-teal-900); border-bottom: 2px solid var(--gf-teal-900);
  background: var(--gf-line-200);
}
/* The CSS animation is the no-JS fallback. When main.js runs it sets animation:none and
   drives the transform itself, because animation-play-state can only stop dead — and
   stopping dead under the cursor reads as a glitch rather than a response. */
.rv-track { display: flex; gap: 1px; width: max-content; animation: rv-scroll 240s linear infinite; will-change: transform; }
.rv-ribbon:hover .rv-track, .rv-ribbon:focus-within .rv-track { animation-play-state: paused; }
@keyframes rv-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.rv-card { flex: 0 0 336px; margin: 0; background: #FFFFFF; padding: 26px 26px 28px; display: flex; flex-direction: column; }
.rv-quote { margin: 16px 0 0; }
.rv-quote p {
  margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 17.5px;
  line-height: 1.42; letter-spacing: -0.01em; color: var(--gf-teal-900);
}
.rv-source { margin-top: auto; padding-top: 20px; font-size: 13px; font-weight: 500; color: var(--gf-slate-600); }
.rv-source span { display: block; margin-top: 3px; font-weight: 300; color: var(--gf-slate-400); }

/* No motion: the ribbon becomes an ordinary horizontally scrollable rail. */
@media (prefers-reduced-motion: reduce) {
  .rv-track { animation: none; }
  .rv-ribbon { overflow-x: auto; }
}

/* ---------- 6. Callback ---------- */
.callback { background: var(--gf-teal-900); margin-top: 76px; scroll-margin-top: var(--header-h); }
.callback .wrap { padding: 64px var(--wrap-pad) 68px; }
.callback-grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 56px; align-items: start; }
.callback-title { margin: 18px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: #FFFFFF; }
.callback-lead { margin: 18px 0 0; max-width: 40ch; font-weight: 300; font-size: 16.5px; line-height: 1.55; color: rgba(255,255,255,0.86); }
.callback-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: end; }
.field { display: block; }
.field-label { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gf-teal-400); }
.field input { width: 100%; background: #FFFFFF; border: 0; padding: 14px; font-size: 15px; font-weight: 300; color: var(--gf-slate-700); }
/* Invalid field. Teal is the affirmative accent everywhere else on the site, so a
   teal ring around a field that is WRONG reads as approval. Errors use clay, the
   system's one reserved negative accent — never red, and never colour alone:
   every marked field also carries wording in its .field__error slot. */
.field input[aria-invalid="true"] { outline: 2px solid var(--form-negative); outline-offset: 0; }
.callback-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.callback-privacy { max-width: 44ch; font-size: 13px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,0.66); }
/* The footer warning repeated at the point someone actually hands over their details, at
   the client's instruction — the footer copy is a full page-scroll away from this button.
   On ink it takes the teal-400 rule the other ink blocks use and white at 0.86; the 0.66
   of the privacy line beside it is too quiet for a warning. It spans the band at every
   breakpoint, so on mobile it lands directly under the submit button. Caps are
   text-transform here too, so a screen reader reads a sentence. */
.callback-risk {
  grid-column: 1 / -1; margin: 0; padding-top: 22px;
  border-top: 2px solid var(--gf-teal-400);
  font-size: 12.5px; font-weight: 600; line-height: 1.55; letter-spacing: 0.04em;
  text-transform: uppercase; color: rgba(255,255,255,0.86);
}
.form-status { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--form-negative); }
.form-status:empty, .form-status[hidden] { display: none; }

/* ---------- Form validation and the spam trap ----------
   --form-negative is a lightened clay. The token value (#8A5A3B) manages only
   2.3:1 on the ink callback band, which is unreadable; this is the same hue at
   6.8:1. Defined here rather than in the design-system tokens because those are
   the handoff copy and are not ours to edit. */
.callback { --form-negative: #D9A07A; }

.field__req { color: var(--form-negative); }
.field__error {
  display: block; margin-top: 7px;
  font-size: 12.5px; font-weight: 400; line-height: 1.4;
  color: var(--form-negative);
}
.field__error[hidden] { display: none; }

/* Off-screen rather than display:none — some bots skip display:none fields, and
   this keeps it in the layout where a bot will find it. Being laid out is also
   exactly why autofill can reach it, which is why the field's NAME is meaningless
   (hp_ref, labelled "Reference code"). Hiding it is not protection on its own. */
.honeypot {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- 7. Footer ---------- */
.site-footer { background: var(--gf-paper); border-top: 2px solid var(--gf-teal-900); }
.site-footer .wrap { padding: 48px var(--wrap-pad) 40px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.1fr; gap: 40px; }
.site-footer img { width: 168px; height: auto; display: block; }
.footer-blurb { margin: 18px 0 0; max-width: 32ch; font-weight: 300; font-size: 14px; line-height: 1.55; color: var(--gf-slate-600); }
.footer-heading { margin: 0; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gf-teal-900); line-height: 1.4; }
.footer-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; font-weight: 300; }
.footer-list--contact { color: var(--gf-slate-600); }
.footer-list--legal { margin-bottom: 0; }
/* The risk warning gets its own full-width line instead of sharing the bottom row with the
   copyright, where it was 12.8px slate-500 and the least prominent text on the page. It
   takes the 2px head rule and the uppercase 600 of an eyebrow, in ink rather than teal-700,
   so it is the heaviest thing in the footer. Prominence has to come from weight, size and
   position — the palette is one hue and carries no red. Caps are set in CSS, not in the
   markup, so a screen reader still reads it as a sentence. */
.footer-risk {
  margin: 32px 0 0; padding-top: 18px;
  border-top: 2px solid var(--gf-teal-900);
  font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gf-teal-900);
}
/* The company disclosure the client supplied: five registered companies, the FCA firm
   reference and the appointed representative line. It ran as one sentence in the narrow
   Regulatory column; at three paragraphs it needs the full width, and it belongs below the
   risk warning rather than above it — this is fine print, and nothing in the footer should
   outweigh the warning. */
.footer-disclosure {
  border-top: 1px solid var(--gf-line-300); margin-top: 22px; padding-top: 18px;
  font-weight: 300; font-size: 12.8px; line-height: 1.55; color: var(--gf-slate-600);
}
/* The rule runs the full width but the text does not: at 12.8px an unconstrained line in
   this footer runs past 160 characters, which is twice a readable measure. */
.footer-disclosure p { margin: 0; max-width: 104ch; }
.footer-disclosure p + p { margin-top: 10px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px;
  margin-top: 20px;
  font-size: 12.8px; font-weight: 300; color: var(--gf-slate-500);
}

/* ---------- Scroll reveal ---------- */
[data-reveal][data-hide="1"] { opacity: 0; }
[data-reveal][data-revealed="1"] { animation: gfRise 620ms cubic-bezier(.2,.8,.2,1) both; }
[data-reveal][data-revealed="1"]:nth-child(2) { animation-delay: 70ms; }
[data-reveal][data-revealed="1"]:nth-child(3) { animation-delay: 140ms; }
[data-reveal][data-revealed="1"]:nth-child(4) { animation-delay: 210ms; }
[data-reveal][data-revealed="1"]:nth-child(n+5) { animation-delay: 280ms; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-reveal], .hero-photo, .mark, .mark-piece, .mark-rule {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .use-body, .plus::after, .wordmark { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .site-nav { gap: 22px; font-size: 14px; }
  .site-header .wrap { gap: 22px; }
}
@media (max-width: 1120px) {
  .hero-facts { grid-template-columns: 1fr 1fr; }
  .uses { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1040px) {
  .site-nav { gap: 16px; font-size: 13.5px; }
  .site-header .wrap { gap: 16px; }
  .site-header .btn-phone { padding: 12px 16px; }
}
@media (max-width: 900px) {
  /* Without JS the nav is all still here and simply wraps, as it did before the menu
     existed. Every link stays reachable; the header is just tall. */
  .site-header .wrap { height: auto; flex-wrap: wrap; padding: 16px 24px; row-gap: 14px; }
  .site-nav { flex-wrap: wrap; row-gap: 12px; }

  /* With JS: one bar of fixed height, links in a panel beneath it. The height is fixed
     on purpose — every masthead offsets itself by --header-h, so a header that changes
     height as the nav wraps pushes each page's first heading under the bar. */
  html { --header-h: 64px; --wrap-pad: 24px; }
  .site-header[data-nav-ready] .wrap {
    height: 64px; flex-wrap: nowrap; padding: 0 var(--wrap-pad); gap: 12px;
  }
  /* The wordmark keeps its reveal-on-scroll here as on desktop — forcing it visible put
     it directly above the hero's own assembled mark on the homepage. It still reserves
     its width while hidden, so the bar is measured the same either way and the three
     items cannot overflow when it appears. */
  .site-header[data-nav-ready] .wordmark img { width: 124px; }
  .site-header[data-nav-ready] .nav-toggle { display: flex; }
  /* The nav is out of flow once it becomes a panel, so the bar is down to three items and
     space-between strands the number in the middle of a wide tablet bar. This puts the
     free space to its left instead, keeping the number and the menu together on the right. */
  .site-header[data-nav-ready] .btn-phone { margin-left: auto; padding: 11px 13px; font-size: 13.5px; }

  .site-header[data-nav-ready] .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin-left: 0;
    background: var(--gf-teal-900);
    border-bottom: 1px solid rgba(255,255,255,0.42);
    /* A short landscape screen must still be able to reach the last link. */
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .site-header[data-nav-ready][data-nav-open="1"] .site-nav { display: flex; }
  .site-header[data-nav-ready] .site-nav a {
    padding: 15px var(--wrap-pad); font-size: 16px;
    border-top: 1px solid rgba(255,255,255,0.16);
  }

  .hero { min-height: 0; padding: calc(var(--header-h) + 4px) 0 56px; }
  .hero-facts { margin-inline: calc(-1 * var(--wrap-pad)); }
  .fact { padding-inline: var(--wrap-pad); }
  /* 16px is a threshold, not a taste: iOS Safari zooms the whole page in when you focus
     an input set smaller than this, and it does not zoom back out afterwards. The visitor
     is left on a page scrolled sideways, mid-enquiry. */
  .field input { font-size: 16px; }

  .callback-grid { grid-template-columns: 1fr; gap: 32px; }
  .split-grid { grid-template-columns: 1fr; }
  .split-photo { min-height: 260px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .reviews { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  /* Three items on a 375px bar. Measured, not guessed — see the note in the header
     block: logo, number and menu together have to clear the viewport with room spare. */
  html { --wrap-pad: 20px; }
  .site-header[data-nav-ready] .wrap { gap: 10px; }
  .site-header[data-nav-ready] .wordmark img { width: 106px; }
  .site-header[data-nav-ready] .btn-phone { padding: 10px 11px; font-size: 13px; }
  .site-header[data-nav-ready] .nav-toggle { padding: 10px 11px; gap: 8px; font-size: 11.5px; }

  .uses, .footer-grid, .callback-form { grid-template-columns: 1fr; }
  .hero-facts { grid-template-columns: 1fr 1fr; }
  .uses-intro { flex-direction: column; align-items: flex-start; gap: 20px; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 6px; }
  .section-note { text-align: left; }

  /* Vertical rhythm. 76px between sections is right on a 1400px screen and enormous on a
     375px one — it turns every page into a column of scrolling with the content pushed
     apart. Closing it up is what makes the site feel designed for the phone rather than
     merely surviving on it. */
  .section .wrap { padding-top: 52px; }
  .split, .callback { margin-top: 52px; }
  .callback .wrap { padding-top: 44px; padding-bottom: 48px; }
  .section--reviews .wrap { padding-top: 44px; }
  .rv-foot { padding-bottom: 40px !important; }

  /* Tap targets. A footer link is 17px of text with a 9px gap either side — about 26px of
     reachable row on a touch screen, well under the 44px a fingertip actually needs.
     Making the anchor a block gives it the full row width as well as the height. */
  .footer-list { gap: 0; }
  .footer-list a { display: block; padding: 11px 0; }
  .footer-list li:not(:has(a)) { padding: 11px 0; }
  .site-footer .wrap { padding-top: 36px; }

  /* Secondary controls that are otherwise a 15px-tall strip of text. */
  .expand-all, .btn-replay { padding-top: 10px; padding-bottom: 10px; }

  /* Narrower than the card so the edge of the next one shows, which is the only cue that
     the ribbon is a rail of many rather than one quote. */
  .rv-card { flex: 0 0 280px; padding: 22px 22px 24px; }

  /* The two figures were each claiming a full row — 48px gaps and a 22ch caption push
     them past the viewport and they wrap. Sharing one row keeps the summary to a screen. */
  .rv-summary { gap: 26px 20px; margin-top: 24px; }
  .rv-score { flex: 1 1 140px; }
  .rv-caption { max-width: none; }
  .rv-lead { flex: 1 1 100%; }

  /* Display type. Every headline is a clamp() whose floor was set for a desktop minimum,
     and at 375px the floor is all that ever applies — so the fluid sizing does nothing
     here and the floors are what need lowering. Held just high enough to stay display
     type: the point is fewer four-word lines, not smaller headings. */
  .hero-title { font-size: 33px; }
  .hero-lead { font-size: 16.5px; }
  .split-title { font-size: 28px; }
  .split-lead { font-size: 16px; }
  .callback-title { font-size: 26px; }
  .callback-lead, .lead { font-size: 16px; }
  .rv-figure { font-size: 36px; }
}

/* ---------- 320px-class phones ----------
   iPhone SE 1st gen, and any Android with display zoom turned up. Logo, number and menu
   together come to 371px at the sizes above, and body's overflow-x:hidden means the
   overspill is silently CLIPPED rather than scrollable — the menu button loses its right
   edge and there is no way to reach it. Everything below is buying back those 51px. */
@media (max-width: 360px) {
  html { --wrap-pad: 16px; }
  .site-header[data-nav-ready] .wrap { gap: 8px; }
  .site-header[data-nav-ready] .wordmark img { width: 92px; }
  .site-header[data-nav-ready] .btn-phone { padding: 9px 9px; font-size: 12.5px; }
  .site-header[data-nav-ready] .nav-toggle { padding: 9px 10px; gap: 0; font-size: 11px; }
  /* The plus mark is decoration next to the word; the word alone still says "menu". */
  .site-header[data-nav-ready] .nav-toggle .plus { display: none; }
}