/* ==========================================================================
   Quintavera — brand.css  (dark-led, Route B "Signal")
   Implementation of Brand Guidelines v1.2 for a dark-first web expression.
   Edit tokens here; every page inherits.
   ========================================================================== */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}

:root {
  /* Primary palette, unchanged from v1.2 */
  --graphite:    #252A31;
  --near-black:  #171A1E;
  --cobalt:      #2458C6;
  --cobalt-tint: #EAF1FD;
  --off-white:   #F7F7F5;

  /* ---- Derived tints for DARK surfaces -------------------------------
     Brand Cobalt on Near Black measures 2.73:1. That fails 4.5:1 for text
     and also fails the 3:1 graphical threshold, and no dark background
     exists where it would pass. On dark surfaces the accent therefore has
     to be a lightened derivation, exactly as v1.2 already derives its
     Graphite tints. Same hue (220.7 deg) and saturation, raised lightness.
     Cobalt Light is for dark surfaces ONLY — on Off White it is 2.82:1.  */
  --cobalt-light: #6C93E4;   /* 5.76:1 on Near Black */
  --ink-dim:      #9AA0A6;   /* 6.61:1 on Near Black — secondary text     */
  --rule-dark:    #2E333A;   /* structural rules on dark                  */
  --rule-dark-2:  #3C424A;   /* stronger rule on dark                     */

  /* ---- Derived tints for LIGHT surfaces (unchanged from v1.2) -------- */
  --ink-secondary: #64686C;
  --rule-axis:     #A3A5A7;
  --rule-hairline: #D1D2D2;
  --rule-gridline: #DEDEDE;

  /* Type scale — pushed considerably larger than the previous build */
  --step--1: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0:  clamp(1rem,     0.96rem + 0.22vw, 1.125rem);
  --step-1:  clamp(1.188rem, 1.10rem + 0.44vw, 1.5rem);
  --step-2:  clamp(1.5rem,   1.32rem + 0.90vw, 2.125rem);
  --step-3:  clamp(1.875rem, 1.55rem + 1.60vw, 3rem);
  --step-4:  clamp(2.375rem, 1.80rem + 2.90vw, 4.5rem);
  --step-5:  clamp(2.75rem,  1.85rem + 4.60vw, 6.5rem);

  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem;  --sp-6:4rem; --sp-7:6rem;   --sp-8:9rem;

  --measure: 60ch;
  --page-max: 1320px;
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --rail: 190px;
  --rule-thin: 1px;
  --rule-thick: 3px;
}

*,*::before,*::after{box-sizing:border-box;border-radius:0 !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,li,figure{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%;height:auto}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:400;
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--off-white);
  background:var(--near-black);
  -webkit-font-smoothing:antialiased;
}

p{max-width:var(--measure)}
p + p{margin-top:var(--sp-2)}
strong{font-weight:600}

a{color:var(--cobalt-light);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--cobalt-light);outline-offset:3px}

/* --- Typographic roles --------------------------------------------------- */
.eyebrow{font-size:var(--step--1);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-dim);line-height:1.4}
.display{font-size:var(--step-5);font-weight:600;letter-spacing:-.032em;
  line-height:1.02;text-wrap:balance}
