/* ============================================================
   SketchUp Intelligence — landing page
   Reference composition: 1672 x 941.
   `--s` is a scaling unit: every measurement is authored in
   reference pixels as calc(N * var(--s)), so the layout is
   pixel-exact at 1672px and scales proportionally below it.
   ============================================================ */

:root {
  --s: 1px;

  --blue: #0b4fa2;
  --blue-deep: #0a4890;
  --blue-soft: #1a5fb4;
  --badge-bg: #e3eefb;
  --ink: #101418;
  --ink-soft: #2b3038;
  --line: #d9e3f0;

  /* Motion tokens.
     --ease-settle approximates a critically damped spring: it leaves fast
     and eases to rest without overshoot, which is the default Apple reaches
     for on anything that is not carrying a gesture's momentum.
     --ease-soften is its mirror, for the return leg of a reversible
     transition, so out retraces in.
     Durations stand in for "response": ~0.3-0.4s for UI, faster for a press
     because feedback on pointer-down has to feel immediate. */
  --ease-settle: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soften: cubic-bezier(1, 0, 0.68, 0.28);
  --press: 110ms;
  --quick: 200ms;
  --base: 340ms;
  --slow: 560ms;
  --cross: 1200ms;   /* the claim cards crossing - long enough to follow */
}

@media (max-width: 1680px) {
  :root { --s: calc(100vw / 1672); }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  /* stop iOS inflating body text when a phone is rotated */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

img { max-width: 100%; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* let the face pick its optical size where it offers one */
  font-optical-sizing: auto;
}

a { text-decoration: none; color: inherit; }

/* Interactive baseline.
   touch-action removes the legacy tap delay so a press registers at once,
   and the tap highlight goes because we draw our own press state below. */
a, button, input, textarea, select, summary, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Feedback on pointer-DOWN, not release: the press is the moment the user
   is asking "did that land?". Scale is compositor-only, so it is free. */
/* Buttons only - the content cards below stay selectable so their text
   can still be copied. */
.btn,
.closing-btn,
.modal-submit,
.fcard-go,
.modal-close,
.logo {
  -webkit-user-select: none;
  user-select: none;
}

.btn:active,
.closing-btn:active,
.modal-submit:active,
.fcard-go:active {
  transform: scale(0.96);
  transition-duration: var(--press);
}

.fcard:active,
.claim:active,
.cap-point:active {
  transform: scale(0.992);
  transition-duration: var(--press);
}

.logo:active,
.back-link:active,
.cap-nav-link:active,
.modal-close:active {
  transform: scale(0.97);
  transition: transform var(--press) var(--ease-settle);
}

/* A visible ring for keyboard users only, never on mouse press. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.closing-btn:focus-visible,
.site-footer .logo:focus-visible { outline-color: #fff; }

/* form fields already show focus through their border and ring - a second
   outline on top would be two indicators for one state */
.field input:focus-visible,
.field textarea:focus-visible { outline: none; }

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------- page shell ---------------- */

.page {
  position: relative;
  width: 100%;
  height: calc(860 * var(--s));
  overflow: hidden;
  background: #fff;
}

.bg-curves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.bg-curves path { stroke: none; }

.hero-art {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(937 * var(--s));
  z-index: 1;
  pointer-events: none;
}

/* the artwork keeps the original 937x795 slot; the portrait source is
   cropped to fill it, biased downward so the window and seating both read */
.hero-art .backdrop {
  display: block;
  width: 100%;
  aspect-ratio: 937 / 795;
  object-fit: cover;
  object-position: center 62%;
  /* soft fade into the white page, as the previous artwork had */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(90 * var(--s)));
  mask-image: linear-gradient(to right, transparent 0, #000 calc(90 * var(--s)));
}

/* The mascot lives in the copy column now, so that on narrow screens it can
   simply follow the button. On desktop it is lifted out of the flow and
   placed against the artwork's left edge, on the same ground line as before:
   x 568 = the artwork's left edge (735) minus his width (167), and
   y 485 = the artwork's base (795) minus his height (310). */
.hero .mascot {
  position: absolute;
  left: calc(568 * var(--s));
  top: calc(485 * var(--s));
  width: calc(167 * var(--s));
  height: auto;
}

/* ---------------- header ---------------- */

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  height: calc(128 * var(--s));
  padding: 0 calc(68 * var(--s));
}

.logo {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--s));
  margin-right: auto;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: calc(29 * var(--s));
  letter-spacing: -0.007em;
  color: var(--ink);
  white-space: nowrap;
}

.logo img {
  width: calc(58 * var(--s));
  height: calc(58 * var(--s));
  object-fit: contain;
  flex: none;
}

.logo-text span { color: var(--blue); }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--s));
  height: calc(62 * var(--s));
  padding: 0 calc(44 * var(--s));
  border-radius: 999px;
  font-size: calc(17 * var(--s));
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--quick) var(--ease-settle), box-shadow var(--quick) var(--ease-settle), background-color var(--quick) var(--ease-settle);
}

.btn svg {
  width: calc(20 * var(--s));
  height: calc(20 * var(--s));
  stroke-width: 2;
  flex: none;
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 calc(10 * var(--s)) calc(26 * var(--s)) rgba(11, 79, 162, .26);
}

.btn-primary:hover {
  background: var(--blue-deep);
  transform: translateY(calc(-2 * var(--s)));
  box-shadow: 0 calc(14 * var(--s)) calc(32 * var(--s)) rgba(11, 79, 162, .34);
}

/* ---------------- hero copy ---------------- */

.hero {
  position: relative;
  z-index: 3;
  padding: calc(176 * var(--s)) 0 0 calc(68 * var(--s));
  max-width: calc(760 * var(--s));
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--s));
  margin: 0;
  font-size: calc(14.5 * var(--s));
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-soft);
}

.eyebrow .rule {
  width: calc(104 * var(--s));
  height: calc(1.6 * var(--s));
  background: #a9c6e6;
}

