/* =========================================================
   MANDARIN — Real Estate Home
   Tokens sampled from the Figma export (Home.png)
   ========================================================= */

:root{
  /* --- Color palette --- */
  --cream:        #E9E3DC;   /* warm background */
  --cream-dark:   #DDD5CA;
  --ink:          #35312E;   /* dark neutral text / footer bg */
  --ink-soft:     #5C5650;
  --tan:          #B79E86;   /* accent heading / eyebrow tone */
  --tan-light:    #CBB79F;
  --white:        #FBF9F6;
  --line:         rgba(53,49,46,0.15);
  --line-light:   rgba(251,249,246,0.35);

  /* --- Type --- */
  --font-display: 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;

  --container: 1240px;
  --gutter: clamp(24px, 5vw, 80px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:400; margin:0; }
p{ margin:0; }

.section-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* Reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* Placeholder / real media boxes.
   Usage: <div class="media-box" data-name="file.jpg"><img class="media-img" src="..." onerror="this.classList.add('is-missing')"></div>
   The gradient below is the fallback — as soon as a valid image loads, it sits on top and covers it.
   If the file is missing/404, the <img> hides itself (is-missing) and the gradient + filename label show through. */
.media-box{
  position:relative;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.08)),
    linear-gradient(135deg,#c9b79f,#8f9a8c 55%,#6f7d78);
  background-size:cover;
}
.media-box[data-name]::after{
  content:attr(data-name);
  position:absolute; left:12px; bottom:12px;
  font-family:var(--font-body);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  background:rgba(0,0,0,.25);
  padding:4px 8px; border-radius:3px;
  pointer-events:none;
  z-index:1;
}
/* Once a real image has loaded successfully, hide the dev label so it
   never sits on top of the actual photo. Falls back gracefully (label
   just stays visible) in browsers that don't support :has() yet. */
.media-box:has(img.media-img:not(.is-missing))::after{
  display:none;
}
.media-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.media-img.is-missing{ display:none; }

/* Parallax background images: object-position keeps the crop anchored to
   the top of the source photo (instead of the default center), and the
   extra height (130%) gives room for the scroll-driven translateY in
   main.js to move without ever revealing empty edges. */
.media-img--parallax{
  top:-15%;
  left:0;
  right:0;
  bottom:auto;
  height:130%;
  object-position:top;
  will-change:transform;
}
/* Soft variant: smaller zoom (115%) and travel, so the photo reads almost
   exactly as before and only drifts gently while scrolling. */
.media-img--parallax-soft{
  top:-7.5%;
  height:115%;
}

/* Legacy alias kept so [data-placeholder] still works if present anywhere */
[data-placeholder]{
  position:relative; width:100%; height:100%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.08)),
    linear-gradient(135deg,#c9b79f,#8f9a8c 55%,#6f7d78);
  background-size:cover;
}
[data-placeholder]::after{
  content:attr(data-placeholder);
  position:absolute; left:12px; bottom:12px;
  font-family:var(--font-body);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  background:rgba(0,0,0,.25);
  padding:4px 8px; border-radius:3px;
  pointer-events:none;
}

/* =============== BUTTONS =============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 34px;
  font-family:var(--font-body);
  font-size:13px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:999px;
  border:1px solid transparent;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
  cursor:pointer;
}
.btn:disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn-outline-light{
  color:var(--white);
  border-color:rgba(255,255,255,.55);
}
.btn-outline-light:hover{ background:var(--white); color:var(--ink); }

.btn-hero{
  background:#604e3f;
  color:var(--white);
  border-color:#e5dfda;
}
.btn-hero:hover{ background:#4d3f33; border-color:#e5dfda; }

.btn-outline-dark{
  color:var(--ink);
  border-color:rgba(53,49,46,.4);
}
.btn-outline-dark:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }

.text-link{
  display:flex; align-items:center; gap:20px;
  font-family:var(--font-body);
  font-size:13px; font-weight:400; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white);
  width:80vw;
  max-width:80vw;
}
.text-link .text-link-line{
  flex:1 1 auto;
  height:1px;
  background:var(--line-light);
}
.text-link span{ flex:0 0 auto; white-space:nowrap; }
.feature-inner .text-link{ margin-top:140px; }

/* =============== HEADER =============== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:28px 0;
  transition:padding .35s ease;
  background:rgba(30,26,22,0);
  -webkit-backdrop-filter:blur(1.5px);
  backdrop-filter:blur(1.5px);
}
.site-header.scrolled{
  padding:16px 0;
}

.header-inner{
  position:relative;
  z-index:1;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:flex-start;
  gap:24px;
}
.logo{ display:flex; align-items:center; }
.logo-img{ width:210px; height:auto; display:block; }

.main-nav{ display:flex; gap:40px; margin-left:auto; }
.main-nav a{
  font-family:var(--font-body);
  font-size:13.5px; font-weight:400; letter-spacing:.08em; text-transform:uppercase;
  color:#FFFFFF; opacity:.92; position:relative; padding:4px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width .25s ease;
}
.main-nav a:hover::after{ width:100%; }

.header-right{ display:flex; align-items:center; gap:24px; }
.nav-lang-sep{ color:#FFFFFF; opacity:.35; font-size:13px; margin:0 24px; }
.lang-switch{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.08em; color:#FFFFFF; opacity:.9; }
.lang-switch .lang{ background:none; border:none; color:inherit; font:inherit; letter-spacing:inherit; cursor:pointer; opacity:.6; padding:0; }
.lang-switch .lang.active{ opacity:1; font-weight:700; }
.lang-switch .sep{ opacity:.4; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:30px; height:24px; background:none; border:none; cursor:pointer; padding:0;
  position:relative; z-index:101;
}
.nav-toggle span{ display:block; height:1px; background:#FFFFFF; transition:transform .25s ease, opacity .25s ease; }

/* Language switcher duplicated inside the mobile nav panel — hidden by
   default (desktop keeps the one in the header), shown only once the
   nav becomes the full-screen mobile menu (see @media max-width:820px). */
.main-nav-langs{ display:none; }

