/* ============================================================
   Solven Advisory — Redesign design system
   Self-contained: tokens + reset + type + chrome + motion.
   Brand: Charcoal / Sage Deep / Sage / Bone. Georgia + Calibri.
   ============================================================ */

:root {
  /* Primary */
  --charcoal:      #2A2A28;
  --charcoal-deep: #1F2420;
  --sage-deep:     #6B8068;
  --sage:          #8FA68A;
  --bone:          #F4F2EB;

  /* Secondary */
  --sage-pale:  #C8D4C2;
  --grey-mid:   #6B6B68;
  --grey-light: #A8A8A4;
  --rule-grey:  #D8D6CF;

  /* Tints for fills / washes */
  --bone-deep:  #EDEADF;   /* slightly deeper bone for alternating bands */
  --sage-wash:  #E7ECE3;   /* whisper of sage on bone */
  --ink-08:     rgba(42,42,40,0.08);
  --ink-04:     rgba(42,42,40,0.04);

  /* Semantic */
  --text:        var(--charcoal);
  --text-2:      var(--grey-mid);
  --text-3:      var(--grey-light);
  --bg:          var(--bone);
  --bg-dark:     var(--charcoal-deep);
  --accent:      var(--sage-deep);
  --rule:        var(--rule-grey);

  /* Type */
  --serif: Georgia, "Times New Roman", serif;
  --sans:  Calibri, "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;

  /* Fluid type scale */
  --t-meta:  0.75rem;                              /* 12 */
  --t-sm:    0.875rem;                             /* 14 */
  --t-base:  1.0625rem;                            /* 17 */
  --t-md:    1.25rem;                              /* 20 */
  --t-lg:    clamp(1.5rem, 1.2rem + 1.2vw, 2rem);  /* 24–32 */
  --t-xl:    clamp(2rem, 1.4rem + 2.6vw, 3rem);    /* 32–48 */
  --t-2xl:   clamp(2.6rem, 1.4rem + 4.8vw, 4.5rem);/* ~42–72 */
  --t-hero:  clamp(3rem, 1rem + 8vw, 7rem);        /* 48–112 */

  /* Tracking */
  --track-label: 0.22em;
  --track-wide:  0.32em;

  /* Spacing */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;
  --s-4: 1rem;     --s-5: 1.5rem;  --s-6: 2rem;
  --s-7: 2.5rem;   --s-8: 4rem;    --s-9: 6rem;
  --s-10: 8rem;    --s-11: 11rem;

  /* Layout */
  --col: 1240px;          /* outer column */
  --col-prose: 720px;
  --pad: clamp(1.25rem, 5vw, 5rem);

  --rule-thin: 0.5px solid var(--rule);
  --fast: 140ms ease;
  --slow: 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

::selection { background: var(--sage-deep); color: var(--bone); }

a { color: inherit; }

/* ---------- Headings ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--text);
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

/* ---------- Reusable type primitives ---------- */
.label {
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--accent);
  margin: 0;
}
.label--ink { color: var(--text); }
.label--muted { color: var(--text-2); font-weight: 600; }

.designator {
  font-family: var(--sans);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--accent);
}

.lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--text-2);
}

.measure { max-width: 62ch; }
.measure-sm { max-width: 48ch; }

/* serial number in margins (editorial) */
.serial {
  font-family: var(--sans);
  font-size: var(--t-meta);
  letter-spacing: var(--track-label);
  color: var(--text-3);
  font-weight: 600;
}

/* ---------- Layout helpers ---------- */
.shell { max-width: var(--col); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(4rem, 8vw, 9rem); }
.section--tight { padding-block: clamp(3rem, 5vw, 5rem); }

.rule { border: 0; border-top: var(--rule-thin); margin: 0; }

/* sage left-rule accent bar */
.accent-rule { border-left: 2px solid var(--sage-deep); padding-left: var(--s-5); }

