/* ==========================================================================
   Site system, round 2 (Uniqode by Koto, made ours).
   White page, near-black ink, electric blue as the one color. Dot type
   (Doto) for headlines and big numbers; one plain grotesk for text.
   Every amount is a stitch: blue dots land on the printed number and a
   dotted thread runs to the row it becomes.
   ========================================================================== */

@font-face { font-family: "Doto"; src: url("../fonts/Doto-ROND-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-wght.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }

:root {
  /* colour: one blue */
  --paper: #ffffff;
  --ink: #0c0d12;
  --ink-2: #565b66;
  --ink-3: #686d76;        /* 5.2:1 on white: small labels and captions pass WCAG AA */
  --grey-1: #f4f4f4;       /* quiet surfaces */
  --grey-2: #e2e2e2;       /* rules, empty stitches */
  --blue: #0147ff;
  --blue-2: #7ea2ff;       /* light blue: second series, past years */
  --blue-3: #dfe7ff;       /* the faintest blue: fills under stitches, hover */
  --on-blue: #ffffff;

  /* type */
  --display: "Doto", ui-monospace, monospace;
  --text: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --dots: "ROND" 100, "wght" 900;          /* round dots that touch, like stitches */
  --dots-light: "ROND" 100, "wght" 800;
  /* Doto's dots sit on a 0.100em pitch and are 0.090em wide at weight 900. A same-colour stroke grows each dot
     by its width: 0.010em makes neighbours touch; more makes them overlap. Letters keep a clear gap between them. */
  --display-track: -0.045em;
  --display-word: -0.22em;
  --dot-grow: .018em;

  --s-hero: clamp(2.5rem, 4.4vw, 4.6rem);  /* first-screen headline */
  --s-title: clamp(2.5rem, 3.9vw, 3.7rem); /* section titles: dot type never below 40px */
  --s-num: clamp(2.6rem, 6.4vw, 6.6rem);   /* big numbers */
  --s-lead: clamp(1.06rem, 1.3vw, 1.25rem);
  --s-body: 1rem;
  --s-small: .875rem;
  --s-micro: .72rem;

  --gutter: clamp(20px, 5vw, 84px);
  --top: 72px;

  /* one spacing scale for every section */
  --sp-section: clamp(88px, 13vh, 150px);  /* top and bottom of a section */
  --sp-head: clamp(28px, 4.5vh, 52px);     /* section head to its content */
  --sp-block: clamp(18px, 2.8vh, 30px);    /* between blocks inside a section */
  /* one label style and one caption style */
  --label-size: .72rem; --label-track: .07em; --label-weight: 500; --label-color: var(--ink-3);
  --cap-size: .875rem; --cap-color: var(--ink-3);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-stitch: cubic-bezier(.5, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); color-scheme: light; scroll-padding-top: var(--top); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--text); font-size: var(--s-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1;
  overflow-x: clip;
}
/* tabular figures only where numbers stand in columns: some text fonts also widen commas under tnum */
td, th, .num, [data-num] { font-feature-settings: "kern" 1, "tnum" 1; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--blue); color: var(--on-blue); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
.picto { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* dot type */
.dots { font-family: var(--display); font-variation-settings: var(--dots); letter-spacing: var(--display-track); word-spacing: var(--display-word); line-height: 1.02; font-weight: 900;
  -webkit-text-stroke: var(--dot-grow) currentColor; }
/* inside a number set in dot type, "$", "," and "." are set in the text face (Doto draws them as clusters) */
.dots .tf { font-family: var(--text); font-variation-settings: normal; font-weight: 600; -webkit-text-stroke: 0; letter-spacing: 0; font-size: .62em; margin: 0 .03em; }
/* small numbers are never dot type: the text face, tabular */
.fig { font-family: var(--text); font-weight: 600; font-feature-settings: "kern" 1, "tnum" 1; letter-spacing: -0.02em; }

/* ---- header ---------------------------------------------------------------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--top);
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand .wordmark { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1; }
.nav { margin-left: auto; display: flex; gap: clamp(18px, 2.4vw, 34px); }
.nav a { font-size: var(--s-small); color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--blue); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  height: 48px; padding: 0 22px; background: var(--blue); color: var(--on-blue);
  font-weight: 500; text-decoration: none; white-space: nowrap; border-radius: 0;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { background: #0039d6; }
.btn:active { transform: translateY(1px); }
.btn.small { height: 40px; padding: 0 16px; font-size: var(--s-small); }
.btn.on-blue { background: var(--paper); color: var(--blue); }
.btn.on-blue:hover { background: var(--blue-3); }
.btn.line { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.btn.line:hover { background: var(--blue-3); }
.menu-btn { display: none; }
.link { display: inline-flex; align-items: center; gap: .45em; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--ink-3); }
.link:hover { color: var(--blue); text-decoration-color: var(--blue); }
.link svg { width: .8em; height: .8em; fill: currentColor; }

/* ---- sections ------------------------------------------------------------------ */
.section { position: relative; padding: var(--sp-section) var(--gutter); }
.section-head { max-width: 46rem; margin-bottom: var(--sp-head); }
.section-head h2 { margin: 14px 0 0; font-size: var(--s-title); color: var(--ink); }
.section-head p { margin: var(--sp-block) 0 0; font-size: var(--s-lead); color: var(--ink-2); line-height: 1.5; max-width: 38rem; }
/* the shared label and caption */
.label, .hh-field > span, .st-table th, .fr-table th { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: var(--label-weight); color: var(--label-color); }
.caption, .st-cap, .tm-src, .proof .page-cap, .tm-note { font-size: var(--cap-size); color: var(--cap-color); line-height: 1.45; }
/* the wordmark: the name in ink, its ending in blue, one word */
.wordmark { letter-spacing: -0.02em; white-space: nowrap; }
.wordmark b { color: var(--blue); font-weight: inherit; }
.band { background: var(--blue); color: var(--on-blue); }

/* a quiet dot grid, used as structure in a few places only */
.dotgrid { background-image: radial-gradient(circle, var(--grey-2) 1.4px, transparent 1.6px); background-size: 22px 22px; }
.band .dotgrid, .dotgrid.on-blue { background-image: radial-gradient(circle, rgba(255, 255, 255, .22) 1.4px, transparent 1.6px); }

/* stitches and threads (shared by every scene) */
.stitch-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.stitch-layer .st { fill: var(--blue); }
.stitch-layer .st-fill { fill: var(--blue); opacity: .14; }
.stitch-layer .th { fill: var(--blue); }

/* digit wheels: numbers roll once and land exactly */
/* every piece of a rolling number is one cell tall and clipped, so nothing of a neighbouring digit shows */
.wheels { --cell: 1.3em; display: inline-flex; align-items: flex-start; vertical-align: top; line-height: var(--cell); }
.wheel, .wheels > .sep, .wheels > .suf { display: inline-block; height: var(--cell); line-height: var(--cell); vertical-align: top; }
.wheel { overflow: hidden; }
.wheel .strip { display: flex; flex-direction: column; will-change: transform; }
.wheel .strip span { height: var(--cell); line-height: var(--cell); display: block; text-align: center; }

/* ---- footer, dialog ------------------------------------------------------------------ */
.foot { padding: clamp(48px, 8vh, 80px) var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr); gap: 28px clamp(24px, 4vw, 64px);
  color: var(--ink-2); font-size: var(--s-small); border-top: 1px solid var(--grey-2); }
.foot-brand .wordmark { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.foot-brand p { margin: 10px 0 14px; max-width: 22rem; color: var(--ink-3); }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-nav a { color: var(--ink-2); text-decoration: none; }
.foot-nav a:hover { color: var(--blue); }
.foot-note { grid-column: 1 / -1; margin: 12px 0 0; padding-top: 18px; border-top: 1px solid var(--grey-1); color: var(--ink-3); font-size: var(--label-size); line-height: 1.5; }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
.request { width: min(540px, calc(100vw - 32px)); padding: 0; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(12, 13, 18, .22); }
.request::backdrop { background: rgba(12, 13, 18, .3); }
.request-form { display: grid; gap: 18px; padding: 30px 32px 32px; }
.rq-head { display: flex; justify-content: space-between; align-items: baseline; }
.rq-head h2 { margin: 0; font-size: 1.7rem; color: var(--ink); font-weight: 600; letter-spacing: -0.02em; }
.rq-close { font-size: 1.8rem; line-height: 1; color: var(--ink-3); width: 36px; height: 36px; }
.rq-close:hover { color: var(--ink); }
.rq-lead { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.request label { display: grid; gap: 6px; font-size: .85rem; color: var(--ink-2); }
.request input, .request textarea { font-size: 1rem; color: var(--ink); background: var(--grey-1); border: 0; border-bottom: 1px solid var(--ink-3); padding: 11px 12px; border-radius: 0; resize: vertical; }
.request input:focus, .request textarea:focus { outline: none; border-bottom-color: var(--blue); background: var(--blue-3); }
.rq-foot { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.rq-note { font-size: .85rem; color: var(--ink-2); }
.sent .sent-text { font: .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 10rem; color: var(--ink); }
.sent .rq-lead a { color: var(--ink); text-decoration-color: var(--blue); text-underline-offset: .2em; }

/* the end of the home page: the offer in three lines, and the sample */
.offer { border-top: 1px solid var(--grey-2); }
.offer-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-head) clamp(32px, 6vw, 110px); align-items: start; }
.offer h2 { grid-column: 1 / -1; margin: 0; font-size: var(--s-title); color: var(--ink); }
.offer-plans { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.offer-plans li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--grey-2); }
.offer-plans b { order: 2; font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--blue); white-space: nowrap; font-feature-settings: "kern" 1, "tnum" 1; }
.offer-plans span { color: var(--ink-2); }
.nw { white-space: nowrap; }
.notrack-note { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; margin: 0; padding: 8px 14px;
  background: var(--paper); color: var(--ink-2); font-size: var(--s-small); border: 1px solid var(--grey-2); white-space: nowrap; }
.offer-note { grid-column: 1; margin: -12px 0 0; font-size: var(--cap-size); color: var(--cap-color); line-height: 1.5; }
.offer-note a { color: var(--ink); text-decoration-color: var(--blue); text-underline-offset: .2em; margin-left: .25em; }
.offer-ask { grid-column: 2; grid-row: 2; display: grid; gap: 20px; justify-items: start; }
.offer-ask p { margin: 0; font-size: var(--s-lead); line-height: 1.5; color: var(--ink); max-width: 30rem; }
@media (max-width: 860px) {
  .offer-in { grid-template-columns: 1fr; }
  .offer-note { margin-top: -14px; }
  .offer-ask { grid-column: 1; grid-row: auto; }
}

@media (max-width: 860px) {
  :root { --top: 60px; }
  .top { gap: 10px; }
  .brand .wordmark { font-size: 1.15rem; }
  /* phone navigation: the five pages behind a small Menu button, opening under the bar */
  .nav { display: none; }
  .nav.open { display: flex; flex-direction: column; gap: 0; position: fixed; top: var(--top); left: 0; right: 0; margin: 0;
    padding: 6px var(--gutter) 18px; background: var(--paper); border-bottom: 1px solid var(--grey-2); box-shadow: 0 18px 40px rgba(12, 13, 18, .1); }
  .nav.open a { padding: 13px 0; font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--grey-1); }
  .nav.open a:last-child { border-bottom: 0; }
  .nav.open a[aria-current="page"] { text-underline-offset: 5px; }
  .top .btn.small { margin-left: auto; height: 36px; padding: 0 12px; font-size: .8rem; }
  .menu-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; font-size: .8rem; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px var(--grey-2); }
  .menu-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--ink); }
  .section { padding: var(--sp-section) var(--gutter); }
  :root { --sp-section: 76px; --sp-head: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}


/* shared controls: segmented choices and toggle chips (used by several scenes and pages) */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button, .chip { height: 38px; padding: 0 14px; border: 1px solid var(--grey-2); background: var(--paper); font-size: var(--s-small); color: var(--ink-2); transition: background .15s, color .15s, border-color .15s; }
.seg button { min-width: 44px; }
.seg button:hover, .chip:hover { border-color: var(--blue); color: var(--blue); }
.seg button[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }