/* ---------------------------------------------------------------- tokens */
/* Dark, quiet and roomy. One ink, two greys, one green that means "you can press
   this" (the brand green). Surfaces are told apart by a slightly lifted fill and generous rounding
   rather than borders, and the only strong colour on the page comes from the
   videos themselves. */
:root {
  --bg:        #050706;
  --surface:   #161617;
  --surface-2: #2C2C2E;
  --ink:       #F5F5F7;
  --ink-dim:   #A1A1A6;
  --ink-faint: #86868B;
  --line:      #424245;
  --hairline:  rgba(255,255,255,0.1);
  --accent:    #1FDD85;
  --accent-hi: #45E69B;
  --on-accent: #04140C;
  --link:      #1FDD85;
  --accent-soft: rgba(31,221,133,0.28);
  --live:      #30D158;
  --ok:        #30D158;
  --warn:      #FF453A;

  /* the system face on Apple devices, Inter everywhere else */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* one easing for everything, so every movement on the page feels related */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 0 0 1px rgba(255,255,255,0.06), 0 12px 32px rgba(0,0,0,0.5);
  --shadow-lg: 0 0 0 1px rgba(255,255,255,0.1), 0 24px 56px rgba(0,0,0,0.7);

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 12px;
}

/* ---------------------------------------------------------------- ground */
* { box-sizing: border-box; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.47 var(--font);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

/* The page is not flat black. A soft green light sits above the hero, a fine
   dot grid fades out beneath it, and three faint pools of green and teal hang
   in the background (fixed to the window) with a vignette around the edges.
   All still; nothing moves. */
body::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 900px;
  background:
    radial-gradient(ellipse 900px 460px at 50% -8%, rgba(31,221,133,0.22), transparent 68%),
    radial-gradient(circle at center, rgba(255,255,255,0.085) 1px, transparent 1.6px) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 130% 110% at 50% 46%, transparent 40%, rgba(0,0,0,0.55)),
    radial-gradient(ellipse 820px 600px at 4% 22%, rgba(31,221,133,0.075), transparent 62%),
    radial-gradient(ellipse 760px 560px at 98% 52%, rgba(20,184,166,0.07), transparent 60%),
    radial-gradient(ellipse 1000px 520px at 46% 108%, rgba(31,221,133,0.08), transparent 64%);
  pointer-events: none;
  z-index: -2;
}

::selection { background: var(--accent-soft); }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3 { color: var(--ink); }

h1 {
  font-size: clamp(2.6rem, 6.6vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.04;
  max-width: 16ch;
  text-wrap: balance;
  margin: 0 0 22px;
}

h2 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 8px 0 14px;
}

h3 {
  font-weight: 600;
  letter-spacing: -0.022em;
}

a { color: inherit; }

a:focus-visible,
button:focus-visible,
video:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 0 1px var(--link);
}

/* ---------------------------------------------------------------- type utils */
.eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-dim);
  margin: 0;
}

.section-sub {
  color: var(--ink-dim);
  font-size: 19px;
  line-height: 1.42;
  letter-spacing: -0.016em;
  max-width: 40ch;
  margin: 0;
}

/* Section heads sit centred, the way a product page introduces each part of the
   story. The panels under them keep their own left alignment. */
.section > .eyebrow,
.section > h2,
.section > .section-sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 500 17px/1 var(--font);
  letter-spacing: -0.016em;
  padding: 13px 24px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn:active { transform: scale(0.97); }

.btn-solid {
  background: var(--accent);
  color: var(--on-accent);
}

@media (hover: hover) {
  .btn-solid:hover { background: var(--accent-hi); }
}

.btn-ghost {
  background: transparent;
  border-color: var(--link);
  color: var(--link);
}

@media (hover: hover) {
  .btn-ghost:hover { background: var(--link); color: var(--on-accent); }
}

/* ---------------------------------------------------------------- nav */
/* A floating pill of frosted glass, carried over from the live site. It hovers
   16px below the top of the window and everything scrolls under it. */
.nav-shell {
  position: sticky;
  top: 16px;
  z-index: 60;
  padding: 0 16px;
}

.nav {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 7px 7px 7px 22px;
  border-radius: 999px;
  background:
    linear-gradient(168deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    rgba(18,21,19,0.55);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 34px rgba(0,0,0,0.45);
}

.wordmark {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}

.nav-links a {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}

@media (hover: hover) {
  .nav-links a:hover { color: var(--ink); }
}

.nav-end {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.nav-links + .nav-end { margin-left: 0; }

.btn-nav {
  font-size: 13px;
  padding: 10px 18px;
}

.menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--ink);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s var(--ease);
}

.nav.menu-open .menu-btn { background: rgba(255,255,255,0.14); }

@media (max-width: 639.98px) {
  .menu-btn { display: inline-flex; }

  /* the links leave the flow to become the menu panel, so the auto margin they
     carried stops pushing anything and the button pair has to take it over */
  .nav-links + .nav-end { margin-left: auto; }

  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 10px;
    /* opaque: the pill is a backdrop root, so a blur here would have nothing
       behind it to sample */
    background:
      linear-gradient(168deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014)),
      #121513;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.6);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top center;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }

  .nav.menu-open .nav-links {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-links a {
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 16px;
    color: var(--ink);
  }

  .nav-links a:active { background: rgba(255,255,255,0.07); }

  @media (hover: hover) {
    .nav-links a:hover { background: rgba(255,255,255,0.07); }
  }
}

/* ---------------------------------------------------------------- hero */
.hero { padding-top: 120px; padding-bottom: 20px; }

