/* ====================================================
   Gustavo Sousa — editorial dark premium
   ==================================================== */

:root{
  --gold:     oklch(0.78 0.09 82);
  --gold-dim: oklch(0.66 0.07 82);
  --copper:   oklch(0.70 0.12 45);
  --sage:     oklch(0.72 0.04 140);

  --ink:    #0a0a0a;
  --ink-2:  #111111;
  --ink-3:  #181817;
  --line:   rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.18);
  --paper:  #f2eee4;   /* cream / ivory */
  --paper-2:#e7e1d3;
  --fg:     rgba(255,255,255,.92);
  --fg-dim: rgba(255,255,255,.56);
  --fg-mute:rgba(255,255,255,.38);

  --accent: var(--gold);
  --display: "Fraunces", "Times New Roman", serif;
  --sans:    "Inter Tight", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1600px;
  --pad:  clamp(20px, 3.5vw, 56px);
}

/* theme variants via Tweaks */
body.theme-ivory{
  --ink: #f2eee4; --ink-2:#ebe6d8; --ink-3:#e1dcce;
  --fg: rgba(10,10,10,.92); --fg-dim: rgba(10,10,10,.55); --fg-mute: rgba(10,10,10,.38);
  --line: rgba(10,10,10,.12); --line-2: rgba(10,10,10,.22);
  --paper:#0a0a0a; --paper-2:#141413;
}
body.theme-navy{
  --ink: #0c1220; --ink-2:#101828; --ink-3:#16203a;
  --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18);
}
body.accent-copper{ --accent: var(--copper); }
body.accent-sage  { --accent: var(--sage); }
body.font-tight   { --display: "Inter Tight", system-ui, sans-serif; }

*{ box-sizing: border-box; margin: 0; padding: 0; }
html,body{
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
img{ display: block; max-width: 100%; }
button{ font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }

::selection{ background: var(--accent); color: #000; }

/* film grain overlay */
body.grain-on::before{
  content:"";
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: 9990;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform: translate(0,0)} 20%{transform: translate(-5%,5%)} 40%{transform: translate(3%,-8%)}
  60%{transform: translate(-8%,3%)} 80%{transform: translate(6%,-3%)} 100%{transform: translate(0,0)}
}


/* =========== NAV =========== */
.nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(10,10,10,.78), rgba(10,10,10,0));
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.nav.scrolled{
  background: rgba(10,10,10,.82);
  border-color: var(--line);
}
body.theme-ivory .nav{ background: linear-gradient(to bottom, rgba(242,238,228,.85), rgba(242,238,228,0)); }
body.theme-ivory .nav.scrolled{ background: rgba(242,238,228,.92); }

.nav-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.brand{ display: flex; align-items: baseline; gap: 10px; font-family: var(--display); }
.brand-mark{
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  border: 1px solid var(--line-2); padding: 4px 6px; border-radius: 2px;
  color: var(--fg-dim);
}
.brand-full{ font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.brand-full em{ font-style: italic; color: var(--fg-dim); font-weight: 300; }

.nav-links{
  display: flex; gap: 28px;
  justify-content: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg-dim);
  letter-spacing: .02em;
}
.nav-links a{ position: relative; padding: 4px 0; transition: color .25s; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.9,.2,1);
}
.nav-links a:hover{ color: var(--fg); }
.nav-links a:hover::after{ transform: scaleX(1); }

.nav-right{ display: flex; align-items: center; gap: 18px; }
.lang{
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--fg-mute);
  display: inline-flex; gap: 6px;
}
.lang-opt{ transition: color .2s; padding: 2px 0; }
.lang-opt.active{ color: var(--fg); }
.lang-sep{ color: var(--fg-mute); }

.call-pill{
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-2);
  padding: 9px 16px; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em;
  transition: border-color .3s, background .3s, color .3s;
}
.call-pill:hover{ border-color: var(--accent); color: var(--accent); }
.call-pill .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(200,180,110,.7);} 70%{ box-shadow: 0 0 0 12px rgba(200,180,110,0);} 100%{box-shadow: 0 0 0 0 rgba(200,180,110,0);}
}

