/* AETHER HYDRO — interior pages. */

/* --- vertical rhythm ----------------------------------------------------- */
/* One step scale. Every gap on an interior page is a multiple of it, so the
   rhythm cannot drift the way six hand-rolled clamp() values did. */
:root{
  --sp:clamp(15px,1.9vw,24px);
  --sp-2:calc(var(--sp) * 1.6);
  --sp-3:calc(var(--sp) * 2.5);
  --sp-4:calc(var(--sp) * 3.9);
  --sp-5:calc(var(--sp) * 5.6);
}

/* AETHER HYDRO — interior pages.
   Loaded after css/style.css on every page. style.css owns the tokens, the
   type scale and the tide; this file owns the six-item nav and the components
   the interior pages are built from. Nothing here redefines a token.
   (css/_wave.css is NOT linked anywhere — it is dead. Live tokens: style.css.) */

/* --- nav: the menu ------------------------------------------------------- */
/* .nav is already a flex row (style.css). It gains a third child: the panel.
   Desktop  — the disclosure is hidden and the panel is a plain bar.
   Mobile   — the disclosure is a real <summary> toggle and the panel wraps to
              its own full-width row, shown only while the details is open.
   No script in either state; the toggle works with JS disabled. */
.nav{flex-wrap:wrap;row-gap:0}

.nav__panel{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.nav__list{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);
  list-style:none;margin:0;padding:0}
.nav__item{text-decoration:none;display:inline-block;padding:6px 0;
  color:var(--abyss);opacity:.72;
  border-bottom:1px solid transparent;
  transition:opacity .25s var(--ease),border-color .25s var(--ease)}
.nav__item:hover,.nav__item:focus-visible{opacity:1}
/* The current page is marked by weight and a rule, never by color alone. */
.nav__item[aria-current="page"]{opacity:1;font-weight:500;
  border-bottom-color:var(--flow-deep)}
.nav__link{white-space:nowrap;color:var(--flow-deep);font-weight:500}

/* Submerged: the bar goes underwater on the homepage and the menu goes with it. */
.nav.is-submerged .nav__item{color:var(--surface)}
.nav.is-submerged .nav__item[aria-current="page"]{border-bottom-color:var(--flow)}

/* The toggle. Hidden entirely above the breakpoint — on desktop the panel is
   always in flow, so the disclosure has nothing to disclose. */
.nav__disclosure{display:none}
/* display stays list-item — see the note in tools/_nav.html.
   Height is pinned to the logo's: --nav-h is derived from --nav-logo-h, and
   the hero's top padding is derived from --nav-h. A toggle even a few pixels
   taller than the logo makes the real bar taller than the calculation and
   the fixed nav clips the top of the display type underneath it. */
.nav__toggle{display:list-item;list-style:none;cursor:pointer;
  height:var(--nav-logo-h);padding:0;color:var(--abyss)}
.nav__toggle::marker{content:""}
.nav__toggle::-webkit-details-marker{display:none}
.nav__toggle-inner{display:inline-flex;align-items:center;gap:9px;height:100%}
.nav__bars{display:inline-block;width:17px;height:11px;position:relative}
.nav__bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.nav__bars i:nth-child(1){top:0}
.nav__bars i:nth-child(2){top:50%;margin-top:-.75px}
.nav__bars i:nth-child(3){bottom:0}
.nav__disclosure[open] .nav__bars i:nth-child(1){transform:translateY(4.75px) rotate(45deg)}
.nav__disclosure[open] .nav__bars i:nth-child(2){opacity:0}
.nav__disclosure[open] .nav__bars i:nth-child(3){transform:translateY(-4.75px) rotate(-45deg)}
.nav.is-submerged .nav__toggle{color:var(--surface)}

