/* ============================================================================
   GI AUTOWATCH · layout CSS for layouts/gi-autowatch (built to
   /autowatch-ghost-london/). Loaded after /brand/ghost-installations.css.
   ============================================================================

   Source of every number: the build brief, §2 (sections S1-S19, live
   geometry from the live page's measured inventory) and §3.3-3.6 (type
   scale, layout-local tokens, components, contrast). Brand values come from
   the compiled kit's tokens (--color-action, --font-display, --radius-md,
   ...); this file adds only the layout-local tokens the brief puts here
   (§3.4), never a second copy of a kit value.

   Type sizes are the brief's §3.3 clamp() scale, NOT the kit's --text-*
   steps: the compiled fluid scale is not monotonic at the small end (G-22,
   --text-lg's minimum is larger than --text-xl's), so nothing here uses it.

   Deliberate departures from the live page (brief §2.0 "Live defects"):
     - a responsive flow layout, no 1280px canvas: nothing sits off-canvas
       and there is no sideways scroll at any width from 320 to 1920;
     - the left columns of S9/S12 and the S12 TrustBox are placed inside the
       container rather than at x-120 / x-175;
     - FAQ answers are 16px on every breakpoint (live mobile 12.8px);
     - back-to-top is desktop-only, so it can never cover body copy on a
       phone; phones get the sticky CTA bar instead (S19, D4);
     - anchor jumps land below the fixed bar (scroll-padding-top);
     - 44px tap targets, visible focus rings, reduced-motion support;
     - button labels 19px bold so white on #ED392C passes AA as large text
       (kit K-a11y).
   Colour changes stay instant, as live (transition: all 0s).

   Breakpoints (brief §2.0): single column below 600px (Unbounce's switch);
   two-column feature rows from 768px; benefit grid 2 columns from 600px and
   3 from 1024px. The sticky CTA bar runs below 768px and back-to-top from
   768px, so the two never overlap.

   Classes are gi-<block>__<element>--<modifier>; is-* are JS state.
   .edge-media is the stack's {{> media}} partial, styled here because
   layout mode does not load sections/_shell/base.css. .trustpilot-widget is
   Trustpilot's own hook, added by gi-page.js when a TrustBox loads.
   ========================================================================== */

/* ---------- 1 · Layout-local tokens (brief §3.4) ---------- */
:root {
  --gi-action-pressed: #d5251c;   /* :active on pills (the live page's declared :active) */
  --gi-strip: #141414;            /* trust strip */
  --gi-legal: #151515;            /* legal band */
  --gi-muted-on-dark: #9b9b9b;    /* legal body, 6.57:1 on #151515 */
  --gi-rule-dark-1: #2d2d2d;      /* 2px, certification band top */
  --gi-rule-dark-2: #434445;      /* 2px, footer top */
  --gi-rule-dark-3: #656565;      /* 1px vertical divider */
  --gi-panel: rgba(255, 255, 255, 0.1);   /* finance tick card */
  --gi-panel-border: #544e4d;     /* its 2px border and dividers */
  --gi-utility-border: #eaeaea;   /* 2px under the utility bar */
  --gi-utility-ink: #010101;      /* utility bar text and buttons (measured) */
  --gi-input-border: #767676;     /* form inputs, 4.54:1 (replaces #bbbbbb) */
  --gi-progress-off: #767676;     /* inactive form progress segments */
  --gi-plate-border: #000000;     /* registration input styled as a front plate [CONFIRM K-plate] */
  --gi-tick: #4bfe2b;             /* the self-hosted tick SVG's own fill */
  --gi-focus: #000000;            /* focus ring on light grounds; #fff on dark (see .gi-band--black) */
  --gi-focus-on-dark: #ffffff;

  --gi-wrap: 1280px;              /* max content width (brief §2.0) */
  --gi-gutter: 20px;              /* 45px from 600px */
  --gi-bar-h: 42px;               /* fixed utility bar incl. its 2px rule; 47px from 600px */
  --gi-anchor-offset: 54px;       /* scroll-padding-top; gi-page.js refines it from the bar */
  --gi-sticky-h: 64px;            /* sticky mobile CTA bar, plus the safe-area inset */
}
@media (min-width: 600px) {
  :root { --gi-gutter: 45px; --gi-bar-h: 47px; --gi-anchor-offset: 59px; }
}

