/* =====================================================================
   EDITORIAL NOIR — GrayTop Tech design system
   Editorial High-Fashion × Modern Technology.
   Deep espresso/noir canvas · EB Garamond + Hanken Grotesk ·
   oxblood accent · antique-cream hairlines · sharp/brutalist shapes.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Surfaces — tonal layering on a deep espresso base */
  --surface:#1a110d;
  --surface-dim:#1a110d;
  --surface-bright:#423732;
  --surface-container-lowest:#150c08;
  --surface-container-low:#231915;
  --surface-container:#271d19;
  --surface-container-high:#322823;
  --surface-container-highest:#3e322d;

  /* Text */
  --on-surface:#f2dfd7;
  --on-surface-variant:#d2c4be;
  --inverse-surface:#f2dfd7;
  --inverse-on-surface:#392e29;

  /* Lines & accents */
  --outline:#9a8e8a;
  --outline-variant:#4e4541;

  --primary:#c6c6c7;
  --on-primary:#2f3131;
  --secondary:#ffb4a4;
  --tertiary:#d3c5ab;

  /* Brand signatures */
  --oxblood-red:#7d200e;
  --antique-cream:#f1e2c7;
  --deep-espresso:#1e1510;
  --warm-taupe:#997662;

  --error:#ffb4ab;

  /* Convenience tints (antique cream at opacity — hairlines & overlays) */
  --cream-05:rgba(241,226,199,.05);
  --cream-08:rgba(241,226,199,.08);
  --cream-10:rgba(241,226,199,.10);
  --cream-15:rgba(241,226,199,.15);
  --cream-20:rgba(241,226,199,.20);

  /* Typography */
  --serif:'EB Garamond',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;

  /* Spacing */
  --section-padding:10rem;
  --margin-page:5vw;
  --gutter-grid:2rem;
  --element-gap:1.5rem;
  --container-max:1440px;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--surface);
  color:var(--on-surface);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Never allow horizontal scroll — oversized watermarks / wide rows are
   clipped to the viewport instead of stretching the document. */
html,body{max-width:100%;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--oxblood-red);color:var(--antique-cream)}

/* ---------- Layout primitives ---------- */
.wrap{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--margin-page);
}
.wrap--narrow{max-width:1080px}
.wrap--reading{max-width:780px}

section{position:relative}

/* Massive vertical rhythm — the "gallery" feel */
.section{padding:var(--section-padding) 0}
.section--tight{padding:6rem 0}
@media(max-width:820px){
  :root{--section-padding:6rem}
  .section--tight{padding:4rem 0}
}

/* Editorial 12-col fixed-fluid grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter-grid)}
/* On mobile the 12-col grid collapses to a single stack and any explicit
   column spans / starts reset, so cards never get squeezed into slivers. */
@media(max-width:720px){
  .grid{grid-template-columns:1fr;gap:1rem}
  .grid > *{grid-column:1 / -1 !important}
}

/* Hairline editorial rules — lead the eye, separate zones softly */
.rule{height:1px;background:var(--cream-20);border:0;width:100%}
.rule--v{width:1px;height:100%;background:var(--cream-20)}

/* ---------- Typography scale ---------- */
.display-xl{
  font-family:var(--serif);font-weight:400;
  font-size:120px;line-height:110px;letter-spacing:-0.04em;
}
.headline-lg{
  font-family:var(--serif);font-weight:400;
  font-size:64px;line-height:72px;letter-spacing:-0.01em;
}
.headline-md{
  font-family:var(--serif);font-weight:400;
  font-size:48px;line-height:56px;
}
.body-lg{
  font-family:var(--sans);font-weight:300;
  font-size:20px;line-height:32px;
}
.body-md{
  font-family:var(--sans);font-weight:400;
  font-size:16px;line-height:24px;
}
/* Micro-copy / labels — blueprint aesthetic */
.label-caps{
  font-family:var(--sans);font-weight:600;
  font-size:12px;line-height:16px;letter-spacing:0.15em;
  text-transform:uppercase;
}

