:root{
  --deep:#122E2A;
  --deep-2:#0C211E;
  --paper:#F0EBE1;
  --mist:#DDE4DF;
  --tide:#5C8A80;
  --stone:#8B8274;
  --ink:#1B201E;
  --paper-soft:#E7E1D4;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

/* ---- type roles ---- */
.eyebrow{
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--stone);
}

h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;line-height:1.08}

/* ---- shared navigation ---- */
.topnav{
  display:flex;align-items:center;justify-content:space-between;
  padding:28px 32px;gap:24px;
}
.topnav .mark{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding-left:.42em;
}
.navlinks{display:flex;gap:30px;flex-wrap:wrap}
.navlinks a{
  font-family:'Inter',sans-serif;font-weight:400;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--stone);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.navlinks a:hover{color:var(--ink);border-color:var(--stone)}
.navlinks a.is-active{color:var(--ink);border-color:var(--ink)}

/* sticky translucent header for inner pages */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(240,235,225,.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(139,130,116,.22);
}

/* ---- waterline signature ---- */
.waterline{
  position:relative;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--stone) 18%,var(--stone) 82%,transparent);
  opacity:.5;
  max-width:1180px;
  margin:0 auto;
}
.waterline::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--paper);
  border:1px solid var(--stone);
}

/* ---- bathymetric chart band (the signature) ---- */
.chart-band{line-height:0;background:var(--paper)}
.chart-svg{display:block;width:100%;height:300px}
@media (max-width:820px){.chart-svg{height:190px}}
.depth{stroke-dasharray:1}
.js .depth{stroke-dashoffset:1;transition:stroke-dashoffset .12s linear}
@media (prefers-reduced-motion:reduce){
  .js .depth{stroke-dashoffset:0!important;transition:none}
}

/* ===== HERO (home) ===== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  background:
    linear-gradient(180deg,
      var(--paper) 0%,
      var(--paper) 38%,
      #DAD9CC 46%,
      var(--tide) 52%,
      var(--deep) 70%,
      var(--deep-2) 100%);
}
.hero .topnav{position:absolute;top:0;left:0;right:0;z-index:3}
.hero__horizon{
  position:absolute;
  left:0;right:0;top:49%;
  height:1px;
  background:rgba(255,255,255,.35);
}
.hero__shimmer{
  position:absolute;left:0;right:0;top:49%;bottom:0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 30%);
  mix-blend-mode:soft-light;
  animation:tide 11s ease-in-out infinite;
}
@keyframes tide{
  0%,100%{opacity:.5;transform:translateY(0)}
  50%{opacity:.9;transform:translateY(3px)}
}

.hero__inner{
  position:relative;z-index:2;
  padding-bottom:9vh;
}
.hero h1{
  color:var(--paper);
  font-size:clamp(2.8rem,7vw,6.2rem);
  max-width:15ch;
  text-shadow:0 1px 40px rgba(0,0,0,.25);
}
.hero h1 em{font-style:italic;color:var(--mist)}
.hero__sub{
  margin-top:26px;
  color:rgba(240,235,225,.8);
  font-size:1.02rem;
  max-width:46ch;
  font-weight:300;
}

/* fade-up on load */
.rise{opacity:0;transform:translateY(22px);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.rise.d1{animation-delay:.15s}
.rise.d2{animation-delay:.38s}
@keyframes rise{to{opacity:1;transform:none}}

/* ===== inner-page head ===== */
.page-head{padding:clamp(64px,11vh,140px) 0 clamp(36px,6vh,64px)}
.page-head .eyebrow{display:block;margin-bottom:26px}
.page-head h1{font-size:clamp(2.5rem,6vw,4.8rem);max-width:17ch}
.page-head h1 em{font-style:italic;color:var(--tide)}
.page-head .intro{
  margin-top:28px;font-size:1.12rem;max-width:56ch;color:#3a423f;
}

/* ===== SECTIONS ===== */
section{padding:clamp(80px,11vh,150px) 0}

.lead .eyebrow{display:block;margin-bottom:34px}
.lead p{
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
  font-size:clamp(1.7rem,3.3vw,2.7rem);
  line-height:1.34;
  max-width:24ch;
  color:var(--ink);
}
.lead p + p{margin-top:0}

/* dark content section (reused for "the edge", "how we work", etc.) */
.thesis{background:var(--deep);color:var(--paper)}
.thesis .eyebrow{color:var(--tide)}
.thesis .grid{
  display:grid;grid-template-columns:1fr 1.25fr;gap:64px;align-items:start;
}
.thesis h2{
  font-size:clamp(2.1rem,4.4vw,3.5rem);
  color:var(--paper);
  max-width:14ch;
}
.thesis h2 em{font-style:italic;color:var(--tide)}
.thesis .body p{color:rgba(240,235,225,.82);font-size:1.06rem;max-width:52ch}
.thesis .body p + p{margin-top:22px}

.edges{
  margin-top:46px;
  display:flex;flex-wrap:wrap;gap:10px;
}
.edges span{
  font-family:'Inter',sans-serif;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist);
  border:1px solid rgba(240,235,225,.28);
  border-radius:999px;
  padding:9px 18px;
}

