/* ==========================================================================
   TrendyWebs: Design System
   Concept: performance-marketing terminal / ledger. Data as material.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#14181F;
  --ink-2:#0F1319;
  --panel:#1B212B;
  --panel-2:#232A35;
  --paper:#EFEBDF;
  --paper-2:#E4DECC;
  --cream:#F5F1E6;
  --charcoal:#181B20;
  --amber:#E8A33D;
  --amber-dim:#C98A2E;
  --moss:#8A9B6A;
  --rust:#A8461F;
  --line-on-dark: rgba(245,241,230,0.14);
  --line-on-dark-strong: rgba(245,241,230,0.28);
  --line-on-light: rgba(24,27,32,0.14);
  --line-on-light-strong: rgba(24,27,32,0.26);
  --radius: 3px;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: 'Space Grotesk', 'Inter', sans-serif;
  --body: 'Inter', -apple-system, sans-serif;
  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:600; letter-spacing:-0.01em; }
p{ margin:0; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

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

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Utility tags / mono labels ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber-dim);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  background:var(--amber);
  display:inline-block;
  flex:none;
}
.eyebrow.on-dark{ color:var(--amber); }

.tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:4px 9px;
  border:1px solid var(--line-on-light-strong);
  border-radius:var(--radius);
  color:var(--charcoal);
  white-space:nowrap;
}
.tag.on-dark{ border-color:var(--line-on-dark-strong); color:var(--cream); }
.tag.amber{ border-color:var(--amber); color:var(--amber-dim); }
.tag.amber.on-dark{ border-color:var(--amber); color:var(--amber); }
.tag.moss{ border-color:var(--moss); color:var(--moss); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:14px 24px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--amber); color:var(--ink); }
.btn-primary:hover{ background:var(--cream); }
.btn-ghost-dark{ border-color:var(--line-on-dark-strong); color:var(--cream); }
.btn-ghost-dark:hover{ border-color:var(--amber); color:var(--amber); }
.btn-ghost-light{ border-color:var(--line-on-light-strong); color:var(--charcoal); }
.btn-ghost-light:hover{ border-color:var(--ink); }
.btn-arrow::after{ content:"→"; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--ink);
  border-bottom:1px solid var(--line-on-dark);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
  max-width:var(--maxw); margin:0 auto;
}
.logo{
  font-family:var(--display); font-weight:700; font-size:20px;
  color:var(--cream); letter-spacing:-0.02em;
  display:inline-flex; align-items:center;
}
.logo img{ height:48px; width:auto; display:block; }
.footer-brand .logo img{ height:42px; }
.logo span{ color:var(--amber); }
.nav-links{
  display:flex; align-items:center; gap:32px;
  font-family:var(--mono); font-size:13px; letter-spacing:0.04em; text-transform:uppercase;
}
.nav-links a{ color:var(--cream); opacity:0.75; transition:opacity .15s ease, color .15s ease; position:relative; }
.nav-links a:hover{ opacity:1; color:var(--amber); }
.nav-links a.active{ opacity:1; color:var(--amber); }
.nav-cta{ display:flex; align-items:center; gap:20px; }
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line-on-dark-strong); border-radius:var(--radius);
  width:40px; height:36px; cursor:pointer; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:9px; width:22px; height:2px; background:var(--cream);
}
.nav-toggle span{ top:17px; }
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

.mobile-cta{ display:none; }
.header-social{ display:flex; align-items:center; gap:10px; margin-right:4px; }
.header-social a{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:1px solid var(--line-on-dark-strong); border-radius:var(--radius);
  opacity:0.75; transition:opacity .15s ease, border-color .15s ease;
}
.header-social a:hover{ opacity:1; border-color:var(--amber); }
.header-social svg{ width:15px; height:15px; fill:var(--cream); }

body.menu-locked{ overflow:hidden; }

@media (max-width:860px){
  .header-social{ display:none; }

  .nav-toggle{
    position:relative; z-index:210;
    transition:border-color .2s ease;
  }
  .nav-toggle span{ transition:background .2s ease .1s; }
  .nav-toggle span::before, .nav-toggle span::after{ transition:transform .25s ease, top .25s ease; }
  .nav-toggle.active{ border-color:var(--amber); }
  .nav-toggle.active span{ background:transparent; }
  .nav-toggle.active span::before{ top:0; transform:rotate(45deg); background:var(--amber); }
  .nav-toggle.active span::after{ top:0; transform:rotate(-45deg); background:var(--amber); }

  .nav-links{
    position:fixed; inset:0;
    background:var(--ink);
    background-image:
      linear-gradient(var(--line-on-dark) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-on-dark) 1px, transparent 1px);
    background-size:32px 32px;
    display:flex; flex-direction:column; justify-content:center; align-items:stretch;
    gap:0; padding:0 var(--pad);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .28s ease, visibility .28s ease, transform .28s ease;
    z-index:200; overflow-y:auto;
    counter-reset:navitem;
  }
  .nav-links.open{ opacity:1; visibility:visible; transform:translateY(0); }
  .nav-links li{ counter-increment:navitem; }
  .nav-links li.mobile-cta{ counter-increment:none; }
  .nav-links a{
    width:100%; padding:16px 0; border-top:none;
    font-family:var(--display); font-size:clamp(26px,7vw,36px); font-weight:600;
    display:flex; align-items:baseline; gap:16px; opacity:0.85;
  }
  .nav-links a::before{
    content:counter(navitem, decimal-leading-zero);
    font-family:var(--mono); font-size:13px; color:var(--amber); opacity:0.9; letter-spacing:0.04em;
  }
  .nav-links li.mobile-cta a::before{ content:none; }
  .nav-links a.active{ opacity:1; }
  .nav-cta .btn-primary{ display:none; }
  .nav-toggle{ display:block; }
  .mobile-cta{
    display:block; margin-top:28px; padding-top:28px; border-top:1px solid var(--line-on-dark);
  }
  .mobile-cta .btn{ width:100%; justify-content:center; padding:16px 24px; }
  .mobile-cta-social{
    display:flex; justify-content:center; gap:20px; margin-top:24px;
  }
  .mobile-cta-social a{ color:var(--cream); opacity:0.7; }
  .mobile-cta-social svg{ width:20px; height:20px; fill:currentColor; }
}

/* ---------- Ticker / marquee (signature element) ---------- */
.ticker{
  background:var(--ink-2);
  border-bottom:1px solid var(--line-on-dark);
  overflow:hidden;
  white-space:nowrap;
  position:relative;
}
.ticker-track{
  display:inline-flex;
  align-items:center;
  animation:ticker-scroll 32s linear infinite;
  will-change:transform;
}
.ticker.slow .ticker-track{ animation-duration:46s; }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ticker-item{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--cream);
  opacity:0.8;
  padding:10px 28px;
  border-right:1px solid var(--line-on-dark);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.ticker-item b{ color:var(--amber); font-weight:600; opacity:1; }