.nav-ticker{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding: 8px 0;
  background: rgba(0,0,0,.3);
}
body.theme-ivory .nav-ticker{ background: rgba(255,255,255,.3); }
.ticker-track{ display: inline-flex; white-space: nowrap; animation: ticker 60s linear infinite; }
.ticker-track span{ padding: 0 16px; }
@keyframes ticker{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* =========== section basics =========== */
section{ position: relative; padding: clamp(80px, 12vh, 160px) var(--pad); }
.wrap{ max-width: var(--maxw); margin: 0 auto; }

.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before{
  content:""; width: 24px; height: 1px; background: var(--accent);
}

h1,h2,h3{ font-family: var(--display); font-weight: 300; letter-spacing: -.02em; line-height: .96; }

.display-xl{ font-size: clamp(56px, 11vw, 180px); font-weight: 300; }
.display-l { font-size: clamp(40px, 7.5vw, 112px); font-weight: 300; }
.display-m { font-size: clamp(32px, 5vw, 68px); font-weight: 400; }
.italic{ font-style: italic; font-weight: 300; color: var(--fg-dim); }

.reveal{ opacity: 0; transform: translateY(32px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.9,.2,1); }
.reveal.in{ opacity: 1; transform: translateY(0); }
.reveal-line{ overflow: hidden; }
.reveal-line > *{ display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2,.9,.2,1); }
.reveal-line.in > *{ transform: translateY(0); }

/* =========== HERO =========== */
.hero{
  min-height: 100vh;
  padding-top: 140px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 40px;
  overflow: hidden;
  position: relative;
}

.hero-meta{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: end;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}
.hero-meta .eyebrow{ grid-column: 1/4; }
.hero-meta .loc{
  grid-column: 5/9;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.hero-meta .yr{
  grid-column: 10/13;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--fg-dim);
  text-align: right;
  text-transform: uppercase;
}