/* ---------- 2 · Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--gi-anchor-offset);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Below 768px the sticky CTA bar covers the bottom of the screen, so a
   control reached by Tab is scrolled clear of it, not half under it
   (WCAG 2.4.11 passed; 2.4.12 did not). */
@media (max-width: 767px) {
  html { scroll-padding-bottom: calc(var(--gi-sticky-h) + env(safe-area-inset-bottom, 0px) + 8px); }
}
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gi-focus); outline-offset: 2px; }
.gi-header:focus, .gi-enquire:focus { outline: none; }
.gi-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The 150px scroll sentinel: the utility bar fixes itself, and back-to-top
   appears, once this has scrolled out of view (live: scrollTop > 150). */
.gi-sentinel { position: absolute; top: 150px; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* ---------- 3 · Shared blocks ---------- */
.gi-wrap {
  width: 100%;
  max-width: var(--gi-wrap);
  margin-inline: auto;
  padding-inline: var(--gi-gutter);
}

.gi-band--white { background: var(--color-surface); }
.gi-band--tint  { background: var(--color-surface-2); }
.gi-band--black { background: var(--color-inverse); color: var(--color-on-inverse); --gi-focus: var(--gi-focus-on-dark); }
.gi-band--image { background: var(--color-inverse); color: var(--color-on-inverse); --gi-focus: var(--gi-focus-on-dark); }

.gi-accent { color: var(--color-action); }

/* Headings (brief §3.3). Nunito 700 everywhere. */
.gi-title { font-family: var(--font-display); font-weight: var(--weight-bold); }
.gi-title--display { font-size: clamp(36px, 5.6vw, 72px); line-height: 1.194; }
.gi-title--section { font-size: clamp(29px, 3.3vw, 42px); line-height: 1.238; }
.gi-title--sub     { font-size: clamp(22px, 2.5vw, 32px); line-height: 1.188; }
/* Lead / sub-heading copy: Nunito Sans 20/34 desktop. */
.gi-lead { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.7; }

/* Pill CTA (brief §3.5): #ED392C, white 19px/700 label, radius 100px, no
   border or shadow, instant hover #E12C21 and pressed #D5251C. Mobile 50px
   tall, desktop 60-70px per slot. */
.gi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  min-width: 228px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-action);
  color: var(--color-on-action);
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: var(--weight-bold);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gi-btn:hover { background: var(--color-action-hover); }
.gi-btn:active { background: var(--gi-action-pressed); }
.gi-btn--block { width: 100%; max-width: 400px; }
@media (min-width: 600px) {
  .gi-btn { min-height: 70px; min-width: 270px; }
  .gi-btn--block { width: auto; max-width: none; }
  .gi-btn--hero { min-height: 68px; min-width: 228px; }
  .gi-btn--protect { min-height: 68px; min-width: 230px; }
  .gi-btn--faq { min-height: 60px; }
}

/* The stack's media partial (sections/_shell/partials/media.html). */
.edge-media { position: relative; }
.edge-media picture { display: block; }
.edge-media img { width: 100%; }

/* ---------- 4 · S1 · Utility bar (block-11 + sticky box-307) ---------- */
/* The outer box keeps the bar's space in the flow, so fixing the bar never
   shifts the page (no CLS); gi-page.js holds it at the bar's real height.
   Both grow rather than clip: with a reader's text spacing (WCAG 1.4.12)
   the line wraps to two, where a fixed height and nowrap cut the phone
   number off and scrolled the page sideways. One line by default, as live. */
