/*
  Mero Motion Studio — styles
  ------------------------------------------------------------
  Brand colours and fonts come from brand/BRAND.md and are defined once in :root below.
  Sections follow the page order: header, hero, 02 problem, 03 process,
  04 what you get, 05 guarantees, 06 work, 07 pricing, 08 FAQ,
  09 call to action, footer, then the privacy page and motion.
*/

/* ---------- Fonts (self-hosted from brand/fonts, SIL Open Font License) ---------- */
/* Fallbacks sized like the brand fonts, so text does not jump while they load. */
@font-face {
  font-family: "Open Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  size-adjust: 105.81%;
  ascent-override: 101.02%;
  descent-override: 27.69%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Josefin Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  size-adjust: 105.51%;
  ascent-override: 71.08%;
  descent-override: 23.69%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Josefin Sans";
  src: url("../../brand/fonts/JosefinSans-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Josefin Sans";
  src: url("../../brand/fonts/JosefinSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Josefin Sans";
  src: url("../../brand/fonts/JosefinSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../brand/fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../brand/fonts/OpenSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Design tokens (brand palette) ---------- */
:root {
  color-scheme: light;

  /* brand colours */
  --bordeaux: #471E1E;   /* main: logo, headings, buttons */
  --sepia: #705B42;      /* secondary: accents, lines, links (5.9:1 on ivory) */
  --ivory: #F8F4F1;      /* light page background */
  --charcoal: #1F1E1E;   /* body text, dark sections */
  --sand: #E6DDD3;       /* soft backgrounds, cards */

  /* roles */
  --paper: var(--ivory);       /* page background */
  --ink: var(--charcoal);      /* body text */
  --head: var(--bordeaux);     /* headings and buttons */
  --ink-2: var(--charcoal);    /* body copy */
  --ink-3: var(--sepia);       /* labels and meta */
  --line: var(--sepia);        /* strong rules */
  --rule: var(--sand);         /* light hairlines */
  --tint: var(--sand);         /* quiet fills, cards */
  --accent: var(--sepia);      /* playhead, small marks */
  --on-ink: var(--ivory);      /* text on dark sections */
  --on-ink-2: var(--sand);     /* muted text on dark sections (12:1) */
  --on-ink-copy: var(--sand);
  --rule-ink: rgba(230, 221, 211, .22); /* hairlines on dark sections */
  --screen: var(--bordeaux);   /* video frames before play */

  --sans: "Open Sans", "Open Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Josefin Sans", "Josefin Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --margin: clamp(20px, 3.9vw, 56px);
  --gutter: clamp(16px, 1.7vw, 24px);
  --sec: clamp(96px, 10.5vw, 160px);
  --head-h: 64px;
  --ease: cubic-bezier(.2, .7, .1, 1);

  --fs-xl: clamp(3.25rem, 1.2rem + 9vw, 10rem);
  --fs-l: clamp(2.125rem, 1rem + 4.4vw, 5.25rem);
  --fs-m: clamp(1.625rem, 1.05rem + 2.1vw, 3rem);
  --fs-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --fs-body: 1rem;
  --fs-mono: .75rem;
}
@media (min-width: 1024px) {
  :root { --fs-body: 1.0625rem; --head-h: 76px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + 8px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--head); font-weight: 600; }
ol, ul { list-style: none; }
a { color: inherit; }
img, svg, iframe { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--bordeaux); color: var(--ivory); }
:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
.on-ink :focus-visible { outline-color: var(--on-ink); }

.skip {
  position: absolute; left: var(--margin); top: -100px; z-index: 100;
  background: var(--bordeaux); color: var(--ivory);
  padding: 12px 16px; text-decoration: none; font-size: .9375rem;
}
.skip:focus { top: 8px; }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nw { white-space: nowrap; }

/* Placeholders that are still in square brackets are highlighted by the script, so they are easy to spot. */
mark.ph {
  background: repeating-linear-gradient(135deg, rgba(112, 91, 66, .22) 0 2px, rgba(112, 91, 66, .08) 2px 6px);
  color: inherit;
  padding: 0 .08em;
  border-radius: 2px;
  font-size: inherit;
}
.on-ink mark.ph, .work-frame mark.ph {
  background: repeating-linear-gradient(135deg, rgba(230, 221, 211, .38) 0 2px, rgba(230, 221, 211, .16) 2px 6px);
}

/* ---------- Layout ---------- */
.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.grid > * { grid-column: 1 / -1; }

/* ---------- Type ---------- */
/* Small uppercase labels (the class name is historical): Josefin Sans, tracked out. */
.mono {
  font-family: var(--display);
  font-size: var(--fs-mono);
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}
.h-xl { font-family: var(--display); font-size: var(--fs-xl); line-height: .98; letter-spacing: -.012em; font-weight: 600; color: var(--head); }
.h-l { font-family: var(--display); font-size: var(--fs-l); line-height: 1.04; letter-spacing: -.006em; font-weight: 400; color: var(--head); text-wrap: balance; }
.h-s { font-size: 1.25rem; line-height: 1.25; letter-spacing: 0; font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.copy { color: var(--ink-2); text-wrap: pretty; }
.h-s, .clause h3, .faq summary > span:not(.mono), .sec-sub { text-wrap: balance; }

/* ---------- Buttons and links ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  min-height: 52px; padding: 0 20px 0 24px;
  background: var(--bordeaux); color: var(--ivory);
  font-family: var(--display); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; flex: none; transition: transform .35s var(--ease); }
.btn::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
  background: var(--sand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:hover svg { transform: translateX(3px); }
.btn-sm { min-height: 44px; gap: 14px; padding: 0 14px 0 18px; font-size: .75rem; }
.btn-sm::after { height: 2px; }
.btn-paper { background: var(--ivory); color: var(--bordeaux); }
.btn-paper::after { background: var(--sepia); }
.btn-block { display: flex; width: 100%; }

.link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  font-family: var(--display); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--bordeaux);
}
.link span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size .4s var(--ease);
}
.link:hover span { background-size: 0 1px; background-position: 100% 100%; }
.link svg { width: 14px; height: 14px; flex: none; }
.link.is-plain { font-family: var(--sans); font-size: .9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--charcoal); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.head-in { display: flex; align-items: center; gap: 14px; height: var(--head-h); }
/* Logo: the brand PNG, never redrawn. Clear space of at least half the mark's height is kept around it. */
.brand { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; padding-block: 6px; }
.brand img { width: 136px; height: auto; }
/* Logo, button and menu never shrink: on narrow phones the button gets tighter, and below 370px it hides (the menu and the hero still offer the call). */
.brand, .head-cta, .menu-btn { flex: none; }
@media (max-width: 459px) {
  .head-in { gap: 10px; }
  .brand img { width: 112px; }
  .head-cta svg { display: none; }
  .head-cta { padding-inline: 12px; letter-spacing: .1em; }
}
@media (min-width: 1024px) {
  .brand img { width: 160px; }
}
.nav { display: none; }
.nav ul { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.nav a {
  display: inline-flex; align-items: flex-start; gap: 4px; padding: 12px 0;
  text-decoration: none; font-family: var(--display); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bordeaux);
}
.nav sup { font-family: var(--display); font-size: .625rem; letter-spacing: .04em; color: var(--ink-3); line-height: 1; margin-top: -2px; }
.nav a:hover span { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.head-cta { display: none; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px 0 6px;
  font-family: var(--display); font-size: var(--fs-mono); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bordeaux);
}
.menu-btn i {
  display: block; width: 16px; height: 7px;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transition: transform .3s var(--ease);
}
.menu-btn[aria-expanded="true"] i { transform: scaleY(.15); }
.menu { border-top: 1px solid var(--rule); background: var(--paper); padding: 4px 0 28px; max-height: calc(100vh - var(--head-h)); overflow-y: auto; }
.menu a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; font-family: var(--display); font-size: 1.75rem; font-weight: 400; line-height: 1.2; color: var(--bordeaux);
}
.menu a .mono { color: var(--ink-3); }
@media (min-width: 370px) {
  .head-cta { display: inline-flex; }
}
@media (min-width: 1024px) {
  .nav { display: block; }
  .menu-btn, .menu { display: none !important; }
  .head-in { gap: clamp(24px, 3vw, 48px); }
}

/* ---------- Section scaffold ---------- */
.sec { padding-top: var(--sec); }
.sec-rule { height: 1px; background: var(--line); transform-origin: left center; }
.sec-head { padding-top: 18px; row-gap: 28px; }
.sec-idx { display: flex; gap: 14px; align-items: baseline; }
.sec-idx .n { color: var(--ink); }
.sec-idx .t { color: var(--ink-3); }
.sec-sub { margin-top: 20px; color: var(--ink-3); }
.sec-body { margin-top: clamp(48px, 6vw, 96px); }
@media (min-width: 1024px) {
  .sec-head { padding-top: 22px; }
  .sec-head > .sec-idx { grid-column: 1 / 4; padding-top: .7rem; }
  .sec-head > h2, .sec-head > .sec-title { grid-column: 4 / 13; }
  .sec-head > h2, .sec-title h2 { max-width: 15em; }
  .c-main { grid-column: 4 / 13; }
  .c-side { grid-column: 1 / 4; }
}

/* ---------- 01 Hero ---------- */
.hero-in { display: flex; flex-direction: column; padding-top: clamp(20px, 2.6vw, 36px); padding-bottom: 8px; }
.hero-meta { row-gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); color: var(--ink-3); letter-spacing: .1em; }
.hero-meta li:nth-child(n+2) { display: none; }
@media (min-width: 720px) {
  .hero-meta li { grid-column: span 6; }
  .hero-meta li:nth-child(2) { display: block; }
}
@media (min-width: 1240px) {
  .hero-meta li { grid-column: span 3; }
  .hero-meta li:nth-child(n+3) { display: block; }
}
.hero-title { margin-top: clamp(40px, 5vw, 76px); margin-left: -.045em; }
@media (min-width: 1024px) {
  .hero-title { font-size: min(var(--fs-xl), 16.5vh); }
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hero-title .line > span { display: inline-block; }
.hero-title .l2 { color: var(--ink-3); }
.dot { font-style: normal; color: var(--sepia); }
.hero-foot { margin-top: clamp(28px, 3.2vw, 48px); row-gap: 40px; align-items: end; }
.hero-copy .lead { max-width: 23em; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.3; letter-spacing: -.012em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 28px; }
.hero-spec { border-top: 1px solid var(--line); }
.hero-spec div {
  display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.hero-spec dt { color: var(--ink-3); }
.hero-spec dd { font-size: .9375rem; }
@media (min-width: 1024px) {
  .hero-copy { grid-column: 1 / 8; }
  .hero-spec { grid-column: 8 / 13; }
}
@media (min-width: 1200px) {
  .hero-copy { grid-column: 1 / 7; }
  .hero-spec { grid-column: 8 / 13; }
}

/* Hero timeline — an edit sequence. Decorative (hidden from screen readers). */
.timeline {
  position: relative; margin-top: clamp(44px, 4.4vw, 64px); user-select: none;
  --lbl: 48px;
  /* clip positions in %, mobile first */
  --c1l: 0;    --c1w: 19.6;
  --c2l: 20;   --c2w: 28;
  --c3l: 48.4; --c3w: 25.4;
  --c4l: 74.2; --c4w: 25.8;
}
@media (min-width: 720px) {
  .timeline {
    --c1l: 0;    --c1w: 14.6;
    --c2l: 14.8; --c2w: 43.4;
    --c3l: 58.4; --c3w: 20.6;
    --c4l: 79.2; --c4w: 20.8;
  }
}
.tl-head, .tl-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: var(--ink-3); }
.tl-head { padding-bottom: 10px; }
.tl-foot { padding-top: 10px; flex-wrap: wrap; row-gap: 2px; }
.tl-foot b { font-weight: 600; color: var(--bordeaux); }
.tl-tc { color: var(--bordeaux); font-family: var(--sans); font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-tc i { display: inline-block; width: 7px; height: 7px; background: var(--accent); margin-right: 8px; transform: translateY(-1px); }
.tl-body { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--rule); }
.tl-ruler {
  position: relative; height: 22px; margin-left: var(--lbl);
  background:
    repeating-linear-gradient(90deg, var(--ink-3) 0 1px, transparent 1px calc(100% / 16)) 0 0 / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px calc(100% / 64)) 0 0 / 100% 4px no-repeat;
}
.tl-ruler span {
  position: absolute; top: 8px; transform: translateX(4px);
  font-family: var(--sans); font-size: .625rem; letter-spacing: .02em; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tl-ruler .r0 { left: 0; }
.tl-ruler .r1 { left: 25%; }
.tl-ruler .r2 { left: 50%; }
.tl-ruler .r3 { left: 75%; }
.tl-ruler .r1, .tl-ruler .r3 { display: none; }
@media (min-width: 720px) {
  .tl-ruler .r1, .tl-ruler .r3 { display: block; }
}
.tl-track { display: flex; border-top: 1px solid var(--rule); }
.tl-label {
  width: var(--lbl); flex: none; display: flex; align-items: center; gap: 6px;
  font-family: var(--display); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; color: var(--ink-3);
}
.tl-label svg { width: 13px; height: 13px; }
.tl-lane { position: relative; flex: 1; height: 36px; }
.tl-a .tl-lane { height: 28px; }
.clip {
  position: absolute; top: 5px; bottom: 5px;
  display: flex; align-items: center; gap: 8px; padding: 0 9px;
  border: 1px solid var(--rule);
  background: repeating-linear-gradient(135deg, var(--tint) 0 1px, transparent 1px 6px), var(--paper);
  font-family: var(--display); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; overflow: hidden;
}
.clip .k, .clip .x { display: none; }
@media (min-width: 720px) {
  .clip .k { display: inline; }
}
@media (min-width: 1200px) {
  .clip .x { display: inline; }
}
.clip.c1 { left: calc(var(--c1l) * 1%); width: calc(var(--c1w) * 1%); }
.clip.c2 { left: calc(var(--c2l) * 1%); width: calc(var(--c2w) * 1%); }
.clip.c3 { left: calc(var(--c3l) * 1%); width: calc(var(--c3w) * 1%); border-color: var(--bordeaux); color: var(--bordeaux); }
.clip.c4 { left: calc(var(--c4l) * 1%); width: calc(var(--c4w) * 1%); }
.clip.out { left: 0; width: 100%; background: var(--bordeaux); border-color: var(--bordeaux); color: var(--ivory); }
.clip.out .x { color: var(--on-ink-2); }
.wave { position: absolute; inset: 4px 0; width: 100%; height: calc(100% - 8px); }
.wave path { stroke: #B9A893; stroke-width: 1.6; vector-effect: non-scaling-stroke; fill: none; }
.tl-ph { position: absolute; top: 0; bottom: 0; left: var(--lbl); right: 0; pointer-events: none; overflow: hidden; }
.tl-ph i { position: absolute; inset: 0; transform: translateX(calc(var(--c3l) * 1%)); }
.tl-ph i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--accent); }
.tl-ph i::after {
  content: ""; position: absolute; left: -4px; top: 0; width: 9px; height: 9px; background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}

/* ---------- 02 Problem ---------- */
.problem-lead { max-width: 32em; }
.pains { margin-top: clamp(48px, 5vw, 80px); display: grid; gap: 36px; }
.pain { display: flex; flex-direction: column; border-top: 1px solid var(--rule); padding-top: 18px; }
.pain > .mono:first-child { color: var(--ink-3); margin-bottom: 24px; }
.pain h3 { margin-bottom: 10px; }
.pain .cost { margin-top: 16px; color: var(--bordeaux); }
@media (min-width: 720px) {
  .pains { grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); }
  .pain .cost { margin-top: auto; padding-top: 20px; }
}
.fix {
  margin-top: clamp(44px, 5vw, 72px); border-top: 1px solid var(--line); padding-top: 18px;
  display: grid; gap: 10px 24px; align-items: baseline;
}
.fix .mono { color: var(--ink-3); }
.fix p:not(.mono) { font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -.006em; max-width: 26em; text-wrap: balance; }
.fix .link { min-height: 44px; }
@media (min-width: 860px) {
  .fix { grid-template-columns: 7rem 1fr auto; }
}

/* ---------- 03 Process ---------- */
.steps { display: grid; border-top: 1px solid var(--line); }
.step {
  position: relative; display: grid; grid-template-columns: 4.25rem 1fr; column-gap: 16px; align-content: start;
  padding: 22px 0 30px; border-bottom: 1px solid var(--rule);
}
.step-n { grid-row: 1 / 6; font-family: var(--display); font-size: 3rem; line-height: .9; font-weight: 300; letter-spacing: -.02em; color: var(--bordeaux); }
.step .mono { color: var(--ink-3); margin-bottom: 10px; }
.step h3 { margin-bottom: 10px; }
.step .note { margin-top: 18px; margin-bottom: 0; }
.step.key { background: var(--bordeaux); color: var(--ivory); padding-inline: 18px; border-bottom-color: var(--bordeaux); }
.step.key h3, .step.key .step-n { color: var(--ivory); }
.step.key .mono { color: var(--on-ink-2); }
.step.key .copy { color: var(--on-ink-copy); }
@media (min-width: 720px) and (max-width: 1023px) {
  .steps { grid-template-columns: repeat(2, 1fr); column-gap: var(--gutter); }
  .step.key { padding-inline: 20px; }
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
  .step {
    grid-template-columns: 1fr; grid-template-rows: auto auto auto auto 1fr;
    min-height: 460px; padding: 22px 24px 40px; border-bottom: 0; border-left: 1px solid var(--rule);
  }
  .step:first-child { border-left: 0; padding-left: 0; }
  .step-n { grid-row: auto; font-size: clamp(5rem, 7vw, 7.5rem); padding-bottom: clamp(56px, 6vw, 96px); }
  .step.key { padding: 22px 24px 40px; border-left-color: var(--bordeaux); }
  .step .note { align-self: end; }
}

/* ---------- 04 What you get ---------- */
.spec { border-top: 1px solid var(--line); }
.spec-row {
  display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 8px;
  padding: 22px 0 24px; border-bottom: 1px solid var(--rule);
}
.spec-row dt { font-family: var(--display); font-size: 1.3125rem; font-weight: 600; line-height: 1.2; color: var(--bordeaux); }
.spec-val { grid-column: 2; grid-row: 1; text-align: right; color: var(--sepia); align-self: start; padding-top: .3rem; }
.spec-desc { grid-column: 1 / -1; grid-row: 2; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
@media (min-width: 860px) {
  .spec-row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2.2fr);
    column-gap: var(--gutter); padding: 26px 0 28px;
  }
  .spec-row dt { font-size: clamp(1.3125rem, .95rem + .7vw, 1.6875rem); }
  .spec-desc { grid-row: 1; grid-column: 2; }
  .spec-val { grid-column: 3; }
}

