/* Stanwright — one stylesheet for the whole site.

   The system, in one paragraph. The field is warm paper, not black: an all-dark page
   has no contrast between its own sections, which is why the previous version read as
   one flat rectangle with nothing to look at. Rhythm now comes from three fields
   (paper, a deeper paper band, and one ink section used as punctuation), structure
   comes from hairlines rather than cards, and character comes from a display serif set
   against Helvetica. Colour does almost nothing: a single brick accent, used for the
   eyebrow mark, the flagged figure and links on hover.

   Display type is Newsreader, self-hosted, one variable file, 69KB. It is used for
   statements only — anything you actually read for information stays in Helvetica,
   which is also what the print assets are set in. */

/* Newsreader, variable, subset and instanced: 69KB for one file covering every heading on
   the site. Instrument Serif was tried first and read as fashion-editorial — too much stroke
   contrast for a firm selling assurance work to a finance-adjacent reader. This is a
   newspaper serif: even stroke, real optical sizing, serious rather than stylish.

   No italic is loaded. One word of it is not worth another 90KB, and italicising a word in
   the headline was cybix's device rather than ours. */
@font-face{
  font-family:'Newsreader';
  font-style:normal; font-weight:350 550; font-display:swap;
  src:url('/fonts/newsreader-latin.woff2') format('woff2-variations');
  unicode-range:U+0020-007E,U+00A0,U+00A3,U+00E9,U+2010-2015,U+2018,U+2019,U+201C,U+201D,U+2026;
}

:root{
  --paper:#f7f5f1;         /* the field */
  --paper-deep:#efece6;    /* the second band, for alternate sections */
  --ink:#12110f;
  --ink-soft:#3b3936;      /* body copy: not full black, which is harsh on warm paper */
  --ink-faint:#77736c;     /* labels, captions, the things you read second */
  --brick:#b23a2c;         /* the only colour. Softened from the old #e5322d for paper */
  --hairline:rgba(18,17,15,.13);
  --rule:rgba(18,17,15,.26);
  --grid-line:rgba(18,17,15,.045);   /* the masked background field, kept under 5% */
  --field:var(--paper-deep);

  /* the ink band. Flipped wholesale in dark mode, so the section keeps its job as
     punctuation rather than becoming invisible against a dark page. */
  --band-bg:#12110f; --band-fg:#f7f5f1; --band-faint:#8f8b83;
  --band-line:rgba(247,245,241,.16); --band-accent:#d4614a;

  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --body:Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --max:1200px;
  --gutter:clamp(20px,5vw,64px);
  --read:64ch;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#131210; --paper-deep:#1b1a17; --ink:#f4f1eb; --ink-soft:#cdc9c1;
    --ink-faint:#8e8a82; --brick:#d4614a;
    --hairline:rgba(244,241,235,.13); --rule:rgba(244,241,235,.26);
    --grid-line:rgba(244,241,235,.035);
    --band-bg:#f4f1eb; --band-fg:#12110f; --band-faint:#6d6a63;
    --band-line:rgba(18,17,15,.16); --band-accent:#b23a2c;
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{background:var(--paper); color:var(--ink); font-family:var(--body);
     font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter)}