/* living */
.living .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center}
.living h2{font-size:clamp(2.1rem,4.4vw,3.5rem);max-width:15ch}
.living h2 em{font-style:italic;color:var(--tide)}
.living .body p{font-size:1.06rem;max-width:52ch;color:#3a423f}
.living .body p + p{margin-top:22px}
.living .figure{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:
    linear-gradient(180deg,var(--paper-soft) 0%,var(--paper-soft) 42%,var(--tide) 50%,var(--deep) 80%,var(--deep-2) 100%);
}
.figure__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  filter:saturate(.92) contrast(1.02);
}
.living .figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,46,42,0) 42%,rgba(12,33,30,.34) 100%);
  mix-blend-mode:multiply;
}
.figure__hint{
  position:absolute;left:0;right:0;bottom:0;z-index:2;display:none;
  font-family:'Inter',sans-serif;font-size:.68rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(240,235,225,.82);
  padding:16px;text-align:center;
}
.figure--empty .figure__hint{display:block}

/* structure / independence */
.structure{background:var(--mist)}
.structure .grid{display:grid;grid-template-columns:1fr 1.25fr;gap:64px;align-items:start}
.structure h2{font-size:clamp(1.9rem,4vw,3rem);max-width:13ch}
.structure .body p{font-size:1.06rem;max-width:52ch;color:#2f3633}
.structure .body p + p{margin-top:22px}

/* conservation — focus grid */
.section-head{max-width:60ch}
.section-head .eyebrow{display:block;margin-bottom:22px}
.section-head h2{font-size:clamp(2rem,4.2vw,3.2rem);max-width:18ch}
.section-head h2 em{font-style:italic;color:var(--tide)}
.focus-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:44px 48px;margin-top:56px;
}
.focus-item{border-top:1px solid rgba(139,130,116,.3);padding-top:20px}
.focus-item h3{font-size:1.5rem;margin-bottom:10px}
.focus-item p{font-size:.98rem;color:#3a423f;max-width:36ch}
@media (max-width:820px){.focus-grid{grid-template-columns:1fr;gap:30px}}

/* conservation — how we work steps (on dark) */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:42px 56px;margin-top:50px}
.step{padding-top:22px;border-top:1px solid rgba(240,235,225,.24)}
.step .n{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--tide);letter-spacing:.1em}
.step h3{font-size:1.7rem;margin:6px 0 12px;color:var(--paper)}
.step p{font-size:1rem;color:rgba(240,235,225,.82);max-width:44ch}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:32px}}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:10px;align-items:start}
.contact-block + .contact-block{}
.contact-block .eyebrow{display:block;margin-bottom:14px}
.contact-block a.email{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(1.5rem,3vw,2.1rem);color:var(--ink);text-decoration:none;
  border-bottom:1px solid rgba(139,130,116,.5);transition:border-color .2s;
}
.contact-block a.email:hover{border-color:var(--ink)}
.contact-block p{color:#3a423f;font-size:1.02rem;max-width:40ch;margin-top:6px}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:36px}}

/* closing */
.closing{background:var(--deep);color:var(--paper);text-align:center}
.closing p{
  font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;
  font-size:clamp(2rem,5vw,3.6rem);line-height:1.25;
  max-width:18ch;margin:0 auto;color:var(--mist);
}

footer{background:var(--deep-2);color:rgba(240,235,225,.62);padding:60px 0 70px}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:flex-end}
footer .mark{font-family:'Cormorant Garamond',serif;font-size:1.3rem;letter-spacing:.42em;text-transform:uppercase;color:var(--paper);padding-left:.42em;text-decoration:none;display:inline-block}
footer small{font-size:.78rem;letter-spacing:.04em;line-height:1.9;display:block}
footer a{color:var(--mist);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
footer a:hover{border-color:var(--mist)}

a:focus-visible,span:focus-visible{outline:2px solid var(--tide);outline-offset:3px}

@media (max-width:820px){
  .wrap{padding-left:22px;padding-right:22px}
  .topnav{padding:20px 22px;flex-wrap:wrap;gap:12px 24px}
  .navlinks{gap:22px}
  .thesis .grid,.living .grid,.structure .grid{grid-template-columns:1fr;gap:36px}
  .living .figure{order:-1;aspect-ratio:16/10}
  footer .row{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
  .hero__shimmer{animation:none}
  html{scroll-behavior:auto}
}