/* ============================================================
   Called to Build - Faith & Enterprise
   Static stylesheet. Navy + cream brand, periodic-element system.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --navy:      #0B3B6B;
  --navy-deep: #082C50;
  --cream:     #F9F8F2;
  --cream-2:   #EFEDE2;
  --ink:       #14181C;
  --brass:     #9A7B3F;

  --navy-08: rgba(11,59,107,.08);
  --navy-12: rgba(11,59,107,.12);
  --navy-20: rgba(11,59,107,.20);
  --cream-30: rgba(249,248,242,.30);
  --cream-60: rgba(249,248,242,.60);
  --brass-line: rgba(154,123,63,.62);
  --brass-30: rgba(154,123,63,.30);

  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-serif:   "Spectral", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --chamfer: 26px;
  --chamfer-d: 1.5px;   /* default outline (band) width */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section-y: clamp(5rem, 11vw, 9.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--cream);
  color:var(--navy);
  font-family:var(--font-serif);
  font-size:1.125rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:800; line-height:1; letter-spacing:-.02em; }
p{ margin:0; }
::selection{ background:var(--navy); color:var(--cream); }

/* ---------- Utilities ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- Chamfer (Brand Identity, 05 - Geometry & Construction) ----------
   One 45deg cut, top-right only. A CSS border cannot trace a clip-path
   diagonal and an SVG stroke is centred on the path (so it clips at the
   viewBox edge and renders the cut at ~2d). Outlined chamfers are therefore
   always TWO LAYERS: ::before carries the band colour at the full chamfer C,
   ::after is inset by the band width d on all four sides and cut at the
   corrected inner chamfer.

       Ci = C - (2 - sqrt2)*d  ~=  C - 0.586d

   The inset counts twice on a 45deg edge, so an inner cut of C would leave the
   band reading 1.41d across the diagonal against d on the straight edges.
   Subtracting 0.586d pulls the inner diagonal back to an even width.

   Expressed in the OUTER coordinate system the inner diagonal point lands at
   (100% - d - Ci) = (100% - C - 0.414d). That "+0.414d" is a restatement of the
   same identity, not the superseded rule - the shipped values below all measure
   at a diagonal:straight ratio of 1.00. Use --C and --d and let calc() do it.  */
.cham{
  --C: var(--chamfer);
  --d: var(--chamfer-d);
  --Ci: calc(var(--C) - (var(--d) * 0.586));
  position:relative; isolation:isolate;
  background:transparent; border:0;
}
.cham::before{ /* band layer - traces the chamfer */
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--cham-line, var(--navy-12));
  clip-path:polygon(0 0, calc(100% - var(--C)) 0, 100% var(--C), 100% 100%, 0 100%);
  transition:background .45s var(--ease);
}
.cham::after{ /* fill layer - inset by d, cut at Ci */
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--cham-fill, var(--cream));
  clip-path:polygon(
    var(--d) var(--d),
    calc(100% - var(--d) - var(--Ci)) var(--d),
    calc(100% - var(--d)) calc(var(--d) + var(--Ci)),
    calc(100% - var(--d)) calc(100% - var(--d)),
    var(--d) calc(100% - var(--d))
  );
  transition:background .45s var(--ease);
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.7em;
  color:var(--brass);
}
.eyebrow::before{
  content:"";
  width:1.6em; height:1px;
  background:var(--brass);
  display:inline-block;
}
.eyebrow--cream{ color:var(--brass); }
.dot{ color:var(--brass); }

/* Two-layer chamfer, per the .cham utility above. */
.btn{
  --C: 11px;
  --d: 1.5px;
  --Ci: calc(var(--C) - (var(--d) * 0.586));
  --btn-border: var(--navy);
  --btn-fill:   var(--navy);
  --btn-bg:     var(--cream);
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display); font-weight:600;
  font-size:.98rem; letter-spacing:.01em;
  padding:.85em 1.5em;
  text-decoration:none;
  background:transparent; border:0; color:var(--cream);
  transition:color .35s var(--ease), transform .35s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--btn-border);
  clip-path:polygon(0 0, calc(100% - var(--C)) 0, 100% var(--C), 100% 100%, 0 100%);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--btn-fill);
  clip-path:polygon(
    var(--d) var(--d),
    calc(100% - var(--d) - var(--Ci)) var(--d),
    calc(100% - var(--d)) calc(var(--d) + var(--Ci)),
    calc(100% - var(--d)) calc(100% - var(--d)),
    var(--d) calc(100% - var(--d))
  );
  transition:background .35s var(--ease);
}
.btn:hover{ color:var(--navy); transform:translateY(-2px); }
.btn:hover::after{ background:var(--btn-bg); }