/* =============== HERO =============== */
.hero{
  position:relative;
  height:100vh; min-height:640px;
  display:flex; align-items:center;
  overflow:hidden;
}
/* Real mobile browsers (Chrome/Safari on phones) show/hide the address
   bar as you scroll. A plain 100vh is measured against the LARGEST
   possible viewport, so on first load — with the address bar still
   visible — the hero renders shorter than 100vh actually reserves,
   leaving a sliver of the next section's photo visible right under it.
   Fix in two layers:
   1) --vh is set by js/main.js from the REAL window.innerHeight and kept
      in sync on resize/orientation change — works everywhere JS runs.
   2) 100dvh (where supported) tracks the real viewport natively, with
      no JS at all, so it wins when both are available. */
.hero{ height:calc(var(--vh, 1vh) * 100); }
@supports (height: 100dvh){
  .hero{ height:100dvh; }
}
.hero-media{ position:absolute; inset:0; }
.hero-media video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(30,26,22,.55) 0%, rgba(30,26,22,.15) 45%, rgba(30,26,22,0) 65%),
             linear-gradient(0deg, rgba(20,17,14,.35), rgba(20,17,14,0) 40%);
}
.hero-content{
  position:relative; z-index:2;
  max-width:var(--container);
  width:100%;
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  justify-content:flex-end;
}
.hero-text-block{
  max-width:820px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.hero-text-block .btn{ align-self:flex-end; }
.hero-content h1{
  color:var(--white);
  font-family:var(--font-body);
  font-size:clamp(22px, 2.4vw, 31px);
  line-height:1.35;
  font-weight:400;
  margin-bottom:40px;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
.hero-content h1 strong{ font-weight:700; }

.scroll-cue{
  position:absolute; left:50%; bottom:44px; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
  background:none; border:none; color:var(--white); cursor:pointer;
  font-family:var(--font-body); font-size:10.5px; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  opacity:.85;
}
.scroll-cue i{
  width:1px; height:34px;
  background:linear-gradient(var(--white), transparent);
  animation:scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%{ transform:scaleY(0.4); transform-origin:top; opacity:.4; }
  50%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  100%{ transform:scaleY(0.4); transform-origin:bottom; opacity:.4; }
}

/* =============== TWO COLUMN (Philosophy / Craft) =============== */
.philosophy{ padding:130px 0; }
.philosophy--intro{ padding:0; }
.philosophy--reverse{ padding:0; }
.philosophy--reverse .eyebrow,
.philosophy--reverse .col-text h2,
.philosophy--reverse .col-text h2 strong{
  color:#BEAB99;
}
.philosophy--reverse .eyebrow{ margin-bottom:6px; }
.philosophy--reverse .col-text h2{ margin-bottom:24px; }
.philosophy--reverse .body-text{
  color:#383432;
  padding-left:48px;
  max-width:none;
}
.philosophy--reverse .col-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.philosophy--reverse .col-text > *{ width:100%; }
.philosophy--reverse .col-text .btn{ align-self:flex-end; width:auto; }
.two-col{
  display:grid;
  grid-template-columns:0.85fr 1fr;
  gap:clamp(40px,6vw,100px);
  align-items:center;
}
.two-col--reverse{ grid-template-columns:1fr 0.85fr; }
.two-col--reverse .col-media{ order:1; }
.two-col--reverse .col-text{ order:2; }

/* Philosophy intro: full-width row, image bleeds to the right edge of the
   viewport, matched to the same total height as the Authorship section (620px) */
.two-col--bleed-right{
  max-width:none;
  width:100%;
  margin:0;
  padding-left:var(--gutter);
  padding-right:0;
  min-height:620px;
  align-items:center;
  grid-template-columns:50fr 50fr;
}
.two-col--bleed-right .media-box{ border-radius:0; aspect-ratio:8/5; }

/* Craft: same full-width treatment as Philosophy, mirrored — image bleeds left */
.two-col--bleed-left{
  max-width:none;
  width:100%;
  margin:0;
  padding-left:0;
  padding-right:var(--gutter);
  min-height:620px;
  align-items:center;
  grid-template-columns:50fr 50fr;
}
.two-col--bleed-left .media-box{ border-radius:0; aspect-ratio:8/5; }

.philosophy--intro .eyebrow,
.philosophy--intro .col-text h2,
.philosophy--intro .col-text h2 strong{
  color:#BEAB99;
}
.philosophy--intro .eyebrow{ margin-bottom:6px; }
.philosophy--intro .col-text{
  width:38vw;
  max-width:38vw;
}
.philosophy--intro .col-text h2{ margin-bottom:44px; }
.philosophy--intro .body-text{
  color:#383432;
  padding-left:48px;
}

.eyebrow{
  font-family:var(--font-body);
  font-size:21px; font-weight:400; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:18px;
}
.eyebrow--thin{ font-weight:300; }
.eyebrow--accent{ color:var(--tan); }
.eyebrow--light{ color:var(--tan-light); }

.col-text h2{
  font-family:var(--font-body);
  font-size:clamp(24px,2.4vw,31px);
  font-weight:400;
  line-height:1.3;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.01em;
  margin-bottom:26px;
}
.col-text h2 strong{ font-weight:700; color:var(--ink); }
.heading--accent{ color:var(--tan-light); }
.heading--accent strong{ color:var(--tan); font-weight:700; }

.body-text{
  font-family:var(--font-body);
  font-size:20px; font-weight:400; line-height:1.15; color:var(--ink);
  max-width:none;
  margin-bottom:0;
}
.col-text .btn{ margin-top:34px; }

.media-box{ width:100%; overflow:hidden; border-radius:2px; }
.ratio-4-3{ aspect-ratio:4/3; }
.ratio-4-5{ aspect-ratio:4/5; }

/* =============== FULL-BLEED FEATURE (Authorship / Investors) =============== */
.feature{
  position:relative;
  min-height:620px;
  display:flex; align-items:center;
  padding:100px 0;
  overflow:hidden;
}
.feature-media{ position:absolute; inset:0; }
.feature-scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(20,17,14,.72) 0%, rgba(20,17,14,.35) 42%, rgba(20,17,14,.05) 70%);
}
.feature-scrim--blue{
  background:linear-gradient(100deg, rgba(12,20,26,.72) 0%, rgba(12,20,26,.35) 42%, rgba(12,20,26,.05) 70%);
}
.feature-inner{ position:relative; z-index:2; max-width:640px; }
.feature--authorship{ align-items:flex-start; padding-top:130px; }
.feature--authorship .section-inner.feature-inner{
  max-width:640px;
  width:100%;
  margin:0;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.feature--authorship .eyebrow,
.feature--authorship .feature-heading,
.feature--authorship .feature-heading strong,
.feature--authorship .body-text,
.feature--authorship .text-link{
  color:#E5DFDA;
}
.feature--authorship .body-text{ padding-left:48px; }
.feature--authorship .text-link .text-link-line{ background:rgba(229,223,218,.4); }
.feature--investors .section-inner.feature-inner{
  max-width:none;
  width:100%;
  margin:0;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.feature--investors .section-inner.feature-inner > *{ width:100%; max-width:640px; }
.feature--investors .section-inner.feature-inner .btn{ align-self:flex-end; width:auto; max-width:none; }
.feature--investors .eyebrow,
.feature--investors .feature-heading,
.feature--investors .feature-heading strong{
  color:#E5DFDA;
}
.feature--investors .btn{
  background:rgba(30,26,22,.18);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.feature--investors .btn:hover{
  background:var(--white);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.feature--investors .body-text{
  color:#FFFFFF;
  padding-left:48px;
}
.feature-heading{
  font-family:var(--font-body);
  font-size:clamp(24px,2.6vw,31px);
  font-weight:400;
  line-height:1.3;
  color:var(--white);
  text-transform:uppercase;
  margin-bottom:26px;
}
.feature-heading strong{ font-weight:700; }
.body-text--light{ color:rgba(255,255,255,.85); }
.feature-inner .btn{ margin-top:36px; }

/* =============== FOOTER =============== */
.site-footer{ background:var(--ink); color:rgba(251,249,246,.75); padding-top:60px; }
.footer-top{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:60px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(251,249,246,.12);
}
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-brand .logo-img--footer{ width:152px; height:auto; margin-bottom:0; }
.footer-tagline-col{ display:flex; align-items:center; justify-content:center; }
.footer-tagline{ font-family:var(--font-body); font-size:25px; font-weight:400; line-height:1.3; color:rgba(251,249,246,.75); white-space:nowrap; }
.footer-tagline strong{ color:var(--white); font-weight:700; }

.footer-col{ text-align:left; }
.footer-col-group + .footer-col-group{ margin-top:16px; }
.footer-label{
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(251,249,246,.45); margin-bottom:34px;
}
.footer-label--spaced{ margin-top:34px; }
.footer-col a{ display:block; font-size:14px; line-height:1; margin-bottom:18px; color:rgba(251,249,246,.85); }
.footer-col a:last-child{ margin-bottom:0; }
.footer-col a:hover{ color:var(--white); }
.footer-address{ font-size:14px; line-height:1.15; color:rgba(251,249,246,.85); }

.footer-lang{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px 18px; }
.footer-lang .lang{ background:none; border:none; font:inherit; font-size:14px; line-height:1; color:rgba(251,249,246,.5); cursor:pointer; padding:0; }
.footer-lang .lang.active{ color:var(--white); }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0 28px;
  font-size:13px; color:rgba(251,249,246,.45);
}
.footer-legal{ display:flex; gap:22px; }
.footer-legal a:hover{ color:var(--white); }

/* =============== PAGE HEADER (interior pages) =============== */
.page-header{
  padding:180px 0 70px;
  background:var(--cream-dark);
}
.page-header .eyebrow{ margin-bottom:14px; }
.page-header h1{
  font-size:clamp(30px,4vw,46px);
  text-transform:uppercase;
  color:var(--ink);
  max-width:720px;
}
.page-header p.body-text{ margin-top:20px; max-width:640px; }

/* =============== PROJECTS HERO =============== */
.hero-content--projects{ justify-content:flex-start; }
.hero-content--projects .hero-text-block{ align-items:flex-start; }
.hero-content--projects h1{ text-align:left; line-height:38.5px; }
.hero-content--projects .eyebrow{
  font-size:13px;
  font-weight:400;
  line-height:1.2;
}
.hero-status{
  position:absolute; left:0; right:0; bottom:64px; z-index:2;
  padding-left:var(--gutter); padding-right:var(--gutter);
}
.hero-status-label{ margin-bottom:18px; }

/* =============== PROJECT FILTERS =============== */
.project-filters{
  display:flex; flex-wrap:wrap; gap:12px;
}
.filter-btn{
  font-family:var(--font-body); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:12px 24px; border-radius:999px;
  border:1px solid rgba(255,255,255,.5);
  background:transparent; color:var(--white); cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-btn:hover{ border-color:var(--white); background:rgba(255,255,255,.12); }
.filter-btn.active{ background:var(--white); color:var(--ink); border-color:var(--white); }

/* Mobile-only dropdown replacement for the pill filters (see the
   max-width:640px override below) — hidden on desktop. */
.filter-select-wrap{ display:none; }
.filter-select{
  -webkit-appearance:none; appearance:none;
  font-family:var(--font-body); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:14px 44px 14px 22px; border-radius:999px;
  border:1px solid rgba(53,49,46,.35);
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2335312E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 20px center;
  color:var(--ink); cursor:pointer;
  width:100%;
}
.filter-select:focus{ outline:2px solid rgba(53,49,46,.35); outline-offset:2px; }

/* =============== PROJECT GRID =============== */
.projects-list{ padding:96px 0 0; }
.project-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:72px 48px;
  padding:0 0 120px;
}
.project-card{ display:block; color:var(--ink); }
.project-card .media-box{
  overflow:hidden; margin-bottom:24px;
  min-height:200px;
  transition:opacity .25s ease;
}
.project-card .media-box .media-img{
  position:static;
  width:100%;
  height:auto;
  display:block;
  object-fit:unset;
}
.project-card .media-box .media-img.is-missing{ display:none; }
.project-card:hover .media-box{ opacity:.88; }
.project-card .project-meta{
  font-family:var(--font-body);
  font-size:13px; font-weight:300; letter-spacing:.06em; text-transform:uppercase;
  color:#BEAB99; margin-bottom:10px;
}
.project-card h3{
  font-family:var(--font-body); font-weight:400;
  font-size:30px;
  color:#BEAB99;
}
.empty-state{
  padding:60px 0; text-align:center; color:var(--ink-soft); font-size:15px;
  grid-column:1 / -1;
}

/* =============== PROJECT DETAIL =============== */

/* ---- Hero photo slider ---- */
.detail-hero{ align-items:flex-end; }
.detail-hero-scrim{ background:linear-gradient(0deg, rgba(20,17,14,.8) 0%, rgba(20,17,14,.15) 60%, rgba(20,17,14,.35) 100%); }
.detail-back{
  position:absolute; top:50%; left:0; z-index:3;
  transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:8px;
  padding-left:var(--gutter);
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.8);
}
.detail-back:hover{ color:var(--white); }
.detail-hero-content{
  position:relative; z-index:2; width:100%;
  padding:0 var(--gutter) 56px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; flex-wrap:wrap;
}
.detail-hero-status{
  color:rgba(255,255,255,.75);
  margin-bottom:10px;
  font-size:14px; font-weight:300; letter-spacing:.06em; text-transform:uppercase;
}
.detail-hero-name{
  font-family:var(--font-body); font-weight:400;
  font-size:clamp(36px,5vw,64px);
  color:var(--white);
}
.hero-thumbs{ display:flex; gap:10px; flex:0 1 auto; flex-wrap:wrap; }
.hero-thumb{
  width:88px; height:64px; padding:0; border:0; border-radius:2px;
  overflow:hidden; cursor:pointer; opacity:.6;
  transition:opacity .2s ease, outline-color .2s ease;
  outline:2px solid transparent; outline-offset:2px;
}
.hero-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-thumb:hover{ opacity:1; }
.hero-thumb.active{ opacity:1; outline-color:var(--white); }

/* ---- Specs + bio ---- */
.project-body{ background:var(--ink); padding:110px 0; }
.project-body-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:80px;
}
.project-specs{ display:flex; flex-direction:column; gap:36px; }
.spec-row .spec-label{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.4); margin-bottom:6px;
}
.spec-row .spec-value{
  font-family:var(--font-body); font-weight:300;
  font-size:80px;
  color:#BEAB99;
  line-height:1.1;
}
.spec-row .spec-value strong{ font-weight:300; color:#BEAB99; }
.spec-row .spec-value span{ font-size:40px; font-weight:300; }

.bio-lead{
  font-family:var(--font-body); font-weight:400;
  font-size:clamp(22px,2.4vw,30px); line-height:1.35;
  color:rgba(255,255,255,.9);
  margin-bottom:36px;
}
.bio-lead strong{ font-weight:700; }
.bio-secondary{ padding-left:40px; max-width:520px; margin-bottom:44px; }

.project-video{
  position:relative; aspect-ratio:16/10; border-radius:2px; overflow:hidden;
  margin-bottom:32px; background:#000;
}
.project-video-thumb{ width:100%; height:100%; object-fit:cover; display:block; opacity:.75; }
.project-video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:88px; height:88px; border-radius:50%;
  background:rgba(20,17,14,.35); border:1.5px solid rgba(255,255,255,.85);
  color:var(--white); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.project-video-play:hover{ background:rgba(20,17,14,.55); transform:translate(-50%,-50%) scale(1.05); }
.project-video--pending .project-video-play{ cursor:default; }
.project-video--pending .project-video-play:hover{ background:rgba(20,17,14,.35); transform:translate(-50%,-50%); }
.project-video iframe{ width:100%; height:100%; display:block; border:0; }

/* ---- Video lightbox ---- */
.video-modal-overlay{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(20,17,14,.85);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.video-modal-overlay[hidden]{ display:none; }
.video-modal{
  width:100%; max-width:1100px; aspect-ratio:16/9;
  background:#000;
}
.video-modal iframe{ width:100%; height:100%; border:0; display:block; }
.video-modal-close{
  position:absolute; top:28px; right:32px;
  background:none; border:none; cursor:pointer;
  font-size:36px; line-height:1; color:rgba(255,255,255,.7);
  padding:4px; z-index:1;
  transition:color .2s ease;
}
.video-modal-close:hover{ color:var(--white); }

@media (max-width:640px){
  .video-modal-close{ top:16px; right:16px; font-size:28px; }
}

.project-map{ position:relative; border-radius:2px; overflow:hidden; aspect-ratio:16/11; }
.project-map iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.85) brightness(.95); }
.project-map-thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.project-map-open{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,17,14,.25);
  border:0; cursor:pointer;
  transition:background .2s ease;
}
.project-map-open:hover{ background:rgba(20,17,14,.4); }
.project-map-open span{
  display:inline-flex; align-items:center;
  padding:16px 30px; border-radius:999px;
  border:1.5px solid var(--white); color:var(--white);
  font-family:var(--font-body); font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  background:rgba(20,17,14,.25);
}

