:root {
  --paper: #f7f4ed;
  --ink: #0b0b0b;
  --muted: #8b8590;
  --lav: #a6a8d0;
  --pad: clamp(16px, 2vw, 28px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 14px/1.45 Montserrat, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h2, p { margin: 0; }

.hdr {
  position: fixed; inset: 0 0 auto; z-index: 20; padding: 18px var(--pad);
  display: flex; justify-content: space-between; align-items: flex-start;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05;
  mix-blend-mode: difference; color: #fff;
}
.hdr nav { display: flex; gap: 22px; align-items: flex-start; }
.hdr nav { align-items: center; }
/* Language: a small pill toggle, so it doesn't read as another menu link */
.lang { display: inline-flex; margin-left: 12px; padding: 2px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; margin-top: -4px; }
.lang button { background: none; border: 0; padding: 4px 8px 3px; border-radius: 999px; font: 600 10px/1 Montserrat, system-ui, sans-serif; letter-spacing: .06em; color: inherit; transition: background .25s, color .25s; }
.lang button.is-on { background: #fff; color: #000; }
.lang button:not(.is-on):hover { opacity: .65; }
.hdr a:hover { opacity: .6; }

/* Phone menu */
.menu-btn { display: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: uppercase; }
.menu { position: fixed; inset: 0; z-index: 80; background: #0b0b0b; color: var(--paper); display: flex; flex-direction: column; padding: 18px var(--pad) 28px; opacity: 0; transition: opacity .3s; }
.menu.is-open { opacity: 1; }
.menu[hidden] { display: none; }
.menu-close { align-self: flex-end; background: none; border: 0; color: inherit; padding: 4px 0; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.menu-links { margin: auto 0; display: flex; flex-direction: column; gap: 8px; }
.menu-links a { font-size: clamp(40px, 12vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; text-transform: uppercase; transform: translateY(16px); opacity: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.menu.is-open .menu-links a { transform: none; opacity: 1; }
.menu.is-open .menu-links a:nth-child(2) { transition-delay: .05s; } .menu.is-open .menu-links a:nth-child(3) { transition-delay: .1s; } .menu.is-open .menu-links a:nth-child(4) { transition-delay: .15s; }
.menu-insta { font-size: 12px; font-weight: 800; text-transform: uppercase; color: #c7c5c5; }

/* Hero: tall section, sticky canvas — scroll progress drives the dive */
.hero { position: relative; height: 420vh; background: #000; }
.hero-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-fade { position: absolute; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; }
.hero-tag, .hero-scroll {
  position: absolute; bottom: 16px; z-index: 2; font-weight: 800; text-transform: uppercase; line-height: 1.02;
  pointer-events: none; transition: opacity .4s;
}
.hero-tag { left: var(--pad); font-size: clamp(18px, 2.2vw, 30px); letter-spacing: -.01em; }
.hero-scroll { right: var(--pad); font-size: 10px; text-align: right; }
.loader { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper); z-index: 3; transition: opacity .5s; pointer-events: none; }
.loader span { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
.is-ready .loader { opacity: 0; }

/* Grid */
/* No background of its own: it rises over the hero while the hero fades to cream, so there's no panel edge */
.work { position: relative; z-index: 1; margin-top: -92vh; padding: 48px var(--pad) 100px; }
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.work h2 { font-size: clamp(36px, 5.5vw, 84px); font-weight: 800; letter-spacing: -.05em; line-height: .8; text-transform: uppercase; }
.filters { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.filter { background: none; border: 0; padding: 0; font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.filter sup { font-size: 9px; margin-left: 2px; }
.filter.is-on, .filter:hover { color: var(--ink); }
.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1px; grid-auto-flow: dense; column-gap: 12px; row-gap: 0; align-items: start; transition: opacity .2s; }
.grid.is-switching { opacity: 0; }
.tile {
  position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 4; background: #e9e4ea; cursor: zoom-in;
  opacity: 0; transform: translateY(60px) scale(.92); filter: blur(8px);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.75,.2,1), filter .9s ease;
}
.tile.is-in { opacity: 1; transform: none; filter: none; }
.tile[hidden] { display: none; }
.grid-more { display: flex; align-items: center; gap: 10px; margin: 36px auto 0; background: none; border: 0; color: var(--ink); padding: 12px 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.grid-more svg { width: 18px; height: 18px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.grid-more:hover svg { transform: translateY(3px); }
.grid-more[hidden] { display: none; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.75,.2,1); }
.tile:hover img, .tile:hover video { transform: scale(1.04); }
.tile.is-video { grid-column: span 2; aspect-ratio: 16 / 9; }
.tile.is-vertical { grid-column: span 1; aspect-ratio: 9 / 16; }

.lb { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.94); display: grid; place-items: center; cursor: zoom-out; }
.lb[hidden] { display: none; }
.lb img, .lb video { max-width: 92vw; max-height: 90vh; }
.lb video { cursor: default; background: #000; }

/* Prices — B (menu rows) on desktop, C (cards with her work) on phones. Type styles follow Yuliia's Figma frame 2:376. */
.prices { background: var(--paper); padding: 56px 56px 120px; color: #080707; }
.prices[data-v="c"] { display: none; }
.pr-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 48px; }
.pr-head h2 { margin: 0 0 4px; font-size: clamp(40px, 4.6vw, 67px); font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.pr-head p { font-size: clamp(16px, 1.65vw, 24px); line-height: 1.1; }
.pr-cta { flex: none; background: #080707; color: #fff; padding: 18px 28px; border-radius: 999px; font-size: 12px; font-weight: 800; text-transform: uppercase; transition: background .2s; }
.pr-cta:hover { background: var(--lav); }
.pr-cta-bottom { display: none; }
.pr-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.pr-card h3, .pr-row h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 20px; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.pr-icons { display: inline-flex; gap: 12px; opacity: .5; color: #484741; }
.pr-price { margin-top: 12px; font-size: clamp(36px, 3.4vw, 50px); font-weight: 500; line-height: 1.1; }
.pr-unit { margin-top: 12px; font-size: 16px; font-weight: 500; line-height: 1.1; text-transform: uppercase; color: #484741; }
.pr-desc { margin-top: 24px; font-size: 16px; line-height: 1.2; color: #484741; max-width: 32em; }
.pr-terms { display: flex; justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 48px; border-top: 1px solid rgba(8,7,7,.12); }
.pr-terms h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.pr-terms-cols { width: min(889px, 66%); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pr-terms-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-content: start; font-size: 16px; line-height: 1.2; color: #484741; }
.pr-terms-cols li::before { content: '— '; }

/* B — menu rows; hovering a row peeks at her work */
.pr-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(8,7,7,.12); }
.pr-row { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 32px 0; border-top: 1px solid rgba(8,7,7,.12); transition: padding .4s cubic-bezier(.2,.7,.2,1); }
.pr-row:hover { padding: 44px 0; }
.pr-n { font-size: 14px; font-weight: 500; color: #484741; align-self: start; padding-top: 4px; }
.pr-row .pr-desc { margin-top: 12px; }
.pr-row .pr-price { margin: 0; text-align: right; font-size: clamp(40px, 5.5vw, 84px); letter-spacing: -.03em; }
.pr-row .pr-price small { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: uppercase; color: #484741; }
.pr-peek { position: absolute; left: 0; top: 0; width: 180px; aspect-ratio: 3 / 4; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.85) rotate(-4deg); transition: opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1); z-index: 2; }
.pr-row:hover .pr-peek { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
.pr-peek img, .pr-peek video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-acc { margin-top: 32px; }
.pr-acc summary { cursor: pointer; list-style: none; font-size: 20px; font-weight: 700; text-transform: uppercase; display: flex; justify-content: space-between; }
.pr-acc summary::after { content: '+'; font-weight: 400; transition: transform .3s; }
.pr-acc[open] summary::after { transform: rotate(45deg); }
.pr-acc .pr-terms-cols { width: 100%; margin-top: 24px; }

/* C — each card leads with her work */
.prices[data-v="c"] .pr-media { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 24px; background: #e9e4ea; }
.pr-media img, .pr-media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.75,.2,1); }
.pr-card:hover .pr-media img, .pr-card:hover .pr-media video { transform: scale(1.04); }
.pr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 100%; }

@media (max-width: 900px) {
  .prices[data-v="b"] { display: none; }
  .prices[data-v="c"] { display: block; }
  .prices { padding: 40px var(--pad) 96px; }
  .pr-head { flex-direction: column; align-items: flex-start; }
  .pr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .pr-card h3 { font-size: 16px; }
  .pr-price { font-size: 30px; }
  .pr-desc { font-size: 14px; }
  .pr-terms { flex-direction: column; }
  .pr-terms-cols { width: 100%; grid-template-columns: 1fr; }
  .pr-row { grid-template-columns: 40px minmax(0, 1fr); }
  .pr-row .pr-price { grid-column: 2; text-align: left; }
  .pr-peek { display: none; }
}

/* About — the words light up as you scroll past */
.about { background: var(--paper); color: #080707; height: 260vh; }
.ab-stick { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: center; padding: 0 56px; }
.ab-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.ab-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; color: #484741; margin-bottom: 24px; }
.ab-reveal { font-size: clamp(26px, 3vw, 46px); font-weight: 500; line-height: 1.18; letter-spacing: -.02em; }
.ab-reveal .w { opacity: .14; transition: opacity .25s linear; }
.ab-reveal .w.is-lit { opacity: 1; }
.ab-sign { display: flex; align-items: center; gap: 14px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(8,7,7,.12); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.ab-molly { width: 36px; height: 28px; background: #080707; -webkit-mask: url(assets/svg/molly.svg) center / contain no-repeat; mask: url(assets/svg/molly.svg) center / contain no-repeat; }

@media (max-width: 900px) {
  .about { height: 220vh; }
  .ab-stick { grid-template-columns: 1fr; gap: 24px; align-content: center; padding: 72px var(--pad) 24px; }
  .ab-photo { width: 46%; }
  .ab-reveal { font-size: 22px; }
  .ab-sign { margin-top: 24px; padding-top: 16px; }
  /* phones: photo first, full width; the text lights up as it passes through the screen */
  .about { height: auto; }
  .about .ab-stick { position: static; height: auto; padding: 24px var(--pad) 96px; gap: 32px; }
  .about .ab-photo { width: 100%; }
  .about .ab-reveal { font-size: 24px; }
}

@media (max-width: 600px) {
  /* pricing: full-width button, cards swipe sideways (the next one peeks in so it reads as scrollable) */
  /* button sits under the swipe cards; same 32px rhythm: heading → cards → button */
  .prices[data-v="c"] .pr-head { margin-bottom: 32px; }
  .prices[data-v="c"] .pr-head .pr-cta { display: none; }
  .pr-cta-bottom { display: block; margin-top: 32px; text-align: center; }
  .prices[data-v="c"] .pr-cards { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); scroll-padding: 0 var(--pad); }
  .prices[data-v="c"] .pr-cards::-webkit-scrollbar { display: none; }
  .prices[data-v="c"] .pr-card { flex: 0 0 74%; scroll-snap-align: start; }
  .prices[data-v="c"] .pr-card:hover .pr-media img, .prices[data-v="c"] .pr-card:hover .pr-media video { transform: none; }
  .pr-card h3 { font-size: 16px; }
  .pr-price { font-size: 32px; }
  .pr-desc { font-size: 14px; margin-top: 16px; }
  .prices[data-v="c"] .pr-acc { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(8,7,7,.12); }
  .prices[data-v="c"] .pr-acc summary { font-size: 16px; }
  /* filters: one swipeable row instead of wrapping */
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 4px var(--pad); width: calc(100% + 2 * var(--pad)); }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; padding: 6px 0; }
  /* bigger tap targets for the language pill */
  .lang button { padding: 7px 11px 6px; font-size: 11px; }
}

/* Footer — matches Figma frame 1:297 */
.ftr { background: #141313; color: #fff; padding: 56px 48px 48px; }
.ftr-main { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-bottom: 100px; }
.ftr-title { font-size: clamp(36px, 4.6vw, 67px); font-weight: 400; line-height: 1.1; text-transform: uppercase; letter-spacing: 0; }
.ftr-contacts { list-style: none; margin: 0; padding: 0; width: min(396px, 100%); }
.ftr-contacts li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; text-transform: uppercase; line-height: .97; }
.ftr-contacts li:first-child { padding-top: 0; }
.ftr-contacts li:last-child { padding-bottom: 0; }
.ftr-contacts li + li { border-top: 1px solid rgba(255,255,255,.12); }
.ftr-contacts span { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 400; color: #c7c5c5; }
.ftr-contacts b { font-weight: 400; }
.ico { width: 20px; height: 20px; flex: none; }
.ftr-contacts a { font-size: 18px; font-weight: 600; text-align: right; }
.ftr-contacts .ico { width: 18px; height: 18px; }
.ftr-contacts a:hover { color: var(--lav); }
.ftr-row { display: flex; justify-content: space-between; align-items: center; padding-top: 100px; border-top: 1px solid rgba(255,255,255,.08); font-size: 16px; color: #c7c5c5; text-transform: uppercase; line-height: .97; }
.ftr-molly { width: 45px; height: 35px; background: #fff; -webkit-mask: url(assets/svg/molly.svg) center / contain no-repeat; mask: url(assets/svg/molly.svg) center / contain no-repeat; }
@media (max-width: 800px) {
  .ftr { padding: 60px var(--pad) 28px; }
  .ftr-main { flex-direction: column; align-items: flex-start; }
  .ftr-contacts { width: 100%; }
  .ftr-contacts a { font-size: 14px; }
  .ftr-contacts span { font-size: 13px; }
  .ftr-row { font-size: 12px; }
  /* no divider; equal space above and below the contacts so they sit centred */
  .ftr-main { gap: 62px; padding-bottom: 62px; }
  .ftr-row { border-top: 0; padding-top: 0; }
}

@media (max-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
  .hero { height: 380vh; }
  .work { margin-top: -132vh; padding-top: 24px; }   /* phones: gallery rises while the hero turns cream (PHONE_TIMELINE in main.js) */
  .lang { margin-left: 2px; }
  .hdr nav { gap: 14px; }
  .hdr nav a { display: none; }
  .menu-btn { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .tile { opacity: 1; transform: none; filter: none; transition: none; }
}