/* ============================================================
   Centralux — "Quiet Authority"
   Design system. One stylesheet, six pages.

   COLOR ROLES
     --ink        page ground (home position: gold on ink)
     --paper      the light band — the literal "light at the centre"
     --gold       the single accent; earns its place as light, never decoration
   TYPE
     Newsreader (serif, opsz axis)  — voice: prose, headlines, statements
     Outfit (geometric sans)        — structure: wordmark, labels, nav, buttons
   CONTRAST FLOOR
     Every text colour in this file is >= 6.5:1 on its own ground.
     No alpha-faded body copy anywhere. That was the v1 failure.
   ============================================================ */

:root{
  /* ground */
  --ink:        #0b0d0f;
  --ink-raise:  #111417;
  --ink-sink:   #08090b;

  /* light band */
  --paper:      #F6F1E7;
  --paper-2:    #EFE8DA;

  /* accent */
  --gold:       #E3B23E;   /*  9.6:1 on ink  */
  --gold-hi:    #F0C868;
  --gold-ink:   #6E4E0B;   /*  6.8:1 on paper */

  /* type on ink */
  --head:       #F5F1EA;   /* 15.7:1 */
  --text:       #CBD1D6;   /* 12.0:1 */
  --text-2:     #AEB6BD;   /*  8.8:1 */

  /* type on paper */
  --head-d:     #14171A;   /* 16.2:1 */
  --text-d:     #2E3338;   /* 11.6:1 */
  --text-d2:    #43494E;   /*  8.1:1 */

  /* structure */
  --rule:       rgba(245,241,234,.14);
  --rule-soft:  rgba(245,241,234,.08);
  --rule-gold:  rgba(227,178,62,.34);
  --rule-d:     rgba(20,23,26,.16);
  --rule-d-soft:rgba(20,23,26,.09);

  /* type stacks */
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* rhythm */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem;  --sp-6:4.5rem; --sp-7:6rem;
  --sec:  clamp(4.5rem, 9vw, 8rem);
  --wrap: 1140px;
  --measure: 66ch;

  --r-sm: 2px;
  --r-md: 3px;

  --ease: cubic-bezier(.2,.7,.3,1);
  --dur: 220ms;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:380;
  font-size:clamp(1.0625rem, .96rem + .34vw, 1.1875rem);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}

::selection{background:var(--gold);color:var(--ink)}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:1px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--ink);
  font-family:var(--sans);font-size:.85rem;font-weight:500;
  padding:.7rem 1.1rem;
}
.skip:focus{left:.5rem;top:.5rem}

/* ============================================================
   THE LIGHT LOGIC
   A warm field whose brightest point sits on the page's vertical
   centre line. Hand-coded; never applied to the mark itself.
   ============================================================ */
body > *{position:relative;z-index:1}
main{position:relative}
main::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:min(78rem, 150vh);
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(72rem 46rem at 50% 0%, rgba(227,178,62,.10), transparent 68%);
}

/* The meridian: a light-node that punctuates every structural joint,
   dead-centre on the page. central + lux, made structural. */
.joint{
  display:flex;
  align-items:center;
  justify-content:center;
  height:clamp(4rem, 7vw, 6rem);
  margin-block:clamp(.75rem, 2vw, 1.75rem);
}
.joint::before{
  content:"";
  width:1px;
  height:100%;
  background:linear-gradient(to bottom, transparent, var(--gold) 46%, var(--gold) 54%, transparent);
  opacity:.62;
}
.joint::after{
  content:"";
  position:absolute;
  width:7px;height:7px;
  background:var(--gold);
  transform:rotate(45deg);
}
.joint{position:relative}
.joint--paper::before{background:linear-gradient(to bottom, transparent, var(--gold-ink) 46%, var(--gold-ink) 54%, transparent);opacity:.5}
.joint--paper::after{background:var(--gold-ink)}

/* ---------- layout ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 5vw, 2.75rem);
}
.wrap--narrow{max-width:840px}
main{display:block}
section{position:relative}

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--head);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.014em;
  text-wrap:balance;
}
.d1{
  font-size:clamp(2.65rem, 1.5rem + 4.9vw, 4.6rem);
  line-height:1.04;
  letter-spacing:-.026em;
  font-weight:370;
}
.d2{
  font-size:clamp(2rem, 1.3rem + 2.9vw, 3.1rem);
  line-height:1.1;
  letter-spacing:-.022em;
}
.d3{
  font-size:clamp(1.4rem, 1.15rem + 1.05vw, 1.85rem);
  line-height:1.22;
  letter-spacing:-.014em;
}
.d4{
  font-size:clamp(1.16rem, 1.05rem + .4vw, 1.32rem);
  line-height:1.3;
  letter-spacing:-.008em;
}
em, .it{font-style:italic}

.label{
  display:block;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
}
.label--paper{color:var(--gold-ink)}
.label--quiet{color:var(--head)}
.band .label--quiet{color:var(--head-d)}

.lede{
  font-size:clamp(1.16rem, 1.03rem + .5vw, 1.4rem);
  line-height:1.6;
  color:var(--text);
}
.prose p + p{margin-top:1.1em}
.prose{max-width:var(--measure)}
.prose a{
  color:var(--gold);
  text-decoration:underline;
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
}
.prose a:hover{color:var(--gold-hi)}
.tight{max-width:58ch}
.center{text-align:center}
.center .prose,.center .lede{margin-inline:auto}
.muted{color:var(--text-2)}
.on-paper .muted{color:var(--text-d2)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  line-height:1;
  padding:1.05rem 1.7rem;
  border:1px solid var(--gold);
  border-radius:var(--r-sm);
  background:var(--gold);
  color:#0b0d0f;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi);transform:translateY(-1px)}
.btn .arw{font-family:var(--sans);font-weight:400;transform:translateY(-.5px)}

.btn-ghost{
  background:transparent;
  color:var(--gold);
  border-color:var(--rule-gold);
}
.btn-ghost:hover{background:rgba(227,178,62,.1);color:var(--gold-hi);border-color:var(--gold)}

.on-paper .btn{background:var(--head-d);border-color:var(--head-d);color:var(--paper)}
.on-paper .btn:hover{background:#000;border-color:#000}
.on-paper .btn-ghost{background:transparent;color:var(--gold-ink);border-color:rgba(110,78,11,.4)}
.on-paper .btn-ghost:hover{background:rgba(110,78,11,.08);border-color:var(--gold-ink);color:var(--gold-ink)}

.btn-sm{padding:.72rem 1.1rem;font-size:.72rem;letter-spacing:.1em}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  align-items:center;
}
.center .cta-row,
.hero .cta-row,
.phead .cta-row,
.close .cta-row{justify-content:center}

.tlink{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-bottom:1px solid var(--rule-gold);
  padding-bottom:.35rem;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tlink:hover{color:var(--gold-hi);border-color:var(--gold)}
.on-paper .tlink{color:var(--gold-ink);border-color:rgba(110,78,11,.35)}
.on-paper .tlink:hover{color:#4d3606;border-color:var(--gold-ink)}

/* ---------- mark + wordmark ---------- */
.mark{display:block;width:26px;height:26px;color:var(--gold);flex:none}
.mark svg{width:100%;height:100%}
.mark--lg{width:38px;height:38px}
.wordmark{
  font-family:var(--sans);
  font-weight:500;
  font-size:.95rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--head);
  line-height:1;
  padding-left:.06em;
}