.btn--ghost{ color:var(--navy); }
.btn--ghost::after{ background:var(--btn-bg); }
.btn--ghost:hover{ color:var(--cream); }
.btn--ghost:hover::after{ background:var(--navy); }

.btn--cream{ --btn-border:var(--cream); --btn-fill:var(--cream); --btn-bg:var(--navy); color:var(--navy); }
.btn--cream:hover{ color:var(--cream); }
.btn--cream:hover::after{ background:var(--btn-bg); }

.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

:focus-visible{ outline:2.5px solid var(--brass); outline-offset:3px; }

/* anchor offset for fixed header */
section[id]{ scroll-margin-top:88px; }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding-block:1.4rem;
}
.site-header.scrolled{
  background:rgba(249,248,242,.86);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 var(--navy-12);
  padding-block:.85rem;
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:2rem; width:100%; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand img{ height:34px; width:auto; transition:height .4s var(--ease); }
.scrolled .brand img{ height:30px; }
.nav-links{ display:flex; align-items:center; gap:2.1rem; }
.nav-links a{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; color:var(--navy);
  position:relative; padding:.3em 0; transition:color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:var(--brass); transition:width .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{ width:100%; }
.nav-cta{ display:inline-flex; }
.nav-toggle{ display:none; }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:7rem; padding-bottom:4rem;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
}
/* blueprint grid */
.hero-bg::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--navy-08) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-08) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 62%);
          mask-image:radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 62%);
  opacity:.6;
}
.foundation{
  position:absolute;
  top:-8%; right:-14%;
  width:min(70vw, 760px); height:auto;
  color:var(--navy-20);
  opacity:.5;
}
.foundation svg{ width:100%; height:auto; display:block; }

.hero-inner{ position:relative; z-index:1; max-width:none; }
.hero .eyebrow{ margin-bottom:1.6rem; }
.hero h1{
  font-size:clamp(3.1rem, 10.5vw, 8.2rem);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:.92;
  margin-bottom:1.6rem;
}
.hero h1 .dot{
  display:inline-block; vertical-align:baseline;
  width:.14em; height:.14em; margin-left:.04em;
  background:var(--brass); text-indent:-9999px; overflow:hidden;
  clip-path:polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
}
.hero-lead{
  font-family:var(--font-serif);
  font-size:clamp(1.15rem, 2.3vw, 1.5rem);
  line-height:1.55;
  max-width:34ch;
  color:var(--navy);
  margin-bottom:2.4rem;
}
.hero-lead em{ font-style:italic; color:var(--brass); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; }
.scroll-cue{
  position:absolute; left:var(--gutter); bottom:1.8rem; z-index:1;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--navy);
  display:flex; align-items:center; gap:.7rem; opacity:.55;
}
.scroll-cue .line{
  width:46px; height:1px; background:var(--navy);
  position:relative; overflow:hidden;
}
.scroll-cue .line::after{
  content:""; position:absolute; inset:0; width:40%;
  background:var(--brass);
  animation:slide 2.4s var(--ease) infinite;
}
@keyframes slide{ 0%{transform:translateX(-100%);} 60%,100%{transform:translateX(260%);} }

/* ============================================================
   Thesis (navy sandwich)
   ============================================================ */
