/* ==========================================================================
   Cloud-Zero Communications
   Set as a technical service schedule: steel + ink, one signal accent,
   crisp 0px geometry, Archivo display / IBM Plex Sans body / Plex Mono data.
   ========================================================================== */

/* ---------- Faces ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('../assets/fonts/archivo.woff2') format('woff2');}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('../assets/fonts/plex-sans.woff2') format('woff2');}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/plex-mono-500.woff2') format('woff2');}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/plex-mono-600.woff2') format('woff2');}

/* ---------- Tokens ----------
   One dominant muted tone (steel), one sharp contrast pair (ink / mist),
   one intentional accent (signal cyan, drawn from the logo, used only for
   live and interactive states the way a link LED is used on a switch).      */
:root{
  --ink:#0B0E11;
  --ink-2:#161C23;
  --ink-3:#232C35;
  --steel:#6B7683;
  --steel-2:#4A5561;
  --steel-light:#9BA6B2;
  --mist:#EDEFF1;
  --mist-2:#E3E7EA;
  --paper:#FFFFFF;
  --signal:#00B2CE;
  --signal-ink:#00323A;
  --line:#D5DADF;
  --line-dark:#2A323B;

  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Plex Sans',system-ui,sans-serif;
  --font-mono:'Plex Mono',ui-monospace,Menlo,monospace;

  --fs-hero:clamp(2.7rem,6.6vw,5.6rem);
  --fs-h1:clamp(2.1rem,4.6vw,3.6rem);
  --fs-h2:clamp(1.6rem,3.1vw,2.4rem);
  --fs-h3:1.15rem;
  --fs-lede:clamp(1.02rem,1.35vw,1.18rem);

  --shell:1280px;
  --gut:clamp(1.15rem,4vw,3rem);
  --bay:clamp(4.5rem,9vw,8rem);
  /* Kept for reference only. Do NOT use inside a transition or animation
     shorthand: a var() there makes the longhands pending-substitution values,
     and Firefox will not start a transition from those. Write it literally. */
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:1rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
strong,b{font-weight:600}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.02;letter-spacing:-.035em}
h3,h4{font-weight:700;letter-spacing:-.02em}
::selection{background:var(--signal);color:var(--ink)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* ---------- Shell / rhythm ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.bay{padding-block:var(--bay)}
.bay--tight{padding-block:calc(var(--bay) * .55)}
.bay--flush-top{padding-top:0}
.ink-bay{background:var(--ink);color:var(--mist)}
.mist-bay{background:var(--mist)}

/* Section marker: mono label plus a hairline rule that runs to the edge */
.mark{display:flex;align-items:center;gap:1rem;margin-bottom:clamp(1.8rem,3.5vw,3rem)}
.mark__id{
  font-family:var(--font-mono);font-weight:500;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
  white-space:nowrap;
}
.mark__rule{flex:1;height:1px;background:var(--line);min-width:1.5rem}
.ink-bay .mark__rule{background:var(--line-dark)}

.lede{font-size:var(--fs-lede);color:var(--steel-2);max-width:56ch}
.ink-bay .lede{color:var(--steel-light)}

/* ---------- Controls ---------- */
.act{
  --fill:var(--ink);
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-mono);font-weight:500;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:1.05rem 1.6rem;border:1px solid var(--ink);background:transparent;color:var(--ink);
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .3s cubic-bezier(.2,.7,.2,1),border-color .3s cubic-bezier(.2,.7,.2,1);
}
.act::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);
  transform:scaleX(0);transform-origin:left center;transition:transform .38s cubic-bezier(.2,.7,.2,1);
}
.act:hover::before,.act:focus-visible::before{transform:scaleX(1)}
.act:hover,.act:focus-visible{color:var(--paper)}
.act:active{transform:translateY(1px)}
.act svg{width:15px;height:15px;flex:none;transition:transform .38s cubic-bezier(.2,.7,.2,1)}
.act:hover svg{transform:translateX(4px)}

.act--solid{background:var(--ink);color:var(--paper);--fill:var(--signal)}
.act--solid:hover,.act--solid:focus-visible{color:var(--ink);border-color:var(--signal)}

.act--ghost-light{border-color:rgba(237,239,241,.32);color:var(--mist);--fill:var(--mist)}
.act--ghost-light:hover,.act--ghost-light:focus-visible{color:var(--ink);border-color:var(--mist)}

