@import url('fonts.css?v=2');
@import url('colors.css?v=2');
@import url('typography.css?v=2');
@import url('spacing.css?v=2');
@import url('shape.css?v=2');

/* ============================= reset & base ============================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
button { font: inherit; background: none; border: none; padding: 0; color: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--copper-500); color: var(--espresso-900); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--copper-500); color: var(--espresso-900);
  padding: 12px 20px; font-family: var(--font-sans); font-size: var(--text-label);
  letter-spacing: var(--tracking-nav); text-transform: uppercase;
  transition: top var(--duration-base) var(--ease-soft);
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: none; }
a:focus-visible, button:focus-visible {
  box-shadow: 0 2px 0 0 var(--copper-500);
}

/* ============================= reveal-on-scroll ============================= */
/* elements are visible by default; only hidden once .js confirms the observer will run */
.reveal { transition: opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft); transition-delay: calc(var(--stagger-i, 0) * 90ms); }
.js .reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ============================= buttons ============================= */
.btn {
  font-family: var(--font-sans); font-size: var(--text-eyebrow); font-weight: var(--weight-regular);
  letter-spacing: .26em; text-transform: uppercase; display: inline-block; text-align: center;
  cursor: pointer; text-decoration: none; border: var(--border-thin) solid transparent; border-radius: var(--radius-0);
  transition: background var(--duration-base) var(--ease-soft), color var(--duration-base) var(--ease-soft),
              border-color var(--duration-base) var(--ease-soft), opacity var(--duration-base) var(--ease-soft);
  padding: 16px 34px;
}
.btn-solid { background: var(--copper-500); color: var(--espresso-900); }
.btn-solid:hover { background: var(--copper-400); }
.btn-outline { background: transparent; color: var(--copper-500); border-color: var(--copper-500); border-radius: var(--radius-pill); padding: 11px 22px; }
.btn-outline:hover { background: var(--copper-500); color: var(--espresso-900); }
.btn-outline-light { background: transparent; color: var(--text-on-light); border-color: var(--border-hairline-light-strong); border-radius: var(--radius-pill); }
.btn-outline-light:hover { border-color: var(--copper-700); color: var(--copper-700); }

.eyebrow {
  font-family: var(--font-sans); font-size: var(--text-eyebrow); font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--copper-500); margin: 0;
}
.eyebrow.on-light { color: var(--copper-700); }
.eyebrow.muted { color: var(--taupe-400); }

.section-heading { text-align: center; }
.section-heading h2, .section-heading h1 {
  font-family: var(--font-display); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display);
  text-transform: uppercase; font-size: var(--text-display-s); line-height: 1.16; color: var(--text-primary); margin: 0;
}
.section-heading .eyebrow { margin: 0 0 12px; }
.section-heading.on-light h2, .section-heading.on-light h1 { color: var(--text-on-light); }
.section-heading .services-menu-link { margin-top: 16px; }

/* ============================= logotype ============================= */
.logotype { line-height: 1; text-align: center; }
.logotype .a { font-family: var(--font-display); font-size: 19px; letter-spacing: var(--tracking-logo); color: var(--taupe-300); }
.logotype .b { font-family: var(--font-script); font-size: 22px; color: var(--copper-500); margin-top: 2px; }
.logotype.on-light .a { color: var(--espresso-800); }
.logotype.on-light .b { color: var(--copper-700); }
.logotype.left { text-align: left; }

/* ============================= header ============================= */
.site-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 24px var(--section-x); background: var(--surface-page);
  border-bottom: var(--border-thin) solid var(--border-hairline);
  position: sticky; top: 0; z-index: 100;
}
.site-nav { display: flex; align-items: center; gap: 32px; justify-self: start; padding-right: 40px; }
.site-nav a {
  display: inline-flex; align-items: center; height: 18px; margin: 0; padding: 0; line-height: 1; box-sizing: border-box;
  font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: var(--tracking-nav);
  text-transform: uppercase; color: var(--taupe-400); transition: color var(--duration-fast) var(--ease-soft);
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--copper-500); }
.header-logo { justify-self: center; }
.header-book {
  justify-self: end; flex-shrink: 0;
  background: linear-gradient(160deg, var(--copper-300) 0%, var(--copper-500) 55%, var(--copper-600) 100%);
  border-color: var(--copper-400); color: var(--espresso-900);
  box-shadow: 0 4px 14px rgba(192, 113, 63, .4), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.header-book:hover {
  background: linear-gradient(160deg, var(--copper-400) 0%, var(--copper-600) 55%, var(--copper-700) 100%);
  border-color: var(--copper-500);
  box-shadow: 0 6px 20px rgba(192, 113, 63, .5), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.nav-toggle { display: none; }
.nav-scrim {
  position: fixed; inset: 0; background: rgba(46,36,30,.6); opacity: 0; pointer-events: none; z-index: 90;
  transition: opacity var(--duration-slow) var(--ease-soft);
}

/* ---- about dropdown ---- */
.nav-item-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-toggle {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 6px; height: 18px; margin: 0; padding: 0; line-height: 1;
  box-sizing: border-box; font: inherit;
  font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: var(--tracking-nav);
  text-transform: uppercase; color: var(--taupe-400); transition: color var(--duration-fast) var(--ease-soft);
}
.nav-dropdown-toggle:hover, .nav-dropdown-toggle:focus-visible,
.nav-item-dropdown.is-open .nav-dropdown-toggle { color: var(--copper-500); }
.nav-dropdown-caret {
  flex: none; width: 6px; height: 6px; margin-top: -2px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform var(--duration-base) var(--ease-soft);
}
.nav-item-dropdown.is-open .nav-dropdown-caret { transform: rotate(225deg); margin-top: 2px; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%);
  min-width: 168px; background: var(--espresso-800); border: var(--border-thin) solid var(--border-hairline);
  padding: 8px 0; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-soft), visibility var(--duration-base) var(--ease-soft);
  z-index: 110;
}
.nav-dropdown-menu::before {
  content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px;
}
.nav-item-dropdown.is-open .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; }
.nav-dropdown-menu a { padding: 10px 22px; white-space: nowrap; height: auto; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible { color: var(--copper-500); background: rgba(255,255,255,.04); }

/* ---- header actions / language switcher ---- */
.header-actions { justify-self: end; display: flex; align-items: center; gap: 18px; }
.lang-switch { position: relative; }
.lang-switch-toggle {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 6px; height: 18px; margin: 0; padding: 0; line-height: 1;
  box-sizing: border-box; font: inherit;
  font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: var(--tracking-nav);
  text-transform: uppercase; color: var(--taupe-400); transition: color var(--duration-fast) var(--ease-soft);
}
.lang-switch-toggle:hover, .lang-switch-toggle:focus-visible,
.lang-switch.is-open .lang-switch-toggle { color: var(--copper-500); }
.lang-icon { width: 15px; height: 15px; flex: none; }
.lang-switch-menu {
  position: absolute; top: calc(100% + 18px); right: 0;
  min-width: 156px; background: var(--espresso-800); border: var(--border-thin) solid var(--border-hairline);
  padding: 8px 0; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-soft), visibility var(--duration-base) var(--ease-soft);
  z-index: 110;
}
.lang-switch-menu::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
.lang-switch.is-open .lang-switch-menu { opacity: 1; visibility: visible; pointer-events: auto; }
.lang-switch-menu button {
  padding: 10px 22px; white-space: nowrap; height: auto; text-align: left;
  font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: var(--tracking-nav);
  color: var(--taupe-400); transition: color var(--duration-fast) var(--ease-soft), background var(--duration-fast) var(--ease-soft);
}
.lang-switch-menu button:hover, .lang-switch-menu button:focus-visible { color: var(--copper-500); background: rgba(255,255,255,.04); }
.lang-switch-menu button[aria-current="true"] { color: var(--copper-500); }

.nav-insta-link { gap: 8px; }
.nav-insta-link svg { width: 14px; height: 14px; flex: none; }

.lang-switch-mobile { display: none; }