.thesis{
  position:relative;
  background:var(--navy);
  color:var(--cream);
  padding-block:var(--section-y);
}
.thesis .eyebrow{ color:var(--brass); margin-bottom:2.4rem; }
.thesis-lead{
  display:grid; grid-template-columns:1.1fr 0.9fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.thesis .scripture{
  margin:0; padding:.2rem 0 .2rem 1.5rem;
  border-left:2px solid var(--brass);
  max-width:none;
}
.thesis .scripture p{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.35rem, 3vw, 2.15rem); line-height:1.4; color:var(--cream);
}
.thesis .scripture cite{
  display:block; margin-top:.9rem; font-style:normal;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass);
}
.thesis-statement{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(1.55rem, 4.2vw, 3rem);
  line-height:1.32;
  letter-spacing:-.01em;
  max-width:none;
}
.thesis-statement .hl{ color:var(--brass); font-style:italic; }
.tenets{
  margin-top:clamp(3rem,7vw,5rem);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--cream-30);
  border-top:1px solid var(--cream-30); border-bottom:1px solid var(--cream-30);
}
.tenet{ background:var(--navy); padding:2rem 1.6rem 2.1rem; }
.tenet .k{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass); display:block; margin-bottom:1rem;
}
.tenet p{ font-family:var(--font-serif); font-size:1.08rem; line-height:1.55; color:var(--cream); }
.tenet p b{ font-weight:600; }
.driving{
  margin-top:clamp(3rem,7vw,4.5rem);
  display:flex; gap:1.4rem; align-items:flex-start;
  max-width:46ch;
}
.driving .q{ font-family:var(--font-mono); font-size:1.6rem; color:var(--brass); line-height:1; }
.driving p{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.25rem,2.6vw,1.85rem); line-height:1.25; letter-spacing:-.015em;
  color:var(--cream);
}

/* ============================================================
   Four Journeys - the element system (signature)
   ============================================================ */
.journeys{ padding-block:var(--section-y); }
.section-head{ max-width:var(--maxw); }
.section-head .eyebrow{ margin-bottom:1.5rem; }
.section-head h2{
  font-size:clamp(2.1rem, 5.4vw, 3.6rem);
  font-weight:800; letter-spacing:-.025em; line-height:1.02;
  max-width:16ch;
}
.section-head .sub{
  margin-top:1.4rem; max-width:52ch;
  font-family:var(--font-serif); font-size:1.15rem; line-height:1.65;
  color:var(--navy);
}

/* progression track */
.track{
  display:flex; align-items:center; gap:.8rem;
  margin-top:clamp(2.6rem,5vw,3.4rem);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy);
  flex-wrap:wrap;
}
.track .stage{ display:inline-flex; align-items:center; gap:.8rem; }
.track .stage span{ opacity:.65; }
.track .arrow{ color:var(--brass); }

.tile-grid{
  margin-top:2rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
}
.tile{
  --C: var(--chamfer);
  --d: var(--chamfer-d);
  --Ci: calc(var(--C) - (var(--d) * 0.586));
  --cham-line: var(--brass-line);
  --cham-fill: var(--cream-2);
  /* Ink follows the fill. Set as an inherited token, not as .tile--current .sym
     overrides: those tie at (0,2,0) with the .tile .sym rules below and would
     lose on source order. The brass elements (.num, .domain, .flag) never
     change - they read on cream-2 and on navy alike. */
  --tile-ink: var(--navy);
  --tag-op: .55;
  position:relative; isolation:isolate;
  background:transparent; border:0;
  padding:1.6rem 1.5rem 1.8rem;
  min-height:340px;
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease);
}
.tile::before{ /* band layer (traces the chamfer) */
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--cham-line);
  clip-path:polygon(0 0, calc(100% - var(--C)) 0, 100% var(--C), 100% 100%, 0 100%);
  transition:background .45s var(--ease);
}
.tile::after{ /* fill layer (inset by d, cut at Ci -> uniform band) */
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--cham-fill);
  clip-path:polygon(
    var(--d) var(--d),
    calc(100% - var(--d) - var(--Ci)) var(--d),
    calc(100% - var(--d)) calc(var(--d) + var(--Ci)),
    calc(100% - var(--d)) calc(100% - var(--d)),
    var(--d) calc(100% - var(--d))
  );
  transition:background .45s var(--ease);
}
.tile:hover{
  transform:translateY(-6px);
  --cham-line: var(--navy); --cham-fill: var(--navy);
  --tile-ink: var(--cream); --tag-op: .7;
}

/* The journey currently running. Navy fill, cream symbol, brass band -
   the same treatment as the exported ps_tile_navy asset. Readable at rest:
   this tile is navy-filled without any hover, so the ink must flip with it. */
