/* ============================================================ */
/* CMR DEVELOPERS — Deep Emerald + Warm Gold + Ivory           */
/* Palette: #0C2218 bg · #C9A84C gold · #F5F0E6 ivory          */
/* Fonts: Cormorant Garamond + Inter Tight                      */
/* ============================================================ */

:root {
  --bg:    #0C2218;
  --paper: #102D1E;
  --ink:   #F5F0E6;
  --mute:  #8FA99A;
  --line:  rgba(245,240,230,.13);
  --accent:#C9A84C;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter Tight', system-ui, -apple-system, sans-serif;
  --ease:  cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; overflow-x:hidden; max-width:100vw}
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  font-weight:400; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  max-width:100vw; position:relative;
}
::selection{background:var(--accent); color:var(--bg)}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:0; color:inherit}

/* ---------- type ---------- */
.eyebrow{font-size:10.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--mute); font-weight:500}
h1,h2,h3,h4{font-family:var(--serif); font-weight:300; letter-spacing:-.02em; line-height:.98}
em{font-style:italic; font-weight:400}

.wrap{max-width:1560px; margin:0 auto; padding:0 40px}
@media (max-width:760px){.wrap{padding:0 22px}}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:22px 40px;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), padding .35s;
}
.nav.scrolled{
  padding:12px 40px;
  background:rgba(8,26,16,.97);
  backdrop-filter:blur(28px) saturate(140%); -webkit-backdrop-filter:blur(28px) saturate(140%);
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
@media (max-width:760px){.nav,.nav.scrolled{padding-left:22px;padding-right:22px}}
.brand{display:flex; align-items:center; gap:14px; font-family:var(--serif); font-size:22px; letter-spacing:.01em; font-weight:400}
.brand-mark{
  width:34px;height:34px; border:1px solid var(--ink);
  display:grid; place-items:center; position:relative; transform:rotate(45deg);
}
.brand-mark::after{content:""; width:10px;height:10px; background:var(--accent)}
.brand-name{display:flex; flex-direction:column; line-height:1}
.brand-name span:last-child{font-family:var(--sans); font-size:9px; letter-spacing:.32em; text-transform:uppercase; color:var(--mute); margin-top:5px}
.nav-links{display:flex; gap:36px; font-size:12px; letter-spacing:.18em; text-transform:uppercase}
.nav-links a{position:relative; padding:6px 0; opacity:.85; transition:opacity .3s}
.nav-links a:hover{opacity:1}
.nav-links a::after{
  content:""; position:absolute; left:0;right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:left}
.nav-cta{
  background:var(--accent); border:1px solid var(--accent); padding:11px 22px; border-radius:99px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--bg) !important;
  transition:background .35s, color .35s, border-color .35s;
}
.nav-cta:hover{background:var(--bg) !important; color:var(--accent) !important; border-color:var(--accent) !important}
@media (max-width:900px){.nav-links{display:none}}

/* ---------- hero ---------- */
.hero{position:relative; height:100svh; min-height:720px; overflow:hidden}
.hero-img{
  position:absolute; inset:0;
  background-image:url('https://images.unsplash.com/photo-1613977257363-707ba9348227?w=1600&q=80');
  background-size:cover; background-position:center;
  transform:scale(1.08); animation:kb 22s var(--ease) forwards;
  filter:brightness(.45) contrast(1.05) saturate(.9);
}
@keyframes kb{to{transform:scale(1)}}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,26,16,.82) 0%,rgba(8,26,16,.25) 22%,rgba(8,26,16,.48) 55%,rgba(8,26,16,.96) 100%),
    radial-gradient(ellipse at left bottom,rgba(0,0,0,.65) 0%,rgba(0,0,0,0) 65%);
}
.hero-content{
  position:relative; z-index:2; height:100%;
  max-width:1560px; margin:0 auto; padding:120px 40px 70px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
@media (max-width:760px){.hero-content{padding:100px 22px 60px}}
.hero-tag{
  display:flex; gap:14px; align-items:center; margin-bottom:36px;
  font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:rgba(245,240,230,.85);
  flex-wrap:wrap; line-height:1.4;
}
.hero-tag .dot{width:6px;height:6px;background:var(--accent);border-radius:99px;display:inline-block; box-shadow:0 0 16px var(--accent)}
.hero h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(52px,10vw,180px); line-height:.9; letter-spacing:-.045em;
  max-width:18ch;
}
.hero h1 em{font-weight:400; color:var(--accent)}
.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:48px; flex-wrap:wrap; margin-top:56px;
  border-top:1px solid rgba(245,240,230,.2); padding-top:22px;
}
.hero-foot p{max-width:46ch; font-size:15.5px; color:rgba(245,240,230,.9); font-weight:300; line-height:1.65; text-shadow:0 1px 12px rgba(0,0,0,.6)}
.scroll-cue{display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,240,230,.65)}
.scroll-bar{display:inline-block;width:38px;height:1px;background:rgba(245,240,230,.35);position:relative;overflow:hidden}
.scroll-bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);animation:slide 2.6s infinite var(--ease)}
@keyframes slide{50%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* ---------- ticker ---------- */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap; padding:20px 0;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(20px,2.6vw,32px); color:var(--mute); letter-spacing:-.005em;
  background:var(--paper);
}
.ticker-track{display:inline-block; animation:tick 48s linear infinite}
.ticker-track span{margin:0 22px}
.ticker-track .sep{color:var(--accent); margin:0 8px}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- sections ---------- */
section{padding:110px 0; position:relative}
@media (max-width:760px){section{padding:72px 0}}
.sec-head{
  display:grid; grid-template-columns:1fr 2.2fr; gap:80px;
  align-items:end; margin-bottom:90px;
}
@media (max-width:900px){.sec-head{grid-template-columns:1fr; gap:28px; margin-bottom:56px}}
.sec-head .label{display:flex; align-items:center; gap:18px}
.sec-head .label::before{content:""; width:36px; height:1px; background:var(--accent)}
.sec-head h2{font-size:clamp(40px,6.2vw,92px); font-weight:300; letter-spacing:-.03em}

/* ---------- manifesto ---------- */
.manifesto{position:relative}
.manifesto-grid{display:grid; grid-template-columns:1fr 1fr; gap:120px; align-items:start}
@media (max-width:900px){.manifesto-grid{grid-template-columns:1fr; gap:60px}}
.manifesto-quote{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(28px,3.4vw,46px); line-height:1.18; letter-spacing:-.018em;
  color:var(--ink);
}
.manifesto-quote em{color:var(--accent)}
.manifesto-quote::before{
  content:"\201C"; font-size:1.6em; line-height:0; vertical-align:-.18em;
  color:var(--accent); margin-right:.05em;
}
.manifesto-side p{font-size:16px; color:rgba(245,240,230,.78); line-height:1.85; margin-bottom:18px; max-width:46ch}
.signature{margin-top:36px; display:flex; gap:28px; align-items:center}
.signature .sig-mark{font-family:var(--serif); font-style:italic; font-size:36px; color:var(--accent)}
.signature .sig-meta{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute)}
.signature .sig-meta strong{display:block; color:var(--ink); font-weight:400; margin-bottom:4px; font-family:var(--serif); font-size:14px; letter-spacing:.04em; text-transform:none}

/* ---------- trust strip ---------- */
.featured-in{
  background:var(--paper); padding:36px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.fi-grid{display:grid; grid-template-columns:auto repeat(5,1fr); gap:48px; align-items:center}
.fi-lbl{font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--mute); white-space:nowrap}
.fi-logo{
  font-family:var(--serif); font-size:clamp(15px,1.4vw,21px); font-weight:400;
  color:rgba(245,240,230,.65); text-align:center; letter-spacing:.02em;
  transition:color .35s, transform .35s var(--ease);
}
.fi-logo em{font-style:italic; color:var(--accent); opacity:.85}
.fi-logo:hover{color:var(--ink); transform:translateY(-2px)}
@media (max-width:760px){.fi-grid{grid-template-columns:1fr 1fr; gap:24px} .fi-lbl{grid-column:1/-1; text-align:center}}

/* ---------- index / stats strip ---------- */
.index-strip{
  background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:0;
}
.index-grid{display:grid; grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.index-grid{grid-template-columns:repeat(2,1fr)}}
.ix{padding:60px 36px; border-right:1px solid var(--line); position:relative; overflow:hidden}
.ix:last-child{border-right:0}
.ix .num{font-family:var(--serif); font-size:13px; letter-spacing:.04em; color:var(--accent); margin-bottom:48px}
.ix .v{font-family:var(--serif); font-weight:300; font-size:clamp(48px,5.2vw,76px); line-height:1; letter-spacing:-.03em}
.ix .v sup{font-size:.45em; vertical-align:super; margin-left:3px; color:var(--mute)}
.ix .l{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); margin-top:18px}

/* ---------- featured projects ---------- */
.feature{position:relative; padding:0; border-bottom:1px solid var(--line)}
.feat-grid{display:grid; grid-template-columns:1fr 1fr; min-height:760px; align-items:stretch}
@media (max-width:900px){.feat-grid{grid-template-columns:1fr}}
.feat-img{position:relative; overflow:hidden; min-height:520px}
.feat-img > div{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform 1.4s var(--ease);
}
.feature:hover .feat-img > div{transform:scale(1.04)}
.feat-text{
  padding:90px 80px; display:flex; flex-direction:column; justify-content:center;
  background:var(--bg); position:relative;
}
@media (max-width:900px){.feat-text{padding:70px 22px}}
.feat-num{position:absolute; top:32px; right:32px; font-family:var(--serif); font-size:12px; letter-spacing:.18em; color:var(--mute)}
.feat-loc{font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); margin-bottom:24px}
.feat-flag{background:rgba(201,168,76,.15); padding:3px 10px; border-radius:99px; border:1px solid rgba(201,168,76,.3); margin-right:10px}
.feat-name{font-family:var(--serif); font-weight:300; font-size:clamp(40px,5vw,72px); line-height:1; letter-spacing:-.025em; margin-bottom:32px}
.feat-desc{font-size:15px; line-height:1.75; color:var(--mute); max-width:50ch; margin-bottom:36px}
.feat-meta{display:flex; gap:50px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--line)}
.feat-meta dl div{display:flex; flex-direction:column; gap:6px}
.feat-meta dt{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute)}
.feat-meta dd{font-family:var(--serif); font-size:18px; color:var(--ink); font-weight:400}
.feat-credit{font-size:11px; letter-spacing:.12em; color:rgba(201,168,76,.7); margin-top:24px; text-transform:uppercase}
.feature.reverse .feat-grid{direction:rtl}
.feature.reverse .feat-text{direction:ltr}
.feature.reverse .feat-img{direction:ltr}

/* ---------- pull quote / detail strip ---------- */
.detail-strip{
  height:60vh; min-height:420px; position:relative; overflow:hidden;
  background-image:url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=1600&q=80');
  background-size:cover; background-position:center;
}
.detail-strip::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,26,16,.5),rgba(8,26,16,.75))}
.detail-strip .pull{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  text-align:center; padding:0 22px;
}
.detail-strip h3{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(36px,7vw,100px); line-height:1; letter-spacing:-.03em; max-width:16ch;
}
.detail-strip h3 span{color:var(--accent)}

/* ---------- discipline / offering cards ---------- */
.disc{padding-top:160px}
.disc-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px}
@media (max-width:900px){.disc-cards{grid-template-columns:1fr}}
.dc{
  position:relative; overflow:hidden; aspect-ratio:5/6; min-height:520px;
  background:var(--paper); cursor:pointer; border:1px solid var(--line);
}
.dc .dc-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform 1.6s var(--ease), filter .8s;
  filter:brightness(.52) contrast(1.05);
}
.dc:hover .dc-bg{transform:scale(1.08); filter:brightness(.65) contrast(1.05)}
.dc::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,26,16,.1) 0%, rgba(8,26,16,.15) 50%, rgba(8,26,16,.95) 100%);
  pointer-events:none;
}
.dc-content{
  position:absolute; inset:0; z-index:2;
  padding:36px; display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--ink);
}
.dc-num{position:absolute; top:24px; left:24px; font-family:var(--serif); font-size:13px; letter-spacing:.06em; color:var(--accent)}
.dc-content h3{font-family:var(--serif); font-weight:300; font-size:clamp(28px,3vw,42px); line-height:1; letter-spacing:-.02em; margin-bottom:16px}
.dc-content h3 em{color:var(--accent)}
.dc-content p{font-size:14px; line-height:1.65; color:rgba(245,240,230,.85); margin-bottom:24px; max-width:32ch}
.dc-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px}
.dc-tags span{font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:6px 12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:99px; color:rgba(245,240,230,.85); backdrop-filter:blur(8px)}
.dc-cta{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); padding-top:18px; border-top:1px solid rgba(201,168,76,.4); display:flex; justify-content:space-between; align-items:center}
.dc-cta .arr{transition:transform .4s var(--ease)}
.dc:hover .dc-cta .arr{transform:translateX(8px)}

