/* Securemark — securemark.io
   Single stylesheet for every page. Tokens first, then layout, then components.
   Dark is the committed look; the light block is a token swap only, so the two
   themes cannot drift apart. Every colour pair below is checked to WCAG 2.2 AA
   (4.5:1 body, 3:1 large text and non-text) because the site is the proof of the
   accessibility claim the Secure App Development page makes. */

/* Inter Variable, self-hosted. NOT a font CDN: the CSP is font-src 'self', so a
   Google or Adobe link fails silently and the page drops to the system stack.
   One 48KB file covers weights 100-900 for Latin. SIL Open Font License, see
   assets/inter-LICENSE.txt. This does not reopen D-SM-004, which was about not
   calling a third party on every page load. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/inter-var.woff2") format("woff2-variations");
}

:root {
  color-scheme: dark light;

  --ink:        #070B12;
  --surface:    #0D1420;
  --surface-2:  #131C2B;
  --line:       #21304A;
  --line-soft:  #17222F;

  --text:       #EAF0F8;
  --text-muted: #9BADC6;
  --text-dim:   #8797AF;

  --accent:      #4FD6C0;
  --accent-ink:  #05221D;
  --accent-soft: rgba(79, 214, 192, 0.12);
  --accent-line: rgba(79, 214, 192, 0.35);

  --warn:       #F2B441;

  --radius:     12px;
  --radius-sm:  8px;
  --radius-btn: 4px;
  /* 1440 frame minus 80px of padding each side leaves the 1280 content column
     the design is laid out on. The old 1140 left 150px dead on each side at
     desktop and was half the reason the page read as empty (S2). */
  --maxw:       1440px;
  --measure:    76ch;

  --font: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);

  /* The select chevron is a token because a data URI cannot read a CSS
     variable, and the light block below is a token swap only. */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23EAF0F8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
  :root {
    --ink:        #FFFFFF;
    --surface:    #F6F8FB;
    --surface-2:  #FFFFFF;
    --line:       #D3DCE8;
    --line-soft:  #E6ECF3;

    --text:       #0C1524;
    --text-muted: #47576E;
    --text-dim:   #5B6A80;

    --accent:      #0E7C6B;
    --accent-ink:  #FFFFFF;
    --accent-soft: rgba(14, 124, 107, 0.08);
    --accent-line: rgba(14, 124, 107, 0.30);

    --warn:       #A15C00;
    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 12px 28px -14px rgba(16,24,40,.18);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230C1524' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* The background lives on html as well as body, and this is not belt and braces.
   A body background propagates to the canvas, and WebKit then reports the body
   element itself as transparent. axe-core walks up looking for an opaque
   ancestor, finds none, and falls back to assuming #ffffff. In light mode --ink
   IS #FFFFFF, so the wrong assumption and the real colour match and every check
   passes by coincidence. In dark it is wrong and every text node fails contrast
   against a background that was never there. Measured at S2 on mobile-iphone
   and tablet: 34 and 39 nodes, all reporting background #ffffff behind dark
   foregrounds, while Chromium passed the same page in the same context.
   It also fixes the canvas colour when the page is shorter than the viewport.
   Do not remove it. */
html { background: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip, NOT hidden. overflow-x: hidden makes body a scroll container, which
     silently breaks position: sticky for every descendant. Measured at S2: the
     sticky meta column in .split never stuck and the left half of three
     sections went blank on scroll. clip suppresses the overflow without
     creating a scrollport. */
  overflow-x: clip;
}

h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2.25rem, 1.1rem + 5vw, 4rem); line-height: 1.02; font-weight: 700; }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.5rem); }
h3 { font-size: 1.25rem; line-height: 1.25; }
p  { margin: 0 0 1.1em; max-width: var(--measure); }
a  { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
ul, ol { padding-left: 1.15em; max-width: var(--measure); }
li { margin-bottom: .45em; }
strong { font-weight: 640; color: var(--text); }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: 3rem 0; }

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

.skip {
  position: absolute; left: 0; top: -100px;
  background: var(--accent); color: var(--accent-ink);
  padding: .75rem 1.15rem; z-index: 100; font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { top: 0; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 1.5rem; }
.section { padding-block: clamp(1.75rem, 3.5vw, 3rem); }
.section + .section { border-top: 1px solid var(--line-soft); }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }

.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 660; letter-spacing: -.02em; font-size: 1.06rem; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand svg { display: block; flex: none; }
.brand-mark { width: 26px; height: 26px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.nav a {
  color: var(--text-muted); text-decoration: none; font-size: .875rem; font-weight: 550;
  padding: .5rem .7rem; border-radius: var(--radius-sm);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
/* .nav a outranks .btn-primary on specificity, so the call-to-action in the
   header was inheriting the muted link colour and failing contrast on its own
   accent background. Restate it at matching specificity. */
.nav a.btn-primary { color: var(--accent-ink); background: var(--accent); }
.nav a.btn-primary:hover { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 86%, white); }
.nav a.btn-ghost { color: var(--text); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: .875rem;
  /* Figma has these at 41px tall. The site asserts a 44px minimum target
     (WCAG 2.2 AA 2.5.8) and TC-SM-012 measures it, so the design is overridden
     by three pixels here on purpose. */
  padding: .75rem 1.25rem; border-radius: var(--radius-btn);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, white); color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--accent-line); color: var(--text); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Hero ───────────────────────────────────────────────────────────── */
/* Flat. The two radial gradients that used to sit here read as a generic
   landing-page glow, which is exactly what the S2 brief asked to remove. */
.hero { position: relative; padding-block: clamp(2rem, 4.5vw, 3.75rem); }
.lede { font-size: clamp(1.06rem, .95rem + .75vw, 1.5rem); line-height: 1.5; color: var(--text-muted); max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ── Grid + cards ───────────────────────────────────────────────────── */
.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(275px, 100%), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.card {
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 1.6rem;
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--text-muted); font-size: .96rem; }
.card > :last-child { margin-bottom: 0; }

a.card { text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
a.card:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow); }
a.card h3 { color: var(--text); }

.card-icon {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 1.1rem;
  display: grid; place-items: center; flex: none;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.card-icon svg { width: 20px; height: 20px; }

.card-meta { margin-top: auto; padding-top: 1.15rem; font-size: .84rem; color: var(--text-dim); font-family: var(--mono); }
.card-cta { margin-top: auto; padding-top: 1.15rem; color: var(--accent); font-weight: 600; font-size: .93rem; }

.section-head { margin-bottom: 2.5rem; }
.section-head p { color: var(--text-muted); }

/* ── Numbered steps ─────────────────────────────────────────────────── */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.6rem; counter-reset: step; max-width: none; }
.steps > li { margin: 0; padding-left: 3.4rem; position: relative; counter-increment: step; }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  font-family: var(--mono); font-size: .84rem; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
}
.steps h3 { font-size: 1.03rem; margin-bottom: .3rem; }
.steps p { color: var(--text-muted); font-size: .95rem; margin-bottom: 0; }

/* ── Stat row ───────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface-2); padding: 1.35rem 1.4rem; }
.stat dt { font-size: .82rem; color: var(--text-dim); margin-bottom: .35rem; }
.stat dd { margin: 0; font-size: 1.5rem; font-weight: 640; letter-spacing: -.02em; }

/* ── Case study article ─────────────────────────────────────────────── */
.article { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem); }
.article h2 { margin-top: 2.75rem; }
.article h3 { margin-top: 1.9rem; }
.crumb { font-size: .9rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.crumb a { color: var(--text-muted); }
.crumb a:hover { color: var(--accent); }

.callout {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 1.15rem 1.35rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1.75rem 0; max-width: var(--measure);
}
.callout > :last-child { margin-bottom: 0; }
.callout p { color: var(--text); }


/* ── Form ───────────────────────────────────────────────────────────── */
.form-panel { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .4rem; }
.field .hint { display: block; font-size: .84rem; color: var(--text-dim); font-weight: 400; margin-top: .15rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; /* 16px stops iOS zooming on focus */
  min-height: 44px; padding: .68rem .8rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--ink); color: var(--text);
}
.field textarea { min-height: 140px; resize: vertical; }