.tile--current{
  --cham-line: var(--brass);
  --cham-fill: var(--navy);
  --tile-ink: var(--cream);
  --tag-op: .7;
}
.tile--current .rule{
  display:block; height:2px; width:52px; background:var(--brass);
  margin:.1rem 0 .9rem;
}
.tile--current:hover{ --cham-line: var(--brass); --cham-fill: var(--navy-deep); }
/* Status marker: mono label + a 6px chamfered brass tick, matching
   .res-card .status. Brass is the tick only - never a fill behind text
   (Brand Identity 02: "Brass is never a fill"). The label takes --tile-ink
   so it stays readable on whichever fill the tile is carrying. */
.tile .flag{
  margin-top:1.1rem; align-self:flex-start;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tile-ink);
  display:inline-flex; align-items:center; gap:.55em;
}
.tile .flag::before{
  content:""; width:6px; height:6px; flex:none;
  background:var(--brass);
  clip-path:polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
}
.tile-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.tile .num{
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.1em; color:var(--brass); flex:none;
}
.tile .stage-tag{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tile-ink); opacity:var(--tag-op); text-align:right;
  transition:color .45s var(--ease), opacity .45s var(--ease);
}
.tile .sym{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(3rem,5vw,4.4rem); letter-spacing:-.04em; line-height:.9;
  margin:1.4rem 0 .2rem; color:var(--tile-ink);
  transition:color .45s var(--ease);
}
.tile .name{
  font-family:var(--font-display); font-weight:700; font-size:1.18rem;
  letter-spacing:-.01em; color:var(--tile-ink); margin-bottom:.15rem;
  transition:color .45s var(--ease);
}
.tile .domain{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brass); margin-bottom:1rem;
}
.tile .desc{
  font-family:var(--font-serif); font-size:.98rem; line-height:1.5;
  color:var(--tile-ink); margin-top:auto; opacity:.9;
  transition:color .45s var(--ease);
}

/* ============================================================
   Current journey - Problem-Solving
   ============================================================ */
.journey{
  background:var(--cream-2); padding-block:var(--section-y);
  border-top:1px solid var(--navy-08);
}
.journey .section-head .sub{ color:var(--navy); }
.journey .section-head h2{ max-width:20ch; }

/* the journey's own subtitle, set as a serif kicker under the headline */
.kicker{
  margin-top:1rem;
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.2rem,2.6vw,1.7rem); line-height:1.3; color:var(--brass);
}

