/* ============================================================
   dop · shared header component
   header capsule · mobile menu · services marquee · video hero
   Same on every page — only the hero TEXT changes per page.
   Loaded once + cached, so pages stay light and fast.
   ============================================================ */
: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,.14); --line-2:rgba(28,26,20,.08);
  --font-ui:"Quicksand", system-ui, sans-serif;
  --font-text:"Cormorant Garamond", Georgia, serif;
  --font-display:"Playfair Display", Georgia, serif;
  --hand:"Caveat", cursive;
  --ease:cubic-bezier(.22,.84,.24,1);
  --shell-gutter:clamp(20px, 5vw, 88px);
}

/* ---------- header · capsule ---------- */
.sm-header{position:fixed; top:0; left:0; right:0; z-index:90; color:var(--paper);}
.sm-header a{text-decoration:none;}
.mm a{text-decoration:none;}
.sm-logo{display:inline-flex; align-items:center;}
.sm-wordmark{display:block; height:30px; width:auto; transition:height .5s var(--ease);}
.sm-cta{
  display:inline-flex; align-items:center; gap:8px;
  font:600 12.5px/1 var(--font-ui); letter-spacing:.1em; text-transform:uppercase;
  padding:11px 20px; border-radius:999px; white-space:nowrap;
  border:1px solid rgba(246,241,232,.45); color:var(--paper); background:transparent;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .25s var(--ease);
}
.sm-cta svg{transition:transform .3s var(--ease);}
.sm-cta:hover svg{transform:translate(2px,-2px);}
.is-scrolled .sm-cta{background:var(--green); border-color:var(--green); color:var(--paper);}
.is-scrolled .sm-cta:hover{background:var(--green-700); border-color:var(--green-700);}
.smA-nav a{
  position:relative;
  font:600 12.5px/1 var(--font-ui); letter-spacing:.14em; text-transform:uppercase;
  padding:6px 2px; opacity:.92; transition:opacity .25s, color .45s var(--ease);
}
.smA-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);
}
.smA-nav a:hover::after, .smA-nav a.on::after{transform:scaleX(1);}
.smA-nav a.on{color:inherit;}
.is-scrolled .smA-nav a.on{color:var(--signal);}
.smA-bar{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:84px; width:100%; max-width:1040px; margin:0 auto;
  padding:0 clamp(20px, 4vw, 40px);
  border:1px solid transparent; border-radius:0;
  box-shadow:0 18px 44px -22px rgba(28,26,20,0);
  transition:
    width .6s var(--ease), height .6s var(--ease), margin .6s var(--ease),
    padding .6s var(--ease), border-radius .6s var(--ease),
    border-color .6s var(--ease), background .6s var(--ease),
    box-shadow .6s var(--ease), color .6s var(--ease);
}
.smA.is-scrolled .smA-bar{
  width:min(880px, calc(100% - 28px));
  height:58px; margin:12px auto 0;
  padding:0 12px 0 24px;
  border-radius:999px; border-color:var(--line);
  background:rgba(246,241,232,.74);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
          backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 18px 44px -22px rgba(28,26,20,.35);
  color:var(--ink);
}
.smA.is-scrolled .sm-wordmark{height:21px;}
.smA-nav{display:flex; align-items:center; gap:clamp(18px, 2.6vw, 34px);}
.smA-right{display:flex; align-items:center; gap:10px;}
.smA.is-scrolled .sm-cta{padding:9px 16px;}
@media (max-width:760px){
  .smA-bar{height:68px; position:relative;}
  .smA.is-scrolled .smA-bar{height:54px; margin-top:10px; padding:0 14px;}
  .smA-nav{display:none;}
  /* mobile header: logo left · Book now centered · menu right */
  .smA-bar .sm-cta{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
}

/* ---------- burger (mobile) ---------- */
.sm-burger{
  display:none; width:46px; height:46px; flex:0 0 auto; border-radius:50%;
  border:1px solid rgba(246,241,232,.45); background:transparent; color:var(--paper);
  align-items:center; justify-content:center; padding:0; cursor:pointer;
  transition:border-color .45s var(--ease), color .45s var(--ease), background .3s, transform .2s;
}
.sm-burger:active{transform:scale(.94);}
.is-scrolled .sm-burger{border-color:rgba(28,26,20,.3); color:var(--ink); width:40px; height:40px;}
@media (max-width:760px){ .sm-burger{display:inline-flex;} }

/* ---------- mobile menu · light · app tiles (Option C — site standard) ---------- */
body.menu-open{overflow:hidden;}
.mm{
  position:fixed; inset:0; z-index:120; background:var(--sand); color:var(--ink);
  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:-40%; bottom:-4%; width:122%; color:var(--clay); opacity:.14; pointer-events:none;}
.mm-bar{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; height:68px; padding:0 var(--shell-gutter); position:relative;}
.mm-wordmark{display:block; height:23px; width:auto; color:var(--ink);}
.mm-close{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--ink); display:grid; place-items:center; cursor:pointer;
  transition:transform .35s var(--ease), background .2s;
}
.mm-close:active{transform:rotate(90deg) scale(.95);}
.mm-nav{flex:1; display:flex; flex-direction:column; justify-content:center; gap:11px; padding:6px var(--shell-gutter); position:relative; min-height:0;}
.mm-link{
  display:flex; align-items:center; gap:14px; padding:14px 16px; text-decoration:none; color:var(--ink);
  background:var(--paper-2); border:1px solid rgba(28,26,20,.07); border-radius:20px;
  box-shadow:0 10px 24px -20px rgba(28,26,20,.6);
  opacity:0; transform:translateY(22px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), background .25s var(--ease), border-color .25s;
}
.mm-link.on{background:var(--green); color:var(--paper); border-color:transparent;}
body.menu-open .mm-link{opacity:1; transform:translateY(0);}
body.menu-open .mm-link:nth-child(1){transition-delay:.08s;}
body.menu-open .mm-link:nth-child(2){transition-delay:.13s;}
body.menu-open .mm-link:nth-child(3){transition-delay:.18s;}
body.menu-open .mm-link:nth-child(4){transition-delay:.23s;}
body.menu-open .mm-link:nth-child(5){transition-delay:.28s;}
.mm-tile{width:46px; height:46px; border-radius:14px; background:var(--green); display:grid; place-items:center; flex:0 0 auto;}
.mm-tile svg{width:23px; height:23px; color:var(--paper);}
.mm-link.on .mm-tile{background:rgba(246,241,232,.18);}
.mm-mid{display:flex; flex-direction:column; gap:3px; min-width:0;}
.mm-label{font:700 17px/1 var(--font-ui); letter-spacing:.01em;}
.mm-cap{font:500 14px/1 var(--font-text); color:var(--ink-faint);}
.mm-link.on .mm-cap{color:rgba(246,241,232,.7);}
.mm-chev{margin-left:auto; color:var(--ink-faint); flex:0 0 auto;}
.mm-link.on .mm-chev{color:var(--paper);}
.mm-foot{
  flex:0 0 auto; display:flex; flex-direction:column; gap:12px;
  padding:14px var(--shell-gutter) calc(22px + env(safe-area-inset-bottom, 0px)); position:relative;
  opacity:0; transform:translateY(20px); transition:opacity .55s var(--ease) .36s, transform .55s var(--ease) .36s;
}
body.menu-open .mm-foot{opacity:1; transform:translateY(0);}
.mm-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:700 14px/1 var(--font-ui); letter-spacing:.04em; padding:16px 22px; border-radius:100px;
  background:var(--green); color:var(--paper);
}
.mm-cta:active{background:var(--green-700);}
.mm-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.mm-phone{display:inline-flex; align-items:center; gap:9px; font:600 13.5px/1 var(--font-ui); color:var(--ink-soft); text-decoration:none;}
.mm-phone svg{width:16px; height:16px; color:var(--green); flex:0 0 auto;}
.mm-socials{display:flex; gap:8px;}
.mm-social{width:42px; height:42px; border-radius:50%; border:1px solid rgba(28,26,20,.08); background:var(--paper-2); display:grid; place-items:center; color:var(--ink-soft);}
.mm-social svg{width:16px; height:16px;}

