/* ==========================================================================
   LAVISH LOOKS — Premium Salon Design System
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  /* Core palette — blush #F3CEC5 leads, black carries the type.
     The old deep rose-800 brown is gone; dark grounds use the ink ramp. */
  --blush-700:#C98D7D;   /* deepest blush — borders, hover states */
  --blush-600:#E2A897;
  --blush-500:#F3CEC5;   /* THE brand blush: header, washes, accents */
  --blush-300:#F8E3DD;
  --blush-100:#FCF3F0;

  --rose-950:#311C17;
  --rose-900:#452721;
  --rose-700:#764337;
  --rose-600:#925345;
  --rose-500:#B16959;
  --rose-400:#C38B7F;
  --rose-300:var(--blush-600);
  --rose-200:var(--blush-500);
  --rose-100:var(--blush-300);
  --rose-50 :var(--blush-100);

  --gold-700:#6E5418;  /* text-safe gold: 4.9:1 on the blush header, 7.1:1 on white */
  --gold-500:#C6A15B;
  --gold-400:#D9BC80;
  --gold-300:#E8D5A9;
  --gold-100:#F5EAD2;

  --cream:#FFFAF7;
  --paper:#FFF4EF;
  --ink-900:#211016;
  --ink-800:#2B1720;
  --ink-700:#4A2C36;
  --ink-500:#6B4F58;   /* darkened: 4.6:1 on cream (was #7A5D66 = 4.39:1) */
  --ink-300:#B79AA3;

  --white:#ffffff;

  /* Gentlemen section — distinct cool, charcoal palette (kept separate from the ladies' warm rose) */
  --men-ink:        #333A42;
  --men-ink-dark:   #1E2226;
  --men-accent:     #8A94A0;
  --men-accent-light:#D7DBE0;
  --men-surface:    #F3F2F1;

  /* Semantic */
  --bg:            var(--blush-100);
  --bg-alt:        var(--blush-300);
  --surface:       var(--white);
  --text:          #000000;
  --text-muted:    #4A4A4A;              /* neutral, not brown: 8.9:1 on blush */
  --primary:       var(--blush-500);
  --primary-strong:var(--blush-700);
  --primary-text:  #000000;              /* type is black everywhere it sits on light */
  --primary-dark:  var(--ink-900);
  --accent:        var(--gold-500);      /* decorative only: rules, borders, icons */
  --accent-text:   var(--gold-700);      /* gold used as TEXT must use this */
  --border-soft:   rgba(0,0,0,0.14);

  /* Type */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-script:  'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale */
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: 5.25rem;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* One vertical rhythm unit for every section boundary on the site.
     Plain sections contribute half of it at each edge, so any two neighbours
     are separated by exactly one --section-gap; sections that paint their own
     background take the full unit as inner padding instead. */
  --section-gap: clamp(3.5rem, 6vw, 5.5rem);

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 10px rgba(49,28,23,0.07);
  --shadow-md: 0 12px 32px rgba(49,28,23,0.11);
  --shadow-lg: 0 24px 60px rgba(49,28,23,0.17);
  --shadow-gold: 0 8px 24px rgba(198,161,91,0.35);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  --container: 1440px;
  /* One fluid gutter token: the page edge and anything that bleeds out to it
     (the Gentlemen panel) stay in step at every width. */
  --gutter: clamp(1.25rem, 3.2vw, 3rem);
  --header-h: 92px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
body{
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  font-size:var(--fs-base);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }
input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4,.sidebar-heading,.footer-heading{ font-family:var(--font-display); font-weight:600; line-height:1.15; color:var(--primary-dark); letter-spacing:.005em; }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--primary-text); color:#fff; padding:.75rem 1.25rem; z-index:2000; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--gold-500); outline-offset:3px; }

/* subtle grain texture over whole page for tactile, premium feel */
.grain-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent-text);
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--accent); display:inline-block; }
/* On dark grounds the darkened text-gold would fail instead — go light there.
   (gold-300 #E8D5A9 on ink-900 = 12.6:1) */
.hero .eyebrow,
.page-hero .eyebrow,
.cta-banner .eyebrow,
.section-dark .eyebrow,
.sidebar-cta .eyebrow,
.bento-featured .eyebrow{ color:var(--gold-300); }
.hero .eyebrow::before,
.page-hero .eyebrow::before,
.cta-banner .eyebrow::before,
.section-dark .eyebrow::before,
.sidebar-cta .eyebrow::before,
.bento-featured .eyebrow::before{ background:var(--gold-300); }
.section-title{ font-size:clamp(1.9rem,3.6vw,var(--fs-3xl)); margin-block:.5rem 1rem; }
.section-title em{ font-style:italic; color:var(--primary-text); }
.section-lede{ max-width:640px; color:var(--text-muted); font-size:var(--fs-md); font-weight:300; }
.center{ text-align:center; margin-inline:auto; }
.section-head{ margin-bottom:clamp(2rem, 3.4vw, 3.25rem); }
.section-head.center{ max-width:680px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1rem 2.1rem; border-radius:var(--radius-full);
  font-family:var(--font-body); font-size:var(--fs-sm); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  white-space:nowrap; border:1px solid transparent; cursor:pointer;
  max-width:100%;
}
/* On the narrowest phones a long label cannot stay on one line without
   pushing the page sideways, so let it wrap and tighten the padding. */
@media (max-width: 480px){
  .btn{ white-space:normal; padding:.9rem 1.4rem; text-align:center; }
}
/* Deep rose with white text. The old light-rose gradient put #211016 on
   #B16959 at its dark end = 4.38:1, just under AA. Worst end is now 5.9:1. */
.btn-primary{ background:linear-gradient(135deg,var(--ink-800),var(--ink-900)); color:#fff; box-shadow:var(--shadow-md); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); background:linear-gradient(135deg,var(--ink-900),var(--ink-800)); }
/* The gentlemen theme keeps its charcoal identity on the primary button. */
.gender-group[data-gender-group="gentlemen"] .btn-primary,
body.is-mens .btn-primary{ background:linear-gradient(135deg,var(--men-ink),var(--men-ink-dark)); color:#fff; }
.gender-group[data-gender-group="gentlemen"] .btn-primary:hover,
body.is-mens .btn-primary:hover{ background:linear-gradient(135deg,var(--men-ink-dark),var(--men-ink)); }
.btn-outline{ border-color:rgba(255,255,255,.55); color:currentColor; }
.btn-outline:hover{ background:rgba(255,255,255,.12); transform:translateY(-3px); }
.btn-outline-dark{ border-color:var(--primary-text); color:var(--primary-text); }
.btn-outline-dark:hover{ background:var(--primary-text); color:#fff; transform:translateY(-3px); }
.btn-gold{ background:linear-gradient(135deg,var(--gold-400),var(--gold-700)); color:#2B1710; box-shadow:var(--shadow-gold); }
.btn-gold:hover{ transform:translateY(-3px); }
.btn-sm{ padding:.7rem 1.4rem; font-size:var(--fs-xs); }
.btn-block{ width:100%; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  background:var(--blush-500);
  transition:box-shadow var(--dur-base) var(--ease);
  color:var(--text);
}
/* One height in every state — --header-h is the scrolled height, and nothing
   overrides it. The bar used to shrink from 112px to 92px on scroll, which
   reflowed a fixed, full-width element on the scroll event and moved the
   whole page under it. Only the shadow changes now. The bar is one solid
   colour throughout, so it carries no backdrop-filter either — there is
   nothing behind it left to blur. */
body:not(.is-home) .site-header,
.site-header.scrolled{
  box-shadow:var(--shadow-sm);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:var(--space-4); }
.main-nav{ min-width:0; }
.main-nav ul{ flex-wrap:nowrap; }

.brand{ display:flex; align-items:center; gap:.75rem; color:inherit; }
/* Only ~28% of the artwork's height is the wordmark — the monogram overhangs it
   above and below — so the logo has to run large for "LAVISH LOOKS" to read at
   all. The header heights above are sized around these. */
.brand-logo{ display:block; width:auto; height:74px; }
/* The header is blush in every state, so it always takes the black wordmark. */
.site-header .brand-logo--light{ display:none; }
/* The logo is a wide lockup; on a narrow bar it has to give way to the burger. */
@media (max-width: 860px){
  :root{ --header-h: 76px; }
  .brand-logo{ height:62px; }
}
@media (max-width: 560px){
  :root{ --header-h: 68px; }
  .brand-logo{ height:52px; }
}

.main-nav ul{ display:flex; gap:clamp(1rem, 2.2vw, var(--space-6)); }
.main-nav ul li{ flex-shrink:0; }
.main-nav a{
  position:relative; display:inline-flex; align-items:center; white-space:nowrap;
  font-size:var(--fs-sm); letter-spacing:.05em; text-transform:uppercase; font-weight:500;
  padding-block:.5rem;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent);
  transition:right var(--dur-base) var(--ease);
}
.main-nav a:hover::after, .main-nav a.active::after{ right:0; }
.main-nav a.active{ color:var(--accent); }

.nav-gender-icon{ margin-right:.4em; vertical-align:-2px; opacity:.85; }
/* Every surface the nav sits on is light now — the blush header bar on desktop,
   the white drawer panel on mobile — so these carry the text-safe tones with no
   per-state variants. The pale tints they used to need live on in the footer,
   which is the only dark place these links appear. */
.main-nav a.nav-ladies{ color:var(--primary-text); }
.main-nav a.nav-ladies::after{ background:var(--primary-text); }
.main-nav a.nav-ladies.active{ color:var(--primary-text); }
.main-nav a.nav-gents{ color:var(--men-ink); }
.main-nav a.nav-gents::after{ background:var(--men-ink); }
.main-nav a.nav-gents.active{ color:var(--men-ink); }

/* ---- Mega menu — Ladies / Gentlemen service dropdowns ---- */
.main-nav ul li.has-mega{ position:relative; }
.nav-link-row{ display:inline-flex; align-items:center; }
.nav-caret{ margin-left:.35em; transition:transform var(--dur-fast) var(--ease); vertical-align:-1px; }
/* Mobile-only tap target that expands the accordion without following the
   link — kept as a separate <button> so the label itself can still just
   navigate on tap, the way every other nav item behaves. */
.mega-toggle{ display:none; }
.mega-menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px); min-width:240px;
  background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  border:1px solid var(--border-soft); padding:var(--space-4);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
  z-index:1200;
}
.has-mega:hover .mega-menu, .has-mega:focus-within .mega-menu, .has-mega.mega-open .mega-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
  transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear 0s;
}
.has-mega:hover .nav-caret-desktop, .has-mega.mega-open .nav-caret-desktop{ transform:rotate(180deg); }
.mega-toggle .nav-caret{ margin-left:0; }
.has-mega.mega-open .mega-toggle .nav-caret{ transform:rotate(180deg); }
.mega-menu ul{ display:flex; flex-direction:column; gap:.15rem; }
.mega-menu a{
  display:block; padding:.6rem .75rem; border-radius:var(--radius-sm); color:var(--text) !important;
  font-size:var(--fs-sm); text-transform:none; letter-spacing:normal; font-weight:400; white-space:nowrap;
}
.mega-menu a::after{ display:none; }
.mega-menu a:hover{ background:var(--rose-50); }
.mega-menu.nav-gents a:hover{ background:var(--men-surface); }
.mega-menu-all{
  display:flex !important; align-items:center; justify-content:space-between; gap:.5rem;
  margin-top:.5rem; padding-top:.75rem !important; border-top:1px solid var(--border-soft);
  font-size:var(--fs-xs) !important; text-transform:uppercase !important; letter-spacing:.06em !important;
  font-weight:500 !important; color:var(--primary-text) !important;
}
.mega-menu.nav-gents .mega-menu-all{ color:var(--men-ink) !important; }