a{color:inherit}
::selection{background:var(--brick); color:#fff}

/* ═══ TYPE ════════════════════════════════════════════════════════════════════
   The serif carries statements, and never carries information. */

/* Newsreader holds a range of weights, so the display sizes sit at 400 and the small
   headings at 500 rather than everything at one weight. Tracking is lighter than it was: a
   newspaper serif does not want the tight fit a high-contrast display face asks for.
   Optical sizing is on by default, and is why one file works at both 84px and 21px. */
h1,h2,.serif{font-family:var(--display); font-weight:400; letter-spacing:-.012em}
/* balance was tried here and removed: with "mid-market" held together as one unbreakable
   token, balancing evened every line down to that token's width and turned the statement
   into a narrow four-line column. A wider measure and ordinary wrapping reads better. */
h1{font-size:clamp(37px,6.3vw,84px); line-height:1.02; letter-spacing:-.018em; max-width:21ch}
/* a hyphenated term is one unit. Left to itself the browser broke "mid-market" at the
   hyphen and put half of it on the next line, which reads as a typo at 84px. */
.nb{white-space:nowrap}
h2{font-size:clamp(28px,3.9vw,48px); line-height:1.08; max-width:22ch; text-wrap:balance}
h3{font-family:var(--display); font-weight:500; font-size:clamp(21px,2.1vw,26px);
   line-height:1.2; letter-spacing:-.006em}
p{max-width:var(--read)}
b,strong{font-weight:700}

/* the eyebrow. The bullet is the centre square of the mark, which is the one place
   the brand's own geometry appears at small size. */
.eyebrow{display:flex; align-items:center; gap:11px; font-family:var(--mono);
         font-size:11px; letter-spacing:.16em; text-transform:uppercase;
         color:var(--ink-faint); font-weight:500}
.eyebrow::before{content:""; width:7px; height:7px; background:var(--brick); flex:none}

/* Visually hidden, still read aloud. The permission map carries its state in fill colour,
   which is nothing at all to a screen reader: without this, twelve cells read as a bare
   list of systems with no indication of which are permitted and which are out of reach. */
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

.standfirst{margin-top:24px; font-size:clamp(17px,1.55vw,20px); line-height:1.5;
            color:var(--ink-soft); max-width:56ch}
.standfirst b{color:var(--ink); font-weight:700}
.muted{color:var(--ink-faint)}
.small{font-size:14px; line-height:1.55; color:var(--ink-faint); max-width:74ch}
.small b{color:var(--ink); font-weight:700}

/* ═══ SECTIONS ════════════════════════════════════════════════════════════════
   One rhythm, repeated: eyebrow, statement, short standfirst, then structure. */

section{padding-top:clamp(64px,8vw,116px); padding-bottom:clamp(64px,8vw,116px)}
/* the masthead is sticky, so an anchor that lands flush with the top lands underneath it */
section[id]{scroll-margin-top:78px}
.band-deep{background:var(--paper-deep)}
.head h2{margin-top:20px}
.head .standfirst{margin-top:22px}

/* hairline columns. Cards were considered and rejected: a border on four sides of a
   grey box is the house style of every AI consultancy site we looked at, and it adds
   a shadow, a radius and a hover state to say what one vertical line already says. */
/* The columns share the parent's grid rows rather than being three independent boxes:
   display:contents lifts each field into the same grid, so the label, the heading, the
   prose and the "what you keep" rule all sit on one line across the row. Both the obvious
   alternatives were tried and neither aligns — bottom-aligning the block flushes only the
   last line of text, and growing the prose to fill leaves the rules a line apart whenever
   two columns' keep-text runs to a different number of lines. */
.cols{display:grid; gap:0; margin-top:clamp(38px,5vw,62px);
      border-top:1px solid var(--rule)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols > .col{display:contents}
.cols > .col > *{padding-right:34px}
.cols > .col > .k{grid-row:1; padding-top:30px}
.cols > .col > h3{grid-row:2}
.cols > .col > p:not(.keep){grid-row:3; padding-bottom:24px}
.cols > .col > .keep{grid-row:4; padding-bottom:34px}
.cols > .col:nth-child(1) > *{grid-column:1}
.cols > .col:nth-child(2) > *{grid-column:2}
.cols > .col:nth-child(3) > *{grid-column:3}
.cols > .col:nth-child(n+2) > *{border-left:1px solid var(--hairline); padding-left:34px}
.col .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
        text-transform:uppercase; color:var(--brick); font-weight:500; display:block}
.col h3{margin-top:14px}
.col p{margin-top:14px; font-size:15.5px; line-height:1.55; color:var(--ink-soft)}
.col .keep{margin-top:0; padding-top:16px; border-top:1px solid var(--hairline);
           font-size:14px; line-height:1.5; color:var(--ink-faint)}
.col .keep b{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
             text-transform:uppercase; color:var(--ink-faint); margin-bottom:7px; font-weight:500}

/* ═══ MASTHEAD ════════════════════════════════════════════════════════════════ */

header.mast{position:sticky; top:0; z-index:10; background:var(--paper);
            border-bottom:1px solid var(--hairline)}
.mast .wrap{display:flex; align-items:center; gap:20px; padding-top:16px; padding-bottom:16px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.brand svg{display:block; width:24px; height:24px}
.brand .name{font-size:16px; font-weight:700; letter-spacing:.19em}
nav.main{margin-left:auto; display:flex; gap:26px; align-items:center}
nav.main a{font-size:14px; color:var(--ink-soft); text-decoration:none;
           padding:4px 0; border-bottom:1px solid transparent;
           transition:color 180ms var(--ease), border-color 180ms var(--ease)}
nav.main a:hover{color:var(--ink); border-bottom-color:var(--brick)}
.mast .cta{margin-top:0; padding:11px 18px; font-size:14px}

/* the small-screen section menu. Hidden entirely on desktop, where the nav row fits. */
.menu{display:none}
.menu summary{list-style:none; cursor:pointer; font-family:var(--mono); font-size:11px;
              letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
              border:1px solid var(--rule); padding:10px 13px; user-select:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"+"; margin-left:9px; font-family:var(--body); font-weight:700}
.menu[open] summary::after{content:"–"}
.menu summary:focus-visible{outline:2px solid var(--brick); outline-offset:2px}
.menu .sheet{position:absolute; left:0; right:0; top:100%; background:var(--paper);
             border-bottom:1px solid var(--rule); padding:6px var(--gutter) 18px;
             display:flex; flex-direction:column}
.menu .sheet a{font-size:15px; text-decoration:none; padding:14px 0;
               border-bottom:1px solid var(--hairline)}
.menu .sheet a:last-child{border-bottom:0}

/* ═══ BUTTONS AND LINKS ═══════════════════════════════════════════════════════ */

.cta{display:inline-block; margin-top:26px; background:var(--ink); color:var(--paper);
     font-size:15px; font-weight:700; letter-spacing:.005em; padding:15px 26px;
     text-decoration:none; border:1px solid var(--ink);
     transition:background 200ms var(--ease), color 200ms var(--ease)}
.cta:hover,.cta:focus{background:transparent; color:var(--ink)}
.cta:focus-visible{outline:2px solid var(--brick); outline-offset:3px}
.ghost{display:inline-flex; align-items:baseline; gap:9px; font-size:15px; font-weight:700;
       text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:3px;
       transition:border-color 200ms var(--ease)}
.ghost span{color:var(--brick); transition:transform 220ms var(--ease); display:inline-block}
.ghost:hover{border-bottom-color:var(--brick)}
.ghost:hover span{transform:translateX(4px)}
.actions{margin-top:38px; display:flex; align-items:center; gap:16px 32px; flex-wrap:wrap}
.actions .cta{margin-top:0}
.ctanote{font-size:13.5px; color:var(--ink-faint); max-width:34ch}
/* the note takes its own row rather than becoming a third item competing with the two
   controls beside it. */
.actions .ctanote{flex-basis:100%; line-height:1.5}

/* ═══ HERO ════════════════════════════════════════════════════════════════════ */

.hero{padding-top:clamp(56px,8vw,104px); padding-bottom:0}
.hero h1{margin-top:26px}
.hero .standfirst{max-width:52ch}

/* the fact strip: four things a referred visitor can check in one glance, on the
   hairline that closes the first screen. */
.facts{margin-top:clamp(52px,7vw,92px); border-top:1px solid var(--rule);
       display:grid; grid-template-columns:repeat(4,1fr)}
.facts div{padding:22px 20px 0 0}
.facts div + div{padding-left:24px; border-left:1px solid var(--hairline)}
.facts .f{display:block; font-size:15px; font-weight:700; letter-spacing:-.005em}
.facts .g{display:block; margin-top:6px; font-family:var(--mono); font-size:10.5px;
          letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint)}

/* ═══ THE PERMISSION MAP ══════════════════════════════════════════════════════
   Content, not decoration: it draws the one idea the product rests on — the agent
   reaches what you allowed and nothing else — in the brand mark's own grid.

   State is carried by FILL, never by animation. An earlier version faded the
   permitted cells in, which meant the diagram was meaningless to anything that never
   ran the script. */

.maphead{display:flex; justify-content:space-between; align-items:baseline;
         gap:24px; flex-wrap:wrap; margin-bottom:26px}
.key{display:flex; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px;
     letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.key i{font-style:normal; display:inline-flex; align-items:center; gap:8px}
.key b{width:11px; height:11px; display:inline-block; background:transparent;
       border:1px solid var(--rule)}
.key .on{background:var(--ink); border-color:var(--ink)}
.key .ask{background:transparent; border:2px solid var(--brick)}

.grid{display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin-top:34px}
.cell{background:transparent; border:1px solid var(--hairline); min-height:92px;
      padding:13px 12px; display:flex; align-items:flex-end}
.cell .lbl{font-size:13px; font-weight:700; letter-spacing:-.012em; line-height:1.18;
           color:var(--ink-faint)}
.cell.on{background:var(--ink); border-color:var(--ink)}
.cell.on .lbl{color:var(--paper)}
.cell.ask{border:2px solid var(--brick); justify-content:space-between;
          flex-direction:column; align-items:flex-start}
.cell.ask .lbl{color:var(--ink)}
.cell.ask .st{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
              text-transform:uppercase; color:var(--brick)}
/* the label that says a drawn object is illustrative rather than a real client's. Bordered
   rather than filled, so it reads as a caption on the work and not as a badge. */
.tag{display:inline-flex; align-items:center; font-family:var(--mono); font-size:9.5px;
     letter-spacing:.16em; text-transform:uppercase; color:var(--ink); font-weight:500;
     border:1px solid var(--rule); padding:4px 8px; white-space:nowrap; flex:none}
/* the label sits beside the caption rather than inside it, so a second line of caption
   starts under the first word of the caption and not under the label */
.tagged{display:flex; align-items:flex-start; gap:11px}
.tagged .tag{position:relative; top:1px}
.mapnote{margin-top:28px; font-size:15.5px; line-height:1.55; color:var(--ink-soft); max-width:70ch}
.mapnote b{color:var(--ink); font-weight:700}

/* ═══ PRICES ══════════════════════════════════════════════════════════════════ */

.ladder{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
        margin-top:clamp(38px,5vw,58px); border-top:1px solid var(--rule)}
.ladder .step{padding:30px 30px 32px 0}
.ladder .step + .step{padding-left:34px; border-left:1px solid var(--hairline)}
.step .n{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
         text-transform:uppercase; color:var(--brick); font-weight:500}
.step .amt{display:block; margin-top:16px; font-size:clamp(30px,3.6vw,44px); font-weight:700;
           letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums}
.step .amt .pre{font-size:.5em; font-weight:700; letter-spacing:0}
.step .cap{display:block; margin-top:14px; font-size:12px; letter-spacing:.11em;
           text-transform:uppercase; font-weight:700}
.step p{margin-top:12px; font-size:15px; color:var(--ink-soft)}

/* the arithmetic. Two columns of prose, because it is an argument rather than a list. */
.argue{margin-top:clamp(40px,5vw,60px); display:grid; grid-template-columns:repeat(2,1fr);
       gap:34px 44px}
.argue p{font-size:15.5px; line-height:1.6; color:var(--ink-soft); max-width:50ch}
.argue p b{color:var(--ink)}

/* ═══ THE INK BAND ════════════════════════════════════════════════════════════
   One dark section on the page, and it carries the thing we would rather not be
   asked about. Punctuation, not decoration. */

.band{background:var(--band-bg); color:var(--band-fg)}
.band .eyebrow{color:var(--band-faint)}
.band .eyebrow::before{background:var(--band-accent)}
.band .standfirst{color:var(--band-fg); opacity:.86}
.band .cols{border-top-color:var(--band-line)}
.band .cols > .col + .col{border-left-color:var(--band-line)}
.band .col .k{color:var(--band-accent)}
.band .col p{color:var(--band-fg); opacity:.78}
.band .cta{background:var(--band-fg); color:var(--band-bg); border-color:var(--band-fg)}
.band .cta:hover{background:transparent; color:var(--band-fg)}
.band .callout{background:transparent; border:1px solid var(--band-line)}
.band .callout .k{color:var(--band-accent)}
.band .callout p{color:var(--band-fg); opacity:.8}
.band ul.rows{border-top-color:var(--band-line)}
.band ul.rows li{border-bottom-color:var(--band-line); color:var(--band-fg); opacity:.82}
.band ul.rows li b{color:var(--band-fg)}
.band .small,.band .mapnote{color:var(--band-fg); opacity:.78}
.band table th{color:var(--band-faint); border-bottom-color:var(--band-line)}
.band table td{color:var(--band-fg); opacity:.82; border-bottom-color:var(--band-line)}

/* ═══ TABLES ══════════════════════════════════════════════════════════════════ */

.scroller{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:clamp(34px,4vw,52px)}
table{border-collapse:collapse; width:100%; font-size:15px; min-width:640px}
th{text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
   text-transform:uppercase; font-weight:500; color:var(--ink-faint);
   padding:0 24px 12px 0; border-bottom:1px solid var(--rule); vertical-align:bottom}
td{padding:20px 24px 20px 0; border-bottom:1px solid var(--hairline);
   vertical-align:top; line-height:1.5; color:var(--ink-soft)}
td:first-child{color:var(--ink); font-weight:700; width:22%}
tr:last-child td{border-bottom:0}

/* ═══ CALLOUT — used for the things we do not have ════════════════════════════ */

.callout{background:var(--paper-deep); padding:26px 28px; margin-top:clamp(34px,4vw,48px)}
.band-deep .callout{background:var(--paper)}
.callout .k{font-family:var(--mono); font-size:10px; letter-spacing:.16em;
            text-transform:uppercase; font-weight:500; color:var(--brick); margin-bottom:12px}
.callout p{font-size:15.5px; line-height:1.6; color:var(--ink-soft); max-width:74ch}
.callout p b{color:var(--ink)}

/* plain lists — a rule per item, no bullets */
/* the measure is held with padding, not max-width: capping the li's width would pull its
   rule in with it, so each row's hairline stopped short of the one above it. */
ul.rows{list-style:none; margin-top:clamp(32px,4vw,46px); border-top:1px solid var(--rule)}
ul.rows li{padding:18px clamp(0px,24vw,330px) 18px 0; border-bottom:1px solid var(--hairline);
           font-size:15.5px; line-height:1.55; color:var(--ink-soft)}
ul.rows li b{color:var(--ink); font-weight:700}
ul.rows.two{columns:2; column-gap:48px; border-top:0}
ul.rows.two li{break-inside:avoid; padding-right:24px}

/* ═══ THE REPORT — our own system's real figures ══════════════════════════════
   Every reference site puts the deliverable on the page. All of them fabricate
   theirs. This one cannot, so it renders our own figures, dated, with the exception
   shown rather than hidden. */

.report{margin-top:clamp(38px,5vw,58px)}
.rhead{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
       flex-wrap:wrap; padding-bottom:13px; border-bottom:1px solid var(--rule)}
.rtitle,.rdate{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
               text-transform:uppercase}
.rtitle{color:var(--ink)}
.rdate{color:var(--ink-faint)}
.rows4,.rows3{display:grid}
.rows4{grid-template-columns:repeat(4,1fr)}
.rows3{grid-template-columns:repeat(3,1fr)}
.rows4 .r,.rows3 .r{padding:26px 20px 24px 0; border-bottom:1px solid var(--hairline)}
.rows4 .r + .r,.rows3 .r + .r{padding-left:22px; border-left:1px solid var(--hairline)}
.rows4 .fig,.rows3 .fig{font-size:clamp(30px,3.4vw,42px); font-weight:700; letter-spacing:-.035em;
            line-height:1; font-variant-numeric:tabular-nums}
.rows4 .fig.flag,.rows3 .fig.flag{color:var(--brick)}
.rows4 .cap,.rows3 .cap{display:block; margin-top:12px; font-family:var(--mono); font-size:10px;
            letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); line-height:1.5}

/* ═══ CLOSE + FOOTER ══════════════════════════════════════════════════════════ */

/* the rule is inset to the gutter so it starts where the type starts. On the section's own
   border it ran the full width of the shell and floated free of everything above it. */
.close{position:relative}
.close::before{content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter);
               height:1px; background:var(--rule)}