.gi-utility { min-height: var(--gi-bar-h); }
.gi-utility__bar {
  min-height: var(--gi-bar-h);
  background: var(--color-surface);
  border-bottom: 2px solid var(--gi-utility-border);
}
.gi-utility__bar.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  animation: gi-fade-in 0.25s ease-out;
}
@keyframes gi-fade-in { from { opacity: 0; } to { opacity: 1; } }
.gi-utility__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--gi-wrap);
  min-height: calc(var(--gi-bar-h) - 2px);
  margin-inline: auto;
  padding-inline: 12px;
}
.gi-utility__text {
  color: var(--gi-utility-ink);
  font-size: 14px;
  font-weight: var(--weight-semi);
  line-height: 22px;
  text-align: center;
  text-wrap: balance;
}
/* Live mobile utility copy is 12.6px; 14px stays legible and fits from
   360px. Below that, 13px keeps the line on one row. */
@media (max-width: 359px) { .gi-utility__text { font-size: 13px; } }
.gi-utility__phone {
  display: inline-block;
  /* 44px tall hit area without growing the 40px bar. */
  padding-block: 11px;
  margin-block: -11px;
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.gi-utility__phone:hover { color: var(--color-action); }
.gi-utility__nav { display: none; }
@media (min-width: 600px) {
  .gi-utility__inner { justify-content: space-between; padding-inline-end: 0; }
  .gi-utility__nav { display: flex; align-self: stretch; }
}
.gi-utility__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--color-surface);
  color: var(--gi-utility-ink);
  font-size: 14px;
  font-weight: var(--weight-bold);
  line-height: 17px;
  text-decoration: none;
}
.gi-utility__link--faqs { width: 60px; }
.gi-utility__link--contact { width: 100px; }
.gi-utility__link:hover, .gi-utility__link:active { background: var(--gi-utility-ink); color: var(--color-on-inverse); }
.gi-utility__link:focus-visible { outline-offset: -3px; }

/* ---------- 5 · S2 · Logo header (block-12) ---------- */
.gi-logobar { background: var(--color-surface); }
.gi-logobar__inner { display: flex; align-items: center; height: 60px; }
.gi-logobar__logo img { width: 155px; height: 40px; }
@media (min-width: 600px) {
  .gi-logobar__inner { height: 100px; }
  .gi-logobar__logo img { width: 217px; height: 56px; }
}

/* ---------- 6 · S3 · Trust strip (block-13) ---------- */
.gi-strip { background: var(--gi-strip); color: var(--color-on-inverse); }
.gi-strip__list {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--gi-wrap);
  min-height: 42px;
  margin-inline: auto;
  padding-inline: 12px;
  font-size: 14px;
  font-weight: var(--weight-semi);
  line-height: 22px;
  text-align: center;
}
.gi-strip__item { white-space: nowrap; }
.gi-strip__item--rating, .gi-strip__item--open { display: none; }
@media (min-width: 768px) {
  .gi-strip__list { justify-content: space-between; min-height: 50px; }
  .gi-strip__item--rating { display: flex; align-items: center; gap: 10px; }
  .gi-strip__item--open { display: block; }
}
.gi-strip__stars { display: block; padding-block: 12px; margin-block: -12px; }
.gi-strip__stars img { width: 109px; height: 20px; }
.gi-strip__link {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
  text-decoration: underline;
}
.gi-strip__link:hover { color: var(--color-action); }
.gi-strip { --gi-focus: var(--gi-focus-on-dark); }

/* ---------- 7 · S4 · Hero (block-14) ---------- */
.gi-hero {
  position: relative;
  overflow: hidden;
  background: #0b0b0b;   /* the art's own near-black, shown until it decodes */
  color: var(--color-on-inverse);
  text-align: center;
  --gi-focus: var(--gi-focus-on-dark);
}
.gi-hero__bg, .gi-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gi-hero__bg img { max-width: none; object-fit: cover; object-position: right center; }
.gi-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 60px 24px;
}
.gi-hero__h1 { max-width: 800px; }
.gi-hero__break { display: none; }
/* 840 rather than the live 800px box: the self-hosted Nunito Sans sets about
   5% wider than the copy Unbounce served, and 840 keeps the live two lines. */
