/*
  ICON VALLEY — Global Stylesheet
  Serve from project root (root-relative paths throughout)
  =========================================================
*/

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --bg:         #0E0E0F;
  --surface:    #18181A;
  --surface-2:  #1F1F22;
  --surface-3:  #262629;
  --text:       #F5F1EA;
  --text-muted: rgba(245,241,234,.55);
  --text-dim:   rgba(245,241,234,.28);
  --accent:     #5BBF28;
  --accent-mid: rgba(91,191,40,.35);
  --accent-low: rgba(91,191,40,.10);
  --accent-glow:rgba(91,191,40,.05);
  --border:     rgba(91,191,40,.13);
  --border-2:   rgba(245,241,234,.07);

  --ff-display: 'Fraunces', Georgia, serif;
  --ff-body:    'Manrope', system-ui, -apple-system, sans-serif;

  --fs-xs:   clamp(.70rem,.65rem + .25vw,.75rem);
  --fs-sm:   clamp(.80rem,.75rem + .25vw,.875rem);
  --fs-base: clamp(.9rem, .85rem + .25vw,1rem);
  --fs-md:   clamp(1rem,  .95rem + .25vw,1.125rem);
  --fs-lg:   clamp(1.1rem,1rem   + .5vw, 1.375rem);
  --fs-xl:   clamp(1.3rem,1.1rem + 1vw,  1.875rem);
  --fs-2xl:  clamp(1.6rem,1.2rem + 2vw,  2.5rem);
  --fs-3xl:  clamp(2rem,  1.4rem + 3vw,  3.5rem);
  --fs-4xl:  clamp(2.5rem,1.5rem + 5vw,  5.5rem);
  --fs-hero: clamp(3rem,  1.5rem + 7vw,  7.5rem);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --max-w: 1280px;
  --nav-h: 72px;

  --r1:2px; --r2:6px; --r3:12px; --r4:20px;

  --ease-out:   cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-io:    cubic-bezier(.65,0,.35,1);
  --dur-f:.18s; --dur-m:.32s; --dur-s:.55s;
}

/* ── RESET ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);font-size:var(--fs-base);font-weight:400;
  line-height:1.65;color:var(--text);background:var(--bg);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{border:none;background:none;cursor:pointer;font:inherit;color:inherit}
input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}
h1,h2,h3,h4,h5,h6{font-family:var(--ff-display);font-weight:400;line-height:1.1}

/* ── TYPOGRAPHY ──────────────────────────────────────── */
.t-hero{font-size:var(--fs-hero);letter-spacing:-.03em}
.t-h1  {font-size:var(--fs-4xl); letter-spacing:-.02em}
.t-h2  {font-size:var(--fs-3xl); letter-spacing:-.02em}
.t-h3  {font-size:var(--fs-2xl); letter-spacing:-.015em}
.t-h4  {font-size:var(--fs-xl);  letter-spacing:-.01em}
.t-muted{color:var(--text-muted)}
.t-dim  {color:var(--text-dim)}
.t-accent{color:var(--accent)}
.t-upper{text-transform:uppercase;letter-spacing:.12em}
em{font-style:italic;color:var(--accent)}

/* ── LAYOUT ──────────────────────────────────────────── */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--s5)}
@media(min-width:768px){.container{padding:0 var(--s7)}}
@media(min-width:1280px){.container{padding:0 var(--s8)}}

.section-pad   {padding-top:clamp(80px,10vw,160px);padding-bottom:clamp(80px,10vw,160px)}
.section-pad-sm{padding-top:clamp(48px,6vw,96px);  padding-bottom:clamp(48px,6vw,96px)}

/* ── SECTION HEADER ──────────────────────────────────── */
.section-header{margin-bottom:clamp(var(--s7),6vw,var(--s9))}
.section-eyebrow{
  display:inline-block;
  font-family:var(--ff-body);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  margin-bottom:var(--s4);
}
.section-header h2{max-width:700px}
.section-header p{max-width:560px;color:var(--text-muted);margin-top:var(--s4);font-size:var(--fs-md);line-height:1.7}
.section-header.text-center h2,
.section-header.text-center p{margin-left:auto;margin-right:auto}
.divider-accent{width:40px;height:2px;background:var(--accent);margin-bottom:var(--s5)}

/* ── NAVIGATION ──────────────────────────────────────── */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);display:flex;align-items:center;
  padding:0 var(--s5);
  transition:background var(--dur-m) var(--ease-out),
             border-color var(--dur-m) var(--ease-out),
             backdrop-filter var(--dur-m) var(--ease-out),
             transform var(--dur-m) var(--ease-out);
  border-bottom:1px solid transparent;
}
@media(min-width:768px){.site-nav{padding:0 var(--s7)}}
/* Hidden while scrolling down past the header; slides back in the instant
   the user scrolls up, so navigation is always one scroll-tick away. */
