/* ==========================================================================
   Cidar Studios — design system
   Palette derived from cidar-tan.vercel.app: petrol #042F30, sand #FFEED3,
   mint #C7EDCF. Two grounds: petrol carries the work, sand carries the words.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --petrol:        #042F30;
  --petrol-deep:   #021C1D;
  --petrol-lift:   #0A403F;   /* raised surface on petrol */
  --sand:          #FFEED3;
  --sand-deep:     #F3DCB6;   /* borders / dividers on sand */
  --mint:          #C7EDCF;
  --white:         #FFFFFF;

  /* ---- Ink ---- */
  --ink:           #0A1F20;   /* petrol-tinted near-black, on light grounds */
  --ink-mid:       #3D5453;
  --ink-soft:      #6B807F;
  --on-petrol:     #F4F1E9;
  --on-petrol-mid: #B3C6C3;
  --on-petrol-soft:#7D9694;

  /* ---- Type ---- */
  --display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --body:    "Figtree", ui-sans-serif, system-ui, sans-serif;
  --label:   "Space Grotesk", ui-monospace, monospace;

  /* ---- Scale ---- */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.92rem);
  --step-0:  clamp(1rem, 0.95rem + 0.24vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4:  clamp(2.8rem, 2rem + 4.2vw, 6rem);

  /* ---- Space ---- */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --bay:    clamp(4.5rem, 9vw, 9rem);   /* vertical rhythm between sections */
  --measure: 62ch;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; max-width: var(--measure); }

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

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

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

::selection { background: var(--mint); color: var(--petrol); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--bay); }

.band--petrol { background: var(--petrol); color: var(--on-petrol); }
.band--sand   { background: var(--sand);   color: var(--ink); }
.band--white  { background: var(--white);  color: var(--ink); }

.stack { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }

/* Small uppercase label — the one place Space Grotesk survives from the old brand */
.label {
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.band--petrol .label { color: var(--mint); }
.band--sand   .label,
.band--white  .label { color: var(--ink-soft); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  /* <button> does not inherit colour or appearance the way <a> does; without
     these a ghost button renders as UA black-on-transparent */
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

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

/* Primary sits on either ground */
.btn--primary { background: var(--mint); color: var(--petrol); }
.btn--primary:hover { background: var(--white); }

.btn--ghost { border-color: currentColor; background: transparent; }
/* The hero is its own dark ground, not a .band--petrol, so it needs the
   dark-ground hover explicitly */
.hero .btn--ghost:hover,
.band--petrol .btn--ghost:hover { background: var(--on-petrol); color: var(--petrol); }
.band--sand   .btn--ghost:hover,
.band--white  .btn--ghost:hover { background: var(--petrol); color: var(--sand); border-color: var(--petrol); }

.btn--dark { background: var(--petrol); color: var(--sand); }
.btn--dark:hover { background: var(--petrol-deep); }

/* Understated text CTA — the "minor beat" weight from the plan */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--step--1);
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: gap 0.3s var(--ease);
}
.cta-link:hover { gap: 0.9rem; }
.cta-link .arw { transition: transform 0.3s var(--ease); }
.cta-link:hover .arw { transform: translateX(2px); }

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.1rem;
  color: var(--on-petrol);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease),
              box-shadow 0.4s var(--ease), color 0.4s var(--ease);
}

.nav.is-stuck {
  background: rgba(2, 28, 29, 0.86);
  backdrop-filter: blur(14px);
  padding-block: 0.7rem;
  box-shadow: 0 1px 0 rgba(199, 237, 207, 0.14);
}

.nav__inner { display: flex; align-items: center; gap: 2rem; }

.nav__mark {
  margin-right: auto;
  display: flex;
  align-items: center;
}
.nav__mark img {
  height: 19px;
  width: auto;
  display: block;
}
@media (max-width: 520px) { .nav__mark img { height: 16px; } }

.nav__links { display: flex; gap: 2rem; align-items: center; }