.hero-frame { text-align: center; }

.hero-frame h1 {
  margin-left: auto;
  margin-right: auto;
}

/* Headline with one key claim: small dim lead-in, then the promise big and green */
.hero-key { max-width: 16ch; margin-bottom: 30px; }
.hero-key-lead {
  display: block;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-dim);
  margin-bottom: 0.3em;
}
.hero-key-main {
  display: block;
  font-size: 1.12em;
  line-height: 1.02;
}
.hero-key-num {
  background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(31,221,133,0.35));
  white-space: nowrap;
  position: relative;
}
/* hand-drawn green swoosh under "24 hours" */
.hero-key-num::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 6%;
  bottom: -0.26em;
  height: 0.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 17 C 48 7, 118 3, 196 10' fill='none' stroke='%231FDD85' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M30 20 C 80 13, 132 11, 176 14' fill='none' stroke='%2345E69B' stroke-width='3.5' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 26px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(48,209,88,0.2);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hero-sub {
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--ink-dim);
  max-width: 40ch;
  margin: 0 auto 34px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 0 30px;
}

.cap-line {
  font-size: 14px;
  color: var(--ink-faint);
  margin: 0;
}

/* ---------------------------------------------------------------- sections */
.section { padding-top: 150px; }

/* ---------------------------------------------------------------- reveal */
/* Things rise gently into place as they scroll into view. The class is only
   applied by the script, and the page only hides anything once the script has
   flagged itself as running, so without JS every block is simply there. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}

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

/* ---------------------------------------------------------------- work */
.work-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  margin-bottom: 14px;
}

.work-head h2 { margin: 8px 0 0; }

.work-head + .section-sub { margin-top: 4px; }

/* the segmented control: a glass track like the pill menu, with a green pill
   for the chosen one */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background:
    linear-gradient(168deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    rgba(18,21,19,0.6);
  border: 1px solid rgba(255,255,255,0.11);
  order: 2;
}

.seg-btn {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 14px/1 var(--font);
  letter-spacing: -0.01em;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.7;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease), opacity 0.35s var(--ease);
}

@media (hover: hover) {
  .seg-btn:hover { opacity: 1; }
}

.seg-btn[aria-selected="true"] {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  opacity: 1;
  box-shadow: 0 4px 16px rgba(31,221,133,0.3), inset 0 1px 0 rgba(255,255,255,0.35);
}

.work-panel, .vsl-panel { animation: panel-in 0.5s var(--ease-out); }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.work-grid {
  --grid-gap: 24px;
  --card-pad: 0px; /* cards have no frame of their own; the pair maths below reads it */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  align-items: start;
  margin-top: 48px;
}

.card {
  padding: var(--card-pad);
}

.thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transform: translateZ(0); /* keeps the rounded clip crisp while it scales */
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

@media (hover: hover) {
  .thumb:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: var(--shadow-lg);
  }
}

.thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--px, 34%);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

@media (hover: hover) {
  .thumb:hover .playhead { opacity: 0.9; }
}

.timecode {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font: 500 11px/1 var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: #fff;
  background: rgba(29,29,31,0.5);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  padding: 6px 9px;
  border-radius: 999px;
  pointer-events: none;
}

.card h4 {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  margin: 16px 0 0 4px;
}

/* A landscape piece among vertical ones takes its own shape instead of being
   cropped to 9:16, so its card simply ends up shorter than its neighbours. */
.card.is-wide .thumb { aspect-ratio: 16 / 9; }

/* A tall piece and a wide one side by side. 81:256 is the column split at which
   9/16 and 16/9 come out the same height, so both thumbnails share a top and a
   bottom line with nothing cropped. Any frame a card carries has to come out of
   the width before the split, which is what --card-pad is for. 337 = 81 + 256,
   and --pair-lead is the share of whichever shape is on the left. */
.work-grid.is-pair,
.pair-row {
  --pair-lead: 81; /* the tall piece leads */
  grid-template-columns:
    calc(var(--card-pad) * 2 + (100% - var(--grid-gap) - var(--card-pad) * 4) * var(--pair-lead) / 337)
    1fr;
}

.pair-row.leads-wide { --pair-lead: 256; }

.pair-row {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--grid-gap);
  align-items: start;
}

/* A collapsed panel shows exactly one row. The cut-off follows the column count
   at each width below. Scoped to .is-collapsible, which the script adds only
   where there genuinely is more than one row, so without JS nothing hides. */
.work-panel.is-collapsible:not(.is-open) .card:nth-child(n + 4) { display: none; }
.work-panel.is-collapsible:not(.is-open) .pair-row { display: none; }

.more-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 36px auto 0;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 500 15px/1 var(--font);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.3s var(--ease);
}

/* an author display beats the UA sheet's [hidden], so it has to be restated */
.more-btn[hidden] { display: none; }

.more-arrow {
  stroke: var(--ink);
  transition: transform 0.4s var(--ease-out);
}

.more-btn[aria-expanded="true"] .more-arrow { transform: rotate(180deg); }

@media (hover: hover) {
  .more-btn:hover { background: var(--surface-2); }
}

/* ---------------------------------------------------------------- process */
/* three soft tiles, each numbered, rather than one panel split by lines */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}

/* Glass tiles: the process steps and the service cards wear the contact
   card's light, a little quieter. Green light from the top edge (--glow sets
   how strong), the glass sheen and hairline edge of the pill menu, and the dot
   grid fading out under the heading. */
