/* Senna Studio — homepage styles
   Colours, fonts and pairings follow the Senna Studio Brand Guide 2025. */

:root {
  /* Primary */
  --cream: #FFFBF8;
  --grey: #F1EEE7;
  --black: #000000;
  /* Secondary */
  --pink: #D879B1;
  --orange: #FD7043;
  --aqua: #AAE1CC;
  --green: #069D4E;
  --bright-blue: #33B5FF;
  /* Tertiary */
  --brown: #483634;
  --deep-blue: #1E7DC1;
  --yellow: #F5F57B;

  --font-head: "Plus Jakarta Sans", system-ui, sans-serif; /* headers: Bold */
  --font-body: "Poppins", system-ui, sans-serif;           /* subheads/buttons: Medium, body: Regular */

  --gutter: clamp(16px, 4vw, 56px);
  --nav-h: 64px;
  --tab-h: clamp(64px, calc(7vw + 8px), 92px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }

/* Visually hidden but read by screen readers and search engines */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.logo { display: block; width: 100%; height: auto; }

/* Wordmark type (fallback) */
.wordmark {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: -0.045em;
  line-height: .9;
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .75em;
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  padding: 12px 22px;
  background: var(--btn-bg, var(--black)); color: var(--btn-fg, var(--cream));
  border: 0; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--black); }
.btn--sm { padding: 8px 14px; font-size: 11px; }

/* Triple arrow — "always as a three and gradually shorter" */
.arrows { width: 78px; height: 10px; flex: none; }
.arrows path { stroke: currentColor; stroke-width: 1.4; fill: none; }
.arrows .head { fill: currentColor; stroke: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter);
  color: var(--cream);
  transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s;
}
.nav.is-solid { background: var(--cream); color: var(--black); box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.nav__burger { justify-self: start; width: 34px; height: 24px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; display: grid; align-content: space-between; }
.nav__burger span { display: block; height: 2px; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }
.nav__tag { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; text-align: center; line-height: 1.5; font-weight: 500; }
.nav .btn { justify-self: end; --btn-bg: var(--orange); --btn-fg: var(--black); }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
body.menu-open .nav { color: var(--black); background: transparent; box-shadow: none; }

.menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--pink);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--nav-h) var(--gutter);
  clip-path: circle(0 at 40px 32px);
  transition: clip-path .7s var(--ease);
}
body.menu-open .menu { clip-path: circle(150% at 40px 32px); }
.menu a { font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 8vw, 96px); white-space: nowrap; text-decoration: none; line-height: 1.1; width: fit-content; }
.menu a:hover { transform: rotate(-2deg); background: var(--yellow); }

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 60svh; min-height: 432px;
  background: var(--brown); /* swap for hero photo */
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.hero__media { position: absolute; inset: 0; background-size: cover; background-position: center 45%; will-change: transform; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  /* darker at the top so the cream nav reads before scrolling, and at the bottom behind the logo */
  background:
    linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.25) 12%, transparent 26%),
    linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.15) 40%, transparent 65%);
}
.hero__ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,251,248,.25); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.hero__mark {
  position: relative; z-index: 1;
  width: 100%;
  color: var(--cream);
  padding: 0 2.4vw 2.2vw;
  margin: 0;
  overflow: hidden;
}
.hero__mark .logo { transform: translateY(110%); animation: rise 1.1s var(--ease) .1s forwards; }
@keyframes rise { to { transform: none; } }

/* ---------- Intro ---------- */
.intro { background: var(--grey); padding: clamp(64px, 10vw, 140px) var(--gutter); text-align: center; }
.intro h2 { font-size: clamp(24px, 3.4vw, 46px); max-width: 22ch; margin: 0 auto 32px; }
.intro .btn { --btn-bg: var(--green); --btn-fg: var(--black); }

