/* =========================================================
   Unpuzzled — site styles

   1. Colours    every colour on the page comes from these variables
   2. Settings   fonts and sizes
   3. Base
   4. Components

   The palette is Ink: white on black. As the hero puzzle solves, the page
   fades to its reverse, black on white, and stays that way down the page.
   The script sets --rev on <html> from 0 (as designed) to 1 (reversed), and
   --revt to 0 or 1 as it passes halfway; section 1b mixes each colour.
   ========================================================= */


/* ---------- 1a. Palette: Ink ---------- */
/* The colours as designed (--p-…), plus the few that need their own reversed version (--p-r…). */
:root{
  --p-paper:#0F1216;     /* page background */
  --p-paper-2:#151920;   /* banded sections */
  --p-card:#161A21;      /* cards and inputs */
  --p-ink:#ECEDE7;       /* main text */
  --p-ink-2:#A9AFB8;     /* secondary text */
  --p-ink-3:#7D848E;     /* small labels */
  --p-rule:#2B3139;      /* lines and borders */
  --p-accent:#ECEDE7;    /* buttons, progress lines, step dots */
  --p-on-accent:#0F1216; /* text on accent */
  --p-hover:#74A8A9;     /* button hover */
  --p-on-hover:#0F1216;
  --p-mark:#74A8A9;      /* highlighter: the site's one accent colour, a muted blue */
  --p-on-mark:#0F1216;
  --p-tile:#262C35;      /* puzzle tiles, in place */
  --p-tile-shuffle:#74A8A9; /* puzzle tiles, while scrambled */
  --p-tile-ink:#ECEDE7;  /* puzzle letters */
  --p-rtile:#12161D;     /* puzzle tiles, reversed */
  --p-rtile-ink:#ECEDE7; /* puzzle letters, reversed */
  --p-redact:#ECEDE7;    /* redaction bars */
  --p-err:#FF8A80;       /* error text, on black */
  --p-rerr:#B3261E;      /* error text, on white */
  --p-shadow:rgba(0,0,0,.6);
  --p-rshadow:rgba(18,22,29,.28);
  color-scheme:dark;
}


/* ---------- 1b. Colours in use ---------- */
/* At --rev:0 these are the palette as designed; at --rev:1 background and text swap,
   buttons swap with their text, and the tiles take their reversed colours. */

/* Browsers without color-mix (before 2023) keep the palette as designed: white on black throughout. */
:root{
  --paper:var(--p-paper); --paper-2:var(--p-paper-2); --card:var(--p-card);
  --ink:var(--p-ink); --ink-2:var(--p-ink-2); --ink-3:var(--p-ink-3); --rule:var(--p-rule);
  --accent:var(--p-accent); --on-accent:var(--p-on-accent);
  --hover:var(--p-hover); --on-hover:var(--p-on-hover);
  --mark:var(--p-mark); --on-mark:var(--p-on-mark);
  --tile:var(--p-tile); --tile-ink:var(--p-tile-ink); --redact:var(--p-redact); --on-redact:var(--p-paper);
  --glass:var(--p-paper); --err:var(--p-err); --shadow:var(--p-shadow);
  /* Logo v2: the cube's right face (darker on light pages, lighter on dark) */
  --cube-right:#6A707C;
}
/* The background fades with the scroll (--rev). Text, buttons, tiles and redaction bars
   flip in a short timed fade (--revt) as the background passes halfway, so they never
   share its colour and always stay readable. */
@property --revt { syntax: '<number>'; inherits: true; initial-value: 0; }
@supports (color: color-mix(in srgb, red 50%, blue)){
  :root{
    --rev:0;
    --revt:0;
    transition:--revt .4s ease;
    --r:calc(var(--rev) * 100%);
    --rt:calc(var(--revt) * 100%);
    --paper:    color-mix(in srgb, var(--p-ink) var(--r), var(--p-paper));
    --paper-2:  color-mix(in srgb, color-mix(in srgb, var(--p-ink) 91%, var(--p-paper)) var(--r), var(--p-paper-2));
    --card:     color-mix(in srgb, color-mix(in srgb, var(--p-ink) 94%, var(--p-paper)) var(--r), var(--p-card));
    --rule:     color-mix(in srgb, color-mix(in srgb, var(--p-paper) 17%, var(--p-ink)) var(--r), var(--p-rule));
    --ink:      color-mix(in srgb, var(--p-paper) var(--rt), var(--p-ink));
    --ink-2:    color-mix(in srgb, color-mix(in srgb, var(--p-paper) 72%, var(--p-ink)) var(--rt), var(--p-ink-2));
    --ink-3:    color-mix(in srgb, color-mix(in srgb, var(--p-paper) 56%, var(--p-ink)) var(--rt), var(--p-ink-3));
    --accent:   color-mix(in srgb, var(--p-on-accent) var(--rt), var(--p-accent));
    --on-accent:color-mix(in srgb, var(--p-accent) var(--rt), var(--p-on-accent));
    --hover:    color-mix(in srgb, var(--p-mark) var(--rt), var(--p-hover));
    --on-hover: color-mix(in srgb, var(--p-on-mark) var(--rt), var(--p-on-hover));
    --mark:     var(--p-mark);
    --on-mark:  var(--p-on-mark);
    --tile:     color-mix(in srgb, var(--p-rtile) var(--rt), var(--p-tile));
    --tile-ink: color-mix(in srgb, var(--p-rtile-ink) var(--rt), var(--p-tile-ink));
    --redact:   color-mix(in srgb, var(--p-paper) var(--rt), var(--p-redact));
    --on-redact:color-mix(in srgb, var(--p-ink) var(--rt), var(--p-paper));
    --glass:    color-mix(in srgb, var(--paper) 87%, transparent);
    --err:      color-mix(in srgb, var(--p-rerr) var(--rt), var(--p-err));
    --shadow:   color-mix(in srgb, var(--p-rshadow) var(--r), var(--p-shadow));
    /* worked out where they're used, from the logo's own text colour */
    --cube-right:color-mix(in srgb, currentColor 28%, #8B94A4);
  }
}
@media (prefers-reduced-motion: reduce){ :root{ transition:none } }


/* ---------- 2. Settings ---------- */

:root{
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --hdr:68px;
  --gut:clamp(16px,4vw,48px);
  --max:1200px;
}
/* Short screens (phones held sideways): slimmer header */
@media (max-height:500px){:root{--hdr:56px}}


/* ---------- 3. Base ---------- */

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--hdr);padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
[hidden]{display:none!important}
.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}
a{color:inherit}
::selection{background:var(--mark);color:var(--on-mark)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
a,button,label,select{-webkit-tap-highlight-color:transparent}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}