.nav__links a {
  font-size: var(--step--1);
  font-weight: 500;
  opacity: 0.82;
  transition: opacity 0.25s var(--ease);
}
.nav__links a:hover { opacity: 1; }

.nav__clock {
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-petrol-soft);
  font-variant-numeric: tabular-nums;
}

.nav .btn { padding: 0.68rem 1.25rem; }

/* Mobile menu. The toggle only exists under 900px; opening it turns the
   same .nav__links into a panel hanging off the bottom of the fixed bar. */
.nav__toggle {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 500;
  color: inherit;
  background: transparent;
  border: 1px solid rgba(244, 241, 233, 0.35);
  border-radius: 999px;
  padding: 0.62rem 1rem;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav__links, .nav__clock { display: none; }
  .nav__inner { gap: 0.6rem; }
  .nav__toggle { display: inline-flex; }

  .nav.is-open {
    background: rgba(2, 28, 29, 0.97);
    backdrop-filter: blur(14px);
  }
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0 var(--gutter) 1.25rem;
    background: rgba(2, 28, 29, 0.97);
    box-shadow: 0 1px 0 rgba(199, 237, 207, 0.14);
  }
  .nav.is-open .nav__links a {
    display: block;
    padding: 0.95rem 0;
    font-size: var(--step-1, 1.2rem);
    opacity: 1;
    border-top: 1px solid rgba(244, 241, 233, 0.1);
  }
}

/* Logo, Book and Menu have to share 335px on a small phone */
@media (max-width: 420px) {
  .nav .btn { padding: 0.6rem 0.9rem; }
  .nav__toggle { padding: 0.55rem 0.8rem; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--petrol);
  color: var(--on-petrol);
  overflow: hidden;
  padding-block: clamp(7rem, 14vh, 10rem) clamp(2.5rem, 6vh, 4rem);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

/* The reel swings from luminance ~22 to ~225 in the band the headline sits in.
   brightness() is multiplicative, so it pulls the 225 peaks down hard while
   leaving already-dark shots roughly where they are — that flattens the swing
   without the flat black a heavy overlay would produce. */
.hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.78) saturate(0.95);
}

/* Legibility scrim. The reel is a bright grey product piece, so the lower
   half needs real weight under the headline — tuned against the actual
   footage, not guessed. Upper third stays light so the work still reads. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Anchored under the text block, bottom-left, so the right of frame stays
       clear for the work itself */
    radial-gradient(90% 70% at 8% 88%, rgba(2,28,29,0.92) 0%, rgba(2,28,29,0.45) 45%, transparent 72%),
    linear-gradient(180deg,
      rgba(2,28,29,0.55) 0%,
      rgba(2,28,29,0.12) 28%,
      rgba(2,28,29,0.42) 58%,
      rgba(2,28,29,0.80) 82%,
      rgba(2,28,29,0.92) 100%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero h1 {
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -0.045em;
  max-width: 16ch;
}

.hero h1 .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero h1 .word > span { display: inline-block; }

.hero__sub {
  font-size: var(--step-1);
  color: var(--on-petrol-mid);
  max-width: 46ch;
  margin-top: 1.6rem;
  line-height: 1.5;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.4rem; }

.hero__avail {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.2rem;
  font-family: var(--label);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-petrol-soft);
}
.hero__avail::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  flex: none;
}

/* ==========================================================================
   Reel modal
   ========================================================================== */

.btn__play {
  width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  flex: none;
}

.reel {
  --ratio: 1.7778;   /* 16:9; a film card can override it (data-film-ratio) */
  border: 0;
  padding: 0;
  background: transparent;
  /* The dialog takes the film's shape, so the close button, which sits on
     the dialog's corner, lines up with the film whatever its ratio. */
  width: min(1180px, 92vw, calc(84vh * var(--ratio)));
  max-height: 90vh;
  overflow: visible;
}
.reel::backdrop { background: rgba(2, 20, 21, 0.9); backdrop-filter: blur(6px); }

