/* =========================================================================
   iTops — site styles
   Built to the iTops Brand Guidelines (2020) and the live itops.nz design.

     1. Brand tokens
     2. Reset & base
     3. Layout
     4. Buttons
     5. Header
     6. Banner + the yellow graphic device
     7. Content blocks
     8. Forms
     9. Footer
    10. Responsive
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. BRAND FONTS — self-hosted so the site works offline and makes no
   external requests. Montserrat (300/400/500/600/700) + Kalam Bold, the two
   Google Fonts named in the brand guidelines.
   ------------------------------------------------------------------------- */
@font-face { font-family: Montserrat; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/montserrat-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/montserrat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/montserrat-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/montserrat-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/montserrat-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Kalam; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/kalam-latin-700-normal.woff2) format('woff2'); }

/* -------------------------------------------------------------------------
   1. BRAND TOKENS
   Colours are the guideline palette, matched to the values actually used in
   the live site's assets (the SVG icons ship as #FCD602 / #00132D).
   Guideline reference values: yellow #fbd705, dark blue #00152c, blue #223d94.
   ------------------------------------------------------------------------- */
:root {
  --yellow: #fcd602;          /* primary brand colour, used generously */
  --yellow-soft: #fef4b8;
  --blue: #223d94;            /* used sparingly, to complement the yellow */
  --dark: #00132d;            /* dark blue — type, dark bands, footer */
  --white: #ffffff;
  --grey: #f5f6f8;            /* light section background */
  --grey-line: #e2e5ea;
  --ink: #00132d;
  --ink-soft: #4a5768;

  /* Type — Montserrat for everything, Kalam Bold for the brand line only */
  --font: Montserrat, "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;
  --font-script: Kalam, "Comic Sans MS", cursive;

  --fs-body: 16px;
  --fs-lead: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h1: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --fs-script: clamp(3rem, 2rem + 5vw, 5.75rem);

  --wrap: 1240px;
  --wrap-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --band-y: clamp(3rem, 7vw, 5.625rem);
  --header-h: 100px;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(0, 19, 45, .08);
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { color: var(--dark); font-weight: 700; line-height: 1.2; margin: 0 0 .55em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--dark); text-underline-offset: 3px; }
a:hover { color: var(--blue); }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--dark); color: #fff; padding: .75rem 1.25rem; }
.skip-link:focus { left: 0; }

.arrow { width: 1em; height: 1em; flex: none; }

/* -------------------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------------------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap.narrow { max-width: var(--wrap-narrow); }

.band { padding-block: var(--band-y); position: relative; }
.band--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.band--grey { background: var(--grey); }

.section-title { margin-bottom: 1rem; }
.section-intro { max-width: 70ch; color: var(--ink-soft); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.lede { font-size: var(--fs-lead); font-weight: 400; line-height: 1.55; }
.center { text-align: center; margin-inline: auto; max-width: 62ch; }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 700; margin-bottom: .75rem; }

/* -------------------------------------------------------------------------
   4. BUTTONS — brand pill, Montserrat Bold 18px, 12px/40px
   ------------------------------------------------------------------------- */
.button {
  display: inline-block; border: 2px solid transparent; border-radius: 9999px;
  padding: 12px 40px; font-size: 18px; font-weight: 700; line-height: 1.25;
  text-decoration: none; cursor: pointer; transition: .3s;
}
.button--sm { font-size: 14px; padding: 9px 26px; }
.button--yellow { background: var(--yellow); color: var(--dark); }
.button--yellow:hover { background: var(--dark); color: var(--yellow); }
.button--white { background: var(--white); color: var(--dark); }
.button--white:hover { background: var(--yellow); color: var(--dark); }

.card-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--dark);
  border-bottom: 2px solid var(--yellow); padding-bottom: 2px;
}
.card-link:hover { color: var(--blue); border-color: var(--blue); }
.card-link .arrow { transition: transform .2s ease; }
.card-link:hover .arrow { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   5. HEADER
   ------------------------------------------------------------------------- */
/* The header sits over the top of the hero so the yellow device can run up
   behind it, the way it does on itops.nz. It only paints a white bar once
   the page has scrolled. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent; transition: background .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { background: var(--white); box-shadow: 0 1px 12px rgba(0, 19, 45, .08); }

/* --header-h has to be the height the header actually renders at, because
   everything that has to clear the header is offset by it. Below 640px the
   mobile lockup is 128px wide and 79px tall, so the 100px min-height decides
   the header. From 640px up the desktop lockup is 190px wide and the artwork
   is 1920x1069, so the image itself is 105.8px tall and the header is as tall
   as the image. Measured in the browser pane against itops.nz, whose own
   desktop lockup renders 191x106. */
@media (min-width: 640px) {
  :root { --header-h: 106px; }
}

.header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { margin-right: auto; display: block; }
.brand img { width: 190px; height: auto; }   /* 20-year lockup, sized up 20% twice from the original 132px */

/* Below 640px the markup swaps to the mobile lockup, which is a different
   shape (the white disc is drawn into the artwork). Production draws it at
   128px and gets a 79px header; at the desktop width the header would be
   nearly twice that, which is most of a phone screen given over to a logo. */
@media (max-width: 639px) {
  .brand img { width: 128px; }
}

/* The call button that sits beside the hamburger while the nav is collapsed.
   Production shows it at every width below 1280 and it is the only way to
   phone iTops from a phone without opening the menu first. */
.nav-call { display: none; align-items: center; margin-right: 1rem; }
.nav-call img { width: 28px; height: auto; display: block; }

.primary-nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem); }
.nav-list { display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.5rem); }
.nav-list a {
  display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--dark); text-decoration: none; padding: .5rem 0;
}
.nav-list a:hover, .nav-list a.is-active { color: var(--blue); }
.nav-list a.is-active { box-shadow: inset 0 -3px 0 var(--yellow); }
.caret { width: .65em; height: .65em; }