/* ---------- Featured marquee ---------- */
.featured { background: var(--bright-blue); display: flex; align-items: center; overflow: hidden; height: 56px; }
.featured__label { flex: none; padding: 0 var(--gutter); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; background: var(--bright-blue); position: relative; z-index: 1; }
.marquee { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.marquee ul { display: flex; align-items: center; gap: clamp(40px, 6vw, 90px); list-style: none; margin: 0; padding: 0 clamp(20px, 3vw, 45px); }
.marquee li { white-space: nowrap; font-size: 20px; line-height: 1; }
.featured:hover .marquee { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section heads ---------- */
.section { padding: clamp(64px, 8vw, 120px) var(--gutter); }
.section-head { margin-bottom: clamp(28px, 4vw, 56px); }
.section-head h2 { font-size: clamp(34px, 5vw, 72px); text-transform: uppercase; }
.section-head p { margin: 8px 0 0; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- The Work grid ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2.2vw, 32px); }
.tile {
  position: relative; display: block; aspect-ratio: 1;
  text-decoration: none; color: var(--t, var(--black));
  outline: none;
}
.tile__media { position: absolute; inset: 0; overflow: hidden; background: var(--grey); }
.tile__media img, .tile__media video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .6s; }
.tile__ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.28); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,.025) 14px 28px); }

/* the coloured sticker that lands on hover */
.tile__sticker {
  position: absolute; z-index: 2;
  left: 10%; top: 16%; width: 86%; height: 86%;
  background: var(--c);
  padding: clamp(14px, 2vw, 28px);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.35);
  opacity: 0;
  transform: translate(14%, 14%) rotate(calc(var(--r, -4deg) * 3)) scale(.7);
  transition: opacity .35s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.tile__sticker h3 { font-size: clamp(18px, 2.7vw, 40px); line-height: 1.02; }
.tile__sticker .arrows { align-self: flex-end; transition: transform .6s var(--ease) .1s; transform: translateX(-20px); }
.tile:nth-child(even) { --r: 4deg; }
.tile:hover, .tile:focus-visible { z-index: 3; }
.tile:hover .tile__sticker, .tile:focus-visible .tile__sticker { opacity: 1; transform: rotate(var(--r, -4deg)); }
.tile:hover .tile__sticker .arrows, .tile:focus-visible .tile__sticker .arrows { transform: none; }
.tile:hover .tile__media img, .tile:hover .tile__media video { transform: scale(1.06); }
.tile:focus-visible .tile__media { outline: 2px solid var(--black); outline-offset: 4px; }

/* touch screens have no hover: show a small name sticker instead */
@media (hover: none) {
  .tile__sticker { opacity: 1; left: auto; right: -4%; top: auto; bottom: 8%; width: auto; height: auto; padding: 6px 10px; transform: rotate(var(--r, -4deg)); }
  .tile__sticker h3 { font-size: 13px; }
  .tile__sticker .arrows { display: none; }
}