/* ---------- gallery strip ---------- */
.gallery{padding:0; display:grid; grid-template-columns:2fr 1fr; gap:4px; height:60vh; min-height:480px; background:var(--bg)}
.gallery > div{background-size:cover; background-position:center; position:relative; overflow:hidden}
.gallery > div::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(8,26,16,.7))}
.gallery .gcap{position:absolute; left:24px; bottom:24px; z-index:2; font-family:var(--serif); font-style:italic; font-size:18px; color:#fff}
@media (max-width:760px){.gallery{grid-template-columns:1fr; height:auto} .gallery > div{height:50vh}}

/* ---------- testimonials ---------- */
.testimonials{background:var(--paper); position:relative; overflow:hidden}
.t-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:64px}
@media (max-width:900px){.t-grid{grid-template-columns:1fr; gap:32px}}
.t-card{
  padding:48px; border:1px solid var(--line); background:var(--bg);
  position:relative; transition:transform .5s var(--ease), border-color .5s;
}
.t-card:hover{transform:translateY(-6px); border-color:var(--accent)}
.t-card::before{
  content:"\201C"; position:absolute; top:18px; left:24px;
  font-family:var(--serif); font-size:96px; line-height:1; color:var(--accent); opacity:.4; font-weight:300;
}
.t-quote{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(19px,2vw,25px); line-height:1.45; letter-spacing:-.012em;
  color:var(--ink); margin-bottom:32px; padding-top:28px;
}
.t-meta{display:flex; align-items:center; gap:16px; padding-top:28px; border-top:1px solid var(--line)}
.t-avatar{
  width:54px; height:54px; border-radius:99px; background:var(--paper);
  border:1px solid var(--accent); display:grid; place-items:center;
  font-family:var(--serif); font-size:22px; color:var(--accent); flex-shrink:0;
}
.t-name strong{display:block; font-family:var(--serif); font-size:18px; font-weight:400; color:var(--ink); margin-bottom:2px}
.t-name span{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}

/* ---------- process timeline ---------- */
.timeline{padding:120px 0; background:var(--paper)}
.tl-rows{margin-top:64px}
.tl-row{
  display:grid; grid-template-columns:auto 1fr 2fr auto; gap:48px;
  padding:36px 0; border-bottom:1px solid var(--line); align-items:center;
  transition:padding .5s var(--ease), background .5s;
}
.tl-row:hover{padding-left:18px; background:linear-gradient(90deg,rgba(201,168,76,.05),transparent 50%)}
.tl-step{
  width:64px; height:64px; border-radius:99px;
  border:1px solid var(--accent); display:grid; place-items:center;
  font-family:var(--serif); font-size:24px; color:var(--accent); font-weight:300;
}
.tl-name{font-family:var(--serif); font-weight:300; font-size:clamp(28px,3vw,42px); letter-spacing:-.02em; line-height:1}
.tl-name em{color:var(--accent)}
.tl-desc{font-size:14.5px; color:var(--mute); line-height:1.7; max-width:60ch}
.tl-time{font-family:var(--serif); font-size:14px; color:var(--mute); white-space:nowrap; font-style:italic}
@media (max-width:900px){.tl-row{grid-template-columns:auto 1fr; gap:24px} .tl-desc,.tl-time{display:none}}