@media (max-width: 860px) {
  .site-nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); height: 100vh; z-index: 95;
    background: var(--espresso-800); flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 100px 40px 40px; transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-soft);
    border-left: var(--border-thin) solid var(--border-hairline);
    overflow-y: auto;
  }
  .site-nav a { height: auto; font-size: var(--text-label); padding: 14px 0; width: 100%; border-bottom: var(--border-thin) solid var(--border-hairline); }
  .nav-item-dropdown { width: 100%; display: block; }
  .nav-dropdown-toggle { height: auto; width: 100%; justify-content: space-between; padding: 14px 0; border-bottom: var(--border-thin) solid var(--border-hairline); }
  .nav-dropdown-menu {
    position: static; transform: none; background: transparent; border: none; padding: 0 0 0 18px;
    max-height: 0; overflow: hidden; opacity: 1; visibility: visible; pointer-events: auto;
    transition: max-height var(--duration-base) var(--ease-soft);
  }
  .nav-dropdown-menu::before { content: none; }
  .nav-item-dropdown.is-open .nav-dropdown-menu { max-height: 220px; }
  .nav-dropdown-menu a { height: auto; padding: 12px 0; border-bottom: none; width: auto; }
  .nav-open .site-nav { transform: translateX(0); }
  .lang-switch { display: none; }
  .lang-switch-mobile {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 16px 0 14px;
  }
  .lang-switch-mobile-label {
    font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: var(--tracking-nav);
    text-transform: uppercase; color: var(--taupe-400);
  }
  .lang-switch-mobile-options { display: flex; gap: 8px; }
  .lang-switch-mobile-options button {
    padding: 6px 13px; border: var(--border-thin) solid var(--border-hairline-strong);
    font-family: var(--font-sans); font-size: 11px; letter-spacing: .1em;
    color: var(--taupe-400); transition: color var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft);
  }
  .lang-switch-mobile-options button[aria-current="true"] { color: var(--copper-500); border-color: var(--copper-500); }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 32px; height: 24px; z-index: 110;
  }
  .nav-toggle span { display: block; height: 1px; width: 100%; background: var(--taupe-300); transition: transform var(--duration-base) var(--ease-soft), opacity var(--duration-base) var(--ease-soft); }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
}

@media (max-width: 640px) {
  /* the 3-column header (menu / logo / book button) is fixed-width by design;
     below ~640px it doesn't have room for all three at full size, so the
     logotype and book button wrap onto multiple lines. shrink both just
     enough to keep everything on one line at phone widths. */
  .site-header { padding: 16px 20px; }
  .header-logo .logotype .a { font-size: 14px; letter-spacing: .2em; white-space: nowrap; }
  .header-logo .logotype .b { font-size: 16px; white-space: nowrap; }
  .header-book { padding: 9px 14px; font-size: 9.5px; letter-spacing: .16em; white-space: nowrap; }
}

/* ============================= hero ============================= */
.hero { background: var(--surface-page); }
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  max-width: 1600px; margin: 0 auto;
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 600px; margin: 0 auto;
  padding: 48px clamp(32px, 5vw, 64px);
  opacity: 0; animation: hero-copy-in 1100ms var(--ease-soft) 300ms forwards;
}
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-copy .eyebrow { margin: 0; }
.hero-copy h1 {
  font-family: var(--font-serif); font-weight: var(--weight-light);
  font-size: clamp(48px, 7vw, 92px); line-height: 1.08;
  letter-spacing: var(--tracking-hero); color: var(--text-primary); margin: 18px 0 0;
}
.hero-copy h1 em {
  display: block; font-family: var(--font-script); font-style: normal;
  font-size: clamp(22px, 3.4vw, 44px); color: var(--copper-500); white-space: nowrap; margin-top: 8px;
}
.hero-copy .btn { margin-top: 36px; }

.hero-media {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 161 / 180; background: var(--espresso-600);
  /* explicit width, not just a stretched grid item — Safari fails to give this
     box a definite size from grid stretch + aspect-ratio alone since its only
     children are position:absolute (contributing no intrinsic size of their
     own), collapsing it to 0x0 and hiding the whole hero photo carousel */
  width: 100%;
}
.hero-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 140px; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(20, 14, 10, 0.38), rgba(20, 14, 10, 0));
}

.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  clip-path: polygon(0% 0%, -22% 0%, -44% 100%, 0% 100%);
  animation: hero-slide-fade 24s steps(1, end) infinite, hero-slide-wipe 24s cubic-bezier(.77, 0, .18, 1) infinite;
}
.hero-slide img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%;
  transform: translateX(4%);
  animation: hero-slide-parallax 24s cubic-bezier(.77, 0, .18, 1) infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s, 0s; }
.hero-slide:nth-child(1) img { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 6s, 6s; }
.hero-slide:nth-child(2) img { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 12s, 12s; }
.hero-slide:nth-child(3) img { animation-delay: 12s; }
.hero-slide:nth-child(4) { animation-delay: 18s, 18s; }
.hero-slide:nth-child(4) img { animation-delay: 18s; }

/* opacity only ever needs to be "on" or "off" — the clip-path wipe does the
   actual reveal/hide motion, so this just toggles visibility at the right
   instants (steps(1,end) avoids it fighting the wipe with its own fade). */
@keyframes hero-slide-fade {
  0% { opacity: 0; }
  0.5% { opacity: 1; }
  25% { opacity: 1; }
  25.5% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes hero-slide-wipe {
  0% { clip-path: polygon(0% 0%, -22% 0%, -44% 100%, 0% 100%); }
  9% { clip-path: polygon(0% 0%, 122% 0%, 100% 100%, 0% 100%); }
  25% { clip-path: polygon(0% 0%, 122% 0%, 100% 100%, 0% 100%); }
  25.001% { clip-path: polygon(0% 0%, -22% 0%, -44% 100%, 0% 100%); }
  100% { clip-path: polygon(0% 0%, -22% 0%, -44% 100%, 0% 100%); }
}
@keyframes hero-slide-parallax {
  0% { transform: translateX(4%); }
  9% { transform: translateX(0%); }
  100% { transform: translateX(0%); }
}

/* a diagonal copper glint that races across right as each slide wipes in —
   timed to the same 24s/6s-per-slide beat as .hero-slide, just with no
   per-slide delay needed since it fires at the start of every 6s window
   regardless of which slide is currently wiping in. */
.hero-shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(120deg, transparent 42%, rgba(255, 255, 255, 0.9) 49%, var(--copper-500) 53%, transparent 60%);
  background-size: 320% 320%;
  mix-blend-mode: overlay;
  opacity: 0;
  animation: hero-shine-sweep 6s cubic-bezier(.77, 0, .18, 1) infinite;
}
@keyframes hero-shine-sweep {
  0% { opacity: 0; background-position: 105% -10%; }
  4% { opacity: 1; }
  15% { opacity: 0; background-position: -25% 110%; }
  100% { opacity: 0; }
}