/* ---------- Popular paths (stacking packages) ---------- */
.paths { padding-bottom: 0; }
.paths-stack { position: relative; margin: 0 calc(var(--gutter) * -1); }
.path-anchor { height: 0; }
.path {
  position: sticky;
  top: calc(var(--nav-h) + var(--i) * var(--tab-h));
  background: var(--c); color: var(--black);
  border-radius: 0 clamp(20px, 3vw, 40px) 0 0;
  box-shadow: 0 -10px 30px -18px rgba(0,0,0,.3);
}
.path__tab {
  height: var(--tab-h); width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px var(--gutter) 0; /* a touch more room above each package title */
  background: none; border: 0; cursor: pointer; color: inherit; text-align: left;
}
.path__tab h3 { font-size: clamp(26px, 3.6vw, 52px); }
.path__tab .chev { font-size: 26px; transition: transform .5s var(--ease); }
.path.is-active .path__tab .chev { transform: rotate(90deg); }
.path__body {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center;
  padding: var(--pad-y) var(--gutter);
}
.path__kicker { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.path__body .path__kicker { max-width: none; }
@media (min-width: 1024px) { .path__body .path__kicker { white-space: nowrap; } }
.path__body p { max-width: 54ch; margin: 0 0 14px; font-size: 15px; }
.path__body ul { margin: 0 0 28px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.path__body li { font-size: 12px; font-weight: 500; border: 1.5px solid currentColor; padding: 4px 12px; border-radius: 99px; }
/* Package visuals sit on the right at their natural shape (no cropping). Each is capped to the
   room its card has under the tabs stacked above it, so even the last card fits on screen */
.path {
  --pad-y: clamp(12px, 2vw, 24px);
  --vis-h: min(340px, calc(100svh - var(--nav-h) - (var(--i) + 1) * var(--tab-h) - 2 * var(--pad-y)));
}
.path__visual { margin: 0; justify-self: end; max-width: 100%; }
.path__visual img { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--vis-h); box-shadow: 0 30px 50px -30px rgba(0,0,0,.45); }
.browser { width: min(100%, var(--vis-h) * 1.6); aspect-ratio: 16 / 10; justify-self: end; }
/* three panels laid out exactly as in the source artwork (2000x1069), on the card colour */
.trio { position: relative; justify-self: end; width: min(100%, var(--vis-h) * 1.87); aspect-ratio: 2000 / 1069; }
.trio img { position: absolute; top: 13%; height: 74%; width: auto; box-shadow: 0 24px 40px -26px rgba(0,0,0,.45); }
.trio img:nth-child(1) { left: 20.15%; }
.trio img:nth-child(2) { left: 42.95%; }
.trio img:nth-child(3) { left: 65.6%; }
/* the stack stays pinned through this hold: a beat with every tab showing, then the next
   section slides up over it (it is pulled up by 100svh to start right behind the last card) */
.paths-hold { height: 125svh; }
.paths ~ * { position: relative; z-index: 2; }
.paths + .section { margin-top: -100svh; background: var(--cream); border-radius: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 0 0; box-shadow: 0 -20px 40px -24px rgba(0,0,0,.35); }

/* A browser window whose page scrolls itself */
.browser {
  margin: 0; display: flex; flex-direction: column;
  background: var(--cream); border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 50px -30px rgba(0,0,0,.45);
}
.browser__bar { flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: var(--grey); }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(0,0,0,.18); }
.browser__bar span { margin-left: 10px; flex: 1; max-width: 220px; font-size: 10px; letter-spacing: .04em; color: rgba(0,0,0,.5); background: var(--cream); border-radius: 99px; padding: 3px 12px; }
.browser__screen { position: relative; flex: 1; overflow: hidden; }
.browser__page { animation: web-scroll var(--dur, 18s) ease-in-out infinite; }
.browser__page img { display: block; width: 100%; height: auto; }
@keyframes web-scroll {
  0% { transform: none; opacity: 0; }
  4%, 10% { transform: none; opacity: 1; }
  88%, 96% { transform: translateY(calc(var(--dist, 0px) * -1)); opacity: 1; }
  100% { transform: translateY(calc(var(--dist, 0px) * -1)); opacity: 0; }
}

/* A social reel: square, the same height as the other frames */
.reel {
  margin: 0; justify-self: end;
  height: var(--vis-h); aspect-ratio: 1; max-width: 100%;
  overflow: hidden; background: var(--black);
  box-shadow: 0 30px 50px -28px rgba(0,0,0,.5);
}
.reel video { display: block; width: 100%; height: 100%; object-fit: cover; }


/* ---------- Testimonials ---------- */
.testimonials .section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.slider-nav { display: flex; gap: 10px; }
.slider-nav button {
  width: 88px; height: 36px; border: 0; background: var(--grey); cursor: pointer; color: var(--brown);
  display: grid; place-items: center; transition: background .3s, transform .3s var(--ease);
}
.slider-nav button:hover:not(:disabled) { background: var(--aqua); transform: translateY(-2px); }
.slider-nav button:disabled { opacity: .35; cursor: default; }
.slider-nav svg { width: 48px; height: 10px; }
.slider-nav [data-dir="-1"] svg { transform: scaleX(-1); }
.track {
  display: flex; gap: clamp(14px, 2vw, 28px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter) 24px;
  scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; flex: none; }