@media(max-width:900px){
  .nav__disclosure{display:block}
  /* Closed by default; the sibling combinator is what reveals it. The panel is
     deliberately NOT inside <details> — forcing a details' own children visible
     on desktop means overriding UA slot styling, which is not dependable. */
  .nav__panel{display:none}
  .nav__disclosure[open] ~ .nav__panel{
    display:flex;flex-direction:column;align-items:flex-start;
    /* Margins are outside a flex item's basis, so the bleed has to be in the
       basis or the panel comes up one gutter short on the right. */
    flex-basis:calc(100% + var(--gut) * 2);gap:0;
    margin:var(--nav-pad) calc(var(--gut) * -1) calc(var(--nav-pad) * -1);
    padding:4px var(--gut) 14px;
    /* A short landscape phone must still be able to reach the last item. */
    max-height:calc(100vh - var(--nav-h) - 12px);overflow-y:auto;
    /* The panel's negative bottom margin carries it past the bar's own
       padding box, so it has to paint its own ground or page content shows
       through the last strip above the bar's rule. */
    background:var(--surface);
    border-top:1px solid var(--rule-l)}
  .nav.is-submerged .nav__disclosure[open] ~ .nav__panel{background:var(--abyss)}
  .nav.is-submerged .nav__disclosure[open] ~ .nav__panel{border-top-color:var(--rule-d)}
  .nav__list{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  .nav__li{width:100%}
  /* 44px minimum touch target, and the whole row is the target, not the word. */
  .nav__item{display:block;width:100%;padding:13px 0;opacity:.85;
    border-bottom:1px solid var(--rule-l)}
  .nav.is-submerged .nav__item{border-bottom-color:var(--rule-d)}
  .nav__item[aria-current="page"]{border-bottom-color:var(--flow-deep)}
  .nav__link{padding:15px 0 4px}
}
@media (prefers-reduced-motion:reduce){
  .nav__bars i{transition:none}
}



/* --- footer sits on the interior pages too ------------------------------- */

/* --- buttons ------------------------------------------------------------- */
/* The hero pair sits BELOW the waterline, on abyss. Cyan is only ever a fill
   with abyss text on it, never small cyan type on the light ground. */
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;
  padding:24px var(--gut) 0;position:relative;z-index:2}
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 24px;border-radius:999px;text-decoration:none;
  border:1px solid transparent;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease)}
.btn--primary{background:var(--flow);color:var(--abyss);font-weight:500}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--surface)}
.btn--ghost{border-color:var(--rule-d);color:var(--surface)}
.btn--solid{background:var(--abyss);color:var(--surface);font-weight:500}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--flow-deep)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-2)}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--flow);color:var(--flow)}
@media(max-width:440px){
  /* Two full-width rows read better than two cramped pills. */
  .btn{width:100%}
}

/* The tide clone repaints every .mono label in cyan. On the filled button that
   is cyan text on a cyan ground, so the buttons carry their own color into the
   clone too. The hero CTA sits below the waterline, so the clone is the copy
   that is actually seen there. */
html.js .tide__inner .btn--primary{color:var(--abyss)}
html.js .tide__inner .btn--ghost{color:var(--surface)}

/* --- the design targets, now inside THE SYSTEM -------------------------- */
/* On .deep ground, so the base colours are the right ones and there is no
   air state to write: this block is never above the waterline. */
.speclist__label{margin-top:var(--sp-3)}
.speclist{list-style:none;margin:var(--sp) 0 0;padding:0;
  display:grid;gap:1px;background:var(--rule-d);
  border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d)}
@media(min-width:761px){.speclist{grid-template-columns:repeat(2,1fr)}}
.speclist__i{padding:var(--sp-2) var(--sp-2);
  font-size:15.5px;font-weight:500;line-height:1.55;opacity:.86;
  background:var(--abyss)}
/* The figure is the emphasis; the qualifier rides in the same sentence. */
.speclist__i strong{font-weight:900;opacity:1}
/* In the tide clone the block is repainted with the rest of the submerged
   page; keep the rules and ground reading as they do on the real page. */

/* --- sections awaiting copy ---------------------------------------------- */
/* Deliberately loud. The structure ships so the site is navigable and
   reviewable, but an unwritten section must never be mistakable for a
   finished one. tools/build.py --ready counts these and refuses to call the
   site launchable while any remain. */
/* One quiet marker per section. Twenty-two loud banners read as broken
   rather than in progress, so the page-level notice carries the weight and
   these just mark the spot. --ready still counts these, so the count stays
   section-accurate. */
.pending{display:block;margin-top:var(--sp);padding:2px 0 2px 15px;
  border-left:2px dashed var(--flow-deep);color:var(--flow-deep);
  font-family:"Chivo Mono",monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;line-height:1.7;opacity:.85}

/* The page-level notice: said once, plainly, at the top. */
.pagenote{margin-top:var(--sp-2);padding:15px 18px;
  border:1px solid var(--rule-d);background:rgba(0,216,224,.07);
  color:var(--surface);font-size:14.5px;font-weight:500;line-height:1.6;
  max-width:62ch}
.pagenote strong{font-weight:900;color:var(--flow)}