.header-actions{ display:flex; align-items:center; gap:var(--space-4); flex-shrink:0; }
.header-phone{ display:flex; align-items:center; gap:.5em; font-size:var(--fs-sm); letter-spacing:.02em; white-space:nowrap; }
.header-phone svg{ color:var(--accent); }
.nav-toggle{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; }
.nav-toggle span{ display:block; width:28px; height:1.5px; background:currentColor; border-radius:2px; transition:transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
@keyframes scrimIn{ from{ opacity:0; } to{ opacity:1; } }
/* Panel-only block; the desktop bar has its own phone link and Book Now. */
.nav-drawer-foot{ display:none; }

/* The nav carries 8 items now; the phone number needs more headroom before
   it can share the bar with them. */
@media (max-width: 1420px){
  .header-phone{ display:none; }
}

@media (max-width: 1240px){
  /* ---- Mobile navigation: light side sheet ----
     A narrow white panel slid in over the page rather than a full-bleed dark
     overlay, so the reader can still see where they were. The list reads as
     plain left-aligned text; the secondary actions sit at the foot of the
     panel, away from the browsing choices. */
  .main-nav{
    position:fixed; inset:0 0 0 auto; top:0; height:100dvh; width:min(340px, 84vw);
    background:var(--surface); color:var(--text);
    display:flex; flex-direction:column;
    overflow:hidden;
    /* Top padding lives on the shell, not the scrolling list, so links scroll
       inside their own box and never travel under the close button. */
    padding:calc(var(--header-h) + var(--space-2)) var(--space-6) var(--space-6);
    transform:translateX(100%); visibility:hidden;
    transition:transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
    box-shadow:-18px 0 48px rgba(49,28,23,.18);
  }
  .main-nav.open{ transform:translateX(0); visibility:visible; transition-delay:0s; }

  /* Dims the page without hiding it. Sits below the header (z-index 1000) so
     the toggle stays on top and keeps working as the close control. */
  body.nav-open::before{
    content:""; position:fixed; inset:0; z-index:999;
    background:rgba(33,16,22,.32);
    animation:scrimIn var(--dur-base) var(--ease);
  }

  /* The toggle is the close button: it morphs to an X in place, over the
     panel. Forced dark because the header's own colour is white on the home
     hero, which would vanish against the panel. */
  .nav-open .nav-toggle{ color:var(--ink-900); }

  .main-nav ul{
    flex-direction:column; gap:0; text-align:left; width:100%;
    /* min-height:0 — without it a flex item refuses to shrink below its
       content height and the list would push the foot off the panel. */
    flex:1 1 auto; min-height:0;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:var(--rose-200) transparent;
  }
  .main-nav ul::-webkit-scrollbar{ width:4px; }
  .main-nav ul::-webkit-scrollbar-track{ background:transparent; }
  .main-nav ul::-webkit-scrollbar-thumb{ background:var(--rose-200); border-radius:var(--radius-full); }
  body.is-mens .main-nav ul{ scrollbar-color:var(--men-accent-light) transparent; }
  body.is-mens .main-nav ul::-webkit-scrollbar-thumb{ background:var(--men-accent-light); }

  .main-nav ul li{ width:100%; }
  .main-nav a{
    display:flex; align-items:center; width:100%;
    font-family:var(--font-body); font-size:var(--fs-md); font-weight:400;
    text-transform:none; letter-spacing:normal;
    padding-block:.62rem; color:var(--text);
  }
  .main-nav a::after{ display:none; }
  .main-nav a:hover{ color:var(--primary-text); }
  .main-nav a.active{ color:var(--primary-text); font-weight:600; }
  /* The light-on-dark gender tints from the old drawer are unreadable on a
     white panel — step down to the text-safe pair. */
  .main-nav a.nav-ladies,
  .main-nav a.nav-ladies.active{ color:var(--primary-text); }
  .main-nav a.nav-gents,
  .main-nav a.nav-gents.active{ color:var(--men-ink); }
  .nav-gender-icon{ opacity:.7; }

  .nav-toggle{ display:flex; }
  body.nav-open{ overflow:hidden; }
  .nav-open .nav-toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .header-cta{ display:none; }

  /* ---- Secondary actions, pinned to the foot of the panel ---- */
  .nav-drawer-foot{
    display:grid; gap:var(--space-4); width:100%;
    flex:0 0 auto; padding-top:var(--space-5);
    border-top:1px solid var(--border-soft);
  }
  .nav-drawer-foot .btn{ width:100%; justify-content:center; }
  .nav-drawer-phone{
    display:flex; align-items:center; gap:.6em;
    font-size:var(--fs-sm); color:var(--text-muted); letter-spacing:.02em;
  }
  .nav-drawer-phone svg{ color:var(--accent-text); flex-shrink:0; }
  .nav-drawer-phone:hover{ color:var(--primary-text); }

  /* Mega menu becomes a closed-by-default accordion: the label still just
     navigates on tap, and a separate caret button expands the sub-list —
     otherwise the drawer would open with ~15 links stacked before Gallery
     and Booking are even visible. */
  .nav-link-row{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; width:100%; }
  .nav-caret-desktop{ display:none; }
  .mega-toggle{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:34px; height:34px; border-radius:50%;
    border:1px solid var(--border-soft); color:var(--text-muted);
  }
  .mega-menu{
    position:static; transform:none; opacity:1; visibility:hidden; pointer-events:none;
    background:transparent; border:none; box-shadow:none; padding:0;
    max-height:0; overflow:hidden; margin-top:0;
    transition:max-height var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
  }
  .has-mega.mega-open .mega-menu{
    visibility:visible; pointer-events:auto; max-height:600px; padding-block:.25rem .5rem;
    transform:none; left:auto;
    transition:max-height var(--dur-slow) var(--ease), visibility 0s linear 0s;
  }
  .mega-menu ul{ gap:0; }
  .mega-menu a{
    color:var(--text-muted) !important; font-size:var(--fs-sm);
    padding:.4rem 0 .4rem var(--space-5);
    font-family:var(--font-body); text-align:left; white-space:normal; line-height:1.4;
  }
  .mega-menu a:hover{ background:transparent; color:var(--primary-text) !important; }
  .mega-menu-all{
    border-top-color:var(--border-soft); justify-content:flex-start !important; gap:.5rem;
    padding-left:var(--space-5) !important; color:var(--primary-text) !important;
  }
  .mega-menu.nav-gents a:hover{ color:var(--men-ink) !important; }
  .mega-menu.nav-gents .mega-menu-all{ color:var(--men-ink) !important; }
}


/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:clamp(480px, 62dvh, 640px); display:flex; align-items:stretch;
  color:#fff; overflow:hidden; background:var(--ink-900);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img,
.hero-media .media-video{
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:grayscale(.25) contrast(1.06) brightness(.92) saturate(1.05);
}
/* The video sits under the scrim pseudo-elements, never over them. */
.hero-media .media-video{ position:absolute; inset:0; z-index:0; }
.hero-media::before,
.hero-media::after{ z-index:1; }
.hero-media::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--ink-900) 0%, rgba(46,10,24,.94) 26%, rgba(46,10,24,.62) 46%, rgba(46,10,24,.22) 66%, rgba(111,27,52,.18) 100%);
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, var(--ink-900) 0%, transparent 22%);
}
.hero-inner{
  position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center;
  padding-block:calc(var(--header-h) + var(--space-5)) var(--space-8); width:100%;
}
/* Wider measure + smaller display size: the same copy in fewer lines, so the
   banner stops eating the whole first screen. */
.hero-copy{ max-width:760px; }
.hero-eyebrow{ color:var(--gold-300); }
.hero-eyebrow::before{ background:var(--gold-300); }
.hero-title{
  font-size:clamp(2.3rem, 4.4vw, var(--fs-4xl)); color:#fff; margin-block:.9rem 1rem; letter-spacing:-.01em;
}
.hero-title em{ font-style:italic; color:var(--rose-200); font-weight:500; }
.hero-desc{ font-size:var(--fs-base); color:rgba(255,255,255,.82); max-width:620px; margin-bottom:var(--space-5); font-weight:300; }
.hero-cta-row{ display:flex; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-6); }
.hero-stats{ display:flex; gap:var(--space-8); flex-wrap:wrap; }
.hero-stats .stat{ padding-left:var(--space-4); border-left:1px solid rgba(255,255,255,.22); }
.hero-stats .stat:first-child{ padding-left:0; border-left:0; }
.hero-stats .stat b{ display:block; font-family:var(--font-display); font-size:var(--fs-xl); color:var(--gold-300); }
.hero-stats .stat span{ font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.68); }