/* Inline text link: the rule thickens and takes the accent */
.tlink{
  text-decoration:underline;text-underline-offset:.28em;
  text-decoration-thickness:1px;text-decoration-color:var(--line);
  transition:text-decoration-thickness .2s cubic-bezier(.2,.7,.2,1),text-decoration-color .2s cubic-bezier(.2,.7,.2,1);
}
.tlink:hover{text-decoration-thickness:3px;text-decoration-color:var(--signal)}


/* ---------- Masthead ---------- */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background-color:rgba(255,255,255,0);
  border-bottom:1px solid rgba(213,218,223,0);
  transition:background-color .3s cubic-bezier(.2,.7,.2,1),border-bottom-color .3s cubic-bezier(.2,.7,.2,1);
  padding-block:.7rem;
}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{position:relative;display:flex;align-items:center;flex:none;z-index:2}
.brand img{height:70px;width:auto;transform-origin:left center;transform:translateY(3.9%);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s cubic-bezier(.2,.7,.2,1);backface-visibility:hidden}
/* Both marks are always present and stacked; swapping them with display
   cannot animate, so they cross-fade on the same curve as the background. */
.brand .on-dark{opacity:1}
.brand .on-light{position:absolute;left:0;top:0;opacity:0}
.nav{display:flex;align-items:center;gap:clamp(1.4rem,3vw,2.6rem)}
.nav__list{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.1rem)}
.nav__list a{
  position:relative;font-family:var(--font-mono);font-weight:500;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mist);
  padding-block:.35rem;transition:color .25s cubic-bezier(.2,.7,.2,1);
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--signal);
  transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.nav__list a:hover::after,.nav__list a:focus-visible::after,.nav__list a[aria-current="page"]::after{transform:scaleX(1)}
.nav__list a[aria-current="page"]{color:var(--signal)}
.nav__side{display:flex;align-items:center;gap:1.3rem}
.nav__login{font-family:var(--font-mono);font-weight:500;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);opacity:.75;transition:opacity .2s,color .2s}
.nav__login:hover{opacity:1;color:var(--signal)}
.masthead .act{padding:.72rem 1.15rem;font-size:.72rem}

.masthead.is-stuck{background-color:rgba(255,255,255,1);border-bottom-color:rgba(213,218,223,1)}
.masthead.is-stuck .brand .on-dark{opacity:0}
.masthead.is-stuck .brand .on-light{opacity:1}
.masthead.is-stuck .brand img{transform:translateY(3.9%) scale(.76)}
.masthead.is-stuck .nav__list a,.masthead.is-stuck .nav__login{color:var(--ink)}
.masthead.is-stuck .nav__list a[aria-current="page"]{color:var(--signal)}
.masthead.is-stuck .act--ghost-light{border-color:var(--ink);color:var(--ink);--fill:var(--ink)}
.masthead.is-stuck .act--ghost-light:hover{color:var(--paper)}

.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:1px solid rgba(237,239,241,.3);cursor:pointer;z-index:70;padding:0 9px}
.burger span{display:block;height:1.5px;background:var(--mist);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s,background-color .3s cubic-bezier(.2,.7,.2,1)}
.masthead.is-stuck .burger{border-color:var(--line)}
.masthead.is-stuck .burger span{background:var(--ink)}
.nav-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Hero: asymmetric editorial split, no centred badge ---------- */
/* lvh, not dvh: the dynamic unit tracks the Android URL bar as it animates
   away and lags behind it, which paints a strip of the next section at the
   bottom. The large unit is the biggest the viewport can ever be, so the
   hero can never fall short of it. */
.hero{position:relative;background:var(--ink);color:var(--mist);overflow:hidden;min-height:100vh;min-height:100lvh;display:grid;align-content:center}
.hero__frame{
  display:block;
  padding-top:clamp(7rem,12vh,9rem);padding-bottom:clamp(3rem,6vw,5rem);
}
.hero__label{
  font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--signal);display:block;margin-bottom:1.6rem;
}
.hero h1{font-size:var(--fs-hero);color:var(--paper);letter-spacing:-.045em}
.hero h1 em{font-style:normal;color:var(--steel)}
.hero__inner{max-width:min(58%,660px)}
.hero__lede{margin-top:1.6rem;max-width:46ch;color:var(--steel-light);font-size:var(--fs-lede)}
.hero__acts{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}



/* ---------- Service schedule: the signature element ---------- */
.sched{border-top:1px solid var(--line)}
.sched__row{
  position:relative;display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1.15fr) 2.5rem;
  gap:clamp(1rem,2.4vw,2.2rem);align-items:start;
  padding:clamp(1.5rem,2.6vw,2.1rem) clamp(.6rem,1.4vw,1.2rem);
  border-bottom:1px solid var(--line);
  transition:background .28s cubic-bezier(.2,.7,.2,1),color .28s cubic-bezier(.2,.7,.2,1);
}
.sched__row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--signal);
  transform:scaleY(0);transform-origin:top center;transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.sched__row:hover,.sched__row:focus-visible{background:var(--ink);color:var(--mist);outline:none}
.sched__row:hover::before,.sched__row:focus-visible::before{transform:scaleY(1)}
.sched__code{
  font-family:var(--font-mono);font-weight:600;font-size:.76rem;letter-spacing:.12em;
  color:var(--steel);padding-top:.28rem;transition:color .28s cubic-bezier(.2,.7,.2,1);
}
.sched__row:hover .sched__code,.sched__row:focus-visible .sched__code{color:var(--signal)}
.sched__name{font-family:var(--font-display);font-weight:700;font-size:1.24rem;letter-spacing:-.025em;line-height:1.18}
.sched__desc{color:var(--steel-2);font-size:.95rem;transition:color .28s cubic-bezier(.2,.7,.2,1)}
.sched__row:hover .sched__desc,.sched__row:focus-visible .sched__desc{color:var(--steel-light)}
.sched__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.sched__tags span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;color:var(--steel);border:1px solid var(--line);padding:.22rem .5rem;transition:border-color .28s cubic-bezier(.2,.7,.2,1),color .28s cubic-bezier(.2,.7,.2,1)}
.sched__row:hover .sched__tags span,.sched__row:focus-visible .sched__tags span{border-color:var(--line-dark);color:var(--steel-light)}
.sched__go{display:flex;align-items:center;justify-content:flex-end;padding-top:.3rem}
.sched__go svg{width:20px;height:20px;stroke:var(--steel);fill:none;stroke-width:1.6;transition:transform .28s cubic-bezier(.2,.7,.2,1),stroke .28s cubic-bezier(.2,.7,.2,1)}
.sched__row:hover .sched__go svg,.sched__row:focus-visible .sched__go svg{stroke:var(--signal);transform:translateX(5px)}

/* ---------- Editorial split ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--offset{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split--wide-right{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.split__media{position:relative;min-width:0}
.split__media img{width:100%;border:1px solid var(--line)}
.ink-bay .split__media img{border-color:var(--line-dark)}
.split__media--left img{object-position:left center}
.split__media--right img{object-position:right center}
.split__media figcaption{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);margin-top:.7rem;
}
.split__body{min-width:0}
.split h2{font-size:var(--fs-h2);margin-bottom:1.1rem}
.prose{color:var(--steel-2)}
.ink-bay .prose{color:var(--steel-light)}
.prose p + p{margin-top:1rem}

/* Pull quote, set large in the display face */
.pull{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;line-height:1.1;
  font-size:clamp(1.5rem,3vw,2.35rem);color:var(--ink);max-width:22ch;
}
.ink-bay .pull{color:var(--paper)}
.pull__by{display:block;margin-top:1.2rem;font-family:var(--font-mono);font-weight:400;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}

/* ---------- Facts table (replaces the value-card grid) ---------- */
.facts{border-top:1px solid var(--line)}
.ink-bay .facts{border-top-color:var(--line-dark)}
.facts__row{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:clamp(1rem,3vw,2.5rem);
  padding:1.5rem 0;border-bottom:1px solid var(--line);align-items:start;
}
.ink-bay .facts__row{border-bottom-color:var(--line-dark)}
.facts__k{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);padding-top:.2rem}
.facts__v h3{font-size:var(--fs-h3);margin-bottom:.35rem}
.facts__v p{color:var(--steel-2);font-size:.95rem}
.ink-bay .facts__v p{color:var(--steel-light)}

/* ---------- Contact: the address itself is the hero ---------- */
.reach{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:end}
.reach__addr{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;line-height:1;
  font-size:clamp(1.55rem,5.2vw,3.8rem);color:var(--ink);
  display:inline-block;overflow-wrap:anywhere;
  border-bottom:3px solid var(--line);padding-bottom:.12em;
  transition:border-color .3s cubic-bezier(.2,.7,.2,1),color .3s cubic-bezier(.2,.7,.2,1);
}
.reach__addr:hover,.reach__addr:focus-visible{border-color:var(--signal);color:var(--signal-ink)}
.reach__meta{border-top:1px solid var(--line);min-width:0}