.reel__video {
  width: 100%;
  max-height: 84vh;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 4px;
  display: block;
}

/* Vimeo films use the same box as the reel video. The iframe fills it and
   Vimeo letterboxes inside its own player. */
.reel__frame {
  width: 100%;
  aspect-ratio: var(--ratio);
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}
.reel__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.reel__close {
  position: absolute;
  top: -2.9rem; right: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1;
  background: transparent;
  color: var(--on-petrol);
  border: 1px solid rgba(244, 241, 233, 0.35);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.reel__close:hover { background: var(--mint); color: var(--petrol); border-color: var(--mint); }

@media (max-width: 640px) {
  .reel__close { top: -2.6rem; }
}

/* ==========================================================================
   Logo strip
   ========================================================================== */

.logos__head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; margin-bottom: 2.5rem; }

/* ==========================================================================
   Client marquee
   ========================================================================== */

.marquee {
  overflow: hidden;
  /* fade both ends so logos enter and leave instead of being cut off */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__set {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 6vw, 6.5rem);
  padding-right: clamp(3rem, 6vw, 6.5rem);
  margin: 0;
  list-style: none;
}

.marquee__set li { display: flex; align-items: center; flex: none; }

.marquee__set img {
  max-height: 30px;
  width: auto;
  /* brightness(0) maps every source colour to black while keeping alpha, so
     white artwork and coloured artwork end up identical on the sand ground */
  filter: brightness(0);
  opacity: 0.55;
  transition: opacity 0.35s var(--ease);
}
.marquee__set img:hover { opacity: 1; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* ==========================================================================
   Pillars — "Visualize. Explain. Sell." made structural
   ========================================================================== */

.pillars__lede { font-size: var(--step-2); max-width: 22ch; font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: 3.5rem;
}

/* Subgrid: every pillar's four children (clip, word, copy, terms) sit on rows
   shared by all three pillars, so the price lines align even when one
   pillar's copy or list wraps an extra line. Without subgrid support this
   degrades to ordinary stacked rows. */
.pillar {
  border-top: 1px solid var(--ink);
  padding-top: 1.25rem;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0.75rem;
  justify-items: start;
}

/* Proof, not decoration — the clip demonstrates the word beneath it */
/* 16:9 to match the source footage — a 4:3 well would centre-crop away a
   quarter of every frame, which wrecks the wide desk composition */
.pillar__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--petrol-lift);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.pillar__media video, .pillar__media img { width: 100%; height: 100%; object-fit: cover; }

.pillar__word {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.pillar p { font-size: var(--step--1); color: var(--ink-mid); }

/* Price, inclusions and timeline sit together in the last subgrid row of
   each pillar, so the price lines align across the three columns. */
.pillar__terms {
  /* Top of its shared row, not pushed down: pushing it down is what
     knocked the price lines out of line */
  padding-top: 0.6rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pillar__price,
.pillar__time {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.pillar__price { color: var(--ink); }
.pillar__includes {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0 0;
  border-top: 1px solid rgba(10, 31, 32, 0.12);
  display: grid;
  gap: 0.3rem;
  font-size: var(--step--1);
  color: var(--ink-mid);
}
.pillar__includes li { padding-left: 1.1rem; position: relative; }
.pillar__includes li::before { content: "+"; position: absolute; left: 0; color: var(--ink-soft); }

/* ==========================================================================
   Case study — the flagship block
   ========================================================================== */

.case__head { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: baseline; justify-content: space-between; margin-bottom: 2.75rem; }

.case__title { font-size: var(--step-3); max-width: 18ch; }

.case__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--petrol-lift);
  border-radius: 4px;
  overflow: hidden;
}
.case__media video, .case__media img { width: 100%; height: 100%; object-fit: cover; }

.case__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: rgba(199, 237, 207, 0.16);
  border: 1px solid rgba(199, 237, 207, 0.16);
  margin-top: 2.5rem;
}