/* ---------- 05 Guarantees ---------- */
.clauses { display: grid; column-gap: var(--gutter); }
.clause {
  display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 12px;
  border-top: 1px solid var(--rule); padding: 22px 0 34px;
}
.clause:first-child { border-top-color: var(--line); }
.clause > .mono { color: var(--ink-3); padding-top: .45rem; }
.clause h3 { font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem); font-weight: 600; line-height: 1.15; margin-bottom: 12px; }
@media (min-width: 860px) {
  .clauses { grid-template-columns: 1fr 1fr; }
  .clause:nth-child(2) { border-top-color: var(--line); }
  .clause { padding-bottom: 44px; padding-right: clamp(0px, 2vw, 32px); }
}

.deadline { margin-top: clamp(56px, 6vw, 96px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 0; }
.deadline-in {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(28px, 3.4vw, 48px) 0 clamp(32px, 3.6vw, 52px); row-gap: 28px;
}
.deadline-k { display: flex; align-items: center; gap: 10px; }
.deadline-k i { display: block; width: 9px; height: 9px; background: var(--bordeaux); }
.deadline .h-l { max-width: 13.5em; }
.deadline .acc { color: var(--sepia); }
.fine { margin-top: 22px; color: var(--ink-2); font-size: .9375rem; max-width: 34em; text-wrap: pretty; }
.sign { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sign strong { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; }
.sign .mono { color: var(--ink-3); }
.dl-fig { display: none; }
@media (min-width: 1024px) {
  .deadline-k { grid-column: 1 / 4; align-self: start; padding-top: .9rem; }
  .deadline-body { grid-column: 4 / 13; }
}
@media (min-width: 1024px) {
  .deadline .h-l { font-size: min(var(--fs-l), 4rem); }
}
@media (min-width: 1200px) {
  .deadline-body { grid-column: 4 / 10; }
  .dl-fig { display: block; grid-column: 10 / 13; align-self: center; }
}
/* the mini diagram: on time vs late */
.dl-track { position: relative; padding-top: 30px; }
.dl-ruler {
  height: 7px; margin-bottom: 14px;
  background: repeating-linear-gradient(90deg, var(--ink-3) 0 1px, transparent 1px calc(100% / 12)) 0 0 / 100% 7px no-repeat;
}
.dl-line { position: absolute; left: 70%; top: 0; bottom: -14px; width: 1px; background: var(--bordeaux); }
.dl-line span { position: absolute; left: 8px; top: 0; font-family: var(--display); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bordeaux); white-space: nowrap; }
.dl-clip {
  position: relative; height: 34px; margin-bottom: 10px; display: flex; align-items: center; padding: 0 10px;
  font-family: var(--display); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.dl-clip.ok { width: 62%; background: var(--bordeaux); color: var(--ivory); }
.dl-clip.late { width: 86%; border: 1px solid var(--line); color: var(--charcoal); background: var(--paper); }
.dl-clip.late em {
  position: absolute; top: -1px; bottom: -1px; left: calc(70% / .86); right: -1px;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; color: var(--bordeaux); border: 1px solid var(--bordeaux); border-left: 0;
  background: repeating-linear-gradient(135deg, rgba(71, 30, 30, .28) 0 1px, transparent 1px 5px), var(--paper);
}

/* ---------- 06 Selected work ---------- */
/* Every frame has the same width: (row width - gap between pairs - 2 gaps inside pairs) / 4 */
.work-group { color: var(--ink-3); padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); }
.pairs { display: grid; row-gap: 44px; column-gap: calc(var(--gutter) * 2); margin-bottom: clamp(56px, 7vw, 104px); }
.pair-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shorts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px var(--gutter); }
.shorts .work-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--gutter)) / 2); }
@media (min-width: 720px) {
  .pairs { grid-template-columns: 1fr 1fr; }
  .shorts { grid-template-columns: repeat(3, calc((100% - var(--gutter) * 2 - 16px) / 4)); justify-content: space-between; }
  .shorts .work-card:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
}
.work-card .work-cap { margin-top: 16px; }
.work-media { position: relative; }
/* Before a click: Bordeaux frame with the ivory MM mark (brand PNG). Nothing loads from YouTube yet. */
.work-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden;
  background: var(--screen);
  color: var(--ivory); text-align: left; border: 0;
}
iframe.work-frame { background: #000; }
.work-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf-mark {
  position: absolute; left: 50%; top: 46%; width: 44%; height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.vf { position: absolute; font-family: var(--display); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.vf-tag {
  left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 8px 5px; background: rgba(31, 30, 30, .45); color: var(--ivory);
}
.vf-tag.is-after::before { content: ""; width: 6px; height: 6px; background: var(--sand); }
.vf-play {
  position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 14px;
  background: var(--ivory); color: var(--bordeaux);
  font-family: var(--display); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  transition: background-color .3s var(--ease);
}
.vf-play svg { width: 9px; height: 11px; color: var(--bordeaux); }
.work-frame:hover .vf-play, .work-frame:focus-visible .vf-play { background: var(--sand); }
.work-frame:focus-visible { outline-offset: 4px; }
.vf-soon { display: none; left: 50%; bottom: 9%; transform: translateX(-50%); white-space: nowrap; color: var(--sand); }
.has-poster .vf-mark { display: none; }
.is-pending .work-frame { cursor: default; }
.is-pending .vf-play { display: none; }
.is-pending .vf-soon { display: block; }
.work-cap { border-top: 1px solid var(--rule); padding-top: 12px; display: grid; gap: 6px; align-content: start; overflow-wrap: anywhere; }
.work-type { color: var(--ink-3); }
.work-title { font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--charcoal); }
.more-work { margin-top: clamp(48px, 6vw, 80px); }
.more-work .work-group { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
.more-list { border-top: 1px solid var(--line); }
.more-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 16px 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--bordeaux);
}
.more-name { font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -.006em; }
.more-meta { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--ink-3); }
.more-meta svg { width: 12px; height: 12px; transition: transform .35s var(--ease); }
.more-list a:hover .more-name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.more-list a:hover .more-meta svg { transform: translate(2px, -2px); }
@media (min-width: 720px) {
  .more-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--gutter) * 2); }
}
.work-note { margin-top: clamp(28px, 3vw, 40px); color: var(--ink-3); }