.hero-title{
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 3;
  pointer-events: none;
}
.hero-title h1{
  font-size: clamp(60px, 13vw, 220px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: .88;
}
.hero-title .word-row{ display: block; overflow: hidden; }
.hero-title .word-row > span{ display: inline-block; }
.hero-title .kicker{
  font-size: clamp(64px, 14vw, 240px);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: -.04em;
}
.hero-title .suffix{ color: var(--fg-dim); }

.hero-stage{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
/* editorial portrait — cinematic layered composition */
.hero-portrait{
  position: absolute;
  right: 0;
  top: 80px;
  bottom: -80px;
  width: clamp(360px, 48vw, 720px);
  z-index: 2;
  pointer-events: auto;
  overflow: hidden;
  mask-image: linear-gradient(to left, #000 60%, transparent 100%),
              linear-gradient(to top, transparent 0%, #000 20%, #000 90%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to left, #000 60%, transparent 100%),
              linear-gradient(to top, transparent 0%, #000 20%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
}
.hero-portrait-frame{ display: none; }
.hero-portrait img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
  opacity: 0;
  transition: opacity 2s cubic-bezier(.2,.9,.2,1), transform 10s linear;
  filter: grayscale(.4) contrast(1.1) brightness(.85);
  z-index: 1;
}
.hero-portrait img.active{ opacity: 1; transform: scale(1.05); }
.hero-portrait::after{
  content:"";
  position: absolute; inset: 0;
  background:
    linear-gradient(to left, transparent 20%, var(--ink) 95%),
    linear-gradient(to bottom, transparent 60%, var(--ink) 100%),
    linear-gradient(to top, transparent 85%, var(--ink) 100%);
  pointer-events: none;
  z-index: 2;
}
.hero-portrait-cap{
  position: absolute;
  right: 32px; bottom: 32px;
  display: flex; gap: 10px; align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  z-index: 3;
}
.hero-portrait-cap .dot-sep{ color: var(--accent); }

.hero-bottom{
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  padding-bottom: 32px;
  position: relative;
  z-index: 3;
}
.hero-lede{
  max-width: 440px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--fg-dim);
  font-weight: 300;
}
.hero-lede strong{ color: var(--fg); font-weight: 400; }
.hero-scroll{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero-scroll::after{
  content:""; width: 1px; height: 48px;
  background: linear-gradient(to top, transparent, var(--accent));
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{ 0%,100%{opacity:.3; transform:scaleY(.6);} 50%{opacity:1; transform:scaleY(1);} }

.hero-index{
  position: absolute;
  left: var(--pad);
  bottom: 44px;
  display: flex;
  gap: 12px;
  z-index: 4;
}
.hero-index .tick{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--fg-mute);
  padding: 6px 0;
  border-top: 1px solid var(--line);
  width: 36px;
  text-align: center;
  transition: color .4s, border-color .4s;
}
.hero-index .tick.active{ color: var(--accent); border-color: var(--accent); }

/* =========== MANIFESTO =========== */
.manifesto{
  padding-top: clamp(120px, 18vh, 220px);
  padding-bottom: clamp(80px, 12vh, 160px);
  border-top: 1px solid var(--line);
}
.manifesto .wrap{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.manifesto .eyebrow{ grid-column: 1/4; align-self: start; padding-top: 16px; }
.manifesto-body{
  grid-column: 4/13;
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 56px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--fg);
}
.manifesto-body em{ color: var(--accent); font-style: italic; font-weight: 300; }
.manifesto-body .dim{ color: var(--fg-mute); }

/* =========== PROPERTIES — filmstrip =========== */
.properties{ padding-bottom: clamp(80px, 12vh, 160px); }
.props-head{
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin-bottom: 56px;
  align-items: end;
}
.props-head .eyebrow{ grid-column: 1/4; }
.props-head h2{ grid-column: 4/10; font-size: clamp(36px, 5.5vw, 84px); font-weight: 300; letter-spacing: -.02em; }
.props-head h2 em{ color: var(--accent); font-style: italic; }
.props-nav{
  grid-column: 11/13;
  display: flex; gap: 8px; justify-content: flex-end;
}
.props-nav button{
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--line-2);
  display: inline-grid; place-items: center;
  transition: border-color .25s, color .25s, background .25s;
}
.props-nav button:hover{ border-color: var(--accent); color: var(--accent); }
.props-nav button svg{ width: 18px; height: 18px; }

.props-strip{
  padding-left: var(--pad);
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 80px;
  cursor: grab;
}
.props-strip::-webkit-scrollbar{ display: none; }
.props-strip.dragging{ cursor: grabbing; }

.prop{
  flex: 0 0 clamp(340px, 36vw, 520px);
  scroll-snap-align: start;
  display: grid;
  gap: 20px;
}
.prop-frame{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-3);
  transition: transform .6s cubic-bezier(.2,.9,.2,1);
}
.prop:hover .prop-frame{ transform: translateY(-8px); }
.prop-frame .num{
  position: absolute; top: 20px; left: 20px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  color: rgba(255,255,255,.8);
  z-index: 2;
}
.prop-frame .status{
  position: absolute; top: 20px; right: 20px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.9);
  text-transform: uppercase;
  z-index: 2;
  backdrop-filter: blur(8px);
}
.prop-frame .status.sold{ color: var(--accent); border-color: var(--accent); }
.prop-frame .ph{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, var(--ink-2) 0 2px, var(--ink-3) 2px 10px);
  color: var(--fg-mute);
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase;
}
.prop-frame .ph-inner{
  text-align: center;
  display: grid; gap: 12px;
  padding: 24px;
}
.prop-frame .ph-inner .big{
  font-family: var(--display); font-style: italic; font-size: 48px;
  color: var(--fg-dim); font-weight: 300;
  letter-spacing: -.02em;
}
.prop-frame .glare{
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .9s cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
}
.prop:hover .prop-frame .glare{ transform: translateX(100%); }