.hero-credit{
  position:absolute; right:var(--space-6); bottom:var(--space-10); z-index:2;
  writing-mode:vertical-rl; letter-spacing:.2em; text-transform:uppercase; font-size:var(--fs-xs);
  color:rgba(255,255,255,.55); display:flex; align-items:center; gap:.75rem;
}
.hero-credit::before{ content:""; width:1px; height:60px; background:rgba(255,255,255,.3); }


.scroll-cue{
  position:absolute; left:var(--space-6); bottom:var(--space-6); z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; color:rgba(255,255,255,.7); font-size:var(--fs-xs);
  letter-spacing:.2em; text-transform:uppercase;
}
.scroll-cue .dot-track{ width:1px; height:40px; background:rgba(255,255,255,.25); position:relative; overflow:hidden; }
.scroll-cue .dot-track::after{ content:""; position:absolute; top:-40px; left:0; width:100%; height:40px; background:var(--gold-300); animation:scrollcue 2.2s var(--ease) infinite; }
@keyframes scrollcue{ 0%{ top:-40px; } 60%,100%{ top:100%; } }

@media (max-width: 860px){
  .hero-media::before{ background:linear-gradient(180deg, rgba(46,10,24,.55) 0%, rgba(46,10,24,.88) 55%, var(--ink-900) 90%); }
  .hero-copy{ max-width:100%; }
  .hero-cta-row, .hero-stats{ justify-content:flex-start; }
  .hero-credit{ display:none; }
}

/* ==========================================================================
   LADIES / GENTLEMEN SPLIT SHOWCASE (homepage)
   ========================================================================== */
.split-studios{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); }
.studio-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3.4;
  display:flex; align-items:flex-end; color:#fff;
}
.studio-card .photo{ position:absolute; inset:0; z-index:0; }
.studio-card .photo img{ filter:grayscale(.3) contrast(1.08) brightness(.68) saturate(1.05); }
.studio-copy{ position:relative; z-index:1; padding:clamp(1.25rem, 5vw, var(--space-8)); width:100%; }
.studio-eyebrow{ font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; opacity:.85; margin-bottom:.6rem; display:block; }
.studio-card h3{ color:#fff; font-size:var(--fs-2xl); margin-bottom:.5rem; }
.studio-card p{ color:rgba(255,255,255,.82); font-size:var(--fs-sm); max-width:340px; margin-bottom:var(--space-4); }
.studio-card .service-link{ color:#fff; }
.studio-ladies::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.42) 55%, rgba(243,206,197,.20) 100%);
}
.studio-ladies .studio-eyebrow{ color:var(--rose-300); }
.studio-gents::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(0deg, rgba(30,34,38,.94) 0%, rgba(30,34,38,.45) 55%, rgba(138,148,160,.2) 100%);
}
.studio-gents .studio-eyebrow{ color:var(--men-accent-light); }
.studio-card:hover .photo img{ transform:scale(1.06); }
.studio-card .photo img{ transition:transform .8s var(--ease); }
@media (max-width:860px){ .split-studios{ grid-template-columns:1fr; } }

/* ==========================================================================
   MARQUEE STRIP
   ========================================================================== */
.marquee-strip{ background:var(--primary-dark); color:var(--gold-300); overflow:hidden; padding-block:1rem; }
.marquee-track{ display:flex; gap:3rem; white-space:nowrap; width:max-content; animation:marquee 32s linear infinite; }
.marquee-track span{ font-family:var(--font-display); font-style:italic; font-size:var(--fs-md); letter-spacing:.03em; display:flex; align-items:center; gap:3rem; }
.marquee-track span::after{ content:"✦"; color:var(--rose-400); font-style:normal; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ==========================================================================
   GENERIC SECTIONS
   ========================================================================== */
section{ padding-block:calc(var(--section-gap) / 2); position:relative; }
/* Banded sections own their whitespace instead of borrowing it from a
   neighbour, so they take the full unit on both edges. */
.section-alt,
.section-dark,
.stats-band{ padding-block:var(--section-gap); }
/* Two bands of the same colour in a row read as one band, so the shared
   boundary collapses to a single unit instead of stacking two. */
.section-alt + .section-alt,
.section-dark + .section-dark,
.stats-band + .stats-band{ padding-top:0; }
.section-alt{ background:var(--bg-alt); }
.section-dark{ background:linear-gradient(160deg,var(--ink-900),var(--rose-950)); color:#fff; position:relative; overflow:hidden; }
.section-dark > .container{ position:relative; z-index:1; }
.section-dark .section-lede{ color:rgba(255,255,255,.72); }
.section-dark h2, .section-dark h3{ color:#fff; }
.section-dark .section-title em, .cta-banner .section-title em, .page-hero .section-title em{ color:var(--rose-300); }
body.is-mens .section-dark .section-title em,
body.is-mens .cta-banner .section-title em,
body.is-mens .page-hero .section-title em{ color:var(--men-accent-light); }

/* ---- reveal-on-scroll ---- */
/* Scoped to .js so a blocked or failed script can never leave the page blank. */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ==========================================================================
   ABOUT TEASER (home)
   ========================================================================== */
.about-teaser{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--space-10); align-items:center; }
.about-media{ position:relative; }
.about-media .frame{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/3.6; box-shadow:var(--shadow-md); }
.about-media .frame img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.about-media:hover .frame img{ transform:scale(1.05); }
.about-media .frame-accent{
  /* The offset bleeds to the right. On desktop it lands in the grid gap; on a
     stacked phone layout a fixed 22px lands outside the page, so scale it. */
  --accent-off: clamp(10px, 1.6vw, 22px);
  position:absolute;
  inset:var(--accent-off) calc(var(--accent-off) * -1) calc(var(--accent-off) * -1) var(--accent-off);
  border:1.5px solid var(--gold-500); border-radius:var(--radius-lg); z-index:-1;
}
.about-copy h2{ margin-top:.5rem; }
.about-list{ margin-top:var(--space-6); display:grid; gap:var(--space-4); }
.about-list li{ display:flex; gap:1rem; align-items:flex-start; }
.about-list .ico{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--rose-100); color:var(--primary-text);
  display:flex; align-items:center; justify-content:center;
}
.about-list strong{ display:block; font-family:var(--font-display); font-size:var(--fs-md); color:var(--primary-dark); }
.about-list p{ color:var(--text-muted); font-size:var(--fs-sm); }

/* ==========================================================================
   SERVICE CARDS (home preview + services page)
   ========================================================================== */
.service-card{
  background:var(--surface); border-radius:var(--radius-sm); padding:var(--space-8) var(--space-6) var(--space-6);
  border:1px solid var(--border-soft); border-top:1px solid var(--border-soft); position:relative; overflow:hidden;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.service-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--rose-600)); transition:transform var(--dur-slow) var(--ease);
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.service-card:hover::before{ transform:scaleX(1); }
.service-icon{
  width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1.5px solid var(--primary); color:var(--primary-text); margin-bottom:var(--space-5);
  position:relative; z-index:1; transition:all var(--dur-base) var(--ease);
}
.service-card:hover .service-icon{ background:var(--primary-text); border-color:var(--primary-text); color:var(--gold-300); }
.service-card .s-index{
  position:absolute; top:var(--space-6); right:var(--space-6); font-family:var(--font-display); font-style:italic;
  font-size:var(--fs-xl); color:var(--rose-100); z-index:0; line-height:1;
}
.service-card h3{ font-size:var(--fs-lg); margin-bottom:.6rem; position:relative; z-index:1; }
.service-card p{ color:var(--text-muted); font-size:var(--fs-sm); margin-bottom:var(--space-5); position:relative; z-index:1; }
.service-card .from{ font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); font-weight:600; position:relative; z-index:1; }
.service-link{ display:inline-flex; align-items:center; gap:.4em; margin-top:var(--space-2); font-size:var(--fs-sm); color:var(--primary-text); font-weight:500; position:relative; z-index:1; }
.service-link svg{ transition:transform var(--dur-fast) var(--ease); }
.service-card:hover .service-link svg{ transform:translateX(4px); }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
/* Deep rose ground so gold numerals and light labels both clear AA.
   Was light rose #D3AAA1 behind gold-300 text = 1.45:1. */