/* Pull-quote — literary, italic serif */
.pull-quote{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(24px,3.4vw,32px);line-height:1.4;letter-spacing:-0.01em;
}

/* Fluid responsive heads (used in real pages) */
.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(64px,9vw,120px);line-height:0.92;letter-spacing:-0.035em;
}
.h-lg{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,5.4vw,64px);line-height:1.05;letter-spacing:-0.01em;
}
.h-md{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.6vw,48px);line-height:1.12;letter-spacing:-0.005em;
}

em.accent{font-style:italic;color:var(--secondary)}

/* Eyebrow / kicker label */
.eyebrow{
  display:inline-block;
  font-family:var(--sans);font-weight:600;
  font-size:12px;line-height:16px;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--warm-taupe);
}

/* Section intro paragraph */
.sec-intro{
  font-family:var(--sans);font-weight:300;
  font-size:20px;line-height:32px;color:var(--on-surface-variant);
  max-width:60ch;margin-top:1.5rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-weight:600;font-size:14px;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:1.05rem 1.9rem;border-radius:0;          /* sharp / brutalist */
  border:1px solid transparent;cursor:pointer;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
  background:none;
}
/* Primary — ghost in antique cream, inverts on hover */
.btn--ghost{
  color:var(--antique-cream);
  border-color:var(--antique-cream);
}
.btn--ghost:hover{
  background:var(--antique-cream);
  color:var(--deep-espresso);
}
/* CTA — solid oxblood */
.btn--cta{
  background:var(--oxblood-red);
  color:#fff;border-color:var(--oxblood-red);
}
.btn--cta:hover{
  background:#94290f;border-color:#94290f;
}
/* Quiet text link with arrow */
.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-weight:600;font-size:14px;
  letter-spacing:0.04em;color:var(--secondary);
  border-bottom:1px solid transparent;transition:border-color .2s ease;
}
.link-arrow:hover{border-bottom-color:var(--secondary)}

/* ---------- The "Seal" — circular badge exception ---------- */
.seal{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  border-radius:9999px;                              /* the only round shape */
  border:1px solid var(--antique-cream);
  width:160px;height:160px;padding:1rem;
  font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--antique-cream);
  transition:background .35s ease,color .35s ease;
}
.seal:hover{background:var(--antique-cream);color:var(--deep-espresso)}

/* ---------- Navigation ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(26,17,13,.78);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--cream-15);
}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;
  height:80px;
}
.brand{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--serif);font-weight:400;font-size:22px;
  letter-spacing:-0.01em;color:var(--on-surface);
}
.brand img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:2.4rem}
.nav-links a{
  font-family:var(--sans);font-weight:500;font-size:13px;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--on-surface-variant);
  padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease;
}
.nav-links a:hover{color:var(--on-surface)}
/* Active link — 1px underline, not a background */
.nav-links a.active{color:var(--on-surface);border-bottom-color:var(--antique-cream)}
.menu-btn{
  display:none;background:none;border:0;cursor:pointer;
  color:var(--on-surface);font-size:26px;line-height:1;
  padding:.4rem;margin:-.4rem;-webkit-tap-highlight-color:transparent;
}
/* Desktop nav CTA (the inline ghost button beside the links) */
.nav-cta{display:inline-flex}

