/* ============================================================
   TOUCHÉE ORGANIC SALON — production stylesheet
   Palette: Gallery White #FAF8F4 · Merlot #5A2435 · Oyster #E5E0D8
            Graphite #202124 · Light Butter #F7EDBF (disruptor, 0–2%)
   ============================================================ */
:root{
  --white-50:#FDFBF8; --white:#FAF8F4;
  --oyster-100:#EEEAE4; --oyster:#E5E0D8; --oyster-300:#D8D2CA;
  --merlot-950:#38121F; --merlot-850:#451A28; --merlot:#5A2435;
  --merlot-500:#7C4152; --merlot-250:#B88490; --merlot-100:#EBDDE1; --merlot-50:#F4ECEF;
  --graphite:#202124; --butter:#F7EDBF;
  --serif:'Bodoni Moda',Georgia,serif;
  --sans:Archivo,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --hand:'Nothing You Could Do',cursive;
  --pad:clamp(20px,5vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--graphite);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--merlot);text-decoration:none}
a:hover{color:var(--merlot-500)}
::selection{background:var(--merlot-100)}
:focus-visible{outline:2px solid var(--merlot);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--merlot);color:#fff;padding:12px 18px}
.skip:focus{left:8px;top:8px;color:#fff}
.shell{max-width:1440px;margin:0 auto;background:var(--white)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px var(--pad);background:var(--merlot-950);color:var(--white);
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.topbar a{color:var(--merlot-100)}
.topbar-mid{opacity:.85}
.topbar-mid a{color:var(--merlot-100)}
.topbar-book{white-space:nowrap}
@media(max-width:820px){.topbar span:first-child{display:none}}
@media(max-width:520px){.topbar{font-size:10px;letter-spacing:.05em}.topbar-mid{flex:1}}

/* ---------- header / nav ---------- */
.site-header{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  padding:26px var(--pad) 22px;border-bottom:1px solid var(--oyster);
  position:sticky;top:0;z-index:60;background:rgba(250,248,244,.94);backdrop-filter:blur(8px)}
.wordmark{display:block}
.wordmark-name{display:block;font-family:var(--serif);font-size:clamp(26px,3.4vw,40px);
  line-height:1;letter-spacing:.14em;color:var(--merlot)}
.wordmark-sub{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--merlot-500)}
.site-nav{display:flex;align-items:center;gap:24px;font-size:13px;letter-spacing:.04em;
  padding-bottom:6px;flex-wrap:wrap;justify-content:flex-end;row-gap:12px}
.navlink{color:var(--graphite);padding-bottom:3px;border-bottom:1px solid transparent;transition:.2s}
.navlink:hover{color:var(--merlot);border-bottom-color:var(--merlot-250)}
.navlink.is-active{color:var(--merlot);border-bottom-color:var(--merlot)}
.btn-book{display:inline-block;padding:12px 22px;background:var(--merlot);color:var(--white)!important;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:.2s}
.btn-book:hover{background:var(--merlot-850);color:var(--white)!important}
.nav-toggle{display:none;width:44px;height:44px;background:none;border:1px solid var(--oyster-300);
  padding:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-toggle span{display:block;width:20px;height:1.5px;background:var(--merlot);transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:1040px){
  .site-header{align-items:center}
  .nav-toggle{display:flex}
  .site-nav{position:fixed;inset:0 0 0 auto;width:min(320px,84vw);background:var(--white-50);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;
    padding:96px 28px 40px;transform:translateX(102%);transition:transform .32s cubic-bezier(.22,1,.36,1);
    box-shadow:-20px 0 60px rgba(32,33,36,.14);overflow-y:auto;z-index:70}
  .site-nav.is-open{transform:none}
  .site-nav .navlink{width:100%;padding:16px 0;border-bottom:1px solid var(--oyster);font-size:17px}
  .site-nav .btn-book{width:100%;text-align:center;margin-top:24px;padding:16px}
}
body.nav-open{overflow:hidden}
.nav-scrim{position:fixed;inset:0;background:rgba(32,33,36,.4);opacity:0;pointer-events:none;
  transition:opacity .3s;z-index:65}
.nav-scrim.is-open{opacity:1;pointer-events:auto}

/* ---------- footer ---------- */
.site-footer{background:var(--merlot-950);color:var(--white);padding:72px var(--pad) 40px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;align-items:start}
.footer-mark{font-family:var(--serif);font-size:34px;letter-spacing:.14em}
.footer-mark-sub{margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--merlot-250)}
.footer-line{margin:26px 0 0;max-width:300px;font-size:15px;line-height:1.6;color:var(--merlot-100)}
.footer-hand{margin:2px 0 0;font-family:var(--hand);font-size:22px;color:var(--merlot-250)}
.footer-social{margin-top:22px;display:flex;gap:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase}
.footer-social a,.footer-links a,.site-footer address a{color:var(--merlot-100)}
.footer-social a:hover,.footer-links a:hover,.site-footer address a:hover{color:#fff}
.footer-h{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--merlot-250);margin-bottom:14px}
.footer-col{font-size:14px;line-height:1.9}
.site-footer address{font-style:normal;color:var(--merlot-100)}
.footer-hours{color:var(--merlot-100);font-family:var(--mono);font-size:13px;line-height:1.85}
.footer-links{display:grid;gap:9px}
.footer-base{margin-top:56px;padding-top:20px;border-top:1px solid var(--merlot);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:var(--mono);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--merlot-250)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ---------- sticky mobile booking bar ---------- */
.sticky-book{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(56,18,31,.97);
  backdrop-filter:blur(10px)}
.sticky-book a{flex:1;text-align:center;padding:15px 10px;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase}
.sticky-call{flex:0 0 92px!important;border:1px solid var(--merlot-250);color:var(--merlot-100)!important}
.sticky-btn{background:var(--white);color:var(--merlot-950)!important;font-weight:500}
@media(max-width:760px){.sticky-book{display:flex}body{padding-bottom:76px}}

/* ---------- generic editorial page (new pages + articles) ---------- */
.page{padding:clamp(48px,7vw,88px) var(--pad)}
.page-narrow{max-width:760px;margin:0 auto}
.page-wide{max-width:1100px;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--merlot-500);margin:0 0 18px}
.h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.4vw,64px);line-height:1.04;
  letter-spacing:-.01em;color:var(--merlot);margin:0 0 8px}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,40px);line-height:1.14;
  color:var(--merlot);margin:56px 0 16px}
.h3{font-family:var(--sans);font-weight:500;font-size:clamp(18px,2vw,22px);line-height:1.3;
  color:var(--graphite);margin:36px 0 12px;letter-spacing:.01em}
.hand{font-family:var(--hand);font-size:clamp(20px,2.4vw,27px);color:var(--merlot-500);
  margin:0 0 26px;line-height:1.25}
.lede{font-size:clamp(17px,1.9vw,21px);line-height:1.62;color:#3A3B3F;margin:0 0 28px}
.prose{font-size:17px;line-height:1.75;color:#3A3B3F}
.prose p{margin:0 0 20px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px}
.prose li{margin:0 0 9px}
.prose strong{color:var(--graphite);font-weight:600}
.prose a{border-bottom:1px solid var(--merlot-250)}
.prose blockquote{margin:32px 0;padding:24px 28px;background:var(--merlot-50);
  border-left:2px solid var(--merlot);font-size:19px;line-height:1.55;color:var(--merlot)}
.prose blockquote p:last-child{margin:0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:15px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--oyster)}
.prose th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--merlot-500);background:var(--oyster-100)}
.prose hr{border:0;border-top:1px solid var(--oyster);margin:44px 0}
.rule{height:1px;background:var(--oyster-300);margin:0}

/* answer box — the AI-extraction / featured-snippet block */
.answer{background:var(--oyster-100);border-left:3px solid var(--merlot);padding:24px 26px;margin:0 0 32px}
.answer .answer-h{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--merlot-500);margin:0 0 10px}
.answer p{margin:0;font-size:18px;line-height:1.6;color:var(--graphite)}

/* FAQ */
.faq{margin:44px 0 0;border-top:1px solid var(--oyster)}
.faq details{border-bottom:1px solid var(--oyster)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-size:17px;line-height:1.4;color:var(--merlot);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:22px;
  color:var(--merlot-250);font-weight:300;transition:.2s}
.faq details[open] summary::after{content:"–"}
.faq .faq-a{padding:0 0 22px;font-size:16px;line-height:1.7;color:#3A3B3F}
.faq .faq-a p{margin:0 0 14px}
.faq .faq-a p:last-child{margin:0}

/* CTA band */
.cta-band{background:var(--merlot);color:var(--white);padding:clamp(48px,6vw,76px) var(--pad);text-align:center}
.cta-band .h2{color:var(--white);margin:0 0 6px}
.cta-band .hand{color:var(--merlot-250);margin:0 0 26px}
.cta-band p{max-width:600px;margin:0 auto 30px;color:var(--merlot-100);font-size:17px;line-height:1.65}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-primary{display:inline-block;padding:17px 34px;background:var(--white);color:var(--merlot-950)!important;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:.2s}
.btn-primary:hover{background:#fff;color:var(--merlot-950)!important}
.btn-ghost{display:inline-block;padding:17px 34px;border:1px solid var(--merlot-250);
  color:var(--merlot-100)!important;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;transition:.2s}
.btn-ghost:hover{border-color:var(--white);color:var(--white)!important}
.btn-dark{display:inline-block;padding:16px 32px;background:var(--merlot);color:var(--white)!important;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:.2s}
.btn-dark:hover{background:var(--merlot-850);color:var(--white)!important}
.btn-outline{display:inline-block;padding:16px 32px;border:1px solid var(--merlot);color:var(--merlot)!important;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:.2s}
.btn-outline:hover{background:var(--merlot);color:var(--white)!important}

/* breadcrumbs */
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--merlot-500);padding:20px var(--pad) 0;max-width:1440px;margin:0 auto}
.crumbs a{color:var(--merlot-500)}
.crumbs a:hover{color:var(--merlot)}
.crumbs span{color:var(--oyster-300);margin:0 8px}

