/* ==========================================================================
   NAR Med Bar — shared styles
   Linked by every page BEFORE its inline <style>, so a page can still
   override anything here for page-specific tweaks.

   TO CHANGE THE PALETTE OR LOGO SIZE: edit the tokens in :root below.
   All shared components reference these variables (var(--token)), and the
   per-page inline styles do too — so a color change happens in one place.
   ========================================================================== */

:root{
  /* Ink (black + neutral grays, no brown) */
  --ink:#111111;        /* primary black — text, buttons, accents on light */
  --ink-2:#4B4B4B;      /* secondary body text */
  --ink-3:#6B6B6B;      /* muted text (captions, copyright) */
  --ink-4:#8A8A8A;      /* faint text, used on dark backgrounds */

  /* Light surfaces (beige/cream) */
  --bg:#F7F2E8;         /* page background */
  --bg-soft:#F6EFE3;    /* softer light (mobile menu, placeholders) */
  --paper:#F4EDE2;      /* light text sitting on dark sections */

  /* Beige accents & fills */
  --beige:#D9C3A0;      /* beige accent — borders, fills, accents on dark */
  --beige-deep:#CBBDA2; /* deeper beige (card hover border) */
  --sand:#E9DDCA;       /* footer background, chips/badges */
  --sand-2:#EFE5D6;     /* services background, note boxes */
  --line:#D9CBB9;       /* hairline dividers */
  --line-2:#D9CFBC;     /* card / note borders */
  --btn-outline:#D3C4A8;/* outline-button border */

  /* Dark sections (hero, reviews, quote) */
  --dark-1:#2A2A2A;
  --dark-2:#171717;
  --dark-3:#0B0B0B;

  /* Sizing */
  --logo-h:60px;        /* nav logo height */
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Jost',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--beige);color:var(--ink)}
a{color:inherit}
h1,h2,h3,p{margin:0}
img{max-width:100%;display:block}
.serif{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:-.01em;}

/* ---------- Animations ---------- */
@keyframes narMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes narKen{0%{transform:scale(1.06) translate(0,0)}50%{transform:scale(1.14) translate(-1.5%,-1.5%)}100%{transform:scale(1.06) translate(0,0)}}
@keyframes narFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(30px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
[data-reveal].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none;}
  .hero-media,.float-badge{animation:none !important;}
}

/* ---------- Buttons & links ---------- */
.btn{display:inline-block;text-decoration:none;border-radius:999px;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  transition:background .35s ease,color .35s ease,transform .35s ease,border-color .35s ease;}
.btn--light{color:var(--ink);background:var(--bg);padding:16px 34px;}
.btn--light:hover{transform:translateY(-2px);background:var(--beige);}
.btn--ghost{color:var(--bg);border:1px solid rgba(246,241,236,.55);padding:16px 34px;}
.btn--ghost:hover{background:rgba(246,241,236,.14);}
.btn--dark{color:var(--bg);background:var(--ink);padding:18px 44px;font-size:13.5px;}
.btn--dark:hover{background:var(--beige);transform:translateY(-2px);}
.btn--pill{color:var(--bg);background:var(--ink);padding:14px 28px;letter-spacing:.16em;white-space:nowrap;}
.btn--pill:hover{background:var(--beige);}
.btn--outline{color:var(--ink);border:1px solid var(--btn-outline);padding:15px 32px;}
.btn--outline:hover{background:var(--beige);border-color:var(--beige);}

.link-under{text-decoration:none;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);border-bottom:1.5px solid var(--beige);padding-bottom:5px;transition:color .3s;}
.link-under:hover{color:var(--ink);}
.link-mini{text-decoration:none;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);align-self:flex-start;border-bottom:1.5px solid var(--beige);padding-bottom:4px;transition:color .3s;}
.link-mini:hover{color:var(--ink);}
.eyebrow{font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);}

/* ---------- Photo placeholders ---------- */
.ph{position:relative;overflow:hidden;border-radius:14px;
  background:
    radial-gradient(120% 120% at 78% 12%, rgba(217,195,160,.9) 0%, rgba(234,212,206,0) 55%),
    radial-gradient(120% 120% at 12% 90%, rgba(217,195,160,.24) 0%, rgba(184,118,104,0) 60%),
    linear-gradient(150deg,#F6EFE3 0%,#EDE3D3 48%,#E6D7C5 100%);}
.ph::after{content:attr(data-label);position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);padding:0 14px;}
.ph .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:clamp(40px,7vw,72px);color:rgba(217,195,160,.38);
  letter-spacing:.06em;}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}

