/* ============================================================
   MIDNIGHT — INNER PAGES
   The orbit is the homepage. Every other page runs in the same
   sky, but the sky steps back and the type takes the room. One
   column, generous measure, hairlines instead of cards. Every
   class here is prefixed pg- so it can never collide with the
   theme's own stylesheet.
   ============================================================ */

/* the ambient sky sits further back on a reading page */
body.pg{background:#050508;}
body.pg .mn__gl{opacity:.62;}

/* the compact bar is present from the first pixel — there is no
   orbit above it to earn its way in */
body.pg .bar{opacity:1;transform:none;pointer-events:auto;}

.pg-main{position:relative;z-index:2;}

/* ---------- masthead ---------------------------------------- */
.pg-top{
  position:relative;
  padding:clamp(120px,17vh,190px) clamp(20px,5vw,72px) clamp(46px,7vh,86px);
}
.pg-top__in{max-width:1240px;margin-inline:auto;}

.pg-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(120,132,155,.9);
  margin:0 0 22px;
}
.pg-crumb a{color:rgba(150,164,188,.95);transition:color .4s var(--ease);}
.pg-crumb a:hover{color:#EAF2FF;}
.pg-crumb span[aria-current]{color:rgba(111,184,255,.95);}
.pg-crumb i{font-style:normal;opacity:.4;}

.pg-h1{
  font-family:var(--font-display);font-weight:800;line-height:1.01;
  letter-spacing:-.048em;font-size:clamp(2.4rem,6vw,4.6rem);
  color:#F3F7FF;text-wrap:balance;margin:0;max-width:17ch;
}
.pg-h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.2px rgba(168,210,236,.62);}