.stats-band{ background:linear-gradient(135deg,var(--ink-800),var(--ink-900)); color:#fff; }
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); text-align:center; gap:var(--space-6); }
.stats-grid b{ display:block; font-family:var(--font-display); font-size:var(--fs-3xl); color:var(--gold-300); }
.stats-grid span{ font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.88); }
@media (max-width: 760px){ .stats-grid{ grid-template-columns:repeat(2,1fr); row-gap:var(--space-8); } }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.testimonial-card{
  background:var(--surface); border-radius:var(--radius-lg); padding:var(--space-8); box-shadow:var(--shadow-sm);
  border:1px solid var(--border-soft); display:flex; flex-direction:column; gap:var(--space-4);
}
.testimonial-card .stars{ color:var(--gold-500); letter-spacing:.15em; font-size:var(--fs-sm); }
.testimonial-card p{ font-family:var(--font-script); font-size:var(--fs-lg); font-style:italic; color:var(--ink-800); line-height:1.55; }
.testimonial-person{ display:flex; align-items:center; gap:.9rem; margin-top:auto; }
.testimonial-person .avatar{ width:46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.testimonial-person .avatar img{ width:100%; height:100%; object-fit:cover; }
.testimonial-person strong{ display:block; font-size:var(--fs-sm); }
.testimonial-person span{ font-size:var(--fs-xs); color:var(--text-muted); }
@media (max-width: 980px){ .testimonial-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   GALLERY PREVIEW / GALLERY PAGE
   ========================================================================== */
.gallery-grid{
  display:grid; grid-template-columns:repeat(var(--gal-cols,4),1fr); grid-auto-rows:220px; gap:var(--space-4); grid-auto-flow:dense;
}
/* Even grid: every tile the same shape, so a filtered view (or a set that does
   not divide by the column count) can never leave a hole in the layout. */
.gallery-grid.is-even{ grid-auto-rows:auto; grid-auto-flow:row; }
.gallery-grid.is-even .gallery-item{ aspect-ratio:4 / 5; grid-row:auto; grid-column:auto; }
/* Column counts are classes, not inline styles, so the breakpoints below can
   still take them down to two columns and then one. */
.gallery-grid.cols-3{ --gal-cols:3; }
.gallery-grid.cols-4{ --gal-cols:4; }
.gallery-item{ position:relative; overflow:hidden; border-radius:var(--radius-md); cursor:pointer; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gallery-item:hover img{ transform:scale(1.09); }
.gallery-item::after{
  content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(58,15,31,.75),transparent 55%);
  opacity:0; transition:opacity var(--dur-base) var(--ease);
}
.gallery-item:hover::after{ opacity:1; }
.gallery-item .g-label{
  position:absolute; left:1rem; bottom:1rem; color:#fff; z-index:1; opacity:0; transform:translateY(8px);
  transition:all var(--dur-base) var(--ease); font-family:var(--font-display); font-size:var(--fs-md);
}
.gallery-item:hover .g-label{ opacity:1; transform:none; }
.gallery-item .g-zoom{
  position:absolute; right:1rem; top:1rem; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center; color:var(--primary-text); opacity:0; transform:scale(.7);
  transition:all var(--dur-base) var(--ease); z-index:1;
}
.gallery-item:hover .g-zoom{ opacity:1; transform:scale(1); }
.gallery-item.tall{ grid-row:span 2; }
.gallery-item.wide{ grid-column:span 2; }

@media (max-width: 980px){ .gallery-grid, .gallery-grid.cols-3, .gallery-grid.cols-4{ --gal-cols:2; } .gallery-item.wide{ grid-column:span 2; } .gallery-grid.is-even .gallery-item.wide{ grid-column:auto; } }
@media (max-width: 560px){ .gallery-grid, .gallery-grid.cols-3, .gallery-grid.cols-4{ --gal-cols:1; } .gallery-item.wide,.gallery-item.tall{ grid-column:span 1; grid-row:span 1; } }

.filter-row{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin-bottom:var(--space-8); }
.filter-btn{
  padding:.65rem 1.4rem; border-radius:var(--radius-full); border:1px solid var(--border-soft); font-size:var(--fs-xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); transition:all var(--dur-fast) var(--ease);
}
.filter-btn:hover{ border-color:var(--primary); color:var(--primary-text); }
.filter-btn.active{ background:var(--primary); border-color:var(--primary); color:var(--ink-900); }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; background:rgba(20,8,13,.92); padding:var(--space-6); }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(900px,90vw); max-height:82vh; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); }
.lightbox-stage{
  display:flex; align-items:center; justify-content:center;
  width:auto; max-width:min(900px,86vw); max-height:82vh;
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
}
.lightbox-stage img{ width:auto; height:auto; max-width:min(900px,86vw); max-height:82vh; object-fit:contain; }
/* the editorial tint belongs on thumbnails, not on the full view */
.lightbox-stage .photo::after{ display:none; }
.lightbox-stage .photo{ height:auto; }
.lightbox-stage .photo img{ filter:none; transform:none; }
.lightbox-close{ position:absolute; top:var(--space-6); right:var(--space-6); color:#fff; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.3); }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); color:#fff; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; }
.lightbox-prev{ left:var(--space-6); } .lightbox-next{ right:var(--space-6); }
.lightbox-caption{ position:absolute; bottom:var(--space-8); color:#fff; font-family:var(--font-display); font-style:italic; }

/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.cta-banner{
  border-radius:var(--radius-lg); background:
    radial-gradient(ellipse 100% 140% at 100% 0%, rgba(198,161,91,.28), transparent 55%),
    linear-gradient(135deg,var(--ink-800),var(--ink-900));
  color:#fff; padding:clamp(2.5rem, 7vw, var(--space-12)) clamp(1.25rem, 4vw, var(--space-10));
  text-align:center; position:relative; overflow:hidden;
}
.cta-banner h2{ color:#fff; max-width:640px; margin-inline:auto; }
.cta-banner .section-lede{ color:rgba(255,255,255,.78); margin-inline:auto; text-align:center; }
.cta-actions{ display:flex; gap:var(--space-4); justify-content:center; margin-top:var(--space-8); flex-wrap:wrap; }
.cta-banner > *:not(.mesh-blobs){ position:relative; z-index:1; }

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */
.page-hero{
  position:relative; padding-block:calc(var(--header-h) + var(--section-gap)) var(--section-gap); color:#fff; text-align:center;
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(199,86,120,.45), transparent 65%),
    linear-gradient(160deg,var(--ink-900),var(--rose-950));
  overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Ccircle cx='150' cy='150' r='140' fill='none' stroke='%23ffffff' stroke-opacity='0.06'/%3E%3Ccircle cx='150' cy='150' r='100' fill='none' stroke='%23ffffff' stroke-opacity='0.06'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:120% -10%; background-size:600px;
}
.page-hero > .container{ position:relative; z-index:1; }
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{ color:#fff; font-size:clamp(2.2rem,4.6vw,var(--fs-4xl)); margin-block:1rem .75rem; }
.page-hero p{ max-width:560px; margin-inline:auto; color:rgba(255,255,255,.78); }
.breadcrumb{ margin-top:var(--space-5); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.breadcrumb a:hover{ color:var(--gold-300); }
.breadcrumb span{ margin-inline:.5em; }

/* ---- Photographic banner (opt-in via .has-media) ----
   The scrim keeps the same ink/rose wash the gradient-only hero has, so white
   heading text holds its contrast over any frame we drop in behind it. */
.page-hero.has-media{ background:var(--ink-900); }
.page-hero-media{ position:absolute; inset:0; z-index:0; }
.page-hero-media img,
.page-hero-media .media-video{
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter:grayscale(.3) contrast(1.05) brightness(.8) saturate(1.02);
}
.page-hero-media .media-video{ position:absolute; inset:0; z-index:0; }
.page-hero-media::after{ z-index:1; }
.page-hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(199,86,120,.42), transparent 65%),
    linear-gradient(180deg, rgba(33,16,22,.78) 0%, rgba(49,28,23,.66) 45%, rgba(33,16,22,.88) 100%);
}
body.is-mens .page-hero-media::after{
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255,255,255,.10), transparent 65%),
    linear-gradient(180deg, rgba(30,34,38,.80) 0%, rgba(51,58,66,.66) 45%, rgba(30,34,38,.90) 100%);
}
/* The decorative rings compete with a photo — keep them as a whisper. */
.page-hero.has-media::after{ opacity:.18; }

/* ==========================================================================
   SERVICES PAGE — MENU STYLE
   ========================================================================== */
/* ---- Gender panels — Gentlemen carries its own cool charcoal theme ----
   Two ways this theme gets applied:
   1. .gender-group[data-gender-group="gentlemen"] — a themed block nested
      inside a normal (ladies) page, e.g. the homepage's Gentlemen preview.
   2. body.is-mens — the whole page (gentlemen.php) themed from the top,
      used when Ladies and Gentlemen are entirely separate pages. */
/* Ladies and Gentlemen are separate pages now; this wrapper is only a
   theming scope, so it must never start hidden. */
.gender-group{ display:block; }
.gender-group[data-gender-group="gentlemen"]{
  --primary-text: var(--men-ink);
  --primary:      var(--men-ink);
  --primary-strong: var(--men-ink-dark);
  --accent:       var(--men-accent);
  --accent-text:  #4A5560;
  background:var(--men-surface);
  border-radius:var(--radius-lg);
  padding:var(--space-10) var(--gutter);
  margin-inline:calc(var(--gutter) * -1);
}
body.is-mens{
  --primary-text: var(--men-ink);
  --primary:      var(--men-ink);
  --primary-strong: var(--men-ink-dark);
  --accent:       var(--men-accent);
  --accent-text:  #4A5560;
  background:var(--men-surface);
}
/* Scoped to main: the site footer is always dark, whatever theme the page
   above it carries, so its headings must stay white. */