.has-children { position: relative; }
.submenu {
  position: absolute; top: 100%; left: -1rem; min-width: 260px; padding: .4rem;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.has-children:hover .submenu, .has-children:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { display: block; padding: .6rem .8rem; border-radius: 8px; }
.submenu a:hover { background: var(--yellow-soft); }

.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-phone { display: inline-flex; align-items: center; gap: .45rem; font-size: 14px; font-weight: 700; text-decoration: none; }
.nav-phone img { width: 16px; }

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 0; background: var(--yellow);
  border-radius: 50%; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 20px; height: 2px; background: var(--dark); border-radius: 2px; transition: .2s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   6. BANNER + THE YELLOW GRAPHIC DEVICE
   The brand's graphic device is a circle that is always cropped by the edge
   of the frame — never centred, always clipping over an edge. Here it is a
   real circle positioned so it runs off the left of the viewport, with the
   banner photograph masked into the matching circle on the right using the
   same SVG masks the live site uses.
   ------------------------------------------------------------------------- */
.banner { position: relative; overflow: hidden; background: var(--white); padding-top: var(--header-h); }

/* Wrapper for the two hero circles. Transparent to layout until the
   1280px breakpoint turns it into the clipping frame (section 6 below). */
.banner__frame { display: contents; }

/* The yellow disc below 1280px.
   itops.nz sizes this in JavaScript (app.min.js, function `g`), recomputing a
   clip-path circle on load and on resize. The tiers below are that function's
   own numbers, written as CSS so the shape is right before a script runs
   rather than after — radius r with the centre at (cx, cy), measured from the
   top of the page, which is where this element starts:

     < 420px      r = 250px         centre (52vw, 150px)
     420–767px    r = 100vw / 2.25  centre (0.7r, 0.7r)
     768–1023px   r = 50vw          centre (35vw, 35vw)
     >= 1024px    r = 480px         centre carries the desktop treatment down

   The last tier is the one place this departs from the live site's arithmetic.
   Theirs is anchored to the left edge of their desktop logo, which sits about
   40px outside the page gutter in their markup and not in ours, so copying the
   formula would put the circle in a different place than it looks there. It
   uses the 1280px geometry instead, which keeps the disc from jumping as the
   window crosses that breakpoint. */
.banner__device {
  position: absolute; z-index: 0; background: var(--yellow); border-radius: 50%;
  width: 500px; height: 500px; max-width: none; max-height: none;
  left: calc(52vw - 250px); top: -100px;
}
@media (min-width: 420px) {
  .banner__device {
    width: 88.889vw; height: 88.889vw;
    left: -13.333vw; top: -13.333vw;
  }
}
@media (min-width: 768px) {
  .banner__device {
    width: 100vw; height: 100vw;
    left: -15vw; top: -15vw;
  }
}
@media (min-width: 1024px) {
  .banner__device {
    width: 960px; height: 960px;
    left: calc(50% - 260px - 480px); top: -288px;
  }
}

@media (min-width: 1280px) {
  /* The device runs behind the masked photograph, so the two circles meet
     with no white gap — the same relationship the live site has. */
  /* The two circles are sized off the viewport so the relationship holds at
     any width: the yellow one clips off the left edge, the photograph bleeds
     off the right, and their edges meet at 46.5% with no overlap. */
  .banner__device {
    width: 56vw; height: 56vw; max-width: none; max-height: none;
    left: auto; right: 53.5%; top: 50%; transform: translateY(-50%);
  }
  .banner--home .banner__device {
    width: 56vw; height: 56vw; left: auto; right: 53.5%; top: 50%; transform: translateY(-50%);
  }
}

/* The copy column's padding steps up with the viewport, the same ladder the
   live site uses (2rem / 3.5rem+4rem / 4rem+5rem, then the 1280px block below
   takes over). The bottom padding stays at zero on phones on purpose: the
   photograph is meant to start while the yellow is still overhead, so the two
   shapes meet. Padding there opens a white band between them. */
.banner__inner { position: relative; z-index: 2; padding-block: 2rem 0; }
@media (min-width: 768px) {
  .banner__inner { padding-block: 3.5rem 4rem; }
}
@media (min-width: 1024px) {
  .banner__inner { padding-block: 4rem 5rem; }
}
.banner__inner > * { max-width: 30ch; }

.banner__lead { font-size: var(--fs-lead); font-weight: 400; color: var(--dark); max-width: 22ch; }
.banner__kicker { font-size: 1.25rem; font-weight: 700; margin: 1.25rem 0 .25rem; }
.banner__script {
  font-family: var(--font-script); font-weight: 700; font-size: var(--fs-script);
  line-height: 1.05; color: var(--dark); padding-left: 2.5rem; margin: 0;
}
.banner__sub { font-size: var(--fs-lead); color: var(--dark); max-width: 34ch; margin: 0; }

/* Below 1280px the photograph is an ordinary block in the flow, sitting under
   the copy — the same stack the live site uses. It is a full viewport wide and
   nudged right, so it bleeds off the right edge and the banner's overflow
   clips it; that off-centre crop is what gives the dome its shape. The
   1280px block further down lifts it out of the flow and onto the right. */
.banner__image {
  position: relative; z-index: 1; display: block;
  width: 100%; margin-left: 1.5rem; max-width: 62.5rem;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: cover; mask-size: cover;
  -webkit-mask-position: left bottom; mask-position: left bottom;
  /* circle-mask-whole.svg, inlined (see assets/img/ for the source files) */
  -webkit-mask-image: url("data:image/svg+xml,<svg width=%221050%22 height=%22703%22 viewBox=%220 0 1050 703%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M1028.26 703C1042.4 653.5 1050 601.063 1050 546.778C1050 244.801 814.949 -4.04864e-05 525 -1.51382e-05C235.05 1.021e-05 -6.83087e-05 244.801 -4.1909e-05 546.778C-3.71632e-05 601.063 7.59579 653.5 21.7409 703L1028.26 703Z%22 fill=%22%2300132D%22/> </svg>"); mask-image: url("data:image/svg+xml,<svg width=%221050%22 height=%22703%22 viewBox=%220 0 1050 703%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M1028.26 703C1042.4 653.5 1050 601.063 1050 546.778C1050 244.801 814.949 -4.04864e-05 525 -1.51382e-05C235.05 1.021e-05 -6.83087e-05 244.801 -4.1909e-05 546.778C-3.71632e-05 601.063 7.59579 653.5 21.7409 703L1028.26 703Z%22 fill=%22%2300132D%22/> </svg>");
}
.banner--home .banner__image {
  /* circle-mask-whole-home.svg */
  -webkit-mask-image: url("data:image/svg+xml,<svg width=%22920%22 height=%22590%22 viewBox=%220 0 920 590%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M900.951 590C913.345 548.457 920 504.448 920 458.889C920 205.451 714.051 -0.000195618 460 -0.000173409C205.949 -0.000151199 6.15603e-05 205.451 8.37165e-05 458.889C8.76994e-05 504.448 6.65549 548.457 19.0494 590L900.951 590Z%22 fill=%22%2300132D%22/> </svg>"); mask-image: url("data:image/svg+xml,<svg width=%22920%22 height=%22590%22 viewBox=%220 0 920 590%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M900.951 590C913.345 548.457 920 504.448 920 458.889C920 205.451 714.051 -0.000195618 460 -0.000173409C205.949 -0.000151199 6.15603e-05 205.451 8.37165e-05 458.889C8.76994e-05 504.448 6.65549 548.457 19.0494 590L900.951 590Z%22 fill=%22%2300132D%22/> </svg>");
}
.banner--home .banner__image { max-width: 57.5rem; }
@media (min-width: 640px) {
  /* Past the phone widths the photograph is pushed further right so the copy
     above it keeps a clear column — 20% on interior pages, 30% on the home
     page, as the live site has it. */
  .banner__image { margin-left: 20%; }
  .banner--home .banner__image { margin-left: 30%; }
}
.banner__image img {
  display: block; width: 100%; height: auto;
  object-fit: cover; object-position: center bottom;
}
.banner--home .banner__image img { max-height: 36.875rem; }

@media (min-width: 1280px) {
  /* ======================================================================
     HERO — measured from the production DOM, not from a screenshot.

     itops.nz was opened in a real browser at 1425px and 1905px wide and its
     rendered boxes read straight off the page. The result settles what the
     guessing could not:

                        at 1425px wide      at 1905px wide
       banner height        590px               590px      <- FIXED
       yellow circle    960px diameter      960px diameter <- FIXED
       yellow centre y      192px               192px      <- FIXED
       yellow centre x      452px               692px      = 50% - 260px
       photo box         684 x 590           920 x 590     = 48% x full height

     The hero does NOT scale with the window. The band is a fixed 590px and
     the yellow is a fixed 960px circle; only its horizontal position tracks
     the centre of the page. Every earlier version of this file sized the
     composition in vw, which is why it could be made to match at one window
     width and was wrong at every other one.

     The photograph is not a clip-path circle either — production masks it
     with the same SVGs in assets/img/, sized `cover` and pinned to the
     bottom-left, which is what gives the circle its flat bottom edge where
     it meets the band.

     Interior pages: no yellow, photo box 55% wide at 52.5% across, full
     band height, band min-height 703px and free to grow with the copy.

     To re-check any of this, open itops.nz in the browser pane, set a
     viewport, and read the boxes back — do not measure a screenshot.
     ====================================================================== */

  .banner {
    display: block;
    position: relative;
    padding-top: 0;
    /* 703px is production's interior band; the header's height is added on
       top of it because the band starts BELOW the header (see the note on
       .banner__image further down) rather than underneath it. */
    --band-h: calc(703px + var(--header-h));
    min-height: var(--band-h);
  }
  /* Production's hero is 590px of content starting BELOW its 132px header —
     the nav never sits on top of the photograph. Ours had the photo starting
     at y=0 with the fixed header overlaying it, which is what made the top of
     the page look busy. The yellow still runs up behind the header, exactly
     as it does on production. */
  .banner--home { --band-h: calc(590px + var(--header-h)); }

  /* ---- the yellow graphic device: home only, fixed size ---------------- */
  .banner__device,
  .banner--home .banner__device {
    position: absolute; z-index: 0;
    width: 960px; height: 960px;
    max-width: none; max-height: none;
    border-radius: 50%; background: var(--yellow);
    right: auto; transform: none;
    left: calc(50% - 260px - 480px);   /* centre at 50% - 260px */
    top: calc(60px - 480px);           /* centre 60px below the band top */
  }

  /* ---- the photograph -------------------------------------------------- */
  /* The top of the circle sits below the navigation, never behind it.
     itops.nz/about-us was read in the browser pane at 1440px: header 0..132,
     banner top 132, photograph top 132 — the hero starts exactly where the
     header ends. Ours had the photograph at top 0 with the fixed header
     laid over it, so the nav crossed the top of the circle. The band's
     height already has the header's height added to it, so the circle keeps
     its full 703px rather than being squeezed into what is left over. */
  .banner__image {
    position: absolute;
    top: var(--header-h); height: calc(100% - var(--header-h));
    left: 52.5%; width: min(55%, 920px);   /* 920px = the source width */
    right: auto; margin: 0; transform: none;
    border-radius: 0; overflow: hidden; clip-path: none;
    -webkit-mask-size: cover; mask-size: cover;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 0% 100%; mask-position: 0% 100%;
  }
  /* margin-left is reset here too: the 640px rule above is more specific than
     the shorthand `margin: 0` a few lines up, so without this the 30% nudge
     from the mobile stack survives into the desktop layout. */
  .banner--home .banner__image { left: 54.5%; width: 48%; margin-left: 0; }
  .banner__image img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }

  /* ---- the copy -------------------------------------------------------- */
  /* Production runs a 1280px container with the copy in a 640px half
     column. .wrap is 1240px, so half of it is 620px — same shape. */
  /* Production's banner container is 1280px — not the 1240px the rest of the
     page uses — and its copy column is exactly half of that, 640px. At
     1905px wide production's column measures 313..953; this reproduces that
     to the pixel. The column also never exceeds the photograph's left edge,
     so it cannot collide at narrow widths. */
  .banner__inner,
  .banner--home .banner__inner {
    position: relative; z-index: 2;
    --inner-left: max(calc((100vw - 1280px) / 2), var(--gutter));
    width: 100%; max-width: none; margin-inline: 0;
    min-height: var(--band-h);
    padding: var(--header-h) 0 2rem var(--inner-left);
    display: flex; flex-direction: column; justify-content: center;
  }
  .banner__inner > * {
    max-width: min(640px, calc(52.5vw - var(--inner-left) - 2rem));
  }

  /* Production indents the home copy a further 10rem inside the container
     (its own `xl:pl-40`): at 1425px wide the copy starts at x=232, not at
     the container edge. */
  .banner--home .banner__inner {
    justify-content: flex-start;
    padding-top: calc(var(--header-h) + 4.5rem);
    padding-left: calc(var(--inner-left) + 10rem);
  }
  .banner--home .banner__inner > * {
    max-width: min(40rem, calc(54.5vw - var(--inner-left) - 12rem));
  }
  .banner--home .banner__lead { max-width: 24ch; }
  .banner__sub { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 1rem; }
  .banner__intro { font-size: 1.0625rem; line-height: 1.65; color: var(--ink); }
  .banner__intro p + p { margin-top: .9em; }
}

