:root {
  /* Ethös REAL brand, black & white monochrome (Expansion-drive brand assets, athletic-club).
     Replaces the cream/gold ethos-site(3) mockup that wrongly overrode the real brand. */
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #0a0a0a;
  --muted: #f4f4f2;
  --line: rgba(10,10,10,.16);
  --accent: #0a0a0a;
  --accent-2: #565656;
  --dark: #0a0a0a;
  --dark-2: #141414;
  --white: #ffffff;
  --max: 1280px;
  --shadow: 0 30px 90px rgba(0,0,0,.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 5%, rgba(255,255,255,.15), transparent 26rem),
    var(--bg);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
body:before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button, input { border-radius: 0; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 4vw;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(to bottom, rgba(8,8,7,.86), rgba(8,8,7,.3));
  backdrop-filter: blur(18px);
}
.brand { font-weight: 800; letter-spacing: .24em; font-size: 1rem; }
.desktop-nav { display: flex; align-items: center; gap: 30px; font-size: .86rem; }
.desktop-nav a { opacity: .68; transition: opacity .2s ease; }
.desktop-nav a:hover { opacity: 1; }
.header-cta {
  padding: 10px 17px;
  border: 1px solid rgba(255,255,255,.5);
  font-size: .82rem;
  font-weight: 750;
  transition: .25s ease;
}
.header-cta:hover { background: var(--white); color: var(--ink); }

.section-pad { position: relative; padding: 125px 6vw; }
.section-pad > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.eyebrow, .section-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}
.eyebrow:before, .section-kicker:before { content:''; width: 34px; height: 1px; background: currentColor; }

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(7,7,6,.98) 0%, rgba(7,7,6,.88) 49%, rgba(7,7,6,.45) 100%),
    radial-gradient(circle at 77% 34%, rgba(255,255,255,.38), transparent 21rem),
    linear-gradient(135deg, #090908, #161616 58%, #0a0a09);
  overflow: hidden;
  padding-top: 155px;
}
.hero:before {
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to right, transparent 7%, black 56%, transparent 100%);
}
.hero:after {
  content:'E';
  position:absolute;
  right:-.03em;
  top:50%;
  transform:translateY(-50%);
  font-family:'Playfair Display', serif;
  font-size:min(62vw, 850px);
  line-height:.7;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.08);
  pointer-events:none;
}
.hero > * { position:relative; z-index:2; }
.hero h1 {
  max-width: 1100px;
  margin: 0;
  font-size: clamp(4rem, 8.2vw, 8.7rem);
  line-height: .9;
  letter-spacing: -.065em;
  font-weight: 780;
}
.hero h1 span {
  display:inline-block;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight:700;
  color: var(--accent);
  transform: translateY(.02em);
}
.hero-copy {
  max-width: 730px;
  margin: 34px 0 0;
  font-size: clamp(1.08rem, 1.8vw, 1.4rem);
  color: rgba(248,246,239,.67);
}
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.button {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding: 14px 22px;
  font-weight:750;
  border:1px solid rgba(255,255,255,.35);
  overflow:hidden;
  transition:.25s ease;
}
.button.primary { background:var(--accent); border-color:var(--accent); color:var(--ink); }
.button.primary:hover { transform:translateY(-2px); box-shadow:0 14px 38px rgba(255,255,255,.22); }
.button.secondary:hover { background:rgba(255,255,255,.08); }
.hero-proof {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  max-width:900px !important;
  margin-left:0 !important;
  margin-top:78px;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-proof div { padding:24px 32px 0 0; display:flex; flex-direction:column; gap:5px; }
.hero-proof strong { font-size:.95rem; }
.hero-proof span { color:rgba(248,246,239,.48); font-size:.88rem; }

.dark-panel { background:var(--dark); color:var(--white); }
.dark-panel:before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 85% 10%, rgba(255,255,255,.13), transparent 25rem);
  pointer-events:none;
}
.dark-panel .section-kicker { color:#d8d8d4; }
h2 { margin:0; font-size:clamp(2.7rem,5.5vw,5.5rem); line-height:.98; letter-spacing:-.055em; }
h3 { margin:0 0 10px; font-size:1.18rem; }
p { margin:0; }
.two-col { display:grid; grid-template-columns:1.08fr .92fr; gap:85px; align-items:center; }
.two-col.top-align { align-items:start; }
.body-stack { display:grid; gap:24px; font-size:1.12rem; color:rgba(248,246,241,.68); }
.pill-grid, .evidence-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:58px; }
.pill-grid span, .evidence-grid span, .city-cloud span {
  border:1px solid currentColor;
  padding:10px 14px;
  font-size:.86rem;
  opacity:.78;
  transition:.2s ease;
}
.pill-grid span:hover, .evidence-grid span:hover, .city-cloud span:hover { opacity:1; transform:translateY(-2px); }