/* ---------- Dark bands: 09 call to action, footer ---------- */
.on-ink { background: var(--charcoal); color: var(--on-ink); }
.on-ink h2, .on-ink h3 { color: var(--on-ink); }
.on-ink ::selection { background: var(--ivory); color: var(--bordeaux); }
.on-ink .sec-rule { background: var(--rule-ink); }
.on-ink .sec-idx .n { color: var(--on-ink); }
.on-ink .sec-idx .t { color: var(--on-ink-2); }
.band-cta { margin-top: var(--sec); }

/* ---------- 07 Pricing ---------- */
.price-wrap { row-gap: 40px; }
.price-main { display: grid; row-gap: clamp(40px, 5vw, 64px); }
.price-group { color: var(--ink-3); margin-bottom: 16px; }
.price-main > .price-group + .plans { margin-top: calc(16px - clamp(40px, 5vw, 64px)); }
.plans { display: grid; gap: var(--gutter); }
.plan { position: relative; display: flex; flex-direction: column; background: var(--sand); padding: 24px 22px 26px; }
.plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(112, 91, 66, .35); }
.plan-top .mono:last-child { color: var(--ink-3); }
.plan h4 { margin-top: 28px; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 400; line-height: 1.05; }
.plan .copy { margin-top: 12px; font-size: 1rem; max-width: 26em; }
.price { margin-top: 32px; display: flex; flex-direction: column; gap: 8px; }
.price-num { font-family: var(--display); font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); font-weight: 600; line-height: 1; color: var(--bordeaux); }
.price .mono { color: var(--ink-3); }