/* WEBKIT IGNORES AUTHOR `color` ON A NATIVELY THEMED SELECT. The shared rule
   above sets color: var(--text) and WebKit paints the value black anyway, which
   in dark mode is #000000 on #070B12: a contrast ratio of 1.06, measured at S2
   on mobile-iphone and tablet. Chromium honours the author colour, which is why
   it never showed. appearance: none stops the native theming so the colour
   applies, and the chevron is drawn back with the themed --select-arrow token.
   Only background-image is set here, never the `background` shorthand, which
   would reset the background colour inherited from the rule above. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 12px 8px;
  padding-right: 2.5rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-dim); }
.field-error input, .field-error select, .field-error textarea { border-color: var(--warn); }
.err { display: block; color: var(--warn); font-size: .86rem; margin-top: .35rem; font-weight: 550; }
.hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.form-status { margin-top: 1.25rem; padding: .95rem 1.15rem; border-radius: var(--radius-sm); font-size: .95rem; font-weight: 550; }
.form-status[data-state="ok"]   { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text); }
.form-status[data-state="fail"] { background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); color: var(--text); }
.form-status:empty { display: none; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--line-soft); padding-block: 3rem 2.5rem; background: var(--surface); color: var(--text-muted); font-size: .92rem; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 2.5rem; }
.site-foot h3 { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .9rem; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: .5rem; }
.site-foot a { color: var(--text-muted); text-decoration: none; }
.site-foot a:hover { color: var(--accent); text-decoration: underline; }
.foot-base { border-top: 1px solid var(--line-soft); padding-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; font-size: .87rem; color: var(--text-dim); }

.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; }

/* ── Mobile-first behaviour ─────────────────────────────────────────────
   The base rules above are written mobile-up (single column, fluid type via
   clamp, auto-fit grids that start at one track). What follows is the part that
   is genuinely mobile-specific rather than merely fluid: the disclosure nav, the
   44px minimum touch target from WCAG 2.2 AA (2.5.8 Target Size), and safe-area
   insets for notched devices. Sandhurst is a mobile-first build, so the site
   selling that work has to hold to the same standard it claims. */

body { padding-bottom: env(safe-area-inset-bottom); }
.wrap {
  padding-inline:
    max(clamp(1.25rem, 5vw, 5rem), env(safe-area-inset-left))
    max(clamp(1.25rem, 5vw, 5rem), env(safe-area-inset-right));
}

/* Every interactive control clears the 44x44 CSS px target on touch. */
.btn, .nav a, .site-foot a, .navbox summary {
  min-height: 44px;
  display: inline-flex; align-items: center;
}
.site-foot li a { min-height: 40px; }

/* Disclosure navigation. No JavaScript: <details> is keyboard operable and
   screen-reader announced out of the box, so the menu works before any script
   runs and cannot be broken by one failing to load. */
.navbox { margin-left: auto; }
.navbox > summary {
  list-style: none; cursor: pointer;
  gap: .5rem; padding: .5rem .85rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .93rem; font-weight: 600; color: var(--text);
  min-width: 44px; justify-content: center;
}
.navbox > summary::-webkit-details-marker { display: none; }
.navbox > summary:hover { border-color: var(--accent-line); }
.navbox[open] > summary { border-color: var(--accent-line); background: var(--surface-2); }
.navbox > summary .bars { width: 16px; height: 12px; position: relative; display: block; }
.navbox > summary .bars::before,
.navbox > summary .bars::after,
.navbox > summary .bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
}
.navbox > summary .bars::before { top: 0; }
.navbox > summary .bars span   { top: 5px; }
.navbox > summary .bars::after { bottom: 0; }

.navbox .nav {
  position: absolute; left: 0; right: 0; top: 100%;
  flex-direction: column; align-items: stretch; gap: .2rem;
  background: var(--ink); border-bottom: 1px solid var(--line-soft);
  padding: .75rem max(1.25rem, env(safe-area-inset-left)) 1.1rem;
  box-shadow: var(--shadow);
}
.navbox .nav a { padding: .7rem .75rem; font-size: 1rem; }
.navbox .nav .btn { margin-top: .5rem; justify-content: center; }

/* From 800px the disclosure disappears and the links sit inline. */
@media (min-width: 800px) {
  .navbox > summary { display: none; }
  .navbox .nav {
    position: static; flex-direction: row; align-items: center;
    background: none; border: 0; padding: 0; box-shadow: none; gap: .35rem;
  }
  .navbox .nav .btn { margin-top: 0; margin-left: .5rem; }
}