body.is-mens main h1, body.is-mens main h2, body.is-mens main h3, body.is-mens main h4{ color:var(--men-ink-dark); }
body.is-mens .page-hero, body.is-mens .cta-banner, body.is-mens .section-dark{
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(138,148,160,.35), transparent 65%),
    linear-gradient(160deg, var(--ink-900), var(--men-ink-dark));
}
body.is-mens .page-hero h1, body.is-mens .cta-banner h2, body.is-mens .section-dark h2{ color:#fff; }
body.is-mens .mesh-blobs{
  --blob-1: rgba(138,148,160,.40);
  --blob-2: rgba(51,58,66,.34);
  --blob-3: rgba(215,219,224,.20);
}

.gender-group[data-gender-group="gentlemen"] .filter-btn.active,
body.is-mens .filter-btn.active{ color:#fff; }
.gender-group[data-gender-group="gentlemen"] .mc-copy h3,
.gender-group[data-gender-group="gentlemen"] .service-card h3,
.gender-group[data-gender-group="gentlemen"] .m-name,
body.is-mens .mc-copy h3,
body.is-mens .service-card h3,
body.is-mens .m-name{ color:var(--men-ink-dark); }
.gender-group[data-gender-group="gentlemen"] .menu-callout,
body.is-mens .menu-callout{ border-color:rgba(51,58,66,0.14); }
.gender-group[data-gender-group="gentlemen"] .menu-row,
body.is-mens .menu-row{ border-bottom-color:rgba(51,58,66,0.14); }
.gender-group[data-gender-group="gentlemen"] .m-dots,
body.is-mens .m-dots{ border-bottom-color:var(--men-accent); }

.menu-tabs{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin-bottom:var(--space-10); }
/* ---- Panel CTA ----
   Every price panel ends with one route into that category's own landing
   page. Sits on the same 820px measure as .menu-list so it lines up with the
   rows above it, and carries no top border -- the last .menu-row already
   draws a dashed rule there. */
.panel-cta{
  max-width:820px; margin:var(--space-8) auto 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-5) var(--space-6); flex-wrap:wrap;
}
.panel-cta .pc-copy{ min-width:0; }
.panel-cta .pc-copy strong{
  display:block; font-family:var(--font-display); font-size:var(--fs-md);
  color:var(--primary-dark); font-weight:600;
}
.panel-cta .pc-copy span{
  display:block; font-size:var(--fs-sm); color:var(--text-muted); margin-top:.25rem; max-width:46ch;
}
.panel-cta .btn{ flex-shrink:0; }
body.is-mens .panel-cta .pc-copy strong{ color:var(--men-ink-dark); }
@media (max-width:620px){
  .panel-cta{ align-items:stretch; }
  .panel-cta .btn{ width:100%; justify-content:center; }
}

.menu-panel{ display:none; }
.menu-panel.active{ display:block; animation:fadeIn .5s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

.menu-list{ max-width:820px; margin-inline:auto; display:grid; gap:var(--space-6); }
.menu-row{ display:flex; align-items:baseline; gap:1rem; padding-block:var(--space-4); border-bottom:1px dashed var(--border-soft); }
.menu-row .m-name{ font-family:var(--font-display); font-size:var(--fs-lg); color:var(--primary-dark); white-space:normal; min-width:0; }
.menu-row .m-name small{ display:block; font-family:var(--font-body); font-weight:300; font-size:var(--fs-sm); color:var(--text-muted); white-space:normal; margin-top:.3rem; }
.menu-row .m-dots{ flex:1; border-bottom:1px dotted var(--ink-300); transform:translateY(-6px); min-width:20px; }
.menu-row .m-price{ font-family:var(--font-display); font-size:var(--fs-lg); color:var(--primary-text); white-space:nowrap; }

.menu-callout{
  margin-top:var(--section-gap); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--space-8); align-items:center;
  background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--border-soft);
}
.menu-callout img{ width:100%; height:100%; object-fit:cover; min-height:280px; }
.menu-callout .mc-copy{ padding:clamp(1.25rem, 5vw, var(--space-8)); }

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.values-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-6); }
.value-card{ text-align:center; padding:var(--space-6); }
.value-card .ico{
  width:64px; height:64px; border-radius:50%; margin:0 auto var(--space-4); display:flex; align-items:center; justify-content:center;
  background:var(--rose-100); color:var(--primary-text); border:1px solid var(--rose-200);
}
.value-card h3{ font-size:var(--fs-md); margin-bottom:.4rem; }
.value-card p{ font-size:var(--fs-sm); color:var(--text-muted); }
@media (max-width: 900px){ .values-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px){ .values-grid{ grid-template-columns:minmax(0,1fr); } }

.team-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:var(--space-5); }
.team-card{ text-align:center; }
.team-photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/3.6; margin-bottom:var(--space-4); }
.team-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.team-card:hover .team-photo img{ transform:scale(1.06); }
.team-card h3{ font-size:var(--fs-md); }
.team-card span{ font-size:var(--fs-xs); color:var(--accent-text); letter-spacing:.06em; text-transform:uppercase; }
@media (max-width: 1080px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 700px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }

.timeline{ max-width:720px; margin-inline:auto; position:relative; padding-left:var(--space-8); }
.timeline::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--border-soft); }
.timeline-item{ position:relative; padding-bottom:var(--space-8); }
.timeline-item::before{ content:""; position:absolute; left:-29px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--rose-100); }
.timeline-item b{ display:block; color:var(--primary-text); font-family:var(--font-display); font-size:var(--fs-md); }
.timeline-item span{ display:block; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:.4rem; }

/* ==========================================================================
   BOOKING PAGE
   ========================================================================== */
.booking-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:var(--space-10); align-items:start; }
.booking-form-card{ background:var(--surface); border-radius:var(--radius-lg); padding:clamp(1.25rem, 5vw, var(--space-10)); box-shadow:var(--shadow-md); border:1px solid var(--border-soft); min-width:0; }
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); }
.form-grid .full{ grid-column:1/-1; }
.field{ display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.field label{ font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.field label .req{ color:var(--rose-600); }
.field input, .field select, .field textarea{
  width:100%; min-width:0;
  border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:.85rem 1rem; background:var(--bg);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--primary-strong); box-shadow:0 0 0 3px var(--rose-200); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:2px solid var(--gold-700); outline-offset:2px;
}
.field textarea{ resize:vertical; min-height:110px; }
.form-note{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--space-2); }
.form-success{ display:none; background:var(--rose-50); border:1px solid var(--rose-200); color:var(--text); padding:var(--space-5); border-radius:var(--radius-md); margin-bottom:var(--space-5); align-items:center; gap:.75rem; }
.form-success.show{ display:flex; }

.booking-info{ display:flex; flex-direction:column; gap:var(--space-5); min-width:0; }
/* Flex and grid children hold their content's intrinsic width unless told
   otherwise — that is what kept this column from shrinking below 396px. */
.info-card, .info-card > div, .map-frame{ min-width:0; }
.info-card{ background:var(--surface); border-radius:var(--radius-lg); padding:var(--space-6); border:1px solid var(--border-soft); box-shadow:var(--shadow-sm); display:flex; gap:1rem; align-items:flex-start; }
.info-card .ico{ width:46px; height:46px; border-radius:50%; background:var(--rose-100); color:var(--primary-text); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-card h3{ font-size:var(--fs-md); margin-bottom:.3rem; }
.info-card p, .info-card a{ font-size:var(--fs-sm); color:var(--text-muted); }
.map-frame{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/11; border:1px solid var(--border-soft); }
.map-frame iframe{ width:100%; height:100%; border:0; filter:saturate(.25) contrast(1.05); }

@media (max-width: 980px){ .booking-wrap{ grid-template-columns:minmax(0,1fr); } }
@media (max-width: 640px){ .form-grid{ grid-template-columns:minmax(0,1fr); } }

/* ==========================================================================
   INSTA STRIP
   ========================================================================== */
.insta-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.insta-strip .g-item{ aspect-ratio:1; overflow:hidden; position:relative; }
.insta-strip img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.insta-strip .g-item:hover img{ transform:scale(1.1); }
@media (max-width: 860px){ .insta-strip{ grid-template-columns:repeat(3,1fr); } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--ink-900); color:rgba(255,255,255,.72); }
.footer-top{ padding-block:var(--section-gap) calc(var(--section-gap) * .75); }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1.15fr; gap:var(--space-6); }
/* Grid children default to min-width:auto, which lets a long address or the
   subscribe field push its column past the page edge. */
.footer-col{ min-width:0; }
.footer-heading.nav-ladies-tone-text{ color:var(--rose-300); }
.footer-brand .brand{ color:#fff; margin-bottom:var(--space-4); }
/* The footer is always dark, so it always takes the white-wordmark file. */
.footer-brand .brand-logo{ height:110px; }
.footer-brand .brand-logo--dark{ display:none; }
.footer-blurb{ font-size:var(--fs-sm); max-width:320px; margin-bottom:var(--space-5); }
.social-row{ display:flex; gap:.7rem; }
.social-icon{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; transition:all var(--dur-fast) var(--ease); }
.social-icon:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--ink-900); }
.footer-links li, .footer-info li{ margin-bottom:.65rem; font-size:var(--fs-sm); }
.footer-links a:hover{ color:var(--gold-300); }
.footer-links a.nav-ladies{ color:var(--rose-300); }
.footer-links a.nav-ladies:hover{ color:var(--rose-200); }
.footer-links a.nav-gents{ color:var(--men-accent-light); }
.footer-links a.nav-gents:hover{ color:#fff; }
.footer-info a:hover{ color:var(--gold-300); }
.footer-info-sm{ font-size:var(--fs-sm); margin-bottom:var(--space-4); }
.footer-form{ display:flex; border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-full); overflow:hidden; }
.footer-form input{ flex:1 1 0; min-width:0; background:transparent; border:0; padding:.85rem 1.1rem; color:#fff; font-size:var(--fs-sm); }
.footer-form input::placeholder{ color:rgba(255,255,255,.72); }
.footer-form button{ flex:0 0 46px; width:46px; display:flex; align-items:center; justify-content:center; background:var(--gold-500); color:var(--ink-900); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-block:var(--space-5); }
.footer-bottom-inner{ display:flex; justify-content:space-between; font-size:var(--fs-xs); flex-wrap:wrap; gap:.5rem; }
@media (max-width: 1100px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr; } .footer-col:first-child{ grid-column:1/-1; } }
@media (max-width: 700px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-col:first-child{ grid-column:auto; } }
@media (max-width: 480px){ .footer-grid{ grid-template-columns:1fr; } }

.back-to-top{
  position:fixed; right:var(--space-6); bottom:var(--space-6); width:48px; height:48px; border-radius:50%;
  background:var(--primary); color:var(--ink-900); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:all var(--dur-base) var(--ease); z-index:900;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background:var(--primary-dark); }

/* ==========================================================================
   MISC UTILITIES
   ========================================================================== */
@media (max-width: 860px){ .about-teaser{ grid-template-columns:minmax(0,1fr); } .menu-callout{ grid-template-columns:minmax(0,1fr); } .menu-callout img{ min-height:220px; } }

.divider-orn{ display:flex; align-items:center; justify-content:center; gap:1rem; color:var(--gold-500); margin-block:var(--space-6); }
.divider-orn::before, .divider-orn::after{ content:""; height:1px; width:60px; background:var(--gold-500); opacity:.5; }