/* monthly packages table */
.pkg { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.pkg th, .pkg td { padding: 16px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-weight: 400; }
.pkg thead th { padding: 10px 0; font-family: var(--display); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.pkg td, .pkg thead th:not(:first-child) { width: 4.25em; text-align: right; }
.pkg td { font-family: var(--display); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; color: var(--bordeaux); }
.pkg tbody th { padding-right: 16px; }
.pkg-name { display: block; font-size: 1.125rem; font-weight: 600; letter-spacing: -.004em; line-height: 1.25; }
.pkg-vol { display: block; margin-top: 4px; color: var(--ink-2); font-size: .9375rem; }
.pkg-extra { display: block; margin-top: 6px; font-family: var(--display); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--sepia); }
.pkg-extra::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--bordeaux); transform: translateY(-1px); }
@media (min-width: 860px) {
  .pkg-info { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 1.2fr) minmax(0, 1.6fr); column-gap: var(--gutter); align-items: baseline; }
  .pkg-vol, .pkg-extra { margin-top: 0; }
  .pkg td, .pkg thead th:not(:first-child) { width: 7em; }
  .pkg td { font-size: 1.375rem; line-height: 1.2; }
}

.longform {
  display: grid; gap: 20px; align-items: center;
  background: var(--sand); padding: 24px 22px;
}
.lf-title { font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem); font-weight: 600; line-height: 1.15; margin-bottom: 8px; }
.longform .copy { max-width: 30em; }
@media (min-width: 760px) {
  .longform { grid-template-columns: 1fr auto; padding: 28px; column-gap: 32px; }
}