.close h2{max-width:18ch}
.details{margin-top:clamp(40px,5vw,58px); display:grid; grid-template-columns:repeat(4,1fr);
         gap:24px 26px; padding-top:26px; border-top:1px solid var(--hairline)}
.details .k{font-family:var(--mono); font-size:10px; letter-spacing:.13em;
            text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:8px}
.details b{font-weight:700; font-size:15px}
.details a{text-decoration:none; border-bottom:1px solid var(--rule)}
.details a:hover{border-bottom-color:var(--brick)}
footer{padding:26px 0 40px; font-size:12.5px; color:var(--ink-faint)}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ═══ INTERIOR PAGES (contact, 404) ═══════════════════════════════════════════ */

.phead{padding-top:clamp(52px,7vw,88px); padding-bottom:clamp(26px,3vw,38px)}
.phead h1{font-size:clamp(34px,5vw,62px); max-width:18ch; margin-top:22px}
.kick{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
      color:var(--ink-faint); display:block}
.body{padding-top:0; padding-bottom:clamp(56px,7vw,90px)}
.body h2{font-size:clamp(24px,2.6vw,32px); margin:clamp(38px,4vw,54px) 0 4px; max-width:26ch}
.body p{margin-top:14px; color:var(--ink-soft); max-width:var(--read)}
.body a{text-decoration:none; border-bottom:1px solid var(--rule)}
.body a:hover{border-bottom-color:var(--brick)}