/* scripture on a light ground (the .thesis variant is tuned for navy) */
.scripture--ink{
  margin:0; padding:.2rem 0 .2rem 1.5rem;
  border-left:2px solid var(--brass);
}
.scripture--ink p{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.2rem,2.6vw,1.75rem); line-height:1.42; color:var(--navy);
}
.scripture--ink cite{
  display:block; margin-top:.9rem; font-style:normal;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass);
}
.journey-lead{
  margin-top:clamp(2.6rem,5vw,3.6rem);
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.journey-lead .body{
  font-family:var(--font-serif); font-size:1.1rem; line-height:1.68; color:var(--navy);
}
.journey-lead .body p + p{ margin-top:1.1rem; }
.journey-lead .body b{ font-weight:600; }

/* the eight-step cycle */
.cycle{
  margin-top:clamp(2.8rem,5vw,3.8rem);
  padding-top:clamp(2rem,4vw,2.6rem);
  border-top:1px solid var(--navy-12);
}
.cycle .cycle-label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass); display:block; margin-bottom:1.4rem;
}
.cycle-steps{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .7rem;
  list-style:none; margin:0; padding:0;
}
.cycle-steps li{ display:inline-flex; align-items:center; gap:.7rem; }
.cycle-steps .step{
  display:inline-flex; align-items:baseline; gap:.5rem;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em;
  color:var(--navy); padding:.4em .75em;
  background:var(--cream);
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.cycle-steps .step .i{ font-size:.66rem; color:var(--brass); }
.cycle-steps .step--now{ background:var(--navy); color:var(--cream); }
.cycle-steps .step--now .i{ color:var(--brass); }
.cycle-steps .sep{ color:var(--brass); font-family:var(--font-mono); font-size:.8rem; }
.cycle-note{
  margin-top:1.3rem; max-width:56ch;
  font-family:var(--font-serif); font-size:1rem; line-height:1.6; color:var(--navy); opacity:.85;
}

/* ============================================================
   The five facets - the fivefold gifts of a complete solver
   ============================================================ */
.facets{ background:var(--navy); color:var(--cream); padding-block:var(--section-y); }
.facets .section-head h2{ color:var(--cream); max-width:18ch; }
.facets .section-head .sub{ color:rgba(249,248,242,.86); max-width:60ch; }
.facets .section-head .sub b{ font-weight:600; color:var(--cream); }
.facet-grid{
  margin-top:clamp(2.8rem,5vw,3.6rem);
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:1px; background:var(--cream-30);
  border-top:1px solid var(--cream-30); border-bottom:1px solid var(--cream-30);
}
.facet{ background:var(--navy); padding:1.9rem 1.3rem 2rem; display:flex; flex-direction:column; }
.facet .gift{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass); margin-bottom:.9rem;
}
.facet h3{
  font-family:var(--font-display); font-weight:800; font-size:1.22rem;
  letter-spacing:-.015em; color:var(--cream); margin-bottom:.8rem;
}
.facet p{
  font-family:var(--font-serif); font-size:.98rem; line-height:1.55;
  color:rgba(249,248,242,.84);
}
.facets-note{
  margin-top:clamp(2.6rem,5vw,3.4rem);
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.facets-note > p{
  font-family:var(--font-serif); font-size:1.08rem; line-height:1.62;
  color:rgba(249,248,242,.86);
}
.scripture--reverse{
  margin:0; padding:.2rem 0 .2rem 1.5rem; border-left:2px solid var(--brass);
}
.scripture--reverse p{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.45; color:var(--cream);
}
.scripture--reverse cite{
  display:block; margin-top:.9rem; font-style:normal;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass);
}
.facets .driving{ color:var(--cream); }

/* a heading for a block inside a section */
.block-head{
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:clamp(2.2rem,4vw,3rem);
  border-top:1px solid var(--navy-12);
}
.block-head .eyebrow{ display:block; margin-bottom:1rem; }
.block-head h3{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,3vw,2rem);
  letter-spacing:-.02em; color:var(--navy);
}

/* ============================================================
   Sessions - four parts, eight sessions on the spine
   ============================================================ */
.sessions{ padding-block:var(--section-y); }

/* what a member walks away able to do */
.promise{
  margin:1.8rem 0 0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:.1rem 2.6rem;
  list-style:none; padding:0;
}
.promise li{
  display:grid; grid-template-columns:auto 1fr; gap:1rem;
  padding:1rem 0; border-bottom:1px solid var(--navy-12);
  font-family:var(--font-serif); font-size:1.02rem; line-height:1.55; color:var(--navy);
}
.promise li .m{ font-family:var(--font-mono); font-size:.7rem; color:var(--brass); padding-top:.35em; }

.part-label{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin:clamp(2.4rem,4vw,3rem) 0 .4rem; padding-bottom:.9rem;
  border-bottom:1px solid var(--navy-20);
}
.part-label:first-child{ margin-top:clamp(2.8rem,5vw,3.6rem); }
.part-label .p{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brass);
}
.part-label h3{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  letter-spacing:-.01em; color:var(--navy);
}
.spine{
  margin-top:clamp(3rem,6vw,4.5rem);
  position:relative;
  display:grid; gap:0;
}
.spine::before{
  content:""; position:absolute; left:13px; top:8px; bottom:8px; width:2px;
  background:var(--navy-20);
}
.phase{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.6rem;
  padding:1.6rem 0;
  border-bottom:1px solid var(--navy-12);
}
.phase:last-child{ border-bottom:0; }
.node{
  --C: 8px;
  --d: 2px;
  --Ci: calc(var(--C) - (var(--d) * 0.586));
  position:relative; z-index:1; isolation:isolate;
  width:28px; height:28px; flex:none;
  background:transparent; border:0;
  display:grid; place-items:center;
  transition:transform .4s var(--ease);
}
.node::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--cham-line, var(--navy));
  clip-path:polygon(0 0, calc(100% - var(--C)) 0, 100% var(--C), 100% 100%, 0 100%);
}
.node::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--cham-fill, var(--cream));
  clip-path:polygon(
    var(--d) var(--d),
    calc(100% - var(--d) - var(--Ci)) var(--d),
    calc(100% - var(--d)) calc(var(--d) + var(--Ci)),
    calc(100% - var(--d)) calc(100% - var(--d)),
    var(--d) calc(100% - var(--d))
  );
  transition:background .4s var(--ease);
}
.node span{
  font-family:var(--font-mono); font-size:.72rem; font-weight:500; color:var(--navy);
  transition:color .4s var(--ease);
}
.phase:hover .node::after{ background:var(--navy); }
.phase:hover .node span{ color:var(--cream); }
.phase-body{ display:grid; grid-template-columns:1fr; gap:.5rem; }
.phase-head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.phase-head h3{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,3vw,2rem);
  letter-spacing:-.02em; color:var(--navy);
}
.phase-head .sessions{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brass);
}
.phase-body .focus{
  font-family:var(--font-serif); font-size:1.1rem; line-height:1.55; color:var(--navy);
  max-width:54ch;
}
.phase-body .focus b{ font-weight:600; }