.site-nav.nav-hidden{transform:translateY(-100%)}
.site-nav.scrolled{
  background:rgba(14,14,15,.88);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom-color:var(--border);
}
.nav-logo{display:flex;align-items:center;margin-right:auto;flex-shrink:0}
.nav-logo img{height:36px;width:auto}

.nav-links{display:none;align-items:center;gap:var(--s2)}
@media(min-width:900px){.nav-links{display:flex}}

.nav-item{position:relative}
.nav-link,.nav-btn{
  display:flex;align-items:center;gap:5px;
  padding:var(--s2) var(--s4);
  font-size:var(--fs-sm);font-weight:500;
  color:var(--text-muted);border-radius:var(--r2);
  transition:color var(--dur-f) var(--ease-out);
  white-space:nowrap;
}
.nav-link:hover,.nav-btn:hover{color:var(--text)}
.nav-chevron{width:11px;height:11px;flex-shrink:0;transition:transform var(--dur-f) var(--ease-out)}
.nav-item.is-open .nav-chevron{transform:rotate(180deg)}

.nav-dropdown{
  position:absolute;top:calc(100% + 8px);left:50%;
  min-width:200px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r3);padding:var(--s2);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity var(--dur-m) var(--ease-out),
             transform var(--dur-m) var(--ease-out),
             visibility var(--dur-m);
  box-shadow:0 20px 56px rgba(0,0,0,.65);
}
.nav-item.is-open .nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown a{
  display:block;padding:10px var(--s4);
  font-size:var(--fs-sm);font-weight:500;
  color:var(--text-muted);border-radius:var(--r2);
  transition:background var(--dur-f),color var(--dur-f);
}
.nav-dropdown a:hover{background:var(--surface-3);color:var(--text)}
.nav-dropdown a+a{border-top:1px solid var(--border-2)}