/* ---------- Full-screen mobile overlay menu ---------- */
.nav-overlay{
  position:fixed;inset:0;z-index:200;
  background:var(--surface-container-lowest);
  display:flex;flex-direction:column;
  padding:1.6rem var(--margin-page) 3rem;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);
  visibility:hidden;
}
.nav-overlay.open{transform:translateX(0);visibility:visible}
.nav-overlay__top{display:flex;align-items:center;justify-content:space-between;height:80px}
.nav-overlay__brand{font-family:var(--serif);font-size:22px;color:var(--on-surface)}
.nav-overlay__close{background:none;border:0;cursor:pointer;color:var(--on-surface);font-size:30px;line-height:1;padding:.4rem;margin:-.4rem;-webkit-tap-highlight-color:transparent}
.nav-overlay__links{display:flex;flex-direction:column;gap:.2rem;margin-top:2rem;border-top:1px solid var(--cream-10)}
.nav-overlay__links a{
  font-family:var(--serif);font-weight:400;font-size:clamp(28px,9vw,42px);line-height:1.1;
  color:var(--on-surface);padding:1.1rem 0;border-bottom:1px solid var(--cream-10);
  display:flex;align-items:center;justify-content:space-between;
}
.nav-overlay__links a .material-symbols-outlined{font-size:24px;color:var(--warm-taupe)}
.nav-overlay__cta{margin-top:2.4rem;display:flex;flex-direction:column;gap:1rem}
.nav-overlay__cta .btn{justify-content:center}
.nav-overlay__meta{margin-top:auto;padding-top:2rem;display:flex;flex-direction:column;gap:.6rem}
.nav-overlay__meta a{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--on-surface-variant)}
.nav-overlay__meta a:hover{color:var(--on-surface)}
body.menu-open{overflow:hidden}

@media(max-width:880px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .menu-btn{display:block}
}
@media(min-width:881px){
  .nav-overlay{display:none}
}

/* ---------- Editorial card ---------- */
.card{
  background:var(--deep-espresso);
  border:1px solid var(--cream-10);
  border-radius:0;padding:2.4rem 2.2rem;
  transition:border-color .35s ease;
}
.card:hover{border-color:var(--cream-20)}
/* Images inside cards: grayscale by default → color on hover (700ms) */
.card-img,.img-editorial{
  filter:grayscale(1);
  transition:filter .7s ease;
  width:100%;height:100%;object-fit:cover;
}
.card:hover .card-img,.img-editorial:hover{filter:grayscale(0)}

/* Glassmorphic floating overlay (content over imagery) */
.glass{
  background:rgba(26,17,13,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--cream-10);
}

/* ---------- Ticker — full-width cream bar, oxblood text ---------- */
.ticker{
  background:var(--antique-cream);
  overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--cream-20);border-bottom:1px solid var(--cream-20);
}
.ticker-track{
  display:inline-block;padding:.85rem 0;
  animation:ticker-scroll 32s linear infinite;
}
.ticker-track span{
  font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--oxblood-red);
  padding:0 2rem;
}
@keyframes ticker-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
}

/* ---------- Icons — thin, illustrative, warm taupe ---------- */
.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
  color:var(--warm-taupe);
}

/* ---------- Footer ---------- */
.foot{
  background:var(--surface-container-lowest);
  color:var(--on-surface-variant);
  padding:5rem 0 3rem;
  border-top:1px solid var(--cream-10);
}

/* =====================================================================
   REFERENCE COMPOSITION LAYER
   Full-bleed hero · IP watermarks · overlapping diagnostic notes ·
   scroll reveals · giant oxblood CTA — editorial-magazine moves.
   ===================================================================== */

/* ---------- Full-bleed image + overlay (hero, case studies) ---------- */
.bleed-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1) brightness(.62) contrast(1.15);
}
.bleed-overlay{
  position:absolute;inset:0;
  /* Espresso wash — darkest top & bottom so headline/CTA stay legible,
     photo (skyline + lamp) reads through the centre. */
  background:
    linear-gradient(to bottom,
      rgba(26,17,13,.72) 0%,
      rgba(26,17,13,.42) 45%,
      rgba(26,17,13,.62) 100%);
  backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);
}
/* Neutral placeholder used until real photography is supplied */
.img-slot{
  background:
    linear-gradient(135deg,var(--surface-container) 0%,var(--deep-espresso) 60%,var(--surface-container-lowest) 100%);
  position:relative;overflow:hidden;
}
.img-slot::after{
  content:attr(data-slot);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(241,226,199,.18);
}

/* ---------- IP watermark — oversized rotated label ---------- */
.ip-watermark{
  font-family:var(--sans);font-weight:600;
  opacity:.03;position:absolute;pointer-events:none;white-space:nowrap;
  transform:rotate(-90deg);transform-origin:center;
  color:var(--on-surface);z-index:1;
  text-transform:uppercase;letter-spacing:.05em;
}

