/* ============================================================================
   ADEDAYO — AWAKENED RESILIENCE
   Consolidated rebuild. Identity unchanged: night, lapis, gold, vellum,
   EB Garamond over Karla, the animated bridge as the signature.
   Execution upgraded: fluid type scale, disciplined rhythm, finished
   micro-interactions, one gold hairline language throughout.
   ============================================================================ */

:root{
  /* ---- Revelation 21 jewel palette ----
     The colours of the new Jerusalem's foundation stones: sapphire, amethyst,
     emerald, jasper, topaz. A brighter, more radiant scheme than the old navy —
     heaven's colours, kept legible. */
  --sapphire:#1B3A8C;        /* the deep base — a living blue, not black-navy */
  --sapphire-deep:#122A6B;   /* darkest ground for hero/footer */
  --amethyst:#5B3E96;        /* violet accent for depth */
  --emerald:#1E7A5A;         /* used sparingly, and as the WhatsApp green kin */
  --lapis:#2E56B0;           /* mid blue for bands and figures */

  --gold:#D9A62C;            /* topaz/chrysolite gold — brighter than before */
  --gold-light:#F0C862;
  --gold-pale:#FBE7B4;

  --pearl:#FBF7F0;           /* the light ground — warmer, brighter vellum */
  --pearl-warm:#F5EDDF;
  --jasper:#E8C7A0;          /* soft warm stone for tints */

  /* Light jewel tints — for section backgrounds */
  --tint-sapphire:#EAF0FB;
  --tint-emerald:#E7F3ED;
  --tint-amethyst:#F1EBF7;
  --tint-jasper:#FBEEE2;
  --sapphire-line:#B9CBEC;
  --emerald-line:#B6D8C6;
  --amethyst-line:#D6C6E6;
  --jasper-line:#EBD3BC;

  --ink:#1C2333;             /* text on light — deep sapphire-ink, not grey */
  --muted:#5E6072;
  --rule:#E4DAC9;
  --wa:#1F7A4D;

  /* Legacy aliases kept so nothing breaks */
  --night:var(--sapphire);
  --night-deep:var(--sapphire-deep);
  --vellum:var(--pearl);
  --vellum-warm:var(--pearl-warm);
  --olive:var(--emerald);

  --display:"EB Garamond",Georgia,"Times New Roman",serif;
  --body:"Karla","Helvetica Neue",Arial,sans-serif;

  /* Fluid type scale, minor-third-ish */
  --t-xs:  clamp(.72rem,.7rem + .1vw,.78rem);
  --t-sm:  clamp(.86rem,.82rem + .2vw,.95rem);
  --t-base:clamp(1rem,.96rem + .25vw,1.08rem);
  --t-lg:  clamp(1.15rem,1.05rem + .5vw,1.35rem);
  --t-xl:  clamp(1.45rem,1.25rem + 1vw,1.9rem);
  --t-2xl: clamp(1.9rem,1.5rem + 2vw,2.8rem);
  --t-hero:clamp(2.3rem,1.7rem + 3.2vw,3.9rem);

  --measure:34rem;
  --gap:clamp(4.5rem,9vw,8rem);
  --gap-tight:clamp(3rem,6vw,5rem);
  --r:3px;

  --shadow-1:0 1px 2px rgba(18,42,107,.07),0 4px 14px rgba(18,42,107,.08);
  --shadow-2:0 2px 4px rgba(18,42,107,.1),0 14px 34px rgba(18,42,107,.16);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:var(--t-base);
  line-height:1.68;
  color:var(--ink);
  background:
    linear-gradient(180deg,
      var(--tint-sapphire) 0%,
      var(--tint-amethyst) 32%,
      var(--tint-jasper) 64%,
      var(--tint-emerald) 100%)
    fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--night-deep)}

@media(min-width:900px){
  ::-webkit-scrollbar{width:12px}
  ::-webkit-scrollbar-track{background:var(--vellum-warm)}
  ::-webkit-scrollbar-thumb{background:#CDBBA0;border:3px solid var(--vellum-warm);border-radius:8px}
  ::-webkit-scrollbar-thumb:hover{background:var(--gold)}
}

.wrap{width:100%;max-width:72rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.narrow{width:100%;max-width:46rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;z-index:200;background:var(--gold);color:var(--night-deep);padding:.8rem 1.4rem;font-weight:700;border-radius:0 0 var(--r) 0}
.skip:focus{left:0;top:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--night);
  margin:0 0 .55em;
  text-wrap:balance;
}
h1{font-size:var(--t-hero);line-height:1.06}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
p{margin:0 0 1.15em;max-width:var(--measure)}
li{max-width:var(--measure)}
.lead{font-size:var(--t-lg);line-height:1.55;color:#3A4155;max-width:38rem}
strong{color:var(--night)}

.eyebrow{
  display:flex;align-items:center;gap:.75rem;
  font-size:var(--t-xs);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.2rem;
}
.eyebrow::before{content:"";width:2rem;height:1px;background:var(--gold);flex:none}
.eyebrow.on-dark{color:var(--gold-light)}

.attrib{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:-.4rem 0 1.6rem;
}
.dark .attrib,.hero .attrib{color:#9DB0D6}

.verse{
  font-family:var(--display);font-style:italic;
  font-size:var(--t-lg);line-height:1.5;
  color:var(--night);
  border-left:2px solid var(--gold);
  padding:.35rem 0 .35rem 1.4rem;
  margin:2.2rem 0;max-width:var(--measure);
}
.verse cite{
  display:block;font-family:var(--body);font-style:normal;
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-top:.9rem;
}
.dark .verse{color:var(--vellum)}

.pullquote{
  position:relative;
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.5rem,1.1rem + 2.2vw,2.4rem);
  line-height:1.32;text-align:center;
  color:var(--vellum);
  max-width:24ch;margin-inline:auto;
  padding:3.2rem 0 2rem;
}
.pullquote::before{
  content:"\201C";
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  font-size:5.5rem;line-height:1;color:var(--gold);opacity:.85;
}
.pull{font-family:var(--display);font-style:italic;font-size:var(--t-xl);line-height:1.4;color:var(--night);max-width:30ch;margin:0 0 .6rem}
.dark .pull{color:var(--vellum)}
.pull-who{font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0}
.dark .pull-who{color:#9DB0D6}

.cap{font-size:var(--t-sm);color:var(--muted)}
.hint{font-size:var(--t-sm);color:var(--muted);margin-top:.9rem}

/* ---------- Masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:100;
  background:rgba(18,42,107,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(192,138,46,.28);
  transition:box-shadow .3s var(--ease);
}
.masthead.scrolled{box-shadow:0 6px 24px rgba(18,42,107,.35)}
.masthead .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;min-height:4.25rem;flex-wrap:wrap;padding-block:.6rem;
}
.brand{
  font-family:var(--display);font-size:1.3rem;color:var(--vellum);
  text-decoration:none;line-height:1.1;letter-spacing:.01em;
}
.brand span{
  display:block;font-family:var(--body);
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-light);margin-top:.2rem;
}
.nav{display:flex;flex-wrap:wrap;gap:.25rem 1.4rem}
.nav a{
  position:relative;
  font-size:var(--t-sm);color:#D9E2F5;text-decoration:none;
  padding:.35rem 0;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:var(--gold-light);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover,.nav a:focus-visible{color:var(--gold-pale)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--gold-light)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- Buttons ---------- */
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:1.8rem}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--body);font-size:var(--t-sm);font-weight:700;
  letter-spacing:.04em;text-decoration:none;
  padding:.95rem 1.7rem;border-radius:var(--r);
  border:1.5px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),
             background-color .25s var(--ease),border-color .25s var(--ease),
             color .25s var(--ease);
  will-change:transform;
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-gold{
  background:var(--gold);border-color:var(--gold);color:var(--night-deep);
  box-shadow:0 2px 8px rgba(192,138,46,.25);
}
.btn-gold:hover,.btn-gold:focus-visible{
  background:var(--gold-light);border-color:var(--gold-light);
  box-shadow:0 8px 22px rgba(192,138,46,.4);
}
.btn-ghost{background:transparent;border-color:var(--gold);color:var(--gold)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--gold);color:var(--night-deep);box-shadow:0 8px 22px rgba(192,138,46,.32)}
.btn-ghost.on-dark{border-color:var(--gold-light);color:var(--gold-light)}
.btn-ghost.on-dark:hover,.btn-ghost.on-dark:focus-visible{background:var(--gold-light);color:var(--night-deep)}