.h1{font-size:var(--step-4);font-weight:600;letter-spacing:-.028em;line-height:1.06;text-wrap:balance}
.h2{font-size:var(--step-3);font-weight:600;letter-spacing:-.024em;line-height:1.1;text-wrap:balance}
.h3{font-size:var(--step-2);font-weight:600;letter-spacing:-.016em;line-height:1.2}
.h4{font-size:var(--step-1);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.lede{font-size:var(--step-1);line-height:1.45;max-width:42ch;color:var(--ink-dim)}
.small{font-size:var(--step--1);color:var(--ink-dim)}
.secondary{color:var(--ink-dim)}

/* The cobalt moment. One per viewport section, never two. */
.accent{color:var(--cobalt-light)}

/* --- Layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp-6)}
.section + .section{border-top:var(--rule-thin) solid var(--rule-dark)}
@media (min-width:900px){.section{padding-block:var(--sp-8)}}

.rail{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.rail__label{padding-top:.4em}
@media (min-width:900px){
  .rail{grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--sp-6)}
}

.stack > * + *{margin-top:var(--sp-3)}
.stack--loose > * + *{margin-top:var(--sp-5)}
.cols{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
@media (min-width:900px){.cols--3{grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}}

/* --- Light chapter: inverted for contrast -------------------------------- */
.section--light{background:var(--off-white);color:var(--graphite);
  border-top:var(--rule-thick) solid var(--cobalt)}
.section--light .eyebrow,
.section--light .secondary,
.section--light .lede,
.section--light .small{color:var(--ink-secondary)}
.section--light .accent{color:var(--cobalt)}     /* true Cobalt passes on light */
.section--light a{color:var(--cobalt)}
.section--light .caps__item{border-top-color:var(--rule-hairline)}

/* --- Masthead ------------------------------------------------------------ */
.masthead{position:sticky;top:0;z-index:60;background:rgba(23,26,30,.92);
  backdrop-filter:blur(10px);border-bottom:var(--rule-thin) solid var(--rule-dark)}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding-block:var(--sp-2)}
.masthead__logo{display:block;padding:.5em 0}
.masthead__logo img{width:clamp(168px,45vw,220px)}

.nav__toggle{display:none;align-items:center;gap:.5em;background:none;
  border:var(--rule-thin) solid var(--rule-dark-2);color:var(--off-white);
  font:inherit;font-size:var(--step--1);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;padding:.7em 1.1em;cursor:pointer;min-height:44px}
.nav__toggle:hover{border-color:var(--ink-dim)}
.nav__list{display:flex;flex-wrap:wrap;gap:0 var(--sp-4)}
.nav__list a{display:block;padding:.9em 0;min-height:44px;color:var(--off-white);
  text-decoration:none;font-weight:500;font-size:var(--step--1);letter-spacing:.04em}
.nav__list a:hover{color:var(--cobalt-light)}
.nav__list a[aria-current="page"]{color:var(--cobalt-light)}

@media (max-width:899px){
  .js .nav__toggle{display:inline-flex}
  .js .nav__list{display:none}
  .js .nav--open .nav__list{display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--near-black);border-bottom:var(--rule-thick) solid var(--cobalt-light);
    padding:var(--sp-2) var(--gutter) var(--sp-3)}
  .js .nav--open .nav__list li + li{border-top:var(--rule-thin) solid var(--rule-dark)}
}
@media (min-width:900px){
  .nav__list a{padding:.25em 0;min-height:0}
  .nav__list a[aria-current="page"]{box-shadow:inset 0 -2px 0 0 var(--cobalt-light)}
}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:var(--sp-6) 0;
  min-height:calc(100svh - 84px);display:flex;flex-direction:column;
  justify-content:center}
@media (min-width:900px){.hero{padding-block:var(--sp-7) 0}}
.hero__lede{margin-top:var(--sp-4)}

/* Signal band: noise resolving into an ordered series. */
.band{width:100%;margin-top:var(--sp-6);flex:0 0 auto}
.band svg{width:100%;height:clamp(120px,22vh,220px);display:block}
.band line{stroke:var(--off-white)}
.band line.is-signal{stroke:var(--cobalt-light);stroke-width:2.4}

.scrollcue{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-dim);padding-block:var(--sp-3)}

/* --- Capability list ----------------------------------------------------- */
.caps{display:grid;grid-template-columns:1fr}
.caps__item{padding-block:var(--sp-4);border-top:var(--rule-thin) solid var(--rule-dark)}
.caps__title{font-size:var(--step-1);font-weight:500}
.caps__body{margin-top:var(--sp-1);color:var(--ink-dim);max-width:44ch}
@media (min-width:760px){
  .caps{grid-template-columns:repeat(2,1fr);column-gap:var(--sp-6)}
}