/* ---- CTA ---- */
.project-cta{ padding:130px 0; background:var(--ink); }
.project-cta-inner{ max-width:640px; margin:0 auto; }
.project-cta .feature-heading{ margin-bottom:40px; }
.project-cta-row{ display:flex; align-items:center; gap:24px; }
.project-cta-arrow{ color:rgba(255,255,255,.6); flex:0 0 auto; }

@media (max-width:980px){
  .project-body-grid{ grid-template-columns:1fr; gap:56px; }
}

@media (max-width:640px){
  .detail-hero-content{ flex-direction:column; align-items:flex-start; }
  .hero-thumbs{
    order:3; gap:6px; flex-wrap:nowrap;
    width:100%;
  }
  .hero-thumb{
    width:auto; height:auto; aspect-ratio:88/64;
    flex:1 1 0; min-width:0;
  }
  .project-body{ padding:70px 0; }
  .bio-secondary{ padding-left:0; max-width:none; }
  .project-cta{ padding:80px 0; }

  /* Pre-existing overflow: the fixed-width arrow (130px) plus the
     "Contact the team" button don't both fit next to each other on a
     narrow screen — same pattern used for the "Work with us" arrow. */
  .project-cta-arrow{ display:none; }

  /* The big spec numbers (price, m², units) are 80px on desktop — at
     mobile widths a value like "590.000 €" is wider than the screen
     and pushes the whole page into horizontal overflow. */
  .project-specs{ gap:26px; }
  .spec-row .spec-value{ font-size:clamp(26px, 8vw, 34px); }
  .spec-row .spec-value span{ font-size:clamp(15px, 4.5vw, 19px); }
}