.case__cell { background: var(--petrol); padding: 1.15rem 1.35rem; display: flex; flex-direction: column; gap: 0.45rem; }
.case__cell dt { font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-petrol-soft); margin: 0; }
.case__cell dd { margin: 0; font-size: var(--step--1); color: var(--on-petrol); font-weight: 500; line-height: 1.45; }
.case__cell--result dd { color: var(--mint); font-size: var(--step-1); font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }

.case__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 860px) { .case__body { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; } }

.case__brief p { color: var(--on-petrol-mid); }

.case__quote { border-left: 2px solid var(--mint); padding-left: 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.case__quote blockquote { margin: 0; font-family: var(--display); font-size: var(--step-1); font-weight: 500; letter-spacing: -0.02em; line-height: 1.36; color: var(--on-petrol); }
.case__quote figcaption { font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-petrol-soft); line-height: 1.7; }

/* 2x2 of stills, then the explainer clip spanning both rows at double width.
   Because the wide cell is 2fr across two 16:9 rows, it lands on 16:9 too. */
.case__stills {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
.case__still--wide { grid-column: 3; grid-row: 1 / span 2; aspect-ratio: auto; }
.case__still--wide video { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .case__stills { grid-template-columns: 1fr 1fr; }
  .case__still--wide { grid-column: 1 / span 2; grid-row: auto; aspect-ratio: 16 / 9; }
}
/* 16:9 to match the source renders, as with the hero and pillar wells */
.case__still { aspect-ratio: 16 / 9; background: var(--petrol-lift); border-radius: 3px; overflow: hidden; }
.case__still img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Selected work grid — Tendril's model: loop, title, one line beneath.
   Breadth lives here so the flagship above can carry the depth.
   ========================================================================== */

.grid__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(199, 237, 207, 0.2);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  margin-top: 2.5rem;
}

.card { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }

.card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--petrol-lift);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.35rem;
}
.card__media video, .card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.card:hover .card__media video, .card:hover .card__media img { transform: scale(1.03); }

.card__tag {
  font-family: var(--label);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-petrol-soft);   /* subordinate to the title, not competing */
  transition: color 0.3s var(--ease);
}
.card:hover .card__tag { color: var(--mint); }

.card__title {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--on-petrol);
}
.card:hover .card__title { text-decoration: underline; text-underline-offset: 4px; }

.card__desc { font-size: var(--step--1); color: var(--on-petrol-mid); max-width: 40ch; }

/* Cards that are not links (the live 3D card, and projects with nothing
   behind them yet) must not borrow the hover cues the linked cards use. */
.card--live:hover .card__title,
.card--static:hover .card__title { text-decoration: none; }
.card--live:hover .card__tag,
.card--static:hover .card__tag { color: var(--on-petrol-soft); }
.card--live:hover .card__media img,
.card--static:hover .card__media video { transform: none; }

.card__media--3d { position: relative; background: var(--white); }
.card__media--3d .card__fallback,
.card__media--3d model-viewer {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.card__media--3d .card__fallback { object-fit: cover; }
/* Fallback only: gone once the model has loaded (see js/main.js) */
.card__media--3d.is-live .card__fallback { display: none; }
.card__media--3d model-viewer {
  background: transparent;
  --poster-color: transparent;   /* let the fallback and plate show through */
  cursor: grab;
}
.card__media--3d model-viewer:active { cursor: grabbing; }

/* ==========================================================================
   CTA band
   ========================================================================== */

/* ==========================================================================
   Studio: who is behind the work. Same vocabulary as the pillars band:
   a display-font lede, muted body copy, and top-ruled items.
   ========================================================================== */
.studio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
}
@media (min-width: 900px) {
  .studio__grid { grid-template-columns: 5fr 6fr; align-items: start; }
}
.studio__lede {
  margin-top: 0.75rem;
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 20ch;
}
.studio__body p { color: var(--ink-mid); max-width: 52ch; }
.studio__body p + p { margin-top: 1rem; }