.hero-dots {
  position: absolute; left: 50%; bottom: 26px; z-index: 4; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
}
.hero-dots span {
  display: block; width: 6px; height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.5);
  animation: hero-dot-pulse 24s cubic-bezier(.77, 0, .18, 1) infinite;
}
.hero-dots span:nth-child(1) { animation-delay: 0s; }
.hero-dots span:nth-child(2) { animation-delay: 6s; }
.hero-dots span:nth-child(3) { animation-delay: 12s; }
.hero-dots span:nth-child(4) { animation-delay: 18s; }
@keyframes hero-dot-pulse {
  0%, 100% { width: 6px; background: rgba(255, 255, 255, 0.5); }
  3%, 21% { width: 22px; background: var(--copper-500); }
  25% { width: 6px; background: rgba(255, 255, 255, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide img, .hero-shine, .hero-dots span { animation: none; }
  .hero-slide:nth-child(1) { opacity: 1; clip-path: none; }
  .hero-slide:nth-child(1) img { transform: none; }
  .hero-dots span:nth-child(1) { width: 22px; background: var(--copper-500); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { order: 1; max-width: none; margin: 0; padding: 48px 24px 40px; align-items: center; text-align: center; }
  .hero-media { order: 2; aspect-ratio: 161 / 180; }
}

/* ============================= experience ============================= */
.experience-section { background: var(--surface-light); }
.ticker {
  overflow: hidden; border-top: var(--border-thin) solid var(--border-hairline); border-bottom: var(--border-thin) solid var(--border-hairline);
  padding: 24px 0; white-space: nowrap; background: var(--espresso-600);
}
.ticker-track { display: inline-flex; align-items: center; gap: 28px; animation: ticker-scroll 160s linear infinite; }
.ticker-track span {
  font-family: var(--font-sans); font-size: clamp(14px, 1vw + 9px, 20px); letter-spacing: var(--tracking-nav);
  text-transform: uppercase; color: var(--taupe-300);
}
.ticker-track .dot { color: var(--copper-500); font-size: 13px; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

.experience-content { max-width: var(--frame-width); margin: 0 auto; padding: calc(var(--section-y) + 20px) var(--section-x); text-align: center; }
.experience-content h2 {
  font-family: var(--font-display); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display);
  text-transform: uppercase; font-size: var(--text-display-s); color: var(--text-on-light); margin: 0;
}
.experience-content p {
  font-family: var(--font-sans); font-weight: var(--weight-light); font-size: clamp(18px, 1vw + 11px, 20px);
  line-height: 1.55; color: var(--text-muted-on-light); margin: 28px auto 0;
}
.experience-content .btn { margin-top: 28px; }

@media (max-width: 640px) {
  .experience-content { padding: 40px 24px; }
  .experience-content p { margin-top: 16px; }
  .ticker-track span { font-size: 13px; }
  .ticker-track .dot { font-size: 11px; }
  .ticker-track { gap: 20px; }
}

/* ============================= stat band ============================= */
.stat-band {
  display: flex; background: var(--surface-band); color: var(--text-on-light);
  border-top: var(--border-thin) solid var(--copper-700); border-bottom: var(--border-thin) solid var(--copper-700);
}
.stat {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 44px 18px; border-right: var(--border-thin) solid var(--border-hairline-light-strong); text-align: center;
}
.stat:last-child { border-right: none; }
.stat strong { display: block; font-family: var(--font-serif); font-size: var(--text-display-s); font-weight: var(--weight-regular); color: var(--copper-700); }
.stat span { font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: var(--tracking-nav); text-transform: uppercase; color: var(--taupe-600); }

.stat-feature {
  position: relative; min-height: clamp(220px, 18vw, 320px); justify-content: flex-end;
  text-decoration: none; transition: opacity var(--duration-base) var(--ease-soft);
}
.stat-feature-imgs { position: absolute; inset: 0; display: flex; gap: 2px; background: var(--surface-band); }
.stat-feature-imgs img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; object-position: center; }
.stat-feature-imgs img.pos-top { object-position: center 5%; }
.stat-feature-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(46,36,30,.78), rgba(46,36,30,0) 65%);
}
.stat-feature span {
  position: relative; font-family: var(--font-display); font-size: var(--text-heading); font-weight: var(--weight-regular);
  letter-spacing: .06em; text-transform: uppercase; color: var(--cream-50); line-height: 1.55;
  background: rgba(46,36,30,.7); padding: .1em .45em; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.stat-feature:hover, .stat-feature:focus-visible { opacity: .88; }

@media (max-width: 720px) {
  .stat-band { flex-wrap: wrap; }
  .stat { flex: 0 0 50%; padding: 26px 12px; }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: var(--border-thin) solid var(--border-hairline-light-strong); }
}

/* ============================= services ============================= */
.services-section { padding: var(--section-y-tight) var(--section-x); text-align: center; background: var(--espresso-600); color: var(--text-primary); }
.services-section .section-heading { margin-bottom: 36px; }
.services-section .section-heading h2 { color: var(--text-primary); }
.mosaic {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: repeat(4, clamp(160px, 11vw, 215px));
  gap: var(--grid-gap); max-width: var(--frame-width); margin: 0 auto; text-align: left;
}
.tile { grid-column: 1; grid-row: 1 / span 2; }
.tile:nth-child(2) { grid-column: 2 / span 2; grid-row: 1; }
.tile:nth-child(3) { grid-column: 2; grid-row: 2 / span 2; }
.tile:nth-child(4) { grid-column: 3; grid-row: 2 / span 2; }
.tile:nth-child(5) { grid-column: 2; grid-row: 4; }
.tile:nth-child(6) { grid-column: 3; grid-row: 4; }
.tile:nth-child(7) { grid-column: 1; grid-row: 3 / span 2; }

.service-tile { position: relative; overflow: hidden; display: block; height: 100%; }
.service-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-soft); }
.service-tile:hover img, .service-tile:focus-visible img { transform: scale(1.03); }
.service-tile .ov {
  position: absolute; inset: 0; background: var(--scrim-tile); display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; padding: 0 18px 26px; text-align: center;
}
.service-tile h3 {
  font-family: var(--font-display); font-size: var(--text-heading); font-weight: var(--weight-regular);
  letter-spacing: .1em; text-transform: uppercase; color: var(--cream-50); margin: 0;
}
.service-tile .price { font-family: var(--font-sans); font-size: var(--text-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase; color: var(--copper-400); margin-top: 7px; }
.services-menu-link { margin-top: 36px; }
.services-menu-link a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--text-label); letter-spacing: var(--tracking-nav);
  text-transform: uppercase; color: var(--taupe-400); transition: color var(--duration-fast) var(--ease-soft);
}
.services-menu-link a:hover, .services-menu-link a:focus-visible { color: var(--copper-500); }
.services-menu-link .arrow { color: var(--copper-500); transition: transform var(--duration-base) var(--ease-soft); }
.services-menu-link a:hover .arrow, .services-menu-link a:focus-visible .arrow { transform: translateX(5px); }
.services-menu-link.on-light a { color: var(--taupe-600); }
.services-menu-link.on-light a:hover, .services-menu-link.on-light a:focus-visible { color: var(--copper-700); }

@media (max-width: 900px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 175px); }
  .tile:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .tile:nth-child(2) { grid-column: 2; grid-row: 1; }
  .tile:nth-child(3) { grid-column: 2; grid-row: 2; }
  .tile:nth-child(4) { grid-column: 1; grid-row: 3; }
  .tile:nth-child(5), .tile:nth-child(6) { grid-column: span 1; grid-row: auto; aspect-ratio: 4 / 3; height: auto; }
  .tile:nth-child(7) { grid-column: 2; grid-row: 3; }
}
@media (max-width: 640px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .tile:nth-child(1), .tile:nth-child(2), .tile:nth-child(3), .tile:nth-child(4), .tile:nth-child(5), .tile:nth-child(6) { grid-column: span 1; grid-row: auto; aspect-ratio: 3 / 4; height: auto; }
  .tile:nth-child(7) { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; height: auto; }
  /* longer single-word labels ("Highlights", "Treatment") have no space to
     wrap on, so at the desktop size they overflow past the tile's edge and
     get clipped by .service-tile's overflow:hidden instead of shrinking */
  .service-tile h3 { font-size: 20px; }
}

/* ============================= gallery strip ============================= */
.gallery-section { padding: var(--section-y) 0; text-align: center; }
.gallery-section .section-heading { margin-bottom: 40px; padding: 0 var(--section-x); }
.gallery-marquee {
  --gallery-item-w: clamp(190px, 21vw, 280px);
  max-width: var(--frame-width); margin: 0 auto; padding: 0 var(--section-x);
  overflow: hidden;
  /* own stacking/compositing context, so Safari doesn't drop the animated
     layer's paint mid-cycle on long-running transform animations */
  isolation: isolate; transform: translateZ(0);
}
.gallery-track {
  display: flex;
  /* explicit arithmetic width, not `width: max-content` — Safari sizes a
     max-content flex row off each <img>'s native pixel size instead of its
     flex-basis, blowing the track up to ~2x the intended width and sending
     the -50% loop offset past all the real content into empty space.
     18 = 9 photos x 2 copies (see markup below); update if that count changes */
  width: calc(18 * (var(--gallery-item-w) + var(--grid-gap)));
  /* resting position matches the animation's own "from" keyframe below, so
     turning the animation on (once every photo has actually loaded, see
     site.js) never causes a jump — the row sits fully painted and still
     until then, instead of animating in half-populated */
  transform: translate3d(-50%, 0, 0);
}
.gallery-marquee.is-ready .gallery-track {
  animation: gallery-rotate 110s linear infinite;
}
.gallery-track a {
  position: relative; overflow: hidden; display: block; aspect-ratio: 4 / 5;
  flex: 0 0 var(--gallery-item-w);
  margin-right: var(--grid-gap);
}
.gallery-track img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-soft); }
.gallery-track a:hover img, .gallery-track a:focus-visible img { transform: scale(1.05); }