/* Page heads without a photograph. The small yellow device that used to clip
   the top-right corner here is gone: production does not use one, and having
   it on Success stories / Blog / Support but not on the banner pages read as
   inconsistent. */
.page-head {
  position: relative; overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 3rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.25rem);
}
/* On pages with no hero photograph the device clips the right-hand edge,
   clear of the left-aligned copy. */
.page-head__device {
  position: absolute; z-index: 0; background: var(--yellow); border-radius: 50%;
  width: 46vw; height: 46vw; max-width: 700px; max-height: 700px;
  left: auto; right: -10vw; top: -55%;
}
@media (max-width: 860px) {
  .page-head__device { width: 60vw; height: 60vw; right: -22vw; top: -34%; }
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head__sub { font-size: var(--fs-lead); max-width: 62ch; margin: 0; }
.page-head--story .page-head__sub { font-weight: 600; }
.page-head .eyebrow a { text-decoration: none; }

/* Circular photograph sitting on the device */
.circle-photo { position: relative; width: min(100%, 30rem); margin-inline: auto; }
.circle-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; position: relative; z-index: 1; }
.circle-photo .logo-circle { width: 100%; }
/* No graphic device behind these photographs — the live site uses a plain
   circular crop here, and the yellow disc fought with the image. */

/* -------------------------------------------------------------------------
   7. CONTENT BLOCKS
   ------------------------------------------------------------------------- */