/* ---------- studio / company ---------- */
.studio{}
.studio-bleed{position:relative; height:60vh; min-height:420px; overflow:hidden; margin-bottom:90px}
.studio-bleed > div{position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.65)}
.studio-bleed::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 0%,rgba(8,26,16,.85) 100%)}
.studio-bleed .caption{
  position:absolute; left:40px; bottom:40px; z-index:2;
  font-family:var(--serif); font-style:italic; font-size:clamp(28px,3.6vw,52px);
  font-weight:300; letter-spacing:-.02em; max-width:18ch;
}
.studio-bleed .caption .accent{color:var(--accent)}
.founders-grid{display:grid; grid-template-columns:1fr 1fr; gap:80px}
@media (max-width:900px){.founders-grid{grid-template-columns:1fr; gap:64px}}
.founder{display:grid; grid-template-columns:160px 1fr; gap:36px; align-items:start}
@media (max-width:560px){.founder{grid-template-columns:1fr; gap:24px}}
.founder-mono{
  width:160px; aspect-ratio:1/1.2;
  background:var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:48px; font-weight:300; letter-spacing:-.05em;
  color:var(--accent);
}
.founder h3{font-family:var(--serif); font-weight:400; font-size:32px; margin-bottom:6px; letter-spacing:-.015em}
.founder .role{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); margin-bottom:22px}
.founder p{font-size:14.5px; color:var(--mute); line-height:1.75; max-width:46ch}
.founder .ig{display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:12px; letter-spacing:.06em; padding-bottom:3px; border-bottom:1px solid var(--accent); color:var(--ink)}
.founder .ig:hover{color:var(--accent)}

/* ---------- lead CTA (ivory panel) ---------- */
.lead-cta{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--bg);
  padding:0;
}
.lead-cta-grid{display:grid; grid-template-columns:1fr 1fr; min-height:560px; align-items:stretch}
@media (max-width:900px){.lead-cta-grid{grid-template-columns:1fr}}
.lc-img{position:relative; overflow:hidden; min-height:380px}
.lc-img > div{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); transition:transform 1.4s var(--ease)}
.lead-cta:hover .lc-img > div{transform:scale(1.08)}
.lc-text{padding:80px; display:flex; flex-direction:column; justify-content:center}
@media (max-width:900px){.lc-text{padding:60px 24px}}
.lc-text .eyebrow{color:var(--accent); margin-bottom:24px}
.lc-text h2{font-family:var(--serif); font-weight:300; font-size:clamp(40px,5vw,72px); line-height:1; letter-spacing:-.025em; margin-bottom:28px; color:var(--bg)}
.lc-text h2 em{color:var(--accent)}
.lc-text p{font-size:15.5px; line-height:1.7; color:rgba(12,34,24,.72); margin-bottom:36px; max-width:46ch}
.lc-actions{display:flex; gap:16px; flex-wrap:wrap; align-items:center}

/* ---------- buttons ---------- */
.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 32px; background:var(--accent); color:var(--bg);
  font-family:var(--sans); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  border-radius:99px; cursor:pointer; border:1px solid var(--accent);
  transition:transform .35s var(--ease), background .35s, color .35s;
}
.btn-primary:hover{transform:translateX(6px); background:var(--bg); color:var(--accent); border-color:var(--accent)}
.btn-secondary{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 28px; background:transparent; color:rgba(245,240,230,.9);
  font-family:var(--sans); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  border-radius:99px; cursor:pointer; border:1px solid rgba(245,240,230,.28);
  transition:border-color .35s, color .35s;
}
.btn-secondary:hover{border-color:var(--accent); color:var(--accent)}
/* btn-secondary inside ivory .lead-cta */
.lead-cta .btn-secondary{color:rgba(12,34,24,.85); border-color:rgba(12,34,24,.25)}
.lead-cta .btn-secondary:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- FAQ ---------- */
.faq{padding:120px 0}
.faq-grid{display:grid; grid-template-columns:1fr 1.6fr; gap:80px; align-items:start}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr; gap:32px}}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line); cursor:pointer}
.faq-q{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:28px 0; font-family:var(--serif); font-weight:300;
  font-size:clamp(19px,2.2vw,27px); letter-spacing:-.012em;
  transition:padding .4s var(--ease), color .4s;
}
.faq-item:hover .faq-q{padding-left:14px; color:var(--accent)}
.faq-q .ic{
  width:32px; height:32px; border:1px solid var(--line); border-radius:99px;
  display:grid; place-items:center; font-family:var(--sans); font-size:14px;
  flex-shrink:0; transition:transform .4s var(--ease), background .4s, color .4s, border-color .4s;
}
.faq-item.open .faq-q .ic{transform:rotate(45deg); background:var(--accent); color:var(--bg); border-color:var(--accent)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .6s var(--ease), padding .6s var(--ease)}
.faq-item.open .faq-a{max-height:400px; padding:0 0 32px}
.faq-a p{font-size:15px; color:var(--mute); line-height:1.75; max-width:62ch}