.quote-card {
  width: min(84vw, 520px); align-self: center;
  background: var(--pink); padding: clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  min-height: 420px; /* every card the same size: taller than the longest quote */
}
.quote-card blockquote { margin: 0; }
.quote-card .lead { font-family: var(--font-head); font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; margin: 0 0 16px; }
.quote-card p { margin: 0; font-size: 14px; }
.quote-card cite { font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.video-card {
  position: relative; width: min(62vw, 300px); aspect-ratio: 9 / 16;
  background: var(--c, var(--grey)); overflow: hidden; border-radius: 6px;
}
.video-card video { width: 100%; height: 100%; object-fit: cover; }
.video-card .play {
  position: absolute; inset: auto auto 16px 16px; width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: var(--cream); cursor: pointer; display: grid; place-items: center;
  transition: transform .3s var(--ease);
}
.video-card .play:hover { transform: scale(1.1); }
.video-card .play::before { content: ""; border-left: 14px solid var(--black); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.video-card.is-playing .play::before { border: 0; width: 14px; height: 16px; margin: 0; background: linear-gradient(90deg, var(--black) 0 35%, transparent 35% 65%, var(--black) 65%); }
.video-card .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.4); text-align: center; padding: 20px; }
.video-card .play { bottom: 30px; }
/* Loading ring around the play button while a video is still arriving */
.video-card .play::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: var(--black); border-right-color: var(--black);
  opacity: 0; transition: opacity .2s;
}
.video-card.is-loading .play::after { opacity: 1; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .video-card.is-loading .play::after { animation-duration: 2.4s; } }
.video-card .speed {
  position: absolute; top: 12px; right: 12px; height: 36px; min-width: 52px; padding: 0 12px;
  border: 0; border-radius: 999px; background: var(--cream); color: var(--black); cursor: pointer;
  font: 500 12px/1 var(--font-body, inherit); letter-spacing: .04em; transition: transform .3s var(--ease), background .3s;
}
.video-card .speed::after { content: ""; position: absolute; inset: -4px; } /* 44px touch target */
.video-card .speed:hover { transform: scale(1.06); }
.video-card .speed[aria-pressed="true"] { background: var(--yellow); }
.video-card .seek {
  --p: 0%;
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 22px; margin: 0;
  background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.video-card .seek::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--cream) var(--p), rgba(255,255,255,.4) var(--p)); }
.video-card .seek::-moz-range-track { height: 4px; background: linear-gradient(90deg, var(--cream) var(--p), rgba(255,255,255,.4) var(--p)); }
.video-card .seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--cream); border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.video-card .seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--cream); border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.video-card .name { position: absolute; right: 12px; bottom: 38px; background: var(--yellow); font-size: 11px; font-weight: 500; padding: 3px 10px; transform: rotate(-4deg); }