/* ---------- header ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(11,13,15,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule-soft);
}
.nav-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:72px;
}
.brand{display:flex;align-items:center;gap:.7rem}
.brand:hover .wordmark{color:var(--gold)}
.brand .wordmark{transition:color var(--dur) var(--ease)}

.nav-menu{
  display:flex;
  align-items:center;
  gap:clamp(1.2rem,2.4vw,2.1rem);
}
.nav-menu a:not(.btn){
  font-family:var(--sans);
  font-size:.84rem;
  font-weight:400;
  letter-spacing:.05em;
  color:var(--text);
  padding-block:.4rem;
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-menu a:not(.btn):hover{color:var(--head);border-color:var(--rule-gold)}
.nav-menu a[aria-current="page"]{color:var(--gold);border-color:var(--gold)}

.nav-toggle{
  display:none;
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--head);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  padding:.6rem .85rem;
}

/* ---------- hero ---------- */
.hero{
  padding-top:clamp(3.5rem, 7vw, 6.5rem);
  padding-bottom:clamp(1rem, 2vw, 2rem);
  text-align:center;
  position:relative;
}
.hero::before{
  content:"";
  position:absolute;
  top:-2rem;left:50%;
  width:min(100vw, 62rem);
  height:34rem;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 42%, rgba(227,178,62,.17), transparent 70%);
  pointer-events:none;
  z-index:-1;
}
.hero .d1{margin-top:1.4rem;max-width:17ch;margin-inline:auto}
.hero .lede{margin-top:1.5rem;max-width:56ch;margin-inline:auto;color:var(--text)}
.hero .cta-row{margin-top:2.3rem}

.hero-pillars{
  margin-top:clamp(2.75rem,5vw,4rem);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.hero-pillars li{
  padding:1.35rem 1.1rem;
  font-family:var(--sans);
  font-size:.79rem;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-2);
  border-left:1px solid var(--rule-soft);
}
.hero-pillars li:first-child{border-left:0}
.hero-pillars b{color:var(--gold);font-weight:500}

/* page header (interior pages) */
.phead{
  padding-top:clamp(3.25rem,6vw,5.5rem);
  padding-bottom:clamp(2rem,3.5vw,3rem);
  text-align:center;
  position:relative;
}
.phead::before{
  content:"";
  position:absolute;
  top:-3rem;left:50%;
  width:min(100vw,54rem);height:26rem;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 40%, rgba(227,178,62,.14), transparent 70%);
  pointer-events:none;z-index:-1;
}
.phead .d1{margin-top:1.15rem;max-width:20ch;margin-inline:auto}
.phead .lede{margin-top:1.4rem;max-width:60ch;margin-inline:auto}

/* ---------- generic section ---------- */
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:clamp(3rem,6vw,5rem)}
.sec-head{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head .d2{margin-top:1rem;max-width:22ch;margin-inline:auto}
.sec-head .lede{margin-top:1.15rem;max-width:60ch;margin-inline:auto;color:var(--text)}

/* ---------- the light band (paper) ---------- */
.band{
  background:var(--paper);
  color:var(--text-d);
  position:relative;
}
.band::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(60% 70% at 50% 0%, rgba(255,255,255,.85), transparent 70%);
  pointer-events:none;
}
.band > *{position:relative}
.band h1,.band h2,.band h3,.band h4{color:var(--head-d)}
.band .lede{color:var(--text-d)}
.band .prose a{color:var(--gold-ink)}
.band .prose a:hover{color:#4d3606}

/* ---------- grids ---------- */
.grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ---------- cards ---------- */
.card{
  border-top:1px solid var(--rule);
  padding-top:1.6rem;
}
.card .num{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--gold);
  display:block;
}
.card h3{margin-top:.85rem}
.card p{margin-top:.85rem;color:var(--text)}
.band .card{border-top-color:var(--rule-d)}
.band .card p{color:var(--text-d)}
.band .card .num{color:var(--gold-ink)}

/* service card on home */
.svc{
  border-top:1px solid var(--rule);
  padding-top:1.7rem;
  display:flex;
  flex-direction:column;
}
.svc h3{margin-top:.9rem}
.svc p{margin-top:.9rem;color:var(--text)}
.svc .deliv{margin-top:1.2rem}