/* ---------- contact ---------- */
.contact{background:var(--bg); padding:160px 0 60px}
.contact h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(52px,10vw,180px); line-height:.9; letter-spacing:-.045em;
  margin-bottom:80px;
}
.contact h2 em{color:var(--accent); font-weight:400}
.contact h2 a{position:relative; display:inline-block; transition:transform .6s var(--ease)}
.contact h2 a:hover{transform:translateX(14px)}
.contact h2 a::after{content:" →"; color:var(--accent)}
.contact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:48px; padding-top:48px; border-top:1px solid var(--line)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr 1fr; gap:40px}}
@media (max-width:560px){.contact-grid{grid-template-columns:1fr}}
.ci strong{display:block; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--mute); margin-bottom:14px; font-weight:500}
.ci{font-family:var(--serif); font-size:18px; line-height:1.6; color:var(--ink); font-weight:400}
.ci a:hover{color:var(--accent)}

/* ---------- footer ---------- */
footer{
  margin-top:80px; padding-top:36px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:20px;
}
footer > div:first-child{font-size:12px; letter-spacing:.08em; color:var(--mute)}
.socials{display:flex; gap:28px; flex-wrap:wrap}
.socials a{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); transition:color .3s}
.socials a:hover{color:var(--accent)}
.built-by{font-size:11px; letter-spacing:.12em; color:rgba(143,169,154,.5)}
.built-by .heart{color:var(--accent)}
.built-by a{border-bottom:1px solid rgba(201,168,76,.3); color:var(--mute); transition:color .3s}
.built-by a:hover{color:var(--accent)}

/* ---------- floating WhatsApp ---------- */
.fab{
  position:fixed; right:24px; bottom:24px; z-index:70;
  width:60px; height:60px; border-radius:99px;
  background:#25d366; color:#fff;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 12px 32px rgba(37,211,102,.4), 0 4px 12px rgba(0,0,0,.3);
  transition:transform .35s var(--ease), box-shadow .35s;
  text-decoration:none;
}
.fab:hover{transform:translateY(-4px) scale(1.08); box-shadow:0 18px 42px rgba(37,211,102,.55), 0 6px 16px rgba(0,0,0,.4)}
.fab svg{width:30px; height:30px; fill:currentColor}
.fab .pulse{position:absolute; inset:-4px; border-radius:99px; border:2px solid #25d366; animation:pulse 2.4s infinite}
@keyframes pulse{0%{transform:scale(.95);opacity:.7}70%{transform:scale(1.4);opacity:0}100%{opacity:0}}
.fab .lbl{
  position:absolute; right:74px; top:50%; transform:translateY(-50%);
  background:var(--ink); color:var(--bg);
  padding:10px 18px; border-radius:99px;
  font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap; pointer-events:none; opacity:0; transform:translate(8px,-50%);
  transition:opacity .3s, transform .3s var(--ease);
}
.fab:hover .lbl{opacity:1; transform:translate(0,-50%)}
@media (max-width:560px){.fab .lbl{display:none} .fab{width:54px;height:54px;right:16px;bottom:16px} .fab svg{width:26px;height:26px}}

/* ---------- sticky CTA bar ---------- */
.sticky-bar{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(160%);
  z-index:65;
  background:rgba(8,26,16,.95);
  border:1px solid var(--accent);
  padding:14px 14px 14px 28px; border-radius:99px;
  display:flex; align-items:center; gap:18px;
  box-shadow:0 18px 48px rgba(0,0,0,.65), 0 0 0 4px rgba(201,168,76,.08);
  transition:transform .6s var(--ease);
  max-width:calc(100vw - 32px);
  backdrop-filter:blur(8px);
}
.sticky-bar.show{transform:translateX(-50%) translateY(0)}
.sticky-bar .sb-text{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink); white-space:nowrap}
.sticky-bar .sb-text em{color:var(--accent); font-weight:400; font-style:italic}
.sticky-bar .sb-cta{
  background:var(--accent); color:var(--bg);
  padding:11px 22px; border-radius:99px;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  transition:background .3s, color .3s;
}
.sticky-bar .sb-cta:hover{background:var(--bg); color:var(--accent)}
@media (max-width:760px){.sticky-bar{display:none}}