.gi-hero__lede {
  max-width: 840px;
  margin-top: 10px;
  font-size: clamp(16px, 2vw, 26px);
  line-height: 1.7;   /* live mobile 16/27.2 */
}
.gi-btn--hero { margin-top: 22px; }
.gi-trustbox--hero { width: 100%; margin-top: 25px; }
@media (min-width: 600px) {
  .gi-hero__bg img { object-position: center center; }
  .gi-hero__inner { min-height: 660px; padding-block: 160px 56px; }
  .gi-hero__break { display: inline; }
  .gi-hero__lede { margin-top: 2px; line-height: 1.31; }   /* 34/26 */
  .gi-btn--hero { margin-top: 65px; }
  .gi-trustbox--hero { max-width: 900px; margin-top: 39px; }
}

/* ---------- 8 · TrustBoxes (S4, S7, S12) ---------- */
/* Each slot reserves the widget's height so nothing moves when the iframe
   arrives. The horizontal micro TrustBox is the 600px-up variant, the
   carousel the phone one, as live; the reviews carousel runs everywhere. */
.gi-trustbox__widget { position: relative; }
.gi-trustbox__widget--carousel { min-height: 140px; }
.gi-trustbox__widget--horizontal { min-height: 28px; }
.gi-trustbox__widget--wide { display: none; }
@media (min-width: 600px) {
  .gi-trustbox__widget--wide { display: block; }
  .gi-trustbox__widget--narrow { display: none; }
}
.gi-trustbox__fallback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 4px 10px;
  min-height: inherit;
  font-size: 14px;
  font-weight: var(--weight-semi);
  line-height: 22px;
}
.gi-trustbox__stars { width: 109px; height: 20px; }
.gi-trustbox__link {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
  text-decoration: underline;
}
.gi-trustbox__link:hover { color: var(--color-action); }

/* ---------- 9 · S5 · Certification band (block-15) ---------- */
.gi-cert { border-top: 2px solid var(--gi-rule-dark-1); }
.gi-cert__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-block: 32px 30px;
}
.gi-cert__rule { display: none; }
.gi-cert__body { max-width: 560px; }
.gi-cert__logos { display: flex; align-items: center; gap: 45px; margin-top: 12px; }
.gi-cert__logo { flex: none; }
.gi-cert__logo--autowatch img { width: 62px; height: 62px; }
.gi-cert__logo--thatcham img { width: 163px; height: 58px; }
/* The live row (heading, rule, body, logos) needs about 1135px; below 1200px
   the band stays stacked rather than squeezing the body to a column of
   single words. */
@media (min-width: 600px) {
  .gi-cert__logo--autowatch img { width: 70px; height: 69px; }
  .gi-cert__logo--thatcham img { width: 194px; height: 69px; }
}
@media (min-width: 1200px) {
  .gi-cert__inner { flex-direction: row; align-items: center; gap: 0; min-height: 218px; padding-block: 40px; }
  .gi-cert__h2 { flex: 0 0 220px; margin-inline-start: 37px; }
  .gi-cert__rule {
    display: block;
    flex: 0 0 1px;
    height: 100px;
    margin-inline: 50px 61px;
    background: var(--gi-rule-dark-3);
  }
  .gi-cert__body { flex: 0 1 420px; min-width: 0; }
  .gi-cert__logos { margin: 0 0 0 auto; gap: 50px; padding-inline-start: 32px; }
}

/* ---------- 10 · S6, S9, S10 · Video feature rows ---------- */
.gi-feature__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding-block: 20px 28px;
}
.gi-feature__copy { display: flex; flex-direction: column; align-items: flex-start; }
.gi-feature__h2 { max-width: 11em; }
.gi-feature__h2--wide { max-width: 11.6em; }
/* The copy column, not the face, sets the rag: at 1280 the 45fr column is
   500px, and the brief's FIX-N line "you to set up a unique PIN code…" is
   515px, so S6 and S10 each wrapped a line more than live. From 1200px the
   columns are 48/52, a 533px copy column, where both set live's line
   count; the cap only matters on the single-column layout. */
.gi-feature__body { max-width: 540px; margin-top: 16px; }
/* Live's paragraph rhythm: separate <p>s 16px apart (Unbounce's
   .lp-pom-text p margin). S6's desktop copy is one block with a blank line
   (<br><br>), 26px, kept by --blank-line from the two-column layout up. */
