/* ============================================================
   Braxtyn Mikel — model portfolio
   Palette: blush, rose, lilac, plum
   ============================================================ */

:root {
  --cream:      #FFFBFD;
  --blush:      #FFF1F8;
  --blush-deep: #FFDDEE;
  --pink:       #FFC2E2;
  /* Bubblegum: blue-leaning candy pink. The previous values leaned red, which
     read as raspberry/maroon once darkened for contrast. */
  --rose:       #FF7FC4;
  --rose-deep:  #FB4FAC;
  --lilac:      #C9A0FF;
  /* Dark tone for body copy, shifted off red toward violet so it stops
     reading as maroon while keeping its contrast. */
  --plum:       #3B2445;
  --plum-soft:  #7C5F80;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;

  --radius:    28px;
  --radius-lg: 44px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 16px rgba(251, 79, 172, .09);
  --shadow:    0 14px 40px rgba(251, 79, 172, .15);
  --shadow-lg: 0 28px 70px rgba(251, 79, 172, .20);

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* This site is light by design — opting in explicitly prevents browsers
     with auto-dark-mode from inverting the palette. */
  color-scheme: light;
}

/* ── reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* The decorative blobs and bubbles deliberately bleed past the right edge.
   Clipping at the root keeps them from widening the document — `clip` rather
   than `hidden` so neither element becomes a scroll container (which would
   break `position: sticky` and smooth scrolling). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--plum);
  background: var(--blush);
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }

/* A `display` rule on a component beats the hidden attribute's UA default,
   which would silently publish tiles meant to stay unfinished. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
}
em { font-style: italic; }

:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── floating bubbles ──────────────────────────────────────── */
.bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bubbles span {
  position: absolute;
  bottom: -180px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
              rgba(255,255,255,.85), rgba(255,194,218,.55) 45%, rgba(201,160,255,.32));
  animation: float linear infinite;
  opacity: .5;
}
.bubbles span:nth-child(1) { left:  6%; width:  70px; height:  70px; animation-duration: 26s; animation-delay:  0s; }
.bubbles span:nth-child(2) { left: 18%; width:  30px; height:  30px; animation-duration: 19s; animation-delay: -4s; }
.bubbles span:nth-child(3) { left: 31%; width:  95px; height:  95px; animation-duration: 33s; animation-delay: -9s; }
.bubbles span:nth-child(4) { left: 45%; width:  44px; height:  44px; animation-duration: 22s; animation-delay: -2s; }
.bubbles span:nth-child(5) { left: 58%; width:  62px; height:  62px; animation-duration: 29s; animation-delay: -14s; }
.bubbles span:nth-child(6) { left: 69%; width:  26px; height:  26px; animation-duration: 17s; animation-delay: -7s; }
.bubbles span:nth-child(7) { left: 79%; width: 108px; height: 108px; animation-duration: 36s; animation-delay: -18s; }
.bubbles span:nth-child(8) { left: 88%; width:  38px; height:  38px; animation-duration: 21s; animation-delay: -11s; }
.bubbles span:nth-child(9) { left: 95%; width:  56px; height:  56px; animation-duration: 27s; animation-delay: -5s; }

@keyframes float {
  0%   { transform: translateY(0) translateX(0) scale(.9); opacity: 0; }
  10%  { opacity: .5; }
  90%  { opacity: .4; }
  100% { transform: translateY(-115vh) translateX(40px) scale(1.15); opacity: 0; }
}