/* ---------- CTA strip ---------- */
.strip{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.strip h2{font-size:var(--fs-h2);max-width:20ch;color:var(--paper)}
.strip p{color:var(--steel-light);margin-top:.7rem;max-width:48ch}

/* ---------- Page head (inner pages) ---------- */
.phead{background:var(--ink);color:var(--mist);padding-top:clamp(8rem,15vh,10.5rem);padding-bottom:clamp(2.6rem,5vw,4rem)}
.phead__crumb{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin-bottom:1.2rem}
.phead__crumb a{color:var(--signal);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px;text-decoration-color:transparent;transition:text-decoration-color .2s cubic-bezier(.2,.7,.2,1)}
.phead__crumb a:hover{text-decoration-color:var(--signal)}
.phead h1{font-size:var(--fs-h1);color:var(--paper)}
.phead p{color:var(--steel-light);max-width:60ch;margin-top:1rem;font-size:var(--fs-lede)}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:var(--steel-light);padding-top:clamp(3.5rem,7vw,5.5rem)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);padding-bottom:3rem}
.foot__brand img{height:56px;width:auto;margin-bottom:1.3rem}
.foot__brand p{font-size:.92rem;max-width:38ch}
.foot__social{display:flex;gap:.6rem;margin-top:1.5rem}
.foot__social a{width:40px;height:40px;border:1px solid var(--line-dark);display:grid;place-items:center;transition:background .25s cubic-bezier(.2,.7,.2,1),border-color .25s cubic-bezier(.2,.7,.2,1)}
.foot__social a:hover{background:var(--signal);border-color:var(--signal)}
.foot__social svg{width:16px;height:16px;fill:var(--steel-light);transition:fill .25s}
.foot__social a:hover svg{fill:var(--ink)}
.foot__col h5{font-family:var(--font-mono);font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);margin-bottom:1.2rem}
.foot__col li{margin-bottom:.65rem}
.foot__col a{font-size:.93rem;transition:color .2s}
.foot__col a:hover{color:var(--signal)}
.foot__line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;font-size:.93rem;margin-bottom:.65rem}
.foot__line dt{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);padding-top:.22rem}
.foot__line dd{color:var(--paper);overflow-wrap:anywhere}
.foot__base{border-top:1px solid var(--line-dark);padding-block:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

/* ---------- Legal prose ---------- */
.legal{max-width:74ch}
.legal__meta{border:1px solid var(--line);padding:1.3rem 1.5rem;margin-bottom:2.5rem;font-size:.92rem;color:var(--steel-2)}
.legal__meta b{color:var(--ink);font-weight:600}
.legal__jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:3rem}
.legal__jump a{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel-2);border:1px solid var(--line);padding:.55rem .85rem;transition:background .25s cubic-bezier(.2,.7,.2,1),color .25s cubic-bezier(.2,.7,.2,1),border-color .25s}
.legal__jump a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.legal h2{font-size:var(--fs-h2);margin-top:3.5rem;padding-top:2rem;border-top:2px solid var(--ink);scroll-margin-top:100px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-family:var(--font-mono);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-top:2.2rem}
.legal p,.legal li{color:var(--steel-2);font-size:.95rem;margin-top:.75rem;line-height:1.72}
.legal ul{margin-top:.75rem;padding-left:1.2rem;list-style:square}
.legal li{margin-top:.4rem}
.legal li::marker{color:var(--signal)}