/* story cards */
.story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2px;
  background:var(--oyster);border-top:1px solid var(--oyster)}
.story-card{background:var(--white);padding:32px 30px 36px;display:flex;flex-direction:column;
  transition:background .25s}
.story-card:hover{background:var(--merlot-50)}
.story-card .tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--merlot-500);margin-bottom:16px}
.story-card h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.22;
  color:var(--merlot);margin:0 0 12px}
.story-card p{font-size:15px;line-height:1.62;color:#4A4B50;margin:0 0 20px;flex:1}
.story-card .more{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--merlot)}

/* two-col editorial */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.card{background:var(--oyster-100);padding:30px 30px 34px}
.card h3{margin-top:0}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.stat{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--merlot-500)}

/* review card */
.review{background:var(--white-50);border:1px solid var(--oyster);padding:26px 28px}
.review .stars{color:var(--merlot);letter-spacing:.16em;font-size:13px;margin-bottom:14px}
.review p{font-size:16px;line-height:1.62;color:var(--graphite);margin:0 0 14px}
.review .who{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--merlot-500)}

/* map + booking embed */
.embed{width:100%;border:0;display:block;background:var(--oyster-100)}

/* legacy inline-design pages: keep parity on small screens */
@media(max-width:760px){
  .shell [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .shell [style*="display: flex"]{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{.site-header,.site-footer,.sticky-book,.topbar{display:none}}

/* ============================================================
   RESPONSIVE LAYER for the legacy inline-styled design pages.
   The original design was authored at a fixed 1440px canvas with
   inline px type and padding. These overrides make it behave on
   real devices without touching the desktop composition.
   ============================================================ */
@media(max-width:1080px){
  .shell [style*="padding: 92px 56px 92px 40px"],
  .shell [style*="padding: 88px 56px 72px 40px"],
  .shell [style*="padding: 84px 56px 84px 40px"],
  .shell [style*="padding: 84px 40px 84px 56px"],
  .shell [style*="padding: 80px 40px 80px 64px"]{padding:56px 28px!important}
}
@media(max-width:860px){
  /* collapse every two/three-column composition */
  .shell section [style*="grid-template-columns: 0.8fr 1fr"],
  .shell section [style*="grid-template-columns: 0.9fr 1.1fr"],
  .shell section [style*="grid-template-columns: 1.1fr 1fr"],
  .shell section [style*="grid-template-columns: 1fr 0.85fr"],
  .shell section [style*="grid-template-columns: 1fr 1.15fr"],
  .shell section [style*="grid-template-columns: 1fr 1fr"],
  .shell section [style*="grid-template-columns: 1.4fr 1fr 1fr"],
  .shell section [style*="grid-template-columns: repeat(3, 1fr)"],
  .shell section [style*="grid-template-columns: repeat(4, 1fr)"],
  .shell section[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .shell section{padding-left:24px!important;padding-right:24px!important}
  .shell [style*="padding: 88px 40px"],
  .shell [style*="padding: 92px 40px"],
  .shell [style*="padding: 54px 40px"]{padding:56px 24px!important}
  .shell [style*="padding: 56px 0 56px 40px"]{padding:32px 24px!important}
}
@media(max-width:760px){
  /* type scale-down: the design's fixed px sizes overflow small screens */
  .shell [style*="font-size: 72px"]{font-size:40px!important;line-height:1.06!important}
  .shell [style*="font-size: 64px"]{font-size:36px!important;line-height:1.08!important}
  .shell [style*="font-size: 60px"]{font-size:34px!important;line-height:1.1!important}
  .shell [style*="font-size: 48px"]{font-size:30px!important;line-height:1.12!important}
  .shell [style*="font-size: 46px"]{font-size:29px!important;line-height:1.14!important}
  .shell [style*="font-size: 42px"]{font-size:27px!important;line-height:1.16!important}
  .shell [style*="font-size: 40px"]{font-size:26px!important}
  .shell [style*="font-size: 38px"]{font-size:25px!important}
  .shell [style*="font-size: 34px"]{font-size:24px!important}
  .shell [style*="font-size: 32px"]{font-size:23px!important}
  .shell [style*="font-size: 30px"]{font-size:22px!important}
  .shell [style*="font-size: 27px"]{font-size:21px!important}
  .shell [style*="font-size: 26px"]{font-size:20px!important}
  .shell [style*="font-size: 25px"]{font-size:20px!important}
  .shell [style*="grid-template-columns: 96px 1fr"]{grid-template-columns:56px 1fr!important}
  .shell [style*="max-width: 520px"],.shell [style*="max-width: 560px"],
  .shell [style*="max-width: 600px"],.shell [style*="max-width: 640px"]{max-width:100%!important}
  .shell nav[style*="gap: 26px"]{gap:14px!important}
  .shell [style*="letter-spacing: 0.28em"]{letter-spacing:.18em!important}
}
@media(max-width:520px){
  .shell section{padding-left:18px!important;padding-right:18px!important}
  .shell [style*="padding: 40px 36px"]{padding:28px 20px!important}
  .shell [style*="padding: 34px 30px 30px"]{padding:24px 20px 22px!important}
  .shell [style*="padding: 32px 28px 36px"]{padding:24px 20px 26px!important}
  .shell [style*="font-size: 72px"]{font-size:34px!important}
  .shell [style*="font-size: 64px"]{font-size:31px!important}
  .page{padding-left:18px!important;padding-right:18px!important}
}

/* ---------- story card thumbnails ---------- */
.story-card{padding:0;overflow:hidden}
.story-card .card-thumb{display:block;margin:0 0 22px}
.story-card .card-thumb img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  background:var(--oyster-100);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.story-card:hover .card-thumb img{transform:scale(1.035)}
.story-card .tag,.story-card h3,.story-card p,.story-card .more{padding-left:28px;padding-right:28px}
.story-card .more{padding-bottom:30px;display:block}
.story-card p{margin-bottom:16px}

/* ---------- gallery of real work ---------- */
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.work-tile{margin:0;position:relative;overflow:hidden;background:var(--oyster-100)}
.work-tile img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.work-tile:hover img{transform:scale(1.04)}
.work-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;
  font-size:12.5px;line-height:1.45;color:#FAF8F4;opacity:0;transition:opacity .3s;
  background:linear-gradient(to top,rgba(56,18,31,.92),rgba(56,18,31,0))}
.work-tile:hover figcaption,.work-tile:focus-within figcaption{opacity:1}
@media(hover:none){.work-tile figcaption{opacity:1}}
@media(max-width:520px){.work-grid{grid-template-columns:1fr 1fr;gap:10px}
  .work-tile figcaption{font-size:11px;padding:26px 10px 10px}}

/* ============================================================
   HOMEPAGE V7
   ============================================================ */
.hero{display:grid;grid-template-columns:1fr 1.12fr;align-items:stretch;border-bottom:1px solid var(--oyster)}
.hero-copy{padding:clamp(44px,6vw,86px) clamp(28px,4vw,56px) clamp(44px,6vw,72px) var(--pad);
  display:flex;flex-direction:column;justify-content:center}
.hero-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--merlot-500);margin:0}
.hero-h1{margin:24px 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,5.6vw,72px);line-height:1;letter-spacing:-.01em;color:var(--merlot);
  text-wrap:balance;animation:riseIn 1s cubic-bezier(.22,1,.36,1) both}
.hero-sub{margin:26px 0 0;max-width:430px;font-size:clamp(16px,1.25vw,17.5px);line-height:1.65;
  color:var(--graphite);animation:riseIn 1s cubic-bezier(.22,1,.36,1) .2s both}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;
  animation:riseIn 1s cubic-bezier(.22,1,.36,1) .36s both}
.hero-img{position:relative;min-height:520px;background:var(--oyster-100);overflow:hidden}
.hero-img picture,.hero-img img{position:absolute;inset:0;width:100%;height:100%}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:880px){
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:36px var(--pad) 30px;order:1}
  .hero-img{order:2;min-height:0;height:58vw;max-height:440px;position:relative}
}

.btn-solid{display:inline-block;padding:17px 32px;background:var(--merlot);color:var(--white)!important;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:.2s}
.btn-solid:hover{background:var(--merlot-850);color:var(--white)!important}
.btn-quiet{display:inline-block;padding:17px 30px;border:1px solid var(--oyster-300);color:var(--graphite)!important;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:.2s}
.btn-quiet:hover{border-color:var(--merlot);color:var(--merlot)!important}

.band{background:var(--oyster-100);padding:clamp(52px,6.5vw,88px) var(--pad)}
.band-inner{max-width:1100px;margin:0 auto}
.rhythm{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:36px;background:var(--oyster-300)}
.rhythm-card{background:var(--white);padding:30px 26px 34px}
.rhythm-n{display:block;font-family:var(--serif);font-size:clamp(26px,3vw,36px);color:var(--merlot);margin-bottom:14px}
.rhythm-card p{margin:0;font-size:15.5px;line-height:1.65;color:#3A3B3F}
@media(max-width:760px){.rhythm{grid-template-columns:1fr}}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:34px}
.svc h3{margin-bottom:10px}
.svc p{font-size:15.5px;line-height:1.65;color:#3A3B3F;margin:0 0 16px}
.svc ul{margin:0;padding-left:18px;font-size:14.5px;line-height:1.9;color:#4A4B50}
@media(max-width:860px){.svc-grid{grid-template-columns:1fr;gap:26px}}

.proof{background:var(--merlot);color:var(--white);padding:clamp(58px,7vw,96px) var(--pad)}
.proof-inner{max-width:1150px;margin:0 auto}
.proof-h{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,60px);line-height:1.04;
  color:var(--white);margin:0 0 14px}
.proof-lede{max-width:620px;font-size:17px;line-height:1.65;color:var(--merlot-100);margin:0 0 40px}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--merlot-500)}
.proof-card{margin:0;background:var(--merlot);padding:32px 28px 30px;display:flex;flex-direction:column;gap:16px}
.proof-tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--merlot-250)}
.proof-card blockquote{margin:0;font-family:var(--serif);font-size:clamp(18px,1.5vw,21px);line-height:1.45;color:var(--white)}
.proof-card figcaption{margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--merlot-250)}
@media(max-width:860px){.proof-grid{grid-template-columns:1fr}}