.gi-feature__p + .gi-feature__p { margin-top: 16px; }
.gi-feature__copy .gi-btn { margin-top: 32px; }
@media (min-width: 768px) {
  .gi-feature__inner {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    column-gap: clamp(32px, 6.5vw, 80px);
    align-items: center;
    padding-block: clamp(72px, 11vw, 144px);
  }
  .gi-feature--media-end .gi-feature__media { grid-column: 2; grid-row: 1; }
  .gi-feature--media-end .gi-feature__copy { grid-column: 1; grid-row: 1; }
  .gi-feature--media-end .gi-feature__inner { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
  .gi-feature__body { margin-top: 20px; }
  .gi-feature__body--blank-line .gi-feature__p + .gi-feature__p { margin-top: 26px; }
}
@media (min-width: 1200px) {
  .gi-feature__inner { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
  .gi-feature--media-end .gi-feature__inner { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); }
}
/* [CONFIRM K-bleed] Above 1280px the video grows towards the screen edge
   by up to 150px, as the live page's intended (1920px) render does. The
   amount is capped by the side margin, so it can never cause a scroll. */
@media (min-width: 1280px) {
  .gi-feature { --gi-bleed: clamp(0px, (100vw - 1280px) / 2, 150px); }
  .gi-feature__media--start { margin-inline-start: calc(-1 * var(--gi-bleed)); }
  .gi-feature__media--end { margin-inline-end: calc(-1 * var(--gi-bleed)); }
}

/* Wistia click-to-load facade (brief §2.3). */
.gi-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-inverse); }
.gi-video .edge-media, .gi-video picture { height: 100%; }
.gi-video img { height: 100%; object-fit: cover; }
.gi-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.gi-video__play:focus-visible { outline: 3px solid var(--color-on-inverse); outline-offset: -6px; box-shadow: inset 0 0 0 9px var(--color-inverse); }
/* Wistia's own big play button, in the lander's red (brief §2.3). */
.gi-video__icon {
  position: relative;
  width: 64px;
  height: 40px;
  background: var(--color-action);
  opacity: 0.92;
}
.gi-video__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--color-on-action);
  transform: translate(-40%, -50%);
}
.gi-video__play:hover .gi-video__icon { opacity: 1; background: var(--color-action-hover); }
@media (min-width: 768px) {
  .gi-video__icon { width: 125px; height: 78px; }
  .gi-video__icon::before { border-width: 16px 0 16px 26px; }
}
.gi-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gi-video__fallback {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 10px 14px;
  background: var(--color-inverse);
  color: var(--color-on-inverse);
  font-weight: var(--weight-bold);
}

/* ---------- 11 · S7 · Reviews (block-17) ---------- */
.gi-reviews__inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 32px 28px; }
.gi-reviews__icon img { width: 50px; height: 50px; }
.gi-reviews__h2 { margin-top: 28px; }
.gi-reviews__sub { margin-top: 10px; }
.gi-trustbox--reviews { width: 100%; margin-top: 20px; }
@media (min-width: 600px) {
  .gi-reviews__inner { padding-block: 100px 88px; }
  .gi-reviews__h2 { margin-top: 36px; }
  .gi-trustbox--reviews { margin-top: 40px; }
}