.prop-body{ display: grid; gap: 4px; padding-right: 20px; }
.prop-title{ font-family: var(--display); font-size: 24px; font-weight: 400; letter-spacing: -.01em; }
.prop-sub{ font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-mute); }
.prop-specs{
  display: flex; gap: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--fg-dim);
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.prop-specs span strong{ color: var(--fg); font-weight: 500; margin-right: 4px; }
.prop-price{
  font-family: var(--display); font-size: 22px; font-weight: 400;
  letter-spacing: -.01em;
  margin-top: 8px;
}
.prop-price .cur{ color: var(--fg-mute); font-size: 14px; margin-right: 4px; }

.props-progress{
  max-width: var(--maxw);
  margin: 32px auto 0;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--fg-mute);
}
.progress-track{
  flex: 1;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.progress-bar{
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--accent);
  width: 20%;
  transition: width .3s, transform .3s;
}

/* =========== ABOUT =========== */
.about{
  border-top: 1px solid var(--line);
  padding-top: clamp(100px, 16vh, 200px);
}
.about .wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.about-portrait{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
  position: sticky; top: 120px;
}
.about-portrait img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.1) contrast(1.05);
  transition: transform 1.2s cubic-bezier(.2,.9,.2,1);
}
.about-portrait:hover img{ transform: scale(1.04); }
.about-portrait .cap{
  position: absolute; bottom: 20px; left: 20px; right: 20px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: rgba(255,255,255,.8);
  text-transform: uppercase;
}
.about-text .eyebrow{ margin-bottom: 32px; }
.about-scroll-body{
  height: 420px;
  overflow-y: scroll;
  padding-right: 20px;
  margin-bottom: 48px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.about-scroll-body::-webkit-scrollbar{ width: 3px; }
.about-scroll-body::-webkit-scrollbar-track{ background: transparent; }
.about-scroll-body::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius: 2px; }
.about-scroll-body::-webkit-scrollbar-thumb:hover{ background: var(--accent); }
.about-text p{
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-dim);
  font-weight: 300;
  margin-bottom: 24px;
}
.about-text p:last-child{ margin-bottom: 0; }
.about-text p strong{ color: var(--fg); font-weight: 400; }
.about-facts{
  margin-top: 48px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.about-fact{
  background: var(--ink);
  padding: 28px 24px;
}
.about-fact .k{ font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute); display: block; margin-bottom: 12px; }
.about-fact .v{ font-family: var(--display); font-size: 22px; font-weight: 400; color: var(--fg); }

/* =========== PROCESS =========== */
.process{ padding-top: clamp(120px, 18vh, 220px); }
.process .wrap{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.process-head{ grid-column: 1/13; margin-bottom: 80px; display: grid; grid-template-columns: repeat(12,1fr); gap: 24px; align-items: end;}
.process-head .eyebrow{ grid-column: 1/4;}
.process-head h2{ grid-column: 4/13; font-size: clamp(44px, 6.5vw, 120px); font-weight: 300; letter-spacing: -.03em; }
.process-head h2 em{ color: var(--accent); font-style: italic; }

.steps{
  grid-column: 1/13;
  display: grid;
  gap: 0;
}
.step{
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr;
  gap: 24px;
  padding: 48px 0;
  border-top: 1px solid var(--line);
  align-items: start;
  position: relative;
  transition: background .5s;
}
.step:last-child{ border-bottom: 1px solid var(--line); }
.step:hover{ background: linear-gradient(to right, rgba(255,255,255,.015), transparent 80%); }
.step .num{
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em;
  color: var(--fg-mute);
}
.step .label{
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--fg-mute); text-transform: uppercase;
}
.step .title{
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.02;
  transition: transform .5s cubic-bezier(.2,.9,.2,1);
}
.step:hover .title{ transform: translateX(12px); }
.step .title em{ color: var(--accent); font-style: italic; font-weight: 300; }
.step .desc{
  color: var(--fg-dim);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 300;
  max-width: 380px;
}