/* --- the hero's headline ------------------------------------------------- */
/* Sits directly under the lockup, below the waterline, so it is surface type
   on abyss. Sized well under --l2 so it reads as the message and the lockup
   stays the title. One span per sentence: three stacked lines, never a
   wrapped paragraph. */
.hero__hed{padding:var(--sp-2) var(--gut) 0;
  position:relative;z-index:2;color:var(--surface);
  font-weight:900;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(21px,2.35vw,36px);max-width:26ch}
.hero__hed span{display:block}
@media(max-width:520px){
  /* At this width a 26ch measure wraps mid-sentence; let each run its own
     line and tighten the stack instead. */
  .hero__hed{max-width:none;font-size:clamp(17px,4.85vw,22px);line-height:1.16}
}


/* --- the in-air state for everything added to the hero -------------------- */
/* Three states, the same convention style.css uses:
     base              the no-JS shape - .hero__water paints abyss behind, so
                       the type is light;
     html.js           the REAL page, which with the tide running is ink on
                       mineral because the static water is hidden;
     html.js .tide__inner   the clone, repainted submerged.
   Setting only the base is what made these vanish: above the waterline the
   real page is light mineral and the type was still --surface. */
html.js .hero__hed{color:var(--abyss)}
html.js .tide__inner .hero__hed{color:var(--surface)}


html.js .btn--ghost{border-color:var(--rule-l);color:var(--abyss)}
html.js .btn--ghost:hover,html.js .btn--ghost:focus-visible{
  border-color:var(--flow-deep);color:var(--flow-deep)}
html.js .tide__inner .btn--ghost{border-color:var(--rule-d);color:var(--surface)}
/* The filled button needs no air variant: cyan is a fill with abyss text on
   it, which is legal on either ground. */

/* --- the descent --------------------------------------------------------- */
/* Three breaths, not eight blocks: the surface, what this is, and the way
   down. The air between them is the point — it is what makes this read as a
   descent rather than a wall of copy. */
.hero__first{padding-bottom:var(--sp-3)}
.hero__second{padding-top:var(--sp-3)}

/* On a wide screen the message and the explanation sat one under the other in
   a column down the left, leaving ~45% of the page empty and a tall dead gap
   between them. Side by side they fill the measure and the gap disappears. */
@media(min-width:1180px){
  .hero__band{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    align-items:start;column-gap:var(--sp-4);padding:0 var(--gut)}
  .hero__hed{padding:0;max-width:22ch;align-self:center}
  .hero__second{padding-top:0}
  .hero__second .sub{padding:var(--sp-2) 0 0;max-width:none}
  .hero__cta{padding:var(--sp-2) 0 0}
}
.hero__third{padding-top:var(--sp-4);position:relative}
@media(max-width:760px){
  /* The vh terms are generous on a desktop viewport and become dead scroll on
     a phone, where .sub already contributes 52px of its own. */
  .hero__first{padding-bottom:clamp(18px,3vh,34px)}
  .hero__second{padding-top:clamp(20px,3.2vh,38px)}
  .hero__third{padding-top:clamp(32px,5vh,60px)}
}

/* The sounding line and its terminal mark used to run here: a 1px plumb down
   the hero at half the gutter. It sat off the text grid and read as a stray
   line rather than a guide, so it is gone. */

.hero__third::before{bottom:calc(100% - var(--sp-4))}
html.js .hero__second::before,html.js .hero__third::before{
  background:linear-gradient(to bottom,
    rgba(0,96,111,0) 0%, rgba(0,96,111,.5) 60%, rgba(0,96,111,.65) 100%)}
html.js .hero__third::after{background:var(--flow-deep);
  box-shadow:0 0 0 4px rgba(0,96,111,.14)}
html.js .tide__inner .hero__second::before,
html.js .tide__inner .hero__third::before{
  background:linear-gradient(to bottom,
    rgba(0,216,224,0) 0%, rgba(0,216,224,.55) 60%, rgba(0,216,224,.7) 100%)}
html.js .tide__inner .hero__third::after{background:var(--flow);
  box-shadow:0 0 0 4px rgba(0,216,224,.16)}
@media(max-width:520px){
  /* The gutter is too narrow to carry a line beside the type. */
  .hero__second::before,.hero__third::before,.hero__third::after{display:none}
}

/* --- interior pages ------------------------------------------------------ */
/* The homepage's waterline falls BETWEEN the two words of the lockup - the
   near-surface wash lands in the gap, and neither word is ever cut. Putting
   the surface through a single page name put that wash straight onto the
   glyphs and destroyed them.
   So the page name stands wholly in air and the water begins beneath it, which
   is the same relationship WATER, has to the surface. And the surface is not
   computed at all: it is the top edge of the block below. Add a rail, remove
   one, resize the type - the water follows, because it is a background, not an
   offset. */