.nav-cta{
  background:var(--accent);color:var(--bg) !important;
  border:1px solid var(--accent);border-radius:var(--r2);
  font-weight:700;padding:9px var(--s5) !important;
  margin-left:var(--s3);
  /* Keeps the label legible where the nav is still transparent over a photo. */
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  transition:background var(--dur-f) var(--ease-out),
             border-color var(--dur-f) var(--ease-out) !important;
}
.nav-cta:hover{background:#4DA820 !important;border-color:#4DA820 !important}

/* hamburger */
.nav-hamburger{
  display:flex;flex-direction:column;justify-content:center;
  gap:5px;width:34px;height:34px;padding:5px;margin-left:var(--s4);
}
@media(min-width:900px){.nav-hamburger{display:none}}
.nav-hamburger span{
  width:100%;height:1.5px;background:var(--text);border-radius:2px;
  transition:transform var(--dur-m) var(--ease-out),opacity var(--dur-m);
  transform-origin:center;
}
.nav-hamburger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-hamburger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile overlay */
.nav-mobile-overlay{
  position:fixed;inset:0;z-index:999;
  background:rgba(14,14,15,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;flex-direction:column;
  padding:calc(var(--nav-h) + var(--s7)) var(--s6) var(--s9);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity var(--dur-s) var(--ease-out),visibility var(--dur-s);
  overflow-y:auto;
}
.nav-mobile-overlay.is-open{opacity:1;pointer-events:auto;visibility:visible}

.nav-mobile-group{margin-bottom:var(--s7)}
.nav-mobile-group-label{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
  margin-bottom:var(--s4);
}
.nav-mobile-group a{
  display:block;
  font-family:var(--ff-display);font-size:var(--fs-2xl);font-weight:300;
  letter-spacing:-.02em;color:var(--text-muted);
  padding:var(--s2) 0;
  transition:color var(--dur-f);
}
.nav-mobile-group a:hover{color:var(--text)}
.nav-mobile-lone{
  font-family:var(--ff-display);font-size:var(--fs-2xl);font-weight:300;
  letter-spacing:-.02em;color:var(--text-muted);
  display:block;padding:var(--s2) 0;margin-bottom:var(--s3);
  transition:color var(--dur-f);
}
.nav-mobile-lone:hover{color:var(--text)}
.nav-mobile-cta-link{
  display:inline-flex;align-items:center;
  margin-top:var(--s7);
  font-family:var(--ff-body);font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--bg);background:var(--accent);
  padding:14px var(--s7);border-radius:var(--r2);
  transition:background var(--dur-f);
}
.nav-mobile-cta-link:hover{background:#4DA820}

/* ── HERO ─────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;
  justify-content:flex-end;
  padding-bottom:clamp(60px,8vw,120px);
  overflow:hidden;
}
.hero-blueprint{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.hero-blueprint svg{
  width:100%;height:100%;object-fit:cover;
  position:absolute;inset:0;
}
.hero-gradient{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(14,14,15,.35) 0%,
    rgba(14,14,15,.15) 30%,
    rgba(14,14,15,.65) 65%,
    rgba(14,14,15,.95) 100%);
}
.hero-content{position:relative;z-index:2}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
  margin-bottom:var(--s5);
}
.hero-eyebrow::before{
  content:'';display:block;width:28px;height:1px;background:var(--accent)
}
.hero-headline{
  font-size:var(--fs-hero);letter-spacing:-.03em;
  line-height:1.0;margin-bottom:var(--s5);max-width:900px;
}
.hero-sub{
  font-size:var(--fs-lg);color:var(--text-muted);
  max-width:480px;line-height:1.65;margin-bottom:var(--s7);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s4)}
.hero-scroll{
  position:absolute;bottom:var(--s7);right:var(--s8);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  color:var(--text-dim);font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;
}
@media(max-width:639px){.hero-scroll{display:none}}
.hero-scroll-line{
  width:1px;height:56px;
  background:linear-gradient(to bottom,var(--text-dim),transparent);
  animation:scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{
  0%  {transform:scaleY(0);transform-origin:top;opacity:0}
  40% {transform:scaleY(1);transform-origin:top;opacity:1}
  80% {transform:scaleY(1);transform-origin:bottom;opacity:1}
  100%{transform:scaleY(0);transform-origin:bottom;opacity:0}
}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-primary{
  display:inline-flex;align-items:center;gap:var(--s3);
  padding:14px var(--s7);
  background:var(--accent);color:var(--bg);
  font-family:var(--ff-body);font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--r2);
  transition:background var(--dur-f) var(--ease-out),
             transform var(--dur-f) var(--ease-out),
             box-shadow var(--dur-f) var(--ease-out);
}
.btn-primary:hover{
  background:#4DA820;transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(91,191,40,.35);
}
.btn-ghost{
  display:inline-flex;align-items:center;gap:var(--s3);
  padding:13px var(--s7);
  background:transparent;color:var(--text-muted);
  font-family:var(--ff-body);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--r2);border:1px solid var(--border-2);
  transition:color var(--dur-f) var(--ease-out),border-color var(--dur-f) var(--ease-out);
}
.btn-ghost:hover{color:var(--text);border-color:rgba(245,241,234,.2)}
.btn-text{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-size:var(--fs-sm);font-weight:700;color:var(--accent);
  letter-spacing:.05em;text-transform:uppercase;
  transition:gap var(--dur-f) var(--ease-out);
}
.btn-text:hover{gap:var(--s4)}
.btn-text svg{width:14px;height:14px;flex-shrink:0}

/* ── PHASE CARDS ─────────────────────────────────────── */
.phase-cards-grid{
  display:grid;grid-template-columns:1fr;gap:var(--s5);
}
@media(min-width:768px){.phase-cards-grid{grid-template-columns:1fr 1fr}}

.phase-card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r4);overflow:hidden;
  transition:border-color var(--dur-m) var(--ease-out),
             transform var(--dur-m) var(--ease-out),
             box-shadow var(--dur-m) var(--ease-out);
}
.phase-card:hover{
  border-color:var(--accent-mid);
  transform:translateY(-5px);
  box-shadow:0 24px 72px rgba(0,0,0,.55),0 0 0 1px var(--accent-mid);
}
.phase-card-media{
  aspect-ratio:16/10;position:relative;overflow:hidden;
  background:var(--surface-2);flex-shrink:0;
}
.phase-card-media svg{
  width:100%;height:100%;position:absolute;inset:0;
  transition:transform var(--dur-s) var(--ease-out);
}
.phase-card:hover .phase-card-media svg{transform:scale(1.05)}
.phase-card-body{
  padding:clamp(var(--s6),4vw,var(--s7));
  display:flex;flex-direction:column;gap:var(--s4);flex-grow:1;
}
.phase-card-label{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
}
.phase-card-body h3{font-size:var(--fs-xl);letter-spacing:-.015em}
.phase-card-body p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.7;flex-grow:1}
.phase-card-arrow{
  display:flex;align-items:center;gap:var(--s3);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
  margin-top:var(--s3);
  transition:gap var(--dur-f);
}
.phase-card:hover .phase-card-arrow{gap:var(--s5)}

/* ── PROJECT CARDS (smaller, 3-up) ───────────────────── */
.project-cards-grid{
  display:grid;grid-template-columns:1fr;gap:var(--s5);
}
@media(min-width:640px){.project-cards-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.project-cards-grid{grid-template-columns:1fr 1fr 1fr}}

.project-card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r3);overflow:hidden;
  transition:border-color var(--dur-m),transform var(--dur-m),box-shadow var(--dur-m);
}
.project-card:hover{
  border-color:var(--accent-mid);transform:translateY(-3px);
  box-shadow:0 16px 48px rgba(0,0,0,.5);
}
.project-card-media{
  aspect-ratio:16/9;position:relative;
  background:var(--surface-2);overflow:hidden;
}
.project-card-media svg{
  width:100%;height:100%;position:absolute;inset:0;
  transition:transform var(--dur-s) var(--ease-out);
}
.project-card:hover .project-card-media svg{transform:scale(1.05)}
.project-card-body{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);flex-grow:1}
.project-card-body h3{font-size:var(--fs-lg);letter-spacing:-.01em}
.project-card-body p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.7;flex-grow:1}
.project-card-link{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
  margin-top:var(--s3);transition:gap var(--dur-f);
}
.project-card-link svg{width:11px;height:11px;flex-shrink:0}
.project-card:hover .project-card-link{gap:var(--s4)}