/* ---------- Process ---------- */
.process { background: var(--grey); text-align: center; }
.process__kicker { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }
.process h2 { font-size: clamp(32px, 4.4vw, 64px); max-width: 14ch; margin: 0 auto clamp(40px, 6vw, 72px); }
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.4vw, 20px); text-align: left; margin-bottom: clamp(40px, 5vw, 64px); list-style: none; padding: 0; }
.step {
  background: var(--cream); padding: clamp(14px, 1.4vw, 20px); min-height: 190px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .4s;
}
.step__num { font-family: var(--font-head); font-weight: 700; font-size: 14px; display: block; margin-bottom: 18px; }
.step h3 { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.step p { font-size: 12px; margin: 0; line-height: 1.55; }
.process .btn { --btn-bg: var(--pink); --btn-fg: var(--black); }

/* ---------- Like what you see? (cream base, black text, secondary CTA) ---------- */
.like { display: grid; grid-template-columns: 1fr 1fr; background: var(--cream); }
.like__copy { padding: clamp(56px, 7vw, 110px) var(--gutter); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.like__copy h2 { font-size: clamp(34px, 4.6vw, 68px); margin-bottom: 24px; }
.like__copy p { max-width: 46ch; font-size: 14px; margin: 0 0 32px; }
.like .btn { --btn-bg: var(--bright-blue); --btn-fg: var(--black); }
.like__graphic { position: relative; overflow: hidden; min-height: 360px; background: var(--green); }
/* the stickers reel fills the panel, cropped as needed */
.like__graphic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Footer (brown base, pink text, cream CTA) ---------- */
.footer { background: var(--brown); color: var(--pink); }
.footer__top { display: flex; justify-content: space-between; align-items: start; gap: 24px; padding: clamp(56px, 7vw, 100px) var(--gutter) 0; }
.footer__top p { font-family: var(--font-head); font-weight: 700; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.12; max-width: 19ch; margin: 0; }
.footer .btn { --btn-bg: var(--cream); --btn-fg: var(--black); }
.footer__mark { padding: clamp(60px, 10vw, 140px) 2.4vw 0; }
.footer__follow { text-align: center; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; margin: 12px 0 18px; }
.footer__follow a { text-decoration: none; }
.gram { display: grid; grid-template-columns: repeat(5, 1fr); }
.gram a { aspect-ratio: 4 / 5; background: var(--c); display: grid; place-items: center; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.35); text-decoration: none; overflow: hidden; }
.gram a img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gram a:hover img { transform: scale(1.06); }
.footer__legal { background: var(--cream); color: var(--black); font-size: 11px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 14px var(--gutter); }
.footer__legal a { text-decoration: none; }

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
/* Process cards sit flat; on hover one eases up a touch into the lifted, tilted spot
   from the design, and eases back when the pointer leaves */
.steps .step:hover { transform: translateY(-10px) rotate(3deg); box-shadow: 0 18px 28px -20px rgba(0,0,0,.28); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .path__body { grid-template-columns: 1fr; }
  .like { grid-template-columns: 1fr; }
  .path__visual, .browser, .trio { justify-self: start; }
  .reel { justify-self: start; }
}
@media (max-width: 600px) {
  :root { --nav-h: 56px; }
  .nav__tag { display: none; }
  .nav { grid-template-columns: 1fr 1fr; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; }
  .footer__top { flex-direction: column; }
  .gram { grid-template-columns: repeat(3, 1fr); }
  .gram a:nth-child(n+4) { display: none; }
  .featured__label { font-size: 9px; }
}

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

/* ---------- Case study pages (work/<project>/) ---------- */
.case__hero { margin: 0; }
.case__hero img { display: block; width: 100%; height: clamp(320px, 62vh, 640px); object-fit: cover; }
.case__kicker { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.case__intro {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 80px); align-items: start;
  padding: clamp(56px, 7vw, 110px) var(--gutter);
}
.case__title h1 { font-size: clamp(56px, 9vw, 140px); line-height: .9; text-transform: uppercase; margin-bottom: 16px; }
.case__lead h2 { font-size: clamp(20px, 2vw, 28px); line-height: 1.2; margin-bottom: 18px; }
.case__lead p, .case__text p { margin: 0; font-size: 15px; max-width: 62ch; }
.case__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2.2vw, 32px); padding: 0 var(--gutter); margin-bottom: clamp(12px, 2.2vw, 32px); }
.case__row figure, .case__wide { margin: 0; }
.case__row img, .case__row video { display: block; width: 100%; height: auto; aspect-ratio: 632 / 675; object-fit: cover; background: var(--grey); }
.case__wide { padding: 0 var(--gutter); margin-bottom: clamp(12px, 2.2vw, 32px); }
.case__wide img { display: block; width: 100%; height: auto; aspect-ratio: 1516 / 810; object-fit: cover; }
.case__text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); padding: clamp(48px, 6vw, 96px) var(--gutter); }
.case__text--single { grid-template-columns: minmax(0, 62ch); }
.case__text h2 { font-size: clamp(22px, 2.4vw, 32px); margin-bottom: 14px; }
.case__tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.case__tags li { font-size: 12px; font-weight: 500; border: 1.5px solid currentColor; padding: 4px 12px; border-radius: 99px; }
.case__quotes { padding: clamp(48px, 6vw, 96px) var(--gutter); }
.case__quotes > .case__kicker { margin-bottom: 20px; }
.case__quote-row { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 28px); }
.case__quote-row .quote-card { flex: 1 1 320px; width: auto; max-width: 620px; align-self: stretch; }

/* Other projects: 3 across on desktop, 2 x 2 where the grid is two columns */
@media (min-width: 601px) { .case__more .work-grid .tile:nth-child(n+4) { display: none; } }

@media (max-width: 760px) {
  .case__intro, .case__text, .case__row { grid-template-columns: 1fr; }
}

/* Line links and FAQ rows: uppercase label, one line arrow at the end, thin rule underneath.
   Matched to the FAQ design reference (16px, tight tracking, tight answer leading). */
.line-arrow { flex: none; width: 36px; height: 10px; transition: transform .3s var(--ease); }
.line-arrow path:first-child { stroke-width: 1.8; }
.case__links { display: grid; margin-top: 28px; }
.case__links a, .faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0;
  color: inherit; text-decoration: none; cursor: pointer;
  font-size: 16px; font-weight: 500; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase;
}
.case__links a { border-bottom: 1px solid rgba(0,0,0,.35); }
.case__links a:first-child { padding-top: 0; }
.case__links a:hover .line-arrow, .faq summary:hover .line-arrow { transform: translateX(6px); }
.faq {
  background: var(--grey); display: grid; grid-template-columns: 34% minmax(0, 1fr);
  padding: clamp(64px, 7vw, 76px) var(--gutter) clamp(64px, 8vw, 110px);
}
.faq h2 { font-size: clamp(44px, 5.4vw, 58px); line-height: 1; margin-top: -10px; }
.faq details { border-bottom: 1px solid rgba(0,0,0,.35); }
.faq details:first-child summary { padding-top: 0; }
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: -2px 0 34px; max-width: 590px; font-size: 14px; line-height: 1.25; }
@media (max-width: 760px) {
  .faq { grid-template-columns: 1fr; gap: 28px; }
  .case__links a, .faq summary { font-size: 14px; }
}