/* ---------- Buttons / links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sans);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text);
  padding: 0.85em 1.6em;
  border: 1px solid var(--charcoal);
  background: transparent;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
  cursor: pointer;
}
.btn:hover { background: var(--charcoal); color: var(--bone); }
.btn .arw { transition: transform var(--fast); }
.btn:hover .arw { transform: translateX(3px); }

.btn--dark { border-color: var(--bone); color: var(--bone); }
.btn--dark:hover { background: var(--bone); color: var(--charcoal); }

.btn--solid { background: var(--charcoal); color: var(--bone); }
.btn--solid:hover { background: transparent; color: var(--charcoal); }

.tlink {
  font-family: var(--sans);
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-bottom: 1px solid var(--charcoal);
  padding-bottom: 3px;
  transition: gap var(--fast), color var(--fast), border-color var(--fast);
}
.tlink:hover { gap: 0.9em; color: var(--accent); border-color: var(--accent); }
.tlink .arw { transition: transform var(--fast); }
.tlink:hover .arw { transform: translateX(2px); }

/* arrow glyph */
.arw { display: inline-block; line-height: 1; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bone); /* fallback if color-mix() is unsupported */
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: var(--rule-thin);
}
.site-header__inner {
  max-width: var(--col);
  margin-inline: auto;
  padding: 1.1rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.site-header__mark { line-height: 0; display: block; }
.site-header__mark img { width: 188px; height: auto; }

/* Inline brand lockup — larger, crisper, more present than the SVG file */
.brand { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; line-height: 1; }
.brand__word {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2rem);
  color: var(--charcoal);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: flex-end;
  line-height: 0.9;
}
.brand__v { width: 0.5em; height: 0.46em; align-self: flex-end; margin: 0 0.012em; transform: translateY(-0.015em); }
.brand__v path { fill: var(--sage-deep); transition: fill var(--fast); }
.brand__rule { width: 1px; height: 1.7rem; background: var(--rule); flex: 0 0 auto; }
.brand__sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--sage-deep);
}
.brand:hover .brand__v path { fill: var(--sage); }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.site-nav a {
  font-family: var(--sans);
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--text-2);
  position: relative;
  padding-block: 0.4rem;
  transition: color var(--fast);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--charcoal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fast);
}
.site-nav a:hover { color: var(--text); }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a.is-current { color: var(--text); }
.site-nav a.is-current::after { transform: scaleX(1); background: var(--sage-deep); }
.nav-toggle { display: none; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-dark);
  color: var(--bone);
  padding-block: clamp(3.5rem, 6vw, 6rem);
  position: relative;
  overflow: hidden;
}
.site-footer__grid {
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-7);
  position: relative;
  z-index: 1;
}
.site-footer__mark img { width: 220px; }
.site-footer h4 {
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--sage);
  margin: 0 0 var(--s-4);
}
.site-footer a { color: var(--bone); text-decoration: none; opacity: 0.82; transition: opacity var(--fast); }
.site-footer a:hover { opacity: 1; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: var(--t-sm); }
.footer-meta {
  max-width: var(--col);
  margin: var(--s-8) auto 0;
  padding: var(--s-5) var(--pad) 0;
  border-top: 0.5px solid rgba(244,242,235,0.16);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--t-meta);
  color: var(--grey-light);
  position: relative;
  z-index: 1;
}
.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--sage);
}
.partner-badge .dot { width: 6px; height: 6px; background: var(--sage); border-radius: 50%; display: inline-block; }

/* giant chevron watermark in footer */
.footer-chevron {
  position: absolute;
  right: -2%;
  bottom: -28%;
  width: 38%;
  min-width: 320px;
  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
}

/* ---------- The chevron graphic device ---------- */
.chevron-mark { display: block; }
.chevron-mark path { fill: var(--sage-deep); }
.chevron-mark--light path { fill: var(--sage); }