/* ── TAGS ────────────────────────────────────────────── */
.tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.tag{
  display:inline-flex;align-items:center;
  padding:4px 10px;
  background:var(--accent-low);border:1px solid var(--border);
  border-radius:var(--r1);
  font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);
}

/* ── STATS STRIP ─────────────────────────────────────── */
.stats-strip{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-item{
  padding:clamp(var(--s6),5vw,var(--s8)) var(--s5);
  text-align:center;
  border-right:1px solid var(--border);
}
.stat-item:last-child{border-right:none}
@media(max-width:639px){
  .stat-item:nth-child(2n){border-right:none}
  .stat-item:nth-child(1),.stat-item:nth-child(2){border-bottom:1px solid var(--border)}
}
.stat-number{
  font-family:var(--ff-display);
  font-size:var(--fs-3xl);letter-spacing:-.02em;
  color:var(--accent);margin-bottom:var(--s2);
}
.stat-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}

/* ── PAGE HEADER (inner pages) ───────────────────────── */
.page-header{
  position:relative;
  padding-top:calc(var(--nav-h) + clamp(60px,8vw,120px));
  padding-bottom:clamp(60px,8vw,120px);
  overflow:hidden;
}
.page-header-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.page-header-bg svg{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.page-header-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,
    rgba(14,14,15,.5) 0%,
    rgba(14,14,15,.3) 40%,
    rgba(14,14,15,.9) 100%);
}
/* Lighter variant — same gradient shape, roughly half the opacity at every
   stop. The default overlay above is tuned to keep header text readable
   over almost any photo, but that much darkening was making the uploaded
   Contact Us photo look murky. Add this class alongside .page-header-overlay
   on a specific page's header when the photo should read more clearly and
   the text still has enough contrast without the heavier scrim. */
.page-header-overlay-light{
  background:linear-gradient(to bottom,
    rgba(14,14,15,.25) 0%,
    rgba(14,14,15,.12) 40%,
    rgba(14,14,15,.55) 100%);
}
.page-header-content{position:relative;z-index:2}
.breadcrumb{
  display:flex;align-items:center;gap:var(--s3);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-dim);
  margin-bottom:var(--s5);
}
.breadcrumb a{color:var(--accent)}
.breadcrumb span{color:var(--text-dim)}
.page-header h1{max-width:780px}

/* ── PLOT LISTINGS ───────────────────────────────────── */
.plots-wrap{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r3);overflow:hidden;
}
.plots-table{width:100%;border-collapse:collapse}
.plots-table th,.plots-table td{
  padding:var(--s4) var(--s5);
  text-align:left;border-bottom:1px solid var(--border);
  font-size:var(--fs-sm);
}
.plots-table th{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
  background:var(--surface-2);
}
.plots-table tr:hover td{background:var(--surface-2)}
.plots-table tr:last-child td{border-bottom:none}
.plots-table .plot-size{font-family:var(--ff-display);color:var(--text);font-size:var(--fs-md)}

/* ── SPEC GRID ───────────────────────────────────────── */
.spec-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;
}
@media(min-width:640px){.spec-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.spec-grid{grid-template-columns:repeat(4,1fr)}}
.spec-item{
  padding:var(--s6);background:var(--surface);
  display:flex;flex-direction:column;gap:var(--s2);
}
.spec-label{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);
}
.spec-value{
  font-family:var(--ff-display);font-size:var(--fs-xl);
  letter-spacing:-.01em;
}

/* ── SPLIT SECTIONS (image left/right text) ──────────── */
.split-section{
  display:grid;grid-template-columns:1fr;gap:var(--s7);
  align-items:center;
}
@media(min-width:900px){
  .split-section{grid-template-columns:1fr 1fr;gap:clamp(var(--s7),6vw,var(--s10))}
  .split-section.split-reverse .split-media{order:2}
  .split-section.split-reverse .split-content{order:1}
}
.split-media{
  aspect-ratio:4/3;position:relative;
  background:var(--surface-2);border-radius:var(--r4);
  overflow:hidden;border:1px solid var(--border);
}
.split-media svg{width:100%;height:100%;position:absolute;inset:0}