/* =============== SIMPLE PLACEHOLDER PAGE (about/investors/contact) =============== */
.placeholder-page{ padding:200px 0 160px; text-align:center; }
.placeholder-page .eyebrow{ justify-content:center; display:flex; }
.placeholder-page h1{ font-size:clamp(28px,4vw,44px); text-transform:uppercase; margin:14px 0 20px; }
.placeholder-page p{ max-width:520px; margin:0 auto; font-size:16px; line-height:1.7; color:var(--ink-soft); }

/* =============== RESPONSIVE =============== */
@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr; gap:44px; }
  .footer-col{ text-align:left; }
  .footer-lang{ justify-content:flex-start; }
  .footer-tagline-col{ justify-content:flex-start; }
  .footer-col-group + .footer-col-group{ margin-top:34px; }
  .footer-tagline{ white-space:normal; }
  .footer-brand{ align-items:center; }
  .footer-brand .logo-img--footer{ width:76px; }
}

@media (max-width:820px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; top:0;
    width:min(320px,80vw); height:100vh;
    background:var(--ink); color:var(--white);
    flex-direction:column; justify-content:center; gap:30px;
    padding:0 48px;
    transform:translateX(100%);
    transition:transform .4s ease;
    z-index:99;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ color:var(--white); font-size:15px; }
  .main-nav-langs{
    display:flex; align-items:center; gap:10px;
    margin-top:6px;
    font-size:13px; letter-spacing:.08em; color:#FFFFFF; opacity:.9;
  }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .header-right{ margin-left:auto; }
  .header-right .lang-switch{ display:none; }
  .nav-lang-sep{ display:none; }

  .two-col, .two-col--reverse{ grid-template-columns:1fr; }
  .two-col--reverse .col-media, .two-col--reverse .col-text{ order:initial; }
  .col-media{ order:-1; }
  .body-text{ max-width:none; }
  .philosophy{ padding:80px 0; }
  .philosophy--intro{ padding:0; }
  .philosophy--reverse{ padding:0; }

  /* Philosophy (home): text first, then photo — overrides the generic
     ".col-media{order:-1}" above, which puts the photo first everywhere
     else. Same DOM order as desktop (text, then media), so tying their
     order back to 0 is enough to let source order win. */
  .philosophy--intro .col-media{ order:initial; }

  /* Craft (home): same text-first request, but its DOM order is reversed
     on desktop (media, then text) via .two-col--reverse, so an explicit
     order is needed rather than just resetting to initial. */
  .philosophy--reverse .col-text{ order:1; }
  .philosophy--reverse .col-media{ order:2; }

  .feature{ padding:80px 0; min-height:auto; }
  .feature--authorship{
    display:flex;
    flex-direction:column;
    padding:0;
    min-height:0;
  }
  /* Authorship (home): text first, then photo. */
  .feature--authorship .section-inner.feature-inner{ order:1; }
  .feature--authorship .feature-media{
    order:2;
    position:relative; inset:auto; width:100%;
  }
  .feature--authorship .feature-media .media-img{
    position:static; width:100%; height:auto; display:block; object-fit:unset;
    transform:none !important;
  }
  .feature--authorship .feature-scrim{ display:none; }
  .feature--authorship .section-inner.feature-inner{
    position:static; z-index:auto;
    max-width:100%; width:100%;
    background:var(--ink);
    padding:60px var(--gutter);
    display:flex; flex-direction:column; align-items:flex-start;
  }
  .feature--authorship .body-text{ padding-left:48px; }
  .feature--authorship .text-link{
    display:inline-flex; align-items:center; justify-content:center;
    padding:16px 34px;
    font-family:var(--font-body); font-size:13px; font-weight:400;
    letter-spacing:.1em; text-transform:uppercase;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.55);
    color:var(--white);
    transition:background .25s ease, color .25s ease;
    align-self:flex-end;
    width:auto;
    margin-top:34px;
  }
  .feature--authorship .text-link:hover{ background:var(--white); color:var(--ink); }
  .feature--authorship .text-link-line{ display:none; }

  /* Investors feature ("Clarity, structure, and preserved capital"):
     same split as Authorship — text first, on its own dark panel
     instead of overlaid on the photo, then the photo below. */
  .feature--investors{
    display:flex;
    flex-direction:column;
    padding:0;
    min-height:0;
  }
  .feature--investors .section-inner.feature-inner{
    order:1;
    position:static; inset:auto; z-index:auto;
    max-width:100%; width:100%;
    background:var(--ink);
    padding:60px var(--gutter);
  }
  .feature--investors .section-inner.feature-inner > *{ max-width:none; }
  .feature--investors .feature-media{
    order:2;
    position:relative; inset:auto; width:100%;
  }
  .feature--investors .feature-media .media-img{
    position:static; width:100%; height:auto; display:block; object-fit:unset;
    transform:none !important;
  }
  .feature--investors .feature-scrim{ display:none; }
  .feature--investors .body-text{ padding-left:48px; }

  .two-col--bleed-right{
    min-height:auto;
    align-items:stretch;
    gap:0;
  }
  .two-col--bleed-right .col-text{ padding:60px var(--gutter) 60px 0; }
  .two-col--bleed-right .media-box{ aspect-ratio:4/3; }
  .two-col--bleed-right .col-media{
    margin-left:calc(-1 * var(--gutter));
    width:calc(100% + var(--gutter));
  }
  .philosophy--intro .col-text{ width:100%; max-width:100%; }
  .text-link{ width:100%; max-width:100%; }
  .two-col--bleed-left{
    min-height:auto;
    align-items:stretch;
    gap:0;
  }
  .two-col--bleed-left .col-text{ padding:60px 0 60px var(--gutter); }
  .two-col--bleed-left .media-box{ aspect-ratio:4/3; }
  .two-col--bleed-left .col-media{
    margin-right:calc(-1 * var(--gutter));
    width:calc(100% + var(--gutter));
  }
  .logo-img{ width:180px; }
}