.btn-wa{background:var(--wa);border-color:var(--wa);color:#fff;box-shadow:0 2px 8px rgba(31,122,77,.28)}
.btn-wa:hover,.btn-wa:focus-visible{background:#25925C;border-color:#25925C;color:#fff;box-shadow:0 8px 22px rgba(31,122,77,.42)}
.btn-wa svg{width:1.15em;height:1.15em;flex:none;fill:currentColor}

.btn-mail{background:var(--sapphire);border-color:var(--sapphire);color:#fff;box-shadow:0 2px 8px rgba(27,58,140,.26)}
.btn-mail:hover,.btn-mail:focus-visible{background:var(--lapis);border-color:var(--lapis);color:#fff;box-shadow:0 8px 22px rgba(27,58,140,.4)}
.btn-mail svg{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.btn-mail span{overflow-wrap:anywhere}

/* ---------- Sections ---------- */
.section{padding-block:var(--gap)}
.section-tight{padding-block:var(--gap-tight)}
.rule-top{border-top:1px solid var(--rule)}

.dark{background:var(--night-deep);color:#D9E2F5}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--vellum)}
.dark .lead{color:#BCC9E6}
.dark p{color:#C7D3EC}
.dark strong{color:var(--vellum)}

.warm{background:var(--vellum-warm)}

/* ---------- Atmosphere ---------- */
.starfield{position:relative;overflow:hidden}
.starfield::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.1px 1.1px at 27% 42%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.6px 1.6px at 41% 12%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 55% 33%,rgba(255,255,255,.45),transparent),
    radial-gradient(1.8px 1.8px at 68% 8%,rgba(224,180,92,.75),transparent),
    radial-gradient(1.2px 1.2px at 78% 28%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.4px 1.4px at 88% 15%,rgba(255,255,255,.65),transparent),
    radial-gradient(1px 1px at 94% 46%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.3px 1.3px at 6% 55%,rgba(255,255,255,.45),transparent),
    radial-gradient(1.5px 1.5px at 34% 62%,rgba(224,180,92,.5),transparent),
    radial-gradient(1px 1px at 62% 58%,rgba(255,255,255,.35),transparent),
    radial-gradient(1.2px 1.2px at 84% 66%,rgba(255,255,255,.4),transparent);
}
.starfield>*{position:relative;z-index:1}

.dawnglow{position:relative}
.dawnglow::after{
  content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  width:140%;height:55%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 100%,
    rgba(224,180,92,.24) 0%,rgba(224,180,92,.09) 38%,transparent 68%);
}
.dawnglow>*{position:relative;z-index:1}

/* ---------- Hero ---------- */
.hero{
  background:var(--night-deep);color:#D9E2F5;
  padding-block:clamp(4rem,9vw,7rem) 0;
}
.hero h1{color:var(--vellum)}
.hero p{color:#C7D3EC}
.hero.has-dome{
  background:
    linear-gradient(to bottom,
      rgba(18,42,107,.86) 0%,rgba(18,42,107,.72) 34%,
      rgba(18,42,107,.88) 72%,var(--night-deep) 100%),
    image-set(
      url("img/hero-dome.webp") type("image/webp"),
      url("img/hero-dome.jpg") type("image/jpeg")
    ) center 18%/cover no-repeat,
    var(--night-deep);
}
@media(max-width:700px){
  .hero.has-dome{
    background:
      linear-gradient(to bottom,
        rgba(18,42,107,.88) 0%,rgba(18,42,107,.76) 34%,
        rgba(18,42,107,.9) 72%,var(--night-deep) 100%),
      image-set(
        url("img/hero-dome-sm.webp") type("image/webp"),
        url("img/hero-dome-sm.jpg") type("image/jpeg")
      ) center 22%/cover no-repeat,
      var(--night-deep);
  }
}
.hero.has-dome.starfield::before{opacity:.6}

.hero-split{display:grid;gap:clamp(2.2rem,4vw,3.8rem);align-items:center}
@media(min-width:56rem){.hero-split{grid-template-columns:1.05fr .95fr}}
.hero-split .figframe{max-width:29rem;margin-inline:auto}
@media(min-width:56rem){.hero-split .figframe{margin:0 0 0 auto}}

.hero-art-wrap{position:relative;margin-top:clamp(2rem,5vw,3.5rem);margin-bottom:-1px}
.hero-art{display:block;width:100%;height:auto}

/* ---------- Framed image ---------- */
.figframe{
  margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--night);
  border:1px solid rgba(224,180,92,.35);
  box-shadow:
    0 0 0 1px rgba(192,138,46,.2),
    0 0 55px rgba(192,138,46,.2),
    0 24px 60px rgba(0,0,0,.5);
}
.figframe img{width:100%;height:auto;display:block}
.figframe::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(18,42,107,.72) 0%,rgba(18,42,107,.1) 38%,transparent 70%),
    radial-gradient(ellipse at 50% 34%,rgba(224,180,92,.12),transparent 62%);
}
.figframe figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.3rem 1.5rem;
  font-family:var(--display);font-style:italic;
  font-size:var(--t-base);line-height:1.45;color:var(--gold-pale);
}
.figframe figcaption cite{
  display:block;font-family:var(--body);font-style:normal;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-light);margin-top:.55rem;
}
.shot{margin:0;border:1px solid rgba(192,138,46,.3);border-radius:var(--r);overflow:hidden;background:linear-gradient(155deg,var(--lapis),var(--night-deep))}
.shot img{width:100%;height:auto}
.shot figcaption{font-size:var(--t-xs);letter-spacing:.08em;padding:.8rem 1rem;color:#9DB0D6;border-top:1px solid rgba(192,138,46,.22)}
.slot{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1.5rem;
  font-size:var(--t-xs);letter-spacing:.08em;line-height:1.8;color:#93A3C6;
  border:1px dashed rgba(192,138,46,.45);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px);
}
.slot--cover{flex-direction:column;gap:.5rem;line-height:1.4;justify-content:center}
.slot--cover .slot__eyebrow{
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)
}
.slot--cover .slot__big{
  font-family:var(--serif,'EB Garamond',serif);font-size:clamp(1.8rem,4vw,2.6rem);
  letter-spacing:.02em;color:#EEF2FB;line-height:1.1
}
.slot--cover .slot__sub{
  font-size:var(--t-xs);letter-spacing:.06em;color:#93A3C6;max-width:16rem
}

