:root{
  color-scheme: light only;
  --paper:#FBF6EE; --paper-alt:#F0E5D4;
  --ink:#2B231C; --ink-soft:#7E7060;
  /* accent: olive-gold, taken from the stems in her block prints */
  --sage:#6F6B44; --sage-deep:#372E26; --sage-pale:#E2DAC4;
  --brass:#A98545; --clay:#C08A63;
  --plum:#8C6472;
  --forest:#3C463B;
  --line: rgba(38,34,28,0.11);
  --max:1240px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{
  scroll-behavior:smooth;
  color-scheme: light only;
  background-color:#FBF6EE;
}
body{
  background-color:#FBF6EE;
  color:#2B231C;
  font-family:'Inter',sans-serif; line-height:1.68;
  -webkit-font-smoothing:antialiased;
  forced-color-adjust:none;
}
.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(--plum); }

/* 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(--plum); }
.hero-sub{ font-size:17.5px; color:var(--ink-soft); max-width:56ch; }
.hero-art{ margin-top:56px; overflow:hidden; background:#E4D9C2; }
/* The hero matches the photograph's own ratio, so the framing is identical at
   every screen width. Anchored to the top, so the gable peak is always the
   top edge. Narrow screens tighten to 4:3, trimming the sides rather than the roof. */
.hero-art{ aspect-ratio:16/9; }
.hero-art img{ object-position:center top; }
@media(max-width:760px){ .hero-art{ aspect-ratio:4/3; } }

/* 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(--plum); }
.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; position:relative; overflow:hidden; }
.proof .wrap{ position:relative; z-index:2; }
.proof::before, .fit::before, .follow::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-repeat:repeat; background-size:110px 110px;
}
.proof::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'><g fill='%23FBF6EE'><circle cx='29' cy='11' r='1.7'/><circle cx='25.6' cy='13.5' r='1.7'/><circle cx='32.4' cy='13.5' r='1.7'/><circle cx='26.9' cy='17.4' r='1.7'/><circle cx='31.1' cy='17.4' r='1.7'/><circle cx='29' cy='14.4' r='1.5'/></g><g stroke='%23FBF6EE' stroke-width='1.05' fill='none' stroke-linecap='round'><path d='M29 19.4 L29 27'/><path d='M29 23.2 C25.8 22.6 24.7 21.1 24.3 19.4'/><path d='M29 24.4 C32.2 23.8 33.3 22.3 33.7 20.6'/></g><g fill='%23FBF6EE'><circle cx='81' cy='64' r='1.7'/><circle cx='77.6' cy='66.5' r='1.7'/><circle cx='84.4' cy='66.5' r='1.7'/><circle cx='78.9' cy='70.4' r='1.7'/><circle cx='83.1' cy='70.4' r='1.7'/><circle cx='81' cy='67.4' r='1.5'/></g><g stroke='%23FBF6EE' stroke-width='1.05' fill='none' stroke-linecap='round'><path d='M81 72.4 L81 80'/><path d='M81 76.2 C77.8 75.6 76.7 74.1 76.3 72.4'/><path d='M81 77.4 C84.2 76.8 85.3 75.3 85.7 73.6'/></g></svg>"); opacity:0.07; }
.fit::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'><g fill='%23FBF6EE'><circle cx='29' cy='11' r='1.7'/><circle cx='25.6' cy='13.5' r='1.7'/><circle cx='32.4' cy='13.5' r='1.7'/><circle cx='26.9' cy='17.4' r='1.7'/><circle cx='31.1' cy='17.4' r='1.7'/><circle cx='29' cy='14.4' r='1.5'/></g><g stroke='%23FBF6EE' stroke-width='1.05' fill='none' stroke-linecap='round'><path d='M29 19.4 L29 27'/><path d='M29 23.2 C25.8 22.6 24.7 21.1 24.3 19.4'/><path d='M29 24.4 C32.2 23.8 33.3 22.3 33.7 20.6'/></g><g fill='%23FBF6EE'><circle cx='81' cy='64' r='1.7'/><circle cx='77.6' cy='66.5' r='1.7'/><circle cx='84.4' cy='66.5' r='1.7'/><circle cx='78.9' cy='70.4' r='1.7'/><circle cx='83.1' cy='70.4' r='1.7'/><circle cx='81' cy='67.4' r='1.5'/></g><g stroke='%23FBF6EE' stroke-width='1.05' fill='none' stroke-linecap='round'><path d='M81 72.4 L81 80'/><path d='M81 76.2 C77.8 75.6 76.7 74.1 76.3 72.4'/><path d='M81 77.4 C84.2 76.8 85.3 75.3 85.7 73.6'/></g></svg>"); opacity:0.06; }
.follow::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'><g fill='%232E1D13'><circle cx='29' cy='11' r='1.7'/><circle cx='25.6' cy='13.5' r='1.7'/><circle cx='32.4' cy='13.5' r='1.7'/><circle cx='26.9' cy='17.4' r='1.7'/><circle cx='31.1' cy='17.4' r='1.7'/><circle cx='29' cy='14.4' r='1.5'/></g><g stroke='%232E1D13' stroke-width='1.05' fill='none' stroke-linecap='round'><path d='M29 19.4 L29 27'/><path d='M29 23.2 C25.8 22.6 24.7 21.1 24.3 19.4'/><path d='M29 24.4 C32.2 23.8 33.3 22.3 33.7 20.6'/></g><g fill='%232E1D13'><circle cx='81' cy='64' r='1.7'/><circle cx='77.6' cy='66.5' r='1.7'/><circle cx='84.4' cy='66.5' r='1.7'/><circle cx='78.9' cy='70.4' r='1.7'/><circle cx='83.1' cy='70.4' r='1.7'/><circle cx='81' cy='67.4' r='1.5'/></g><g stroke='%232E1D13' stroke-width='1.05' fill='none' stroke-linecap='round'><path d='M81 72.4 L81 80'/><path d='M81 76.2 C77.8 75.6 76.7 74.1 76.3 72.4'/><path d='M81 77.4 C84.2 76.8 85.3 75.3 85.7 73.6'/></g></svg>"); opacity:0.09; }
.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; align-items:start; } }
.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(--brass); 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 (project story) */
.narrative{ max-width:62ch; display:flow-root; }
.narrative::after{ content:""; display:block; clear:both; }
.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(--plum); 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; position:relative; overflow:hidden; }
.fit .wrap-narrow{ position:relative; z-index:2; }
.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:#2E1D13; text-align:center; padding:86px 0; position:relative; overflow:hidden; }
.follow .wrap{ position:relative; z-index:2; }
.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); }