/* ── GALLERY ─────────────────────────────────────────── */
.gallery-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);
}
@media(min-width:640px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}
.gallery-item{
  aspect-ratio:4/3;background:var(--surface-2);
  border-radius:var(--r3);overflow:hidden;
  position:relative;cursor:zoom-in;
  border:1px solid var(--border);
  transition:transform var(--dur-m) var(--ease-out),border-color var(--dur-m);
}
.gallery-item:hover{transform:scale(1.02);border-color:var(--accent-mid)}
.gallery-item svg{width:100%;height:100%;position:absolute;inset:0}
.gallery-item img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.gallery-item.large{grid-column:span 2;aspect-ratio:16/9}
.lightbox-content img{display:block;max-width:100%;max-height:90vh;border-radius:var(--r3)}

/* ── VIDEO GRID ──────────────────────────────────────── */
.video-grid{
  display:grid;grid-template-columns:1fr;gap:var(--s6);
}
@media(min-width:640px){.video-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.video-grid{grid-template-columns:1fr 1fr 1fr}}
.video-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r3);overflow:hidden;
  transition:border-color var(--dur-m),transform var(--dur-m),box-shadow var(--dur-m);
}
.video-card:hover{
  border-color:var(--accent-mid);transform:translateY(-3px);
  box-shadow:0 16px 48px rgba(0,0,0,.5);
}
.video-thumb{
  aspect-ratio:16/9;position:relative;
  background:var(--surface-2);overflow:hidden;
}
/* Direct child only: this fills the thumbnail with a placeholder graphic and
   must not reach the play-button icon nested inside .video-play, which
   otherwise inherits position:absolute;inset:0 and sits in the corner. */
.video-thumb > svg{width:100%;height:100%;position:absolute;inset:0}
.video-thumb video{width:100%;height:100%;position:absolute;inset:0;object-fit:contain;background:#000}
.video-thumb img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.video-thumb iframe{width:100%;height:100%;position:absolute;inset:0;border:0}
.yt-facade{cursor:pointer}
.video-play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:56px;height:56px;
  background:rgba(14,14,15,.72);
  border:1px solid var(--border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);
  transition:background var(--dur-f),transform var(--dur-f) var(--ease-spring);
}
.video-card:hover .video-play{
  background:var(--accent);
  transform:translate(-50%,-50%) scale(1.1);
}
.video-play svg{
  position:static;
  width:18px;height:18px;fill:var(--text);
  /* Optical centring: a triangle's visual mass sits left of its bounding box. */
  margin-left:2px;transition:fill var(--dur-f);
}
.video-card:hover .video-play svg{fill:var(--bg)}
.video-body{padding:var(--s5)}
.video-body h3{font-size:var(--fs-lg);margin-bottom:var(--s2)}
.video-body p{font-size:var(--fs-sm);color:var(--text-muted)}
.video-cat{
  display:inline-block;margin-bottom:var(--s3);
  font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}

/* ── JOURNEY TIMELINE ────────────────────────────────── */
.timeline{position:relative;max-width:760px;margin:0 auto}
.timeline::before{
  content:'';position:absolute;left:20px;top:0;bottom:0;
  width:1px;
  background:linear-gradient(to bottom,transparent,var(--accent) 15%,var(--accent) 85%,transparent);
}
@media(min-width:768px){.timeline::before{left:0;transform:none}}
.t-item{
  position:relative;padding-left:56px;
  margin-bottom:clamp(var(--s8),8vw,var(--s10));
}
.t-item:last-child{margin-bottom:0}
.t-dot{
  position:absolute;left:12px;top:10px;
  width:18px;height:18px;
  border:2px solid var(--accent);border-radius:50%;
  background:var(--bg);flex-shrink:0;
  box-shadow:0 0 12px var(--accent-mid);
}
.t-year{
  font-family:var(--ff-display);font-size:var(--fs-2xl);
  color:var(--accent);margin-bottom:var(--s3);
  letter-spacing:-.02em;
}
.t-body h3{font-size:var(--fs-xl);margin-bottom:var(--s3)}
.t-body p{font-size:var(--fs-base);color:var(--text-muted);line-height:1.7}

/* ── CONTACT ─────────────────────────────────────────── */
.contact-grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(var(--s7),6vw,var(--s10));
}
@media(min-width:900px){.contact-grid{grid-template-columns:5fr 4fr}}
.contact-form{display:flex;flex-direction:column;gap:var(--s6)}
.form-row{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.form-field{display:flex;flex-direction:column;gap:var(--s2)}
.form-label{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);
}
.form-input,.form-textarea{
  width:100%;padding:14px var(--s5);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r2);
  font-family:var(--ff-body);font-size:var(--fs-base);color:var(--text);
  transition:border-color var(--dur-f) var(--ease-out);
}
.form-input:focus,.form-textarea:focus{border-color:var(--accent)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-dim)}
/* Native <select> popups follow the OS light theme unless told otherwise —
   without this the light text becomes invisible on the white popup. */