h1 {
  margin: calc(26 * var(--s)) 0 0;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: calc(81 * var(--s));
  line-height: 1.04;
  letter-spacing: -0.026em;
  text-transform: uppercase;
  color: #0c0f13;
}

h1 em {
  font-style: normal;
  color: var(--blue);
}

.lede {
  margin: calc(24 * var(--s)) 0 0;
  font-size: calc(19 * var(--s));
  line-height: 1.62;
  color: var(--ink-soft);
}

.cta-row {
  display: flex;
  align-items: center;
  gap: calc(28 * var(--s));
  margin-top: calc(34 * var(--s));
}

/* ---------------- icon badge (used by the feature cards) ---------------- */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--badge-bg);
  color: var(--blue);
  flex: none;
}

.badge svg { width: 23px; height: 23px; }

/* ============================================================
   Tablet / mobile — stacked layout
   ============================================================ */

@media (max-width: 1024px) {
  :root { --s: 1px; }

  /* the desktop composition is absolutely positioned, so on mobile the
     page becomes a flex column and each block is re-ordered explicitly */
  .page {
    display: flex;
    flex-direction: column;
    height: auto;
    /* y stays visible so the sticky header keeps working; x is clipped so
       the artwork's slide-in cannot raise a horizontal scrollbar */
    overflow: visible;
    overflow-x: clip;
    padding-bottom: 56px;
  }

  .bg-curves { display: none; }

  /* on narrow screens the artwork leads, then the copy and the button */
  .header   { order: 1; }
  .hero-art { order: 2; }
  .hero     { order: 3; }

  .header {
    position: sticky;
    top: 0;
    height: 72px;
    padding: 0 20px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid #edf2f8;
  }

  /* min-height only grows the hit area; the header centres it, so nothing moves */
  .logo { font-size: 20px; gap: 10px; min-height: 44px; }
  .logo img { width: 40px; height: 40px; }

  .hero {
    max-width: none;
    padding: 30px 20px 0;   /* sits under the artwork now, not above it */
  }

  .eyebrow {
    font-size: 12px;
    letter-spacing: 0.21em;
    gap: 14px;
  }

  .eyebrow .rule { width: 60px; height: 1.5px; }

  h1 {
    margin-top: 18px;
    font-size: clamp(38px, 10.4vw, 62px);
    letter-spacing: -0.025em;
  }

  h1 br { display: none; }

  .lede {
    margin-top: 18px;
    font-size: 16px;
  }

  .lede br { display: none; }

  .cta-row {
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
  }

  .btn {
    height: 54px;
    padding: 0 26px;
    font-size: 15px;
  }

  .hero-art {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;   /* leads the section, so it sits under the header */
  }

  /* centred on mobile, so the one-sided fade would look lopsided */
  .hero-art .backdrop {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* back into the flow, directly under the Get Started button, centred
     across the column rather than hanging off its left edge */
  .hero .mascot {
    position: static;
    display: block;
    width: clamp(150px, 42vw, 215px);
    margin: clamp(18px, 5vw, 30px) auto 0;
  }

  .badge { width: 42px; height: 42px; }
  .badge svg { width: 20px; height: 20px; }
}

@media (max-width: 480px) {
}

/* small phones: the logo lockup is nowrap, so it sets the minimum width
   the header can take — scale it down rather than let it overflow */
@media (max-width: 420px) {
  .header { padding: 0 16px; }

  .logo { font-size: 16px; gap: 8px; }
  .logo img { width: 32px; height: 32px; }

  .hero { padding: 32px 16px 0; }

  .eyebrow { font-size: 11px; letter-spacing: 0.17em; gap: 10px; }
  .eyebrow .rule { width: 38px; }

  h1 { font-size: clamp(32px, 9.8vw, 44px); }

  .lede { font-size: 15px; margin-top: 16px; }
}

/* narrowest phones: the rule pushes the eyebrow onto a second line */
@media (max-width: 359px) {
  .eyebrow .rule { display: none; }
}

/* ============================================================
   Content sections below the hero

   These use ordinary responsive CSS rather than the hero's fixed
   --s composition. The side gutter is 4.07vw, which is the hero's
   68/1672 gutter expressed as a percentage, so the left edges line
   up with the headline at every width.
   ============================================================ */

/* Horizontal only, deliberately longhand: the `padding` shorthand would also
   zero the top and bottom, silently wiping the vertical padding that
   individual shells (.closing-grid, the footer, the capability nav) set for
   themselves. */
.shell {
  padding-left: clamp(20px, 4.07vw, 68px);
  padding-right: clamp(20px, 4.07vw, 68px);
}

.section-eyebrow {
  margin: 0;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-soft);
}

.section-title {
  margin: clamp(14px, 1.6vw, 24px) 0 0;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 4.1vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  color: #0c0f13;
}

/* ---------------- 02 · introduction ---------------- */

.intro {
  position: relative;
  /* clip, not hidden: `hidden` would make this a scroll container and the
     pinned .intro-stick inside would have nothing to stick against. */
  overflow: clip;
  padding: clamp(68px, 8.5vw, 136px) 0 clamp(68px, 8vw, 124px);
  background: linear-gradient(180deg, #fff 0%, #fbfdff 62%, #f4f9fe 100%);
}

/* soft blue bloom behind the heading */
.intro-glow {
  position: absolute;
  top: -22%;
  right: -10%;
  width: min(760px, 62vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 79, 162, .13) 0%, rgba(11, 79, 162, 0) 68%);
  pointer-events: none;
}

/* oversized brand mark, barely there */
.intro-mark {
  position: absolute;
  right: clamp(-60px, -3vw, -20px);
  bottom: clamp(-40px, -2vw, -10px);
  width: min(360px, 30vw);
  opacity: .05;
  pointer-events: none;
}

.intro .shell { position: relative; }

/* small rule that leads into the eyebrow */
.section-eyebrow .dash {
  display: inline-block;
  width: clamp(18px, 2vw, 34px);
  height: 2px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--blue);
}

.intro .section-title em {
  font-style: normal;
  color: var(--blue);
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}

