.wrap {
  width: min(calc(100% - (var(--gutter-desktop) * 2)), var(--content-max));
  margin-inline: auto;
}

.eyebrow {
  color: var(--color-text-muted);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.eyebrow--on-light { color: var(--color-text-on-light-muted); }
.serif { font-family: var(--font-display); }

.reveal {
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity 900ms cubic-bezier(.22,.61,.36,1),
    transform 1100ms cubic-bezier(.22,.61,.36,1);
}
.reveal.visible { opacity: 1; transform: none; }

/* Eyebrow rises first, leading the cascade */
.reveal .eyebrow {
  transform: translateY(12px);
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.reveal.visible .eyebrow { transform: none; }

/* Headings wipe up from behind a curtain — the editorial signature.
   The visible state expands slightly beyond the box so glyph overhang
   (descenders on g/p/y, italic swashes) isn't sheared off by the tight
   --leading-h2 line-height. */
.reveal h1,
.reveal h2 {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 850ms cubic-bezier(.22,.61,.36,1) 100ms;
}
.reveal.visible h1,
.reveal.visible h2 { clip-path: inset(-0.25em -0.12em -0.45em -0.12em); }

/* Body block after the section head trails last */
.reveal .sectionhead + * {
  transform: translateY(18px);
  transition: transform 800ms cubic-bezier(.22,.61,.36,1) 180ms;
}
.reveal.visible .sectionhead + * { transform: none; }

.nav {
  position: fixed;
  z-index: 90;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  height: var(--nav-height);
  padding-inline: var(--gutter-desktop);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-nav-background);
  backdrop-filter: blur(18px);
  transition: background var(--transition-standard), border-color var(--transition-standard), height var(--transition-standard);
}

.nav.scrolled {
  border-color: var(--color-border-strong);
  background: var(--color-nav-background-scrolled);
  height: var(--nav-height-scrolled);
}

.navin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, var(--content-max));
  margin-inline: auto;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.logo img {
  display: block;
  height: 40px;
  width: auto;
}
.logo-text { display: none; }

.site-nav__links {
  display: flex;
  gap: 30px;
  color: var(--color-text-subtle);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-nav__links a { position: relative; transition: color var(--transition-fast); }
.site-nav__links a:hover,
.site-nav__links a.active,
.site-nav__links a[aria-current="page"] { color: var(--color-white); }
/* Underline sweep: grows left-to-right on hover, stays on the active page */
.site-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--color-accent-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms cubic-bezier(.22,.61,.36,1);
}
.site-nav__links a:hover::after,
.site-nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.menu {
  display: none;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 22px;
  line-height: 1;
}
.site-mobile-nav { display: none; }

footer { padding: 44px 0 28px; border-top: 1px solid var(--color-border); }
.site-footer__top { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.site-footer__brand { display: inline-flex; align-items: center; }
.site-footer__brand img { display: block; height: 40px; width: auto; }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  color: var(--color-text-muted);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
/* Footer middle row: studio hours */
.site-footer__info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-soft);
  font-size: 13px;
  line-height: 1.6;
}
.site-footer__hours-label {
  font-weight: 600; color: var(--color-text); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px;
  display: block;
}
.site-footer__book {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-cta-dark);
  color: var(--color-text);
  padding: 14px 26px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.site-footer__book span { display: inline-block; transition: transform var(--transition-fast); }
.site-footer__book:hover {
  background: var(--color-accent-strong);
  color: var(--color-white);
  border-color: var(--color-accent-strong);
  transform: translateY(-2px);
}
.site-footer__book:hover span { transform: translate(3px, -3px); }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  color: var(--color-text-muted);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-footer__social { display: flex; align-items: center; gap: 10px; }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-round);
  transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.site-footer__social a:hover {
  color: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  transform: translateY(-2px);
}
.site-footer__social svg { width: 15px; height: 15px; fill: currentColor; display: block; }

