/* ==============================================================
   We Run Web - websites & automation for local business
   Palette + type tokens live here. Rebrand = edit this block.
   ============================================================== */

/* Departure Mono - departuremono.com, SIL Open Font License.
   Self-hosted; see assets/fonts/. Ships one weight only. */
@font-face{
  font-family:'Departure Mono';
  src:url('../fonts/DepartureMono-Regular.woff2') format('woff2'),
      url('../fonts/DepartureMono-Regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --blue:        #014F64;
  --blue-bright: #0A7A9B;
  --blue-soft:   #E4F6FF;
  --blue-line:   #BFEDFF;

  --ink:      #0E0E0E;
  --ink-2:    #3A3D45;
  --ink-3:    #555A69;

  /* pass / needs work / broken, for the SEO check. Both are dark
     enough to carry body text on white - 5.9:1 and 5.6:1. */
  --warn:     #9A5B00;
  --bad:      #C63636;

  --paper:    #FFFFFF;
  --paper-2:  #F7F8FB;
  --line:     #E4E6EC;

  --font-display: 'Departure Mono', ui-monospace, 'JetBrains Mono', monospace;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --nav-h:      72px;
  --hero-pad-b: clamp(230px,40vh,400px);
  --echo-h:     0px;                       /* set by fish.js once the art loads */

  --wrap: 1240px;
  --pad:  clamp(20px, 5vw, 56px);
  --r:    14px;

  --dot: radial-gradient(circle at 1px 1px, var(--blue-line) 1px, transparent 1.4px);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }
a{ color:var(--blue); text-decoration-thickness:1px; text-underline-offset:3px; }
h1,h2,h3,h4{ margin:0; line-height:1.1; letter-spacing:-0.01em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:820px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px;
}
.skip:focus{ left:8px; top:8px; }

:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:3px; border-radius:4px; }

/* -- shared bits ------------------------------------------- */