/* --- Five-stage spine ---------------------------------------------------- */
.spine__list{display:grid;grid-template-columns:1fr}
.spine__item{position:relative;padding-left:var(--sp-4);padding-bottom:var(--sp-5);
  border-left:var(--rule-thin) solid var(--rule-dark-2)}
.spine__item:last-child{border-left-color:var(--cobalt-light);padding-bottom:0}
.spine__item::before{content:"";position:absolute;left:0;top:.5em;
  width:11px;height:var(--rule-thin);background:var(--rule-dark-2)}
.spine__item:last-child::before{background:var(--cobalt-light);
  width:11px;height:11px;left:-5px;top:.35em}
.spine__num{display:block;font-size:var(--step--1);font-weight:600;
  letter-spacing:.11em;color:var(--ink-dim);margin-bottom:.4em}
.spine__item:last-child .spine__num{color:var(--cobalt-light)}
.spine__title{font-size:var(--step-1);font-weight:500;line-height:1.25}
.spine__body{margin-top:var(--sp-1);color:var(--ink-dim)}
@media (min-width:900px){
  .spine__list{grid-template-columns:repeat(5,1fr)}
  .spine__item{padding:var(--sp-3) var(--sp-3) 0 0;border-left:0;
    border-top:var(--rule-thin) solid var(--rule-dark-2)}
  .spine__item:last-child{border-top-color:var(--cobalt-light);padding-right:0}
  .spine__item::before{left:0;top:0;width:var(--rule-thin);height:11px}
  .spine__item:last-child::before{left:0;top:-5px;width:11px;height:11px}
  /* Annotation size: the five-column axis is narrow, so body copy at full
     size breaks to four words a line. */
  .spine__body{font-size:var(--step--1);line-height:1.5}
}

/* --- Statement: the repeated line, at scale ------------------------------ */
.statement{font-size:var(--step-4);font-weight:600;letter-spacing:-.028em;
  line-height:1.05;max-width:18ch}

/* --- Footer -------------------------------------------------------------- */
.foot{background:var(--near-black);border-top:var(--rule-thick) solid var(--rule-dark-2);
  padding-block:var(--sp-5)}
.foot__lockup{width:clamp(180px,40vw,240px);margin-bottom:var(--sp-4)}
.foot__grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
@media (min-width:700px){.foot__grid{grid-template-columns:1fr 1fr;gap:var(--sp-5)}}
@media (min-width:1000px){.foot__grid{grid-template-columns:2fr 1fr 1fr}}
.foot__head{font-size:var(--step--1);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:var(--sp-2)}
.foot__nav li + li{margin-top:.5em}
.foot__nav a{text-decoration:none;color:var(--off-white)}
.foot__nav a:hover{text-decoration:underline}
.foot__legal{margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:var(--rule-thin) solid var(--rule-dark);
  font-size:var(--step--1);color:var(--ink-dim)}

/* Hero with generated artwork behind it */
.hero--art{isolation:isolate}
.hero__art{position:absolute;inset:auto 0 0 0;height:min(70%,560px);z-index:0;pointer-events:none}
.hero__art svg{width:100%;height:100%;display:block}
.hero--art .wrap{position:relative;z-index:2}

/* --- Tag lists (plain, no boxes) -----------------------------------------
   Separated by a middot rather than a rule: a border-right dangles at the
   end of a wrapped line, and there is no reliable CSS way to detect the
   last item in a row. */
.tags{display:flex;flex-wrap:wrap;gap:0 .35em}
.tags li{font-size:var(--step-0);font-weight:500;padding-block:.35em}
.tags li:not(:last-child)::after{content:"·";margin-left:.75em;
  color:var(--rule-dark-2);font-weight:400}
.section--light .tags li:not(:last-child)::after{color:var(--rule-axis)}

