/* ==========================================================================
   Plural Studio — shared production stylesheet
   Design tokens, reset, header/nav, footer, buttons, lightbox, brand
   carousel, forms, motion. Page-specific decorative layout lives in
   assets/css/<page>.css.
   ========================================================================== */

:root {
  --ink: #111111;
  --ink-soft: #46433F;
  --ink-softer: #55524E;
  --ink-muted: #7A7670;
  --ink-faint: #33312E;
  --paper: #F7F4F0;
  --paper-dim: #EAE6E0;
  --card: #FBF9F6;
  --error: #A8503C;
  --selection: #FFC1D6;
  --nav-bp: 1024px; /* header switches to the mobile menu pattern below this */
}

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

html, body { margin: 0; padding: 0; }
html, body { overflow-x: clip; background: var(--paper-dim); }

body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--paper);
  color: var(--ink);
  letter-spacing: -0.01em;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink); }
::selection { background: var(--selection); color: var(--ink); }

img { max-width: 100%; }

button { font: inherit; }

/* Re-establishes the same container-query context the design was authored
   against, so every clamp(min, Ncqw, max) fluid value below resolves
   exactly as in the approved source — no per-value unit conversion needed. */
header[data-site-header] { container-type: inline-size; }
.stage { width: 100%; max-width: 1320px; margin: 0 auto; container-type: inline-size; }

[data-aos] { pointer-events: auto !important; }

/* ---- Keyframes (union of all pages' motion) ---------------------------- */
@keyframes waveDriftA { 0% { transform: translate3d(0,0,0) scale(1.02) rotate(0deg); } 50% { transform: translate3d(-1.8%,1.4%,0) scale(1.06) rotate(-0.6deg); } 100% { transform: translate3d(0,0,0) scale(1.02) rotate(0deg); } }
@keyframes waveDriftB { 0% { transform: translate3d(0,0,0) scale(1.04); } 50% { transform: translate3d(2.2%,-1.2%,0) scale(1.0); } 100% { transform: translate3d(0,0,0) scale(1.04); } }
@keyframes waveDriftC { 0%, 100% { transform: translate3d(0,0,0) scale(1.03) rotate(.4deg); } 50% { transform: translate3d(-2.6%,-1.8%,0) scale(1.08) rotate(-.4deg); } }
@keyframes glowPulse { 0%, 100% { opacity: .55; transform: scale(1) translate3d(0,0,0); } 50% { opacity: .85; transform: scale(1.09) translate3d(1.5%,-1%,0); } }
@keyframes stripSlide { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes revealFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes paraSlow { from { transform: translate3d(0,-5%,0); } to { transform: translate3d(0,7%,0); } }
@keyframes paraFast { from { transform: translate3d(0,-9%,0); } to { transform: translate3d(0,12%,0); } }
@keyframes hueBreathe { 0%, 100% { filter: saturate(1) hue-rotate(0deg); } 50% { filter: saturate(1.14) hue-rotate(-8deg); } }
@keyframes sheenSweep { 0% { transform: translate3d(-150%,0,0); opacity: 0; } 14% { opacity: .45; } 52% { opacity: .45; } 100% { transform: translate3d(150%,0,0); opacity: 0; } }
@keyframes floatOrb { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(3.5%,-4.5%,0) scale(1.07); } 66% { transform: translate3d(-3%,3.5%,0) scale(.96); } }
@keyframes drawX { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes wordRise { from { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(2px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes cueGlide { 0%, 100% { translate: -50% 0; } 50% { translate: -50% 6px; } }
@keyframes pulseRing { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,214,0); } 50% { box-shadow: 0 0 0 12px rgba(255,193,214,.14); } }
@keyframes progressX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes iconPulse { 0%, 100% { transform: translate3d(0,0,0); opacity: .9; } 50% { transform: translate3d(0,-4px,0); opacity: 1; } }
@keyframes numBreathe { 0%, 100% { opacity: .16; } 50% { opacity: .26; } }
@keyframes fieldIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes errorIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-brand-marquee] { animation: none !important; }
}

