/* ============ dop · shared shell for subpages ============ */
:root{
  --paper:#F6F1E8; --paper-2:#FBF8F2; --sand:#EADFCB; --stone:#D6C7AC; --clay:#B6A584;
  --green:#15634A; --green-700:#0F4536; --signal:#1F8A63; --signal-tint:#E4EFE9;
  --ink:#1C1A14; --ink-soft:#5C574C; --ink-faint:#928B7C;
  --line:rgba(28,26,20,.13); --line-2:rgba(28,26,20,.08);
  --ui:"Quicksand", system-ui, sans-serif;
  --serif:"Playfair Display", Georgia, serif;
  --edit:"Cormorant Garamond", Georgia, serif;
  --hand:"Caveat", cursive;
  --ease:cubic-bezier(.22,.84,.24,1);
  --gutter:clamp(20px, 5vw, 88px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--ui); color:var(--ink); background:var(--paper);}
a{text-decoration:none; color:inherit;}

/* ---------- header · static capsule ---------- */
.pg-header{position:sticky; top:0; z-index:90; background:rgba(246,241,232,.82);
  -webkit-backdrop-filter:blur(15px) saturate(1.15); backdrop-filter:blur(15px) saturate(1.15);
  border-bottom:1px solid var(--line);}
.pg-bar{display:flex; align-items:center; justify-content:space-between; gap:24px; height:64px; padding:0 var(--gutter);}
.pg-logo svg{display:block; height:22px; width:auto;}
.pg-nav{display:flex; align-items:center; gap:clamp(18px,2.6vw,32px);}
.pg-nav a{position:relative; font:600 12px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; padding:6px 2px; opacity:.92;}
.pg-nav a::after{content:""; position:absolute; left:2px; right:2px; bottom:0; height:1.5px; background:currentColor; border-radius:2px;
  transform:scaleX(0); transform-origin:left center; transition:transform .35s var(--ease);}
.pg-nav a:hover::after, .pg-nav a.on::after{transform:scaleX(1);}
.pg-nav a.on{color:var(--signal);}
.pg-right{display:flex; align-items:center; gap:10px;}
.pg-cta{display:inline-flex; align-items:center; gap:8px; font:600 12px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase;
  padding:10px 18px; border-radius:999px; white-space:nowrap; background:var(--green); color:var(--paper); border:1px solid var(--green);
  transition:background .3s, transform .2s;}
.pg-cta:hover{background:var(--green-700); transform:translateY(-1px);}
.pg-burger{display:none; width:40px; height:40px; flex:0 0 auto; border-radius:50%; border:1px solid rgba(28,26,20,.3);
  background:transparent; color:var(--ink); align-items:center; justify-content:center; padding:0; cursor:pointer; transition:transform .2s;}
.pg-burger:active{transform:scale(.94);}
@media (max-width:760px){ .pg-nav{display:none;} .pg-burger{display:inline-flex;} }

/* ---------- services marquee (always running) ---------- */
.svc-marquee{overflow:hidden; background:var(--green-700); color:var(--paper); padding:12px 0; border-bottom:1px solid rgba(28,26,20,.15);}
.svc-track{display:flex; width:max-content; animation:svc-roll 32s linear infinite;}
.svc-marquee:hover .svc-track{animation-play-state:paused;}
@keyframes svc-roll{to{transform:translateX(-50%);}}
.svc-group{display:flex; align-items:center; gap:34px; padding-right:34px; font:600 11.5px/1 var(--ui); letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;}
.svc-item{display:inline-flex; align-items:center; gap:9px;}
.svc-item svg{width:15px; height:15px; flex:0 0 auto; color:var(--sand); opacity:.95;}

/* ---------- mobile menu · logo-style ---------- */
body.menu-open{overflow:hidden;}
.mm{position:fixed; inset:0; z-index:120; background:var(--ink); color:var(--paper); display:flex; flex-direction:column;
  visibility:hidden; opacity:0; transition:opacity .45s var(--ease), visibility 0s linear .5s;}
body.menu-open .mm{visibility:visible; opacity:1; transition:opacity .45s var(--ease);}
@media (min-width:761px){ .mm{display:none;} }
.mm-rings{position:absolute; right:-38%; bottom:-6%; width:130%; color:var(--paper); opacity:.06; pointer-events:none;}
.mm-bar{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 var(--gutter); position:relative;}
.mm-wordmark{display:block; height:24px; width:auto;}
.mm-close{width:44px; height:44px; border-radius:50%; border:1px solid rgba(246,241,232,.4); background:transparent; color:var(--paper);
  display:grid; place-items:center; cursor:pointer; transition:transform .35s var(--ease);}
.mm-close:active{transform:rotate(90deg) scale(.95);}
.mm-nav{flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 var(--gutter); position:relative;}
.mm-link{display:flex; align-items:center; gap:16px; padding:16px 2px; border-bottom:1px solid rgba(246,241,232,.12);
  font-family:var(--serif); font-weight:500; font-size:clamp(26px,7vw,36px); letter-spacing:-.01em; color:var(--paper);
  opacity:0; transform:translateY(26px); transition:opacity .55s var(--ease), transform .55s var(--ease);}