.gallery-marquee:hover .gallery-track, .gallery-marquee:focus-within .gallery-track { animation-play-state: paused; }

/* track holds the 9 photos twice back-to-back; -50% is exactly one set
   (margin-right on every item, including the last, keeps that exact —
   plain `gap` only sits between items, so it undershoots by half a gap
   and leaves a visible seam at the loop point) */
@keyframes gallery-rotate {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track, .gallery-marquee.is-ready .gallery-track { animation: none; }
}

.gallery-follow {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  max-width: var(--frame-width); margin: 40px auto 0; padding: 28px var(--section-x) 0;
  border-top: var(--border-thin) solid var(--border-hairline); text-align: left;
}
.gallery-follow-text {
  font-family: var(--font-serif); font-weight: var(--weight-light); font-size: clamp(20px, 2.6vw, 28px);
  color: var(--text-primary);
}
.gallery-follow-text .handle { color: var(--copper-500); }
.gallery-follow-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--text-label); font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-nav); text-transform: uppercase; color: var(--copper-500);
  transition: color var(--duration-fast) var(--ease-soft);
}
.gallery-follow-cta .arrow { transition: transform var(--duration-base) var(--ease-soft); }
.gallery-follow:hover .gallery-follow-cta, .gallery-follow:focus-visible .gallery-follow-cta { color: var(--copper-400); }
.gallery-follow:hover .arrow, .gallery-follow:focus-visible .arrow { transform: translateX(5px); }

@media (max-width: 640px) {
  .gallery-follow { padding: 24px 24px 0; margin-top: 28px; }
}

/* ============================= dream hair ============================= */
.dream-section { position: relative; overflow: hidden; height: clamp(460px, 48vh, 540px); max-width: 1800px; margin: 0 auto; }
.dream-media { position: absolute; inset: 0; }
.dream-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.dream-scrim { position: absolute; inset: 0; background: var(--scrim-hero); pointer-events: none; }
.dream-content {
  position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;
  max-width: var(--frame-width); margin: 0 auto; padding: 0 var(--section-x); text-align: center;
}
.dream-content h2 {
  font-family: var(--font-serif); font-weight: var(--weight-light); font-size: clamp(32px, 4.6vw, var(--text-display-m));
  line-height: var(--leading-display); color: var(--text-primary); margin: 0 0 24px; max-width: 640px; white-space: nowrap;
}
.dream-content h2 em {
  font-family: var(--font-script); font-style: normal;
  font-size: clamp(30px, 4.2vw, var(--text-script-l)); color: var(--copper-500);
}
.dream-links { max-width: 480px; border-top: var(--border-thin) solid var(--border-hairline-strong); }
.dream-link {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 14px 0; border-bottom: var(--border-thin) solid var(--border-hairline-strong);
  font-family: var(--font-sans); font-weight: var(--weight-light); font-size: var(--text-body); color: var(--text-primary);
}
.dream-link .arrow { color: var(--copper-500); font-size: 18px; transition: transform var(--duration-base) var(--ease-soft); }
.dream-link:hover, .dream-link:focus-visible { color: var(--copper-400); }
.dream-link:hover .arrow, .dream-link:focus-visible .arrow { transform: translateX(5px); }

@media (max-width: 640px) {
  .dream-section { height: clamp(420px, 58vh, 500px); }
  .dream-content { padding: 0 24px; }
  .dream-content h2 { margin-bottom: 20px; white-space: normal; max-width: 340px; }
  .dream-content h2 em { display: block; }
  .dream-link { font-size: 14px; padding: 12px 0; }
}

/* ============================= reviews ============================= */
.reviews {
  position: relative; text-align: center; background: var(--surface-light); color: var(--text-on-light);
  padding: var(--section-y-tight) var(--gutter-wide);
}
.reviews h2 {
  font-family: var(--font-display); font-weight: var(--weight-regular); text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 32px); letter-spacing: .07em; white-space: nowrap;
  color: var(--espresso-700); margin: 0;
}
.stars { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 14px 0 22px; color: var(--copper-600); }
.stars svg { width: 16px; height: 16px; fill: currentColor; }
.review-track { position: relative; max-width: var(--measure-quote); margin: 0 auto; }
.review-panels { position: relative; display: grid; align-items: start; }
.review-panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.review-panel.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
.review-panel blockquote {
  font-family: var(--font-serif); font-style: italic; font-weight: var(--weight-light);
  font-size: clamp(15px, 1.4vw, 18px); line-height: var(--leading-quote); margin: 0; text-wrap: pretty;
}
.review-panel .who { font-family: var(--font-serif); font-size: var(--text-body); color: var(--taupe-600); margin: 18px 0 6px; }
.review-panel .svc { font-family: var(--font-sans); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--copper-700); margin: 0; }
.review-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 300;
  color: var(--taupe-500); transition: color var(--duration-fast) var(--ease-soft); padding: 6px 10px;
}
.review-arrow-prev { left: -70px; }
.review-arrow-next { right: -70px; }
.review-arrow:hover, .review-arrow:focus-visible { color: var(--espresso-700); }
.review-dots { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.review-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--border-hairline-light-strong); transition: background var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft); }
.review-dot.is-active { background: var(--copper-600); transform: scale(1.3); }
.reviews .btn { margin-top: 26px; }

@media (max-width: 1024px) {
  .reviews { padding: 56px 56px; }
  .reviews h2 { font-size: clamp(19px, 2.3vw, 24px); letter-spacing: .05em; }
  .review-arrow-prev { left: -40px; }
  .review-arrow-next { right: -40px; }
}

@media (max-width: 640px) {
  .reviews { padding: 48px 24px; }
  .reviews h2 { font-size: 21px; line-height: 1.3; white-space: normal; }
  .stars { margin: 14px 0 20px; }
  .stars svg { width: 14px; height: 14px; }
  .review-panel .who { margin: 16px 0 6px; }
  .review-arrow { font-size: 16px; }
  .review-arrow-prev { left: -4px; }
  .review-arrow-next { right: -4px; }
}

/* ============================= meet juanice split ============================= */
.split-section { position: relative; padding: var(--section-y) var(--section-x); overflow: hidden; background: var(--surface-page); }
.split-section.on-light { background: var(--surface-light); }
.split-grid { max-width: var(--frame-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; position: relative; }
.split-text h2 {
  font-family: var(--font-serif); font-weight: var(--weight-light); font-size: clamp(30px, 4.4vw, var(--text-display-m));
  line-height: var(--leading-display); margin: 14px 0 20px; color: var(--text-primary);
}
.split-section.on-light .split-text h2 { color: var(--text-on-light); }
.split-text p { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: var(--text-body); line-height: var(--leading-body-loose); color: var(--taupe-400); margin: 0 0 14px; }
.split-section.on-light .split-text p { color: var(--taupe-600); }
.split-text .sig { font-family: var(--font-script); font-size: var(--text-script-l); color: var(--copper-500); margin-top: 22px; }
.split-text .btn { margin-top: 8px; }
.split-text.center { text-align: center; }
#visit .split-text .eyebrow { text-align: center; }
.split-text.center .hours-list { margin-left: auto; margin-right: auto; }
.split-section.on-light .eyebrow.muted { color: var(--text-muted-on-light); }
.arch-image { height: 600px; overflow: hidden; border-radius: var(--radius-arch); }
.arch-image img { width: 100%; height: 100%; object-fit: cover; }
.arch-image.no-crop { height: auto; aspect-ratio: 1122 / 1402; border-radius: var(--radius-sm); }
.arch-image.no-crop img { object-fit: contain; }

@media (max-width: 900px) {
  .split-grid { grid-template-columns: 1fr; gap: 40px; }
  .split-grid.media-first { display: flex; flex-direction: column; }
  .arch-image { height: 420px; border-radius: var(--radius-arch-sm); order: -1; }
}

/* ============================= footer ============================= */
.site-footer {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 36px; padding: 60px var(--section-x);
  background: var(--surface-page); border-top: var(--border-thin) solid var(--border-hairline);
  font-family: var(--font-sans); font-weight: var(--weight-light); font-size: var(--text-body-s);
  line-height: 2; color: var(--taupe-400);
}
.site-footer h4 {
  font-family: var(--font-sans); font-size: var(--text-eyebrow); font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--copper-500); margin: 0 0 12px;
}
.site-footer a:hover { color: var(--copper-400); }
.footer-bottom {
  padding: 22px var(--section-x); text-align: center; font-size: var(--text-micro); letter-spacing: var(--tracking-micro);
  text-transform: uppercase; color: var(--taupe-600); border-top: var(--border-thin) solid var(--border-hairline);
}