/* ---------- Contact page ---------- */
.contact__hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding: calc(var(--nav-h) + clamp(40px, 6vw, 80px)) var(--gutter) clamp(56px, 7vw, 100px); }
.contact__intro h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1; margin-bottom: 24px; max-width: 12ch; }
.contact__intro p { margin: 0 0 14px; font-size: 15px; max-width: 46ch; }
.contact__intro .btn { margin-top: 14px; }
.contact__photo { margin: 0; }
.contact__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 82vh; height: auto; object-fit: cover; object-position: 50% 40%; }
.contact__strip { margin: 0; padding: 18px var(--gutter); background: var(--orange); text-align: center; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.contact__strip a { color: inherit; text-underline-offset: 3px; }
.contact__work { display: grid; grid-template-columns: 1fr 1fr; }
.contact__work-copy { padding: clamp(56px, 7vw, 110px) var(--gutter); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 28px; }
.contact__work-copy h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.05; max-width: 14ch; }
.contact__collage { background: var(--bright-blue); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 18px); align-content: center; padding: clamp(24px, 4vw, 56px); }
.contact__collage .tile__sticker h3 { font-size: clamp(14px, 1.5vw, 22px); }
.contact__collage .tile__sticker .arrows { width: 48px; height: 10px; }
.faq details a { color: inherit; text-underline-offset: 3px; }
.contact__form-wrap { background: var(--pink); padding: clamp(56px, 7vw, 110px) var(--gutter); }
.contact__form-wrap > h2 { text-align: center; font-size: clamp(34px, 5vw, 72px); text-transform: uppercase; margin-bottom: clamp(28px, 4vw, 48px); }
.contact__form { max-width: 820px; margin: 0 auto; background: var(--cream); border-radius: 40px; padding: clamp(32px, 5vw, 64px) clamp(24px, 6vw, 84px); display: grid; gap: 36px; }
.contact__form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.contact__form legend { width: 100%; text-align: center; margin-bottom: 14px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.contact__form input, .contact__form textarea {
  width: 100%; border: 0; border-bottom: 1px solid rgba(0,0,0,.35); background: transparent; padding: 14px 0 10px;
  font: 400 14px/1.4 var(--font-body); letter-spacing: .06em; color: var(--black); resize: vertical;
}
.contact__form input::placeholder, .contact__form textarea::placeholder { text-transform: uppercase; color: rgba(0,0,0,.45); }
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-bottom-color: var(--black); }
.contact__form .btn { justify-self: center; }
.contact__form .btn[disabled] { opacity: .5; cursor: wait; }
.contact__trap { position: absolute; left: -9999px; }
.contact__status { margin: -12px 0 0; text-align: center; font-size: 14px; min-height: 1.4em; }
@media (max-width: 760px) {
  .contact__hero, .contact__work { grid-template-columns: 1fr; }
  .contact__strip { font-size: 12px; }
  .contact__form { border-radius: 24px; }
}
/* Pages that open on a light background keep the top bar solid */
.page-light .nav { background: var(--cream); color: var(--black); box-shadow: 0 1px 0 rgba(0,0,0,.08); }
body.page-light.menu-open .nav { background: transparent; box-shadow: none; }
.contact__thanks { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 12px 0; outline: none; }
.contact__thanks[hidden] { display: none; }
.contact__thanks-kicker { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; background: var(--yellow); padding: 4px 12px; transform: rotate(-3deg); }
.contact__thanks h3 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1; }
.contact__thanks p { margin: 0; max-width: 44ch; font-size: 15px; }
.contact__thanks a { color: inherit; text-underline-offset: 3px; }
.contact__form fieldset[hidden], .contact__form button[hidden] { display: none; }