/* session meta - which facet the session trains, and its scripture anchors */
.session-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem;
  margin-top:.35rem;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase;
}
.session-meta .facet-tag{ color:var(--navy); opacity:.6; }
.session-meta .anchor{ color:var(--brass); }
.session-meta .dot-sep{ color:var(--navy); opacity:.3; }

/* the session running now */
.phase--now .node{ --cham-line: var(--brass); --cham-fill: var(--navy); }
.phase--now .node span{ color:var(--cream); }
.phase-head .now-tag{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy);
  display:inline-flex; align-items:center; gap:.55em;
}
.phase-head .now-tag::before{
  content:""; width:6px; height:6px; flex:none;
  background:var(--brass);
  clip-path:polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
}

/* ============================================================
   The rhythm - 90 minutes, four beats
   ============================================================ */
.rhythm{
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:clamp(2.2rem,4vw,3rem);
  border-top:1px solid var(--navy-12);
}
.rhythm .rhythm-head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.rhythm .rhythm-head h3{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,3vw,2rem);
  letter-spacing:-.02em; color:var(--navy);
}
.rhythm .rhythm-head .total{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass);
}
.rhythm .rhythm-sub{
  margin-top:1rem; max-width:58ch;
  font-family:var(--font-serif); font-size:1.05rem; line-height:1.62; color:var(--navy);
}
.beats{
  margin-top:clamp(1.8rem,3.5vw,2.4rem);
  display:grid; grid-template-columns:10fr 30fr 35fr 15fr; gap:.6rem;
}
.beat{
  --C: 12px;
  --d: var(--chamfer-d);
  --Ci: calc(var(--C) - (var(--d) * 0.586));
  --cham-line: var(--brass-line);
  --cham-fill: var(--cream-2);
  position:relative; isolation:isolate;
  padding:1.3rem 1.15rem 1.4rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.beat::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--cham-line);
  clip-path:polygon(0 0, calc(100% - var(--C)) 0, 100% var(--C), 100% 100%, 0 100%);
}
.beat::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--cham-fill);
  clip-path:polygon(
    var(--d) var(--d),
    calc(100% - var(--d) - var(--Ci)) var(--d),
    calc(100% - var(--d)) calc(var(--d) + var(--Ci)),
    calc(100% - var(--d)) calc(100% - var(--d)),
    var(--d) calc(100% - var(--d))
  );
}
.beat .min{
  font-family:var(--font-display); font-weight:800; font-size:1.7rem;
  letter-spacing:-.03em; line-height:1; color:var(--navy);
}
.beat .min sub{ font-family:var(--font-mono); font-size:.5rem; letter-spacing:.14em; color:var(--brass); vertical-align:baseline; margin-left:.35em; }
.beat .b{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brass);
}
.beat p{
  font-family:var(--font-serif); font-size:.93rem; line-height:1.5; color:var(--navy); opacity:.9;
}

/* ============================================================
   Resources
   ============================================================ */