input, textarea, select { font-family: inherit; }
input::placeholder, textarea::placeholder { color: rgba(17,17,17,.32); }

/* ---- Focus visibility ---------------------------------------------------
   The source relies on hover states for affordance; production adds a
   visible keyboard focus ring everywhere without altering the visual design. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Header
   ========================================================================== */
header[data-site-header] {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  background: rgba(247,244,240, calc(.6 + var(--sc,0) * .32));
  backdrop-filter: blur(calc(14px + var(--sc,0) * 10px)) saturate(150%);
  -webkit-backdrop-filter: blur(calc(14px + var(--sc,0) * 10px)) saturate(150%);
  border-bottom: 1px solid rgba(17,17,17, calc(.045 + var(--sc,0) * .065));
  transition: background .5s ease;
}
.hdr-row {
  max-width: 1320px;
  margin: 0 auto;
  padding: calc(clamp(14px,2.2cqw,29px) - var(--sc,0) * 5px) clamp(20px,5.27cqw,69.6px);
  transition: padding .5s cubic-bezier(.22,1,.36,1);
  display: flex;
  align-items: center;
  gap: clamp(16px,3.52cqw,46.4px);
}
.hdr-logo { display: block; flex: 0 0 auto; }
.hdr-logo img {
  width: calc(clamp(74px,10.11cqw,133.4px) - var(--sc,0) * 12px);
  display: block;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}

.hdr-nav-desktop { margin-left: auto; align-items: center; gap: clamp(18px,3.3cqw,43.5px); }
.hdr-nav-desktop { display: contents; }
@media (min-width: 1024px) {
  .hdr-nav-desktop { display: flex; }
}
@media (max-width: 1023.98px) { .hdr-nav-desktop { display: none; } }

.hdr-link {
  font-size: clamp(13px,1.59cqw,21px);
  font-weight: 500;
  opacity: .72;
  transition: opacity .3s;
}
.hdr-link:hover, .hdr-link:focus-visible { opacity: 1; }
.hdr-link.is-current {
  font-weight: 600;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hdr-link.is-current::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink);
  display: inline-block;
}

.hdr-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: clamp(8px,1.98cqw,26.1px);
  border-left: 1px solid rgba(17,17,17,0.12);
  font-size: clamp(11.5px,1.37cqw,18.1px);
  font-weight: 700;
  letter-spacing: .06em;
}
.hdr-lang button {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: var(--ink);
  opacity: .4; transition: opacity .3s;
}
html[lang="en"] .hdr-lang button[data-set-lang="en"],
html[lang="es"] .hdr-lang button[data-set-lang="es"] { opacity: 1; }
.hdr-lang .sep { opacity: .28; }

.btn-cta {
  background: var(--ink); color: var(--paper);
  padding: 15px 24px; border-radius: 14px;
  font-size: clamp(13px,1.14cqw,15px); font-weight: 700;
  white-space: nowrap; flex-shrink: 0; display: inline-block;
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s;
}
.btn-cta:hover, .btn-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -16px rgba(17,17,17,.6);
}