/* ---------- Nav ----------
   #nav is transparent by default and gains .solid on scroll (home page) or
   from the start on interior pages that hardcode class="solid". */
#nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;padding:18px clamp(20px,5vw,64px);
  transition:background .4s ease,box-shadow .4s ease,backdrop-filter .4s ease;}
#nav.solid{background:rgba(247,242,232,.95);box-shadow:0 1px 0 rgba(17,17,17,.12);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;letter-spacing:.42em;font-weight:600;font-size:15px;}
.brand b{color:var(--ink);font-weight:600;}
.brand span{color:var(--ink);font-weight:400;}
.nav-desk{display:flex;align-items:center;gap:38px;}
.nav-link{text-decoration:none;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 0;color:var(--ink-2);border-bottom:1.5px solid transparent;transition:color .3s,border-color .3s;}
.nav-link:hover{color:var(--ink);border-bottom-color:var(--beige);}
.nav-link.active{color:var(--ink);border-bottom-color:var(--beige);}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px;}
.burger span{width:26px;height:1.6px;background:var(--ink);display:block;}

#mobile-menu{position:fixed;inset:0;z-index:65;background:var(--bg-soft);
  transform:translateY(-100%);opacity:0;pointer-events:none;
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .45s ease;
  display:flex;flex-direction:column;justify-content:center;gap:26px;padding:0 40px;
  font-family:'Cormorant Garamond',serif;}
#mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:auto;}
#mobile-menu a{text-decoration:none;font-size:38px;color:var(--ink);}
#mobile-menu .m-book{margin-top:14px;font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bg);background:var(--ink);padding:15px 28px;border-radius:999px;width:fit-content;}
.menu-close{position:absolute;top:24px;right:28px;background:none;border:none;font-size:30px;
  color:var(--ink);cursor:pointer;font-family:'Jost',sans-serif;}
@media (max-width:860px){.nav-desk{display:none;}.burger{display:flex;}}

/* Header logo — black on the cream nav, white over the dark hero */
.nav-logo{height:var(--logo-h);width:auto;display:block;mix-blend-mode:multiply;transition:filter .4s ease;}
.brand-text{font-weight:600;font-size:16px;letter-spacing:.24em;white-space:nowrap;line-height:1;}
.brand-text b{color:var(--ink);}
.brand-text > span{color:var(--ink);font-weight:400;}
@media (max-width:860px){.brand-text{display:none;}}
#nav:not(.solid) .nav-logo{filter:invert(1);mix-blend-mode:screen;}
#nav:not(.solid) .brand-text > span,#nav:not(.solid) .brand-text b{color:var(--bg);}

/* ---------- Footer ---------- */
footer{background:var(--sand);padding:clamp(56px,7vw,88px) clamp(20px,5vw,64px) 40px;}
.foot-top{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;
  gap:clamp(36px,5vw,72px);justify-content:space-between;}
.foot-brand{flex:1 1 260px;max-width:360px;}
.foot-logo{letter-spacing:.42em;font-weight:600;font-size:16px;margin-bottom:18px;}
.foot-logo b{color:var(--ink);font-weight:600;}
.foot-logo span{font-weight:400;}
.foot-brand p{margin:0 0 22px;font-size:15px;line-height:1.7;color:var(--ink-2);}
.foot-ig{text-decoration:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);border-bottom:1.5px solid var(--beige);padding-bottom:4px;}
.foot-col{flex:0 1 auto;}
.foot-col .h{margin:0 0 16px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);}
.foot-col p{margin:0;font-size:15px;line-height:1.8;color:var(--ink-2);}
.foot-links{display:flex;flex-direction:column;gap:9px;}
.foot-links a{text-decoration:none;font-size:15px;color:var(--ink-2);}
.foot-links a:hover{color:var(--ink);}
.foot-bottom{max-width:1180px;margin:48px auto 0;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:12px;letter-spacing:.08em;color:var(--ink-3);}