/* ---------- Cards ---------- */
.cards{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin-top:2.4rem}
.card{
  position:relative;background:#fff;
  border:1px solid var(--rule);border-top:3px solid var(--gold);
  border-radius:var(--r);padding:1.8rem;
  box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-top-color:var(--gold-light)}
.card h3{font-size:var(--t-lg);margin-bottom:.4em}
.card p{font-size:var(--t-sm);margin-bottom:.9em}
.card p:last-child{margin-bottom:0}
.card-link{font-weight:700;color:var(--gold);text-decoration:none;font-size:var(--t-sm)}
.card-link:hover,.card-link:focus-visible{text-decoration:underline;text-underline-offset:3px}
.dark .card{background:rgba(255,255,255,.04);border-color:rgba(192,138,46,.28);border-top-color:var(--gold)}
.dark .card p{color:#C7D3EC}

/* ---------- Services ---------- */
.services{display:grid;gap:clamp(1.6rem,3vw,2.4rem);grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));margin-top:2.4rem}
.service{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.8rem,3vw,2.6rem);
  background:#fff;
  border:1px solid var(--rule);border-top:3px solid var(--gold);
  border-radius:var(--r);
  box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.service::before,.service::after{
  content:"";position:absolute;width:1.1rem;height:1.1rem;
  border:1.5px solid var(--gold);opacity:0;
  transition:opacity .3s var(--ease);pointer-events:none;
}
.service::before{top:.65rem;left:.65rem;border-right:0;border-bottom:0}
.service::after{bottom:.65rem;right:.65rem;border-left:0;border-top:0}
.service:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.service:hover::before,.service:hover::after{opacity:.8}
.dark .service,.warm .service{background:#fff}
.snum{font-size:var(--t-xs);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 .8rem}
.service h3{margin-top:0}
.service ul{list-style:none;padding:0;margin:0 0 1.6rem}
.service li{position:relative;padding:.5rem 0 .5rem 1.5rem;font-size:var(--t-sm)}
.service li::before{content:"";position:absolute;left:0;top:1.02rem;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.service .btn-row{margin-top:auto}

/* ---------- Path (numbered journey) ---------- */
.path{
  position:relative;
  display:grid;gap:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  margin-top:2.6rem;counter-reset:step;
}
@media(min-width:56rem){
  .path::before{
    content:"";position:absolute;top:1.25rem;left:3rem;right:3rem;
    border-top:1px dashed rgba(192,138,46,.55);
  }
}
.path-step{position:relative;padding-top:3.6rem}
.path-step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:0;left:0;
  width:2.5rem;height:2.5rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--vellum);
  border:1.5px solid var(--gold);border-radius:50%;
  color:var(--gold);font-weight:700;
  z-index:1;
  transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.dark .path-step::before{background:var(--night-deep)}
.path-step:hover::before{background:var(--gold);color:var(--night-deep);transform:scale(1.08)}
.path-step h3{font-size:var(--t-lg);margin:0 0 .4rem}
.path-step p{font-size:var(--t-sm);margin:0}

/* ---------- S.O.F.T. grid ---------- */
.soft-grid,.steps{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:2.4rem}
.soft-item{
  padding:1.6rem;border:1px solid rgba(192,138,46,.3);border-radius:var(--r);
  background:rgba(255,255,255,.04);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease);
}
.soft-item:hover{border-color:var(--gold);background:rgba(255,255,255,.07);transform:translateY(-3px)}
.soft-item h3{display:flex;align-items:baseline;gap:.7rem;font-size:var(--t-lg)}
.soft-item h3::before{
  font-family:var(--display);font-size:2.1rem;line-height:1;color:var(--gold-light);
}
.soft-item.S h3::before{content:"S"}
.soft-item.O h3::before{content:"O"}
.soft-item.F h3::before{content:"F"}
.soft-item.T h3::before{content:"T"}
.soft-item p{font-size:var(--t-sm);margin:0}
.gateway{display:block;width:100%;max-width:40rem;height:auto;margin:2.6rem auto 0}
.step-glyph{display:block;width:3.8rem;height:3.8rem;margin-bottom:1rem}

