/* ---- Self-hosted variable fonts (latin) ------------------- */
@font-face{font-family:'Cormorant Garamond';src:url(/assets/fonts/cormorant-var.woff2) format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';src:url(/assets/fonts/cormorant-italic-var.woff2) format('woff2');
  font-weight:300 700;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';src:url(/assets/fonts/montserrat-var.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================
   CAM — Center for Aesthetic Medicine
   Design system. Every page inherits this file.
   Palette is closed: charcoal, taupe, blush, cream, white.
   No other hues exist in this system. Do not add one.
   ============================================================ */

/* ---- 1. Tokens ------------------------------------------- */
:root{
  --r-lg:18px; --r-md:12px; --r-sm:9px;
  /* Brand — from the CAM vector logo package */
  --charcoal:#252525;          /* Pantone 426 C */
  --taupe:#B8B0A6;             /* Pantone 7529 C */
  --blush:#D8C4C1;             /* Pantone 7604 C */
  --cream:#FAF7F2;
  --white:#FFFFFF;

  /* Derived — opacity only, never new hues */
  --ink-70:rgba(37,37,37,.70);
  --ink-55:rgba(37,37,37,.66);
  --ink-40:rgba(37,37,37,.58);
  --ink-12:rgba(37,37,37,.12);
  --rule:rgba(184,176,166,.55);      /* taupe hairline on light */
  --rule-dark:rgba(250,247,242,.20); /* cream hairline on charcoal */
  --cream-70:rgba(250,247,242,.70);
  --cream-45:rgba(250,247,242,.62);
  --blush-veil:rgba(216,196,193,.34);

  /* Type — brand guide: Cormorant Garamond primary, Montserrat supporting */
  --serif:'Cormorant Garamond',"Times New Roman",serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  --fs-display:clamp(2.75rem,6.6vw,6rem);
  --fs-h1:clamp(2.25rem,4.8vw,4.25rem);
  --fs-h2:clamp(1.85rem,3.4vw,3.1rem);
  --fs-h3:clamp(1.3rem,1.9vw,1.85rem);
  --fs-numeral:clamp(3rem,5vw,4.5rem);
  --fs-lead:clamp(1.0625rem,1.35vw,1.3125rem);
  --fs-body:1rem;
  --fs-sm:.875rem;
  --fs-xs:.75rem;
  --fs-eyebrow:.6875rem;

  /* Space */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2.5rem;
  --s-5:4rem; --s-6:6rem; --s-7:8.5rem; --s-8:11.5rem;

  --gutter:clamp(1.5rem,5vw,5.5rem);
  --maxw:96rem;      /* 1536px shell */
  --measure:38rem;   /* reading measure */

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- 2. Reset -------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--charcoal);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.8;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0}
::selection{background:var(--blush);color:var(--charcoal)}
:focus-visible{outline:1.5px solid var(--charcoal);outline-offset:3px}
.dark :focus-visible{outline-color:var(--cream)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- 3. Typography --------------------------------------- */
.display,.h1,.h2,.h3{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.display{font-size:var(--fs-display)}
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2);line-height:1.08}
.h3{font-size:var(--fs-h3);font-weight:400;line-height:1.2;letter-spacing:-.005em}
.display em,.h1 em,.h2 em,.h3 em{font-style:italic;font-weight:300}

.eyebrow{
  font-family:var(--sans);
  font-size:var(--fs-eyebrow);
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  line-height:1.6;
  color:var(--ink-55);
}
.dark .eyebrow{color:var(--cream-45)}

.lead{font-size:var(--fs-lead);line-height:1.72;font-weight:300;color:var(--ink-70);max-width:var(--measure)}
.dark .lead{color:var(--cream-70)}
.body{max-width:var(--measure);color:var(--ink-70)}
.dark .body{color:var(--cream-70)}
.small{font-size:var(--fs-sm);line-height:1.7;color:var(--ink-55)}
.dark .small{color:var(--cream-45)}
.tnum{font-family:var(--serif);font-size:var(--fs-numeral);font-weight:300;line-height:1;letter-spacing:-.02em}

/* ---- 4. Layout ------------------------------------------- */
.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--s-7)}
.section--tight{padding-block:var(--s-6)}
.section--tall{padding-block:var(--s-8)}
.dark{background:var(--charcoal);color:var(--cream)}
.veil{background:linear-gradient(var(--blush-veil),var(--blush-veil)),var(--cream)}
.rule{height:1px;background:var(--rule);border:0}
.dark .rule{background:var(--rule-dark)}

.stack>*+*{margin-top:var(--s-2)}
.stack-lg>*+*{margin-top:var(--s-3)}