/* ---------- Team page ---------- */
.team__intro { text-align: center; padding: calc(var(--nav-h) + clamp(48px, 7vw, 96px)) var(--gutter) clamp(40px, 5vw, 64px); }
.team__intro h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1; max-width: 12ch; margin: 0 auto 24px; }
.team__intro p { margin: 0 auto; max-width: 56ch; font-size: 15px; }
.team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter) clamp(64px, 8vw, 110px); }
.member { position: relative; }
.member { display: flex; }
.member__toggle { all: unset; display: grid; grid-template-rows: auto 1fr; width: 100%; height: 100%; cursor: pointer; position: relative; box-sizing: border-box; }
.member__toggle:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }
.member__photo { display: block; position: relative; aspect-ratio: 1; background: var(--c); overflow: hidden; }
.member__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .8s var(--ease); }
.member__bio {
  position: absolute; inset: 0; display: flex; align-items: flex-end; overflow: auto;
  background: color-mix(in srgb, var(--cream) 94%, transparent); padding: clamp(16px, 2vw, 26px);
  font-size: 13px; line-height: 1.45; color: var(--black);
  opacity: 0; transform: translateY(16px); transition: opacity .35s var(--ease), transform .5s var(--ease); pointer-events: none;
}
.member__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--grey); padding: 16px clamp(14px, 1.6vw, 20px); }
.member__name { display: grid; gap: 4px; }
.member__name strong { font-family: var(--font-head); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.member__name small { font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.member .line-arrow { transition: transform .4s var(--ease); }
.member:hover .member__bio, .member.is-open .member__bio, .member__toggle:focus-visible .member__bio { opacity: 1; transform: none; }
.member:hover .line-arrow, .member.is-open .line-arrow, .member__toggle:focus-visible .line-arrow { transform: rotate(90deg); }
.member:hover .member__photo img { transform: scale(1.04); }
.team__statement { background: var(--grey); padding: clamp(64px, 9vw, 130px) var(--gutter); text-align: center; }
.team__statement h2 { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.1; max-width: 20ch; margin: 0 auto; }
@media (max-width: 900px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .team__grid { grid-template-columns: 1fr; } .member__bio { font-size: 14px; } }

/* ---------- No orphan words, site-wide ----------
   Headings balance their lines; paragraphs never leave one word alone on the last line. */
h1, h2, h3, .lead, .case__kicker, .path__kicker, summary span { text-wrap: balance; }
p, li, blockquote, figcaption, cite, .member__bio span { text-wrap: pretty; }

/* ---------- About page ---------- */
.about__hero { background: var(--grey); padding: calc(var(--nav-h) + clamp(48px, 7vw, 96px)) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.about__hero h1 { text-align: center; font-size: clamp(38px, 4.88vw, 72px); line-height: 1.02; max-width: 21ch; text-wrap: wrap; margin: 0 auto 5.4vw; padding: 0 var(--gutter); }
/* Photo strip: six photos placed exactly as in the design (measured from it at 1100px wide and scaled with the screen).
   --x is each photo's centre across the screen in vw, --r its angle. Phones double the scale and show the middle. */
.about__strip { --s: 1; position: relative; height: calc(22.5vw * var(--s)); margin-top: 0; }
.about__strip img {
  position: absolute; top: 50%; width: calc(17vw * var(--s)); aspect-ratio: 645 / 724; object-fit: cover;
  left: calc(50vw + (var(--x) - 50) * var(--s) * 1vw - 8.5vw * var(--s));
  transform: translateY(-50%) rotate(var(--r));
}
.about__strip img:nth-child(1) { --x: 6.8;  --r: 0deg; }
.about__strip img:nth-child(2) { --x: 23.8; --r: -9.8deg; }
.about__strip img:nth-child(3) { --x: 41.1; --r: 1deg; z-index: 1; }
.about__strip img:nth-child(4) { --x: 59.1; --r: 6.2deg; }
.about__strip img:nth-child(5) { --x: 77.3; --r: -9.1deg; z-index: 1; }
.about__strip img:nth-child(6) { --x: 95;   --r: 9.6deg; }

.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); padding: clamp(64px, 8vw, 120px) var(--gutter); }
.story__side { position: relative; }
.story__kicker, .chapter__kicker { margin: 0 0 18px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.story__media { position: sticky; top: calc(var(--nav-h) + 32px); aspect-ratio: 4 / 5; max-height: calc(100vh - var(--nav-h) - 64px); overflow: hidden; background: var(--grey); }
.story__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease), transform 1.6s var(--ease); }
.story__media img.is-active { opacity: 1; transform: scale(1); }
.chapter { min-height: 72vh; padding-bottom: clamp(48px, 8vw, 120px); }
.chapter:last-child { min-height: 0; padding-bottom: 0; }
.chapter h2 { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.08; margin-bottom: 24px; }
.chapter p { margin: 0 0 16px; font-size: 15px; max-width: 60ch; }
.chapter a, .about__how a:not(.btn) { color: inherit; text-underline-offset: 3px; }
.chapter__img { display: none; }