/* diamond bullet list — the mark's own geometry as a rhythm mark */
.dlist li{
  position:relative;
  padding-left:1.5rem;
  font-family:var(--sans);
  font-size:.94rem;
  font-weight:300;
  line-height:1.62;
  color:var(--text);
}
.dlist li + li{margin-top:.6rem}
.dlist li::before{
  content:"";
  position:absolute;
  left:.14rem;top:.62em;
  width:6px;height:6px;
  background:var(--gold);
  transform:translateY(-50%) rotate(45deg);
}
.band .dlist li{color:var(--text-d)}
.band .dlist li::before{background:var(--gold-ink)}

.xlist li{
  position:relative;padding-left:1.5rem;
  font-family:var(--sans);font-size:.94rem;font-weight:300;line-height:1.62;
  color:var(--text);
}
.xlist li + li{margin-top:.6rem}
.xlist li::before{
  content:"";position:absolute;left:.1rem;top:.78em;
  width:9px;height:1px;background:var(--text-2);
}
.band .xlist li{color:var(--text-d)}
.band .xlist li::before{background:var(--text-d2)}

/* ---------- the statement (centred, astride the meridian) ---------- */
.statement{
  text-align:center;
  max-width:24ch;
  margin-inline:auto;
  font-size:clamp(1.7rem, 1.05rem + 2.6vw, 2.75rem);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--head);
  font-weight:370;
}
.band .statement{color:var(--head-d)}
.statement .hl{color:var(--gold);font-style:italic}
.band .statement .hl{color:var(--gold-ink)}