.season{background:var(--white-50);padding:clamp(52px,6.5vw,92px) var(--pad);border-top:1px solid var(--oyster)}
.season-inner{max-width:1150px;margin:0 auto}
.bob{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(26px,4vw,60px);align-items:center;margin:44px 0 56px}
.bob-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bob-imgs picture:nth-child(2) img{margin-top:26px}
.bob-imgs picture:nth-child(3) img{margin-top:52px}
.bob-h{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,40px);line-height:1.1;
  color:var(--merlot);margin:6px 0 16px}
.bob-copy p{font-size:16px;line-height:1.7;color:#3A3B3F;margin:0 0 14px}
.more-link{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--merlot-250);padding-bottom:2px}
.season-two{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.season-card p{font-size:15.5px;line-height:1.68;color:#3A3B3F;margin:0 0 12px}
.season-card picture img{margin-bottom:18px}
@media(max-width:880px){.bob{grid-template-columns:1fr}.season-two{grid-template-columns:1fr}
  .bob-imgs picture:nth-child(2) img,.bob-imgs picture:nth-child(3) img{margin-top:0}}

.footnote{margin:20px 0 0;font-size:13px;line-height:1.62;color:#6A6B70;max-width:520px;
  padding-top:14px;border-top:1px solid var(--oyster-300)}

.club-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;max-width:520px}
.club-form input[type=email]{flex:1 1 240px;padding:15px 16px;border:1px solid var(--oyster-300);
  background:var(--white);font:inherit;font-size:16px;color:var(--graphite)}
.book-two{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:30px}
@media(max-width:760px){.book-two{grid-template-columns:1fr}}

.local{background:var(--oyster-100);padding:38px var(--pad)}
.local-h{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--merlot-500);margin:0 0 12px}
.local p{margin:0;font-size:15px;line-height:2;color:#3A3B3F}

/* ---------- review cards (clickable, on-site) ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:34px}
.rev-card{display:flex;flex-direction:column;gap:14px;padding:30px 28px 26px;
  background:var(--white-50);border:1px solid var(--oyster);color:var(--graphite)!important;
  transition:border-color .25s,transform .25s,background .25s}
.rev-card:hover{border-color:var(--merlot-250);transform:translateY(-2px);background:#fff;color:var(--graphite)!important}
.rev-tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--merlot-500)}
.rev-stars{color:var(--merlot);letter-spacing:.18em;font-size:13px;line-height:1}
.rev-card blockquote{margin:0;font-size:15.5px;line-height:1.68;color:#3A3B3F}
.rev-who{margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--merlot-500)}
/* dark variant inside the merlot proof band */
.rev-grid--dark .rev-card{background:var(--merlot-850);border-color:var(--merlot-500);color:var(--white)!important}
.rev-grid--dark .rev-card:hover{background:var(--merlot-950);border-color:var(--merlot-250);color:var(--white)!important}
.rev-grid--dark .rev-tag{color:var(--merlot-250)}
.rev-grid--dark .rev-stars{color:var(--merlot-100)}
.rev-grid--dark .rev-card blockquote{color:var(--merlot-100)}
.rev-grid--dark .rev-who{color:var(--merlot-250)}
@media(max-width:600px){.rev-grid{grid-template-columns:1fr}}

/* work tiles now 4:5 (gentler crop, heads stay in frame) */
.work-tile img{aspect-ratio:4/5!important}
.bob-imgs picture img,.season-card picture img{aspect-ratio:4/5!important}
.season-card picture img{aspect-ratio:16/11!important}
.footer-areas{display:grid;gap:7px;font-size:14px;line-height:1.7}
.footer-areas a{color:var(--merlot-100)}
.footer-areas a:hover{color:#fff}
.footer-areas span{color:var(--merlot-250);font-size:13px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(min-width:901px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr 1fr}}

/* ---------- review cards with work imagery ---------- */
.rev-card{padding:0;overflow:hidden}
.rev-img{display:block;position:relative}
.rev-img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;
  background:var(--oyster-100);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.rev-card:hover .rev-img img{transform:scale(1.035)}
.rev-imgcap{position:absolute;left:0;bottom:0;padding:22px 14px 9px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#FAF8F4;
  background:linear-gradient(to top,rgba(56,18,31,.88),rgba(56,18,31,0));width:100%}
.rev-body{display:flex;flex-direction:column;gap:13px;padding:24px 26px 24px}
.rev-card blockquote{margin:0}
@media(max-width:600px){.rev-img img{aspect-ratio:16/9}}

/* ---------- service menu with prices ---------- */
.menu{border-top:1px solid var(--oyster-300)}
.menu-row{display:flex;gap:28px;justify-content:space-between;align-items:flex-start;
  padding:22px 0;border-bottom:1px solid var(--oyster)}
.menu-main{flex:1 1 auto;max-width:640px}
.menu-main h3{margin:0 0 6px;font-family:var(--sans);font-weight:500;font-size:17.5px;
  letter-spacing:.01em;color:var(--graphite)}
.menu-main p{margin:0;font-size:15px;line-height:1.6;color:#4A4B50}
.menu-meta{flex:0 0 auto;text-align:right;display:grid;gap:5px;min-width:150px}
.menu-price{font-family:var(--serif);font-size:20px;color:var(--merlot);white-space:nowrap}
.menu-time{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--merlot-500)}
@media(max-width:640px){
  .menu-row{flex-direction:column;gap:10px}
  .menu-meta{text-align:left;display:flex;gap:14px;align-items:baseline}
  .menu-price{font-size:18px}
}

/* ============================================================
   BEAUTY-CULTURE ILLUSTRATION — hood dryer / rollers
   Used as punctuation, not wallpaper. Two placements only.
   ============================================================ */
.club-band{display:grid;grid-template-columns:0.72fr 1fr;gap:clamp(24px,4vw,60px);
  align-items:center;padding-top:0;padding-bottom:0}
.club-art{align-self:end;max-width:380px;padding-top:26px}
.club-art img{mix-blend-mode:multiply}
.club-copy{padding:clamp(46px,6vw,80px) 0}
@media(max-width:820px){
  .club-band{grid-template-columns:1fr;padding-top:0}
  .club-art{max-width:250px;margin:0 auto;padding-top:34px}
  .club-copy{padding:12px 0 46px}
}

.ritual{background:#411D29;color:var(--white);
  display:grid;grid-template-columns:0.85fr 1fr;gap:clamp(26px,5vw,72px);
  align-items:center;padding:0 var(--pad) 0 0;overflow:hidden}
.ritual-art{max-width:520px;justify-self:start}
.ritual-art img{width:100%;height:auto;display:block}
.ritual-copy{padding:clamp(48px,6vw,86px) 0}
.ritual-h{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,52px);
  line-height:1.08;color:var(--white);margin:6px 0 22px}
.ritual-copy p{max-width:520px;font-size:17px;line-height:1.68;color:var(--merlot-100);margin:0 0 16px}
.ritual-copy .hand{font-size:clamp(20px,2.2vw,26px);margin-top:6px}
@media(max-width:860px){
  .ritual{grid-template-columns:1fr;padding:0 0 8px}
  .ritual-art{max-width:100%;justify-self:stretch}
  .ritual-copy{padding:8px var(--pad) 48px}
}

/* the é monogram */
.mark-e{width:44px;height:44px;display:block}
.footer-mark-row{display:flex;align-items:center;gap:14px}

/* services page image band */
.services-hero{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}
.services-hero img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--oyster-100)}
@media(max-width:760px){.services-hero{grid-template-columns:1fr 1fr;gap:8px}}

/* ============================================================
   MOTION — keyframes from the original design. These were lost
   in the first conversion, so the hero crossfade and Ken Burns
   have never actually run. Restored.
   ============================================================ */
@keyframes kenburnsA{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.14) translate(-1.5%,-1%)}}
@keyframes kenburnsB{0%{transform:scale(1.14) translate(1.5%,0)}100%{transform:scale(1.02) translate(0,-1%)}}
@media(max-width:820px){.proof-band{grid-template-columns:1fr!important;gap:26px!important;padding:22px!important}}