select.form-input{color-scheme:dark}
select.form-input option{background:var(--surface-2);color:var(--text)}
[hidden]{display:none!important}
.form-textarea{resize:vertical;min-height:140px}
.form-notice{
  font-size:var(--fs-xs);color:var(--text-dim);margin-top:var(--s2);
}
.form-success{
  display:none;padding:var(--s6);
  background:var(--accent-low);border:1px solid var(--border);
  border-radius:var(--r3);
  text-align:center;font-size:var(--fs-base);color:var(--text);
}

.contact-aside{display:flex;flex-direction:column;gap:var(--s7)}
.contact-info-item{display:flex;gap:var(--s5);align-items:flex-start}
.contact-icon{
  width:44px;height:44px;flex-shrink:0;
  background:var(--accent-low);border:1px solid var(--border);
  border-radius:var(--r2);
  display:flex;align-items:center;justify-content:center;
}
.contact-icon svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.5}
.contact-info-text h4{
  font-family:var(--ff-body);font-size:var(--fs-sm);
  font-weight:700;letter-spacing:.05em;
  margin-bottom:var(--s2);
}
.contact-info-text p,.contact-info-text a{
  font-size:var(--fs-base);color:var(--text-muted);line-height:1.65;
}
.contact-info-text a:hover{color:var(--accent)}

/* ── FOOTER SOCIAL ICONS ─────────────────────────────── */
.footer-social{display:flex;gap:var(--s3);margin-top:var(--s5)}
.footer-social a{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r2);
  color:var(--text-muted);
  transition:background var(--dur-f),color var(--dur-f),border-color var(--dur-f);
  flex-shrink:0;
}
.footer-social a:hover{
  background:var(--accent-low);border-color:var(--accent-mid);color:var(--accent);
}
.footer-social svg{width:16px;height:16px}

/* ── FOOTER ──────────────────────────────────────────── */
.site-footer{
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:clamp(var(--s9),10vw,var(--s10)) 0 var(--s7);
}
.footer-grid{
  display:grid;grid-template-columns:1fr;gap:var(--s8);
  margin-bottom:var(--s9);
}
@media(min-width:640px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-brand img{height:34px;width:auto;margin-bottom:var(--s5)}
.footer-brand p{font-size:var(--fs-sm);color:var(--text-muted);max-width:260px;line-height:1.7}
.footer-col h4{
  font-family:var(--ff-body);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);
  margin-bottom:var(--s5);
}
.footer-col ul{display:flex;flex-direction:column;gap:var(--s3)}
.footer-col a{
  font-size:var(--fs-sm);color:var(--text-muted);
  transition:color var(--dur-f);
}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:var(--s4);
  justify-content:space-between;align-items:center;
  padding-top:var(--s6);border-top:1px solid var(--border);
}
.footer-bottom p{font-size:var(--fs-xs);color:var(--text-dim)}

/* ── BLUEPRINT PLACEHOLDER LABEL ─────────────────────── */
.bp-label{
  position:absolute;bottom:var(--s4);left:50%;
  transform:translateX(-50%);
  font-size:9px;font-family:var(--ff-body);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);opacity:.4;white-space:nowrap;
}

/* ── SITE IMAGE / VIDEO SLOTS (admin-managed, replaces blueprint SVGs) ── */
.site-media-fill{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  object-fit:cover;
  background:var(--surface-2);
}

/* ── PHOTO LOADING STATE (Amazon-style: grey shimmer → fade to photo) ──
   Used by js/site-images-loader.js and js/gallery-loader.js. Both scripts
   add/remove these two classes by hand (there's no MutationObserver magic
   here — it's a plain "start with .media-loading + opacity:0, flip to
   .is-loaded once the browser fires the image/video's load event").

   Why this exists: a photo can take a second or more to arrive over a slow
   connection. Without this, the browser just pops the finished image in
   the instant it decodes, which reads as a jarring flash. This shows an
   animated grey placeholder in the exact same box while the bytes are
   still in transit, then cross-fades to the real photo once it's ready —
   the same pattern you'll recognize from Amazon/most shopping sites. */

/* Put on the *container* (the element carrying data-site-slot, or
   .gallery-item) for as long as its image/video hasn't loaded yet. */
.media-loading{
  background:linear-gradient(100deg,
    var(--surface-2) 8%, var(--surface-3) 18%, var(--surface-2) 33%);
  background-size:300% 100%;
  animation:media-shimmer 1.6s ease-in-out infinite;
}
/* Hide the illustrated blueprint SVG while shimmering so the grey sweep is
   what's visible, not the artwork underneath it (it stays in the DOM as a
   fallback in case the photo never loads, just visually suppressed here). */
.media-loading > svg{opacity:0}
@keyframes media-shimmer{
  0%  {background-position:120% 0}
  100%{background-position:-30% 0}
}

/* Put on the *image/video itself*. Starts invisible; JS adds .is-loaded
   once the "load" (image) / "loadeddata" (video) event fires, which
   triggers the opacity transition below. */
.media-fade-in{
  opacity:0;
  transition:opacity var(--dur-m) var(--ease-out);
}
.media-fade-in.is-loaded{opacity:1}

