/* ==================================================================
   site.css
   The shared chassis for the inner pages, extracted verbatim from the
   homepage (index.html). Tokens, type, controls, header, page hero,
   section shell, contact band, footer, focus rings and the reveal
   motion live here. Everything page specific stays inline on its page.

   index.html keeps its own inline copy of these rules and does not
   link this file.
   ================================================================== */

/* Display face. Techna Sans is a single-weight geometric display cut: it has
   no weight and no width axis, so the headings below carry their emphasis
   through size, colour and space instead of a heavier grade. Two consequences
   are baked into every display rule: its caps run ~6% shorter than Mona Sans's
   at the same font-size, so the sizes stepped up, and its default fit is
   already tight, so the old negative tracking is gone. */
@font-face {
  font-family: "Techna Sans";
  src: url("/assets/fonts/techna-sans-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Text face. Four static cuts rather than one variable file, because Be
   Vietnam Pro ships no axes: every "wght" 640 and friend in this sheet became
   the nearest real weight. 400 body, 500 quiet navigation, 600 labels,
   controls and anything that used to sit in the 620-700 band. 700 is not
   asked for by any rule here -- it is the cut a bare <b> resolves to, and
   without it the browser would smear the 400 into a fake bold. */
@font-face { font-family:"Be Vietnam Pro"; src:url("/assets/fonts/be-vietnam-pro-400-latin.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Be Vietnam Pro"; src:url("/assets/fonts/be-vietnam-pro-500-latin.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Be Vietnam Pro"; src:url("/assets/fonts/be-vietnam-pro-600-latin.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Be Vietnam Pro"; src:url("/assets/fonts/be-vietnam-pro-700-latin.woff2") format("woff2"); font-weight:700; font-display:swap; }

:root{
  /* Two faces, one job each. --display is the headings, the wordmark and the
     step numerals; --text is everything a visitor actually reads. Techna Sans
     has one weight and no axes, so nothing that uses --display may ask for a
     grade other than 400 -- it would be synthesised and go furry. */
  --display: "Techna Sans", "Be Vietnam Pro", system-ui, sans-serif;
  --text:    "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --paper:      #EAF0F6;   /* the wash family's mid value: button faces, text on ink */
  --paper-hi:   #F2F6FA;   /* header, dialog, the wash's palest value */
  --paper-lo:   #EEF1F4;   /* quiet fills, cool to sit with the wash */
  --rule:       #D3DCE5;
  /* The ink family sits at the wash's own hue (about 214), not at neutral:
     a neutral near-black was the one block left from the warm palette and
     it clashed with the cooled ground. Owner picked this strength from a
     four-way comparison on 2026-09-01. */
  --ink:        #131B26;
  --ink-2:      #232E3D;
  --ink-soft:   #55585A;   /* body text, second rank */
  --on-ink:     #C4CBD5;   /* text on the ink band, cooled with it */
  --blue:       #5E82A6;
  --blue-deep:  #3E5F80;
  --blue-pale:  #DCE3E9;

  --wrap:  1320px;
  --side:  clamp(28px, 5.5vw, 84px);
  --sec:   clamp(40px, 5vw, 72px);
}

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

/* Overscroll at either end shows html behind the page. The palest value
   continues the wash's own top and sits quietly under the ink ending. */
html{
  background:var(--paper-hi);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

/* The page is a column: header, main, footer. main takes the leftover
   height so the ink footer always reaches the bottom of the window on a
   short page, and behaves exactly as before on a tall one.
   index.html carries its own copy of this. CHANGE BOTH TOGETHER. */
body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  /* The ground is a single-hue wash anchored to the document, not the
     viewport, and it only deepens: palest at the top of the page, deepest
     exactly where the ink ending begins, so the step into the ink reads
     as arrival rather than collision. Never background-attachment:fixed;
     iOS Safari has never handled it. Every stop sits at hue 210 to 212. */
  background:linear-gradient(180deg, var(--paper-hi) 0%, #E2EAF2 46%, #D7E2EE 100%);
  color:var(--ink);
  font-family:var(--text);
  font-weight:400;
  font-size:clamp(0.9375rem, 0.42vw + 0.85rem, 1.0625rem);
  line-height:1.55;
  /* clip, not hidden: hidden makes body a scroll container and the sticky
     header silently stops sticking (found 2026-09-01). clip only clips. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Column so the leftover height on a short window lands on the wash above
   main's last child instead of below it (CHANGE BOTH TOGETHER). */
body > main{ flex:1 0 auto; display:flex; flex-direction:column; }
body > main > .cta{ margin-top:auto; }

img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
p{ margin:0; }

:focus-visible{
  outline:3px solid var(--blue-deep);
  outline-offset:2px;
  border-radius:2px;
}
.on-ink :focus-visible{ outline:3px solid var(--paper); }
/* the ring must never share the button's own fill */
.btn--blue:focus-visible{ outline-color:var(--ink); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; text-decoration:none;
}
.skip:focus{ left:0; }

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-inline:var(--side);
}

/* ---------------- type ---------------- */

h1,h2,h3{ margin:0; }

.h1{
  font-family:var(--display);
  font-size:clamp(2.24rem, 3.2vw, 3.4rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:0;
  max-width:16ch;
}
.h2{
  font-family:var(--display);
  font-size:clamp(1.54rem, 1.6vw, 1.96rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:0;
}
.h3{
  font-family:var(--display);
  font-size:clamp(1.12rem, 0.53vw + 1rem, 1.25rem);
  font-weight:400;
  line-height:1.28;
  letter-spacing:0.004em;
}

/* Sentence case at the face's normal width. These were condensed and
   letter-spaced uppercase until 2026-08-30, which made them read as a second
   typeface next to everything else; owner's call, they use the main font now.
   Nothing else on the site sets a width other than 100. */
.lab{
  font-weight:600;
  font-size:0.9rem;
  color:var(--blue-deep);
  margin:0;
}
.lab--quiet{ color:var(--ink-soft); }
.on-ink .lab{ color:var(--blue-pale); }

.lede{
  font-size:clamp(1.02rem, 0.5vw + 0.9rem, 1.16rem);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:46ch;
}

.muted{ color:var(--ink-soft); }
.on-ink .muted{ color:var(--on-ink); }
.num{ font-variant-numeric:tabular-nums lining-nums; }

/* ---------------- controls ---------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 22px;
  border-radius:4px;
  border:1px solid transparent;
  text-decoration:none;
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:0.002em;
  white-space:nowrap;
}
.btn--ink{ background:var(--ink); color:var(--paper); }
.btn--ink:hover{ background:var(--ink-2); }
.btn--blue{ background:var(--blue-deep); color:var(--paper); }
.btn--blue:hover{ background:#33506E; }
.btn--paper{ background:var(--paper); color:var(--ink); }
.btn--paper:hover{ background:#DFE6ED; }

.tlink{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--blue-deep);
  font-size:0.95rem;
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
.tlink:hover{ color:var(--ink); }
.on-ink .tlink{ color:var(--blue-pale); }
.on-ink .tlink:hover{ color:var(--paper); }

/* ---------------- header ---------------- */

.hdr{
  position:sticky; top:0; z-index:20;
  background:var(--paper-hi);
  border-bottom:1px solid var(--rule);
}
.hdr__in{
  display:flex;
  align-items:center;
  gap:clamp(16px, 2vw, 32px);
  min-height:68px;
  padding-block:12px;
}
/* The way back to the homepage, on the inner pages only. It sits at the
   start of the header row, left of the wordmark, at every width. */
.hdr__back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:none;
  min-height:44px;
  padding-inline:8px;
  margin-left:-8px;
  border-radius:3px;
  text-decoration:none;
  font-size:0.92rem;
  font-weight:500;
  color:var(--ink);
}
.hdr__back:hover{ color:var(--blue-deep); }
.hdr__back svg{ width:15px; height:15px; flex:none; }

.hdr__mark{
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.08rem, 0.53vw + 0.96rem, 1.22rem);
  letter-spacing:0.012em;
  white-space:nowrap;
  margin-right:auto;
}
/* The mark is an <img> at the one canonical SVG rather than the same inline
   svg copied into six pages, which is the sync trap the rest of this codebase
   already fights. Width and height are set so it reserves its box and cannot
   shift the header while it loads. alt is empty on purpose: the wordmark
   beside it already names the company, and a filled alt makes a screen reader
   say it twice. */
.hdr__logo{
  width:24px;
  height:24px;
  flex:none;
}
/* The lockup runs two tone on light grounds only. Setting the second word in
   the deep steel blue holds 6.3:1 against the header's paper, so the split
   reads as a mark rather than as a link waiting to be clicked.
   Scoped to .hdr__wm span, NOT .hdr__mark span: the anchor is a flex row and
   the wordmark needs its own wrapper, otherwise the 9px gap meant for the
   logo would also open between the two words. A descendant selector on the
   anchor matches that wrapper too and turns the whole name blue. */
.hdr__wm span{ color:var(--blue-deep); }
.hdr__nav{
  display:flex;
  align-items:center;
  gap:clamp(4px, 1vw, 14px);
}
.hdr__nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-inline:10px;
  border-radius:3px;
  text-decoration:none;
  font-size:0.92rem;
  font-weight:500;
  color:var(--ink);
}
.hdr__nav a:hover{ color:var(--blue-deep); }
.hdr__nav a[aria-current="page"]{
  color:var(--blue-deep);
  box-shadow:inset 0 -2px 0 0 var(--blue-deep);
  border-radius:0;
}
.hdr__cta{ margin-left:6px; }

/* ---------------- page hero ----------------
   The inner page opener: eyebrow, heading, lede. No canvas behind it;
   the halftone hero belongs to the homepage only. */

.phero{ padding-block:clamp(30px, 3.6vw, 52px) clamp(4px, 0.6vw, 10px); }
.phero__in > * + *{ margin-top:14px; }
.phero .lede + .lede{ margin-top:10px; }

/* ---------------- section shell ---------------- */

.sec{ padding-block:var(--sec); }
.sec--tight{ padding-block:clamp(30px, 3.4vw, 48px); }
/* .sec--rule: the hairline between sections came out 2026-09-01 (owner: cleaner without). The class stays on the markup as a no-op so section order and padding are untouched. */
.sec--rule{ border-top:0; }
.sec__head{ margin-bottom:clamp(22px, 2.4vw, 34px); }
.sec__head .h2{ margin-top:8px; }
.sec__head .lede{ margin-top:12px; }

/* A two column prose block: heading rail on the left, paragraphs right. */
.prose{
  display:grid;
  gap:clamp(16px, 1.6vw, 26px);
  max-width:74ch;
}
.prose p{ color:var(--ink-soft); }

.acts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 20px;
  margin-top:clamp(20px, 2.2vw, 30px);
}

/* A quiet framed notice: the fictional business disclosures. */
.note{
  border:1px solid var(--rule);
  background:var(--paper-lo);
  padding:14px 18px;
  max-width:62ch;
}
.note p + p{ margin-top:6px; }
.note .note__body{ color:var(--ink-soft); font-size:0.95rem; }

/* ---------------- the page sheet ----------------
   One white sheet per page where the page's proof is set matter: the
   services grid on the homepage, the form on the contact page, the
   routing block on the 404. Pages whose proof is a product frame (the
   demo window, the automation canvases, the sample browsers) lift the
   frame itself instead and take no sheet.
   The sheet pads OUTWARD: max-width grows by the pad on each side and
   the padding grows to match, so the content inside keeps the exact
   left edge the heading and lede above it already share. An inset card
   would break the one alignment the hero rebuild established.
   index.html carries its own copy of this block. CHANGE BOTH TOGETHER. */
.sheet{
  --pad: clamp(20px, 2.2vw, 40px);
  max-width: calc(var(--wrap) + var(--pad) * 2);
  padding-inline: calc(var(--side) + var(--pad));
  padding-block: clamp(30px, 3.4vw, 50px);
  background:#FDFDFC;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(30,45,70,.13), 0 2px 6px rgba(30,45,70,.06);
}
.sec--sheet{ padding-block:clamp(30px, 3.6vw, 52px); }
/* Below the width where the sheet's max-width binds it would go full
   bleed: the radius and shadow fall off the screen and the outward pad
   pushes the content off the shared left edge. Pinched, the sheet keeps
   a gutter of ground on each side and gives the same amount back out of
   its padding, so the content edge equals var(--side) at every width
   and the sheet still reads as a sheet on a phone. */
@media (max-width: 1400px){
  .sheet{
    --gut: clamp(10px, 1.6vw, 22px);
    margin-inline: var(--gut);
    padding-inline: calc(var(--side) - var(--gut));
  }
}

/* ---------------- form parts shared by the page form and the dialog ------- */

/* Honeypot. Real people never see it, so anything that fills it in is a bot
   and Web3Forms drops the submission. */
.form-trap{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* Who carries the message, said plainly. */
.form-legal{
  margin-top:14px;
  max-width:52ch;
  font-size:0.9rem;
  color:var(--ink-soft);
}

/* ---------------- contact band ---------------- */

.cta{
  background:var(--ink);
  color:var(--paper);
  /* The seam: the ink block opens on a 2px rule in the deep steel blue,
     the same drawn-hairline language that divides every section above
     it, so the hard edge reads as designed rather than as a collision.
     The contact page has no closer band; its footer carries the same
     seam in its own style block. */
  border-top:2px solid var(--blue-deep);
}
.cta__in{
  padding-block:clamp(34px, 3.8vw, 56px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:clamp(20px, 2.6vw, 44px);
}
.cta .h2{ color:var(--paper); max-width:22ch; text-wrap:balance; }
.cta__lines{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 26px;
  font-size:0.97rem;
}
.cta__lines a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--on-ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.cta__lines a:hover{ color:var(--paper); }


/* ---------------- numbered steps (the homepage process pattern) ----------------
   Markup: .steps > .step (numeral .step__n, h3.h3, p). index.html carries its
   own copy of these rules. CHANGE BOTH TOGETHER. */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
}
.step{
  padding-inline:clamp(26px, 3.2vw, 52px);
  border-left:1px solid var(--rule);
}
.step:first-child{ padding-left:0; border-left:0; }
.step:last-child{ padding-right:0; }
/* .step p.step__n, not .step__n: the numeral is a p, and the plain
   `.step p` body rule outranks a lone class, which shipped the numerals
   small and gray until 2026-08-30. */
.step p.step__n{
  font-family:var(--display);
  font-weight:400;
  font-size:1.62rem;
  line-height:1;
  color:var(--blue-deep);
  margin-bottom:12px;
}
.step .h3{ margin-bottom:8px; }
.step p{ color:var(--ink-soft); font-size:0.97rem; max-width:34ch; }
@media (max-width: 940px){
  .steps{ grid-template-columns:minmax(0,1fr); }
  .step{
    padding:22px 0 0;
    border-left:0;
    border-top:1px solid var(--rule);
  }
  .step:first-child{ padding-top:0; border-top:0; }
  .step p{ max-width:46ch; }
}

/* ---------------- 404 ----------------
   The requested address, echoed back inside a .note. The path is written by
   the page's own script with textContent, never innerHTML: it is attacker
   controlled text and the only safe way to print it is as text. */

/* <main> grows to push the footer to the bottom of a short window, and the
   leftover height lands under its last child. On the other pages that child
   sits on paper and the gap is invisible. Here it is the ink contact band, so
   the same gap prints as a pale stripe between two dark blocks. Making main a
   column and pushing the band down moves the leftover above it, onto paper.
   Redundant now that body > main and body > main > .cta above do this
   generally, but harmless — left in place. */
main.lost-main{ display:flex; flex-direction:column; }
main.lost-main > .cta{ margin-top:auto; }

.lost{ margin-top:clamp(18px, 2vw, 26px); }
.lost__path{
  color:var(--ink);
  font-weight:600;
  /* a long junk URL has no spaces to break at, and would otherwise push the
     note wider than the page on a phone */
  overflow-wrap:anywhere;
}

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

/* One continuous ink ending: closer band + footer (owner, 2026-08-30). */
.ftr{
  background:var(--ink);
  border-top:1px solid #25303F;
}
.ftr__in{
  padding-block:22px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 32px;
  font-size:0.86rem;
  color:var(--on-ink);
}
.ftr__id p + p{ margin-top:2px; }
/* Single tone here on purpose, and not an oversight to be tidied up later.
   The two tone lockup is a light ground device. On this ink band the steel
   blue lands at 2.6:1, which fails AA for text at this size, and the pale
   blue sits so close to paper that the split reads as a rendering fault
   instead of a mark. The footer mark stays one colour. */
.ftr__mark{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:0.012em;
  color:var(--paper);
}
.ftr__mail + .ftr__mail{ margin-left:18px; }
.ftr__mail{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  color:var(--on-ink);
}
.ftr__mail:hover{ color:var(--paper); }
.ftr__nav{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.ftr__nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  color:var(--on-ink);
}
.ftr__nav a:hover{ color:var(--paper); }
.ftr__note{ max-width:48ch; }

/* ==================================================================
   START A PROJECT DIALOG
   One per page, opened by every "Start a project" trigger. index.html
   is self contained and carries its own copy of this whole block.
   CHANGE BOTH TOGETHER.
   ================================================================== */

.mdl{
  width:min(30rem, 100% - 28px);
  max-height:min(86vh, 100% - 28px);
  margin:auto;
  padding:0;
  overflow-y:auto;
  border:1px solid var(--rule);
  border-radius:4px;
  background:var(--paper-hi);
  color:var(--ink);
}
.mdl::backdrop{ background:rgba(19,27,38,0.55); }

.mdl__panel{ padding:20px clamp(20px, 5vw, 32px) 28px; }

.mdl__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.mdl__top .h2{ margin-top:8px; }

.mdl__x{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin:-6px -14px 0 0;
  padding:0;
  border:0;
  border-radius:3px;
  background:none;
  color:var(--ink-soft);
  cursor:pointer;
}
.mdl__x:hover{ color:var(--ink); background:var(--paper-lo); }
.mdl__x svg{ width:16px; height:16px; }

.mdl__field{ margin-top:16px; }
.mdl__field label{ display:block; margin-bottom:6px; }
.mdl__field input,
.mdl__field select,
.mdl__field textarea{
  display:block;
  width:100%;
  font:inherit;
  font-size:1rem;
  line-height:1.4;
  min-height:44px;
  padding:10px 12px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid #8A96A3;
  border-radius:0;
}
.mdl__field textarea{ min-height:120px; resize:vertical; }
.mdl__field select{ cursor:pointer; }
.mdl__field input:hover,
.mdl__field select:hover,
.mdl__field textarea:hover{ border-color:var(--blue); }

.mdl button.btn{
  margin-top:22px;
  width:100%;
  font-family:inherit;
  cursor:pointer;
}
.mdl button.btn[disabled]{ cursor:default; opacity:0.7; }

.mdl .form-note,
.mdl .form-done{
  margin-top:18px;
  border:1px solid var(--rule);
  background:var(--paper-lo);
  padding:12px 14px;
  font-size:0.95rem;
  color:var(--ink-soft);
}
.mdl .form-note p + p,
.mdl .form-done p + p{ margin-top:8px; }
.mdl .form-note a,
.mdl .form-done a{ color:var(--blue-deep); }

.mdl__direct{
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid var(--rule);
  font-size:0.95rem;
  color:var(--ink-soft);
}
.mdl .form-legal{ margin-top:10px; }

@keyframes mdl-fade{ from{ opacity:0; } to{ opacity:1; } }

@media (prefers-reduced-motion: no-preference){
  .mdl[open],
  .mdl[open]::backdrop{ animation:mdl-fade 150ms ease-out; }
}

/* ==================================================================
   MOTION
   One time entrance reveals only. Nothing moves with scroll. The
   .js class is added by each page's inline script, so with scripting
   off nothing is ever left hidden.
   ================================================================== */

@media (prefers-reduced-motion: no-preference){
  .js .reveal{
    opacity:0;
    transform:translateY(8px);
    transition:opacity .5s ease, transform .5s cubic-bezier(.22,.7,.3,1);
  }
  .js .reveal.is-in{ opacity:1; transform:none; }
  .js .reveal.d1{ transition-delay:.06s; }
  .js .reveal.d2{ transition-delay:.12s; }
  .js .reveal.d3{ transition-delay:.18s; }

  .btn, .tlink, .hdr__nav a, .ftr__nav a{
    transition:background-color 130ms linear, color 130ms linear;
  }
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

@media (max-width: 940px){
  /* the nav takes a second row here, so a sticky bar would eat the screen */
  .hdr{ position:static; border-bottom:0; }
  .hdr__in{ flex-wrap:wrap; row-gap:4px; min-height:0; }
  .hdr__mark{ margin-right:auto; }
  /* centred on its own row (owner, 2026-09-01) */
  .hdr__nav{ order:3; width:100%; justify-content:center; gap:2px; margin-left:0; }
  .hdr__cta{ margin-left:0; }
}

@media (max-width: 560px){
  .hdr__in{ column-gap:12px; }
  /* The wordmark wins over the mark on small screens. The tile plus its gap is
     33px, and on an inner page the back link, the mark and the button are
     already sharing a row: leaving it in pushed the button onto a row of its
     own and took the header from 117px to 165px at 460px wide. 560 rather than
     a tighter number because the inner pages are the constraint, and the header
     has to break at the same width everywhere or it stops matching itself.
     The symbol still reaches a phone through the favicon and the home screen
     icon, which is the job it was drawn for. */
  .hdr__logo{ display:none; }
  .hdr__nav a{ font-size:0.86rem; padding-inline:8px; }
  .hdr__back{ font-size:0.86rem; padding-inline:6px; margin-left:-6px; }
  .hdr__cta{ padding-inline:16px; font-size:0.9rem; }
  .acts .btn{ width:100%; }
  .cta__in .btn{ width:100%; }
}

@media (max-width: 430px){
  /* Below this the back link, the wordmark and the button cannot share a
     row. The button moves under the nav instead of splitting the two rows
     above it, and it runs full width so the third row reads as a
     deliberate action bar rather than a stray chip; the owner called the
     three ragged rows messy (2026-09-01). The hero and contact buttons
     already go full width on small screens, so this matches them. */
  .hdr__cta{ order:4; width:100%; }
  .hdr__in{ row-gap:8px; }
}