.intro-body {
  padding-top: clamp(8px, 1.4vw, 20px);
  padding-left: clamp(18px, 1.8vw, 30px);
  border-left: 2px solid #cfe0f5;
}

.intro-body p {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.12vw, 19px);
  line-height: 1.68;
  color: var(--ink-soft);
}

.claims {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 24px);
  /* reined in from the full shell width - at 1500px the pair was running
     most of the screen, which made two short lines of text look stranded */
  max-width: 1040px;
  /* longhand, not a shorthand - `margin: 0 auto` here would silently wipe
     the top margin the section depends on */
  margin-top: clamp(40px, 5vw, 76px);
  margin-left: auto;
  margin-right: auto;
}

.claim {
  display: flex;
  align-items: center;
  gap: clamp(13px, 1.25vw, 20px);
  margin: 0;
  padding: clamp(17px, 1.65vw, 26px) clamp(18px, 1.8vw, 28px);
  border: 1px solid #dbe6f5;
  border-radius: clamp(12px, 1.05vw, 17px);
  /* a touch of gradient rather than flat white, so the card reads as a
     surface against the section's own wash */
  background: linear-gradient(180deg, #fff 0%, #fafcff 100%);
  /* resting shadow: a hairline to seat it, a wide soft one to float it */
  box-shadow: 0 1px 2px rgba(16, 36, 64, .04), 0 8px 20px rgba(16, 36, 64, .055);
  transition: background-color var(--base) var(--ease-settle), border-color var(--base) var(--ease-settle),
              transform var(--base) var(--ease-settle), box-shadow var(--base) var(--ease-settle);
}

.claim:hover {
  background: #f2f7fe;
  border-color: #b9d2f0;
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(11, 79, 162, .06), 0 16px 34px rgba(11, 79, 162, .13);
}

.claim-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 2.85vw, 50px);
  height: clamp(40px, 2.85vw, 50px);
  border-radius: 50%;
  /* lit from above, and casting its own small shadow, so the disc sits on
     the card rather than being painted onto it */
  background: linear-gradient(160deg, #1a66c7 0%, var(--blue) 55%, #09407f 100%);
  box-shadow: 0 4px 10px rgba(11, 79, 162, .3);
  color: #fff;
  flex: none;
  transition: transform var(--base) var(--ease-settle), box-shadow var(--base) var(--ease-settle);
}

.claim:hover .claim-icon {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(11, 79, 162, .38);
}

.claim-icon svg {
  width: clamp(19px, 1.4vw, 23px);
  height: clamp(19px, 1.4vw, 23px);
}

.claim h3 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 21px);
  line-height: 1.22;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: #11161d;
}

/* ---------------- 03 · capabilities ---------------- */