.hdr-mobile-row { margin-left: auto; align-items: center; gap: 16px; }
.hdr-mobile-row { display: contents; }
@media (max-width: 1023.98px) { .hdr-mobile-row { display: flex; } }
@media (min-width: 1024px) { .hdr-mobile-row { display: none; } }
.hdr-lang-mobile {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.hdr-lang-mobile button {
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: var(--ink); opacity: .4;
}
html[lang="en"] .hdr-lang-mobile button[data-set-lang="en"],
html[lang="es"] .hdr-lang-mobile button[data-set-lang="es"] { opacity: 1; }
.hdr-lang-mobile .sep { opacity: .28; }

.hdr-menu-btn {
  width: 44px; height: 44px; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-end; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.hdr-menu-btn span { width: 22px; height: 1.5px; background: var(--ink); display: block; }
.hdr-menu-btn span:last-child { width: 15px; }

.hdr-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  transform-origin: 0 50%;
  background-image: url('../waves/strip.webp'); background-size: 260% 100%;
  animation: progressX linear both, stripSlide 30s linear infinite;
  animation-timeline: scroll(root block), auto;
}

/* ---- Mobile menu overlay ------------------------------------------------ */
.mobile-menu {
  position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 90;
  background: var(--ink); color: var(--paper);
  padding: 28px 24px 40px; display: none; flex-direction: column;
  overflow-y: auto; animation: revealFade .35s ease both;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu-top img { width: 78px; display: block; }
.mobile-menu-close {
  width: 44px; height: 44px; background: none; border: 0; color: var(--paper);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.mobile-menu nav { margin-top: 44px; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu nav a {
  color: var(--paper); font-size: 30px; font-weight: 300; padding: 12px 0;
  letter-spacing: -0.02em; opacity: .85;
}
.mobile-menu nav a.is-current { font-weight: 700; opacity: 1; }
.mobile-menu-cta { margin-top: auto; padding-top: 40px; }
.mobile-menu-cta a {
  display: block; text-align: center; background: var(--paper); color: var(--ink);
  padding: 18px; border-radius: 14px; font-size: 16px; font-weight: 700;
}

/* header[data-site-header] establishes its own stacking context
   (position: sticky + z-index), so .mobile-menu's z-index:90 is only
   ever compared against its OWN siblings inside header — it can never
   out-rank .scroll-cue (z-index:190), which lives outside header, no
   matter how high the menu's local z-index is set. The fix is to raise
   header's own stacking level above the scroll-cue's, but only while
   the menu is actually open, so the closed-state header is untouched. */
header[data-site-header]:has(.mobile-menu.is-open) {
  z-index: 195;
}

/* ==========================================================================
   Desktop / mobile structural variants (replaces the prototype's
   isDesktop/isMobile branching with real CSS at the same 1024px
   breakpoint the header nav switches at). display:contents keeps the
   wrapper out of the box tree so the child's own layout is unaffected.
   ========================================================================== */
.only-desktop { display: contents; }
.only-mobile { display: none; }
@media (max-width: 1023.98px) {
  .only-desktop { display: none; }
  .only-mobile { display: contents; }
}

/* ==========================================================================
   i18n — bilingual content toggled by html[lang]
   ========================================================================== */
[data-en], [data-es] { display: none; }
html[lang="en"] [data-en] { display: inline; }
html[lang="es"] [data-es] { display: inline; }
html[lang="en"] span[data-en][data-block],
html[lang="es"] span[data-es][data-block] { display: block; }

/* ==========================================================================
   Buttons / links (shared across pages)
   ========================================================================== */
.btn-primary {
  background: var(--ink); color: var(--paper);
  padding: clamp(15px,1.98cqw,26.1px) clamp(24px,3.52cqw,46.4px);
  border-radius: 14px; font-size: clamp(14.5px,1.76cqw,23.2px); font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
}
.btn-primary:hover, .btn-primary:focus-visible {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 24px 44px -20px rgba(17,17,17,.62);
}
.btn-secondary {
  border: 1px solid rgba(17,17,17,.26); color: var(--ink);
  padding: clamp(14px,1.87cqw,24.7px) clamp(22px,3.3cqw,43.5px);
  border-radius: 14px; font-size: clamp(14.5px,1.76cqw,23.2px); font-weight: 600;
  display: inline-block;
  transition: background .4s, border-color .4s, transform .5s cubic-bezier(.22,1,.36,1);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background: rgba(17,17,17,.055); border-color: rgba(17,17,17,.6); transform: translateY(-3px);
}
.link-underline {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: clamp(14.5px,1.76cqw,23.2px); font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .35s, transform .45s cubic-bezier(.22,1,.36,1);
}
.link-underline:hover, .link-underline:focus-visible { border-bottom-color: var(--ink); transform: translateX(4px); }

.pulse-wrap { display: inline-block; border-radius: 14px; animation: pulseRing 6s ease-in-out infinite; }
.btn-primary.on-dark:hover, .btn-primary.on-dark:focus-visible {
  box-shadow: 0 0 0 7px rgba(255,193,214,.16), 0 24px 44px -22px rgba(255,214,171,.4);
}

/* ==========================================================================
   Scroll-cue arrow (floating, bottom-center)
   ========================================================================== */
.scroll-cue {
  position: fixed; left: 50%; bottom: 18px; translate: -50% 0; z-index: 190;
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(17,17,17,.14); background: rgba(247,244,240,.72);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 36px -18px rgba(17,17,17,.4);
  animation: cueGlide 4.4s cubic-bezier(.45,0,.55,1) infinite;
  transition: scale .55s cubic-bezier(.22,1,.36,1), box-shadow .55s, background .45s;
}
.scroll-cue:hover, .scroll-cue:focus-visible {
  scale: 1.08; background: rgba(247,244,240,.92); box-shadow: 0 22px 48px -18px rgba(17,17,17,.48);
}
.scroll-cue svg { width: 19px; height: 19px; rotate: var(--dir,0deg); transition: rotate .75s cubic-bezier(.22,1,.36,1); }

/* ==========================================================================
   Brand carousel (marquee)
   ========================================================================== */
.brands-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.brands-track {
  display: flex; width: 200%; align-items: center; will-change: transform;
  /* CSS-driven, not JS/rAF-driven: a rAF loop only ticks while its tab is
     visible/focused, so a visitor who opens this page in a background tab
     (or whose browser throttles hidden-tab timers) would see it frozen
     until they switched to the tab. A native CSS animation has no such
     dependency — the compositor drives it directly and it is already
     running by the time the tab becomes visible. */
  animation: marquee 34s linear infinite;
}
.brands-track.plain .brand-cell {
  flex: 0 0 10%; display: flex; align-items: center; justify-content: center;
  height: clamp(84px,11.42cqw,150.8px);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.brands-track.plain .brand-cell:hover { transform: translateY(-3px); }
.brands-track.plain .brand-cell img {
  max-height: 100%; max-width: 85%; width: auto; height: auto; object-fit: contain;
  display: block; border-radius: 12px;
}
.brands-track.framed .brand-cell {
  flex: 0 0 10%; display: flex; align-items: center; justify-content: center;
  height: clamp(90px,12.52cqw,165.3px); padding: 0 clamp(10px,1.76cqw,23.2px);
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.brands-track.framed .brand-cell:hover { transform: translateY(-3px); }
.brand-card {
  height: 100%; display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
}
.brand-card img { width: auto; max-width: 100%; object-fit: contain; display: block; }

/* ==========================================================================
   Lightbox (image preview) — shared by Home + Work
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center;
  justify-content: center; padding: clamp(24px,5vw,64px);
  background: rgba(17,17,17,0); transition: background .4s ease;
  visibility: hidden; pointer-events: none;
}
.lightbox.is-open { visibility: visible; pointer-events: auto; background: rgba(17,17,17,.55); }
.lightbox-image {
  width: 86vw; height: 82vh; max-width: 1400px;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  border-radius: 10px; filter: drop-shadow(0 30px 70px rgba(0,0,0,.55));
}
.lightbox-caption {
  position: absolute; left: 50%; bottom: clamp(18px,3vw,32px); translate: -50% 0; margin: 0;
  color: rgba(247,244,240,.82); font-size: 13px; font-weight: 600; letter-spacing: .02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.lightbox-close {
  position: absolute; top: clamp(16px,3vw,28px); right: clamp(16px,3vw,28px);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(247,244,240,.3);
  background: rgba(17,17,17,.4); color: var(--paper); font-size: 20px; line-height: 1; cursor: pointer;
}

/* Desktop hover-preview panel (Work page only) */
.hover-preview {
  position: fixed; right: clamp(20px,2.4vw,40px); bottom: clamp(20px,2.4vw,40px); z-index: 250;
  width: min(30vw,380px); height: min(38vh,420px);
  background: rgba(247,244,240,.92); backdrop-filter: blur(16px) saturate(150%);
  border-radius: 16px; box-shadow: 0 40px 80px -30px rgba(17,17,17,.4);
  border: 1px solid rgba(17,17,17,.08); padding: 14px; pointer-events: none;
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.hover-preview.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.hover-preview-img {
  width: 100%; height: calc(100% - 26px); background-size: contain;
  background-position: center; background-repeat: no-repeat; border-radius: 10px;
}
.hover-preview-cap {
  margin: 8px 0 0; font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 1023.98px) { .hover-preview { display: none !important; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer-zone { position: relative; background: var(--ink); color: var(--paper); overflow-x: visible; overflow-y: clip; }
.site-footer-strip { height: 3px; background-image: url('../waves/strip.webp'); background-size: 200% 100%; animation: stripSlide 34s linear infinite; }
.site-footer {
  position: relative; z-index: 2; max-width: 1320px; margin: 0 auto;
  padding: 0 clamp(20px,5.27cqw,69.6px) clamp(32px,5.27cqw,69.6px);
}
.site-footer .rule { height: 1px; background: rgba(247,244,240,.12); }
.footer-cols { display: flex; flex-wrap: wrap; gap: clamp(32px,5.27cqw,69.6px); padding: clamp(48px,9.89cqw,130.5px) 0 clamp(40px,7.03cqw,92.8px); }
.footer-cols.no-top-pad { padding-top: 0; }
.footer-col-brand { flex: 1 1 280px; min-width: 0; }
.footer-col-brand img { width: clamp(84px,10.98cqw,145px); display: block; }
.footer-col-brand p { margin: clamp(20px,3.08cqw,40.6px) 0 0; max-width: 300px; font-size: clamp(13.5px,1.65cqw,21.8px); line-height: 1.6; color: rgba(247,244,240,.72); }
.footer-col { flex: 1 1 190px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col.narrow { flex: 1 1 150px; }
.footer-col a, .footer-col p { color: rgba(247,244,240,.78); font-size: clamp(13.5px,1.65cqw,21.8px); align-self: flex-start; border-bottom: 1px solid transparent; transition: color .35s, border-color .35s; }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--paper); border-bottom-color: rgba(247,244,240,.5); }
.footer-col p { margin: 0; line-height: 1.6; color: rgba(247,244,240,.72); }
.footer-copy { margin: clamp(20px,3.08cqw,40.6px) 0 0; font-size: clamp(12.5px,1.54cqw,20.3px); color: rgba(247,244,240,.5); }

/* ==========================================================================
   Closing CTA (dark zone, word-by-word reveal)
   ========================================================================== */
.closing-cta { position: relative; z-index: 2; padding: clamp(84px,17.58cqw,232px) clamp(20px,5.27cqw,69.6px) clamp(56px,8.79cqw,116px); text-align: center; }
.closing-cta-inner { max-width: 760px; margin: 0 auto; }
.closing-cta h2 {
  margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(31px,6.15cqw,81.2px); line-height: 1.1; letter-spacing: -0.015em; color: var(--paper);
}
.closing-cta h2 span { display: inline-block; }
.closing-cta .cta-row { margin-top: clamp(34px,5.27cqw,69.6px); }

/* ==========================================================================
   Generic hover utilities — every distinct :hover treatment used anywhere
   on the site reduces to one of these (deduped from the approved source).
   Combine classes on an element instead of writing one-off hover rules.
   ========================================================================== */
.hov-op1 { transition: opacity .3s; }
.hov-op1:hover, .hov-op1:focus-visible { opacity: 1; }
.hov-paper { transition: color .35s, border-color .35s; }
.hov-paper:hover, .hov-paper:focus-visible { color: var(--paper); border-bottom-color: rgba(247,244,240,.5); }
.hov-up3 { transition: transform .55s cubic-bezier(.22,1,.36,1); }
.hov-up3:hover, .hov-up3:focus-visible { transform: translateY(-3px); }
.hov-shadow-tile { transition: box-shadow .7s; }
.hov-shadow-tile:hover, .hov-shadow-tile:focus-visible { box-shadow: 0 30px 60px -30px rgba(17,17,17,.32); }
.hov-lift8-shadow { transition: translate .7s cubic-bezier(.22,1,.36,1), box-shadow .7s; }
.hov-lift8-shadow:hover, .hov-lift8-shadow:focus-visible { translate: 0 -8px; box-shadow: 0 30px 60px -30px rgba(17,17,17,.35); }
.hov-chip { transition: border-color .45s, translate .5s cubic-bezier(.22,1,.36,1); }
.hov-chip:hover, .hov-chip:focus-visible { border-color: rgba(17,17,17,.55); translate: 0 -3px; }
.hov-service-card { transition: translate .65s cubic-bezier(.22,1,.36,1), border-color .5s; }
.hov-service-card:hover, .hov-service-card:focus-visible { translate: 0 -7px; border-color: rgba(17,17,17,.45); }
.hov-jump-link { transition: padding-left .55s cubic-bezier(.22,1,.36,1), opacity .4s; }
.hov-jump-link:hover, .hov-jump-link:focus-visible { padding-left: 12px; opacity: .62; }
.hov-plan-teaser-card { transition: border-color .45s, translate .6s cubic-bezier(.22,1,.36,1), box-shadow .6s, background-position 1.3s ease; }
.hov-plan-teaser-card:hover, .hov-plan-teaser-card:focus-visible { border-color: rgba(17,17,17,.42); translate: 0 -6px; background-position: -34% 0; box-shadow: 0 26px 50px -28px rgba(17,17,17,.28); }
.hov-outline-fill { transition: background .35s, border-color .35s; }
.hov-outline-fill:hover, .hov-outline-fill:focus-visible { background: rgba(17,17,17,.05); border-color: rgba(17,17,17,.6); }
.hov-email-link { transition: border-color .35s, opacity .35s; }
.hov-email-link:hover, .hov-email-link:focus-visible { border-bottom-color: var(--ink); opacity: .75; }
.hov-view-badge { opacity: 0; transition: opacity .35s; }
[data-lightbox-trigger]:hover .hov-view-badge,
[data-lightbox-trigger]:focus-visible .hov-view-badge { opacity: 1; }

/* ==========================================================================
   Decorative full-bleed wave layers
   ========================================================================== */
.deco { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; overflow: clip; }
.deco img { display: block; }
.sheen {
  position: absolute; inset: -25% -45%; mix-blend-mode: overlay;
  background: linear-gradient(101deg, transparent 43%, rgba(255,255,255,.5) 50%, transparent 57%);
  animation: sheenSweep 22s ease-in-out infinite;
}

/* ==========================================================================
   Mobile wave (.wave-m) — the approved static wave artwork, composed per
   page on <=1023px. A real positioned box (the old display:contents wrapper
   lost its inline positioning and collapsed into a strip under the header).
   Same image, uniform scale, no animation; edges dissolve through a radial
   mask so there is no hard seam. Desktop never renders it.
   Tune per page with --wm-w (width), --wm-x (left), --wm-y (top),
   --wm-o (opacity), --wm-flip (1 or -1, mirrors left/right).
   ========================================================================== */
.wave-m { display: none; }
@media (max-width: 1023.98px) {
  .wave-m {
    display: block; position: absolute; pointer-events: none;
    width: var(--wm-w, 150%); left: var(--wm-x, -25%); top: var(--wm-y, 40%);
    opacity: var(--wm-o, .6);
    transform: scaleX(var(--wm-flip, 1));
  }
  .wave-m img {
    display: block; width: 100%; height: auto;
    -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 52%, transparent 100%);
    mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 52%, transparent 100%);
  }
  /* Hero decorations dissolve into the page at the section's bottom edge so
     blurred glows are never cut off in a hard line. */
  .deco:has(.wave-m) {
    -webkit-mask-image: linear-gradient(#000 0, #000 80%, transparent 100%);
    mask-image: linear-gradient(#000 0, #000 80%, transparent 100%);
  }
  /* Services' mid-page wave band is clipped to a short box; feather its top and
     bottom edges on mobile so it doesn't read as a hard-cut strip. */
  .wave-band {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
  }
  .wave-m--home     { --wm-w: 168%; --wm-x: -34%; --wm-y: 53%; --wm-o: .78; --wm-flip: 1; }
  .wave-m--services { --wm-w: 190%; --wm-x: -46%; --wm-y: 50%; --wm-o: .66; --wm-flip: -1; }
  .wave-m--work     { --wm-w: 150%; --wm-x: -14%; --wm-y: 12%; --wm-o: .6;  --wm-flip: -1; }
  .wave-m--studio   { --wm-w: 190%; --wm-x: -40%; --wm-y: 40%; --wm-o: .62; --wm-flip: 1; }
  .wave-m--contact  { --wm-w: 150%; --wm-x: -44%; --wm-y: 3%;  --wm-o: .55; --wm-flip: 1; }
  .wave-m--plans    { --wm-w: 160%; --wm-x: -30%; --wm-y: 40%; --wm-o: .5;  --wm-flip: -1; }
}
}

/* ==========================================================================
   Section reveal helper
   ========================================================================== */
.section { position: relative; }

/* ==========================================================================
   Contact form
   ========================================================================== */
.form-field { display: block; }
.form-field label {
  display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--ink-faint);
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(17,17,17,.16); background: var(--card);
  font-size: 15px; color: var(--ink); outline: none;
  transition: border-color .3s, box-shadow .3s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,193,214,.28);
}
.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select { border-color: var(--error); }
.form-error { margin: 7px 0 0; font-size: 12.5px; color: var(--error); animation: errorIn .3s ease both; }
.form-field select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23111111" stroke-width="1.6"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.form-field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.form-submit {
  margin-top: 4px; width: 100%; background: var(--ink); color: var(--paper);
  padding: 16px; border: 0; border-radius: 12px; font-size: 15.5px; font-weight: 700;
  cursor: pointer; transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s;
}
.form-submit:hover, .form-submit:focus-visible { transform: translateY(-2px); box-shadow: 0 20px 36px -18px rgba(17,17,17,.5); }
.form-submit:focus-visible { box-shadow: 0 0 0 4px rgba(255,193,214,.4); }

.form-success { padding: clamp(24px,4.39cqw,58px) 0; text-align: center; animation: fieldIn .5s cubic-bezier(.22,1,.36,1) both; display: none; }
.form-success.is-visible { display: block; }
.form-success .check {
  display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: var(--ink);
  align-items: center; justify-content: center; margin-bottom: clamp(18px,2.64cqw,34.8px);
}
.form-success h2 { margin: 0; font-size: clamp(18px,2.42cqw,31.9px); font-weight: 700; letter-spacing: -0.015em; }
.form-success p { margin: clamp(12px,1.76cqw,23.2px) auto 0; max-width: 38ch; font-size: clamp(14.5px,1.76cqw,23.2px); line-height: 1.6; color: var(--ink-soft); }
.form-success a { display: inline-flex; margin-top: clamp(18px,2.64cqw,34.8px); font-size: 14.5px; font-weight: 700; border-bottom: 1px solid rgba(17,17,17,.35); transition: border-color .35s, opacity .35s; }
.form-success a:hover { border-bottom-color: var(--ink); opacity: .75; }
.contact-form-wrap.is-submitted form { display: none; }

/* visually-hidden utility (honeypot / skip link) */
.visually-hidden {
  position: absolute !important; 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: 12px; top: -60px; z-index: 1000;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 10px;
  transition: top .25s ease;
}
.skip-link:focus { top: 12px; }