/* ==========================================================================
   Pernovatio — site stylesheet
   --------------------------------------------------------------------------
   VERBATIM from the chosen design (reference/original.html).

   This file is global on purpose. Astro scoped styles rewrite every selector
   with a [data-astro-cid-*] attribute and reorder declarations, which shifts
   specificity and made the port drift from the source. Keeping the CSS global
   and byte-identical removes that entire class of problem: any remaining
   difference can only be markup.

   Do not reformat, reorder or "tidy" this file. Diff it against
   reference/original.html before and after any edit.
   ========================================================================== */

:root{
  /* chrome panels — adapt to theme */
  --a-bg:#F1F3F7;
  --a-fg:#080D1A;
  --a-fg-2:#48566E;
  --a-hair:#C4CDDC;
  --a-grid:#E2E7EF;
  /* inverted panel — adapts to theme */
  --b-bg:#0A0F22;
  --b-fg:#EFF3FA;
  --b-fg-2:#93A3C2;
  --b-hair:#232F52;
  /* brand */
  --brand:#1A5FA4;
  --brand-2:#4398EC;
  --brand-3:#93C5F9;
  --focus:#1A5FA4;
  /* lit displays — deliberately identical in both themes: these are screens, not surfaces */
  --field:#040A1C;
  --field-2:#0D2452;
  --field-fg:#EDF5FF;
  --field-fg-2:#9DBCDC;
  --trace:#2CB8F0;
  --trace-dim:#1A5F91;
  --node:#6FDCFF;
  --node-warm:#FFA858;
  --grot:"Helvetica Neue",Helvetica,Arial,"Liberation Sans","Nimbus Sans",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --a-bg:#06090F;
    --a-fg:#EDEFF4;
    --a-fg-2:#909BAE;
    --a-hair:#232A36;
    --a-grid:#12161F;
    --b-bg:#101731;
    --b-fg:#EFF3FA;
    --b-fg-2:#93A3C2;
    --b-hair:#2C3A61;
    --brand:#4398EC;
    --brand-2:#7FBBF3;
    --brand-3:#AFD5FA;
    --focus:#7FBBF3;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--a-bg);
  color:var(--a-fg);
  font-family:var(--grot);
  font-size:17px;line-height:1.45;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ---------- panel system ---------- */
.panel{padding:clamp(28px,6vw,80px) clamp(20px,5vw,72px)}
.panel-a{
  background-color:var(--a-bg);color:var(--a-fg);
  background-image:
    repeating-linear-gradient(0deg,var(--a-grid) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(90deg,var(--a-grid) 0 1px,transparent 1px 56px);
}
.panel-b{background:var(--b-bg);color:var(--b-fg)}
.panel-f{
  position:relative;overflow:hidden;
  background-color:var(--field);
  background-image:
    radial-gradient(72% 92% at 26% 34%,var(--field-2) 0%,transparent 64%),
    radial-gradient(circle at 14% 20%,var(--trace-dim) 0 1.4px,transparent 1.4px),
    radial-gradient(circle at 76% 64%,var(--trace-dim) 0 1.4px,transparent 1.4px);
  background-size:auto,124px 124px,92px 92px;
  color:var(--field-fg);
}
.panel-f :focus-visible{outline-color:var(--node)}
.panel-b :focus-visible{outline-color:var(--brand-2)}
.edge{border-top:4px solid var(--brand)}
.in{max-width:1240px;margin:0 auto;position:relative;z-index:1}

/* ---------- header + hero ---------- */
.lockup{display:inline-flex;align-items:center;gap:10px;margin-right:auto}
.lockup svg{display:block;width:23px;height:23px;flex:none}
.lockup .word{font-size:21px;font-weight:500;letter-spacing:-.01em}
.lockup .word em{font-style:normal;color:var(--a-fg-2);font-weight:400}
.top{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-bottom:clamp(40px,8vw,96px)}
.menu{display:flex;gap:24px;font-size:16px;font-weight:500}
.menu a{padding-bottom:2px;border-bottom:2px solid transparent}
.menu a:hover{border-bottom-color:var(--brand)}
.menu a[aria-current]{border-bottom-color:var(--brand)}
.switch{font-size:15px;color:var(--a-fg-2);font-weight:500}
.switch a{border-bottom:2px solid transparent}
.switch a:hover{border-bottom-color:var(--brand)}

h1{font-size:clamp(42px,9vw,122px);line-height:.92;letter-spacing:-.045em;font-weight:700;margin:0 0 clamp(24px,3vw,40px);max-width:13ch}
.hero-tail{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;padding-top:clamp(20px,3vw,34px);border-top:3px solid var(--brand)}
.hero-tail p{margin:0;font-size:clamp(18px,1.9vw,24px);line-height:1.35;max-width:40ch;font-weight:500}
.hero-tail .meta{font-family:var(--mono);font-size:13.5px;color:var(--a-fg-2);line-height:1.9}
.acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(28px,4vw,46px)}
.act{font-size:17px;font-weight:600;padding:14px 24px;border:2px solid currentColor;display:inline-block;transition:background-color .12s linear,color .12s linear,border-color .12s linear}
.act-solid{background:var(--brand);border-color:var(--brand);color:#FFFFFF}
.act-solid:hover{background:transparent;color:var(--a-fg);border-color:var(--a-fg)}
.act:hover{background:var(--a-fg);color:var(--a-bg)}
.panel-b .act:hover{background:var(--b-fg);color:var(--b-bg)}
.panel-f .act:hover{background:var(--node);color:var(--field);border-color:var(--node)}
@media (prefers-reduced-motion:reduce){.act{transition:none}}

/* ---------- lit display 1: circuit bloom ---------- */
.bloomwrap{overflow-x:auto}
svg.bloom{display:block;width:100%;min-width:780px;height:auto}
.bloom .trace{fill:none;stroke:var(--trace);stroke-width:1.6;filter:url(#gl);stroke-dasharray:520;stroke-dashoffset:520;animation:draw 1.6s ease-out .1s forwards}
.bloom .t2{animation-delay:.25s}
.bloom .t3{animation-delay:.4s}
.bloom .t4{animation-delay:.55s}
.bloom .ring{fill:none;stroke:var(--trace-dim);stroke-width:1;stroke-dasharray:5 9}
.bloom .ring2{fill:none;stroke:var(--trace-dim);stroke-width:1;stroke-dasharray:2 7;opacity:.75}
.bloom .pip{fill:var(--node);filter:url(#gl);opacity:0;animation:pop .5s ease-out 1.1s forwards}
.bloom .warm{fill:var(--node-warm)}
.bloom .lbl{fill:var(--field-fg);font-family:var(--grot);font-size:15px;font-weight:700;letter-spacing:-.01em}
.bloom .sub{fill:var(--field-fg-2);font-family:var(--mono);font-size:12px}
.bloom .chip{fill:#081231;stroke:var(--trace);stroke-width:1.6;filter:url(#gl)}
.bloom .halo{fill:none;stroke:var(--node);stroke-width:1;opacity:.45;animation:breathe 5s ease-in-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:.14}}
@media (prefers-reduced-motion:reduce){
  .bloom .trace{animation:none;stroke-dashoffset:0}
  .bloom .pip{animation:none;opacity:1}
  .bloom .halo{animation:none}
}
.caption{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:clamp(16px,2.5vw,28px);padding-top:14px;border-top:1px solid var(--trace-dim);font-family:var(--mono);font-size:12.5px;color:var(--field-fg-2)}

/* ---------- inverted statement panel ---------- */
.stmt{font-size:clamp(28px,5vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:700;margin:0 0 clamp(30px,5vw,64px);max-width:18ch}
.stmt span{color:var(--brand-2)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--b-hair)}
.cols > div{padding:26px 26px 8px;border-right:1px solid var(--b-hair);border-top:4px solid var(--brand);margin-top:-2px}
.cols > div:nth-child(2){border-top-color:var(--brand-2)}
.cols > div:nth-child(3){border-top-color:var(--brand-3)}
.cols > div:first-child{padding-left:0}
.cols > div:last-child{border-right:0;padding-right:0}
.cols h2{font-size:clamp(20px,2.2vw,27px);letter-spacing:-.02em;font-weight:700;margin:0 0 12px}
.cols p{margin:0 0 14px;color:var(--b-fg-2);font-size:16.5px;max-width:38ch}
.cols a{font-weight:600;border-bottom:2px solid var(--brand)}
.cols a:hover{border-bottom-color:var(--b-fg)}

/* ---------- lit display 2: proof + node module ---------- */
.tracelayer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.tracelayer path{fill:none;stroke:var(--trace-dim);stroke-width:1.2;opacity:.6}
.tracelayer circle{fill:var(--trace);opacity:.65}
.proof-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start;padding-bottom:clamp(26px,4vw,48px)}
.proof-head h2{font-size:clamp(38px,7vw,92px);line-height:.94;letter-spacing:-.045em;font-weight:700;margin:0}
.kicker{font-family:var(--mono);font-size:12.5px;margin:0 0 12px;color:var(--node)}
.proof-head p{margin:0 0 14px;font-size:clamp(17px,1.6vw,20px);max-width:42ch;line-height:1.4;color:var(--field-fg-2)}
.proof-head p strong{color:var(--field-fg);font-weight:600}
.module{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--trace-dim);border:1px solid var(--trace-dim)}
.module > div{background:var(--field);padding:18px 20px 20px;min-height:120px;position:relative}
.module > div::before{content:"";position:absolute;top:9px;left:9px;width:6px;height:6px;background:var(--node);box-shadow:0 0 8px var(--node)}
.module dt{font-family:var(--mono);font-size:12px;margin:0 0 6px;color:var(--field-fg-2);padding-left:16px}
.module dd{margin:0;font-size:17px;line-height:1.3;font-weight:500}
.module .centre{display:flex;align-items:center;justify-content:center;padding:20px;background:#071127}
.module .centre::before{display:none}
.module .centre svg{width:58px;height:58px;display:block}
.module .warmcell::before{background:var(--node-warm);box-shadow:0 0 8px var(--node-warm)}

/* ---------- after launch ---------- */
.after h2{font-size:clamp(30px,5vw,62px);line-height:1;letter-spacing:-.04em;font-weight:700;margin:0 0 clamp(26px,4vw,48px);max-width:20ch}
.rows{border-top:3px solid var(--brand)}
.rows > div{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(16px,3vw,48px);padding:22px 0;border-bottom:1px solid var(--a-hair)}
.rows h3{margin:0;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;font-weight:700}
.rows p{margin:0;color:var(--a-fg-2);font-size:17px;max-width:56ch}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px)}
.contact h2{font-size:clamp(26px,3.6vw,44px);line-height:1.04;letter-spacing:-.03em;font-weight:700;margin:0 0 14px;max-width:16ch}
.contact .aud{font-family:var(--mono);font-size:12.5px;color:var(--brand-2);margin:0 0 12px}
.contact p{margin:0 0 22px;color:var(--b-fg-2);font-size:17px;max-width:40ch}
.contact-head{font-size:clamp(30px,5vw,62px);line-height:1;letter-spacing:-.04em;font-weight:700;margin:0 0 clamp(26px,4vw,48px)}

.foot{padding:22px clamp(20px,5vw,72px) 40px;background:var(--a-bg);color:var(--a-fg-2);font-family:var(--mono);font-size:13px}
.foot-in{max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot a{border-bottom:1px solid var(--a-hair)}
.foot .lockup{margin-right:0}
.foot .lockup svg{width:17px;height:17px}
.foot .lockup .word{font-size:15px;color:var(--a-fg-2);font-family:var(--grot)}

@media (max-width:880px){
  .hero-tail,.proof-head,.contact{grid-template-columns:minmax(0,1fr)}
  .cols{grid-template-columns:minmax(0,1fr)}
  .cols > div{padding:22px 0;border-right:0;border-bottom:1px solid var(--b-hair);margin-top:0}
  .cols > div:last-child{border-bottom:0}
  .module{grid-template-columns:minmax(0,1fr)}
  .module > div{min-height:0}
  .module .centre{display:none}
  .rows > div{grid-template-columns:minmax(0,1fr);gap:8px}
  h1{max-width:none}
}

/* ---------- lit hero with globe artwork ---------- */
.hero-panel{
  position:relative;overflow:hidden;
  background-color:var(--field);
  background-image:radial-gradient(52% 70% at 74% 46%,rgba(21,74,150,.55) 0%,transparent 70%),radial-gradient(70% 90% at 100% 18%,rgba(12,48,104,.6) 0%,transparent 72%);
  color:var(--field-fg);
}
.hero-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-art svg{display:block;width:100%;height:100%}
.hero-art .orbit{fill:none;stroke:var(--node);stroke-width:1.1;opacity:.42}
.hero-art .orbit-w{fill:none;stroke:var(--node-warm);stroke-width:1.1;opacity:.34}
.hero-art .tr{fill:none;stroke:var(--trace);stroke-width:1.3;opacity:.62}
.hero-art .tr-w{fill:none;stroke:var(--node-warm);stroke-width:1.3;opacity:.42}
.hero-art .nd{fill:var(--node);opacity:.85}
.hero-art .nd-w{fill:var(--node-warm);opacity:.8}
.hero-scrim{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(96deg,var(--field) 0%,rgba(4,10,28,.95) 36%,rgba(4,10,28,.60) 64%,rgba(4,10,28,.16) 100%);
}
.hero-panel .in{position:relative;z-index:1}
.hero-panel .lockup .word em{color:var(--field-fg-2)}
.hero-panel .menu a:hover,.hero-panel .menu a[aria-current]{border-bottom-color:var(--node)}
.hero-panel .switch{color:var(--field-fg-2)}
.hero-panel .switch a:hover{border-bottom-color:var(--node)}
.hero-panel .hero-tail{border-top-color:var(--node)}
.hero-panel .hero-tail .meta{color:var(--field-fg-2)}
.hero-panel .act:hover{background:var(--node);color:var(--field);border-color:var(--node)}
.hero-panel .act-solid{background:var(--brand-2);border-color:var(--brand-2);color:#04101F}
.hero-panel .act-solid:hover{background:var(--node);border-color:var(--node);color:var(--field)}
.hero-panel :focus-visible{outline-color:var(--node)}
.langline{font-family:var(--mono);font-size:13px;color:var(--b-fg-2);margin:0 0 clamp(22px,3vw,34px)}
@media (max-width:700px){.hero-scrim{background:linear-gradient(180deg,rgba(4,10,28,.86) 0%,rgba(4,10,28,.94) 55%,var(--field) 100%)}}

/* ---------- language selector ---------- */
.langsel{position:relative;font-size:14.5px;font-weight:500}
.langsel > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  padding:8px 12px;border:1px solid var(--a-hair);color:inherit;user-select:none;
}
.langsel > summary::-webkit-details-marker{display:none}
.langsel > summary:hover{border-color:var(--brand)}
.langsel > summary .code{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
.langsel > summary .chev{width:9px;height:9px;flex:none;transition:transform .12s linear}
.langsel[open] > summary .chev{transform:rotate(180deg)}
.langsel[open] > summary{border-color:var(--brand)}
.langsel ul{
  position:absolute;top:calc(100% + 6px);right:0;z-index:40;margin:0;padding:0;list-style:none;
  min-width:180px;background:var(--a-bg);border:1px solid var(--a-hair);
}
.langsel li + li{border-top:1px solid var(--a-hair)}
.langsel ul a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;white-space:nowrap}
.langsel ul a:hover{background:var(--brand);color:#FFFFFF}
.langsel ul a .code{font-family:var(--mono);font-size:12px;opacity:.7}
.langsel ul a[aria-current]{font-weight:700}
.langsel ul a[aria-current]::before{content:"";width:7px;height:7px;background:var(--brand);margin-right:-8px}
.hero-panel .langsel > summary{border-color:var(--trace-dim)}
.hero-panel .langsel > summary:hover,.hero-panel .langsel[open] > summary{border-color:var(--node)}
.hero-panel .langsel ul{background:var(--field);border-color:var(--trace-dim)}
.hero-panel .langsel li + li{border-top-color:var(--trace-dim)}
.hero-panel .langsel ul a:hover{background:var(--node);color:var(--field)}
.hero-panel .langsel ul a[aria-current]::before{background:var(--node)}
.foot .langsel ul{top:auto;bottom:calc(100% + 6px)}
@media (prefers-reduced-motion:reduce){.langsel > summary .chev{transition:none}}

/* ---------- hexagon lattice hero ---------- */
.hero-art .hx-faint{fill:none;stroke:var(--trace-dim);stroke-width:1;opacity:.24}
.hero-art .hx-mid{fill:rgba(14,42,88,.55);stroke:var(--trace-dim);stroke-width:1.1;opacity:.7}
.hero-art .hx-on{fill:rgba(20,70,140,.72);stroke:var(--trace);stroke-width:1.6;opacity:.9}
.hero-art .hx-link{stroke:var(--node);stroke-width:1.2;opacity:.5}
.hero-art .hx-hero{fill:rgba(24,92,176,.85);stroke:var(--node);stroke-width:2;filter:url(#hg)}
.hero-art .hx-hero-g{animation:hexbreathe 5.5s ease-in-out infinite}
@keyframes hexbreathe{0%,100%{opacity:1}50%{opacity:.72}}
@media (prefers-reduced-motion:reduce){.hero-art .hx-hero-g{animation:none}}

/* ==========================================================================
   Additions
   --------------------------------------------------------------------------
   Everything above this line is verbatim from the chosen design. Only add
   below, and only what the source genuinely lacks.
   ========================================================================== */

/* Keyboard skip link. Not in the source; needed for keyboard users to bypass
   the header. Invisible until focused. */
.skip-link{position:absolute;left:16px;top:-5rem;z-index:80;padding:12px 16px;background:var(--a-bg);color:var(--a-fg);border:2px solid var(--brand);font-size:15px;font-weight:600;text-decoration:none;transition:top .12s linear}
.skip-link:focus{top:16px}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none}}

/* --------------------------------------------------------------------------
   Requested adjustments (2026-09-02)
   Overrides rather than edits above, so the original block stays byte-for-byte
   diffable against reference/original.html.
   -------------------------------------------------------------------------- */

/* Mark read too small at 23px in the header and 17px in the footer. */
.lockup svg{width:30px;height:30px}
.lockup .word{font-size:25px}
.foot .lockup svg{width:22px;height:22px}
.foot .lockup .word{font-size:17px}

/* Hero headline eased back from a 122px ceiling. */
h1{font-size:clamp(38px,7.8vw,104px)}

/* Automation page: marker on the recommended tier. Small mono label so the
   default choice is obvious without shouting. */
.tier-pick{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2);margin:0 0 10px}
.cols > div.is-pick{background:rgba(67,152,236,.06)}

/* --------------------------------------------------------------------------
   Work index and case studies
   -------------------------------------------------------------------------- */

/* Case study cards on the index. */
.cases{display:flex;flex-direction:column;gap:1px;background:var(--a-hair);border:1px solid var(--a-hair);margin-top:clamp(26px,4vw,44px)}
.case{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,34px);padding:clamp(22px,3vw,34px);background:var(--a-bg);align-items:start}
.case:hover{background:var(--surface-hover,transparent)}
.case-icon{width:72px;height:72px;border-radius:16px;display:block;flex:none}
.case-body h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;font-weight:700;margin:0 0 8px}
.case-meta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--a-fg-2);margin:0 0 12px;display:flex;gap:14px;flex-wrap:wrap}
.case-meta .live{color:var(--brand)}
.case-body p{margin:0 0 14px;color:var(--a-fg-2);font-size:17px;max-width:60ch}
.case-body a{font-weight:600;border-bottom:2px solid var(--brand)}
.case-body a:hover{border-bottom-color:var(--a-fg)}
.case-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.case-tags li{font-family:var(--mono);font-size:11.5px;color:var(--a-fg-2);border:1px solid var(--a-hair);padding:3px 7px}