/* ── nav ───────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--gutter);
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.nav.is-stuck {
  background: rgba(255, 251, 252, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 194, 218, .6), var(--shadow-sm);
  padding-block: .8rem;
}
.nav__brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.nav__brand em { color: var(--rose); }

.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a {
  font-size: .93rem;
  font-weight: 400;
  letter-spacing: .01em;
  position: relative;
  transition: color .2s;
}
.nav__links a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -5px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--rose);
  transition: width .28s cubic-bezier(.4,0,.2,1);
}
.nav__links a:not(.btn):hover { color: var(--rose-deep); }
.nav__links a:not(.btn):hover::after { width: 100%; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .6rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 24px; height: 2px;
  border-radius: 2px;
  background: var(--plum);
  transition: transform .3s, opacity .3s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  position: fixed;
  top: 68px; left: var(--gutter); right: var(--gutter);
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: rgba(255, 251, 252, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.nav__mobile[hidden] { display: none; }
.nav__mobile a {
  padding: .8rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  transition: background .2s;
}
.nav__mobile a:hover { background: var(--blush-deep); }

/* ── buttons ───────────────────────────────────────────────── */
.btn {
  --btn-bg: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 55%, var(--lilac) 140%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .72rem 1.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: #fff;
  font-size: .93rem;
  font-weight: 500;
  letter-spacing: .015em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(251, 79, 172, .32);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, filter .2s;
}
.btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 32px rgba(251,79,172,.40); }
.btn:active { transform: translateY(-1px) scale(.99); }
.btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.btn--sm { padding: .55rem 1.15rem; font-size: .87rem; }
.btn--lg { padding: 1rem 2.2rem; font-size: 1rem; }
.btn--full { width: 100%; margin-top: .5rem; }

.btn--ghost {
  background: rgba(255,255,255,.7);
  color: var(--plum);
  box-shadow: inset 0 0 0 1.5px var(--pink), var(--shadow-sm);
}
.btn--ghost:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--rose), var(--shadow); }

.btn__spinner { display: none; width: 17px; height: 17px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: spin .7s linear infinite; }
.btn.is-loading .btn__spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── layout ────────────────────────────────────────────────── */
.section {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(4.5rem, 11vw, 8.5rem) var(--gutter);
}
.section__head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.section__head--left { text-align: left; margin-bottom: 2.25rem; }
.section__head h2 { font-size: clamp(2.35rem, 6vw, 4rem); }
/* All-pink gradient. Starting from --plum made big headings read maroon. */
.section__head h2 {
  background: linear-gradient(115deg, #E12E96 5%, var(--rose-deep) 45%, var(--lilac) 115%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--rose);
  margin-bottom: .3rem;
}

/* ── photo slots (graceful before photos arrive) ───────────── */
.photo-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(150deg, var(--blush-deep), var(--pink) 55%, var(--lilac));
  box-shadow: var(--shadow);
}
.photo-slot--tall { aspect-ratio: 3 / 4.4; }
.photo-slot--portrait { aspect-ratio: 4 / 5; }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }

/* placeholder shimmer, hidden once a real <img> loads */
.photo-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  background-size: 260% 100%;
  animation: shimmer 3.4s ease-in-out infinite;
}
.photo-slot:has(img)::after { display: none; }
@keyframes shimmer { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

/* ── hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(8rem, 16vw, 11rem) var(--gutter) clamp(5rem, 10vw, 7rem);
  min-height: 100svh;
}
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: -1;
}
.hero__blob--1 { top: -6%; right: -8%; width: 46vw; height: 46vw;
  background: radial-gradient(circle, rgba(255,194,218,.85), transparent 70%); }
.hero__blob--2 { bottom: -14%; left: -12%; width: 40vw; height: 40vw;
  background: radial-gradient(circle, rgba(201,160,255,.55), transparent 70%); }

.hero__eyebrow {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 1.1rem;
}
.hero__name {
  font-size: clamp(3.6rem, 12vw, 7.5rem);
  font-weight: 300;
  margin-bottom: 1.4rem;
}
.hero__name em {
  display: inline-block;
  font-weight: 700;
  background: linear-gradient(115deg, var(--rose) 10%, var(--lilac) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* background-clip:text only paints inside the element's box, so any glyph
     that overflows loses its fill and looks sliced. A heavy italic overhangs
     horizontally (clipped the leading M) and the 1.05 line-height makes the box
     shorter than the font's ascender (clipped the top of the l). Pad on every
     side to give the glyphs room, then pull the box back by the same amount so
     nothing shifts. */
  padding: .18em .12em;
  margin: -.18em -.12em;
}
.hero__tagline {
  max-width: 30rem;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--plum-soft);
  margin-bottom: 2.2rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__photo { position: relative; }