/* ---------- phases (engagement model) ---------- */
.phases{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--rule);
}
.phase{
  padding:1.9rem clamp(1.1rem,2vw,1.9rem) 0;
  border-left:1px solid var(--rule-soft);
}
.phase:first-child{border-left:0;padding-left:0}
.phase:last-child{padding-right:0}
.phase .step{
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.phase h3{margin-top:.8rem}
.phase p{margin-top:.8rem;font-size:1.02rem;line-height:1.65;color:var(--text)}
.band .phases{border-top-color:var(--rule-d)}
.band .phase{border-left-color:var(--rule-d-soft)}
.band .phase .step{color:var(--gold-ink)}
.band .phase p{color:var(--text-d)}

/* ---------- facts row ---------- */
.facts{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.facts div{
  padding:1.5rem 1.2rem;
  border-left:1px solid var(--rule-soft);
}
.facts div:first-child{border-left:0;padding-left:0}
.facts div:last-child{padding-right:0}
.facts dt{
  font-family:var(--sans);font-size:.71rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.facts dd{margin-top:.6rem;font-size:1rem;line-height:1.6;color:var(--text)}
.band .facts{border-color:var(--rule-d)}
.band .facts div{border-left-color:var(--rule-d-soft)}
.band .facts dt{color:var(--gold-ink)}
.band .facts dd{color:var(--text-d)}

/* ---------- service detail block ---------- */
.svc-block{
  border-top:1px solid var(--rule);
  padding-top:clamp(2rem,3.5vw,3rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(2rem,5vw,4.5rem);
}
.svc-block + .svc-block{margin-top:clamp(3.5rem,6vw,5.5rem)}
@media (min-width:981px){
  .svc-block .aside{position:sticky;top:96px;align-self:start}
  .split:not(.split--even) > :first-child{position:sticky;top:96px;align-self:start}
}
.svc-block .aside .num{
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;color:var(--gold);display:block;
}
.svc-block .aside h2{margin-top:1rem}
.svc-block .aside h2{
  font-size:clamp(1.85rem, 1.35rem + 1.55vw, 2.5rem);
  hyphens:manual;
  -webkit-hyphens:manual;
}
.svc-block .aside .for{
  margin-top:1.5rem;
  padding-top:1.2rem;
  border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:.95rem;font-weight:300;line-height:1.65;
  color:var(--text);
}
.svc-block .aside .for b{
  display:block;
  color:var(--gold);
  font-weight:500;
  font-size:.71rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:.5rem;
}
.subhead{
  font-family:var(--sans);
  font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
  margin-top:2rem;margin-bottom:.9rem;
}
.body-first .subhead:first-child{margin-top:0}

/* ---------- split (two column text) ---------- */
.split{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.split--even{grid-template-columns:repeat(2,1fr)}
.split .aside-facts{margin-top:1.7rem}
.split .aside-addr{
  margin-top:1.7rem;
  padding-top:1.3rem;
  border-top:1px solid var(--rule);
  font-family:var(--sans);
  font-style:normal;
  font-size:.95rem;
  font-weight:300;
  line-height:1.75;
  color:var(--text);
}
.split .aside-addr b{
  display:block;
  font-size:.71rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.55rem;
}

/* ---------- contact block ---------- */
.contact-card{
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  padding:clamp(1.75rem,3.5vw,2.5rem);
  background:linear-gradient(180deg, rgba(227,178,62,.05), rgba(227,178,62,0) 60%), var(--ink-raise);
}
.contact-card + .contact-card{margin-top:1.25rem}
.contact-card dt{
  font-family:var(--sans);font-size:.71rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.contact-card dd{margin-top:.55rem;font-size:1.08rem;line-height:1.6;color:var(--head)}
.contact-card dd a{
  color:var(--head);
  border-bottom:1px solid var(--rule-gold);
  padding-bottom:2px;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.contact-card dd a:hover{color:var(--gold);border-color:var(--gold)}
.contact-card dd + dt{margin-top:1.7rem}
.contact-card address{font-style:normal}

/* ---------- legal pages ---------- */
.legal{max-width:74ch;margin-inline:auto}
.legal h2{
  font-size:clamp(1.3rem,1.1rem + .85vw,1.65rem);
  margin-top:3rem;
  padding-top:1.6rem;
  border-top:1px solid var(--rule);
}
.legal h2:first-of-type{margin-top:0}
.legal h3{
  font-size:1.16rem;
  letter-spacing:-.006em;
  margin-top:1.9rem;
  color:var(--head);
}
.legal p{margin-top:1rem;color:var(--text)}
.legal ul{margin-top:1rem}
.legal .meta{
  font-family:var(--sans);
  font-size:.85rem;
  letter-spacing:.04em;
  color:var(--text);
  border-left:2px solid var(--rule-gold);
  padding-left:1rem;
  line-height:1.7;
}
.host{
  font-family:var(--sans);
  font-size:.94em;
  font-weight:400;
  color:var(--head);
  white-space:nowrap;
}
.legal a{
  color:var(--gold);
  text-decoration:underline;
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
}
.legal a:hover{color:var(--gold-hi)}

/* ---------- closing cta ---------- */
.close{
  text-align:center;
  padding-block:clamp(4rem,8vw,7rem);
  position:relative;
}
.close::before{
  content:"";
  position:absolute;top:0;left:50%;
  width:min(100vw,50rem);height:100%;
  transform:translateX(-50%);
  background:radial-gradient(50% 55% at 50% 45%, rgba(227,178,62,.10), transparent 70%);
  pointer-events:none;z-index:-1;
}
.close .lede{margin-top:1.5rem;max-width:52ch;margin-inline:auto}
.close .cta-row{margin-top:2.4rem}
.close .fine{
  margin-top:1.8rem;
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:300;
  color:var(--text-2);
}

/* ---------- footer ---------- */
.foot{
  background:var(--ink-sink);
  border-top:1px solid var(--rule);
  padding-block:clamp(3rem,5vw,4.5rem) 2rem;
}
.foot-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(1.75rem,3.5vw,3rem);
}
.foot-brand .wordmark{font-size:.88rem}
.foot-brand .brandline{display:flex;align-items:center;gap:.7rem}
.foot-legal{
  margin-top:1.2rem;
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--head);
}
.foot-tag{
  margin-top:.7rem;
  font-size:.98rem;
  line-height:1.62;
  color:var(--text-2);
  max-width:34ch;
}
.foot-h{
  font-family:var(--sans);
  font-size:.71rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.05rem;
}
.foot-col li + li{margin-top:.55rem}
.foot-col a,.foot-col address,.foot-col p{
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:300;
  line-height:1.62;
  color:var(--text);
  font-style:normal;
}
.foot-col a{
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.foot-col a:hover{color:var(--gold);border-color:var(--rule-gold)}
.foot-col address{margin-top:1.05rem;color:var(--text)}
.foot-col .handle{
  display:block;
  font-family:var(--sans);
  font-size:.84rem;
  font-weight:300;
  color:var(--text-2);
  margin-top:.15rem;
  overflow-wrap:anywhere;
}

.foot-bot{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  padding-top:1.5rem;
  border-top:1px solid var(--rule-soft);
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  justify-content:space-between;
  align-items:center;
}
.foot-bot p{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:300;
  letter-spacing:.04em;
  color:var(--text-2);
}
.foot-bot .ent{color:var(--text)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
  .svc-block{grid-template-columns:1fr;gap:1.75rem}
  .split{grid-template-columns:1fr;gap:2rem}
  .split--even{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:820px){
  .nav-toggle{display:block}
  .nav-in{flex-wrap:wrap;min-height:64px}
  .nav-menu{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    border-top:1px solid var(--rule-soft);
    padding-block:.5rem 1.25rem;
  }
  .nav-menu.open{display:flex}
  .nav-menu a:not(.btn){
    padding:.95rem 0;
    border-bottom:1px solid var(--rule-soft);
    font-size:1rem;
  }
  .nav-menu a:not(.btn):hover{border-color:var(--rule-soft)}
  .nav-menu a[aria-current="page"]{border-color:var(--rule-soft)}
  .nav-menu .btn{margin-top:1.1rem;justify-content:center}
}

@media (max-width:760px){
  .g3{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .phases{grid-template-columns:1fr;border-top:0}
  .phase{
    border-left:0;
    border-top:1px solid var(--rule);
    padding:1.5rem 0 0;
  }
  .band .phase{border-top-color:var(--rule-d)}
  .facts{grid-template-columns:1fr;border-bottom:0}
  .facts div{
    border-left:0;
    border-bottom:1px solid var(--rule);
    padding-inline:0;
  }
  .band .facts div{border-bottom-color:var(--rule-d)}
  .hero-pillars{grid-template-columns:1fr}
  .hero-pillars li{
    border-left:0;
    border-top:1px solid var(--rule-soft);
    padding-block:1.05rem;
  }
  .hero-pillars li:first-child{border-top:0}
}

@media (max-width:620px){
  :root{--measure:100%}
  .foot-top{grid-template-columns:1fr;gap:2.25rem}
  .g4{grid-template-columns:1fr}
  .hero .d1{max-width:100%}
  .sec-head .d2{max-width:100%}
  .statement{max-width:100%}
  .phead .d1{max-width:100%}
}

@media (max-width:520px){
  .cta-row{flex-direction:column;align-items:stretch;width:100%}
  .cta-row .btn{justify-content:center;width:100%}
}

@media (max-width:400px){
  .wordmark{letter-spacing:.2em;font-size:.86rem}
  .btn{padding:.95rem 1.2rem;font-size:.76rem}
  .btn-sm{padding:.65rem .9rem}
  .cta-row{gap:.7rem}
}

/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover{transform:none}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  body{background:#fff;color:#000}
  .nav,.close,.joint{display:none}
  body::before{display:none}
}