/* ---------- 12 · S8 · Finance (block-18) ---------- */
.gi-finance { position: relative; overflow: hidden; }
.gi-finance__bg, .gi-finance__bg .edge-media, .gi-finance__bg picture, .gi-finance__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gi-finance__bg img { max-width: none; object-fit: cover; object-position: center center; }
.gi-finance__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: 32px 30px;
}
.gi-finance__h2 { max-width: 800px; }
.gi-finance__sub { max-width: 800px; margin-top: 12px; }
.gi-finance__deposit { max-width: 800px; margin-top: 14px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.61; }
.gi-finance__deposit strong { color: var(--color-action); font-weight: var(--weight-semi); }   /* live: 600, a true semibold in the variable face */
.gi-finance__list {
  width: 100%;
  max-width: 980px;
  margin-top: 24px;
  border: 2px solid var(--gi-panel-border);
  border-radius: var(--radius-md);
  background: var(--gi-panel);
  text-align: start;
}
.gi-finance__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 20px;
  align-items: center;
  min-height: 82px;
  padding: 12px 16px 12px 18px;
}
.gi-finance__item + .gi-finance__item { border-top: 2px solid var(--gi-panel-border); }
.gi-finance__tick { width: 20px; height: 15px; }
.gi-finance__text { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.7; }
.gi-finance__inner .gi-btn { margin-top: 33px; }
@media (min-width: 600px) {
  .gi-finance__inner { padding-block: 172px 178px; }
  .gi-finance__sub { margin-top: 30px; }
  .gi-finance__deposit { margin-top: 26px; }
  .gi-finance__list { margin-top: 43px; }
  .gi-finance__item {
    grid-template-columns: 29px minmax(0, 1fr);
    column-gap: 45px;
    padding: 24px 32px 24px clamp(32px, 20vw, 205px);
  }
  .gi-finance__tick { width: 29px; height: 22px; }
  .gi-finance__inner .gi-btn { margin-top: 36px; }
}

/* ---------- 13 · S11 · Why use Ghost Installations? (block-21) ---------- */
.gi-why { padding-block: 62px 48px; text-align: center; }
.gi-why__sub { margin-top: 10px; }
.gi-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 32px;
  text-align: start;
}
@media (min-width: 600px) {
  .gi-why { padding-block: 172px 137px; }
  .gi-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 50px; }
}
@media (min-width: 1024px) {
  .gi-why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px 30px; }
}
/* Benefit card (brief §3.5): white, 20px radius, no border or shadow. */
.gi-card { padding: 30px; border-radius: var(--radius-md); background: var(--color-surface); }
.gi-card__icon img { width: auto; height: 50px; }
.gi-card__title {
  margin-top: 25px;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 22px);
  font-weight: var(--weight-bold);
  line-height: 1.318;
}
.gi-card__body { margin-top: 8px; line-height: 1.5; }
@media (min-width: 600px) {
  .gi-card { min-height: 300px; padding: 40px; }
  .gi-card__icon img { height: 60px; }
  .gi-card__title { margin-top: 40px; }
}

/* ---------- 14 · S12 · Closing CTA (block-22) ---------- */
/* Desktop composition sits in the left 640px; the right half is empty by
   design (d-10), aligned to the container's gutter, not the canvas edge. */
.gi-protect__inner { display: flex; flex-direction: column; align-items: flex-start; padding-block: 32px 20px; }
.gi-protect__h2 { max-width: 8.6em; }
.gi-protect__body { max-width: 640px; margin-top: 8px; }
.gi-btn--protect { margin-top: 18px; }
.gi-trustbox--protect { width: 100%; margin-top: 25px; }
@media (min-width: 600px) {
  .gi-protect__inner { padding-block: 162px 146px; }
  .gi-protect__body { margin-top: 4px; }
  .gi-btn--protect { margin-top: 40px; }
  /* Live sat at x-175 in a 900px box whose centred content began at the
     canvas edge; a 560px box at the gutter puts it where it was seen. */
  .gi-trustbox--protect { max-width: 560px; margin-top: 84px; }
  .gi-trustbox--protect .gi-trustbox__fallback { justify-content: flex-start; }
}

/* ---------- 15 · S13 + S14 · FAQ (blocks 25, 26) ---------- */
.gi-faq__intro { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 32px 28px; }
.gi-faq__sub { margin-top: 10px; }
.gi-faq__intro .gi-btn { margin-top: 23px; }
.gi-faq__list { display: grid; gap: 20px; padding-block: 0 38px; }
.gi-faq__list[hidden] { display: none; }
.gi-faq__item { padding: 20px; border-radius: var(--radius-md); background: var(--color-surface); }
.gi-faq__q {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: var(--weight-bold);
  line-height: 1.292;
}
/* 16px on every breakpoint: live mobile answers were 12.8px. */
.gi-faq__a { margin-top: 16px; font-size: 16px; line-height: 1.625; }
.gi-faq__a + .gi-faq__a { margin-top: 16px; }   /* live: separate <p>s, 16px apart */
@media (min-width: 600px) {
  .gi-faq__intro { padding-block: 42px 39px; }
  .gi-faq__list { padding-block: 40px 38px; }
  .gi-faq__item { padding: 30px; }
  .gi-faq__a { margin-top: 24px; }
}