.grid{display:grid;gap:var(--s-4)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* Section head: eyebrow left, title + copy right — used across the site */
.sec-head{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:var(--s-4);
  padding-top:var(--s-3);border-top:1px solid var(--rule)}
.dark .sec-head{border-top-color:var(--rule-dark)}
.sec-head__body{max-width:44rem}
.sec-head__body>*+*{margin-top:var(--s-3)}

/* ---- 5. Buttons + links ---------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-size:.6875rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;line-height:1;
  padding:1.15rem 2.15rem;border:1px solid var(--charcoal);
  background:var(--charcoal);color:var(--cream);border-radius:var(--r-sm);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  cursor:pointer;text-align:center;
}
.btn:hover{background:transparent;color:var(--charcoal)}
.btn--ghost{background:transparent;color:var(--charcoal)}
.btn--ghost:hover{background:var(--charcoal);color:var(--cream)}
.dark .btn{background:var(--cream);color:var(--charcoal);border-color:var(--cream)}
.dark .btn:hover{background:transparent;color:var(--cream)}
.dark .btn--ghost{background:transparent;color:var(--cream)}
.dark .btn--ghost:hover{background:var(--cream);color:var(--charcoal)}
.btn--sm{padding:.85rem 1.5rem;font-size:.625rem;letter-spacing:.16em}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}

.arrow-link{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:.55rem;border-bottom:1px solid var(--ink-40);
  transition:border-color .3s var(--ease),gap .3s var(--ease);
}
.arrow-link:hover{border-color:var(--charcoal);gap:1.1em}
.dark .arrow-link{border-bottom-color:var(--cream-45)}
.dark .arrow-link:hover{border-color:var(--cream)}
.arrow-link span{transition:transform .3s var(--ease)}

/* ---- 6. Header ------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(250,247,242,.94);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--rule);
}
.site-header__in{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:var(--s-4);min-height:5.5rem;
}
.brand{flex:0 0 auto;display:block;padding-block:1.1rem}
.brand img{height:2.2rem;width:auto}
.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.3vw,2.35rem);margin-inline:auto}
.nav a{
  font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-70);padding-block:.4rem;position:relative;transition:color .25s var(--ease);
  white-space:nowrap;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--charcoal);transition:right .35s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--charcoal)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.header-cta{flex:0 0 auto;display:flex;align-items:center;gap:var(--s-2)}
.header-tel{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.14em;color:var(--ink-55)}
.header-tel:hover{color:var(--charcoal)}

/* ---- 7. Media -------------------------------------------- */
.media{position:relative;overflow:hidden;background:var(--taupe)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.r-16x9{aspect-ratio:16/9}
.r-4x5{aspect-ratio:4/5}
.r-3x4{aspect-ratio:3/4}
.r-1x1{aspect-ratio:1/1}

/* Placeholder for photography not yet shot. Deliberately plain. */
.plate{
  position:relative;background:linear-gradient(var(--blush-veil),var(--blush-veil)),var(--taupe);
  display:flex;align-items:flex-end;padding:var(--s-3);
}
.plate::after{content:attr(data-label);font-size:.625rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(37,37,37,.5)}

/* ---- 8. Footer ------------------------------------------- */
.site-footer{background:var(--charcoal);color:var(--cream);padding-block:var(--s-6) var(--s-4)}
.footer-top{display:grid;grid-template-columns:minmax(0,.9fr) repeat(4,minmax(0,1fr));gap:var(--s-4)}
.footer-mark img{height:7rem;width:auto}
.footer-col h2,.footer-col .fch{font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cream-45);margin-bottom:var(--s-2)}
.footer-col li+li{margin-top:.5rem}
.footer-col a,.footer-col p{font-size:var(--fs-sm);color:var(--cream-70);line-height:1.75}
.footer-col a{transition:color .25s var(--ease)}
.footer-col a:hover{color:var(--cream)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2);
  margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--rule-dark);
  font-size:var(--fs-xs);letter-spacing:.06em;color:var(--cream-45)}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.footer-bottom a:hover{color:var(--cream)}

/* ---- 9. Page shell for stub / interior pages ------------- */
.page-head{padding-block:var(--s-7) var(--s-5);border-bottom:1px solid var(--rule)}
.page-head .h1{margin-top:var(--s-3);max-width:20ch}
.page-head .lead{margin-top:var(--s-3)}
.placeholder-body{padding-block:var(--s-6) var(--s-8)}
.placeholder-note{border:1px solid var(--rule);padding:var(--s-4);max-width:44rem;background:var(--white)}
.placeholder-note h2{font-family:var(--serif);font-size:var(--fs-h3);font-weight:400;
  letter-spacing:-.005em;line-height:1.2;margin-bottom:var(--s-2)}