.features {
  padding: clamp(64px, 8vw, 128px) 0 clamp(72px, 9vw, 140px);
  background: linear-gradient(180deg, #f5f9fe 0%, #eef4fc 100%);
}

/* The card stack.
   Cards stay siblings of one another - that is what lets each stay pinned
   while the next scrolls over it, so the pile builds and holds. Each card
   pins a little lower than the one before, leaving its icon and number
   showing. The section heading above is untouched. */
.fgrid {
  display: block;
  max-width: 860px;
  margin: clamp(34px, 4vw, 64px) auto 0;
}


.fcard {
  position: sticky;
  display: flex;
  flex-direction: column;
  /* tight at the top so the icon-and-number row sits inside the strip that
     stays visible once the next card covers this one */
  padding: clamp(18px, 1.7vw, 26px) clamp(28px, 3vw, 52px) clamp(30px, 3vw, 46px);
  /* substantial panels, as in the reference, where each card fills most of
     the viewport rather than reading as a summary tile */
  min-height: clamp(290px, 44vh, 410px);
  margin-bottom: clamp(44px, 5vh, 80px);
  border: 1px solid #dbe6f5;
  border-radius: clamp(14px, 1.2vw, 20px);
  background: #fff;
  /* a resting shadow so each layer separates from the one beneath it */
  box-shadow: 0 -2px 10px rgba(16, 36, 64, .05), 0 16px 38px rgba(16, 36, 64, .10);
  transition: background-color var(--base) var(--ease-settle), border-color var(--base) var(--ease-settle),
              transform var(--base) var(--ease-settle), box-shadow var(--base) var(--ease-settle);
}

.fcard:last-child { margin-bottom: 0; }

/* Each card pins 64px lower than the one before, so the pile shows every
   icon and number down to the live card. Cards deeper in the pile sit
   fractionally smaller so the stacked edges taper away. */
.fcard:nth-child(1) { top: clamp(78px, 11vh, 120px);              transform: scale(.956); }
.fcard:nth-child(2) { top: calc(clamp(78px, 11vh, 120px) +  64px); transform: scale(.962); }
.fcard:nth-child(3) { top: calc(clamp(78px, 11vh, 120px) + 128px); transform: scale(.970); }
.fcard:nth-child(4) { top: calc(clamp(78px, 11vh, 120px) + 192px); transform: scale(.978); }
.fcard:nth-child(5) { top: calc(clamp(78px, 11vh, 120px) + 256px); transform: scale(.986); }
.fcard:nth-child(6) { top: calc(clamp(78px, 11vh, 120px) + 320px); transform: scale(.993); }
.fcard:nth-child(7) { top: calc(clamp(78px, 11vh, 120px) + 384px); transform: none; }

/* after the per-card rules so it wins */
.fgrid .fcard:hover { transform: scale(1) translateY(-4px); }

/* Alternating tone. In the reference the cards run light, dark, light, and
   that contrast is what makes the layers legible as they pile up - six
   identical white panels read as blank strips. These are the brand blue and
   white, so the palette does not change. */
.fcard:nth-child(even) {
  background: var(--blue);
  border-color: var(--blue);
}

.fcard:nth-child(even) h3 { color: #fff; }
.fcard:nth-child(even) p { color: #c8dcf6; }
.fcard:nth-child(even) .fcard-num { color: rgba(255, 255, 255, .45); }

.fcard:nth-child(even) .badge {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

/* ghost button on the dark panels - the base pill is white-on-white here */
.fcard:nth-child(even) .fcard-go {
  background: transparent;
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

.fcard:nth-child(even):hover { background: #0a4890; }

.fcard:nth-child(even):hover .fcard-go,
.fcard:nth-child(even) .fcard-go:hover {
  background: #fff;
  border-color: #fff;
  color: var(--blue);
}

/* the panels are tall now, so the type inside grows to match */
.fcard h3 { font-size: clamp(17px, 1.5vw, 24px); }
.fcard p { font-size: clamp(14.5px, 1.1vw, 17px); max-width: 52ch; }

/* pushes the button to the bottom of the panel */
.fcard p { flex: 1; }

/* a labelled pill rather than a bare arrow, as the reference cards use */
.fcard-go {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: clamp(44px, 3.4vw, 52px);
  padding: 0 clamp(18px, 1.6vw, 26px);
  margin-top: clamp(18px, 1.6vw, 26px);
  border: 1.5px solid #cfe0f5;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: clamp(12.5px, .95vw, 14px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--base) var(--ease-settle), border-color var(--base) var(--ease-settle),
              color var(--base) var(--ease-settle), transform var(--base) var(--ease-settle);
}

.fcard-go svg { width: 19px; height: 19px; stroke-width: 2; }

.fcard:hover .fcard-go,
.fcard-go:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.fcard:hover .fcard-go { transform: translateX(4px); }

.fcard:hover {
  background: #e8f1fd;
  border-color: #b9d2f0;
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(11, 79, 162, .13);
}

.fcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.fcard .badge {
  width: clamp(44px, 3.2vw, 54px);
  height: clamp(44px, 3.2vw, 54px);
  background: var(--badge-bg);
  transition: background-color var(--base) var(--ease-settle);
}

.fcard:hover .badge { background: #fff; }

.fcard .badge svg {
  width: clamp(21px, 1.5vw, 25px);
  height: clamp(21px, 1.5vw, 25px);
}

.fcard-num {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1;
  color: #c3d6ee;
  transition: color var(--base) var(--ease-settle);
}

.fcard:hover .fcard-num { color: var(--blue); }

.fcard h3 {
  margin: clamp(20px, 1.8vw, 30px) 0 0;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.18vw, 19px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #11161d;
}

.fcard h3 i { font-style: normal; color: var(--blue); }

.fcard p {
  margin: clamp(10px, 1vw, 14px) 0 0;
  font-size: clamp(14px, 1.02vw, 16px);
  line-height: 1.6;
  color: #5c6672;
}

/* ---------------- 04 · why ---------------- */

.why {
  padding: clamp(64px, 8vw, 128px) 0 clamp(72px, 9vw, 136px);
  background: #fff;
}

.why .section-title em { font-style: normal; color: var(--blue); }

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 42px);
  margin-top: clamp(40px, 4.6vw, 72px);
}

/* editorial rather than boxed, so it reads differently to the
   capability cards without leaving the design language */
.why-item {
  padding-top: clamp(18px, 1.8vw, 28px);
  border-top: 2px solid #dde7f4;
  transition: border-color var(--base) var(--ease-settle);
}

.why-item:hover { border-top-color: var(--blue); }

.why-num {
  display: block;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1;
  color: #c3d6ee;
  transition: color var(--base) var(--ease-settle);
}

.why-item:hover .why-num { color: var(--blue); }

.why-item h3 {
  margin: clamp(16px, 1.6vw, 26px) 0 0;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #11161d;
}

.why-item p {
  margin: clamp(9px, .9vw, 13px) 0 0;
  font-size: clamp(14px, 1.02vw, 16px);
  line-height: 1.6;
  color: #5c6672;
}

/* ---------------- final CTA + footer ---------------- */

.closing {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #072347 0%, #0a3c7d 55%, #0b4fa2 100%);
  color: #fff;
}

.closing-glow {
  position: absolute;
  top: -40%;
  left: 40%;
  width: min(900px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 180, 255, .20) 0%, rgba(120, 180, 255, 0) 68%);
  pointer-events: none;
}

.closing-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 64px);
  align-items: end;
  padding-top: clamp(64px, 7.5vw, 120px);
}

.closing-copy { padding-bottom: clamp(32px, 4vw, 64px); }

.closing h2 {
  margin: 0;
  max-width: 20ch;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-transform: uppercase;
}

/* inline now that it is part of the one remaining sentence */
.closing h2 em {
  font-style: normal;
  color: #8fc0f7;
}

.closing-copy p {
  margin: clamp(18px, 2vw, 28px) 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.6;
  color: #c2d8f2;
}

.closing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 58px;
  margin-top: clamp(26px, 2.8vw, 40px);
  padding: 0 36px;
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
  transition: transform var(--quick) var(--ease-settle), box-shadow var(--quick) var(--ease-settle), background-color var(--quick) var(--ease-settle);
}

.closing-btn:hover {
  background: #eaf2fd;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .26);
}

.closing-btn svg { width: 19px; height: 19px; stroke-width: 2; }

/* wider than the hero mascot because this artwork includes the lightbulb
   above his hand, so the figure itself sits smaller in the frame */
.closing-mascot {
  display: block;
  width: clamp(200px, 23vw, 360px);
  align-self: end;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .35));
}

.site-footer {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

/* just the lockup and the notice now, on one line */
.site-footer .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px clamp(20px, 3vw, 48px);
  padding-top: 26px;
  padding-bottom: 26px;
}

/* the mark is a solid blue PNG; invert it to sit on the dark panel */
.site-footer .logo {
  font-size: 19px;
  gap: 10px;
  min-height: 44px;
  color: #fff;
}

.site-footer .logo img {
  width: 34px;
  height: 34px;
  filter: brightness(0) invert(1);
}