/* Under 800px the disclosure is closed by default, so the panel must hide. */
@media (max-width: 799px) {
  .navbox:not([open]) .nav { display: none; }
  .navbox[open] > summary { margin-bottom: 0; }
  .site-head .wrap { position: relative; flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 1 100%; }
}
@media (min-width: 480px) {
  .hero-actions .btn { flex: 0 0 auto; }
}

/* ── Device showcase ────────────────────────────────────────────────────
   A real, scrollable phone-width viewport rather than a screenshot of one, so a
   visitor on a laptop can see the mobile layout and a visitor on a phone sees
   the site behaving as described one thumb away. */
.showcase { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .showcase { grid-template-columns: 300px 1fr; gap: 3.5rem; } }

.phone {
  /* Sized so the frame plus its border fits the 320px viewport gutter. */
  width: min(280px, 100%); margin-inline: auto;
  border: clamp(6px, 2vw, 10px) solid var(--surface-2); border-radius: 34px;
  box-shadow: var(--shadow), 0 0 0 1px var(--line);
  background: var(--ink); overflow: hidden; position: relative;
}
.phone::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 96px; height: 20px; background: var(--surface-2);
  border-radius: 0 0 12px 12px; z-index: 2;
}
.phone-screen { height: 500px; overflow-y: auto; padding: 2.1rem 1rem 1.25rem; font-size: 13px; -webkit-overflow-scrolling: touch; }
.phone-screen h3 { font-size: 15px; margin-bottom: .4rem; }
.phone-screen p { font-size: 12.5px; color: var(--text-muted); margin-bottom: .9rem; }
.phone-row {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: .65rem .7rem; margin-bottom: .5rem; background: var(--surface-2);
}
.phone-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--accent); }
.phone-dot.amber { background: var(--warn); }
.phone-row b { font-size: 12.5px; font-weight: 600; display: block; }
.phone-row small { font-size: 11px; color: var(--text-dim); }
.phone-cta { display: block; text-align: center; background: var(--accent); color: var(--accent-ink); border-radius: 9px; padding: .6rem; font-weight: 640; font-size: 12.5px; text-decoration: none; margin-top: .75rem; }

/* Tables scroll inside themselves rather than pushing the page sideways. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; }
.scroll-x table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .93rem; }
.scroll-x th, .scroll-x td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.scroll-x th { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   S2 DESIGN PASS. Layout primitives taken from the Figma frame
   securemark-home-desktop (5:4), measured rather than eyeballed.

   Every colour in that design already mapped onto a token above, so nothing
   here introduces a new one and the light theme comes across unchanged.

   The dominant unit is a 480 / 720 two-column split with a 48px gap inside a
   1280 content column. Below 1000px everything collapses to one column, which
   is what makes the 390 and 834 layouts fall out of this rather than needing
   their own frames.
   ══════════════════════════════════════════════════════════════════════ */

.grid { gap: 1.5rem; }

/* Meta column left, content right. Used by What we build, Built for the phone,
   How we work and Contact. */
.split { display: grid; gap: 2.5rem; align-items: start; }
/* Content left, visual right. The hero only. */
.split-hero { display: grid; gap: 2.5rem; align-items: center; }

@media (min-width: 1000px) {
  .split      { grid-template-columns: 480px minmax(0, 1fr); gap: 3rem; }
  .split-hero { grid-template-columns: minmax(0, 1fr) 480px; gap: 3rem; }
}

/* ── Proof band ─────────────────────────────────────────────────────────
   Client names, permission confirmed at S2. Names only: no logos, no claim
   about what they think of the work. */
.proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2.5rem;
  padding-block: 1.25rem;
  border-block: 1px solid var(--line-soft);
}
.proof-label {
  font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-dim); margin: 0;
}
.proof ul { display: flex; flex-wrap: wrap; gap: .75rem 2.25rem; list-style: none; padding: 0; margin: 0; max-width: none; }
.proof li { margin: 0; display: inline-flex; align-items: center; gap: .5rem; font-weight: 550; color: var(--text); }
.proof svg { width: 16px; height: 16px; flex: none; color: var(--accent); }