.phero{--l1:max(24px,calc((100vw - var(--gut) * 2) / var(--pt-em,7)));
  display:block;padding:0;overflow-x:clip}

.phero__air{position:relative;
  padding:calc(var(--nav-h) + var(--sp-3)) var(--gut) var(--sp-3)}
.phero__title{letter-spacing:-.045em;position:relative;z-index:2}
.phero__pos{margin-bottom:var(--sp);color:var(--abyss);opacity:.72}
.phero__n{color:var(--flow-deep)}

/* The mark crosses the surface, as it does on the homepage. */
.phero .hero__mark{position:absolute;z-index:0;margin:0;opacity:.16;
  right:calc(var(--gut) * -0.4);bottom:calc(var(--mark-h) * -0.34);
  pointer-events:none}

/* THE SURFACE. A background edge, not a calculation. */
.phero__under{position:relative;background:var(--abyss);color:var(--surface);
  padding:var(--sp-3) var(--gut) var(--sp-4)}
.phero__under::before{content:"";position:absolute;left:0;right:0;bottom:100%;
  height:clamp(30px,3.6vw,62px);pointer-events:none;
  background:var(--wave) center bottom/100% 100% no-repeat}

/* --- the interior surface, alive ----------------------------------------- */
/* The homepage's tide runs here too. The static edge above is the page's shape
   with no JS and the element main.js measures to place the live line; once the
   tide takes over, the crest, meniscus and refraction draw that same surface
   and this one has to go, or the page carries two waterlines a pixel apart. */
html.tide-live .phero__under::before{visibility:hidden}

/* Only the block's GROUND steps aside - the water is what paints it now. I
   hid the block itself first, which took the page index with it and left a
   dead band under the title. */
html.tide-live .phero__under{background:transparent;color:var(--abyss)}

/* The index reads in air above the line and in the water below it. The water
   rules have to be written html.js .tide__inner, the way every other pair in
   these files is: .tide__inner alone loses to html.tide-live on specificity,
   and the clone is inside that html - which painted the submerged links at
   --abyss, dark on dark, invisible rather than merely dim. */
html.tide-live .pindex__label,html.tide-live .pindex__n{color:var(--flow-deep)}
html.tide-live .pindex__li{border-top-color:var(--rule-l)}
html.js .tide__inner .phero__under{background:transparent;color:var(--surface)}
html.js .tide__inner .pindex__label,
html.js .tide__inner .pindex__n{color:var(--flow)}
html.js .tide__inner .pindex__li{border-top-color:var(--rule-d)}

/* The title stands in air and the water begins beneath it, so the band under
   it only needs to hold the index - not the homepage's full descent. */
html.tide-live .phero__under{padding-bottom:var(--sp-2)}

/* Above the line the mark is a faint dark ghost on light ground; below it, the
   same rule would leave it dark-on-dark and it would vanish at exactly the
   moment it crosses. Read it as light in the water, the way the title does. */
html.js .tide__inner .phero .hero__mark{color:var(--flow);opacity:.2}

.phero__line{max-width:54ch;font-size:clamp(17px,1.5vw,21px);font-weight:500;
  line-height:1.55}

.pindex__label{color:var(--flow)}
.pindex__list{list-style:none;margin:var(--sp) 0 0;padding:0;
  display:grid;gap:0 var(--sp-3)}
@media(min-width:620px){.pindex__list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.pindex__list{grid-template-columns:repeat(4,1fr)}}
.pindex__li{border-top:1px solid var(--rule-d)}
.pindex__link{display:flex;align-items:baseline;gap:11px;padding:13px 0;
  text-decoration:none;color:inherit;font-size:15.5px;font-weight:500;
  line-height:1.35;transition:color .25s var(--ease)}
.pindex__n{font-family:"Chivo Mono",monospace;font-size:10px;
  letter-spacing:.16em;flex:none;color:var(--flow)}
.pindex__link:hover,.pindex__link:focus-visible{color:var(--flow)}

/* --- the page's content, read underwater --------------------------------- */
/* Interior pages have no section lead to clear, so they need less of an
   approach than the homepage's THE SYSTEM does. */
.phero ~ .deep--system{padding-top:var(--sp-4)}