.site-footer .logo-text span { color: #8fc0f7; }

.footer-note {
  margin: 0;
  font-size: 13px;
  color: #93b3dc;
}

/* ---------------- scroll reveal ---------------- */

/* Scoped to .js-reveal, which an inline script sets. Without JS the
   content is simply visible rather than stuck at opacity 0. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--slow) var(--ease-settle), transform var(--slow) var(--ease-settle);
  will-change: opacity, transform;
}

/* direction variants, so two-column blocks converge rather than all
   sliding the same way */
.js-reveal [data-reveal="left"]  { transform: translateX(-34px); }
.js-reveal [data-reveal="right"] { transform: translateX(34px); }
.js-reveal [data-reveal="zoom"]  { transform: scale(.94); }

/* The two claim cards cross as they arrive - the left one travels in from
   the right, the right one from the left - so they start well outside their
   final positions rather than nudging in. The intro section clips its
   overflow, so the travel cannot raise a scrollbar.

   They also take longer than the other reveals - the crossing is the point,
   so it wants to be watched rather than snapped through. This is the timed
   fallback; where scroll-driven animation is available the block further
   down replaces it with the pinned, diagonal version. */
.js-reveal .claim[data-reveal="left"]  { transform: translateX(-160px); }
.js-reveal .claim[data-reveal="right"] { transform: translateX(160px); }

.js-reveal .claim[data-reveal] {
  transition: opacity var(--cross) var(--ease-settle),
              transform var(--cross) var(--ease-settle);
}

@media (max-width: 680px) {
  /* stacked at this width, so crossing means nothing - they just rise */
  .js-reveal .claim[data-reveal="left"],
  .js-reveal .claim[data-reveal="right"] { transform: translateY(24px); }
}

/* ---------------- 01 / About: pinned diagonal entry ---------------- */

/* The section holds still for a stretch of scrolling, and the two claim
   cards fly in from the bottom corners - outside the frame, diagonally -
   tied to how far through that hold you are. Scrubbing the scrollbar
   scrubs the animation, because it is the scroll position driving it.

   The flight itself is written in app.js, not as a CSS scroll timeline: the
   script owns the cards' transform so the same code runs everywhere, and so
   it can be measured. This block only builds the runway it scrubs against.

   Needs a viewport with room to be pinned in, so phones and short windows
   keep the ordinary timed reveal above. */
@media (min-width: 681px) and (min-height: 640px) {
  .intro { padding-top: 0; padding-bottom: 0; }

  /* the runway: the extra height over 100vh is how long the hold lasts */
  .intro-pin { height: 200vh; }

  .intro-stick {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: clamp(24px, 2.6vw, 44px) 0;
    box-sizing: border-box;
  }

  .intro-stick > .shell { width: 100%; }

  /* While a card is mid-flight the script writes transform every frame, so
     a transition on it would fight the scrub. Colour and shadow still ease,
     and once a card lands the script drops the inline transform, which
     hands the hover lift back. */
  .claim[data-flying] {
    transition: background-color var(--base) var(--ease-settle),
                border-color var(--base) var(--ease-settle),
                box-shadow var(--base) var(--ease-settle);
  }

  @media (prefers-reduced-motion: reduce) {
    /* no pin, no flight - the section behaves like any other */
    .intro { padding-top: clamp(68px, 8.5vw, 136px); padding-bottom: clamp(68px, 8vw, 124px); }
    .intro-pin { height: auto; }
    .intro-stick { position: static; display: block; min-height: 0; padding: 0; }
  }
}

/* The capability cards carry no entry reveal - the sticky stack is their
   animation, and a reveal transform would overwrite the pile's taper. */

.js-reveal [data-reveal].in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* decorative layers drift a little against the scroll; the script sets
   --py and nothing moves if it never runs */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); }

@media (max-width: 1024px) {
  .intro-grid { grid-template-columns: 1fr; }

  /* shallower viewport: tighter pile and a smaller step */
  .fgrid { max-width: none; }
  .fcard { margin-bottom: clamp(32px, 4vh, 56px); }
  .fcard:nth-child(1) { top: clamp(68px, 9vh, 92px); }
  .fcard:nth-child(2) { top: calc(clamp(68px, 9vh, 92px) +  52px); }
  .fcard:nth-child(3) { top: calc(clamp(68px, 9vh, 92px) + 104px); }
  .fcard:nth-child(4) { top: calc(clamp(68px, 9vh, 92px) + 156px); }
  .fcard:nth-child(5) { top: calc(clamp(68px, 9vh, 92px) + 208px); }
  .fcard:nth-child(6) { top: calc(clamp(68px, 9vh, 92px) + 260px); }
  .fcard:nth-child(7) { top: calc(clamp(68px, 9vh, 92px) + 312px); }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-mark { width: 220px; opacity: .04; }
}

@media (max-width: 860px) {
  /* mascot would squeeze the headline below this, so he steps aside */
  .closing-grid { grid-template-columns: 1fr; }
  /* centred: pinning him right left a dead column beside him once the grid
     collapsed to one column */
  .closing-mascot {
    justify-self: center;
    width: clamp(190px, 44vw, 270px);
    margin-top: clamp(14px, 3vw, 28px);
  }
  .closing-copy { padding-bottom: 0; }
  .closing h2 { max-width: none; }
  /* keeps his feet off the footer rule */
  .closing-grid { padding-bottom: clamp(26px, 5vw, 40px); }
}

@media (max-width: 680px) {
  .claims { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; gap: 0; }
  .why-item { padding-bottom: clamp(18px, 2vw, 26px); }

  /* the section above was ending on a large empty band before the panel */
  .why { padding-bottom: clamp(44px, 7vw, 72px); }

  /* footer stacks: lockup, then the notice beneath it, with enough room
     between the two that they read as separate lines rather than one block */
  .site-footer .shell {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-top: 32px;
    padding-bottom: 36px;
  }

  .footer-note {
    font-size: 12.5px;
    line-height: 1.55;
  }
}

