:root{
  --night: #0e131a;
  --night-2: #121821;
  --rock: #1a222c;
  --rock-2: #232d38;
  --stone: #97a2ae;
  --stone-dim: #6b7580;
  --snow: #eef0f2;
  --coral: #e8735e;
  --gold: #e3b15f;
  --line: rgba(238,240,242,0.10);
  --line-strong: rgba(238,240,242,0.18);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  background:var(--night);
  color:var(--stone);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:'Fraunces', serif;
  color:var(--snow);
  font-weight:600;
  letter-spacing:-0.01em;
}

.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.03em; }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--coral);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--coral); display:inline-block; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--coral);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* ---------- NAV ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:linear-gradient(to bottom, rgba(14,19,26,0.92), rgba(14,19,26,0));
  padding:22px 0 40px;
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
.nav-mark{ font-family:'Fraunces', serif; font-size:19px; color:var(--snow); font-weight:600; letter-spacing:0.01em; }
.nav-mark span{ color:var(--coral); }
.nav-links{ display:flex; align-items:center; gap:34px; font-size:13.5px; letter-spacing:0.02em; }
.nav-links a{ color:var(--stone); transition:color 0.2s ease; }
.nav-links a:hover{ color:var(--snow); }
.nav-links a.lang-switch{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  border:1px solid var(--line-strong);
  padding:6px 10px;
  border-radius:2px;
  color:var(--snow);
}
.nav-links a.lang-switch:hover{ border-color:var(--coral); color:var(--coral); }
@media (max-width:720px){ .nav-links > a{ display:none; } }

/* ---------- MOBILE NAV (burger + slide-down panel) ---------- */
.nav-burger{
  display:none; position:relative; z-index:20; width:32px; height:32px;
  background:none; border:0; cursor:pointer; padding:0; margin-left:12px;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.nav-burger span{
  display:block; width:22px; height:2px; background:var(--snow); border-radius:2px;
  transition:transform 0.25s ease, opacity 0.25s ease;
}
.nav-burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.nav-mobile-panel{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  background:var(--night);
  flex-direction:column;
  max-height:0; overflow:hidden;
  transition:max-height 0.3s ease;
}
.nav-mobile-panel.open{ border-bottom:1px solid var(--line); }
.nav-mobile-panel a{
  display:block; padding:16px 24px; font-size:15px; color:var(--snow);
  border-top:1px solid var(--line);
  font-family:'Inter', sans-serif;
}
.nav-mobile-panel a:hover{ color:var(--coral); background:var(--night-2); }
.nav-mobile-panel a.lang-switch{ color:var(--stone-dim); }

@media (max-width:720px){
  .nav-burger{ display:inline-flex; }
  .nav-mobile-panel{ display:flex; }
  .nav-mobile-panel.open{ max-height:600px; }
}
/* Prevent background scroll while the mobile panel is open */
body.nav-open{ overflow:hidden; }
body.nav-open header.nav{ background:var(--night); }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  background:#0a0d12;
}
/* Home-page variant: pinned in place; the rest of the page scrolls over it. */
.hero-pinned{
  position:sticky;
  top:0;
  height:100vh;
  min-height:100vh;
  z-index:0;
}
/* Layer that slides up over the pinned hero */
.scroll-over{
  position:relative;
  z-index:2;
  /* pull the ridge up so it starts overlapping the bottom of the hero immediately */
  margin-top:-12vh;
  pointer-events:none;
}
@media (max-width:720px){
  .scroll-over{ margin-top:-5vh; }
  .hero-inner{ padding-bottom:72px; }
}
.scroll-over .after-ridge{ pointer-events:auto; }
/* Ridge: transparent container — the pinned hero is visible through the PNG's transparent sky */
.ridge-over{ font-size:0; /* kill inline-img whitespace gap */ }
.ridge-img{
  display:block;
  width:100%;
  height:auto;      /* natural aspect ratio — never cropped */
}
/* Placeholder when no ridge image is set: jagged silhouette, transparent above the ridgeline */
.ridge-placeholder{
  width:100%;
  height:34vh;
  min-height:200px;
  background:linear-gradient(180deg,#141b23,#0a0d12);
  clip-path: polygon(0% 100%, 0% 71.4%, 11.4% 42.9%, 18.6% 61.9%, 27.1% 21.4%, 37.1% 57.1%, 46.4% 35.7%, 54.3% 66.7%, 64.3% 14.3%, 72.9% 52.4%, 82.9% 33.3%, 91.4% 61.9%, 100% 42.9%, 100% 100%);
}
/* Solid ground under everything after the ridge */
.after-ridge{
  background:var(--night);
  margin-top:-2px; /* avoid any subpixel seam between ridge and content */
}

.hero-topo{ position:absolute; inset:0; opacity:0.5; pointer-events:none; z-index:1; }
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(232,115,94,0.10), transparent 60%),
    linear-gradient(180deg, #0a0d12 0%, #0e131a 55%, #10161f 100%);
  background-size:cover;
  background-position:center;
}
.hero-glow{
  position:absolute; left:0; right:0; bottom:0; height:55%; z-index:1;
  background:linear-gradient(180deg, transparent, rgba(232,115,94,0.14) 60%, rgba(227,177,95,0.10));
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; padding-bottom:96px; }
h1.hero-title{
  /* min(7.2vw, 11vh): scales with width on tall screens, but caps against height on short 16:9 viewports */
  font-size:clamp(36px, min(7.2vw, 11vh), 92px);
  line-height:0.98; max-width:900px;
  text-shadow: 0 2px 6px rgba(6,9,13,0.55), 0 8px 32px rgba(6,9,13,0.45);
}
h1.hero-title em{ font-style:italic; color:var(--coral); font-weight:500; }
.hero-sub{
  max-width:480px; margin-top:26px; font-size:17px; color:#c8cfd6;
  text-shadow: 0 1px 4px rgba(6,9,13,0.65), 0 4px 18px rgba(6,9,13,0.5);
}
/* Short viewports (16:9 laptops): tighten vertical rhythm so nothing crowds the nav */
@media (max-height: 820px){
  .hero-inner{ padding-bottom:56px; }
  .hero-sub{ margin-top:16px; }
  .hero-cta{ margin-top:26px; }
}
.hero-cta{ margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.hero-cta .btn-ghost{ background:rgba(10,13,18,0.35); }

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:3px;
  font-size:14px; font-weight:500; letter-spacing:0.01em; transition:all 0.2s ease; border:1px solid transparent;
  font-family:'Inter', sans-serif;
  appearance:none; -webkit-appearance:none; background-color:transparent; cursor:pointer;
}
.btn-primary{ background:var(--snow); color:var(--night); }
.btn-primary:hover{ background:var(--coral); color:var(--snow); }
.btn-ghost{ border-color:var(--line-strong); color:var(--snow); background:rgba(238,240,242,0.04); }
.btn-ghost:hover{ border-color:var(--coral); color:var(--coral); }