/* ── ANCHOR OFFSET (sticky nav) ──────────────────────── */
.anchor-target{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* ── GALLERY LIGHTBOX ────────────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:2000;
  background:rgba(14,14,15,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity var(--dur-m),visibility var(--dur-m);
}
.lightbox.is-open{opacity:1;visibility:visible}
/* Fixed-size stage: every picture gets the same box regardless of its
   native resolution — small uploads no longer shrink the whole lightbox. */
.lightbox-content{
  width:min(960px,92vw);
  height:min(76vh,640px);
  position:relative;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);
  border-radius:var(--r3);
}
.lightbox-content img{
  width:100%;height:100%;
  max-width:100%;max-height:100%;
  object-fit:cover;
  cursor:zoom-in;
  animation:lb-fade var(--dur-m) var(--ease-out);
  touch-action:none;
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform;
}
.lightbox-content svg{width:100%;height:100%}
@media(max-width:640px){
  .lightbox-content{height:min(60vh,480px)}
}
@keyframes lb-fade{from{opacity:0}}
.lightbox-content.is-loading img{opacity:.45;transition:opacity var(--dur-f)}
.lightbox-spinner{
  width:44px;height:44px;
  flex:none;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:lb-spin .8s linear infinite;
}
@keyframes lb-spin{to{transform:rotate(360deg)}}
/* Zoomed: the image scales inside the stage via transform — no scrollbars.
   Drag to pan (grab cursor), pinch or wheel to zoom further. */
.lightbox-content.is-zoomed img{cursor:grab}
/* Close + maximise controls — same circular chip language as the nav arrows */
.lightbox-close,.lightbox-zoom{
  position:absolute;top:-48px;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(14,14,15,.6);border:1px solid var(--border);
  color:var(--text-muted);
  font-size:var(--fs-lg);
  transition:background var(--dur-f),color var(--dur-f),border-color var(--dur-f);
  z-index:2001;
}
.lightbox-close{right:0}
.lightbox-zoom{right:46px}
.lightbox-zoom svg{width:18px;height:18px}
.lightbox-close:hover,.lightbox-zoom:hover{
  background:var(--accent);color:var(--bg);border-color:var(--accent);
}
/* Swap the maximise icon for the minimise one while zoomed */
.zoom-icon-shrink{display:none}
.lb-zoomed .zoom-icon-expand{display:none}
.lb-zoomed .zoom-icon-shrink{display:block}
.lightbox-nav{
  position:fixed;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(14,14,15,.6);border:1px solid var(--border);
  color:var(--text);
  transition:background var(--dur-f),color var(--dur-f),border-color var(--dur-f);
  z-index:2001;
}
.lightbox-nav svg{width:24px;height:24px}
.lightbox-nav:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.lightbox-prev{left:var(--s6)}
.lightbox-next{right:var(--s6)}
@media(max-width:640px){
  .lightbox-nav{width:40px;height:40px}
  .lightbox-nav svg{width:18px;height:18px}
  .lightbox-prev{left:var(--s3)}
  .lightbox-next{right:var(--s3)}
}

/* ── UTILITY ─────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.text-center{text-align:center}
.overflow-hidden{overflow:hidden}
.relative{position:relative}

/* ── PREFERS REDUCED MOTION ──────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero-scroll-line{animation:none}
}

/* ── THEME TOGGLE BUTTON ──────────────────────────────── */
.theme-toggle{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r2);
  color:var(--text-muted);
  transition:color var(--dur-f),background var(--dur-f);
  flex-shrink:0;margin-left:var(--s3);
}
.theme-toggle:hover{color:var(--text);background:var(--surface-2)}
.theme-icon{width:18px;height:18px;flex-shrink:0}
.theme-icon-sun{display:none}
[data-theme="light"] .theme-icon-moon{display:none}
[data-theme="light"] .theme-icon-sun{display:block}

/* ── SECTION DIVIDER & HERO QUICKLINKS (project pages) ──── */
.sub-section-divider{
  height:1px;background:var(--border);
  margin:clamp(60px,8vw,120px) 0;
}
.hero-quicklinks{
  display:flex;gap:var(--s4);flex-wrap:wrap;
  margin-top:var(--s5);
}
.hero-quicklinks a{
  font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);
  border-bottom:1px solid var(--border);padding-bottom:2px;
  transition:color var(--dur-f),border-color var(--dur-f);
}
.hero-quicklinks a:hover{color:var(--accent);border-color:var(--accent)}

