*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --black:    #07070A;
    --deep:     #0D0D12;
    --card:     #13131A;
    --mid:      #1C1C26;
    --border:   rgba(200,200,220,0.10);
    --bmed:     rgba(200,200,220,0.18);
    --sdim:     #8E8E9E;
    --silver:   #9898A8;
    --smid:     #B8B8CC;
    --slight:   #D4D4E8;
    --white:    #EEEEF6;
    --pure:     #FFFFFF;
    /* Silver gradient stops */
    --sg1: #F0F0F8;
    --sg2: #C8C8DC;
    --sg3: #8A8A9E;
    --sg4: #D0D0E4;
  }

  html {
    scroll-behavior: smooth;
    /* the header is fixed, so an anchor would otherwise land behind it */
    scroll-padding-top: calc(var(--hdr-h, 110px) + 16px);
  }
  body {
    background: var(--black);
    color: var(--silver);
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* ── SILVER TEXT GRADIENT ── */
  .sg {
    background: linear-gradient(135deg, var(--sg1) 0%, var(--sg2) 30%, var(--sg3) 58%, var(--sg4) 80%, var(--sg1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ══════════════════════════════════════
     LOGO
  ══════════════════════════════════════ */
  .logo-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-decoration: none;
    line-height: 1;
  }
  /* <picture> wraps every photo so WebP is served where supported, with the
     original JPEG/PNG as the fallback. display:contents removes the wrapper
     from layout entirely, so every existing `.thing img { height:100% }` rule
     keeps resolving against the real parent instead of the picture box. */
  picture { display: contents; }

  .ft-logo-img {
    height: 42px; width: auto; display: block; opacity: .55;
    transition: opacity .35s ease;
  }
  .ft-logo-img:hover { opacity: .9; }
  .logo-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--smid);
    margin-top: 2px;
  }
  /* Larger version for hero */
  .logo-hero .logo-name {
    font-size: 1rem;
    letter-spacing: 0.5em;
    color: var(--slight);
  }
  /* Nav version — horizontal */
  .logo-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
  }
  .logo-mark-img {
    height: 46px; width: auto; display: block;
    filter: drop-shadow(0 1px 8px rgba(180,180,210,0.20));
    transition: height .35s ease;
  }
  #nav.sc .logo-mark-img { height: 38px; }
  .logo-nav .logo-text { display: flex; flex-direction: column; gap: 1px; }
  .logo-nav .logo-name { font-size: 0.68rem; letter-spacing: 0.3em; margin-top: 0; }
  .logo-nav .logo-sub  {
    font-size: 0.42rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sdim);
  }

  /* ══════════════════════════════════════
     NAV
  ══════════════════════════════════════ */
  #nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 4rem;
    transition: background .5s, backdrop-filter .5s, padding .4s, border-color .5s;
    border-bottom: 1px solid transparent;
  }
  /* The nav is see-through until you scroll 60px, which is right on the home
     page where it floats over the hero. Inner pages have no hero, so in that
     first 60px the section below slides up behind a transparent bar and its
     artwork shows through the menu. Give those pages a solid bar from the
     start. */
  .page-inner #nav {
    background: rgba(7,7,10,0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom-color: var(--border);
  }
  #nav.sc {
    background: rgba(7,7,10,0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: .8rem 4rem;
    border-bottom-color: var(--border);
  }
  .nav-links {
    display: flex; gap: 2rem; list-style: none;
  }
  .nav-links a {
    font-size: 0.66rem; letter-spacing: .18em; text-transform: uppercase;
    text-decoration: none; color: var(--silver); transition: color .3s; position: relative;
  }
  .nav-links a::after {
    content:''; position: absolute; bottom:-3px; left:0;
    width:0; height:1px; background: var(--slight); transition: width .3s;
  }
  .nav-links a:hover { color: var(--white); }
  .nav-links a:hover::after { width:100%; }
  .nav-cta {
    font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
    text-decoration: none; color: var(--black);
    background: linear-gradient(135deg, #D8D8EC 0%, #ABABC0 50%, #D4D4E8 100%);
    padding: .6rem 1.5rem; font-weight: 500;
    transition: opacity .3s, transform .3s;
    position: relative; overflow: hidden;
  }
  .nav-cta::before {
    content: '';
    position: absolute; top: 0; left: -80%;
    width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    pointer-events: none;
  }
  .nav-cta:hover { opacity:.9; transform: translateY(-1px); }
  .nav-cta:hover::before { left: 150%; }
  .ham { display:none; flex-direction:column; gap:5px; cursor:pointer; }
  .ham span { display:block; width:22px; height:1px; background:var(--slight); }

  /* ══════════════════════════════════════
     HERO
  ══════════════════════════════════════ */
  /* ── SCROLL REVEAL HERO ── */
  #hero-wrapper {
    position: relative;
    height: calc(700px + 100vh);
  }
  #hero {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--black);
  }

  /* The full-bleed image that gets clipped */
  #hero-clip {
    position: absolute;
    inset: 0;
    background: url('./hero.jpg') center / 170% no-repeat;
    background-image: image-set(url('./hero.webp') type('image/webp'),
                                url('./hero.jpg')  type('image/jpeg'));
    clip-path: polygon(12% 12%, 88% 12%, 88% 88%, 12% 88%);
    will-change: clip-path, background-size;
  }
  /* Dark overlay — heavier in the center where text lives */
  #hero-clip::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 60% at 50% 52%, rgba(7,7,10,0.62) 0%, transparent 100%),
      linear-gradient(
        to bottom,
        rgba(7,7,10,0.45) 0%,
        rgba(7,7,10,0.22) 35%,
        rgba(7,7,10,0.22) 65%,
        rgba(7,7,10,0.55) 100%
      );
  }

  /* Content centred over the image */
  .hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    pointer-events: none;
  }
  .hero-content > * { pointer-events: auto; }

  .hero-eyebrow {
    font-size: .6rem; letter-spacing: .38em; text-transform: uppercase;
    color: rgba(212,212,232,0.85); margin-bottom: 1.4rem;
    opacity: 0; animation: fup .7s .5s ease forwards;
    text-shadow: 0 1px 12px rgba(0,0,0,0.7);
  }
  .hero-logo-display {
    font-size: inherit; font-weight: inherit; margin: 0;
    margin-bottom: 1rem;
    opacity: 0; animation: fup .9s .7s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero-logo-img {
    width: clamp(190px, 24vw, 300px);
    height: auto; display: block; margin: 0 auto;
    filter: drop-shadow(0 2px 22px rgba(0,0,0,0.7)) drop-shadow(0 0 44px rgba(0,0,0,0.45));
  }
  .hero-brand-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    font-weight: 400;
    letter-spacing: .48em;
    text-transform: uppercase;
    color: var(--pure);
    display: block;
    margin-top: .4rem;
    text-shadow: 0 1px 16px rgba(0,0,0,0.8);
  }
  .hero-tagline {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 300;
    font-style: italic;
    color: var(--slight);
    margin: 1.2rem 0 .8rem;
    opacity: 0; animation: fup .8s 1s ease forwards;
    text-shadow: 0 1px 14px rgba(0,0,0,0.75);
  }
  .hero-sub {
    font-size: .85rem; line-height: 1.8; color: rgba(220,220,232,0.88);
    max-width: 480px; margin-bottom: 2.4rem;
    opacity: 0; animation: fup .8s 1.2s ease forwards;
    text-shadow: 0 1px 10px rgba(0,0,0,0.8);
  }
  .hero-actions {
    display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
    opacity: 0; animation: fup .8s 1.4s ease forwards;
  }
  .btn-primary {
    display: inline-block;
    font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
    text-decoration: none; font-weight: 500;
    background: linear-gradient(135deg, #D8D8EC 0%, #ABABC0 50%, #D4D4E8 100%);
    color: var(--black); padding: 1rem 2.6rem;
    transition: opacity .3s, transform .3s;
    position: relative; overflow: hidden;
  }
  .btn-primary::before {
    content: '';
    position: absolute; top: 0; left: -80%;
    width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-18deg);
    transition: left 0.65s ease;
    pointer-events: none;
  }
  .btn-primary:hover { opacity:.9; transform: translateY(-2px); }
  .btn-primary:hover::before { left: 150%; }
  .btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
    text-decoration: none; color: var(--slight);
    border: 1px solid var(--bmed); padding: 1rem 2.2rem;
    transition: background .3s, color .3s, transform .3s;
  }
  .btn-ghost:hover { background: rgba(200,200,220,.08); color: var(--white); transform: translateY(-2px); }

  .hero-scroll-cue {
    position: absolute;
    bottom: 2.2rem; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    z-index: 3;
    opacity: 0; animation: fup .6s 2.2s ease forwards;
  }
  .hero-scroll-line {
    width: 1px; height: 38px;
    background: linear-gradient(to bottom, rgba(212,212,232,.5), transparent);
    animation: pulse 2.5s 2.2s infinite;
  }
  .hero-scroll-text { font-size: .52rem; letter-spacing: .28em; text-transform: uppercase; color: var(--sdim); }

  /* ══════════════════════════════════════
     STATS BAR
  ══════════════════════════════════════ */
  #stats {
    background:
      radial-gradient(ellipse 70% 150% at 50% 50%, rgba(162,133,78,.10) 0%, transparent 72%),
      linear-gradient(180deg, #16141A 0%, #121016 100%);
    border-top: 1px solid rgba(201,164,92,.26);
    border-bottom: 1px solid rgba(201,164,92,.26);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
  }
  .stat-item {
    padding: 2.5rem 2rem;
    text-align: center;
    border-right: 1px solid rgba(201,164,92,.14);
  }
  .stat-item:last-child { border-right: none; }
  .stat-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem; font-weight: 300; line-height: 1;
    background: linear-gradient(135deg, #D9B872 0%, #F0DFB2 38%, #C9A45C 62%, #E6CF96 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    filter: drop-shadow(0 2px 14px rgba(201,164,92,.18));
  }
  .stat-label {
    font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
    color: #A8A4B0; margin-top: .45rem;
  }

  /* ══════════════════════════════════════
     REVEAL
  ══════════════════════════════════════ */
  @keyframes fup {
    from { opacity:0; transform: translateY(16px); }
    to   { opacity:1; transform: translateY(0); }
  }
  .rv  { opacity:0; transform:translateY(22px); transition: opacity .8s ease, transform .8s ease; }
  .rvl { opacity:0; transform:translateX(-22px); transition: opacity .8s ease, transform .8s ease; }
  .rvs { opacity:0; transform:scale(.95); transition: opacity .8s ease, transform .8s ease; }
  .rv.in, .rvl.in, .rvs.in { opacity:1; transform:none; }
  .d1 { transition-delay:.08s; }
  .d2 { transition-delay:.18s; }
  .d3 { transition-delay:.28s; }
  .d4 { transition-delay:.4s; }
  .d5 { transition-delay:.52s; }

  /* ══════════════════════════════════════
     SECTION COMMONS
  ══════════════════════════════════════ */
  .sec { padding: 7rem 4rem; }
  .sec-center { text-align: center; }
  .eyebrow {
    font-size: .6rem; letter-spacing: .35em; text-transform: uppercase; color: var(--sdim);
    display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem;
  }
  .eyebrow.center { justify-content: center; }
  .eyebrow::before, .eyebrow::after {
    content:''; flex: 0 0 24px; height:1px; background: var(--border);
  }
  .eyebrow.center::before, .eyebrow.center::after { flex: 0 0 36px; }
  .sec-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 300; color: var(--white); line-height: 1.12;
  }
  .sec-title em { font-style: italic; color: var(--smid); }
  .divl {
    width: 0;
    height: 1px;
    background: linear-gradient(to right, var(--smid), transparent);
    margin: 1.5rem 0;
    transition: opacity .8s ease, transform .8s ease, width 1s cubic-bezier(0.4,0,0.2,1) 0.15s;
  }
  .divl.in { width: 48px; }
  .body-p { font-size: .88rem; line-height: 1.88; color: var(--silver); max-width: 480px; }

  /* ══════════════════════════════════════
     ABOUT
  ══════════════════════════════════════ */
  #about {
    background:
      radial-gradient(ellipse 70% 55% at 92% 55%, rgba(160,160,210,0.04) 0%, transparent 70%),
      var(--deep);
    padding: 5rem 4rem;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 5rem;
    align-items: center;
  }
  .about-content {
    max-width: 600px;
    display: flex; flex-direction: column; justify-content: center;
    position: relative; z-index: 2;
  }
  /* Grain texture overlay */
  #about::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.018;
    pointer-events: none;
    z-index: 0;
  }
  /* Photo panel on the right */
  .about-photo {
    position: relative;
    z-index: 2;
    height: 520px;
    overflow: hidden;
  }
  .about-photo img {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(.82) saturate(.88);
    transition: transform 8s ease, filter .5s;
  }
  .about-photo:hover img { filter: brightness(.95) saturate(1); }
  /* Subtle vignette on photo */
  .about-photo::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(7,7,10,0.18) 0%, transparent 40%, transparent 60%, rgba(7,7,10,0.35) 100%),
                linear-gradient(to left, rgba(7,7,10,0.22) 0%, transparent 50%);
    pointer-events: none;
  }
  /* Floating quote overlay on photo */
  .about-photo-quote {
    position: absolute;
    bottom: 2rem; left: 1.8rem; right: 1.8rem;
    z-index: 3;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 300;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
    letter-spacing: 0.02em;
  }
  /* Watermark monogram — purely decorative, sized to fit */
  .about-monogram {
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 26vw; height: auto;
    opacity: 0.045;
    pointer-events: none;
    user-select: none;
    z-index: 1;
  }
  /* Horizontal rule accents */
  .about-rule-top,
  .about-rule-bottom {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200,200,230,0.08) 30%, rgba(200,200,230,0.08) 70%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
  .about-rule-top    { top: 2.8rem; }
  .about-rule-bottom { bottom: 2.8rem; }
  /* Corner accent marks */
  .about-corner {
    position: absolute;
    width: 18px; height: 18px;
    pointer-events: none;
    z-index: 3;
    opacity: 0.22;
  }
  .about-corner::before,
  .about-corner::after {
    content: '';
    position: absolute;
    background: rgba(200,200,230,0.7);
  }
  .about-corner::before { width: 100%; height: 1px; top: 0; left: 0; }
  .about-corner::after  { width: 1px; height: 100%; top: 0; left: 0; }
  .about-corner.tl { top: 2rem; left: 2rem; }
  .about-corner.tr { top: 2rem; right: 2rem; transform: scaleX(-1); }
  .about-corner.bl { bottom: 2rem; left: 2rem; transform: scaleY(-1); }
  .about-corner.br { bottom: 2rem; right: 2rem; transform: scale(-1); }
  .about-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
  }
  .bento-img {
    overflow: hidden; position: relative;
  }
  .bento-img img {
    width:100%; height:100%; object-fit:cover;
    filter: brightness(.88) saturate(.9);
    transition: transform .7s ease, filter .5s;
  }
  .bento-img:hover img { transform:scale(1.05); filter: brightness(1) saturate(1); }
  .bento-img:nth-child(1) { grid-row: 1 / 3; }
  .bento-stat {
    background: var(--card);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 2rem; text-align: center;
    border: 1px solid var(--border);
  }
  .bento-stat-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem; font-weight: 300; line-height:1;
    background: linear-gradient(135deg,#E8E8F4,#B8B8CC,#8888A4,#D4D4E8);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .bento-stat-lbl { font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sdim); margin-top:.4rem; }

  /* ══════════════════════════════════════
     SERVICES
  ══════════════════════════════════════ */
  #services { position: relative; }

  /* Shimmer on the italic em */
  #services .sec-title em {
    font-style: italic;
    background: linear-gradient(
      90deg,
      #9090A8 0%,
      #E4E4F4 38%,
      #D0D0E4 52%,
      #9090A8 100%
    );
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: svc-shimmer 5s linear infinite;
  }
  @keyframes svc-shimmer {
    from { background-position: 220% center; }
    to   { background-position: -220% center; }
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--border);
    max-width: 1200px; margin: 3rem auto 0;
  }
  .svc-card {
    background: var(--card);
    overflow: hidden; position: relative;
    transition: background .3s;
  }
  .svc-card:hover { background: var(--mid); }
  .svc-img {
    height: 200px; overflow: hidden; position: relative;
  }
  .svc-img img {
    width:100%; height:100%; object-fit:cover;
    filter: brightness(.85) saturate(.9);
    transition: transform .6s ease, filter .4s;
  }
  .svc-card:hover .svc-img img { transform:scale(1.06); filter:brightness(1) saturate(1); }
  .svc-img::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(to top, var(--card) 0%, transparent 60%);
  }
  .svc-body { padding: 1.8rem 2rem 2.2rem; }
  .svc-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem; font-weight:400; color:var(--white); margin-bottom:.8rem;
  }
  .svc-list { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
  .svc-list li {
    font-size:.82rem; color:var(--silver);
    display:flex; align-items:center; gap:.6rem;
    transition: color .2s; cursor:default;
  }
  .svc-list li:hover { color:var(--slight); }
  .svc-list li::before { content:''; width:5px; height:1px; background:var(--sdim); flex-shrink:0; }

  /* ══════════════════════════════════════
     FEATURES
  ══════════════════════════════════════ */
  #features {
    background:
      radial-gradient(ellipse 55% 70% at 12% 35%, rgba(160,160,210,0.035) 0%, transparent 70%),
      var(--deep);
  }
  .feat-grid {
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:2px; background:var(--border);
    max-width:1100px; margin: 3rem auto 0;
  }
  .feat-card {
    background:var(--card); padding:2.6rem 2.2rem;
    display:flex; flex-direction:column; gap:.9rem;
    transition:background .3s; position:relative;
    overflow:hidden;
  }
  .feat-card::after {
    content:''; position:absolute; top:0; left:0; right:0;
    height:1px; background:linear-gradient(to right,transparent,rgba(200,200,220,.18),transparent);
    opacity:0; transition:opacity .3s;
  }
  .feat-card:hover { background:var(--mid); }
  .feat-card:hover::after { opacity:1; }
  .feat-icon { width:34px; height:34px; }
  .feat-title {
    font-family:'Cormorant Garamond',serif;
    font-size:1.15rem; font-weight:400; color:var(--white);
  }
  .feat-desc { font-size:.8rem; line-height:1.75; color:var(--sdim); }

  /* ══════════════════════════════════════
     GALLERY
  ══════════════════════════════════════ */
  /* tiles start offset by ±60px for the slide-in, which widened the page
     until the reveal fired — clip it so there is never a stray scrollbar */
  #gallery { background:var(--black); padding-bottom:0; overflow:hidden; }
  .gallery-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:420px;
    gap:3px;
  }
  .g-item {
    overflow:hidden; position:relative; cursor:pointer;
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
  }
  /* Each tile slides in from a different direction */
  .g-item:nth-child(1) { transform: translate(-60px, 40px) scale(0.96); }
  .g-item:nth-child(2) { transform: translate( 60px, 40px) scale(0.96); transition-delay: 0.12s; }
  .g-item.gallery-in {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  .g-item img {
    width:100%; height:100%; object-fit:cover;
    filter:brightness(.88) saturate(1.2) contrast(1.12) sepia(0.28) hue-rotate(-14deg);
    transition:filter .5s, transform .6s;
  }
  .g-item:hover img { filter:brightness(.94) saturate(1.26) contrast(1.14) sepia(0.24) hue-rotate(-14deg); transform:scale(1.04); }
  /* Skin analyzer — drop the crop lower so the glass table shows */
  .g-item img[src*="nail-station"] { object-position:center 72%; }
  /* Warm orange wash + soft vignette for an appealing, graded-photo look */
  .g-item::before {
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(ellipse 110% 110% at 50% 45%, transparent 55%, rgba(40,20,5,0.32) 100%),
      linear-gradient(135deg, rgba(255,140,45,0.26) 0%, rgba(255,105,35,0.16) 50%, rgba(255,175,90,0.22) 100%);
    mix-blend-mode:soft-light; transition:opacity .5s; opacity:1;
  }
  .g-item:hover::before { opacity:.78; }
  .g-overlay {
    position:absolute; inset:0; z-index:2;
    background:rgba(7,7,10,.3);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .3s;
  }
  .g-item:hover .g-overlay { opacity:1; }
  .g-label {
    font-family:'Cormorant Garamond',serif;
    font-size:.95rem; font-style:italic;
    color:var(--white); letter-spacing:.1em;
  }
  .gallery-ig {
    padding:2rem 4rem;
    display:flex; align-items:center; justify-content:center; gap:.6rem;
    border-top:1px solid var(--border);
  }
  .gallery-ig a {
    font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
    text-decoration:none; color:var(--sdim);
    display:flex; align-items:center; gap:.5rem;
    transition:color .3s;
  }
  .gallery-ig a:hover { color:var(--white); }

  /* ══════════════════════════════════════
     TESTIMONIALS
  ══════════════════════════════════════ */
  #testimonials {
    background:
      radial-gradient(ellipse 80% 50% at 50% 10%, rgba(160,160,210,0.04) 0%, transparent 70%),
      var(--deep);
  }
  .t-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:2px; background:var(--border);
    max-width:1100px; margin:3rem auto 0;
  }
  .t-card {
    background:var(--card); padding:2.6rem 2.2rem;
    display:flex; flex-direction:column; gap:1.2rem;
  }
  .t-stars { display:flex; gap:3px; }
  .t-star {
    width:9px; height:9px;
    background:var(--gold-star);
    clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  }
  .t-text {
    font-family:'Cormorant Garamond',serif;
    font-size:1.05rem; font-style:italic; font-weight:300;
    line-height:1.7; color:var(--slight); flex:1;
  }
  .t-author { font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sdim); }

  /* ══════════════════════════════════════
     BOOKING — BIG BOX
  ══════════════════════════════════════ */
  #book {
    position:relative; overflow:hidden;
    background: var(--black);
  }
  .book-bg {
    position:absolute; inset:0;
    background:
      url('./book-bg.jpg') center 62%/cover no-repeat;
    background-image: image-set(url('./book-bg.webp') type('image/webp'),
                                url('./book-bg.jpg')  type('image/jpeg'));
    filter:brightness(.42) saturate(1.06) contrast(1.04);
  }
  /* Scrim keeps the headline crisp; image detail sits along the lower edge */
  .book-bg::after {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(ellipse 58% 48% at 50% 40%, rgba(7,7,10,.62) 0%, rgba(7,7,10,.24) 60%, transparent 100%),
      linear-gradient(to bottom, rgba(7,7,10,.60) 0%, rgba(7,7,10,.18) 30%, rgba(7,7,10,.30) 70%, rgba(7,7,10,.72) 100%);
  }
  .book-inner {
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center;
    text-align:center; padding:8rem 4rem;
    max-width:900px; margin:0 auto;
  }
  .book-logo {
    margin-bottom:2rem; opacity:0; animation:fup .8s .2s ease forwards;
  }
  .book-logo-img {
    width:clamp(80px, 8vw, 108px); height:auto; display:block; margin:0 auto;
    filter:drop-shadow(0 2px 20px rgba(0,0,0,.75)) drop-shadow(0 0 44px rgba(0,0,0,.5));
  }
  .book-title {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(2.4rem,4vw,3.8rem); font-weight:300;
    color:var(--white); line-height:1.1; margin-bottom:1rem;
  }
  .book-title em { font-style:italic; color:var(--smid); }
  .book-sub {
    font-size:.9rem; line-height:1.8; color:var(--silver);
    max-width:500px; margin-bottom:3rem;
  }
  /* THE BIG BOOKING BOX */
  .book-box {
    display:flex; flex-direction:column; align-items:center;
    background:rgba(200,200,220,.06);
    border:1px solid var(--bmed);
    backdrop-filter:blur(12px);
    padding:3rem 4rem; width:100%; max-width:600px;
    gap:1.4rem;
    transition:background .3s, border-color .3s;
  }
  .book-box:hover {
    background:rgba(200,200,220,.1);
    border-color:rgba(200,200,220,.3);
  }
  .book-box-label {
    font-size:.58rem; letter-spacing:.35em; text-transform:uppercase; color:var(--sdim);
  }
  .book-box-cta {
    display:inline-flex; align-items:center; gap:.8rem; text-decoration:none;
    background:linear-gradient(135deg,#D8D8EC 0%,#ABABC0 50%,#D4D4E8 100%);
    color:var(--black); padding:1.2rem 3.5rem;
    font-size:.8rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
    transition:opacity .3s, transform .3s;
    width:100%; justify-content:center;
    position: relative; overflow: hidden;
  }
  .book-box-cta::before {
    content: '';
    position: absolute; top: 0; left: -80%;
    width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: skewX(-18deg);
    transition: left 0.65s ease;
    pointer-events: none;
  }
  .book-box-cta:hover { opacity:.9; transform:translateY(-2px); }
  .book-box-cta:hover::before { left: 150%; }
  .book-box-or {
    font-size:.7rem; color:var(--sdim); display:flex; align-items:center; gap:1rem; width:100%;
  }
  .book-box-or::before, .book-box-or::after {
    content:''; flex:1; height:1px; background:var(--border);
  }
  .book-phone {
    display:flex; align-items:center; gap:.5rem;
    font-size:.88rem; letter-spacing:.08em;
    color:var(--slight); text-decoration:none;
    transition:color .3s;
  }
  .book-phone:hover { color:var(--white); }
  .book-ig {
    font-size:.7rem; color:var(--sdim); margin-top:.5rem;
  }
  .book-ig a { color:var(--silver); text-decoration:none; transition:color .3s; }
  .book-ig a:hover { color:var(--white); }

  /* ══════════════════════════════════════
     CONTACT
  ══════════════════════════════════════ */
  #contact {
    background:
      radial-gradient(ellipse 50% 80% at 85% 80%, rgba(160,160,210,0.035) 0%, transparent 70%),
      var(--deep);
  }
  .contact-wrap {
    display:grid; grid-template-columns:1fr 1fr;
    gap:6rem; max-width:1100px; margin:0 auto;
  }
  .c-detail { display:flex; flex-direction:column; gap:1.8rem; margin-top:2rem; }
  .c-item { display:flex; flex-direction:column; gap:.25rem; }
  .c-lbl { font-size:.56rem; letter-spacing:.3em; text-transform:uppercase; color:var(--sdim); }
  .c-val { font-size:.9rem; color:var(--slight); line-height:1.7; }
  .c-val a { color:inherit; text-decoration:none; transition:color .3s; }
  .c-val a:hover { color:var(--white); }
  .c-form { display:flex; flex-direction:column; gap:1.1rem; }
  .f-row { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
  .f-grp { display:flex; flex-direction:column; gap:.4rem; position: relative; }
  .f-grp label { font-size:.56rem; letter-spacing:.25em; text-transform:uppercase; color:var(--sdim); }
  .f-grp input, .f-grp select, .f-grp textarea {
    background:rgba(255,255,255,.04); border:1px solid var(--border);
    color:var(--slight); padding:.8rem .95rem;
    font-family:'Jost',sans-serif; font-size:.83rem; font-weight:300;
    outline:none; transition:border-color .3s, background .3s; width:100%;
  }
  .f-grp::after {
    content: '';
    position: absolute; bottom: 0; left: 50%;
    width: 0; height: 1px;
    background: var(--smid);
    transition: width 0.4s ease, left 0.4s ease;
    pointer-events: none;
  }
  .f-grp:focus-within::after { width: 100%; left: 0; }
  .f-grp input::placeholder, .f-grp textarea::placeholder { color:var(--sdim); }
  .f-grp input:focus, .f-grp select:focus, .f-grp textarea:focus {
    border-color: rgba(200,200,220,0.2); background:rgba(255,255,255,.065);
  }
  .f-grp select option { background:var(--deep); }
  .f-grp textarea { height:100px; resize:vertical; }
  .btn-submit {
    background:linear-gradient(135deg,#D0D0E4,#A4A4BC,#CCCCE0);
    color:var(--black); border:none; padding:.9rem 2.2rem;
    font-family:'Jost',sans-serif; font-size:.66rem; font-weight:500;
    letter-spacing:.2em; text-transform:uppercase; cursor:pointer;
    transition:opacity .3s, transform .3s; align-self:flex-start;
  }
  .btn-submit:hover { opacity:.85; transform:translateY(-2px); }

  /* ══════════════════════════════════════
     FOOTER
  ══════════════════════════════════════ */
  footer {
    background:#040408;
    border-top:1px solid var(--border);
    padding:3rem 4rem;
  }
  .ft-top {
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:2rem; border-bottom:1px solid var(--border); margin-bottom:1.8rem;
  }
  .ft-links { display:flex; gap:1.8rem; list-style:none; }
  .ft-links a {
    font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
    text-decoration:none; color:var(--sdim); transition:color .3s;
  }
  .ft-links a:hover { color:var(--slight); }
  .ft-bot { display:flex; align-items:center; justify-content:space-between; }
  .ft-copy { font-size:.62rem; color:var(--sdim); }
  .ft-phone { font-size:.66rem; color:var(--sdim); text-decoration:none; transition:color .3s; }
  .ft-phone:hover { color:var(--slight); }

  /* ══════════════════════════════════════
     MOBILE
  ══════════════════════════════════════ */
  @media (max-width:980px) {
    #nav { padding:1.1rem 1.4rem; }
    #nav.sc { padding:.7rem 1.4rem; }
    .nav-links { display:none; }
    .ham { display:flex; }
    #hero-wrapper { height: calc(500px + 100vh); }
    .hero-content { padding: 1.5rem; }
    #stats { grid-template-columns:repeat(2,1fr); }
    .stat-item:nth-child(2) { border-right:none; }
    .sec { padding:5rem 1.5rem; }
    #about { grid-template-columns:1fr; padding:4rem 1.5rem; gap:2.5rem; }
    .about-photo { height:300px; }
    .services-grid { grid-template-columns:1fr; }
    .feat-grid { grid-template-columns:1fr 1fr; }
    .gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
    .g-item { height:200px; }
    .gallery-ig { padding:1.5rem; }
    .t-grid { grid-template-columns:1fr; }
    .book-box { padding:2rem 1.5rem; }
    .contact-wrap { grid-template-columns:1fr; gap:3rem; }
    .f-row { grid-template-columns:1fr; }
    .ft-top { flex-direction:column; gap:1.5rem; text-align:center; }
    .ft-links { justify-content:center; flex-wrap:wrap; }
    .ft-bot { flex-direction:column; gap:.5rem; text-align:center; }
  }
  @media (max-width:600px) {
    .feat-grid { grid-template-columns:1fr; }
    .hero-actions { flex-direction:column; }
    .btn-primary, .btn-ghost { width:100%; text-align:center; justify-content:center; }
    #stats { grid-template-columns:repeat(2,1fr); }
  }
  @media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  }

  /* ══════════════════════════════════════
     ABOUT — MICRO INTERACTIONS
  ══════════════════════════════════════ */

  /* Cursor ambient light that follows mouse across the section */
  #about-light {
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(180,180,220,0.038) 0%, transparent 68%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 0;
    will-change: left, top;
  }
  #about > *:not(#about-light):not(.about-monogram):not(.about-rule-top):not(.about-rule-bottom):not(.about-corner) { position: relative; z-index: 1; }

  /* Bento image 3D tilt */
  .bento-img {
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.23,1,0.32,1);
    will-change: transform;
  }
  .bento-img img {
    transform: translateZ(0);
    transition: transform 0.55s cubic-bezier(0.23,1,0.32,1), filter .5s;
  }

  /* Stat card pulse shimmer */
  @keyframes stat-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
  }
  .bento-stat-num {
    background: linear-gradient(
      90deg,
      #8888A4 0%,
      #E8E8F4 40%,
      #C0C0D4 55%,
      #8888A4 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: stat-shimmer 7s linear infinite;
  }

  /* Floating particle trail in about section */
  .about-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: particle-rise var(--dur, 1.8s) ease-out forwards;
  }
  @keyframes particle-rise {
    0%   { opacity: var(--op, 0.5); transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 70px)) scale(0.1); }
  }

  /* ══════════════════════════════════════
     NEW GUEST EXCLUSIVE  —  ivory panel, gold accents
  ══════════════════════════════════════ */
  :root {
    --ivory:      #F7F4ED;
    --ivory-deep: #EFEAE0;
    --gold:       #A2854E;
    --gold-deep:  #8A6E3C;
    --gold-star:  #C9A45C;
    --ink:        #1A1815;
    --ink-soft:   #4A443C;
  }
  #new-guest {
    background: var(--black);
    padding: 6rem 4rem;
    position: relative;
  }
  .ng-panel {
    max-width: 1080px; margin: 0 auto;
    background: linear-gradient(165deg, var(--ivory) 0%, var(--ivory-deep) 100%);
    padding: 4.5rem 4rem 3.5rem;
    position: relative;
    box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  }
  /* corner brackets */
  .ng-panel::before, .ng-panel::after {
    content:''; position:absolute; width:34px; height:34px; pointer-events:none;
    border-color: rgba(162,133,78,0.55); border-style: solid; border-width: 0;
  }
  .ng-panel::before { top:18px; left:18px;  border-top-width:1px; border-left-width:1px; }
  .ng-panel::after  { bottom:18px; right:18px; border-bottom-width:1px; border-right-width:1px; }

  .ng-head { text-align:center; margin-bottom: 3rem; }
  .ng-eyebrow {
    font-family:'Jost',sans-serif; font-size:.68rem; font-weight:400;
    letter-spacing:.42em; text-transform:uppercase; color:var(--gold);
  }
  .ng-rule {
    display:flex; align-items:center; justify-content:center; gap:.9rem;
    margin:1.1rem auto 1.4rem; max-width:420px;
  }
  .ng-rule::before, .ng-rule::after {
    content:''; height:1px; flex:1; background:rgba(162,133,78,0.4);
  }
  .ng-rule span { color:var(--gold); font-size:.6rem; letter-spacing:.1em; }
  .ng-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.4rem,4.4vw,3.6rem); line-height:1.05; color:var(--ink);
  }
  .ng-title em { font-style:italic; color:var(--gold-deep); }
  .ng-sub {
    font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
    font-size:1.12rem; color:var(--ink-soft); margin-top:.9rem;
  }

  .ng-offer {
    display:grid; grid-template-columns: 1fr auto; gap:2.5rem;
    align-items:center;
    padding:1.9rem 0;
    border-top:1px solid rgba(26,24,21,0.13);
  }
  .ng-offer:first-of-type { border-top:none; }
  .ng-offer-name {
    font-family:'Cormorant Garamond',serif; font-weight:400;
    font-size:1.65rem; color:var(--ink); line-height:1.15;
  }
  .ng-badge {
    display:inline-block; margin-left:.85rem; vertical-align:middle;
    font-family:'Jost',sans-serif; font-size:.56rem; font-weight:400;
    letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
    border:1px solid rgba(162,133,78,0.45); padding:.28rem .6rem;
  }
  .ng-offer-desc {
    font-family:'Jost',sans-serif; font-size:.9rem; font-weight:300;
    line-height:1.65; color:var(--ink-soft); margin-top:.55rem; max-width:52ch;
  }
  .ng-offer-price { text-align:right; white-space:nowrap; }
  .ng-was {
    font-family:'Cormorant Garamond',serif; font-size:1.5rem;
    color:rgba(26,24,21,0.42); text-decoration:line-through;
    text-decoration-thickness:1px; margin-right:.55rem;
  }
  .ng-now {
    font-family:'Cormorant Garamond',serif; font-weight:400;
    font-size:2.9rem; color:var(--gold-deep); letter-spacing:-0.01em;
  }
  .ng-meta {
    font-family:'Jost',sans-serif; font-size:.63rem; font-weight:400;
    letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
    margin-top:.5rem;
  }

  .ng-foot { text-align:center; margin-top:2.6rem; }
  .ng-terms {
    font-family:'Jost',sans-serif; font-size:.63rem; font-weight:400;
    letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
  }
  .ng-cta {
    display:inline-block; margin-top:1.6rem;
    background:var(--ink); color:var(--ivory);
    font-family:'Jost',sans-serif; font-size:.72rem; font-weight:400;
    letter-spacing:.26em; text-transform:uppercase;
    padding:1.05rem 2.9rem; text-decoration:none;
    position:relative; overflow:hidden;
    transition:background .35s ease, transform .35s ease;
  }
  .ng-cta::before {
    content:''; position:absolute; top:0; left:-80%; width:55%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
    transform:skewX(-18deg); transition:left .65s ease; pointer-events:none;
  }
  .ng-cta:hover { background:var(--gold-deep); transform:translateY(-2px); }
  .ng-cta:hover::before { left:150%; }

  /* ══════════════════════════════════════
     SERVICE CATEGORIES
  ══════════════════════════════════════ */

  /* ══════════════════════════════════════
     FULL MENU  —  tabbed price list
  ══════════════════════════════════════ */
  .menu-tabs {
    display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem;
    margin:2.8rem auto 0; max-width:960px;
  }
  .menu-tab {
    font-family:'Jost',sans-serif; font-size:.66rem; font-weight:400;
    letter-spacing:.2em; text-transform:uppercase;
    color:var(--sdim); background:transparent;
    border:1px solid var(--border); padding:.72rem 1.25rem;
    cursor:pointer; transition:color .3s, border-color .3s, background .3s;
  }
  .menu-tab:hover { color:var(--smid); border-color:rgba(200,200,220,0.22); }
  .menu-tab.on {
    color:var(--black); background:var(--slight); border-color:var(--slight);
  }
  .menu-panel { display:none; max-width:860px; margin:2.8rem auto 0; }
  .menu-panel.on { display:block; animation:menu-fade .5s ease both; }
  @keyframes menu-fade { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
  .menu-row {
    display:grid; grid-template-columns:1fr auto; gap:2rem;
    padding:1.15rem 0; border-bottom:1px solid rgba(200,200,220,0.07);
    align-items:baseline;
  }
  .menu-row:last-child { border-bottom:none; }
  .menu-name {
    font-family:'Cormorant Garamond',serif; font-size:1.22rem;
    font-weight:400; color:var(--white);
  }
  .menu-desc {
    font-family:'Jost',sans-serif; font-size:.8rem; font-weight:300;
    line-height:1.65; color:var(--sdim); margin-top:.32rem; max-width:60ch;
  }
  .menu-right { text-align:right; white-space:nowrap; }
  .menu-price {
    font-family:'Cormorant Garamond',serif; font-size:1.35rem; color:var(--slight);
  }
  .menu-dur {
    display:block; font-family:'Jost',sans-serif; font-size:.6rem;
    letter-spacing:.16em; text-transform:uppercase; color:var(--sdim); margin-top:.25rem;
  }
  .menu-row.is-free .menu-price { color:var(--gold); }

  @media (max-width: 980px) {
    #new-guest { padding:4rem 1.25rem; }
    .ng-panel  { padding:3rem 1.6rem 2.6rem; }
    .ng-offer  { grid-template-columns:1fr; gap:1rem; }
    .ng-offer-price { text-align:left; }
    .ng-now { font-size:2.4rem; }
    .menu-row  { grid-template-columns:1fr; gap:.5rem; }
    .menu-right{ text-align:left; }
  }

  /* ══════════════════════════════════════
     CONTACT PANEL  (replaces the form)
  ══════════════════════════════════════ */
  .c-panel {
    border:1px solid var(--border);
    background:linear-gradient(168deg, rgba(255,255,255,.028) 0%, rgba(255,255,255,.006) 100%);
    padding:2.6rem 2.2rem 2.2rem;
    display:flex; flex-direction:column; gap:.55rem;
  }
  .c-panel-eyebrow {
    font-family:'Jost',sans-serif; font-size:.6rem; letter-spacing:.28em;
    text-transform:uppercase; color:var(--gold);
  }
  .c-panel-lead {
    font-family:'Jost',sans-serif; font-size:.87rem; font-weight:300; line-height:1.7;
    color:var(--smid); margin:.35rem 0 1.4rem; max-width:44ch;
  }
  .c-action {
    position:relative; display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:1.05rem .25rem; text-decoration:none;
    border-top:1px solid rgba(200,200,220,.075);
    transition:padding-left .45s cubic-bezier(.22,1,.36,1);
  }
  .c-action:last-of-type { border-bottom:1px solid rgba(200,200,220,.075); }
  /* hairline that draws in from the left on hover */
  .c-action::before {
    content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0;
    background:linear-gradient(90deg, var(--slight), transparent);
    transition:width .55s cubic-bezier(.22,1,.36,1);
  }
  .c-action:hover::before, .c-action:focus-visible::before { width:100%; }
  .c-action:hover, .c-action:focus-visible { padding-left:.85rem; }
  .c-action-txt { display:flex; flex-direction:column; gap:.2rem; }
  .c-action-k {
    font-family:'Cormorant Garamond',serif; font-size:1.28rem; color:var(--white);
  }
  .c-action-s {
    font-family:'Jost',sans-serif; font-size:.7rem; font-weight:300;
    letter-spacing:.06em; color:var(--sdim);
  }
  .c-action-arrow {
    font-size:1rem; color:var(--sdim); flex-shrink:0;
    transform:translateX(-4px); opacity:.5;
    transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .45s, color .45s;
  }
  .c-action:hover .c-action-arrow, .c-action:focus-visible .c-action-arrow {
    transform:translateX(0); opacity:1; color:var(--slight);
  }
  .c-action-primary .c-action-k { color:var(--pure); }
  .c-panel-note {
    font-family:'Cormorant Garamond',serif; font-style:italic; font-size:.98rem;
    color:var(--gold); margin-top:1.5rem;
  }

  /* ══════════════════════════════════════
     ELEVATED SECTION SURFACES
     Depth via hairlines + one low warm light — not more content.
  ══════════════════════════════════════ */
  #services, #menu, #gallery, #testimonials, #contact, #features { position:relative; }

  /* a single hairline seam between major sections */
  #services::before, #gallery::before, #testimonials::before, #contact::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.14) 22%, rgba(200,200,220,.14) 78%, transparent);
  }
  /* warm, off-centre pools — echoes the candlelight in the booking image */
  #services { background:
      radial-gradient(ellipse 46% 38% at 82% 6%,  rgba(162,133,78,.055) 0%, transparent 68%),
      radial-gradient(ellipse 52% 44% at 12% 90%, rgba(150,150,205,.035) 0%, transparent 70%),
      var(--black); }
  #gallery { background:
      radial-gradient(ellipse 60% 30% at 50% 100%, rgba(162,133,78,.05) 0%, transparent 72%),
      var(--black); }
  #testimonials { background:
      radial-gradient(ellipse 70% 42% at 50% 6%, rgba(150,150,205,.045) 0%, transparent 70%),
      var(--deep); }
  #contact { background:
      radial-gradient(ellipse 44% 56% at 88% 72%, rgba(162,133,78,.05) 0%, transparent 70%),
      var(--black); }

  /* very fine grain over the dark sections — kills banding, reads as print */
  #services::after, #services::after, #testimonials::after, #contact::after {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.02;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:170px 170px;
  }
  #services > *, #services > *, #testimonials > *, #contact > * { position:relative; z-index:1; }

  /* ══════════════════════════════════════
     HAND-CRAFTED MICRO-INTERACTIONS
  ══════════════════════════════════════ */
  /* category cards: warm edge-light + lift, price ticks right */

  /* menu rows: name eases right, price brightens */
  .menu-row { transition:background .4s ease; }
  .menu-name, .menu-price { transition:transform .45s cubic-bezier(.22,1,.36,1), color .4s ease; display:inline-block; }
  .menu-row:hover .menu-name  { transform:translateX(6px); color:var(--pure); }
  .menu-row:hover .menu-price { color:var(--gold); }

  /* menu tabs: underline wipes in from left */
  .menu-tab { position:relative; overflow:hidden; }
  .menu-tab::after {
    content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
    background:var(--slight); transition:width .4s cubic-bezier(.22,1,.36,1);
  }
  .menu-tab:hover::after { width:100%; }
  .menu-tab.on::after { width:0; }

  /* gallery: label rises rather than fading flat */
  .g-label { display:inline-block; transform:translateY(8px); transition:transform .5s cubic-bezier(.22,1,.36,1); }
  .g-item:hover .g-label { transform:translateY(0); }

  /* section eyebrows: the rule draws out from the word */
  .eyebrow { position:relative; }

  /* focus ring — keyboard users get a real, on-brand indicator */
  a:focus-visible, button:focus-visible, .menu-tab:focus-visible {
    outline:1px solid var(--gold); outline-offset:3px; border-radius:1px;
  }

  @media (prefers-reduced-motion: reduce) {
  }
  @media (max-width: 980px) {
    .c-panel { padding:2rem 1.4rem 1.8rem; }
    .c-action-k { font-size:1.15rem; }
  }
  .skip-link {
    position:absolute; left:-9999px; top:0; z-index:999;
    background:var(--slight); color:var(--black); padding:.8rem 1.4rem;
    font-family:'Jost',sans-serif; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  }
  .skip-link:focus { left:1rem; top:1rem; }
  .t-badge {
    display:inline-flex; align-items:center; gap:.7rem; margin-top:1.5rem;
    padding:.6rem 1.2rem; border:1px solid var(--border); border-radius:999px;
    text-decoration:none; transition:border-color .4s ease, background .4s ease;
  }
  .t-badge { cursor:default; }
  .t-badge-score {
    font-family:'Cormorant Garamond',serif; font-size:1.35rem; color:var(--pure); line-height:1;
  }
  .t-badge-stars { display:inline-flex; gap:2px; }
  .t-badge-stars i {
    width:10px; height:10px; background:var(--gold-star);
    clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  }
  .t-badge-meta {
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--sdim);
  }
  .t-card blockquote { border:none; }
  .t-src { display:block; margin-top:.35rem; color:var(--sdim); letter-spacing:.14em; }
  /* ── Price list: rows deal in like a printed menu being laid out ── */
  .menu-panel.on .menu-row {
    animation: menu-row-in .7s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes menu-row-in {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:none; }
  }
  .menu-panel.on .menu-row:nth-child(1) { animation-delay:.02s }
  .menu-panel.on .menu-row:nth-child(2) { animation-delay:.07s }
  .menu-panel.on .menu-row:nth-child(3) { animation-delay:.12s }
  .menu-panel.on .menu-row:nth-child(4) { animation-delay:.17s }
  .menu-panel.on .menu-row:nth-child(5) { animation-delay:.22s }
  .menu-panel.on .menu-row:nth-child(6) { animation-delay:.27s }
  .menu-panel.on .menu-row:nth-child(7) { animation-delay:.32s }
  .menu-panel.on .menu-row:nth-child(8) { animation-delay:.37s }
  .menu-panel.on .menu-row:nth-child(9) { animation-delay:.42s }
  /* the hairline under each row draws across as the row settles */
  .menu-row { position:relative; border-bottom-color:transparent !important; }
  .menu-row::after {
    content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
    background:linear-gradient(90deg, rgba(200,200,220,.14), rgba(200,200,220,.05) 70%, transparent);
  }
  .menu-panel.on .menu-row::after { animation:menu-rule-draw 1.1s cubic-bezier(.22,1,.36,1) both; }
  .menu-panel.on .menu-row:last-child::after { display:none; }
  @keyframes menu-rule-draw { from { width:0 } to { width:100% } }

  /* ── Our Story: the monogram drifts against the scroll ── */
  .about-monogram { will-change:transform; }

  @media (prefers-reduced-motion: reduce) {
    .menu-panel.on .menu-row,
    .menu-panel.on .menu-row::after { animation:none !important; }
    .menu-panel.on .menu-row::after { width:100%; }
  }

  /* ══════════════════════════════════════════════════════════════
     MOBILE PASS  —  phone-specific decisions, not a squeezed desktop
     ≤700px: hero becomes a full-bleed still, decoration is dropped,
     hover-only content is made visible, targets grow to 44px.
  ══════════════════════════════════════════════════════════════ */
  @media (max-width: 700px) {

    /* ── HERO: full-bleed still. The clip-path reveal was a desktop idea —
       on a phone the frame is too small and the type spilled outside it. ── */
    #hero-wrapper { height: calc(420px + 100svh); }   /* travel for the reveal */
    #hero { height: 100svh; }
    #hero-clip {
      /* `cover` crops a landscape photo hard in portrait — pulled back so more
         of the room reads. The shortfall top/bottom is absorbed by the scrim. */
      background-size: auto 94%;
      background-position: 60% 46%;
      background-color: #07070A;
    }
    #hero-clip::after {
      background:
        linear-gradient(to bottom,
          #07070A 0%, rgba(7,7,10,.88) 5%, rgba(7,7,10,.48) 20%,
          rgba(7,7,10,.40) 46%, rgba(7,7,10,.62) 78%, rgba(7,7,10,.92) 95%, #07070A 100%);
    }
    .hero-content { padding: 1.5rem 1.4rem; }
    .hero-logo-img { width: min(64vw, 250px); }
    .hero-eyebrow  { font-size:.58rem; letter-spacing:.34em; }
    .hero-tagline  { font-size:1.28rem; margin-top:.2rem; }
    .hero-sub      { font-size:.92rem; line-height:1.65; max-width:32ch; margin-inline:auto; }
    .hero-actions  { width:100%; gap:.7rem; margin-top:1.6rem; }
    .hero-scroll-cue { bottom:1.5rem; }        /* there IS a reveal to scroll through */

    /* ── DROP DECORATION: framing devices that need room to read ── */
    .about-monogram,
    .about-corner,
    .about-rule-top, .about-rule-bottom,
    #services::before,                           /* breathing orb: costly blur, unreadable small */
    .ng-panel::before, .ng-panel::after { display:none; }   /* cursor light — no cursor here */

    /* ── TYPE: tighten the scale so headlines don't eat the viewport ── */
    .sec-title { font-size: clamp(1.9rem, 8.4vw, 2.5rem); line-height:1.12; }
    .eyebrow   { font-size:.56rem; letter-spacing:.3em; }
    .body-p    { font-size:.92rem; line-height:1.75; }

    /* ── SPACING: tighter verticals, consistent 1.15rem gutter ── */
    .sec { padding: 3.6rem 1.15rem; }
    #about { padding: 3.4rem 1.15rem; gap:2rem; }
    #new-guest { padding: 3.4rem 1.15rem; }
    .ng-panel { padding: 2.2rem 1.25rem 2rem; }
    .ng-head { margin-bottom:2rem; }
    .ng-offer { padding:1.4rem 0; gap:.75rem; }
    .ng-title { font-size: clamp(1.9rem, 8.2vw, 2.4rem); }
    .ng-sub { font-size:1rem; }
    .ng-now { font-size:2.1rem; }
    .ng-offer-name { font-size:1.32rem; }
    .ng-offer-desc { font-size:.86rem; }
    .ng-cta { display:block; text-align:center; padding:1.05rem 1rem; }

    #hero-clip { will-change: clip-path; }
    .hero-content { will-change: transform, opacity; }

    /* a hint that the strip keeps going */
    .menu-tabs { -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
                 mask-image:linear-gradient(90deg,#000 88%,transparent 100%); }

    /* ── PRICE LIST: tabs become a swipeable strip instead of a wrapped block ── */
    .menu-tabs {
      flex-wrap: nowrap; justify-content: flex-start;
      overflow-x: auto; overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;      /* free momentum, no snapping */
      margin-inline: -1.15rem; padding: 0 1.15rem .25rem;
      scrollbar-width: none; touch-action: pan-x;
    }
    .menu-tabs::-webkit-scrollbar { display:none; }
    .menu-tab { flex:0 0 auto; padding:.85rem 1.1rem; }
    .menu-row { grid-template-columns:1fr; gap:.45rem; padding:1.05rem 0; }
    .menu-right { text-align:left; display:flex; align-items:baseline; gap:.7rem; }
    .menu-dur { margin-top:0; }
    .menu-name { font-size:1.12rem; }
    .menu-desc { font-size:.82rem; }

    /* ── SERVICES: cards get room to breathe ── */

    /* ── GALLERY: labels are hover-only on desktop, so surface them here ── */
    .gallery-grid { gap:2px; }
    .g-item { height:170px; }
    .g-overlay {
      opacity:1; align-items:flex-end; justify-content:flex-start;
      background:linear-gradient(to top, rgba(7,7,10,.78) 0%, transparent 55%);
      padding:.7rem .8rem;
    }
    .g-label { transform:none; font-size:.82rem; }
    .g-item::before { opacity:.55; }             /* ease the warm wash on small tiles */

    /* ── CONTACT / BOOKING ── */
    .c-panel { padding:1.8rem 1.25rem 1.6rem; }
    .book-inner { padding:4.5rem 1.15rem; }
    .book-logo-img { width:74px; }
    .t-card { padding:2rem 1.4rem; }

    /* ── NAV: wordmark text collides with the CTA at this width.
       Keep the mark, drop the lockup text — the hero states the name anyway. ── */
    .logo-nav .logo-text { display:none; }
    .logo-mark-img { height:38px; }
    #nav.sc .logo-mark-img { height:32px; }
    #nav { padding:.9rem 1.15rem; gap:.75rem; }
    #nav.sc { padding:.6rem 1.15rem; }
    .nav-cta { font-size:.6rem; letter-spacing:.16em; padding:.8rem 1rem; }

    /* ── TAP TARGETS: WCAG 2.5.5 wants 44×44 ── */
    .nav-cta { padding:.85rem 1.35rem; min-height:44px; display:inline-flex; align-items:center; }
    .nav-links a {
      min-height:44px; display:flex; align-items:center; justify-content:center; width:100%;
    }
    .ft-links a, .gallery-ig a, .c-val a, .book-phone, .ft-phone,
    .book-ig a, .ft-top > a {
      min-height:44px; display:inline-flex; align-items:center; justify-content:center;
    }
    .ft-links { gap:.2rem 1.1rem; }
    .c-action { padding:1.15rem .25rem; min-height:44px; }
    .ham { min-width:44px; min-height:44px; align-items:center; justify-content:center; }

    /* ── STATS: 2×2 with breathing room ── */
    #stats { grid-template-columns:repeat(2,1fr); }
    .stat-item { padding:1.9rem .8rem; }
  }

  /* short phones (SE/mini): hero content crowds the nav when the screen is <=700px tall */
  @media (max-width: 700px) and (max-height: 720px) {
    .hero-content { padding-top: 4.2rem; }
    .hero-logo-img { width: min(52vw, 190px); }
    .hero-eyebrow { margin-bottom:.2rem; }
    .hero-sub { font-size:.86rem; }
    .hero-actions { margin-top:1.1rem; }
  }
  /* notched phones in standalone/fullscreen */
  @media (max-width: 700px) {
    #nav { padding-top: calc(.9rem + env(safe-area-inset-top, 0px)); }
  }

  /* very small phones */
  @media (max-width: 380px) {
    .hero-logo-img { width:70vw; }
    .ng-now { font-size:1.9rem; }
    .g-item { height:145px; }
  }
  .c-val-sub { display:inline-block; margin-top:.3rem; color:var(--sdim); }
  .c-val-sub a { color:var(--smid); }

  /* ══════════════════════════════════════
     PRODUCTS — opening banner
     Same typography as the About banner (.ah2-*), so the two pages open
     in the same voice. The backdrop is built rather than photographed —
     see the note in the markup.
  ══════════════════════════════════════ */
  #products-hero {
    position:relative; overflow:hidden;
    background:
      radial-gradient(ellipse 60% 48% at 18% 12%, rgba(201,164,92,.05) 0%, transparent 70%),
      linear-gradient(180deg, #0B0B10 0%, #101016 52%, #09090D 100%);
    padding:7rem 4rem 6rem;
  }
  .ph-bg {
    position:absolute; inset:0; z-index:0; pointer-events:none;
    /* Zoomed and pushed left so the glass product cabinet lands in the
       lit right-hand half, and the polish wall falls under the scrim. */
    background:url('./gallery-nails-display.jpg') 20% 38% / 130% auto no-repeat;
    background-image:image-set(url('./gallery-nails-display.webp') type('image/webp'),
                               url('./gallery-nails-display.jpg') type('image/jpeg'));
    /* The room is bright and white; it has to be pulled down hard to sit
       in a dark palette without washing the headline out. */
    opacity:.42; filter:saturate(.62) contrast(1.12) brightness(.52);
  }
  #products-hero::before {          /* fade the photo out under the headline */
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg, #09090D 6%, rgba(9,9,13,.92) 36%,
                                      rgba(9,9,13,.55) 70%, rgba(9,9,13,.25) 100%);
  }
  .ph-atmos { position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
  #products-hero .ah2-inner { z-index:3; }
  .ph-title em { font-style:italic; color:var(--smid); }
  .ah2-lead-2 { margin-top:1.3rem; }
  .ph-bloom {
    position:absolute; border-radius:50%;
    opacity:0; transition:opacity 2.4s ease; will-change:transform;
  }
  #products-hero.live .ph-bloom { opacity:1; }
  .ph-bloom-a {
    width:58vw; height:58vw; max-width:860px; max-height:860px;
    left:-14%; top:-26%;
    background:radial-gradient(circle, rgba(201,164,92,.08) 0%, rgba(201,164,92,.022) 44%, transparent 70%);
    animation:phBloomA 41s ease-in-out infinite;
  }
  .ph-bloom-b {
    width:52vw; height:52vw; max-width:780px; max-height:780px;
    right:-16%; bottom:-34%;
    background:radial-gradient(circle, rgba(170,178,215,.05) 0%, rgba(170,178,215,.014) 46%, transparent 72%);
    animation:phBloomB 59s ease-in-out infinite;
  }
  @keyframes phBloomA {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    50%     { transform:translate3d(10%,9%,0) scale(1.13); }
  }
  @keyframes phBloomB {
    0%,100% { transform:translate3d(0,0,0) scale(1.07); }
    50%     { transform:translate3d(-9%,-8%,0) scale(1); }
  }

  /* One upright band of light, the way a display cabinet is lit. It leans
     a few degrees so it never reads as a hard edge. */
  .ph-shelf {
    position:absolute; top:-60%; left:0; height:220%; width:34%;
    opacity:0; will-change:transform;
    background:linear-gradient(90deg, transparent 0%,
      rgba(201,164,92,.04) 34%, rgba(235,217,168,.065) 50%,
      rgba(201,164,92,.04) 66%, transparent 100%);
    animation:phShelf 48s linear infinite;
  }
  #products-hero.live .ph-shelf { opacity:1; transition:opacity 2.4s ease; }
  @keyframes phShelf {
    0%   { transform:rotate(9deg) translate3d(-180%,0,0); opacity:0; }
    18%  { opacity:1; }
    82%  { opacity:1; }
    100% { transform:rotate(9deg) translate3d(360%,0,0); opacity:0; }
  }
  .ph-veil {
    position:absolute; inset:0;
    background:radial-gradient(ellipse 92% 76% at 34% 50%, transparent 0%, rgba(9,9,13,.3) 74%, rgba(9,9,13,.62) 100%);
  }
  /* the hairline that every section below opens with, so the seam matches */
  #products-hero::after {
    content:''; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.12) 22%, rgba(200,200,220,.12) 78%, transparent);
  }
  #products-hero:not(.live) .ph-bloom,
  #products-hero:not(.live) .ph-shelf { animation-play-state:paused; }

  @media (max-width:700px) {
    #products-hero { padding:4rem 1.15rem 3.4rem; }
    .ph-bloom-b { display:none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ph-bloom, .ph-shelf { animation:none !important; transition:none !important; }
    .ph-shelf { transform:rotate(9deg) translate3d(60%,0,0); }
  }

  /* ══════════════════════════════════════
     PROFESSIONAL PRODUCT LINES
  ══════════════════════════════════════ */
  #products {
    background:
      radial-gradient(ellipse 54% 40% at 50% 0%, rgba(162,133,78,.05) 0%, transparent 68%),
      var(--black);
    /* No overflow:hidden anywhere above the shader canvas. An ancestor that
       hides overflow becomes the scroll container for a sticky child, so the
       pinned canvas would stop following the viewport and sit at the top of
       the section — lighting the first brand and nothing after it. */
    position:relative;
  }
  /* The shader needs the section's children above it, and a scrim of its
     own so the molten gold never washes over the brand photography. */
  #products > div, #products > p { position:relative; z-index:1; }
  #products::after {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse 90% 78% at 50% 50%, rgba(7,7,10,.04) 0%, rgba(7,7,10,.28) 74%, rgba(7,7,10,.58) 100%);
  }
  #products .bg2-stage {
    position:absolute; inset:0; z-index:0; pointer-events:none;
  }
  #products .bg2-shader {
    position:sticky; top:0; height:100vh; width:100%;
  }
  #products .bg2-shader.ready { opacity:.6; }
  #products::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3; display:none;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.14) 22%, rgba(200,200,220,.14) 78%, transparent);
  }
  .brand-lead {
    max-width:46ch; margin:1.4rem auto 0; text-align:center;
    font-family:'Jost',sans-serif; font-size:.94rem; font-weight:300;
    line-height:1.75; color:var(--smid);
  }
  .brand:hover img { filter:brightness(1) saturate(1); transform:scale(1.035); }
  /* warm seam so the cream tiles sit inside the dark page rather than on top of it */
  .brand:hover::after { opacity:.4; }
  .brand-note {
    text-align:center; margin:2.2rem auto 0; max-width:52ch;
    font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
    font-size:1.02rem; color:var(--sdim);
  }
  @media (max-width:700px) {
    .brand-lead { font-size:.9rem; }
    .brand-note { font-size:.95rem; margin-top:1.8rem; }
  }
  .ft-contact { display:inline-flex; align-items:center; gap:.55rem; flex-wrap:wrap; justify-content:center; }
  .ft-sep { color:var(--sdim); }
  @media (max-width:700px){ .ft-contact { gap:.35rem; } }
  .ft-social { display:inline-flex; align-items:center; gap:1.15rem; }
  .ft-social a { color:var(--sdim); display:inline-flex; transition:color .3s ease; }
  .ft-social a:hover { color:var(--slight); }
  @media (max-width:700px){ .ft-social a { min-height:44px; align-items:center; } }

  /* ══════════════════════════════════════
     PRODUCT TILES — micro-interactions
     A specular sweep (the same shimmer language as the buttons),
     a lift with real shadow, and a curtain entrance.
  ══════════════════════════════════════ */
  .brand { will-change:transform; transform:translateZ(0); }

  /* entrance: the tile uncovers upward, image settling from a slight zoom */
  .brand.rv {
    opacity:1; transform:none;
    transition:clip-path 1.05s cubic-bezier(.22,1,.36,1),
               transform .6s cubic-bezier(.22,1,.36,1),
               box-shadow .6s ease;
  }
  /* The curtain only engages once JS confirms it can also lift it —
     without this gate a script failure would leave the tiles invisible. */

  /* specular sweep — light travelling across the glass */
  .brand:hover::before { left:135%; }

  /* lift off the page */
  .brand img { transition:filter .7s ease, transform 1.15s cubic-bezier(.22,1,.36,1); }
  .brand:hover img { transform:scale(1.055); }

  @media (prefers-reduced-motion: reduce) {
    .brand.rv, .brand.rv img { clip-path:none !important; transform:none !important; transition:none !important; }
    .brand::before { display:none; }
    .brand:hover { transform:none; }
  }
  @media (max-width:700px) {
    .brand::before { display:none; }          /* no hover on touch */
    .brand:hover { transform:none; box-shadow:none; }
  }

  /* ══════════════════════════════════════
     CLIENT RESULTS — before/after comparison
  ══════════════════════════════════════ */
  #results {
    /* Four washes over a base that lifts through the middle and settles
       toward the black of the section below, so the block reads as lit
       and the seam into About Us stops being a step. */
    background:
      radial-gradient(ellipse 58% 42% at 50% 0%,  rgba(201,164,92,.06)  0%, transparent 68%),
      radial-gradient(ellipse 52% 46% at 6% 68%,  rgba(170,178,215,.05) 0%, transparent 70%),
      radial-gradient(ellipse 48% 44% at 96% 30%, rgba(201,164,92,.045) 0%, transparent 70%),
      radial-gradient(ellipse 76% 40% at 50% 54%, rgba(201,164,92,.02)  0%, transparent 72%),
      linear-gradient(180deg, #0D0D12 0%, #111116 44%, #0A0A0E 100%);
    position:relative;
  }
  #results::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.14) 22%, rgba(200,200,220,.14) 78%, transparent);
  }
  .ba-stage { max-width:860px; margin:3rem auto 0; }
  .ba {
    position:relative; overflow:hidden; aspect-ratio:1014/706;
    margin:0 auto; width:100%;
    border:1px solid var(--border); cursor:ew-resize;
    touch-action:pan-y; user-select:none; -webkit-user-select:none;
  }
  .ba img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    display:block; pointer-events:none;
  }
  /* the AFTER sits on top and is revealed from the right as the handle moves */
  .ba-after { clip-path:inset(0 0 0 var(--split, 50%)); }
  .ba-divider {
    position:absolute; top:0; bottom:0; left:var(--split, 50%);
    width:1px; background:rgba(255,255,255,.85); pointer-events:none; z-index:4;
    box-shadow:0 0 14px rgba(0,0,0,.45);
  }
  .ba-handle {
    position:absolute; top:50%; left:var(--split, 50%);
    transform:translate(-50%,-50%);
    width:46px; height:46px; border-radius:50%;
    background:rgba(255,255,255,.95); color:#14131A;
    display:grid; place-items:center; font-size:.85rem; letter-spacing:.05em;
    pointer-events:none; z-index:5;
    box-shadow:0 4px 20px rgba(0,0,0,.45);
  }
  .ba-tag {
    position:absolute; bottom:1rem; z-index:4; pointer-events:none;
    font-family:'Jost',sans-serif; font-size:.6rem; font-weight:400;
    letter-spacing:.2em; text-transform:uppercase; color:var(--pure);
    background:rgba(20,19,26,.68); padding:.45rem .85rem;
  }
  .ba-tag.before { left:1rem; }
  .ba-tag.after  { right:1rem; }
  .ba-caption {
    display:flex; align-items:baseline; justify-content:center; gap:.7rem;
    margin-top:1.3rem; text-align:center; flex-wrap:wrap;
  }
  .ba-treatment {
    font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--white);
  }
  .ba-meta {
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--gold);
  }
  .ba-disclaimer {
    text-align:center; margin-top:.7rem;
    font-family:'Jost',sans-serif; font-size:.72rem; font-weight:300; color:var(--sdim);
  }
  .ba-hint {
    text-align:center; margin-top:.5rem;
    font-family:'Jost',sans-serif; font-size:.65rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--sdim);
  }

  /* ══════════════════════════════════════
     TECHNOLOGY
  ══════════════════════════════════════ */
  #technology {
    background:
      radial-gradient(ellipse 48% 38% at 14% 6%, rgba(162,133,78,.05) 0%, transparent 66%),
      var(--black);
    position:relative;
  }
  #technology::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.14) 22%, rgba(200,200,220,.14) 78%, transparent);
  }
  .tech-lead {
    max-width:52ch; margin:1.4rem auto 0; text-align:center;
    font-family:'Jost',sans-serif; font-size:.94rem; font-weight:300;
    line-height:1.75; color:var(--smid);
  }
  .tech-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
    background:var(--border); border:1px solid var(--border);
    max-width:1060px; margin:3rem auto 0;
  }
  .tech-card {
    background:var(--card); display:flex; flex-direction:column;
    transition:background .5s ease, transform .55s cubic-bezier(.22,1,.36,1);
  }
  .tech-card:hover { background:#171720; transform:translateY(-3px); }
  .tech-img { position:relative; overflow:hidden; aspect-ratio:533/800; background:#0F0F14; }
  .tech-img img {
    width:100%; height:100%; object-fit:cover; display:block;
    filter:brightness(.94) saturate(.98);
    transition:transform 1.1s cubic-bezier(.22,1,.36,1), filter .6s ease;
  }
  .tech-card:hover .tech-img img { transform:scale(1.04); filter:brightness(1) saturate(1); }
  .tech-body { padding:1.6rem 1.5rem 1.8rem; display:flex; flex-direction:column; gap:.55rem; }
  .tech-name {
    font-family:'Cormorant Garamond',serif; font-size:1.35rem; color:var(--white); line-height:1.2;
  }
  .tech-for {
    font-family:'Jost',sans-serif; font-size:.58rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--gold);
  }
  .tech-desc {
    font-family:'Jost',sans-serif; font-size:.86rem; font-weight:300;
    line-height:1.7; color:var(--smid); margin-top:.3rem;
  }

  @media (max-width:700px) {
    .ba { width:100%; }
    .ba-stage { margin-top:2rem; }
    .ba-handle { width:40px; height:40px; }
    .tech-grid { grid-template-columns:1fr; margin-top:2.2rem; }
    .tech-body { padding:1.4rem 1.25rem 1.6rem; }
  }

  /* ══════════════════════════════════════
     HERO WORD SEQUENCE
     Fills the stretch after the logo fades and before the next section —
     each line resolves from blurred + wide-tracked to sharp, then releases.
  ══════════════════════════════════════ */
  .hero-words {
    position:absolute; inset:0; z-index:3;
    display:grid; place-items:center;
    pointer-events:none;
  }
  .hero-word {
    grid-area:1 / 1;
    display:flex; flex-direction:column; align-items:center; gap:1.1rem;
    opacity:0; will-change:opacity, transform, filter;
  }
  /* a short hairline above the line — the detail that makes it a lockup */
  .hero-rule {
    width:62px; height:1px;
    background:linear-gradient(90deg, transparent, rgba(201,164,92,.85), transparent);
  }
  .hero-line {
    font-family:'Cormorant Garamond', serif;
    font-weight:300; font-style:normal;
    font-size:clamp(2.3rem, 6vw, 5.1rem);
    line-height:1.05; letter-spacing:.01em;
    color:var(--pure); text-align:center; white-space:nowrap;
    text-shadow:0 2px 30px rgba(0,0,0,.7), 0 0 70px rgba(0,0,0,.5);
  }
  /* the word that carries the meaning gets the brand gold */
  .hero-line em {
    font-style:italic; font-weight:300;
    background:linear-gradient(100deg, #C9A45C 0%, #EBD9A8 45%, #C9A45C 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    text-shadow:none;
    filter:drop-shadow(0 2px 20px rgba(0,0,0,.55));
  }
  @media (max-width:700px) {
    .hero-word { gap:.85rem; padding:0 1.4rem; }
    .hero-line { font-size:clamp(1.9rem, 9.5vw, 2.8rem); white-space:normal; }
    .hero-rule { width:46px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-words { display:none; }
  }
  .ba-thumbs {
    display:grid; grid-template-columns:repeat(5, 1fr); gap:.4rem; margin-top:1.4rem;
  }
  .ba-thumb {
    position:relative; padding:0; border:1px solid var(--border);
    background:var(--card); cursor:pointer; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; gap:0;
    transition:border-color .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
  }
  .ba-thumb img {
    width:100%; aspect-ratio:1; height:auto; object-fit:cover; display:block;
    filter:grayscale(.45) brightness(.8); transition:filter .45s ease;
  }
  .ba-thumb span {
    font-family:'Jost',sans-serif; font-size:.5rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--sdim); text-align:center;
    padding:.42rem .25rem; transition:color .4s ease; line-height:1.3;
  }
  .ba-thumb:hover { transform:translateY(-2px); border-color:rgba(200,200,220,.26); }
  .ba-thumb:hover img { filter:grayscale(.1) brightness(.95); }
  .ba-thumb.is-on { border-color:var(--gold-star); }
  .ba-thumb.is-on img { filter:none; }
  .ba-thumb.is-on span { color:var(--white); }
  .ba-thumb:focus-visible { outline:1px solid var(--gold); outline-offset:2px; }
  @media (max-width:700px) {
    .ba-thumbs { gap:.4rem; }
    .ba-thumb span { font-size:.46rem; }
  }
  .ba.is-manual .ba-handle { box-shadow:0 4px 20px rgba(0,0,0,.45), 0 0 0 2px rgba(201,164,92,.55); }
  .ba-layout {
    display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:2.6rem; align-items:start; max-width:1120px; margin:3rem auto 0;
  }
  .ba-stage { max-width:none; margin:0; }
  .ba-info { display:flex; flex-direction:column; gap:.1rem; padding-top:.2rem; }
  .ba-info-eyebrow {
    font-family:'Jost',sans-serif; font-size:.6rem; letter-spacing:.26em;
    text-transform:uppercase; color:var(--gold); margin-bottom:.7rem;
  }
  .ba-info h3.ba-treatment {
    font-family:'Cormorant Garamond',serif; font-weight:400;
    font-size:clamp(1.6rem,2.6vw,2.1rem); line-height:1.15; color:var(--white);
  }
  .ba-info-desc {
    font-family:'Jost',sans-serif; font-size:.9rem; font-weight:300;
    line-height:1.75; color:var(--smid); margin:.9rem 0 0; max-width:42ch;
  }
  .ba-facts {
    display:flex; gap:2rem; flex-wrap:wrap; margin:1.5rem 0 0;
    padding:1.1rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  }
  .ba-facts dt {
    font-family:'Jost',sans-serif; font-size:.56rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--sdim); margin-bottom:.3rem;
  }
  .ba-facts dd {
    margin:0; font-family:'Cormorant Garamond',serif; font-size:1.15rem; color:var(--slight);
  }
  .ba-book {
    display:inline-block; margin-top:1.5rem; align-self:flex-start;
    background:var(--slight); color:var(--black);
    font-family:'Jost',sans-serif; font-size:.68rem; font-weight:400;
    letter-spacing:.24em; text-transform:uppercase;
    padding:.95rem 1.9rem; text-decoration:none;
    position:relative; overflow:hidden;
    transition:background .35s ease, transform .35s ease;
  }
  .ba-book::before {
    content:''; position:absolute; top:0; left:-80%; width:55%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
    transform:skewX(-18deg); transition:left .65s ease;
  }
  .ba-book:hover { background:var(--pure); transform:translateY(-2px); }
  .ba-book:hover::before { left:150%; }
  .ba-thumbs { margin-top:1.8rem; }
  .ba-disclaimer { text-align:left; margin-top:1rem; }
  .ba-hint { margin-top:.8rem; }

  @media (max-width:980px) {
    .ba-layout { grid-template-columns:1fr; gap:1.8rem; }
    .ba-info-desc { max-width:none; }
      .ba-disclaimer { text-align:center; }
    .ba-book { align-self:stretch; text-align:center; }
  }

  /* ══════════════════════════════════════
     TOP UTILITY BAR
  ══════════════════════════════════════ */
  header { position:fixed; top:0; left:0; right:0; z-index:300; }
  #topbar {
    position:relative;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    gap:1rem; padding:.42rem 4rem;
    background:linear-gradient(180deg, #16141A 0%, #121016 100%);
    border-bottom:1px solid rgba(201,164,92,.22);
    font-family:'Jost',sans-serif;
    transition:padding .4s ease;
  }
  /* phone on top, email beneath it — both one tap/click away */
  .tb-left {
    justify-self:start; display:flex; flex-direction:column;
    align-items:flex-start; gap:.16rem; min-width:0;
  }
  .tb-phone, .tb-mail {
    display:inline-flex; align-items:center; gap:.45rem;
    letter-spacing:.1em; text-decoration:none;
    transition:color .3s ease; max-width:100%;
  }
  .tb-phone { font-size:.68rem; color:var(--slight); }
  .tb-mail  { font-size:.62rem; color:#9B97A4; }
  .tb-phone:hover, .tb-mail:hover { color:var(--pure); }
  .tb-phone svg, .tb-mail svg { color:var(--gold-star); flex-shrink:0; }
  .tb-mail  { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tb-tag {
    font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
    color:#9B97A4; white-space:nowrap; margin:0;
  }
  .tb-right { justify-self:end; display:inline-flex; align-items:center; gap:.85rem; }
  .tb-ig, .tb-fb { color:#9B97A4; display:inline-flex; transition:color .3s ease; }
  .tb-ig:hover, .tb-fb:hover { color:var(--gold-star); }
  /* the main nav sits below the bar until the bar tucks away */
  #nav { transition:background .5s, backdrop-filter .5s, padding .4s, border-color .5s, top .45s cubic-bezier(.22,1,.36,1); }
  @media (max-width:980px) {
    #topbar { grid-template-columns:1fr auto; padding:.38rem 1.15rem; gap:.6rem; }
    /* #open-status is an ID selector defined later in this file, so a plain
       `.tb-tag { display:none }` never won and the indicator has always been
       showing here — which pushed the bar onto a third row. */
    .tb-tag#open-status { display:none; }
    .tb-phone { font-size:.64rem; }
    .tb-mail  { font-size:.58rem; letter-spacing:.06em; }
    /* two small links stacked on a phone are easy to mis-tap, and hitting the
       wrong one opens the dialer instead of mail. Pad each to a 24px target
       (WCAG 2.5.8) and pull the bar's own padding in so it stays compact. */
    #topbar { padding:.15rem 1.15rem; }
    .tb-left { gap:0; }
    .tb-phone, .tb-mail { padding:.34rem 0; }
    /* offset still driven by --tb-h */
  }
  @media (max-width:420px) {
    .tb-ig, .tb-fb { display:none; }
    .tb-left { gap:.1rem; }
    .tb-mail { font-size:.55rem; letter-spacing:.02em; }
  }
  .tb-lang { display:inline-flex; border:1px solid rgba(201,164,92,.3); margin-left:.3rem; }
  .tb-l {
    appearance:none; border:0; background:transparent; cursor:pointer;
    font-family:'Jost',sans-serif; font-size:.58rem; letter-spacing:.14em;
    color:#9B97A4; padding:.32rem .55rem; transition:background .3s, color .3s;
  }
  .tb-l:hover { color:var(--slight); }
  .tb-l.is-on { background:var(--gold-star); color:var(--black); }
  .tb-l:focus-visible { outline:1px solid var(--gold); outline-offset:2px; }
  @media (max-width:420px) { .tb-l { padding:.3rem .45rem; } }

  /* ══════════════════════════════════════
     CLIENT RESULTS — ambient life
     Everything here sits behind or around the comparison; the slider
     itself is deliberately left untouched.
  ══════════════════════════════════════ */
  #results { overflow:hidden; }

  /* a single soft light that drifts across the section, very slowly */
  #results::after {
    content:''; position:absolute; inset:-20% -10%; z-index:0; pointer-events:none;
    background:
      radial-gradient(38% 46% at 22% 30%, rgba(201,164,92,.05)  0%, transparent 68%),
      radial-gradient(32% 40% at 78% 70%, rgba(150,150,205,.035) 0%, transparent 70%),
      radial-gradient(46% 34% at 62% 12%, rgba(214,170,110,.035) 0%, transparent 72%);
    animation:results-drift 34s ease-in-out infinite alternate;
    will-change:transform;
  }
  @keyframes results-drift {
    from { transform:translate3d(-2.5%, -1.5%, 0) scale(1.02); }
    to   { transform:translate3d( 2.5%,  1.5%, 0) scale(1.08); }
  }
  #results > * { position:relative; z-index:1; }

  /* ── moving gradient field ───────────────────────────────────────────
     Four blooms and one wide sheen, each on its own long cycle so they
     never line up into a loop you can spot. Transform and opacity only,
     so the whole field costs the compositor and nothing else. The atmos
     has to climb back under the content by name — the rule above puts
     every direct child of #results on layer 1. */
  #results > .rs-atmos {
    position:absolute; inset:0; z-index:0;
    overflow:hidden; pointer-events:none;
  }
  .rs-bloom {
    position:absolute; border-radius:50%;
    opacity:0; transition:opacity 2.4s ease; will-change:transform;
  }
  #results.live .rs-bloom { opacity:1; }
  .rs-bloom-a {
    width:62vw; height:62vw; max-width:900px; max-height:900px;
    left:-18%; top:-14%;
    background:radial-gradient(circle, rgba(201,164,92,.075) 0%, rgba(201,164,92,.022) 44%, transparent 70%);
    animation:rsBloomA 39s ease-in-out infinite;
  }
  .rs-bloom-b {
    width:54vw; height:54vw; max-width:820px; max-height:820px;
    right:-20%; top:22%;
    background:radial-gradient(circle, rgba(170,178,215,.055) 0%, rgba(170,178,215,.015) 46%, transparent 72%);
    animation:rsBloomB 53s ease-in-out infinite;
  }
  .rs-bloom-c {
    width:70vw; height:42vw; max-width:1040px; max-height:640px;
    left:22%; bottom:-28%;
    background:radial-gradient(ellipse, rgba(214,170,110,.05) 0%, rgba(201,164,92,.013) 48%, transparent 74%);
    animation:rsBloomC 67s ease-in-out infinite;
  }
  .rs-bloom-d {
    width:40vw; height:40vw; max-width:600px; max-height:600px;
    left:34%; top:-8%;
    background:radial-gradient(circle, rgba(235,217,168,.038) 0%, rgba(201,164,92,.01) 50%, transparent 74%);
    animation:rsBloomD 83s ease-in-out infinite;
  }
  @keyframes rsBloomA {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    50%     { transform:translate3d(12%,8%,0) scale(1.14); }
  }
  @keyframes rsBloomB {
    0%,100% { transform:translate3d(0,0,0) scale(1.08); }
    50%     { transform:translate3d(-10%,-10%,0) scale(1); }
  }
  @keyframes rsBloomC {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    50%     { transform:translate3d(-13%,-7%,0) scale(1.1); }
  }
  @keyframes rsBloomD {
    0%,100% { transform:translate3d(0,0,0) scale(1.06); }
    50%     { transform:translate3d(7%,12%,0) scale(1); }
  }

  /* One slow band of warmer light crossing the whole block. Softness is in
     the gradient stops rather than a blur(), which at this size would be
     repainted every frame. */
  .rs-sheen {
    position:absolute; top:-80%; left:0; height:260%; width:46%;
    opacity:0; will-change:transform;
    background:linear-gradient(90deg, transparent 0%,
      rgba(201,164,92,.045) 32%, rgba(235,217,168,.07) 50%,
      rgba(201,164,92,.045) 68%, transparent 100%);
    animation:rsSheen 44s linear infinite;
  }
  #results.live .rs-sheen { opacity:1; transition:opacity 2.4s ease; }
  @keyframes rsSheen {
    0%   { transform:rotate(12deg) translate3d(-190%,0,0); opacity:0; }
    18%  { opacity:1; }
    82%  { opacity:1; }
    100% { transform:rotate(12deg) translate3d(330%,0,0); opacity:0; }
  }

  /* Holds the light toward the middle so the corners stay deep and the
     seams into the hero above and About Us below stay invisible. */
  .rs-veil {
    position:absolute; inset:0;
    background:radial-gradient(ellipse 88% 72% at 50% 50%, transparent 0%, rgba(13,13,18,.26) 78%, rgba(13,13,18,.5) 100%);
  }

  #results:not(.live) .rs-bloom,
  #results:not(.live) .rs-sheen { animation-play-state:paused; }

  @media (max-width:700px) {
    .rs-bloom-c, .rs-bloom-d { display:none; }   /* two blooms carry it on a phone */
  }

  /* the seam at the top breathes rather than sitting dead */
  #results::before { animation:results-seam 9s ease-in-out infinite; }
  @keyframes results-seam {
    0%, 100% { opacity:.55; }
    50%      { opacity:1; }
  }

  /* the panel itself only acts as the trigger — its children do the moving */
  .ba-info.rv { opacity:1; transform:none; transition:none; }
  /* panel content arrives in sequence once the section scrolls in */
  .ba-info > * { opacity:0; transform:translateY(12px);
                 transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
  .ba-info.in > * { opacity:1; transform:none; }
  .ba-info.in > *:nth-child(1) { transition-delay:.05s }
  .ba-info.in > *:nth-child(2) { transition-delay:.13s }
  .ba-info.in > *:nth-child(3) { transition-delay:.21s }
  .ba-info.in > *:nth-child(4) { transition-delay:.29s }
  .ba-info.in > *:nth-child(5) { transition-delay:.37s }
  .ba-info.in > *:nth-child(6) { transition-delay:.45s }
  .ba-info.in > *:nth-child(7) { transition-delay:.53s }

  /* the rules around the facts row draw outward from the centre */
  .ba-facts { border-top-color:transparent; border-bottom-color:transparent; position:relative; }
  .ba-facts::before, .ba-facts::after {
    content:''; position:absolute; left:50%; width:0; height:1px;
    background:var(--border); transform:translateX(-50%);
    transition:width 1s cubic-bezier(.22,1,.36,1) .35s;
  }
  .ba-facts::before { top:-1px; }
  .ba-facts::after  { bottom:-1px; }
  .ba-info.in .ba-facts::before, .ba-info.in .ba-facts::after { width:100%; }

  /* the figures tick up very slightly as they settle */
  .ba-facts dd { transition:color .5s ease; }
  .ba-info.in .ba-facts dd { color:var(--slight); }

  /* the hint under the slider pulses once in a while, inviting a drag */
  .ba-hint { animation:hint-breathe 5.5s ease-in-out infinite; }
  @keyframes hint-breathe {
    0%, 70%, 100% { opacity:.55; }
    85%           { opacity:1; }
  }

  @media (prefers-reduced-motion: reduce) {
    #results::after, #results::before, .ba-hint { animation:none !important; }
    .rs-bloom, .rs-sheen { animation:none !important; transition:none !important; }
    .rs-sheen { transform:rotate(12deg) translate3d(50%,0,0); }
    .ba-info > * { opacity:1 !important; transform:none !important; }
    .ba-facts { border-top-color:var(--border); border-bottom-color:var(--border); }
    .ba-facts::before, .ba-facts::after { width:100% !important; transition:none !important; }
  }

  /* ══════════════════════════════════════
     MULTI-PAGE CHROME
  ══════════════════════════════════════ */
  /* inner pages have no hero, so content must clear the fixed header */
  .page-inner main { padding-top: 127px; }
  .page-head {
    text-align: center;
    padding: 4.5rem 4rem 1rem;
    background: var(--black);
    position: relative;
  }
  .page-head .sec-title { margin-top: .6rem; }
  .page-head h1 {
    font-family: 'Cormorant Garamond', serif; font-weight: 300;
    font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.1;
    color: var(--white); text-wrap: balance;
  }
  /* the page you're on reads brighter, with a gold underline */
  .nav-links a.is-current { color: var(--pure); }
  .nav-links a.is-current::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
    height: 1px; background: var(--gold-star);
  }
  .nav-links a { position: relative; }

  @media (max-width: 980px) {
    .page-inner main { padding-top: 104px; }
    .page-head { padding: 3rem 1.15rem .5rem; }
  }

  /* ── live open / closed indicator ── */
  #open-status { display:inline-flex; align-items:center; gap:.5rem; }
  #open-status::before {
    content:''; width:6px; height:6px; border-radius:50%;
    background:#6B6A78; flex-shrink:0;
  }
  #open-status.is-open::before {
    background:#7FB069; box-shadow:0 0 0 3px rgba(127,176,105,.18);
    animation:status-pulse 3.2s ease-in-out infinite;
  }
  #open-status.is-closed::before { background:#9C6A4A; }
  @keyframes status-pulse {
    0%,100% { box-shadow:0 0 0 2px rgba(127,176,105,.14); }
    50%     { box-shadow:0 0 0 5px rgba(127,176,105,.05); }
  }
  #open-status .st-detail { color:#7E7A88; }
  @media (prefers-reduced-motion: reduce) { #open-status.is-open::before { animation:none; } }

  /* ══════════════════════════════════════
     ABOUT — home page block
  ══════════════════════════════════════ */
  #about-home {
    background:
      radial-gradient(ellipse 44% 40% at 88% 18%, rgba(162,133,78,.055) 0%, transparent 68%),
      var(--black);
    position: relative;
    overflow: hidden;   /* the cursor halo is 460px wide — without this it
                           pushes the page sideways near the right edge */
  }
  #about-home::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.14) 22%, rgba(200,200,220,.14) 78%, transparent);
  }
  .ah-grid {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
    gap:3.4rem; align-items:center; max-width:1140px; margin:0 auto;
  }
  .ah-photo { margin:0; overflow:hidden; position:relative; aspect-ratio:4/5; }
  .ah-photo img {
    width:100%; height:100%; object-fit:cover; display:block;
    filter:brightness(.9) saturate(.96);
    transition:transform 1.2s cubic-bezier(.22,1,.36,1), filter .7s ease;
  }
  .ah-photo:hover img { transform:scale(1.035); filter:brightness(1) saturate(1); }
  .ah-photo::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top, rgba(7,7,10,.34) 0%, transparent 42%);
  }

  .ah-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.28em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.1rem;
  }
  .ah-eyebrow::before {
    content:''; width:42px; height:1px; background:var(--gold-star); flex-shrink:0;
  }
  .ah-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.1rem,4.2vw,3.3rem); line-height:1.08;
    color:var(--white); text-wrap:balance; margin-bottom:1.3rem;
  }
  .ah-title em {
    font-style:italic;
    background:linear-gradient(100deg,#C9A45C 0%,#EBD9A8 48%,#C9A45C 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .ah-text {
    font-family:'Jost',sans-serif; font-size:.93rem; font-weight:300;
    line-height:1.8; color:var(--smid); margin-bottom:1rem; max-width:58ch;
  }
  .ah-text strong { color:var(--white); font-weight:500; }

  .ah-facts {
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:var(--border); border:1px solid var(--border);
    margin:2rem 0 0;
  }
  .ah-fact {
    background:var(--card); padding:1.1rem 1.2rem;
    display:flex; gap:.75rem; align-items:flex-start;
    transition:background .45s ease;
  }
  .ah-fact:hover { background:#171720; }
  .ah-tick {
    width:15px; height:15px; border-radius:50%; flex-shrink:0; margin-top:.15rem;
    border:1px solid rgba(201,164,92,.55); position:relative;
  }
  .ah-tick::after {
    content:''; position:absolute; left:4px; top:3px;
    width:4px; height:7px; border:solid var(--gold-star);
    border-width:0 1px 1px 0; transform:rotate(42deg);
  }
  .ah-fact dt {
    font-family:'Jost',sans-serif; font-size:.78rem; font-weight:500;
    color:var(--white); letter-spacing:.02em;
  }
  .ah-fact dd {
    margin:.25rem 0 0; font-family:'Jost',sans-serif;
    font-size:.72rem; font-weight:300; color:var(--sdim); line-height:1.5;
  }

  .ah-actions { display:flex; gap:.8rem; margin-top:2rem; flex-wrap:wrap; }
  .ah-btn {
    font-family:'Jost',sans-serif; font-size:.68rem; font-weight:400;
    letter-spacing:.22em; text-transform:uppercase;
    padding:.95rem 1.9rem; text-decoration:none;
    position:relative; overflow:hidden;
    transition:background .35s ease, color .35s ease, transform .35s ease, border-color .35s ease;
  }
  .ah-btn::before {
    content:''; position:absolute; top:0; left:-80%; width:55%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    transform:skewX(-18deg); transition:left .65s ease; pointer-events:none;
  }
  .ah-btn:hover::before { left:150%; }
  .ah-btn-ghost { color:var(--slight); border:1px solid rgba(200,200,220,.26); }
  .ah-btn-ghost:hover { color:var(--pure); border-color:var(--slight); transform:translateY(-2px); }
  .ah-btn-solid { background:var(--gold-star); color:var(--black); border:1px solid var(--gold-star); }
  .ah-btn-solid:hover { background:#E0C184; border-color:#E0C184; transform:translateY(-2px); }

  @media (max-width:980px) {
    .ah-grid { grid-template-columns:1fr; gap:2rem; }
    .ah-photo { aspect-ratio:3/2; }
  }
  @media (max-width:700px) {
    .ah-facts { grid-template-columns:1fr; }
    .ah-actions { gap:.6rem; }
    .ah-btn { flex:1; text-align:center; padding:.9rem 1rem; }
    .ah-eyebrow::before { width:28px; }
  }

  /* ══════════════════════════════════════
     PREMIER SERVICES  (home)
     Hairline grid of six cards. Everything is one pixel of border and a
     ghost numeral — the hover does the talking, and does it quietly.
  ══════════════════════════════════════ */
  #premier {
    background:
      radial-gradient(ellipse 50% 44% at 12% 8%, rgba(162,133,78,.045) 0%, transparent 66%),
      var(--deep);
    position:relative;
  }
  #premier::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.14) 22%, rgba(200,200,220,.14) 78%, transparent);
  }
  .pr-head {
    display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
    max-width:1240px; margin:0 auto 2.8rem; flex-wrap:wrap;
  }
  .pr-all {
    font-family:'Jost',sans-serif; font-size:.66rem; font-weight:400;
    letter-spacing:.24em; text-transform:uppercase; color:var(--gold-star);
    text-decoration:none; white-space:nowrap; padding-bottom:.35rem;
    border-bottom:1px solid transparent; transition:border-color .4s ease, color .4s ease;
  }
  .pr-all span { display:inline-block; margin-left:.4rem; transition:transform .4s cubic-bezier(.22,1,.36,1); }
  .pr-all:hover { color:#E0C184; border-bottom-color:rgba(201,164,92,.5); }
  .pr-all:hover span { transform:translateX(5px); }

  .pr-grid {
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
    background:var(--border); border:1px solid var(--border);
    max-width:1240px; margin:0 auto;
  }
  .pr-card {
    position:relative; overflow:hidden;
    background:var(--black); padding:2.6rem 2.1rem 2.2rem;
    display:flex; flex-direction:column; text-decoration:none;
    transition:background .5s ease;
  }
  .pr-card::after {           /* gold hairline that draws in from the left on hover */
    content:''; position:absolute; top:0; left:0; height:1px; width:100%;
    background:linear-gradient(90deg, var(--gold-star), rgba(201,164,92,0));
    transform:scaleX(0); transform-origin:left;
    transition:transform .6s cubic-bezier(.22,1,.36,1);
  }
  .pr-card:hover { background:#0F0F15; }
  .pr-card:hover::after { transform:scaleX(1); }
  .pr-card:focus-visible { outline:1px solid var(--gold-star); outline-offset:-3px; }

  .pr-num {
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    color:var(--gold-star); opacity:.85; margin-bottom:1.4rem;
  }
  .pr-name {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(1.3rem,1.7vw,1.6rem); line-height:1.15;
    color:var(--white); margin-bottom:.5rem;
    transition:color .4s ease;
  }
  .pr-card:hover .pr-name { color:var(--pure); }
  .pr-price {
    font-family:'Jost',sans-serif; font-size:.84rem; font-weight:400;
    color:var(--gold-star); letter-spacing:.02em;
  }
  .pr-dur { color:var(--sdim); font-weight:300; font-size:.78rem; }
  .pr-rule {
    display:block; width:34px; height:1px; background:var(--gold-star);
    opacity:.55; margin:1.1rem 0 1.3rem;
    transition:width .6s cubic-bezier(.22,1,.36,1), opacity .5s ease;
  }
  .pr-card:hover .pr-rule { width:58px; opacity:.9; }
  .pr-desc {
    font-family:'Jost',sans-serif; font-size:.85rem; font-weight:300;
    line-height:1.75; color:var(--silver); margin:0 0 1.5rem;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .pr-tags {
    list-style:none; display:flex; flex-wrap:wrap; gap:.4rem;
    margin:auto 0 0; padding:0;
  }
  .pr-tags li {
    font-family:'Jost',sans-serif; font-size:.56rem; font-weight:300;
    letter-spacing:.17em; text-transform:uppercase; color:var(--sdim);
    border:1px solid var(--border); padding:.42rem .62rem;
    transition:border-color .45s ease, color .45s ease;
  }
  .pr-card:hover .pr-tags li { border-color:rgba(201,164,92,.28); color:var(--smid); }


  @media (max-width:1040px) {
    .pr-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  }
  @media (max-width:700px) {
    .pr-grid { grid-template-columns:1fr; }
    .pr-head { margin-bottom:1.9rem; gap:1rem; }
    .pr-all  { font-size:.6rem; }
    .pr-card { padding:1.9rem 1.4rem 1.6rem; }
    .pr-num  { margin-bottom:1rem; }
    .pr-desc { -webkit-line-clamp:4; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pr-card, .pr-card::after, .pr-rule, .pr-all span { transition:none; }
  }

  /* ── Premier: background atmosphere ────────────────────────
     Two very slow gold blooms, a drifting sheen and a dozen dust motes.
     Transform/opacity only, so it composites on the GPU and never
     triggers layout. app.js adds .live when the section is on screen —
     off screen everything parks, so it costs nothing while you read
     the rest of the page.
  ──────────────────────────────────────────────────────────── */
  /* Strictly background: the whole layer sits behind the grid. The cards are
     a hair translucent so the thread and the bloom read faintly through them
     rather than stopping dead at the first card edge. */
  .pr-atmos {
    position:absolute; inset:0; overflow:hidden;
    pointer-events:none; z-index:0;
  }
  #premier .pr-head, #premier .pr-grid { position:relative; z-index:1; }
  .pr-card { background:rgba(7,7,10,.93); }

  .pr-glow { position:absolute; border-radius:50%; opacity:0; transition:opacity 2s ease; }
  #premier.live .pr-glow { opacity:1; }
  .pr-glow-a {
    width:52vw; height:52vw; max-width:820px; max-height:820px;
    left:-12%; top:-18%;
    background:radial-gradient(circle, rgba(201,164,92,.10) 0%, rgba(201,164,92,.03) 44%, transparent 70%);
    animation:prDriftA 38s ease-in-out infinite;
  }
  .pr-glow-b {
    width:44vw; height:44vw; max-width:700px; max-height:700px;
    right:-14%; bottom:-22%;
    background:radial-gradient(circle, rgba(170,178,215,.06) 0%, rgba(170,178,215,.018) 46%, transparent 72%);
    animation:prDriftB 52s ease-in-out infinite;
  }
  @keyframes prDriftA {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    50%     { transform:translate3d(8%,6%,0) scale(1.14); }
  }
  @keyframes prDriftB {
    0%,100% { transform:translate3d(0,0,0) scale(1.08); }
    50%     { transform:translate3d(-7%,-5%,0) scale(1); }
  }

  /* A gold thread that wanders the whole section. Two curves, each one
     slowly morphing between five shapes (SMIL on `d`), with a short bright
     segment travelling along it — so the light follows the bend of the line
     instead of sliding across in a straight band. */
  .pr-ribbon {
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; transition:opacity 2s ease;
  }
  #premier.live .pr-ribbon { opacity:1; }
  .pr-rb { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; }

  .pr-rb-base { stroke:rgba(201,164,92,.05);  stroke-width:1; }
  .pr-rb-glow { stroke:rgba(201,164,92,.09);  stroke-width:5;   stroke-dasharray:210 1700; }
  .pr-rb-core { stroke:rgba(235,217,168,.34); stroke-width:1.1; stroke-dasharray:165 1745; }

  /* The curve itself is re-shaped by animating the CSS `d` property, so the
     line wanders instead of holding one fixed bend. A browser without CSS `d`
     simply keeps the static curve — the travelling light still works. */
  .pr-rb-1 { animation:prMorph1 29s ease-in-out infinite; }
  .pr-rb-2 { animation:prMorph2 37s ease-in-out infinite; }
  .pr-rb-1.pr-rb-glow, .pr-rb-1.pr-rb-core { animation:prMorph1 29s ease-in-out infinite, prFlow 21s linear infinite; }
  .pr-rb-2.pr-rb-glow, .pr-rb-2.pr-rb-core { animation:prMorph2 37s ease-in-out infinite, prFlow 27s linear infinite reverse; }
  @keyframes prMorph1 {
    0%,100% { d:path("M -60 560 C 180 420, 300 690, 540 545 C 790 395, 905 665, 1260 500"); }
    25% { d:path("M -60 610 C 180 505, 330 600, 540 605 C 760 610, 930 575, 1260 430"); }
    50% { d:path("M -60 515 C 180 375, 295 640, 540 490 C 790 340, 950 625, 1260 555"); }
    75% { d:path("M -60 585 C 180 460, 310 655, 540 570 C 775 480, 915 610, 1260 465"); }
  }
  @keyframes prMorph2 {
    0%,100% { d:path("M 1260 195 C 1000 345, 820 135, 600 265 C 380 390, 215 465, -60 315"); }
    25% { d:path("M 1260 265 C 1000 235, 845 305, 600 195 C 355  90, 200 385, -60 255"); }
    50% { d:path("M 1260 175 C 1000 365, 795 115, 600 285 C 405 455, 175 420, -60 345"); }
    75% { d:path("M 1260 230 C 1000 290, 830 215, 600 230 C 370 245, 190 430, -60 285"); }
  }
  @keyframes prFlow {
    from { stroke-dashoffset:1910; }
    to   { stroke-dashoffset:0; }
  }

  .pr-motes { position:absolute; inset:0; }
  .pr-mote {
    position:absolute; left:var(--x); bottom:-14px;
    width:var(--s); height:var(--s); border-radius:50%;
    opacity:0; will-change:transform, opacity;
    animation:prRise var(--t) linear var(--d) infinite;
  }
  .pr-mote-g { background:rgba(201,164,92,.6);   box-shadow:0 0 4px rgba(201,164,92,.25); }
  .pr-mote-s { background:rgba(212,212,232,.42); box-shadow:0 0 4px rgba(212,212,232,.16); }
  @keyframes prRise {
    0%   { transform:translate3d(0,0,0);                           opacity:0; }
    14%  {                                                         opacity:.3; }
    72%  {                                                         opacity:.18; }
    100% { transform:translate3d(var(--dx), calc(var(--rise,1180px) * -1), 0); opacity:0; }
  }

  /* parked until the section is actually on screen */
  #premier:not(.live) .pr-glow,
  #premier:not(.live) .pr-rb,
  #premier:not(.live) .pr-mote { animation-play-state:paused; }

  @media (max-width:700px) {
    .pr-motes .pr-mote:nth-child(n+5) { display:none; }  /* less dust on a phone */
    .pr-rb-glow { stroke-width:4; }
    .pr-mote { --rise:900px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pr-glow, .pr-rb, .pr-mote { animation:none; }
    .pr-mote { opacity:0; }
    .pr-ribbon { opacity:.5; }
    .pr-glow { opacity:1; }
  }

  /* ── About: a light that trails the cursor ──────────────────
     A wide warm halo that eases toward the pointer rather than snapping to
     it, so it drifts after the cursor instead of being stuck to it.
     Pure background — it sits under the grid, so it washes the empty space
     and never sits on top of the photo or the copy. JS sets --cx/--cy.
  ──────────────────────────────────────────────────────────── */
  .ah-halo {
    position:absolute; top:0; left:0; z-index:0;
    pointer-events:none; opacity:0;
    transition:opacity .7s ease;
    will-change:transform;
  }
  #about-home .ah-grid { position:relative; z-index:1; }
  /* The same liquid-metal field that runs behind The Beginning, on the same
     terms: the canvas sits at the very back, a scrim keeps the molten gold off
     the copy column, and the cursor halo rides above both. */
  #about-home::after {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(7,7,10,.12) 0%, rgba(7,7,10,.46) 46%, rgba(7,7,10,.8) 100%);
  }
  #about-home .ah-halo { z-index:1; }   /* above the scrim, still under the grid */
  #about-home.lit .ah-halo { opacity:1; }

  .ah-halo {
    width:460px; height:460px; margin:-230px 0 0 -230px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(201,164,92,.10) 0%, rgba(201,164,92,.035) 40%, transparent 68%);
    transform:translate3d(var(--cx,-999px), var(--cy,-999px), 0);
  }

  @media (hover:none), (prefers-reduced-motion: reduce) {
    .ah-halo { display:none; }
  }

  /* ══════════════════════════════════════
     GLACĒ FEATURE  —  ivory panel, same language as New Guest
  ══════════════════════════════════════ */
  /* Dark section, ivory panel — the same arrangement as New Guest. The light
     still carries the emphasis, but it is held in the site's own container
     rather than running edge to edge and reading as a different website. */
  #glace {
    background:
      radial-gradient(ellipse 54% 46% at 86% 10%, rgba(201,164,92,.05) 0%, transparent 70%),
      var(--black);
    padding: 6rem 4rem;
    position:relative;
  }
  #glace::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.14) 22%, rgba(200,200,220,.14) 78%, transparent);
  }
  .gl-panel {
    max-width:1240px; margin:0 auto;
    background:linear-gradient(165deg, var(--ivory) 0%, var(--ivory-deep) 100%);
    color:var(--ink-soft);
    padding:4.5rem 4rem;
    position:relative; overflow:hidden;
    box-shadow:0 30px 90px rgba(0,0,0,.55);
  }
  .gl-grid {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
    gap:4rem; align-items:center; margin:0 auto;
  }

  .gl-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem;
  }
  .gl-eyebrow::before { content:''; width:48px; height:1px; background:var(--gold); flex-shrink:0; }
  .gl-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.2rem,4.4vw,3.5rem); line-height:1.05;
    color:var(--ink); text-wrap:balance; margin-bottom:1.5rem;
  }
  .gl-title em { font-style:italic; color:var(--gold); }
  .gl-text {
    font-family:'Jost',sans-serif; font-size:.95rem; font-weight:300;
    line-height:1.8; color:var(--ink-soft); margin-bottom:1rem; max-width:58ch;
  }

  .gl-facts {
    display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:1.9rem 0 0;
  }
  .gl-fact {
    display:flex; gap:.8rem; align-items:flex-start;
    background:rgba(255,255,255,.62); border:1px solid rgba(162,133,78,.2);
    padding:.95rem 1.1rem;
    transition:border-color .45s ease, background .45s ease, transform .45s ease;
  }
  .gl-fact:hover {
    background:#fff; border-color:rgba(162,133,78,.42); transform:translateY(-2px);
  }
  .gl-tick {
    width:17px; height:17px; border-radius:50%; flex-shrink:0; margin-top:.12rem;
    border:1px solid rgba(162,133,78,.6); position:relative;
  }
  .gl-tick::after {
    content:''; position:absolute; left:5px; top:3.5px;
    width:4px; height:8px; border:solid var(--gold);
    border-width:0 1.4px 1.4px 0; transform:rotate(42deg);
  }
  .gl-fact dt {
    font-family:'Jost',sans-serif; font-size:.8rem; font-weight:500;
    color:var(--ink); letter-spacing:.01em;
  }
  .gl-fact dd {
    margin:.26rem 0 0; font-family:'Jost',sans-serif;
    font-size:.73rem; font-weight:300; color:#6B645A; line-height:1.5;
  }

  .gl-actions { display:flex; gap:.8rem; margin-top:1.9rem; flex-wrap:wrap; }
  .gl-btn {
    font-family:'Jost',sans-serif; font-size:.68rem; font-weight:400;
    letter-spacing:.22em; text-transform:uppercase;
    padding:1rem 2rem; text-decoration:none;
    position:relative; overflow:hidden;
    transition:background .35s ease, color .35s ease, transform .35s ease, border-color .35s ease;
  }
  .gl-btn::before {
    content:''; position:absolute; top:0; left:-80%; width:55%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-18deg); transition:left .65s ease; pointer-events:none;
  }
  .gl-btn:hover::before { left:150%; }
  .gl-btn-solid { background:var(--gold); color:#fff; border:1px solid var(--gold); }
  .gl-btn-solid:hover { background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-2px); }
  .gl-btn-ghost { color:var(--ink); border:1px solid rgba(26,24,21,.28); }
  .gl-btn-ghost:hover { border-color:var(--ink); transform:translateY(-2px); }

  /* photo + the floating credential card */
  .gl-media { position:relative; margin:0; }
  .gl-media img {
    width:100%; height:auto; display:block;
    box-shadow:0 30px 70px rgba(26,24,21,.16);
  }
  .gl-badge {
    position:absolute; right:-10px; bottom:-26px;
    background:var(--ivory); border:1px solid rgba(162,133,78,.22);
    padding:1.3rem 1.6rem; max-width:270px;
    box-shadow:0 20px 48px rgba(26,24,21,.14);
    display:flex; flex-direction:column; gap:.5rem; text-align:left;
  }
  .gl-badge-eyebrow {
    font-family:'Jost',sans-serif; font-size:.56rem; letter-spacing:.26em;
    text-transform:uppercase; color:#8B8378;
  }
  .gl-badge-name {
    font-family:'Jost',sans-serif; font-size:.95rem; font-weight:500;
    color:var(--ink); line-height:1.35;
  }
  .gl-badge-name em {
    font-style:normal; color:var(--gold); font-weight:500;
  }
  .gl-badge-foot {
    font-family:'Jost',sans-serif; font-size:.6rem; letter-spacing:.14em;
    text-transform:uppercase; color:#8B8378;
    padding-top:.5rem; border-top:1px solid rgba(162,133,78,.2);
  }

  @media (max-width:1040px) {
    .gl-grid { grid-template-columns:1fr; gap:3.4rem; }
    .gl-media { order:-1; }                 /* photo leads on narrow screens */
    .gl-badge { right:0; bottom:-20px; }
  }
  @media (max-width:980px) {
    .gl-panel { padding:3rem 2.2rem; }
  }
  @media (max-width:700px) {
    #glace { padding:3rem 1.15rem 3.5rem; }
    .gl-panel { padding:2.4rem 1.4rem 2.8rem; box-shadow:0 18px 50px rgba(0,0,0,.5); }
    .gl-facts { grid-template-columns:1fr; gap:.6rem; }
    .gl-actions { gap:.6rem; }
    .gl-btn { flex:1; text-align:center; padding:.95rem 1rem; }
    .gl-eyebrow::before { width:30px; }
    .gl-badge {
      position:static; max-width:none; margin-top:1rem;
      box-shadow:none; padding:1.1rem 1.2rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .gl-fact, .gl-btn, .gl-btn::before { transition:none; }
  }

  /* ── Glacē: micro-interactions ─────────────────────────────
     Everything here rides the existing .rv -> .in reveal, so nothing
     animates until the section is actually on screen, and nothing needs
     its own scroll listener. Deltas are deliberately small — this should
     register as the page being alive, not as an effect.
  ──────────────────────────────────────────────────────────── */

  /* the gold rule draws itself out beside the eyebrow */
  .gl-eyebrow::before {
    width:0; transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .gl-eyebrow.in::before { width:48px; }

  /* the photo settles out of a slight oversize instead of just appearing */
  .gl-frame { overflow:hidden; }
  .gl-frame img {
    transform:scale(1.06); transform-origin:center 42%;
    transition:transform 1.6s cubic-bezier(.22,1,.36,1), filter 1.2s ease;
    filter:saturate(.92);
  }
  .gl-media.in .gl-frame img { transform:scale(1); filter:saturate(1); }
  .gl-media:hover .gl-frame img { transform:scale(1.025); }

  /* the credential card arrives a beat after the photo has landed */
  .gl-badge {
    opacity:0; transform:translateY(14px);
    transition:opacity .9s ease .55s, transform .9s cubic-bezier(.22,1,.36,1) .55s;
  }
  .gl-media.in .gl-badge { opacity:1; transform:none; }

  /* each checkmark draws in, staggered by the card's own delay class */
  .gl-tick::after {
    transform:rotate(42deg) scale(0); transform-origin:center;
    transition:transform .5s cubic-bezier(.34,1.56,.64,1) .25s;
  }
  .gl-fact.in .gl-tick::after { transform:rotate(42deg) scale(1); }
  .gl-tick {
    transition:border-color .5s ease, box-shadow .5s ease;
  }
  .gl-fact:hover .gl-tick {
    border-color:var(--gold); box-shadow:0 0 0 3px rgba(162,133,78,.1);
  }

  /* a single warm light drifting slowly behind everything */
  .gl-panel::after {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:radial-gradient(ellipse 44% 52% at 20% 35%, rgba(162,133,78,.07) 0%, transparent 68%);
    animation:glDrift 34s ease-in-out infinite;
  }
  #glace .gl-grid { position:relative; z-index:1; }
  @keyframes glDrift {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    50%     { transform:translate3d(9%,4%,0) scale(1.15); }
  }

  @media (prefers-reduced-motion: reduce) {
    .gl-eyebrow::before { width:48px; transition:none; }
    .gl-frame img, .gl-badge, .gl-tick::after { transition:none; }
    .gl-frame img { transform:none; filter:saturate(1); }
    .gl-badge { opacity:1; transform:none; }
    .gl-tick::after { transform:rotate(42deg) scale(1); }
    .gl-panel::after { animation:none; }
  }

  /* ══════════════════════════════════════
     REVIEWS  —  header row + continuous marquee
  ══════════════════════════════════════ */
  #testimonials { overflow:hidden; }
  .t-head {
    display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
    max-width:1240px; margin:0 auto 3rem; flex-wrap:wrap;
  }
  .t-score {
    display:flex; flex-direction:column; align-items:flex-end; gap:.45rem;
    text-decoration:none; flex-shrink:0;
  }
  .t-score-top { display:inline-flex; align-items:center; gap:.5rem; }
  .t-g { flex-shrink:0; }
  .t-num {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:2.1rem; line-height:1; color:var(--white);
  }
  .t-stars-lg { display:inline-flex; gap:3px; }
  .t-stars-lg i {
    width:13px; height:13px; background:var(--gold-star);
    clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  }
  .t-count {
    font-family:'Jost',sans-serif; font-size:.6rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--sdim);
    transition:color .35s ease;
  }
  .t-score:hover .t-count { color:var(--smid); }

  /* The track holds the cards twice over. Sliding it exactly -50% puts the
     copy where the original started, so the loop has no seam. */
  .t-marquee {
    position:relative;
    /* Full-bleed with margins only. The old translateX(-50%) trick cannot be
       used here: this element also carries .rv, whose reveal sets its own
       transform, which silently cancelled the centering and pushed the strip
       (and its edge fade) half a screen to the right. */
    width:100vw; margin-left:calc(50% - 50vw);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .t-track {
    display:flex; align-items:stretch; gap:0; width:max-content;
    animation:tScroll 219s linear infinite;
    will-change:transform;
  }
  .t-marquee:hover .t-track { animation-play-state:paused; }
  @keyframes tScroll {
    from { transform:translate3d(0,0,0); }
    to   { transform:translate3d(-50%,0,0); }
  }

  .t-marquee .t-card {
    flex:0 0 clamp(290px, 27vw, 380px); margin-right:1.6rem;
    background:var(--card); border:1px solid var(--border);
    padding:2.1rem 1.9rem 1.5rem;
    display:flex; flex-direction:column; gap:1rem;
    transition:border-color .45s ease, background .45s ease, transform .45s ease;
  }
  .t-marquee .t-card:hover {
    border-color:rgba(201,164,92,.3); background:#171720; transform:translateY(-3px);
  }
  .t-marquee .t-text {
    font-family:'Jost',sans-serif; font-style:normal;
    font-size:.98rem; font-weight:300; line-height:1.75;
    color:var(--smid); margin:0;
    flex:1; display:flex; align-items:center;
  }
  .t-marquee .t-text > span {
    display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .t-marquee .t-author {
    display:flex; flex-direction:column; gap:.3rem;
    padding-top:1rem; border-top:1px solid var(--border);
    text-transform:none; letter-spacing:0;
  }
  .t-marquee .t-name {
    font-family:'Jost',sans-serif; font-size:.72rem; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase; color:var(--white);
  }
  .t-marquee .t-src {
    display:block; margin:0; font-size:.64rem; letter-spacing:.1em;
    color:var(--sdim); text-transform:none;
  }

  @media (max-width:700px) {
    .t-head { margin-bottom:2rem; gap:1.2rem; }
    .t-score { align-items:flex-start; }
    .t-num { font-size:1.7rem; }
    .t-track { animation-duration:167s; }
    .t-marquee .t-card { margin-right:1rem; }
    .t-marquee .t-card { flex:0 0 78vw; padding:1.7rem 1.4rem 1.3rem; }
    .t-marquee .t-text { font-size:.93rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    /* no drift — let people scroll the row themselves */
    .t-track { animation:none; }
    .t-marquee { overflow-x:auto; overscroll-behavior-x:contain; -webkit-mask-image:none; mask-image:none; }
    .t-marquee .t-card { transition:none; }
  }

  /* ══════════════════════════════════════
     WHY ESTHEVA  —  stat strip + reasons
  ══════════════════════════════════════ */
  #why {
    background:
      radial-gradient(ellipse 55% 50% at 14% 20%, rgba(201,164,92,.07) 0%, transparent 70%),
      var(--deep);
    color:var(--silver); padding:7rem 4rem; position:relative; overflow:hidden;
  }
  #why::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.14) 22%, rgba(200,200,220,.14) 78%, transparent);
  }
  /* one warm bloom drifting slowly behind everything */
  #why::after {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:radial-gradient(ellipse 42% 50% at 78% 70%, rgba(201,164,92,.05) 0%, transparent 68%);
    animation:wyDrift 52s ease-in-out infinite;
  }
  @keyframes wyDrift {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    50%     { transform:translate3d(-5%,-3%,0) scale(1.07); }
  }
  /* glow trailing the cursor — same behaviour as the About section */
  .wy-halo {
    position:absolute; top:0; left:0; z-index:0; pointer-events:none;
    width:400px; height:400px; margin:-200px 0 0 -200px; border-radius:50%;
    opacity:0; transition:opacity .7s ease; will-change:transform;
    background:radial-gradient(circle, rgba(201,164,92,.075) 0%, rgba(201,164,92,.025) 40%, transparent 68%);
    transform:translate3d(var(--cx,-999px), var(--cy,-999px), 0);
  }
  #why.lit .wy-halo { opacity:1; }
  #why .wy-grid { position:relative; z-index:1; }
  .wy-grid {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:4.5rem; align-items:start; max-width:1240px; margin:0 auto;
  }

  .wy-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.3rem;
  }
  .wy-eyebrow::before {
    content:''; width:0; height:1px; background:var(--gold-star); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .wy-eyebrow.in::before { width:52px; }
  .wy-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.2rem,4.2vw,3.4rem); line-height:1.08;
    color:var(--white); margin-bottom:2.8rem;
  }

  /* four cells, hairline boxed like the reference */
  .wy-stats {
    display:grid; grid-template-columns:repeat(4,1fr); margin:0;
    border-top:1px solid rgba(201,164,92,.26);
    border-bottom:1px solid rgba(201,164,92,.26);
  }
  .wy-stat {
    padding:1.7rem .6rem; text-align:center;
    border-left:1px solid rgba(201,164,92,.18);
    transition:background .45s ease;
  }
  .wy-stat:first-child { border-left:0; }
  .wy-stat:hover { background:rgba(255,255,255,.018); }
  .wy-num {
    font-family:'Jost',sans-serif; font-weight:400;
    font-size:clamp(1.5rem,2.3vw,2rem); line-height:1;
    color:var(--gold-star); letter-spacing:.01em;
    display:inline-flex; align-items:center; gap:.12em;
  }
  .wy-star {
    width:.62em; height:.62em; background:var(--gold-star); display:inline-block;
    clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  }
  .wy-lab {
    margin:.7rem 0 0; font-family:'Jost',sans-serif;
    font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sdim);
  }

  .wy-right { display:flex; flex-direction:column; gap:2.4rem; padding-top:.4rem; }
  .wy-item {
    border-left:2px solid var(--gold-star); padding-left:1.5rem;
    transition:border-color .5s ease;
  }
  .wy-item:hover { border-color:#E0C184; }
  .wy-item-title {
    font-family:'Jost',sans-serif; font-size:.98rem; font-weight:500;
    color:var(--white); margin-bottom:.7rem; letter-spacing:.01em;
  }
  .wy-item-text {
    font-family:'Jost',sans-serif; font-size:.92rem; font-weight:300;
    line-height:1.85; color:var(--smid); margin:0;
  }

  @media (max-width:1040px) {
    .wy-grid { grid-template-columns:1fr; gap:3rem; }
  }
  @media (max-width:700px) {
    #why { padding:4rem 1.15rem 4.5rem; }
    .wy-title { margin-bottom:2rem; }
    .wy-stats { grid-template-columns:repeat(2,1fr); }
    .wy-stat { padding:1.3rem .5rem; }
    .wy-stat:nth-child(odd) { border-left:0; }
    .wy-stat:nth-child(n+3) { border-top:1px solid rgba(201,164,92,.18); }
    .wy-right { gap:1.9rem; }
    .wy-item { padding-left:1.2rem; }
    .wy-eyebrow.in::before { width:32px; }
  }
  @media (hover:none), (prefers-reduced-motion: reduce) {
    .wy-halo { display:none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wy-eyebrow::before { width:52px; transition:none; }
    .wy-stat, .wy-item { transition:none; }
    #why::after { animation:none; }
  }

  /* ══════════════════════════════════════
     BOOK — eyebrow + trust line
  ══════════════════════════════════════ */
  .book-eyebrow {
    display:flex; align-items:center; justify-content:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.6rem; letter-spacing:.32em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.2rem;
  }
  .book-eyebrow::before, .book-eyebrow::after {
    content:''; width:42px; height:1px; background:rgba(201,164,92,.55);
  }
  .book-trust {
    font-family:'Jost',sans-serif; font-size:.64rem; font-weight:300;
    letter-spacing:.12em; color:var(--sdim); margin-top:1.3rem; text-align:center;
  }

  /* ══════════════════════════════════════
     EMAIL SIGNUP  —  gold bar
  ══════════════════════════════════════ */
  #signup {
    background:linear-gradient(100deg, #D8BC80 0%, #C9A45C 55%, #BE9850 100%);
    padding:2.6rem 4rem;
  }
  .su-inner {
    max-width:1240px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:2.5rem; flex-wrap:wrap;
  }
  .su-eyebrow {
    font-family:'Jost',sans-serif; font-size:.6rem; letter-spacing:.28em;
    /* .62 over the gold measured 3.93:1; .70 clears 4.5 at this size. */
    text-transform:uppercase; color:rgba(26,24,21,.70); margin-bottom:.5rem;
  }
  .su-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.15;
    color:#17150F; margin:0;
  }

  .su-form { display:flex; align-items:stretch; position:relative; flex-wrap:wrap; }
  .su-hp { position:absolute; left:-9999px; }          /* honeypot */
  .su-sr {
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
  .su-input {
    font-family:'Jost',sans-serif; font-size:.85rem; font-weight:300;
    width:clamp(220px, 24vw, 330px);
    padding:1rem 1.2rem; border:0; background:#fff; color:var(--ink);
    outline-offset:-2px;
  }
  .su-input::placeholder { color:#8B8378; }
  .su-input:focus-visible { outline:2px solid #17150F; }
  .su-btn {
    font-family:'Jost',sans-serif; font-size:.68rem; font-weight:500;
    letter-spacing:.2em; text-transform:uppercase;
    padding:1rem 1.8rem; border:0; cursor:pointer;
    background:#17150F; color:#F3E7CC;
    transition:background .35s ease, color .35s ease;
  }
  .su-btn:hover { background:#2A2619; color:#fff; }
  .su-btn:disabled { opacity:.6; cursor:default; }
  .su-msg {
    flex:0 0 100%; margin:.7rem 0 0;
    font-family:'Jost',sans-serif; font-size:.7rem; letter-spacing:.06em;
    color:#17150F; min-height:1em;
  }
  .su-msg a { color:#17150F; }

  @media (max-width:860px) {
    .su-inner { flex-direction:column; align-items:flex-start; gap:1.4rem; }
    .su-form { width:100%; }
    .su-input { flex:1 1 auto; width:auto; min-width:0; }
  }
  @media (max-width:700px) {
    #signup { padding:2.2rem 1.15rem; }
    .su-btn { padding:1rem 1.2rem; font-size:.63rem; letter-spacing:.14em; }
  }

  /* ══════════════════════════════════════
     FOOTER — three-column rebuild
     Appended after the original footer rules so these win at equal
     specificity; the old single-row layout is no longer in the markup.
  ══════════════════════════════════════ */
  footer { padding:4.5rem 4rem 2.2rem; }
  .ft-grid {
    display:grid; grid-template-columns:1.6fr 1fr 1.3fr;
    gap:3.5rem; max-width:1240px; margin:0 auto 3rem;
  }
  .ft-brand { max-width:34ch; }
  .ft-logo-link { display:inline-block; text-decoration:none; }
  .ft-logo-img {
    /* 414px wide source shown at ~227px keeps it close to 2x on retina */
    height:58px; width:auto; display:block; opacity:.72;
    transition:opacity .35s ease;
  }
  .ft-logo-link:hover .ft-logo-img { opacity:1; }
  .ft-tag {
    font-family:'Jost',sans-serif; font-size:.82rem; font-weight:300;
    line-height:1.85; color:var(--sdim); margin:1.4rem 0 1.6rem;
  }
  .ft-social { display:flex; gap:.6rem; }
  .ft-social a {
    width:40px; height:40px; display:inline-flex;
    align-items:center; justify-content:center;
    border:1px solid var(--border); color:var(--sdim);
    transition:color .35s ease, border-color .35s ease;
  }
  .ft-social a:hover { color:var(--gold-star); border-color:rgba(201,164,92,.45); }

  .ft-head {
    font-family:'Jost',sans-serif; font-size:.6rem; font-weight:400;
    letter-spacing:.28em; text-transform:uppercase; color:var(--slight);
    margin:0 0 1.4rem;
  }
  /* the original footer laid these out in a row; this column needs a stack */
  .ft-links, .ft-info { list-style:none; margin:0; padding:0; display:block; }
  .ft-links li { margin-bottom:.85rem; }
  .ft-links a, .ft-info a {
    font-family:'Jost',sans-serif; font-size:.85rem; font-weight:300;
    color:var(--sdim); text-decoration:none; transition:color .3s ease;
  }
  .ft-links a:hover, .ft-info a:hover { color:var(--white); }

  .ft-info li {
    display:flex; gap:.7rem; align-items:flex-start; margin-bottom:1rem;
    line-height:1.7;
  }
  .ft-info svg { color:var(--gold-star); flex-shrink:0; margin-top:.25rem; }
  .ft-hours {
    font-family:'Jost',sans-serif; font-size:.78rem; font-weight:300;
    /* #6F6B78 measured 3.95:1 on the footer — under the 4.5 minimum for
       text this size. This clears it at 4.63 and reads the same. */
    line-height:1.8; color:#7A7683; margin:1.3rem 0 0;
  }

  .ft-bot {
    display:flex; align-items:center; justify-content:space-between;
    gap:1.5rem; flex-wrap:wrap;
    max-width:1240px; margin:0 auto;
    padding-top:1.8rem; border-top:1px solid var(--border);
  }
  .ft-copy {
    font-family:'Jost',sans-serif; font-size:.72rem; font-weight:300;
    color:#6F6B78; letter-spacing:.04em;
  }
  .ft-legal { display:flex; gap:1.8rem; }
  .ft-legal a {
    font-family:'Jost',sans-serif; font-size:.72rem; font-weight:300;
    color:#6F6B78; text-decoration:none; letter-spacing:.04em;
    transition:color .3s ease;
  }
  .ft-legal a:hover { color:var(--slight); }

  .ft-disclaimer {
    max-width:1100px; margin:2.4rem auto 0; text-align:center;
    font-family:'Jost',sans-serif; font-size:.68rem; font-weight:300;
    line-height:1.85; color:#5A5664;
  }

  @media (max-width:980px) {
    .ft-grid { grid-template-columns:1fr 1fr; gap:2.6rem; }
    .ft-brand { grid-column:1 / -1; max-width:none; }
  }
  @media (max-width:700px) {
    footer { padding:3.2rem 1.15rem 2rem; }
    .ft-logo-img { height:50px; }
    .ft-grid { grid-template-columns:1fr; gap:2.2rem; margin-bottom:2.2rem; }
    .ft-tag { margin:1.1rem 0 1.3rem; }
    .ft-bot { flex-direction:column; align-items:flex-start; gap:1rem; }
    .ft-legal { gap:1.4rem; }
    .ft-disclaimer { text-align:left; margin-top:1.8rem; }
  }

  /* ── legal pages ── */
  #legal { background:var(--black); }
  .lg-wrap { max-width:760px; margin:0 auto; }
  .lg-date {
    font-family:'Jost',sans-serif; font-size:.7rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--sdim); margin:.9rem 0 2.6rem;
  }
  .lg-body h3 {
    font-family:'Jost',sans-serif; font-size:.9rem; font-weight:500;
    color:var(--white); letter-spacing:.02em; margin:2.4rem 0 .7rem;
  }
  .lg-body h3:first-child { margin-top:0; }
  .lg-body p {
    font-family:'Jost',sans-serif; font-size:.9rem; font-weight:300;
    line-height:1.9; color:var(--smid); margin:0 0 1rem;
  }
  .lg-body a { color:var(--gold-star); text-decoration:none; border-bottom:1px solid rgba(201,164,92,.35); }
  .lg-body a:hover { color:#E0C184; }
  .lg-lead {
    font-family:'Jost',sans-serif; font-size:.98rem; font-weight:300;
    line-height:1.9; color:var(--slight); margin:0 0 2.4rem;
    padding-bottom:1.8rem; border-bottom:1px solid var(--border);
  }
  .lg-note {
    margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--border);
    font-size:.78rem !important; color:var(--sdim) !important; font-style:italic;
  }

  /* ══════════════════════════════════════
     ABOUT — opening banner
     Dark twin of the reference's ivory band: the photo sits well back so the
     headline carries the section rather than competing with it.
  ══════════════════════════════════════ */
  #about-hero {
    position:relative; overflow:hidden;
    background:var(--deep);
    padding:7rem 4rem 6rem;
  }
  .ah2-bg {
    /* dark marble, orchid and candlelight — it holds its shape when knocked
       back, where a bright room photo just turns to noise. Anchored right so
       the still life sits clear of the headline. */
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:url('./book-bg.jpg') 64% center / cover no-repeat;
    background-image:image-set(url('./book-bg.webp') type('image/webp'),
                               url('./book-bg.jpg') type('image/jpeg'));
    opacity:.55; filter:saturate(1) contrast(1.06);
  }
  #about-hero::after {                       /* fade the photo out to the left */
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg, var(--deep) 10%, rgba(13,13,18,.88) 38%, rgba(13,13,18,.28) 72%, rgba(13,13,18,.06) 100%);
  }
  .ah2-inner { position:relative; z-index:2; max-width:1240px; margin:0 auto; }
  .ah2-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.2rem;
  }
  .ah2-eyebrow::before {
    content:''; width:0; height:1px; background:var(--gold-star); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .ah2-eyebrow.in::before { width:52px; }
  .ah2-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.4rem,5.4vw,4.2rem); line-height:1.04;
    color:var(--white); margin-bottom:1.6rem;
  }
  .ah2-lead {
    font-family:'Jost',sans-serif; font-size:.95rem; font-weight:300;
    line-height:1.9; color:var(--smid); max-width:62ch; margin:0;
  }

  /* ══════════════════════════════════════
     ABOUT — the beginning
  ══════════════════════════════════════ */
  #beginning { background:var(--black); position:relative; }
  .bg2-grid {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
    gap:4rem; align-items:center; max-width:1240px; margin:0 auto;
  }
  .bg2-media { margin:0; }
  .bg2-frame { overflow:hidden; position:relative; }
  .bg2-frame img {
    width:100%; height:auto; display:block;
    transform:scale(1.05); filter:saturate(.9);
    transition:transform 1.6s cubic-bezier(.22,1,.36,1), filter 1.2s ease;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
  }
  .bg2-media.in .bg2-frame img { transform:scale(1); filter:saturate(1); }
  .bg2-media:hover .bg2-frame img { transform:scale(1.025); }

  .bg2-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.2rem;
  }
  .bg2-eyebrow::before {
    content:''; width:0; height:1px; background:var(--gold-star); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .bg2-eyebrow.in::before { width:52px; }
  .bg2-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2rem,3.8vw,3.1rem); line-height:1.08;
    color:var(--white); text-wrap:balance; margin-bottom:1.6rem;
  }
  .bg2-title em {
    font-style:italic;
    background:linear-gradient(100deg,#C9A45C 0%,#EBD9A8 48%,#C9A45C 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .bg2-text {
    font-family:'Jost',sans-serif; font-size:.92rem; font-weight:300;
    line-height:1.9; color:var(--smid); margin:0 0 1.1rem; max-width:60ch;
  }
  .bg2-text:last-child { margin-bottom:0; }

  @media (max-width:1040px) {
    .bg2-grid { grid-template-columns:1fr; gap:2.6rem; }
    .bg2-media { order:-1; }
  }
  @media (max-width:700px) {
    #about-hero { padding:4rem 1.15rem 3.4rem; }
    .ah2-eyebrow.in::before, .bg2-eyebrow.in::before { width:32px; }
    .ah2-lead { font-size:.9rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ah2-eyebrow::before, .bg2-eyebrow::before { width:52px; transition:none; }
    .bg2-frame img { transform:none; filter:saturate(1); transition:none; }
  }

  /* ── The Beginning: background atmosphere ──────────────────
     Two quiet layers only. A warm bloom sits behind the photograph so the
     image looks like it is giving off light, and the same cursor glow the
     About and Why sections use. Transform/opacity only, and the whole thing
     stops under prefers-reduced-motion.
  ──────────────────────────────────────────────────────────── */
  #beginning { position:relative; overflow:hidden; }
  #beginning::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.12) 24%, rgba(200,200,220,.12) 76%, transparent);
  }
  /* liquid-metal WebGL field, ported from the shader you sent — no React,
     no build step, just the GLSL running on a canvas. Kept well back so the
     copy stays the thing you read. */
  .bg2-shader {
    position:absolute; inset:0; width:100%; height:100%;
    display:block; z-index:0; pointer-events:none;
    opacity:0; transition:opacity 1.6s ease;
    filter:blur(.3px);          /* hides any scaling softness in the upscale */
  }
  .bg2-shader.ready { opacity:.44; }
  /* keeps the molten gold from washing over the text column */
  #beginning::after {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(7,7,10,.12) 0%, rgba(7,7,10,.46) 46%, rgba(7,7,10,.8) 100%);
  }
  #beginning .bg2-grid { position:relative; z-index:1; }

  /* the photograph itself gets a soft warm spill behind it */
  .bg2-frame::after {
    content:''; position:absolute; inset:-14% -10%; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(201,164,92,.1) 0%, transparent 68%);
  }
  .bg2-media { position:relative; isolation:isolate; }

  @media (prefers-reduced-motion: reduce) {
    #beginning::after { animation:none; }
  }

  /* ── The Beginning: the photograph leans toward you ────────
     A few degrees of tilt, eased rather than tracked one-to-one, so the
     image reads as something sitting in the room instead of printed on the
     page. The tilt lives on .bg2-frame because .bg2-media carries the .rv
     reveal, and that sets its own transform.
  ──────────────────────────────────────────────────────────── */
  .bg2-media { perspective:1400px; }
  .bg2-frame {
    transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style:preserve-3d;
    transition:box-shadow .6s ease;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
  }
  #beginning.tilting .bg2-frame { box-shadow:0 40px 90px rgba(0,0,0,.62); }
  @media (hover:none), (prefers-reduced-motion: reduce) {
    .bg2-frame { transform:none !important; }
  }

  /* ══════════════════════════════════════
     WHAT WE STAND FOR
     The reference is ivory with pale ghost numerals; this is the dark twin —
     the numerals sit in gold at low opacity so they read as watermarks rather
     than labels.
  ══════════════════════════════════════ */
  #stand {
    /* Three washes over a base that lifts toward the middle of the section,
       so the block reads as lit rather than as one flat field of black. */
    background:
      radial-gradient(ellipse 70% 52% at 84% 6%,  rgba(201,164,92,.062) 0%, transparent 68%),
      radial-gradient(ellipse 62% 48% at 10% 94%, rgba(170,178,215,.04)  0%, transparent 70%),
      radial-gradient(ellipse 80% 42% at 50% 52%, rgba(201,164,92,.022) 0%, transparent 72%),
      linear-gradient(180deg, #0d0d12 0%, #111116 48%, #0d0d12 100%);
    position:relative; overflow:hidden;
  }
  #stand::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.12) 24%, rgba(200,200,220,.12) 76%, transparent);
  }
  .sf-head { max-width:1240px; margin:0 auto 3.2rem; position:relative; z-index:1; }
  .sf-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.2rem;
  }
  .sf-eyebrow::before {
    content:''; width:0; height:1px; background:var(--gold-star); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .sf-eyebrow.in::before { width:52px; }
  .sf-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.06;
    color:var(--white); margin-bottom:1.2rem;
  }
  .sf-title em {
    font-style:italic;
    background:linear-gradient(100deg,#C9A45C 0%,#EBD9A8 48%,#C9A45C 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .sf-lead {
    font-family:'Jost',sans-serif; font-size:.93rem; font-weight:300;
    line-height:1.85; color:var(--smid); max-width:56ch; margin:0;
  }

  .sf-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
    max-width:1240px; margin:0 auto; position:relative; z-index:1;
  }
  .sf-card {
    display:flex; gap:1.4rem; align-items:flex-start;
    background:rgba(255,255,255,.022);
    border:1px solid var(--border);
    padding:2.1rem 2rem;
    transition:background .5s ease, border-color .5s ease;
  }
  .sf-card:hover { background:rgba(255,255,255,.045); border-color:rgba(201,164,92,.26); }
  .sf-num {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:2.9rem; line-height:1; flex-shrink:0;
    color:rgba(201,164,92,.26); letter-spacing:.02em;
    transition:color .5s ease;
  }
  .sf-card:hover .sf-num { color:rgba(201,164,92,.5); }
  .sf-name {
    font-family:'Cormorant Garamond',serif; font-weight:400;
    font-size:1.26rem; line-height:1.2; color:var(--white);
    margin:.15rem 0 .8rem;
  }
  .sf-text {
    font-family:'Jost',sans-serif; font-size:.88rem; font-weight:300;
    line-height:1.85; color:var(--smid); margin:0;
  }

  @media (max-width:980px) {
    .sf-grid { grid-template-columns:1fr; gap:1.1rem; }
  }
  @media (max-width:700px) {
    .sf-head { margin-bottom:2.2rem; }
    .sf-card { padding:1.6rem 1.3rem; gap:1rem; }
    .sf-num { font-size:2.2rem; }
    .sf-eyebrow.in::before { width:32px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-eyebrow::before { width:52px; transition:none; }
    .sf-card, .sf-num { transition:none; }
  }

  /* ──────────────────────────────────────────────────────────────
     OUR PRINCIPLES — background atmosphere
     A still lattice for structure, crossed by two slow beams of light.
     Everything here is a transform or a baked gradient: no filters, no
     canvas, nothing the compositor has to repaint.
  ────────────────────────────────────────────────────────────── */
  .sf-atmos { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  #stand .sf-head, #stand .sf-grid { position:relative; z-index:1; }

  /* Slow colour blooms under everything else. Each is one soft radial that
     drifts and breathes on a long, prime-ish cycle, so no two ever line up
     into a visible loop. Transform and opacity only — nothing repaints. */
  .sf-bloom {
    position:absolute; border-radius:50%;
    opacity:0; transition:opacity 2.6s ease; will-change:transform;
  }
  .live .sf-bloom { opacity:1; }
  .sf-bloom-a {
    width:58vw; height:58vw; max-width:880px; max-height:880px;
    left:-16%; top:2%;
    background:radial-gradient(circle, rgba(201,164,92,.08) 0%, rgba(201,164,92,.024) 44%, transparent 70%);
    animation:sfBloomA 47s ease-in-out infinite;
  }
  .sf-bloom-b {
    width:50vw; height:50vw; max-width:760px; max-height:760px;
    right:-18%; top:34%;
    background:radial-gradient(circle, rgba(170,178,215,.055) 0%, rgba(170,178,215,.015) 46%, transparent 72%);
    animation:sfBloomB 61s ease-in-out infinite;
  }
  .sf-bloom-c {
    width:66vw; height:40vw; max-width:1000px; max-height:620px;
    left:28%; bottom:-24%;
    background:radial-gradient(ellipse, rgba(214,170,110,.048) 0%, rgba(201,164,92,.013) 48%, transparent 74%);
    animation:sfBloomC 73s ease-in-out infinite;
  }
  @keyframes sfBloomA {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    50%     { transform:translate3d(9%,7%,0) scale(1.16); }
  }
  @keyframes sfBloomB {
    0%,100% { transform:translate3d(0,0,0) scale(1.1); }
    50%     { transform:translate3d(-8%,-9%,0) scale(1); }
  }
  @keyframes sfBloomC {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    50%     { transform:translate3d(-11%,-5%,0) scale(1.12); }
  }

  /* Softness lives in the gradient stops, not in a blur() — a blurred layer
     this large would be repainted every frame. */
  .sf-beam {
    position:absolute; top:-70%; left:0; height:240%; width:40%;
    opacity:0; will-change:transform;
  }
  .live .sf-beam { opacity:1; }
  .sf-beam-a {
    background:linear-gradient(90deg, transparent 0%,
      rgba(201,164,92,.07) 30%, rgba(235,217,168,.115) 50%,
      rgba(201,164,92,.07) 70%, transparent 100%);
    animation:sfBeamA 34s linear infinite;
  }
  .sf-beam-b {
    width:26%;
    background:linear-gradient(90deg, transparent 0%,
      rgba(170,178,215,.05) 38%, rgba(212,212,232,.075) 50%,
      rgba(170,178,215,.05) 62%, transparent 100%);
    animation:sfBeamB 53s linear infinite;
  }
  @keyframes sfBeamA {
    0%   { transform:rotate(14deg) translate3d(-180%,0,0); opacity:0; }
    18%  { opacity:1; }
    82%  { opacity:1; }
    100% { transform:rotate(14deg) translate3d(330%,0,0);  opacity:0; }
  }
  @keyframes sfBeamB {
    0%   { transform:rotate(-11deg) translate3d(430%,0,0); opacity:0; }
    20%  { opacity:1; }
    80%  { opacity:1; }
    100% { transform:rotate(-11deg) translate3d(-200%,0,0); opacity:0; }
  }

  /* Keeps the light in the middle of the section and the corners deep. */
  .sf-veil {
    position:absolute; inset:0;
    background:radial-gradient(ellipse 85% 70% at 50% 50%, transparent 0%, rgba(13,13,18,.30) 76%, rgba(13,13,18,.58) 100%);
  }

  section:not(.live) .sf-beam,
  section:not(.live) .sf-bloom { animation-play-state:paused; }

  @media (max-width:700px) {
    .sf-beam-b { display:none; }   /* one beam is plenty on a phone */
    .sf-bloom-c { display:none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-beam { animation:none; transform:rotate(14deg) translate3d(40%,0,0); }
    .sf-beam-b { transform:rotate(-11deg) translate3d(130%,0,0); }
    .sf-bloom { animation:none; }
    .sf-beam, .sf-bloom { transition:none; }
  }

  /* ══════════════════════════════════════
     OUR TEAM
     Circular portraits on dark. The founder's card carries a gold rule so
     the eye lands there first; the others stay on the house hairline.
  ══════════════════════════════════════ */
  #team {
    background:
      radial-gradient(ellipse 56% 46% at 14% 8%,  rgba(201,164,92,.05)  0%, transparent 70%),
      radial-gradient(ellipse 50% 44% at 90% 82%, rgba(170,178,215,.04) 0%, transparent 72%),
      var(--deep);
    position:relative; overflow:hidden;
  }
  #team::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.12) 24%, rgba(200,200,220,.12) 76%, transparent);
  }
  .tm-head { max-width:1240px; margin:0 auto 3.2rem; position:relative; z-index:1; }
  .tm-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.2rem;
  }
  .tm-eyebrow::before {
    content:''; width:0; height:1px; background:var(--gold-star); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .tm-eyebrow.in::before { width:52px; }
  .tm-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.06;
    color:var(--white); margin-bottom:1.2rem;
  }
  .tm-title em {
    font-style:italic;
    background:linear-gradient(100deg,#C9A45C 0%,#EBD9A8 48%,#C9A45C 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .tm-lead {
    font-family:'Jost',sans-serif; font-size:.93rem; font-weight:300;
    line-height:1.85; color:var(--smid); max-width:56ch; margin:0;
  }

  .tm-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
    max-width:1240px; margin:0 auto; position:relative; z-index:1;
  }
  .tm-card {
    background:rgba(255,255,255,.022);
    border:1px solid var(--border);
    padding:2.4rem 2rem 2.2rem;
    transition:background .5s ease, border-color .5s ease;
  }
  .tm-card:hover { background:rgba(255,255,255,.045); border-color:rgba(201,164,92,.26); }
  .tm-card.is-lead { border-color:rgba(201,164,92,.38); }
  .tm-card.is-lead:hover { border-color:rgba(201,164,92,.6); }

  .tm-photo {
    width:132px; height:132px; margin:0 0 1.5rem;
    border-radius:50%; overflow:hidden; position:relative;
    box-shadow:0 0 0 1px rgba(201,164,92,.28), 0 14px 34px rgba(0,0,0,.5);
  }
  .tm-photo img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .8s cubic-bezier(.22,1,.36,1);
  }
  .tm-card:hover .tm-photo img { transform:scale(1.05); }
  /* stands in until a portrait arrives, and reads as intentional rather than broken */
  .tm-photo-ph {
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(150deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%);
    box-shadow:inset 0 0 0 1px rgba(201,164,92,.22), 0 14px 34px rgba(0,0,0,.4);
  }
  .tm-photo-ph span {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:2.2rem; letter-spacing:.06em; color:rgba(201,164,92,.5);
  }

  .tm-name {
    font-family:'Cormorant Garamond',serif; font-weight:400;
    font-size:1.42rem; line-height:1.2; color:var(--white); margin:0 0 .4rem;
  }
  .tm-role {
    font-family:'Jost',sans-serif; font-size:.6rem; font-weight:400;
    letter-spacing:.26em; text-transform:uppercase;
    color:var(--gold-star); margin:0 0 1.1rem;
  }
  .tm-bio {
    font-family:'Jost',sans-serif; font-size:.86rem; font-weight:300;
    line-height:1.85; color:var(--smid); margin:0;
  }

  @media (max-width:980px) {
    .tm-grid { grid-template-columns:1fr; gap:1.1rem; }
    .tm-card { display:grid; grid-template-columns:auto 1fr; column-gap:1.6rem; align-items:start; }
    .tm-photo { width:104px; height:104px; margin:0; grid-row:1 / span 3; }
    .tm-bio { grid-column:2; }
  }
  @media (max-width:700px) {
    .tm-head { margin-bottom:2.2rem; }
    .tm-card { padding:1.7rem 1.3rem; column-gap:1.1rem; }
    .tm-photo { width:78px; height:78px; }
    .tm-photo-ph span { font-size:1.5rem; }
    .tm-name { font-size:1.26rem; }
    .tm-eyebrow.in::before { width:32px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tm-eyebrow::before { width:52px; transition:none; }
    .tm-card, .tm-photo img { transition:none; }
    .tm-card:hover .tm-photo img { transform:none; }
  }

  /* ──────────────────────────────────────────────────────────────
     OUR TEAM — background atmosphere
     Everything else on this page drifts in a straight line, so this one
     turns instead: two broad fields of light rotating against each other,
     and two rings carrying a bright arc around their circumference. The
     circle is deliberate — it echoes the portraits above it.
  ────────────────────────────────────────────────────────────── */
  .tm-atmos { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }

  .tm-aurora {
    position:absolute; left:50%; top:50%;
    width:150%; height:85%;
    border-radius:50%;
    opacity:0; transition:opacity 2.6s ease; will-change:transform;
  }
  #team.live .tm-aurora { opacity:1; }
  .tm-aurora-a {
    background:radial-gradient(ellipse at center, rgba(201,164,92,.075) 0%, rgba(201,164,92,.022) 42%, transparent 68%);
    animation:tmTurnA 96s linear infinite;
  }
  .tm-aurora-b {
    width:120%; height:70%;
    background:radial-gradient(ellipse at center, rgba(170,178,215,.055) 0%, rgba(170,178,215,.016) 44%, transparent 70%);
    animation:tmTurnB 137s linear infinite;
  }
  @keyframes tmTurnA {
    from { transform:translate(-50%,-50%) rotate(0deg)   scale(1); }
    50%  { transform:translate(-50%,-50%) rotate(180deg) scale(1.12); }
    to   { transform:translate(-50%,-50%) rotate(360deg) scale(1); }
  }
  @keyframes tmTurnB {
    from { transform:translate(-50%,-50%) rotate(360deg) scale(1.08); }
    50%  { transform:translate(-50%,-50%) rotate(180deg) scale(1); }
    to   { transform:translate(-50%,-50%) rotate(0deg)   scale(1.08); }
  }

  /* The mask turns with the border, so the bright segment travels around the
     ring rather than the ring simply spinning in place. Without mask support
     the whole hairline shows, which is faint enough to pass as intended. */
  .tm-ring {
    position:absolute; left:50%; top:50%;
    border-radius:50%; border:1px solid rgba(201,164,92,.22);
    opacity:0; transition:opacity 2.6s ease; will-change:transform;
    -webkit-mask-image:conic-gradient(from 0deg, transparent 0deg, #000 26deg, #000 70deg, transparent 112deg, transparent 360deg);
            mask-image:conic-gradient(from 0deg, transparent 0deg, #000 26deg, #000 70deg, transparent 112deg, transparent 360deg);
  }
  #team.live .tm-ring { opacity:1; }
  .tm-ring-1 {
    width:min(104vw, 1280px); aspect-ratio:1;
    animation:tmSpin1 58s linear infinite;
  }
  .tm-ring-2 {
    width:min(74vw, 900px); aspect-ratio:1;
    border-color:rgba(200,200,220,.16);
    animation:tmSpin2 79s linear infinite;
  }
  @keyframes tmSpin1 {
    from { transform:translate(-50%,-50%) rotate(0deg); }
    to   { transform:translate(-50%,-50%) rotate(360deg); }
  }
  @keyframes tmSpin2 {
    from { transform:translate(-50%,-50%) rotate(360deg); }
    to   { transform:translate(-50%,-50%) rotate(0deg); }
  }

  #team:not(.live) .tm-aurora,
  #team:not(.live) .tm-ring { animation-play-state:paused; }

  @media (max-width:700px) {
    .tm-ring-2 { display:none; }        /* one ring is plenty on a phone */
    .tm-aurora-b { display:none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .tm-aurora, .tm-ring { animation:none; transition:none; }
    .tm-aurora-a { transform:translate(-50%,-50%) rotate(18deg); }
    .tm-aurora-b { transform:translate(-50%,-50%) rotate(-24deg); }
    .tm-ring-1   { transform:translate(-50%,-50%) rotate(210deg); }
    .tm-ring-2   { transform:translate(-50%,-50%) rotate(40deg); }
  }

  /* ══════════════════════════════════════
     OUR STUDIO
     Ivory panel on dark, the same arrangement as Glacē — it gives the About
     page its one light break without leaving the house palette.
  ══════════════════════════════════════ */
  #studio {
    background:
      radial-gradient(ellipse 54% 46% at 12% 8%, rgba(201,164,92,.05) 0%, transparent 70%),
      var(--black);
    padding:6rem 4rem;
    position:relative;
  }
  #studio::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.14) 22%, rgba(200,200,220,.14) 78%, transparent);
  }
  .st-panel {
    max-width:1240px; margin:0 auto;
    /* A whisper of grain over the gradient. Flat digital ivory reads as a
       browser default; a little tooth reads as paper, and that is most of the
       distance between "white box" and "something printed". */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"), linear-gradient(165deg, var(--ivory) 0%, var(--ivory-deep) 100%);
    background-blend-mode:multiply, normal;
    color:var(--ink-soft);
    padding:5rem 4.5rem;
    position:relative; overflow:hidden;
    box-shadow:0 30px 90px rgba(0,0,0,.55);
  }
  /* The engraved rule: a hairline held in from the edge, the way a good
     invitation is framed rather than printed to the trim. */
  .st-panel::before {
    content:''; position:absolute; inset:18px; z-index:1; pointer-events:none;
    border:1px solid rgba(162,133,78,.2);
  }
  /* and a warm light drifting behind all of it */
  .st-panel::after {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse 52% 56% at 76% 22%, rgba(162,133,78,.085) 0%, transparent 68%);
    animation:stDrift 41s ease-in-out infinite;
  }
  @keyframes stDrift {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    50%     { transform:translate3d(-8%,6%,0) scale(1.16); }
  }
  .st-grid { position:relative; z-index:2; }
  .st-grid {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    gap:4rem; align-items:stretch;   /* the room runs the full height of the copy */
  }
  .st-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem;
  }
  .st-eyebrow::before { content:''; width:48px; height:1px; background:var(--gold); flex-shrink:0; }
  .st-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.1rem,4.2vw,3.3rem); line-height:1.06;
    color:var(--ink); text-wrap:balance; margin-bottom:1.5rem;
  }
  .st-title em { font-style:italic; color:var(--gold); }
  .st-text {
    font-family:'Jost',sans-serif; font-size:.92rem; font-weight:300;
    line-height:1.9; color:var(--ink-soft); margin-bottom:1.1rem; max-width:58ch;
  }

  .st-actions { display:flex; gap:.8rem; margin-top:1.8rem; flex-wrap:wrap; }
  .st-note {
    display:flex; align-items:center; gap:1rem;
    font-family:'Jost',sans-serif; font-size:.56rem; font-weight:400;
    letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
    margin:2.2rem 0 0;
  }
  .st-note::before { content:''; width:34px; height:1px; background:rgba(162,133,78,.45); flex-shrink:0; }
  .st-btn {
    font-family:'Jost',sans-serif; font-size:.62rem; font-weight:500;
    letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
    padding:1rem 2rem; transition:background .4s ease, color .4s ease,
                                  border-color .4s ease, transform .4s ease;
  }
  .st-btn-solid {
    background:var(--gold); color:var(--ivory);
    border:1px solid var(--gold);
    position:relative; overflow:hidden;
  }
  .st-btn-solid::before {
    content:''; position:absolute; top:0; left:-80%; width:55%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
    transform:skewX(-18deg); transition:left .65s ease;
  }
  .st-btn-solid:hover { background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-2px); }
  .st-btn-solid:hover::before { left:150%; }
  .st-btn-ghost {
    background:transparent; color:var(--ink);
    border:1px solid rgba(26,26,26,.5);
  }
  .st-btn-ghost:hover { border-color:var(--ink); background:rgba(26,26,26,.04); transform:translateY(-2px); }

  /* Two shots rather than one, staggered: the room overlaps the corner of the
     reception shot, with a ring of the panel's own colour cut between them so
     the overlap reads as layered instead of pasted on. */
  .st-media { margin:0; position:relative; min-height:480px; }
  .st-shot { margin:0; position:absolute; overflow:hidden; }
  .st-shot::after {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
    box-shadow:inset 0 0 0 1px rgba(162,133,78,.3);
  }
  .st-shot img {
    width:100%; height:100%; display:block; object-fit:cover;
    transition:transform 1.1s cubic-bezier(.22,1,.36,1);
  }
  .st-shot:hover img { transform:scale(1.04); }
  .st-shot-a { top:0; right:0; width:84%; height:72%; }
  .st-shot-b {
    bottom:0; left:0; width:52%; height:46%;
    box-shadow:0 0 0 8px var(--ivory-deep), 0 26px 54px rgba(0,0,0,.34);
  }

  @media (max-width:980px) {
    .st-panel { padding:3.2rem 2.4rem; }
    .st-panel::before { inset:13px; }
    .st-grid { grid-template-columns:1fr; gap:2.6rem; }
    .st-media {                       /* the room leads on narrow screens */
      order:-1; min-height:0;
      display:grid; grid-template-columns:1fr 1fr; gap:.55rem;
    }
    .st-shot { position:static; aspect-ratio:1; }
    .st-shot-a, .st-shot-b { width:auto; height:auto; }
    .st-shot-b { box-shadow:0 14px 30px rgba(0,0,0,.25); }
    .st-text { max-width:none; }
  }
  @media (max-width:700px) {
    #studio { padding:3rem 1.15rem 3.5rem; }
    .st-panel { padding:2.6rem 1.5rem 2.8rem; box-shadow:0 18px 50px rgba(0,0,0,.5); }
    .st-panel::before { inset:9px; }
    /* the rule should sit against the first line, not the middle of two */
    .st-note { font-size:.52rem; letter-spacing:.15em; margin-top:1.7rem; align-items:flex-start; }
    .st-note::before { width:26px; margin-top:.42em; }
    .st-eyebrow::before { width:30px; }
    .st-btn { flex:1; text-align:center; padding:.95rem .7rem; font-size:.57rem; letter-spacing:.16em; }
  }
  @media (prefers-reduced-motion: reduce) {
    .st-shot img, .st-btn { transition:none; }
    .st-panel::after { animation:none; }
    .st-shot:hover img { transform:none; }
  }

  /* ══════════════════════════════════════
     OUR TECHNOLOGY (About) — equipment cards
     The reference is ivory with gold ticks; this is the dark twin. Every card
     carries the same hairline — no machine is singled out.
  ══════════════════════════════════════ */
  #equipment {
    background:
      radial-gradient(ellipse 56% 44% at 88% 6%,  rgba(201,164,92,.055) 0%, transparent 70%),
      radial-gradient(ellipse 52% 46% at 8% 88%, rgba(170,178,215,.04)  0%, transparent 72%),
      var(--deep);
    position:relative; overflow:hidden;
  }
  #equipment::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.12) 24%, rgba(200,200,220,.12) 76%, transparent);
  }
  .eq-head { max-width:1240px; margin:0 auto 3.2rem; position:relative; z-index:1; }
  .eq-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.2rem;
  }
  .eq-eyebrow::before {
    content:''; width:0; height:1px; background:var(--gold-star); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .eq-eyebrow.in::before { width:52px; }
  .eq-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.06;
    color:var(--white); margin-bottom:1.2rem;
  }
  .eq-title em {
    font-style:italic;
    background:linear-gradient(100deg,#C9A45C 0%,#EBD9A8 48%,#C9A45C 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .eq-lead {
    font-family:'Jost',sans-serif; font-size:.93rem; font-weight:300;
    line-height:1.85; color:var(--smid); max-width:60ch; margin:0;
  }

  .eq-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
    max-width:1240px; margin:0 auto; position:relative; z-index:1;
  }
  .eq-card {
    display:flex; flex-direction:column;
    background:rgba(255,255,255,.022);
    border:1px solid var(--border);
    padding:2.3rem 2.1rem;
    transition:background .5s ease, border-color .5s ease;
  }
  .eq-card:hover { background:rgba(255,255,255,.045); border-color:rgba(201,164,92,.26); }

  .eq-for {
    font-family:'Jost',sans-serif; font-size:.56rem; font-weight:400;
    letter-spacing:.26em; text-transform:uppercase;
    color:var(--gold-star); margin:0 0 .7rem;
  }
  .eq-name {
    font-family:'Cormorant Garamond',serif; font-weight:400;
    font-size:1.5rem; line-height:1.2; color:var(--white); margin:0 0 .9rem;
  }
  .eq-desc {
    font-family:'Jost',sans-serif; font-size:.86rem; font-weight:300;
    line-height:1.85; color:var(--smid); margin:0 0 1.5rem;
  }

  /* the rule above the specs draws out when the card arrives */
  .eq-list {
    list-style:none; margin:auto 0 0; padding:1.4rem 0 0;
    position:relative; display:grid; gap:.5rem;
  }
  .eq-list::before {
    content:''; position:absolute; top:0; left:0; width:0; height:1px;
    background:var(--border);
    transition:width 1.1s cubic-bezier(.22,1,.36,1) .3s;
  }
  .eq-card.in .eq-list::before { width:100%; }
  .eq-list li {
    position:relative; padding-left:1.6rem;
    font-family:'Jost',sans-serif; font-size:.8rem; font-weight:300;
    line-height:1.6; color:var(--slight);
  }
  /* a drawn tick rather than a glyph, so it matches the hairline elsewhere */
  .eq-list li::before {
    content:''; position:absolute; left:0; top:.3em;
    width:13px; height:13px; border-radius:50%;
    border:1px solid rgba(201,164,92,.42);
  }
  .eq-list li::after {
    content:''; position:absolute; left:4.3px; top:.55em;
    width:3px; height:6px;
    border-right:1px solid var(--gold-star); border-bottom:1px solid var(--gold-star);
    transform:rotate(42deg);
  }

  @media (max-width:980px) {
    .eq-grid { grid-template-columns:1fr; gap:1.1rem; }
  }
  @media (max-width:700px) {
    .eq-head { margin-bottom:2.2rem; }
    .eq-card { padding:1.7rem 1.3rem; }
    .eq-name { font-size:1.32rem; }
    .eq-eyebrow.in::before { width:32px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .eq-eyebrow::before { width:52px; transition:none; }
    .eq-card { transition:none; }
    .eq-list::before { width:100%; transition:none; }
  }

  /* ──────────────────────────────────────────────────────────────
     OUR TECHNOLOGY — background atmosphere
     The other sections on this page move something across a field. Here the
     field itself changes: two broad gradient compositions ease against each
     other, so the colour under the cards is never quite the same twice.
  ────────────────────────────────────────────────────────────── */
  .eq-atmos {
    position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
    opacity:0; transition:opacity .8s ease;
  }
  #equipment.live .eq-atmos { opacity:1; }

  .eq-tide {
    position:absolute; left:-50%; top:-50%; width:200%; height:200%;
    will-change:transform;
  }
  /* `alternate` is doing real work here: the layer eases out and back rather
     than looping, so there is no frame where it jumps home. */
  .eq-tide-a {
    background:
      radial-gradient(ellipse 34% 28% at 22% 24%, rgba(201,164,92,.108) 0%, transparent 62%),
      radial-gradient(ellipse 30% 25% at 72% 58%, rgba(170,178,215,.072) 0%, transparent 64%),
      radial-gradient(ellipse 28% 23% at 44% 90%, rgba(214,170,110,.065) 0%, transparent 66%);
    animation:eqTideA 27s ease-in-out infinite alternate;
  }
  .eq-tide-b {
    background:
      radial-gradient(ellipse 32% 26% at 80% 20%, rgba(201,164,92,.079) 0%, transparent 64%),
      radial-gradient(ellipse 28% 24% at 16% 68%, rgba(214,170,110,.065) 0%, transparent 66%),
      radial-gradient(ellipse 34% 22% at 58% 42%, rgba(170,178,215,.054) 0%, transparent 68%);
    animation:eqTideB 37s ease-in-out infinite alternate;
  }
  /* A third composition, on a period that divides into neither of the others,
     so the three never line back up into a pattern you can read. */
  .eq-tide-c {
    background:
      radial-gradient(ellipse 30% 25% at 50% 14%, rgba(235,217,168,.058) 0%, transparent 64%),
      radial-gradient(ellipse 26% 22% at 86% 74%, rgba(201,164,92,.072) 0%, transparent 66%),
      radial-gradient(ellipse 32% 20% at 10% 40%, rgba(170,178,215,.05) 0%, transparent 68%);
    animation:eqTideC 50s ease-in-out infinite alternate;
  }
  @keyframes eqTideA {
    from { transform:translate3d(-19%,-13%,0) scale(1); }
    to   { transform:translate3d( 21%, 15%,0) scale(1.32); }
  }
  @keyframes eqTideB {
    from { transform:translate3d( 20%, 15%,0) scale(1.28); }
    to   { transform:translate3d(-21%,-14%,0) scale(1); }
  }
  @keyframes eqTideC {
    from { transform:translate3d( 15%,-18%,0) scale(1.08); }
    to   { transform:translate3d(-17%, 19%,0) scale(1.36); }
  }

  /* a slow swell through the middle, so the section breathes as well as drifts */
  .eq-pulse {
    position:absolute; inset:0; will-change:transform, opacity;
    background:radial-gradient(ellipse 72% 52% at 50% 42%, rgba(201,164,92,.065) 0%, transparent 70%);
    animation:eqSwell 16s ease-in-out infinite;
  }
  @keyframes eqSwell {
    0%,100% { opacity:.2; transform:scale(1); }
    50%     { opacity:1;  transform:scale(1.3); }
  }

  /* Gradients this soft and this dark band into visible steps on an 8-bit
     screen. A little noise over the top dithers them away — and it reads as
     film grain rather than as a fix. */
  .eq-grain {
    position:absolute; inset:-200px; opacity:.07;
    will-change:transform;
    /* steps(1,end) holds each offset and then jumps, so the grain shifts about
       five times a second instead of sliding — sliding noise looks like a
       moving texture, jumping noise looks like film. */
    animation:eqGrain .9s steps(1,end) infinite;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  }

  @keyframes eqGrain {
    0%     { transform:translate3d(0,0,0); }
    16.66% { transform:translate3d(-26px, 13px,0); }
    33.33% { transform:translate3d( 15px,-21px,0); }
    50%    { transform:translate3d(-13px, -9px,0); }
    66.66% { transform:translate3d( 21px, 17px,0); }
    83.33% { transform:translate3d(-19px,  7px,0); }
  }

  #equipment:not(.live) .eq-tide,
  #equipment:not(.live) .eq-grain,
  #equipment:not(.live) .eq-pulse { animation-play-state:paused; }

  @media (max-width:700px) {
    .eq-tide-b { display:none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .eq-atmos { transition:none; }
    .eq-tide, .eq-pulse, .eq-grain { animation:none; }
    .eq-tide-a { transform:translate3d(0,0,0) scale(1.06); }
    .eq-tide-b { transform:translate3d(0,0,0) scale(1.04); }
    .eq-tide-c { transform:translate3d(0,0,0) scale(1.12); }
    .eq-pulse  { opacity:.6; }
  }

  /* ══════════════════════════════════════
     WHY CHOOSE US (About)
     The reference pairs a small tiled icon with each point; same idea here,
     with the tile drawn as a gold hairline square rather than a filled chip.
  ══════════════════════════════════════ */
  #choose {
    background:
      radial-gradient(ellipse 54% 46% at 10% 6%,  rgba(201,164,92,.05)  0%, transparent 70%),
      radial-gradient(ellipse 50% 44% at 92% 86%, rgba(170,178,215,.04) 0%, transparent 72%),
      var(--black);
    position:relative; overflow:hidden;
  }
  #choose::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.12) 24%, rgba(200,200,220,.12) 76%, transparent);
  }
  .wc-head { max-width:1240px; margin:0 auto 3.4rem; position:relative; z-index:1; }
  .wc-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.2rem;
  }
  .wc-eyebrow::before {
    content:''; width:0; height:1px; background:var(--gold-star); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .wc-eyebrow.in::before { width:52px; }
  .wc-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.06;
    color:var(--white); margin-bottom:1.2rem;
  }
  .wc-title em {
    font-style:italic;
    background:linear-gradient(100deg,#C9A45C 0%,#EBD9A8 48%,#C9A45C 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .wc-lead {
    font-family:'Jost',sans-serif; font-size:.93rem; font-weight:300;
    line-height:1.85; color:var(--smid); max-width:58ch; margin:0;
  }

  /* No cards here on purpose — the page already has three card grids above
     this one, and a bare two-column list reads as a change of pace. */
  .wc-grid {
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:4rem; row-gap:2.8rem;
    max-width:1240px; margin:0 auto; position:relative; z-index:1;
  }
  .wc-item { display:flex; gap:1.3rem; align-items:flex-start; }
  .wc-icon {
    flex-shrink:0; width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(201,164,92,.3);
    background:rgba(201,164,92,.045);
    color:var(--gold-star);
    transition:border-color .5s ease, background .5s ease, color .5s ease;
  }
  .wc-icon svg { width:19px; height:19px; display:block; }
  .wc-item:hover .wc-icon {
    border-color:rgba(201,164,92,.6);
    background:rgba(201,164,92,.1);
    color:#EBD9A8;
  }
  .wc-name {
    font-family:'Cormorant Garamond',serif; font-weight:400;
    font-size:1.26rem; line-height:1.25; color:var(--white);
    margin:.35rem 0 .7rem;
  }
  .wc-text {
    font-family:'Jost',sans-serif; font-size:.86rem; font-weight:300;
    line-height:1.85; color:var(--smid); margin:0;
  }

  @media (max-width:980px) {
    .wc-grid { grid-template-columns:1fr; row-gap:2.2rem; }
  }
  @media (max-width:700px) {
    .wc-head { margin-bottom:2.4rem; }
    .wc-item { gap:1rem; }
    .wc-icon { width:38px; height:38px; }
    .wc-icon svg { width:16px; height:16px; }
    .wc-name { font-size:1.16rem; }
    .wc-eyebrow.in::before { width:32px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wc-eyebrow::before { width:52px; transition:none; }
    .wc-icon { transition:none; }
  }

  /* ──────────────────────────────────────────────────────────────
     WHY CHOOSE US — background atmosphere
     Everything else on this page drifts sideways, turns, or changes in
     place. This one rises. Three soft shafts travel up through the section
     on unequal cycles, over a field that also answers the scroll.
  ────────────────────────────────────────────────────────────── */
  .wc-atmos {
    position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
    opacity:0; transition:opacity .8s ease;
  }
  #choose.live .wc-atmos { opacity:1; }
  /* The parallax lives on an inner layer: transforming the clipping box
     itself would drag its own edges into view. */
  .wc-field {
    position:absolute; inset:0;
    transform:translate3d(0, var(--sy, 0px), 0);
    will-change:transform;
  }

  /* Pools of light rather than bands. The streakiness before came from
     repeating gradients — a repeat is a stripe however softly you fade it.
     These are single soft radials instead, screen-blended so where two
     overlap they add light and merge rather than stacking as two marks. */
  .wc-blob {
    position:absolute; border-radius:50%;
    mix-blend-mode:screen; will-change:transform;
  }
  .wc-blob-1 {
    left:2%;   top:-6%; width:24vw; height:24vw; max-width:340px; max-height:340px;
    background:radial-gradient(circle, rgba(201,164,92,.12) 0%, rgba(201,164,92,.034) 44%, transparent 70%);
    animation:wcRoam1 44s ease-in-out infinite;
  }
  .wc-blob-2 {
    left:28%;  top:14%; width:18vw; height:18vw; max-width:260px; max-height:260px;
    background:radial-gradient(circle, rgba(235,217,168,.09) 0%, rgba(235,217,168,.026) 44%, transparent 70%);
    animation:wcRoam2 59s ease-in-out infinite;
  }
  .wc-blob-3 {
    right:6%;  top:-4%; width:21vw; height:21vw; max-width:300px; max-height:300px;
    background:radial-gradient(circle, rgba(170,178,215,.09) 0%, rgba(170,178,215,.026) 44%, transparent 70%);
    animation:wcRoam3 37s ease-in-out infinite;
  }
  .wc-blob-4 {
    left:12%;  top:46%; width:26vw; height:26vw; max-width:370px; max-height:370px;
    background:radial-gradient(circle, rgba(214,170,110,.1) 0%, rgba(201,164,92,.03) 44%, transparent 70%);
    animation:wcRoam4 73s ease-in-out infinite;
  }
  .wc-blob-5 {
    right:22%; top:34%; width:16vw; height:16vw; max-width:230px; max-height:230px;
    background:radial-gradient(circle, rgba(201,164,92,.105) 0%, rgba(201,164,92,.03) 44%, transparent 70%);
    animation:wcRoam5 41s ease-in-out infinite;
  }
  .wc-blob-6 {
    left:40%;  bottom:-8%; width:23vw; height:23vw; max-width:330px; max-height:330px;
    background:radial-gradient(circle, rgba(235,217,168,.08) 0%, rgba(235,217,168,.024) 44%, transparent 70%);
    animation:wcRoam6 67s ease-in-out infinite;
  }
  .wc-blob-7 {
    right:2%;  bottom:2%; width:19vw; height:19vw; max-width:270px; max-height:270px;
    background:radial-gradient(circle, rgba(201,164,92,.1) 0%, rgba(201,164,92,.028) 44%, transparent 70%);
    animation:wcRoam7 53s ease-in-out infinite;
  }
  .wc-blob-8 {
    left:-4%;  bottom:14%; width:17vw; height:17vw; max-width:245px; max-height:245px;
    background:radial-gradient(circle, rgba(170,178,215,.075) 0%, rgba(170,178,215,.022) 44%, transparent 70%);
    animation:wcRoam8 89s ease-in-out infinite;
  }

  /* Each pool walks its own closed circuit of four waypoints, so it wanders
     the section and arrives back where it began — no loop point to hide, and
     no shared direction for the eye to follow. */
  @keyframes wcRoam1 {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    25%     { transform:translate3d(-5%,-21%,0) scale(1.2); }
    50%     { transform:translate3d(37%,-34%,0) scale(1.0); }
    75%     { transform:translate3d(22%,-28%,0) scale(1.14); }
  }
  @keyframes wcRoam2 {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    25%     { transform:translate3d(28%,-33%,0) scale(0.94); }
    50%     { transform:translate3d(-19%,-36%,0) scale(1.0); }
    75%     { transform:translate3d(9%,13%,0) scale(1.0); }
  }
  @keyframes wcRoam3 {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    25%     { transform:translate3d(-16%,-29%,0) scale(0.94); }
    50%     { transform:translate3d(8%,-33%,0) scale(0.94); }
    75%     { transform:translate3d(-31%,-12%,0) scale(0.94); }
  }
  @keyframes wcRoam4 {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    25%     { transform:translate3d(-39%,33%,0) scale(0.94); }
    50%     { transform:translate3d(4%,-34%,0) scale(1.08); }
    75%     { transform:translate3d(-41%,31%,0) scale(1.08); }
  }
  @keyframes wcRoam5 {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    25%     { transform:translate3d(-9%,13%,0) scale(1.08); }
    50%     { transform:translate3d(23%,-25%,0) scale(0.94); }
    75%     { transform:translate3d(-7%,31%,0) scale(1.08); }
  }
  @keyframes wcRoam6 {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    25%     { transform:translate3d(-33%,34%,0) scale(0.94); }
    50%     { transform:translate3d(35%,-16%,0) scale(1.14); }
    75%     { transform:translate3d(-34%,30%,0) scale(1.0); }
  }
  @keyframes wcRoam7 {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    25%     { transform:translate3d(26%,-33%,0) scale(0.94); }
    50%     { transform:translate3d(-20%,23%,0) scale(0.94); }
    75%     { transform:translate3d(8%,0%,0) scale(1.2); }
  }
  @keyframes wcRoam8 {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    25%     { transform:translate3d(28%,18%,0) scale(1.14); }
    50%     { transform:translate3d(-8%,-9%,0) scale(1.08); }
    75%     { transform:translate3d(43%,-9%,0) scale(1.0); }
  }

  .wc-veil {
    position:absolute; inset:0;
    background:radial-gradient(ellipse 88% 76% at 50% 50%, transparent 0%, rgba(7,7,10,.26) 76%, rgba(7,7,10,.52) 100%);
  }

  #choose:not(.live) .wc-blob { animation-play-state:paused; }

  @media (max-width:700px) {
    .wc-blob-2, .wc-blob-5, .wc-blob-8 { display:none; }   /* five pools are enough on a phone */
  }
  @media (prefers-reduced-motion: reduce) {
    .wc-atmos { transition:none; }
    .wc-field { transform:none; }
    .wc-blob { animation:none; }
  }

  /* ══════════════════════════════════════
     STANDARDS
     A quiet closing strip. Five small plates, each with a drawn tick —
     the same hairline language as the spec lists, at a smaller scale.
  ══════════════════════════════════════ */
  #standards {
    background:
      radial-gradient(ellipse 60% 70% at 50% 0%, rgba(201,164,92,.05) 0%, transparent 72%),
      var(--deep);
    position:relative; overflow:hidden;
    padding-top:5rem; padding-bottom:5rem;
  }
  #standards::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.12) 24%, rgba(200,200,220,.12) 76%, transparent);
  }
  .sd-atmos { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  /* The same liquid-metal field that runs behind The Beginning. It carries
     its own pointer response, so the cursor lean this section used to do by
     hand comes free with it. A scrim keeps the plates legible over the top. */
  #standards::after {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(13,13,18,.34) 0%, rgba(13,13,18,.56) 52%, rgba(13,13,18,.72) 100%);
  }

  .sd-head { max-width:1240px; margin:0 auto 2.8rem; position:relative; z-index:1; }
  .sd-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.6rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.1rem;
  }
  .sd-eyebrow::before {
    content:''; width:0; height:1px; background:var(--gold-star); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .sd-eyebrow.in::before { width:52px; }
  .sd-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(1.9rem,3.8vw,3rem); line-height:1.06;
    color:var(--white); margin:0;
  }
  .sd-title em {
    font-style:italic;
    background:linear-gradient(100deg,#C9A45C 0%,#EBD9A8 48%,#C9A45C 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }

  .sd-grid {
    display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;
    max-width:1240px; margin:0 auto; position:relative; z-index:1;
  }
  .sd-card {
    position:relative;
    padding:1.5rem 1.3rem 1.4rem;
    border:1px solid rgba(201,164,92,.22);
    background:linear-gradient(165deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%);
    transition:border-color .5s ease, background .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
  }
  .sd-card:hover {
    border-color:rgba(201,164,92,.5);
    background:linear-gradient(165deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
    transform:translateY(-3px);
  }
  /* drawn, not a glyph — keeps it in the same hairline family as the rest */
  .sd-tick {
    display:block; position:relative;
    width:17px; height:17px; border-radius:50%;
    border:1px solid rgba(201,164,92,.45);
    margin-bottom:.95rem;
    transition:border-color .5s ease;
  }
  .sd-tick::after {
    content:''; position:absolute; left:5.4px; top:3.8px;
    width:4px; height:7.5px;
    border-right:1px solid var(--gold-star); border-bottom:1px solid var(--gold-star);
    transform:rotate(42deg);
  }
  .sd-card:hover .sd-tick { border-color:var(--gold-star); }
  .sd-name {
    font-family:'Jost',sans-serif; font-size:.78rem; font-weight:500;
    letter-spacing:.04em; line-height:1.35; color:var(--white);
    margin:0 0 .5rem;
  }
  .sd-note {
    font-family:'Jost',sans-serif; font-size:.73rem; font-weight:300;
    line-height:1.6; color:var(--silver); margin:0;
  }

  @media (max-width:1100px) {
    .sd-grid { grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width:760px) {
    .sd-grid { grid-template-columns:1fr 1fr; gap:.7rem; }
    #standards { padding-top:3.4rem; padding-bottom:3.4rem; }
    .sd-head { margin-bottom:2rem; }
    .sd-card { padding:1.2rem 1rem 1.1rem; }
    .sd-eyebrow.in::before { width:32px; }
  }
  @media (max-width:420px) {
    .sd-grid { grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sd-eyebrow::before { width:52px; transition:none; }
    .sd-card, .sd-tick { transition:none; }
    .sd-card:hover { transform:none; }
  }

  /* ══════════════════════════════════════
     FAQ
     Hairline rows that open in place. The panel animates with
     grid-template-rows 0fr -> 1fr, so nothing has to measure a height and
     the answer can be any length without the transition breaking.
  ══════════════════════════════════════ */
  #faq {
    background:
      radial-gradient(ellipse 58% 44% at 86% 4%, rgba(201,164,92,.05) 0%, transparent 70%),
      radial-gradient(ellipse 52% 46% at 8% 92%, rgba(170,178,215,.035) 0%, transparent 72%),
      var(--black);
    position:relative; overflow:hidden;
  }
  #faq::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.12) 24%, rgba(200,200,220,.12) 76%, transparent);
  }
  .fq-head { max-width:1240px; margin:0 auto 2.8rem; position:relative; z-index:1; }
  .fq-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.2rem;
  }
  .fq-eyebrow::before {
    content:''; width:0; height:1px; background:var(--gold-star); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .fq-eyebrow.in::before { width:52px; }
  .fq-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.06;
    color:var(--white); margin:0;
  }
  .fq-title em {
    font-style:italic;
    background:linear-gradient(100deg,#C9A45C 0%,#EBD9A8 48%,#C9A45C 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }

  .fq-list { max-width:1000px; margin:0 auto; position:relative; z-index:1; }
  .fq-item { border-top:1px solid var(--border); }
  .fq-item:last-child { border-bottom:1px solid var(--border); }
  .fq-h { margin:0; }
  .fq-q {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    gap:2rem; padding:1.5rem .2rem;
    background:none; border:0; cursor:pointer; text-align:left;
    font-family:'Jost',sans-serif; font-size:.95rem; font-weight:400;
    line-height:1.4; color:var(--slight);
    transition:color .4s ease;
  }
  .fq-q:hover { color:var(--white); }
  .fq-q:focus-visible { outline:1px solid var(--gold); outline-offset:3px; }
  .fq-item.is-open .fq-q { color:var(--white); }

  /* a drawn plus that becomes a minus, rather than two glyphs swapped over */
  .fq-mark {
    position:relative; flex-shrink:0;
    width:15px; height:15px;
  }
  .fq-mark::before, .fq-mark::after {
    content:''; position:absolute; left:0; top:7px;
    width:15px; height:1px; background:var(--gold-star);
    transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease;
  }
  .fq-mark::after { transform:rotate(90deg); }
  .fq-item.is-open .fq-mark::after { transform:rotate(0deg); opacity:0; }

  .fq-a {
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1);
  }
  .fq-item.is-open .fq-a { grid-template-rows:1fr; }
  .fq-a > div { overflow:hidden; }
  .fq-at {
    font-family:'Jost',sans-serif; font-size:.88rem; font-weight:300;
    line-height:1.9; color:var(--smid);
    max-width:76ch; margin:0; padding:0 3rem 1.7rem .2rem;
  }

  @media (max-width:700px) {
    .fq-head { margin-bottom:2rem; }
    .fq-q { gap:1.2rem; padding:1.25rem .1rem; font-size:.88rem; }
    .fq-at { font-size:.84rem; padding:0 0 1.4rem .1rem; }
    .fq-eyebrow.in::before { width:32px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .fq-eyebrow::before { width:52px; transition:none; }
    .fq-q, .fq-a, .fq-mark::before, .fq-mark::after { transition:none; }
  }

  /* ──────────────────────────────────────────────────────────────
     FAQ — background atmosphere
     The other sections animate on a timer. This one answers the section's
     own interaction: a pool of light glides down to whichever question you
     opened, and fades back out when you close them all.
  ────────────────────────────────────────────────────────────── */
  .fq-atmos { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  #faq .fq-head, #faq .fq-list { position:relative; z-index:1; }

  /* The nebula. Rendered at half resolution on purpose: everything in the
     shader is quantised to a cell grid anyway, so the upscale costs nothing
     visible and halves the per-pixel work. */
  .js-nebula {
    position:absolute; inset:0; width:100%; height:100%; display:block;
    opacity:0; transition:opacity 1.3s ease;
  }
  .fq-nebula.ready { opacity:.34; }
  /* keeps the questions legible over the gas */
  #faq::after {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(7,7,10,.5) 0%, rgba(7,7,10,.62) 45%, rgba(7,7,10,.74) 100%);
  }

  /* The travelling pool. JS only writes --gy; the glide is a CSS transition,
     so there is no animation loop running for an interaction that happens
     a handful of times a visit. */
  .fq-glow {
    position:absolute; left:50%; top:0;
    width:min(118%, 1180px); height:300px;
    margin:-150px 0 0 calc(min(118%, 1180px) / -2);
    border-radius:50%;
    background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(201,164,92,.12) 0%, rgba(235,217,168,.045) 40%, transparent 70%);
    opacity:0;
    transform:translate3d(0, var(--gy, 0px), 0);
    transition:transform 1.05s cubic-bezier(.22,1,.36,1), opacity .8s ease;
    will-change:transform, opacity;
  }
  #faq.has-open .fq-glow { opacity:1; }

  @media (max-width:700px) {
    .fq-glow { height:220px; margin-top:-110px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .fq-glow { transition:none; }
  }

  /* ══════════════════════════════════════
     OUR PROMISE — the closing panel
     Ivory on dark, the same arrangement as Our Studio and Glacē, so the page
     ends on the brightest thing on it.
  ══════════════════════════════════════ */
  #promise {
    background:
      radial-gradient(ellipse 54% 50% at 50% 0%, rgba(201,164,92,.055) 0%, transparent 72%),
      radial-gradient(ellipse 46% 44% at 88% 92%, rgba(170,178,215,.035) 0%, transparent 72%),
      var(--black);
    padding:6rem 4rem;
    position:relative;
  }
  #promise::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.14) 22%, rgba(200,200,220,.14) 78%, transparent);
  }
  .pm-panel {
    max-width:1240px; margin:0 auto;
    background:linear-gradient(165deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%);
    border:1px solid rgba(201,164,92,.26);
    color:var(--smid);
    padding:5.5rem 4rem;
    position:relative; overflow:hidden;
    text-align:center;
  }
  .pm-panel::before {
    content:''; position:absolute; inset:18px; z-index:1; pointer-events:none;
    border:1px solid rgba(201,164,92,.16);
  }
  .pm-panel::after {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse 54% 58% at 50% 18%, rgba(201,164,92,.075) 0%, transparent 70%);
    animation:pmDrift 44s ease-in-out infinite;
  }
  @keyframes pmDrift {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    50%     { transform:translate3d(6%,5%,0) scale(1.18); }
  }
  .pm-panel > * { position:relative; z-index:2; }

  /* rules on both sides, the way a centred eyebrow wants them */
  .pm-eyebrow {
    display:flex; align-items:center; justify-content:center; gap:1rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.6rem;
  }
  .pm-eyebrow::before, .pm-eyebrow::after {
    content:''; width:0; height:1px; background:rgba(201,164,92,.55); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .pm-eyebrow.in::before, .pm-eyebrow.in::after { width:46px; }
  .pm-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2rem,4.2vw,3.3rem); line-height:1.1;
    color:var(--white); text-wrap:balance;
    max-width:22ch; margin:0 auto 1.6rem;
  }
  .pm-title em {
    font-style:italic;
    background:linear-gradient(100deg,#C9A45C 0%,#EBD9A8 48%,#C9A45C 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .pm-text {
    font-family:'Jost',sans-serif; font-size:.93rem; font-weight:300;
    line-height:1.95; color:var(--smid);
    max-width:62ch; margin:0 auto;
  }

  .pm-actions {
    display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap;
    margin-top:2.6rem;
  }
  .pm-btn {
    font-family:'Jost',sans-serif; font-size:.62rem; font-weight:500;
    letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
    padding:1.05rem 2.2rem;
    transition:background .4s ease, color .4s ease, border-color .4s ease, transform .4s ease;
  }
  .pm-btn-solid {
    background:var(--gold); color:var(--ivory); border:1px solid var(--gold-star);
    position:relative; overflow:hidden;
  }
  .pm-btn-solid::before {
    content:''; position:absolute; top:0; left:-80%; width:55%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
    transform:skewX(-18deg); transition:left .65s ease;
  }
  .pm-btn-solid:hover { background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-2px); }
  .pm-btn-solid:hover::before { left:150%; }
  .pm-btn-ghost {
    background:transparent; color:var(--slight); border:1px solid var(--bmed);
  }
  .pm-btn-ghost:hover { border-color:var(--white); color:var(--white); background:rgba(255,255,255,.04); transform:translateY(-2px); }

  @media (max-width:980px) {
    .pm-panel { padding:3.6rem 2.2rem; }
    .pm-panel::before { inset:13px; }
  }
  @media (max-width:700px) {
    #promise { padding:3rem 1.15rem 3.5rem; }
    .pm-panel { padding:2.8rem 1.4rem 3rem; }
    .pm-panel::before { inset:9px; }
    .pm-eyebrow.in::before, .pm-eyebrow.in::after { width:26px; }
    .pm-btn { flex:1; text-align:center; padding:.95rem .7rem; font-size:.57rem; letter-spacing:.16em; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pm-eyebrow::before, .pm-eyebrow::after { width:46px; transition:none; }
    .pm-btn { transition:none; }
    .pm-panel::after { animation:none; }
  }

  /* ══════════════════════════════════════
     THE MACHINES (services)
     The posters are the artwork; the frame stays out of their way. Three
     across, with the short last row centred rather than left-hanging.
  ══════════════════════════════════════ */
  #machines {
    background:
      radial-gradient(ellipse 58% 46% at 84% 2%,  rgba(201,164,92,.1)   0%, transparent 70%),
      radial-gradient(ellipse 54% 48% at 8% 92%,  rgba(170,178,215,.07) 0%, transparent 72%),
      radial-gradient(ellipse 70% 40% at 46% 50%, rgba(214,170,110,.05) 0%, transparent 74%),
      var(--deep);
    position:relative; overflow:hidden;
  }
  #machines::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.12) 24%, rgba(200,200,220,.12) 76%, transparent);
  }
  .mc-head { max-width:1240px; margin:0 auto 3.2rem; position:relative; z-index:1; }
  .mc-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.2rem;
  }
  .mc-eyebrow::before {
    content:''; width:0; height:1px; background:var(--gold-star); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .mc-eyebrow.in::before { width:52px; }
  .mc-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.06;
    color:var(--white); margin-bottom:1.2rem;
  }
  .mc-title em {
    font-style:italic;
    background:linear-gradient(100deg,#C9A45C 0%,#EBD9A8 48%,#C9A45C 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }
  .mc-lead {
    font-family:'Jost',sans-serif; font-size:.93rem; font-weight:300;
    line-height:1.85; color:var(--smid); max-width:58ch; margin:0;
  }

  /* flex rather than grid: five cards in a three-column grid leave two
     hanging on the left, and these want to sit centred */

  @media (max-width:980px) {
  }
  @media (max-width:620px) {
    .mc-head { margin-bottom:2.2rem; }
    .mc-eyebrow.in::before { width:32px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mc-eyebrow::before { width:52px; transition:none; }
  }

  /* ──────────────────────────────────────────────────────────────
     NEW GUEST — the arrival
     The panel is the first thing on the services page, so it gets an
     entrance rather than a fade: it lifts in slightly under-sized, a light
     passes over it once, the corner brackets draw themselves, and then each
     offer strikes out its old price and the new one lands. The whole
     sequence runs about two seconds and only ever plays once.
  ────────────────────────────────────────────────────────────── */
  .ng-panel.rv {
    opacity:0; transform:translateY(22px) scale(.975);
    transition:opacity .9s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
  }
  .ng-panel.rv.in { opacity:1; transform:none; }

  /* the light passing over it */
  .ng-sheen { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
  .ng-sheen::before {
    content:''; position:absolute; top:-30%; left:0; width:36%; height:160%;
    background:linear-gradient(90deg, transparent,
      rgba(255,255,255,.35) 42%, rgba(255,255,255,.62) 50%, rgba(255,255,255,.35) 58%, transparent);
    transform:rotate(14deg) translate3d(-280%,0,0);
    opacity:0;
  }
  .ng-panel.in .ng-sheen::before { animation:ngSheen 1.1s cubic-bezier(.3,0,.2,1) .3s both; }
  @keyframes ngSheen {
    0%   { transform:rotate(14deg) translate3d(-280%,0,0); opacity:0; }
    18%  { opacity:1; }
    82%  { opacity:1; }
    100% { transform:rotate(14deg) translate3d(340%,0,0);  opacity:0; }
  }

  /* the brackets draw themselves into the corners */
  .ng-panel::before, .ng-panel::after {
    width:0; height:0;
    transition:width .65s cubic-bezier(.22,1,.36,1) .7s,
               height .65s cubic-bezier(.22,1,.36,1) .7s;
  }
  .ng-panel.in::before, .ng-panel.in::after { width:34px; height:34px; }

  .ng-head > * {
    opacity:0; transform:translateY(12px);
    transition:opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1);
  }
  .ng-panel.in .ng-head > * { opacity:1; transform:none; }
  .ng-panel.in .ng-head > *:nth-child(1) { transition-delay:.40s; }
  .ng-panel.in .ng-head > *:nth-child(2) { transition-delay:.50s; }
  .ng-panel.in .ng-head > *:nth-child(3) { transition-delay:.60s; }
  .ng-panel.in .ng-head > *:nth-child(4) { transition-delay:.72s; }

  .ng-offer {
    opacity:0; transform:translateY(16px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
  }
  .ng-panel.in .ng-offer { opacity:1; transform:none; }
  .ng-panel.in .ng-offer:nth-of-type(1) { transition-delay:.88s; }
  .ng-panel.in .ng-offer:nth-of-type(2) { transition-delay:1.00s; }
  .ng-panel.in .ng-offer:nth-of-type(3) { transition-delay:1.12s; }

  /* The strike is a drawn bar, not text-decoration, because a decoration
     cannot be animated — and the line being drawn is the whole point. */
  .ng-was { text-decoration:none; position:relative; }
  .ng-was::after {
    content:''; position:absolute; left:-2px; right:-2px; top:54%;
    height:1px; background:rgba(26,24,21,.5);
    transform:scaleX(0); transform-origin:left center;
    transition:transform .45s cubic-bezier(.22,1,.36,1);
  }
  .ng-panel.in .ng-was::after { transform:scaleX(1); }
  .ng-panel.in .ng-offer:nth-of-type(1) .ng-was::after { transition-delay:1.25s; }
  .ng-panel.in .ng-offer:nth-of-type(2) .ng-was::after { transition-delay:1.37s; }
  .ng-panel.in .ng-offer:nth-of-type(3) .ng-was::after { transition-delay:1.49s; }

  /* and the new price lands with a little overshoot — the surprise itself */
  .ng-now {
    display:inline-block; opacity:0; transform:scale(.78);
    transition:opacity .45s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
  }
  .ng-panel.in .ng-now { opacity:1; transform:none; }
  .ng-panel.in .ng-offer:nth-of-type(1) .ng-now { transition-delay:1.44s; }
  .ng-panel.in .ng-offer:nth-of-type(2) .ng-now { transition-delay:1.56s; }
  .ng-panel.in .ng-offer:nth-of-type(3) .ng-now { transition-delay:1.68s; }

  .ng-meta {
    opacity:0; transition:opacity .6s ease;
  }
  .ng-panel.in .ng-meta { opacity:1; }
  .ng-panel.in .ng-offer:nth-of-type(1) .ng-meta { transition-delay:1.62s; }
  .ng-panel.in .ng-offer:nth-of-type(2) .ng-meta { transition-delay:1.74s; }
  .ng-panel.in .ng-offer:nth-of-type(3) .ng-meta { transition-delay:1.86s; }

  @media (prefers-reduced-motion: reduce) {
    .ng-panel.rv, .ng-head > *, .ng-offer, .ng-now, .ng-meta,
    .ng-panel::before, .ng-panel::after, .ng-was::after {
      opacity:1; transform:none; transition:none;
    }
    .ng-panel::before, .ng-panel::after { width:34px; height:34px; }
    .ng-was::after { transform:scaleX(1); }
    .ng-sheen { display:none; }
  }

  /* sparks fire over the panel, under nothing */
  .ng-spark {
    position:absolute; inset:0; width:100%; height:100%;
    display:block; pointer-events:none; z-index:4;
  }
  /* the price flares as its sparks go */
  .ng-panel.in .ng-offer:nth-of-type(1) .ng-now { animation:ngFlare .9s ease-out 1.56s both; }
  .ng-panel.in .ng-offer:nth-of-type(2) .ng-now { animation:ngFlare .9s ease-out 1.68s both; }
  .ng-panel.in .ng-offer:nth-of-type(3) .ng-now { animation:ngFlare .9s ease-out 1.80s both; }
  @keyframes ngFlare {
    0%   { text-shadow:0 0 0 rgba(201,164,92,0); }
    18%  { text-shadow:0 0 22px rgba(201,164,92,.85), 0 0 6px rgba(255,246,220,.9); }
    100% { text-shadow:0 0 0 rgba(201,164,92,0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ng-spark { display:none; }
    .ng-panel.in .ng-now { animation:none; }
  }

  /* ──────────────────────────────────────────────────────────────
     NEW GUEST — the frame, and the stamp
  ────────────────────────────────────────────────────────────── */
  /* The corner brackets are gone: the full frame draws through exactly where
     they sat, so keeping both would have doubled the same hairline. */
  .ng-panel::before, .ng-panel::after { content:none; }

  /* Four segments drawn in sequence, so the line travels the perimeter and
     closes the loop rather than four sides fading up together. */
  .ng-frame { position:absolute; inset:18px; pointer-events:none; z-index:2; }
  .ng-frame i { position:absolute; background:rgba(162,133,78,.55); }
  .ng-frame i:nth-child(1) { top:0;    left:0;  width:100%; height:1px; transform:scaleX(0); transform-origin:left center; }
  .ng-frame i:nth-child(2) { top:0;    right:0; width:1px; height:100%; transform:scaleY(0); transform-origin:center top; }
  .ng-frame i:nth-child(3) { bottom:0; right:0; width:100%; height:1px; transform:scaleX(0); transform-origin:right center; }
  .ng-frame i:nth-child(4) { bottom:0; left:0;  width:1px; height:100%; transform:scaleY(0); transform-origin:center bottom; }
  .ng-panel.in .ng-frame i { transform:none; transition:transform .34s cubic-bezier(.4,0,.25,1); }
  .ng-panel.in .ng-frame i:nth-child(1) { transition-delay:.50s; }
  .ng-panel.in .ng-frame i:nth-child(2) { transition-delay:.84s; }
  .ng-panel.in .ng-frame i:nth-child(3) { transition-delay:1.18s; }
  .ng-panel.in .ng-frame i:nth-child(4) { transition-delay:1.52s; }

  /* The badge lands like a stamp: oversized and turned, down past its size,
     then settling square. The border flashes on the hit. */
  .ng-badge { transform-origin:center; opacity:0; }
  .ng-panel.in .ng-offer:nth-of-type(1) .ng-badge { animation:ngStamp .62s cubic-bezier(.2,.8,.3,1) 1.02s both; }
  .ng-panel.in .ng-offer:nth-of-type(2) .ng-badge { animation:ngStamp .62s cubic-bezier(.2,.8,.3,1) 1.14s both; }
  .ng-panel.in .ng-offer:nth-of-type(3) .ng-badge { animation:ngStamp .62s cubic-bezier(.2,.8,.3,1) 1.26s both; }
  @keyframes ngStamp {
    0%   { opacity:0; transform:scale(2) rotate(-8deg);
           border-color:rgba(162,133,78,0); }
    45%  { opacity:1; transform:scale(.9) rotate(2deg);
           border-color:rgba(162,133,78,1); box-shadow:0 0 14px rgba(201,164,92,.5); }
    70%  { transform:scale(1.05) rotate(-.8deg); box-shadow:0 0 0 rgba(201,164,92,0); }
    100% { opacity:1; transform:scale(1) rotate(0);
           border-color:rgba(162,133,78,.45); }
  }

  @media (max-width:700px) { .ng-frame { inset:11px; } }
  @media (prefers-reduced-motion: reduce) {
    .ng-frame i { transform:none; transition:none; }
    .ng-badge { opacity:1; animation:none; }
  }

  /* ──────────────────────────────────────────────────────────────
     THE MACHINES — background atmosphere
     A gallery light. It travels the wall and rests on one poster at a time,
     which is the one kind of movement that suits a row of framed pieces —
     and it tells you where to look without anything flashing.
  ────────────────────────────────────────────────────────────── */
  .mc-atmos { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  .mc-spot {
    position:absolute; left:0; top:0;
    width:46%; height:58%; border-radius:50%;
    margin:0; opacity:0;
    background:radial-gradient(ellipse at center,
      rgba(201,164,92,.175) 0%, rgba(201,164,92,.065) 42%, transparent 70%);
    transform:translate3d(calc(var(--sx, 50%) - 50%), calc(var(--sy, 50%) - 50%), 0);
    transition:transform 1.4s cubic-bezier(.4,0,.2,1), opacity 1.2s ease;
    will-change:transform;
  }
  #machines.live .mc-spot { opacity:1; }

  /* the poster under the light warms a little — minimal, but you can tell */

  @media (prefers-reduced-motion: reduce) {
    .mc-spot { transition:none; }
  }

  /* ──────────────────────────────────────────────────────────────
     WHAT WE OFFER — the liquid-metal field
     The same shader that runs behind The Beginning. It lives in its own
     wrapper because #services already spends both pseudo-elements (the top
     hairline and the grain), and because `#services > *` claims z-index 1 —
     the wrapper has to opt back down to 0 by name.
  ────────────────────────────────────────────────────────────── */
  #services { overflow:hidden; }
  #services > .sv-shade {
    position:absolute; inset:0; z-index:0;
    overflow:hidden; pointer-events:none;
  }
  /* the menu is a long run of small text, so the gas is held well back */
  .sv-scrim {
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(7,7,10,.46) 0%, rgba(7,7,10,.52) 46%, rgba(7,7,10,.44) 100%);
  }
  /* a warm bloom anchored to the lower half, so the end of the menu has
     something behind it rather than running out into flat black */
  .sv-glow {
    position:absolute; left:50%; bottom:-22%;
    width:118%; height:70%;
    transform:translateX(-50%);
    background:
      radial-gradient(ellipse 48% 54% at 32% 60%, rgba(201,164,92,.1)   0%, transparent 70%),
      radial-gradient(ellipse 42% 48% at 76% 42%, rgba(214,170,110,.075) 0%, transparent 72%),
      radial-gradient(ellipse 54% 40% at 54% 86%, rgba(170,178,215,.05)  0%, transparent 74%);
    animation:svGlow 46s ease-in-out infinite alternate;
    will-change:transform;
  }
  @keyframes svGlow {
    from { transform:translateX(-50%) translate3d(-4%, 3%, 0) scale(1); }
    to   { transform:translateX(-50%) translate3d( 5%,-4%, 0) scale(1.14); }
  }
  #services .bg2-shader.ready { opacity:.56; }
  @media (prefers-reduced-motion: reduce) { .sv-glow { animation:none; } }

  /* Advanced Technology borrows the Principles field. The gallery light sits
     above it (later in the DOM at the same depth), and the veil is retuned
     because the posters need their surroundings darker than the cards did. */
  #machines .sf-veil {
    background:radial-gradient(ellipse 88% 78% at 50% 48%, transparent 0%, rgba(13,13,18,.3) 76%, rgba(13,13,18,.58) 100%);
  }

  /* ══════════════════════════════════════
     THE MENU — set as a menu, not a list
  ══════════════════════════════════════ */
  /* Air. Sixty-four rows at 1.15rem read as a spreadsheet; the extra space
     is the cheapest luxury signal available. */
  .menu-row { padding:1.6rem 0; gap:1.25rem; }

  /* The leader rule. A hairline running from the end of the treatment to the
     price is what separates a menu from a list — without it the eye has to
     cross an empty gap and guess which number belongs to what. */
  .menu-name {
    display:flex; align-items:baseline; gap:.9rem;
    font-size:1.26rem;
  }
  .menu-name::after {
    content:''; flex:1 1 auto; height:1px; min-width:1.5rem;
    transform:translateY(-.28em);
    background:rgba(200,200,220,.13);
    transition:background .4s ease;
  }
  .menu-row:hover .menu-name::after { background:rgba(201,164,92,.34); }
  /* the name slid on hover; with a leader attached the whole line would move,
     so the shift moves to the row instead */
  .menu-row:hover .menu-name { transform:none; }
  .menu-row { transition:background .4s ease, padding-left .45s cubic-bezier(.22,1,.36,1); }
  .menu-row:hover { padding-left:8px; }

  /* Lining, tabular figures so the money column actually lines up. Cormorant
     defaults to old-style numerals, which wander above and below the
     baseline — fine in a sentence, wrong in a column of prices. */
  .menu-price {
    font-size:1.42rem;
    color:rgba(235,217,168,.82);
    font-variant-numeric:lining-nums tabular-nums;
    font-feature-settings:'lnum' 1, 'tnum' 1;
  }
  .menu-dur { font-variant-numeric:lining-nums tabular-nums; }

  @media (max-width:700px) {
    .menu-row { padding:1.25rem 0; }
    .menu-row:hover { padding-left:0; }
    .menu-name { font-size:1.18rem; gap:.6rem; }
    .menu-price { font-size:1.3rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .menu-row, .menu-name::after { transition:none; }
    .menu-row:hover { padding-left:0; }
  }

  /* ──────────────────────────────────────────────────────────────
     THE MENU — the close
     Sixty-four prices and, until now, nothing to click. This catches people
     at the point they have decided.
  ────────────────────────────────────────────────────────────── */
  .mn-close {
    max-width:1000px; margin:3.6rem auto 0; text-align:center;
    position:relative; z-index:1;
  }
  .mn-close::before {
    content:''; display:block; width:0; height:1px; margin:0 auto 2.4rem;
    background:linear-gradient(90deg, transparent, rgba(201,164,92,.45), transparent);
    transition:width 1.1s cubic-bezier(.22,1,.36,1) .2s;
  }
  .mn-close.in::before { width:100%; }
  .mn-note {
    font-family:'Jost',sans-serif; font-size:.82rem; font-weight:300;
    line-height:1.9; color:var(--sdim);
    max-width:62ch; margin:0 auto 2rem;
  }
  .mn-actions { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
  .mn-btn {
    font-family:'Jost',sans-serif; font-size:.62rem; font-weight:500;
    letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
    padding:1.05rem 2.2rem;
    transition:background .4s ease, color .4s ease, border-color .4s ease, transform .4s ease;
  }
  .mn-btn-solid {
    background:var(--gold); color:var(--ivory); border:1px solid var(--gold-star);
    position:relative; overflow:hidden;
  }
  .mn-btn-solid::before {
    content:''; position:absolute; top:0; left:-80%; width:55%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
    transform:skewX(-18deg); transition:left .65s ease;
  }
  .mn-btn-solid:hover { background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-2px); }
  .mn-btn-solid:hover::before { left:150%; }
  .mn-btn-ghost {
    background:transparent; color:var(--slight); border:1px solid var(--bmed);
  }
  .mn-btn-ghost:hover { border-color:var(--white); color:var(--white); background:rgba(255,255,255,.04); transform:translateY(-2px); }

  @media (max-width:700px) {
    .mn-close { margin-top:2.6rem; }
    .mn-close::before { margin-bottom:1.8rem; }
    .mn-note { font-size:.78rem; margin-bottom:1.6rem; }
    .mn-btn { flex:1; text-align:center; padding:.95rem .7rem; font-size:.57rem; letter-spacing:.16em; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mn-close::before { width:100%; transition:none; }
    .mn-btn { transition:none; }
  }

  /* ══════════════════════════════════════
     CONTACT — opening banner
     Same construction as the About banner: a photo knocked well back, a
     scrim over it, and the copy on top. Reception rather than a treatment
     room, because this page is about reaching a person.
  ══════════════════════════════════════ */
  #contact-hero {
    position:relative; overflow:hidden;
    background:var(--black);
    padding:7.5rem 4rem 6.5rem;
  }
  .ct-bg {
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:url('./gallery-reception.jpg') 50% 38% / cover no-repeat;
    background-image:image-set(url('./gallery-reception.webp') type('image/webp'),
                               url('./gallery-reception.jpg') type('image/jpeg'));
    opacity:.5; filter:saturate(.92) contrast(1.04);
  }
  /* the photo is a bright room, so it needs more holding back than the
     About banner's dark still life does */
  .ct-scrim {
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(7,7,10,.86) 0%, rgba(7,7,10,.72) 42%, rgba(7,7,10,.5) 100%),
      linear-gradient(180deg, rgba(7,7,10,.5) 0%, transparent 38%, rgba(7,7,10,.62) 100%);
  }
  .ct-inner { position:relative; z-index:1; max-width:1240px; margin:0 auto; }

  .ct-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.3rem;
  }
  .ct-eyebrow::before {
    content:''; width:0; height:1px; background:var(--gold-star); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .ct-eyebrow.in::before { width:52px; }
  .ct-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.8rem,7vw,5.2rem); line-height:1;
    color:var(--white); margin:0 0 1.5rem;
  }
  .ct-lead {
    font-family:'Jost',sans-serif; font-size:.95rem; font-weight:300;
    line-height:1.9; color:var(--slight); max-width:56ch; margin:0;
  }

  .ct-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2.4rem; }
  .ct-btn {
    display:inline-flex; align-items:center; gap:.6rem;
    font-family:'Jost',sans-serif; font-size:.62rem; font-weight:500;
    letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
    padding:1.05rem 2.2rem;
    transition:background .4s ease, color .4s ease, border-color .4s ease, transform .4s ease;
  }
  .ct-btn svg { width:15px; height:15px; flex-shrink:0; }
  .ct-btn-solid {
    background:var(--gold); color:var(--ivory); border:1px solid var(--gold-star);
    position:relative; overflow:hidden;
  }
  .ct-btn-solid::before {
    content:''; position:absolute; top:0; left:-80%; width:55%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
    transform:skewX(-18deg); transition:left .65s ease;
  }
  .ct-btn-solid:hover { background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-2px); }
  .ct-btn-solid:hover::before { left:150%; }
  .ct-btn-ghost {
    background:rgba(7,7,10,.3); color:var(--slight); border:1px solid var(--bmed);
    font-variant-numeric:lining-nums tabular-nums;
  }
  .ct-btn-ghost:hover { border-color:var(--white); color:var(--white); background:rgba(255,255,255,.06); transform:translateY(-2px); }

  @media (max-width:900px) {
    #contact-hero { padding:5rem 1.6rem 4.5rem; }
    .ct-scrim { background:linear-gradient(180deg, rgba(7,7,10,.74) 0%, rgba(7,7,10,.66) 45%, rgba(7,7,10,.8) 100%); }
  }
  @media (max-width:700px) {
    #contact-hero { padding:4rem 1.15rem 3.6rem; }
    .ct-eyebrow.in::before { width:32px; }
    .ct-btn { flex:1; justify-content:center; padding:.95rem .7rem; font-size:.57rem; letter-spacing:.16em; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ct-eyebrow::before { width:52px; transition:none; }
    .ct-btn { transition:none; }
  }

  /* ══════════════════════════════════════
     CONTACT — message form + studio information
     Two columns: write to us on the left, everything you need to find us on
     the right. Dark rather than the reference's ivory, so it sits with the
     rest of the site.
  ══════════════════════════════════════ */
  .cx-grid {
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:5rem; max-width:1240px; margin:0 auto;
    position:relative; z-index:1;
  }
  .cx-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.2rem;
  }
  .cx-eyebrow::before { content:''; width:46px; height:1px; background:var(--gold-star); flex-shrink:0; }
  .cx-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.1;
    color:var(--white); margin:0 0 2.4rem;
  }
  .cx-title em {
    font-style:italic;
    background:linear-gradient(100deg,#C9A45C 0%,#EBD9A8 48%,#C9A45C 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }

  /* ── the form ── */
  .cx-hp { position:absolute; left:-9999px; }
  .cx-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .cx-field { margin-bottom:1.25rem; }
  .cx-lbl {
    display:block; margin-bottom:.55rem;
    font-family:'Jost',sans-serif; font-size:.58rem; font-weight:400;
    letter-spacing:.24em; text-transform:uppercase; color:var(--sdim);
  }
  .cx-lbl span { color:var(--gold-star); }
  .cx-input {
    width:100%; display:block;
    font-family:'Jost',sans-serif; font-size:.88rem; font-weight:300;
    color:var(--white); background:rgba(255,255,255,.03);
    border:1px solid var(--border); border-radius:0;
    padding:.95rem 1.1rem;
    transition:border-color .35s ease, background .35s ease;
    -webkit-appearance:none; appearance:none;
  }
  .cx-input::placeholder { color:rgba(142,142,158,.75); }
  .cx-input:hover { border-color:rgba(200,200,220,.2); }
  .cx-input:focus {
    outline:none; border-color:var(--gold-star);
    background:rgba(255,255,255,.055);
  }
  /* the native arrow is drawn in the OS's colours, which on a dark field
     reads as a light grey smudge — this one is ours */
  .cx-select {
    background-image:linear-gradient(45deg, transparent 50%, var(--gold-star) 50%),
                     linear-gradient(135deg, var(--gold-star) 50%, transparent 50%);
    background-position:calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
    padding-right:2.6rem; cursor:pointer;
  }
  .cx-select option { background:var(--deep); color:var(--white); }
  .cx-area { resize:vertical; min-height:130px; line-height:1.7; }

  .cx-btn {
    width:100%; margin-top:.6rem;
    font-family:'Jost',sans-serif; font-size:.62rem; font-weight:500;
    letter-spacing:.24em; text-transform:uppercase;
    color:var(--ivory); background:var(--gold);
    border:1px solid var(--gold-star); cursor:pointer;
    padding:1.15rem 2rem;
    position:relative; overflow:hidden;
    transition:background .4s ease, border-color .4s ease, transform .4s ease;
  }
  .cx-btn::before {
    content:''; position:absolute; top:0; left:-80%; width:55%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
    transform:skewX(-18deg); transition:left .65s ease;
  }
  .cx-btn:hover { background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-2px); }
  .cx-btn:hover::before { left:150%; }
  .cx-btn:disabled { opacity:.6; cursor:default; transform:none; }
  .cx-msg {
    min-height:1.2em; margin:.9rem 0 0;
    font-family:'Jost',sans-serif; font-size:.78rem; font-weight:300; color:var(--smid);
  }
  .cx-msg a { color:var(--gold-star); }

  /* ── studio information ── */
  .cx-info { align-self:start; }
  .cx-rows { display:grid; gap:0; }
  .cx-item {
    display:flex; gap:1.1rem; align-items:flex-start;
    padding:1.35rem 0; border-top:1px solid var(--border);
  }
  .cx-item:first-child { border-top:none; padding-top:0; }
  .cx-ico {
    flex-shrink:0; width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(201,164,92,.28); color:var(--gold-star);
    transition:border-color .4s ease, background .4s ease;
  }
  .cx-ico svg { width:16px; height:16px; }
  .cx-item:hover .cx-ico { border-color:rgba(201,164,92,.6); background:rgba(201,164,92,.08); }
  .cx-k {
    display:block; margin-bottom:.4rem;
    font-family:'Jost',sans-serif; font-size:.56rem; font-weight:400;
    letter-spacing:.26em; text-transform:uppercase; color:var(--sdim);
  }
  .cx-v {
    display:block; text-decoration:none;
    font-family:'Jost',sans-serif; font-size:.92rem; font-weight:400;
    line-height:1.6; color:var(--white);
    transition:color .35s ease;
  }
  a.cx-v:hover { color:var(--gold-star); }
  .cx-hours { font-variant-numeric:lining-nums tabular-nums; }
  .cx-sub {
    display:block; margin-top:.4rem;
    font-family:'Jost',sans-serif; font-size:.76rem; font-weight:300;
    line-height:1.6; color:var(--sdim);
  }
  .cx-sub a { color:var(--smid); }
  .cx-sub a:hover { color:var(--gold-star); }

  .cx-follow-lbl {
    margin:2.2rem 0 .9rem;
    font-family:'Jost',sans-serif; font-size:.56rem; font-weight:400;
    letter-spacing:.26em; text-transform:uppercase; color:var(--sdim);
  }
  .cx-follow { display:flex; gap:.6rem; flex-wrap:wrap; }
  .cx-social {
    display:inline-flex; align-items:center; gap:.55rem;
    font-family:'Jost',sans-serif; font-size:.6rem; font-weight:400;
    letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
    color:var(--slight); border:1px solid var(--border);
    padding:.8rem 1.1rem;
    transition:border-color .4s ease, color .4s ease, background .4s ease, transform .4s ease;
  }
  .cx-social svg { width:14px; height:14px; flex-shrink:0; }
  .cx-social:hover {
    border-color:rgba(201,164,92,.5); color:var(--white);
    background:rgba(201,164,92,.06); transform:translateY(-2px);
  }
  .cx-note {
    margin:2.2rem 0 0; padding-top:1.5rem; border-top:1px solid var(--border);
    font-family:'Jost',sans-serif; font-size:.8rem; font-weight:300;
    line-height:1.8; color:var(--sdim);
  }

  @media (max-width:980px) {
    .cx-grid { grid-template-columns:1fr; gap:3.4rem; }
  }
  @media (max-width:700px) {
    .cx-row { grid-template-columns:1fr; gap:0; }
    .cx-title { margin-bottom:1.8rem; }
    .cx-social { flex:1; justify-content:center; padding:.8rem .6rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cx-input, .cx-btn, .cx-ico, .cx-v, .cx-social { transition:none; }
    .cx-btn:hover, .cx-social:hover { transform:none; }
  }

  /* ══════════════════════════════════════
     MAP
     The embed stays light, the way the reference does — it gives the contact
     page the one bright moment the About page gets from the Studio panel.
     A warm filter pulls Google's blue-grey toward the ivory.
  ══════════════════════════════════════ */
  #map { position:relative; background:var(--black); }
  .mp-frame { position:relative; height:460px; overflow:hidden; }
  .mp-frame iframe {
    width:100%; height:100%; border:0; display:block;
    filter:grayscale(.3) sepia(.16) saturate(.9) contrast(.96) brightness(.98);
    /* An embedded map swallows the page scroll on a trackpad or a phone.
       It stays inert until someone actually asks for it. */
    pointer-events:none;
  }
  #map.is-live .mp-frame iframe { pointer-events:auto; }
  .mp-unlock {
    position:absolute; inset:0; z-index:2;
    background:transparent; border:0; cursor:pointer;
    font-family:'Jost',sans-serif; font-size:.6rem; font-weight:400;
    letter-spacing:.22em; text-transform:uppercase;
    color:transparent;
    transition:color .35s ease, background .35s ease;
  }
  .mp-unlock:hover, .mp-unlock:focus-visible {
    color:var(--ivory); background:rgba(7,7,10,.32);
  }
  #map.is-live .mp-unlock { display:none; }

  .mp-card {
    position:absolute; left:4rem; bottom:3rem; z-index:3;
    background:rgba(7,7,10,.93);
    border:1px solid rgba(201,164,92,.28);
    padding:1.7rem 2rem 1.6rem; max-width:360px;
    box-shadow:0 26px 60px rgba(0,0,0,.5);
  }
  .mp-eyebrow {
    font-family:'Jost',sans-serif; font-size:.56rem; font-weight:400;
    letter-spacing:.28em; text-transform:uppercase; color:var(--gold-star);
    margin:0 0 .9rem;
  }
  .mp-addr {
    font-family:'Cormorant Garamond',serif; font-weight:400;
    font-size:1.34rem; line-height:1.3; color:var(--white); margin:0;
  }
  .mp-sub {
    font-family:'Jost',sans-serif; font-size:.82rem; font-weight:300;
    color:var(--smid); margin:.35rem 0 0;
  }
  .mp-link {
    display:inline-flex; align-items:center; gap:.5rem; margin-top:1.2rem;
    font-family:'Jost',sans-serif; font-size:.58rem; font-weight:500;
    letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
    color:var(--gold-star);
    transition:color .35s ease, gap .35s ease;
  }
  .mp-link svg { width:13px; height:13px; }
  .mp-link:hover { color:#EBD9A8; gap:.75rem; }

  @media (max-width:900px) {
    .mp-frame { height:340px; }
    .mp-card {
      position:static; max-width:none; border-left:0; border-right:0;
      box-shadow:none; padding:1.6rem 1.6rem 1.5rem;
    }
  }
  @media (max-width:700px) {
    .mp-frame { height:280px; }
    .mp-card { padding:1.5rem 1.15rem 1.4rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mp-unlock, .mp-link { transition:none; }
  }

  /* ══════════════════════════════════════
     BOOKING STRIP
     A single line between the map and the footer: the copy on the left, one
     button on the right.
  ══════════════════════════════════════ */
  #book-strip {
    background:
      radial-gradient(ellipse 54% 90% at 78% 50%, rgba(201,164,92,.06) 0%, transparent 72%),
      var(--deep);
    padding:4.2rem 4rem;
    position:relative;
  }
  #book-strip::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.12) 24%, rgba(200,200,220,.12) 76%, transparent);
  }
  .bs-inner {
    max-width:1240px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:3rem; flex-wrap:wrap;
  }
  .bs-copy { flex:1 1 440px; min-width:0; }
  .bs-eyebrow {
    font-family:'Jost',sans-serif; font-size:.58rem; font-weight:400;
    letter-spacing:.3em; text-transform:uppercase; color:var(--gold-star);
    margin:0 0 .95rem;
  }
  .bs-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(1.7rem,3.2vw,2.45rem); line-height:1.14;
    color:var(--white); text-wrap:balance; margin:0 0 .75rem;
  }
  .bs-sub {
    font-family:'Jost',sans-serif; font-size:.86rem; font-weight:300;
    line-height:1.75; color:var(--sdim); margin:0; max-width:52ch;
  }
  .bs-btn {
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:.65rem;
    font-family:'Jost',sans-serif; font-size:.62rem; font-weight:500;
    letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
    color:var(--ivory); background:var(--gold);
    border:1px solid var(--gold-star);
    padding:1.2rem 2.4rem;
    position:relative; overflow:hidden;
    transition:background .4s ease, border-color .4s ease, transform .4s ease;
  }
  .bs-btn svg { width:14px; height:14px; flex-shrink:0; }
  .bs-btn::before {
    content:''; position:absolute; top:0; left:-80%; width:55%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
    transform:skewX(-18deg); transition:left .65s ease;
  }
  .bs-btn:hover { background:var(--gold-deep); border-color:var(--gold-deep); transform:translateY(-2px); }
  .bs-btn:hover::before { left:150%; }

  @media (max-width:900px) {
    #book-strip { padding:3rem 1.6rem; }
    .bs-inner { gap:2rem; }
    .bs-btn { width:100%; justify-content:center; }
  }
  @media (max-width:700px) {
    #book-strip { padding:2.6rem 1.15rem; }
    .bs-btn { padding:1.05rem 1rem; font-size:.57rem; letter-spacing:.16em; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bs-btn { transition:none; }
    .bs-btn:hover { transform:none; }
  }

  /* ══════════════════════════════════════
     VISIT OUR STUDIO
     Three columns of practical detail between the booking prompt and the
     footer — the things someone wants to know once they have decided.
  ══════════════════════════════════════ */
  #visit {
    background:
      radial-gradient(ellipse 54% 46% at 86% 6%, rgba(201,164,92,.05)  0%, transparent 70%),
      radial-gradient(ellipse 50% 44% at 10% 92%, rgba(170,178,215,.035) 0%, transparent 72%),
      var(--black);
    position:relative; overflow:hidden;
  }
  #visit::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.12) 24%, rgba(200,200,220,.12) 76%, transparent);
  }
  .vs-head { max-width:1240px; margin:0 auto 3.2rem; position:relative; z-index:1; }
  .vs-eyebrow {
    display:flex; align-items:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.2rem;
  }
  .vs-eyebrow::before {
    content:''; width:0; height:1px; background:var(--gold-star); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .vs-eyebrow.in::before { width:52px; }
  .vs-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(1.9rem,4vw,3rem); line-height:1.08;
    color:var(--white); margin:0;
  }
  .vs-title em {
    font-style:italic;
    background:linear-gradient(100deg,#C9A45C 0%,#EBD9A8 48%,#C9A45C 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }

  .vs-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:3.2rem;
    max-width:1240px; margin:0 auto; position:relative; z-index:1;
  }
  .vs-col { margin:0; }
  .vs-k {
    font-family:'Jost',sans-serif; font-size:.82rem; font-weight:500;
    letter-spacing:.04em; color:var(--white); margin:0 0 .9rem;
  }
  .vs-t {
    font-family:'Jost',sans-serif; font-size:.86rem; font-weight:300;
    line-height:1.9; color:var(--smid); margin:0;
  }

  @media (max-width:980px) {
    .vs-grid { grid-template-columns:1fr; gap:2.2rem; }
    .vs-head { margin-bottom:2.4rem; }
  }
  @media (max-width:700px) {
    .vs-eyebrow.in::before { width:32px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .vs-eyebrow::before { width:52px; transition:none; }
  }

  /* ══════════════════════════════════════
     CONTACT PAGE — the expensive pass
     Four fixes, all craft rather than copy: a type scale the headlines
     actually share, a map that is framed rather than dropped in, roomier
     fields, and a strip that breathes like its neighbours.
  ══════════════════════════════════════ */

  /* 1 ── One scale. Four headlines sat within 12px of each other (39.2, 44.8,
     48, 51.2) which reads as drift, not hierarchy. Now there is a section
     size and a deliberate step down for the strip. */
  .cx-title, .vs-title { font-size:clamp(1.95rem, 3.7vw, 2.85rem); }
  .bs-title { font-size:clamp(1.65rem, 2.9vw, 2.2rem); }
  /* large Cormorant sets loose by default; a touch of negative tracking is
     the difference between set and typed */
  .ct-title, .cx-title, .vs-title, .bs-title { letter-spacing:-.012em; }

  /* 2 ── The map was the only section on the page with no edge at all: zero
     padding, no hairline, butted hard against its neighbours. */
  #map::before, #map::after {
    content:''; position:absolute; left:0; right:0; height:1px; z-index:4;
    background:linear-gradient(90deg, transparent, rgba(201,164,92,.3) 22%, rgba(201,164,92,.3) 78%, transparent);
  }
  #map::before { top:0; }
  #map::after  { bottom:0; }
  /* and a little dark bleed at each edge, so the bright embed resolves into
     the page instead of being cut out of it */
  .mp-frame::after {
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(7,7,10,.55) 0%, transparent 14%,
                                       transparent 86%, rgba(7,7,10,.55) 100%);
  }

  /* 3 ── Fields. Cramped inputs are the fastest way to make a form feel
     like paperwork. */
  .cx-input { padding:1.15rem 1.3rem; }
  .cx-area { min-height:150px; }
  .cx-field { margin-bottom:1.5rem; }
  .cx-lbl { margin-bottom:.7rem; }
  .cx-btn { padding:1.3rem 2rem; }

  /* 4 ── The strip sat at 67px of padding between neighbours running 112px. */
  #book-strip { padding:5.6rem 4rem; }

  @media (max-width:900px) {
    #book-strip { padding:3.4rem 1.6rem; }
  }
  @media (max-width:700px) {
    .cx-input { padding:1rem 1.15rem; }
    #book-strip { padding:2.8rem 1.15rem; }
  }

  /* ──────────────────────────────────────────────────────────────
     VISIT OUR STUDIO — background atmosphere
     Rings opening out from one point, slowly, the way a pin pulses on a map.
     This section sits directly beneath the map, so the origin reads as the
     studio rather than as decoration — and nothing else on the site expands
     from a point, so it does not repeat another section.
  ────────────────────────────────────────────────────────────── */
  .vs-atmos { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  #visit .vs-head, #visit .vs-grid { position:relative; z-index:1; }

  /* the origin, off to one side so it never sits behind a column of text */
  .vs-bloom {
    position:absolute; left:18%; top:46%;
    width:40vw; height:40vw; max-width:560px; max-height:560px;
    margin:-20vw 0 0 -20vw; border-radius:50%;
    background:radial-gradient(circle, rgba(201,164,92,.09) 0%, rgba(201,164,92,.025) 44%, transparent 70%);
    opacity:0; transition:opacity 2s ease;
    animation:vsPulse 11s ease-in-out infinite;
  }
  #visit.live .vs-bloom { opacity:1; }
  @keyframes vsPulse {
    0%,100% { transform:scale(1); }
    50%     { transform:scale(1.16); }
  }

  .vs-ring {
    position:absolute; left:18%; top:46%;
    width:860px; height:860px; margin:-430px 0 0 -430px;
    border-radius:50%; border:1px solid rgba(201,164,92,.5);
    opacity:0; will-change:transform, opacity;
  }
  #visit.live .vs-ring { animation:vsRing 11.5s cubic-bezier(.3,0,.35,1) infinite; }
  /* These must match the specificity of the rule that sets the animation
     shorthand above — a plain .vs-ring-2 loses to #visit.live .vs-ring, whose
     shorthand resets animation-delay to 0 and puts all four rings in phase. */
  #visit.live .vs-ring-2 { animation-delay:-2.875s; }
  #visit.live .vs-ring-3 { animation-delay:-5.75s; }
  #visit.live .vs-ring-4 { animation-delay:-8.625s; }
  /* It opens from almost nothing and fades as it goes, so there is never a
     hard circle on screen — only the suggestion of one travelling outward. */
  @keyframes vsRing {
    0%   { transform:scale(.06); opacity:0; }
    12%  { opacity:.2; }
    100% { transform:scale(1); opacity:0; }
  }

  #visit:not(.live) .vs-ring,
  #visit:not(.live) .vs-bloom { animation-play-state:paused; }

  @media (max-width:700px) {
    .vs-ring { width:620px; height:620px; margin:-310px 0 0 -310px; }
    .vs-ring-3, .vs-ring-4 { display:none; }   /* two is plenty on a phone */
  }
  @media (prefers-reduced-motion: reduce) {
    .vs-bloom { animation:none; transition:none; }
    #visit.live .vs-ring { animation:none; }
    .vs-ring-1 { opacity:.1; transform:scale(.4); }
    .vs-ring-2 { opacity:.07; transform:scale(.7); }
    .vs-ring-3, .vs-ring-4 { opacity:0; }
  }

  /* ── Ready to Begin: the liquid-metal field ──────────────────
     The same shader that runs behind The Beginning. The strip is short and
     carries a gold button, so the scrim is held a little heavier than it is
     on a tall section of body copy.
  ──────────────────────────────────────────────────────────── */
  #book-strip { overflow:hidden; }
  #book-strip .bg2-shader { z-index:0; }
  .bs-scrim {
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg, rgba(13,13,18,.72) 0%, rgba(13,13,18,.6) 52%, rgba(13,13,18,.48) 100%);
  }
  .bs-inner { position:relative; z-index:2; }

  /* ──────────────────────────────────────────────────────────────
     SEND A MESSAGE — background atmosphere
     Conic sweeps rather than radial blooms: the gradient turns around a
     centre instead of drifting across, which is a motion nothing else on
     the site uses. Two of them, counter-rotating on unequal periods, so the
     colour where they cross keeps changing.
  ────────────────────────────────────────────────────────────── */
  #contact { overflow:hidden; }
  /* the shared `#contact > *` rule claims z-index 1 for every child, so the
     backdrop has to opt back down by name */
  #contact > .cx-atmos {
    position:absolute; inset:0; z-index:0;
    overflow:hidden; pointer-events:none;
    opacity:0; transition:opacity 1s ease;
  }
  #contact.live > .cx-atmos { opacity:1; }

  .cx-sweep {
    position:absolute; left:50%; top:50%;
    width:200%; height:200%; margin:-100% 0 0 -100%;
    will-change:transform;
  }
  /* first and last stop are both transparent, so the wheel closes on itself
     and there is no seam at 0deg */
  .cx-sweep-a {
    background:conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(201,164,92,.1)   58deg,
      transparent 132deg,
      rgba(170,178,215,.06) 205deg,
      transparent 278deg,
      rgba(214,170,110,.075) 332deg,
      transparent 360deg);
    animation:cxTurnA 112s linear infinite;
  }
  .cx-sweep-b {
    width:150%; height:150%; margin:-75% 0 0 -75%;
    background:conic-gradient(from 90deg at 50% 50%,
      transparent 0deg,
      rgba(235,217,168,.05) 70deg,
      transparent 150deg,
      rgba(201,164,92,.065) 240deg,
      transparent 318deg,
      transparent 360deg);
    animation:cxTurnB 157s linear infinite reverse;
  }
  @keyframes cxTurnA { from { transform:rotate(0deg); }   to { transform:rotate(360deg); } }
  @keyframes cxTurnB { from { transform:rotate(0deg); }   to { transform:rotate(360deg); } }

  .cx-veil {
    position:absolute; inset:0;
    background:radial-gradient(ellipse 86% 78% at 50% 50%, transparent 0%, rgba(7,7,10,.34) 76%, rgba(7,7,10,.64) 100%);
  }

  #contact:not(.live) .cx-sweep { animation-play-state:paused; }

  @media (max-width:700px) {
    .cx-sweep-b { display:none; }
  }
  @media (prefers-reduced-motion: reduce) {
    #contact > .cx-atmos { transition:none; }
    .cx-sweep { animation:none; }
    .cx-sweep-a { transform:rotate(28deg); }
    .cx-sweep-b { transform:rotate(-40deg); }
  }

  /* ══════════════════════════════════════
     CLOSING CTA — book your visit
     Sits at the foot of the service menu, directly above the signup band.
     Centred, quiet, and the only thing on screen asking for a decision.
  ══════════════════════════════════════ */
  #cta {
    position:relative; overflow:hidden;
    background:linear-gradient(180deg, #0A0A0E 0%, #121218 50%, #0A0A0E 100%);
    padding:7.5rem 2rem 7rem; text-align:center;
  }
  #cta::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(200,200,220,.12) 24%, rgba(200,200,220,.12) 76%, transparent);
  }
  .cta-atmos { position:absolute; inset:0; z-index:0; pointer-events:none; }
  .cta-pool {
    position:absolute; left:50%; top:50%;
    width:86%; height:150%; transform:translate(-50%,-50%);
    background:radial-gradient(ellipse 50% 42% at 50% 50%, rgba(201,164,92,.075) 0%, rgba(201,164,92,.02) 46%, transparent 72%);
    opacity:0; transition:opacity 2.4s ease; will-change:transform, opacity;
  }
  #cta.live .cta-pool { opacity:1; animation:ctaPool 17s ease-in-out infinite; }
  @keyframes ctaPool {
    0%,100% { transform:translate(-50%,-50%) scale(1); }
    50%     { transform:translate(-50%,-50%) scale(1.14); }
  }
  /* Three blooms drifting over the pool on mismatched cycles, plus one
     sweep crossing the whole band. Transform and opacity only. */
  .cta-bloom {
    position:absolute; border-radius:50%;
    opacity:0; transition:opacity 2.4s ease; will-change:transform;
  }
  #cta.live .cta-bloom { opacity:1; }
  .cta-bloom-a {
    width:46vw; height:46vw; max-width:680px; max-height:680px;
    left:-10%; top:-30%;
    background:radial-gradient(circle, rgba(201,164,92,.07) 0%, rgba(201,164,92,.02) 44%, transparent 70%);
    animation:ctaBloomA 23s ease-in-out infinite;
  }
  .cta-bloom-b {
    width:42vw; height:42vw; max-width:620px; max-height:620px;
    right:-12%; bottom:-34%;
    background:radial-gradient(circle, rgba(170,178,215,.05) 0%, rgba(170,178,215,.014) 46%, transparent 72%);
    animation:ctaBloomB 31s ease-in-out infinite;
  }
  .cta-bloom-c {
    width:38vw; height:38vw; max-width:560px; max-height:560px;
    left:42%; top:-22%;
    background:radial-gradient(circle, rgba(235,217,168,.04) 0%, rgba(201,164,92,.011) 50%, transparent 74%);
    animation:ctaBloomC 43s ease-in-out infinite;
  }
  .cta-bloom-d {
    width:34vw; height:34vw; max-width:500px; max-height:500px;
    left:6%; bottom:-28%;
    background:radial-gradient(circle, rgba(201,164,92,.05) 0%, rgba(201,164,92,.013) 48%, transparent 72%);
    animation:ctaBloomD 29s ease-in-out infinite;
  }
  .cta-bloom-e {
    width:30vw; height:30vw; max-width:440px; max-height:440px;
    right:4%; top:-18%;
    background:radial-gradient(circle, rgba(170,178,215,.045) 0%, rgba(170,178,215,.012) 50%, transparent 74%);
    animation:ctaBloomE 59s ease-in-out infinite;
  }
  @keyframes ctaBloomD {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    33%     { transform:translate3d(16%,-8%,0) scale(1.12); }
    66%     { transform:translate3d(6%,9%,0) scale(1.04); }
  }
  @keyframes ctaBloomE {
    0%,100% { transform:translate3d(0,0,0) scale(1.06); }
    40%     { transform:translate3d(-14%,11%,0) scale(1); }
    70%     { transform:translate3d(-5%,4%,0) scale(1.1); }
  }
  @keyframes ctaBloomA {
    0%,100% { transform:translate3d(0,0,0) scale(1); }
    50%     { transform:translate3d(14%,10%,0) scale(1.15); }
  }
  @keyframes ctaBloomB {
    0%,100% { transform:translate3d(0,0,0) scale(1.09); }
    50%     { transform:translate3d(-12%,-9%,0) scale(1); }
  }
  @keyframes ctaBloomC {
    0%,100% { transform:translate3d(0,0,0) scale(1.05); }
    50%     { transform:translate3d(-9%,13%,0) scale(1); }
  }
  .cta-sweep {
    position:absolute; top:-70%; left:0; height:240%; width:38%;
    opacity:0; will-change:transform;
    background:linear-gradient(90deg, transparent 0%,
      rgba(201,164,92,.04) 32%, rgba(235,217,168,.065) 50%,
      rgba(201,164,92,.04) 68%, transparent 100%);
    animation:ctaSweep 24s linear infinite;
  }
  #cta.live .cta-sweep { opacity:1; transition:opacity 2.4s ease; }
  @keyframes ctaSweep {
    0%   { transform:rotate(10deg) translate3d(-190%,0,0); opacity:0; }
    18%  { opacity:1; }
    82%  { opacity:1; }
    100% { transform:rotate(10deg) translate3d(340%,0,0); opacity:0; }
  }
  .cta-sweep-b {
    position:absolute; top:-70%; right:0; left:auto; height:240%; width:30%;
    opacity:0; will-change:transform;
    background:linear-gradient(90deg, transparent 0%,
      rgba(170,178,215,.035) 34%, rgba(214,214,236,.055) 50%,
      rgba(170,178,215,.035) 66%, transparent 100%);
    animation:ctaSweepB 33s linear infinite;
  }
  #cta.live .cta-sweep-b { opacity:1; transition:opacity 2.4s ease; }
  @keyframes ctaSweepB {
    0%   { transform:rotate(-14deg) translate3d(220%,0,0); opacity:0; }
    20%  { opacity:1; }
    80%  { opacity:1; }
    100% { transform:rotate(-14deg) translate3d(-320%,0,0); opacity:0; }
  }
  .cta-veil {
    position:absolute; inset:0;
    background:radial-gradient(ellipse 78% 68% at 50% 50%, transparent 0%, rgba(7,7,10,.3) 74%, rgba(7,7,10,.62) 100%);
  }
  .cta-inner { position:relative; z-index:1; max-width:760px; margin:0 auto; }

  .cta-eyebrow {
    display:flex; align-items:center; justify-content:center; gap:.9rem;
    font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.3em;
    text-transform:uppercase; color:var(--gold-star); margin-bottom:1.4rem;
  }
  .cta-eyebrow::before, .cta-eyebrow::after {
    content:''; width:0; height:1px; background:var(--gold-star); flex-shrink:0;
    transition:width 1s cubic-bezier(.22,1,.36,1) .15s;
  }
  .cta-eyebrow.in::before, .cta-eyebrow.in::after { width:46px; }

  .cta-title {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(2.3rem,5vw,3.9rem); line-height:1.08;
    color:var(--white); margin-bottom:1.5rem;
  }
  .cta-title em { font-style:normal; color:var(--gold-star); }

  .cta-lead {
    font-family:'Jost',sans-serif; font-size:.95rem; font-weight:300;
    line-height:1.9; color:var(--smid); max-width:58ch; margin:0 auto 2.6rem;
  }

  .cta-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; }
  .cta-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
    padding:1.05rem 2.1rem; text-decoration:none;
    font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.2em;
    text-transform:uppercase; transition:background .35s ease, color .35s ease,
                                         border-color .35s ease, transform .35s ease;
  }
  .cta-btn svg { width:16px; height:16px; transition:transform .35s ease; }
  .cta-btn-solid {
    background:var(--gold-star); color:#14140F; border:1px solid var(--gold-star);
  }
  .cta-btn-solid:hover { background:#E0C286; border-color:#E0C286; transform:translateY(-2px); }
  .cta-btn-solid:hover svg { transform:translateX(4px); }
  .cta-btn-ghost {
    background:transparent; color:var(--white);
    border:1px solid rgba(220,220,235,.26);
  }
  .cta-btn-ghost:hover { border-color:var(--gold-star); color:var(--gold-star); transform:translateY(-2px); }
  .cta-btn:focus-visible { outline:1px solid var(--gold); outline-offset:3px; }

  .cta-trust {
    list-style:none; margin:2.8rem 0 0; padding:0;
    display:flex; justify-content:center; flex-wrap:wrap; gap:1.1rem 2.2rem;
    font-family:'Jost',sans-serif; font-size:.74rem; font-weight:300;
    letter-spacing:.06em; color:var(--sdim);
  }
  .cta-trust li { display:flex; align-items:center; gap:.55rem; }
  .cta-trust li::before {
    content:''; width:4px; height:4px; border-radius:50%;
    background:var(--gold-star); flex-shrink:0;
  }

  #cta:not(.live) .cta-pool,
  #cta:not(.live) .cta-bloom,
  #cta:not(.live) .cta-sweep,
  #cta:not(.live) .cta-sweep-b { animation-play-state:paused; }

  @media (max-width:700px) {
    #cta { padding:4.6rem 1.15rem 4.2rem; }
    .cta-eyebrow.in::before, .cta-eyebrow.in::after { width:28px; }
    .cta-lead { font-size:.9rem; }
    .cta-btn { width:100%; }
    .cta-trust { gap:.8rem 1.4rem; font-size:.7rem; }
    .cta-bloom-c, .cta-bloom-e { display:none; }
    .cta-sweep-b { display:none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cta-pool, .cta-bloom, .cta-sweep, .cta-sweep-b { animation:none !important; transition:none; }
    .cta-sweep-b { transform:rotate(-14deg) translate3d(-60%,0,0); }
    .cta-sweep { transform:rotate(10deg) translate3d(55%,0,0); }
    .cta-eyebrow::before, .cta-eyebrow::after { width:46px; transition:none; }
    .cta-btn, .cta-btn svg { transition:none; }
  }

  /* ══════════════════════════════════════
     EDITORIAL ROWS — one component, used by the product lines and by
     the machines. A portrait image on one side, a short piece on the
     other, sides alternating down the page so the eye keeps moving.
  ══════════════════════════════════════ */
  .ed-list {
    position:relative; z-index:1;
    max-width:1140px; margin:3.6rem auto 0;
    display:grid; gap:4.6rem;
  }
  .ed-row {
    display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
    gap:3.4rem; align-items:center;
  }
  /* The source images are portrait 2:3. Left unchecked a full column of that
     is about 750px tall per row, which turns six brands into a very long
     scroll — so the picture is capped and pushed against the text. */
  .ed-media { max-width:392px; width:100%; justify-self:end; }
  .ed-row:nth-child(even) .ed-media { order:2; justify-self:start; }

  .ed-frame {
    position:relative; overflow:hidden;
    border:1px solid var(--border);
    transition:border-color 1.2s ease;
  }
  .ed-frame::after {            /* takes the glare off without greying it */
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(7,7,10,0) 0%, rgba(7,7,10,.12) 100%);
  }
  /* No resting scale: any fractional scale resamples the photograph every
     frame it is composited, which is exactly how a sharp image goes soft. */
  .ed-frame img {
    display:block; width:100%; height:auto;
    transition:transform 1.4s cubic-bezier(.22,1,.36,1);
  }
  .ed-row:hover .ed-frame img { transform:scale(1.035); }
  .ed-row.is-lit .ed-frame { border-color:rgba(201,164,92,.46); }

  .ed-num {
    display:block; font-family:'Jost',sans-serif; font-size:.64rem;
    letter-spacing:.3em; color:var(--gold-star); margin-bottom:1.1rem;
  }
  .ed-name {
    font-family:'Cormorant Garamond',serif; font-weight:300;
    font-size:clamp(1.7rem,2.9vw,2.3rem); line-height:1.15;
    color:var(--white); margin:0 0 .5rem;
  }
  .ed-kicker {
    font-family:'Jost',sans-serif; font-size:.64rem; font-weight:300;
    letter-spacing:.26em; text-transform:uppercase; color:var(--sdim);
    margin:0 0 1.5rem; padding-bottom:1.4rem; position:relative;
  }
  .ed-kicker::after {
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:linear-gradient(90deg, rgba(201,164,92,.55), transparent);
    transition:width 1.1s cubic-bezier(.22,1,.36,1) .25s;
  }
  .ed-row.in .ed-kicker::after { width:120px; }
  .ed-text {
    font-family:'Jost',sans-serif; font-size:.93rem; font-weight:300;
    line-height:1.95; color:var(--smid); margin:0; max-width:52ch;
  }

  @media (max-width:860px) {
    .ed-list { gap:3.4rem; margin-top:2.8rem; }
    .ed-row { grid-template-columns:1fr; gap:1.6rem; }
    .ed-row:nth-child(even) .ed-media { order:0; justify-self:start; }
    .ed-media { max-width:360px; justify-self:start; }
    .ed-text { font-size:.9rem; line-height:1.9; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ed-frame img { transform:none; transition:none; }
    .ed-row:hover .ed-frame img { transform:none; }
    .ed-kicker::after { width:120px; transition:none; }
  }

  /* ── 404 ─────────────────────────────────────────────────────────── */
  #cta.nf { min-height:68vh; display:flex; align-items:center; }
  .cta-trust a {
    color:inherit; text-decoration:none;
    border-bottom:1px solid transparent; transition:color .3s ease, border-color .3s ease;
  }
  .cta-trust a:hover { color:var(--gold-star); border-bottom-color:rgba(201,164,92,.5); }
  .cta-trust a:focus-visible { outline:1px solid var(--gold); outline-offset:3px; }

  /* ── legal pages: English only ────────────────────────────────────
     The policies are not translated: a mistranslated cancellation or
     liability clause is worse than an English one. The note appears only
     when the site is switched to Russian, and is left out of the sweep
     (translate="no") because it is already in Russian. */
  .lg-en-only { display:none; }
  html[lang="ru"] .lg-en-only {
    display:block;
    margin:0 0 2rem; padding:.95rem 1.15rem;
    border:1px solid rgba(201,164,92,.28);
    background:rgba(201,164,92,.055);
    font-family:'Jost',sans-serif; font-size:.84rem; font-weight:300;
    line-height:1.7; color:var(--smid);
  }
  html[lang="ru"] .lg-en-only a { color:var(--gold-star); text-decoration:none;
                                  border-bottom:1px solid rgba(201,164,92,.45); }

  /* Language toggle: 32x24 is fine for a mouse and small for a thumb.
     The padding grows the hit area on touch without changing the look. */
  @media (hover: none) and (pointer: coarse) {
    .tb-lang button, .tb-lang a { min-height:38px; padding-left:.85rem; padding-right:.85rem; }
  }

  /* ══════════════════════════════════════
     MOBILE PASS
     Measured on a 375×812 phone: the fixed chrome was 131px — a sixth of
     the screen spent on a bar — and the hero's first line was landing
     underneath it. These are phone-specific decisions, not shrunk
     desktop ones.
  ══════════════════════════════════════ */
  @media (max-width:700px) {
    /* The email address leaves the top bar: it is long, it forced the bar
       onto two rows, and it is already in the footer and on the contact
       page. The phone number stays, because that is the one people tap. */
    .tb-mail { display:none; }
    /* The language buttons are the tallest thing in the bar now (38px, kept
       that way so they are comfortable to tap), so the bar's own padding
       comes in rather than stacking more height on top of them. */
    #topbar { padding:.12rem 1.25rem; }
    .tb-phone { font-size:.68rem; padding:.34rem 0; }
    /* 14.4px above and below a 44px button is 29px of air around a bar that
       never leaves the screen. */
    #nav { padding:.62rem 1.25rem; }
    #nav.sc { padding:.5rem 1.25rem; }

    /* The hero block centres itself in the viewport, so it has to be told
       about the bar sitting over it or its first line hides behind it. */
    .hero-content { padding-top: calc(var(--hdr-h, 96px) + .75rem); }

    /* 14.4–14.9px reads fine on a laptop and is a squint on a phone held
       at arm's length. */
    .ah-text        { font-size:.96rem; line-height:1.82; }
    .ba-info-desc   { font-size:.94rem; line-height:1.78; }
    .menu-desc      { font-size:.9rem;  line-height:1.72; }
    .ed-text        { font-size:.93rem; line-height:1.85; }
    .tm-bio         { font-size:.9rem;  line-height:1.8; }

    /* Once you are past the hero, the utility bar slides away and only the
       nav stays — 65px of chrome instead of 110. The phone number is still
       a tap away in the footer and on the contact page, and Book Now never
       leaves the nav. Scrolling back to the top brings the bar back. */
    #topbar { transition:margin-top .4s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
    header.sc #topbar { margin-top:calc(-1 * var(--tb-h, 45px)); opacity:0; pointer-events:none; }

    /* iOS Safari zooms the whole page in whenever you tap a field whose
       text is under 16px, then leaves you pinching back out. Every control
       on the contact form was 14.08px, so every tap jumped the page. 16px
       is the threshold, not a preference. */
    .cx-form input, .cx-form select, .cx-form textarea,
    .su-input { font-size:16px; }

    /* 18.4px of gutter put the text almost on the bezel. */
    .sec { padding:3.6rem 1.25rem; }
  }

  @media (max-width:700px) and (prefers-reduced-motion: reduce) {
    #topbar { transition:none; }
  }

  /* A line of context inside a menu panel — the men's price note and the
     peels that are chosen at consultation rather than picked off a list. */
  .menu-note {
    font-family:'Jost',sans-serif; font-size:.84rem; font-weight:300;
    line-height:1.75; color:var(--sdim);
    margin:0 0 1.6rem; padding:.9rem 1.1rem;
    border-left:1px solid rgba(201,164,92,.38);
    background:rgba(201,164,92,.04);
  }
  .menu-row + .menu-note { margin-top:1.4rem; }
  @media (max-width:700px) {
    .menu-note { font-size:.82rem; padding:.8rem .95rem; margin-bottom:1.3rem; }
  }