/* Sections 02-12, ported verbatim from the index.html build.
   Every selector is machine-scoped to the .v3 wrapper, so this design's own
   reset, tokens and generic class names (.card .tag .section .container)
   cannot reach the older scenes above it on the page.
   Generated from assets/v3-src.css. Do not hand-edit: regenerate instead. */

/* ===== SOURCE: tokens.css ===== */
/* ============================================
   NAFIS PORTFOLIO v3 — Design Tokens
   FintechX mood · Viper structure · Martin Luke personality
   ============================================ */

.v3{
  /* ---- Color ---- */
  --bg: #FAFAF7;
  --bg-soft: #F1F1EC;
  --white: #FFFFFF;
  --ink: #111114;
  --ink-muted: #6B6B73;
  --accent: #FF5A1F;
  --accent-soft: #FFECE4;
  --sky-from: #8FC1FF;
  --sky-to: #DDEBFF;
  --glass: rgba(255, 255, 255, 0.55);
  --hairline: rgba(17, 17, 20, 0.10);

  /* derived */
  --accent-deep: #E64A12;
  --success: #35C46A;
  --sky-gradient: linear-gradient(180deg, var(--sky-from) 0%, var(--sky-to) 100%);
  --meadow-green: #7ECB6F;
  --meadow-green-deep: #58B24A;

  /* ---- Type ---- */
  --font-display: "Inter Tight", system-ui, -apple-system, sans-serif;
  /* the handwritten accent - .script in headings, .about-card__sign */
  --font-script: "Caveat", cursive;
  /* Archivo, not Inter: Inter is never enqueued, so the whole band
     was silently falling back to system-ui while the rest of the site
     ran on Archivo. Same family now, one type system. */
  --font-body: "Red Hat Mono", ui-monospace, SFMono-Regular, monospace;

  --h1: clamp(3.5rem, 9vw, 8rem);
  --h2: clamp(2.5rem, 5vw, 4.5rem);
  --h3: clamp(1.5rem, 2.5vw, 2.25rem);
  --body: 1.0625rem;      /* 17px */
  --meta: 0.8125rem;      /* 13px */

  /* ---- Space / Shape ---- */
  --space-section: clamp(5rem, 10vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max-w: 1440px;
  --radius-card: 24px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-card: 0 2px 6px rgba(17, 17, 20, 0.04), 0 18px 40px -18px rgba(17, 17, 20, 0.14);
  --shadow-pill: 0 1px 2px rgba(17, 17, 20, 0.08), 0 10px 24px -12px rgba(17, 17, 20, 0.22);
  --shadow-float: 0 24px 60px -20px rgba(17, 17, 20, 0.22);

  /* ---- Motion (Phase 2 hooks) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.45s;
}

/* ===== SOURCE: base.css ===== */
/* ============================================
   Base — reset, type ramp, utilities, image slots
   ============================================ */

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

.v3{
  scroll-behavior: smooth;
}

.v3{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.v3 img, .v3 svg, .v3 video{
  display: block;
  max-width: 100%;
}

.v3 a{
  color: inherit;
  text-decoration: none;
}

.v3 ul, .v3 ol{
  list-style: none;
}

.v3 button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.v3 ::selection{
  background: var(--accent);
  color: var(--white);
}

/* ---- Type ramp ---- */

.v3 h1, .v3 .h1{
  font-family: var(--font-display);
  font-size: var(--h1);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.v3 h2, .v3 .h2{
  font-family: var(--font-display);
  font-size: var(--h2);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.v3 h3, .v3 .h3{
  font-family: var(--font-display);
  font-size: var(--h3);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.v3 .script{
  font-family: var(--font-script);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0;
  color: var(--accent);
  margin: 0 0.12em 0 0.06em;
}

.v3 .script--white{
  color: var(--white);
}

.v3 .lead{
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.v3 .muted{
  color: var(--ink-muted);
}

/* ---- Layout helpers ---- */

.v3 .container{
  width: min(100% - 2 * var(--gutter), var(--max-w));
  margin-inline: auto;
}

.v3 .section{
  padding-block: var(--space-section);
  position: relative;
}

/* ---- Meta label: ■ LABEL (Viper) ---- */

.v3 .meta-label{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.v3 .meta-label::before{
  content: "";
  width: 9px;
  height: 9px;
  background: var(--accent);
  flex: none;
}

.v3 .meta-num, .v3 .meta-copy{
  font-size: var(--meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---- IMAGE SLOTS (Phase 1 placeholders) ----
   Each slot maps to a row in the image-prompt table.
   Swap: replace the div with <img> (same class kept for radius/shadow),
   or set background-image on the slot. data-slot = prompt #. */

.v3 .img-slot{
  position: relative;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 90, 31, 0.10), rgba(143, 193, 255, 0.18)),
    var(--bg-soft);
  outline: 1px dashed rgba(17, 17, 20, 0.18);
  outline-offset: -1px;
  display: grid;
  place-items: center;
}

.v3 .img-slot::after{
  content: "IMG " attr(data-slot) " · " attr(data-note);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  padding: 1rem;
}

.v3 .img-slot--bare{
  border-radius: 0;
  outline: none;
}

/* a real <img> swapped into a slot keeps the radius/shadow but drops the
   placeholder dressing (the dashed outline lives on the element itself) */
.v3 img.img-slot{
  outline: none;
  background: none;
  object-fit: cover;
}

/* aspect helpers for slots */
.v3 .ar-21-9{ aspect-ratio: 21 / 9; }
.v3 .ar-16-10{ aspect-ratio: 16 / 10; }
.v3 .ar-16-9{ aspect-ratio: 16 / 9; }
.v3 .ar-4-3{ aspect-ratio: 4 / 3; }
.v3 .ar-4-5{ aspect-ratio: 4 / 5; }
.v3 .ar-3-4{ aspect-ratio: 3 / 4; }
.v3 .ar-1-1{ aspect-ratio: 1 / 1; }

/* ---- Hairline divider with + marks (Viper) ---- */

.v3 .rule{
  position: relative;
  border: 0;
  border-top: 1px solid var(--hairline);
}

.v3 .rule::before, .v3 .rule::after{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--ink-muted);
  background: inherit;
  line-height: 1;
}

.v3 .rule::before{
  content: "+";
  left: 50%;
  transform: translate(-50%, -55%);
}

/* ---- Accessibility ---- */

.v3 .visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.v3 :focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  .v3{
    scroll-behavior: auto;
  }
  .v3 *, .v3 *::before, .v3 *::after{
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== SOURCE: components.css ===== */
/* ============================================
   Components — reused everywhere
   ============================================ */

/* ---- Pill buttons ---- */

.v3 .btn{
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  white-space: nowrap;
}

.v3 .btn:hover{
  transform: translateY(-2px);
}

.v3 .btn:active{
  transform: translateY(0);
}

/* primary — orange, glossy top highlight, white arrow circle (FintechX) */
.v3 .btn--primary{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 45%),
    var(--accent);
  color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 12px 28px -10px rgba(255, 90, 31, 0.55);
  padding-right: 0.6rem;
}

.v3 .btn--primary:hover{
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 18px 34px -10px rgba(255, 90, 31, 0.6);
}

.v3 .btn__arrow{
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--accent);
  font-size: 0.95rem;
  flex: none;
  transition: transform var(--dur) var(--ease-out);
}

.v3 .btn--primary:hover .btn__arrow{
  transform: translateX(2px);
}

/* secondary — white with shadow */
.v3 .btn--secondary{
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-pill);
  border: 1px solid var(--hairline);
}

/* dark pill */
.v3 .btn--dark{
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-pill);
}

/* on-photo / on-sky white pill */
.v3 .btn--white{
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-float);
}

/* outline pill on dark (Selected Shots) */
.v3 .btn--ghost{
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
}

.v3 .btn--ghost:hover{
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}

/* ---- Circle arrow button (Viper) ---- */

.v3 .circle-btn{
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 1.1rem;
  flex: none;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.v3 .circle-btn:hover{
  transform: rotate(45deg) scale(1.06);
}

.v3 .circle-btn--lg{
  width: 64px;
  height: 64px;
  font-size: 1.4rem;
}

/* ---- Section header row (Viper) ----
   ■ Label · (MN® — 04) · ©2026, hairline above with + */

.v3 .section-head{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* ---- Cards ---- */

.v3 .card{
  background: var(--white);
  border: 1px solid rgb(148 148 148 / 10%);
  border-radius: var(--radius-card);
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.v3 .glass-card{
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* ---- Tag pill ---- */

.v3 .tag{
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--bg-soft);
  color: var(--ink-muted);
}

.v3 .tag--accent{
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* ---- Dot pager (Viper cards) ---- */

.v3 .dots{
  display: inline-flex;
  gap: 0.4rem;
}

.v3 .dots span{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(17, 17, 20, 0.18);
}

.v3 .dots span.is-active{
  background: var(--accent);
}

/* ---- Accordion (FAQ) ---- */

.v3 .accordion{
  border-top: 1px solid var(--hairline);
}

.v3 .accordion__item{
  border-bottom: 1px solid var(--hairline);
}

.v3 .accordion__trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0.25rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.v3 .accordion__icon{
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink);
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.v3 .accordion__item.is-open .accordion__icon{
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
  transform: rotate(45deg);
}

.v3 .accordion__panel{
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur) var(--ease-out);
}

.v3 .accordion__panel p{
  padding: 0 3.5rem 1.4rem 0.25rem;
  color: var(--ink-muted);
  max-width: 60ch;
}

/* ---- Marquee-ready logo strip (static in Phase 1) ---- */

.v3 .logo-strip{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.v3 .logo-strip span{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  opacity: 0.75;
  white-space: nowrap;
}

/* ---- Stars ---- */

.v3 .stars{
  color: #FFB020;
  letter-spacing: 0.15em;
  font-size: 0.9rem;
}

/* ===== SOURCE: sections.css ===== */
/* ============================================
   Sections — 00 Hero → 11 CTA/Footer
   ============================================ */

/* ---- Preloader (inert in Phase 1, animated in Phase 2) ---- */

.v3 .preloader{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: none; /* Phase 2: display:grid + curtain animation */
  place-items: center;
}

.v3 .preloader__name{
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 12rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.v3 .preloader__count{
  position: absolute;
  left: var(--gutter);
  bottom: var(--gutter);
  font-size: var(--meta);
  color: var(--ink-muted);
}

/* ---- Nav (Figma: logo+tagline left · MENU center · pill right) ---- */

.v3 .nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 2.5vw, 2.5rem) 0.9rem;
  color: var(--white);
  transition: transform 0.5s var(--ease-out), background 0.35s, color 0.35s, box-shadow 0.35s;
}

.v3 .nav.is-hidden{
  transform: translateY(-120%);
}

/* over light sections the transparent nav needs a ground */
.v3 .nav.is-solid{
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--hairline);
}

.v3 html.menu-open .nav{
  background: transparent;
  color: var(--white);
  box-shadow: none;
}

.v3 .nav__brand{
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: inherit;
}

.v3 .nav__logo{
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex: none;
}

.v3 .nav__tag{
  font-size: 0.72rem;
  line-height: 1.3;
  font-weight: 500;
  opacity: 0.92;
}

.v3 .nav__menu{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  text-align: center;
  color: inherit;
}

.v3 .nav__menu::before{
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
  margin: 0 auto 0.7rem;
}

.v3 .nav__menu-label{
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.v3 .nav__cta{
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
}

/* ---- Full-screen menu overlay ---- */

.v3 .menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(12, 12, 12, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vh, 3.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0.45s;
}

.v3 html.menu-open .menu-overlay{
  opacity: 1;
  visibility: visible;
}

.v3 html.menu-open{
  overflow: hidden;
}

.v3 .menu-overlay__links{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
}

.v3 .menu-overlay__links a{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  transition: color 0.25s;
}

.v3 .menu-overlay__links a small{
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

.v3 .menu-overlay__links a:hover{
  color: var(--accent);
}

.v3 .menu-overlay__foot{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.v3 .menu-overlay__foot a:hover{
  color: var(--white);
}

/* ============ 00 · HERO ============ */

.v3 .hero{
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  /* fallback sky behind the transparent-hills strip (shader replaces it live) */
  background: linear-gradient(180deg, #3D66E3 0%, #6FA3F5 48%, var(--sky-to) 88%, #EAF4FF 100%);
}

/* IMG 01, edited: transparent-sky grass-hills strip (1915×313) pinned to the
   bottom as a foreground parallax layer — the animated sky lives behind it */
.v3 .hero__bg{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  width: 100%;
  height: auto;
  z-index: 1;
}

/* the strip replaces the CSS hills; blur clouds stay as the no-WebGL fallback
   (.has-shader hides them once the shader sky is running) */
.v3 .hero--photo .hero__hill{
  display: none;
}

/* clouds (placeholder blobs; Phase 3 = shader) */
.v3 .hero__cloud{
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  filter: blur(30px);
}

.v3 .hero__cloud--1{ width: 340px; height: 110px; top: 7%; left: 30%; }
.v3 .hero__cloud--2{ width: 260px; height: 90px;  top: 9%;  right: 12%; }
.v3 .hero__cloud--3{ width: 420px; height: 130px; top: 38%; right: -6%; opacity: 0.6; }

/* hills */
.v3 .hero__hill{
  position: absolute;
  bottom: -14vw;
  width: 68vw;
  height: 34vw;
  min-width: 560px;
  min-height: 280px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--meadow-green) 0%, var(--meadow-green-deep) 70%);
  z-index: 1;
}

.v3 .hero__hill--left{ left: -22vw; }
.v3 .hero__hill--right{ right: -26vw; bottom: -18vw; }

/* left-aligned white content block (Figma) */
.v3 .hero__content{
  position: relative;
  z-index: 4;
  padding-top: clamp(9rem, 24vh, 14rem);
  color: var(--white);
}

.v3 .hero__squares{
  display: flex;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
}

.v3 .hero__squares span{
  width: 12px;
  height: 12px;
}

/* his accent palette: Ember · white · Fern · Rose · Bone */
.v3 .hero__squares span:nth-child(1){ background: var(--accent); }
.v3 .hero__squares span:nth-child(2){ background: var(--white); }
.v3 .hero__squares span:nth-child(3){ background: #4FB477; }
.v3 .hero__squares span:nth-child(4){ background: #E24E8B; }
.v3 .hero__squares span:nth-child(5){ background: #F2EFE9; }

.v3 .hero__title{
  color: var(--white);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 4vw, 3.9rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.005em;
  max-width: 16ch;
}

.v3 .hero__sub{
  margin-top: 1.5rem;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
}

/* giant cycling word — above the grass, behind the avatar */
.v3 .hero__ghost{
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(6rem, 15.5vw, 20rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
}

/* avatar cut-out, anchored to the right edge */
.v3 .hero__portrait{
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: clamp(340px, 36vw, 640px);
  pointer-events: none;
}

.v3 .hero__portrait img{
  display: block;
  width: 100%;
  height: auto;
}

.v3 .hero__portrait-slot{
  aspect-ratio: 4 / 5;
  background: rgba(255, 255, 255, 0.08);
  outline-color: rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-card) 0 0 0;
}

.v3 .hero__portrait-slot::after{
  color: rgba(255, 255, 255, 0.9);
}

/* dot pager pill, bottom-left — lifted clear of the grass strip.
   .hero__bg is 15.35vw tall, so a vw-based offset tracks the hill line
   at every viewport width instead of drifting with viewport height. */
.v3 .hero__pager{
  position: absolute;
  left: clamp(1rem, 4vw, 4rem);
  bottom: calc(10.5vw + 0.5rem);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.05rem;
  border-radius: var(--radius-pill);
  background: #1E1E1E;
  box-shadow: 0 14px 30px -12px rgba(17, 17, 20, 0.55);
}

.v3 .hero__pager span{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transition: all 0.3s var(--ease-out);
}

.v3 .hero__pager span.is-active{
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: var(--accent);
}

/* ============ 01 · INTRO STRIP ============ */

.v3 .intro{
  background: var(--bg);
}

.v3 .intro__grid{
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.v3 .intro__body .lead{
  margin-bottom: 2rem;
}

.v3 .intro__cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 3rem;
}

.v3 .intro__cols h3{
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.v3 .intro__cols p{
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.v3 .intro__blob{
  position: absolute;
  width: 420px;
  height: 420px;
  right: -140px;
  top: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--accent-soft), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.v3 .intro__strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(3rem, 7vw, 5rem);
}

/* ============ 02 · FEATURED PORTFOLIO ============ */

.v3 .portfolio{
  background: #fff;
  border-radius: clamp(24px, 4vw, 48px);
  margin-inline: clamp(0.5rem, 1.5vw, 1.25rem);
  padding-top: 20px;
  padding-bottom: 100px;
}

.v3 .portfolio__head{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.v3 .portfolio__head p{
  max-width: 46ch;
  color: var(--ink-muted);
}

.v3 .portfolio__viewall{
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
}

.v3 .portfolio__logos{
  margin: clamp(2rem, 5vw, 3rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.v3 .portfolio__logos .meta-copy{
  display: block;
  text-align: center;
  margin-bottom: 1.25rem;
}

.v3 .work-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.v3 .work-card{
  position: relative;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.v3 .work-card:hover{
  transform: translateY(-6px);
}

.v3 .work-card--lg{ grid-column: span 3; }
.v3 .work-card--md{ grid-column: span 2; }

.v3 .work-card__media{
  overflow: hidden;
  border-radius: calc(var(--radius-card) - 8px);
}

.v3 .work-card__media .img-slot{
  border-radius: 0;
  outline: none;
  transition: transform 0.8s var(--ease-out);
}

.v3 .work-card:hover .work-card__media .img-slot{
  transform: scale(1.05);
}

.v3 .work-card__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.25rem 0.25rem;
  /* style.css sets a hairline and a 1.2rem gap on the unscoped
     .work-card__meta; both are dropped here so the meta sits up
     against the card instead of under a rule. */
  border-top: 0;
  margin-top: -1rem;
}

.v3 .work-card__name{
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1;
}

.v3 .work-card__year{
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-weight: 500;
}

.v3 .work-card__tags{
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.v3 .work-card__go{
  position: absolute;
  top: 1.75rem;
  right: 1.75rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  z-index: 2;
}

.v3 .work-card:hover .work-card__go{
  opacity: 1;
  transform: translateY(0);
}

.v3 .work-card .dots{
  padding-left: 0.25rem;
}

/* ============ 03 · WHAT I DO (bento) ============ */

.v3 .bento__intro{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.v3 .bento__intro h2{
  max-width: 14ch;
}

.v3 .bento__intro-right{
  max-width: 34ch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  color: var(--ink-muted);
}

.v3 .bento{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(240px, auto);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.v3 .bento__card{
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  overflow: hidden;
  position: relative;
}

.v3 .bento__card h3{
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.v3 .bento__card p{
  font-size: 0.95rem;
  color: var(--ink-muted);
  max-width: 38ch;
}

.v3 .bento__pills{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.v3 .bento__a{ grid-column: span 2; background: var(--bg-soft); }
.v3 .bento__b{ grid-column: span 2; padding: 0; position: relative; }
.v3 .bento__c{ grid-column: span 2; background: var(--ink); color: var(--white); }
.v3 .bento__d{ grid-column: span 4; background: var(--sky-gradient); }
.v3 .bento__e{ grid-column: span 2; background: var(--bg-soft); }

.v3 .bento__b .img-slot{
  position: absolute;
  inset: 0;
  border-radius: 0;
  outline: none;
  height: 100%;
}

.v3 .bento__b-overlay{
  position: relative;
  z-index: 2;
  margin: auto clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.25rem 1.5rem;
}

.v3 .bento__b-overlay h3{ margin-bottom: 0.25rem; }

.v3 .bento__c p{ color: rgba(255, 255, 255, 0.65); }

.v3 .bento__sold{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 5rem);
  letter-spacing: 0.02em;
  color: var(--success);
  text-shadow: 0 0 24px rgba(53, 196, 106, 0.65), 0 0 60px rgba(53, 196, 106, 0.4);
  align-self: center;
  margin-block: auto;
}

.v3 .bento__d-cards{
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.v3 .bento__mini{
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 0.9rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.v3 .bento__mini:nth-child(1){ transform: rotate(-4deg); }
.v3 .bento__mini:nth-child(2){ transform: rotate(2deg) translateY(-10px); }
.v3 .bento__mini:nth-child(3){ transform: rotate(6deg); }

.v3 .bento__score{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  background: var(--white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  font-size: 1.1rem;
  position: relative;
}

.v3 .bento__score-ring{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--success) 353deg, rgba(17, 17, 20, 0.08) 0);
  font-size: 0.72rem;
  color: var(--success);
}

.v3 .bento__score-ring b{
  background: var(--white);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}

.v3 .bento__bell{
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
}

/* ============ 04 · PRO SERVICES ============ */

.v3 .services__grid{
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.6fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.v3 .services__left h2{
  margin-bottom: 1.25rem;
}

.v3 .services__left > p{
  color: var(--ink-muted);
  max-width: 38ch;
  margin-bottom: 1.75rem;
}

.v3 .services__points{
  display: grid;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.v3 .services__points li{
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  font-weight: 600;
}

.v3 .services__points li::before{
  content: "+";
  color: var(--accent);
  font-weight: 700;
}

.v3 .service-row{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding: 1.25rem 0.5rem;
  border-bottom: 1px solid var(--hairline);
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  border-radius: 12px;
}

.v3 .service-row:first-child{
  border-top: 1px solid var(--hairline);
}

.v3 .service-row:hover{
  transform: translateX(6px);
  background: var(--white);
}

.v3 .service-row__thumb{
  width: 84px;
  flex: none;
}

.v3 .service-row__thumb .img-slot::after{
  font-size: 0.5rem;
  padding: 0.25rem;
}

.v3 .service-row__text{
  flex: 1;
}

.v3 .service-row__text h3{
  font-size: 1.25rem;
}

.v3 .service-row__text span{
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.v3 .service-row__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  opacity: 0.35;
  transition: opacity var(--dur);
}

.v3 .service-row:hover .service-row__dot{
  opacity: 1;
}

/* ============ 05 · WHO I BUILD FOR (carousel) ============ */

.v3 .clients{
  background: var(--bg-soft);
  border-radius: clamp(24px, 4vw, 48px);
  margin-inline: clamp(0.5rem, 1.5vw, 1.25rem);
  overflow: hidden;
}

.v3 .clients__head{
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.v3 .clients__track{
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem var(--gutter) 1.5rem;
  scrollbar-width: none;
}

.v3 .clients__track::-webkit-scrollbar{
  display: none;
}

.v3 .client-card{
  flex: 0 0 clamp(240px, 26vw, 320px);
  scroll-snap-align: center;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 5;
}

.v3 .client-card--glass .img-slot{
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
  outline: none;
}

.v3 .client-card__overlay{
  position: absolute;
  inset: auto 1rem 1rem;
  padding: 1.1rem 1.25rem;
  z-index: 2;
}

.v3 .client-card__overlay h3{
  font-size: 1.2rem;
  margin-bottom: 0.2rem;
}

.v3 .client-card__overlay p{
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.v3 .client-card__stat{
  display: inline-block;
  margin-top: 0.6rem;
  font-weight: 700;
  color: var(--accent-deep);
  font-size: 0.85rem;
}

.v3 .clients__pills{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.v3 .clients__quote{
  max-width: 56ch;
  margin: 2.5rem auto 0;
  text-align: center;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 500;
  line-height: 1.5;
}

.v3 .clients__quote footer{
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-weight: 400;
}

/* ============ 06 · ABOUT ============ */

.v3 .about__title{
  max-width: 18ch;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* Two flex rows. .about__stack is display:contents, so its three
   cards sit on the wrapper's own flex lines alongside the portrait:

     row 1   portrait 50%  |  bio 50%
     row 2   tools    30%  |  experience 70%

   Each basis subtracts half the gap so a pair fills its line exactly. */
.v3 .about__grid{
  --about-gap: clamp(1rem, 2.5vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--about-gap);
}

.v3 .about__grid > *,
.v3 .about__stack > *{
  min-width: 0;
}

.v3 .about__photo{                            flex: 0 0 calc(50% - var(--about-gap) / 2); }
.v3 .about__stack > .about-card:nth-child(1){ flex: 0 0 calc(50% - var(--about-gap) / 2); }
.v3 .about__stack > .about-card:nth-child(2){ flex: 0 0 calc(30% - var(--about-gap) / 2); }
.v3 .about__stack > .about-card:nth-child(3){ flex: 0 0 calc(70% - var(--about-gap) / 2); }

/* aspect-ratio:auto is load-bearing: with height stretched to the row,
   the ar-4-3 class would force width = height×4/3 and blow the grid out */
.v3 .about__photo .img-slot{
  height: 100%;
  min-height: 360px;
  aspect-ratio: auto;
}

.v3 .about__stack{ display: contents; }

.v3 .about-card{
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.v3 .about-card h3{
  margin-bottom: 1rem;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-weight: 600;
}

.v3 .about-card--bio p + p{
  margin-top: 0.9rem;
}

.v3 .about-card__sign{
  font-family: var(--font-script);
  font-size: 2.2rem;
  color: var(--accent);
  margin-top: 1.25rem;
}

.v3 .tools-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.v3 .tools-list li{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.25s;
}

.v3 .tools-list li:hover{
  background: var(--bg-soft);
}

.v3 .tools-list .tool-ico{
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  flex: none;
}

.v3 .xp-list li{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hairline);
}

.v3 .xp-list li:last-child{
  border-bottom: 0;
}

.v3 .xp-list b{
  font-weight: 600;
}

.v3 .xp-list small{
  display: block;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.v3 .xp-list time{
  font-size: 0.85rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

.card.about-card.about-card--bio {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ============ 07 · STUDIO FULL-BLEED ============ */

.v3 .studio{
  padding-block: 0;
  overflow: hidden; /* contains the Phase-2 slow-zoom scale */
}

.v3 .studio .img-slot{
  border-radius: 0;
  outline: none;
}

/* ============ 08 · BENEFITS ============ */

.v3 .benefits__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.v3 .benefit{
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  position: relative;
}

.v3 .benefit h3{
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  max-width: 14ch;
}

.v3 .benefit p{
  font-size: 0.95rem;
  max-width: 32ch;
}

.v3 .benefit--light{
  background: var(--bg-soft);
}

.v3 .benefit--light p{ color: var(--ink-muted); }

.v3 .benefit--orange{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 40%),
    linear-gradient(160deg, #FF7A47, var(--accent) 55%, var(--accent-deep));
  color: var(--white);
}

.v3 .benefit--orange p{ color: rgba(255, 255, 255, 0.85); }

.v3 .benefit--dark{
  background: var(--ink);
  color: var(--white);
}

.v3 .benefit--dark p{ color: rgba(255, 255, 255, 0.65); }

.v3 .benefit__art{
  margin-top: auto;
}

.v3 .benefit__speed{
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  height: 90px;
}

.v3 .benefit__speed span{
  flex: 1;
  border-radius: 8px 8px 0 0;
  background: var(--accent);
  opacity: 0.25;
}

.v3 .benefit__speed span:nth-child(1){ height: 30%; }
.v3 .benefit__speed span:nth-child(2){ height: 55%; }
.v3 .benefit__speed span:nth-child(3){ height: 80%; opacity: 0.6; }
.v3 .benefit__speed span:nth-child(4){ height: 100%; opacity: 1; }

.v3 .benefit__avatar{
  width: 65%;
  margin: auto auto 0;
}

.v3 .benefit__phone{
  width: 60%;
  margin: auto auto 0;
}

.v3 .benefit .stars{
  align-self: center;
}

/* ============ 09 · TESTIMONIALS ============ */

.v3 .reviews__track{
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: none;
}

.v3 .reviews__track::-webkit-scrollbar{ display: none; }

.v3 .review-card{
  flex: 0 0 clamp(280px, 30vw, 380px);
  scroll-snap-align: start;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.v3 .review-card blockquote{
  font-size: 1rem;
  line-height: 1.55;
}

.v3 .review-card__who{
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
}

.v3 .review-card__who .img-slot{
  width: 46px;
  border-radius: 50%;
  flex: none;
}

.v3 .review-card__who .img-slot::after{
  font-size: 0.4rem;
  padding: 0;
}

.v3 .review-card__who b{ display: block; font-size: 0.95rem; }
.v3 .review-card__who small{ color: var(--ink-muted); font-size: 0.8rem; }

/* ============ 10 · FAQ ============ */

.v3 .faq__grid{
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.4fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.v3 .faq__left h2{
  margin-bottom: 1rem;
}

.v3 .faq__left > p{
  color: var(--ink-muted);
  max-width: 36ch;
  margin-bottom: 2rem;
}

.v3 .faq__cta{
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.v3 .faq__avatars{
  display: flex;
}

.v3 .faq__avatars span{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: linear-gradient(160deg, var(--accent), var(--accent-deep));
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
}

.v3 .faq__avatars span + span{
  margin-left: -10px;
  background: linear-gradient(160deg, var(--sky-from), #5B9BE8);
}

.v3 .faq__avatars span:last-child{
  background: var(--bg-soft);
  color: var(--ink-muted);
}

/* ============ 11 · CTA + FOOTER ============ */

/* ============ 11 · SELECTED SHOTS (pinned scene) ============ */

.v3 .shots{
  position: relative;
  background: #0C0C0C;
  border-radius: clamp(24px, 4vw, 48px);
  margin-inline: clamp(0.5rem, 1.5vw, 1.25rem);
  margin-block: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}

.v3 .shots__stage{
  position: relative;
  height: 100svh;
  min-height: 620px;
}

.v3 .shots__center{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  text-align: center;
}

.v3 .meta-label--light{
  color: rgba(255, 255, 255, 0.75);
}

.v3 .shots__title{
  font-size: clamp(3rem, 9vw, 8.5rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: rgba(255, 255, 255, 0.13);
}

.v3 .shots__title .script{
  color: rgba(255, 255, 255, 0.55);
  text-transform: none;
}

.v3 .shots__deco-dot{
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  left: 53%;
  bottom: 26%;
}

.v3 .shots__deco-ring{
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  right: 38%;
  top: 66%;
}

.v3 .shots__card{
  position: absolute;
  width: clamp(250px, 30vw, 470px);
  z-index: 2;
  will-change: transform;
  transform: rotate(var(--r, 0deg)); /* static fallback; GSAP owns it in motion mode */
}

.v3 .shots__card .img-slot{
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 90, 31, 0.16), rgba(143, 193, 255, 0.2)),
    #1B1B1F;
  outline-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}

.v3 .shots__card .img-slot::after{
  color: rgba(255, 255, 255, 0.45);
}

.v3 .shots__card:nth-of-type(1){ top: -7%;    left: -4%; }
.v3 .shots__card:nth-of-type(2){ top: -9%;    right: -5%; }
.v3 .shots__card:nth-of-type(3){ top: 34%;    left: -7%; }
.v3 .shots__card:nth-of-type(4){ top: 24%;    right: -4%; }
.v3 .shots__card:nth-of-type(5){ bottom: -12%; left: 5%; }
.v3 .shots__card:nth-of-type(6){ bottom: -14%; right: 3%; }

/* ============ 12 · CTA (page close) ============ */

.v3 .cta{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #7AB6FF 0%, var(--sky-from) 45%, var(--sky-to) 100%);
  border-radius: clamp(24px, 4vw, 48px);
  margin-inline: clamp(0.5rem, 1.5vw, 1.25rem);
  margin-block-end: clamp(0.5rem, 1.5vw, 1.25rem);
  padding-block: clamp(6rem, 12vw, 10rem) 0;
  text-align: center;
  color: var(--white);
}

.v3 .cta__cloud{
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  filter: blur(34px);
}

.v3 .cta__cloud--1{ width: 380px; height: 120px; top: 12%; left: 6%; }
.v3 .cta__cloud--2{ width: 300px; height: 100px; top: 24%; right: 8%; }

.v3 .cta__inner{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.v3 .cta__title{
  max-width: 16ch;
  text-shadow: 0 2px 24px rgba(31, 82, 148, 0.25);
}

.v3 .cta__contacts{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.95);
}

.v3 .cta__contacts a:hover{
  text-decoration: underline;
}

.v3 .cta__ghost{
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 8vw, 6rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 13.5vw, 15rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  text-align: center;
  transform: translateY(0.12em);
  pointer-events: none;
}

/* slim closing bar inside the CTA (the old white footer card is gone) */
.v3 .cta__footer{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.5rem 1.75rem;
  font-size: 0.85rem;
  /* the sky gradient is nearly white down here — ink reads, white doesn't */
  color: rgba(17, 17, 20, 0.6);
  border-top: 1px solid rgba(17, 17, 20, 0.12);
}

/* ============ Sky shader (Phase 3) ============ */

.v3 .sky-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* the shader paints its own clouds — hide the blurred CSS stand-ins */
.v3 .has-shader .hero__cloud, .v3 .has-shader .cta__cloud{
  display: none;
}

/* ============ Responsive ============ */

@media (max-width: 1024px){
  .v3 .work-card--lg{ grid-column: span 6; }
  .v3 .work-card--md{ grid-column: span 3; }

  .v3 .bento__a, .v3 .bento__b, .v3 .bento__c, .v3 .bento__e{ grid-column: span 3; }
  .v3 .bento__d{ grid-column: span 6; }
}

@media (max-width: 860px){
  .v3 .nav__tag{ display: none; }

  .v3 .hero__content{ padding-top: clamp(7rem, 18vh, 10rem); }
  .v3 .hero__portrait{ width: clamp(260px, 52vw, 420px); }
  .v3 .hero__ghost{ font-size: clamp(4.5rem, 19vw, 9rem); }

  .v3 .intro__grid, .v3 .services__grid, .v3 .faq__grid, .v3 .about__grid{
    grid-template-columns: 1fr;
  }

  .v3 .bento__intro{
    flex-direction: column;
    align-items: flex-start;
  }

  .v3 .benefits__grid{
    grid-template-columns: 1fr;
  }

  .v3 .benefit{ min-height: 340px; }

  .v3 .work-card--md{ grid-column: span 6; }

  .v3 .bento__a, .v3 .bento__b, .v3 .bento__c, .v3 .bento__d, .v3 .bento__e{ grid-column: span 6; }

  .v3 .intro__strip{ grid-template-columns: 1fr; }

  .v3 .shots__stage{ min-height: 560px; }
  .v3 .shots__card{ width: clamp(200px, 44vw, 320px); }
  .v3 .shots__card:nth-of-type(3){ top: 38%; }
  .v3 .shots__card:nth-of-type(4){ top: 30%; }

  .v3 .section-head{
    flex-wrap: wrap;
  }

  .v3 .section-head .meta-copy:last-child{ display: none; }
}

@media (max-width: 520px){
  .v3 .tools-list{ grid-template-columns: 1fr; }
  .v3 .hero__pager{ bottom: calc(11vw + 0.5rem); }
  .v3 .nav__cta{ padding: 0.55rem 0.9rem; font-size: 0.8rem; }
  .v3 .cta__footer{ justify-content: center; text-align: center; }
}

/* ===== SOURCE: motion.css ===== */
/* ============================================
   Phase 2 — motion support styles
   (preloader, Lenis, SplitText masks, cursor, marquee)
   ============================================ */

/* ---- Lenis (recommended host styles) ---- */

.v3 html.lenis, .v3 html.lenis body{
  height: auto;
}

.v3 .lenis.lenis-smooth{
  scroll-behavior: auto !important;
}

/* ---- Preloader (activated by JS) ---- */

.v3 .preloader.is-active{
  display: grid;
}

.v3 .preloader__name{
  position: relative;
  line-height: 1;
}

.v3 .preloader__name .pl-outline{
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
}

.v3 .preloader__name .pl-fill{
  position: absolute;
  inset: 0;
  color: var(--accent);
  clip-path: inset(100% 0 0 0);
}

/* ---- SplitText line masks ----
   padding/margin pair keeps descenders (g, y, script glyphs)
   from clipping while the mask still hides the reveal */

.v3 .st-line{
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

/* ---- Custom cursor ---- */

.v3 .cursor{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 130;
  pointer-events: none;
}

.v3 .cursor__dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  transition:
    width 0.35s var(--ease-out),
    height 0.35s var(--ease-out),
    background 0.35s var(--ease-out);
}

.v3 .cursor__dot span{
  opacity: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  transition: opacity 0.2s;
}

.v3 .cursor.is-link .cursor__dot{
  width: 30px;
  height: 30px;
  background: rgba(255, 90, 31, 0.35);
}

.v3 .cursor.is-view .cursor__dot{
  width: 64px;
  height: 64px;
}

.v3 .cursor.is-view .cursor__dot span{
  opacity: 1;
}

.v3 html.has-cursor, .v3 html.has-cursor *{
  cursor: none !important;
}

/* ---- Logo marquee ---- */

.v3 .portfolio__logos{
  overflow: hidden;
}

.v3 .logo-strip.is-marquee{
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
}

.v3 .logo-strip__set{
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem); /* mirrors .logo-strip gap */
  flex: none;
}

/* ---- Draggable tracks ---- */

.v3 .clients__track, .v3 .reviews__track{
  touch-action: pan-y;
  cursor: grab;
}

.v3 .clients__track:active, .v3 .reviews__track:active{
  cursor: grabbing;
}