@media (max-width: 720px) {
  .site-footer { grid-template-columns: 1fr 1fr; gap: 34px 24px; text-align: left; }
  .site-footer .logotype { text-align: left; }
  .site-footer > div:first-child { grid-column: 1 / -1; }
}

/* ============================= nav active state ============================= */
.site-nav a[aria-current="page"] { color: var(--copper-500); }

/* ============================= page hero (services / weddings / contact) ============================= */
.page-hero { position: relative; overflow: hidden; height: clamp(420px, 56vh, 560px); max-width: 1800px; margin: 0 auto; display: flex; }
.page-hero--full { max-width: none; }
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,36,30,.6) 0%, rgba(46,36,30,.34) 55%, rgba(46,36,30,.62) 100%); }
.page-hero-content { position: relative; margin: auto; text-align: center; max-width: 640px; padding: 0 24px; }
.page-hero-content--wide { max-width: 760px; }
.page-hero-content .eyebrow { color: var(--copper-400); }
.page-hero-content h1 {
  font-family: var(--font-serif); font-weight: var(--weight-light); font-size: clamp(40px, 6vw, 72px);
  line-height: 1.08; color: var(--cream-50); margin: 14px 0 0; white-space: nowrap;
}
.page-hero-content .sub { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: var(--text-body); letter-spacing: .03em; color: var(--taupe-300); margin: 14px 0 0; }
.page-hero-content .btn { margin-top: 30px; }

@media (max-width: 640px) {
  .page-hero { height: clamp(380px, 60vh, 480px); }
  .page-hero-content h1 { white-space: normal; }
}

/* ============================= full price list (scrollable menu) ============================= */
.price-list-section { padding: var(--section-y-tight) 0; text-align: center; background: var(--surface-light); color: var(--text-on-light); scroll-margin-top: 100px; }
.price-list-section .section-heading { padding: 0 var(--section-x); }
.price-list-section .btn { display: inline-block; margin-top: 44px; }

.menu-scroll { position: relative; max-width: var(--frame-width); margin: 48px auto 0; display: flex; align-items: center; gap: 18px; padding: 0 var(--section-x); }
.menu-track {
  flex: 1; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding: 6px 2px 20px;
}
.menu-track::-webkit-scrollbar { display: none; }
.menu-card {
  flex: 0 0 clamp(240px, 22vw, 272px); min-height: 340px; scroll-snap-align: start; text-align: left; display: flex; flex-direction: column;
  background: var(--surface-cream); border: var(--border-thin) solid var(--border-hairline-light);
  border-top: 4px solid var(--copper-500); padding: 26px 22px; box-shadow: var(--shadow-frame);
}
.menu-card h3 { font-family: var(--font-serif); font-weight: var(--weight-regular); font-size: clamp(21px, 1vw + 15px, 24px); line-height: 1.2; color: var(--espresso-900); margin: 0; }
.menu-card-body { flex: 1; display: flex; flex-direction: column; }
.menu-card-desc, .menu-card-fit { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: clamp(13.5px, .3vw + 11px, 15px); line-height: 1.55; color: var(--taupe-600); margin: 12px 0 0; }
.menu-card-desc { min-height: 10.85em; }
.menu-card-fit strong { font-weight: var(--weight-medium); color: var(--espresso-800); }
.menu-card-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 18px; padding-top: 16px; border-top: var(--border-thin) solid var(--border-hairline-light); }
.menu-card .time { font-family: var(--font-sans); font-size: clamp(11px, .3vw + 9px, 12.5px); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--taupe-500); white-space: nowrap; flex-shrink: 0; }
.menu-card .price {
  font-family: var(--font-sans); font-size: clamp(11.5px, .3vw + 9.5px, 13px); font-weight: var(--weight-medium);
  letter-spacing: .05em; text-transform: uppercase; color: var(--cream-50); background: var(--copper-600);
  padding: 7px 14px; border-radius: var(--radius-pill); white-space: nowrap; flex-shrink: 0;
}
.menu-arrow {
  flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 50%; border: var(--border-thin) solid var(--border-hairline-light-strong); color: var(--espresso-700);
  transition: background var(--duration-base) var(--ease-soft), color var(--duration-base) var(--ease-soft), border-color var(--duration-base) var(--ease-soft);
}
.menu-arrow svg { width: 20px; height: 20px; }
.menu-arrow:hover, .menu-arrow:focus-visible { background: var(--copper-600); border-color: var(--copper-600); color: var(--cream-50); }
.menu-arrow[disabled] { opacity: .3; pointer-events: none; }
@media (max-width: 720px) {
  .menu-scroll { flex-wrap: wrap; justify-content: center; padding: 0 16px; }
  .menu-track { order: 1; flex-basis: 100%; }
  .menu-arrow {
    order: 2; width: 44px; height: 44px; background: var(--surface-cream); box-shadow: var(--shadow-frame);
  }
  .menu-arrow-next { order: 3; }
  .menu-arrow:active { background: var(--copper-600); border-color: var(--copper-600); color: var(--cream-50); }
  .menu-card { min-height: auto; padding: 24px 20px; }
}
@media (max-width: 720px) and (min-width: 561px) {
  .menu-card { flex-basis: calc(50% - 10px); }
}
@media (max-width: 560px) {
  .menu-card { flex-basis: calc(100% - 32px); }
}