/* =========== AWARDS =========== */
.awards{
  padding-top: clamp(120px, 18vh, 220px);
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: clamp(80px, 12vh, 160px);
}
.awards .wrap{
  display: grid; grid-template-columns: repeat(12,1fr); gap: 24px;
}
.awards-head{ grid-column: 1/13; display: grid; grid-template-columns: repeat(12,1fr); gap: 24px; margin-bottom: 64px; align-items: end;}
.awards-head .eyebrow{ grid-column: 1/4;}
.awards-head h2{ grid-column: 4/10; font-size: clamp(40px, 5.5vw, 88px); font-weight: 300; letter-spacing: -.02em; }
.awards-head h2 em{ color: var(--accent); font-style: italic; }
.awards-head .badge-count{
  grid-column: 11/13;
  text-align: right;
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: -.02em;
}
.awards-head .badge-count .n{ color: var(--accent); }
.awards-head .badge-count .lbl{ display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--fg-mute); text-transform: uppercase; margin-top: 8px;}

.awards-grid{
  grid-column: 1/13;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.award{
  background: var(--ink-2);
  padding: 40px 28px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  min-height: 220px;
  position: relative;
  transition: background .4s;
}
.award:hover{ background: var(--ink); }
.awards-grid-8{ grid-template-columns: repeat(4, 1fr); }
.award.rank-one{ background: var(--ink); border: 1px solid var(--accent); }
.award.rank-one .yr{ color: var(--accent); }
.award.rank-one .rank{ color: var(--accent); }
.award.rank-one .seal{ background: var(--accent); color: #000; border-color: var(--accent); }

.award .yr{
  font-family: var(--display); font-size: clamp(36px, 3.5vw, 52px);
  font-weight: 300; letter-spacing: -.02em;
  color: var(--fg);
}
.award:hover .yr{ color: var(--accent); }
.award .seal{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--accent);
}
.award .rank{
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--fg-mute); text-transform: uppercase;
}

/* =========== CONTACT =========== */
.contact{
  padding-top: clamp(120px, 18vh, 220px);
  padding-bottom: clamp(100px, 14vh, 180px);
}
.contact .wrap{
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.contact-lead h2{
  font-size: clamp(48px, 7vw, 128px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: .92;
  margin-bottom: 40px;
}
.contact-lead h2 em{ color: var(--accent); font-style: italic; }
.contact-lead p{
  color: var(--fg-dim);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 300;
  max-width: 440px;
  margin-bottom: 40px;
}
.contact-channels{
  display: grid; gap: 16px;
  margin-top: 48px;
}
.chan{
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  transition: padding-left .4s;
}
.chan:last-child{ border-bottom: 1px solid var(--line); }
.chan:hover{ padding-left: 12px; }
.chan .ico{ color: var(--accent); }
.chan .ico svg{ width: 18px; height: 18px; }
.chan .txt{ display: grid; gap: 2px; }
.chan .k{ font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--fg-mute); text-transform: uppercase; }
.chan .v{ font-size: 16px; color: var(--fg); }
.chan .arrow{ color: var(--fg-mute); transition: color .3s, transform .3s; }
.chan:hover .arrow{ color: var(--accent); transform: translateX(6px); }

.contact-socials{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  align-self: center;
}
.social-icon{
  background: var(--ink-2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  padding: 56px 24px;
  color: var(--fg-dim);
  transition: background .3s, color .3s;
}
.social-icon:hover{ background: var(--ink-3); color: var(--accent); }
.social-icon span{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
}

/* =========== FOOTER =========== */
.footer{
  border-top: 1px solid var(--line);
  padding: 64px var(--pad) 40px;
}
.footer-inner{
  max-width: var(--maxw); margin: 0 auto;
}
.footer-big{
  font-family: var(--display);
  font-size: clamp(72px, 15vw, 260px);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: .88;
  margin-bottom: 64px;
}
.footer-big em{ color: var(--accent); font-style: italic;}
.footer-meta{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--fg-mute);
}
.footer-meta h4{
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fg); margin-bottom: 16px; font-weight: 500;
}
.footer-meta a{ display: block; padding: 3px 0; transition: color .2s; text-transform: none; letter-spacing: .05em; font-size: 12px;}
.footer-meta a:hover{ color: var(--accent); }
.footer-bot{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px; margin-top: 32px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: var(--fg-mute); text-transform: uppercase;
}