@media (max-width: 420px) {
  /* horizontal only - see the note on .shell above */
  .shell { padding-left: 16px; padding-right: 16px; }

  /* the footer lockup is nowrap and larger than the header's, so it is the
     first thing to get clipped on a 320px screen */
  .site-footer .logo { font-size: 16px; gap: 8px; }
  .site-footer .logo img { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal="left"],
  .js-reveal [data-reveal="right"],
  .js-reveal [data-reveal="zoom"],
  .js-reveal .claim[data-reveal],
  .js-reveal .claim[data-reveal="left"],
  .js-reveal .claim[data-reveal="right"] { transition: none; opacity: 1; transform: none; }
  [data-parallax] { transform: none; }
  .fcard, .claim { transition: background-color var(--quick) var(--ease-settle); }
  .fcard:hover, .claim:hover { transform: none; box-shadow: none; }
  .closing-btn:hover { transform: none; }

  /* the stack is scroll-driven motion, so unstack it into a plain list */
  .fcard { position: static; transform: none; margin-bottom: clamp(16px, 2vw, 28px); }

  /* reduced motion is not "no feedback": keep the colour change on press,
     drop only the movement */
  .btn:active, .closing-btn:active, .modal-submit:active, .fcard-go:active,
  .fcard:active, .claim:active, .cap-point:active,
  .logo:active, .back-link:active, .cap-nav-link:active, .modal-close:active {
    transform: none;
  }

  .modal-backdrop, .modal-card,
  .modal.is-closing .modal-backdrop,
  .modal.is-closing .modal-card { animation: none; }
}

/* Translucent chrome becomes frosted-solid rather than see-through. */
@media (prefers-reduced-transparency: reduce) {
  .header,
  .sub-header {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .modal-backdrop {
    background: rgba(10, 14, 22, .88);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ============================================================
   Capability detail pages (capabilities/*.html)
   ============================================================ */

.subpage { background: #fff; }

.sub-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(20px, 4.07vw, 68px);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid #eaf0f8;
}

/* the home page sizes the logo from --s; here it is a fixed size */
.subpage .logo { font-size: 20px; gap: 10px; min-height: 44px; }
.subpage .logo img { width: 38px; height: 38px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
}

.back-link svg { width: 17px; height: 17px; stroke-width: 2; }
.back-link:hover { color: var(--blue-deep); }

.cap-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 5.5vw, 88px) 0 clamp(40px, 5vw, 76px);
  background: linear-gradient(180deg, #f5f9fe 0%, #eaf2fc 100%);
}

.cap-watermark {
  position: absolute;
  top: 50%;
  right: clamp(8px, 2vw, 56px);
  transform: translateY(-50%);
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(90px, 14vw, 220px);
  line-height: 1;
  color: #fff;
  opacity: .6;
  pointer-events: none;
}

.cap-hero .shell { position: relative; }

.cap-head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 28px);
  margin-top: clamp(14px, 1.6vw, 24px);
}

.cap-badge {
  width: clamp(54px, 4.4vw, 76px);
  height: clamp(54px, 4.4vw, 76px);
  background: var(--blue);
  color: #fff;
}

.cap-badge svg {
  width: clamp(25px, 2.1vw, 34px);
  height: clamp(25px, 2.1vw, 34px);
}

/* smaller than the home-page section titles, and wrapped before it can
   run into the watermark numeral */
.cap-head .section-title {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(26px, 3.2vw, 50px);
}
.cap-head .section-title i { font-style: normal; color: var(--blue); }

.cap-lead {
  margin: clamp(18px, 2vw, 28px) 0 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.3vw, 22px);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* the left/right reveals start translated sideways, which would poke past
   the viewport and raise a scrollbar until they settle. `clip` contains it
   without creating a scroll container, so sticky positioning still works. */
.cap-body,
.cap-nav { overflow-x: clip; }

.cap-body { padding: clamp(48px, 6vw, 96px) 0 clamp(16px, 2vw, 32px); }

/* pages without an intro paragraph start straight on the grid, and the
   section padding is already enough space under the hero */
.cap-body .shell > :first-child { margin-top: 0; }

.cap-para {
  margin: 0;
  max-width: 68ch;
  font-size: clamp(15px, 1.12vw, 19px);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---------------- floating contact shortcuts ---------------- */

/* Fixed to the bottom-right on every page. Sits above the page and the
   sticky sub-header (20) but below the enquiry modal (100), so opening
   the dialog covers these rather than leaving them floating over it. */
.quick-contact {
  position: fixed;
  right: clamp(14px, 1.6vw, 26px);
  bottom: clamp(14px, 1.6vw, 26px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 14px);
}

.qc-btn {
  display: grid;
  place-items: center;
  width: clamp(46px, 3.4vw, 56px);
  height: clamp(46px, 3.4vw, 56px);
  border-radius: 50%;
  color: #fff;
  /* a tight contact shadow plus a wide soft one, so the disc reads as
     floating over whatever it happens to be sitting on */
  box-shadow: 0 2px 6px rgba(16, 36, 64, .18), 0 10px 26px rgba(16, 36, 64, .22);
  transition: transform var(--base) var(--ease-settle), box-shadow var(--base) var(--ease-settle);
}

.qc-btn svg {
  width: 56%;
  height: 56%;
  display: block;
}

/* Gmail is a glyph that needs a surface under it; WhatsApp is supplied
   artwork that already carries its own bubble and white keyline, so it
   sits on nothing. */

.qc-whatsapp {
  background: none;
  /* box-shadow would trace the square bounding box around transparent
     artwork - drop-shadow follows the bubble's actual alpha instead */
  box-shadow: none;
  filter: drop-shadow(0 4px 10px rgba(16, 36, 64, .3));
}

.qc-whatsapp:hover {
  box-shadow: none;
  filter: drop-shadow(0 8px 17px rgba(16, 36, 64, .36));
}

/* The bubble sits inside its own keyline and leaves room for the tail,
   so at the same box size it reads smaller than the Gmail disc beside
   it. Oversizing the artwork lines the two up optically; it overflows
   the box, which is harmless with no background behind it. */
/* Scaled with a transform, not a percentage size: at 114% width/height
   the image grew the button, which grew the image again, and the pair
   settled on a non-square box that squashed the bubble. A transform is
   purely visual, so the button keeps its own dimensions. */
.qc-whatsapp img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  transform: scale(1.14);
}

.qc-mail {
  background: #fff;
  border: 1px solid #e1e8f2;
}

/* The Gmail envelope is landscape, so it takes its height from the
   artwork rather than being squared off with the WhatsApp glyph. */
.qc-mail svg { width: 54%; height: auto; }

.qc-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 8px rgba(16, 36, 64, .2), 0 16px 34px rgba(16, 36, 64, .28);
}