.hero__photo .photo-slot { transform: rotate(2.2deg); }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 2.2rem;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--pink);
}
.hero__scroll span {
  position: absolute;
  left: 50%; top: 9px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--rose);
  animation: scroll-dot 1.9s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%, 100% { transform: translateY(0);   opacity: 1; }
  60%      { transform: translateY(14px); opacity: 0; }
}

/* ── about ─────────────────────────────────────────────────── */
.about__grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.about__photo { position: relative; }
.about__photo .photo-slot { transform: rotate(-2deg); }

.about__sticker {
  position: absolute;
  right: -18px; bottom: -22px;
  display: grid;
  place-content: center;
  text-align: center;
  width: 128px; height: 128px;
  border-radius: 50%;
  background: linear-gradient(140deg, #fff, var(--blush-deep));
  box-shadow: var(--shadow-lg);
  border: 2px solid rgba(255,255,255,.9);
  transform: rotate(-8deg);
}
.about__age {
  display: block;
  font-family: var(--font-display);
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(120deg, var(--rose), var(--lilac));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about__age-label {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--plum-soft);
}

.about__lead { font-size: 1.3rem; font-weight: 400; margin-bottom: 1.2rem; }
.about__text p + p { margin-top: 1.05rem; }
.about__text p { color: var(--plum-soft); }
.about__text strong { color: var(--plum); font-weight: 500; }

.about__tags { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; padding: 0; margin-top: 1.9rem; }
.about__tags li {
  padding: .42rem 1.05rem;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: .84rem;
  color: var(--plum-soft);
}

/* ── stats (photo-backed band) ──────────────────────────────
   Full-bleed shot of her behind the numbers, with a pink scrim so the
   text keeps its contrast whatever the photo underneath is doing.      */
.stats {
  position: relative;
  z-index: 1;
  padding: clamp(4.5rem, 11vw, 8.5rem) var(--gutter);
  overflow: clip;
}
.stats__bg { position: absolute; inset: 0; z-index: -1; }
.stats__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}
/* Single scrim, tinted pink and feathered top/bottom so the band melts into
   the page. Kept light enough that she is clearly visible behind the tiles. */
.stats__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--blush) 0%,
    rgba(255, 240, 246, .58) 15%,
    rgba(255, 214, 231, .40) 50%,
    rgba(255, 240, 246, .60) 85%,
    var(--blush) 100%);
}
.stats__inner { max-width: var(--wrap); margin-inline: auto; }

/* Nine stats divide evenly into a 3x3 block; auto-fit left a ragged 7 + 2. */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 720px;
  margin-inline: auto;
}
.stat {
  display: grid;
  gap: .3rem;
  padding: 1.8rem 1.2rem;
  text-align: center;
  border-radius: var(--radius);
  /* Frosted rather than solid so the photo reads through the tiles. */
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, background .3s;
}
.stat:hover { transform: translateY(-6px); box-shadow: var(--shadow); background: rgba(255,255,255,.9); }
.stat__k {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose);
  font-weight: 500;
}
.stat__v { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; }
.stats__note {
  margin-top: 1.8rem;
  text-align: center;
  font-size: .88rem;
  font-style: italic;
  color: var(--plum-soft);
}