/* =========== legal modal =========== */
.legal-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
}
.legal-modal{
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  width: 100%; max-width: 620px;
  max-height: 72vh;
  display: flex; flex-direction: column;
  border-radius: 2px;
}
.legal-modal-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.legal-modal-title{
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-dim);
}
.legal-modal-close{
  font-size: 20px; line-height: 1; color: var(--fg-mute);
  cursor: pointer; padding: 0 4px;
  transition: color .2s;
}
.legal-modal-close:hover{ color: var(--fg); }
.legal-modal-body{
  overflow-y: auto; padding: 24px;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.legal-modal-body::-webkit-scrollbar{ width: 3px; }
.legal-modal-body::-webkit-scrollbar-track{ background: transparent; }
.legal-modal-body::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius: 2px; }
.legal-modal-body p{
  font-size: 13px; line-height: 1.7; color: var(--fg-dim);
  font-weight: 300; margin-bottom: 16px;
}
.legal-modal-body p:last-child{ margin-bottom: 0; }
.legal-heading{
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
  margin: 28px 0 12px; font-weight: 400;
}
.legal-heading:first-child{ margin-top: 0; }

/* floating WA */
.wa{
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 50;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .3s, box-shadow .3s;
}
.wa:hover{ transform: scale(1.08); box-shadow: 0 14px 40px rgba(37,211,102,.4); }
.wa svg{ display: block; }

/* =========== Tweaks panel =========== */
.tweaks{
  position: fixed; right: 24px; top: 120px;
  width: 280px;
  background: rgba(20,20,20,.9);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-2);
  z-index: 80;
  font-family: var(--mono);
  padding: 20px;
  color: #fff;
}
.tweaks.hidden{ display: none; }
.tweaks-head{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 16px; }
.tweaks-title{ font-size: 10px; letter-spacing: .25em; text-transform: uppercase; }
#tweaks-close{ font-size: 22px; color: rgba(255,255,255,.5); line-height: 1; }
.tw-row{ display: grid; gap: 8px; margin-bottom: 16px; }
.tw-label{ font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.tw-pills{ display: flex; flex-wrap: wrap; gap: 6px; }
.tw-pill{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.6);
  padding: 6px 10px;
  transition: all .2s;
}
.tw-pill.active{ border-color: var(--accent); background: var(--accent); color: #000; }

/* mobile */
@media (max-width: 900px){
  .nav-links{ display: none; }
  .nav-inner{ grid-template-columns: auto 1fr; gap: 12px; }
  .hero-meta{ grid-template-columns: 1fr; gap: 8px; }
  .hero-meta .eyebrow,.hero-meta .loc,.hero-meta .yr{ grid-column: auto; text-align: left; }
  .hero-portrait{ right: -40px; width: 70vw; }
  .hero-bottom{ grid-template-columns: 1fr; gap: 24px; }
  .hero-stats{ gap: 24px; }
  .manifesto .eyebrow, .manifesto-body{ grid-column: 1/13; }
  .about .wrap, .contact .wrap{ grid-template-columns: 1fr; }
  .about-portrait{ position: relative; top: auto; }
  .step{ grid-template-columns: 40px 1fr; }
  .step .desc, .step .label{ grid-column: 2/3; }
  .awards-grid{ grid-template-columns: repeat(2,1fr); }
  .form-row{ grid-template-columns: 1fr; }
  .footer-meta{ grid-template-columns: 1fr 1fr; }
  .props-head{ grid-template-columns: 1fr; }
  .props-head .eyebrow, .props-head h2, .props-nav{ grid-column: auto; }
  .props-nav{ justify-content: flex-start; }
}