/* ============================= service feature (numbered, accordion) ============================= */
.svc-feature { padding: var(--section-y) var(--section-x); background: var(--surface-page); scroll-margin-top: 100px; }
.svc-grid { max-width: var(--frame-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.svc-eyebrow { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.svc-eyebrow .num { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: clamp(13px, .3vw + 10px, 15px); letter-spacing: var(--tracking-eyebrow); color: var(--taupe-500); }
.svc-copy h2 { font-family: var(--font-serif); font-weight: var(--weight-light); font-size: clamp(30px, 4.4vw, var(--text-display-m)); line-height: var(--leading-display); color: var(--text-primary); margin: 14px 0 0; }
.svc-copy p { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: clamp(17px, .6vw + 12px, 20px); line-height: var(--leading-body-loose); color: var(--taupe-400); margin: 18px 0 0; }
.svc-copy p + p { margin-top: 10px; }

.svc-accordion { border-top: var(--border-thin) solid var(--border-hairline); margin: 26px 0 0; }
.svc-item { border-bottom: var(--border-thin) solid var(--border-hairline); }
.svc-item summary {
  display: flex; align-items: center; gap: 16px; padding: 18px 0; list-style: none;
  font-family: var(--font-sans); font-weight: var(--weight-light); font-size: clamp(17px, .6vw + 12px, 20px); color: var(--text-primary);
  cursor: pointer;
}
.svc-item summary::-webkit-details-marker, .svc-item summary::marker { display: none; content: ''; }
.svc-item .plus { position: relative; width: 16px; height: 16px; flex: none; }
.svc-item .plus::before, .svc-item .plus::after { content: ''; position: absolute; background: var(--copper-500); transition: transform var(--duration-base) var(--ease-soft), opacity var(--duration-base) var(--ease-soft); }
.svc-item .plus::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.svc-item .plus::after { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.svc-item[open] .plus::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.svc-item p { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: clamp(15px, .5vw + 11px, 17px); line-height: var(--leading-body); color: var(--taupe-400); margin: 0 0 20px 32px; }

.svc-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; }
.svc-cta .chevron { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin-top: -3px; }

.svc-media { position: relative; }
.svc-media img {
  display: block; width: 100%; height: auto;
  box-shadow: 0 26px 54px -10px rgba(10, 6, 4, .55), 0 10px 22px -10px rgba(10, 6, 4, .45);
  animation: svc-media-float 8s ease-in-out infinite;
}
@keyframes svc-media-float {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 26px 54px -10px rgba(10, 6, 4, .55), 0 10px 22px -10px rgba(10, 6, 4, .45);
  }
  50% {
    transform: translateY(-14px);
    box-shadow: 0 40px 70px -14px rgba(10, 6, 4, .6), 0 16px 28px -10px rgba(10, 6, 4, .48);
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-media img { animation: none; }
}
.svc-feature.reverse .svc-grid { direction: rtl; }
.svc-feature.reverse .svc-copy, .svc-feature.reverse .svc-media { direction: ltr; }

.svc-feature.on-light { background: var(--surface-light); }
.svc-feature.on-light .svc-copy h2 { color: var(--text-on-light); }
.svc-feature.on-light .svc-copy p { color: var(--taupe-600); }
.svc-feature.on-light .svc-item summary { color: var(--text-on-light); }
.svc-feature.on-light .svc-item p { color: var(--taupe-600); }
.svc-feature.on-light .svc-accordion, .svc-feature.on-light .svc-item { border-color: var(--border-hairline-light); }
.svc-feature.on-light .plus::before, .svc-feature.on-light .plus::after { background: var(--copper-700); }

@media (max-width: 900px) {
  .svc-grid, .svc-feature.reverse .svc-grid { grid-template-columns: 1fr; gap: 34px; direction: ltr; }
}

/* ============================= testimonial grid (client love) ============================= */
.testimonial-section { padding: var(--section-y-tight) 0; text-align: center; background: var(--espresso-900); overflow: hidden; }
.testimonial-section.on-light { background: var(--surface-light); }
.testimonial-section .eyebrow { padding: 0 var(--gutter-wide); }
.testimonial-section h2 {
  font-family: var(--font-display); font-weight: var(--weight-regular); text-transform: uppercase;
  font-size: clamp(22px, 3.2vw, 36px); letter-spacing: .07em; line-height: 1.3; color: var(--cream-50);
  margin: 10px 0 0; padding: 0 var(--gutter-wide);
}
.testimonial-section.on-light h2 { color: var(--text-on-light); }
.testimonial-grid {
  margin: 44px 0 0; padding: 0 var(--gutter-wide) 14px;
  display: flex; gap: var(--grid-gap); text-align: left;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.testimonial-grid::-webkit-scrollbar { display: none; }
.testimonial-card {
  flex: 0 0 clamp(260px, 30vw, 340px); width: clamp(260px, 30vw, 340px); scroll-snap-align: start;
  padding: 30px 28px; background: var(--espresso-700); border: var(--border-thin) solid var(--border-hairline);
}
.testimonial-section.on-light .testimonial-card { background: var(--surface-cream); border-color: var(--border-hairline-light); }
.testimonial-card .stars { display: flex; gap: 6px; color: var(--copper-500); margin-bottom: 18px; }
.testimonial-card .stars svg { width: 13px; height: 13px; fill: currentColor; }
.testimonial-card blockquote { font-family: var(--font-serif); font-style: italic; font-weight: var(--weight-light); font-size: clamp(18px, .7vw + 13px, 21px); line-height: var(--leading-quote); color: var(--text-primary); margin: 0; }
.testimonial-section.on-light .testimonial-card blockquote { color: var(--text-on-light); }
.testimonial-card .who { font-family: var(--font-sans); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--copper-400); margin: 20px 0 0; }
.testimonial-section.on-light .testimonial-card .who { color: var(--copper-700); }
.testimonial-card .svc { font-family: var(--font-sans); font-size: var(--text-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase; color: var(--taupe-500); margin: 4px 0 0; }
.testimonial-section.on-light .testimonial-card .svc { color: var(--taupe-600); }
.testimonial-section.on-light.on-tan { background: var(--taupe-400); }
@media (max-width: 900px) {
  .testimonial-section { padding: 56px 0; }
  .testimonial-card { flex-basis: 82vw; width: 82vw; }
}

/* ============================= page gallery grid ============================= */
.page-gallery { padding: var(--section-y-tight) 0 var(--section-y); background: #fff; }
.page-gallery .section-heading { margin-bottom: 40px; }
.page-gallery-title-link { display: inline-flex; align-items: center; gap: 12px; }
.page-gallery-title-link .arrow { color: var(--copper-700); display: inline-block; transition: transform var(--duration-base) var(--ease-soft); }
.page-gallery-title-link:hover .arrow, .page-gallery-title-link:focus-visible .arrow { transform: translateX(6px); }
.page-gallery-grid { max-width: var(--frame-width); margin: 0 auto; padding: 0 var(--section-x); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.page-gallery-grid a { position: relative; overflow: hidden; display: block; aspect-ratio: 4 / 5; }
.page-gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-soft); }
.page-gallery-grid a:hover img, .page-gallery-grid a:focus-visible img { transform: scale(1.05); }
@media (max-width: 640px) {
  .page-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================= chair band (closing CTA) ============================= */
.chair-band { position: relative; overflow: hidden; height: clamp(420px, 52vh, 560px); max-width: 1800px; margin: 0 auto; }
.chair-media {
  position: absolute; inset: 0;
  background: url('../images/photos/hair-salon-styling-station-malden-ma.jpg') center / cover no-repeat;
}
.chair-scrim { position: absolute; inset: 0; background: var(--scrim-hero); pointer-events: none; }
.chair-content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 820px; padding: 0 var(--section-x); }
.chair-content h2 {
  font-family: var(--font-serif); font-weight: var(--weight-light); font-size: clamp(26px, 3.6vw, 44px);
  line-height: var(--leading-display); color: var(--cream-50); margin: 0;
}
.chair-content h2 .chair-line { display: block; white-space: nowrap; }
.chair-content h2 em { font-family: var(--font-script); font-style: normal; font-size: clamp(30px, 4.2vw, var(--text-script-l)); color: var(--copper-400); display: block; margin-top: 6px; }
.chair-content .btn { margin-top: 30px; align-self: flex-start; }
@media (max-width: 640px) {
  .chair-band { height: clamp(380px, 58vh, 480px); }
  .chair-content { padding: 0 24px; }
  .chair-content h2 .chair-line { white-space: normal; }
}

/* ============================= packages (weddings) ============================= */
.packages-section { padding: var(--section-y-tight) var(--section-x); text-align: center; background: var(--surface-light); color: var(--text-on-light); }
.packages-section .sub { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: var(--text-body); color: var(--taupe-600); max-width: 560px; margin: 14px auto 0; }
.packages-grid { max-width: var(--frame-width); margin: 44px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); text-align: left; }
.package-card { position: relative; overflow: hidden; aspect-ratio: 4 / 5; display: block; }
.package-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-soft); }
.package-card:hover img, .package-card:focus-visible img { transform: scale(1.03); }
.package-card .ov { position: absolute; inset: 0; background: var(--scrim-tile); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 20px 24px; }
.package-card h3 { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--weight-regular); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-50); margin: 0; }
.package-card .price { font-family: var(--font-sans); font-size: var(--text-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase; color: var(--copper-400); margin-top: 6px; }
.packages-section .btn { margin-top: 36px; }
.price-note {
  font-family: var(--font-sans); font-size: var(--text-micro); letter-spacing: var(--tracking-micro);
  text-transform: uppercase; color: var(--taupe-500); margin-top: 18px;
}
.price-note.on-light { color: var(--taupe-600); }
@media (max-width: 720px) {
  .packages-grid { grid-template-columns: 1fr; max-width: 380px; }
}

/* ============================= additional services list (weddings) ============================= */
.extra-list-section { padding: var(--section-y-tight) var(--section-x); background: var(--surface-page); }
.extra-list-section .section-heading { text-align: center; margin-bottom: 8px; }
.extra-list { max-width: 760px; margin: 36px auto 0; border-top: var(--border-thin) solid var(--border-hairline); }
.extra-item { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 26px 0; border-bottom: var(--border-thin) solid var(--border-hairline); align-items: baseline; }
.extra-item h3 { font-family: var(--font-serif); font-weight: var(--weight-light); font-size: var(--text-title); color: var(--text-primary); margin: 0; }
.extra-item p { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: var(--text-body-s); line-height: 1.75; color: var(--taupe-400); margin: 8px 0 0; max-width: 480px; }
.extra-item .price { font-family: var(--font-sans); font-size: var(--text-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--copper-500); white-space: nowrap; }
.extra-list-section .price-note { text-align: center; }
@media (max-width: 640px) {
  .extra-item { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================= specialize (we specialize in) ============================= */
.specialize-section { background: var(--surface-page); border-top: var(--border-thin) solid var(--border-hairline); border-bottom: var(--border-thin) solid var(--border-hairline); }
.specialize-grid { display: grid; grid-template-columns: minmax(0, 40%) 1fr; align-items: stretch; }
.specialize-panel { background: var(--espresso-800); display: flex; align-items: center; justify-content: center; padding: var(--section-y) var(--section-x); }
.specialize-panel-inner { max-width: 380px; }
.specialize-panel h2 {
  font-family: var(--font-display); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display);
  text-transform: uppercase; font-size: var(--text-display-s); color: var(--text-primary); margin: 0 0 34px;
}
.specialize-list { display: flex; flex-direction: column; gap: 20px; margin: 0 0 40px; }
.specialize-list li { display: flex; align-items: center; gap: 16px; }
.specialize-list .plus { flex: none; width: 14px; height: 14px; position: relative; }
.specialize-list .plus::before, .specialize-list .plus::after { content: ''; position: absolute; background: var(--copper-500); }
.specialize-list .plus::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.specialize-list .plus::after { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.specialize-list span {
  font-family: var(--font-sans); font-size: var(--text-label); font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-nav); text-transform: uppercase; color: var(--text-primary);
}
.specialize-link {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: var(--text-label);
  letter-spacing: var(--tracking-nav); text-transform: uppercase; color: var(--taupe-400);
  transition: color var(--duration-fast) var(--ease-soft);
}
.specialize-link .arrow { color: var(--copper-500); transition: transform var(--duration-base) var(--ease-soft); }
.specialize-link:hover, .specialize-link:focus-visible { color: var(--copper-500); }
.specialize-link:hover .arrow, .specialize-link:focus-visible .arrow { transform: translateX(5px); }

.specialize-media { position: relative; min-height: clamp(420px, 46vw, 640px); }
.specialize-media-back { position: absolute; top: 0; bottom: 0; right: 0; width: 60%; overflow: hidden; }
.specialize-media-front {
  position: absolute; left: 5%; top: 12%; bottom: 12%; width: 40%; overflow: hidden;
  box-shadow: 0 24px 70px rgba(10, 6, 4, .55); border: var(--border-thin) solid var(--border-hairline-strong);
}
.specialize-media-back img, .specialize-media-front img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .specialize-grid { grid-template-columns: 1fr; }
  .specialize-panel { padding: 56px 24px; }
  .specialize-media { min-height: 420px; }
}
@media (max-width: 640px) {
  .specialize-media-back { width: 70%; }
  .specialize-media-front { width: 52%; left: 2%; }
}

/* ============================= instagram gallery band ============================= */
.insta-section { background: var(--espresso-800); padding: var(--section-y-tight) 0; overflow: hidden; }
.insta-head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  max-width: var(--frame-width); margin: 0 auto 32px; padding: 0 var(--section-x);
}
.insta-head h2 {
  font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: .05em; text-transform: uppercase; color: var(--cream-50); margin: 0;
}
.insta-head .handle { color: var(--copper-500); }
.insta-view {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: var(--text-label);
  letter-spacing: var(--tracking-nav); text-transform: uppercase; color: var(--copper-500); white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-soft);
}
.insta-view:hover, .insta-view:focus-visible { color: var(--cream-50); }
.insta-view .arrow { transition: transform var(--duration-base) var(--ease-soft); }
.insta-view:hover .arrow, .insta-view:focus-visible .arrow { transform: translate(2px, -2px); }