/* ---------- Reveal ---------- */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.js .rise.is-in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .hero__inner{max-width:100%}
  .sched__row{grid-template-columns:4.2rem minmax(0,1fr) 2rem;row-gap:.2rem}
  .sched__desc{grid-column:2 / 4}
  .split,.split--offset,.split--wide-right,.reach{grid-template-columns:minmax(0,1fr)}
  .split__media{order:-1}
  .foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:820px){
  .nav__list,.nav__side .act{display:none}
  .burger{display:flex}
  .nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;
       gap:2.5rem;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);z-index:65}
  .nav-open .nav{transform:none}
  .nav__list{display:flex;flex-direction:column;gap:1.8rem;text-align:center}
  .nav__list a{font-size:1rem;color:var(--mist)}
  .nav__side{flex-direction:column;gap:1.6rem}
  .nav__side .act{display:inline-flex}
  .nav__login{color:var(--mist);font-size:.9rem}
  .masthead.is-stuck .nav__list a,.masthead.is-stuck .nav__login{color:var(--mist)}
}
@media(max-width:560px){
  .facts__row{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .foot__grid{grid-template-columns:minmax(0,1fr)}
  .sched__row{grid-template-columns:3.6rem minmax(0,1fr);padding-inline:0}
  .sched__go{display:none}
  .sched__desc{grid-column:2 / 3}
  .strip{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  /* Honour the preference: nothing travels, scales or slides. Opacity is not
     vestibular motion, so state changes still read instead of the site
     looking inert. */
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.12s!important;transition-property:opacity,color,background-color,border-color!important;
    scroll-behavior:auto!important}
  .js .rise{opacity:1;transform:none}
  .bg__africa > span > span{animation:wave-still 9s ease-in-out infinite!important;transform:none!important}
}
@keyframes wave-still{
  0%,100%{opacity:.35}
  9%{opacity:1}
  26%{opacity:.35}
}

/* Secondary dark bay, so a dark section reads as distinct from the footer */
.ink2-bay{background:var(--ink-2)}

/* ---------- Service entries (Services page) ---------- */
.entries{border-top:0}
.entry{
  position:relative;display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,2.4fr);
  gap:clamp(1.2rem,4vw,3.5rem);
  padding:clamp(2rem,4vw,3.2rem) 0 clamp(2rem,4vw,3.2rem) clamp(0rem,2vw,1.6rem);
  border-bottom:1px solid var(--line);
  scroll-margin-top:96px;
  transition:background .4s cubic-bezier(.2,.7,.2,1);
}
.entry::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--signal);
  transform:scaleY(0);transform-origin:top center;transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.entry:target::before{transform:scaleY(1)}
.entry:target{background:var(--mist)}
.entry__id{font-family:var(--font-mono);font-weight:600;font-size:.78rem;letter-spacing:.16em;color:var(--steel);transition:color .4s cubic-bezier(.2,.7,.2,1)}
.entry:target .entry__id{color:var(--signal-ink)}
.entry__body h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin-bottom:.7rem}
.entry__body p{color:var(--steel-2);max-width:62ch}
.entry__caps{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.entry__caps span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--steel-2);border:1px solid var(--line);padding:.3rem .6rem}

/* ---------- Q and A ---------- */
.qa{border-top:1px solid var(--line);max-width:80ch}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{
  display:grid;grid-template-columns:2.4rem minmax(0,1fr) 1.6rem;gap:1rem;align-items:baseline;
  padding:1.4rem 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:700;font-size:1.04rem;letter-spacing:-.02em;line-height:1.3;
  transition:color .25s cubic-bezier(.2,.7,.2,1);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--signal-ink)}
.qa__n{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.1em;color:var(--steel)}
.qa details[open] .qa__n{color:var(--signal)}
.qa__pm{position:relative;width:14px;height:14px;justify-self:end;align-self:center}
.qa__pm::before,.qa__pm::after{content:"";position:absolute;background:var(--steel);transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s}
.qa__pm::before{left:0;right:0;top:6px;height:2px}
.qa__pm::after{top:0;bottom:0;left:6px;width:2px}
.qa details[open] .qa__pm::after{transform:scaleY(0)}
.qa details[open] .qa__pm::before{background:var(--signal)}
.qa__a{padding:0 1.6rem 1.6rem calc(2.4rem + 1rem)}
.qa__a p{color:var(--steel-2);font-size:.95rem}
.qa__a p + p{margin-top:.8rem}
@media(max-width:560px){
  .entry{grid-template-columns:minmax(0,1fr);gap:.6rem}
  .qa summary{grid-template-columns:2rem minmax(0,1fr) 1.2rem;gap:.7rem;font-size:.98rem}
  .qa__a{padding-left:2.7rem}
}

/* Keyboard parity for schedule rows (JS mirrors hover onto focus) */
.sched__row.is-active{background:var(--ink);color:var(--mist)}
.sched__row.is-active::before{transform:scaleY(1)}
.sched__row.is-active .sched__code{color:var(--signal)}
.sched__row.is-active .sched__desc{color:var(--steel-light)}
.sched__row.is-active .sched__tags span{border-color:var(--line-dark);color:var(--steel-light)}
.sched__row.is-active .sched__go svg{stroke:var(--signal);transform:translateX(5px)}