@media (max-width:520px){
  .hero-content h1{ font-size:22px; }
  .btn{ padding:14px 26px; }
  .footer-bottom{ flex-direction:column; gap:14px; align-items:flex-start; }
  .footer-tagline{ font-size:20px; }
}

@media (max-width:980px){
  .project-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:640px){
  .project-grid{ grid-template-columns:1fr; padding-bottom:80px; }
  .page-header{ padding:150px 0 50px; }
  .placeholder-page{ padding:160px 0 100px; }

  /* Projects: same full-screen photo hero as desktop, cropped from the
     top-left instead of centered — text block, then the filter dropdown
     stacked right underneath it (no "Status" label on mobile). */
  .hero--projects{
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:0 0 90px;
  }
  .hero--projects .media-img{ object-position:top left; }
  .hero-content--projects{
    position:relative; z-index:2;
    flex:0 0 auto;
    padding-bottom:28px;
  }
  .hero-status{
    position:relative; left:auto; right:auto; bottom:auto; z-index:2;
    flex:0 0 auto;
    width:100%;
    padding-left:var(--gutter); padding-right:var(--gutter);
  }
  .hero-status-label{ display:none; }

  /* The pill row doesn't scale down well at phone widths — swap it for
     a single dropdown that opens the same four options natively. */
  .project-filters{ display:none; }
  .filter-select-wrap{
    display:block;
  }

  /* Give the card's text a little breathing room from the left edge,
     even though the photo above it still runs full width. */
  .project-card .project-meta,
  .project-card h3{ padding-left:var(--gutter); }

  /* Card photos are wide (~2.1:1) — at mobile widths their scaled height
     falls under the desktop min-height:200px safety net, leaving a gap
     of visible placeholder gradient under the photo. Let the box match
     the image's real height on mobile instead. */
  .project-card .media-box{ min-height:0; }
}