.pg-say{
  margin:26px 0 0;max-width:60ch;
  font-size:clamp(1.04rem,1.25vw,1.24rem);line-height:1.62;
  color:rgba(180,192,212,.94);
}
.pg-say strong{color:#EAF2FF;font-weight:600;}

.pg-act{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}

/* the fact strip under the masthead — the entity data a model
   lifts first, in the DOM rather than only in the JSON-LD */
.pg-facts{
  display:grid;gap:1px;margin-top:clamp(38px,6vh,64px);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:rgba(168,210,236,.11);
  border:1px solid rgba(168,210,236,.11);
}
.pg-facts > div{background:#05070C;padding:20px 22px;}
.pg-facts dt{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(120,132,155,.95);margin:0;
}
.pg-facts dd{margin:9px 0 0;font-size:.94rem;line-height:1.5;color:rgba(198,210,230,.95);}

/* ---------- prose ------------------------------------------- */
.pg-body{padding-inline:clamp(20px,5vw,72px);}
.pg-wrap{max-width:1240px;margin-inline:auto;}

.pg-sec{
  padding-block:clamp(62px,10vh,120px);
  border-top:1px solid rgba(168,210,236,.1);
}
.pg-sec:first-child{border-top:0;}
.pg-h2{
  font-family:var(--font-display);font-weight:800;line-height:1.06;
  letter-spacing:-.038em;font-size:clamp(1.7rem,3.4vw,2.7rem);
  color:#F1F6FF;margin:0;max-width:20ch;text-wrap:balance;
}
.pg-h3{
  font-family:var(--font-display);font-weight:700;line-height:1.2;
  letter-spacing:-.02em;font-size:clamp(1.06rem,1.6vw,1.3rem);
  color:#E9F1FF;margin:38px 0 0;
}
.pg-p{
  margin:16px 0 0;max-width:66ch;
  font-size:1.02rem;line-height:1.72;color:rgba(174,186,208,.94);
}
.pg-p strong{color:#E9F1FF;font-weight:600;}
.pg-p a{color:#8CC6FF;border-bottom:1px solid rgba(140,198,255,.32);
  transition:border-color .4s var(--ease),color .4s var(--ease);}
.pg-p a:hover{color:#fff;border-color:#8CC6FF;}

/* the answer block — the paragraph a model is meant to quote,
   marked so a human reads it first too */
.pg-ans{
  margin:26px 0 0;max-width:70ch;padding:22px 26px;
  border-left:2px solid rgba(111,184,255,.8);
  background:linear-gradient(100deg,rgba(59,157,255,.09),rgba(59,157,255,0) 72%);
}
.pg-ans p{margin:0;font-size:1.06rem;line-height:1.66;color:#DCE7F8;}
.pg-ans p + p{margin-top:12px;}

/* the two-column split used for definitions and comparisons */
.pg-split{
  display:grid;gap:clamp(26px,4vw,60px);margin-top:clamp(30px,5vh,54px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

/* numbered lists that read as a system, not bullets */
.pg-list{list-style:none;margin:26px 0 0;padding:0;max-width:74ch;}
.pg-list li{
  position:relative;padding:18px 0 18px 46px;
  border-top:1px solid rgba(168,210,236,.1);
  font-size:1rem;line-height:1.65;color:rgba(174,186,208,.94);
}
.pg-list li:last-child{border-bottom:1px solid rgba(168,210,236,.1);}
.pg-list li b{display:block;color:#EAF2FF;font-weight:600;font-size:1.02rem;margin-bottom:5px;}
.pg-list li::before{
  counter-increment:pgl;content:counter(pgl,decimal-leading-zero);
  position:absolute;left:0;top:19px;
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.16em;color:rgba(111,184,255,.9);font-variant-numeric:tabular-nums;
}
.pg-list{counter-reset:pgl;}
.pg-list--plain{counter-reset:none;}
.pg-list--plain li{padding-left:24px;}
.pg-list--plain li::before{
  content:"";counter-increment:none;top:29px;left:2px;
  width:7px;height:1px;background:rgba(111,184,255,.9);
}

/* comparison table — scrolls inside itself, never the page */
.pg-tblw{overflow-x:auto;margin-top:30px;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);}
.pg-tbl{width:100%;border-collapse:collapse;min-width:620px;font-size:.95rem;}
.pg-tbl th,.pg-tbl td{
  text-align:left;padding:15px 18px;vertical-align:top;
  border-bottom:1px solid rgba(168,210,236,.1);
}
.pg-tbl th{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(120,132,155,.95);
  border-bottom-color:rgba(168,210,236,.24);
}
.pg-tbl td{color:rgba(174,186,208,.94);line-height:1.6;}
.pg-tbl td:first-child{color:#E9F1FF;font-weight:600;width:26%;}

/* pull figure */
.pg-fig{
  display:grid;gap:1px;margin-top:clamp(30px,5vh,54px);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background:rgba(168,210,236,.11);border:1px solid rgba(168,210,236,.11);
}
.pg-fig > div{background:#05070C;padding:24px 22px;}
.pg-fig b{
  display:block;font-family:var(--font-display);font-weight:800;
  letter-spacing:-.04em;font-size:clamp(1.7rem,3vw,2.4rem);color:#EFF5FF;
  font-variant-numeric:tabular-nums;line-height:1;
}
.pg-fig span{display:block;margin-top:11px;font-size:.86rem;line-height:1.5;color:rgba(150,164,188,.95);}

/* cross links to the rest of the system */
.pg-xr{
  display:grid;gap:1px;margin-top:clamp(30px,5vh,54px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  background:rgba(168,210,236,.11);border:1px solid rgba(168,210,236,.11);
}
.pg-xr a{
  display:block;background:#05070C;padding:24px 24px 26px;
  transition:background .5s var(--ease);
}
.pg-xr a:hover{background:#080C15;}
.pg-xr b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:1.02rem;letter-spacing:-.015em;color:#EAF2FF;
  transition:color .4s var(--ease);
}
.pg-xr a:hover b{color:#fff;}
.pg-xr span{display:block;margin-top:9px;font-size:.88rem;line-height:1.55;color:rgba(150,164,188,.95);}
.pg-xr a::after{
  content:"";display:block;width:0;height:1px;margin-top:16px;
  background:linear-gradient(90deg,#6FB8FF,transparent);
  transition:width .8s var(--ease);
}
.pg-xr a:hover::after{width:100%;}

/* the closing call on an inner page */
.pg-end{
  padding:clamp(72px,12vh,140px) clamp(20px,5vw,72px) clamp(90px,14vh,160px);
  border-top:1px solid rgba(168,210,236,.1);text-align:center;
}
.pg-end__in{max-width:840px;margin-inline:auto;}
.pg-end h2{
  font-family:var(--font-display);font-weight:800;line-height:1.04;
  letter-spacing:-.045em;font-size:clamp(2rem,4.6vw,3.4rem);color:#F3F7FF;
  margin:0;text-wrap:balance;
}
.pg-end p{margin:22px auto 0;max-width:54ch;font-size:1.04rem;line-height:1.62;color:rgba(174,186,208,.94);}
.pg-end .pg-act{justify-content:center;}

@media (max-width:640px){
  .pg-h1{font-size:clamp(2.1rem,9vw,2.9rem);}
  .pg-list li{padding-left:38px;}
}

/* ---------- inline enquiry form (contact) -------------------- */
.pg-form-grid{
  display:grid;gap:clamp(30px,5vw,64px);align-items:start;
  grid-template-columns:1fr;
}
@media (min-width:940px){
  .pg-form-grid{grid-template-columns:1fr minmax(380px,.86fr);}
  .pg-form{position:sticky;top:104px;}
}
.pg-form{
  padding:clamp(26px,3vw,38px);
  border:1px solid rgba(168,210,236,.16);
  background:linear-gradient(150deg,rgba(12,16,26,.92),rgba(6,8,14,.96));
  box-shadow:0 40px 120px -60px rgba(59,157,255,.6);
}
.pg-form .gate__h{font-size:clamp(1.3rem,2vw,1.6rem);}
.pg-form .gate__f textarea{
  width:100%;margin-top:8px;padding:13px 15px;resize:vertical;min-height:96px;
  border:1px solid rgba(168,210,236,.22);border-radius:2px;
  background:rgba(255,255,255,.035);color:#EAF2FF;
  font-family:inherit;font-size:.95rem;line-height:1.55;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.pg-form .gate__f textarea::placeholder{color:rgba(120,132,155,.7);}
.pg-form .gate__f textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.06);}
.pg-form-say .pg-h2{max-width:16ch;}

/* ---------- inline code ------------------------------------- */
.pg-p code,.pg-list code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  color:#9CCEFF;background:rgba(111,184,255,.09);
  border:1px solid rgba(168,210,236,.18);border-radius:3px;padding:1px 6px;
}

/* ---------- reading measure & anchors ----------------------- */
/* the column is deliberately narrower than the frame — the sky and
   the moon own the right-hand negative space — but not so narrow
   that a wide screen reads as empty */
.pg-p{max-width:72ch;}
.pg-list{max-width:78ch;}
.pg-ans{max-width:74ch;}

/* the compact bar is fixed, so anything jumped to must clear it */
.pg-sec,.pg-top,[id]{scroll-margin-top:110px;}

/* ============================================================
   INNER PAGE MOTION
   Everything below has a visible resting state. If the script
   never runs, or motion is reduced, the page is simply finished
   — nothing is parked at zero opacity waiting for an observer.
   ============================================================ */

/* ---------- reading progress -------------------------------- */
.pg-prog{
  position:fixed;left:0;right:0;top:0;height:2px;z-index:70;pointer-events:none;
  background:rgba(168,210,236,.08);
}
.pg-prog i{
  display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 40%,transparent),var(--accent));
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);
}

/* ---------- kinetic type ------------------------------------ */
.pw{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.12em;margin-bottom:-.12em;}
.pw > i{
  display:inline-block;font-style:inherit;
  transform:translateY(115%) rotate(3deg);transform-origin:0% 100%;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--wi,0) * 44ms);
}
.is-in .pw > i,.is-in.pw > i{transform:none;}
.pg-h1.is-split,.pg-h2.is-split{opacity:1;}
/* the mask must not clip a glow once the words have landed */
.is-in .pw{overflow:visible;transition:overflow 0s linear .9s;}

/* ---------- reveal ------------------------------------------ */
.pg-sec,.pg-facts,.pg-ans,.pg-tblw,.pg-xr a,.pg-fig > div,
.pg-list li,.pg-h3,.pg-p,.qs,.pg-end__in,.pg-crumb,.pg-act{
  --ry:18px;
}
.pg-facts,.pg-ans,.pg-tblw,.pg-fig > div,.pg-list li,
.pg-h3,.pg-p,.qs,.pg-end__in,.pg-crumb,.pg-act,.pg-xr a{
  opacity:1;transform:none;
}
html.js .pg-facts,html.js .pg-ans,html.js .pg-tblw,html.js .pg-fig > div,
html.js .pg-list li,html.js .pg-h3,html.js .pg-p,html.js .qs,
html.js .pg-end__in,html.js .pg-crumb,html.js .pg-act,html.js .pg-xr a{
  opacity:0;transform:translate3d(0,var(--ry),0);
  transition:opacity .7s var(--ease),transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--si,0) * 55ms);
}
html.js .is-in{opacity:1 !important;transform:none !important;}

/* the section rule draws itself as the section arrives */
.pg-sec{position:relative;}
html.js .pg-sec::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent 62%);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.5s cubic-bezier(.16,1,.3,1) .1s;
}
html.js .pg-sec.is-in::after{transform:scaleX(1);}
.pg-sec:first-child::after{display:none;}

@media (prefers-reduced-motion:reduce){
  html.js .pg-facts,html.js .pg-ans,html.js .pg-tblw,html.js .pg-fig > div,
  html.js .pg-list li,html.js .pg-h3,html.js .pg-p,html.js .qs,
  html.js .pg-end__in,html.js .pg-crumb,html.js .pg-act,html.js .pg-xr a{
    opacity:1;transform:none;transition:none;
  }
  .pw > i{transform:none;transition:none;}
  html.js .pg-sec::after{transform:scaleX(1);transition:none;}
  .pg-fx{display:none;}
}

/* ---------- the signature figure ---------------------------- */
.pg-fx{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;animation:fx-in 2.4s var(--ease) .35s forwards;
  -webkit-mask-image:radial-gradient(76% 86% at 50% 44%,#000 20%,transparent 72%);
          mask-image:radial-gradient(76% 86% at 50% 44%,#000 20%,transparent 72%);
}
@keyframes fx-in{to{opacity:1;}}
.pg-top__in{position:relative;z-index:1;}
/* pages that draw their own figure do not also carry the moon */
html[data-motif]:not([data-motif="moon"]) .mn__gl{opacity:.26;}

/* ---------- pointer-tracked light --------------------------- */
.pg-tbl,.pg-list,.pg-xr,.pg-facts,.pg-fig{position:relative;}
.pg-tbl tbody tr{transition:background .45s var(--ease);}
.pg-tbl tbody tr:hover{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 9%,transparent),transparent 74%);
}
.pg-tbl tbody tr:hover td:first-child{color:#fff;}
.pg-list li{transition:background .45s var(--ease),padding-left .45s var(--ease);}
.pg-list li:hover{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 7%,transparent),transparent 66%);
}
.pg-list:not(.pg-list--plain) li:hover{padding-left:54px;}
.pg-list li:hover::before{color:#fff;}
.pg-list li:hover b{color:#fff;}
.pg-facts > div{transition:background .5s var(--ease);}
.pg-facts > div:hover{background:#080C15;}
.pg-facts > div:hover dd{color:#fff;}

/* the cross-links lift and light on the side the pointer is on */
.pg-xr a{position:relative;overflow:hidden;}
.pg-xr a::before{
  content:"";position:absolute;inset:0;opacity:0;
  background:radial-gradient(240px 180px at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--accent) 15%,transparent),transparent 70%);
  transition:opacity .5s var(--ease);
}
.pg-xr a:hover::before{opacity:1;}
.pg-xr a > *{position:relative;}

/* the figure tiles answer too */
.pg-fig > div{transition:background .5s var(--ease);}
.pg-fig > div:hover{background:#080C15;}
.pg-fig > div:hover b{color:#fff;text-shadow:0 0 44px color-mix(in srgb,var(--accent) 70%,transparent);}
.pg-fig b{transition:color .45s var(--ease),text-shadow .5s var(--ease);}

/* ---------- accent-aware furniture -------------------------- */
.pg-crumb span[aria-current]{color:var(--accent);}
.pg-ans{border-left-color:var(--accent);
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--accent) 11%,transparent),transparent 72%);}
.pg-list li::before{color:var(--accent);}
.pg-list--plain li::before{background:var(--accent);}
.pg-h1 em{-webkit-text-stroke-color:color-mix(in srgb,var(--accent) 62%,transparent);}

/* The signature figure belongs beside the reading column, not under it.
   Left edge starts where the measure ends, so type is never competing
   with a moving image behind it. */
.pg-fx{left:auto;right:0;width:min(58%,760px);}
@media (max-width:899px){
  .pg-fx{left:0;width:100%;opacity:0;animation:fx-in-soft 2.4s var(--ease) .35s forwards;}
  @keyframes fx-in-soft{to{opacity:.55;}}
}
/* headings hold their space while their words arrive */
html.js .pg-h1,html.js .pg-h2,html.js .pg-end h2,html.js .pg-say{
  opacity:1;transform:none;
}

/* ============================================================
   THE CAPABILITY BANDS  (services page)
   Five full-width bands, each with its own colour and its own
   drawn figure. The band that holds the middle of the screen
   takes the page's accent with it, so the page changes hue five
   times on the way down and every change is motivated.
   ============================================================ */
.cbands{margin-top:clamp(30px,5vh,56px);}
.cband{
  position:relative;
  padding-block:clamp(46px,7vh,86px);
  border-top:1px solid rgba(168,210,236,.1);
}
.cband:last-child{border-bottom:1px solid rgba(168,210,236,.1);}
.cband__in{
  display:grid;gap:clamp(20px,3vw,44px);align-items:start;
  grid-template-columns:64px minmax(0,1fr);
}
@media (min-width:1000px){
  .cband__in{grid-template-columns:minmax(0,1.02fr) minmax(320px,1fr);}
}
.cband__n{
  font-family:var(--font-display);font-weight:800;font-size:.72rem;
  letter-spacing:.2em;color:rgba(120,132,155,.9);font-variant-numeric:tabular-nums;
  padding-top:.5em;transition:color .6s var(--ease);
}
.cband.is-live .cband__n{color:var(--cb);}
.cband__h{
  font-family:var(--font-display);font-weight:800;line-height:1;
  letter-spacing:-.04em;font-size:clamp(1.7rem,3.6vw,2.9rem);
  color:#F1F6FF;margin:0;
  transition:color .6s var(--ease);
}
.cband.is-live .cband__h{color:color-mix(in srgb,var(--cb) 42%,#fff);}
.cband__lead{
  margin:15px 0 0;max-width:56ch;font-size:1.02rem;line-height:1.7;
  color:rgba(178,190,210,.94);
}
.cband__lead strong{color:#EAF2FF;font-weight:600;}
.cband__l{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 0;padding:0;list-style:none;}
.cband__l li{
  font-size:.8rem;letter-spacing:.02em;padding:5px 11px;border-radius:2px;
  border:1px solid rgba(168,210,236,.18);color:rgba(160,174,196,.95);
  transition:border-color .5s var(--ease),color .5s var(--ease),background .5s var(--ease);
}
.cband.is-live .cband__l li{border-color:color-mix(in srgb,var(--cb) 38%,transparent);color:#D6E2F2;}
.cband__l li:hover{background:color-mix(in srgb,var(--cb) 18%,transparent);
  border-color:var(--cb);color:#fff;}
.cband__break{
  margin:20px 0 0;max-width:56ch;font-size:.94rem;line-height:1.62;
  color:rgba(140,153,175,.95);padding-left:15px;
  border-left:1px solid rgba(168,210,236,.22);
  transition:border-color .6s var(--ease);
}
.cband.is-live .cband__break{border-left-color:color-mix(in srgb,var(--cb) 60%,transparent);}
.cband__break b{color:rgba(190,203,224,.98);font-weight:600;}
.cband__fx{
  display:block;width:100%;height:190px;
  opacity:.4;transition:opacity .8s var(--ease);
  -webkit-mask-image:radial-gradient(78% 86% at 50% 50%,#000 24%,transparent 74%);
          mask-image:radial-gradient(78% 86% at 50% 50%,#000 24%,transparent 74%);
}
.cband.is-live .cband__fx{opacity:.95;}
@media (max-width:999px){
  .cband__fx{height:120px;margin-top:22px;grid-column:2;}
}
/* the live band lifts off the page very slightly */
.cband::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--cb);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.cband.is-live::before{transform:scaleY(1);}
html.js .cband{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .7s var(--ease),transform .9s cubic-bezier(.16,1,.3,1);}
html.js .cband.is-in{opacity:1;transform:none;}

/* ---------- the three engagements --------------------------- */
.offers{
  display:grid;gap:1px;margin-top:clamp(30px,5vh,54px);
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  background:rgba(168,210,236,.11);border:1px solid rgba(168,210,236,.11);
}
.offer-card{
  display:flex;flex-direction:column;background:#05070C;
  padding:28px 26px 30px;position:relative;overflow:hidden;
  transition:background .5s var(--ease);
}
.offer-card:hover{background:#080D16;}
.offer-card::before{
  content:"";position:absolute;inset:0;opacity:0;
  background:radial-gradient(280px 220px at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--oc,var(--accent)) 16%,transparent),transparent 72%);
  transition:opacity .5s var(--ease);
}
.offer-card:hover::before{opacity:1;}
.offer-card > *{position:relative;}
.offer-card__k{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--oc,var(--accent));margin:0;
}
.offer-card__h{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:1.16rem;color:#EAF2FF;margin:12px 0 0;
  transition:color .4s var(--ease);
}
.offer-card:hover .offer-card__h{color:#fff;}
.offer-card__p{margin:11px 0 0;font-size:.93rem;line-height:1.6;color:rgba(160,174,196,.95);}
.offer-card__m{
  margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(168,210,236,.12);
  font-size:.8rem;color:rgba(130,144,166,.95);
}
.offer-card__go{
  margin-top:auto;padding-top:20px;
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--oc,var(--accent));
  display:inline-flex;align-items:center;gap:8px;
}
.offer-card__go svg{width:14px;height:14px;transition:transform .5s var(--ease);}
.offer-card:hover .offer-card__go svg{transform:translateX(4px);}
html.js .offer-card{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .7s var(--ease),transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--si,0) * 90ms);}
html.js .offer-card.is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html.js .cband,html.js .offer-card{opacity:1;transform:none;transition:none;}
  .cband__fx{display:none;}
  .cband::before{transform:scaleY(1);}
}

/* the moon is the homepage's. Inner pages carry the sky only. */
.pg .mn__gl{opacity:.34;}

/* ============================================================
   THE SEAM DIAGRAM  (about page)
   The page's central claim, drawn rather than asserted: the same
   five parts, bought separately and drifting, against the same
   five held on one path. Chips are real text; the lines behind
   them are SVG that draws itself as the section arrives.
   ============================================================ */
.seam{
  display:grid;gap:1px;margin-top:clamp(30px,5vh,54px);
  grid-template-columns:1fr;
  background:rgba(168,210,236,.11);border:1px solid rgba(168,210,236,.11);
}
@media (min-width:860px){ .seam{grid-template-columns:1fr 1fr;} }
.seam__p{background:#05070C;padding:26px 24px 30px;}
.seam__p--good{background:#060A11;}
.seam__k{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.26em;text-transform:uppercase;margin:0;
  color:rgba(120,132,155,.95);
}
.seam__p--good .seam__k{color:var(--accent);}
.seam__h{
  font-family:var(--font-display);font-weight:700;font-size:1.06rem;
  letter-spacing:-.015em;color:#E9F1FF;margin:10px 0 0;
}
.seam__stage{position:relative;height:250px;margin-top:20px;}
.seam__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.seam__svg line,.seam__svg path,.seam__svg circle{vector-effect:non-scaling-stroke;}
.seam__wire{
  stroke:rgba(140,155,180,.42);stroke-width:1;stroke-dasharray:4 5;fill:none;
}
.seam__link{
  stroke:var(--accent);stroke-width:1.2;fill:none;opacity:.75;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
}
.is-in .seam__link{
  animation:seam-draw 1.5s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--ln,0) * 90ms + .2s);
}
@keyframes seam-draw{to{stroke-dashoffset:0;}}
.seam__ring{
  stroke:rgba(168,210,236,.22);stroke-width:1;fill:none;
  stroke-dasharray:2 6;
}
.is-in .seam__ring{animation:seam-spin 46s linear infinite;transform-origin:50% 50%;}
@keyframes seam-spin{to{transform:rotate(360deg);}}
.seam__hub{fill:var(--accent);}
.seam__svg ellipse{vector-effect:non-scaling-stroke;}
.chip{
  position:absolute;translate:-50% -50%;white-space:nowrap;
  font-family:var(--font-display);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:6px 11px;border-radius:2px;
  border:1px solid rgba(168,210,236,.2);background:#080C13;
  color:rgba(160,174,196,.95);
}
.seam__p--bad .chip{animation:chip-drift 9s ease-in-out infinite alternate;}
.seam__p--bad .chip:nth-child(3){animation-duration:11s;}
.seam__p--bad .chip:nth-child(4){animation-duration:8s;animation-direction:alternate-reverse;}
.seam__p--bad .chip:nth-child(5){animation-duration:12.5s;}
.seam__p--bad .chip:nth-child(6){animation-duration:10s;animation-direction:alternate-reverse;}
@keyframes chip-drift{
  from{translate:-50% -50%;}
  to{translate:calc(-50% + 9px) calc(-50% - 7px);}
}
.seam__p--good .chip{
  border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  color:#DDE8F7;background:#070D16;
  box-shadow:0 0 24px -12px var(--accent);
}
.seam__note{
  margin:20px 0 0;font-size:.9rem;line-height:1.6;color:rgba(150,164,188,.95);
}
.seam__p--good .seam__note{color:rgba(178,192,214,.96);}
@media (prefers-reduced-motion:reduce){
  .seam__p--bad .chip,.is-in .seam__ring{animation:none;}
  .seam__link{stroke-dashoffset:0;}
  .is-in .seam__link{animation:none;}
}

/* ---------- the timeline (how the funnel runs) --------------- */
.tl{
  display:grid;gap:1px;margin-top:clamp(30px,5vh,52px);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:rgba(168,210,236,.11);border:1px solid rgba(168,210,236,.11);
  position:relative;
}
.tl__s{background:#05070C;padding:24px 22px 26px;position:relative;}
.tl__t{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0;
  font-variant-numeric:tabular-nums;
}
.tl__h{
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:#EAF2FF;margin:12px 0 0;letter-spacing:-.015em;
}
.tl__p{margin:9px 0 0;font-size:.9rem;line-height:1.58;color:rgba(155,169,191,.95);}
.tl__s::after{
  content:"";position:absolute;left:22px;right:0;top:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--si,0) * 160ms);
}
.tl.is-in .tl__s::after{transform:scaleX(1);}

/* ---------- principles --------------------------------------- */
.prin{
  display:grid;gap:1px;margin-top:clamp(30px,5vh,52px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  background:rgba(168,210,236,.11);border:1px solid rgba(168,210,236,.11);
}
.prin__c{
  background:#05070C;padding:28px 26px 30px;position:relative;overflow:hidden;
  transition:background .5s var(--ease);
}
.prin__c:hover{background:#080D16;}
.prin__n{
  font-family:var(--font-display);font-weight:800;font-size:2.4rem;
  letter-spacing:-.05em;line-height:1;color:rgba(168,210,236,.14);
  transition:color .5s var(--ease);
}
.prin__c:hover .prin__n{color:color-mix(in srgb,var(--accent) 55%,transparent);}
.prin__h{
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;
  letter-spacing:-.015em;color:#EAF2FF;margin:14px 0 0;
}
.prin__p{margin:11px 0 0;font-size:.93rem;line-height:1.62;color:rgba(158,172,194,.95);}

/* reveal states for the about-page components */
html.js .seam__p,html.js .prin__c,html.js .tl__s{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .7s var(--ease),transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--si,0) * 90ms);
}
html.js .seam__p.is-in,html.js .prin__c.is-in,html.js .tl__s.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html.js .seam__p,html.js .prin__c,html.js .tl__s{opacity:1;transform:none;transition:none;}
}


/* ---- pointer targets: the last few links measured under 24px ----
   Nothing here moves anything: each is already on its own line, so the
   padding lands in space the layout was leaving empty. */
.pg-spec dd a,.pg-say a,.lg-say a,
.lg-spec dd a,.pg-main dl dd > a{display:inline-block;padding-block:4px;}