.process-cell,
.plan {
  --glow: 0.13;
  position: relative;
  border: 1px solid rgba(255,255,255,0.1);
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(31,221,133,var(--glow)), transparent 72%),
    linear-gradient(168deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 45%),
    linear-gradient(180deg, transparent 0, rgba(17,20,18,0.4) 60px, #111412 170px),
    radial-gradient(circle at center, rgba(255,255,255,0.085) 1px, transparent 1.6px) 0 0 / 22px 22px,
    #111412;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 20px 50px rgba(0,0,0,0.45);
}

.process-cell::before,
.plan::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,221,133,0.85), transparent);
  opacity: 0.6;
  pointer-events: none;
}

.process-cell {
  border-radius: var(--radius-lg);
  padding: 34px 30px 38px;
}

.step-num {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--link);
  text-shadow: 0 0 28px rgba(31,221,133,0.45);
  margin: 0 0 30px;
}

.process-cell h3 {
  font-size: 21px;
  line-height: 1.2;
  margin: 0 0 10px;
}

.process-cell p:last-child {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
}

/* ---------------------------------------------------------------- plans */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 56px;
}

/* the hub offers two services, so its row splits in half instead of leaving a
   third of it empty */
@media (min-width: 860px) {
  .plans-grid.is-duo {
    grid-template-columns: repeat(2, 1fr);
    max-width: 880px;
    margin-inline: auto;
  }
}

.plan {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  padding: 34px 30px 34px;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}

@media (hover: hover) {
  .plan:hover {
    transform: translateY(-4px);
    border-color: rgba(31,221,133,0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 26px 60px rgba(0,0,0,0.55), 0 0 40px rgba(31,221,133,0.08);
  }
}

.plan-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-dim);
  margin: 0 0 10px;
}

.plan h3 {
  font-size: 32px;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0 0 12px;
}

.plan-note {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0 0 26px;
}

.plan-cta {
  width: 100%;
  margin-top: auto;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: var(--ink);
  font-size: 15px;
  padding: 13px 18px;
}

@media (hover: hover) {
  .plan-cta:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.2); }
}

.divider {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 26px 0 20px;
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}

.tick {
  flex: 0 0 auto;
  margin-top: 4px;
  stroke: var(--link);
}

.plan-guarantee {
  margin: 20px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--link);
}

/* the most common option is the one card with a green edge and a faint green
   lift, so it reads first without needing a badge */
.plan--featured {
  --glow: 0.24;
  border-color: rgba(31,221,133,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 20px 50px rgba(0,0,0,0.45), 0 0 50px rgba(31,221,133,0.1);
}

.plan--featured::before { opacity: 1; }

@media (hover: hover) {
  .plan--featured:hover { border-color: rgba(31,221,133,0.7); }
}

.plan--featured .plan-label { color: var(--link); }

.plan--featured .plan-cta { background: var(--accent); color: var(--on-accent); }

@media (hover: hover) {
  .plan--featured .plan-cta:hover { background: var(--accent-hi); }
}

/* ---------------------------------------------------------------- faq */
.faq-list {
  max-width: 760px;
  margin: 56px auto 0;
  border-top: 1px solid var(--line);
  text-align: left;
}

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  list-style: none;
  cursor: pointer;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  border-radius: 8px;
  transition: color 0.3s var(--ease);
}

.faq-item summary::-webkit-details-marker { display: none; }

@media (hover: hover) {
  .faq-item summary:hover { color: var(--link); }
}

.faq-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  stroke: var(--ink-dim);
  transition: transform 0.4s var(--ease-out), stroke 0.3s var(--ease);
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  stroke: var(--link);
}

.faq-item > p {
  margin: 0;
  padding: 0 4px 26px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.faq-item[open] > p { animation: faq-in 0.45s var(--ease-out); }

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- contact */
.contact { padding: 150px 0 40px; }

.contact h2 { margin-top: 0; }

/* The card carries the same light as the top of the page: a green glow
   pooled behind it, green light falling in from its top edge, the fading dot
   grid, and the glass edge and sheen of the pill menu. All background layers,
   so nothing needs clipping and the dropdown lists can still hang outside. */
.contact .container { position: relative; }

.contact .container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -120px;
  bottom: -120px;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(31,221,133,0.13), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.contact-card {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 56px 52px;
  border-radius: 36px;
  border: 1px solid rgba(255,255,255,0.11);
  background:
    radial-gradient(ellipse 75% 45% at 50% 0%, rgba(31,221,133,0.20), transparent 70%),
    linear-gradient(168deg, rgba(255,255,255,0.055), rgba(255,255,255,0.01) 45%),
    linear-gradient(180deg, transparent 0, rgba(17,20,18,0.35) 120px, #111412 300px),
    radial-gradient(circle at center, rgba(255,255,255,0.09) 1px, transparent 1.6px) 0 0 / 24px 24px,
    #111412;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.4);
}

/* a thin line of green light along the top edge */
.contact-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,221,133,0.85), transparent);
  pointer-events: none;
}

.contact-card h2,
.contact-card .section-sub,
.contact-card .email { text-align: center; }

.contact-card .section-sub { margin-left: auto; margin-right: auto; }

.contact-form {
  margin-top: 40px;
  display: grid;
  gap: 18px;
}

.botcheck { display: none; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field { display: grid; gap: 8px; }

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding-left: 2px;
}

.field input,
.field textarea,
.dropdown-btn {
  width: 100%;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  color: var(--ink);
  font: 400 17px/1.4 var(--font);
  letter-spacing: -0.01em;
  padding: 13px 15px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

@media (hover: hover) {
  .field input:hover,
  .field textarea:hover,
  .dropdown-btn:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.055); }
}

.field input:focus-visible,
.field textarea:focus-visible,
.dropdown-btn:focus-visible {
  outline: none;
  border-color: var(--link);
  background: rgba(31,221,133,0.04);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.field ::placeholder { color: var(--ink-faint); }

.field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #161a17 inset;
  -webkit-text-fill-color: var(--ink);
}

.field textarea { resize: vertical; min-height: 120px; }

/* our replacement for the browser's validation bubble; placed after the hover
   rule on purpose, same specificity, so it wins */
.field-error {
  margin: 0;
  padding-left: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--warn);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--warn);
  background: rgba(255,69,58,0.08);
}

/* Custom dropdown: the native select popup can't be styled, so the list is ours */
.dropdown { position: relative; }

.dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.dropdown.open .dropdown-btn {
  border-color: var(--link);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.dropdown-chevron {
  flex: none;
  stroke: var(--ink-dim);
  transition: transform 0.35s var(--ease-out);
}

.dropdown.open .dropdown-chevron { transform: rotate(180deg); }

.dropdown-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgba(44,44,46,0.97);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease-out), visibility 0.25s;
}

.dropdown.open .dropdown-list {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

.dropdown-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font: 400 15px/1.4 var(--font);
  color: var(--ink);
  cursor: pointer;
}

.dropdown-option.is-active { background: rgba(255,255,255,0.08); }

.dropdown-option[aria-selected="true"] { color: var(--link); font-weight: 500; }

.dropdown-option[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: 11px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9'%3E%3Cpath d='M1 4.5l3 3L10 1' fill='none' stroke='%231FDD85' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* the button stands alone and the status line drops in underneath it; the gap
   is a margin on the status, so an empty live region takes no room */
.form-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
}

.form-foot .btn { min-width: 180px; }

.form-foot .btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.form-status {
  font-size: 14px;
  color: var(--ink-dim);
  text-align: center;
  margin: 0;
}

.form-status:not(:empty) { margin-top: 14px; }

.form-status.is-ok { color: var(--ok); }

.email {
  margin: 34px 0 0;
  font-size: 15px;
  color: var(--ink-dim);
}

/* the Instagram line sits just under the email line */
.email.email-social { margin-top: 6px; }

.email a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

@media (hover: hover) {
  .email a:hover { text-decoration: underline; }
}

.copied-tag {
  font-size: 13px;
  font-weight: 500;
  color: var(--ok);
  margin-left: 10px;
}

/* service pages keep the door back to the hub under the form, where it can't
   pull anyone off the pitch on the way in */
.also-line {
  margin: 40px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--ink-dim);
}

.also-line a {
  color: var(--link);
  text-decoration: none;
}

@media (hover: hover) {
  .also-line a:hover { text-decoration: underline; }
}

.footer-legal {
  margin-top: 72px;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  font-size: 12px;
  color: var(--ink-faint);
}

.footer-legal p { margin: 0; }

.footer-legal a {
  color: var(--ink-dim);
  text-decoration: none;
}

@media (hover: hover) {
  .footer-legal a:hover { color: var(--ink); text-decoration: underline; }
}

/* ---------------------------------------------------------------- legal pages */
.legal-page {
  max-width: 760px;
  padding-top: 96px;
  padding-bottom: 60px;
}

.legal-page h1 {
  font-size: clamp(2.4rem, 6vw, 3.5rem);
  margin: 10px 0 12px;
}

.legal-updated {
  font-size: 14px;
  color: var(--ink-faint);
  margin: 0 0 48px;
}

.legal-page h2 {
  font-size: 22px;
  letter-spacing: -0.025em;
  margin: 44px 0 10px;
}

.legal-page p,
.legal-page li {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.legal-page p { margin: 0 0 14px; }

.legal-page a { color: var(--link); text-decoration: none; }

@media (hover: hover) {
  .legal-page a:hover { text-decoration: underline; }
}

/* ---------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0,0,0,0.85);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  animation: fade-in 0.35s var(--ease);
}

.lightbox[hidden] { display: none; }

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-panel {
  position: relative;
  width: min(960px, 100%);
  animation: pop-in 0.5s var(--ease-out);
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

.lightbox-panel video {
  display: block;
  width: 100%;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px); /* mobile Safari: 100vh includes the browser chrome */
  object-fit: contain;
  border-radius: var(--radius-md);
  background: #000;
}

.lightbox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(58,58,60,0.92);
  border: 0;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

@media (hover: hover) {
  .lightbox-close:hover { background: #48484A; transform: scale(1.08); }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 859.98px) {
  .process-grid,
  .plans-grid {
    grid-template-columns: 1fr;
  }

  /* thumbnails go two up, and a collapsed panel follows them down to two. The
     gap is a variable because the pair layout subtracts it before splitting. */
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    --grid-gap: 16px;
  }

  .work-panel.is-collapsible:not(.is-open) .card:nth-child(n + 3) { display: none; }

  .section { padding-top: 110px; }

  .hero { padding-top: 88px; }

  .contact { padding-top: 110px; }
}

@media (max-width: 639.98px) {
  .container { padding: 0 20px; }

  body { font-size: 16px; }

  .section-sub { font-size: 17px; }

  .lightbox { padding: 16px; }

  .lightbox-close { top: -12px; right: -8px; }

  .contact-card {
    padding: 40px 20px 32px;
    border-radius: 28px;
  }

  .form-row { grid-template-columns: 1fr; }

  /* one up: two 9:16 boxes side by side are too small to judge an edit */
  .work-grid { grid-template-columns: 1fr; }

  .work-grid.is-pair,
  .pair-row { grid-template-columns: 1fr; }

  .work-panel.is-collapsible:not(.is-open) .card:nth-child(n + 2) { display: none; }

  .seg { width: 100%; }

  .seg-btn {
    flex: 1;
    padding: 10px 8px;
  }

  .plan h3 { font-size: 28px; }

  .faq-item summary { font-size: 17px; padding: 20px 2px; }
}