/* ---------- Books & detail lists ---------- */
.books{list-style:none;padding:0;margin:2rem 0 0}
.books li{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
  padding:1.25rem 0;border-bottom:1px solid var(--rule);
}
.books li:last-child{border-bottom:0}
.dark .books li{border-bottom-color:rgba(255,255,255,.12)}
.books .n{
  font-family:var(--display);font-size:1.5rem;color:var(--gold);
  min-width:1.6rem;text-align:center;
}
.books .tag,.tag{
  display:inline-block;font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(192,138,46,.5);
  border-radius:999px;padding:.18rem .6rem;margin-left:.5rem;vertical-align:middle;
}
.status{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.detail{list-style:none;padding:0;margin:1.6rem 0 0}
.detail li{
  display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--rule);
  font-size:var(--t-sm);
}
.detail li:last-child{border-bottom:0}
.dark .detail li{border-bottom-color:rgba(255,255,255,.12)}
.detail .k{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:var(--t-xs);color:var(--gold);padding-top:.15rem}

/* ---------- Split layouts ---------- */
.split{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr))}
.split-art{min-width:0}
.split.reverse .split-art{order:-1}
@media(max-width:700px){.split.reverse .split-art{order:0}}
.split-tall{align-items:stretch}
.split-tall .split-art{max-width:30rem}
@media(min-width:60rem){.split-tall{grid-template-columns:1.15fr .85fr}}

/* ---------- Forms ---------- */
.form{max-width:34rem}
.field{display:block;margin-bottom:1.15rem}
.field span{
  display:block;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--night);margin-bottom:.45rem;
}
.dark .field span{color:var(--gold-pale)}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--body);font-size:var(--t-base);
  padding:.85rem 1rem;color:var(--ink);
  background:#fff;border:1.5px solid #CDBBA0;border-radius:var(--r);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field input:hover,.field textarea:hover{border-color:var(--gold)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(192,138,46,.22);
}
.dark .field input,.dark .field textarea,.dark .field select{
  background:rgba(255,255,255,.06);border-color:rgba(192,138,46,.4);color:var(--vellum);
}
.form .btn{margin-top:.4rem}