/* ── GALLERY: SUBNAV, FILTERS, LIGHTBOX (pictures/videos/construction) ── */
.gallery-subnav{
  display:flex;gap:var(--s2);flex-wrap:wrap;
  margin-top:var(--s7);
}
.gallery-subnav a{
  display:inline-flex;align-items:center;
  padding:10px var(--s5);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r2);
  font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);
  transition:background var(--dur-f),color var(--dur-f),border-color var(--dur-f);
}
.gallery-subnav a:hover,.gallery-subnav a.active{
  background:var(--accent-low);border-color:var(--border);
  color:var(--accent);
}
.gallery-filters{
  display:flex;gap:var(--s2);flex-wrap:wrap;
  margin-bottom:var(--s7);
}
.filter-btn{
  display:inline-flex;align-items:center;
  padding:8px var(--s5);
  background:transparent;border:1px solid var(--border);
  border-radius:100px;
  font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);
  transition:background var(--dur-f),color var(--dur-f),border-color var(--dur-f);
  cursor:pointer;
}
.filter-btn:hover,.filter-btn.active{
  background:var(--accent-low);border-color:var(--accent-mid);
  color:var(--accent);
}
/* Wrapper keeps close button outside lightbox-content so JS clears only the image */
.lightbox-frame{
  position:relative;
  max-width:min(960px,92vw);
}
/* Gallery item overlay label */
.gallery-item-label{
  position:absolute;bottom:var(--s4);left:var(--s4);
  background:rgba(14,14,15,.75);
  backdrop-filter:blur(8px);
  padding:5px var(--s4);
  border-radius:var(--r1);
  border:1px solid var(--border);
  font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);opacity:.85;
  pointer-events:none;
  transition:opacity var(--dur-f);
}
.gallery-item:hover .gallery-item-label{opacity:1}

/* ── LIGHT THEME ──────────────────────────────────────── */
[data-theme="light"]{
  --bg:         #F3F7EE;
  --surface:    #EBF0E4;
  --surface-2:  #E2E9D6;
  --surface-3:  #D8E1C8;
  --text:       #1A2010;
  --text-muted: rgba(26,32,16,.62);
  --text-dim:   rgba(26,32,16,.36);
  --accent:     #2E7A10;
  --accent-mid: rgba(46,122,16,.32);
  --accent-low: rgba(46,122,16,.10);
  --accent-glow:rgba(46,122,16,.05);
  --border:     rgba(46,122,16,.20);
  --border-2:   rgba(26,32,16,.10);
}
[data-theme="light"] .site-nav.scrolled{
  background:rgba(243,247,238,.94);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
}
[data-theme="light"] .nav-mobile-overlay{
  background:rgba(243,247,238,.98);
}
[data-theme="light"] .nav-dropdown{
  box-shadow:0 20px 56px rgba(0,0,0,.12);
}
[data-theme="light"] .btn-ghost{
  border-color:rgba(26,32,16,.18);
}
[data-theme="light"] .btn-ghost:hover{
  border-color:rgba(26,32,16,.30);color:var(--text);
}
[data-theme="light"] .video-play{
  background:rgba(26,32,16,.60);
}
[data-theme="light"] .phase-card:hover{
  box-shadow:0 24px 72px rgba(0,0,0,.14),0 0 0 1px var(--accent-mid);
}
[data-theme="light"] .project-card:hover{
  box-shadow:0 16px 48px rgba(0,0,0,.12);
}
/* Page headers and hero sections always have a dark SVG/overlay background —
   override back to light text so it stays readable regardless of theme */
[data-theme="light"] .page-header,
[data-theme="light"] .hero{
  --text:       #F5F1EA;
  --text-muted: rgba(245,241,234,.60);
  --text-dim:   rgba(245,241,234,.32);
  --accent:     #5BBF28;
  --accent-mid: rgba(91,191,40,.35);
  --border:     rgba(91,191,40,.18);
  --surface:    #18181A;
  --surface-2:  #1F1F22;
  --surface-3:  #262629;
  /* re-resolve inherited `color` against the overrides above — custom
     properties don't retroactively change already-inherited color values */
  color:var(--text);
}
/* Nav links when nav is transparent (homepage pre-scroll) — keep light on dark hero */
[data-theme="light"] .site-nav:not(.scrolled) .nav-link,
[data-theme="light"] .site-nav:not(.scrolled) .nav-btn{
  color:rgba(245,241,234,.75);
}
[data-theme="light"] .site-nav:not(.scrolled) .nav-link:hover,
[data-theme="light"] .site-nav:not(.scrolled) .nav-btn:hover{
  color:#F5F1EA;
}
[data-theme="light"] .site-nav:not(.scrolled) .theme-toggle{
  color:rgba(245,241,234,.75);
}
[data-theme="light"] .site-nav:not(.scrolled) .theme-toggle:hover{
  color:#F5F1EA;background:rgba(245,241,234,.1);
}
/* Nav links when scrolled — ensure dark text is clearly readable on light bg */
[data-theme="light"] .site-nav.scrolled .nav-link,
[data-theme="light"] .site-nav.scrolled .nav-btn{
  color:rgba(26,32,16,.78);
}
[data-theme="light"] .site-nav.scrolled .nav-link:hover,
[data-theme="light"] .site-nav.scrolled .nav-btn:hover{
  color:#1A2010;
}