/* ---------- 4. Components ---------- */

/* Type */
.eyebrow{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0}
h1,h2,h3{font-family:var(--display);font-weight:700;font-stretch:108%;letter-spacing:-.022em;line-height:1.04;margin:0;text-wrap:balance}
h1{font-size:clamp(2.35rem,1.2rem + 3.6vw,4.25rem)}
h2{font-size:clamp(2rem,1.1rem + 2.8vw,3.4rem)}
h3{font-size:clamp(1.45rem,1rem + 1.4vw,2.15rem);line-height:1.1}
p{margin:0}
.lede{font-size:clamp(1.125rem,1rem + .35vw,1.3rem);line-height:1.55;color:var(--ink-2);max-width:34em}
.sec-head{display:grid;gap:18px;max-width:46rem}
.sec-head > p:not(.eyebrow){color:var(--ink-2);font-size:1.125rem;max-width:36em}
.block{padding-block:clamp(88px,11vw,160px)}

/* Highlighter: a solid yellow block behind the whole height of the words, swept in from the left.
   The words turn dark on it, so they read on both the black and the white parts of the page. */
.hl{background-image:linear-gradient(var(--mark),var(--mark));background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;color:var(--on-mark);padding-inline:.1em;margin-inline:-.1em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .6s cubic-bezier(.2,.7,.2,1),color .25s ease .15s}
.fx .hl{background-size:0% 100%;color:inherit}
.fx .hl.on{background-size:100% 100%;color:var(--on-mark)}
/* The hero line's highlight fades in (before its letters unscramble), rather than sweeping */
#hero-hl{transition:background-color .9s ease,color .6s ease}
.fx #hero-hl{background-image:none;background-color:transparent}
.fx #hero-hl.on{background-color:var(--mark);color:var(--on-mark)}

/* Words that light up on scroll */
.fx [data-words] .w{opacity:.16;transition:opacity .35s ease}
.fx [data-words] .w.lit{opacity:1}

/* Fade-up on first view */
.fx [data-in]{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.fx [data-in].in{opacity:1;transform:none}

/* Phones: section headings rise into view. A short accent line draws in above each, then the words slide up
   from behind a mask. The script wraps the words in .rise, and adds .risen once, as each comes into view. */
@media (max-width:759px){
  .fx h2.rises{position:relative;overflow:hidden;padding:16px 0 .12em;margin-bottom:-.12em}
  .fx h2.rises::before{content:"";position:absolute;left:0;top:0;width:48px;height:2px;background:var(--mark);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .fx h2.rises > .rise{display:block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.7,.2,1) .2s}
  .fx h2.rises.risen::before,.fx h2.rises.risen > .rise{transform:none}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:600;font-size:.9375rem;line-height:1;padding:.95em 1.3em;border-radius:3px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--rule)}
@media (hover:hover){
  .btn:hover{background:var(--hover);border-color:var(--hover);color:var(--on-hover)}
  .btn-quiet:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:.75em 1.05em;font-size:.875rem;min-height:40px}
.btn[disabled]{opacity:.6;cursor:progress}

/* Header */
.site-hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--glass);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.site-hdr.scrolled{border-bottom-color:var(--rule)}
.hdr-in{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:24px}
/* Logo and wordmark (the SVG symbols at the top of index.html): squares and letters in the text colour */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{display:block;flex:none}
/* Wordmark v3 (jigsaw letters): the z's in the accent blue, the rest in the text colour */
.brand-logo{height:32px;width:calc(32px * 571.165 / 109.56);transform:translateY(3px)}
@media (max-height:500px){.brand-logo{height:28px;width:calc(28px * 571.165 / 109.56)}}
/* Desktop: 145px wide, and a little lower (phones, including sideways, unchanged) */
@media (min-width:760px) and (min-height:501px){.brand-logo{width:145px;height:calc(145px * 109.56 / 571.165);transform:translateY(6px)}}
.nav{display:none;gap:28px;list-style:none;margin:0;padding:0;font-family:var(--display);font-size:.9375rem}
.nav a{text-decoration:none;color:var(--ink-2);transition:color .2s}
@media (hover:hover){.nav a:hover{color:var(--ink)}}
@media (min-width:880px){.nav{display:flex}}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left}

/* Hero */
.hero{padding-block:clamp(40px,8vh,96px) clamp(72px,10vh,128px)}
.hero-grid{display:grid;gap:40px;grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "board" "statement" "who"}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,.92fr);column-gap:clamp(40px,6vw,96px);row-gap:0;grid-template-areas:"intro board" "statement board" "who board" "dwell board"}
}
.hero-intro{grid-area:intro;display:grid;gap:22px;align-content:start}
.hero-sub{font-family:var(--display);font-weight:600;font-stretch:104%;font-size:clamp(1.35rem,1rem + 1.4vw,2.05rem);line-height:1.2;letter-spacing:-.015em;text-wrap:balance;max-width:24em;margin-top:-4px}
.hero-sub > span{white-space:nowrap}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.statement{grid-area:statement;font-size:clamp(1.45rem,1.05rem + 1.35vw,2.2rem);line-height:1.32;letter-spacing:-.012em;max-width:21em}
@media (min-width:900px){.statement{padding-top:clamp(72px,14vh,150px)}}
.who{grid-area:who;display:grid;gap:10px;border-top:1px solid var(--rule);padding-top:20px}
@media (min-width:900px){.who{margin-top:clamp(40px,7vh,72px)}}
.who p:last-child{font-family:var(--display);font-size:1.0625rem;line-height:1.5}
.board-col{grid-area:board;min-width:0}
@media (min-width:900px){.board-sticky{position:sticky;top:calc(var(--hdr) + env(safe-area-inset-top,0px) + 6vh)}}
/* Once solved, the board holds still for a while as the page scrolls on (a pause of empty space below the
   text beside it), then leaves just as the next section comes in. On phones it pins under the header. */
.board-dwell{display:none}
@media (min-width:900px){.board-dwell{display:block;grid-area:dwell;height:clamp(240px,50vh,520px)}}
@media (max-width:899px){
  .board-col::after{content:"";display:block;height:clamp(140px,38vh,340px)}   /* space inside the column, so the board can pin through it */
  .board-sticky{position:sticky;top:calc(var(--hdr) + env(safe-area-inset-top,0px) + 8px)}
}