/* ==========================================================================
   PHOTOGRAPHY — unified editorial tone across all real images
   ========================================================================== */
/* The img() helper wraps every image in <picture>. Left alone, that wrapper
   sits in the box tree as an inline, auto-height element, so every
   `height:100%` on the <img> inside resolves against *it* rather than the
   framed container — and a non-square source then renders at its intrinsic
   ratio and blows the card out. display:contents removes the wrapper box so
   the <img> lays out as a direct child, exactly as it did before <picture>.
   Affects .photo, .frame, .team-photo, .gallery-item, .insta-strip, avatars. */
picture{ display:contents; }

.photo{ position:relative; overflow:hidden; display:block; width:100%; height:100%; }
.photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.18) sepia(.06) contrast(1.06) saturate(1.08) brightness(.99);
  transition:transform .8s var(--ease), filter .8s var(--ease);
}
.photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(165deg, rgba(118,67,55,.18), rgba(46,10,24,.06) 55%, rgba(198,161,91,.10));
  mix-blend-mode:multiply;
}
.photo.no-tint::after{ display:none; }
.photo-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:1.1rem 1.2rem;
  font-family:var(--font-display); font-style:italic; font-size:var(--fs-sm); color:#fff; letter-spacing:.02em;
  background:linear-gradient(0deg,rgba(20,7,12,.72),transparent); text-align:left;
}

/* ==========================================================================
   PHOTO REVEAL — a composed fade + gentle scale-down, driven by .reveal
   ========================================================================== */
.js .reveal .photo img{ transform:scale(1.06); transition:transform 1s var(--ease); }
.js .reveal.is-visible .photo img{ transform:scale(1); }
@media (prefers-reduced-motion: reduce){
  .js .reveal .photo img{ transform:none; }
}

/* ==========================================================================
   SCROLL PROGRESS BAR
   ========================================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:1100;
  background:linear-gradient(90deg,var(--gold-400),var(--rose-500)); transition:width .1s linear;
}

/* ==========================================================================
   AMBIENT GLOW — quiet, static colour depth for dark sections (no motion)
   ========================================================================== */
.mesh-blobs{
  position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; contain:strict;
  background:
    radial-gradient(42% 46% at 6% -4%,  var(--blob-1, rgba(146,83,69,.42)),  transparent 72%),
    radial-gradient(38% 42% at 98% 104%, var(--blob-2, rgba(198,161,91,.24)), transparent 72%),
    radial-gradient(30% 32% at 80% 40%,  var(--blob-3, rgba(195,139,127,.20)), transparent 72%);
}
/* The three <span> elements are kept in the markup for backwards
   compatibility but no longer paint anything. */
.mesh-blobs span{ display:none; }

/* ==========================================================================
   KINETIC HERO TEXT — line-by-line reveal on load
   ========================================================================== */
.kinetic-line{ overflow:hidden; display:block; }
.kinetic-line span{
  display:block; transform:translateY(115%); opacity:0;
  animation:kineticUp 1s var(--ease) forwards; animation-delay:var(--kd,0s);
}
@keyframes kineticUp{ to{ transform:translateY(0); opacity:1; } }
.kinetic-fade{ opacity:0; animation:fadeUpSoft .9s var(--ease) forwards; animation-delay:var(--kd,0s); }
@keyframes fadeUpSoft{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .kinetic-line span{ animation:none; transform:none; opacity:1; }
  .kinetic-fade{ animation:none; opacity:1; transform:none; }
}

/* ==========================================================================
   FEATURED BENTO TILE — homepage services
   ========================================================================== */
.bento-group-head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:var(--space-6); flex-wrap:wrap; }
.bento-group-head h3{ font-size:var(--fs-xl); margin:0; }
.studio-eyebrow-inline{
  display:inline-flex; align-items:center; gap:.5em; padding:.4rem 1rem; border-radius:var(--radius-full);
  font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; font-weight:500;
}
.studio-eyebrow-inline.nav-ladies-tone{ background:var(--rose-100); color:var(--primary-text); }
.studio-eyebrow-inline.nav-gents-tone{ background:var(--men-surface); color:var(--men-ink); border:1px solid rgba(51,58,66,.18); }

.services-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(165px,auto); gap:var(--space-5); }
.services-bento .service-card{ padding:var(--space-6) var(--space-5) var(--space-5); }
.services-bento .service-icon{ width:42px; height:42px; margin-bottom:var(--space-3); }
.services-bento .service-card h3{ font-size:var(--fs-md); }
.services-bento .bento-item.is-single p{ display:none; }
.services-bento .bento-item.is-single .s-index{ top:var(--space-5); right:var(--space-5); }
.bento-featured{
  grid-column:span 2; grid-row:span 2; position:relative; border-radius:var(--radius-lg); overflow:hidden;
  color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:var(--space-6);
}
.bento-featured .photo{ position:absolute; inset:0; z-index:0; }
.bento-featured .photo img{ filter:grayscale(.25) contrast(1.08) brightness(.72) saturate(1.05); }
.bento-featured::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(20,7,12,.92) 0%, rgba(20,7,12,.35) 55%, rgba(20,7,12,.08) 100%);
}
.bento-featured > *:not(.photo){ position:relative; z-index:2; }
.bento-featured .b-eyebrow{ font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--gold-300); margin-bottom:.6rem; }
.bento-featured h3{ color:#fff; font-size:var(--fs-2xl); margin-bottom:.5rem; }
.bento-featured p{ color:rgba(255,255,255,.8); font-size:var(--fs-sm); max-width:320px; margin-bottom:var(--space-4); }
.bento-item{ grid-column:span 2; }
.bento-item.is-single{ grid-column:span 1; }

@media (max-width:980px){
  .services-bento{ grid-template-columns:1fr 1fr; grid-auto-rows:auto; }
  .bento-featured{ grid-column:1/-1; grid-row:auto; min-height:340px; }
  .bento-item{ grid-column:span 1; grid-row:auto; }
}
@media (max-width:620px){
  .services-bento{ grid-template-columns:1fr; }
  .bento-item{ grid-column:1/-1; }
}

/* ==========================================================================
   MARQUEE — pause on hover, add breathing room
   ========================================================================== */
.marquee-strip:hover .marquee-track{ animation-play-state:paused; }

/* ==========================================================================
   JOURNAL / BLOG
   ========================================================================== */
.tag-pill{
  display:inline-flex; align-items:center; padding:.35rem .9rem; border-radius:var(--radius-full);
  font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  background:var(--rose-100); color:var(--primary-text);
}
.tag-pill.on-dark{ background:rgba(255,255,255,.14); color:var(--gold-300); }

.post-meta{ display:flex; align-items:center; gap:.6rem; font-size:var(--fs-xs); color:var(--text-muted); letter-spacing:.03em; }
.post-meta .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; }

/* ---- Featured post ---- */
.blog-featured{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-8); align-items:center;
  background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-soft);
  box-shadow:var(--shadow-sm); margin-bottom:var(--space-10);
}
.blog-featured .frame{ position:relative; aspect-ratio:4/3.2; overflow:hidden; min-height:0; }
.blog-featured .bf-copy{ padding:var(--space-8) var(--space-8) var(--space-8) 0; }
.blog-featured .bf-copy .tag-pill{ margin-bottom:var(--space-4); }
.blog-featured h2{ font-size:clamp(1.5rem,2.6vw,var(--fs-2xl)); margin-bottom:var(--space-4); line-height:1.2; }
.blog-featured p{ color:var(--text-muted); margin-bottom:var(--space-5); }
.blog-featured .post-meta{ margin-bottom:var(--space-6); }
@media (max-width:900px){
  .blog-featured{ grid-template-columns:1fr; }
  .blog-featured .bf-copy{ padding:0 var(--space-6) var(--space-8); }
}

/* ---- Post grid ---- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.blog-card{
  background:var(--surface); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-soft);
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  display:flex; flex-direction:column;
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--gold-300); }
/* min-height:0 + overflow:hidden are load-bearing, not decorative: .frame is
   a flex item of the column-flex .blog-card, and the default min-height:auto
   lets a tall intrinsic image (e.g. a 1067x1600 portrait source) override the
   aspect-ratio and stretch the card. */
.blog-card .frame{ aspect-ratio:4/2.9; position:relative; overflow:hidden; min-height:0; }
.blog-card .bc-body{ padding:var(--space-6); display:flex; flex-direction:column; flex:1; }
.blog-card .tag-pill{ align-self:flex-start; margin-bottom:var(--space-4); }
.blog-card h2{ font-size:var(--fs-md); line-height:1.3; margin-bottom:var(--space-3); }
.blog-card p{ color:var(--text-muted); font-size:var(--fs-sm); margin-bottom:var(--space-4); flex:1; }
.blog-card .post-meta{ margin-bottom:var(--space-4); }
.blog-card .service-link{ margin-top:auto; }
@media (max-width:980px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .blog-grid{ grid-template-columns:1fr; } }

