:root{
  --sand:#F2EDE4; --paper:#FAF8F4; --ink:#1C1B19; --drift:#6E655A; --body:#4A443C;
  --line:#CFC6B8; --lagoon:#2F6F73; --lagoon-deep:#245A5E; --mist:#9CC6C4; --muted:#B8AFA2;
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter:clamp(20px, 5vw, 64px);
  --pad:clamp(20px, 5vw, 64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible{outline:2px solid var(--lagoon);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
p{margin:0}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--drift)}
.mark{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

/* nav */
.nav{background:var(--ink);color:var(--sand);display:flex;align-items:center;gap:32px;padding:22px var(--pad);flex-wrap:wrap}
.nav .brand{margin-right:auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--sand)}
.brand .mark{width:44px;height:23px;stroke-width:6}
.brand span{font-size:24px;font-weight:500;letter-spacing:-.03em}
.nav-links{display:flex;align-items:center;gap:32px;font-size:15px}
.nav-links a{text-decoration:none;color:var(--sand)}
.nav-links a[aria-current="page"]{border-bottom:1px solid var(--sand);padding-bottom:2px}
.nav-links a:hover{color:var(--mist)}

.btn{display:inline-block;text-decoration:none;border-radius:999px;font-weight:500;padding:15px 28px;font-size:16px;white-space:nowrap}
.btn-light{background:var(--sand);color:var(--ink)}
.btn-lagoon{background:var(--lagoon);color:var(--paper)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn:hover{opacity:.9}
.nav .btn{padding:12px 22px;font-size:15px;color:var(--ink)}
.textlink{color:var(--ink);font-size:16px}
.textlink:hover{color:var(--lagoon)}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:640px}
.hero-copy{padding:80px var(--gutter) 80px var(--pad);display:flex;flex-direction:column;justify-content:center;gap:26px}
.hero h1{font-size:clamp(48px,6vw,80px);line-height:.98;letter-spacing:-.01em}
.hero-copy p{font-size:19px;line-height:1.6;color:var(--body);max-width:30em}
.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero-img{position:relative;overflow:hidden;background:var(--lagoon-deep);min-height:420px}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%}

/* section heads */
.section{padding-top:112px;padding-bottom:112px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:56px}
.head h2{font-size:clamp(40px,5vw,56px);line-height:1}
.head p{font-size:17px;color:var(--body);max-width:26em;line-height:1.5}