.scroll-cue{ position:absolute; right:32px; bottom:36px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; }
.scroll-cue .track{ width:1px; height:44px; background:var(--line-strong); position:relative; overflow:hidden; }
.scroll-cue .track::after{
  content:""; position:absolute; top:-44px; left:0; width:1px; height:44px; background:var(--coral);
  animation:descend 2.2s ease-in-out infinite;
}
@keyframes descend{ 0%{ top:-44px; } 60%{ top:44px; } 100%{ top:44px; } }
.scroll-cue span{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--stone-dim); writing-mode:vertical-rl; letter-spacing:0.1em; }
@media (max-width:720px){ .scroll-cue{ display:none; } }

/* ---------- SECTION GENERIC ---------- */
section{ padding:120px 0; position:relative; }
section.tight{ padding:96px 0; }
.section-head{ max-width:640px; margin-bottom:64px; }
.section-head h2{ font-size:clamp(30px, 4vw, 46px); margin-top:16px; line-height:1.08; }
@media (max-width:720px){
  section{ padding:64px 0; }
  section.tight{ padding:48px 0; }
  section.summary-band{ padding-top:32px; padding-bottom:16px; }
  .section-head{ margin-bottom:36px; }
}

/* ---------- APPROACH ---------- */
.approach{ background:var(--night-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.approach-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.approach-lead p{ font-size:19px; color:var(--snow); font-weight:400; line-height:1.5; }
.approach-lead p + p{ margin-top:20px; color:var(--stone); font-size:16px; }
.stat-row{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px; }
.stat{ background:var(--night-2); padding:24px 22px; }
.stat .num{ font-family:'IBM Plex Mono', monospace; font-size:28px; color:var(--gold); }
.stat .label{ font-size:12.5px; color:var(--stone-dim); margin-top:6px; letter-spacing:0.02em; }
@media (max-width:840px){ .approach-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- TERRAIN ---------- */
.terrain-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.terrain-card{ background:var(--night); padding:40px 32px 36px; position:relative; transition:background 0.25s ease; }
.terrain-card:hover{ background:var(--rock); }
.terrain-card .grade{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--coral); letter-spacing:0.08em; }
.terrain-card h3{ font-size:23px; margin-top:14px; margin-bottom:12px; }
.terrain-card p{ font-size:14.5px; color:var(--stone); }
@media (max-width:900px){ .terrain-grid{ grid-template-columns:1fr; } }

/* Grade badge info tooltip (homepage terrain cards) */
.grade-row{ display:flex; align-items:center; gap:8px; }
.grade-info{ position:relative; display:inline-flex; }
.grade-info-icon{
  width:15px; height:15px; border-radius:50%; border:1px solid var(--line-strong);
  color:var(--stone-dim); font-family:'IBM Plex Mono', monospace; font-size:10px;
  display:flex; align-items:center; justify-content:center; cursor:help; line-height:1;
}
.grade-info:hover .grade-info-icon, .grade-info:focus-within .grade-info-icon{ border-color:var(--coral); color:var(--coral); }
.grade-info-tip{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px);
  width:220px; background:var(--rock); border:1px solid var(--line-strong); border-radius:3px;
  padding:12px 14px; font-size:12.5px; line-height:1.5; color:var(--stone);
  font-family:'Inter', sans-serif; letter-spacing:0; text-align:left;
  opacity:0; pointer-events:none; transition:opacity 0.15s ease, transform 0.15s ease;
  z-index:5; box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.grade-info-tip a{ color:var(--coral); display:inline-block; margin-top:8px; font-family:'IBM Plex Mono', monospace; font-size:11px; }
.grade-info:hover .grade-info-tip, .grade-info:focus-within .grade-info-tip{
  opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;
}

/* Grading explainer page */
.grading-list{ display:flex; flex-direction:column; gap:48px; max-width:720px; }
.grading-item{ border-top:1px solid var(--line); padding-top:32px; }
.grading-item-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:12px; }
.grading-item-head .grade{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--coral); letter-spacing:0.08em; }
.grading-item-head h3{ font-size:22px; }
.grading-item p{ font-size:15.5px; color:var(--stone); line-height:1.6; }
.grading-scale{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.grading-scale li{
  font-size:14px; color:var(--stone); padding-left:18px; position:relative; line-height:1.5;
}
.grading-scale li::before{ content:"—"; position:absolute; left:0; color:var(--coral); }

/* ---------- GALLERY ---------- */
.gallery{ display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:180px; gap:8px; }
.g-item{ position:relative; border-radius:2px; overflow:hidden; grid-column:span 2; display:flex; align-items:flex-end; padding:16px; isolation:isolate; background-size:cover; background-position:center; }
/* When a real photo is set, the ::before gradient becomes a readability scrim over it */
.g-item.has-photo::before{
  background:linear-gradient(180deg, rgba(10,13,18,0) 40%, rgba(10,13,18,0.72) 100%) !important;
}
.g-item::before{ content:""; position:absolute; inset:0; z-index:-1; }
.g-item.a{ grid-column:span 3; grid-row:span 2; }
.g-item.b{ grid-column:span 3; grid-row:span 2; }
.g-item.c{ grid-column:span 2; }
.g-item.d{ grid-column:span 2; }
.g-item.e{ grid-column:span 2; }
.g-cap{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:rgba(238,240,242,0.88); letter-spacing:0.04em; text-shadow:0 1px 6px rgba(0,0,0,0.5); }
.g-cap b{ display:block; font-family:'Fraunces', serif; font-size:16px; font-weight:500; color:var(--snow); margin-bottom:2px; letter-spacing:0; }
.g-item.a::before{ background:linear-gradient(155deg,#2a3542,#0d1116 55%,#1a222c), radial-gradient(circle at 75% 20%, rgba(227,177,95,0.35), transparent 45%); }
.g-item.b::before{ background:linear-gradient(200deg,#1c232c,#0a0d12 60%), radial-gradient(circle at 20% 15%, rgba(232,115,94,0.28), transparent 50%); }
.g-item.c::before{ background:linear-gradient(160deg,#232d38,#0e131a); }
.g-item.d::before{ background:linear-gradient(210deg,#1a222c,#0a0d12), radial-gradient(circle at 80% 80%, rgba(227,177,95,0.18), transparent 55%); }
.g-item.e::before{ background:linear-gradient(170deg,#2a3542,#0d1116); }
@media (max-width:840px){
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .g-item, .g-item.a, .g-item.b, .g-item.c, .g-item.d, .g-item.e{ grid-column:span 1; grid-row:span 1; }
}

/* ---------- DAY ---------- */
.day{ background:var(--night-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.timeline{ position:relative; margin-top:8px; }
.timeline::before{ content:""; position:absolute; left:98px; top:8px; bottom:8px; width:1px; background:linear-gradient(180deg, var(--stone-dim), var(--coral) 55%, var(--gold)); }
.t-row{ display:grid; grid-template-columns:98px 40px 1fr; padding:28px 0; border-bottom:1px solid var(--line); }
.t-row:last-child{ border-bottom:none; }
.t-time{ font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--gold); padding-top:2px; }
.t-dot{ display:flex; justify-content:center; padding-top:6px; }
.t-dot span{ width:9px; height:9px; border-radius:50%; background:var(--night-2); border:2px solid var(--coral); }
.t-body h3{ font-size:19px; margin-bottom:6px; }
.t-body p{ font-size:14.5px; max-width:520px; }
@media (max-width:640px){
  .timeline::before{ left:8px; }
  .t-row{ grid-template-columns:26px 1fr; }
  .t-time{ display:none; }
}

/* ---------- TESTIMONIAL ---------- */
.testimonial{ text-align:center; max-width:760px; margin:0 auto; }
.testimonial q{ font-family:'Fraunces', serif; font-size:clamp(24px,3.2vw,34px); font-style:italic; color:var(--snow); font-weight:500; line-height:1.35; quotes:none; }
.testimonial .attr{ margin-top:26px; font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--stone-dim); letter-spacing:0.04em; }

/* ---------- CONTACT ---------- */
.contact{ background:var(--night-2); border-top:1px solid var(--line); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.contact-info h2{ font-size:clamp(30px,4vw,44px); line-height:1.06; margin-top:16px; }
.contact-info p{ margin-top:20px; max-width:400px; }
.contact-detail{ margin-top:34px; display:flex; flex-direction:column; gap:10px; }
.contact-detail a{
  font-family:'IBM Plex Mono', monospace; font-size:14.5px; color:var(--snow); border-bottom:1px solid var(--line-strong);
  width:fit-content; padding-bottom:2px; transition:border-color 0.2s ease, color 0.2s ease;
}
.contact-detail a:hover{ color:var(--coral); border-color:var(--coral); }

form{ display:flex; flex-direction:column; gap:18px; }
.field label{ display:block; font-size:12.5px; font-family:'IBM Plex Mono', monospace; letter-spacing:0.05em; color:var(--stone-dim); margin-bottom:8px; text-transform:uppercase; }
.field input, .field select, .field textarea{
  width:100%; background:var(--rock); border:1px solid var(--line-strong); color:var(--snow); padding:13px 14px;
  font-family:'Inter', sans-serif; font-size:14.5px; border-radius:2px; transition:border-color 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--coral); outline:none; }
.field textarea{ resize:vertical; min-height:100px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.submit-btn{ align-self:flex-start; margin-top:6px; cursor:pointer; border:none; }
@media (max-width:840px){ .contact-grid{ grid-template-columns:1fr; } .row2{ grid-template-columns:1fr; } }

/* ---------- FOOTER ---------- */
footer{ padding:40px 0; font-size:12.5px; color:var(--stone-dim); font-family:'IBM Plex Mono', monospace; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
footer a{ color:var(--stone-dim); transition:color 0.2s ease; }
footer a:hover{ color:var(--coral); }
.foot-links{ display:flex; gap:22px; flex-wrap:wrap; }

/* ---------- LEGAL PAGES ---------- */
.legal-page{ padding-top:160px; padding-bottom:120px; min-height:70vh; }
.legal-title{ font-size:clamp(32px,5vw,52px); margin-bottom:40px; }
.legal-body{ max-width:720px; }
.legal-body h3{ font-size:19px; margin-top:34px; margin-bottom:10px; }
.legal-body h3:first-child{ margin-top:0; }
.legal-body p{ font-size:15px; margin-bottom:6px; color:var(--stone); }
.legal-body a{ color:var(--gold); border-bottom:1px solid rgba(227,177,95,0.35); }
.legal-body a:hover{ border-color:var(--gold); }
.legal-body strong{ color:var(--snow); font-weight:600; }

/* ---------- PAGE HEADER (Services/Process/Capabilities/FAQ/About/Contact) ---------- */
.page-header{ padding:160px 0 60px; }
.page-header h1{ font-size:clamp(32px,5vw,52px); margin-top:16px; line-height:1.06; max-width:760px; }
.page-intro{ max-width:600px; margin-top:20px; font-size:17px; color:var(--stone); }

/* ---------- HOME: summary band (first solid section after the ridge) ---------- */
/* NOTE: needs "section." prefix to out-specificity section.tight (96px), which was
   otherwise silently winning over the padding below and adding ~40px of extra gap. */
section.summary-band{ padding-top:56px; padding-bottom:32px; }
.summary-line{
  font-family:'Fraunces', serif; font-size:clamp(20px,2.6vw,28px); font-weight:500;
  color:var(--snow); max-width:820px; line-height:1.4;
}
.text-link{
  display:inline-block; margin-top:32px; font-family:'IBM Plex Mono', monospace; font-size:13px;
  color:var(--coral); border-bottom:1px solid rgba(232,115,94,0.35); padding-bottom:2px;
}
.text-link:hover{ border-color:var(--coral); }

/* ---------- HOME: testimonial + CTA bands ---------- */
.testimonial-band{ padding:100px 0; }
.cta-band{ background:var(--night-2); border-top:1px solid var(--line); padding:80px 0; }
.cta-band-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.cta-band-inner h2{ font-size:clamp(24px,3vw,34px); }
.cta-band-inner p{ margin-top:10px; color:var(--stone); max-width:420px; }
@media (max-width:700px){ .cta-band-inner{ flex-direction:column; align-items:flex-start; } }

/* ---------- SERVICES: tiers ---------- */
.tier-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.tier-card{ background:var(--night); padding:36px 32px; display:flex; flex-direction:column; gap:18px; }
.tier-card h3{ font-size:22px; }
.tier-block{ display:flex; flex-direction:column; gap:8px; }
.tier-label{ font-size:11.5px; color:var(--stone-dim); letter-spacing:0.08em; text-transform:uppercase; }
.tier-block ul{ list-style:none; display:flex; flex-direction:column; gap:5px; }
.tier-block ul li{ font-size:14.5px; color:var(--stone); padding-left:14px; position:relative; }
.tier-block ul li::before{ content:"—"; position:absolute; left:0; color:var(--stone-dim); }
.tier-price{ margin-top:auto; padding-top:10px; font-size:15px; color:var(--gold); border-top:1px solid var(--line); }
@media (max-width:800px){ .tier-grid{ grid-template-columns:1fr; } }

/* ---------- SERVICES: content packages ---------- */
.packages-band{ background:var(--night-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.package-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px; }
.package-card{
  background:var(--rock); border:1px solid var(--line-strong); border-radius:6px; padding:28px;
  display:flex; flex-direction:column; gap:16px;
}
.package-card h3{ font-size:19px; }
.package-card ul{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.package-card ul li{ font-size:14.5px; color:var(--stone); }
.package-price{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); color:var(--gold); font-size:15px; }
@media (max-width:800px){ .package-grid{ grid-template-columns:1fr; } }

/* ---------- SERVICES: reference pricing table ---------- */
.pricing-table{ width:100%; border-collapse:collapse; margin-top:8px; }
.pricing-table tr{ border-bottom:1px solid var(--line); }
.pricing-table tr:last-child{ border-bottom:none; }
.pricing-table td{ padding:16px 4px; font-size:15px; color:var(--snow); }
.pricing-table .price-cell{ text-align:right; color:var(--gold); font-size:14px; white-space:nowrap; }

/* ---------- PROCESS: weather/safety policy cards ---------- */
.policy-band{ background:var(--night-2); border-top:1px solid var(--line); }
.policy-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.policy-card{ background:var(--night-2); padding:32px; }
.policy-card h3{ font-size:19px; margin-bottom:12px; color:var(--coral); }
.policy-card p{ font-size:14.5px; color:var(--stone); }
@media (max-width:700px){ .policy-grid{ grid-template-columns:1fr; } }

/* ---------- CAPABILITIES ---------- */
.capability-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:16px 32px; max-width:760px; }
.capability-list li{ font-size:16px; color:var(--snow); display:flex; align-items:flex-start; gap:12px; }
.capability-list .check{ color:var(--coral); font-family:'IBM Plex Mono', monospace; flex-shrink:0; }
@media (max-width:640px){ .capability-list{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq-list{ display:flex; flex-direction:column; max-width:720px; }
.faq-item{ padding:26px 0; border-bottom:1px solid var(--line); }
.faq-item:first-child{ padding-top:0; }
.faq-item h3{ font-size:18px; margin-bottom:8px; }
.faq-item p{ font-size:15px; color:var(--stone); }

/* ---------- ABOUT ---------- */
.about-body{ max-width:640px; }
.about-body p{ font-size:16.5px; color:var(--stone); margin-bottom:18px; line-height:1.65; }
.about-layout{ display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:start; }
.about-layout .about-body{ max-width:none; }
.about-photo{ position:sticky; top:120px; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.about-photo img{ display:block; width:100%; height:auto; }
@media (max-width:860px){
  .about-layout{ grid-template-columns:1fr; }
  .about-photo{ position:static; order:-1; max-width:320px; }
}

/* ================= CMS ================= */
.cms-body{ background:var(--night-2); }

.cms-login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.cms-login-card{
  width:100%; max-width:380px; background:var(--rock); border:1px solid var(--line-strong); border-radius:6px; padding:36px;
}
.cms-login-card form{ gap:16px; }
.cms-error{
  background:rgba(232,115,94,0.12); border:1px solid rgba(232,115,94,0.4); color:var(--coral);
  font-size:13px; padding:10px 12px; border-radius:3px; margin-bottom:18px;
}

.cms-topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; background:var(--night); border-bottom:1px solid var(--line);
}
.cms-topbar form button{ padding:9px 18px; font-size:13px; }

.cms-wrap{ max-width:840px; margin:0 auto; padding:40px 32px 120px; }
.cms-success{
  background:rgba(160,200,150,0.12); border:1px solid rgba(160,200,150,0.4); color:#a8caa0;
  font-size:13.5px; padding:12px 16px; border-radius:3px; margin-bottom:24px;
}

.cms-tabs{ display:flex; gap:2px; margin-bottom:28px; background:var(--line); border:1px solid var(--line); width:fit-content; border-radius:3px; overflow:hidden; }
.cms-tab-btn{
  font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.04em; padding:10px 22px; background:var(--night);
  color:var(--stone-dim); border:none; cursor:pointer; transition:all 0.2s ease;
}
.cms-tab-btn.active{ background:var(--coral); color:var(--night); }
.cms-tab-btn:not(.active):hover{ color:var(--snow); }

.cms-form{ display:none; flex-direction:column; gap:0; }
.cms-form.active{ display:flex; }

.cms-section{ background:var(--rock); border:1px solid var(--line); border-radius:6px; padding:28px; margin-bottom:20px; display:flex; flex-direction:column; gap:16px; }
.cms-section h3{ font-size:15px; color:var(--gold); font-family:'IBM Plex Mono', monospace; letter-spacing:0.03em; text-transform:uppercase; margin-bottom:4px; }

.cms-row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cms-row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.cms-row4{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:16px; }
.cms-row5{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media (max-width:720px){
  .cms-row2, .cms-row3, .cms-row4, .cms-row5{ grid-template-columns:1fr; }
}

.cms-card-block{ border:1px solid var(--line); border-radius:4px; padding:18px; background:var(--night-2); display:flex; flex-direction:column; gap:14px; }
.cms-card-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--stone-dim); letter-spacing:0.08em; text-transform:uppercase; }

.cms-html-area{ min-height:220px; font-family:'IBM Plex Mono', monospace; font-size:13px; }
.cms-hint{ font-size:12.5px; color:var(--stone-dim); line-height:1.5; }

.cms-save-bar{
  position:sticky; bottom:0; display:flex; gap:14px; padding:20px 0; background:linear-gradient(to top, var(--night-2) 70%, transparent);
}

/* ---------- WORK / PROJECT DETAIL PAGE ---------- */
.work-back{ display:inline-block; margin-bottom:20px; }
.work-notes p{ font-size:16.5px; color:var(--stone); margin-bottom:18px; line-height:1.65; max-width:680px; }
.work-video{ position:relative; width:100%; padding-top:56.25%; border-radius:2px; overflow:hidden; background:#000; }
.work-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.work-video-native{ width:100%; border-radius:2px; display:block; background:#000; }

/* Click-to-load consent facade for embedded YouTube videos */
.video-facade{
  cursor:pointer; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.video-facade.no-thumb{ background:linear-gradient(160deg,#232d38,#0e131a); }
.video-facade::before{
  content:""; position:absolute; inset:0; background:rgba(6,9,13,0.45); transition:background 0.2s ease;
}
.video-facade:hover::before{ background:rgba(6,9,13,0.3); }
.video-facade-play{
  position:relative; z-index:1; width:68px; height:68px; border-radius:50%;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.4); color:var(--snow);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  backdrop-filter:blur(2px); transition:transform 0.2s ease, background 0.2s ease;
}
.video-facade:hover .video-facade-play{ background:var(--coral); border-color:var(--coral); transform:scale(1.06); }
.video-facade-note{
  position:absolute; bottom:14px; left:14px; right:14px; z-index:1;
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:rgba(238,240,242,0.75);
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
}

/* ---------- COOKIE CONSENT BANNER ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  background:var(--rock); border-top:1px solid var(--line-strong);
  box-shadow:0 -10px 30px rgba(0,0,0,0.35);
  transform:translateY(100%); transition:transform 0.3s ease;
}
.cookie-banner.open{ transform:translateY(0); }
.cookie-banner-inner{
  max-width:1180px; margin:0 auto; padding:20px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.cookie-banner p{
  font-size:13.5px; color:var(--stone); line-height:1.55; max-width:640px; margin:0;
}
.cookie-banner p a{ color:var(--coral); white-space:nowrap; }
.cookie-banner-actions{ display:flex; gap:12px; flex-shrink:0; }
.cookie-banner-actions .btn{ padding:11px 20px; font-size:13px; }
.cookie-banner-actions .btn-ghost{
  background:transparent; border-color:rgba(238,240,242,0.4); color:var(--snow); font-weight:600;
}
.cookie-banner-actions .btn-ghost:hover{ background:rgba(238,240,242,0.08); border-color:var(--snow); }
@media (max-width:720px){
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; gap:16px; padding:18px 20px 22px; }
  .cookie-banner-actions{ justify-content:stretch; }
  .cookie-banner-actions .btn{ flex:1; justify-content:center; }
}
.work-photo-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.work-photo-thumb{
  border:0; padding:0; cursor:pointer; aspect-ratio:4/3; background-size:cover; background-position:center;
  border-radius:2px; background-color:var(--rock); transition:opacity 0.2s ease;
}
.work-photo-thumb:hover{ opacity:0.85; }
@media (max-width:720px){ .work-photo-grid{ grid-template-columns:repeat(2, 1fr); } }

/* Homepage gallery tiles are now links — subtle hover affordance */
a.g-item{ cursor:pointer; }
a.g-item:hover::before{ filter:brightness(1.12); }
a.g-item:hover .g-cap b{ color:var(--coral); }

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(6,9,13,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.2s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-img{ max-width:88vw; max-height:80vh; object-fit:contain; border-radius:2px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.lightbox-caption{
  position:absolute; bottom:28px; left:0; right:0; text-align:center;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--stone);
}
.lightbox-close{
  position:absolute; top:24px; right:24px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid var(--line-strong); color:var(--snow);
  font-size:16px; cursor:pointer;
}
.lightbox-close:hover{ border-color:var(--coral); color:var(--coral); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid var(--line-strong); color:var(--snow);
  font-size:26px; cursor:pointer; line-height:1;
}
.lightbox-nav:hover{ border-color:var(--coral); color:var(--coral); }
.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }
@media (max-width:720px){
  .lightbox-nav{ width:44px; height:44px; font-size:22px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
}