/* ═══ BOOKING FORM ════════════════════════════════════════════════════════════ */

#bk{max-width:none}
#bk label{display:block; margin:18px 0; font-size:13px; letter-spacing:.02em;
          font-weight:700; max-width:640px}
#bk .fieldrow{display:grid; grid-template-columns:1fr 1fr; gap:0 20px; max-width:640px}
#bk input,#bk textarea{display:block; width:100%; margin-top:8px; font:inherit; font-size:16px;
  font-weight:400; padding:12px 13px; background:transparent; color:var(--ink);
  border:1px solid var(--rule); border-radius:0}
#bk input::placeholder,#bk textarea::placeholder{color:var(--ink-faint); opacity:1}
#bk input:focus,#bk textarea:focus{outline:none; border-color:var(--brick)}
#bk .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.slots{margin:8px 0 6px}
.day{padding:18px 0; border-top:1px solid var(--hairline); display:grid;
     grid-template-columns:190px minmax(0,1fr); gap:12px 20px; align-items:baseline}
.dayname{font-size:14px; font-weight:700; letter-spacing:-.01em}
.times{display:flex; flex-wrap:wrap; gap:8px}
.slot{font:inherit; font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.04em;
      padding:10px 14px; cursor:pointer; font-variant-numeric:tabular-nums; background:transparent;
      color:var(--ink); border:1px solid var(--rule);
      transition:border-color 160ms var(--ease), color 160ms var(--ease)}