.manifesto { background:var(--paper); }
.manifesto blockquote {
  margin:0 0 80px;
  font-family:'Playfair Display',serif;
  font-size:clamp(3.8rem,8.2vw,8.6rem);
  line-height:.86;
  letter-spacing:-.045em;
  color:var(--accent-2);
}
.manifesto-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); box-shadow:var(--shadow); }
.manifesto-grid article { position:relative; background:var(--paper); padding:34px; min-height:220px; overflow:hidden; }
.manifesto-grid article:after { content:'↗'; position:absolute; right:26px; bottom:22px; color:var(--accent); opacity:.75; }
.manifesto-grid p { color:rgba(12,12,11,.65); }

.muted { background:var(--muted); }
.cards { display:grid; gap:18px; margin-top:58px; }
.cards.three { grid-template-columns:repeat(3,1fr); }
.cards.four { grid-template-columns:repeat(4,1fr); }
.card {
  position:relative;
  border:1px solid var(--line);
  padding:32px;
  background:rgba(255,255,255,.3);
  min-height:290px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform:translateY(-7px); box-shadow:0 22px 55px rgba(18,16,10,.1); }
.card.featured { background:var(--ink); color:var(--white); transform:translateY(-12px); box-shadow:0 30px 70px rgba(12,12,11,.24); }
.card.featured:hover { transform:translateY(-18px); }
.card.dark { background:var(--dark-2); border-color:rgba(255,255,255,.1); min-height:260px; }
.card.dark:before { content:''; position:absolute; width:120px; height:120px; border-radius:50%; right:-45px; top:-45px; border:1px solid rgba(255,255,255,.28); }
.card .number { display:block; margin-bottom:70px; color:var(--accent); font-weight:800; font-size:.8rem; letter-spacing:.15em; }
.card p { color:rgba(12,12,11,.62); }
.card.featured p, .card.dark p { color:rgba(248,246,241,.58); }
.large-copy { font-size:1.3rem; color:rgba(12,12,11,.62); }
.callout { margin-top:52px; padding:32px 34px; border-left:4px solid var(--accent); background:var(--paper); font-size:1.22rem; font-weight:750; box-shadow:0 20px 50px rgba(18,16,10,.08); }

.timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:64px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.11); }
.timeline > div { position:relative; background:var(--dark); padding:30px 24px; min-height:285px; transition:background .25s ease; }
.timeline > div:hover { background:#191814; }
.timeline span { display:inline-block; color:var(--accent); font-weight:800; margin-bottom:72px; font-size:.78rem; letter-spacing:.12em; }
.timeline p { color:rgba(248,246,241,.57); }
.ladder { display:grid; margin-top:56px; border-top:1px solid var(--line); }
.ladder > div { display:grid; grid-template-columns:.36fr .64fr; gap:44px; padding:28px 0; border-bottom:1px solid var(--line); transition:padding-left .2s ease; }
.ladder > div:hover { padding-left:14px; }
.ladder strong { font-size:1.05rem; }
.ladder p { color:rgba(12,12,11,.6); }
.checklist { display:grid; gap:14px; }
.checklist.columns { grid-template-columns:repeat(2,1fr); }
.checklist span { padding-bottom:12px; border-bottom:1px solid rgba(12,12,11,.1); }
.checklist span:before { content:'↗'; margin-right:10px; color:var(--accent-2); }

.media-engine { overflow:hidden; background:var(--paper); }
.media-engine:before { content:'COMPOUND'; position:absolute; right:-.02em; bottom:-.15em; font-weight:800; font-size:18vw; line-height:.8; letter-spacing:-.08em; color:rgba(12,12,11,.025); }
.flow { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap:12px; align-items:center; margin-top:58px; }
.flow div { border:1px solid var(--line); padding:23px; min-height:135px; display:flex; align-items:center; font-weight:720; background:rgba(255,255,255,.45); }
.flow span { color:var(--accent-2); font-size:1.4rem; }

.stages { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px; }
.stages article { position:relative; border-top:3px solid var(--accent); padding:26px 22px 10px 0; min-height:210px; }
.stages span { font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent-2); font-weight:800; }
.stages p { color:rgba(12,12,11,.6); }
.city-cloud { display:flex; flex-wrap:wrap; gap:10px; margin-top:64px; }
.culture-list { list-style:none; counter-reset:culture; padding:0; margin-top:58px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.culture-list li { counter-increment:culture; background:var(--muted); padding:30px; min-height:170px; font-weight:740; }
.culture-list li:before { content:'0' counter(culture); display:block; margin-bottom:28px; color:var(--accent-2); font-size:.76rem; letter-spacing:.12em; }

.apply-section {
  color:var(--white);
  background:
    radial-gradient(circle at 75% 20%, rgba(255,255,255,.38), transparent 24rem),
    linear-gradient(145deg,#141414,#060606 72%);
  overflow:hidden;
}
.apply-section:after { content:'ETHÖS'; position:absolute; left:50%; bottom:-.15em; transform:translateX(-50%); font-size:19vw; font-weight:800; letter-spacing:-.08em; color:rgba(255,255,255,.035); white-space:nowrap; }
.apply-inner { position:relative; z-index:2; max-width:900px !important; text-align:center; }
.apply-inner .section-kicker { justify-content:center; color:var(--accent); }
.apply-inner .section-kicker:before { display:none; }
.apply-inner p { max-width:710px; margin:30px auto 0; font-size:1.14rem; color:rgba(248,246,239,.62); }
.apply-form { margin:42px auto 0; max-width:700px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.apply-form input { width:100%; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--white); padding:17px; font:inherit; outline:none; transition:.2s ease; }
.apply-form input:nth-child(3) { grid-column:1/-1; }
.apply-form input::placeholder { color:rgba(255,255,255,.42); }
.apply-form input:focus { border-color:var(--accent); background:rgba(255,255,255,.09); }
.apply-form button { grid-column:1/-1; border:0; background:var(--accent); color:var(--ink); padding:17px; font:inherit; font-weight:800; cursor:pointer; transition:.2s ease; }
.apply-form button:hover { transform:translateY(-2px); box-shadow:0 16px 45px rgba(255,255,255,.2); }
.form-message { grid-column:1/-1; min-height:24px; font-size:.9rem; color:rgba(255,255,255,.65); }
footer { display:grid; grid-template-columns:repeat(3,1fr); align-items:center; padding:30px 4vw; background:#050505; color:var(--white); font-size:.82rem; border-top:1px solid rgba(255,255,255,.08); }
footer p:nth-child(2) { text-align:center; }
footer p:last-child { text-align:right; opacity:.5; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 1050px) {
  .desktop-nav { display:none; }
  .two-col, .cards.three, .cards.four, .stages { grid-template-columns:1fr; }
  .manifesto-grid { grid-template-columns:1fr 1fr; }
  .timeline { grid-template-columns:1fr 1fr; }
  .flow { grid-template-columns:1fr; }
  .flow span { transform:rotate(90deg); justify-self:center; }
  .culture-list { grid-template-columns:1fr 1fr; }
  .hero-proof { grid-template-columns:1fr; max-width:520px !important; }
  .hero-proof div { padding-top:17px; }
  .card.featured { transform:none; }
  .card.featured:hover { transform:translateY(-7px); }
}
@media (max-width: 680px) {
  .section-pad { padding:92px 22px; }
  .site-header { padding:16px 18px; }
  .header-cta { display:none; }
  .hero { min-height:100svh; padding-top:120px; }
  .hero h1 { font-size:clamp(3.45rem,17vw,5.35rem); }
  .hero-copy { font-size:1.03rem; }
  .hero-actions { flex-direction:column; }
  .button { width:100%; }
  .manifesto-grid, .timeline, .culture-list { grid-template-columns:1fr; }
  .manifesto blockquote { font-size:3.8rem; }
  .ladder > div { grid-template-columns:1fr; gap:8px; }
  .checklist.columns { grid-template-columns:1fr; }
  .apply-form { grid-template-columns:1fr; }
  .apply-form input:nth-child(3), .apply-form button, .form-message { grid-column:auto; }
  footer { grid-template-columns:1fr; gap:8px; text-align:left; }
  footer p:nth-child(2), footer p:last-child { text-align:left; }
}

/* === Ethös REAL black & white brand: dark-ground contrast fixes + real logo === */
.brand img { height:24px; width:auto; display:block; }
footer .brand img { height:30px; }
.hero .eyebrow, .hero .section-kicker { color:#e9e9e7; }
.hero h1 span { color:#ffffff; }
.button.primary { background:#ffffff; border-color:#ffffff; color:#0a0a0a; }
.button.primary:hover { box-shadow:0 14px 38px rgba(255,255,255,.18); }
.dark-panel .section-kicker { color:#d8d8d4; }
.timeline span { color:#d8d8d4; }
.card.featured .number, .card.dark .number { color:#d8d8d4; }
.apply-inner .section-kicker { color:#e9e9e7; }
.apply-form input:focus { border-color:#ffffff; }
.apply-form button { background:#ffffff; color:#0a0a0a; }
.apply-form button:hover { box-shadow:0 16px 45px rgba(255,255,255,.18); }

/* === Typography tune (Brian 2026-08-04): SF Pro Display + smaller section titles === */
/* SF Pro Display on Apple via -apple-system; Inter fallback elsewhere. */
body { font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; }
/* section titles were too large, bring them down (hero h1 + Playfair "greatness" unchanged) */
h2 { font-size:clamp(1.85rem,3.5vw,3.2rem); line-height:1.05; letter-spacing:-.03em; }

/* Apple pairing (Brian): SF Pro Text for body, SF Pro Display for headings */
body { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; }
h1, h2, h3, .brand, .hero h1, .manifesto blockquote ~ *, .number { font-family: "SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; }
/* keep Playfair cursive explicitly on the italic accents */
.hero h1 span, .manifesto blockquote { font-family: 'Playfair Display', serif; }

/* Kill the Codex cramped letter-spacing (Brian 2026-08-04). Comfortable display tracking. */
.hero h1 { letter-spacing: -0.01em; line-height: 1.04; }
h2 { letter-spacing: -0.01em; line-height: 1.06; }
.manifesto blockquote { letter-spacing: 0; line-height: 1.02; }
.hero h1 span { letter-spacing: 0; }

/* Real hero background image (Brian's sketch render) + House render gallery */
.hero {
  background:
    linear-gradient(90deg, rgba(6,6,5,.96) 0%, rgba(6,6,5,.84) 46%, rgba(6,6,5,.5) 100%),
    url("assets/hero-bg-sketch.png") center right / cover no-repeat,
    #0a0a0a;
}
.render-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:58px; }
.render-gallery figure { margin:0; }
.render-gallery img { width:100%; height:auto; display:block; border:1px solid rgba(255,255,255,.12); }
.render-gallery figcaption { margin-top:12px; color:rgba(248,248,246,.6); font-size:.95rem; line-height:1.5; }
@media (max-width:800px){ .render-gallery { grid-template-columns:1fr; } }

/* === Ethös story rebuild (Brian 2026-08-04): prose sections, House-day figures, word reveal === */
.story { max-width: 820px; display: grid; gap: 26px; margin-top: 44px; }
.story p { font-size: clamp(1.12rem, 1.5vw, 1.34rem); line-height: 1.62; color: rgba(12,12,11,.74); }
.dark-panel .story p, .apply-section .story p { color: rgba(248,246,241,.72); }
.manifesto .story { margin-top: 12px; }

.house .story:last-of-type { margin-top: 48px; }
.house-shot { display: grid; grid-template-columns: 1.28fr .72fr; gap: 46px; align-items: center; margin-top: 46px; }
.house-shot.flip { grid-template-columns: .72fr 1.28fr; }
.house-shot.flip img { order: 2; }
.house-shot.flip figcaption { order: 1; }
.house-shot img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.house-shot figcaption { font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.6; color: rgba(12,12,11,.72); }

.path-cards .card p { font-size: 1rem; line-height: 1.55; }

/* word-by-word reveal for the hero headline (reduced-motion safe) */
.reveal-words { visibility: visible; }
html.js .reveal-words .rw { display: inline-block; opacity: 0; transform: translateY(0.42em); transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1); }
html.js .reveal-words.is-in .rw { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal-words .rw { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .house-shot, .house-shot.flip { grid-template-columns: 1fr; gap: 20px; }
  .house-shot.flip img { order: 0; }
  .house-shot.flip figcaption { order: 0; }
}

/* === Ethös fix pass 2 (Brian 2026-08-04): italic scope, clean hero, contrast, kill labels + watermarks === */
/* Headline: ONLY the accent word is Playfair italic. Every other word, including the JS .rw spans, is SF Pro upright. */
.hero h1 { font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-style:normal; }
.hero h1 .rw { font-family:inherit; font-style:normal; }
.hero h1 .accent { font-family:'Playfair Display',serif; font-style:italic; color:#ffffff; letter-spacing:0; }

/* Clean black hero. No cartoon illustration, no giant retyped letter behind it. */
.hero {
  background:
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.07), transparent 30rem),
    linear-gradient(160deg,#0b0b0b,#000 72%);
}
.hero:after { display:none !important; }

/* Never retype the wordmark as a background. Kill the ETHÖS watermark in the apply section. */
.apply-section:after { display:none !important; }

/* The little dash + uppercase section labels are removed from markup; hard-block them from ever rendering again. */
.eyebrow, .section-kicker { display:none !important; }

/* Contrast category fix: text color must match its section background. body-stack was light by
   default (correct only on dark), which made it vanish on the white sections. Make it dark by
   default and light only inside dark sections. Same for the stages on the dark movement panel. */
.body-stack, .muted .body-stack { color: rgba(12,12,11,.72); }
.dark-panel .body-stack, .apply-section .body-stack { color: rgba(248,246,241,.74); }
.dark-panel .stages p { color: rgba(248,246,241,.62); }
.dark-panel .stages span { color: #cfcfcb; }
.dark-panel .stages article { border-top-color: rgba(255,255,255,.5); }
.dark-panel h2, .dark-panel h3 { color:#ffffff; }

/* === House building lead + real-room gallery (Brian's poster crops, 2026-08-04) === */
.house-building { margin: 40px 0 0; }
.house-building img { width:100%; height:auto; display:block; border:1px solid var(--line); }
.house-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px 20px; margin-top:26px; }
.house-grid .room { margin:0; }
.house-grid .room img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; border:1px solid var(--line); }
.house-grid .room h3 { margin:15px 0 6px; font-size:1.02rem; }
.house-grid .room figcaption p { color:rgba(12,12,11,.66); font-size:.94rem; line-height:1.52; }
@media (max-width:1050px){ .house-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .house-grid { grid-template-columns:1fr; } }