/* ==========================================================================
   Reactive mesh backdrop
   A fixed grid of nodes on the logo's matrix spacing. Links only appear
   near the pointer, the way a link map lights as it comes online.
   ========================================================================== */
.bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg__sky{
  position:absolute;inset:0;
  background-image:var(--sky);background-size:cover;background-position:center 35%;
  opacity:.14;filter:grayscale(.65) contrast(1.15) brightness(.85);
}
/* Africa, drawn in the logo's dot matrix.
   Dot size and brightness rise with distance inland, so the interior carries
   weight and the coastline stays fine. A single crest travels from the
   north-west to the south-east and repeats. */
.bg__africa{position:absolute;top:50%;transform:translateY(-50%);aspect-ratio:26 / 30;pointer-events:none}
/* The outer node holds the per-dot position, size and brightness as static
   values. The inner node runs the animation, and its keyframes contain only
   literal numbers: Firefox does not reliably animate keyframes that read a
   custom property, so none are referenced inside @keyframes. Nested opacity
   multiplies, which is what gives each dot its own depth. */
.bg__africa > span{position:absolute;width:var(--s);aspect-ratio:1;transform:translate(-50%,-50%);opacity:var(--o)}
.bg__africa > span > span{position:absolute;inset:0;border-radius:50%;background:var(--signal);animation:wave 7s ease-in-out infinite;animation-delay:var(--d)}
@keyframes wave{
  0%,100%{opacity:.24;transform:scale(.8)}
  9%{opacity:1;transform:scale(1.16)}
  26%{opacity:.24;transform:scale(.8)}
}
/* Home: centred in the space between the headline and the right edge */
.hero .bg__africa{left:76%;transform:translate(-50%,-50%);width:min(38vw,470px)}
/* Inner pages: a smaller mark held to the right */
.phead .bg__africa{right:5%;width:min(24vw,280px);opacity:.5}
@media(max-width:1000px){
  .hero .bg__africa{left:auto;right:-12%;transform:translateY(-50%);width:min(54vw,340px);opacity:.3}
}
@media(max-width:820px){.phead .bg__africa{opacity:.28}}
.hero__frame,.phead .shell{position:relative;z-index:1}
.hero,.phead{position:relative;isolation:isolate}

/* ==========================================================================
   Q and A: sticky title column, questions grouped by subject
   ========================================================================== */
.qa-wrap{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.qa-aside{position:sticky;top:110px}
.qa-aside h2{font-size:var(--fs-h2);margin-bottom:1rem}
.qa-aside p{color:var(--steel-2);font-size:.95rem;max-width:34ch}
.qa-set + .qa-set{margin-top:clamp(2.5rem,5vw,3.5rem)}
.qa-set__label{
  font-family:var(--font-mono);font-weight:500;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal-ink);
  display:flex;align-items:center;gap:1rem;margin-bottom:.4rem;
}
.qa-set__label::after{content:"";flex:1;height:1px;background:var(--line)}

/* ==========================================================================
   Manifesto: staggered display statements (replaces the stacked facts table
   on About, which read as monotonous)
   ========================================================================== */
.manifesto{counter-reset:none}
.manifesto__item{
  border-top:1px solid var(--line-dark);
  padding-top:clamp(1.4rem,2.5vw,2rem);
  padding-bottom:clamp(1.8rem,3.5vw,2.8rem);
}
.manifesto__item:nth-child(2){margin-left:clamp(0rem,7vw,7rem)}
.manifesto__item:nth-child(3){margin-left:clamp(0rem,14vw,14rem)}
.manifesto__label{
  font-family:var(--font-mono);font-weight:500;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal);display:block;margin-bottom:1rem;
}
.manifesto__say{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;line-height:1.08;
  font-size:clamp(1.35rem,2.7vw,2.1rem);color:var(--paper);max-width:20ch;
}
.manifesto__note{color:var(--steel-light);font-size:.95rem;margin-top:1rem;max-width:52ch}
@media(max-width:820px){
  .qa-wrap{grid-template-columns:minmax(0,1fr)}
  .qa-aside{position:static}
  .manifesto__item:nth-child(2),.manifesto__item:nth-child(3){margin-left:0}
}

/* Stacked value rows (contact), so a value and its qualifier never sit inline */
.reach__row{padding:1.15rem 0;border-bottom:1px solid var(--line)}
.reach__row dt{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-bottom:.45rem}
.reach__row dd{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.reach__row dd small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.75rem;letter-spacing:.1em;color:var(--steel);margin-top:.4rem}