/* ---------- Gradient editorial line (oxblood → cream fade) ---------- */
.editorial-line{
  height:1px;width:100%;
  background:linear-gradient(90deg,rgba(125,32,14,.5) 0%,rgba(241,226,199,.1) 100%);
}

/* ---------- Overlapping "diagnostic note" cards ---------- */
.note-card{
  padding:2.5rem;max-width:28rem;position:relative;z-index:20;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.note-card .note-id{
  display:block;margin-bottom:1rem;
  font-family:var(--sans);font-weight:600;font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  opacity:.6;
}
.note-card .note-q{
  font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;margin-bottom:1.4rem;
}
.note-card .note-stats{display:flex;gap:2rem}
.note-card .note-stats .big{display:block;font-family:var(--serif);font-size:30px;line-height:1}
.note-card .note-stats .lbl{
  font-family:var(--sans);font-weight:600;font-size:8px;letter-spacing:.12em;text-transform:uppercase;opacity:.6;
}
.note-card--oxblood{background:var(--oxblood-red);color:#fff}
.note-card--cream{background:var(--antique-cream);color:var(--deep-espresso)}

/* ---------- Founder stat columns ---------- */
.stat-col{border-left:1px solid var(--oxblood-red);padding-left:1.4rem}
.stat-col .big{display:block;font-family:var(--serif);font-size:40px;line-height:1;margin-bottom:.3rem}
.stat-col .lbl{font-family:var(--sans);font-weight:600;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--warm-taupe)}

/* ---------- Surface-band helpers (per-section tonal shifts) ---------- */
.band-surface{background:var(--surface)}
.band-espresso{background:var(--deep-espresso)}
.band-lowest{background:var(--surface-container-lowest)}
.band-bright{background:var(--surface-bright)}

/* ---------- Giant oxblood final CTA ---------- */
.cta-mega{
  background:var(--oxblood-red);color:#fff;position:relative;overflow:hidden;
  min-height:88vh;display:flex;align-items:center;justify-content:center;
  padding:6rem var(--margin-page);text-align:center;
}
.cta-mega .dots{
  position:absolute;inset:0;opacity:.1;
  background-image:radial-gradient(circle,#fff 1px,transparent 1px);
  background-size:60px 60px;pointer-events:none;
}
.cta-mega h2{
  font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(72px,16vw,200px);line-height:.8;letter-spacing:-.04em;
  text-transform:uppercase;margin-bottom:2.5rem;
}
.cta-mega .corner{
  position:absolute;bottom:2rem;
  font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.cta-mega .corner.left{left:var(--margin-page)}
.cta-mega .corner.right{right:var(--margin-page)}
/* Split button group with hairline divider */
.btn-split{display:flex;flex-wrap:wrap;justify-content:center;border:1px solid rgba(255,255,255,.2)}
.btn-split a{
  padding:1.6rem 2.6rem;font-family:var(--sans);font-weight:600;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;transition:background .3s ease,color .3s ease;
}
.btn-split a:first-child{background:#fff;color:var(--oxblood-red)}
.btn-split a:first-child:hover{background:var(--antique-cream)}
.btn-split a:last-child{background:transparent;color:#fff;border-left:1px solid rgba(255,255,255,.2)}
.btn-split a:last-child:hover{background:#fff;color:var(--oxblood-red)}

/* ---------- Live status dot ---------- */
.status-dot{display:inline-flex;align-items:center;gap:.6rem}
.status-dot i{width:7px;height:7px;border-radius:9999px;background:#5fbf7a;display:inline-block;animation:status-pulse 2s ease-in-out infinite}
@keyframes status-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.status-dot i{animation:none}}

/* ---------- Scroll-reveal ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Mobile type clamps (per design-system breakpoints) ---------- */
@media(max-width:820px){
  .display-xl{font-size:64px;line-height:60px;letter-spacing:-0.02em}
  .headline-lg{font-size:40px;line-height:44px}
  .headline-md{font-size:34px;line-height:40px}
  .cta-mega{min-height:auto;padding:5rem var(--margin-page)}
  .ip-watermark{display:none}
}