/* =============== ABOUT PAGE =============== */

/* Hero — quote bottom-right instead of the home hero's left-aligned copy */
.hero--about{ align-items:flex-end; }
.hero--about .media-img{ object-position:top; }
.hero-scrim--about{
  background:linear-gradient(0deg, rgba(20,17,14,.6) 0%, rgba(20,17,14,0) 45%);
}
.hero-content--about{
  padding-bottom:80px;
}
.hero-quote{ max-width:640px; text-align:right; }
.hero-quote-text{
  font-family:var(--font-body);
  font-size:clamp(22px,2.4vw,31px);
  font-weight:700;
  color:var(--white);
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
.hero-quote-text em{ font-style:italic; }
.hero-quote-attr{
  margin-top:10px;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
}

/* About us — single combined heading line instead of separate eyebrow+h2 */
.philosophy--about{ padding:70px 0; }
.philosophy--about .about-heading{
  font-family:var(--font-body);
  font-size:clamp(24px,2.4vw,31px);
  font-weight:400;
  color:#BEAB99;
  margin-bottom:40px;
}
.philosophy--about .about-heading strong{ font-weight:700; color:#BEAB99; }
.philosophy--about .body-text{
  color:#383432;
  padding-left:40px;
  max-width:560px;
  margin-bottom:28px;
}
.philosophy--about .body-text--bold{ font-weight:700; margin-bottom:0; }

/* Operating principles — dark, three even columns */
.principles{ background:var(--ink); padding:130px 0; }
.principles .section-inner{
  max-width:none;
  width:100%;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.principles-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
}
.principles-eyebrow{ color:#BEAB99; margin-bottom:18px; }
.principles-heading{
  font-family:var(--font-body);
  font-size:clamp(24px,2.4vw,31px);
  font-weight:400;
  line-height:1.3;
  color:#BEAB99;
  text-transform:uppercase;
  margin-bottom:28px;
}
.principles-heading strong{ font-weight:700; }
.principles-col:nth-child(2) .principles-heading,
.principles-col:nth-child(3) .principles-heading{ margin-top:45px; }
.principles-col:nth-child(1) .principles-text{ margin-top:72px; }
.principles-col:nth-child(2) .principles-text{ margin-top:68px; }
.principles-text{
  color:rgba(255,255,255,.85);
  padding-left:40px;
  max-width:360px;
}

/* Work with us — full-bleed CTA with two buttons beside the heading */
.feature--cta{
  display:block;
  min-height:0;
  padding:0;
}
.feature--cta .feature-media{
  position:relative;
  inset:auto;
  min-height:200px;
}
.feature--cta .feature-media .media-img{
  position:static;
  width:100%;
  height:auto;
  display:block;
  object-fit:unset;
}
.feature--cta .feature-media .media-img.is-missing{ display:none; }
.feature--cta .feature-scrim{ display:none; }
.cta-inner{
  position:absolute; inset:0; z-index:2;
  max-width:none; width:100%;
  padding-left:clamp(48px, 9vw, 160px); padding-right:clamp(48px, 9vw, 160px);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:40px;
}
.cta-text-group{ display:flex; align-items:center; gap:32px; }
.cta-text{ max-width:560px; }
.cta-arrow{ flex:0 0 auto; display:flex; align-items:center; }
.cta-buttons{ display:flex; gap:20px; flex-wrap:wrap; }
.cta-buttons .btn-outline-light{
  background:var(--white);
  color:var(--ink);
}
.cta-buttons .btn-outline-light:hover{
  background:transparent;
  color:var(--white);
}

@media (max-width:820px){
  /* Same full-height hero treatment as desktop: the photo covers the
     section, cropped from the top and centered horizontally. */
  .hero-content--about{
    padding:24px var(--gutter) 32px;
  }
  .hero-quote{ text-align:left; }

  /* About Us: keep text-before-photo (the generic ".col-media{order:-1}"
     rule further up puts the image first everywhere else on mobile —
     this section is the one exception). */
  .philosophy--about .col-media{ order:initial; }
  .philosophy--about .body-text{ max-width:none; }
  .philosophy--about .about-heading{ margin-bottom:24px; }
  .philosophy--about .two-col--bleed-right{ gap:0; }
  .philosophy--about .col-media{ margin-bottom:0; }
  .philosophy--about .col-text{ padding-top:36px; }
  .philosophy--about{ padding-bottom:0; }

  .principles{ padding:80px 0; }
  .principles-grid{ grid-template-columns:1fr; gap:56px; }
  .principles-col:nth-child(2) .principles-heading,
  .principles-col:nth-child(3) .principles-heading{ margin-top:0; }
  .principles-text{ max-width:none; margin-top:0 !important; }

  /* Work with us: text + buttons first (on their own dark panel, same
     pattern as Authorship), then the photo below — instead of overlaid
     on top of it. The photo is a wide panorama, so its scaled mobile
     height falls under the desktop min-height:200px safety net — drop
     it here too. */
  .feature--cta{
    display:flex;
    flex-direction:column;
  }
  .cta-inner{
    order:2;
    position:static; inset:auto; z-index:auto;
    max-width:100%; width:100%;
    background:var(--cream);
    padding:60px var(--gutter);
    display:flex; flex-direction:column; align-items:flex-start;
    gap:28px;
  }
  /* Cream panel instead of the dark photo behind it, so the light-on-dark
     text/button colors need to flip to dark-on-cream here. */
  .feature--cta .eyebrow{ color:var(--tan); }
  .feature--cta .feature-heading{ color:var(--ink); }
  .feature--cta .cta-arrow{ display:none; }
  .feature--cta .cta-buttons{ width:100%; }
  .feature--cta .cta-buttons .btn{
    flex:1 1 auto; text-align:center;
    color:var(--ink); border-color:rgba(53,49,46,.4); background:transparent;
  }
  .feature--cta .cta-buttons .btn:hover{
    background:var(--ink); color:var(--white); border-color:var(--ink);
  }
  .feature--cta .feature-media{ order:1; min-height:0; }
}

/* =============== INVESTORS PAGE =============== */
.hero--investors{ overflow:hidden; }
.hero-watermark{
  position:absolute;
  top:50%; right:-4%;
  width:420px; max-width:none;
  transform:translateY(-50%);
  opacity:.35;
  pointer-events:none;
  z-index:1;
}
.hero-content--investors{
  position:relative; z-index:2;
  justify-content:flex-start;
}
.hero-content--investors .hero-text-block{
  align-items:flex-start;
  max-width:560px;
}
.hero-content--investors .eyebrow{
  font-size:13px;
  font-weight:400;
  color:#E5DFDA;
}
.hero-content--investors h1{
  font-family:var(--font-body);
  font-size:31px;
  font-weight:700;
  color:#E5DFDA;
  text-shadow:none;
}
.hero-content--investors h1 strong{ font-weight:700; color:#E5DFDA; }
.hero-investors-text{
  max-width:480px; margin-bottom:0;
  font-size:20px; font-weight:400;
  color:#E5DFDA;
}

.report-tabs{ display:flex; gap:16px; }
.tab-btn{
  font-family:var(--font-body); font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:14px 30px; border-radius:999px;
  border:1px solid rgba(53,49,46,.35);
  background:transparent; color:var(--ink); cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.tab-btn:hover{ border-color:var(--ink); }
.tab-btn.active{ background:var(--ink); color:var(--white); border-color:var(--ink); }

/* ---- Reports list ---- */
.reports-section{ padding:100px 0 140px; overflow:hidden; }
.reports-tabs-wrap{ margin-bottom:56px; }
.report-year-group{ margin-bottom:56px; padding-left:var(--gutter); }
.report-year-group:last-child{ margin-bottom:0; }
.report-year-row{ display:flex; align-items:stretch; gap:48px; }
.report-year-col{ flex:1 1 auto; min-width:0; }
.report-year-image{ position:relative; flex:0 0 420px; overflow:hidden; }
.report-year-image--empty{ visibility:hidden; }
.report-year-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.report-year{
  font-family:var(--font-body); font-weight:700;
  font-size:clamp(24px,2.4vw,31px);
  color:#BEAB99;
  line-height:1.3;
  margin-bottom:2px;
}
.report-period-label{
  font-size:15px; color:#BEAB99; line-height:1.3; margin:22px 0 0;
  padding-bottom:14px;
  border-bottom:1px solid #BEAB99;
}
.report-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:26px 0;
  border-bottom:1px solid #BEAB99;
}
.report-row-text{ max-width:760px; }
.report-title{
  font-family:var(--font-body); font-weight:700; font-size:22px;
  color:var(--ink); margin-bottom:2px;
}
.report-title span{ font-weight:400; }
.report-meta{
  font-size:13px; font-weight:300; letter-spacing:.05em; line-height:1.4;
  color:var(--ink-soft);
}
.report-download{ flex:0 0 auto; }
.reports-locked{ padding:40px 0; }
.reports-locked .body-text{ max-width:560px; margin-bottom:28px; }

/* Blurs whatever is behind the modal (the report list stays visible but
   inert/unreadable, matching the mockup) while "Request access" is open. */
#reportsList.is-blurred{
  filter:blur(6px);
  pointer-events:none;
  user-select:none;
}

/* ---- Request access modal ---- */
.access-modal-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(20,17,14,.25);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.access-modal-overlay[hidden]{ display:none; }
.access-modal{
  position:relative;
  width:100%; max-width:600px;
  background:var(--ink);
  color:var(--white);
  padding:56px;
  border-radius:4px;
  max-height:90vh;
  overflow-y:auto;
}
.access-modal-close{
  position:absolute; top:20px; right:24px;
  background:none; border:none; cursor:pointer;
  font-size:32px; line-height:1; color:rgba(255,255,255,.6);
  padding:4px;
  transition:color .2s ease;
}
.access-modal-close:hover{ color:var(--white); }
/* Keep the eyebrow clear of the close (×) button — longer ES/DE labels
   wrap to a second line instead of running underneath it. */
.access-modal .eyebrow{ padding-right:44px; }
.access-modal-heading{
  font-family:var(--font-body);
  font-size:clamp(30px,4vw,42px);
  font-weight:700;
  color:var(--white);
  margin-bottom:22px;
}
.access-modal-text{ color:rgba(255,255,255,.8); margin-bottom:36px; }
.access-modal-form{ display:flex; flex-direction:column; gap:20px; }
#accessModalOverlay .form-field input{
  width:100%;
  font-family:var(--font-body);
  font-size:17px;
  color:var(--white);
  background:transparent;
  border:1.5px solid #BEAB99;
  border-radius:999px;
  padding:18px 26px;
  transition:border-color .2s ease;
}
#accessModalOverlay .form-field input::placeholder{ color:rgba(255,255,255,.55); }
#accessModalOverlay .form-field input:focus{ outline:none; border-color:var(--white); }
#accessModalOverlay .access-modal-submit{
  align-self:stretch;
  text-align:center;
  margin-top:8px;
  width:100%;
  height:58px;
  padding:18px 26px;
  color:#383432;
  border-width:1.5px;
  border-color:#BEAB99;
}

@media (max-width:640px){
  .access-modal{ padding:40px 28px; }
}

@media (max-width:820px){
  .hero-watermark{ width:280px; right:-15%; opacity:.35; }
  .hero-content--investors .hero-text-block{ max-width:none; }
  .hero-investors-text{ max-width:none; }
  .report-tabs{ width:100%; }
  .report-tabs .tab-btn{ flex:1 1 auto; text-align:center; }
  .report-row{ flex-direction:column; align-items:flex-start; }
  .report-download{ align-self:flex-start; }
}

/* =============== CONTACT PAGE =============== */
.contact-split{
  display:grid;
  grid-template-columns:3fr 2fr;
  align-items:stretch;
  min-height:1044.54px;
}
.contact-form-col{
  padding:180px clamp(32px,6vw,96px) 80px clamp(24px,6vw,96px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.contact-form-col .eyebrow{ font-size:18px; }
.contact-heading{
  font-family:var(--font-body);
  font-size:clamp(30px, 8vw, 56px);
  font-weight:700;
  line-height:1.15;
  color:var(--ink);
  margin-bottom:24px;
}
.contact-intro{ color:var(--ink); margin-bottom:40px; }

.contact-form{ display:flex; flex-direction:column; gap:20px; max-width:520px; }
.form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:17px;
  color:var(--ink);
  background:transparent;
  border:1.5px solid rgba(53,49,46,.55);
  border-radius:999px;
  padding:18px 26px;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .2s ease;
}
.form-field textarea{
  border-radius:24px;
  resize:vertical;
  min-height:150px;
  line-height:1.5;
}
.form-field input::placeholder,
.form-field textarea::placeholder{ color:var(--ink); opacity:.55; }
.form-field select{ color:var(--ink); cursor:pointer; }
.form-field select:invalid{ color:rgba(53,49,46,.55); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--ink);
}
.contact-submit{
  align-self:flex-start;
  margin-top:8px;
  background:#BEAB99;
  color:var(--cream);
  border-color:#BEAB99;
}
.contact-submit:hover{ background:#AC9985; border-color:#AC9985; }

.contact-media-col{ position:relative; }
.contact-media{ position:absolute; top:127px; left:0; right:0; height:917.54px; }
.contact-media .media-img{ width:100%; height:100%; }

@media (max-width:900px){
  .contact-split{ grid-template-columns:1fr; min-height:0; }
  .contact-form-col{ padding:150px 24px 60px; }
  .contact-media-col{ display:none; }
}

/* =============== HOME PHOTO CAROUSEL =============== */
.home-slider{ position:relative; background:var(--ink); padding:100px 0 64px; overflow:hidden; }
.home-slider-viewport{ overflow:hidden; width:100%; }
.home-slider-track{
  display:flex; align-items:center; gap:8px;
  will-change:transform;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
}
.home-slide{
  position:relative;
  flex:0 0 46%;
  max-width:760px;
  aspect-ratio:3/2;
  overflow:hidden;
  cursor:pointer;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(0,0,0,.08)),
    linear-gradient(135deg,#c9b79f,#8f9a8c 55%,#6f7d78);
}
.home-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.home-slide.is-missing img{ display:none; }

.home-slider-dots{
  display:flex; justify-content:center; align-items:center; gap:10px;
  margin-top:36px;
}
.slider-dot{
  width:8px; height:8px; border-radius:50%; padding:0;
  border:1.5px solid rgba(255,255,255,.4);
  background:transparent; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.slider-dot:hover{ border-color:rgba(255,255,255,.8); }
.slider-dot.active{ background:var(--white); border-color:var(--white); transform:scale(1.15); }

.slider-arrow{
  position:absolute; top:calc(50% - 32px); z-index:2;
  background:rgba(20,17,14,.4); border:none; border-radius:50%;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.75); cursor:pointer;
  transition:color .2s ease, background .2s ease;
}
.slider-arrow:hover{ color:var(--white); background:rgba(20,17,14,.65); }
.slider-arrow--prev{ left:clamp(12px,3vw,48px); }
.slider-arrow--next{ right:clamp(12px,3vw,48px); }

@media (max-width:900px){
  .home-slide{ flex-basis:82%; }
}
@media (max-width:640px){
  .home-slider{ padding:70px 0 48px; }
  .home-slide{ flex-basis:88%; border-radius:3px; }
  .slider-arrow{ width:38px; height:38px; top:calc(50% - 25px); }
  .slider-arrow svg{ width:9px; height:16px; }
}

/* =============== INVESTOR "GET IN TOUCH" FORM =============== */
.investor-form-section{
  background:#E5DFDA;
  padding:100px 0 140px;
}
.investor-contact{
  background:var(--ink);
  border-radius:4px;
  padding:64px clamp(28px,5vw,72px);
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:48px;
  align-items:center;
}
.investor-contact-heading{
  font-family:var(--font-body); font-weight:700;
  font-size:clamp(32px,3.6vw,46px);
  color:var(--white);
  line-height:1.15;
  margin-bottom:20px;
}
.investor-contact-sub{
  font-size:13px; font-weight:300; letter-spacing:.04em;
  color:rgba(255,255,255,.6);
  text-transform:uppercase;
  line-height:1.6;
  max-width:280px;
}
.investor-contact-form{ display:flex; flex-direction:column; gap:20px; }
.investor-contact-form .form-field input{
  width:100%;
  font-family:var(--font-body);
  font-size:17px;
  color:var(--white);
  background:transparent;
  border:1.5px solid rgba(255,255,255,.4);
  border-radius:999px;
  padding:18px 26px;
  transition:border-color .2s ease;
}
.investor-contact-form .form-field input::placeholder{ color:rgba(255,255,255,.55); }
.investor-contact-form .form-field input:focus{ outline:none; border-color:var(--white); }
.investor-contact-submit{
  align-self:flex-start;
  margin-top:8px;
  background:#BEAB99;
  color:#383432;
  border-color:#BEAB99;
}
.investor-contact-submit:hover{ background:#AC9985; border-color:#AC9985; }

@media (max-width:820px){
  .investor-contact{ grid-template-columns:1fr; padding:48px 28px; }
  .investor-contact-sub{ max-width:none; margin-bottom:8px; }
}
@media (max-width:820px){
  /* Year groups (Investors reports): image first, then the year and its
     reports — stacked at the same breakpoint as the rest of the site's
     mobile layout (820px), not 640px, so there's no gap where this
     section is still showing the cramped desktop side-by-side layout. */
  .report-year-group{ padding-right:var(--gutter); }
  .report-year-row{ flex-direction:column; align-items:center; }
  .report-year-image{ flex:0 0 auto; width:80%; height:220px; order:-1; }
  .report-year-image--empty{ display:none; }
}

/* =============== TYPEWRITER TITLES =============== */
.type-effect--typing::after{
  content:'|';
  display:inline-block;
  margin-left:2px;
  animation:type-cursor-blink .8s step-end infinite;
  color:currentColor;
}
@keyframes type-cursor-blink{
  0%, 100%{ opacity:1; }
  50%{ opacity:0; }
}