.studio__facts {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.5rem;
}
.studio__facts li {
  border-top: 1px solid var(--ink);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}
.studio__facts strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-0, 1rem);
}

.cta__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.cta h2 { font-size: var(--step-3); max-width: 15ch; }
.cta p { color: var(--ink-mid); margin-top: 1rem; max-width: 40ch; }

/* Calendly panel. Its own theming is unavailable on this plan, so the widget
   arrives white-and-blue — framed as an intentional card rather than left to
   sit awkwardly on the sand. */
.booker { max-width: 940px; }

.booker__frame {
  background: var(--white);
  border: 1px solid var(--sand-deep);
  border-radius: 4px;
  overflow: hidden;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Once the real iframe is in, stop centring so the widget fills the card */
.booker__frame.is-ready { display: block; }
.booker__frame.is-failed { min-height: 200px; }

.booker__idle {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.booker__alt {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: none;
}
.booker__alt a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.booker__alt a:hover { color: var(--petrol); }

@media (max-width: 640px) {
  .booker__frame { min-height: 760px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot { background: var(--petrol-deep); color: var(--on-petrol); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot__grid { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; }
/* align-self is load-bearing: .foot__col is a column flexbox, whose default
   align-items:stretch would pull the image to the column width and distort it */
.foot__mark {
  height: 28px;
  width: auto;
  align-self: flex-start;
  display: block;
  margin-bottom: 0.35rem;
}
.foot__col { display: flex; flex-direction: column; gap: 0.6rem; }
.foot__col a, .foot__col span { font-size: var(--step--1); color: var(--on-petrol-mid); transition: color 0.25s var(--ease); }
.foot__col a:hover { color: var(--mint); }
.foot__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(199,237,207,0.14); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-petrol-soft); }

/* ==========================================================================
   Placeholders — everything here is deleted when real media lands.
   Deliberately loud so nothing reads as finished work.
   ========================================================================== */

.ph {
  position: relative;
  display: grid;
  place-items: start center;
  padding-top: clamp(1rem, 8vh, 5rem);
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(45deg, rgba(199,237,207,0.045) 0 12px, transparent 12px 24px),
    linear-gradient(140deg, #06393a 0%, #042F30 45%, #08484a 100%);
  background-size: 34px 34px, 300% 300%;
  animation: ph-drift 22s ease-in-out infinite;
  outline: 1px dashed rgba(199, 237, 207, 0.34);
  outline-offset: -8px;
}

@keyframes ph-drift {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50%      { background-position: 0 0, 100% 50%; }
}

.ph__tag {
  font-family: var(--label);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(199, 237, 207, 0.72);
  text-align: center;
  padding: 0 1rem;
  line-height: 1.9;
}

/* Inline "you owe me this" slot inside otherwise-real content */
.slot {
  font-family: var(--label);
  font-size: 0.78em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint);
  border: 1px dashed rgba(199, 237, 207, 0.5);
  border-radius: 3px;
  padding: 0.15em 0.5em;
  white-space: nowrap;
}

/* ==========================================================================
   Reveals — CSS transitions driven by IntersectionObserver.
   Deliberately NOT tied to an animation library: if a rAF-based pipeline
   stalls (background tab, low-power mode, blocked CDN) the visitor would get
   a blank page. IO fires regardless of frame-rate health, and without JS at
   all the content is simply visible.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Hero headline: each word rises out of its own overflow mask on load */
.js .hero h1 .word > span {
  transform: translateY(112%);
  animation: word-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}
.js .hero h1 .word:nth-child(2) > span { animation-delay: 0.235s; }
.js .hero h1 .word:nth-child(3) > span { animation-delay: 0.32s; }

@keyframes word-rise { to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .hero h1 .word > span { transform: none; animation: none; }
  .ph { animation: none; }
}