.slot:hover{border-color:var(--ink)}
.slot.sel{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.slot:focus-visible{outline:2px solid var(--brick); outline-offset:2px}
#go[disabled]{opacity:.4; cursor:not-allowed}
#go[disabled]:hover{background:var(--ink); color:var(--paper)}
.phead.done{padding-bottom:64px}
.phead.done .confirm{margin-top:20px; font-size:16px; line-height:1.55; max-width:56ch}
.phead.done .cta{margin-top:8px}

/* ═══ TWO DEVICES FROM THE REFERENCE TEARDOWN ═════════════════════════════════
   Both cost nothing and neither introduces a colour.

   Corner marks (futureagi): four L-shaped brackets make a panel read as a captured
   instrument rather than a div. Taken instead of factory's version, which gets the
   same read by bleeding the panel past the right margin — a visible violation on a
   grid this strict.

   The masked field grid (beacon): 48px rules at 2.5%, dissolved toward the edges by a
   radial mask. Unmasked it tiles and reads as a template texture; the mask is the part
   that matters. It sits on a fixed pseudo-element behind everything, because masking
   the body masks its children too and children cannot opt out of an ancestor's mask. */

.framed{position:relative}
/* absolutely positioned so it carries the two lower brackets without taking a grid track */
.cnr{position:absolute; inset:0; pointer-events:none}
.framed::before,.framed::after,
.framed > .cnr::before,.framed > .cnr::after{
  content:""; position:absolute; width:12px; height:12px; border:1px solid var(--rule);
  pointer-events:none;
}
.framed::before{top:-14px; left:-14px; border-right:0; border-bottom:0}
.framed::after{top:-14px; right:-14px; border-left:0; border-bottom:0}
.framed > .cnr::before{bottom:-14px; left:-14px; border-right:0; border-top:0}
.framed > .cnr::after{bottom:-14px; right:-14px; border-left:0; border-top:0}
@media (max-width:560px){ .framed::before,.framed::after,
                          .framed > .cnr::before,.framed > .cnr::after{display:none} }

/* Homepage only. Behind the booking form it read as graph paper and fought the field
   borders, which is the one place on the site that needs a plain background. */
body.home::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 34%, #000 34%, transparent 100%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 34%, #000 34%, transparent 100%);
}

