:root{
  color-scheme: light only;
  --paper:#FBF8F2; --paper-alt:#F2EBDC;
  --ink:#26221C; --ink-soft:#7A7364;
  --sage:#5C6B4F; --sage-deep:#3F4A34; --sage-pale:#DCE2D3;
  --brass:#B08A4E; --clay:#C48360;
  --line: rgba(38,34,28,0.11);
  --max:1240px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.68; -webkit-font-smoothing:antialiased; }
.wrap{max-width:var(--max); margin:0 auto; padding:0 48px;}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 48px;}
@media(max-width:680px){ .wrap,.wrap-narrow{padding:0 22px;} }
h1,h2,h3{ font-family:'Fraunces',serif; font-weight:400; letter-spacing:-0.015em; }
a{color:inherit; text-decoration:none;}
img{display:block; width:100%; height:100%; object-fit:cover;}
.eyebrow{ font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--sage); }
.cap{ font-size:12px; font-style:italic; color:var(--ink-soft); margin-top:12px; }

/* NAV */
.nav{ position:sticky; top:0; z-index:80; background:rgba(251,248,242,0.93); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:76px; flex-wrap:wrap; gap:10px 0; padding-top:12px; padding-bottom:12px; }
.nav-name{ font-family:'Fraunces',serif; font-size:20px; font-weight:500; line-height:1.05; display:flex; flex-direction:column; }
.nav-mark{ font-family:'Inter',sans-serif; font-size:9.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--sage); margin-top:4px; }
.nav-links{ display:flex; flex-wrap:wrap; gap:8px 28px; list-style:none; }
.nav-links a{ font-size:13px; font-weight:500; opacity:0.72; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ opacity:1; }
.nav-links a[aria-current="page"]{ border-bottom:1px solid var(--sage); }
.nav-cta{ font-size:12.5px; font-weight:600; padding:11px 20px; border:1px solid var(--ink); border-radius:2px; }
.nav-cta:hover{ background:var(--ink); color:var(--paper); }

section{ padding:104px 0; }
.section-head{ margin-bottom:48px; }
.section-head .eyebrow{ display:block; margin-bottom:12px; }
.section-head h2{ font-size:clamp(27px,3.4vw,40px); line-height:1.18; }
.section-head h2 em{ font-style:italic; color:var(--sage); }