/* ---------- services marquee (editorial · always running) ---------- */
.svc-marquee{
  overflow:hidden; background:#363c30; color:var(--paper);
  padding:13px 0; border-bottom:1px solid rgba(28,26,20,.2);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.svc-track{display:flex; width:max-content; animation:svc-roll 42s linear infinite;}
@keyframes svc-roll{to{transform:translateX(-50%);}}
.svc-group{display:flex; align-items:center; gap:24px; padding-right:24px; white-space:nowrap;}
.svc-lead{display:inline-flex; align-items:center; gap:18px; flex:0 0 auto;
  font:600 11px/1 var(--font-ui); letter-spacing:.3em; text-transform:uppercase; color:rgba(246,241,232,.5);}
.svc-lead::after{content:""; width:52px; height:1px; background:rgba(246,241,232,.38);}
.svc-item{display:inline-flex; align-items:center; gap:10px; color:rgba(246,241,232,.94);}
.svc-item svg{width:17px; height:17px; flex:0 0 auto; color:rgba(246,241,232,.6);}
.svc-l{font:italic 500 19px/1 var(--font-text); letter-spacing:.005em;}
.svc-dot{flex:0 0 auto; color:rgba(246,241,232,.32); font-size:12px;}

/* ---------- video hero ---------- */
.hero{position:relative; height:40vh; min-height:320px; max-height:440px; background:var(--ink); overflow:hidden;}
.hero video.hero-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:var(--ink);}
.hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(18,22,19,.55) 0%, rgba(18,22,19,0) 30%),
    linear-gradient(0deg, rgba(18,22,19,.72) 0%, rgba(18,22,19,.05) 55%);
}
.hero-content{
  position:absolute; left:50%; transform:translateX(-50%);
  width:100%; max-width:calc(1320px + var(--shell-gutter) * 2);
  padding-left:var(--shell-gutter); padding-right:var(--shell-gutter);
  bottom:clamp(28px, 5vh, 56px);
  color:var(--paper); pointer-events:none;
}
.hero-eyebrow{
  margin:0 0 12px; font:600 11.5px/1 var(--font-ui);
  letter-spacing:.26em; text-transform:uppercase; color:rgba(246,241,232,.75);
}
.hero-title{
  margin:0; font:600 clamp(30px, 4vw, 52px)/1.06 var(--font-display);
  letter-spacing:-.01em; text-wrap:balance; max-width:16em;
}
.hero-dot{color:var(--signal);}
.hero-title em{font-style:italic; color:var(--sand);}
.hero-sub{
  margin:14px 0 0; font:italic 500 clamp(16px, 1.9vw, 20px)/1.4 var(--font-text);
  color:rgba(246,241,232,.85); max-width:30em;
}
.hero-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  color:rgba(246,241,232,.8); pointer-events:none;
  font:600 10.5px/1 var(--font-ui); letter-spacing:.24em; text-transform:uppercase;
}
@media (prefers-reduced-motion: no-preference){
  .hero-cue svg{animation:cue-bob 2.6s ease-in-out infinite;}
  @keyframes cue-bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)}}
  .hero-eyebrow{animation:hero-up .9s var(--ease) .08s both;}
  .hero-title{animation:hero-up 1s var(--ease) .2s both;}
  .hero-sub{animation:hero-up 1s var(--ease) .36s both;}
  @keyframes hero-up{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:translateY(0);}}
}