/* Puzzle board */
.board{--gap:10px;--ts:calc((100% - 2 * var(--gap)) / 3);position:relative;width:min(100%,440px);width:min(100%,440px,calc(100svh - var(--hdr) - 72px));aspect-ratio:1;margin-inline:auto;container-type:inline-size}
.cell,.tile{position:absolute;width:var(--ts);height:var(--ts);left:calc(var(--c) * (var(--ts) + var(--gap)));top:calc(var(--r) * (var(--ts) + var(--gap)));border-radius:5px}
.cell{border:1px dashed var(--rule);transition:opacity .5s}
.board.solved .cell{opacity:0}
.tile{display:grid;place-items:center;background:var(--tile);background:color-mix(in srgb, var(--tile) calc(var(--real,1) * 100%), var(--p-tile-shuffle));color:var(--tile-ink);font-family:var(--display);font-weight:800;font-stretch:125%;font-size:4rem;font-size:22cqw;line-height:1;padding-bottom:.06em;z-index:1;will-change:transform;user-select:none}
/* Tiles are blue while scrambled and turn their usual colour as each lands home (--real 0 to 1).
   The l and e tiles show i and a while scrambled (--real 0), and their own letters once home (--real 1) */
.tile > span{grid-area:1/1}
.t-real{opacity:var(--real,1)}
.t-ai{opacity:calc(1 - var(--real,1))}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 20px 40px -6px var(--shadow);opacity:var(--lift,0);pointer-events:none}
/* The puzzle beside "Confidential from the first call" (home page) the other way round: black tiles with light
   letters while scrambled, turning blue with dark letters as each lands (--real 0 to 1) */