@keyframes slide1{0%,20%{opacity:1}25%,95%{opacity:0}100%{opacity:1}}
@keyframes slide2{0%,20%{opacity:0}25%,45%{opacity:1}50%,100%{opacity:0}}
@keyframes slide3{0%,45%{opacity:0}50%,70%{opacity:1}75%,100%{opacity:0}}
@keyframes slide4{0%,70%{opacity:0}75%,95%{opacity:1}100%{opacity:0}}
@keyframes dotPulse{0%,20%{background:#5A2435}25%,100%{background:#D8D2CA}}

/* ---- expandable service detail ---- */
.svc-detail{margin-top:12px}
.svc-detail>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#7C4152;padding:4px 0;border-bottom:1px solid transparent;transition:border-color .2s}
.svc-detail>summary::-webkit-details-marker{display:none}
.svc-detail>summary::after{content:"+";font-size:14px;line-height:1;transform:translateY(-1px);transition:transform .25s}
.svc-detail[open]>summary::after{content:"–"}
.svc-detail>summary:hover{border-bottom-color:#7C4152}
.svc-detail>summary:focus-visible{outline:2px solid #5A2435;outline-offset:3px}
.svc-detail-body{margin-top:10px;max-width:620px;animation:svcIn .32s ease both}
@keyframes svcIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:640px){.svc-detail-body>div{grid-template-columns:1fr!important;gap:4px!important}}
@media(prefers-reduced-motion:reduce){.svc-detail-body{animation:none}}

/* ---- homepage inline grids: mobile collapse (they were hand-built with no breakpoints) ---- */
@media(max-width:900px){
  .r-stack{grid-template-columns:1fr!important;gap:26px!important}
  .r-stack>div[style*="min-height"],.r-stack>div[style*="position: relative"]{min-height:380px!important}
}
@media(max-width:760px){
  .r-2up{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}
  .r-wrap{display:flex!important;flex-wrap:wrap!important;gap:14px!important}
  main section{padding-left:22px!important;padding-right:22px!important}
  main h1,main h2{font-size:clamp(30px,8.5vw,46px)!important;line-height:1.06!important}
  main [style*="font-size: 72px"],main [style*="font-size:72px"]{font-size:clamp(34px,10vw,54px)!important}
  main [style*="padding: 88px"],main [style*="padding: 92px"],main [style*="padding: 84px"]{
    padding-top:52px!important;padding-bottom:52px!important}
}
@media(max-width:480px){ .r-2up{grid-template-columns:1fr!important} }

/* ---- 7. service rows: raised cards ---- */
.menu{background:transparent!important;border:0!important;gap:14px!important}
.menu-row{background:#FAF8F4;border:1px solid #E5E0D8;border-radius:2px;padding:22px 24px!important;
  box-shadow:0 1px 2px rgba(36,35,33,.04),0 6px 18px -12px rgba(90,36,53,.18);
  transition:box-shadow .28s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1),border-color .28s}
.menu-row:hover{box-shadow:0 2px 4px rgba(36,35,33,.05),0 18px 34px -18px rgba(90,36,53,.32);
  transform:translateY(-2px);border-color:#D8D2CA}
.menu-row:has(.svc-detail[open]){box-shadow:0 2px 4px rgba(36,35,33,.05),0 18px 34px -18px rgba(90,36,53,.28);
  border-color:#B88490}
@media(prefers-reduced-motion:reduce){.menu-row{transition:none}.menu-row:hover{transform:none}}

/* ---- 14. trend words set in raspberry ---- */
.trendword{color:#B0304A;font-style:italic}
.trendtag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:#B0304A;border:1px solid rgba(176,48,74,.35);border-radius:999px;
  padding:5px 12px;margin:0 8px 8px 0;background:rgba(176,48,74,.05);transition:.25s}
.trendtag:hover{background:rgba(176,48,74,.12);border-color:rgba(176,48,74,.6)}

/* ---- 15. pull quotes with dimension ---- */
.bigquote{position:relative;margin:0;padding:46px 0 8px}
.bigquote::before{content:"\201C";position:absolute;top:-14px;left:-6px;font-family:'Bodoni Moda',serif;
  font-size:150px;line-height:1;color:#5A2435;opacity:.10;pointer-events:none}
.bigquote q,.bigquote p{quotes:none;display:block;font-family:'Bodoni Moda',serif;font-style:italic;
  font-size:clamp(24px,3.4vw,38px);line-height:1.24;color:#5A2435;margin:0;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.bigquote cite{display:block;margin-top:18px;font-family:'IBM Plex Mono',monospace;font-style:normal;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#7C4152}
.bigquote::after{content:"";display:block;width:44px;height:1px;background:#B88490;margin-top:22px}

/* ---- 17. dark editorial band inside long posts ---- */
.darkband{background:#38121F;color:#F4ECEF;padding:clamp(44px,7vw,72px) clamp(22px,6vw,64px);margin:52px 0}
.darkband h2,.darkband h3{color:#F4ECEF!important;margin-top:0}
.darkband p{color:#EBDDE1}
.darkband .eyebrow,.darkband cite{color:#B88490}
.darkband a{color:#F4ECEF;border-bottom:1px solid #B88490}
.darkband .bigquote::before{color:#B88490;opacity:.22}
.darkband .bigquote q,.darkband .bigquote p{color:#F4ECEF;text-shadow:none}
.darkband .bigquote::after{background:#B88490}

/* ---- hero video, with a still fallback ---- */
.hero-video{z-index:1}
.hero-still{position:absolute;inset:0;z-index:0}
@media(prefers-reduced-motion:reduce){ .hero-video{display:none} .hero-still{z-index:2} }

/* CTA FIGURE */
.cta-band{text-align:left}
.cta-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,5vw,60px);align-items:center}
.cta-figure{margin:0;overflow:hidden;background:rgba(255,255,255,.06)}
.cta-figure img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.cta-band:hover .cta-figure img{transform:scale(1.035)}
.cta-copy .h2{margin:0 0 6px}
.cta-copy p{margin-left:0;margin-right:0}
.cta-copy .cta-actions{justify-content:flex-start}
@media (max-width:760px){
  .cta-band{text-align:center}
  .cta-inner{grid-template-columns:1fr;gap:26px}
  .cta-figure{max-width:260px;margin:0 auto}
  .cta-figure img{aspect-ratio:4/3}
  .cta-copy p{margin-left:auto;margin-right:auto}
  .cta-copy .cta-actions{justify-content:center}
}
/* END CTA FIGURE */
/* STORY ROW */
.hstory-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.hstory-card{display:block;color:#202124}
.hstory-card picture{display:block;overflow:hidden;background:#EEEAE4}
.hstory-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.hstory-card:hover img{transform:scale(1.045)}
.hstory-kicker{margin-top:18px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:#7C4152}
.hstory-h{margin:11px 0 0;font-family:'Bodoni Moda',serif;font-weight:400;font-size:25px;
  line-height:1.18;color:#5A2435}
.hstory-card:hover .hstory-h{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.hstory-p{margin:10px 0 0;font-size:15px;line-height:1.65}
@media (max-width:900px){.hstory-row{grid-template-columns:1fr 1fr;gap:22px}}
@media (max-width:600px){.hstory-row{grid-template-columns:1fr}}
/* END STORY ROW */
/* ASK BOX */
.askbox{margin:0 0 30px;--raise-x:9px;--raise-y:9px}
.askbox-front{padding:clamp(26px,3vw,38px) clamp(24px,3vw,36px) clamp(28px,3vw,36px)}
.ask-tag{display:inline-block;background:#B0304A;color:#fff;font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;padding:6px 12px;margin-bottom:16px}
.ask-eyebrow{margin:0;font-family:'Bodoni Moda',serif;font-weight:400;
  font-size:clamp(28px,3.2vw,40px);line-height:1.02;color:#5A2435;letter-spacing:-.01em}
.ask-lede{margin:14px 0 0;font-size:15.5px;line-height:1.62;color:#4A4B50;max-width:430px}
.tchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.tchip{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;border:1.5px solid #B0304A;border-radius:999px;
  padding:9px 16px;background:#fff;color:#B0304A;
  animation-duration:14.0s;animation-timing-function:var(--ease);
  animation-iteration-count:infinite;will-change:transform}
.tsays{position:relative;margin-top:22px;min-height:44px;padding-top:18px;border-top:1px solid #E5E0D8}
.tsay{position:absolute;left:0;right:0;top:18px;opacity:0;font-family:'Nothing You Could Do',cursive;
  font-size:clamp(23px,2.4vw,29px);line-height:1.25;color:#B0304A;
  animation-duration:14.0s;animation-timing-function:var(--ease);animation-iteration-count:infinite}
@media (max-width:560px){
  .ask-eyebrow{font-size:26px}
  .tchip{font-size:10px;padding:7px 13px}
  .tsay{font-size:21px}.tsays{min-height:56px}
}
.tchip.tc-0{animation-name:tc0}
.tsay.ts-0{animation-name:ts0}
.tchip.tc-1{animation-name:tc1}
.tsay.ts-1{animation-name:ts1}
.tchip.tc-2{animation-name:tc2}
.tsay.ts-2{animation-name:ts2}
.tchip.tc-3{animation-name:tc3}
.tsay.ts-3{animation-name:ts3}
.tchip.tc-4{animation-name:tc4}
.tsay.ts-4{animation-name:ts4}
@keyframes tc0{0%,16.43%{background:#B0304A;border-color:#B0304A;color:#FFF;transform:translateY(-3px);box-shadow:0 8px 18px -8px rgba(176,48,74,.65)}20.00%,100%{background:rgba(176,48,74,.06);border-color:rgba(176,48,74,.32);color:#B0304A;transform:translateY(0);box-shadow:0 0 0 rgba(176,48,74,0)}}
@keyframes ts0{0%,16.43%{opacity:1;transform:translateY(0)}20.00%,100%{opacity:0;transform:translateY(6px)}}
@keyframes tc1{0%,16.43%{background:rgba(176,48,74,.06);border-color:rgba(176,48,74,.32);color:#B0304A;transform:translateY(0);box-shadow:0 0 0 rgba(176,48,74,0)}20.00%,36.43%{background:#B0304A;border-color:#B0304A;color:#FFF;transform:translateY(-3px);box-shadow:0 8px 18px -8px rgba(176,48,74,.65)}40.00%,100%{background:rgba(176,48,74,.06);border-color:rgba(176,48,74,.32);color:#B0304A;transform:translateY(0);box-shadow:0 0 0 rgba(176,48,74,0)}}
@keyframes ts1{0%,16.43%{opacity:0;transform:translateY(6px)}20.00%,36.43%{opacity:1;transform:translateY(0)}40.00%,100%{opacity:0;transform:translateY(6px)}}
@keyframes tc2{0%,36.43%{background:rgba(176,48,74,.06);border-color:rgba(176,48,74,.32);color:#B0304A;transform:translateY(0);box-shadow:0 0 0 rgba(176,48,74,0)}40.00%,56.43%{background:#B0304A;border-color:#B0304A;color:#FFF;transform:translateY(-3px);box-shadow:0 8px 18px -8px rgba(176,48,74,.65)}60.00%,100%{background:rgba(176,48,74,.06);border-color:rgba(176,48,74,.32);color:#B0304A;transform:translateY(0);box-shadow:0 0 0 rgba(176,48,74,0)}}
@keyframes ts2{0%,36.43%{opacity:0;transform:translateY(6px)}40.00%,56.43%{opacity:1;transform:translateY(0)}60.00%,100%{opacity:0;transform:translateY(6px)}}
@keyframes tc3{0%,56.43%{background:rgba(176,48,74,.06);border-color:rgba(176,48,74,.32);color:#B0304A;transform:translateY(0);box-shadow:0 0 0 rgba(176,48,74,0)}60.00%,76.43%{background:#B0304A;border-color:#B0304A;color:#FFF;transform:translateY(-3px);box-shadow:0 8px 18px -8px rgba(176,48,74,.65)}80.00%,100%{background:rgba(176,48,74,.06);border-color:rgba(176,48,74,.32);color:#B0304A;transform:translateY(0);box-shadow:0 0 0 rgba(176,48,74,0)}}
@keyframes ts3{0%,56.43%{opacity:0;transform:translateY(6px)}60.00%,76.43%{opacity:1;transform:translateY(0)}80.00%,100%{opacity:0;transform:translateY(6px)}}
@keyframes tc4{0%,76.43%{background:rgba(176,48,74,.06);border-color:rgba(176,48,74,.32);color:#B0304A;transform:translateY(0);box-shadow:0 0 0 rgba(176,48,74,0)}80.00%,96.43%{background:#B0304A;border-color:#B0304A;color:#FFF;transform:translateY(-3px);box-shadow:0 8px 18px -8px rgba(176,48,74,.65)}100.00%,100%{background:rgba(176,48,74,.06);border-color:rgba(176,48,74,.32);color:#B0304A;transform:translateY(0);box-shadow:0 0 0 rgba(176,48,74,0)}}
@keyframes ts4{0%,76.43%{opacity:0;transform:translateY(6px)}80.00%,96.43%{opacity:1;transform:translateY(0)}100.00%,100%{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion: reduce){
.tchip,.tsay{animation:none!important}
.tchip{background:#fff;border-color:#B0304A;color:#B0304A;transform:none}
.tsay{position:static;opacity:1}
.tsay:not(.ts-0){display:none}}
/* END ASK BOX */
/* STORIES EDITORIAL */
.feat-rule{display:flex;align-items:center;gap:16px;margin:6px 0 26px}
.feat-rule::after{content:"";flex:1;height:1px;background:#E5E0D8}
.feat-rule span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:#B0304A}
.feat-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:26px;align-items:start}
.feat-card{display:block;color:#202124;position:relative}
.feat-img{display:block;overflow:hidden;background:#EEEAE4}
.feat-img img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1),filter .5s}
.feat-lead .feat-img img{aspect-ratio:4/5}
.feat-card:hover .feat-img img{transform:scale(1.05)}
.feat-kick{display:inline-block;margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:#B0304A}
.feat-h{margin:9px 0 0;font-family:'Bodoni Moda',serif;font-weight:400;line-height:1.1;color:#5A2435;
  font-size:clamp(22px,2.1vw,28px)}
.feat-lead .feat-h{font-size:clamp(28px,3.1vw,42px)}
.feat-p{margin:10px 0 0;font-size:15px;line-height:1.62;color:#4A4B50}
.feat-lead .feat-p{font-size:16px;max-width:460px}
.feat-more{display:inline-block;margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:#5A2435;border-bottom:1px solid #B88490;padding-bottom:2px}
.feat-card:hover .feat-more{border-bottom-color:#B0304A;color:#B0304A}
@media (max-width:1000px){.feat-grid{grid-template-columns:1fr 1fr}
  .feat-lead{grid-column:1/-1}.feat-lead .feat-img img{aspect-ratio:16/10}}
@media (max-width:600px){.feat-grid{grid-template-columns:1fr;gap:30px}
  .feat-lead .feat-img img{aspect-ratio:4/5}}
/* END STORIES EDITORIAL */
/* CLUB + HIRING */
.club-fields{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.club-fields input{padding:15px 16px;border:1px solid #D8D2CA;background:#FAF8F4;
  font-family:Archivo,sans-serif;font-size:16px;color:#202124}
.club-fields input[name="first-name"]{flex:1 1 150px;min-width:130px}
.club-fields input[name="email"]{flex:2 1 220px;min-width:180px}
.club-fields button{padding:15px 28px;border:0;background:#5A2435;color:#FAF8F4;
  font-family:Archivo,sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.club-opts{margin-top:16px;display:grid;gap:9px;max-width:460px}
.club-opt{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;
  color:#4A4B50;cursor:pointer}
.club-opt input{margin-top:3px;flex:none;width:15px;height:15px;accent-color:#B0304A;cursor:pointer}
.club-opt:hover span{color:#202124}
.club-fine{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:#6A6B70;max-width:440px}
.hire-in{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,60px);align-items:center;
  max-width:1180px;margin:0 auto}
@media (max-width:860px){.hire-in{grid-template-columns:1fr;gap:26px}}
/* END CLUB + HIRING */
/* TEXT MOVEMENT */
.rv-words .w-o{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.rv-words .w-i{display:inline-block;transform:translateY(105%);opacity:0;
  transition:transform .78s cubic-bezier(.22,1,.36,1),opacity .6s cubic-bezier(.22,1,.36,1);will-change:transform}
.rv-words.is-in .w-i{transform:translateY(0);opacity:1}
@media (prefers-reduced-motion: reduce){
  .rv-words .w-i{transform:none!important;opacity:1!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
}
/* END TEXT MOVEMENT */
/* TAGLINE 2 */
.tagline2{margin:20px 0 0;font-family:'Bodoni Moda',serif;font-size:clamp(19px,1.7vw,23px);
  line-height:1.25;color:#5A2435;letter-spacing:.005em}
.tagline2 span{position:relative;display:inline-block}
.tagline2 span::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:2px;
  background:#B0304A;transform:scaleX(0);transform-origin:left;
  animation:tagUnderline 1s cubic-bezier(.22,1,.36,1) 1.15s forwards}
@keyframes tagUnderline{to{transform:scaleX(1)}}
.tagline2 em{font-style:italic;color:#7C4152}
.topbar-tag{font-style:italic;letter-spacing:.02em;opacity:.9}
@media (prefers-reduced-motion: reduce){.tagline2 span::after{animation:none;transform:scaleX(1)}}
@media (max-width:760px){.topbar-tag{display:none}}
/* END TAGLINE 2 */
/* BOB EDIT */
.bobindex{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:26px;border-top:1px solid #E5E0D8}
.bobjump{display:inline-flex;align-items:baseline;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#5A2435;border:1px solid #D8D2CA;border-radius:999px;
  padding:7px 14px;background:#FDFBF8;transition:.25s cubic-bezier(.16,1,.3,1)}
.bobjump span{color:#B0304A;font-size:9.5px}
.bobjump:hover{background:#5A2435;border-color:#5A2435;color:#FAF8F4;transform:translateY(-2px)}
.bobjump:hover span{color:#F7EDBF}
.bobcard{display:grid;grid-template-columns:96px 1fr;gap:clamp(16px,3vw,34px);align-items:start;
  padding:clamp(26px,3.4vw,40px) 0;border-top:1px solid rgba(90,36,53,.14);scroll-margin-top:90px}
.bobcard:first-child{border-top:0;padding-top:6px}
.bobnum{font-family:'Bodoni Moda',serif;font-size:clamp(44px,5.4vw,74px);line-height:.85;color:#5A2435;
  opacity:.24;letter-spacing:-.02em}
.bobname{margin:0!important;font-size:clamp(23px,2.6vw,32px)!important;line-height:1.1}
.bobdeck{margin:9px 0 0;font-family:'Nothing You Could Do',cursive;font-size:21px;color:#B0304A;line-height:1.35}
.bobbody > p{margin:14px 0 0;font-size:16px;line-height:1.72;color:#2C2A28;max-width:620px}
.boblabel{margin:22px 0 0!important;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:#7C4152}
.boblook{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px;max-width:620px}
.boblook li{font-size:13.5px;line-height:1.3;color:#4A4B50;background:#FAF8F4;border:1px solid #E5E0D8;
  border-radius:2px;padding:6px 11px}
.bobnote{margin:9px 0 0!important;font-size:15.5px;line-height:1.68;color:#4A4B50;max-width:620px;
  padding-left:16px;border-left:2px solid #B88490}
.refs li{font-size:14px;line-height:1.6;margin:0 0 6px}
@media (max-width:640px){
  .bobcard{grid-template-columns:1fr;gap:6px}
  .bobnum{font-size:38px;opacity:.3}
  .boblook{gap:6px}.boblook li{font-size:13px;padding:5px 10px}
}
/* END BOB EDIT */
/* LOCAL EDIT */
.le-kicker{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:#B0304A;margin:0}
.le-h1{margin-top:14px!important}
.le-deck{margin:14px 0 0;font-family:'Bodoni Moda',serif;font-size:clamp(19px,2vw,24px);line-height:1.32;
  color:#7C4152;max-width:620px}
.le-fig{margin:30px 0 32px}
.le-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#EEEAE4}
.le-live{padding:20px 24px;background:#FDFBF8;border-left:2px solid #B0304A}
.le-know{margin:14px 0 0;padding-left:20px;max-width:620px}
.le-know li{font-size:15.5px;line-height:1.7;color:#2C2A28;margin:0 0 6px}
.le-note{margin:18px 0 0;font-size:14px;line-height:1.6;color:#6A6B70;max-width:620px;
  padding-left:14px;border-left:2px solid #D8D2CA}
.le-geo{margin:34px 0 0;padding-top:24px;border-top:1px solid #E5E0D8}
.le-geo a{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#5A2435;border-bottom:1px solid #B88490;padding-bottom:3px}
.le-closer{margin:24px 0 0;font-family:'Nothing You Could Do',cursive;font-size:23px;color:#202124;max-width:560px}
.le-src-h{margin:34px 0 6px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#7C4152}
.le-src{margin:0;padding-left:18px}
.le-src li{font-size:13px;line-height:1.6;color:#6A6B70}
.le-back{margin:30px 0 0;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase}
.le-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.le-card{display:block;color:#202124}
.le-thumb{display:block;overflow:hidden;background:#EEEAE4}
.le-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.le-card:hover .le-thumb img{transform:scale(1.05)}
.le-cat{display:inline-block;margin-top:15px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#B0304A}
.le-cardh{margin:8px 0 0;font-family:'Bodoni Moda',serif;font-weight:400;font-size:23px;line-height:1.16;
  color:#5A2435}
.le-card:hover .le-cardh{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.le-carddeck{margin:9px 0 0;font-size:14.5px;line-height:1.6;color:#4A4B50}
.le-shorts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
.le-short{background:#FDFBF8;border:1px solid #E5E0D8;padding:26px}
.le-shorth{margin:8px 0 0;font-family:'Bodoni Moda',serif;font-weight:400;font-size:21px;color:#5A2435}
.le-shortdeck{margin:8px 0 0;font-family:'Nothing You Could Do',cursive;font-size:18px;color:#B0304A;line-height:1.35}
.le-shortbody{margin:12px 0 0;font-size:14.5px;line-height:1.65;color:#4A4B50}
.le-addr{margin:12px 0 0;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:#7C4152}
.le-out{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#5A2435;border-bottom:1px solid #B88490;padding-bottom:2px}
@media (max-width:980px){.le-grid,.le-shorts{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.le-grid,.le-shorts{grid-template-columns:1fr}}
/* END LOCAL EDIT */
/* HERO SLIDESHOW */
.hero-media{position:relative;min-height:680px;background:#EEEAE4;overflow:hidden}
.hslide{position:absolute;inset:0;opacity:0;will-change:opacity}
.hslide img,.hslide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hslide img{animation:heroDrift 16.6s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.015)}to{transform:scale(1.07) translate(-1.1%,-0.7%)}}
.hero-dots{position:absolute;left:0;right:0;bottom:20px;display:flex;gap:7px;justify-content:center;z-index:3}
.hero-dots i{width:26px;height:2px;background:rgba(255,255,255,.55);display:block}
.hslide.hs-0{animation-name:hs0;animation-duration:16.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes hs0{0%,33.133%{opacity:1}38.554%,94.578%{opacity:0}100%{opacity:1}}
.hero-dots .hd-0{animation:hd0 16.6s step-end infinite}
@keyframes hd0{0%,38.154%{background:#5A2435}38.554%,100%{background:rgba(255,255,255,.55)}}
.hslide.hs-1{animation-name:hs1;animation-duration:16.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes hs1{0%,33.133%{opacity:0}38.554%,53.614%{opacity:1}59.036%,100%{opacity:0}}
.hero-dots .hd-1{animation:hd1 16.6s step-end infinite}
@keyframes hd1{0%,38.154%{background:rgba(255,255,255,.55)}38.554%,58.636%{background:#5A2435}59.036%,100%{background:rgba(255,255,255,.55)}}
.hslide.hs-2{animation-name:hs2;animation-duration:16.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes hs2{0%,53.614%{opacity:0}59.036%,74.096%{opacity:1}79.518%,100%{opacity:0}}
.hero-dots .hd-2{animation:hd2 16.6s step-end infinite}
@keyframes hd2{0%,58.636%{background:rgba(255,255,255,.55)}59.036%,79.118%{background:#5A2435}79.518%,100%{background:rgba(255,255,255,.55)}}
.hslide.hs-3{animation-name:hs3;animation-duration:16.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes hs3{0%,74.096%{opacity:0}79.518%,94.578%{opacity:1}100.000%,100%{opacity:0}}
.hero-dots .hd-3{animation:hd3 16.6s step-end infinite}
@keyframes hd3{0%,79.118%{background:rgba(255,255,255,.55)}79.518%,99.600%{background:#5A2435}100.000%,100%{background:rgba(255,255,255,.55)}}
@media (prefers-reduced-motion: reduce){
.hslide{animation:none!important}.hslide.hs-1{opacity:1}
.hslide.hs-0,.hslide.hs-2,.hslide.hs-3{opacity:0}
.hslide img{animation:none!important;transform:none!important}
.hero-video{display:none}.hero-dots{display:none}}
@media (max-width:1100px){.hero-media{min-height:600px}}
@media (max-width:860px){.hero-media{min-height:430px}.hero-dots{bottom:14px}}
/* END HERO */
/* TOPBAR ROTATOR */

.topbar-rot{position:relative;display:inline-block;font-style:italic;letter-spacing:.02em;
  height:1.2em;min-width:19ch;vertical-align:bottom;overflow:hidden}
.topbar-rot span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;
  animation-duration:21.0s;animation-timing-function:cubic-bezier(.22,1,.36,1);
  animation-iteration-count:infinite;will-change:opacity,transform}

.topbar-rot .tt-0{animation-name:tt0}
@keyframes tt0{0%,17.38%{opacity:1;transform:translateY(0)}20.00%,97.38%{opacity:0;transform:translateY(-7px)}97.38%,100%{opacity:0;transform:translateY(7px)}}
.topbar-rot .tt-1{animation-name:tt1}
@keyframes tt1{0%,17.38%{opacity:0;transform:translateY(7px)}20.00%,37.38%{opacity:1;transform:translateY(0)}40.00%,100%{opacity:0;transform:translateY(-7px)}}
.topbar-rot .tt-2{animation-name:tt2}
@keyframes tt2{0%,37.38%{opacity:0;transform:translateY(7px)}40.00%,57.38%{opacity:1;transform:translateY(0)}60.00%,100%{opacity:0;transform:translateY(-7px)}}
.topbar-rot .tt-3{animation-name:tt3}
@keyframes tt3{0%,57.38%{opacity:0;transform:translateY(7px)}60.00%,77.38%{opacity:1;transform:translateY(0)}80.00%,100%{opacity:0;transform:translateY(-7px)}}
.topbar-rot .tt-4{animation-name:tt4}
@keyframes tt4{0%,77.38%{opacity:0;transform:translateY(7px)}80.00%,97.38%{opacity:1;transform:translateY(0)}100.00%,100%{opacity:0;transform:translateY(-7px)}}
@media (prefers-reduced-motion: reduce){
  .topbar-rot{height:auto;min-width:0;overflow:visible}
  .topbar-rot span{position:static;opacity:1;animation:none;transform:none}
  .topbar-rot span:not(.tt-0){display:none}}
@media (max-width:820px){.topbar-rot{display:none}}
/* END TOPBAR ROTATOR */
/* MOTION SYSTEM */
:root{
  --t-fast:180ms; --t-std:300ms; --t-ed:620ms; --t-amb:11s;
  --ease:cubic-bezier(.22,1,.36,1);
  --raise-x:8px; --raise-y:8px;
}
@media (max-width:760px){:root{--raise-x:5px;--raise-y:5px}}

/* ---- RAISED / OFFSET EDITORIAL CARD ---- */
.raised{position:relative;display:block;isolation:isolate;
  transition:transform var(--t-std) var(--ease)}
.raised::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--raise-bg,#B0304A);
  transform:translate(var(--raise-x),var(--raise-y));
  transition:transform var(--t-std) var(--ease)}
.raised-front{position:relative;background:var(--raise-face,#FAF8F4);
  border:1px solid #E5E0D8;height:100%}
@media (hover:hover){
  a.raised:hover,a.raised:focus-visible{transform:translate(-3px,-4px)}
  a.raised:hover::before,a.raised:focus-visible::before{transform:translate(calc(var(--raise-x) + 3px),calc(var(--raise-y) + 4px))}
}
a.raised:focus-visible{outline:2px solid #5A2435;outline-offset:6px}
.raised .arrow{display:inline-block;transition:transform var(--t-fast) var(--ease)}
@media (hover:hover){a.raised:hover .arrow{transform:translateX(6px)}}

/* ---- SWITCH: second image crossfades in ---- */
.switch{position:relative;display:block;overflow:hidden}
.switch img{display:block;width:100%;height:100%;object-fit:cover;
  transition:opacity var(--t-std) var(--ease),transform var(--t-std) var(--ease)}
.switch .sw-b{position:absolute;inset:0;opacity:0}
@media (hover:hover){
  .switch:hover .sw-a,.switch:focus-visible .sw-a{opacity:0}
  .switch:hover .sw-b,.switch:focus-visible .sw-b{opacity:1;transform:scale(1.03)}
}
.sw-tag{position:absolute;left:0;bottom:0;z-index:2;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  background:#5A2435;color:#F7EDBF;padding:6px 11px}
@media (hover:hover){.switch:hover .sw-tag::after{content:" \2192 after"}}

/* ---- GLIDE: topic ticker ---- */
.ticker{position:relative;display:flex;align-items:center;gap:18px;
  border-top:1px solid #E5E0D8;border-bottom:1px solid #E5E0D8;
  padding:14px 0;overflow:hidden;background:inherit}
.ticker-lbl{flex:none;padding-left:clamp(18px,4vw,40px);
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#7C4152;white-space:nowrap}
.ticker-vp{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker-track{display:flex;width:max-content;animation:glide 42s linear infinite}
@keyframes glide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-track a,.ticker-track span{flex:none;padding:0 26px;
  font-family:'Bodoni Moda',serif;font-size:clamp(20px,2.2vw,27px);color:#5A2435;white-space:nowrap;
  transition:color var(--t-fast) var(--ease)}
.ticker-track a:hover{color:#B0304A}
.ticker-track .dot{color:#B0304A;padding:0 4px;font-size:18px}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-btn{flex:none;margin-right:clamp(14px,3vw,28px);width:26px;height:26px;border:1px solid #D8D2CA;
  background:#FDFBF8;color:#5A2435;cursor:pointer;display:grid;place-items:center;font-size:9px;
  line-height:1;padding:0;transition:background var(--t-fast) var(--ease)}
.ticker-btn:hover{background:#5A2435;color:#FAF8F4;border-color:#5A2435}
.ticker-btn:focus-visible{outline:2px solid #5A2435;outline-offset:3px}

/* ---- global motion pause ---- */
html.motion-off .ticker-track,
html.motion-off .topbar-rot span,
html.motion-off .tchip,
html.motion-off .tsay,
html.motion-off .hslide,
html.motion-off .hslide img,
html.motion-off .hero-dots i{animation-play-state:paused!important}
html.motion-off .hero-video{display:none}
.motion-toggle{background:none;border:0;padding:0 0 0 14px;cursor:pointer;color:inherit;
  font:inherit;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;
  transition:opacity var(--t-fast) var(--ease)}
.motion-toggle:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.motion-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media (max-width:900px){.motion-toggle{display:none}}

/* ---- nav scroll reaction ---- */
.site-header{transition:padding var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
  box-shadow var(--t-fast) var(--ease)}
body.scrolled .site-header{background:rgba(250,248,244,.96);backdrop-filter:blur(6px);
  box-shadow:0 1px 0 rgba(90,36,53,.10),0 10px 26px -22px rgba(90,36,53,.5)}
body.scrolled .site-header{padding-top:10px;padding-bottom:10px}
.navlink{position:relative}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:#B0304A;
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-fast) var(--ease)}
.navlink:hover::after,.navlink:focus-visible::after,.navlink.is-active::after{transform:scaleX(1);transform-origin:left}

@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none;transform:none}
  .ticker-vp{overflow-x:auto}
  .raised,.raised::before,.switch img,.arrow{transition:none!important}
  .site-header{transition:none}
}
/* END MOTION SYSTEM */
/* RAISED APPLIED */
.feat-card.raised{--raise-x:9px;--raise-y:9px;background:#FAF8F4;border:1px solid #E5E0D8;padding:0 0 22px}
.feat-card.raised .feat-img{margin:0}
.feat-card.raised .feat-kick,.feat-card.raised .feat-h,
.feat-card.raised .feat-p,.feat-card.raised .feat-more{padding-left:22px;padding-right:22px}
.feat-card.raised:nth-of-type(2){--raise-bg:#F7EDBF}
.feat-card.raised:nth-of-type(3){--raise-bg:#5A2435}
.hair-crimes-case{--raise-x:9px;--raise-y:9px}
article.raised > .raised-front{padding:clamp(24px,3vw,34px)}
article.raised{margin-bottom:34px}
/* END RAISED APPLIED */
/* EDIT ASYM */
.le-grid-asym{display:grid;grid-template-columns:repeat(6,1fr);gap:34px 30px;align-items:start}
.le-grid-asym .le-card{grid-column:span 2}
.le-grid-asym .le-lead{grid-column:span 4}
.le-grid-asym .le-card:nth-child(2){grid-column:span 2}
.le-grid-asym .le-card:nth-child(4),
.le-grid-asym .le-card:nth-child(5){grid-column:span 3}
.le-card.raised{background:#FAF8F4;border:1px solid #E5E0D8;padding:0 0 20px;--raise-x:8px;--raise-y:8px}
.le-card.raised .le-cat,.le-card.raised .le-cardh,.le-card.raised .le-carddeck{padding-left:20px;padding-right:20px}
.le-lead .le-thumb img{aspect-ratio:16/10}
.le-lead .le-cardh{font-size:clamp(26px,2.8vw,34px)}
.le-lead .le-carddeck{font-size:16px;max-width:520px}
@media (max-width:980px){
  .le-grid-asym{grid-template-columns:repeat(4,1fr)}
  .le-grid-asym .le-card,.le-grid-asym .le-card:nth-child(2),
  .le-grid-asym .le-card:nth-child(4),.le-grid-asym .le-card:nth-child(5){grid-column:span 2}
  .le-grid-asym .le-lead{grid-column:span 4}
}
@media (max-width:620px){
  .le-grid-asym{grid-template-columns:1fr}
  .le-grid-asym .le-card,.le-grid-asym .le-lead,
  .le-grid-asym .le-card:nth-child(2),.le-grid-asym .le-card:nth-child(4),
  .le-grid-asym .le-card:nth-child(5){grid-column:span 1}
}
/* END EDIT ASYM */
.byline{margin:14px 0 0;font-size:14px;line-height:1.55;color:#6A6B70;max-width:600px;
  padding-left:14px;border-left:2px solid #B88490}
.byline a{color:#5A2435;border-bottom:1px solid #B88490}
/* PRACTICAL */
.practical{margin-top:28px;border-top:1px solid #E5E0D8}
.pr-row{display:grid;grid-template-columns:210px 1fr;gap:clamp(18px,3vw,40px);
  padding:26px 0;border-bottom:1px solid #E5E0D8}
.pr-q{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#5A2435;line-height:1.5}
.pr-a p{margin:0 0 12px;font-size:16px;line-height:1.72;color:#2C2A28;max-width:620px}
.pr-a p:last-child{margin-bottom:0}
.consult-note{max-width:640px;margin-bottom:26px;padding:20px 24px;background:#F4ECEF;
  border-left:3px solid #B0304A;font-size:15.5px;line-height:1.68}
.book-janet{max-width:640px;padding:18px 22px;background:#FDFBF8;border:1px solid #E5E0D8;font-size:15.5px}
@media (max-width:700px){.pr-row{grid-template-columns:1fr;gap:10px;padding:22px 0}}
/* END PRACTICAL */
/* NAILS */
.shades{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px;margin-top:30px}
.shade{margin:0}
.shade picture{display:block;overflow:hidden;background:#EEEAE4}
.shade img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform var(--t-std) var(--ease)}
@media (hover:hover){.shade:hover img{transform:scale(1.035)}}
.shade figcaption{margin-top:13px}
.sh-n{display:block;font-family:'Bodoni Moda',serif;font-size:19px;color:#5A2435;line-height:1.2}
.sh-x{display:block;margin-top:5px;font-size:13.5px;line-height:1.55;color:#4A4B50}
@media (max-width:900px){.shades{grid-template-columns:1fr 1fr;gap:22px 18px}}
@media (max-width:520px){.shades{grid-template-columns:1fr 1fr;gap:18px 14px}
  .sh-n{font-size:17px}.sh-x{font-size:12.5px}}
/* END NAILS */
/* BOB BOARDS */
.bobcard.has-board{grid-template-columns:96px 1fr 300px}
.bobboard{margin:0;position:relative;--raise-x:7px;--raise-y:7px}
.bobboard::before{content:"";position:absolute;inset:0;z-index:0;background:#B0304A;
  transform:translate(var(--raise-x),var(--raise-y));transition:transform var(--t-std) var(--ease)}
.bobboard picture{position:relative;display:block;overflow:hidden;border:1px solid #E5E0D8;background:#EEEAE4}
.bobboard img{width:100%;height:auto;display:block;transition:transform var(--t-std) var(--ease)}
@media (hover:hover){
  .bobboard:hover img{transform:scale(1.02)}
  .bobboard:hover::before{transform:translate(calc(var(--raise-x) + 3px),calc(var(--raise-y) + 3px))}
}
.bobboard figcaption{position:relative;margin-top:14px;font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#B0304A}
.bobcard:nth-of-type(3n+2) .bobboard::before{background:#F7EDBF}
.bobcard:nth-of-type(3n) .bobboard::before{background:#5A2435}
@media (max-width:1080px){
  .bobcard.has-board{grid-template-columns:96px 1fr}
  .bobboard{grid-column:2;max-width:380px;margin-top:22px}
}
@media (max-width:640px){
  .bobcard.has-board{grid-template-columns:1fr}
  .bobboard{grid-column:1;max-width:100%;margin-top:18px}
}
/* END BOB BOARDS */

/* MENU ROW BOOKING LINK */
.menu-book{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#5A2435;border-bottom:1px solid #B88490;
  padding-bottom:2px;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.menu-book:hover{color:#B0304A;border-color:#B0304A}
.menu-meta{display:flex;flex-direction:column;align-items:flex-end}
@media(max-width:600px){.menu-meta{align-items:flex-start}.menu-book{margin-top:6px}}

/* NAILS & SKIN QUALIFIER — no live booking service ID (booking master, 24 Aug 2026) */
.menu-approx{display:block;margin-top:6px;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:#7C4152;opacity:.85}
@media(max-width:600px){.menu-approx{margin-top:4px}}

/* GUIDED CONSULTATION */
.cx{margin:34px 0 0;border:1px solid var(--oyster);background:var(--white-50);padding:clamp(20px,3.4vw,34px)}
.cx-bar{height:2px;background:var(--oyster);margin-bottom:16px;overflow:hidden}
.cx-bar-fill{height:2px;background:var(--merlot);width:16%;transition:width var(--t-ed) var(--ease)}
.cx-step{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--merlot-500);margin:0 0 14px}
.cx-q{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.6vw,36px);line-height:1.08;
  color:var(--merlot);margin:0 0 8px;letter-spacing:-.01em}
.cx-help{font-size:14.5px;line-height:1.6;color:#4A4B50;margin:0 0 20px;max-width:56ch}
.cx-opts{display:grid;gap:9px}
.cx-opt{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;
  min-height:56px;padding:14px 16px;text-align:left;background:var(--cream,#FAF8F4);
  border:1px solid var(--oyster);border-radius:0;cursor:pointer;
  font-family:var(--sans);font-size:16px;line-height:1.4;color:var(--graphite);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease)}
.cx-opt:hover{border-color:var(--merlot);transform:translateX(3px);background:#fff}
.cx-opt:focus-visible{outline:2px solid var(--merlot);outline-offset:2px}
.cx-arrow{color:var(--merlot-250);font-size:15px;flex-shrink:0;transition:color var(--t-fast) var(--ease)}
.cx-opt:hover .cx-arrow{color:var(--merlot)}
.cx-nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--oyster)}
.cx-back,.cx-restart{background:none;border:0;cursor:pointer;padding:10px 4px;min-height:44px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--merlot-500)}
.cx-back:hover,.cx-restart:hover{color:var(--rasp)}
.cx-back:focus-visible,.cx-restart:focus-visible{outline:2px solid var(--merlot);outline-offset:2px}
.cx-out-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--merlot-500);margin:0 0 10px}
.cx-out-name{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,42px);line-height:1.04;
  color:var(--merlot);margin:0 0 6px;letter-spacing:-.01em}
.cx-out-meta{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--merlot-500);margin:0 0 18px}
.cx-out-why{font-size:16px;line-height:1.68;color:var(--graphite);margin:0 0 14px;max-width:60ch}
.cx-out-read{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 22px}
.cx-out-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.cx-caveat{font-size:13.5px;line-height:1.6;color:#4A4B50;margin:0;padding-top:16px;
  border-top:1px solid var(--oyster);max-width:62ch}
.cx-out-red{border-left:3px solid var(--rasp);padding-left:clamp(14px,2.2vw,22px)}
@media(max-width:600px){
  .cx{padding:18px 15px}
  .cx-opt{font-size:16px;min-height:60px}
  .cx-out-cta .btn-dark,.cx-out-cta .btn-outline{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .cx-bar-fill,.cx-opt,.cx-arrow{transition:none}
  .cx-opt:hover{transform:none}
}

/* MOBILE FORM CONTROLS — iOS auto-zoom guard.
   Safari zooms the viewport when a focused control is under 16px. */
input, select, textarea,
.club-form input[type=email], .club-fields input{ font-size:16px; }
@media(max-width:760px){
  input, select, textarea{ font-size:16px !important; min-height:48px; }
}

/* LOOKS — visual service chooser. Hover on desktop, always-visible on mobile. No JS. */
.lk-nav{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--merlot-500);margin:20px 0 0}
.lk-nav a{color:var(--merlot-500);border-bottom:1px solid var(--merlot-250);padding-bottom:2px}
.lk-nav a:hover{color:var(--rasp);border-color:var(--rasp)}
.lk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:22px}
.lk{background:var(--cream);border:1px solid var(--oyster)}
.lk-img{position:relative;overflow:hidden;background:var(--oyster-100)}
.lk-img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform var(--t-ed) var(--ease)}
.lk-over{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:12px;padding:20px;background:rgba(56,18,31,.92);opacity:0;
  transition:opacity var(--t-std) var(--ease)}
.lk:hover .lk-img img,.lk:focus-within .lk-img img{transform:scale(1.03)}
.lk:hover .lk-over,.lk:focus-within .lk-over{opacity:1}
.lk-desc{font-size:14.5px;line-height:1.55;color:#F4ECEF;margin:0}
.lk-book{align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--butter);border-bottom:1px solid var(--butter);padding:8px 0 4px}
.lk-book:hover{color:#fff;border-color:#fff}
.lk-note{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--merlot-250)}
.lk-meta{padding:14px 15px 16px}
.lk-price{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rasp)}
.lk-name{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.15;
  color:var(--merlot);margin:6px 0 4px}
.lk-time{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6A6B70}
.lk-desc-m,.lk-meta .lk-book,.lk-meta .lk-note{display:none}
@media(max-width:1080px){.lk-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.lk-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(hover:none),(max-width:760px){
  /* no hover on touch — show everything inline instead */
  .lk-over{display:none}
  .lk-desc-m{display:block;font-size:14px;line-height:1.55;color:var(--graphite);margin:10px 0 0}
  .lk-meta .lk-book{display:inline-block;margin-top:12px;min-height:44px;line-height:28px;
    color:var(--merlot);border-color:var(--merlot-250)}
  .lk-meta .lk-note{display:block;margin-top:10px;color:var(--merlot-500)}
}
@media(max-width:430px){.lk-grid{grid-template-columns:1fr}.lk-name{font-size:22px}}
@media(prefers-reduced-motion:reduce){.lk-img img,.lk-over{transition:none}.lk:hover .lk-img img{transform:none}}

/* Gallery captions carry two names: what the salon books it as, and what the client
   walked in asking for. Added 25 Aug 2026. */
.work-tile figcaption{display:flex;flex-direction:column;gap:2px}
.tile-name{font-weight:600;color:var(--ink)}
.tile-trend{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--merlot)}


/* ===========================================================================
   MOVEMENT + PAGE COLOUR. Added 25 Aug 2026.
   Every page looked the same because every page used the same single accent.
   Each section of the site now carries its own accent, set on <body>, and the
   nav, rules and buttons pick it up. Same family, different temperature.
   =========================================================================== */
:root{ --page-accent: var(--merlot); --page-tint: #F7F2F4; }
body[data-section="services"]{ --page-accent:#7C4152; --page-tint:#F8F3F4; }
body[data-section="gallery"]  { --page-accent:#4E5E62; --page-tint:#F1F4F4; }
body[data-section="stories"]  { --page-accent:#6B5334; --page-tint:#F7F3EC; }
body[data-section="about"]    { --page-accent:#57503F; --page-tint:#F6F4EE; }
body[data-section="visit"]    { --page-accent:#3F5750; --page-tint:#EFF4F2; }
body[data-section="areas"]    { --page-accent:#5A4A6A; --page-tint:#F4F1F7; }

/* Nav: the underline grows from the middle instead of appearing, and the link lifts. */
.navlink{position:relative;border-bottom:0!important;transition:color .18s ease, transform .18s ease}
.navlink::after{content:"";position:absolute;left:50%;bottom:-3px;width:0;height:1.5px;
  background:var(--page-accent);transition:width .22s cubic-bezier(.2,.8,.2,1),left .22s cubic-bezier(.2,.8,.2,1)}
.navlink:hover{color:var(--page-accent);transform:translateY(-1px)}
.navlink:hover::after{left:0;width:100%}
.navlink.is-active{color:var(--page-accent)}
.navlink.is-active::after{left:0;width:100%}

/* Buttons rise and deepen rather than just changing colour. */
.btn-book,.btn-dark,.btn-outline,.topbar-book,.sticky-btn{
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, background .18s ease, color .18s ease}
.btn-book:hover,.btn-dark:hover,.topbar-book:hover,.sticky-btn:hover{
  transform:translateY(-2px);box-shadow:0 6px 18px rgba(90,36,53,.22)}
.btn-outline:hover{transform:translateY(-2px);background:var(--page-tint);border-color:var(--page-accent);color:var(--page-accent)}
.btn-book:active,.btn-dark:active,.btn-outline:active{transform:translateY(0);box-shadow:none}

/* Service and gallery tiles settle upward on hover instead of sitting still. */
.work-tile,.menu-row,.lk{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.work-tile:hover{transform:translateY(-3px)}
.work-tile img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.work-tile:hover img{transform:scale(1.035)}

/* The eyebrow rules and section headings borrow the page accent. */
.eyebrow{color:var(--page-accent)}
.h2::after{background:var(--page-accent)}

/* One full-width photograph at the top of the services page. */
.services-hero-single{margin:0 0 6px;position:relative;background:#38121F}
.services-hero-single img{width:100%;height:auto;display:block;max-height:520px;
  object-fit:cover;object-position:50% 28%}
.services-hero-single figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:clamp(16px,3vw,30px);
  background:linear-gradient(to top,rgba(56,18,31,.86),rgba(56,18,31,0));
  font-family:var(--mono);font-size:clamp(10px,1.4vw,11.5px);letter-spacing:.18em;
  text-transform:uppercase;color:#EBDDE1}

@media (prefers-reduced-motion: reduce){
  .navlink,.btn-book,.btn-dark,.btn-outline,.work-tile,.work-tile img,.topbar-book,.sticky-btn{transition:none!important}
  .navlink:hover,.btn-book:hover,.btn-dark:hover,.btn-outline:hover,.work-tile:hover{transform:none!important}
}

/* Hair Crimes before/after. Added 25 Aug 2026 — the page had no photographs at all. */
.crime-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,22px)}
.crime-pair figure{margin:0}
.crime-pair img{width:100%;height:auto;display:block}
.crime-pair figcaption{margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--page-accent)}
@media(max-width:640px){.crime-pair{grid-template-columns:1fr}}

/* Full-width editorial band. */
.texture-band{margin:0;position:relative;background:#2A2523}
.texture-band img{width:100%;height:auto;display:block;max-height:560px;object-fit:cover;object-position:60% 40%}
.texture-band figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,3vw,32px);
  background:linear-gradient(to top,rgba(30,26,25,.82),rgba(30,26,25,0));
  font-family:var(--mono);font-size:clamp(10px,1.4vw,11.5px);letter-spacing:.18em;
  text-transform:uppercase;color:#EFE7E2}

/* One photograph under the opening of every substantial page. Added 25 Aug 2026 — 23 pages
   were carrying 1,000-3,000 words with no image at all. */
.page-hero{margin:0 0 clamp(18px,3vw,34px);background:#EEEAE4}
.page-hero img{width:100%;height:auto;display:block;max-height:460px;object-fit:cover;object-position:50% 32%}

/* Hair Crimes poster. It is a PORTRAIT composition whose whole point — the letterboard
   reading HAIR CRIMES, CASE NO. — sits at 50-70% of the image height. The generic
   .page-hero rule caps height at 460px and crops with object-fit:cover, which removes
   exactly that. So this one overrides the crop and is shown whole, centred, at a size
   that still reads as an editorial plate rather than a snapshot. */
.hc-hero{background:transparent;margin:clamp(20px,4vw,44px) auto clamp(24px,4vw,48px);
  max-width:min(560px,88vw)}
.hc-hero img{max-height:none;height:auto;object-fit:contain;object-position:50% 50%;
  border:1px solid #E5E0D8}
@media(max-width:640px){.hc-hero{max-width:100%}}