/* Home tiles */
.tiles { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.tile { display: flex; flex-direction: column; align-items: flex-start; }
.tile p { color: var(--ink-soft); margin-bottom: 1.5rem; }
.tile .button { margin-top: auto; }

/* Split image/text rows */
.split { display: grid; gap: clamp(2rem, 6vw, 5rem); grid-template-columns: 1fr 1fr; align-items: center; }
/* .split--media-first  → photograph left, copy right  ("We're built for better IT")
   .split--text-first   → copy left, photograph right  (success-story teaser)   */
.split-body h2 { margin-bottom: 1.25rem; }
.split-sub { font-weight: 700; margin-bottom: 1rem; }
.split-body .button { margin-top: 1rem; }

/* Panels (about) */
.panels { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.panel h3 { font-size: var(--fs-h3); }
.panel p { color: var(--ink-soft); }
.values { display: grid; gap: 1rem; }
.value { position: relative; padding-left: 1.75rem; }
.value__dot { position: absolute; left: 0; top: .55rem; width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); }
.value strong { font-weight: 700; }
.value { font-size: .9375rem; color: var(--ink-soft); }

/* Service cards with the brand illustrations */
.cards { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card { display: flex; flex-direction: column; align-items: flex-start; }
.card-icon { width: 88px; height: auto; margin-bottom: 1.25rem; }
.card p { color: var(--ink-soft); font-size: .9375rem; margin-bottom: 1.25rem; }
.card .card-link { margin-top: auto; }

/* People */
.people { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.person__photo { width: 180px; margin-bottom: 1.1rem; }
.person__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.person h3 { margin-bottom: .1rem; }
.person__role { font-weight: 600; color: var(--blue); margin-bottom: .35rem; }
.person__phone { font-size: .9375rem; margin-bottom: .5rem; }
.person__bio { font-size: .9375rem; color: var(--ink-soft); }

/* How we work */
.hows { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.hows p { color: var(--ink-soft); font-size: .9375rem; }

/* Partners */
.partners { text-align: center; }
.partners h2 { font-size: var(--fs-h3); margin-bottom: 1.5rem; }
.partner-logos { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; align-items: center; }
.partner-logos img { width: 130px; height: auto; }

/* Success story cards */
.story-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.story-card__media { position: relative; display: block; width: 190px; margin-bottom: 1.25rem;
  /* the mark is the link here, not the text inside it; text-decoration set on
     an ancestor can't be cancelled further down, so it has to come off here */
  text-decoration: none; }

/* ---------------------------------------------------------------------------
   Client mark on the success stories.

   The circle is kept — it is the brand's device — but the logo sits INSIDE it
   rather than being cropped by it. A wide logo in a circular object-fit:cover
   loses both its ends; contained and padded, it reads properly. Where there is
   no logo file the circle carries a wordmark of the client's name instead, so
   the grid never has a hole in it.
   --------------------------------------------------------------------------- */
.logo-circle {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: var(--grey); border: 1px solid var(--grey-line);
  position: relative; z-index: 1; overflow: hidden;
  transition: transform .3s, border-color .3s;
}
.logo-circle img {
  /* --logo-w is set per logo by the build, from the file's aspect ratio: a wide
     wordmark fits more width inside a circle than a square mark does, so a
     single fixed width would leave the wide ones looking shrunken. */
  width: var(--logo-w, 66%); height: 66%; object-fit: contain;
}
.logo-circle--text span {
  padding: 0 14%; text-align: center; font-weight: 700; color: var(--dark);
  line-height: 1.25; font-size: .9375rem; letter-spacing: -.01em;
  /* the circle sits inside the card's link, so the wordmark would otherwise
     inherit the link underline and read as a second link */
  text-decoration: none;
}
.logo-circle--feature { background: #fff; }
.logo-circle--feature.logo-circle--text span { font-size: 1.5rem; }
.story-card__media:hover .logo-circle { transform: scale(1.03); border-color: var(--yellow); }
.story-card__sector { text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .35rem; }
.story-card h2 { font-size: var(--fs-h3); margin-bottom: .4rem; }
.story-card h2 a { text-decoration: none; }
.story-card h2 a:hover { color: var(--blue); }
.story-card__sub { font-size: .9375rem; color: var(--ink-soft); margin-bottom: 1.1rem; }

/* Story detail */
.story-section { margin-top: clamp(2rem, 4vw, 3rem); }
.story-section h2 { font-size: var(--fs-h2); }
.ticks { display: grid; gap: .7rem; margin: 1.25rem 0; }
.ticks li { position: relative; padding-left: 1.85rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55rem;
  width: 11px; height: 11px; border-radius: 50%; background: var(--yellow);
}

.pullquote { margin: 0; }
.pullquote blockquote {
  margin: 0 0 1.5rem; padding: 0; font-size: var(--fs-lead); line-height: 1.55;
  font-weight: 500; color: var(--dark); position: relative;
}
.pullquote blockquote::before {
  content: "“"; font-family: Georgia, serif; font-size: 5rem; line-height: 0;
  color: var(--yellow); position: absolute; left: -.55em; top: .45em;
}
.pullquote figcaption { display: flex; align-items: center; gap: 1rem; }
.pullquote figcaption img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.pullquote figcaption span { display: grid; font-size: .9375rem; color: var(--ink-soft); }
.pullquote figcaption strong { color: var(--dark); font-size: 1rem; }

/* Support cards — real iTops icons, which already carry the yellow circle */
.support-grid { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: clamp(2rem, 4vw, 3rem); }
.support-card { display: flex; flex-direction: column; align-items: flex-start; }
.support-card img { width: 64px; height: 64px; margin-bottom: 1.1rem; }
.support-card h3 { margin-bottom: .35rem; }
.support-card p { font-size: .9375rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.support-card .button { margin-top: auto; }

/* The after-hours note on the support page: plain copy, no highlight box. */
.support-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 62ch; margin-inline: auto; text-align: center;
  font-size: .9375rem; color: var(--ink-soft);
}

/* CTA band */
.cta-band { background: var(--dark); text-align: center; }
.cta-lead {
  color: var(--white); font-size: var(--fs-lead); font-weight: 400;
  max-width: 46ch; margin: 0 auto 2rem;
}

/* -------------------------------------------------------------------------
   8. FORMS
   ------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr 1.35fr; align-items: start; }
.contact-details dl { margin: 0; }
.contact-details dt { font-weight: 700; margin-top: 1.15rem; font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; }
.contact-details dd { margin: 0; color: var(--ink-soft); }
.contact-details dd a { color: var(--ink-soft); }

.contact-form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .9375rem; }
.field input, .field textarea {
  font: inherit; color: inherit; width: 100%; padding: .8rem 1rem;
  border: 2px solid var(--grey-line); border-radius: 8px; background: #fff; transition: border-color .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--yellow); }
.field textarea { resize: vertical; }
.contact-form .button { justify-self: start; }
.form-note { font-size: .875rem; color: var(--ink-soft); margin: 0; }

/* -------------------------------------------------------------------------
   9. FOOTER
   ------------------------------------------------------------------------- */
.site-footer { background: var(--dark); color: #c3ccd8; padding-top: clamp(2.5rem, 6vw, 4rem); }
.footer-grid { display: grid; gap: 2.25rem; grid-template-columns: 1.6fr repeat(3, 1fr); padding-bottom: 2.5rem; }
.footer-brand img { width: 150px; }   /* reversed logo — no filter, so nothing washes out */
.footer-tag { font-size: .875rem; max-width: 32ch; margin-top: 1rem; }
.footer-social { display: inline-flex; align-items: center; gap: .5rem; color: #c3ccd8; text-decoration: none; font-size: .875rem; }
.footer-social svg { width: 22px; height: 22px; }
.footer-social:hover { color: var(--yellow); }
.footer-col h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: var(--white); margin-bottom: 1rem; }
.footer-col li { margin-bottom: .55rem; font-size: .875rem; line-height: 1.55; }
.footer-col a { color: #c3ccd8; text-decoration: none; }
.footer-col a:hover { color: var(--yellow); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .13); padding-block: 1.25rem; font-size: .8125rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: #c3ccd8; }
.footer-bottom a:hover { color: var(--yellow); }

/* -------------------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .split, .contact-grid { grid-template-columns: 1fr; }
  .split .split-media { order: -1; max-width: 26rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Production collapses the navigation at 1280px, not at a tablet width: on a
   1280-wide laptop window itops.nz already shows the hamburger. Matching that
   is what the team noticed was missing — at 1100px the old build still tried
   to fit seven top-level items, a phone number and a button on one line. */
@media (max-width: 1279px) {
  .nav-toggle { display: inline-flex; }
  .nav-call { display: inline-flex; }
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 auto 0; display: none; flex-direction: column;
    align-items: stretch; gap: 0; background: #fff; padding: 1rem var(--gutter) 1.75rem;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto; box-shadow: var(--shadow);
  }
  .primary-nav.is-open { display: flex; }
  .site-header:has(.primary-nav.is-open) { background: var(--white); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--grey-line); }
  .nav-list a { padding: .9rem 0; font-size: 1rem; justify-content: space-between; }
  .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 .5rem .9rem; min-width: 0; }
  .submenu a { font-size: .9375rem; padding: .5rem 0; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 1rem; margin-top: 1.25rem; }
  .nav-actions .button { text-align: center; }
  .nav-phone { justify-content: center; }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .banner__script { padding-left: 1.25rem; }
  .button { padding: 11px 30px; font-size: 16px; }
  .pullquote blockquote::before { display: none; }
}

/* Print — case studies get shared as PDFs often enough to be worth it */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .banner__device, .page-head__device { display: none !important; }
  body { color: #000; }
  .band { padding-block: 1rem; }
}


/* -------------------------------------------------------------------------
   11. BLOG
   ------------------------------------------------------------------------- */
.post-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.post-card { display: flex; flex-direction: column; align-items: flex-start; }
/* The post image is a circle, the same device the success story cards and the
   split sections use. 190px is the success story circle's width, so a blog
   card and a story card line up when they sit on the same page. The circle is
   drawn on the link rather than the image so the hover scale stays inside it,
   and text-decoration is cancelled here because the link wraps the mark. */
.post-card__media {
  display: block; width: 190px; max-width: 100%; margin-bottom: 1.25rem;
  aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--grey-line); background: var(--grey);
  text-decoration: none;
  transition: border-color .3s;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.post-card__media:hover { border-color: var(--yellow); }
.post-card__media:hover img { transform: scale(1.03); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: .8125rem; color: var(--ink-soft); margin-bottom: .6rem; }
.post-tag {
  background: var(--yellow); color: var(--dark); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .6875rem;
  border-radius: 999px; padding: .25rem .7rem;
}
.post-card h2 { font-size: var(--fs-h3); margin-bottom: .5rem; }
.post-card h2 a { text-decoration: none; }
.post-card h2 a:hover { color: var(--blue); }
.post-card p { font-size: .9375rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.post-card .card-link { margin-top: auto; }

.post-body h2 { font-size: var(--fs-h2); margin-top: 2.25rem; }
.post-body h3 { margin-top: 1.75rem; }
.post-body ul { display: grid; gap: .7rem; margin: 1.25rem 0; }
.post-body ul li { position: relative; padding-left: 1.85rem; }
.post-body ul li::before {
  content: ""; position: absolute; left: 0; top: .6rem;
  width: 11px; height: 11px; border-radius: 50%; background: var(--yellow);
}
.post-body blockquote {
  margin: 2rem 0; padding: 0 0 0 1.5rem; border-left: 5px solid var(--yellow);
  font-size: var(--fs-lead); font-weight: 500; color: var(--dark); line-height: 1.5;
}
.post-figure { margin: 0 0 clamp(2rem, 4vw, 3rem); border-radius: var(--radius); overflow: hidden; }
.post-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.post-footer {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem;
  border-top: 1px solid var(--grey-line); display: flex; flex-wrap: wrap;
  gap: 1rem; justify-content: space-between; align-items: center;
}
.post-author { font-size: .9375rem; color: var(--ink-soft); }
.post-author strong { color: var(--dark); display: block; }

/* -------------------------------------------------------------------------
   12. CHANGE-BRIEF COMPONENTS
   Breadcrumbs (MET-05), FAQ accordion (MET-03), blog filtering and
   pagination (CR-04), the contact map facade (CR-05), and the heading
   size utilities that decouple level from look (CR-01).
   ------------------------------------------------------------------------- */

/* CR-01 — any heading tag can take any visual size. The tag carries the
   document outline; the class carries the design. */
.t-h1 { font-size: var(--fs-h1); }
.t-h2 { font-size: var(--fs-h2); }
.t-h3 { font-size: var(--fs-h3); }
.t-h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; }

/* Breadcrumbs */
.breadcrumbs { border-bottom: 1px solid var(--grey-line); }
/* The <ol> keeps its browser-default 1em margin unless it is reset — and at
   this font size 1em is 13px, which was opening a 13px white gap above the
   trail and another below it. */
.breadcrumbs ol { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding-block: .9rem; font-size: .8125rem; }

.breadcrumbs li { display: flex; align-items: center; gap: .4rem .6rem; color: var(--ink-soft); }
.breadcrumbs li + li::before { content: "/"; color: var(--ink-300); }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--blue); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--dark); font-weight: 600; }

/* FAQ accordion */
.faqs { display: grid; gap: .75rem; }
.faq { background: #fff; border: 1px solid var(--grey-line); border-radius: var(--radius); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem; cursor: pointer; font-weight: 600; color: var(--dark);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--yellow); position: relative; transition: transform .2s ease;
  background-image: linear-gradient(var(--dark), var(--dark)), linear-gradient(var(--dark), var(--dark));
  background-size: 10px 2px, 2px 10px; background-position: center, center;
  background-repeat: no-repeat;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 1.4rem 1.25rem; color: var(--ink-soft); }
.faq__answer p { margin: 0; }

/* Blog: category chips + pagination */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.chip {
  border: 1.5px solid var(--grey-line); border-radius: 999px; padding: .4rem 1rem;
  font-size: .8125rem; font-weight: 600; text-decoration: none; color: var(--ink-soft);
  transition: .2s;
}
.chip:hover { border-color: var(--dark); color: var(--dark); }
.chip.is-active { background: var(--yellow); border-color: var(--yellow); color: var(--dark); }

.pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.pagination ul { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pagination a {
  display: inline-flex; min-width: 42px; height: 42px; align-items: center; justify-content: center;
  padding: 0 .8rem; border-radius: 999px; border: 1.5px solid var(--grey-line);
  text-decoration: none; font-weight: 600; font-size: .875rem; color: var(--ink-soft);
}
.pagination a:hover { border-color: var(--dark); color: var(--dark); }
.pagination a.is-active { background: var(--dark); border-color: var(--dark); color: #fff; }

/* Featured post spans the grid and runs horizontally */
.post-flag {
  background: var(--dark); color: #fff; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: .6875rem; border-radius: 999px; padding: .25rem .7rem;
}
.post-card--featured { grid-column: 1 / -1; }
/* The featured post's circle is the same size as the featured success story's
   — 478px — rather than the 190px the cards in the grid use, because it has a
   column of its own to fill. */
.post-card--featured .post-card__media { width: min(100%, 29.875rem); }
@media (min-width: 860px) {
  .post-card--featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
  .post-card--featured .post-card__media { margin-bottom: 0; margin-inline: auto; }
  .post-card--featured h2 { font-size: var(--fs-h2); }
}
.post-card__body { display: flex; flex-direction: column; align-items: flex-start; }
a.post-tag { text-decoration: none; }
a.post-tag:hover { background: var(--dark); color: var(--yellow); }

/* CR-05 — map facade. Nothing loads from Google until the button is pressed. */
.map {
  position: relative; width: 100%; border-radius: var(--radius); overflow: hidden;
  background: var(--grey); border: 1px solid var(--grey-line);
  aspect-ratio: 21 / 9; min-height: 260px;
}
/* A 21:9 box with a 260px floor resolves to 607px WIDE once the floor bites,
   which pushed the whole contact page sideways on a phone. Below that point
   the map takes a shape that fits instead. */
@media (max-width: 720px) {
  .map { aspect-ratio: 4 / 3; min-height: 0; }
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__load {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  background:
    radial-gradient(circle at 30% 30%, rgba(252, 214, 2, .35), transparent 55%),
    var(--grey);
  font-family: inherit; font-weight: 700; font-size: 1rem; color: var(--dark);
}
.map__load small { font-weight: 400; font-size: .8125rem; color: var(--ink-soft); }
.map__load:hover { background: var(--yellow-soft); }
.map__pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--dark); box-shadow: 0 6px 16px rgba(0,19,45,.2); }
.map__pin::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--yellow); transform: translate(9.5px, 9.5px); }
.map__link { margin-top: .9rem; font-size: .875rem; }