.insta-grid { max-width: var(--frame-width); margin: 0 auto; padding: 0 var(--section-x); display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--grid-gap); }
.insta-grid a { position: relative; overflow: hidden; display: block; aspect-ratio: 3 / 4; }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-soft); }
.insta-grid a:hover img, .insta-grid a:focus-visible img { transform: scale(1.05); }

@media (max-width: 900px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .insta-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 24px 4px; -webkit-overflow-scrolling: touch; }
  .insta-grid a { flex: 0 0 42vw; scroll-snap-align: start; display: block !important; }
  .insta-head { padding: 0 24px; }
}

/* ============================= ready to book (centered cta) ============================= */
.ready-section { padding: var(--section-y) var(--section-x); text-align: center; background: var(--surface-page); }
.ready-section .section-heading { margin-bottom: 18px; }
.ready-section .sub { font-family: var(--font-sans); font-weight: var(--weight-light); font-size: var(--text-body); line-height: var(--leading-body); color: var(--taupe-400); max-width: 560px; margin: 0 auto; }
.ready-section .btn { margin-top: 34px; }

/* ============================= visit / hours list / map ============================= */
#visit.split-section:not(.on-light) { background: var(--espresso-700); }
.hours-list { list-style: none; margin: 20px 0 0; padding: 0; max-width: 320px; }
.hours-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: var(--border-thin) solid var(--border-hairline); font-family: var(--font-sans); font-size: var(--text-body-s); }
.hours-list li span:first-child { color: var(--text-primary); font-weight: var(--weight-regular); }
.hours-list li span:last-child { color: var(--taupe-400); }
.split-section.on-light .hours-list li { border-bottom-color: var(--border-hairline-light); }
.split-section.on-light .hours-list li span:first-child { color: var(--text-on-light); }
.split-section.on-light .hours-list li span:last-child { color: var(--taupe-600); }

.map-frame { position: relative; height: 600px; overflow: hidden; border: var(--border-thin) solid var(--border-hairline); }
.split-section.on-light .map-frame { border-color: var(--border-hairline-light); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.2) contrast(1.05) brightness(.94); }
.map-frame .map-cta {
  position: absolute; bottom: 20px; left: 20px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--espresso-900); color: var(--cream-50); font-family: var(--font-sans); font-size: var(--text-label);
  letter-spacing: var(--tracking-nav); text-transform: uppercase; padding: 12px 22px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-frame); transition: transform var(--duration-base) var(--ease-soft);
}
.map-frame .map-cta:hover, .map-frame .map-cta:focus-visible { transform: translateY(-2px); }
@media (max-width: 900px) { .map-frame { height: 420px; order: -1; } }

/* ============================= visit photo + map (contact) ============================= */
.split-grid.align-top { align-items: start; }
.visit-photo {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px;
  background:
    radial-gradient(1100px 650px at 12% 18%, rgba(214, 154, 108, .32), transparent 60%),
    radial-gradient(900px 600px at 88% 82%, rgba(169, 96, 60, .28), transparent 55%),
    linear-gradient(135deg, var(--espresso-800), var(--espresso-900));
}
.visit-photo img { width: 100%; height: 100%; object-fit: cover; }
.visit-panel { text-align: center; }
.visit-panel .hours-list { max-width: 440px; margin-left: auto; margin-right: auto; }
.visit-map { height: 440px; max-width: 440px; margin: 28px auto 0; }
@media (max-width: 900px) {
  .visit-photo { aspect-ratio: 16 / 10; }
}

/* ============================= faq accordion ============================= */
.faq-section { padding: var(--section-y-tight) var(--section-x); text-align: center; background: var(--surface-light); color: var(--text-on-light); }
.faq-section .section-heading { margin-bottom: 8px; }
.faq-accordion { max-width: 760px; margin: 40px auto 0; text-align: left; border-top-color: var(--border-hairline-light); }
.faq-accordion .svc-item { border-bottom-color: var(--border-hairline-light); }
.faq-accordion .svc-item summary { color: var(--text-on-light); }
.faq-accordion .svc-item p { color: var(--taupe-600); }
.faq-accordion .svc-item .plus::before, .faq-accordion .svc-item .plus::after { background: var(--copper-700); }