/* ---------- 16 · S15 + S16 · Installation heading and photo strip ---------- */
.gi-install__head { text-align: center; padding-block: 52px 35px; }
.gi-install__sub { margin-top: 10px; }
.gi-install__break { display: inline; }
@media (min-width: 600px) {
  .gi-install__head { padding-block: 112px 72px; }
  .gi-install__break { display: none; }
}
/* Edge to edge, one third of the viewport each from 600px (live overhung
   from x-372.5 to x1591.5, so most screens cropped it unevenly). */
.gi-photos { display: grid; grid-template-columns: minmax(0, 1fr); }
.gi-photos__item--wide-only { display: none; }
@media (min-width: 600px) {
  .gi-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gi-photos__item--wide-only { display: block; }
  .gi-photos__item img { height: clamp(214px, 35vw, 449px); object-fit: cover; }
}

/* ---------- 17 · No-JS enquiry fallback (brief §2.0) ---------- */
/* In flow above the footer without JS. With JS it is hidden unless it is
   the URL's target, which only happens if the form engine did not take
   the click: then the CTA still lands somewhere useful. */
.gi-enquire { background: var(--color-surface-2); text-align: center; }
.gi-enquire__text { padding-block: 40px; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.7; }
.gi-enquire__link {
  display: inline-block;
  padding-block: 9px;
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}
.gi-enquire__link:hover { color: var(--color-action); }
.js .gi-enquire:not(:target) { display: none; }

/* ---------- 18 · S17 · Footer (block-29) ---------- */
.gi-footer__main { border-top: 2px solid var(--gi-rule-dark-2); }
.gi-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 28px; }
.gi-footer__tagline {
  font-family: var(--font-display);
  font-size: clamp(32px, 2.8vw, 36px);
  font-weight: var(--weight-bold);
  line-height: 1.25;
}
.gi-footer__brand { min-width: 0; }
.gi-footer__logo { margin-top: 21px; }
.gi-footer__logo img { width: 207px; height: 56px; }
.gi-footer__heading {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-bold);
  line-height: 26px;
}
.gi-footer__links { margin-top: 6px; }
.gi-footer__link, .gi-footer__contact {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  text-decoration: none;
}
.gi-footer__link { font-size: 16px; line-height: 26px; }
.gi-footer__contact { font-size: 18px; line-height: 26px; overflow-wrap: anywhere; }
.gi-footer__contact--email { text-decoration: underline; }
.gi-footer__link:hover, .gi-footer__contact:hover { color: var(--color-action); }
/* Square finance tab (brief §3.5): flush with the band's bottom edge (live
   overhung it by 6px), centred on phones, at the gutter from 768px. */
.gi-footer__finance {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 222px;
  min-height: 52px;
  margin-top: 36px;
  background: var(--color-action);
  color: var(--color-on-action);
  /* 19px bold, as the pills [CONFIRM K-a11y]: white on #ED392C is 4.02:1,
     AA only as large text. Live's 18px regular was the page's one axe
     contrast failure. The label is unchanged and still fits the tab. */
  font-size: 19px;
  font-weight: var(--weight-bold);
  line-height: 22px;
  text-decoration: none;
}
.gi-footer__finance:hover { background: var(--color-action-hover); }
.gi-footer__finance:active { background: var(--gi-action-pressed); }
.gi-footer__finance:focus-visible { outline-offset: -5px; }
@media (min-width: 768px) {
  .gi-footer__grid {
    grid-template-columns: minmax(0, 555fr) minmax(0, 400fr) minmax(max-content, 235fr);
    grid-template-rows: auto 1fr auto;
    gap: 0;
    min-height: 518px;
    padding-top: 127px;
  }
  .gi-footer__col { padding-top: 12px; }
  /* Live: 71px from a heading's centre to its first link's (inventory
     text-157/158, text-164/165); 26px margins gave 56px. */
  .gi-footer__links { margin-top: 41px; }
  .gi-footer__col--contact .gi-footer__heading { margin-bottom: 41px; }
  .gi-footer__link, .gi-footer__contact { min-height: 34px; }
  .gi-footer__finance { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 48px; }
}

