/* The base layer of the new pages (Website/Design/DESIGN.md, from the shipped type page, 2026-10-19).
   A page on the new layout puts class="ct" on its root (usually <main class="ct">) and builds from
   these tokens and primitives; nothing here touches the old pages. Inside .ct the old global resets
   of style.css (html, a, button { all: unset }) are rolled back to normal behaviour, so links and
   buttons need no per-element repair. When the last old page is rebuilt, style.css's resets go.

   Layout: phone first (20 px gutter); tablet 600-899 = phone layout, text column ~640; desktop
   ≥ 900 = container 1200, heading column + 680 px text column. Grid and flex only, no floats. */

:root{
  --ct-navy:#284257; --ct-ink:#194C8E; --ct-ink2:#2D5A9E; --ct-text:#434244; --ct-muted:#6B7280;
  --ct-grey:#F7F7F7; --ct-line:#E6E8EB; --ct-rule:#D8D8D8; --ct-track:#DEDEDE; --ct-empty:#EDEDED;
  --ct-rb:10px; --ct-rc:18px; --ct-rm:12px;
  --ct-serif:"EB Garamond",Georgia,serif; --ct-sans:"Roboto",system-ui,sans-serif;
  --ct-px:20px; --ct-wrap:1200px; --ct-col:680px;
  --ct-sec:44px; --ct-sec-end:48px;
}
@media (min-width:600px){ :root{ --ct-px:max(20px,calc((100vw - 640px) / 2)) } }
@media (min-width:900px){ :root{ --ct-px:32px; --ct-sec:104px; --ct-sec-end:112px } }

/* ---------- reset inside a new page ---------- */
.ct,.ct *,.ct *::before,.ct *::after{box-sizing:border-box}
.ct{display:block;font:400 16px/1.55 var(--ct-sans);color:var(--ct-text);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.ct a,.ct button{all:revert;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ct a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ct button{background:none;border:0;padding:0;margin:0}
.ct h1,.ct h2,.ct h3,.ct h4{margin:0;font-family:var(--ct-serif);font-weight:400;color:var(--ct-navy);text-wrap:balance}
.ct p,.ct ul,.ct ol,.ct figure,.ct blockquote{margin:0}
.ct ul[role="list"],.ct ol[role="list"]{list-style:none;padding:0}
.ct img,.ct svg,.ct video{display:block;max-width:100%;height:auto}
.ct :focus-visible{outline:2px solid var(--ct-navy);outline-offset:3px;border-radius:6px}
.ct .navy :focus-visible{outline-color:#fff}
.ct-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type scale ---------- */
.ct h1{font-size:clamp(34px,9vw,44px);line-height:1.1}
.ct h2{font-size:30px;line-height:1.2}
.ct h3{font-size:23px;line-height:1.25}
.ct p+p{margin-top:14px}
.ct-lead{font:400 22px/1.4 var(--ct-serif);color:var(--ct-navy)}
.ct-label{font:500 12px/1.2 var(--ct-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ct-muted)}
.ct-num{font-family:var(--ct-serif);font-variant-numeric:lining-nums}
@media (min-width:900px){
  .ct{font-size:17px;line-height:1.62}
  .ct h1{font-size:clamp(44px,4.4vw,64px)}
  .ct h2{font-size:44px;line-height:1.1}
  .ct h3{font-size:28px}
  .ct-lead{font-size:26px}
}

/* ---------- layout ---------- */
.ct-wrap{width:100%;max-width:calc(var(--ct-wrap) + 2 * var(--ct-px));margin-inline:auto;padding-inline:var(--ct-px)}
.ct-band{padding-block:var(--ct-sec) var(--ct-sec-end)}
.ct-band.grey{background:var(--ct-grey)}
.ct-band.navy,.ct .navy{background:var(--ct-navy);color:rgba(255,255,255,.9)}
.ct .navy h1,.ct .navy h2,.ct .navy h3{color:#fff}
.ct-col{max-width:var(--ct-col)}
.ct-stack>*+*{margin-top:var(--ct-gap,16px)}
/* desktop: the heading column beside the 680 px text column; phone: one column */
.ct-split{display:grid;gap:20px}
@media (min-width:900px){
  .ct-split{grid-template-columns:minmax(0,1fr) var(--ct-col);column-gap:64px;align-items:start}
  .ct-split>.ct-sticky{position:sticky;top:24px}
}
.ct-grid{display:grid;gap:var(--ct-gap,20px);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ct-min,280px)),1fr))}

/* ---------- surfaces ---------- */
/* the framed white sheet of the offers: 1 px navy border + inner grey outline at -8 px, radius 18 */
.ct-sheet{position:relative;padding:32px 28px;background:#fff;border:1px solid var(--ct-navy);border-radius:var(--ct-rc);outline:1px solid var(--ct-rule);outline-offset:-8px}
.ct-card{padding:24px;background:#fff;border:1px solid var(--ct-line);border-radius:var(--ct-rc)}
.ct-photo{border-radius:50%;object-fit:cover;aspect-ratio:1}

/* ---------- buttons: a little volume, a spark running round the edge (one spark on screen) ---------- */
.ct .ct-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 22px;border:1px solid #173f73;border-radius:var(--ct-rb);
  background:linear-gradient(var(--ct-ink2),var(--ct-ink) 62%);color:#fff;font:500 16px/1.25 var(--ct-sans);text-decoration:none;text-align:center;text-wrap:balance;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -8px rgba(0,0,0,.45)}
.ct .ct-btn.white{border-color:#fff;background:linear-gradient(#fff,#EEF0F3);color:var(--ct-navy);box-shadow:inset 0 -2px 0 rgba(40,66,87,.12),0 8px 18px -10px rgba(0,0,0,.6)}
.ct .ct-btn::after{content:"";position:absolute;left:0;top:0;width:22px;height:2px;pointer-events:none;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff);box-shadow:0 0 6px 1px rgba(255,255,255,.75);
  offset-path:inset(0 round var(--ct-rb));offset-rotate:auto;offset-anchor:100% 50%;animation:ct-run 4.5s linear infinite}
.ct .ct-btn.white::after{background:linear-gradient(90deg,rgba(25,76,142,0),var(--ct-ink));box-shadow:0 0 6px 1px rgba(25,76,142,.55)}
.ct .ct-btn.quiet::after,.ct .stuck .ct-btn::after{display:none}
.ct .ct-btn.offscreen::after{animation-play-state:paused}
.ct .ct-btn:active{transform:translateY(1px)}
.ct .ct-btn svg{width:18px;height:18px;flex:0 0 auto}
@keyframes ct-run{from{offset-distance:0%}to{offset-distance:100%}}
@media (min-width:900px){ .ct .ct-btn{min-height:54px;padding-inline:30px;font-size:17px} }
/* a plain text link with an arrow, where a button is too much */
.ct .ct-link{display:inline-flex;align-items:center;gap:8px;color:var(--ct-ink);font-weight:500}

@media (prefers-reduced-motion:reduce){
  .ct .ct-btn::after{display:none}
  .ct *{scroll-behavior:auto!important}
}