/* ---------------------------------------------------------------- touch screens */
@media (pointer: coarse) {
  .btn { min-height: 44px; }

  .menu-btn { width: 44px; height: 44px; }

  .dropdown-option { min-height: 44px; }

  .seg-btn { min-height: 44px; }

  .more-btn { min-height: 44px; }

  .field input,
  .field textarea,
  .dropdown-btn,
  .dropdown-option {
    font-size: 16px; /* under 16px, iOS Safari zooms the page when a field gets focus */
  }

  .lightbox-close { width: 44px; height: 44px; }

  .email a { display: inline-block; padding: 10px 0 4px; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal { opacity: 1; transform: none; }

  .thumb:hover,
  .plan:hover { transform: none; }
}

/* the send button glows like a light source on the card */
.contact-form .btn-solid {
  box-shadow: 0 10px 30px rgba(31,221,133,0.28), inset 0 1px 0 rgba(255,255,255,0.35);
}

@media (hover: hover) {
  .contact-form .btn-solid:hover { box-shadow: 0 14px 40px rgba(31,221,133,0.4), inset 0 1px 0 rgba(255,255,255,0.35); }
}

/* ================================================================ phones: calm
   Phones only (tablet and desktop untouched). Nothing the user asked to keep is
   removed; it is quietened instead. Hidden: the small labels above headings,
   the line under each section heading, the work hint and the hero cap line.
   Everything else keeps its content and loses weight: flatter boxes with no
   dot texture, a sideways swipe row for the work, tighter process steps. */
@media (max-width: 639.98px) {
  /* the old `.container { padding: 0 20px }` shorthand zeroed every section's
     top padding; restate the sides only and give the sections their rhythm */
  .container { padding: 0 20px; padding-left: 20px; padding-right: 20px; }
  .hero { padding-top: 60px; padding-bottom: 0; }
  .section { padding-top: 88px; }
  .contact { padding-top: 88px; }

  .section > .eyebrow,
  .section-sub,
  .cap-line,
  .status-chip { display: none; } /* chip: user asked to remove it on phones */

  h2 { font-size: 30px; margin: 0 0 4px; }

  /* hero */
  .status-chip { font-size: 12px; padding: 6px 12px; margin-bottom: 20px; }
  /* user: the top read as "one massive block of text". It now lines up on
     the left like every other section, and its three parts are spaced apart:
     a small lead-in, the big promise, then a quieter line set off by a thin
     green rule, so the eye lands on the promise first */
  .hero-frame { text-align: left; }
  .hero-frame h1 { margin-left: 0; margin-right: 0; }
  .hero-key { margin-bottom: 30px; }
  .hero-key-lead { margin-bottom: 0.45em; }
  .hero-sub {
    font-size: 15px;
    line-height: 1.5;
    max-width: 32ch;
    margin: 0;
    padding-left: 14px;
    border-left: 2px solid rgba(31,221,133,0.55);
    text-wrap: pretty;
  }
  /* user removed the hero buttons on phones: the work sits right under the
     headline, and "Start a project" is already in the top bar */
  .hero-actions { display: none; }
  #work { padding-top: 56px; }

  /* work: one sideways row the thumb can swipe, one big piece at a time
     (user: first "asymmetrical" with a peeking piece, then "bigger, one at a time") */
  /* user asked: "Take a look" and the Ads / VSL switch smaller and
     on the left, lined up with the first video under them */
  .work-head { align-items: flex-start; text-align: left; gap: 12px; margin-bottom: 0; }
  .work-head h2 { font-size: 24px; margin: 0; }
  .seg { width: auto; padding: 3px; }
  .seg-btn { flex: none; font-size: 13px; padding: 8px 16px; min-height: 36px; }
  .work-grid,
  .work-grid.is-pair {
    display: flex;
    gap: 12px;
    margin: 26px 0 0;
    padding: 0 0 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .work-grid::-webkit-scrollbar { display: none; }
  .work-grid .card { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  /* the one landscape piece shows as a tall crop like the rest, so every
     pair is even; tapping it still plays the whole wide video */
  .work-grid .card.is-wide .thumb { aspect-ratio: 9 / 16; }
  .work-grid .card.is-wide .thumb video { object-position: 51% 50%; }
  .work-panel.is-collapsible:not(.is-open) .pair-row,
  .pair-row { display: contents; }
  .work-panel.is-collapsible:not(.is-open) .card:nth-child(n) { display: block; }
  .more-btn { display: none; }
  /* user asked: a ">" so people know more videos sit to the right (the row
     also moves on by itself, script.js). Both arrows always show and wrap round */
  .work-panel { position: relative; }
  .swipe-arrow {
    position: absolute;
    top: calc(50% - 25px); /* the middle of the video, not of video + title */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(10,12,11,0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.3s var(--ease);
  }
  .swipe-next { right: 10px; }
  .swipe-prev { left: 10px; }
  .swipe-arrow.is-off { opacity: 0; pointer-events: none; }
  /* dots under the row: one per video, the current one a longer green pill */
  /* user asked: the dots sit in a see-through pill, with the video number
     ("01 / 07") inside it instead of under each video */
  .work-grid .card h4 { display: none; }
  .swipe-dots {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 14px auto 0;
    padding: 3px 6px 3px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .swipe-count {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-dim);
    margin-right: 6px;
  }
  .swipe-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .swipe-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.28);
    transition: width 0.3s var(--ease), background 0.3s var(--ease);
  }
  .swipe-dot.is-on::before { width: 18px; background: var(--accent); }
  .card h4 { margin-top: 10px; font-size: 13px; }

  /* the boxes stay, but quieter: no dot grid, a softer glow, a lighter shadow */
  .process-cell,
  .plan {
    --glow: 0.09;
    background:
      radial-gradient(ellipse 80% 55% at 50% 0%, rgba(31,221,133,var(--glow)), transparent 72%),
      #111412;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .plan--featured { --glow: 0.16; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }

  /* process: number beside the words, so each step is one compact box */
  .process-grid { gap: 12px; margin-top: 28px; }
  .process-cell {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    padding: 22px 20px;
    border-radius: 22px;
  }
  .step-num {
    grid-row: span 2;
    font-size: 26px;
    text-shadow: none;
    margin: 0;
  }
  .process-cell h3 { font-size: 18px; margin: 2px 0 6px; }
  .process-cell p:last-child { font-size: 15px; }
  /* user asked: the process heading smaller and on the left too, with the
     steps a notch smaller to match */
  #process > h2 { font-size: 24px; text-align: left; margin: 0; }
  #process .process-grid { margin-top: 16px; gap: 10px; }
  #process .process-cell { padding: 18px 18px; column-gap: 14px; border-radius: 20px; }
  #process .step-num { font-size: 22px; }
  #process .process-cell h3 { font-size: 16px; margin: 1px 0 4px; }
  #process .process-cell p:last-child { font-size: 14px; line-height: 1.45; }

  /* services: the tick line moves up under the description and the button
     closes the card, so there is no divider and one clear end to each box */
  .plans-grid { gap: 12px; margin-top: 28px; }
  .plan { padding: 26px 20px 22px; border-radius: 22px; }
  .plan-label { margin-bottom: 6px; }
  .plan h3 { font-size: 26px; margin-bottom: 10px; }
  .plan-note { margin-bottom: 16px; }
  .plan .divider { display: none; }
  .plan .ticks,
  .plan .plan-guarantee { order: 1; }
  .plan .plan-guarantee { margin: 12px 0 0; }
  .plan .plan-cta { order: 2; margin-top: 20px; }
  /* user asked: services heading on the left like the others, boxes smaller */
  #working > h2 { font-size: 24px; text-align: left; margin: 0; }
  #working .plans-grid { margin-top: 16px; gap: 10px; }
  #working .plan { padding: 20px 18px 18px; border-radius: 20px; }
  #working .plan-label { font-size: 12px; margin-bottom: 4px; }
  #working .plan h3 { font-size: 21px; margin-bottom: 6px; }
  #working .plan-note { font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
  #working .ticks { gap: 8px; }
  #working .ticks li { font-size: 14px; }
  #working .plan .plan-guarantee { font-size: 12px; margin-top: 10px; }
  #working .plan .plan-cta { margin-top: 14px; font-size: 14px; padding: 10px 16px; min-height: 40px; }

  /* faq: heading on the left and a notch smaller, like the other sections */
  #faq > h2 { font-size: 24px; text-align: left; margin: 0; }
  .faq-list { margin-top: 16px; }
  .faq-item summary { font-size: 15px; padding: 16px 2px; gap: 16px; }
  .faq-item > p { font-size: 14px; line-height: 1.5; padding: 0 2px 18px; }

  /* contact: the same full form, on a plainer card with a full-width Send */
  .contact .container::before { display: none; }
  .contact-card {
    padding: 22px 16px 20px;
    border-radius: 20px;
    background:
      radial-gradient(ellipse 80% 40% at 50% 0%, rgba(31,221,133,0.12), transparent 70%),
      #111412;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  }
  /* user asked: heading on the left like the other sections, box smaller */
  .contact-card h2,
  .contact-card .email { text-align: left; }
  .contact-card h2 { font-size: 24px; margin: 0; }
  .contact-form { margin-top: 16px; gap: 12px; }
  .form-row { gap: 12px; }
  .field { gap: 6px; }
  .field label { font-size: 12px; }
  /* text stays 16px: any smaller and iPhones zoom in when you tap a field */
  .field input, .field textarea, .dropdown-btn { padding: 10px 13px; border-radius: 12px; }
  .field textarea { min-height: 96px; }
  .form-foot { margin-top: 6px; }
  .form-foot .btn { width: 100%; font-size: 15px; padding: 11px 20px; }
  .email { margin-top: 16px; font-size: 13px; }
  .footer-legal { margin-top: 48px; }
}

/* small phones (320px); the headline needs about 347px at full size */
@media (max-width: 359.98px) {
  /* "stop the scroll." never wraps, and at full size it is wider than 320px */
  .hero-key { font-size: 2.3rem; }
}

/* ================================================================ desktop: two sides
   Tablets and PCs (640px and up; the ad beside the words from 768px, where
   there is room for both). User: the top "looks
   like a massive block of text". It now splits in two: the words on the left,
   spaced like the phone version (small lead-in, the big promise, a quieter
   line set off by a thin green rule, then the buttons), and one ad playing
   silently on the right, which opens with sound on click. The out-of-date
   status chip and the cap line are gone on PCs too. */
.hero-reel { display: none; }

@media (min-width: 640px) {
  .hero-frame { text-align: left; }
  .hero-frame h1 { margin-left: 0; margin-right: 0; }

  .status-chip,
  .cap-line { display: none; }

  .hero-key { font-size: clamp(2.5rem, 4.6vw, 4.1rem); max-width: none; margin-bottom: 34px; }
  .hero-key-lead { margin-bottom: 0.5em; }
  .hero-sub {
    font-size: 19px;
    line-height: 1.5;
    max-width: 36ch;
    margin: 0 0 40px;
    padding-left: 18px;
    border-left: 2px solid rgba(31,221,133,0.55);
    text-wrap: pretty;
  }
  .hero-actions { justify-content: flex-start; margin: 0; }
}

@media (min-width: 768px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(36px, 5vw, 72px);
    padding-top: 136px;
  }

  .hero-reel {
    display: block;
    position: relative;
    /* shorter on low screens, so the whole ad is on screen */
    width: clamp(150px, calc((100vh - 230px) * 0.5625), 300px);
    aspect-ratio: 9 / 16;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    cursor: pointer;
    box-shadow: var(--shadow-lg), 0 30px 90px rgba(31,221,133,0.16);
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  }
  .hero-reel video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-reel-tag {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font: 500 13px/1.2 var(--font);
    color: var(--ink);
    white-space: nowrap;
  }
  .hero-reel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

  @media (hover: hover) {
    .hero-reel:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg), 0 36px 100px rgba(31,221,133,0.26);
    }
  }
}

/* ================================================================ desktop: video row
   Tablets and PCs (640px and up; phones keep their one-at-a-time row, which
   the user asked for). User: "use the same carousel and the arrow system
   from the mobile version", then "make the video in the middle big and
   highlighted and the rest faded". One sideways row that always has a video
   in the middle: that one full size with a green glow, its neighbours smaller
   and faded. Round "<" ">" arrows on the row's edges wrap round, the row moves
   on by itself every 4 s (holds still for 8 s after a click or scroll, and
   while the mouse rests on the middle video), never runs out (copies of the
   last videos sit before the first and vice versa), and the see-through
   pill underneath shows the middle video's number ("03 / 07") with its dot
   lit. A click on a faded video slides it to the middle; a click on the middle
   one plays it with sound. The "More" button and the "01" labels go. */
@media (min-width: 640px) {
  /* the row is measured off the panel (cqw), so the empty lead-in either side
     that lets the first and last videos sit in the middle can be exact */
  .work-panel { container-type: inline-size; }
  .work-grid,
  .work-grid.is-pair {
    /* the middle video: about a third of the row, smaller on low screens so
       it and the pill fit the window together */
    --card-w: min(var(--card-share, 36cqw), calc((100vh - 230px) * 0.5625));
    display: flex;
    gap: 0;
    /* a sideways-scrolling row cuts off anything outside it, so it gets
       enough room above and below for the whole glow (user: "the glow effect
       just gets cut off"), and pulls the page back in by the same amount. The
       spare room lets clicks through to what sits under it */
    margin: -32px 0 -120px;
    padding: 80px calc((100cqw - var(--card-w)) / 2) 140px;
    pointer-events: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .work-grid::-webkit-scrollbar { display: none; }
  .work-grid .card {
    flex: 0 0 var(--card-w);
    scroll-snap-align: center;
    transform: scale(0.78);
    opacity: 0.35;
    filter: saturate(0.5);
    transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out);
    pointer-events: auto;
  }
  /* swapping a copy for the real video happens with no grow or fade */
  .work-grid.is-jumping .card { transition: none; }
  .work-grid .card.is-centre {
    transform: none;
    opacity: 1;
    filter: none;
  }
  .work-grid .card.is-centre .thumb {
    box-shadow:
      0 0 0 1px rgba(31,221,133,0.45),
      0 24px 56px rgba(0,0,0,0.7),
      0 30px 100px rgba(31,221,133,0.24);
  }
  /* the side videos don't lift on hover; they brighten a little instead,
     to say "click to bring me to the middle" */
  .work-grid .card:not(.is-centre) .thumb:hover { transform: none; }
  .work-grid .card:not(.is-centre) .thumb:hover .playhead { opacity: 0; }
  @media (hover: hover) {
    .work-grid .card:not(.is-centre):hover { opacity: 0.6; }
  }
  /* the one landscape piece shows as a tall crop like the rest; a click
     still plays the whole wide video */
  .work-grid .card.is-wide .thumb { aspect-ratio: 9 / 16; }
  .work-grid .card.is-wide .thumb video { object-position: 51% 50%; }
  .work-panel.is-collapsible:not(.is-open) .pair-row,
  .pair-row { display: contents; }
  .work-panel.is-collapsible:not(.is-open) .card:nth-child(n) { display: block; }
  .more-btn,
  .work-grid .card h4 { display: none; }

  .work-panel { position: relative; }
  .swipe-arrow {
    position: absolute;
    top: calc(50% - 20px); /* the middle of the videos, above the pill */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(10,12,11,0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease-out);
  }
  .swipe-arrow svg { width: 16px; height: 16px; }
  .swipe-prev { left: -22px; }
  .swipe-next { right: -22px; }
  .swipe-arrow.is-off { opacity: 0; pointer-events: none; }
  .swipe-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .swipe-dots {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 18px auto 0;
    padding: 4px 8px 4px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .swipe-count {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-dim);
    margin-right: 8px;
  }
  .swipe-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 26px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .swipe-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.28);
    transition: width 0.3s var(--ease), background 0.3s var(--ease);
  }
  .swipe-dot.is-on::before { width: 18px; background: var(--accent); }

  @media (hover: hover) {
    .swipe-arrow:hover { background: rgba(31,221,133,0.22); transform: scale(1.06); }
    .swipe-dot:hover::before { background: rgba(255,255,255,0.55); }
    .swipe-dot.is-on:hover::before { background: var(--accent); }
  }
}