/* ═══ MOTION ══════════════════════════════════════════════════════════════════
   One entrance, one curve, 8px. The hidden state is scoped to .js-rise, which the
   script adds to <html> itself: written the obvious way, a script that fails to run
   would leave the whole page permanently invisible. */

.js-rise .rise{opacity:0; transform:translateY(8px)}
.js-rise .rise.in{opacity:1; transform:none;
                  transition:opacity .5s var(--ease), transform .5s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .rise,.js-rise .rise{opacity:1; transform:none}
  .rise.in{transition:none}
  .ghost span,.cta,.slot,nav.main a{transition:none}
  .ghost:hover span{transform:none}
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════════ */

@media (max-width:1000px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts div:nth-child(3),.facts div:nth-child(4){margin-top:4px}
  .facts div:nth-child(3){padding-left:0; border-left:0}
  .rows4{grid-template-columns:repeat(2,1fr)}
  .rows4 .r:nth-child(3){padding-left:0; border-left:0}
  .grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  nav.main{display:none}
  /* one row, always: brand, then the call to action and the menu pushed right. Letting it
     wrap put the CTA on a second line directly over where the menu sheet opens. */
  .mast .wrap{position:relative; flex-wrap:nowrap; gap:10px}
  .mast .cta{order:2; margin-left:auto}
  .menu{display:block; order:3}
  /* one column: the shared-row grid is dropped back to ordinary flow, since there is no
     longer a row to align across */
  .cols-3,.cols-2,.ladder{grid-template-columns:1fr}
  .cols > .col{display:block; padding:26px 0 28px}
  .cols > .col > *,.cols > .col:nth-child(n+2) > *{padding-left:0; padding-right:0;
                                                   border-left:0}
  .cols > .col > .k{padding-top:0}
  .cols > .col > .keep{padding-bottom:0}
  .cols > .col + .col,.ladder .step + .step{padding-left:0; border-left:0;
                                            border-top:1px solid var(--hairline)}
  .ladder .step{padding:26px 0 28px}
  .argue{grid-template-columns:1fr; gap:22px}
  ul.rows li,ul.rows.two li{padding-right:0}   /* the desktop measure-holding inset would eat the column */
  ul.rows.two{columns:1}
  .details{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  /* eight grid lines across a phone reads as graph paper; fewer and fainter */
  body.home::before{background-size:72px 72px; opacity:.6}
  .grid{grid-template-columns:repeat(2,1fr); gap:6px}
  .cell{min-height:76px; padding:11px 10px}
  .facts{grid-template-columns:1fr}
  .facts div + div{padding-left:0; border-left:0; border-top:1px solid var(--hairline);
                   padding-top:18px; margin-top:14px}
  .rows4{grid-template-columns:1fr}
  .rows4 .r + .r{padding-left:0; border-left:0}
  /* three items on a 390px bar: everything gives up a little rather than one thing wrapping */
  .mast .cta{padding:9px 12px; font-size:12.5px}
  .brand{gap:9px}
  .brand svg{width:21px; height:21px}
  .brand .name{font-size:13px; letter-spacing:.14em}
  .menu summary{padding:8px 10px; font-size:10px; letter-spacing:.1em}
  #bk .fieldrow{grid-template-columns:1fr; gap:0}
  .day{grid-template-columns:1fr; gap:8px}
  table{min-width:520px}
}