.resources{ background:var(--cream-2); padding-block:var(--section-y); }
.resources .res-card{ --cham-fill: var(--cream); }
.res-grid{
  margin-top:clamp(2.6rem,5vw,3.4rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
.res-card{
  --C: 18px;
  --d: var(--chamfer-d);
  --Ci: calc(var(--C) - (var(--d) * 0.586));
  position:relative; isolation:isolate;
  padding:1.7rem 1.5rem 1.6rem;
  background:transparent; border:0;
  display:flex; flex-direction:column; gap:.7rem; min-height:160px;
}
.res-card::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--cham-line, var(--navy-12));
  clip-path:polygon(0 0, calc(100% - var(--C)) 0, 100% var(--C), 100% 100%, 0 100%);
}
.res-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--cham-fill, var(--cream));
  clip-path:polygon(
    var(--d) var(--d),
    calc(100% - var(--d) - var(--Ci)) var(--d),
    calc(100% - var(--d)) calc(var(--d) + var(--Ci)),
    calc(100% - var(--d)) calc(100% - var(--d)),
    var(--d) calc(100% - var(--d))
  );
}
.res-card .ico{
  width:34px; height:34px; color:var(--navy);
}
.res-card h3{
  font-family:var(--font-display); font-weight:700; font-size:1.2rem;
  letter-spacing:-.01em; color:var(--navy);
}
.res-card p{ font-family:var(--font-serif); font-size:.98rem; line-height:1.5; color:var(--navy); opacity:.85; }
.res-card .status{
  margin-top:auto;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass);
  display:inline-flex; align-items:center; gap:.55em;
}
.res-card .status::before{
  content:""; width:6px; height:6px;
  background:var(--brass);
  clip-path:polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
}
.res-foot{
  margin-top:2rem;
  font-family:var(--font-serif); font-size:1.05rem; line-height:1.6; color:var(--navy);
}
.res-foot a{ color:var(--brass); text-decoration:none; border-bottom:1px solid var(--brass-30); transition:border-color .3s var(--ease); }
.res-foot a:hover{ border-color:var(--brass); }

/* ============================================================
   Get involved
   ============================================================ */
.involve{ background:var(--navy); color:var(--cream); padding-block:var(--section-y); }
.involve .eyebrow{ color:var(--brass); margin-bottom:1.5rem; }
.involve-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.involve h2{
  font-size:clamp(2.2rem,5.4vw,3.7rem); font-weight:800; letter-spacing:-.025em; color:var(--cream);
}
.involve h2 .dot{ color:var(--brass); }
.involve .blurb{
  margin-top:1.5rem; max-width:40ch;
  font-family:var(--font-serif); font-size:1.15rem; line-height:1.65; color:var(--cream-60);
}
.involve .blurb strong{ color:var(--cream); font-weight:600; }
.contact-meta{
  margin-top:2.4rem; display:grid; gap:1rem;
}
.contact-meta .row{ display:flex; gap:1rem; align-items:flex-start; }
.contact-meta .row .k{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); min-width:7.5rem; padding-top:.25rem;
}
.contact-meta .row .v{ font-family:var(--font-serif); font-size:1.02rem; line-height:1.5; color:var(--cream); }