.about__how { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1vw, 14px); padding: 0 clamp(8px, 1vw, 14px); background: var(--cream); }
.about__how-copy { background: var(--orange); padding: clamp(40px, 6vw, 90px) clamp(28px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.about__how-copy h2 { font-size: clamp(40px, 5vw, 76px); text-transform: uppercase; margin-bottom: 24px; }
.about__how-copy p { margin: 0 0 14px; font-size: 15px; max-width: 52ch; }
.about__how-copy .btn { margin-top: 24px; }
.about__how-photo { margin: 0; }
.about__how-photo img { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: 50% 30%; }

.about__said { background: var(--pink); padding: clamp(64px, 8vw, 110px) var(--gutter); display: grid; justify-items: center; gap: 28px; text-align: left; }
.about__said .case__quote-row { width: 100%; max-width: 1100px; }
.about__said .case__kicker { text-align: center; }

@media (max-width: 760px) {
  .about__strip { --s: 2; }
  .story { grid-template-columns: 1fr; }
  .story__media { display: none; }
  .chapter { min-height: 0; }
  .chapter__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 24px; }
  .about__how { grid-template-columns: 1fr; padding: 0; }
}
.nav__tag { text-wrap: wrap; }
@media (max-width: 760px) { .about__hero h1 { text-wrap: balance; } }
.case__wide video { display: block; width: 100%; height: auto; aspect-ratio: 1516 / 810; object-fit: cover; background: var(--grey); }

/* Projects whose case study isn't live yet: hover card stays, but it isn't a link */
.tile--soon { cursor: default; }

/* ---------- Legal pages (privacy, terms, accessibility) ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: calc(var(--nav-h) + clamp(48px, 7vw, 96px)) var(--gutter) clamp(64px, 8vw, 120px); }
.legal h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; margin-bottom: 12px; }
.legal__updated { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 36px; }
.legal h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 44px 0 14px; }
.legal h3 { font-size: 18px; margin: 28px 0 8px; }
.legal p, .legal li { font-size: 15px; line-height: 1.6; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 1.2em; display: grid; gap: 8px; }
.legal a { color: inherit; text-underline-offset: 3px; }

/* ---------- Blog posts, old project pages and Shop Templates (carried over from Squarespace, not in the menu) ---------- */
.post { max-width: 760px; margin: 0 auto; padding: calc(var(--nav-h) + clamp(48px, 7vw, 96px)) var(--gutter) clamp(64px, 8vw, 110px); }
.post h1 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; margin-bottom: 28px; }
.post__kicker { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
.post article h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 36px 0 12px; }
.post article h3 { font-size: 19px; margin: 28px 0 10px; }
.post article p, .post article li { font-size: 16px; line-height: 1.65; }
.post article p { margin: 0 0 16px; }
.post article ul, .post article ol { padding-left: 1.2em; margin: 0 0 16px; }
.post article a:not(.btn) { color: inherit; text-underline-offset: 3px; }
.post figure { margin: 24px 0; }
.post figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.post__video { position: relative; aspect-ratio: 16 / 9; margin: 24px 0; background: var(--grey); }
.post__video iframe, .post__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post__video--portrait { aspect-ratio: 9 / 16; max-width: 360px; }
.post__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(0,0,0,.35); }
.post__list li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.35); font-size: 16px; }
.post__list a { color: inherit; text-decoration: none; font-weight: 500; }
.post__list a:hover { text-decoration: underline; }
.post__list span { flex: none; font-size: 13px; color: rgba(0,0,0,.55); }
.post__cta { margin-top: clamp(48px, 7vw, 80px); padding: clamp(28px, 4vw, 44px); background: var(--yellow); }
.post__cta h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 10px; }
.post__cta p { margin: 0 0 20px; max-width: 46ch; }