/* HERO */
.hero{ padding:68px 0 0; }
.hero-top{ max-width:760px; }
.hero-top .eyebrow{ display:block; margin-bottom:20px; }
.hero-split{ display:grid; grid-template-columns:1fr; gap:36px; align-items:end; }
@media(min-width:920px){ .hero-split{ grid-template-columns:1fr 240px; gap:56px; } }
/* Portrait shape: border-radius:50% = circle (matches Instagram). Set to 0 for a square plate. */
.hero-portrait{ width:100%; max-width:210px; aspect-ratio:1/1; overflow:hidden; background:#E4D9C2; border-radius:50%; }
@media(min-width:920px){ .hero-portrait{ max-width:240px; } }
.hero-portrait-cap{ font-size:12px; color:var(--ink-soft); margin-top:14px; letter-spacing:0.02em; }
.hero h1{ font-size:clamp(38px,6.2vw,76px); line-height:1.05; margin-bottom:24px; }
.hero h1 em{ font-style:italic; color:var(--sage); }
.hero-sub{ font-size:17.5px; color:var(--ink-soft); max-width:56ch; }
.hero-art{ height:clamp(340px,52vw,580px); margin-top:56px; overflow:hidden; background:#E4D9C2; }

/* PAGE HEADER (interior pages) */
.pagehead{ padding:76px 0 0; }
.pagehead .eyebrow{ display:block; margin-bottom:16px; }
.pagehead h1{ font-size:clamp(36px,5.4vw,66px); line-height:1.06; margin-bottom:22px; }
.pagehead h1 em{ font-style:italic; color:var(--sage); }
.pagehead .sub{ font-size:17px; color:var(--ink-soft); max-width:58ch; }
.backlink{ font-size:12.5px; color:var(--ink-soft); display:inline-block; margin-bottom:26px; }
.backlink:hover{ color:var(--ink); }

/* PROOF */
.proof{ background:var(--sage-deep); color:var(--paper); padding:58px 0; }
.proof-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:36px 24px; }
@media(min-width:800px){ .proof-grid{ grid-template-columns:repeat(4,1fr); } }
.stat .n{ font-family:'Fraunces',serif; font-size:clamp(32px,4.2vw,48px); line-height:1; display:block; margin-bottom:10px; }
.stat .l{ font-size:12.5px; opacity:0.72; line-height:1.45; display:block; }

/* STORY */
.story{ background:var(--paper-alt); }
.story .lede{ font-family:'Fraunces',serif; font-size:clamp(21px,2.7vw,29px); line-height:1.42; max-width:30ch; }
.story-grid{ display:grid; grid-template-columns:1fr; gap:34px; }
@media(min-width:880px){ .story-grid{ grid-template-columns:0.85fr 1.15fr; gap:72px; } }
.story p{ font-size:16px; color:var(--ink-soft); margin-bottom:18px; max-width:58ch; }
.story p em{ color:var(--ink); font-style:italic; }

/* METHOD */
.method-grid{ display:grid; grid-template-columns:1fr; gap:44px; }
@media(min-width:820px){ .method-grid{ grid-template-columns:repeat(2,1fr); gap:64px; } }
.method h3{ font-size:22px; margin-bottom:14px; }
.method p{ font-size:15.5px; color:var(--ink-soft); margin-bottom:14px; }
.method .rule{ width:34px; height:2px; background:var(--clay); margin-bottom:20px; }

/* PROJECT TEASERS */
.projects{ display:grid; grid-template-columns:1fr; gap:36px; }
@media(min-width:820px){ .projects{ grid-template-columns:repeat(2,1fr); gap:32px; } }
.pcard{ display:block; }
.pcard .shot{ aspect-ratio:4/3; overflow:hidden; background:#E4D9C2; margin-bottom:20px; }
.pcard .shot img{ transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.pcard:hover .shot img{ transform:scale(1.03); }
.pcard .status{ display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage-deep); background:var(--sage-pale); padding:4px 11px; border-radius:20px; margin-bottom:12px; }
.pcard h3{ font-size:26px; margin-bottom:8px; }
.pcard p{ font-size:15px; color:var(--ink-soft); max-width:46ch; margin-bottom:12px; }
.pcard .go{ font-size:12.5px; font-weight:600; border-bottom:1px solid var(--ink); padding-bottom:2px; }

/* BEFORE / AFTER SLIDER */
.ba{ margin-bottom:58px; }
.ba-label{ display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.ba-label .t{ font-size:13px; font-weight:500; }
.ba-label .line{ flex:1; height:1px; background:var(--line); }
.ba-label .hint{ font-size:11px; color:var(--ink-soft); letter-spacing:0.04em; }
.ba-frame{ position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; background:#E4D9C2; cursor:ew-resize; user-select:none; touch-action:none; }
.ba-frame img{ position:absolute; inset:0; }
.ba-after{ clip-path: inset(0 0 0 var(--pos,50%)); }
.ba-tag{ position:absolute; bottom:14px; z-index:3; font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; background:rgba(38,34,28,0.72); color:#FBF8F2; padding:5px 11px; border-radius:2px; pointer-events:none; }
.ba-tag.l{ left:14px; } .ba-tag.r{ right:14px; }
.ba-handle{ position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; background:var(--paper); z-index:4; pointer-events:none; box-shadow:0 0 0 1px rgba(38,34,28,0.18); }
.ba-grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:var(--paper); box-shadow:0 2px 10px rgba(38,34,28,0.28); display:flex; align-items:center; justify-content:center; gap:4px; }
.ba-grip i{ display:block; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.ba-grip i.a{ border-right:6px solid var(--ink); }
.ba-grip i.b{ border-left:6px solid var(--ink); }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:5; margin:0; }

/* SCOPE LIST */
.scope-label{ display:flex; align-items:baseline; gap:14px; margin-bottom:16px; }
.scope-label .line{ flex:1; height:1px; background:var(--line); }
.scope ul{ list-style:none; columns:1; }
@media(min-width:700px){ .scope ul{ columns:2; column-gap:56px; } }
.scope li{ font-size:14.5px; padding:11px 0; border-bottom:1px solid var(--line); break-inside:avoid; }
.scope-note{ margin-top:28px; font-family:'Fraunces',serif; font-style:italic; font-size:17px; max-width:54ch; }

/* NARRATIVE (garland story) */
.narrative{ max-width:62ch; }
.narrative p{ font-size:17px; margin-bottom:22px; }
.narrative p.beat{ font-family:'Fraunces',serif; font-style:italic; font-size:clamp(19px,2.3vw,25px); line-height:1.4; color:var(--sage-deep); margin:34px 0; }
.narrative p.small{ color:var(--ink-soft); font-size:16px; }

/* GALLERY */
.gal{ display:grid; grid-template-columns:1fr; gap:22px; }
@media(min-width:760px){ .gal{ grid-template-columns:repeat(6,1fr); gap:22px; } }
.gal figure{ background:#E4D9C2; }
.gal figure .f{ overflow:hidden; background:#E4D9C2; }
.gal figcaption{ font-size:12.5px; color:var(--ink-soft); margin-top:10px; font-style:italic; }
.g-wide{ grid-column: span 6; }
.g-half{ grid-column: span 3; }
.g-third{ grid-column: span 2; }
@media(max-width:759px){ .g-wide,.g-half,.g-third{ grid-column:auto; } }
.ar-43 .f{ aspect-ratio:4/3; }
.ar-34 .f{ aspect-ratio:3/4; }
.ar-11 .f{ aspect-ratio:1/1; }

/* FIT */
.fit{ background:var(--sage-deep); color:var(--paper); text-align:center; }
.fit .eyebrow{ color:var(--sage-pale); display:block; margin-bottom:22px; }
.fit p{ font-family:'Fraunces',serif; font-size:clamp(21px,2.9vw,32px); line-height:1.44; font-weight:300; }
.fit p + p{ margin-top:26px; }
.fit .no{ opacity:0.55; }
.fit .yes em{ font-style:italic; color:#E8D5A8; }

/* WORK */
.offers{ display:grid; grid-template-columns:1fr; gap:24px; }
@media(min-width:860px){ .offers{ grid-template-columns:repeat(2,1fr); } }
.offer{ border:1px solid var(--line); padding:44px 40px; border-radius:4px; display:flex; flex-direction:column; }
.offer.dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.offer.dark .eyebrow{ color:var(--sage-pale); }
.offer .eyebrow{ display:block; margin-bottom:14px; }
.offer h3{ font-size:25px; margin-bottom:12px; }
.offer > p{ font-size:15px; color:var(--ink-soft); margin-bottom:26px; max-width:46ch; }
.offer.dark > p{ color:rgba(251,248,242,0.78); }
.spec{ list-style:none; margin-bottom:30px; }
.spec li{ font-size:14px; padding:11px 0; border-bottom:1px solid var(--line); }
.offer.dark .spec li{ border-color:rgba(251,248,242,0.16); }
.spec .k{ color:var(--ink); }
.offer.dark .spec .k{ color:rgba(251,248,242,0.88); }
.offer .foot{ margin-top:auto; }
.btn{ font-size:13px; font-weight:600; padding:14px 26px; display:inline-block; border-radius:2px; transition:opacity .18s ease; }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ opacity:0.85; }
.btn-pale{ background:var(--paper); color:var(--ink); }
.btn-pale:hover{ opacity:0.88; }
.fineprint{ font-size:12.5px; color:var(--ink-soft); margin-top:14px; max-width:44ch; }
.offer.dark .fineprint{ color:rgba(251,248,242,0.6); }

/* NEXT / PREV */
.pagenav{ border-top:1px solid var(--line); padding:44px 0; }
.pagenav .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; align-items:center; }
.pagenav a{ font-size:15px; font-family:'Fraunces',serif; }
.pagenav a:hover{ color:var(--sage); }

.follow{ background:var(--clay); color:#2A1B12; text-align:center; padding:86px 0; }
.follow h2{ font-size:clamp(27px,4vw,44px); margin-bottom:16px; }
.follow p{ font-size:15px; margin-bottom:30px; opacity:0.82; }
.follow .btn-solid{ background:#2A1B12; }

footer{ padding:44px 0 32px; }
.foot-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px; padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.foot-col h4{ font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px; color:var(--ink-soft); }
.foot-col ul{ list-style:none; }
.foot-col li{ margin-bottom:9px; font-size:14px; }
.foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink-soft); }

.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .reveal{opacity:1;transform:none;transition:none;} .pcard .shot img{transition:none;} }
a:focus-visible, .ba-range:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; }