.wa {
  position: fixed;
  z-index: 80;
  right: 22px;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-round);
  background: var(--color-whatsapp);
  box-shadow: var(--shadow-floating);
  font-size: 19px;
  transition: transform var(--transition-fast), background var(--transition-fast);
  animation: wa-breathe 3s ease-in-out infinite; /* gentle attention pulse */
}
.wa:hover { transform: translateY(-4px); background: var(--color-whatsapp-hover); }
.wa__icon { display: inline-block; vertical-align: middle; }

/* Expanding ring that fades out, echoing --color-whatsapp (#25D366) */
@keyframes wa-breathe {
  0%, 100% { box-shadow: var(--shadow-floating), 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50%      { box-shadow: var(--shadow-floating), 0 0 0 16px rgba(37, 211, 102, 0); }
}

/* ============================================================
   SHARED SECTION CHROME
   .sectionhead, .eyebrow variants, and .cta are used by
   every page — they live here, not in page-specific sheets.
   ============================================================ */

/* Base section spacing */
section { padding: var(--section-pad-desktop) 0; }

/* Section heading row: eyebrow + h2 on the left, optional copy/score on the right */
.sectionhead {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 50px;
}
.sectionhead h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: -.05em;
  margin: 18px 0 0;
}
.sectionhead p {
  max-width: 350px;
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  margin: 0;
}

/* Unified underlined CTA link ("View selected work →", "Start a consultation ↗") */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--color-text);
  padding: 0 0 10px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cta span { font-size: 18px; transition: .2s; }
.cta:hover span { transform: translate(4px, -4px); }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal .eyebrow,
  .reveal .sectionhead + * { opacity: 1; transform: none; }
  .reveal h1,
  .reveal h2 { clip-path: none; }
}

@media (max-width: 850px) {
  .wrap { width: calc(100% - (var(--gutter-mobile) * 2)); }
  .nav { height: var(--nav-height-mobile); padding-inline: var(--gutter-mobile); }
  .nav.scrolled { height: var(--nav-height-mobile); }
  .logo { position: relative; }
  .logo img {
    height: 44px;
    animation: logo-img-out 0.55s ease 1.4s forwards;
  }
  .logo-text {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0;
    animation: logo-text-in 0.55s ease 1.4s forwards;
  }
  @keyframes logo-img-out { to { opacity: 0; } }
  @keyframes logo-text-in { to { opacity: 1; } }
  .site-nav__links { display: none; }
  .menu { display: block; }
  .site-mobile-nav.open { display: flex; }
  .site-mobile-nav {
    position: fixed;
    z-index: 85;
    top: var(--nav-height-mobile);
    right: 0;
    left: 0;
    flex-direction: column;
    gap: 4px;
    padding: 24px var(--gutter-mobile) 30px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-mobile-nav-background);
  }
  .site-mobile-nav a {
    padding: 9px 0;
    font-family: var(--font-display);
    font-size: 36px;
    line-height: 1.15;
  }
  footer { padding: 32px 0 24px; }
  .site-footer__top { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
  .site-footer__bottom { display: block; }
  .site-footer__info { flex-direction: column; align-items: flex-start; margin-top: 16px; padding-top: 16px; }
  .sectionhead { display: block; text-align: center; }
  .sectionhead h2 { font-size: 62px; margin-bottom: 25px; }
  .sectionhead p { margin-inline: auto; }
  .site-footer__links { margin-top: 20px; line-height: 1.9; }
  .site-footer__book { width: 100%; justify-content: center; padding: 16px 20px; }
  .site-footer__bottom { margin-top: 20px; line-height: 1.9; }
  .site-footer__bottom > span { display: block; }
  .site-footer__social { margin-bottom: 12px; gap: 12px; }
  .site-footer__social a { width: 40px; height: 40px; }
  .site-footer__social svg { width: 18px; height: 18px; }
  .wa { right: 16px; bottom: 16px; width: 50px; height: 50px; }
}

@media (max-width: 850px) and (prefers-reduced-motion: reduce) {
  .logo img { animation: none; opacity: 0; }
  .logo-text { animation: none; opacity: 1; }
}