.ticker-item .dot{ width:5px; height:5px; background:var(--moss); display:inline-block; border-radius:50%; }
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
}

/* ---------- Sections ---------- */
.section{ padding:96px 0; }
.section.tight{ padding:64px 0; }
.section-dark{ background:var(--ink); color:var(--cream); }
.section-panel{ background:var(--panel); color:var(--cream); }
.section-paper{ background:var(--paper); }
.section-paper-2{ background:var(--paper-2); }

.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,4vw,42px); line-height:1.1; }
.section-head p{ margin-top:16px; font-size:17px; opacity:0.85; max-width:52ch; }
.section-dark .section-head p, .section-panel .section-head p{ color:var(--cream); opacity:0.72; }

hr.rule{ border:none; border-top:1px solid var(--line-on-light); margin:0; }
.section-dark hr.rule, .section-panel hr.rule{ border-top-color:var(--line-on-dark); }

/* ---------- Hero ---------- */
.hero{
  background:var(--ink);
  color:var(--cream);
  padding:88px 0 0;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
  align-items:stretch;
  padding-bottom:72px;
}
.hero h1{
  font-size:clamp(36px, 5.6vw, 64px);
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--cream);
}
.hero h1 em{ font-style:normal; color:var(--amber); }
.hero-sub{
  margin-top:24px;
  font-size:18px;
  color:var(--cream);
  opacity:0.75;
  max-width:46ch;
}
.hero-ctas{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }

.hero-photo{
  position:relative; overflow:hidden;
  border-radius:var(--radius);
  background:var(--panel);
  min-height:340px; max-height:560px;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(10%); }
.hero-panel .panel-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--cream); opacity:0.6;
  padding-bottom:16px; border-bottom:1px solid var(--line-on-dark); margin-bottom:18px;
}
.panel-head .blink{
  width:7px; height:7px; border-radius:50%; background:var(--moss);
  animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }
.panel-row{ display:flex; justify-content:space-between; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line-on-dark); }
.panel-row:last-child{ border-bottom:none; }
.panel-row .label{ font-size:12px; color:var(--cream); opacity:0.6; letter-spacing:0.04em; }
.panel-row .value{ font-size:22px; color:var(--amber); font-weight:600; }

/* ---------- Trust marquee (logos as text) ---------- */
.trust{ background:var(--paper); border-bottom:1px solid var(--line-on-light); border-top:1px solid var(--line-on-light); overflow:hidden; }
.trust-track{ display:inline-flex; align-items:center; animation:ticker-scroll 38s linear infinite; }
.trust-item{
  font-family:var(--display); font-weight:600; font-size:19px; color:var(--charcoal); opacity:0.55;
  padding:26px 40px; white-space:nowrap; display:inline-flex; align-items:center; gap:40px;
}
.trust-item::after{ content:"•"; opacity:0.35; margin-left:40px; font-family:var(--mono); }
@media (prefers-reduced-motion: reduce){ .trust-track{ animation:none; flex-wrap:wrap; } }

/* ---------- Cards / modules grid ---------- */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-on-light); border:1px solid var(--line-on-light); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-on-light); border:1px solid var(--line-on-light); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-on-light); border:1px solid var(--line-on-light); }
.section-dark .grid-4, .section-dark .grid-3, .section-dark .grid-2,
.section-panel .grid-4, .section-panel .grid-3, .section-panel .grid-2{ background:var(--line-on-dark); border-color:var(--line-on-dark); }

.module{ background:var(--paper); padding:32px 28px; }
.section-dark .module, .section-panel .module{ background:var(--panel); }
.module .idx{ font-family:var(--mono); font-size:12px; color:var(--amber-dim); letter-spacing:0.08em; }
.section-dark .module .idx, .section-panel .module .idx{ color:var(--amber); }
.module h3{ font-size:19px; margin-top:14px; }
.module p{ margin-top:10px; font-size:14.5px; opacity:0.8; line-height:1.55; }

@media (max-width:960px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(1,1fr);} }
@media (max-width:600px){ .grid-4, .grid-2{ grid-template-columns:1fr; } }

/* ---------- Stat readouts ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-on-dark); border:1px solid var(--line-on-dark); }
.stat{ background:var(--ink); padding:40px 30px; }
.stat .num{ font-family:var(--display); font-size:clamp(34px,4.4vw,54px); color:var(--amber); font-weight:700; letter-spacing:-0.01em; }
.stat .lbl{ margin-top:10px; font-family:var(--mono); font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--cream); opacity:0.65; }
@media (max-width:760px){ .stat-row{ grid-template-columns:1fr; } }

/* ---------- Ledger rows (lists with mono index) ---------- */
.ledger{ border-top:1px solid var(--line-on-light); }
.section-dark .ledger, .section-panel .ledger{ border-top-color:var(--line-on-dark); }
.ledger-row{
  display:grid; grid-template-columns:64px 1fr; gap:24px;
  padding:26px 0; border-bottom:1px solid var(--line-on-light);
}
.section-dark .ledger-row, .section-panel .ledger-row{ border-bottom-color:var(--line-on-dark); }
.ledger-row .tag-idx{ font-family:var(--mono); font-size:13px; color:var(--amber-dim); padding-top:3px; }
.section-dark .ledger-row .tag-idx, .section-panel .ledger-row .tag-idx{ color:var(--amber); }
.ledger-row h4{ font-size:18px; }
.ledger-row p{ margin-top:8px; font-size:15px; opacity:0.8; max-width:60ch; }