/* ---------- section dots ---------- */
.section-dots{
  position:fixed; right:32px; top:50%; transform:translateY(-50%); z-index:55;
  display:flex; flex-direction:column; gap:14px;
}
.section-dots a{
  width:8px; height:8px; border-radius:99px; background:rgba(245,240,230,.22);
  transition:all .3s; position:relative;
}
.section-dots a:hover,.section-dots a.active{background:var(--accent); transform:scale(1.4)}
.section-dots a .lab{
  position:absolute; right:18px; top:50%; transform:translate(8px,-50%);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute);
  white-space:nowrap; opacity:0; transition:opacity .3s, transform .3s var(--ease);
  pointer-events:none;
}
.section-dots a:hover .lab{opacity:1; transform:translate(0,-50%); color:var(--accent)}
@media (max-width:1100px){.section-dots{display:none}}

/* ---------- cursor ---------- */
.cursor{
  position:fixed; width:14px; height:14px; border-radius:99px;
  background:var(--accent); pointer-events:none; z-index:999;
  transition:transform .15s var(--ease), opacity .3s;
  mix-blend-mode:exclusion; transform:translate(-50%,-50%);
}
@media (max-width:900px){.cursor{display:none}}

/* ---------- scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; height:2px; background:var(--accent); z-index:80;
  width:0%; transition:width .1s linear;
}

/* ---------- scroll reveals ---------- */
.reveal{opacity:0; transform:translateY(48px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.reveal.in{opacity:1; transform:none}
.d1{transition-delay:.18s}
.r-up{opacity:0; transform:translateY(60px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.r-up.in{opacity:1; transform:none}
.r-zoom{opacity:0; transform:scale(.94); transition:opacity 1.2s var(--ease), transform 1.4s var(--ease)}
.r-zoom.in{opacity:1; transform:scale(1)}
.r-fade{opacity:0; transition:opacity 1.4s var(--ease)}
.r-fade.in{opacity:1}

/* parallax */
.parallax{will-change:transform}

/* hero arrow */
.hero-arrow{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:3; width:24px; height:40px; border:1px solid rgba(245,240,230,.55); border-radius:14px;
  display:grid; place-items:center;
}
.hero-arrow::after{
  content:""; width:3px; height:8px; background:var(--accent); border-radius:99px;
  animation:harrow 2s infinite var(--ease);
}
@keyframes harrow{0%{transform:translateY(-6px); opacity:0}50%{opacity:1}100%{transform:translateY(8px); opacity:0}}

/* ---------- mobile polish ---------- */
@media (max-width:760px){
  .hero-tag{font-size:9.5px; letter-spacing:.24em; margin-bottom:28px}
  .hero h1{font-size:clamp(40px,11vw,68px) !important; line-height:.95}
  .hero-foot{margin-top:36px; gap:24px; padding-top:18px}
  .hero-foot p{font-size:14px}
  .hero-foot .scroll-cue{display:none}
  .hero-arrow{display:none}
  .manifesto-quote{font-size:22px; line-height:1.3}
  .fi-grid{gap:14px}
  .fi-logo{font-size:14px}
}
@media (max-width:560px){
  .brand{gap:10px; font-size:18px}
  .brand-mark{width:28px; height:28px}
  .brand-mark::after{width:8px; height:8px}
  .brand-name span:last-child{font-size:8px; margin-top:3px}
  .nav-cta{padding:9px 16px; font-size:10px}
  .nav,.nav.scrolled{padding-left:16px; padding-right:16px; padding-top:14px; padding-bottom:14px}
}
@media (max-width:900px){
  .sec-head{gap:20px; margin-bottom:48px}
  .sec-head h2{font-size:clamp(32px,8vw,48px)}
  .fn-grid{gap:36px}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.r-up,.r-zoom,.r-fade{opacity:1; transform:none; transition:none}
  .hero-img{animation:none}
  .ticker-track{animation:none}
}