.qc-btn:active {
  transform: scale(0.95);
  transition-duration: var(--press);
}

/* The WhatsApp mark has no number behind it yet, so it is a plain icon
   rather than a link. It still lifts on hover so it does not read as
   disabled; drop an href on it and nothing else needs to change. */
.qc-btn:not([href]) { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .qc-btn:hover, .qc-btn:active { transform: none; }
}

/* Each numbered way into the capability. A hairline above separates one
   from the next without boxing them, which would compete with the
   artefacts inside. */
.cap-type {
  margin-top: clamp(44px, 5vw, 84px);
  padding-top: clamp(34px, 4vw, 64px);
  border-top: 1px solid #e3ebf6;
}

/* the first one follows the intro paragraph, which is separation enough */
.cap-type:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.cap-type-label {
  margin: 0;
  font-size: clamp(11px, .95vw, 13px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cap-type-label span {
  display: inline-block;
  padding: 6px clamp(10px, 1vw, 14px);
  border-radius: 999px;
  background: #e8f1fd;
  color: var(--blue);
}

.cap-type-title {
  margin: clamp(12px, 1.3vw, 20px) 0 0;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(21px, 2.1vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: #0c0f13;
}

.cap-type-title i { font-style: normal; color: var(--blue); }

/* the title already carries the gap above the copy */
.cap-type .cap-para { margin-top: clamp(12px, 1.2vw, 18px); }

/* input + input -> output, shown with the real artefacts */
.flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 30px);
  margin-top: clamp(32px, 3.6vw, 56px);
}

.flow-item { margin: 0; text-align: center; }

.flow-item img {
  display: block;
  height: clamp(200px, 27vw, 380px);
  width: auto;
  max-width: 100%;
  border: 1px solid #dbe6f5;
  border-radius: clamp(10px, 1vw, 16px);
  background: #fff;
  object-fit: cover;
}

/* the result carries a little more weight than the inputs */
.flow-item.is-output img {
  border-color: #b9d2f0;
  box-shadow: 0 18px 40px rgba(11, 79, 162, .18);
}

.flow-item figcaption {
  margin-top: 12px;
  font-size: clamp(11px, .95vw, 13px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c6672;
}

.flow-item.is-output figcaption { color: var(--blue); }

.flow-op {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;           /* optically centres against the captions */
  font-family: "Archivo", sans-serif;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 700;
  color: #9db9dc;
  flex: none;
}

.flow-arrow { color: var(--blue); }

.flow-arrow svg {
  width: clamp(26px, 2.6vw, 42px);
  height: clamp(26px, 2.6vw, 42px);
  stroke-width: 2;
}

/* A three-image flow has to fit two landscape shots plus the plan on one
   line, which the two-image height overflows at every width. The three
   together run ~4.1:1, and measured against the available width from 900
   to 1672, ~19vw is the tallest that still keeps them on one row. */
@media (min-width: 761px) {
  .flow.is-triple .flow-item img { height: clamp(140px, 19vw, 330px); }
}

@media (max-width: 760px) {
  /* stack the flow and turn the operators to point downwards */
  .flow { flex-direction: column; }
  .flow-item img { height: auto; width: 100%; max-width: 420px; }
  .flow-op { margin-bottom: 0; }
  .flow-arrow svg { transform: rotate(90deg); }
}

/* image beside the points, so portrait and landscape shots both sit well
   without being cropped to a common aspect */
.cap-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
  margin-top: clamp(32px, 3.6vw, 56px);
}

.cap-shot { margin: 0; }

.cap-shot img {
  display: block;
  width: 100%;
  height: auto;
  /* keeps a portrait shot from towering over the points beside it; the
     landscape one is shorter than this and is never cropped */
  max-height: clamp(300px, 40vw, 560px);
  object-fit: cover;
  border: 1px solid #dbe6f5;
  border-radius: clamp(14px, 1.2vw, 20px);
  background: #fff;
}

.cap-points.is-stacked {
  grid-template-columns: 1fr;
  margin-top: 0;
}

@media (max-width: 900px) {
  .cap-split { grid-template-columns: 1fr; }
}

.cap-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 28px);
  margin-top: clamp(32px, 3.6vw, 56px);
}

.cap-point {
  padding: clamp(22px, 2vw, 32px);
  border: 1px solid #dbe6f5;
  border-radius: clamp(14px, 1.2vw, 20px);
  background: #fff;
  transition: background-color var(--base) var(--ease-settle), border-color var(--base) var(--ease-settle), transform var(--base) var(--ease-settle);
}

.cap-point:hover {
  background: #e8f1fd;
  border-color: #b9d2f0;
  transform: translateY(-3px);
}

.cap-point h2 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.15vw, 18px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #11161d;
}

.cap-point p {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.02vw, 16px);
  line-height: 1.6;
  color: #5c6672;
}

.cap-cta {
  padding: clamp(56px, 7vw, 110px) 0;
  text-align: center;
}

.cap-cta h2 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #0c0f13;
}

.cap-cta p {
  margin: 14px auto 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  color: #5c6672;
}

/* the home-page .btn sizes from --s; override for these pages */
.cap-cta-btn {
  height: 56px;
  margin-top: clamp(24px, 2.4vw, 36px);
  padding: 0 34px;
  font-size: 16px;
  gap: 12px;
}

.cap-cta-btn svg { width: 19px; height: 19px; }