.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .js .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; }


/* Some in-app browsers (Instagram, Messenger, Gmail) force a dark filter on
   pages that do not state their colors under a dark preference. Restating
   the same light values here keeps the site readable inside those apps. */
@media (prefers-color-scheme: dark){
  html, body{ background-color:#FBF6EE !important; color:#2B231C !important; }
  :root{
    --paper:#FBF6EE; --paper-alt:#F0E5D4;
    --ink:#2B231C; --ink-soft:#7E7060;
    --sage:#6F6B44; --sage-deep:#372E26; --sage-pale:#E2DAC4;
    --brass:#A98545; --clay:#C08A63; --plum:#8C6472;
    --line: rgba(43,35,28,0.11);
  }
  .nav{ background:rgba(251,246,238,0.93) !important; }
  .story, #portfolio, .case, .pull{ background-color:#F0E5D4 !important; }
  .proof, .fit{ background-color:#372E26 !important; color:#FBF6EE !important; }
  .follow{ background-color:#C08A63 !important; color:#2E1D13 !important; }
  .offer.dark{ background-color:#2B231C !important; color:#FBF6EE !important; }
  img{ filter:none !important; }
}




/* ---------- TEXTURE ----------
   One motif only: a block-print buti, spaced wide and kept faint.
   No line grids, no busy borders. It should register as fabric,
   never as a pattern competing with the type. */

.tex{ position:relative; }
.tex > .wrap, .tex > .wrap-narrow{ position:relative; z-index:2; }
.tex::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'><g fill='%236F6B44'><circle cx='28.6' cy='11.0' r='1.7'/><circle cx='25.200000000000003' cy='13.5' r='1.7'/><circle cx='32.0' cy='13.5' r='1.7'/><circle cx='26.5' cy='17.4' r='1.7'/><circle cx='30.700000000000003' cy='17.4' r='1.7'/><circle cx='28.6' cy='14.4' r='1.5'/></g><g stroke='%236F6B44' stroke-width='1.05' fill='none' stroke-linecap='round'><path d='M28.6 19.4 L28.6 27.0'/><path d='M28.6 23.2 C25.400000000000002 22.6 24.3 21.1 23.900000000000002 19.4'/><path d='M28.6 24.4 C31.8 23.8 32.9 22.3 33.300000000000004 20.6'/></g><g fill='%236F6B44'><circle cx='81.4' cy='63.8' r='1.7'/><circle cx='78.0' cy='66.3' r='1.7'/><circle cx='84.80000000000001' cy='66.3' r='1.7'/><circle cx='79.30000000000001' cy='70.2' r='1.7'/><circle cx='83.5' cy='70.2' r='1.7'/><circle cx='81.4' cy='67.2' r='1.5'/></g><g stroke='%236F6B44' stroke-width='1.05' fill='none' stroke-linecap='round'><path d='M81.4 72.2 L81.4 79.8'/><path d='M81.4 76.0 C78.2 75.39999999999999 77.10000000000001 73.89999999999999 76.7 72.2'/><path d='M81.4 77.2 C84.60000000000001 76.6 85.7 75.1 86.10000000000001 73.39999999999999'/></g></svg>");
  background-size:110px 110px; background-repeat:repeat;
  opacity:0.05;
}
/* a touch stronger on the pale cream, which otherwise swallows it */
.tex.on-paper::before{ opacity:0.065; }

/* a plain hairline under section headings, warm rather than grey */
.section-head{
  padding-bottom:24px;
  border-bottom:1px solid rgba(169,133,69,0.32);
}

/* the divider above the footer: one quiet rule, nothing more */
.selvedge{
  height:1px;
  max-width:var(--max);
  margin:0 auto;
  background:rgba(169,133,69,0.3);
}

/* ---------- MOBILE NAV ----------
   The stacked name, four links and button were eating most of a phone
   screen on every page. Tighten it up. */
@media(max-width:760px){
  .nav .wrap{ min-height:0; padding-top:12px; padding-bottom:12px; gap:10px 0; }
  .nav-name{ font-size:17px; }
  .nav-mark{ font-size:8.5px; letter-spacing:0.15em; }
  .nav-links{ order:3; width:100%; gap:4px 20px; }
  .nav-links a{ font-size:12.5px; }
  .nav-cta{ font-size:11.5px; padding:9px 15px; }
}
@media(max-width:420px){
  .nav-cta{ display:none; }
}


/* ---------- STORY: break the long column ---------- */
.story-grid + .story-figure{ margin:54px 0 52px; }
.story-figure{ margin:54px 0 52px; }
.story-figure .f{ aspect-ratio:16/9; overflow:hidden; background:#E4D9C2; }
@media(max-width:760px){ .story-figure .f{ aspect-ratio:4/3; } }
.story-figure figcaption{
  font-size:12.5px; font-style:italic; color:var(--ink-soft); margin-top:13px;
}
.story-quote{
  font-family:'Fraunces',serif; font-style:italic; font-weight:300;
  font-size:clamp(26px,3.8vw,42px); line-height:1.28;
  color:var(--plum); max-width:16ch; margin:0;
}
@media(max-width:880px){
  .story-quote{ margin-bottom:6px; }
}


/* ---------- FULL BLEED IMAGES ----------
   Photographs run edge to edge. The color on this site lives in her
   rooms, so the rooms get the whole screen. */
html, body{ overflow-x:hidden; }
.bleed{
  width:100vw;
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
}

/* ---------- FOREST BAND ----------
   Green taken from the study walls, used as a ground for one section. */
.band-forest{
  background:var(--forest);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.band-forest > .wrap{ position:relative; z-index:2; }
.band-forest .eyebrow{ color:#C9CFB8; }
.band-forest .section-head{ border-bottom-color:rgba(251,246,238,0.22); }
.band-forest .section-head h2{ color:var(--paper); }
.band-forest .section-head h2 em{ color:#DCC3A0; }
.band-forest .method h3{ color:var(--paper); }
.band-forest .method p{ color:rgba(251,246,238,0.76); }
.band-forest .method .rule{ background:#DCC3A0; }

/* ---------- OFFER CARDS ----------
   Two grounds instead of one, so the section carries color of its own. */
.offer{ background:var(--paper-alt); border-color:transparent; }
.offer.dark{ background:var(--forest); border-color:var(--forest); }
.offer.dark .eyebrow{ color:#C9CFB8; }
.offer .spec li{ border-bottom-color:rgba(43,35,28,0.14); }
.offer.dark .spec li{ border-bottom-color:rgba(251,246,238,0.18); }
.offer.dark .btn-pale{ background:var(--paper); color:var(--forest); }

.band-forest::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'><g fill='%23FBF6EE'><circle cx='29' cy='11' r='1.7'/><circle cx='25.6' cy='13.5' r='1.7'/><circle cx='32.4' cy='13.5' r='1.7'/><circle cx='26.9' cy='17.4' r='1.7'/><circle cx='31.1' cy='17.4' r='1.7'/><circle cx='29' cy='14.4' r='1.5'/></g><g stroke='%23FBF6EE' stroke-width='1.05' fill='none' stroke-linecap='round'><path d='M29 19.4 L29 27'/><path d='M29 23.2 C25.8 22.6 24.7 21.1 24.3 19.4'/><path d='M29 24.4 C32.2 23.8 33.3 22.3 33.7 20.6'/></g><g fill='%23FBF6EE'><circle cx='81' cy='64' r='1.7'/><circle cx='77.6' cy='66.5' r='1.7'/><circle cx='84.4' cy='66.5' r='1.7'/><circle cx='78.9' cy='70.4' r='1.7'/><circle cx='83.1' cy='70.4' r='1.7'/><circle cx='81' cy='67.4' r='1.5'/></g><g stroke='%23FBF6EE' stroke-width='1.05' fill='none' stroke-linecap='round'><path d='M81 72.4 L81 80'/><path d='M81 76.2 C77.8 75.6 76.7 74.1 76.3 72.4'/><path d='M81 77.4 C84.2 76.8 85.3 75.3 85.7 73.6'/></g></svg>");
  background-size:110px 110px; background-repeat:repeat; opacity:0.06;
}




/* ---------- DESIGN SERVICES PAGE ---------- */
.split{ display:grid; grid-template-columns:1fr; gap:44px; }
@media(min-width:880px){ .split{ grid-template-columns:1fr 1fr; gap:72px; } }
.body{ font-size:16.5px; color:var(--ink-soft); margin-bottom:20px; max-width:62ch; }
.beat-line{
  font-family:'Fraunces',serif; font-style:italic; font-weight:300;
  font-size:clamp(19px,2.4vw,25px); line-height:1.42;
  color:var(--plum); max-width:34ch; margin-top:34px;
}

/* spec strip */
.specstrip{ background:var(--ink); color:var(--paper); padding:52px 0; }
.specs{ display:grid; grid-template-columns:repeat(2,1fr); gap:34px 24px; }
@media(min-width:860px){ .specs{ grid-template-columns:repeat(4,1fr); } }
.spec-item .k{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:0.15em;
  text-transform:uppercase; color:#C9CFB8; margin-bottom:10px;
}
.spec-item .v{
  display:block; font-family:'Fraunces',serif; font-size:clamp(21px,2.4vw,27px);
  line-height:1.15; margin-bottom:8px;
}
.spec-item .n{ display:block; font-size:12.5px; color:rgba(251,246,238,0.6); line-height:1.5; }

/* service tiers */
.tiers{ display:grid; grid-template-columns:1fr; gap:24px; }
@media(min-width:900px){ .tiers{ grid-template-columns:repeat(3,1fr); } }
.tier{
  background:var(--paper); padding:38px 34px 34px; border-radius:3px;
  display:flex; flex-direction:column; position:relative;
}
.tier.feature{ background:var(--forest); color:var(--paper); }
.tier-n{
  display:block; font-family:'Fraunces',serif; font-size:15px;
  color:var(--brass); margin-bottom:16px;
}
.tier.feature .tier-n{ color:#DCC3A0; }
.tier h3{ font-size:25px; margin-bottom:10px; }
.tier-lede{
  font-family:'Fraunces',serif; font-style:italic; font-size:16px;
  color:var(--plum); margin-bottom:18px;
}
.tier.feature .tier-lede{ color:#DCC3A0; }
.tier > p{ font-size:14.5px; color:var(--ink-soft); margin-bottom:22px; }
.tier.feature > p{ color:rgba(251,246,238,0.78); }
.tier-list{ list-style:none; margin-top:auto; }
.tier-list li{
  font-size:13.5px; padding:9px 0 9px 18px; position:relative;
  border-bottom:1px solid rgba(43,35,28,0.10);
}
.tier.feature .tier-list li{ border-bottom-color:rgba(251,246,238,0.16); }
.tier-list li::before{
  content:""; position:absolute; left:0; top:16px;
  width:5px; height:5px; border-radius:50%; background:var(--brass);
}
.tier.feature .tier-list li::before{ background:#DCC3A0; }
.tier-tag{
  display:inline-block; margin-top:22px; font-size:10.5px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
  background:rgba(251,246,238,0.14); color:#DCC3A0;
  padding:6px 12px; border-radius:20px; align-self:flex-start;
}
.tier-note{
  margin-top:34px; font-size:14px; color:var(--ink-soft); max-width:64ch;
}

/* process steps */
.steps{ display:grid; grid-template-columns:1fr; gap:36px; }
@media(min-width:880px){ .steps{ grid-template-columns:repeat(2,1fr); gap:48px 64px; } }
.step-n{
  display:block; font-family:'Fraunces',serif; font-size:14px;
  color:#DCC3A0; margin-bottom:12px; letter-spacing:0.08em;
}
.step h3{ font-size:22px; margin-bottom:12px; color:var(--paper); }
.step p{ font-size:15px; color:rgba(251,246,238,0.76); }

/* inquiry form */
.inquiry{ margin-top:8px; }
.field-row{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:680px){ .field-row{ grid-template-columns:1fr 1fr; gap:22px; } }
.field{ display:block; margin-bottom:22px; }
.field > span{
  display:block; font-size:11px; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--sage); margin-bottom:9px;
}
.field input, .field select, .field textarea{
  width:100%; font-family:'Inter',sans-serif; font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid rgba(43,35,28,0.20);
  border-radius:2px; padding:13px 14px; -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1 L6 6 L11 1' fill='none' stroke='%237E7060' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:36px;
}
.field textarea{ resize:vertical; line-height:1.6; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(111,107,68,0.12);
}
.field .hint{
  display:block; font-size:12.5px; color:var(--ink-soft);
  margin-top:8px; text-transform:none; letter-spacing:0; font-weight:400;
}
.inquiry .hint{ font-size:12.5px; color:var(--ink-soft); }
.inquiry button{ border:none; cursor:pointer; font-family:'Inter',sans-serif; }


/* ---------- INQUIRY FORM LAYOUT ---------- */
.form-layout{ display:grid; grid-template-columns:1fr; gap:34px; }
@media(min-width:900px){ .form-layout{ grid-template-columns:220px 1fr; gap:64px; align-items:start; } }

.form-index ol{ list-style:none; }
.form-index li{
  display:flex; align-items:baseline; gap:12px;
  font-size:14px; color:var(--ink-soft);
  padding:11px 0; border-bottom:1px solid rgba(43,35,28,0.10);
  transition:color .25s ease;
}
.form-index li .i{
  font-family:'Fraunces',serif; font-size:12.5px; color:var(--brass);
  min-width:14px;
}
.form-index li.active{ color:var(--ink); font-weight:500; }
.form-index li.active .i{ color:var(--plum); }
@media(min-width:900px){
  .form-index{ position:sticky; top:112px; }
}
@media(max-width:899px){
  .form-index ol{ display:flex; flex-wrap:wrap; gap:0 22px; }
  .form-index li{ border-bottom:none; padding:6px 0; font-size:13px; }
}

.inquiry fieldset{ border:none; padding:0; margin:0 0 42px; }
.inquiry legend{
  display:flex; align-items:baseline; gap:12px;
  font-family:'Fraunces',serif; font-size:20px; color:var(--ink);
  padding:0 0 16px; margin-bottom:22px; width:100%;
  border-bottom:1px solid rgba(169,133,69,0.32);
}
.inquiry legend .n{
  font-size:13px; color:var(--brass);
}
.inquiry > .hint{ display:block; margin-bottom:8px; }


/* ---------- IMAGE + TEXT PAIRS ----------
   Large photograph beside a short block of text, alternating sides down
   the page. Fewer images, each given room to breathe. */
.pair{ display:grid; grid-template-columns:1fr; gap:26px; margin-bottom:104px; }
@media(min-width:900px){
  .pair{ grid-template-columns:1.05fr 0.95fr; gap:72px; align-items:center; }
  .pair.flip .pair-img{ order:2; }
  .pair.flip .pair-txt{ order:1; }
}
.pair-img{ overflow:hidden; background:#E4D9C2; aspect-ratio:3/4; }
.pair-img.tall{ aspect-ratio:9/16; }
.pair-img.tall img{ object-position:center 8%; }
@media(max-width:899px){ .pair-img, .pair-img.tall{ aspect-ratio:4/5; } }
.pair-txt .eyebrow{ display:block; margin-bottom:14px; }
.pair-txt h3{ font-size:clamp(24px,3vw,34px); line-height:1.2; margin-bottom:16px; }
.pair-txt h3 em{ font-style:italic; color:var(--plum); }
.pair-txt p{ font-size:16px; color:var(--ink-soft); max-width:46ch; margin-bottom:16px; }
.pair-cap{ font-size:12.5px; font-style:italic; color:var(--ink-soft); margin-top:12px; }

/* two photographs side by side, full width */
.duo{ display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:100px; }
@media(min-width:760px){ .duo{ grid-template-columns:1fr 1fr; gap:24px; } }
.duo .f{ overflow:hidden; background:#E4D9C2; aspect-ratio:3/4; }

/* a row of smaller details */
.details{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media(min-width:820px){ .details{ grid-template-columns:repeat(3,1fr); gap:24px; } }
.details figure .f{ overflow:hidden; background:#E4D9C2; aspect-ratio:3/4; }
.details figcaption{ font-size:12.5px; font-style:italic; color:var(--ink-soft); margin-top:11px; }

/* a photograph set into a dark band, beside its text */
.band-forest .pair-txt h3{ color:var(--paper); }
.band-forest .pair-txt h3 em{ color:#DCC3A0; }
.band-forest .pair-txt p{ color:rgba(251,246,238,0.78); }
.band-forest .pair{ margin-bottom:0; }


/* a photograph shown whole, at its own proportions, rather than cropped to a band */
.plate{ max-width:720px; margin:44px auto 0; }
.plate-wide{ max-width:1000px; margin:52px auto 0; }
.plate img{ width:100%; height:auto; }
.plate figcaption{ font-size:12.5px; font-style:italic; color:var(--ink-soft); margin-top:12px; text-align:center; }

/* details: one per row on phones so a three-up never leaves an orphan */
@media(max-width:819px){ .details{ grid-template-columns:1fr; gap:26px; } }


/* a small engraving set into the text, with the copy running around it,
   the way a plate sits in an old book */
.story-grid > div{ display:flow-root; max-width:58ch; }
.story-grid > div::after{ content:""; display:block; clear:both; }
@media(max-width:680px){
  }


/* honeypot: off screen rather than display:none, which some bots detect */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* inline result message under the submit button */
.form-note{ font-size:14px; margin-top:16px; display:none; }
.form-note.show{ display:block; }
.form-note.err{ color:#8C3A2E; }
.form-note.ok{ color:var(--sage); }

/* the thank you that replaces the form on success */
.form-done{ padding:8px 0 4px; }
.form-done h3{ font-size:clamp(23px,3vw,31px); line-height:1.25; margin-bottom:16px; }
.form-done h3 em{ font-style:italic; color:var(--plum); }
.form-done p{ font-size:16px; color:var(--ink-soft); max-width:52ch; margin-bottom:14px; }