/* ── portfolio ─────────────────────────────────────────────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  margin-bottom: 2.4rem;
}
.filter {
  padding: .55rem 1.3rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--plum-soft);
  font-size: .86rem;
  font-weight: 400;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), color .22s, border-color .22s, box-shadow .22s;
}
.filter:hover { transform: translateY(-2px); color: var(--rose-deep); border-color: var(--pink); }
.filter.is-active {
  background: linear-gradient(135deg, var(--rose), var(--rose-deep) 60%, var(--lilac) 140%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(251,79,172,.30);
}

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}
.shot {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  background: linear-gradient(150deg, var(--blush-deep), var(--pink) 55%, var(--lilac));
  box-shadow: var(--shadow);
  transition: transform .4s cubic-bezier(.34,1.4,.64,1), box-shadow .4s, opacity .3s;
}
.shot img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.shot:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.shot:hover img { transform: scale(1.05); }
.shot[hidden] { display: none !important; }

.shot figcaption {
  position: absolute;
  left: .8rem; bottom: .8rem;
  padding: .32rem .9rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--plum);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.shot:hover figcaption { opacity: 1; transform: none; }

/* ── lightbox ──────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(59, 36, 69, .84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade .25s ease;
}
.lightbox[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox__img {
  max-width: min(92vw, 900px);
  max-height: 86vh;
  border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
  animation: pop .3s cubic-bezier(.34,1.4,.64,1);
}
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

.lightbox__close, .lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--plum);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), background .22s;
}
.lightbox__close:hover, .lightbox__nav:hover { transform: scale(1.12); background: #fff; }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); font-size: 2rem; }
.lightbox__nav--prev { left: clamp(.5rem, 3vw, 2rem); }
.lightbox__nav--next { right: clamp(.5rem, 3vw, 2rem); }

/* ── clients ───────────────────────────────────────────────── */
.clients {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter);
  background: linear-gradient(180deg, transparent, rgba(255,225,236,.55), transparent);
}
.clients__label {
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--plum-soft);
  margin-bottom: 1rem;
}
.clients__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
}
.clients__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  font-weight: 500;
  color: var(--plum);
}
.clients__dot { color: var(--rose); font-size: 1.2rem; }

/* ── booking ───────────────────────────────────────────────── */
.book__card {
  padding: clamp(2rem, 5vw, 3.75rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, #fff 0%, var(--cream) 60%, var(--blush) 100%);
  box-shadow: var(--shadow-lg);
  border: 1.5px solid rgba(255,255,255,.9);
}
.book__intro { margin-top: .75rem; color: var(--plum-soft); max-width: 34rem; }

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field__label { font-size: .82rem; font-weight: 500; letter-spacing: .04em; color: var(--plum-soft); }
.field__label b { color: var(--rose); font-weight: 500; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .82rem 1.1rem;
  border: 1.5px solid var(--blush-deep);
  border-radius: 18px;
  background: #fff;
  font-size: .95rem;
  font-weight: 300;
  transition: border-color .22s, box-shadow .22s;
}
.field textarea { border-radius: 22px; resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: #C9AEBB; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(255, 127, 196, .22);
}
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid {
  border-color: #FB4FAC;
}
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23FF6FA5' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; padding-right: 2.6rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { min-height: 1.4rem; font-size: .9rem; text-align: center; }
.form__status.is-ok    { color: #1F8A5B; }
.form__status.is-error { color: #D6247E; }

/* ── footer ────────────────────────────────────────────────── */
.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter) 2.5rem;
  background: linear-gradient(180deg, transparent, var(--blush-deep));
}
.footer__name { font-family: var(--font-display); font-size: 2rem; font-weight: 500; }
.footer__name em { color: var(--rose); }
.footer__meta { font-size: .88rem; color: var(--plum-soft); margin-top: .3rem; }
.footer__cta { margin-top: 1.1rem; }
.footer__cta a {
  display: inline-block;
  padding: .55rem 1.4rem;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: .88rem;
  transition: transform .25s, box-shadow .25s;
}
.footer__cta a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.footer__fine { margin-top: 2rem; font-size: .76rem; color: var(--plum-soft); opacity: .8; }

/* ── reveal on scroll ──────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; text-align: center; }
  .hero__inner { order: 2; }
  .hero__photo { order: 1; max-width: 380px; margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero__tagline { margin-inline: auto; }
  .hero__scroll { display: none; }

  .about__grid { grid-template-columns: 1fr; }
  .about__photo { max-width: 400px; margin-inline: auto; }

  .stats__bg img { object-position: 50% 22%; }
}

@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .form__row { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .shots { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .shot { border-radius: 18px; }
  .filter { padding: .45rem 1rem; font-size: .8rem; }
  .lightbox__nav { width: 40px; height: 40px; }
  .about__sticker { width: 104px; height: 104px; right: -6px; bottom: -16px; }
  .about__age { font-size: 2.3rem; }
}

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