/* Footer NAP is per-field, not one blob of text */
.nap, address { font-style: normal; }
.nap-hours { color: #9fb0c2; }

/* -------------------------------------------------------------------------
   11. ADVERT LANDING PAGES
   Site header, navigation and footer are the standard ones. What differs is
   between them: a conversion layout rather than a service page. The promise
   and the form sit side by side above the fold, then what's included, then
   proof, then the ask again.
   ------------------------------------------------------------------------- */
.lp-hero {
  position: relative; overflow: hidden;
  /* Clears the fixed site header, the way .banner and .page-head do. */
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
/* The brand's circle, clipped by an edge of the frame. It sits behind the
   form card, never behind the copy: a disc edge running through a headline
   reads as a mistake rather than as the graphic device. */
.lp-hero__device {
  position: absolute; z-index: 0; background: var(--yellow); border-radius: 50%;
  pointer-events: none;
  width: 72vw; height: 72vw; right: -30vw; bottom: -34vw; top: auto; left: auto;
}
@media (min-width: 900px) {
  .lp-hero__device {
    width: 46vw; height: 46vw; max-width: 760px; max-height: 760px;
    /* Starts below the header rather than behind it: the header's own
       "Get in touch" button is yellow, and on the disc it disappeared. */
    right: -14vw; top: var(--header-h); bottom: auto;
  }
}
.lp-hero__inner {
  position: relative; z-index: 1;
  display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
@media (min-width: 900px) {
  .lp-hero__inner { grid-template-columns: 1fr minmax(360px, 420px); }
}
.lp-hero__copy h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; margin: 0 0 1rem; }
.lp-hero__sub { font-size: var(--fs-lead); font-weight: 600; margin: 0 0 1rem; max-width: 34ch; }
.lp-hero__intro { max-width: 52ch; margin: 0 0 1.5rem; }
.lp-hero__call { font-weight: 600; margin: 0; }
.lp-hero__call a { font-weight: 700; }

.lp-form-wrap {
  background: var(--white); border: 1px solid var(--grey-line); border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: var(--shadow);
}
.lp-form-wrap h2 { font-size: 1.375rem; margin: 0 0 1rem; }
.lp-form .field { margin-bottom: .85rem; }
.lp-form button { width: 100%; }
.lp-form__fineprint { font-size: .8125rem; color: var(--ink-soft); margin: .85rem 0 0; }

.lp-points__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 720px) { .lp-points__list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.lp-points__list h3 { font-size: 1.125rem; margin: 0 0 .4rem; }
.lp-points__list p { margin: 0; }

.lp-proof__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .85rem; max-width: 62ch; }
.lp-proof__list li { padding-left: 1.6rem; position: relative; }
.lp-proof__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .6rem; height: .6rem; border-radius: 50%; background: var(--yellow);
}
.lp-proof__note { font-size: .9375rem; color: var(--ink-soft); margin: 0; }