/* ---------- 19 · S18 · Legal band (block-30) ---------- */
.gi-legal { background: var(--gi-legal); color: var(--color-on-inverse); --gi-focus: var(--gi-focus-on-dark); }
.gi-legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "body" "line" "logos" "meta";
  gap: 28px;
  justify-items: center;
  padding-block: 28px 32px;
  text-align: center;
}
.gi-legal__body { grid-area: body; justify-self: start; text-align: start; color: var(--gi-muted-on-dark); font-size: 16px; line-height: 1.5; }
.gi-legal__logos { grid-area: logos; display: flex; align-items: center; gap: 40px; }
.gi-legal__logo { flex: none; }
.gi-legal__logo--autowatch img { width: 62px; height: 62px; }
.gi-legal__logo--thatcham img { width: 174px; height: 62px; }
.gi-legal__line { grid-area: line; font-size: 14px; line-height: 22px; }
.gi-legal__meta { grid-area: meta; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.gi-legal__secure { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 22px; }
.gi-legal__padlock { width: 13px; height: 16px; }
.gi-legal__cards img { width: 220px; }
/* Two rows of left/right pairs from 1024px; below that the 750px body and
   the right-hand logos cannot share a row, so the band stays stacked. */
@media (min-width: 1024px) {
  .gi-legal__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "body logos" "line meta";
    gap: 80px 32px;
    align-items: start;
    padding-block: 55px 46px;
    text-align: start;
  }
  .gi-legal__body, .gi-legal__line { max-width: 750px; }
  .gi-legal__logos { justify-self: end; gap: 40px; }
  .gi-legal__line { justify-self: start; align-self: center; }
  .gi-legal__meta { justify-self: end; flex-direction: row; gap: 8px; }
}

/* ---------- 20 · S19 · Sticky mobile CTA bar and back-to-top ---------- */
.gi-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: calc(var(--gi-sticky-h) + env(safe-area-inset-bottom, 0px));
  padding: 8px 20px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  border-top: 2px solid var(--gi-utility-border);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.2s ease-out, visibility 0.2s;
}
.gi-sticky.is-visible { transform: none; visibility: visible; }
.gi-sticky__call {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-full);
  color: var(--color-ink);
  font-size: 17px;
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.gi-sticky__call:hover { border-color: var(--color-action); color: var(--color-action); }
.gi-sticky__icon { width: 20px; height: 20px; }
.gi-sticky__cta { flex: 1 1 auto; min-width: 0; min-height: 48px; }
/* Keep the end of the page clear of the bar. */
@media (max-width: 767px) {
  .js body { padding-bottom: calc(var(--gi-sticky-h) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) { .gi-sticky { display: none; } }

.gi-top { display: none; }
@media (min-width: 768px) {
  .gi-top {
    position: fixed;
    right: 2%;
    bottom: 2%;
    z-index: 30;
    display: block;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-action);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .gi-top.is-visible { opacity: 1; visibility: visible; }
  .gi-top img { width: 100%; height: 100%; }
  .gi-top:hover { background: var(--color-action-hover); }
  .gi-top:active { background: var(--gi-action-pressed); }
  /* Over any band: a black ring outside a white one. */
  .gi-top:focus-visible { outline: 3px solid #000000; outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-surface); }
}
@media (min-width: 1024px) {
  .gi-top { width: 100px; height: 100px; }
}

/* ---------- 21 · Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gi-utility__bar.is-fixed { animation: none; }
  .gi-sticky, .gi-top { transition: none; }
}