/* ---------- Two column layouts ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; align-items:stretch; }
  .hero{ padding-top:64px; }
  .split{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:500px){
  .hero-photo{ min-height:240px; max-height:340px; }
}

/* ---------- Founder dossier card ---------- */
.dossier{
  background:var(--ink); color:var(--cream);
  border:1px solid var(--line-on-dark); border-radius:var(--radius);
  padding:clamp(28px,5vw,56px);
  display:grid; grid-template-columns:220px 1fr; gap:48px;
}
.dossier-id{ font-family:var(--mono); font-size:12px; color:var(--amber); letter-spacing:0.08em; }
.dossier-photo{
  aspect-ratio:3/4; background:var(--panel); border:1px solid var(--line-on-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:15px; color:var(--cream); opacity:0.4; text-align:center; padding:16px;
}
.dossier h3{ font-size:28px; color:var(--cream); }
.dossier .role{ font-family:var(--mono); font-size:12.5px; color:var(--amber); text-transform:uppercase; letter-spacing:0.08em; margin-top:6px; display:block; }
.dossier p{ margin-top:18px; font-size:15.5px; line-height:1.7; opacity:0.82; max-width:60ch; }
@media (max-width:760px){ .dossier{ grid-template-columns:1fr; } .dossier-photo{ max-width:200px; margin:0 auto; } }

/* ---------- Case study / log entry ---------- */
.case-log{
  border:1px solid var(--line-on-light); border-radius:var(--radius);
  margin-bottom:24px; overflow:hidden; background:var(--paper);
}
.case-log-head{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding:22px 28px; background:var(--ink); color:var(--cream);
}
.case-log-head .case-no{ font-family:var(--mono); font-size:13px; color:var(--amber); letter-spacing:0.08em; }
.case-log-head h3{ font-size:20px; margin-top:4px; color:var(--cream); }
.case-log-body{ padding:30px 28px; display:grid; gap:26px; }
.case-log-body .field{ }
.case-log-body .field .fk{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber-dim); margin-bottom:8px; }
.case-log-body .field p{ font-size:15px; line-height:1.65; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.result-chip{
  font-family:var(--mono); font-size:13px; padding:8px 14px; border-radius:var(--radius);
  background:var(--ink); color:var(--amber); border:1px solid var(--line-on-dark-strong);
}
.takeaway{
  border-left:3px solid var(--amber); padding:14px 18px; background:var(--paper-2);
  font-size:14.5px; font-style:normal;
}
.takeaway .fk{ color:var(--amber-dim); }

@media (min-width:760px){
  .case-log-body{ grid-template-columns:1fr 1fr; }
  .case-log-body .field.full{ grid-column:1 / -1; }
}

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-grid .full{ grid-column:1 / -1; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.field-label{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cream); opacity:0.65; margin-bottom:8px;
}
input, textarea{
  width:100%; background:var(--panel); border:1px solid var(--line-on-dark-strong);
  border-radius:var(--radius); padding:13px 14px; color:var(--cream); font-family:var(--body); font-size:15px;
}
input::placeholder, textarea::placeholder{ color:var(--cream); opacity:0.35; }
textarea{ resize:vertical; min-height:120px; }
.form-note{ font-family:var(--mono); font-size:12px; opacity:0.55; margin-top:14px; }
.form-status{ font-family:var(--mono); font-size:13px; margin-top:16px; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ color:var(--moss); }
.form-status.err{ color:var(--rust); }

/* ---------- Photos ---------- */
.photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-on-light); border:1px solid var(--line-on-light); }
.photo-frame{ position:relative; background:var(--ink); overflow:hidden; aspect-ratio:4/5; }
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(15%) contrast(1.02); transition:filter .3s ease, transform .4s ease; }
.photo-frame:hover img{ filter:grayscale(0%) contrast(1.05); transform:scale(1.03); }
.photo-frame .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px; background:linear-gradient(to top, rgba(15,19,25,0.85), transparent);
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--cream);
}
@media (max-width:760px){ .photo-grid{ grid-template-columns:1fr; } }

.photo-inline{
  position:relative;
  margin-top:28px; aspect-ratio:16/10; overflow:hidden;
  background:var(--ink);
}
.photo-inline img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(10%); }

.img-placeholder{
  display:none; position:absolute; inset:0;
  flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px;
  background:var(--panel); border:1px dashed var(--line-on-dark-strong); padding:16px;
}
.img-placeholder span{ font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--cream); opacity:0.55; }
.img-placeholder code{ font-family:var(--mono); font-size:12.5px; color:var(--amber); background:none; }