.mm-link:first-child{border-top:1px solid rgba(246,241,232,.12);}
body.menu-open .mm-link{opacity:1; transform:translateY(0);}
body.menu-open .mm-link:nth-child(1){transition-delay:.1s;}
body.menu-open .mm-link:nth-child(2){transition-delay:.16s;}
body.menu-open .mm-link:nth-child(3){transition-delay:.22s;}
body.menu-open .mm-link:nth-child(4){transition-delay:.28s;}
body.menu-open .mm-link:nth-child(5){transition-delay:.34s;}
.mm-link .o{width:14px; height:14px; border-radius:50%; border:3.5px solid var(--signal); flex:0 0 auto;}
.mm-link .n{margin-left:auto; font-family:var(--hand); font-size:20px; color:rgba(246,241,232,.4); transform:rotate(-4deg);}
.mm-foot{flex:0 0 auto; display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding:18px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px)); position:relative;
  opacity:0; transform:translateY(20px); transition:opacity .55s var(--ease) .42s, transform .55s var(--ease) .42s;}
body.menu-open .mm-foot{opacity:1; transform:translateY(0);}
.mm-cta{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:9px; font:700 14px/1 var(--ui);
  letter-spacing:.04em; padding:16px 22px; border-radius:100px; background:var(--green); color:var(--paper);}
.mm-socials{display:flex; gap:9px;}
.mm-social{width:44px; height:44px; border-radius:50%; border:1px solid rgba(246,241,232,.25); display:grid; place-items:center; color:rgba(246,241,232,.75);}

/* ---------- page hero strip ---------- */
.pg-hero{padding:clamp(48px,7vw,84px) var(--gutter) clamp(34px,5vw,56px); border-bottom:1px solid var(--line);}
.pg-hero-in{max-width:1120px; margin:0 auto;}
.pg-eyebrow{display:inline-flex; align-items:center; gap:11px; margin:0 0 14px;
  font:600 12px/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--green);}
.pg-eyebrow::before{content:""; width:26px; height:1.5px; background:var(--green);}
.pg-title{margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-.015em;
  font-size:clamp(32px,4.4vw,52px); line-height:1.06; text-wrap:balance;}
.pg-title em{font-style:italic; color:var(--green);}
.pg-sub{margin:16px 0 0; font:italic 500 clamp(17px,1.9vw,21px)/1.5 var(--edit); color:var(--ink-soft); max-width:52ch;}

/* ---------- legal prose ---------- */
.legal{padding:clamp(40px,6vw,72px) var(--gutter) clamp(64px,9vw,110px);}
.legal-in{max-width:760px; margin:0 auto;}
.legal-meta{font:600 11px/1 var(--ui); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 34px;}
.legal h2{display:flex; align-items:baseline; gap:14px; margin:44px 0 12px; font-family:var(--serif); font-weight:500; font-size:clamp(21px,2.4vw,26px); letter-spacing:-.01em;}
.legal h2:first-of-type{margin-top:0;}
.legal h2 .no{font-family:var(--hand); font-size:21px; color:var(--clay); flex:0 0 auto;}
.legal p, .legal li{font:500 17.5px/1.65 var(--edit); color:var(--ink-soft); margin:0 0 12px;}
.legal ul{padding-left:22px; margin:0 0 12px;}
.legal b{color:var(--ink);}
.legal .note{background:var(--sand); border-radius:14px; padding:16px 20px; font-family:var(--edit);}

/* ---------- footer ---------- */
.site-foot{background:var(--ink); color:var(--paper); padding:clamp(48px,7vw,76px) var(--gutter) clamp(30px,4vw,44px);}
.sf-inner{max-width:1120px; margin:0 auto;}
.sf-sub-row{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(24px,4vw,56px); align-items:center;
  padding-bottom:clamp(30px,4.5vw,46px); margin-bottom:clamp(30px,4.5vw,46px); border-bottom:1px solid rgba(246,241,232,.12);}
.sf-kicker{margin:0 0 12px; font:600 11px/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:rgba(246,241,232,.45);}
.sf-title{margin:0; font-family:var(--serif); font-weight:500; font-size:clamp(21px,2.4vw,29px); line-height:1.25; letter-spacing:-.01em; color:var(--paper); text-wrap:balance;}
.sf-title em{font-style:italic; color:var(--sand);}
.sf-ig{justify-self:end; display:inline-flex; align-items:center; gap:11px; font:700 14px/1 var(--ui); letter-spacing:.03em;
  background:var(--paper); color:var(--ink); border-radius:100px; padding:17px 28px;
  transition:background .25s, transform .2s;}
.sf-ig:hover{background:var(--sand); transform:translateY(-1px);}
.sf-ig svg{flex:0 0 auto;}
.sf-top{display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:start;
  padding-bottom:clamp(34px,5vw,52px); border-bottom:1px solid rgba(246,241,232,.12);}
.sf-nav{display:flex; flex-wrap:wrap; gap:8px 26px; padding-top:6px;}
.sf-nav a{font:600 11px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,232,.45); transition:color .2s;}
.sf-nav a:hover{color:var(--paper);}
.sf-socials{display:flex; gap:10px;}
.sf-social{width:38px; height:38px; border-radius:50%; border:1px solid rgba(246,241,232,.2);
  display:grid; place-items:center; color:rgba(246,241,232,.55); transition:border-color .2s, color .2s;}
.sf-social:hover{border-color:rgba(246,241,232,.55); color:var(--paper);}
.sf-bottom{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:clamp(20px,3vw,30px); font:500 12px/1 var(--ui); color:rgba(246,241,232,.35);}
.sf-legal{display:flex; gap:16px;}
.sf-legal a{color:inherit; transition:color .2s;}
.sf-legal a:hover{color:var(--paper);}
@media (max-width:760px){ .sf-sub-row{grid-template-columns:1fr;} .sf-ig{justify-self:start;} }
@media (max-width:680px){ .sf-top{grid-template-columns:1fr; gap:22px;} .sf-bottom{flex-direction:column; align-items:flex-start;} }

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