/* --- The three analyses -------------------------------------------------- */
.analyses{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
@media (min-width:820px){.analyses{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}}
.analyses__item img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-top:var(--rule-thin) solid var(--rule-dark-2)}
.analyses__title{font-size:var(--step-1);font-weight:600;margin-top:var(--sp-3);
  letter-spacing:-.01em;line-height:1.25}
.analyses__sub{font-size:var(--step--1);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cobalt-light);margin-top:.4em}
.analyses__body{color:var(--ink-dim);margin-top:var(--sp-2);max-width:46ch}

/* --- Contact ------------------------------------------------------------- */
.contact-card{border-top:var(--rule-thick) solid var(--cobalt-light);padding-top:var(--sp-3)}
.contact-card__name{font-size:var(--step-1);font-weight:600}
.contact-card__role{color:var(--ink-dim);font-size:var(--step--1);margin-top:.15em}
.contact-card a{word-break:break-word}
@media (min-width:900px){.cols--2{grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}}

/* --- Article prose (insights and case studies) ---------------------------
   Wrap body copy in <div class="prose"> and write plain h2, h3, p, ul, ol
   and blockquote inside it. Everything is styled already. */
.prose{max-width:var(--measure)}
.prose > * + *{margin-top:var(--sp-3)}
.prose h2{font-size:var(--step-2);font-weight:600;letter-spacing:-.016em;
  line-height:1.2;margin-top:var(--sp-5)}
.prose h3{font-size:var(--step-1);font-weight:600;letter-spacing:-.01em;
  line-height:1.3;margin-top:var(--sp-4)}
.prose ul,.prose ol{padding-left:1.5em}
.prose ul li{list-style:none;position:relative}
.prose ul li::before{content:"";position:absolute;left:-1.2em;top:.72em;
  width:8px;height:var(--rule-thin);background:var(--rule-dark-2)}
.prose ol{list-style:decimal}
.prose ol li::marker{color:var(--ink-dim);font-weight:600;font-size:.9em}
.prose li + li{margin-top:.4em}
.prose blockquote{border-left:var(--rule-thick) solid var(--cobalt-light);
  padding:var(--sp-3);margin-block:var(--sp-4);background:rgba(108,147,228,.07)}
.prose blockquote p{font-size:var(--step-1);line-height:1.45}
.prose figcaption{font-size:var(--step--1);color:var(--ink-dim);margin-top:var(--sp-1)}
.section--light .prose ul li::before{background:var(--rule-axis)}
.section--light .prose blockquote{border-left-color:var(--cobalt);
  background:var(--cobalt-tint)}

.article-meta{display:flex;flex-wrap:wrap;gap:0 var(--sp-2);
  font-size:var(--step--1);color:var(--ink-dim);margin-top:var(--sp-3)}
.article-meta span + span::before{content:"/ ";color:var(--rule-dark-2)}

.listing li{border-top:var(--rule-thin) solid var(--rule-dark)}
.listing li:last-child{border-bottom:var(--rule-thin) solid var(--rule-dark)}
.listing a{display:block;padding-block:var(--sp-4);text-decoration:none;
  color:var(--off-white)}
.listing a:hover .listing__title{color:var(--cobalt-light)}
.listing__title{display:block;font-size:var(--step-2);font-weight:600;
  letter-spacing:-.016em;line-height:1.2}
.listing__sum{display:block;color:var(--ink-dim);margin-top:var(--sp-1);max-width:58ch}

.divider{border:0;border-top:var(--rule-thin) solid var(--rule-dark);margin-block:var(--sp-4)}

/* --- Utilities ----------------------------------------------------------- */
.skip-link{position:absolute;left:-9999px;background:var(--off-white);
  color:var(--graphite);padding:.75em 1.25em;z-index:100}
.skip-link:focus{left:var(--gutter);top:.5rem}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Motion -------------------------------------------------------------- */
/* Progressive enhancement: without JS nothing is hidden, so .js gates it. */
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}