/* ── Numbered list ──────────────────────────────────────────────────────
   Replaces the boxed counter with the design's table treatment: a fixed number
   column, a rule between rows, and no decoration. */
.numlist { list-style: none; padding: 0; margin: 0; counter-reset: step; max-width: none; }
.numlist > li {
  margin: 0; counter-increment: step;
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 1.5rem;
  padding-block: 1.5rem; border-top: 1px solid var(--line-soft);
}
.numlist > li:first-child { border-top: 0; padding-top: 0; }
/* EXPLICIT PLACEMENT IS LOAD-BEARING. Each li holds three grid items: the
   ::before counter, an h3 and a p. In a two-column grid, auto-placement puts
   the counter at 1/1, the heading at 1/2 and then wraps the PARAGRAPH to 2/1,
   which is the 2.5rem number column. It renders one word per line. Measured at
   S2 on the How we work section. Do not remove these three rules. */
.numlist > li::before { grid-column: 1; grid-row: 1 / span 2; }
.numlist > li > h3    { grid-column: 2; grid-row: 1; }
.numlist > li > p     { grid-column: 2; grid-row: 2; }
.numlist > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: 1.25rem; font-weight: 600;
  color: var(--accent); line-height: 1.25;
}
.numlist h3 { font-size: 1.06rem; margin-bottom: .3rem; }
.numlist p  { color: var(--text-muted); margin-bottom: 0; max-width: var(--measure); }

/* ── Capability list ────────────────────────────────────────────────────
   The numbered rows in What we build. Same idea as .numlist but boxed, as the
   design has them. */
.caplist { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; max-width: none; }
.caplist > li {
  margin: 0; background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 1.5rem;
}
.caplist h3 { font-size: 1.06rem; margin-bottom: .5rem; }
.caplist p  { color: var(--text-muted); margin-bottom: 0; max-width: var(--measure); }

/* ── Device, restyled to the design ─────────────────────────────────────
   310 x 580, 4px frame, 32px corners. Still a real scrollable region rather
   than a picture of one, so it keeps its tabindex and its label. */
.phone {
  width: min(310px, 100%); margin-inline: auto;
  border: 4px solid var(--line); border-radius: 32px;
  background: var(--surface); overflow: hidden;
  box-shadow: var(--shadow);
}
.phone::before { content: none; }
.phone-screen {
  height: 560px; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 16px;
  font-size: 12px; -webkit-overflow-scrolling: touch;
}
.phone-status { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--text-dim); }
.phone-status svg { width: 14px; height: 14px; }
.phone-status span { display: inline-flex; align-items: center; gap: 4px; }

.phone-head { display: flex; align-items: center; justify-content: space-between; }
.phone-head p { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.phone-screen h3 { font-size: 15px; margin: 2px 0 0; }
.phone-live { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; }

.phone-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.phone-panel-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--text-dim); margin-bottom: 12px; }
.phone-chart { display: flex; align-items: flex-end; gap: 4px; height: 60px; }
.phone-chart span { flex: 1; background: var(--line); border-radius: 2px; }
.phone-chart span[data-now] { background: var(--accent); }

.phone-rows { display: flex; flex-direction: column; gap: 8px; }
.phone-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 8px; padding: 10px; margin: 0;
}
.phone-row svg { width: 14px; height: 14px; flex: none; }
.phone-row b { font-size: 12px; font-weight: 600; display: block; }
.phone-row small { font-size: 11px; color: var(--text-dim); display: block; }
.phone-row .state { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.phone-row .state.ok   { color: var(--accent); }
.phone-row .state.warn { color: var(--warn); }

.phone-tabs { display: flex; justify-content: space-between; padding-top: 8px; margin-top: auto; font-size: 11px; font-weight: 600; color: var(--text-dim); }
.phone-tabs [aria-current] { color: var(--accent); }

/* ── Section eyebrow, text only ─────────────────────────────────────────
   The design has these as filled capsules. They are the same device the S2
   content pass removed from every page, so they are set as plain lettering.
   No background, no border, no 100px radius. */
.kicker {
  font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .9rem;
}

/* Icons carried through from Figma at their exported 14px geometry. */
.i14 { width: 14px; height: 14px; flex: none; display: block; }
.btn .i14 { margin-left: .1rem; }

/* ── S2 design pass, part 2: pieces the new markup needs ──────────────── */

/* Card eyebrow, above the title. Plain lettering, not a capsule. */
.card-tag { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 .75rem; }
.card h3 { display: flex; align-items: flex-start; gap: .6rem; }
.card h3 .i14 { margin-top: .35rem; color: var(--accent); }

/* The checklist panel opposite "Built for the phone first". */
.checkpanel { gap: 0; }
.checklist { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .75rem; max-width: none; }
.checklist li {
  margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--ink); border: 1px solid var(--line-soft);
  border-radius: var(--radius-btn); padding: .75rem; font-size: .8125rem; font-weight: 550;
}
.checklist .i14 { color: var(--accent); }
.checkfoot {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-top: .75rem; margin: 0; font-size: .6875rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim);
}
.checkfoot span:last-child { color: var(--accent); }