/* DEPTH, and only where something uses it. The tide needs a dark run taller
   than the viewport to rise through and drain inside, so the section opens up
   to give it one - split above and below the cards so they sit IN the dark
   field rather than clinging to its top edge.
   Keyed on the tide scaffold actually being in the page, not on the page being
   an interior one: only Company carries it, and on the others this was half a
   screen of void at each end of the section with nothing moving through it. */
body:has(#tide) .phero ~ .deep--system{padding-top:clamp(140px,30vh,360px)}
/* DEPTH, and it is structural rather than decorative. The tide can only rise
   and drain the way it does on the homepage while the dark run it happens in
   is taller than the viewport - otherwise the light section below is already
   on screen before the climb has finished, and water ends up lying across it
   as a pale band. Company's run was 743px against an 894px viewport, which is
   why the rise had nowhere to go. Viewport-relative so the relationship holds
   at any window height, and it reads as the deep the water climbs through. */
body:has(#tide) .phero ~ .deep--system .deep__inner:last-of-type{
  padding-bottom:clamp(160px,32vh,400px)}
/* A cited outside fact, not a caveat about ourselves. Quieter than a note and
   marked as attribution rather than as a warning. */
.pblock__src{margin-top:calc(var(--sp) * 0.6);max-width:60ch;
  font-family:"Chivo Mono",monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;line-height:1.75;color:var(--flow);opacity:.72}
.creed .pblock__src,.pclose .pblock__src{color:var(--flow-deep)}

.pblock__note{margin-top:var(--sp-2);color:var(--flow);max-width:60ch;
  font-size:14.5px;font-weight:500;line-height:1.6;
  border-left:2px solid var(--flow);padding-left:15px}
.deep .pending{color:var(--flow);border-left-color:var(--flow)}

/* --- surfacing for the ask ----------------------------------------------- */
/* This closes every page, and it is the same gesture the homepage's ask makes,
   so it is centred the same way: eyebrow, statement, button, stacked on the
   axis. Side-by-side put the two a whole viewport apart on a wide screen;
   a centred stack cannot drift however wide it gets. */
.pclose{position:relative;overflow:hidden;
  padding:var(--sp-4) var(--gut);
  border-top:1px solid var(--rule-l);text-align:center}
.pclose__in{position:relative;z-index:1}
.pclose__k{color:var(--flow-deep)}
.pclose__head{margin:calc(var(--sp) * 0.4) auto 0;max-width:16ch}
.pclose .btnrow{margin-top:var(--sp-2);justify-content:center}
/* The mark, cropped by the band's own edge - the device the hero uses. */
/* Behind the stack, on the same axis - off to one side it fought the centre.
   Faded out rather than cropped: the band's rules were slicing straight
   through the loop. A radial mask lets it fall away before it reaches any
   edge, which is the device .deep--system and .colophon already use on this
   mark, and it holds at any band height rather than depending on one. */
.pclose__mark{position:absolute;z-index:0;pointer-events:none;
  left:50%;top:50%;width:min(58vw,660px);height:auto;opacity:.1;
  transform:translate(-50%,-50%) rotate(var(--mark-tilt,-19deg));
  -webkit-mask-image:radial-gradient(closest-side,#000 38%,transparent 96%);
  mask-image:radial-gradient(closest-side,#000 38%,transparent 96%)}


/* --- the subpage rail ---------------------------------------------------- */
/* The homepage has no position rail. A numbered one reads at a glance as
   "one of a set", which is the cue that was missing. */
.phero__pos{margin-bottom:var(--sp);color:var(--abyss);opacity:.72}
.phero__n{color:var(--flow-deep)}
html.js .tide__inner .phero__pos{color:var(--surface)}
html.js .tide__inner .phero__n{color:var(--flow)}

/* With the menu collapsed there was nothing on screen saying which page you
   were on - the only cue was an underline inside the closed menu. */
.nav__here{display:none}
@media(max-width:900px){
  .nav__here{display:inline-block;margin-left:12px;padding-left:12px;
    border-left:1px solid var(--rule-l);color:var(--abyss);opacity:.7}
  .nav.is-submerged .nav__here{color:var(--surface);border-left-color:var(--rule-d)}
}
@media(max-width:420px){.nav__here{display:none}}

/* --- the homepage hero's own spacing on the shared scale ----------------- */
/* .sub ships with margin-top AND padding-top plus its rule, which stacked on
   top of the breath padding and left a gap twice the size of every other. */
.hero__second .sub{margin-top:0;padding-top:var(--sp-2)}

/* Too much air under the last block in the deep section: style.css pads the
   last .deep__inner and the interior pages padded their last .pblock as well. */
.deep--system .deep__inner:last-of-type{padding-bottom:var(--sp-4)}

/* The current-page label is the only wayfinding when the menu is shut, so it
   should survive to the narrowest real phone. */
@media(max-width:420px){.nav__here{display:inline-block}}
@media(max-width:360px){.nav__here{display:none}}

/* --- interior content: two columns on a wide screen ---------------------- */
/* Everything sat in a column down the left with the right half empty. The
   homepage already solves this in .section__lead - the section name holds the
   left, the prose runs down the right - so interior blocks use the same
   arrangement rather than inventing a second one. The name is sticky: it stays
   with you while its section scrolls past. */
@media(min-width:1000px){
      .pblock > :not(.pblock__head){grid-column:2}
  .pblock > .pblock__body:first-of-type,
  .pblock > .pending:first-of-type{margin-top:0}
    }
@media (prefers-reduced-motion:reduce){
  }

/* --- deep-link landings -------------------------------------------------- */
/* The bar is fixed, so anything a #hash lands on has to clear it. Applied to
   every hash target on the site rather than to one section, so a new anchor
   cannot be added without it. */
:target,
.seg,
#contact,
#inquiry{scroll-margin-top:calc(var(--nav-h) + var(--sp-2))}

/* =====================================================================
   PER-PAGE DEVICES
   Six shapes, one vocabulary. The variation comes from what each page is
   about — hardware, process, segments, sequence, a statement, an inventory —
   not from decoration. Every device is built from parts the site already has.
   ===================================================================== */

/* --- TECHNOLOGY: a process spine ----------------------------------------- */
/* Four processes in sequence. The route diagram the homepage builds once and
   never reuses becomes the page's index: each stop IS a section link. The
   Technology instance is lit without script, so JS-off matches JS-on. */
.proc .schem{height:auto;margin:var(--sp) 0 0}
.proc .schem__track{position:static;height:1px;background:var(--rule-d)}
.proc .schem__nodes{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
.proc .schem__node{position:static;transform:none;padding-top:var(--sp)}
.proc .dot{width:13px;height:13px;border-radius:50%;margin:0 0 var(--sp) 0;
  background:var(--flow);box-shadow:0 0 0 6px rgba(0,216,224,.12)}
.proc__link{display:block;text-decoration:none;color:var(--surface)}
.proc__k{display:block;
  font-family:"Chivo Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--flow)}
.proc__t{display:block;font-size:16px;font-weight:900;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.15;margin-top:.45em}
.proc__link:hover .proc__t,.proc__link:focus-visible .proc__t{color:var(--flow)}
@media(max-width:760px){
  .proc .schem__nodes{grid-template-columns:repeat(2,1fr)}
}

/* --- SOLUTIONS: three segments, side by side ----------------------------- */
/* Segments are compared, not read in order, so they sit in parallel columns
   with a shared baseline rather than stacking. */
.segs{display:grid;gap:1px;background:var(--rule-d);
  border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d)}
@media(min-width:760px){.segs--4,.segs--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.segs--3{grid-template-columns:repeat(3,1fr)}}
/* Four cards stay two-up: at three or four across, a spec table's label column
   and its value collide. */
.seg{background:var(--abyss);padding:var(--sp-2)}
.seg__n{font-family:"Chivo Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--flow)}
.seg__h{font-weight:900;text-transform:uppercase;font-size:clamp(22px,2.4vw,32px);
  line-height:1.02;letter-spacing:-.02em;margin-top:.5em}
.seg__b{margin-top:var(--sp);font-size:15.5px;font-weight:500;opacity:.8;
  line-height:1.6}
.seg__b + .seg__b{margin-top:var(--sp)}
.seg .tbl{margin-top:var(--sp);border-top-color:var(--rule-d)}
.seg .row{grid-template-columns:minmax(0,7.5em) minmax(0,1fr);gap:14px;
  padding:12px 0;border-bottom-color:var(--rule-d)}
.seg .rowk{font-size:11px}
.seg .rowv{font-size:14.5px;padding-right:0}
.seg .pblock__src,.seg .pblock__note{max-width:none}
.seg .pblock__note{margin-top:var(--sp)}

/* --- COMPANY: a statement ------------------------------------------------ */
/* One page, one thing to say. No index, no blocks, no columns - the mission
   set as display type in air, and the principles as rows beneath it. */
.creed{padding:var(--sp-5) var(--gut)}
.creed__k{color:var(--flow-deep)}
.creed__say{margin-top:var(--sp-2);max-width:20ch;
  font-weight:900;text-transform:uppercase;letter-spacing:-.032em;
  line-height:.94;font-size:clamp(32px,5.2vw,74px)}
.creed .tbl{margin-top:var(--sp-4);border-top-color:var(--rule-l);
  max-width:74ch}
.creed .row{border-bottom-color:var(--rule-l)}
.creed .rowk{color:var(--flow-deep)}


/* --- the quad: four cards on a dark section ------------------------------
   The interior pages use .segs on mineral. The homepage runs dark from the
   collision onward, so the same idea needs its own colours rather than a
   variant of a light component. Four across on desktop, two up on tablet,
   stacked on a phone. */
.quad{display:grid;gap:1px;background:rgba(233,242,241,.14);
  border-top:1px solid rgba(233,242,241,.14);
  border-bottom:1px solid rgba(233,242,241,.14);
  margin-top:var(--sp-3)}
@media(min-width:640px){.quad{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.quad{grid-template-columns:repeat(4,1fr)}}
.quad__c{background:var(--abyss);padding:var(--sp-2) var(--sp)}
.quad__k{font-family:"Chivo Mono",monospace;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--flow);line-height:1.5}
.quad__f{font-weight:900;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(2rem,3.4vw,2.9rem);margin-top:.5rem;color:var(--surface)}
.quad__f small{font-size:.42em;font-weight:700;letter-spacing:.02em;
  display:block;margin-top:.5em;opacity:.72}
.quad__b{font-size:clamp(.94rem,1.05vw,1.02rem);line-height:1.6;
  margin-top:.9rem;opacity:.8;max-width:32ch}

/* The creed carries a narrative now, not only a statement. */
.creed__body{max-width:62ch;margin-top:var(--sp-2)}
.creed__body .body + .body{margin-top:var(--sp)}
.creed__body .btnrow{margin-top:var(--sp-2)}

/* The founders' form: same rhythm as the brief one, with room to write. */
.cwrap{margin-top:var(--sp-3);max-width:72ch}
.frow--tall{align-items:start}
.field__input--area{resize:vertical;min-height:7.5em;font:inherit;line-height:1.55}

/* .deep only sets colour; the padding lives on .deep--system. Anything else
   dark needs its own, or it opens flush against the section above it. */
.deep--pad{padding:clamp(72px,9vw,110px) 0 clamp(64px,8vw,96px)}

/* The statement stays short. What used to run on inside it sits here instead,
   at a size a person actually reads. */
.creed__sub{font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.45;
  font-weight:500;max-width:34ch;margin-top:var(--sp);opacity:.82}

/* --- the admin bar ------------------------------------------------------
   Only the twins under /admin load js/site-edit.js, so none of this exists on
   a public page. Shares the deck editor's look, with a page switcher. */
.edbar{position:fixed;left:50%;translate:-50% 0;bottom:1.2vh;z-index:200;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center;
  max-width:min(96vw,72rem);padding:.5rem .6rem;border-radius:.55rem;
  background:rgba(4,40,58,.95);border:1px solid rgba(0,216,224,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:"Chivo Mono",monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--surface);
  box-shadow:0 .4rem 1.6rem rgba(0,0,0,.45)}
.edbar__b{font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:var(--surface);background:transparent;cursor:pointer;
  border:1px solid rgba(233,242,241,.28);border-radius:.3rem;
  padding:.34rem .55rem;text-decoration:none;line-height:1;
  transition:border-color .2s,color .2s}
.edbar__b:hover{border-color:var(--flow);color:var(--flow)}
.edbar__b:focus-visible{outline:2px solid var(--flow);outline-offset:2px}
.edbar__b:disabled{opacity:.45;cursor:default}
.edbar__b--on[aria-pressed="true"]{border-color:var(--flow);color:var(--flow);
  background:rgba(0,216,224,.12)}
.edbar__b--pub{border-color:rgba(0,216,224,.55);color:var(--flow)}
.edbar__b--pub:hover{background:rgba(0,216,224,.14)}

/* THE SAVE. Deliberately the largest thing in the bar and the only filled one:
   copy autosaves to this browser as you type, which is invisible, so the bar
   has to be what says whether the change has actually gone anywhere. It states
   its own state rather than needing to be read alongside the status line. */
.edbar__b--save{display:inline-flex;align-items:center;justify-content:center;
  font-size:.76rem;letter-spacing:.14em;padding:.6rem 1.05rem;
  border-radius:.42rem;min-width:11.5rem;line-height:1;
  transition:background .2s,border-color .2s,color .2s,opacity .2s}
.edbar__b--save[data-state="clean"]{opacity:.45}
.edbar__b--save[data-state="dirty"]{opacity:1;
  background:var(--flow);border-color:var(--flow);color:var(--abyss);
  animation:edpulse 2.6s var(--ease) infinite}
.edbar__b--save[data-state="dirty"]:hover{background:#5CEDF2;border-color:#5CEDF2;
  color:var(--abyss)}
.edbar__b--save[data-state="saving"]{opacity:1;color:var(--flow);
  background:rgba(0,216,224,.18);border-color:rgba(0,216,224,.55)}
.edbar__b--save[data-state="saved"]{opacity:1;background:#7BE495;
  border-color:#7BE495;color:var(--abyss)}
@keyframes edpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,216,224,.5)}
  50%{box-shadow:0 0 0 .55rem rgba(0,216,224,0)}}
@media (prefers-reduced-motion:reduce){
  .edbar__b--save[data-state="dirty"]{animation:none}}
.edbar__b--go{border-color:var(--flow);color:var(--abyss);background:var(--flow)}
.edbar__s{opacity:.62;transition:opacity .3s,color .3s}
.edbar__s.is-flash{opacity:1;color:var(--flow)}
.edbar__sp{width:.3rem}
.edbar__nav{display:flex;gap:.15rem;flex-wrap:wrap}
.edbar__p{color:var(--surface);opacity:.55;text-decoration:none;
  padding:.34rem .42rem;border-radius:.3rem;line-height:1}
.edbar__p:hover{opacity:1;color:var(--flow)}
.edbar__p.is-here{opacity:1;color:var(--flow);background:rgba(0,216,224,.12)}

html.is-editing [data-e]{border-radius:.15em;
  transition:background .18s,box-shadow .18s}
html.is-editing [data-e]:hover{background:rgba(0,216,224,.10);
  box-shadow:0 0 0 .25em rgba(0,216,224,.10)}
html.is-editing [data-e]:focus{outline:none;background:rgba(0,216,224,.16);
  box-shadow:0 0 0 .25em rgba(0,216,224,.16)}
/* The bar sits over the page; give the foot room so nothing hides behind it. */
html.is-editing body{padding-bottom:4.5rem}
@media print{.edbar{display:none}}
/* A page that is built and editable but not linked from the site. */
.edbar__p.is-off{opacity:.34}
.edbar__p.is-off::after{content:"\00b7 hidden";margin-left:.3em;font-size:.85em;opacity:.7}

/* A message box is not a capsule. The single-line fields stay pills; a
   multi-line one takes a radius that matches its shape instead of fighting it,
   and its label sits at the top of the box rather than centred against it. */
.frow--tall .rowv{border-radius:1.35rem;padding-top:clamp(13px,1.4vw,16px)}
.frow--tall .rowk{margin-left:22px}

/* The admin pill. Deliberately quiet: a way in for two people, not a feature
   of the site. It brightens on hover and focus so it is still reachable. */
.footer__admin{margin-left:auto;align-self:center;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;line-height:1;
  padding:5px 11px;border-radius:999px;
  color:var(--surface);opacity:.3;
  border:1px solid rgba(233,242,241,.3);
  transition:opacity .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.footer__admin:hover{opacity:.95;color:var(--flow);border-color:var(--flow)}
.footer__admin:focus-visible{opacity:1;outline:2px solid var(--flow);outline-offset:2px}


/* --- the founders' ask --------------------------------------------------- */
/* 17ch is the right measure for a two-word head. "Reach out to the founders."
   is twenty-six characters, so it broke three ways and left THE stranded on a
   line of its own. Given the full measure it sets on one line and only wraps
   once the viewport is genuinely too narrow for it. */
/* The head was never the constraint - .contact__lead caps the whole lead at
   52ch, which is 622px, and no type size fits twenty-six characters of display
   into that. The lead opens up and the paragraph keeps its own measure. */
body[data-page="company"] .contact__lead{max-width:min(94vw,1280px)}
body[data-page="company"] .contact__head{max-width:none;
  font-size:clamp(26px,3.9vw,58px)}
/* Held to one line only where one line fits. On a phone twenty-six characters
   of display type across a single line would either overflow the page or shrink
   past reading size, so below this it wraps the way it always did. */
@media(min-width:740px){
  body[data-page="company"] .contact__head{text-wrap:nowrap}
}
body[data-page="company"] .contact__sub{max-width:52ch;margin-inline:auto}