.kicker{
  font-family:var(--font-mono);
  font-size:12px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--blue); margin:0 0 18px;
}
.kicker--light{ color:#8FC9DC; }

.section{ padding:clamp(72px,10vw,132px) 0; position:relative; }
.section--tint{ background:var(--paper-2); border-block:1px solid var(--line); }
.section--ink{ background:var(--blue); color:#fff; }

.section__head{ max-width:720px; margin-bottom:clamp(40px,5vw,64px); }
.section__title{
  font-family:var(--font-display);
  font-size:clamp(26px,3.2vw,40px);
  font-weight:600; letter-spacing:0.005em;
  margin-bottom:20px;
}
.section__title--light{ color:#fff; }
.section__lead{ font-size:clamp(17px,1.4vw,19px); color:var(--ink-2); max-width:62ch; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:15px 26px;
  font-family:var(--font-body); font-size:16px; font-weight:600;
  border-radius:10px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--ink); color:#fff; }
.btn--solid:hover{ background:var(--blue); }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn--light{ background:#fff; color:var(--blue); }
.btn--light:hover{ background:var(--blue-soft); }
.btn--sm{ padding:11px 18px; font-size:15px; }
.btn--block{ width:100%; }

/* -- pixel buttons (hero) ----------------------------------
   A 6px step for the frame and the shadow offset. That was one
   whole cell when the artwork dithered at 6px; the art now runs at
   a 4px cell (CELL in fish.js) and the buttons were left at 6 -
   dropping them to a 4px shadow makes the pair read too light
   against a display face this size. Corners are hard square - a
   radius on a pixel page is the one thing that reads as stock.

   The label is set LOWERCASE + small-caps, the same pair the display
   headings use: the font has real smcp in GSUB, and feeding it
   lowercase is what keeps its small capitals from sitting next to
   full-height ones. */
.btn--pixel{
  position:relative; isolation:isolate;
  /* padding and size are set so both labels fit one line inside the
     560px hero copy column - small caps track wider than they set */
  padding:16px 22px;
  font-family:var(--font-display); font-weight:400; font-size:18px;
  text-transform:lowercase; font-variant-caps:small-caps;
  letter-spacing:.04em;
  background:var(--ink); color:#fff;
  border:0; border-radius:0;
  /* one cell of hard offset, no blur, in the artwork's light ink */
  box-shadow:6px 6px 0 var(--blue-line);
  transition:transform .09s steps(2,end), box-shadow .09s steps(2,end),
             background .15s ease, color .15s ease;
}
.btn--pixel:hover{
  background:var(--blue);
  transform:translate(-3px,-3px);
  box-shadow:9px 9px 0 var(--blue-line);
}
/* pressed: the face drops flush into its own shadow */
.btn--pixel:active,
.btn--pixel:hover:active{
  transform:translate(6px,6px);
  box-shadow:0 0 0 var(--blue-line);
}
.btn--pixel:focus-visible{ outline-offset:6px; border-radius:0; }

/* the outline pair: same shell, a solid frame and a white face */
.btn--pixel-ghost{ color:var(--ink); }
.btn--pixel-ghost::before{
  content:""; position:absolute; inset:4px; z-index:-1; background:#fff;
}
.btn--pixel-ghost:hover{ background:var(--blue); color:var(--blue); }

@media (prefers-reduced-motion:reduce){
  .btn--pixel,.btn--pixel:hover,.btn--pixel:active{ transform:none; }
}

.dither-band{
  height:110px; width:100%;
  background-image:var(--dot);
  background-size:8px 8px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000);
  mask-image:linear-gradient(to bottom,transparent,#000);
  opacity:.55; pointer-events:none;
}
.dither-band--up{
  -webkit-mask-image:linear-gradient(to top,transparent,#000);
  mask-image:linear-gradient(to top,transparent,#000);
}

/* -- nav --------------------------------------------------- */

.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.nav.is-stuck{ border-bottom-color:var(--line); box-shadow:0 1px 20px rgba(14,14,14,.05); }
.nav__inner{ display:flex; align-items:center; gap:28px; height:var(--nav-h); }

.brand{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--blue); text-decoration:none; flex:none;
}
/* 20x29 cells at 1 css px each - any other size lands cells on fractional
   pixels and the dither goes soft. Scale by whole multiples only. */
.brand__mark{ width:20px; height:29px; flex:none; }
.brand__word{
  font-family:var(--font-display); font-weight:700;
  font-size:25px; color:var(--ink); letter-spacing:0.01em;
}

.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{
  color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:500;
  padding:6px 0; border-bottom:1.5px solid transparent;
}
.nav__links a:hover{ color:var(--ink); border-bottom-color:var(--blue); }

.nav__toggle{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:11px 9px;
  background:none; border:1px solid var(--line); border-radius:9px; cursor:pointer;
}
.nav__toggle span{ display:block; height:2px; background:var(--ink); border-radius:2px; }
.nav__toggle span + span{ margin-top:5px; }

.nav__mobile{
  display:none; flex-direction:column; gap:4px;
  padding:12px var(--pad) 22px; border-top:1px solid var(--line);
  background:#fff;
}
.nav__mobile a{ color:var(--ink); text-decoration:none; padding:12px 0; font-weight:500; }
.nav__mobile .btn{ margin-top:10px; }

/* -- hero -------------------------------------------------- */

.hero{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));   /* svh: ignores mobile URL bar */
}
/* Two art layers. The fish sits BEHIND the copy; the cloud bank sits in
   FRONT of it, so the bank overlaps the buttons for depth. Neither takes
   pointer events, so the buttons stay clickable through the cloud. */
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.hero__canvas--fg{ z-index:2; }
.hero__inner{
  position:relative; z-index:1; width:100%;
  /* copy rides high, clear of the cloud line in the artwork below it */
  padding-block:clamp(24px,3vh,48px) var(--hero-pad-b);
}
.hero__copy{ max-width:560px; }

.hero__title{
  font-family:var(--font-display);
  font-size:clamp(30px,3.7vw,52px);
  font-weight:600; line-height:1.06; letter-spacing:0.004em;
  margin-bottom:26px;
}
.hero__title-accent{ color:var(--blue); }

/* TRIAL: the slogan headline. Its longest line is 19 characters against the
   15 of "local business," — in a monospace that is a third wider again, so it
   needs its own scale to stay on two lines inside the 560px copy column.
   Delete this block and the --slogan class if the old headline comes back. */
.hero__title--slogan{ font-size:clamp(24px,3.3vw,46px); }

.hero__sub{ font-size:clamp(17px,1.5vw,20px); color:var(--ink-2); max-width:52ch; }
.hero__sub--muted{
  font-size:16px; color:var(--ink-3);
  border-left:2px solid var(--blue-line); padding-left:16px;
}
.hero__sub--muted strong{ color:var(--blue); font-weight:600; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }


/* -- the mirrored cloud bank ------------------------------- */
/* The hero's art ends on a hard horizontal cut. This hangs its reflection
   from the top of the next section so the two banks meet flush at that cut.
   The WHOLE bank is reflected, so the reflection ends where the cloud does —
   on the wisps at the top of the art, which are already dissolving. That is
   what stops it needing a fade: there is no cut line left to hide.
   --echo-h is measured and set by fish.js, from where the bank's ink
   actually reaches; it is 0 until the artwork has loaded. */
.echo{
  position:absolute; left:0; top:0; width:100%; height:var(--echo-h);
  z-index:0; pointer-events:none;
}
/* clear the reflection before the copy starts */
#services{ padding-top:calc(var(--echo-h) + clamp(36px,5vw,64px)); }
#services > .wrap{ position:relative; z-index:1; }

/* The head rides up into the reflection rather than clearing it. */
#services .section__head{ margin-top:-50px; }


/* -- service cards ----------------------------------------- */

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card{
  position:relative; padding:32px 28px 30px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  border-color:var(--blue-line); transform:translateY(-3px);
  box-shadow:0 14px 40px -22px rgba(1,79,100,.5);
}
.card__num{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  color:var(--blue); display:block; margin-bottom:22px;
}
.card h3{ font-family:var(--font-display); font-size:19px; font-weight:600; margin-bottom:12px; }
.card p{ color:var(--ink-2); font-size:15.5px; }

.ticks{ list-style:none; margin:20px 0 0; padding:0; }
.ticks li{
  position:relative; padding-left:24px; margin-bottom:9px;
  font-size:14.5px; color:var(--ink-2);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:9px; height:9px; background:var(--blue);
}
.ticks--lg li{ font-size:16px; margin-bottom:14px; padding-left:28px; }

/* -- switch list ------------------------------------------- */

.switch-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.switch-item{ display:flex; gap:20px; padding:34px 30px; background:var(--paper-2); }
.switch-item__n{
  font-family:var(--font-mono); font-size:13px; color:var(--blue);
  padding-top:3px; flex:none;
}
.switch-item h3{ font-family:var(--font-display); font-size:20px; font-weight:600; margin-bottom:10px; }
.switch-item p{ color:var(--ink-2); font-size:15.5px; margin:0; }

/* -- buyout ------------------------------------------------ */

.section--ink{ overflow:hidden; }
.section--ink::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.28) 1px, transparent 1.4px);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(120% 100% at 100% 0%, #000, transparent 68%);
  mask-image:radial-gradient(120% 100% at 100% 0%, #000, transparent 68%);
  pointer-events:none;
}
.buyout{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(32px,5vw,72px); align-items:center; position:relative;
}
.buyout__lead{ font-size:18px; color:#CFEBF6; max-width:54ch; }
.buyout__note{ margin-top:28px; font-size:14px; color:#9FCFE0; max-width:52ch; }
.buyout__note strong{ color:#fff; }

.maths{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r); padding:30px 28px;
  font-family:var(--font-mono); font-size:14.5px;
}
.maths__row{ display:flex; justify-content:space-between; gap:20px; padding:11px 0; color:#CFEBF6; }
.maths__row--minus{ color:#8FC9DC; }
.maths__val{ white-space:nowrap; }
.maths__rule{ height:1px; background:rgba(255,255,255,.3); margin:8px 0; }
.maths__row--total{ color:#fff; font-size:17px; font-weight:500; }
.maths__caption{ margin:14px 2px 0; font-size:12.5px; color:#88C2D6; font-family:var(--font-body); }

/* -- testimonials ------------------------------------------ */

.quotes{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.quote{
  margin:0; padding:32px 30px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  display:flex; flex-direction:column;
}
.quote blockquote{ margin:0 0 22px; font-size:18px; line-height:1.55; color:var(--ink); }
.quote figcaption{
  margin-top:auto; display:flex; flex-direction:column; gap:3px;
  padding-top:18px; border-top:1px solid var(--line);
}
.quote figcaption strong{ font-size:15px; }
.quote figcaption span{ font-size:13.5px; color:var(--ink-3); }

/* visible marker so placeholders cannot be shipped by accident */
.quote--placeholder{
  border:1.5px dashed var(--blue-line);
  background:repeating-linear-gradient(135deg,#fff 0 10px,var(--paper-2) 10px 20px);
}
.quote--placeholder blockquote{ color:var(--ink-3); font-style:italic; font-size:16px; }
.tag{
  align-self:flex-start; margin-bottom:16px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--blue); color:#fff; padding:4px 9px; border-radius:5px;
}

/* -- the SEO check ----------------------------------------- */
/* Same shell as the FAQ card and the hero buttons: square corners,
   a 2px ink frame, one hard whole-cell shadow. It sits on plain
   white, between the dark buyout block and the tinted quote block,
   so the frame is doing all the separating on its own. */

.seo__panel{
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--blue);
  padding:clamp(22px,3vw,34px);
}

.seo__form{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; }

/* the input wears its own scheme prefix, so nobody has to type it */
.seo__field{
  flex:1 1 320px; display:flex; align-items:center;
  background:var(--paper-2); border:2px solid var(--line);
  transition:border-color .16s ease, background .16s ease;
}
.seo__field:focus-within{ background:#fff; border-color:var(--blue); }
.seo__field span{
  font-family:var(--font-mono); font-size:14px; color:var(--ink-3);
  padding:0 2px 0 14px; user-select:none; flex:none;
}
.seo__field input{
  flex:1; min-width:0;
  padding:14px 14px 14px 4px;
  font-family:var(--font-mono); font-size:15.5px; color:var(--ink);
  background:none; border:0; outline:none;
}
.seo__form .btn{ flex:0 0 auto; }

.seo__status{ margin:14px 0 0; font-size:14.5px; min-height:1.2em; color:var(--ink-3); }
.seo__status.is-err{ color:var(--bad); }

/* The waiting ellipsis, driven from seo.js. Three characters are always
   reserved, so the status line and the button hold their width while the
   dots come and go - in the button that matters, because it is a
   monospace and every dot would otherwise shove the label sideways. */
.seo__dots{ display:inline-block; width:3ch; text-align:left; }

.seo__small{ margin:16px 0 0; font-size:13.5px; color:var(--ink-3); max-width:64ch; }

/* -- the result -------------------------------------------- */

.seo__out{ margin-top:30px; padding-top:28px; border-top:2px solid var(--ink); }

.seo__for{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.06em;
  color:var(--blue); margin:0 0 22px; word-break:break-all;
}

.seo__result{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--line);
  border:1px solid var(--line); margin-bottom:28px;
}
.seo__cell{ background:var(--paper); padding:26px clamp(18px,2.4vw,28px); }
.seo__cell .kicker{ margin-bottom:10px; }

.seo__num{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(54px,8vw,80px); line-height:1;
  letter-spacing:-0.02em; color:var(--ink); margin:0;
}
.seo__num small{ font-size:.34em; color:var(--ink-3); margin-left:4px; letter-spacing:0; }
.seo__num--up{ color:var(--blue); }

/* twenty cells, one per five points - the artwork's own two inks */
.seo__meter{ display:flex; gap:3px; margin:20px 0 14px; }
.seo__meter i{ flex:1; height:20px; background:var(--blue-line); }
.seo__meter i.is-on{ background:var(--blue); }

.seo__verdict{
  font-family:var(--font-display); font-weight:400;
  font-variant-caps:small-caps; letter-spacing:-0.015em;
  font-size:19px; color:var(--ink); margin:0;
}
.seo__upnote{ margin:18px 0 0; font-size:13.5px; color:var(--ink-3); }

/* -- the checklist ------------------------------------------ */

.seo__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
}
/* display:grid outranks the UA rule for [hidden], and the list is hidden
   outright when a site has nothing wrong with it */
.seo__list[hidden]{ display:none; }
.seo__row{ background:var(--paper); padding:20px 22px 20px 44px; position:relative; }
/* An odd number of checks leaves the last grid cell empty, and the gap
   colour shows through it as a stray grey tile. Let the last row span
   instead. Self-correcting: on an even count this stops matching. */
.seo__row:last-child:nth-child(odd){ grid-column:1 / -1; }
/* one hard square per row, in the state's ink - no icon font, no glyph */
.seo__row::before{
  content:""; position:absolute; left:22px; top:23px;
  width:11px; height:11px; background:var(--blue);
}
.seo__row[data-state=warn]::before{ background:var(--warn); }
.seo__row[data-state=fail]::before{
  background:none; box-shadow:inset 0 0 0 2px var(--bad);
}
/* a check we could not run - reads as absent, not as a fault */
.seo__row[data-state=skip]::before{ background:var(--line); }
.seo__row[data-state=skip] h4{ color:var(--ink-3); }
.seo__row[data-state=skip] p{ color:var(--ink-3); }
.seo__row h4{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); margin:0 0 7px;
}
.seo__row[data-state=warn] h4{ color:var(--warn); }
.seo__row[data-state=fail] h4{ color:var(--bad); }
.seo__row p{ margin:0; font-size:14.5px; color:var(--ink-2); }

.seo__cta{ margin-top:28px; }

@media (max-width:820px){
  .seo__result,.seo__list{ grid-template-columns:1fr; }
  .seo__form .btn{ flex:1 1 100%; }
}

/* -- quote form -------------------------------------------- */

.quote-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:start; }

.contact-direct{ margin-top:40px; padding-top:28px; border-top:1px solid var(--line); }
.contact-direct p{ margin:0 0 6px; font-size:17px; }

.qform{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,36px);
}
.qform__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.field{ display:block; margin-bottom:20px; border:0; padding:0; }
.field > span,.field legend{
  display:block; font-size:14px; font-weight:600; color:var(--ink);
  margin-bottom:8px; padding:0;
}
.field em{ color:var(--blue); font-style:normal; }
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{
  width:100%; padding:13px 14px;
  font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--paper-2); border:1.5px solid var(--line); border-radius:9px;
  transition:border-color .16s ease, background .16s ease;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus,.field textarea:focus{ background:#fff; border-color:var(--blue); outline:none; }
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{ border-color:#C63636; background:#FEF5F5; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; padding:9px 15px;
  font-size:14.5px; color:var(--ink-2);
  background:var(--paper-2); border:1.5px solid var(--line); border-radius:999px;
  cursor:pointer; transition:all .14s ease; user-select:none;
}
.chip span:hover{ border-color:var(--blue-line); }
.chip input:checked + span{ background:var(--blue); border-color:var(--blue); color:#fff; }
.chip input:focus-visible + span{ outline:2px solid var(--blue-bright); outline-offset:2px; }

.field--check{ display:flex; gap:11px; align-items:flex-start; }
.field--check input{ margin-top:4px; width:17px; height:17px; accent-color:var(--blue); flex:none; }
.field--check span{ margin:0; font-weight:400; font-size:14.5px; color:var(--ink-2); }

.hp{ position:absolute; left:-9999px; }

.qform__status{ margin:14px 0 0; font-size:14.5px; min-height:1.2em; }
.qform__status.is-err{ color:#C63636; }
.qform__status.is-ok{ color:var(--blue); font-weight:500; }

/* -- faq --------------------------------------------------- */

/* the section's pixel field, edge to edge. .section is already
   position:relative, so inset:0 fills exactly the section box. */
#faq::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--dot);
  background-size:8px 8px;
  opacity:.55; pointer-events:none;
  /* the band's fade, kept - spread over the whole section instead of
     over 110px, so the field builds downward rather than sitting flat.
     It bottoms out at 28% rather than at zero, so the top of the
     section is still covered. */
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),#000 62%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),#000 62%);
}
#faq > .wrap{ position:relative; z-index:1; }

/* the Q&A card: paper laid over the field so the answers keep a
   plain white ground to read against. Square corners and a
   whole-cell hard shadow, the same language as the hero buttons. */
.faq{
  background:var(--paper);
  border:2px solid var(--ink);
  /* deep blue, not --blue-line: the field is made of --blue-line dots
     and a shadow in it disappears into them */
  box-shadow:6px 6px 0 var(--blue);
  padding:4px clamp(20px,3.4vw,36px);
}
.faq details{ border-bottom:1px solid var(--line); }
/* the card edge closes the list - a rule above it would double up */
.faq details:last-child{ border-bottom:0; }
.faq summary{
  cursor:pointer; list-style:none; padding:24px 40px 24px 0; position:relative;
  font-family:var(--font-display); font-size:21px; font-weight:600;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:11px; height:11px; margin-top:-8px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq details p{ padding:0 0 26px; color:var(--ink-2); max-width:68ch; }

/* -- footer ------------------------------------------------ */

.foot{ background:var(--paper-2); border-top:1px solid var(--line); position:relative; }
.foot__inner{
  display:grid; grid-template-columns:1.2fr 1.8fr; gap:48px;
  padding-block:clamp(48px,6vw,76px);
}
.foot__brand p{ margin:16px 0 0; color:var(--ink-3); font-size:15px; max-width:34ch; }
.foot__where{ font-family:var(--font-mono); font-size:13px; }
.foot__links{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.foot__links h4{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); margin-bottom:14px;
}
.foot__links a{ display:block; color:var(--ink-3); text-decoration:none; font-size:15px; padding:5px 0; }
.foot__links a:hover{ color:var(--blue); }
.foot__base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-block:22px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-3);
}
.foot__base p{ margin:0; }
.foot__mono{ font-family:var(--font-mono); color:var(--blue); }

/* -- responsive -------------------------------------------- */

@media (max-width:1080px){
  .cards{ grid-template-columns:1fr; }
}

/* The wordmark is eleven characters of a monospace face, so it is wide. At the
   narrow end of the desktop nav — just above the 900px mobile breakpoint — the
   row no longer fitted and "What we do", "Contract buyout" and the CTA all
   wrapped onto two lines. Measured at 901px the row needs 800px and has 799.5,
   so it is pulled back on four counts: wordmark, both gaps and the link size.
   That leaves ~22px of slack at the tightest width. */
@media (max-width:1100px){
  .brand__word{ font-size:21px; }
  .nav__inner{ gap:22px; }
  .nav__links{ gap:16px; }
  .nav__links a{ font-size:14px; }
}

/* on narrow screens the fish drops below the copy, so the flood
   needs more clearance underneath it */
@media (max-width:760px){
  /* padding-block comes from --hero-pad-b (see the max-width:900px block);
     overriding it here is what used to push the artwork below the fold */
  .hero__copy{ max-width:none; }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__inner > .btn{ display:none; }
  .nav__toggle{ display:block; }
  .nav__mobile[data-open]{ display:flex; }
  .switch-list{ grid-template-columns:1fr; }
  .quotes{ grid-template-columns:1fr; }
  .buyout,.quote-grid{ grid-template-columns:1fr; }
  .foot__inner{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width:600px){
  body{ font-size:16px; }
  .qform__row{ grid-template-columns:1fr; }
  .foot__links{ grid-template-columns:1fr 1fr; }
  .hero__cta .btn{ flex:1 1 100%; }
  /* the display face is a monospace at 0.636em an advance - the full
     label has to keep fitting one line inside a 375px viewport */
  .btn--pixel{ font-size:18px; padding:15px 18px; }
}

/* -- Departure Mono corrections ----------------------------
   It ships a single weight, so any bold here is synthesised by
   the browser, which smears a pixel face. Force 400 everywhere
   the display font is used, and tighten tracking a touch since
   a monospace sets loose at display sizes. */
.hero__title,.section__title,.brand__word,
.card h3,.switch-item h3,.faq summary{
  font-weight:400;
  letter-spacing:-0.015em;
  /* the face carries real smcp/c2sc in GSUB */
  font-variant-caps:small-caps;
}

/* Where the hero cannot fit both the copy above the cloud line and the whole
   image on screen — narrow viewports, and short ones like a 1366x700 laptop —
   the art runs behind the copy instead of being pushed under the fold. This
   scrim knocks it back under the text without hiding it, so the fish still
   reads as a ghost behind the words.

   .hero__inner makes its own stacking context (z-index:1), so a z-index:-1
   pseudo-element lands above the canvas but below the copy. The fade holds
   near-solid until past the last line, so nothing fades out mid-paragraph. */
@media (max-width:900px), (max-height:820px){
  :root{ --hero-pad-b:clamp(90px,16vh,170px); }
  .hero__inner::before{
    content:"";
    position:absolute; z-index:-1;
    left:calc(var(--pad) * -1); right:calc(var(--pad) * -1);
    top:0; height:calc(100% - var(--hero-pad-b) + 150px);
    background:linear-gradient(180deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.90) 76%,
      rgba(255,255,255,0) 100%);
    pointer-events:none;
  }
}

/* Wide but short: the copy only occupies the left column, so stop the scrim
   before it reaches the fish. Deliberately NOT applied on narrow screens —
   there the copy runs the full width, and masking the right of the scrim
   left the end of each line sitting on bare artwork (measured 3.47:1). */
/* Phones only: the fish is the whole point of the hero and at the shared
   scrim weight it was near-invisible behind the copy — a dark dither cell
   showed through at 6%. Lift the scrim to ~21% so it reads as a ghost rather
   than a rumour. The wide-but-short case below keeps the heavier scrim: there
   the copy sits in the left column and the fish is already at full size.

   Floor for the second stop is contrast, not taste. Worst case is a solid
   #014F64 cell directly under the palest text — .hero__sub--muted, #555A69 at
   16px, which lands around 62% down this gradient. .78 there measures 4.70:1;
   .76 measures 4.52:1, close enough to the 4.5 AA floor to be one tweak from
   failing, so it stays at .78. */
@media (max-width:900px){
  .hero__inner::before{
    background:linear-gradient(180deg,
      rgba(255,255,255,.80) 0%,
      rgba(255,255,255,.78) 76%,
      rgba(255,255,255,0) 100%);
  }
}

@media (min-width:901px) and (max-height:820px){
  .hero__inner::before{
    right:auto;
    width:min(100%, calc(560px + var(--pad) + 180px));
    -webkit-mask-image:linear-gradient(to right,#000 68%,transparent 100%);
    mask-image:linear-gradient(to right,#000 68%,transparent 100%);
  }
}