.included { border-top: 1px solid var(--line); padding-top: 18px; display: grid; row-gap: 16px; column-gap: var(--gutter); }
.included > .mono { color: var(--ink-3); }
.included ul { display: grid; column-gap: var(--gutter); }
.included li { position: relative; padding: 10px 0 10px 18px; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.included li::before { content: ""; position: absolute; left: 0; top: 1.2em; width: 6px; height: 6px; background: var(--bordeaux); }
.price-note { border-top: 1px solid var(--rule); padding-top: 14px; }
.price-note .mono { color: var(--ink-3); margin-bottom: 10px; }
.price-note p:not(.mono) { font-size: .9375rem; color: var(--ink-2); max-width: 30em; }
@media (min-width: 760px) {
  .plans { grid-template-columns: 1fr 1fr; }
  .plan { padding: 28px 28px 30px; }
  .included ul { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .price-note { grid-column: 1 / 4; grid-row: 1; align-self: start; margin-right: clamp(0px, 2vw, 32px); }
  .price-main { grid-column: 4 / 13; }
  .included ul { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 08 FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 2.5rem 1fr 24px; gap: 8px; align-items: baseline;
  padding: 22px 0;
  font-family: var(--display); font-size: clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem); font-weight: 600; line-height: 1.3; color: var(--bordeaux);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mono { color: var(--ink-3); }
.faq summary i { position: relative; width: 14px; height: 14px; justify-self: end; align-self: center; }
.faq summary i::before, .faq summary i::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--bordeaux);
  transition: transform .3s var(--ease);
}
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq summary:hover > span:not(.mono) { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.faq .ans { padding: 0 32px 26px calc(2.5rem + 8px); color: var(--ink-2); max-width: 42em; text-wrap: pretty; }
.faq .ans + .ans { margin-top: -14px; }

/* ---------- 09 Call to action ---------- */
.cta { padding-block: clamp(64px, 7vw, 112px) clamp(72px, 8vw, 128px); }
.cta-grid { margin-top: clamp(40px, 5vw, 80px); row-gap: 44px; align-items: end; }
.cta-title { font-size: clamp(2.75rem, 1rem + 7vw, 7.25rem); line-height: 1.02; letter-spacing: -.01em; font-weight: 600; }
.cta-title span { display: block; text-wrap: balance; }
.cta-title .l2 { color: var(--on-ink-2); }
.cta-box { border-top: 1px solid var(--on-ink); padding-top: 18px; display: flex; flex-direction: column; align-items: flex-start; max-width: 26rem; }
.cta-lead { color: var(--on-ink-copy); font-size: 1.0625rem; line-height: 1.5; }
.cta-box .btn { margin-top: 24px; align-self: stretch; }
.cta-or { margin-top: 28px; color: var(--on-ink-2); }
.mail {
  display: inline-block; margin-top: 6px; padding: 6px 0 3px;
  font-size: clamp(1.0625rem, .6rem + .6vw, 1.25rem); letter-spacing: -.008em;
  color: var(--on-ink); text-decoration: none; overflow-wrap: anywhere;
  background: linear-gradient(var(--on-ink-2), var(--on-ink-2)) 0 100% / 100% 1px no-repeat;
}
.mail:hover { background-image: linear-gradient(var(--ivory), var(--ivory)); }
@media (min-width: 1024px) {
  .cta-title { grid-column: 1 / 10; }
  .cta-box { grid-column: 10 / 13; max-width: none; margin-bottom: .4rem; }
}

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--rule-ink); padding-block: 32px 40px; row-gap: 14px; align-items: center; color: var(--on-ink-2); font-size: .9375rem; }
.foot a { color: var(--on-ink); text-decoration: none; display: inline-block; padding: 4px 0; }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-brand { padding-block: 8px; }
.foot-brand img { width: 144px; height: auto; }
.foot-end { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.foot-end .mono { color: var(--sand); }
@media (min-width: 720px) {
  .foot > * { grid-column: span 4; }
  .foot-end { justify-content: flex-end; }
}

/* ---------- Privacy page and 404 ---------- */
.page-head { padding-top: clamp(48px, 7vw, 112px); padding-bottom: clamp(40px, 5vw, 72px); }
.page-head .h-l { margin-top: 28px; max-width: 14em; }
.page-head .lead { margin-top: 24px; max-width: 30em; }
.prose { border-top: 1px solid var(--line); padding-bottom: var(--sec); }
.prose section { display: grid; row-gap: 12px; padding: 26px 0 30px; border-bottom: 1px solid var(--rule); }
.prose h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.008em; line-height: 1.25; }
.prose p, .prose li { color: var(--ink-2); max-width: 40em; text-wrap: pretty; }
.prose ul { display: grid; gap: 8px; }
.prose li { position: relative; padding-left: 20px; }
.prose li::before { content: ""; position: absolute; left: 0; top: .8em; width: 6px; height: 1px; background: var(--sepia); }
.prose a { color: var(--bordeaux); text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .prose section { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .prose section > h2 { grid-column: 1 / 5; }
  .prose section > :not(h2) { grid-column: 5 / 13; }
}
.not-found { display: flex; flex-direction: column; justify-content: center; padding-block: 64px; }
.not-found .actions { margin-top: 36px; }
.foot-simple { padding-block: 28px 32px; }

/* ---------- Small-screen and accessibility refinements ---------- */
@media (min-width: 520px) and (max-width: 659px) {
  .hero-title { font-size: 11.4vw; }
}
@media (max-width: 359px) {
  .clip { padding: 0 5px; font-size: .625rem; letter-spacing: .01em; }
  .tl-more { display: none; }
}
/* Visible focus ring around a video player opened with the keyboard */
.work-media.is-kbd:focus-within { outline: 2px solid var(--bordeaux); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .btn::after, .btn svg, .link span, .menu-btn i, .faq summary i::before, .faq summary i::after, .more-meta svg { transition: none; }
}

/* ---------- Motion (only when the visitor has not asked for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-title .line > span { animation: rise .7s var(--ease) both; }
  .hero-title .line:nth-child(2) > span { animation-delay: .06s; }
  @keyframes rise { from { transform: translateY(40%); } to { transform: none; } }

  .timeline .tl-ph i { animation: scrub 2.4s .3s cubic-bezier(.45, 0, .2, 1) both; }
  @keyframes scrub { from { transform: translateX(0); } }

  .reveal-ready [data-reveal] { transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
  .reveal-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(16px); }
  .reveal-ready .sec-rule[data-reveal] { transition: transform 1.2s var(--ease); }
  .reveal-ready .sec-rule[data-reveal]:not(.is-visible) { opacity: 1; transform: scaleX(0); }
  .d1 { --d: 1; }
  .d2 { --d: 2; }
  .d3 { --d: 3; }
}

@media print {
  .site-header, .skip, .timeline, .menu { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .btn:not(.btn-paper) { background: none; color: var(--bordeaux); border: 1px solid var(--bordeaux); }
  .on-ink { background: none; color: var(--ink); --on-ink: var(--charcoal); --on-ink-2: var(--charcoal); --on-ink-copy: var(--charcoal); --rule-ink: var(--rule); }
  .on-ink h2, .on-ink h3 { color: var(--bordeaux); }
  .on-ink .cta-title .l2, .on-ink .cta-lead, .foot { color: var(--ink-2); }
}
.not-found .page-title { margin-top: 28px; max-width: 13em; }
body:has(.not-found) { min-height: 100svh; display: flex; flex-direction: column; }
body:has(.not-found) main { flex: 1; display: flex; }
body:has(.not-found) .not-found { flex: 1; min-width: 0; }
.not-found .btn { white-space: normal; max-width: 100%; }