/* Case study header: icon beside the title on the lit panel. */
.case-head{display:flex;align-items:center;gap:clamp(16px,2.5vw,26px);flex-wrap:wrap}
.case-head .case-icon{width:84px;height:84px;border-radius:18px}

/* Long-form body rendered from MDX. */
.prose{max-width:70ch}
.prose h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.025em;font-weight:700;margin:clamp(32px,4vw,48px) 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;font-weight:700;margin:28px 0 8px}
.prose p{margin:0 0 16px;color:var(--a-fg-2);font-size:17px;line-height:1.6}
.prose strong{color:var(--a-fg);font-weight:600}
.prose ul{margin:0 0 16px;padding-left:20px;color:var(--a-fg-2)}
.prose li{margin-bottom:6px}
.prose a{border-bottom:2px solid var(--brand);font-weight:500}

/* Facts panel beside the case study body. */
.facts{border-top:3px solid var(--brand)}
.facts > div{padding:16px 0;border-bottom:1px solid var(--a-hair)}
.facts dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--a-fg-2);margin:0 0 5px}
.facts dd{margin:0;font-size:16px;font-weight:500;line-height:1.35}
.case-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(28px,5vw,64px);align-items:start}

@media (max-width:880px){
  .case{grid-template-columns:minmax(0,1fr)}
  .case-layout{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   Phone breakpoint (2026-09-03)
   --------------------------------------------------------------------------
   Scoped to <=560px only. Nothing here affects desktop or tablet.
   ========================================================================== */

@media (max-width:560px){

  /* The wordmark suffix wrapped onto a second line, which read as two separate
     headings. On a phone the company name alone is enough — the descriptor is
     a desktop nicety. */
  .lockup .word em{display:none}

  /* Header was wrapping onto three rows: mark, nav, then the language select
     stranded on its own line. Reorder so the mark and the language select
     share row one and the nav takes row two as a full-width strip. */
  .top{gap:14px 16px;padding-bottom:clamp(28px,7vw,48px)}
  .lockup{margin-right:auto}
  .langsel{order:2}
  .menu{order:3;width:100%;gap:20px;font-size:15px}

  /* Tighter language button so it never crowds the mark. */
  .langsel > summary{padding:6px 10px;gap:7px}

  /* The mark is the anchor at this size; the wordmark can come down a little. */
  .lockup svg{width:26px;height:26px}
  .lockup .word{font-size:21px}

}

/* ==========================================================================
   Dark only (2026-09-03)
   --------------------------------------------------------------------------
   The design is fundamentally a lit dark surface: the .panel-f field panels
   are deliberately constant across themes because they depict screens, not
   surfaces. Following the OS theme therefore produced alternating dark and
   white slabs for light-mode visitors, which read as broken rather than
   deliberate.

   Rather than edit the palette above, the light tokens are redefined here to
   the dark values, so :root and the dark media query resolve identically and
   the site renders the same on every device. Deleting this block restores
   theme-following.
   ========================================================================== */

:root{
  color-scheme:dark;

  --a-bg:#06090F;
  --a-fg:#EDEFF4;
  --a-fg-2:#909BAE;
  --a-hair:#232A36;
  --a-grid:#12161F;

  --b-bg:#101731;
  --b-fg:#EFF3FA;
  --b-fg-2:#93A3C2;
  --b-hair:#2C3A61;

  --brand:#4398EC;
  --brand-2:#7FBBF3;
  --brand-3:#AFD5FA;
  --focus:#7FBBF3;
}

/* The channel labels above the contact columns are short by design, but guard
   against a future edit wrapping them onto a second line — the label reads as
   an eyebrow and only works as one. */
.contact .aud{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --------------------------------------------------------------------------
   Contact headings on phones
   The desktop rule caps these at 16ch, which is roughly 231px — narrower than
   the ~335px a phone actually offers — so "Message me on WhatsApp." wrapped
   onto two lines with empty space beside it. The cap is the cause, not the
   size, so it is lifted and the size is tuned to the longest heading across
   all four languages ("Écrivez-moi sur WhatsApp.", 25 characters), which needs
   ≤21.5px at 320px and ≤25.8px at 375px.
   -------------------------------------------------------------------------- */
/* Applied up to 880px, not 560px: that is where .contact collapses to a single
   column, so it covers landscape phones and tablet portrait as well. Above it,
   the two-column desktop layout keeps the original 16ch cap, where the wrap to
   two lines is deliberate at 44px. */
@media (max-width:880px){
  .contact h2{
    max-width:none;
    font-size:clamp(19px,4.4vw,26px);
    letter-spacing:-.035em;
    text-wrap:nowrap;
  }
}

/* Safari does not support text-wrap:nowrap; give it the real property, guarded
   so it only applies where the size above guarantees the text fits. */
@media (max-width:880px){
  .contact h2{white-space:nowrap}
}

/* Below 340px even the shortest safe size can overflow with the longest French
   heading, so let it wrap again rather than push the layout sideways. */
@media (max-width:339px){
  .contact h2{white-space:normal;font-size:18px}
}

/* --------------------------------------------------------------------------
   Phone: scroll cue on the circuit diagram
   The diagram keeps its 780px minimum because scaling it to a phone renders
   the labels near 6px. That means half of it sits off-screen, so the edge
   needs to say so — a fade plus a chevron, pinned to the container rather
   than to the scrolling content. Purely visual: no string to translate.
   -------------------------------------------------------------------------- */

.bloomstage{position:relative}

.scroll-cue{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:88px;
  display:none;
  /* Anchored to the bottom, not the middle. The traces converge at the
     vertical centre of the diagram, so a cyan chevron there was cyan on cyan.
     The lower corner is empty in every locale. */
  align-items:flex-end;
  justify-content:flex-end;
  padding:0 12px 16px 0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(4,10,28,0) 0%,rgba(4,10,28,.55) 45%,rgba(4,10,28,.92) 100%);
  transition:opacity .25s linear;
}

/* Solid disc so the arrow never competes with whatever is behind it. */
.scroll-cue svg{
  width:34px;
  height:34px;
  padding:8px;
  box-sizing:border-box;
  border-radius:50%;
  color:var(--field-fg);
  background:var(--field);
  border:1px solid var(--trace);
  box-shadow:0 0 0 3px var(--field),0 0 16px rgba(44,184,240,.45);
  animation:cue-nudge 1.8s ease-in-out infinite;
}

@keyframes cue-nudge{
  0%,100%{transform:translateX(0);opacity:.65}
  50%    {transform:translateX(4px);opacity:1}
}

/* Set once the reader has scrolled — the hint has done its job. */
.bloomstage.is-scrolled .scroll-cue{opacity:0}

@media (max-width:880px){
  .scroll-cue{display:flex}
}

@media (prefers-reduced-motion:reduce){
  .scroll-cue svg{animation:none;opacity:1}
}

/* --------------------------------------------------------------------------
   Phone: let the hex lattice show through
   The mobile scrim was near-opaque top to bottom (.86 → .94 → solid), which
   buried the artwork the design is built around. It is also the wrong way up:
   the darkest band sat at the bottom, where there is no text, while the
   headline at the top got the lightest cover.

   Inverted and eased — heavy behind the type, clearing toward the bottom so
   the lattice reads in the space below the buttons.
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(4,10,28,.93) 0%,
      rgba(4,10,28,.90) 38%,
      rgba(4,10,28,.72) 62%,
      rgba(4,10,28,.42) 82%,
      rgba(4,10,28,.24) 100%);
  }

  /* `slice` centres a 1200x560 viewBox on a portrait screen, which crops out
     the lit cluster entirely. Scaling up and shifting right brings the focal
     hex — the one carrying the mark — into the visible band. */
  .hero-art svg{
    transform:scale(1.45) translateX(14%);
    transform-origin:center;
  }

  /* More vertical room so the artwork has somewhere to be seen. */
  .hero-panel{padding-bottom:clamp(56px,16vw,96px)}
}

/* --------------------------------------------------------------------------
   Phone: stronger swipe cue, and the footer language button beside the mark
   -------------------------------------------------------------------------- */
@media (max-width:880px){
}

@media (max-width:560px){
  /* Footer stacked into three rows with the language button stranded on its
     own. Put it beside the mark and let the location line take the row below,
     matching how the header is arranged. */
  .foot-in{gap:14px 16px}
  .foot .lockup{order:1}
  .foot .langsel{order:2;margin-left:auto}
  .foot .where{order:3;width:100%}
}