/* form */
.form{ display:grid; gap:1.2rem; }
.field{ display:grid; gap:.5rem; }
.field label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream-60);
}
.field input, .field select, .field textarea{
  font-family:var(--font-serif); font-size:1rem; color:var(--cream);
  background:transparent;
  border:1.5px solid var(--cream-30);
  padding:.85em 1em;
  width:100%;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(249,248,242,.4); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brass); background:rgba(249,248,242,.04);
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A7B3F' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1em center; padding-right:2.6em;
}
.field select option{ color:var(--navy); background:var(--cream); }
.form .actions{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:.3rem; }
.form .note{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; color:var(--cream-60); }
/* Honeypot: kept in the DOM for bots, taken off-screen for people & AT */
.hp{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px; height:1px; overflow:hidden;
}
.form-status{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em; min-height:1.2em; }
.form-status.ok{ color:#7FB58A; }
.form-status.err{ color:#D08A6E; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--navy-deep); color:var(--cream); padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem; }
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:2.5rem; flex-wrap:wrap;
  padding-bottom:2.6rem; border-bottom:1px solid var(--cream-30);
}
.footer-brand{ max-width:34ch; }
.footer-brand img{ height:46px; width:auto; margin-bottom:1.4rem; }
.footer-tagline{
  font-family:var(--font-serif); font-style:italic; font-size:1.2rem; line-height:1.5; color:var(--cream);
}
.footer-tagline .dot{ color:var(--brass); font-style:normal; }
.footer-nav{ display:flex; gap:3.5rem; flex-wrap:wrap; }
.footer-col{ display:grid; gap:.85rem; }
.footer-col .h{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); margin-bottom:.2rem;
}
.footer-col a, .footer-col span{
  font-family:var(--font-display); font-size:.98rem; color:var(--cream); text-decoration:none;
  transition:color .3s var(--ease);
}
.footer-col a:hover{ color:var(--brass); }
.affiliation{
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
  padding:2.6rem 0; border-bottom:1px solid var(--cream-30);
  text-decoration:none; text-align:center;
}
.affiliation-label{
  --track: .16em;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:var(--track);
  text-transform:uppercase; color:var(--cream-60);
  /* Tracking is applied after every character, including the last, so each
     line's ink sits half a track left of centre. Correcting with text-indent
     would only move the FIRST line - which staggers the two lines once the
     label wraps on narrow screens. A negative right margin shrinks the outer
     box by exactly the trailing space instead, shifting every line alike.
     Kept as one token so the two values can't drift apart. */
  margin-right:calc(var(--track) * -1);
}
.affiliation-logo{ height:52px; width:auto; transition:opacity .3s var(--ease); }
.affiliation:hover .affiliation-logo{ opacity:.82; }
.inline-link{ color:var(--cream); text-decoration:none; border-bottom:1px solid var(--cream-30); transition:border-color .3s var(--ease); }
.inline-link:hover{ border-color:var(--brass); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding-top:1.8rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:var(--cream-60);
}

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-cue .line::after, .res-card .status::before{ animation:none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px){
  .facet-grid{ grid-template-columns:repeat(2,1fr); }
  .facet{ border-bottom:1px solid var(--cream-30); }
}
@media (max-width: 980px){
  .tile-grid{ grid-template-columns:repeat(2,1fr); }
  .involve-grid{ grid-template-columns:1fr; }
  .tenets{ grid-template-columns:1fr; }
  .tenet{ border-bottom:1px solid var(--cream-30); }
  .res-grid{ grid-template-columns:1fr; }
  .thesis-lead{ grid-template-columns:1fr; gap:2.4rem; }
  .journey-lead{ grid-template-columns:1fr; gap:2.4rem; }
  .facets-note{ grid-template-columns:1fr; gap:2.4rem; }
  .promise{ grid-template-columns:1fr; }
  .beats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px){
  :root{ --chamfer:22px; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(80vw,320px);
    background:var(--navy); color:var(--cream);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.8rem; padding:2.5rem var(--gutter);
    transform:translateX(100%); transition:transform .45s var(--ease);
    box-shadow:-20px 0 60px rgba(8,44,80,.3);
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ color:var(--cream); font-size:1rem; }
  .nav-links a::after{ background:var(--brass); }
  .nav-cta{ margin-top:.5rem; }
  .nav-toggle{
    display:inline-flex; flex-direction:column; gap:5px; justify-content:center;
    width:44px; height:44px; background:none; border:0; cursor:pointer; padding:0;
    z-index:60;
  }
  .nav-toggle span{ display:block; height:2px; width:24px; background:var(--navy); transition:transform .35s var(--ease), opacity .25s var(--ease); margin-inline:auto; }
  .nav-toggle.open span{ background:var(--cream); }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .hero-inner{ max-width:none; }
  .foundation{ opacity:.32; top:auto; bottom:2%; right:-30%; width:90vw; }
  .footer-top{ flex-direction:column; }
}
@media (max-width: 560px){
  .tile-grid{ grid-template-columns:1fr; }
  .tile{ min-height:0; }
  .facet-grid{ grid-template-columns:1fr; }
  .beats{ grid-template-columns:1fr; }
  .part-label{ gap:.3rem; }
}
.no-scroll{ overflow:hidden; }