/* faint oversized watermark */
.chev-watermark {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Dark band ---------- */
.band-dark {
  background: var(--bg-dark);
  color: var(--bone);
  position: relative;
  overflow: hidden;
}
.band-dark .label { color: var(--sage); }
.band-dark h2, .band-dark h3, .band-dark p { color: var(--bone); }
.band-dark .lead { color: var(--sage-pale); }
.band-bone-deep { background: var(--bone-deep); }

/* ---------- Skip link / a11y ---------- */
.skip-link {
  position: absolute; left: 1rem; top: 1rem;
  background: var(--charcoal); color: var(--bone);
  padding: 0.6rem 1rem; text-decoration: none;
  transform: translateY(-200%); transition: transform var(--fast);
  z-index: 200;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; }
.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Scroll-reveal motion ----------
   Content is VISIBLE by default. JS adds .pending only to elements that
   start below the fold, then .in when they scroll into view. This means
   nothing is ever permanently hidden if JS/observers misbehave, and
   above-the-fold content paints immediately. */
.reveal.pending {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.pending.in {
  opacity: 1;
  transform: none;
  transition: opacity var(--slow), transform var(--slow);
  transition-delay: var(--reveal-delay, 0ms);
}

/* hairline that draws in */
.draw-rule.pending { transform: scaleX(0); transform-origin: left; }
.draw-rule.pending.in { transform: scaleX(1); transition: transform 800ms cubic-bezier(0.22,0.61,0.36,1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal.pending, .draw-rule.pending { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   CINEMATIC MOTION LAYER
   Progressive enhancement over the static, visible-by-default
   document. Hidden states exist ONLY behind JS-applied classes
   (html.anim, .pending, body.intro-armed) with guaranteed release
   paths (rescue timeouts + reduced-motion neutralisers). With no JS
   or reduced motion, every resting state is the finished design.
   ============================================================ */

/* ---- Cross-page View Transitions (MPA, declarative, zero JS) ----
   Unsupported browsers simply navigate normally. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---- Generic hero intro contract (shared by every page) ----
   Opt in with <body data-intro> + .intro-rise / .intro-chev on hero
   pieces. JS adds intro-armed (hide) then intro-go (release); a 2000ms
   rescue adds intro-rescue. Hidden state lives ONLY under intro-armed,
   so a JS/clock stall can never leave the hero blank. */
@media (prefers-reduced-motion: no-preference) {
  body.intro-armed:not(.intro-go) .intro-rise {
    opacity: 0; transform: translateY(30px); transition: none;
  }
  body.intro-armed:not(.intro-go) .intro-chev {
    opacity: 0; transform: translateY(-38px) scale(1.08); transition: none;
  }
  body.intro-go .intro-rise {
    transition: opacity .95s cubic-bezier(.22,.61,.36,1),
                transform .95s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--intro-delay, 0s);
  }
  body.intro-go .intro-chev {
    transition: opacity 1.6s cubic-bezier(.22,.61,.36,1),
                transform 1.6s cubic-bezier(.22,.61,.36,1);
  }
  body.intro-rescue .intro-rise {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  body.intro-rescue .intro-chev {
    opacity: var(--chev-rest, .05) !important; transform: none !important; transition: none !important;
  }
}

/* ---- Line-mask headline reveal (hero <h1>, plain text only) ----
   JS splits the headline into .lm__line spans inside overflow-hidden
   masks, then the lines wipe up. Rides the body.intro lifecycle. */
/* padding-bottom gives descenders (g/y/p) room inside the clip;
   the matching negative margin keeps the headline's layout unchanged. */
.lm .lm__mask { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.lm .lm__line { display: block; }
@media (prefers-reduced-motion: no-preference) {
  body.intro-armed:not(.intro-go) .lm .lm__line { transform: translateY(110%); }
  body.intro-go .lm .lm__line {
    transform: translateY(0);
    transition: transform .9s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--intro-delay, .2s) + var(--li, 0) * 100ms);
  }
  body.intro-rescue .lm .lm__line { transform: none !important; transition: none !important; }
}

/* ---- Section headline clip-unmask (below-fold <h2>, no split) ----
   The clip is the sole motion: neutralise the plain .reveal fade so the
   headline doesn't both fade and unmask. */
@media (prefers-reduced-motion: no-preference) {
  html.anim .reveal-mask.reveal.pending { opacity: 1; transform: none; }
  html.anim .reveal-mask.pending { clip-path: inset(0 0 104% 0); }
  html.anim .reveal-mask.pending.in {
    clip-path: inset(0 0 0 0);
    transition: clip-path .9s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--reveal-delay, 0ms);
  }
}

/* ---- Dark-band curtain: a page-bone overlay retracts upward ----
   The band background stays charcoal at ALL times; only a bone overlay
   lifts. Worst case (JS fails) = the band shows immediately, never
   white-on-white. Default (no .pending) = overlay already retracted. */
.band-curtain { position: relative; }
.band-curtain::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: var(--bone); transform: scaleY(0); transform-origin: top;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.anim .band-curtain.pending::after { transform: scaleY(1); }
  html.anim .band-curtain.pending.in::after {
    transform: scaleY(0);
    transition: transform .8s cubic-bezier(.22,.61,.36,1);
  }
}
@media (prefers-reduced-motion: reduce) { .band-curtain::after { display: none; } }

/* ---- Accent rule: the sage bar draws downward on reveal ----
   Replaces border-left with a drawable ::before (same 2px sage bar). */
.accent-rule { position: relative; border-left: 0; }
.accent-rule::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--sage-deep); transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  html.anim .accent-rule.reveal.pending::before { transform: scaleY(0); }
  html.anim .accent-rule.reveal.pending.in::before {
    transform: scaleY(1);
    transition: transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay: 140ms;
  }
}