.placeholder-list{margin-top:var(--s-3);border-top:1px solid var(--rule)}
.placeholder-list li{display:flex;gap:var(--s-2);padding-block:.85rem;
  border-bottom:1px solid var(--rule);font-size:var(--fs-sm);color:var(--ink-70)}
.placeholder-list li b{flex:0 0 3rem;font-family:var(--serif);font-size:1.05rem;
  font-weight:400;color:var(--ink-40)}

/* ---- 10. Responsive -------------------------------------- */
@media (max-width:1180px){
  .nav{gap:1rem}
  .footer-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-mark{grid-column:1/-1}
}
@media (max-width:1024px){
  :root{--s-7:6.5rem;--s-8:8rem}
  .nav{display:none}
  .sec-head{grid-template-columns:1fr;gap:var(--s-3)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  :root{--s-5:3rem;--s-6:4rem;--s-7:5rem;--s-8:6rem}
  body{line-height:1.75}
  .site-header__in{min-height:4.5rem}
  .brand img{height:1.7rem}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-3)}
  .btn{padding:1.05rem 1.65rem;font-size:.65rem}
  .btn-row .btn{flex:1 1 100%}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .header-tel{display:none}
}
@media (max-width:430px){
  .grid-4{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ---- Rounded corners (client request 8/13: no square boxes) ---- */
.media{border-radius:var(--r-lg);overflow:hidden}
.media img{border-radius:inherit}
.plate,.plate--tall{border-radius:var(--r-lg)}
.btn,.btn--ghost{border-radius:var(--r-sm)}

/* ---- Mobile menu (hamburger, tied into the header) -------- */
.menu{display:none;flex:0 0 auto}
.menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;border-radius:var(--r-sm);position:relative;z-index:70}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:hover{background:rgba(37,37,37,.05)}
.menu .bars,.menu .bars::before,.menu .bars::after{display:block;width:1.25rem;height:1.5px;
  background:var(--charcoal);transition:transform .25s var(--ease),opacity .2s;content:""}
.menu .bars{position:relative}
.menu .bars::before,.menu .bars::after{content:"";position:absolute;left:0}
.menu .bars::before{top:-6px}
.menu .bars::after{top:6px}
.menu[open] .bars{background:transparent}
.menu[open] .bars::before{transform:translateY(6px) rotate(45deg)}
.menu[open] .bars::after{transform:translateY(-6px) rotate(-45deg)}
.menu__panel{position:absolute;left:0;right:0;top:100%;z-index:65;background:var(--cream);
  min-height:calc(100vh - 5.5rem);max-height:calc(100vh - 5.5rem);border-top:1px solid var(--rule);
  padding:var(--s-3) var(--gutter) var(--s-5);overflow:auto;-webkit-overflow-scrolling:touch}
.menu__panel a{display:block;font-family:var(--serif);font-size:clamp(1.5rem,6vw,1.9rem);font-weight:400;
  padding-block:.85rem;border-bottom:1px solid var(--rule)}
.menu__panel a:last-of-type{border-bottom:0}
.menu__panel .tel{display:block;margin-top:var(--s-3);font-size:.8125rem;letter-spacing:.14em;color:var(--ink-55);border-bottom:0!important;font-family:var(--sans)}
.menu__panel .btn{margin-top:var(--s-2);width:100%;font-family:var(--sans);font-size:.6875rem;letter-spacing:.18em;padding-block:1.1rem;border-bottom:0}
@media (max-width:1024px){.menu{display:block}.header-cta{margin-left:auto}
  .site-header__in{position:relative}.menu>summary{margin-left:.35rem}}
body.menu-open{overflow:hidden}

/* ---- Motion (gated on .js; reduced-motion safe) ------------ */
.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv--soft{transform:translateY(12px)}
.js .media.rv img,.js .rv .media img{transform:scale(1.07);
  transition:transform 1.4s var(--ease)}
.js .rv.in img,.js .rv.in .media img{transform:scale(1)}
.site-header{transition:box-shadow .35s var(--ease)}
.site-header.scrolled{box-shadow:0 1px 0 var(--rule),0 12px 34px rgba(37,37,37,.07)}

/* hero intro: scrim + copy rise once armed */
.js .hero-armed .hero__bg img{animation:heroSettle 2.2s var(--ease) both}
.js .hero-armed .hero__inner>*{opacity:0;transform:translateY(24px);
  animation:riseIn .9s var(--ease) forwards}
.js .hero-armed .hero__inner>*:nth-child(1){animation-delay:.15s}
.js .hero-armed .hero__inner>*:nth-child(2){animation-delay:.3s}
.js .hero-armed .hero__inner>*:nth-child(3){animation-delay:.45s}
.js .hero-armed .hero__inner>*:nth-child(4){animation-delay:.6s}
@keyframes riseIn{to{opacity:1;transform:none}}
@keyframes heroSettle{from{transform:scale(1.14)}to{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .hero-armed .hero__inner>*{opacity:1!important;transform:none!important;animation:none!important}
}

/* gentle lift on interactive cards */
.js .decade,.js .cat,.js .member,.js .post{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.js .cat:hover,.js .member:hover{transform:translateY(-6px)}
.js .decade:hover{transform:translateY(-4px)}


/* ---- Audit fixes 8/13 ------------------------------------- */
@media (max-width:430px){.site-header__in{gap:var(--s-2)}}
.sr-only:focus{position:fixed;top:.5rem;left:.5rem;width:auto;height:auto;clip:auto;clip-path:none;
  padding:.8rem 1.3rem;background:var(--cream);color:var(--charcoal);border:1px solid var(--charcoal);
  border-radius:var(--r-sm);z-index:100;font-size:.8rem;letter-spacing:.08em}
main{scroll-margin-top:6rem}
body{overflow-wrap:break-word}

.footer-col .fch{font-family:var(--sans);font-weight:500}

.intro__aside .aside-h{font-family:var(--sans);font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55);margin-bottom:.9rem}

.legal-soon{color:var(--cream-45);cursor:default}

@media (max-width:760px){
  .btn--sm{padding:.85rem 1.25rem;font-size:.6rem}
  .menu__panel{min-height:calc(100vh - 4.5rem);max-height:calc(100vh - 4.5rem)}
}
/* menu panel hairlines: nav links bordered, utility rows not */
.menu__panel a.tel,.menu__panel a.btn{border-bottom:0}
.menu__panel a:has(+ a.tel){border-bottom:0}
/* shared interim-image caption role */
.im-cap{display:block;font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);margin-top:.6rem}


/* ---- Overlay header (homepage): floating light pill, Lululemon-style ---- */
.site-header--overlay{position:fixed;left:18px;right:18px;top:16px;border-radius:16px;
  background:linear-gradient(180deg,rgba(250,247,242,.72) 0%,rgba(245,240,232,.58) 100%);
  backdrop-filter:saturate(170%) blur(26px);-webkit-backdrop-filter:saturate(170%) blur(26px);
  border:1px solid rgba(250,247,242,.55);border-bottom:1px solid rgba(250,247,242,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 10px 34px rgba(20,18,17,.18)}
.site-header--overlay .site-header__in{min-height:4.2rem}
.site-header--overlay .wm-light{display:none}
.site-header--overlay .wm-dark{display:block}
.site-header--overlay .btn--sm{background:var(--charcoal);color:var(--cream);border:0}
.site-header--overlay .btn--sm:hover{background:#3a3a3a}
.site-header--overlay.scrolled{box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 12px 38px rgba(20,18,17,.22);background:linear-gradient(180deg,rgba(250,247,242,.88) 0%,rgba(245,240,232,.80) 100%)}
/* menu panel drops as a rounded card matching the pill */
.site-header--overlay .menu__panel{border-radius:0 0 14px 14px;
  min-height:0;max-height:calc(100vh - 7rem)}
@media (max-width:760px){
  .site-header--overlay{left:10px;right:10px;top:10px;border-radius:12px}
  .site-header--overlay .menu__panel{max-height:calc(100vh - 6rem)}
}

/* ---- Nav truly centered in the bar (optical centering pass 8/14) ---- */
.site-header__in{position:relative}
@media (min-width:1025px){
  .nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .header-cta{margin-left:auto}
}


/* pill header on interior pages: clear the floating bar; homepage hero slides under it */
.site-header--overlay ~ main{padding-top:7rem}
.site-header--overlay ~ main:has(> .hero--full:first-child),.site-header--overlay ~ main:has(> .page-hero:first-child){padding-top:0}
@media (max-width:760px){.site-header--overlay ~ main{padding-top:5.6rem}
 .site-header--overlay ~ main:has(> .hero--full:first-child),.site-header--overlay ~ main:has(> .page-hero:first-child){padding-top:0}}

/* ---- Step 2 (Luis + CAM request 8/14): photos B&W, color on hover ----
   Heroes excluded. Hover-capable devices only — phones stay full color. */
@media (hover:hover) and (pointer:fine){
  main .media img{filter:grayscale(1);transition:filter .5s cubic-bezier(.22,1,.36,1)}
  main .media:hover img,a:hover .media img,.cat a:hover img{filter:grayscale(0)}
  .hero__bg img,.page-hero .ph-bg img{filter:none}
}

/* studio credit */
.site-credit{color:var(--cream-45);text-decoration:none;transition:color .25s var(--ease)}
.site-credit:hover{color:var(--cream)}