/* ================================================================ desktop: section heads
   Tablets and PCs (640px and up; phones already look like this). User:
   remove the small labels over each heading
   ("Recent work", "Process", "Services", "FAQ"), the "Hover to preview" line
   and the home page's line under "What I edit", and move every heading to
   the left. "Take a look" keeps its Ads / VSL buttons, smaller,
   underneath it. The FAQ list and service cards line up with their headings. */
@media (min-width: 640px) {
  .section > .eyebrow,
  #work > .section-sub,
  .pc-hide { display: none; }
  .section > h2,
  .section > .section-sub {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .section > h2 { margin-top: 0; }
  .work-head {
    align-items: flex-start;
    text-align: left;
    gap: 16px;
  }
  .work-head h2 { margin: 0; }
  .seg { padding: 3px; }
  .seg-btn { font-size: 13px; padding: 7px 15px; }
  .faq-list { max-width: none; margin-left: 0; margin-right: 0; }
  /* the contact box heading too, as it already is on phones */
  .contact-card h2,
  .contact-card .section-sub,
  .contact-card .email { text-align: left; margin-left: 0; margin-right: 0; }
  /* the two service cards span the row, so their left edge meets the heading */
  .plans-grid.is-duo { max-width: none; margin-inline: 0; }
}

/* ================================================================ every size
   User: "adjust the site for every window size and orientation" and "keep our
   style, the carousel and everything consistent across every size". The same
   design everywhere; these only resize it to fit the window. */

/* tablets: the middle video takes a bigger share of the narrower row */
@media (min-width: 640px) and (max-width: 959.98px) {
  .work-grid { --card-share: 46cqw; }
  .hero { padding-top: 112px; }
}

/* short windows (a phone or tablet held sideways, a small laptop window): the
   top section, the ad beside it and the middle video shrink to fit the height */
@media (min-width: 640px) and (max-height: 620px) {
  .hero { padding-top: 76px; align-items: start; }
  .hero-key { font-size: clamp(2.2rem, 7.4vh, 3.4rem); margin-bottom: 22px; }
  .hero-sub { font-size: 17px; margin-bottom: 26px; }
  .hero-reel { width: clamp(130px, calc((100vh - 142px) * 0.5625), 300px); }
  .work-grid,
  .work-grid.is-pair { --card-w: min(var(--card-share, 36cqw), calc((100vh - 112px) * 0.5625)); }
  .section { padding-top: 96px; }
}

/* phones: one video at a time as before, but never taller than the screen
   (small or sideways phones) */
@media (max-width: 639.98px) {
  .work-grid .card .thumb {
    width: min(100%, calc((100vh - 100px) * 0.5625));
    width: min(100%, calc((100svh - 100px) * 0.5625));
    margin-inline: auto;
  }
}

/* big monitors: the page grows with the screen instead of sitting small in
   the middle */
@media (min-width: 1700px) and (min-height: 900px) {
  .container { max-width: 1280px; }
  .hero-key { font-size: 4.8rem; }
  .hero-sub { font-size: 21px; }
  .hero-reel { width: clamp(240px, calc((100vh - 260px) * 0.5625), 360px); }
}
@media (min-width: 2300px) and (min-height: 1200px) {
  .container { max-width: 1480px; }
  .hero-key { font-size: 5.6rem; }
  .hero-sub { font-size: 23px; }
  .hero-reel { width: clamp(240px, calc((100vh - 300px) * 0.5625), 440px); }
  h2 { font-size: 3.6rem; }
}

/* ================================================================ VSL
   The long-form sales video is the second tab of the work (Ads, VSL), shown big and horizontal: the full container width at 16:9, poster first, one press to
   play with sound and the browser's own controls after that. */
.vsl-player {
  position: relative;
  margin-top: 44px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg), 0 40px 120px rgba(31,221,133,0.14);
}
.vsl-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.vsl-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
  color: var(--on-accent);
  cursor: pointer;
  transition: opacity 0.35s var(--ease);
}
.vsl-play-icon {
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  padding-left: 5px;
  box-shadow: 0 0 0 10px rgba(31,221,133,0.18), 0 16px 48px rgba(0,0,0,0.5);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.vsl-play-tag {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font: 500 13px/1.2 var(--font);
  color: var(--ink);
  white-space: nowrap;
}
.vsl-play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
@media (hover: hover) {
  .vsl-play:hover .vsl-play-icon {
    transform: scale(1.06);
    box-shadow: 0 0 0 14px rgba(31,221,133,0.24), 0 16px 48px rgba(0,0,0,0.5);
  }
}
.vsl-player.is-loading .vsl-play-icon { animation: vsl-pulse 1s var(--ease) infinite alternate; }
@keyframes vsl-pulse { to { transform: scale(0.92); opacity: 0.7; } }
.vsl-player.is-playing .vsl-play { opacity: 0; pointer-events: none; }

/* phones: still edge to edge inside the gutter, a little less rounding */
@media (max-width: 639.98px) {
  .vsl-player { margin-top: 24px; border-radius: var(--radius-md); }
  .vsl-play { gap: 12px; }
}
/* big monitors: let it break a little past the text column */
@media (min-width: 1400px) {
  .vsl-player { margin-inline: -40px; }
}