/* ---- Staggered child cascade (lists / grids) ---- */
@media (prefers-reduced-motion: no-preference) {
  html.anim [data-stagger].pending > * { opacity: 0; transform: translateY(16px); }
  html.anim [data-stagger].pending.in > * {
    opacity: 1; transform: none;
    transition: opacity var(--slow), transform var(--slow);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
}

/* ---- Magnetic primary CTA (fine-pointer only; gated in JS) ----
   JS sets --mx/--my on pointermove; resets on leave. Resting = 0. */
@media (prefers-reduced-motion: no-preference) {
  html.has-pointer .btn--solid,
  html.has-pointer .btn--dark {
    transform: translate(var(--mx, 0px), var(--my, 0px));
    transition: transform 200ms cubic-bezier(.22,.61,.36,1),
                background var(--fast), color var(--fast), border-color var(--fast);
  }
}

/* ---- Scroll-progress hairline (CHARCOAL — introduces no new sage) ---- */
.scroll-rule {
  position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 60;
  background: var(--charcoal);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .scroll-rule { display: none; } }

/* ---- Film grain: the page reads as a printed plate, not a flat hex ----
   Neutral (desaturated) noise so it introduces no off-palette colour, and
   NO mix-blend-mode: a fixed blend layer forces a whole-viewport re-composite
   on every scroll frame. A plain low-opacity fixed layer composites cheaply
   on the GPU and reads as paper texture on bone, negligibly on charcoal. */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
@media (max-width: 760px) { .grain { opacity: 0.02; } }

/* ---------- Responsive header ---------- */
@media (max-width: 860px) {
  .site-header__inner { position: relative; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: none; border: 0; cursor: pointer;
    font-family: var(--sans); font-size: var(--t-sm); color: var(--text);
    padding: 0.4rem 0;
  }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bone);
    border-bottom: var(--rule-thin);
    padding: 0 var(--pad);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--fast);
  }
  .site-nav.open { max-height: 60vh; padding-block: 0.5rem 1rem; }
  .site-nav a { width: 100%; padding: 0.75rem 0; border-bottom: var(--rule-thin); font-size: var(--t-base); }
  .site-nav a::after { display: none; }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}