.conf-board .tile{background:var(--p-mark);background:color-mix(in srgb, var(--p-mark) calc(var(--real,1) * 100%), var(--p-rtile));color:var(--p-paper);color:color-mix(in srgb, var(--p-paper) calc(var(--real,1) * 100%), var(--p-ink))}
.board-meta{width:min(100%,440px);width:min(100%,440px,max(260px,calc(100svh - var(--hdr) - 72px)));margin:16px auto 0;display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* Home page: the hero is a full-screen photograph (v2/index.html, the earlier version, has the puzzle instead). The header lies clear
   over it until the page scrolls, and the words on it stay light while the page below reverses. */
.photo .site-hdr:not(.scrolled){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero-photo{position:relative;isolation:isolate;overflow:hidden;height:100vh;height:100svh;min-height:480px;margin-top:calc(-1 * var(--hdr) - 1px);background:var(--p-paper);color:var(--p-ink);--ink:var(--p-ink);--ink-2:var(--p-ink-2);--rule:var(--p-rule);--accent:var(--p-accent);--on-accent:var(--p-on-accent);--hover:var(--p-hover);--on-hover:var(--p-on-hover)}
/* The duck blinks: img/hero-duck-blink.webp, made from public/Duck/Rubberduck-background-double-blink.gif (same frames
   and timing, 13 seconds, looping). Visitors who ask for less motion get the still, img/hero-duck.webp. */
.hero-bg{position:absolute;inset:0;z-index:-2;background:url(img/hero-duck-blink.webp) 64% 50% / cover no-repeat;will-change:transform}
@media (prefers-reduced-motion: reduce){.hero-bg{background-image:url(img/hero-duck.webp)}}
/* shade behind the words, and a fade into the page at the foot */
.hero-photo::after,.hero-slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,18,22,.8) 0%,rgba(15,18,22,.45) 38%,rgba(15,18,22,0) 60%),linear-gradient(to top,var(--paper) 0%,var(--paper) 1.5%,transparent 18%)}
.hero-photo-in{height:100%;display:flex;align-items:center;padding-top:var(--hdr)}
.hero-photo .hero-intro{max-width:36rem}
.hero-photo .eyebrow{max-width:var(--h1w,none);text-wrap:balance}   /* --h1w: the heading's longest line, set by the script */
/* Version 3 (v3/index.html): the heading is a question in tall condensed capitals (Anton), with "AI:" in olive */
.hero-photo .hero-q{font-family:"Anton","Archivo",Impact,sans-serif;font-weight:400;font-stretch:normal;text-transform:uppercase;letter-spacing:0;line-height:.98;font-size:clamp(2.5rem,1rem + 3.9vw,5.6rem);text-wrap:wrap}
.hero-q .q-ai{color:#858531}
/* Line breaks: two lines on phones ("AI: Can you explain / it to a rubber duck?"), three on wider screens
   ("AI: Can you / explain it to a / rubber duck?") */
.hero-q .q-wide{display:none}
@media (min-width:760px){.hero-q .q-wide{display:inline}.hero-q .q-narrow{display:none}}
.hero-photo:has(.hero-q) .hero-intro{max-width:none}
/* Version 3: the hero is a slider (Swiper, lib/swiper/). Each slide carries its own picture and shading; the dots
   sit at the foot, the current one drawn out in the accent blue. On tall screens the words rise to make room for them. */
.hero-slider::after{content:none}
/* Layers inside a slide count upwards (picture, shading, words): a video below a negative layer inside the moving
   slides can draw black in Chrome */
.hero-slide{overflow:hidden}
.hero-slide .hero-bg,.hero-slide .hero-video,.hero-slide .hero-pig{z-index:0}
.hero-slide::after{z-index:1}
.hero-slide .hero-photo-in{position:relative;z-index:2;transform:translateZ(0)}   /* its own layer: Safari can otherwise draw a
   playing video over the words while a slide moves, then reveal them when it stops */
.hero-dots{--swiper-pagination-color:var(--p-mark);--swiper-pagination-bullet-inactive-color:var(--p-ink);--swiper-pagination-bullet-inactive-opacity:.45;--swiper-pagination-bullet-size:10px;--swiper-pagination-bullet-horizontal-gap:6px;--swiper-pagination-bottom:clamp(16px,3.5vh,32px)}
.hero-dots .swiper-pagination-bullet{transition:width .3s ease,background-color .3s ease,opacity .3s ease}
.hero-dots .swiper-pagination-bullet-active{width:28px;border-radius:5px}
@media (max-aspect-ratio:6/5){.hero-slider .hero-photo-in{padding-bottom:calc(clamp(14px,3vh,32px) + 44px)}}
/* the slot machine slide: a video placed like the duck photograph (and the same way on tall screens) */
.hero-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:68% 50%;pointer-events:none}
.hero-q .q-pigs{color:#F5A1F2}   /* "flying pigs?" in pink (from the Framer design) */

/* Every slide styled after Christopher's Framer design: deep plum behind and in the shading; a bar before the line
   above the heading; a larger, tighter heading; Read more as a terracotta bar with a dark arrow box, bottom right.
   The flying pig slide also has its introduction in grey with "Artificial Intelligence" in orange, and the pig on the
   right, its black fading into the plum at every edge. */
.hero-slide{background:#1A1018}
.hero-slide::after{background:linear-gradient(90deg,rgba(26,16,24,.55) 0%,rgba(26,16,24,.25) 36%,rgba(26,16,24,0) 58%),linear-gradient(to top,var(--paper) 0%,transparent 9%)}   /* light: the picture shows through behind the words and at the foot */
.hero-pig{position:absolute;top:9%;height:86vh;height:min(86svh,50vw);width:auto;aspect-ratio:3/2;left:calc(72vw - min(86svh,50vw) * .75);object-fit:cover;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 24%,#000 88%,transparent),linear-gradient(transparent,#000 8%,#000 66%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 24%,#000 88%,transparent),linear-gradient(transparent,#000 8%,#000 66%,transparent);mask-composite:intersect}
.hero-slide.hero-slide-pig::after{content:none}
.hero-slide .eyebrow{display:flex;align-items:center;gap:14px;color:#F6EEF5;font-size:.875rem;letter-spacing:.14em}
.hero-slide .eyebrow::before{content:"";flex:none;width:3px;height:1.15em;background:#40313B}
.hero-photo .hero-slide .hero-q{font-size:clamp(2.6rem,1rem + 5vw,6.2rem);line-height:.95}   /* Anton's capitals are .84 of the size: lines clear by ~12%, as in Framer */
.slide-copy{display:grid;gap:1.15em;max-width:23em;font-family:var(--display);font-size:clamp(1rem,.85rem + .55vw,1.4rem);line-height:1.42;color:#BCB4B9;margin-top:clamp(8px,2vh,24px)}
.slide-copy .q-orange{color:#DC7E5A}
.btn-read{position:absolute;right:var(--gut);bottom:12%;display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(300px,100%);padding:14px 16px 14px 22px;border-radius:4px;background:#B05C42;color:#2C0B02;font-family:var(--mono);font-size:.9375rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background-color .2s}
@media (hover:hover){.btn-read:hover{background:#C2684C}}
.btn-read-ico{display:grid;place-items:center;width:24px;height:24px;border-radius:3px;background:#0F0F0F}
.btn-read-ico svg{width:16px;height:16px;fill:none;stroke:#ECEDE7;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn-read:focus-visible{outline:2px solid #F6EEF5;outline-offset:3px}

/* Tall screens (phones): each slide's picture runs across the screen from the top to about two-thirds of the way down
   (--pic, the one number to change), sized so the duck's face, the pig's head and the slot machine fit across, then
   fades into the plum. The pig and the machine start just below the header, so the logo doesn't sit on them; the
   duck's head is already clear of it. The words sit over the lower part, on a plum shade rising from the foot, with
   a soft shadow round them as a block (so close lines don't shade each other). */
@media (max-aspect-ratio:6/5){
  .hero-photo .hero-slide{--pic:65%}
  .hero-photo .hero-slide .hero-bg,.hero-photo .hero-slide .hero-video,.hero-photo .hero-slide .hero-pig{top:0;left:0;right:auto;bottom:auto;width:100%;height:var(--pic);aspect-ratio:auto;object-fit:cover;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);-webkit-mask-composite:source-over;mask-composite:add}
  .hero-photo .hero-slide-duck .hero-bg{background-size:cover;background-position:81% 50%}
  .hero-photo .hero-slide-pig .hero-pig,.hero-photo .hero-slide-slot .hero-video{top:var(--hdr);-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 70%,transparent)}
  .hero-photo .hero-slide-pig .hero-pig{object-position:50% 0}
  .hero-photo .hero-slide-slot{--pic:60%}   /* a little less: the whole machine, arm included, fits across the screen */
  .hero-photo .hero-slide-slot .hero-video{object-position:93% 0}
  /* plum, solid at the foot, clear by half-way up, on a gentle curve so there is no visible edge where it ends */
  .hero-photo .hero-slide::after{content:"";background:linear-gradient(to top,#1A1018 0%,rgba(26,16,24,.95) 10%,rgba(26,16,24,.8) 20%,rgba(26,16,24,.58) 30%,rgba(26,16,24,.3) 40%,rgba(26,16,24,.1) 46%,rgba(26,16,24,0) 50%)}
  .hero-photo .hero-slide .hero-intro{filter:drop-shadow(0 1px 8px rgba(0,0,0,.85))}
  .hero-slide .hero-photo-in{flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:20px}
  .btn-read{position:static;width:100%;max-width:360px}
  .slide-copy{font-size:.9375rem;line-height:1.45;gap:.8em}
}
/* Between that and widescreen, the duck sits further right so the words stay clear of its face */
@media (min-aspect-ratio:6/5) and (max-aspect-ratio:8/5){.hero-bg{background-position:44% 50%}}
.hero-photo .cta-row{margin-top:clamp(18px,4vh,40px)}   /* "Read more" sits further below "Rubber Duck" */
/* "Rubber Duck": on a block of the accent blue, with room around the words and a little more after them */
.hero-mark{display:inline-block;margin-top:.3em;padding:.1em .62em .14em .32em;border-radius:3px;background:var(--mark);color:var(--on-mark)}
/* Screens up to a little wider than square (phones, upright tablets, tall windows): the photograph across the top
   two-thirds, sized so the whole face fits and never narrower than the screen, with the words below it on the dark
   of the room. Wider screens have the words beside the duck. */
@media (max-aspect-ratio:6/5){
  .hero-bg{background-size:auto 66%;background-size:max(100%, 117.3svh) auto;background-position:76% 0}
  .hero-photo::after,.hero-slide::after{background:linear-gradient(to top,var(--p-paper) 0%,var(--p-paper) 38%,rgba(15,18,22,.6) 50%,rgba(15,18,22,0) 62%),linear-gradient(to top,var(--paper) 0%,var(--paper) 1%,transparent 8%)}
  .hero-photo-in{align-items:flex-end;padding-bottom:clamp(14px,3vh,32px)}
}
/* Phones: a smaller heading, and the words kept low, clear of the duck's beak */
@media (max-width:759px){
  .hero-photo h1{font-size:clamp(1.85rem,1.3rem + 2.4vw,2.2rem)}
  .hero-photo .hero-intro{gap:16px}
  .hero-photo .cta-row{margin-top:10px}
}
/* What follows the photograph: the introduction, the statement and who we advise */
.intro-grid{display:grid;gap:clamp(40px,6vw,72px);grid-template-columns:minmax(0,1fr)}
.intro .lede{font-size:clamp(1.25rem,1rem + .7vw,1.6rem);line-height:1.5;color:var(--ink);max-width:30em}
.intro .statement,.intro .who{grid-area:auto;padding-top:0;margin-top:0}

/* Stages (pinned stepper on wide screens) */
.stages{padding-block:clamp(88px,11vw,160px);border-top:1px solid var(--rule)}
.stages-inner{display:grid;gap:clamp(36px,5vh,56px)}
.stages-top{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px}
.stage-count{display:none;font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;color:var(--ink-2);font-variant-numeric:tabular-nums;margin:0}
.stage-count b{font-family:var(--display);font-weight:700;font-size:2.4rem;letter-spacing:-.02em;color:var(--ink);margin-right:.15em}
.rail-wrap{display:none;position:relative}
.rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.rail-track,.rail-fill{position:absolute;left:8px;top:7px;height:2px;width:75%}
.rail-track{background:var(--rule)}
.rail-fill{background:var(--accent);transform-origin:left;transform:scaleX(0)}
.rail button{all:unset;box-sizing:border-box;display:grid;gap:12px;justify-items:start;cursor:pointer;font-family:var(--display);font-size:.9375rem;font-weight:500;color:var(--ink-3);padding-right:12px;transition:color .3s}
.rail .dot{width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--rule);position:relative;z-index:1;transition:background-color .3s,border-color .3s}
.rail li.done .dot{background:var(--accent);border-color:var(--accent)}
.rail li.on .dot{background:var(--mark);border-color:var(--accent)}
.rail li.on button,.rail li.done button{color:var(--ink)}
@media (hover:hover){.rail button:hover{color:var(--ink)}}
.rail button:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.panels{display:grid;gap:56px}
.panel{display:grid;gap:22px;border-top:1px solid var(--rule);padding-top:28px}
.panel-label{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.panel-cols{display:grid;gap:28px}
@media (min-width:760px){.panel-cols{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px}}
.panel h4{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.qs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.qs li{position:relative;padding-left:1.5em;font-size:1.125rem;line-height:1.45}
.qs li::before{content:"?";position:absolute;left:0;top:0;font-family:var(--display);font-weight:800;color:var(--ink-3)}
.panel-do{font-size:1.125rem;line-height:1.55}
.pin .stages{height:380vh;padding-block:0}
.pin .stages-pin{position:sticky;top:calc(var(--hdr) + env(safe-area-inset-top,0px));height:calc(100vh - var(--hdr) - env(safe-area-inset-bottom,0px));height:calc(100svh - var(--hdr) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;align-items:center}
.pin .stages-pin > .wrap{width:100%}
.pin .stage-count,.pin .rail-wrap{display:block}
.pin .panels{gap:0}
.pin .panel-label{display:none}
.pin .panel{grid-area:1/1;border-top:0;padding-top:0;opacity:0;transform:translateY(18px);visibility:hidden;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s linear .45s}
.pin .panel.on{opacity:1;transform:none;visibility:visible;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s}

/* Stages, wherever they aren't pinned (the exact opposite of the pin condition in the script): a row of
   cards to swipe through, running to the edges of the screen with the next card peeking in, and the rail
   and counter above them following along (stageSwiped in the script). The ::after makes the space after
   the last card, which Safari can leave out. The practices do the same on phones. */
@media not all and (min-width:700px) and (min-height:680px){
  .stages-inner{min-width:0}
  .stage-count,.rail-wrap{display:block}
  .stages-top{gap:20px}
  .panels{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding:0 0 0 var(--gut);position:relative}
  .panels::-webkit-scrollbar{display:none}
  .panels::after{content:"";flex:0 0 calc(var(--gut) - 12px)}
  .panel{flex:0 0 86%;scroll-snap-align:start;align-content:start;border:1px solid var(--rule);border-radius:6px;background:var(--card);padding:22px 20px 26px;gap:18px}
  .panel-cols{gap:22px}
  .rail button{font-size:.8125rem;line-height:1.25;gap:10px}
}

/* Moving band */
.band{overflow:hidden;background:var(--paper-2);border-block:1px solid var(--rule);padding-block:clamp(18px,3vw,30px);display:grid;gap:4px}
.band-row{display:flex;align-items:center;width:max-content;white-space:nowrap;font-family:var(--display);font-weight:800;font-stretch:122%;font-size:clamp(2rem,1rem + 4vw,4.4rem);line-height:1.12;letter-spacing:-.025em;will-change:transform}
.band-row.out{color:transparent;-webkit-text-stroke:1.25px var(--ink);transform:translateX(-25%)}
.band-row .sq{display:inline-block;width:.36em;height:.36em;background:var(--mark);margin-inline:.42em;flex:none}

/* What we hear / what we've seen */
.ledger{margin-top:clamp(48px,7vw,80px);border-bottom:1px solid var(--rule)}
.claim{display:grid;gap:18px 56px;padding-block:clamp(32px,4.5vw,52px);border-top:1px solid var(--rule)}
@media (min-width:860px){.claim{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.lbl{display:block;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.said{font-family:var(--display);font-weight:700;font-stretch:106%;font-size:clamp(1.55rem,1rem + 1.7vw,2.45rem);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.seen{font-size:clamp(1.2rem,1rem + .6vw,1.55rem);line-height:1.45}

/* What goes right */
.right{background:var(--paper-2);border-block:1px solid var(--rule)}
.right-grid{display:grid;gap:40px}
@media (min-width:880px){.right-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}}
.ticks{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.ticks li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:18px;align-items:start;padding-block:20px;border-top:1px solid var(--rule);font-family:var(--display);font-weight:600;font-size:clamp(1.12rem,.95rem + .6vw,1.4rem);line-height:1.3}
.ticks .box{width:28px;height:28px;border:1.5px solid var(--accent);border-radius:3px;display:grid;place-items:center;margin-top:-1px}
.ticks svg{width:20px;height:20px}
.ticks path{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1)}
.fx .ticks path{stroke-dashoffset:1}
.fx .ticks li.on path{stroke-dashoffset:0}
.fx .ticks li > span:last-child{opacity:.28;transition:opacity .5s}
.fx .ticks li.on > span:last-child{opacity:1}

/* How it works */
.how-grid{display:grid;gap:48px}
@media (min-width:880px){
  .how-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px}
  .how-grid .sec-head{position:sticky;top:calc(var(--hdr) + 48px);align-self:start}
}
.steps-wrap{position:relative;min-width:0}
.steps{list-style:none;margin:0;padding:0 0 0 60px;display:grid;gap:clamp(40px,6vw,64px)}
.steps-track,.steps-fill{position:absolute;left:15px;top:16px;bottom:16px;width:2px}
.steps-track{background:var(--rule)}
.steps-fill{background:var(--accent);transform-origin:top;transform:scaleY(1)}
.fx .steps-fill{transform:scaleY(0)}
.step{position:relative}
.step-dot{position:absolute;left:-60px;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--accent);background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-size:.8125rem;font-weight:500;transition:background-color .3s,color .3s,border-color .3s}
.fx .step:not(.on) .step-dot{background:var(--paper);color:var(--ink-3);border-color:var(--rule)}
.step h3{font-size:clamp(1.3rem,1rem + .9vw,1.75rem);padding-top:2px}
.step p{margin-top:10px;color:var(--ink-2);max-width:34em}
.fx .step h3,.fx .step p{transition:opacity .5s}
.fx .step:not(.on) h3,.fx .step:not(.on) p{opacity:.35}

/* Confidentiality */
.conf{border-top:1px solid var(--rule)}
.conf-grid{display:grid;gap:56px}
@media (min-width:920px){.conf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}}
.points{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px}
.points li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:14px;align-items:baseline;font-size:1.0625rem}
.points li::before{content:"";width:8px;height:8px;background:var(--accent);transform:translateY(-1px)}
.record{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:clamp(20px,3vw,32px);box-shadow:0 30px 60px -36px var(--shadow)}
.record-head,.record-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.record-head{padding-bottom:16px;border-bottom:1px solid var(--accent)}
.record-foot{padding-top:16px}
.rec-status{color:var(--ink)}
.record dl{margin:0}
.record .row{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);gap:16px;align-items:baseline;padding-block:16px;border-bottom:1px solid var(--rule)}
.record dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.record dd{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,.95rem + .4vw,1.25rem)}
@media (max-width:480px){.record .row{grid-template-columns:minmax(0,1fr);gap:6px}}
.red{position:relative;display:inline-block;isolation:isolate}
.red::after{content:"";position:absolute;inset:-.12em -.25em;background:var(--redact);transform-origin:left center;transform:scaleX(var(--x,1));border-radius:1px;z-index:-1}
/* The words stay readable: they turn the bar's opposite colour exactly where the bar has reached */
.red > span{display:inline-block;padding-inline:.25em;margin-inline:-.25em;background:linear-gradient(90deg,var(--on-redact) calc(var(--x,1) * 100%),var(--ink) 0);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (forced-colors:active){.red > span{background:none;color:CanvasText}}
.fx .red{--x:0}

/* Practices: the sectors, on a banded background */
.practices{background:var(--paper-2);border-top:1px solid var(--rule)}
.practices-grid{display:grid;gap:clamp(32px,5vw,56px)}
.practice-list{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(32px,5vw,72px)}
@media (min-width:760px){.practice-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.practice-list li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-content:start;padding-block:clamp(20px,2.5vw,28px);border-top:1px solid var(--rule)}
.practice-list .pn{grid-row:1 / 4;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--ink-3);padding-top:.45em}
.practice-list h3{font-size:clamp(1.3rem,1rem + .9vw,1.75rem)}
.practice-list .pi{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:8px}
.practice-list p:not(.pi){color:var(--ink-2);margin-top:10px;max-width:32em}
.swipe-meta{display:none}
/* Phones: a row of cards to swipe through (like the stages above), with a counter and progress line under it */
@media (max-width:759px){
  .practice-wrap{display:grid;gap:18px;min-width:0}
  .practice-list{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding:0 0 0 var(--gut);position:relative}
  .practice-list::-webkit-scrollbar{display:none}
  .practice-list::after{content:"";flex:0 0 calc(var(--gut) - 12px)}
  .practice-list li{flex:0 0 84%;scroll-snap-align:start;grid-template-columns:minmax(0,1fr);border:1px solid var(--rule);border-radius:6px;background:var(--card);padding:20px 20px 24px}
  .practice-list .pn{grid-row:auto;padding-top:0;margin-bottom:14px}
  .swipe-meta{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .swipe-n b{font-weight:500;color:var(--ink)}
  .swipe-line{flex:1;height:2px;background:var(--rule);position:relative;overflow:hidden}
  .swipe-line span{position:absolute;inset:0;background:var(--mark);transform:scaleX(.143);transform-origin:left}
}

/* About: the statement and "Our tech can be your tech" side by side, then the invitation across both columns */
.about{border-top:1px solid var(--rule)}
.about-grid{display:grid;gap:clamp(28px,4vw,48px) clamp(40px,6vw,96px)}
.about-lead{font-size:clamp(1.45rem,1.05rem + 1.35vw,2.2rem);line-height:1.32;letter-spacing:-.012em;max-width:22em;text-wrap:pretty}
.about-tech{display:grid;gap:14px;align-content:start}
.tech{list-style:none;margin:0;padding:0}
.tech li{display:grid;gap:4px;padding-block:14px;border-top:1px solid var(--rule)}
.tech b{font-family:var(--display);font-weight:600;font-size:1.125rem;line-height:1.3}
.tech span{color:var(--ink-2);font-size:1rem;line-height:1.5}
.about-more{display:grid;gap:20px clamp(40px,6vw,96px);align-items:end;border-top:1px solid var(--rule);padding-top:clamp(24px,3vw,36px)}
.about-more p:first-child{font-size:1.125rem;color:var(--ink-2);max-width:34em}
.about-cta a{font-family:var(--display);font-weight:700;font-stretch:106%;font-size:clamp(1.3rem,1rem + .9vw,1.75rem);line-height:1.2;letter-spacing:-.015em;text-decoration:none;background-image:linear-gradient(var(--mark),var(--mark));background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;padding-inline:.1em;margin-inline:-.1em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .5s cubic-bezier(.2,.7,.2,1),color .2s ease .1s}
.about-cta a:focus-visible{background-size:100% 100%;color:var(--on-mark)}
@media (hover:hover){.about-cta a:hover{background-size:100% 100%;color:var(--on-mark)}}
@media (min-width:880px){
  .about-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
  .about-grid > .eyebrow{grid-column:1/-1}
  /* the bottom row uses the same two columns, so the invitation lines up under "Our tech can be your tech" */
  .about-more{grid-column:1/-1;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-columns:subgrid}
}

/* Contact form: on the accent blue, whichever way round the page is, with dark text. The colours inside are
   set for the blue: lighter fields, dark buttons and ticks (a light hover), and a darker red for errors so it reads. */
.contact{background:var(--p-mark);color:#0F1216;--ink:#0F1216;--ink-2:#212D30;--ink-3:#2D3F42;--rule:#567B7D;--card:#CADAD6;--paper-2:#B0CBC8;--accent:#0F1216;--on-accent:#ECEDE7;--hover:#ECEDE7;--on-hover:#0F1216;--mark:#0F1216;--on-mark:#ECEDE7;--err:#6B0F0B}
.contact-grid{display:grid;gap:48px}
form{display:grid;gap:40px;min-width:0}
/* While "Check before you send" is open, it takes the place of the fields */
.confirming fieldset{display:none}
fieldset{border:0;padding:0;margin:0;display:grid;gap:16px;min-width:0}
legend{font-family:var(--display);font-weight:700;font-size:1.125rem;padding:0;margin-bottom:14px}
legend .n{font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--ink-3);margin-right:10px;letter-spacing:.08em}
.chips{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.chip{position:relative;display:block}
.chip input,.check input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip-body{display:grid;gap:4px;height:100%;padding:14px 16px;border:1px solid var(--rule);border-radius:4px;background:var(--card);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.chip-body b{font-family:var(--display);font-weight:600}
.chip-body small{color:var(--ink-2);font-size:.875rem;line-height:1.35}
@media (hover:hover){.chip:hover .chip-body{border-color:var(--ink-3)}}
.chip input:checked + .chip-body{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.chip input:checked + .chip-body b::before{content:"";display:inline-block;width:.55em;height:.55em;background:var(--mark);box-shadow:inset 0 0 0 1px var(--ink);margin-right:.45em;vertical-align:.06em}
.chip input:focus-visible + .chip-body,.check input:focus-visible + .box{outline:2px solid var(--ink);outline-offset:2px}
.fields{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.span-2{grid-column:1/-1}}
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field label,.field .q{font-family:var(--display);font-size:.9375rem;font-weight:500}
.opt{color:var(--ink-3);font-weight:400}
input[type=text],input[type=email],input[type=tel],select,textarea{font:inherit;font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:4px;padding:.75em .85em;width:100%;min-width:0}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
textarea{min-height:9em;resize:vertical}
::placeholder{color:var(--ink-3);opacity:1}
select:invalid{color:var(--ink-3)}
select option{color:var(--ink)}
.hint{font-size:.875rem;color:var(--ink-2)}
.err{font-family:var(--display);font-size:.875rem;color:var(--err)}
[aria-invalid="true"]{border-color:var(--err)!important}
/* How should we get in touch: tick boxes, only one ticked at a time (they're radio buttons underneath) */
.checks{display:flex;flex-wrap:wrap;gap:10px 22px}
.check{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--display);font-size:.9375rem;min-height:32px}
.check .box{flex:none;width:22px;height:22px;border:1.5px solid var(--ink-3);border-radius:3px;background:var(--card);display:grid;place-items:center;transition:background-color .15s,border-color .15s}
.check .box svg{width:16px;height:16px;fill:none;stroke:var(--on-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s}
.check input:checked + .box{background:var(--accent);border-color:var(--accent)}
.check input:checked + .box svg{opacity:1}
@media (hover:hover){.check:hover .box{border-color:var(--ink)}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit-row{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.fine{font-size:.875rem;color:var(--ink-2)}
.confirm{border:1px solid var(--accent);border-radius:6px;padding:clamp(20px,3vw,28px);background:var(--card);display:grid;gap:18px}
.confirm h3{font-size:1.5rem}
.confirm h3:focus{outline:none}
.confirm dl{margin:0}
.confirm dl div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:12px;padding-block:9px;border-bottom:1px solid var(--rule)}
.confirm dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:.25em}
.confirm dd{margin:0;overflow-wrap:anywhere}
@media (max-width:480px){.confirm dl div{grid-template-columns:minmax(0,1fr);gap:2px}}
.confirm-actions{display:flex;flex-wrap:wrap;gap:12px}
.confirm-step{display:grid;gap:18px}
.code-note{color:var(--ink-2);max-width:40em}
.code-field input{max-width:11em}
#code{font-family:var(--mono);font-size:1.5rem;letter-spacing:.3em;padding:.45em .7em}
.status-msg{padding:16px 18px;border-radius:4px;border:1px solid var(--rule);background:var(--paper-2);font-family:var(--display);font-size:1rem}
.status-msg.ok{border-color:var(--accent)}

/* Sent: the form gives way to a confirmation */
.is-sent > :not(.sent){display:none!important}
.sent{grid-column:1/-1;display:grid;gap:clamp(28px,4vw,56px);padding:clamp(24px,4vw,48px);border:1px solid var(--rule);border-radius:6px;background:var(--card)}
@media (min-width:760px){.sent{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.sent-main{display:grid;gap:14px;justify-items:start}
.sent-tick{width:56px;height:56px;border-radius:50%;background:var(--mark);display:grid;place-items:center;margin-bottom:6px}
.sent-tick svg{width:30px;height:30px}
.sent-tick path{fill:none;stroke:var(--on-mark);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.fx .sent:not([hidden]) .sent-tick path{animation:tick-draw .6s .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes tick-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.sent h3{font-size:clamp(1.8rem,1.2rem + 2vw,2.6rem)}
.sent h3:focus{outline:none}
.sent-main > p:not(.eyebrow){font-size:1.125rem;color:var(--ink-2);max-width:30em}
.sent-main .btn{margin-top:10px}
.sent-next{display:grid;gap:14px}
.sent-steps{list-style:none;margin:0;padding:0;counter-reset:step;border-bottom:1px solid var(--rule)}
.sent-steps li{counter-increment:step;display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 16px;padding-block:14px;border-top:1px solid var(--rule)}
.sent-steps li::before{content:counter(step);grid-row:1 / 3;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--accent);display:grid;place-items:center;font-family:var(--mono);font-size:.75rem}
.sent-steps b{font-family:var(--display);font-weight:600;font-size:1.0625rem}
.sent-steps span{color:var(--ink-2);overflow-wrap:anywhere}

/* Wide screens: the contact section fills the screen between header and colour bar, the page
   settles on it when scrolling stops nearby, and the form runs across the page in three columns. */
@media (min-width:1000px){
  html{scroll-snap-type:y proximity}
  /* The snap area runs on past the footer (scroll-margin-bottom): a snap area taller than the screen can be
     scrolled through freely, so the footer can be read without being pulled back up to the form */
  .contact{scroll-snap-align:start;scroll-margin-bottom:100vh;min-height:calc(100svh - var(--hdr) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;align-items:center;padding-block:clamp(24px,4.5vh,56px)}
  .contact-grid{width:100%;gap:clamp(24px,4vh,40px)}
  .contact-grid .sec-head{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:end}
  .contact-grid .sec-head .eyebrow{grid-column:1/-1}
  .contact-grid .sec-head > p:not(.eyebrow){max-width:30em}
  form{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3.5vh,32px) clamp(28px,3vw,48px);align-items:start}
  legend{margin-bottom:12px}
  fieldset{gap:14px}
  .submit-row,.confirm,.status-msg{grid-column:1/-1}
  /* thin lines between the three columns, running their full height */
  #contact-form fieldset{align-self:stretch;align-content:start}
  #contact-form .fields{align-content:start}
  #contact-form fieldset + fieldset{border-left:1px solid var(--rule);padding-left:clamp(28px,3vw,48px)}
  .chips{grid-template-columns:minmax(0,1fr);gap:8px}
  .chip-body{padding:10px 14px;gap:2px}
  .fields{gap:14px}
  textarea{min-height:6.5em}
  .confirm dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
  .confirm dl div{grid-template-columns:minmax(0,1fr);gap:2px}
  .confirm dl div:last-child{grid-column:1/-1}
}
/* Wide but short screens (most laptops): tighter spacing and a smaller heading, so it all fits */
@media (min-width:1000px) and (max-height:860px){
  .contact{padding-block:clamp(14px,2.5vh,28px)}
  .contact-grid{gap:clamp(16px,3vh,28px)}
  .contact-grid .sec-head{row-gap:10px}
  .contact-grid h2{font-size:clamp(2rem,1rem + 2vw,2.6rem)}
  .contact-grid .sec-head > p:not(.eyebrow){font-size:1rem}
  form{row-gap:clamp(16px,2.5vh,24px)}
  fieldset,.fields{gap:10px}
  .field{gap:4px}
  input[type=text],input[type=email],input[type=tel],select,textarea{padding:.6em .8em}
  .chip-body{padding:8px 12px}
  textarea{min-height:5em}
}

/* Footer: the reverse of the page above it (black under the white page). The logo on the left runs the
   height of the footer; on the right, one left-aligned block ending at the right edge: wordmark, links,
   tagline, and the copyright level with the foot of the logo. */
.site-ftr{--fh:clamp(170px,14vw,190px);background:var(--ink);color:var(--paper);padding-block:clamp(36px,5vw,64px) calc(clamp(36px,5vw,64px) + env(safe-area-inset-bottom,0px))}
.site-ftr :focus-visible{outline-color:var(--paper)}
.ftr-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px clamp(20px,5vw,72px);align-items:start}
.ftr-brand{display:block;color:inherit}
.ftr-mark{display:block;height:var(--fh);width:calc(var(--fh) * 626 / 627)}
/* Home page: the footer's logo is the puzzle, rearranging itself and settling on "unpuzzled" (the script's
   footer puzzle). Tiles in the footer's text colour, blue while scrambled, letters in its background colour. */
.ftr-board{--gap:5.1%;--ts:calc((100% - 2 * var(--gap)) / 3);position:relative;display:block;width:var(--fh);aspect-ratio:1;container-type:inline-size}
.ftr-board .tile{border-radius:16%;background:var(--paper);background:color-mix(in srgb, var(--paper) calc(var(--real,1) * 100%), var(--p-mark));color:var(--ink);font-size:23cqw}
.ftr-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.ftr-word{display:block;flex:none;height:32px;width:calc(32px * 571.165 / 109.56)}
.ftr-nav{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;padding:0;margin:0;font-family:var(--display);font-size:.875rem}
.ftr-nav a{text-decoration:none;opacity:.75;transition:opacity .2s}
@media (hover:hover){.ftr-nav a:hover{opacity:1}}
.ftr-tag{font-size:.875rem;line-height:1.45;opacity:.75}
.copy{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
/* Phones: a smaller logo beside the stacked words */
@media (max-width:759px){.site-ftr{--fh:88px}}
/* Wider: the block sits at the right-hand side, from the top of the logo to its foot */
@media (min-width:760px){
  .ftr-side{min-height:var(--fh);justify-self:end;gap:18px}
  .ftr-word{height:48px;width:calc(48px * 571.165 / 109.56)}
  .ftr-nav{gap:8px 24px;font-size:.9375rem}
  .ftr-tag{font-size:.9375rem}
  .copy{margin-top:auto}
}

/* Cookie bar: fixed to the bottom until the visitor chooses; the reverse of the page behind it */
.consent{position:fixed;z-index:60;left:0;right:0;bottom:0;background:var(--ink);color:var(--paper);padding:18px 0 calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 32px -18px var(--shadow)}
.consent::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--mark)}
.consent-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.consent p{margin:0;flex:1 1 360px;font-size:.9375rem;line-height:1.45}
.consent p b{display:block;margin-bottom:2px;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.consent-acts{display:flex;gap:10px;flex:none}
.consent .btn{min-height:44px}
.consent .consent-yes{background:var(--mark);border-color:var(--mark);color:var(--on-mark)}
.consent .consent-no{background:transparent;border-color:currentColor;color:inherit}
@media (hover:hover){.consent .consent-yes:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}.consent .consent-no:hover{background:transparent;border-color:currentColor;color:inherit;opacity:.8}}
.consent :focus-visible{outline-color:var(--paper)}