/* steps */
.sand{background:var(--sand)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.step{border-top:1px solid var(--ink);padding-top:22px;display:flex;flex-direction:column;gap:12px}
.step .n{font-size:12px;letter-spacing:.22em;color:var(--drift)}
.step h3{font-family:var(--sans);font-size:22px;font-weight:500}
.step p{font-size:15px;line-height:1.6;color:var(--body)}
.after{margin-top:40px}

/* finds */
.finds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.find{text-decoration:none;display:flex;flex-direction:column;gap:16px}
.find .photo{height:440px;position:relative;overflow:hidden;background-size:cover;background-position:center;color:var(--paper);display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.find .photo::before{content:"";position:absolute;inset:40% 0 0 0;background:linear-gradient(180deg,rgba(28,27,25,0),rgba(28,27,25,.55))}
.find .place{position:relative;font-family:var(--serif);font-size:64px;line-height:.9;letter-spacing:-.03em}
.find .where{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--drift)}
.find .hook{font-family:var(--serif);font-size:28px;line-height:1.15}
.find:hover .hook{color:var(--lagoon)}
.tone-moss{background-color:#3F4A3A}.tone-teak{background-color:#7A4A2C}.tone-forest{background-color:#2E4A3E}

/* story teaser */
.story{display:grid;grid-template-columns:1fr 1fr;background:var(--sand)}
.portrait{position:relative;min-height:560px;background:var(--ink);display:flex;align-items:center;justify-content:center;color:var(--sand)}
.photo-layer{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:42% 72%}
.portrait .mark{width:160px;height:82px;stroke-width:3;opacity:.9}
.story-copy{padding:96px var(--pad) 96px var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:24px}
.story-copy h2{font-size:40px;line-height:1.15}
.story-copy p{font-size:17px;line-height:1.65;color:var(--body)}

/* band + footer */
.band{background:var(--lagoon);color:var(--paper);padding:96px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.band h2{font-size:clamp(40px,5.5vw,72px);line-height:1}
.footer{background:var(--ink);color:var(--sand);padding:56px var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.footer .mark{width:80px;height:41px;stroke-width:4.5}
.footer .tag{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--mist);margin-top:18px}
.footer-links{display:flex;gap:28px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--sand)}

/* offerings */
.page-head{padding-top:96px;padding-bottom:56px}
.page-head h1{font-size:clamp(52px,7vw,84px);line-height:.96}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tier{background:#fff;border:1px solid #E4DDD1;padding:32px 26px;display:flex;flex-direction:column;gap:20px}
.tier .top{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.22em;color:var(--body)}
.tier h2{font-size:34px;line-height:1}
.tier .sum{font-size:15px;line-height:1.5;color:var(--body);margin-top:-8px}
.tier ul{list-style:none;margin:0;padding:0}
.tier li{display:flex;gap:10px;padding:10px 0;border-top:1px solid #E4DDD1;font-size:15px;line-height:1.45}
.tier li::before{content:"—";color:var(--lagoon)}
.tier.dark{background:var(--ink);color:var(--sand);border-color:#4A473F}
.tier.dark .top,.tier.dark .sum{color:#D8D1C6}
.tier.dark li{border-color:#4A473F}
.tier.dark li::before{color:var(--mist)}
.pill{font-size:10px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--mist);color:var(--mist);border-radius:999px;padding:4px 9px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
th{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;padding:12px 8px;width:150px}
th:first-child{width:auto}
td{padding:14px 8px;border-top:1px solid var(--line);font-size:15px;text-align:center;color:var(--body)}
td:first-child{text-align:left;color:var(--ink);padding-left:0}
td.yes{color:var(--lagoon)}

/* about */
.about-hero{display:grid;grid-template-columns:1fr 1fr;min-height:620px}
.about-hero .hero-copy h1{font-size:clamp(56px,7.5vw,96px);line-height:.95}
.stats{background:var(--ink);color:var(--sand);padding:48px var(--pad);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.stat .num{font-family:var(--serif);font-size:60px;line-height:.9;color:var(--mist)}
.stat .lbl{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:6px}
/* about story: label column + text column, aligned to the page grid */
.story-page{padding-top:64px;padding-bottom:96px}
.row{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:64px;padding:48px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row-body{max-width:720px;display:flex;flex-direction:column;gap:24px}
.row-body p{font-size:19px;line-height:1.7;color:#3A362F}
.row-body p.pull{font-family:var(--serif);font-size:40px;line-height:1.12;color:var(--ink)}
.row-body p.statement{font-family:var(--serif);font-size:60px;line-height:1.02;color:var(--ink)}
.row-body p.statement.teal{color:var(--lagoon)}
.statement .soft{color:var(--drift)}
.row-body p.tagline{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--lagoon);line-height:1.2}
.finds-list{list-style:none;margin:0;padding:0}
.finds-list li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:16px 0;border-top:1px solid var(--line)}
.finds-list span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--lagoon);padding-top:5px}
.row-body .finds-list p{font-size:18px;line-height:1.5;color:var(--ink)}
.photo-wide{margin:24px 0 48px}
.photo-wide img{width:100%;height:clamp(320px,45vw,600px);object-fit:cover;object-position:58% 55%}
.photo-wide figcaption{font-size:14px;color:var(--body);padding-top:14px;margin-left:calc(200px + 64px)}

/* responsive */
@media (max-width:1000px){
  .steps,.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finds{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav{gap:16px}
  .nav .btn{order:2}
  .nav-links{order:3;width:100%;justify-content:space-between;gap:12px;font-size:14px;border-top:1px solid #3A3833;padding-top:14px}
  .nav-links a{white-space:nowrap}
  .nav .btn{padding:10px 16px;font-size:14px}
  .hero,.about-hero,.story{grid-template-columns:1fr}
  .hero{min-height:0}
  .hero-copy{padding:56px var(--pad)}
  .hero-img{min-height:360px}
  .about-hero .hero-copy{order:1}
  .steps,.tiers,.finds{grid-template-columns:1fr}
  .find .photo{height:360px}
  .section{padding-top:72px;padding-bottom:72px}
  .portrait{min-height:360px}
  .story-copy{padding:56px var(--pad)}
  .story-copy h2{font-size:32px}
  .stats{grid-template-columns:1fr;gap:24px}
  .band{padding:64px var(--pad)}
  .row{grid-template-columns:1fr;row-gap:16px;padding:36px 0}
  .row-body p.pull{font-size:30px}
  .row-body p.statement{font-size:42px}
  .finds-list li{grid-template-columns:1fr;gap:4px}
  .photo-wide figcaption{margin-left:0}
}

/* consistent small labels (wins over section paragraph styles) */
main p.label{font-family:var(--sans);font-size:12px;line-height:1.5;letter-spacing:.22em;text-transform:uppercase;color:var(--drift);max-width:none}

/* logo mark draws itself */
.draw path{stroke-dasharray:1;stroke-dashoffset:1}
.draw.on path{animation:lt-draw 1.6s cubic-bezier(.65,0,.35,1) .2s forwards}
@keyframes lt-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.draw path{stroke-dasharray:none;stroke-dashoffset:0}.draw.on path{animation:none}}

/* footer lockup: mark draws, then the name and tagline appear */
.foot-brand{display:flex;align-items:center;gap:16px}
.foot-word{font-size:32px;font-weight:500;letter-spacing:-.03em;line-height:1}
.fade{opacity:0;transition:opacity .8s ease 1.5s}
.footer.on .fade{opacity:1}
.footer .tag.fade{transition-delay:1.9s}
@media (prefers-reduced-motion: reduce){.fade{opacity:1;transition:none}}

/* portrait placeholder lockup: mark draws, then the name appears */
.portrait-brand{display:flex;align-items:center;gap:22px}
.portrait-word{font-size:48px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--sand)}
.portrait.on .fade{opacity:1}
@media (max-width:760px){.portrait .mark{width:110px;height:56px}.portrait-word{font-size:34px}}

/* about photo: shown whole, never cropped */
.about-hero{grid-template-columns:minmax(0,1fr) auto;min-height:0}
.about-photo{margin:0;background:var(--paper)}
.about-photo img{display:block;height:min(82vh,780px);width:auto;max-width:none}
@media (max-width:760px){
  .about-hero{grid-template-columns:1fr}
  .about-photo img{width:100%;height:auto}
}

/* about page: centered compositions */
.about-hero{display:flex;justify-content:center;align-items:center;gap:clamp(40px,6vw,96px);padding:72px var(--pad)}
.about-hero .hero-copy{padding:0;flex:0 1 520px}
.about-photo img{height:min(72vh,680px)}
.stats .stat{text-align:center}
.story-page{max-width:calc(984px + 2 * var(--pad));margin-left:auto;margin-right:auto}
@media (max-width:760px){
  .about-hero{flex-direction:column;align-items:stretch;padding:48px var(--pad);gap:32px}
  .about-hero .hero-copy{flex:none}
  .about-photo img{width:100%;height:auto}
}
.about-hero .hero-copy{flex:0 0 auto;max-width:560px}
.about-hero h1{white-space:nowrap}
@media (max-width:760px){.about-hero h1{white-space:normal}.about-hero .hero-copy{max-width:none}}
@media (max-width:1200px){
  .about-hero h1{white-space:normal}
  .about-hero .hero-copy{flex:0 1 480px;min-width:0}
  .about-photo{flex:0 1 auto;min-width:0}
  .about-photo img{height:auto;max-height:min(72vh,680px);width:100%;object-fit:contain}
}