.lp-close { text-align: center; }
.lp-close h2 { margin-bottom: 1rem; }
.lp-close__phone { display: inline-block; margin-left: 1rem; font-weight: 700; }
@media (max-width: 520px) {
  .lp-close .button { display: block; }
  .lp-close__phone { margin: .9rem 0 0; }
}


/* The way back to a landing page.
   Built by assets/js/main.js only for a visitor who actually arrived on one,
   so it never appears for anyone who came from search or typed the address.
   Fixed to the bottom so it cannot disturb the layout of any page it lands
   on, and above the footer rather than in it so it stays reachable. */
.lp-return {
  position: fixed; z-index: 70; left: var(--gutter); bottom: 1rem;
  display: inline-flex; align-items: stretch; max-width: calc(100vw - (var(--gutter) * 2));
  background: var(--white); border: 1px solid var(--grey-line);
  border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 19, 45, .16);
  overflow: hidden;
}
.lp-return__link {
  display: inline-flex; align-items: center; gap: .5rem; min-width: 0;
  padding: .7rem .5rem .7rem 1rem;
  font-size: .9375rem; font-weight: 600; color: var(--dark); text-decoration: none;
}
.lp-return__link:hover { color: var(--blue); }
.lp-return__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-return__arrow { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.lp-return__close {
  border: 0; background: none; cursor: pointer; padding: 0 .85rem 0 .5rem;
  font-size: 1.25rem; line-height: 1; color: var(--ink-soft); font-family: inherit;
}
.lp-return__close:hover { color: var(--dark); }
@media (max-width: 520px) {
  .lp-return { left: var(--gutter); right: var(--gutter); bottom: .75rem; }
  .lp-return__link { flex: 1 1 auto; }
}
@media print { .lp-return { display: none !important; } }