/* ---- Single article layout ---- */
.article-layout{ display:grid; grid-template-columns:1fr .38fr; gap:var(--space-10); align-items:start; }
.article-hero-frame{ aspect-ratio:16/8; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:var(--space-8); box-shadow:var(--shadow-md); }
.article-body{ max-width:720px; }
.article-body h2{ font-size:var(--fs-xl); margin-top:var(--space-8); margin-bottom:var(--space-3); }
.article-body h2:first-child{ margin-top:0; }
.article-body p{ color:var(--ink-700); font-size:var(--fs-md); line-height:1.85; margin-bottom:var(--space-5); }
.article-byline{ display:flex; align-items:center; gap:1rem; padding:var(--space-6) 0; margin-bottom:var(--space-6); border-block:1px solid var(--border-soft); }
.article-byline .avatar{ width:52px; height:52px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.article-byline strong{ display:block; font-family:var(--font-display); font-size:var(--fs-md); }
.article-byline span{ font-size:var(--fs-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
.share-row{ display:flex; align-items:center; flex-wrap:wrap; gap:.9rem; margin-top:var(--space-10); padding-top:var(--space-8); border-top:1px solid var(--border-soft); }
.share-row span{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
.share-row a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border-soft); display:flex; align-items:center;
  justify-content:center; color:var(--primary-text); transition:all var(--dur-fast) var(--ease);
}
.share-row a:hover{ background:var(--primary); border-color:var(--primary); color:var(--ink-900); }

.sidebar-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:var(--space-6); margin-bottom:var(--space-6); }
.sidebar-card .sidebar-heading{ font-size:var(--fs-md); margin-bottom:var(--space-5); }
.sidebar-post{ display:flex; gap:.9rem; margin-bottom:var(--space-5); }
.sidebar-post:last-child{ margin-bottom:0; }
.sidebar-post .thumb{ width:64px; height:64px; border-radius:var(--radius-sm); overflow:hidden; flex-shrink:0; }
.sidebar-post .sp-copy strong{ display:block; font-family:var(--font-display); font-size:var(--fs-sm); line-height:1.3; margin-bottom:.3rem; }
.sidebar-post .sp-copy span{ font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.sidebar-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.sidebar-cta{ background:linear-gradient(150deg,var(--ink-800),var(--ink-900)); color:#fff; text-align:center; position:relative; overflow:hidden; }
.sidebar-cta .sidebar-heading{ color:#fff; }
.sidebar-cta p{ color:rgba(255,255,255,.78); font-size:var(--fs-sm); margin-bottom:var(--space-5); }
/* Same :not() guard as .cta-banner / .offer-banner — see the note there. */
.sidebar-cta > *:not(.mesh-blobs){ position:relative; z-index:1; }
.back-link{ display:inline-flex; align-items:center; gap:.5em; font-size:var(--fs-sm); color:var(--primary-text); font-weight:500; margin-bottom:var(--space-8); }
.back-link svg{ transition:transform var(--dur-fast) var(--ease); }
.back-link:hover svg{ transform:translateX(-4px); }

@media (max-width:900px){
  .article-layout{ grid-template-columns:1fr; }
}

/* ==========================================================================
   FORMS — validation, honeypot, status messaging
   ========================================================================== */
/* Honeypot: hidden from people and assistive tech, visible to naive bots. */
.hp-field{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

.field .field-error{
  display:flex; align-items:center; gap:.4em;
  font-size:var(--fs-xs); color:#A32C2C; letter-spacing:.02em; text-transform:none;
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:#A32C2C; background:#FFF7F7; }

.form-error-summary{
  background:#FFF3F3; border:1px solid #E3B4B4; color:#7E1F1F;
  padding:var(--space-5); border-radius:var(--radius-md); margin-bottom:var(--space-5);
}
.form-error-summary h2{ font-size:var(--fs-md); color:#7E1F1F; margin-bottom:.5rem; }
.form-error-summary ul{ list-style:disc; padding-left:1.2rem; }
.form-error-summary li{ font-size:var(--fs-sm); margin-bottom:.25rem; }
.form-error-summary a{ color:#7E1F1F; text-decoration:underline; }

.footer-form-msg{ font-size:var(--fs-xs); margin-top:.6rem; min-height:1.2em; color:var(--gold-300); }
.footer-form-msg.is-error{ color:#FFB4B4; }

.footer-heading{ color:#fff; font-size:var(--fs-md); margin-bottom:var(--space-4); font-family:var(--font-display); font-weight:600; }

/* ==========================================================================
   EMPTY STATES (gallery + journal filters)
   ========================================================================== */
.filter-empty{
  display:none; text-align:center; padding:var(--space-10) var(--space-6);
  border:1px dashed var(--border-soft); border-radius:var(--radius-lg);
  color:var(--text-muted); margin-top:var(--space-4);
}
.filter-empty.show{ display:block; }
.filter-empty strong{ display:block; font-family:var(--font-display); font-size:var(--fs-lg); color:var(--primary-dark); margin-bottom:.4rem; }

/* ==========================================================================
   GALLERY TILE AS A REAL BUTTON (keyboard + screen-reader operable)
   ========================================================================== */
button.gallery-item{
  display:block; width:100%; padding:0; margin:0; border:0; background:none;
  font:inherit; color:inherit; text-align:left; appearance:none;
}
button.gallery-item:focus-visible{ outline:3px solid var(--gold-700); outline-offset:3px; }
.gallery-item:focus-visible .g-label,
.gallery-item:focus-visible .g-zoom{ opacity:1; transform:none; }
.gallery-item:focus-visible::after{ opacity:1; }

/* ==========================================================================
   LIGHTBOX DIALOG
   ========================================================================== */
.lightbox[hidden]{ display:none !important; }
.lightbox:not(.open){ display:none; }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible{ outline:3px solid var(--gold-300); outline-offset:3px; }
.lightbox-close:hover,
.lightbox-nav:hover{ background:rgba(255,255,255,.16); }
.lightbox-counter{
  position:absolute; top:var(--space-6); left:var(--space-6); color:rgba(255,255,255,.8);
  font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
}

/* ==========================================================================
   MENU ROWS — stack name/price on very small screens
   ========================================================================== */
@media (max-width: 520px){
  .menu-row{ flex-wrap:wrap; row-gap:.35rem; }
  .menu-row .m-name{ flex:1 1 100%; order:1; }
  .menu-row .m-dots{ order:2; }
  .menu-row .m-price{ order:3; }
}

/* ==========================================================================
   MOTION — honour the user's system preference for the decorative loops
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; transform:none; }
  .scroll-cue .dot-track::after{ animation:none; }
  .js .reveal{ opacity:1; transform:none; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .site-header, .site-footer, .back-to-top, .scroll-progress, .grain-overlay,
  .marquee-strip, .lightbox, .nav-toggle, .mesh-blobs, .filter-row, .menu-tabs{ display:none !important; }
  body{ background:#fff; color:#000; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .menu-panel{ display:block !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; }
}

/* ==========================================================================
   ELEMENTS INTRODUCED BY THE SEMANTIC MARKUP PASS
   ========================================================================== */
ol.timeline{ list-style:none; }
.timeline-copy{ color:var(--text-muted); font-size:var(--fs-sm); }

.founder-quote p{
  font-family:var(--font-script); font-style:italic;
  font-size:var(--fs-lg); color:var(--primary-text);
}
.founder-quote footer{
  font-size:var(--fs-sm); color:var(--text-muted); margin-top:.5rem; font-style:normal;
}

.testimonial-card blockquote{
  font-family:var(--font-script); font-size:var(--fs-lg); font-style:italic;
  color:var(--ink-800); line-height:1.55;
}

/* Inline links inside body copy need a visible, non-colour-only affordance. */
.inline-link{
  color:var(--primary-text); text-decoration:underline;
  text-underline-offset:.18em; text-decoration-thickness:1px;
}
.inline-link:hover{ text-decoration-thickness:2px; }
.article-body a:not(.btn):not(.back-link),
.filter-empty a,
.form-error-summary a{
  color:var(--primary-text); text-decoration:underline; text-underline-offset:.18em;
}

/* The stats band sits on a dark ground now, so its heading colour follows. */
.stats-band .stat b{ color:var(--gold-300); }

/* Scroll progress is transform-driven; give it a definite painted width. */
.scroll-progress{ width:100%; transform:scaleX(0); transform-origin:0 50%; }

/* ==========================================================================
   MENU TABS — no-JS fallback
   Without JavaScript a tab strip is inert, so instead of stranding the
   visitor on one category we drop the tabs and show the complete menu with
   each category's heading promoted from visually-hidden to visible.
   ========================================================================== */
html:not(.js) .menu-tabs{ display:none; }
html:not(.js) .menu-panel{ display:block !important; }
html:not(.js) .menu-panel > .visually-hidden{
  position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal;
  font-family:var(--font-display); font-size:var(--fs-xl); color:var(--primary-dark);
  margin-bottom:var(--space-5); padding-bottom:var(--space-3);
  border-bottom:1px solid var(--border-soft);
}
html:not(.js) .menu-panel + .menu-panel{ margin-top:var(--space-10); }

/* Tabs are buttons: make the active one unmistakable, not colour-only. */
.menu-tab[aria-selected="true"]{ font-weight:600; }
.menu-tab:focus-visible{ outline:2px solid var(--gold-700); outline-offset:3px; }

/* ==========================================================================
   FAQ ACCORDION
   Built on <details>/<summary> so it works without JavaScript. Visual
   language is borrowed from .menu-row (display font, dashed rose rule) so it
   reads as part of the existing system.
   ========================================================================== */
.faq-list{ max-width:820px; margin-inline:auto; display:grid; gap:0; }

.faq-item{
  border-bottom:1px dashed var(--border-soft);
  transition:border-color var(--dur-base) var(--ease);
}
.faq-item:first-child{ border-top:1px dashed var(--border-soft); }

.faq-item summary{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.25rem;
  padding-block:var(--space-5); cursor:pointer; list-style:none;
  transition:color var(--dur-fast) var(--ease);
}
/* Remove the native disclosure triangle in every engine. */
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ content:""; }

.faq-item .faq-q{
  font-family:var(--font-display); font-size:var(--fs-md); color:var(--primary-dark);
  line-height:1.35; text-wrap:balance;
}
.faq-item summary:hover .faq-q{ color:var(--primary-text); }
.faq-item summary:focus-visible{ outline:2px solid var(--gold-700); outline-offset:3px; border-radius:var(--radius-sm); }

.faq-item .faq-marker{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--border-soft); color:var(--primary-text);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease),
             color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.faq-item summary:hover .faq-marker{ border-color:var(--primary); }
.faq-item[open] .faq-marker{
  transform:rotate(45deg); background:var(--primary-text);
  border-color:var(--primary-text); color:var(--gold-300);
}

.faq-item .faq-a{ padding-bottom:var(--space-5); max-width:64ch; }
.faq-item .faq-a p{ color:var(--text-muted); font-size:var(--fs-sm); line-height:1.8; }
.faq-item .faq-a p + p{ margin-top:.85rem; }

@media (prefers-reduced-motion: no-preference){
  .faq-item[open] .faq-a{ animation:faqOpen .32s var(--ease); }
}
@keyframes faqOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* Gentlemen theme keeps its charcoal accents here too. */
.gender-group[data-gender-group="gentlemen"] .faq-item .faq-q,
body.is-mens .faq-item .faq-q{ color:var(--men-ink-dark); }
body.is-mens .faq-item[open] .faq-marker{ background:var(--men-ink); border-color:var(--men-ink); color:#fff; }

/* On a dark section the accordion inverts. */
.section-dark .faq-item,
.section-dark .faq-item:first-child{ border-color:rgba(255,255,255,.16); }
.section-dark .faq-item .faq-q{ color:#fff; }
.section-dark .faq-item .faq-a p{ color:rgba(255,255,255,.78); }
.section-dark .faq-item .faq-marker{ border-color:rgba(255,255,255,.28); color:var(--gold-300); }
.section-dark .faq-item[open] .faq-marker{ background:var(--gold-500); border-color:var(--gold-500); color:var(--ink-900); }

@media (max-width:520px){
  .faq-item .faq-q{ font-size:var(--fs-base); }
  .faq-item summary{ gap:.75rem; }
}

/* ==========================================================================
   PROSE / EDITORIAL BLOCKS
   Long-form copy that needs to sit inside a normal section without inheriting
   the centred, narrow .section-lede treatment.
   ========================================================================== */
.prose{ max-width:70ch; }
.prose.center{ margin-inline:auto; }
.prose p{ color:var(--text-muted); font-size:var(--fs-base); line-height:1.85; }
.prose p + p{ margin-top:var(--space-4); }
.prose h3{
  font-size:var(--fs-lg); color:var(--primary-dark);
  margin-top:var(--space-6); margin-bottom:var(--space-3);
}
.prose strong{ color:var(--text); font-weight:500; }

/* Two-column editorial copy for wider sections. */
.prose-columns{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); max-width:none; }
@media (max-width:860px){ .prose-columns{ grid-template-columns:1fr; gap:var(--space-6); } }

/* ==========================================================================
   STEP / PROCESS LIST — reuses the value-card visual weight
   ========================================================================== */
.step-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); counter-reset:step; }
.step-card{ position:relative; padding-top:var(--space-6); border-top:1px solid var(--border-soft); }
.step-card::before{
  counter-increment:step; content:"0" counter(step);
  position:absolute; top:-.85rem; left:0; background:var(--bg); padding-right:.75rem;
  font-family:var(--font-display); font-style:italic; font-size:var(--fs-lg); color:var(--accent-text);
  line-height:1;
}
.section-alt .step-card::before{ background:var(--bg-alt); }
body.is-mens .step-card::before{ background:var(--men-surface); }
.step-card h3{ font-size:var(--fs-md); margin-bottom:.5rem; color:var(--primary-dark); }
.step-card p{ font-size:var(--fs-sm); color:var(--text-muted); line-height:1.75; }
@media (max-width:980px){ .step-grid{ grid-template-columns:repeat(2,1fr); row-gap:var(--space-8); } }
@media (max-width:560px){ .step-grid{ grid-template-columns:1fr; row-gap:var(--space-8); } }

/* ==========================================================================
   CARE / DETAIL NOTES — a lighter alternative to .service-card
   ========================================================================== */
.note-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.note-card{
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--radius-md); padding:var(--space-6);
}
.note-card h3{ font-size:var(--fs-md); margin-bottom:.6rem; }
.note-card p{ font-size:var(--fs-sm); color:var(--text-muted); line-height:1.8; }
.note-card .note-tag{
  display:inline-block; font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text); font-weight:600; margin-bottom:.75rem;
}
@media (max-width:980px){ .note-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .note-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   OFFERS
   A promotional band built from the existing dark-section language (rose /
   ink gradient, gold accents) so it reads as part of the system rather than
   a bolted-on banner.
   ========================================================================== */
.offer-banner{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:
    radial-gradient(ellipse 90% 140% at 100% 0%, rgba(198,161,91,.28), transparent 58%),
    linear-gradient(135deg, var(--ink-800), var(--ink-900));
  color:#fff;
  padding:var(--space-8) var(--space-10);
  display:flex; align-items:center; gap:var(--space-8);
}
/* .mesh-blobs MUST keep its own position:absolute — excluding it here is not
   cosmetic. This rule sits later in the file at equal specificity, so without
   the :not() it flips the blob layer to position:relative, turning it into a
   real layout item that pushes every sibling out of place. */
.offer-banner > *:not(.mesh-blobs){ position:relative; z-index:1; }

/* The percentage medallion */
.offer-badge{
  flex-shrink:0; width:124px; height:124px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  /* Both ends stay light enough for the small "OFF" label to clear AA on the
     medallion — gold-700 as the end stop measured only 3.66:1. */
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color:var(--ink-900); box-shadow:var(--shadow-gold);
  border:1px solid rgba(255,255,255,.25);
}
.offer-badge b{
  font-family:var(--font-display); font-size:2.5rem; line-height:1; font-weight:700; letter-spacing:-.02em;
}
.offer-badge span{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; margin-top:.15rem;
}

.offer-copy{ flex:1 1 auto; min-width:0; }
.offer-copy .eyebrow{ color:var(--gold-300); }
.offer-copy .eyebrow::before{ background:var(--gold-300); }
.offer-copy h2{
  color:#fff; font-size:clamp(1.5rem, 2.6vw, var(--fs-2xl));
  margin-block:.5rem .6rem; text-wrap:balance;
}
.offer-copy h2 em{ font-style:italic; color:var(--gold-300); }
.offer-copy p{ color:rgba(255,255,255,.82); font-size:var(--fs-base); max-width:56ch; }

.offer-actions{ display:flex; flex-direction:column; gap:.7rem; flex-shrink:0; width:max-content; }
.offer-actions .btn{ width:100%; white-space:nowrap; }

/* Tablet: medallion + copy stay on one line, buttons drop to a full-width row. */
@media (max-width:1080px){
  .offer-banner{ flex-wrap:wrap; padding:var(--space-8); gap:var(--space-6); }
  .offer-copy{ flex:1 1 320px; }
  .offer-actions{ flex-direction:row; flex-wrap:wrap; width:100%; }
  .offer-actions .btn{ width:auto; flex:1 1 200px; }
}

/* Phone: a single centred stack. */
@media (max-width:680px){
  .offer-banner{
    flex-direction:column; text-align:center;
    padding:var(--space-8) var(--space-5); gap:var(--space-5);
  }
  .offer-copy{ flex:0 1 auto; }
  .offer-copy .eyebrow{ justify-content:center; }
  .offer-copy p{ margin-inline:auto; }
  .offer-actions{ flex-direction:column; }
  .offer-actions .btn{ width:100%; flex:0 0 auto; }
  .offer-badge{ width:104px; height:104px; }
  .offer-badge b{ font-size:2.1rem; }
}
/* ---- Worked savings examples ---- */
.saving-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.saving-card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:var(--space-6); text-align:center;
}
.saving-card h3{ font-size:var(--fs-md); margin-bottom:.35rem; }
.saving-card .s-desc{ font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:var(--space-4); min-height:2.6em; }
.saving-prices{ display:flex; align-items:baseline; justify-content:center; gap:.6rem; }
.saving-prices .was{
  font-family:var(--font-display); font-size:var(--fs-md); color:var(--text-muted);
  text-decoration:line-through; text-decoration-thickness:1px;
}
.saving-prices .now{ font-family:var(--font-display); font-size:var(--fs-xl); color:var(--primary-text); }
.saving-card .s-save{
  display:inline-block; margin-top:var(--space-3); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text);
}
@media (max-width:900px){ .saving-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .saving-grid{ grid-template-columns:1fr; } }

/* ---- Terms list ---- */
.terms-list{ max-width:820px; margin-inline:auto; display:grid; gap:var(--space-4); }
.terms-list li{ display:flex; gap:.9rem; align-items:flex-start; font-size:var(--fs-sm); color:var(--text-muted); line-height:1.75; }
.terms-list .t-mark{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; margin-top:.15rem;
  background:var(--rose-100); color:var(--primary-text);
  display:flex; align-items:center; justify-content:center;
}
body.is-mens .terms-list .t-mark{ background:var(--men-surface); color:var(--men-ink); }

/* ---- Nav highlight for the Offers link ---- */
/* Same story as the gender links: always a light bar, so always the text-safe
   gold. Pale gold-300 is kept for the footer only. */
.main-nav a.nav-offers{ color:var(--accent-text); }
.main-nav a.nav-offers::after{ background:var(--accent-text); }
.footer-links a.nav-offers{ color:var(--gold-300); }
.footer-links a.nav-offers:hover{ color:var(--gold-100); }

/* ==========================================================================
   WHY CHOOSE US — reason cards
   A slightly warmer variant of .value-card, for the homepage.
   ========================================================================== */
.reason-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.reason-card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:var(--space-8) var(--space-6); position:relative; overflow:hidden;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
             border-color var(--dur-base) var(--ease);
}
.reason-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--accent), var(--rose-600));
  transition:transform var(--dur-slow) var(--ease);
}
.reason-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent; }
.reason-card:hover::before{ transform:scaleX(1); }
.reason-card .r-ico{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--rose-100); color:var(--primary-text); margin-bottom:var(--space-5);
  transition:background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.reason-card:hover .r-ico{ background:var(--primary-text); color:var(--gold-300); }
.reason-card h3{ font-size:var(--fs-md); margin-bottom:.5rem; }
.reason-card p{ font-size:var(--fs-sm); color:var(--text-muted); line-height:1.8; }
body.is-mens .reason-card .r-ico{ background:var(--men-surface); color:var(--men-ink); }
body.is-mens .reason-card:hover .r-ico{ background:var(--men-ink); color:#fff; }
@media (max-width:980px){ .reason-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .reason-grid{ grid-template-columns:1fr; } }