/* ---------- Accordion ---------- */
.accordion{ border-top:1px solid var(--line-on-light); }
.section-dark .accordion, .section-panel .accordion{ border-top-color:var(--line-on-dark); }
.accordion-item{ border-bottom:1px solid var(--line-on-light); }
.section-dark .accordion-item, .section-panel .accordion-item{ border-bottom-color:var(--line-on-dark); }
.accordion-trigger{
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:18px;
  padding:22px 0; text-align:left; color:inherit;
  font-family:var(--display); font-size:17px; font-weight:600;
}
.accordion-icon{ width:20px; height:20px; flex:none; position:relative; }
.accordion-icon::before, .accordion-icon::after{
  content:""; position:absolute; background:var(--amber-dim); border-radius:1px;
}
.section-dark .accordion-icon::before, .section-dark .accordion-icon::after,
.section-panel .accordion-icon::before, .section-panel .accordion-icon::after{ background:var(--amber); }
.accordion-icon::before{ width:14px; height:2px; top:9px; left:3px; }
.accordion-icon::after{ width:2px; height:14px; top:3px; left:9px; transition:transform .2s ease, opacity .2s ease; }
.accordion-trigger[aria-expanded="true"] .accordion-icon::after{ transform:rotate(90deg); opacity:0; }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
.accordion-panel-inner{ padding:0 0 22px 38px; }
.accordion-panel-inner p{ font-size:14.5px; line-height:1.6; opacity:0.8; max-width:56ch; }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(15,19,25,0.75);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
body.modal-locked{ overflow:hidden; }
.modal-dialog{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line-on-dark);
  border-radius:var(--radius);
  width:100%; max-width:560px;
  max-height:90vh; overflow-y:auto;
  padding:36px;
  color:var(--cream);
  transform:translateY(12px);
  transition:transform .22s ease;
}
.modal-overlay.open .modal-dialog{ transform:translateY(0); }
.modal-close{
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:var(--radius);
  border:1px solid var(--line-on-dark-strong); background:none; color:var(--cream);
  font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0.7; transition:opacity .15s ease, border-color .15s ease;
}
.modal-close:hover{ opacity:1; border-color:var(--amber); }
.modal-head h3{ font-size:24px; color:var(--cream); margin-top:8px; }
.modal-head p{ margin-top:10px; font-size:14.5px; opacity:0.7; }
.modal-dialog form{ margin-top:26px; }
@media (max-width:600px){
  .modal-dialog{ padding:26px 22px; }
}

/* ---------- Presence chips ---------- */
.chip-list{ display:flex; gap:12px; flex-wrap:wrap; }
.chip{
  font-family:var(--mono); font-size:13px; letter-spacing:0.04em; text-transform:uppercase;
  padding:10px 18px; border:1px solid var(--line-on-light-strong); border-radius:var(--radius);
}
.section-dark .chip, .section-panel .chip{ border-color:var(--line-on-dark-strong); }

.social-row{ display:flex; gap:12px; margin-top:20px; }
.social-row a{
  width:36px; height:36px; border:1px solid var(--line-on-dark-strong); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; opacity:0.75; transition:opacity .15s ease, border-color .15s ease;
}
.social-row a:hover{ opacity:1; border-color:var(--amber); }
.social-row svg{ width:16px; height:16px; fill:var(--cream); }

/* ---------- Final CTA ---------- */
.cta-final{ text-align:left; }
.cta-final h2{ font-size:clamp(30px,4.8vw,50px); max-width:16ch; color:var(--cream); }
.cta-final .hero-ctas{ margin-top:32px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink-2); color:var(--cream); padding:72px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; }
.footer-brand .logo{ margin-bottom:16px; }
.footer-brand p{ opacity:0.6; font-size:14.5px; max-width:34ch; }
.footer-col h5{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber); margin-bottom:18px; font-weight:500; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col a{ opacity:0.65; font-size:14.5px; transition:opacity .15s ease; }
.footer-col a:hover{ opacity:1; color:var(--amber); }
.footer-bottom{
  border-top:1px solid var(--line-on-dark); padding:22px 0; display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:12px; opacity:0.5; flex-wrap:wrap; gap:10px;
}
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ background:var(--ink); color:var(--cream); padding:64px 0 56px; }
.page-hero h1{ font-size:clamp(30px,5vw,48px); color:var(--cream); max-width:18ch; }
.page-hero p{ margin-top:18px; font-size:17px; opacity:0.72; max-width:52ch; }
.page-hero .split{ grid-template-columns:1.4fr 0.6fr; gap:40px; align-items:center; }
.page-hero .hero-photo{ min-height:170px; max-height:240px; }
@media (max-width:860px){
  .page-hero .split{ grid-template-columns:1fr; }
  .page-hero .hero-photo{ max-height:200px; }
}