.cap-nav {
  border-top: 1px solid #e7eef8;
  background: #f7fafe;
}

.cap-nav .shell {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.cap-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 600;
  color: #28313d;
  transition: color var(--quick) var(--ease-settle);
}

.cap-nav-link:hover { color: var(--blue); }
.cap-nav-link svg { width: 18px; height: 18px; stroke-width: 2; flex: none; color: var(--blue); }
.cap-nav-link.next { text-align: right; }

.cap-nav-link em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: #8e98a5;
}

@media (max-width: 1024px) {
  .cap-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .cap-points { grid-template-columns: 1fr; }
  .cap-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cap-nav .shell { flex-direction: column; }
  .cap-nav-link.next { flex-direction: row-reverse; text-align: left; }

  /* the logo and this label are both nowrap, so together they set the
     header's minimum width - drop the label to its icon (aria-label carries
     the meaning) before it can force the page sideways */
  .back-link span { display: none; }
  .back-link { padding-left: 4px; }
}

@media (max-width: 560px) {
  .sub-header { padding: 12px 16px; }
  .subpage .logo { font-size: 16px; gap: 8px; }
  .subpage .logo img { width: 32px; height: 32px; }
}

/* narrowest phones: keep the mark, drop the wordmark */
@media (max-width: 400px) {
  .subpage .logo-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cap-point, .fcard-go { transition: none; }
  .cap-point:hover { transform: none; }
  .fcard:hover .fcard-go { transform: none; }
}

/* ============================================================
   Enquiry modal — fixed px, since it overlays the scaled page
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 22, .55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  animation: modal-fade var(--quick) var(--ease-settle);
}

.modal-card {
  position: relative;
  width: min(510px, 100%);
  max-height: calc(100vh - 48px);
  /* sized to fit without scrolling; the fallback stays for very short
     windows, but the scrollbar itself is hidden so no bar ever shows */
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 30px 36px 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(8, 16, 30, .30);
  animation: modal-rise .26s cubic-bezier(.2, .8, .3, 1);
}

.modal-card::-webkit-scrollbar { width: 0; height: 0; }

/* Exit retraces the entrance rather than cutting out: `reverse` replays the
   same keyframes backwards, and --ease-soften is the mirror of the curve
   used on the way in, so the path in and the path out match. */
.modal.is-closing .modal-backdrop {
  animation: modal-fade var(--quick) var(--ease-soften) reverse forwards;
}

.modal.is-closing .modal-card {
  animation: modal-rise var(--quick) var(--ease-soften) reverse forwards;
  pointer-events: none;
}

@keyframes modal-fade { from { opacity: 0 } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(14px) scale(.985) } }

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #1b222c;
  cursor: pointer;
  transition: background-color var(--quick) var(--ease-settle);
}

.modal-close:hover { background: #f1f3f7; }
.modal-close svg { width: 19px; height: 19px; stroke-width: 2; }

.modal-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

.modal-eyebrow svg { width: 17px; height: 17px; flex: none; }

.modal-card h2 {
  margin: 11px 0 0;
  font-family: "Archivo", sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: #11161d;
}

.modal-sub {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: #6a737f;
}

.modal-form { margin-top: 18px; }

.field { margin-bottom: 13px; }

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1b222c;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 0 16px;
  height: 46px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: #f3f4f6;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: background-color var(--quick) var(--ease-settle), border-color var(--quick) var(--ease-settle), box-shadow var(--quick) var(--ease-settle);
}

.field textarea {
  height: 76px;
  padding: 12px 16px;
  line-height: 1.5;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder { color: #a7aeb8; }

.field input:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(11, 79, 162, .12);
}

.field.invalid input,
.field.invalid textarea {
  border-color: #d64545;
  background: #fef6f6;
}

.field .error {
  display: none;
  margin: 7px 0 0;
  font-size: 12.5px;
  color: #c93a3a;
}

.field.invalid .error { display: block; }

.modal-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px auto 0;
  padding: 0 34px;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--quick) var(--ease-settle), transform var(--quick) var(--ease-settle);
}

.modal-submit:hover { background: var(--blue-deep); transform: translateY(-1px); }
.modal-submit svg { width: 18px; height: 18px; stroke-width: 2; }

.modal-foot {
  margin: 13px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: #9aa3ad;
}

/* --- success state --- */

.modal-done { padding: 14px 0 10px; text-align: center; }
.modal-done[hidden] { display: none; }

.modal-done .tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--badge-bg);
  color: var(--blue);
}

.modal-done .tick svg { width: 26px; height: 26px; stroke-width: 2.4; }

.modal-done h3 {
  margin: 18px 0 0;
  font-family: "Archivo", sans-serif;
  font-size: 23px;
  font-weight: 700;
  color: #11161d;
}

.modal-done p {
  margin: 9px 0 0;
  font-size: 15px;
  color: #6a737f;
}

@media (max-width: 560px) {
  .modal { padding: 14px; }
  .modal-card { padding: 26px 20px 20px; border-radius: 20px; }
  .modal-card h2 { font-size: 24px; }
  .modal-close { top: 14px; right: 14px; }
  /* the placeholder runs to three lines once the card is this narrow */
  .field textarea { height: 96px; }
}

/* short windows: tighten further so the form still fits in one view */
@media (max-height: 680px) {
  .modal { padding: 14px; }
  .modal-card { padding: 22px 30px 18px; }
  .modal-card h2 { font-size: 23px; margin-top: 8px; }
  .modal-sub { font-size: 13.5px; margin-top: 6px; }
  .modal-form { margin-top: 14px; }
  .field { margin-bottom: 9px; }
  .field label { margin-bottom: 5px; font-size: 11px; }
  .field input, .field textarea { height: 42px; font-size: 14.5px; }
  .field textarea { height: 58px; }
  .modal-submit { height: 44px; margin-top: 14px; }
  .modal-foot { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
  .modal-backdrop, .modal-card { animation: none; }
  .modal-submit:hover { transform: none; }
}