/* ============================= home page readability ============================= */
body.page-home { --text-body: clamp(19px, .8vw + 13px, 22px); }
body.page-home .split-text p { font-weight: var(--weight-regular); line-height: 1.85; }
body.page-home .reviews { padding: 65px var(--gutter-wide); }
body.page-home .review-track { max-width: 1040px; }
body.page-home .stars { margin: 20px 0 34px; }
body.page-home .stars svg { width: 22px; height: 22px; }
body.page-home .review-panel blockquote { font-size: clamp(28px, 3vw, 34px); font-weight: var(--weight-regular); line-height: 1.5; }
body.page-home .review-panel--long blockquote { font-size: var(--text-body); line-height: 1.6; }
body.page-home .review-panel .who { font-size: clamp(22px, 1.2vw + 16px, 26px); margin: 30px 0 8px; }
body.page-home .review-panel .svc { font-size: clamp(14px, .35vw + 10px, 16px); }
body.page-home .review-dots { margin-top: 30px; }

@media (max-width: 640px) {
  body.page-home .reviews { padding: 40px 24px; }
  body.page-home .review-panel blockquote { font-size: 17px; line-height: 1.5; }
  body.page-home .review-panel--long blockquote { font-size: 14.5px; line-height: 1.5; }
}

/* ============================= film grain overlay ============================= */
.grain-overlay {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ============================= scroll progress ============================= */
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 300; pointer-events: none; }
.scroll-progress-bar { height: 100%; width: 100%; background: var(--copper-500); transform: scaleX(0); transform-origin: left; will-change: transform; }

@media (max-width: 860px) {
  .grain-overlay { display: none !important; }
}

/* ============================= kinetic hero heading ============================= */
/* padding-bottom gives descenders (g, y, p, q, j) room inside the clip box;
   the matching negative margin-bottom cancels the padding back out of line
   flow so it doesn't add extra gap between "Elevating" and "Beauty,". Safari
   clips descenders on background-clip:text content more aggressively than
   normal filled text, so this needs more headroom than plain text would —
   .2em wasn't enough once the words below became gradient-filled. */
.hero-copy h1 .kw-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .4em; margin-bottom: -.4em; }
.hero-copy h1 .kw {
  display: inline-block; line-height: 1.3; transform: translateY(115%);
  animation-name: kw-rise;
  animation-duration: 900ms;
  animation-timing-function: var(--ease-soft);
  animation-delay: calc(420ms + var(--wd, 0) * 90ms);
  animation-fill-mode: forwards;
}
.hero-copy h1 em .kw-mask { display: block; }
@keyframes kw-rise { to { transform: translateY(0); } }

/* ---- floating, light-catching hero type ----
   three layers, each reinforcing "floating": (1) the whole heading drifts on
   a slow vertical bob, the script line drifting slightly out of phase so it
   reads as its own object rather than a rigid block; (2) a soft warm glow
   breathes behind the type, brightening as it rises — like it's casting its
   own ambient light rather than sitting flat on the page; (3) each word gets
   a foil-style gradient fill so a bright glint sweeps through it on a long,
   mostly-idle cycle (echoes .hero-shine's glint-then-rest rhythm) instead of
   a flat text-shadow halo, which read as a muddy smudge between the two
   stacked lines. */
.hero-copy h1 {
  position: relative;
  animation-name: hero-float;
  animation-duration: 7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.hero-copy h1 em {
  animation-name: hero-float-em;
  animation-duration: 5.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes hero-float-em {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-copy h1::before {
  content: "";
  position: absolute; left: -8%; right: -8%; top: 4%; bottom: -10%;
  background: radial-gradient(ellipse 60% 55% at 32% 55%, rgba(214, 154, 108, .3), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  animation-name: hero-glow-drift;
  animation-duration: 7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes hero-glow-drift {
  0%, 100% { opacity: .5; transform: translateY(0) scale(1); }
  50% { opacity: .85; transform: translateY(-9px) scale(1.08); }
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-copy h1 .kw {
    background-image: linear-gradient(100deg,
      var(--taupe-300) 40%, var(--cream-50) 48%, var(--copper-300) 50%, var(--cream-50) 52%, var(--taupe-300) 60%);
    background-size: 320% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation-name: kw-rise, hero-text-shine;
    animation-duration: 900ms, 6.5s;
    animation-timing-function: var(--ease-soft), var(--ease-soft);
    animation-delay: calc(420ms + var(--wd, 0) * 90ms), calc(1.6s + var(--wd, 0) * 500ms);
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
  }
  .hero-copy h1 em .kw {
    background-image: linear-gradient(100deg,
      var(--copper-500) 40%, var(--copper-300) 48%, var(--cream-50) 50%, var(--copper-300) 52%, var(--copper-500) 60%);
  }
}
@keyframes hero-text-shine {
  0%, 60% { background-position: 250% 0; }
  80%, 100% { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy h1, .hero-copy h1 em, .hero-copy h1::before, .hero-copy h1 .kw { animation: none; }
  /* kw-rise normally carries each word from translateY(115%) (hidden below its
     mask) up to 0 — with that animation off, force the resting position directly
     so the heading isn't left permanently hidden */
  .hero-copy h1 .kw { transform: translateY(0); background-position: 0 0; }
}

/* ============================= service tile curtain-wipe reveal ============================= */
/* clip-path lives on the <img>, never on the observed .reveal anchor itself —
   Chromium computes IntersectionObserver's intersection rect post-clip, so a
   clipped observed target reports zero intersection and can never reveal itself. */
.js .tile.reveal { opacity: 1; transform: none; }
.js .tile.reveal img {
  clip-path: inset(0 0 0 100%);
  transform: scale(1.14);
  transition: clip-path 900ms var(--ease-soft), transform 900ms var(--ease-soft);
  transition-delay: calc(var(--stagger-i, 0) * 90ms);
}
.tile.reveal.is-visible img {
  clip-path: inset(0 0 0 0%);
  transform: scale(1);
  transition: clip-path 900ms var(--ease-soft), transform var(--duration-slow) var(--ease-soft);
}
/* keep the existing hover zoom winning over the reveal's own settle-scale once visible */
.tile.reveal.is-visible:hover img, .tile.reveal.is-visible:focus-visible img { transform: scale(1.03); }

/* ============================= dream section parallax ============================= */
body.page-home .dream-media img { height: 130%; top: -15%; will-change: transform; }

/* ============================= section heading underline draw-in ============================= */
body.page-home .section-heading h2::after {
  content: ""; display: block; width: 46px; height: 2px; margin: 20px auto 0;
  background: var(--copper-500); transform: scaleX(0); transform-origin: center;
  transition: transform 640ms var(--ease-soft); transition-delay: 120ms;
}
body.page-home .section-heading.reveal.is-visible h2::after { transform: scaleX(1); }

/* ============================= magnetic buttons ============================= */
.btn-solid, .btn-outline { will-change: transform; }

/* ============================= responsive refinements ============================= */
/* several sections only ever used the fixed --section-x (56px) / --gutter-wide (130px)
   gutters, unlike their siblings which already drop to 24px at phone widths — on a
   360-390px screen that ate up to 70% of the viewport in pure padding. bringing them
   in line with the rest of the site's mobile convention. */
@media (max-width: 640px) {
  .services-section,
  .split-section,
  .svc-feature,
  .packages-section,
  .extra-list-section,
  .faq-section,
  .ready-section { padding-left: 24px; padding-right: 24px; }

  .gallery-section .section-heading,
  .gallery-marquee,
  .page-gallery-grid { padding-left: 24px; padding-right: 24px; }
  .gallery-section .section-heading h2 { font-size: 32px; }

  .testimonial-section .eyebrow,
  .testimonial-section h2,
  .testimonial-grid { padding-left: 24px; padding-right: 24px; }
}

/* hero script line can outgrow very narrow phones (<380px) since it never wraps */
@media (max-width: 380px) {
  .hero-copy h1 em { white-space: normal; }
}

/* nav toggle's visible icon stays 32x24, but the tappable button grows to the
   44x44 minimum touch target (WCAG 2.5.5) via padding instead of a bigger icon */
@media (max-width: 860px) {
  .nav-toggle { width: 44px; height: 44px; padding: 10px 6px; }
}