/* Phone panel title. Deliberately not a heading: it sits inside the hero, so an
   h3 here would jump straight from the h1 and break the heading order the
   accessibility suite checks (TC-SM-002). */
.phone-title { font-size: 15px; font-weight: 600; display: block; }

/* Form: paired fields on one row, as the design has them, stacking on narrow. */
.field-row { display: grid; gap: 0 1.25rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.btn-block { width: 100%; }

.note { color: var(--text-dim); font-size: .875rem; }

/* Footer column headings moved from h3 to h2 so the document outline has no
   jump after the last section. Same appearance. */
.site-foot h2 { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); margin-bottom: .9rem; font-weight: 600; }
.site-foot .brand { margin-bottom: .75rem; }
.site-foot p { font-size: .875rem; }

/* Mobile menu, per the open state in the design: fewer, larger targets. */
@media (max-width: 799px) {
  .navbox .nav { padding-block: 1.25rem 1.5rem; gap: .35rem; }
  .navbox .nav a { font-size: 1.25rem; font-weight: 600; padding: .85rem .75rem; color: var(--text-muted); }
  .navbox .nav a.btn { font-size: 1rem; margin-top: 1rem; }
}

/* ── S2 design pass, part 3: the empty half-column ────────────────────────
   .split pairs a short meta column with a tall content column, so at desktop
   the difference between them was showing as dead space. Two changes.

   1. The meta column sticks. The heading and the intro stay with you while you
      read the column beside them, which is the pattern the case study frame in
      the design uses for its rail. The offset clears the sticky site header.
   2. The content column is tighter, so the two are closer in height to begin
      with. */

@media (min-width: 1000px) {
  .split > :first-child {
    position: sticky;
    align-self: start;
    top: calc(68px + 2.5rem);
  }
  /* The form is taller than its own column and must not stick, or the submit
     button walks off the bottom of the viewport on a short screen. */
  #contact .split > :first-child { position: static; }
}

.caplist { gap: 1rem; }
.caplist > li { padding: 1.25rem 1.35rem; }
.caplist h3 { font-size: 1rem; margin-bottom: .35rem; }
.caplist p  { font-size: .9375rem; }

.numlist > li { padding-block: 1.25rem; }
.numlist p { font-size: .9375rem; }

/* Section heads sit closer to what follows them. */
.section-head { margin-bottom: 2rem; }

/* ── S2: vertical rhythm, tightened ──────────────────────────────────────
   Sections were 80px top and bottom, so 160px of nothing between every one of
   them plus the separating rule. Now 48px each side at desktop, which is 96px
   between sections. The rule does the separating; the space does not have to. */
.section-head { margin-bottom: 1.75rem; }
.split { gap: 2rem; }
@media (min-width: 1000px) { .split, .split-hero { gap: 2.5rem; } }

/* The sticky offset follows the section padding down, or the meta column sits
   too far from the top of its own section. */
@media (min-width: 1000px) {
  .split > :first-child { top: calc(68px + 1.5rem); }
}

.site-foot { padding-block: 2.5rem 2rem; }
.foot-grid { margin-bottom: 2rem; }

/* Three boxes, three columns. .grid-3 is auto-fit with a 275px minimum, which
   at a 1280 content column can lay out four tracks: with four cards that put
   one on a row of its own, and the section looked broken. Pinned explicitly. */
@media (min-width: 900px) {
  #standards .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}