/* ---------- Channels ---------- */
.channels{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:2rem}
.channel{
  padding:1.6rem;border:1px solid var(--rule);border-radius:var(--r);
  background:#fff;box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.channel:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.channel.primary{border:1.5px solid var(--wa);background:linear-gradient(165deg,rgba(31,122,77,.06),rgba(31,122,77,.02))}
.channel h3{font-size:var(--t-lg);margin:0 0 .3rem}
.channel .btn{width:100%;justify-content:center;text-align:center}
.channel p{font-size:var(--t-sm);margin:0 0 1rem}
.tagpref{
  display:inline-block;font-size:.64rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  background:var(--wa);color:#fff;
  padding:.22rem .65rem;border-radius:999px;margin-bottom:.7rem;
}
.dark .channel{background:rgba(255,255,255,.04);border-color:rgba(192,138,46,.3)}

/* ---------- Footer ---------- */
.foot{background:var(--night-deep);color:#9DB0D6;padding:3.5rem 0 2.2rem;font-size:var(--t-sm)}
.foot-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin-bottom:2.4rem}
.foot h4,.foot .foot-h{
  font-family:var(--body);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-light);margin:0 0 .9rem;
}
.foot p{color:#9DB0D6;font-size:var(--t-sm)}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.55rem}
.foot a{color:#D9E2F5;text-decoration:none;transition:color .25s var(--ease)}
.foot a:hover,.foot a:focus-visible{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px}
.foot-base{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.12);padding-top:1.4rem;
  font-size:var(--t-xs);letter-spacing:.04em;
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.seen,.reveal.in{opacity:1;transform:none}

/* ---------- Bridge & gateway animation ---------- */
.lightrun{
  transform-box:view-box;transform-origin:600px 430px;
  animation:lightrun 8s cubic-bezier(.42,0,.48,1) infinite;
  will-change:transform,opacity;
}
.lightrun-2{animation-delay:4s}
@keyframes lightrun{
  0%{transform:translateY(0) scale(1);opacity:0}
  10%{opacity:.5}
  62%{opacity:.3}
  88%{opacity:.06}
  100%{transform:translateY(-166px) scale(.1);opacity:0}
}
.rail{stroke-dasharray:60 380;animation:railsweep 8s cubic-bezier(.42,0,.48,1) infinite}
.rail-r{animation-delay:.12s}
@keyframes railsweep{
  0%{stroke-dashoffset:440;opacity:.35}
  20%{opacity:.9}
  100%{stroke-dashoffset:0;opacity:.35}
}
.archpulse{animation:archpulse 6s ease-in-out infinite}
@keyframes archpulse{0%,100%{opacity:.45}50%{opacity:.95}}
.horizonbreathe{
  transform-box:view-box;transform-origin:600px 300px;
  animation:horizonbreathe 12s ease-in-out infinite;
}
@keyframes horizonbreathe{
  0%,100%{opacity:.8;transform:scale(1)}
  50%{opacity:1;transform:scale(1.05)}
}
.skydrift{transform-box:view-box;animation:skydrift 40s ease-in-out infinite alternate}
@keyframes skydrift{from{transform:translateX(0)}to{transform:translateX(-14px)}}
@keyframes emberpulse{0%,100%{opacity:.55}50%{opacity:1}}
.ember{animation:emberpulse 5.5s ease-in-out infinite}
.ember-2{animation-delay:1.4s}
.ember-3{animation-delay:2.8s}
.ember-4{animation-delay:4.1s}
.node-ring{
  animation:nodelight 9s ease-in-out infinite;opacity:.3;
  will-change:opacity;
}
.node-2{animation-delay:2.2s}
.node-3{animation-delay:4.4s}
.node-4{animation-delay:6.6s}
@keyframes nodelight{
  0%,40%,100%{opacity:.3}
  12%{opacity:1}
  26%{opacity:.55}
}
.node-path{opacity:.4;animation:nodeglow 9s ease-in-out infinite;will-change:opacity}
@keyframes nodeglow{
  0%,100%{opacity:.3}
  50%{opacity:.6}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .btn:hover,.card:hover,.service:hover,.channel:hover,.soft-item:hover{transform:none}
  .lightrun{animation:none!important;opacity:.22}
  .rail{animation:none!important;stroke-dasharray:none;opacity:.65}
  .archpulse{animation:none!important;opacity:.8}
  .horizonbreathe,.skydrift,.ember{animation:none!important}
  .node-ring{animation:none!important;opacity:.7}
  .node-path{animation:none!important;stroke-dashoffset:0;opacity:.45}
}

/* ---------- Print ---------- */
@media print{
  .masthead,.foot,.btn-row,.hero-art-wrap{display:none}
  body{background:#fff;color:#000}
  .dark,.hero{background:#fff!important;color:#000}
  .dark h2,.hero h1{color:#000}
}

/* ---- Background fallbacks for browsers without image-set() ---- */
.hero-full{background-image:
  linear-gradient(100deg,rgba(18,42,107,.94) 0%,rgba(18,42,107,.82) 34%,rgba(18,42,107,.45) 62%,rgba(18,42,107,.25) 100%),
  url("img/bg-hero-v2.jpg")}
.bg-sky{background-image:url("img/bg-sky.jpg")}
.pagetop{background-image:
  linear-gradient(to bottom,rgba(18,42,107,.88),rgba(18,42,107,.94)),
  url("img/bg-sky.jpg")}

/* ============================================================================
   IMAGE-LED LAYER — full-bleed backgrounds, scripture bands, agency scale
   ============================================================================ */

/* ---- Full-bleed hero ---- */
.hero-full{
  position:relative;
  min-height:min(92vh,56rem);
  display:flex;align-items:center;
  color:#D9E2F5;
  background:
    linear-gradient(100deg,
      rgba(18,42,107,.90) 0%,rgba(18,42,107,.74) 34%,
      rgba(18,42,107,.32) 62%,rgba(18,42,107,.06) 100%),
    image-set(
      url("img/bg-hero-v2.webp") type("image/webp"),
      url("img/bg-hero-v2.jpg") type("image/jpeg")
    ) right center/cover no-repeat,
    var(--night-deep);
}
@media(max-width:700px){
  .hero-full{
    min-height:auto;
    padding-block:clamp(19rem,102vw,46rem) 4rem;
    background:
      linear-gradient(to bottom,
        rgba(18,42,107,.14) 0%,
        rgba(18,42,107,.18) 30%,
        rgba(18,42,107,.30) 55%,
        rgba(18,42,107,.34) 100%),
      image-set(
        url("img/bg-hero-sm.webp") type("image/webp"),
        url("img/bg-hero-sm.jpg") type("image/jpeg")
      ) center top/100% auto no-repeat,
      var(--night-deep);
  }
  .hero-full.starfield::before{opacity:.45}
}
.hero-full .rotor-quote{font-family:var(--display);font-weight:500;line-height:1.06;letter-spacing:-.01em;margin:0 0 .55em}
.hero-full h1,.hero-full .rotor-quote{
  color:var(--vellum);
  font-size:clamp(2.6rem,1.8rem + 4.2vw,4.6rem);
  max-width:14ch;
}
.hero-full p{color:#D3DEF3}
.hero-full .lead{color:#E1E9F8}
.hero-full .wrap{padding-block:clamp(4rem,10vh,7rem)}

/* ---- Scripture bands ---- */
.bgband{
  position:relative;
  padding-block:clamp(5rem,12vw,9rem);
  color:var(--vellum);
  background-size:cover;
  background-position:center;
  background-color:var(--night-deep);
}
.bgband::before{
  content:"";position:absolute;inset:0;
  background:rgba(18,42,107,.62);
}
.bgband>*{position:relative}
.bgband .verseband{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.5rem,1rem + 2.6vw,2.7rem);
  line-height:1.35;text-align:center;
  max-width:26ch;margin:0 auto .9rem;
  color:var(--vellum);
  text-shadow:0 2px 24px rgba(18,42,107,.8);
  text-wrap:balance;
}
.bgband cite{
  display:block;text-align:center;
  font-family:var(--body);font-style:normal;
  font-size:var(--t-xs);font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-light);
}
.bgband cite::before{
  content:"";display:block;width:2.6rem;height:1px;
  background:var(--gold-light);margin:0 auto 1rem;
}
.bg-sky{
  background-image:
    image-set(url("img/bg-sky.webp") type("image/webp"),
              url("img/bg-sky.jpg") type("image/jpeg"));
}
@media(max-width:700px){
      .bg-sky{background-image:image-set(url("img/bg-sky-sm.webp") type("image/webp"),url("img/bg-sky-sm.jpg") type("image/jpeg"))}
}

/* Quiet textured page-top for inner pages */
.pagetop{
  background:
    linear-gradient(to bottom,rgba(18,42,107,.88),rgba(18,42,107,.94)),
    image-set(url("img/bg-sky.webp") type("image/webp"),
              url("img/bg-sky.jpg") type("image/jpeg")) center/cover no-repeat,
    var(--night-deep);
  color:#D9E2F5;
}
.pagetop h1{color:var(--vellum)}
.pagetop p{color:#C7D3EC}
.pagetop .lead{color:#D6E0F3}

/* ============================================================================
   VIDEO + MOTION CLIPS
   ============================================================================ */

.video-shell{
  position:relative;max-width:56rem;margin:2.4rem auto 0;
  aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:var(--night) center/cover no-repeat;
  border:1px solid rgba(224,180,92,.35);
  box-shadow:0 0 0 1px rgba(192,138,46,.2),0 0 55px rgba(192,138,46,.18),0 24px 60px rgba(0,0,0,.5);
}
.video-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  background:linear-gradient(to top,rgba(18,42,107,.75),rgba(18,42,107,.25));
  border:0;cursor:pointer;color:var(--vellum);
  font-family:var(--body);font-size:var(--t-sm);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:background-color .3s var(--ease);
}
.video-play:hover,.video-play:focus-visible{background:rgba(18,42,107,.5)}
.video-play .ring{
  width:5rem;height:5rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:var(--night-deep);
  box-shadow:0 0 0 0 rgba(192,138,46,.5);
  animation:playpulse 2.6s ease-out infinite;
  transition:transform .3s var(--ease);
}
.video-play:hover .ring{transform:scale(1.08)}
.video-play .ring svg{width:1.8rem;height:1.8rem;fill:currentColor;margin-left:.25rem}
@keyframes playpulse{
  0%{box-shadow:0 0 0 0 rgba(192,138,46,.45)}
  70%{box-shadow:0 0 0 22px rgba(192,138,46,0)}
  100%{box-shadow:0 0 0 0 rgba(192,138,46,0)}
}
.video-note{text-align:center;font-size:var(--t-sm);color:#9DB0D6;margin:1rem auto 0;max-width:none}

/* AI motion clips — short muted loops */
.clip{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(192,138,46,.3);
  background:var(--night-deep);
}
.clip video{display:block;width:100%;height:auto}
.clip figcaption{
  font-size:var(--t-xs);letter-spacing:.08em;padding:.7rem 1rem;
  color:#9DB0D6;border-top:1px solid rgba(192,138,46,.22);
}
.clip-band{
  position:relative;overflow:hidden;
}
.clip-band>video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.clip-band::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(18,42,107,.6);
}
.clip-band>.wrap{position:relative;z-index:2}

@media(prefers-reduced-motion:reduce){
  .video-play .ring{animation:none}
  .clip video,.clip-band>video{display:none}
  .clip::after{content:"Animation paused (reduced motion)";display:block;padding:2rem;text-align:center;color:#9DB0D6;font-size:var(--t-sm)}
}

/* ---- Rotating hero headline ----
   Both quotes live in the same grid cell, so the box always sizes to the
   tallest quote and nothing can overlap the content below during a fade. */
.rotorbox{display:grid}
.rotorbox>.rotor{grid-area:1/1}
.rotor{transition:opacity .8s var(--ease)}
.rotor.fading{opacity:0}
.rotor-dots{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.2rem 0 0}
.rotor-dots span{
  width:.45rem;height:.45rem;border-radius:50%;
  background:rgba(224,180,92,.35);
  transition:background-color .4s var(--ease),transform .4s var(--ease);
}
.rotor-dots span.on{background:var(--gold-light);transform:scale(1.25)}
@media(prefers-reduced-motion:reduce){
  .rotor{transition:none}
  .rotor-dots{display:none}
}

/* ---- Split with image level with the heading ---- */
.split-top{align-items:start}
.split-top .split-art{max-width:30rem}
@media(min-width:60rem){.split-top{grid-template-columns:1.15fr .85fr}}
.split-top .figframe{position:sticky;top:6rem}
@media(max-width:700px){.split-top .figframe{position:static}}

/* ============================================================================
   HEADING RHYTHM — clear air between headings and the text that follows
   ============================================================================ */

h1{margin-bottom:.9em}
h2{margin-bottom:1em}
h3{margin-bottom:.7em}

/* Eyebrow sits close to its heading; the pair reads as one unit,
   then the gap opens before the body text. */
.eyebrow{margin-bottom:1.4rem}
.eyebrow+h1,.eyebrow+h2{margin-top:0}

/* Heading followed directly by body copy gets the full breath */
h1+p,h2+p{margin-top:0}
h1+.lead,h2+.lead{margin-top:0}
.lead{margin-bottom:1.6em}

/* Inside cards, services and steps the scale is smaller, so the gap is too —
   but still deliberate */
.card h3,.service h3,.channel h3{margin-bottom:.85em}
.soft-item h3{margin-bottom:.75em}
.path-step h3{margin-bottom:.6rem}
.steps h3{margin-bottom:.55em}

/* Section headings that introduce a grid or list get extra room before it */
h2+.cards,h2+.services,h2+.steps,h2+.soft-grid{margin-top:2.8rem}
h2+.books,h2+.detail,h2+.channels{margin-top:2.2rem}
.lead+.services,.lead+.path,.lead+.steps{margin-top:2.8rem}

/* ---- Video loop framed like the image frames ---- */
.clip{
  border:1px solid rgba(224,180,92,.35);
  box-shadow:0 0 0 1px rgba(192,138,46,.2),0 0 45px rgba(192,138,46,.16),0 20px 50px rgba(0,0,0,.4);
}
.clip video{width:100%;height:auto;display:block}
.split-top .clip{position:sticky;top:6rem}
@media(max-width:700px){.split-top .clip{position:static}}

/* ---- Larger media column for the "not an accident" section ---- */
@media(min-width:60rem){
  .split-media{grid-template-columns:.92fr 1.08fr;gap:clamp(2.5rem,4vw,4rem)}
}
.split-media .split-art{max-width:none}
.clip-fill{height:100%}
.clip-fill video,.clip-fill .loop-poster{
  width:100%;height:100%;object-fit:cover;
  min-height:clamp(22rem,40vw,34rem);
}
@media(max-width:700px){
  .clip-fill video,.clip-fill .loop-poster{min-height:0;height:auto}
}
.clip .loop-poster{display:block;width:100%;height:auto}
.loop-video[hidden],.loop-poster[hidden]{display:none!important}

.dark{background:linear-gradient(165deg,var(--sapphire),var(--sapphire-deep))!important}


/* ============================================================================
   JEWEL SECTIONS — the four foundation stones colour the page
   ============================================================================ */

/* Alternating jewel-tinted section backgrounds (opt-in classes) */
.on-sapphire{background:var(--tint-sapphire)}
.on-emerald{background:var(--tint-emerald)}
.on-amethyst{background:var(--tint-amethyst)}
.on-jasper{background:var(--tint-jasper)}

/* The four S.O.F.T. items each take a jewel */
.soft-item:nth-of-type(1){border-color:var(--sapphire-line);background:var(--tint-sapphire)}
.soft-item:nth-of-type(2){border-color:var(--amethyst-line);background:var(--tint-amethyst)}
.soft-item:nth-of-type(3){border-color:var(--emerald-line);background:var(--tint-emerald)}
.soft-item:nth-of-type(4){border-color:var(--jasper-line);background:var(--tint-jasper)}
.soft-item{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.soft-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-1)}
.soft-item .cap{color:var(--gold)}

/* The three "also here" cards each take a jewel top-border */
.cards .card:nth-of-type(1){border-top-color:var(--lapis)}
.cards .card:nth-of-type(2){border-top-color:var(--amethyst)}
.cards .card:nth-of-type(3){border-top-color:var(--emerald)}

/* Service cards: sapphire + amethyst */
.services .service:nth-of-type(1){border-top-color:var(--lapis)}
.services .service:nth-of-type(2){border-top-color:var(--amethyst)}

/* Path step numbers rotate jewels */
.path-step:nth-of-type(1)::before{border-color:var(--lapis);color:var(--lapis)}
.path-step:nth-of-type(2)::before{border-color:var(--amethyst);color:var(--amethyst)}
.path-step:nth-of-type(3)::before{border-color:var(--emerald);color:var(--emerald)}
.path-step:nth-of-type(4)::before{border-color:var(--gold);color:var(--gold)}

/* White cards on a coloured body get a hair more lift */
.card,.service,.channel{background:#FFFFFFF2}

/* ---- Book covers in the titles list ---- */
.books li{grid-template-columns:auto 88px 1fr;align-items:start}
.book-cover-img{
  width:88px;height:auto;border-radius:2px;
  box-shadow:0 2px 6px rgba(18,42,107,.18),0 8px 20px rgba(18,42,107,.14);
  border:1px solid rgba(18,42,107,.08);
}
.books li.no-cover{grid-template-columns:auto 88px 1fr}
.book-cover-slot{
  width:88px;aspect-ratio:2/3;border-radius:2px;
  border:1px dashed var(--gold);
  display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:.6rem;letter-spacing:.05em;
  color:var(--muted);padding:.4rem;line-height:1.3;
}
@media(max-width:520px){
  .books li{grid-template-columns:auto 64px 1fr;gap:.8rem}
  .book-cover-img,.book-cover-slot{width:64px}
}

/* ---- FIX: soft-item cards have light jewel backgrounds, so their text must be
   dark ink even when they sit inside a .dark section. ---- */
.dark .soft-item h3,
.soft-item h3{color:var(--sapphire-deep)}
.dark .soft-item p,
.soft-item p{color:#3A4056}
.soft-item h3::before{color:var(--gold)!important}
.soft-item .cap{color:var(--gold)!important}
.soft-item em{color:var(--amethyst);font-style:italic}
/* a touch more padding so text isn't tight to the edge */
.soft-item{padding:1.7rem 1.6rem}

/* ---- Gateway performance: contain paint + isolate the SVG so its animations
   don't force the whole section to re-composite. ---- */
.gateway{contain:paint;transform:translateZ(0)}

/* ---------- Photo gallery (about) ---------- */
.gallery{
  display:grid;gap:clamp(1.2rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin-top:2.4rem;
}
.gallery .shot img{
  width:100%;height:auto;display:block;
  aspect-ratio:4/5;object-fit:cover;object-position:center 22%;
}

/* ---------- Simple link list (404) ---------- */
.plain{list-style:none;padding:0;margin:1.2rem 0 0}
.plain li{margin:0 0 .7rem}
.plain a{font-size:1.05rem}

/* Home: bridge artwork with the short film beside it (stacked on small screens) */
.bridge-pair{display:grid;grid-template-columns:1fr}
.bridge-pair .hero-art-wrap{margin-bottom:0}
.bridge-video-cell{display:flex;align-items:center;justify-content:center;padding:1.25rem 16px 2rem;background:linear-gradient(180deg,#0F2559 0%,#1B3A8C 55%,#2E56B0 100%)}
.bridge-video{display:block;width:100%;max-width:560px;height:auto;aspect-ratio:848/478;border-radius:10px;border:1px solid rgba(240,200,98,.45);box-shadow:0 0 0 1px rgba(15,37,89,.6),0 18px 40px -12px rgba(0,0,0,.55),0 0 36px -6px rgba(240,200,98,.28);background:#0a1330;object-fit:cover}
@media(min-width:900px){
  .bridge-pair{grid-template-columns:3fr 2fr;align-items:stretch}
  .bridge-pair .hero-art-wrap{align-self:stretch;display:flex}
  .bridge-pair .hero-art{height:100%;min-height:100%}
  .bridge-video-cell{padding:2rem clamp(1.25rem,3vw,3rem) 2rem clamp(.5rem,1.5vw,1.25rem)}
}
/* Soft System page: growth deck download under "Start with the guide" */
.deck-dl{margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(240,200,98,.3)}
.deck-dl h3{margin-top:.25rem}
/* About page: profile PDF preview */
.profile-cover{position:relative;display:block;border-radius:10px;overflow:hidden;border:1px solid rgba(217,166,44,.55);box-shadow:0 18px 40px -16px rgba(15,37,89,.45);transition:transform .25s ease,box-shadow .25s ease}
.profile-cover img{display:block;width:100%;height:auto}
.profile-cover:hover,.profile-cover:focus-visible{transform:translateY(-3px);box-shadow:0 24px 48px -16px rgba(15,37,89,.55)}
.profile-cover-tag{position:absolute;right:.75rem;bottom:.75rem;background:var(--night-deep,#0F2559);color:var(--gold-light);font-size:var(--t-xs,.75rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px}
@media (prefers-reduced-motion:reduce){.profile-cover,.profile-cover:hover{transition:none;transform:none}}

/* ============================================================================
   ACCESSIBILITY LAYER (WCAG 2.2 AA)
   - Gold text on light backgrounds uses a deeper "gold ink" so it passes 4.5:1.
     Bright gold stays for dark backgrounds, where it already passes.
   - Focus rings are visible on both light and dark sections.
   - Pause controls for anything that moves or changes on its own.
   ============================================================================ */
:root{--gold-ink:#86600E}

.eyebrow,.detail .k,.snum,.books .n,.books .tag,.tag,.verse cite,.card-link,
.slot--cover .slot__eyebrow{color:var(--gold-ink)}
.eyebrow::before{background:var(--gold-ink)}
.soft-item .cap,.soft-item h3::before{color:var(--gold-ink)!important}
.path-step:nth-of-type(4)::before{color:var(--gold-ink);border-color:var(--gold-ink)}
.btn-ghost{color:var(--gold-ink);border-color:var(--gold-ink)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--gold-ink);border-color:var(--gold-ink);color:#fff}

/* Dark sections keep the bright gold */
.eyebrow.on-dark,
:is(.dark,.pagetop,.hero,.hero-full,.bgband,.clip-band,.foot) :is(.eyebrow,.detail .k,.snum,.books .n,.tag,.verse cite,.card-link){color:var(--gold-light)}
:is(.dark,.pagetop,.hero,.hero-full,.bgband,.clip-band) .eyebrow::before{background:var(--gold-light)}
.dark .path-step:nth-of-type(4)::before{color:var(--gold);border-color:var(--gold)}
.btn-ghost.on-dark,:is(.dark,.pagetop,.hero,.hero-full,.bgband) .btn-ghost{color:var(--gold-light);border-color:var(--gold-light)}
.btn-ghost.on-dark:hover,.btn-ghost.on-dark:focus-visible,
:is(.dark,.pagetop,.hero,.hero-full,.bgband) .btn-ghost:hover{background:var(--gold-light);color:var(--night-deep)}

/* Focus: deep blue ring on light backgrounds, gold ring on dark ones */
:focus-visible{outline:3px solid var(--sapphire-deep);outline-offset:3px}
:is(.masthead,.dark,.pagetop,.hero,.hero-full,.bgband,.clip-band,.foot,.bridge-video-cell) :focus-visible,
.skip:focus-visible{outline-color:var(--gold-light)}

/* Pause / play controls */
.motion-toggle{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;
  font:700 var(--t-xs)/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-light);background:transparent;border:1.5px solid rgba(240,200,98,.6);
  border-radius:999px;padding:.55rem .95rem;min-height:44px;cursor:pointer;
}
.motion-toggle:hover{background:rgba(240,200,98,.15)}
.motion-toggle svg{width:.9em;height:.9em;fill:currentColor}
.video-wrap{position:relative}
.video-wrap .motion-toggle{position:absolute;right:.75rem;bottom:.75rem;margin:0;background:rgba(18,42,107,.82);color:#FBF7F0;border-color:rgba(240,200,98,.7)}
.bridge-video-cell{flex-direction:column}
.bridge-video-cell .video-wrap{width:100%;max-width:560px}
/* Reflow at 320px (WCAG 1.4.10): grid columns never wider than the screen */
.services{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.split{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}
.cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.soft-grid,.steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.channels,.gallery{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.path{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.foot-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
@media(min-width:60rem){.split-tall,.split-top{grid-template-columns:1.15fr .85fr}}
@media(min-width:60rem){.split-media{grid-template-columns:.92fr 1.08fr}}
/* Separate, unticked marketing consent (UK GDPR / PECR) */
.field.consent{display:flex;gap:.7rem;align-items:flex-start}
.field.consent input{width:1.35rem;height:1.35rem;margin:.15rem 0 0;flex:none;accent-color:var(--sapphire)}
.field.consent label{font-size:var(--t-sm);line-height:1.5}

/* ============================================================================
   POLISH PASS (October 2026)
   ============================================================================ */

/* Headings now open each section on their own: give them the air the
   removed labels used to provide. */
.section > .wrap > h2:first-child,.section > .narrow > h2:first-child,
.section-tight > .wrap > h2:first-child{margin-top:0}

/* Hero: scripture dots and pause control sit on one line, with room before the lede */
.rotor-dots{display:inline-flex;vertical-align:middle;margin:1.2rem 1rem 0 0}
.rotor-dots + .motion-toggle{vertical-align:middle;margin-top:1.2rem;min-height:36px;padding:.45rem .9rem}
.hero-full .lead{margin-top:2.4rem}

/* Lists of short headed points (.steps): no stray bullets, clean grid */
ul.steps{list-style:none;padding:0}
ul.steps > li{max-width:none;padding-top:1.1rem;border-top:1px solid var(--rule)}
.dark ul.steps > li{border-top-color:rgba(255,255,255,.14)}
ul.steps h3{margin-top:0}

/* Pull quotes: the text carries its own quotation marks, so drop the duplicate glyph */
.pullquote{padding-top:0}
.pullquote::before{content:none}
.attrib-center{text-align:center;margin-inline:auto;max-width:none}
.bgband .attrib,.bgband .attrib-center{color:#C7D3EC}

/* Reader testimonial: centred, with a quiet gold rule */
.testimonial{background:var(--pearl)}
.testimonial blockquote{margin:0 auto;max-width:40rem;text-align:center}
.testimonial .pull{max-width:none;margin:0 auto .9rem;font-size:clamp(1.35rem,1.1rem + 1.2vw,1.85rem)}
.testimonial .pull-who{display:inline-flex;align-items:center;gap:.75rem;color:var(--muted)}
.testimonial .pull-who::before,.testimonial .pull-who::after{content:"";width:1.6rem;height:1px;background:var(--gold)}

/* Book cover placeholder: keep it calm */
.slot--cover .slot__big{color:#EEF2FB}

/* Text selection and caret follow the palette everywhere, including form fields */
input,textarea{caret-color:var(--sapphire)}
/* S.O.F.T. letters read as letters, not footnotes */
.soft-item .cap{display:block;font-family:var(--display);font-size:2.4rem;line-height:1;margin:0 0 .5rem}
.field textarea{min-height:9rem;resize:vertical}
/* Small text floors (11px+) and calmer tracking on captions */
.brand span{font-size:.7rem}
.figframe figcaption cite{font-size:.72rem}
.tagpref,.profile-cover-tag{font-size:.7rem}
.shot figcaption,.clip figcaption{letter-spacing:.04em}
/* Accent top borders meet square corners, not rounded ones */
.card,.service,.channel{border-radius:0 0 var(--r) var(--r)}
/* Mobile: framed images stay the anchor for their own captions */
@media(max-width:700px){.split-top .figframe{position:relative;top:auto}}