/* ============================================================
   FINERIES DIGITAL — V3 design language
   Blue hero · teal lead accent · structured agency layout.
   Built on brand tokens (tokens.css): Sora + Manrope, brand colors.
   ============================================================ */

@import url('tokens.css');

:root {
  --v3-blue:   #3C4099;
  --v3-blue-d: #2E3178;   /* deeper blue for gradients */
  --v3-blue-dd:#20224F;
  --v3-hero-bg:#3C4099;   /* hero field — brand blue */
  --v3-teal:   #08BCB3;
  --v3-teal-d: #068A83;
  --v3-gold:   #FFC80C;
  --v3-magenta:#C01891;

  --v3-ink:    #1B1D45;   /* headings — blue-900 */
  --v3-text:   #56586F;   /* body */
  --v3-text-2: #8A8CA0;   /* muted / meta */
  --v3-line:   #E6E7F0;
  --v3-mist:   #F4F5FA;   /* light-gray section */
  --v3-paper:  #FFFFFF;

  --v3-ease: cubic-bezier(.22,.61,.36,1);
  --v3-maxw: 1240px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--v3-paper);
  color: var(--v3-text);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
::selection { background: var(--v3-teal); color: #fff; }
:focus-visible { outline: 2px solid var(--v3-teal); outline-offset: 3px; border-radius: 3px; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--v3-maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.sec { padding: clamp(72px, 9vw, 130px) 0; }

/* ---------- Type helpers ---------- */
.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--v3-teal);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::after { content: none; }
.eyebrow--center { justify-content: center; }
.on-blue .eyebrow { color: var(--v3-teal); }

.h-xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--v3-ink);
}
.h-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--v3-ink);
}
.h-md {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--v3-ink);
}
.lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; color: var(--v3-text); }
.body { font-size: 16px; line-height: 1.75; color: var(--v3-text); }
.teal { color: var(--v3-teal); }
.on-blue .h-xl, .on-blue .h-lg, .on-blue .h-md { color: #fff; }
.on-blue .lead, .on-blue .body { color: rgba(255,255,255,.82); }

/* ---------- Buttons ---------- */
.btn3 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1.5px solid var(--v3-ink);
  color: var(--v3-ink);
  background: transparent;
  cursor: pointer;
  transition: background .3s var(--v3-ease), color .3s var(--v3-ease), border-color .3s;
  white-space: nowrap;
}
.btn3 svg { width: 15px; height: 15px; transition: transform .3s var(--v3-ease); }
.btn3:hover { background: var(--v3-ink); color: #fff; }
.btn3:hover svg { transform: translateX(4px); }
.btn3--teal { border-color: var(--v3-teal); color: var(--v3-teal); }
.btn3--teal:hover { background: var(--v3-teal); color: #fff; }
.btn3--solid { background: var(--v3-teal); border-color: var(--v3-teal); color: #fff; }
.btn3--solid:hover { background: #fff; color: var(--v3-ink); border-color: #fff; }
.on-blue .btn3 { border-color: rgba(255,255,255,.5); color: #fff; }
.on-blue .btn3:hover { background: #fff; color: var(--v3-ink); border-color: #fff; }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v3-teal);
  transition: gap .25s var(--v3-ease);
}
.tlink svg { width: 15px; height: 15px; }
.tlink:hover { gap: 14px; }

/* circular arrow button */
.circ {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1.5px solid var(--v3-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--v3-teal);
  flex-shrink: 0;
  transition: background .3s var(--v3-ease), color .3s, transform .3s;
}
.circ svg { width: 22px; height: 22px; }
.circ:hover { background: var(--v3-teal); color: #fff; }
.on-blue .circ { border-color: rgba(255,255,255,.4); color: #fff; }
.on-blue .circ:hover { background: #fff; color: var(--v3-blue); }

/* ---------- Duotone imagery ---------- */
.media { position: relative; overflow: hidden; background: var(--v3-mist); border-radius: 4px; }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.duo { isolation: isolate; }
/* color tint / duotone / greyscale removed — images render in natural color */
.duo img { filter: none; }
.duo--teal, .duo--blue, .duo--magenta { background: var(--v3-mist); }
.duo--teal img, .duo--blue img, .duo--magenta img { mix-blend-mode: normal; }
.gs img { filter: none; }
.media.is-failed img { opacity: 0; }
.media.is-failed { background: linear-gradient(150deg, var(--v3-blue) 0%, var(--v3-blue-dd) 100%); }

/* ---------- Nav ---------- */
.nav3 {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background .35s var(--v3-ease), box-shadow .35s, transform .4s var(--v3-ease);
}
.nav3__inner {
  max-width: var(--v3-maxw);
  margin: 0 auto;
  padding: 22px clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav3__logo img { height: 26px; width: auto; }
.nav3__logo .logo-blue { display: none; }
.nav3__links { display: flex; gap: 30px; margin-left: auto; align-items: center; }
.nav3__link {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  transition: color .2s;
  position: relative;
  padding: 4px 0;
}
.nav3__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--v3-teal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--v3-ease);
}
.nav3__link:hover { color: #fff; }
.nav3__link:hover::after, .nav3__link--active::after { transform: scaleX(1); }
.nav3__link--active { color: #fff; }
.nav3__burger { display: none; margin-left: auto; background: none; border: none; color: #fff; cursor: pointer; padding: 4px; }
.nav3__burger svg { width: 26px; height: 26px; }

/* scrolled / light-page state */
.nav3.is-solid {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--v3-line);
}
.nav3.is-solid .logo-white { display: none; }
.nav3.is-solid .logo-blue { display: block; }
.nav3.is-solid .nav3__link { color: var(--v3-text); }
.nav3.is-solid .nav3__link:hover, .nav3.is-solid .nav3__link--active { color: var(--v3-ink); }
.nav3.is-solid .nav3__burger { color: var(--v3-ink); }
.nav3.is-hidden { transform: translateY(-100%); }

/* ---------- Mobile menu: 90% blue panel over a brand-yellow backing ---------- */
.mnav {
  position: fixed; inset: 0; z-index: 300;
  color: #fff;
  visibility: hidden;
  transition: visibility 0s linear .72s;
}
.mnav.open { visibility: visible; transition: visibility 0s; }
/* dark scrim — the page shows through, darkened, on the left ~10% */
.mnav__backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 19, 42, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0;
  /* CLOSING: fade out only after the panel has slid away */
  transition: opacity .35s var(--v3-ease) .34s;
}
/* OPENING: scrim darkens the screen first */
.mnav.open .mnav__backdrop { opacity: 1; transition: opacity .3s var(--v3-ease) 0s; }
/* blue panel — 90% width */
.mnav__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 90%;
  background: var(--v3-blue);
  display: flex; flex-direction: column;
  padding: 20px clamp(22px, 6vw, 40px) calc(env(safe-area-inset-bottom, 0px) + 34px);
  overflow-y: auto;
  box-shadow: -18px 0 50px rgba(27, 29, 69, .28);
  transform: translateX(100%);
  /* CLOSING: panel slides out first, no delay */
  transition: transform .45s var(--v3-ease) 0s;
}
/* OPENING: panel slides in after the scrim has darkened */
.mnav.open .mnav__panel { transform: none; transition: transform .5s var(--v3-ease) .24s; }
.mnav__top { display: flex; align-items: center; justify-content: space-between; }
.mnav__logo img { height: 26px; width: auto; display: block; }
.mnav__close { background: none; border: none; color: #fff; cursor: pointer; padding: 6px; margin: -6px; line-height: 0; }
.mnav__links { margin-top: clamp(30px, 7vh, 70px); display: flex; flex-direction: column; }
.mnav__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(13px, 2vh, 19px) 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 8.6vw, 40px); line-height: 1.05; letter-spacing: -.02em;
  color: #fff;
  /* reveal: items ease in from the right (echoing the panel slide) + fade */
  opacity: 0; transform: translateX(40px);
}
.mnav.open .mnav__links a {
  opacity: 1; transform: none;
  transition: opacity .6s var(--v3-ease), transform .7s var(--v3-ease);
}
.mnav.open .mnav__links a:nth-child(1) { transition-delay: .20s; }
.mnav.open .mnav__links a:nth-child(2) { transition-delay: .27s; }
.mnav.open .mnav__links a:nth-child(3) { transition-delay: .34s; }
.mnav.open .mnav__links a:nth-child(4) { transition-delay: .41s; }
.mnav.open .mnav__links a:nth-child(5) { transition-delay: .48s; }
.mnav.open .mnav__links a:nth-child(6) { transition-delay: .55s; }
.mnav__links a em {
  font-family: var(--font-text); font-style: normal; font-weight: 500;
  font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.4);
}
.mnav__foot { margin-top: auto; padding-top: 34px; opacity: 0; transform: translateY(14px); }
.mnav.open .mnav__foot { opacity: 1; transform: none; transition: opacity .6s var(--v3-ease) .55s, transform .6s var(--v3-ease) .55s; }
.mnav__rule { display: block; width: 40px; height: 2px; background: rgba(255,255,255,.45); margin-bottom: 20px; }
.mnav__lockup { display: block; width: clamp(190px, 58vw, 250px); height: auto; margin-bottom: 26px; }
.mnav__social { display: flex; gap: 20px; align-items: center; }
.mnav__social a { color: rgba(255,255,255,.85); display: inline-flex; transition: color .2s; }
.mnav__social a:hover { color: #fff; }
body.mnav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero3 {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  background: var(--v3-hero-bg);
  overflow: hidden;
  color: #fff;
}
.hero3__couple {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: min(92vh, 900px);
  width: auto;
  max-width: none;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  animation: heroCouple 1.3s .05s both var(--v3-ease);
}
@keyframes heroCouple {
  from { opacity: 0; transform: translate(-50%, 26px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.hero3__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: clamp(250px, 42vh, 430px) 0 70px;
}
.hero3__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.6vw, 53px);
  line-height: 1.08;
  letter-spacing: -.03em;
  max-width: 15ch;
  margin: 0 auto;
  animation: heroUp 1s .15s both var(--v3-ease);
}
.hero3__sub { animation: heroUp 1s .38s both var(--v3-ease); }
.hero3__watch { animation: heroUp 1s .55s both var(--v3-ease); }
@keyframes heroUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.hero3__rot { color: var(--v3-teal); display: inline-block; will-change: transform, opacity; }
.hero3__sub {
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.6;
  color: rgba(255,255,255,.86);
  max-width: 54ch;
  margin: clamp(22px, 3vw, 34px) auto 0;
}
.hero3__watch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: clamp(34px, 4.5vw, 56px);
  color: #fff;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.hero3__watch .play {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #fff;
  color: var(--v3-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .3s var(--v3-ease);
}
.hero3__watch .play svg { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
.hero3__watch .play::before {
  content: ""; position: absolute; inset: -8px;
  border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4);
  animation: pulse 2.4s ease-out infinite;
}
.hero3__watch:hover .play { transform: scale(1.08); }
.hero3__watch span { font-size: 15px; font-weight: 600; letter-spacing: .01em; color: rgba(255,255,255,.92); }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }

/* Mobile hero: full-bleed couple with the headline overlaid (like desktop),
   but sized by width so both are visible (not cropped), and a bigger headline */
@media (max-width: 640px) {
  /* Couple is a normal-flow, full-width image so it DEFINES the hero height and
     ends flush at the hero's bottom (never floating). The copy is overlaid on the
     lower portion — over the hands/torso, clear of the faces. */
  /* padding-top adds blue headroom above the couple so the hero is taller,
     while the couple stays bottom-anchored and the copy stays clear of the faces */
  .hero3 { min-height: 0; display: block; padding-top: 11vh; }
  .hero3__couple {
    position: static; display: block;
    width: 100%; height: auto; max-width: none;
    transform: none; animation: none;
  }
  .hero3__inner {
    position: absolute; left: 0; bottom: 0; z-index: 2;
    width: 100%; padding: 0 16px 32px;
  }
  .hero3__title { font-size: clamp(34px, 9.2vw, 46px); line-height: 1.06; max-width: 100%; }
  .hero3__sub { margin-top: 12px; }
  .hero3__watch { margin-top: 18px; gap: 12px; }
  .hero3__watch .play { width: 64px; height: 64px; }
}

/* ---------- Video modal ---------- */
.vmodal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(16, 14, 45, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.vmodal.is-open { display: flex; animation: vfade .3s var(--v3-ease); }
@keyframes vfade { from { opacity: 0; } to { opacity: 1; } }
.vmodal__frame {
  position: relative;
  display: inline-block;
  max-width: min(1040px, 92vw);
  max-height: 86vh;
  min-width: min(280px, 80vw);
  line-height: 0;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,.5);
}
.vmodal.is-open .vmodal__frame { animation: vpop .5s .04s var(--v3-ease) both; }
@keyframes vpop {
  from { opacity: 0; transform: scale(.94) translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.vmodal__frame video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1040px, 92vw);
  max-height: 86vh;
  background: #000;
}
.vmodal__status {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 76px 28px 48px; background: #11112f; color: #fff;
  font-size: 15px; font-weight: 700; line-height: 1.45; letter-spacing: .02em; text-align: center;
}
.vmodal__status[hidden] { display: none; }
.vmodal__spinner {
  width: 50px; height: 50px; border: 3px solid rgba(255,255,255,.22); border-top-color: var(--v3-teal);
  border-radius: 50%; animation: vspin .8s linear infinite;
}
.vmodal[data-video-state="error"] .vmodal__spinner { display: none; }
@keyframes vspin { to { transform: rotate(360deg); } }
.vmodal__close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s var(--v3-ease), background .25s;
}
.vmodal__close:hover { transform: rotate(90deg); background: var(--v3-teal); color: #fff; }
@media (max-width: 800px) {
  .vmodal__frame { max-width: 96vw; }
  .vmodal__frame video { max-width: 96vw; }
}
@media (prefers-reduced-motion: reduce) {
  .vmodal__spinner { animation-duration: 1.6s; }
}

.hero3__scroll {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero3__scroll i { width: 1px; height: 34px; background: linear-gradient(rgba(255,255,255,.5), transparent); }

/* ---------- What We Do ---------- */
.wwd__grid {
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 3.2fr) minmax(0, 4.4fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.wwd__intro .h-lg { margin: 18px 0 22px; }
.wwd__intro .body + .body { margin-top: 14px; }
.wwd__intro .btn3 { margin-top: 30px; }
.wwd__figure { aspect-ratio: 3 / 4; border-radius: 6px; }
.wwd__list { display: flex; flex-direction: column; }
.svc-item {
  display: grid;
  grid-template-columns: 42px 1fr 30px;
  gap: 16px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--v3-line);
  transition: padding-left .3s var(--v3-ease);
}
.svc-item:last-child { border-bottom: 1px solid var(--v3-line); }
.svc-item:hover { padding-left: 8px; }
.svc-item__num { font-size: 13px; font-weight: 800; color: var(--v3-teal); letter-spacing: .05em; padding-top: 3px; }
.svc-item__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--v3-ink); margin-bottom: 5px; transition: color .25s; }
.svc-item__desc { font-size: 14px; line-height: 1.55; color: var(--v3-text-2); }
.svc-item__arrow { color: var(--v3-line); padding-top: 3px; transition: color .25s, transform .3s var(--v3-ease); }
.svc-item__arrow svg { width: 18px; height: 18px; }
.svc-item:hover .svc-item__title { color: var(--v3-teal); }
.svc-item:hover .svc-item__arrow { color: var(--v3-teal); transform: translateX(4px); }

/* ---------- Philosophy split ---------- */
.philo3 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
.philo3__panel { background: var(--v3-teal); color: #fff; padding: clamp(40px, 6vw, 88px); display: flex; flex-direction: column; justify-content: center; }
.philo3__panel .eyebrow { color: rgba(255,255,255,.85); }
.philo3__panel .eyebrow::after { background: rgba(255,255,255,.85); }
.philo3__panel .h-lg { color: #fff; margin: 20px 0 24px; }
.philo3__panel .body { color: rgba(255,255,255,.9); }
.philo3__panel .body strong { color: #fff; font-weight: 800; }
.philo3__panel .tlink { color: #fff; margin-top: 30px; }
.philo3__visual { position: relative; min-height: 460px; overflow: hidden; isolation: isolate; }
.philo3__visual > .media { position: absolute; inset: 0; border-radius: 0; }
.philo3__visual .media img { filter: none; }
.philo3__visual::after { content: none; }
.philo3__rings {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(6px, 1.4vw, 20px);
  padding: 40px clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
}
.ring {
  width: clamp(128px, 15vw, 172px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid #08bcb3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 16px;
  color: #fff;
  backdrop-filter: blur(4px);
  background: rgba(27,29,69,.42);
}
.ring h4 { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
.ring p { font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.85); }
.ring__plus { color: #fff; font-size: 24px; font-weight: 300; opacity: .8; }

/* ---------- Business value ---------- */
.bv__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(40px, 5vw, 68px); }
.bv__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(20px, 2.5vw, 36px); }
.bv-item { }
.bv-item__icon { width: 40px; height: 40px; color: var(--v3-teal); margin-bottom: 18px; }
.bv-item__icon svg { width: 32px; height: 32px; stroke-width: 1.6; }
.bv-item__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--v3-ink); margin-bottom: 8px; }
.bv-item__title sup { color: var(--v3-teal); font-size: .6em; }
.bv-item__desc { font-size: 14px; line-height: 1.6; color: var(--v3-text-2); }

/* ---------- Statement band (a different kind of agency) ---------- */
.statement { text-align: center; }
.statement .h-lg { max-width: 20ch; margin: 22px auto 0; }
.statement__rows { max-width: 60ch; margin: clamp(28px, 3.5vw, 44px) auto 0; display: grid; gap: 12px; }
.statement__rows p { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.5; color: var(--v3-text); font-family: var(--font-display); font-weight: 500; }
.statement__rows p strong { color: var(--v3-ink); font-weight: 800; }

/* ---------- Selected work ---------- */
.work3__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.work3__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2vw, 28px); }
.wc3 { display: flex; flex-direction: column; }
.wc3__figure { aspect-ratio: 4 / 5; border-radius: 6px; margin-bottom: 18px; }
.wc3__figure img { transition: transform .7s var(--v3-ease); }
.wc3:hover .wc3__figure img { transform: scale(1.05); }
.wc3__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--v3-ink); margin-bottom: 8px; }
.wc3__desc { font-size: 14px; line-height: 1.55; color: var(--v3-text-2); margin-bottom: 16px; flex: 1; }
.wc3__link { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--v3-teal); display: inline-flex; align-items: center; gap: 8px; }
.wc3__link svg { width: 14px; height: 14px; transition: transform .25s var(--v3-ease); }
.wc3:hover .wc3__link svg { transform: translateX(4px); }

/* ---------- Digital feature ---------- */
.digital { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.digital__figure { aspect-ratio: 5 / 4; border-radius: 6px; }
.digital .h-lg { margin: 18px 0 22px; }
.digital .btn3 { margin-top: 28px; }

/* ---------- Why Fineries ---------- */
.why3 { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 3.6fr) minmax(0, 3.8fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.why3__body .body + .body { margin-top: 14px; }
.why3__figure { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; }
.why3__figure::before {
  content: ""; position: absolute; left: -14px; bottom: -14px;
  width: 46%; height: 46%; background: var(--v3-teal); border-radius: 6px; z-index: -1;
}
.why3__link { margin-top: 26px; }

/* ---------- Final CTA ---------- */
.cta3 {
  background: radial-gradient(120% 120% at 20% 0%, var(--v3-blue) 0%, var(--v3-blue-d) 60%, var(--v3-blue-dd) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta3__inner { padding: clamp(80px, 11vw, 160px) 0; position: relative; z-index: 2; }
.cta3__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cta3__title { font-size: clamp(38px, 6vw, 82px); }
.cta3__list { display: grid; gap: 10px; }
.cta3__list p { font-size: clamp(16px, 1.7vw, 20px); color: rgba(255,255,255,.75); font-family: var(--font-display); font-weight: 500; }
.cta3__action { display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.cta3__action span { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cta3__wm {
  position: absolute; right: -60px; bottom: -80px; width: 520px; max-width: 50%;
  opacity: .05; z-index: 1; pointer-events: none;
}

/* ---------- Footer ---------- */
.foot3 { background: var(--v3-blue-dd); color: #fff; }
.foot3__main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); padding: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 60px); }
.foot3__logo img { height: 28px; }
.foot3__tag { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; margin-top: 22px; max-width: 20ch; line-height: 1.3; }
.foot3__social { display: flex; gap: 12px; margin-top: 26px; }
.foot3__social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; transition: background .25s, border-color .25s, transform .25s, color .25s; }
.foot3__social a:hover { background: var(--v3-teal); border-color: var(--v3-teal); color: #fff; transform: translateY(-3px); }
.foot3__social svg { width: 16px; height: 16px; }
.foot3__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; }
.foot3__col h4 { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--v3-teal); margin-bottom: 18px; }
.foot3__col a, .foot3__col span { display: block; font-size: 14.5px; color: rgba(255,255,255,.7); padding: 6px 0; transition: color .2s; }
.foot3__col a:hover { color: #fff; }
.foot3__place { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff; }
.foot3__place span { display: block; font-family: var(--font-text); font-weight: 400; font-size: 13px; color: rgba(255,255,255,.55); }
.foot3__bar { border-top: 1px solid rgba(255,255,255,.12); padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.5); }
.foot3__bar-links { display: flex; gap: 24px; }
.foot3__bar-links a:hover { color: #fff; }

/* ---------- Reveal (IntersectionObserver + CSS — robust) ---------- */
[data-rv], [data-rv-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--v3-ease), transform .8s var(--v3-ease);
}
[data-rv].in, [data-rv-stagger].in > * { opacity: 1; transform: none; }
[data-rv-stagger].in > *:nth-child(2) { transition-delay: .08s; }
[data-rv-stagger].in > *:nth-child(3) { transition-delay: .16s; }
[data-rv-stagger].in > *:nth-child(4) { transition-delay: .24s; }
[data-rv-stagger].in > *:nth-child(5) { transition-delay: .32s; }
.reduced-motion [data-rv], .reduced-motion [data-rv-stagger] > * {
  opacity: 1 !important; transform: none !important; transition: none;
}
.reduced-motion .hero3__title, .reduced-motion .hero3__sub, .reduced-motion .hero3__watch { animation: none; }

/* ---------- Cursor ---------- */
.cur { display: none !important; }
@media (hover: none), (pointer: coarse) { .cur { display: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .wwd__grid { grid-template-columns: 1fr 1fr; }
  .wwd__figure { grid-row: 1 / 3; grid-column: 2; aspect-ratio: 3/4; align-self: stretch; }
  .wwd__intro { grid-column: 1; }
  .wwd__list { grid-column: 1 / -1; }
  .bv__grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .work3__grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .why3 { grid-template-columns: 1fr 1fr; }
  .why3__figure { grid-column: 2; grid-row: 1 / 3; }
}
@media (max-width: 860px) {
  .nav3__links { display: none; }
  .nav3__burger { display: block; }
  .philo3 { grid-template-columns: 1fr; }
  .philo3__visual { min-height: 380px; }
  .bv__head, .digital, .cta3__grid { grid-template-columns: 1fr; }
  .cta3__grid { gap: 40px; }
  .foot3__main { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .wwd__grid { grid-template-columns: 1fr; }
  .wwd__figure { grid-column: 1; grid-row: auto; aspect-ratio: 4/3; }
  .bv__grid { grid-template-columns: 1fr 1fr; }
  .work3__grid { grid-template-columns: 1fr; }
  .why3 { grid-template-columns: 1fr; }
  .why3__figure { grid-column: 1; grid-row: auto; }
  .foot3__cols { grid-template-columns: 1fr 1fr; }
  .svc-item__desc { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hero3__watch .play::before { animation: none; }
  .mnav__links a { opacity: 1; transform: none; }
  .mnav__foot { opacity: 1; transform: none; }
}

/* ---------- Service-page SVG hero (full-bleed animated artwork) ---------- */
.svghero{position:relative;width:100%;overflow:hidden;background:var(--v3-blue);line-height:0}
.svghero__art{width:100%;height:clamp(420px,72vh,760px)}
.svghero__art .svc-art{width:100%;height:100%;position:relative}
.svghero__art .svc-art__svg{display:block;width:100%;height:100%}
@media(max-width:640px){.svghero__art{height:clamp(260px,52vh,460px)}}