/* ==========================================================================
   Dordtse Marketeers — single-page VSL
   Tokens are authoritative in .claude/skills/brand-guidelines/SKILL.md
   Applied per DESIGN.md. Orange is surface-checked before every use.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Brand core */
  --color-ink:             #1A1B1B;
  --color-ink-light:       #2A2B2B;

  --color-accent:          #C66926; /* display text >=28px, icons, fills ONLY */
  --color-accent-on-light: #96491A; /* normal-size text/buttons on light */
  --color-accent-on-dark:  #DA8A4C; /* normal-size text/buttons on dark */
  --color-accent-hover:    #7A3A15;

  /* Neutrals */
  --color-text:            #1A1A1A;
  --color-text-muted:      #5A636E;
  --color-bg:              #FFFFFF;
  --color-bg-cream:        #EFEBE6;
  --color-border:          #DFD9D2;

  /* On dark surfaces */
  --color-on-dark:         #FFFFFF;
  --color-on-dark-muted:   #B9B5B0; /* 8.3:1 on --color-ink */
  --color-rule-on-dark:    rgba(255, 255, 255, 0.18);

  /* Semantic */
  --color-success:         #2E7D0F;
  --color-error:           #C0392B;
  --color-focus-ring:      #C66926;

  /* Type */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-hero:  clamp(2.5rem, 1.6rem + 3.75vw, 4.25rem);
  --text-h2:    clamp(1.85rem, 1.5rem + 1.5vw, 2.5rem);
  --text-stat:  clamp(4rem, 2.5rem + 6vw, 7rem);
  --text-lead:  clamp(1.05rem, 1rem + 0.3vw, 1.15rem);
  --text-body:  1rem;
  --text-small: 0.875rem;

  --lh-heading: 0.95;
  --lh-body: 1.6;
  --ls-display: -0.01em;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* Layout */
  --container: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(3.5rem, 8vw, 6rem);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index scale — semantic, never arbitrary */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 200;
}

/* --- Reset -------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--color-bg-cream);
  color: var(--color-text);
  font: 400 var(--text-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100%;
  z-index: var(--z-overlay);
  background: var(--color-accent-on-light);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font: 700 var(--text-small) var(--font-body);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

/* --- Type ---------------------------------------------------------------- */

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-h2); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--text-lead);
  line-height: 1.5;
  max-width: 46ch;
}

.subtle {
  color: var(--color-text-muted);
  max-width: 46ch;
}

.eyebrow {
  font: 700 0.78rem/1.3 var(--font-body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent-on-light);
  margin-bottom: var(--space-4);
}

/* --- Layout -------------------------------------------------------------- */

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

.section { padding-block: var(--section-y); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 52px;
  padding: var(--space-4) var(--space-6);
  border: none;
  border-radius: var(--radius-sm);
  font: 700 0.95rem/1.2 var(--font-body);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out-expo),
              transform 0.2s var(--ease-out-expo);
}
.btn svg { flex: none; transition: transform 0.25s var(--ease-out-expo); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn--block { width: 100%; }

.btn--on-light { background: var(--color-accent-on-light); color: #fff; }
.btn--on-light:hover { background: var(--color-accent-hover); }

/* Accent-on-dark carries ink-colored label: 6.35:1 against ink, and the
   label sits on the accent itself at 5.9:1. */
.btn--on-dark { background: var(--color-accent-on-dark); color: var(--color-ink); }
.btn--on-dark:hover { background: #EDA268; }

/* --- Header -------------------------------------------------------------- */

.site-header {
  background: var(--color-ink);
  color: var(--color-on-dark);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 78px;
  padding-block: var(--space-4);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-1); /* reach the 44px touch floor */
  text-decoration: none;
}
.wordmark img {
  /* Supplied mark is a dark-background lockup; it sits on the ink header bar,
     so its own ground is invisible. */
  height: clamp(34px, 3vw, 42px);
  width: auto;
}

/* --- Hero ---------------------------------------------------------------- */

/* Source order is the MOBILE reading order: headline, video, guarantee, copy.
   Every wider layout places its items explicitly, so the DOM stays free to
   serve the phone. */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-y); }

.hero__grid {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: start;
}

.hero__headline,
.hero__copy { max-width: 46ch; }

.hero .lead { margin-bottom: var(--space-4); }

.hero__media { justify-self: start; width: 100%; max-width: 320px; }

@media (max-width: 719px) {
  .hero { padding-block: var(--space-6) var(--section-y); }
  .hero__media {
    justify-self: center;
    /* The 9:16 player fills whatever the headline leaves of the first screen,
       so the guarantee panel always starts below the fold and is only met by
       scrolling. 166px accounts for the header, hero padding and headline.
       Derived from the 16/9 ratio: width = (viewport - 166) * 9/16. */
    max-width: min(100%, max(200px, calc(56.25vh - 166px)));
  }

  @supports (height: 1svh) {
    /* svh is the first-frame height: the viewport with the browser chrome
       still showing, which is exactly the frame this rule is about. */
    .hero__media { max-width: min(100%, max(200px, calc(56.25svh - 166px))); }
  }
}

@media (min-width: 720px) {
  .hero__grid {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    row-gap: var(--space-6);
  }
  .hero__headline { grid-column: 1 / -1; grid-row: 1; max-width: 52ch; }
  .hero__copy     { grid-column: 1 / -1; grid-row: 2; max-width: 52ch; }
  .hero__media    { grid-column: 1; grid-row: 3; margin-top: var(--space-2); }
  .guarantee      { grid-column: 2; grid-row: 3; margin-top: var(--space-2); }
}

@media (min-width: 1080px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.2fr) 276px minmax(0, 0.95fr);
    row-gap: var(--space-6);
  }
  .hero__headline { grid-column: 1; grid-row: 1; max-width: none; }
  .hero__copy     { grid-column: 1; grid-row: 2; max-width: none; }
  .hero__media    { grid-column: 2; grid-row: 1 / span 2; max-width: 276px; margin-top: 0; }
  .guarantee      { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
}

/* Video sales letter — portrait source, self-hosted, click to play */

.vsl {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-ink);
  box-shadow: 0 18px 44px -22px rgba(26, 27, 27, 0.55);
}

.vsl video {
  color: var(--color-on-dark); /* the <video> fallback message must stay legible */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vsl__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vsl__play {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  width: 100%;
  border: none;
  padding: 0;
  background: linear-gradient(180deg, rgba(26,27,27,0.05) 0%, rgba(26,27,27,0.42) 100%);
  color: var(--color-ink);
  cursor: pointer;
}
.vsl__play-inner {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  transition: transform 0.3s var(--ease-out-expo), background-color 0.2s linear;
}
.vsl__play:hover .vsl__play-inner { transform: scale(1.07); background: #fff; }
.vsl__play svg { margin-left: 4px; }

.vsl.is-playing .vsl__play,
.vsl.is-playing .vsl__poster { display: none; }

/* Guarantee panel */

.guarantee {
  background: var(--color-ink);
  color: var(--color-on-dark);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  height: 100%;
}

.guarantee__number {
  font: 400 var(--text-stat)/0.82 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.guarantee__claim {
  font: 400 clamp(1.35rem, 1.1rem + 1vw, 1.85rem)/1.05 var(--font-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--color-on-dark);
}
.guarantee .btn {
  font-size: 0.85rem;
  padding-inline: var(--space-4);
  gap: var(--space-3);
}

.guarantee__claim em {
  display: block;
  font-style: normal;
  color: var(--color-accent);
}

/* --- Problem ------------------------------------------------------------- */

.problem { background: var(--color-bg-cream); }

.problem__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.problem h2 { margin-bottom: var(--space-8); }

.problem__list { display: grid; gap: var(--space-6); max-width: 44ch; }
.problem__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.problem__item svg { color: var(--color-accent-on-light); margin-top: 2px; }

.problem__photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.problem__photo img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 860px) {
  .problem { padding-block: 0; }
  .problem .container { padding-inline: 0; max-width: none; }
  .problem__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: stretch;
  }
  .problem__copy {
    align-self: center;
    padding: var(--section-y) var(--space-8) var(--section-y)
             max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  }
  /* Photo runs full-bleed to the right edge, as in the source design */
  .problem__photo {
    border-radius: 0;
    aspect-ratio: auto;
    min-height: 460px;
  }
  .problem__photo img { object-position: center 32%; }
}

/* --- Process ------------------------------------------------------------- */

.process { background: var(--color-bg); }
.process h2 { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.process__strip {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  justify-items: center;
}

.process__step {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
  max-width: 21ch;
}
.process__number {
  font: 400 1.75rem/1 var(--font-display);
  color: var(--color-accent-on-light);
}
.process__icon { color: var(--color-ink); }
.process__label {
  font: 500 var(--text-small)/1.45 var(--font-body);
  color: var(--color-text);
}

.process__strip .process__step:not(:last-child)::after {
  content: "";
  width: 1px;
  height: var(--space-6);
  background: var(--color-border);
  margin-top: var(--space-3);
}

@media (min-width: 880px) {
  .process__strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 0;
  }
  .process__step {
    position: relative;
    max-width: none;
    padding-inline: var(--space-3);
  }
  /* Connector runs from this step's icon to the next one's, on the icon row */
  .process__strip .process__step:not(:last-child)::after {
    position: absolute;
    top: 47px;
    margin-top: 0;
    left: calc(50% + 32px);
    width: calc(100% - 64px);
    height: 1px;
    background: var(--color-border);
  }
}

/* --- Statement band ------------------------------------------------------ */

.statement {
  background: var(--color-ink);
  color: var(--color-on-dark);
  padding-block: clamp(2.75rem, 6vw, 4rem);
}
.statement__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.statement h2 {
  font-size: clamp(2.1rem, 1.15rem + 4.9vw, 4.75rem);
  letter-spacing: -0.015em;
}
.statement h2 em { font-style: normal; color: var(--color-accent); }

.statement__note { display: grid; gap: var(--space-3); max-width: 40ch; }
.statement__note p { color: var(--color-on-dark-muted); }
.statement__note strong {
  font-weight: 500;
  color: var(--color-accent-on-dark);
}

@media (min-width: 900px) {
  .statement__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .statement__note {
    border-left: 1px solid var(--color-rule-on-dark);
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* --- Results ------------------------------------------------------------- */

.results { background: var(--color-bg-cream); }

.results__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.results h2 { margin-bottom: var(--space-3); }
.results__rule {
  width: 64px; height: 3px;
  background: var(--color-accent);
  border: none;
  margin: 0 0 var(--space-8);
}

.cases {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: var(--space-6);
}


.case__name { margin-bottom: var(--space-4); }

/* Both client marks are set for a dark ground — A.J.'s lockup is white-on-dark
   and Zuider's is a light blue — so one ink chip keeps them legible and
   consistent against the cream section. */
.case__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  width: 100%;
  max-width: 260px;
  padding: var(--space-3) var(--space-6);
  background: var(--color-ink);
  border-radius: var(--radius-sm);
}
.case__logo img {
  max-height: 62px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.case__result {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.case__stat {
  font: 400 clamp(2rem, 1.6rem + 1.4vw, 2.6rem)/1 var(--font-display);
  color: var(--color-accent-on-light);
}
.case__caption {
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.results__footnote { font-size: var(--text-small); color: var(--color-text-muted); }

.pledge {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 3vw, 2.25rem);
}
.pledge h3 {
  font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.05 var(--font-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-6);
}
.pledge h3 em { font-style: normal; color: var(--color-accent-on-light); display: block; }
.pledge p + p { margin-top: var(--space-4); }
.pledge__sign {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.pledge__sign svg { color: var(--color-ink); flex: none; }
.pledge__sign span {
  font: 700 0.78rem/1.3 var(--font-body);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

@media (min-width: 940px) {
  .results__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    align-items: center;
  }
}

/* --- Qualification ------------------------------------------------------- */

.qualify { background: var(--color-bg); }
.qualify h2 { text-align: center; margin-bottom: clamp(2.25rem, 5vw, 3rem); }

.qualify__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  max-width: 940px;
  margin-inline: auto;
}

.qualify__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: 700 1rem/1.2 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}
.qualify--no .qualify__title { color: var(--color-error); }
.qualify--yes .qualify__title { color: var(--color-success); }

.qualify__list { display: grid; gap: var(--space-4); }
.qualify__item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-3);
  align-items: start;
  color: var(--color-text);
}
.qualify__item svg { margin-top: 7px; }
.qualify--no .qualify__item svg { color: var(--color-error); }
.qualify--yes .qualify__item svg { color: var(--color-success); }

@media (min-width: 780px) {
  .qualify__grid { grid-template-columns: 1fr 1fr; }
  .qualify--yes {
    border-left: 1px solid var(--color-border);
    padding-left: clamp(2rem, 4vw, 3.5rem);
  }
}

/* --- Closing CTA --------------------------------------------------------- */

.close {
  position: relative;
  background: var(--color-ink);
  color: var(--color-on-dark);
  isolation: isolate;
  overflow: hidden;
}
.close__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.close::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(26, 27, 27, 0.30) 0%,
    rgba(26, 27, 27, 0.55) 26%,
    rgba(26, 27, 27, 0.93) 52%,
    rgba(26, 27, 27, 0.97) 100%);
}
.close .container {
  padding-block: clamp(3rem, 7vw, 5rem);
}
.close__inner { max-width: 34rem; margin-left: auto; }
.close h2 { margin-bottom: var(--space-4); }
.close p { color: var(--color-on-dark-muted); margin-bottom: var(--space-8); max-width: 42ch; }
.close .btn { margin-bottom: var(--space-4); }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--color-ink);
  color: var(--color-on-dark-muted);
  border-top: 1px solid var(--color-rule-on-dark);
  font-size: var(--text-small);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-8);
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-on-dark);
}
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-6); }


/* --- Mobile: centred composition ----------------------------------------
   Scoped entirely to <=719px. Every rule here is an override of a layout the
   wider viewports keep left-aligned; nothing leaks upward. Placed after the
   component sections so it wins without !important. */

@media (max-width: 719px) {

  /* Text blocks */
  .hero__headline,
  .hero__copy,
  .guarantee,
  .problem__copy,
  .statement__grid,
  .results > .container > div,
  .pledge,
  .qualify--no,
  .qualify--yes,
  .close__inner,
  .results__footnote { text-align: center; }

  /* Measure-capped blocks need to be centred as boxes, not just as text */
  .hero__headline,
  .hero__copy,
  .lead,
  .subtle,
  .problem__list,
  .statement__note,
  .close__inner,
  .close p,
  .case__logo { margin-inline: auto; }

  .results__rule { margin-inline: auto; }

  /* Header mark */
  .site-header .container { justify-content: center; }

  /* Buttons: the arrow trails the label instead of being pushed to the edge.
     Centring only reads as centred if the label fits one line, so the hero CTA
     gets a slightly tighter setting and its panel a little more room. */
  .btn { justify-content: center; }
  .guarantee { padding: var(--space-6); }
  .guarantee .btn { font-size: 0.8rem; letter-spacing: 0.02em; }

  /* Icon above the text, as the process strip already does. Keeping the icon
     inline leaves it stranded at the ragged left edge of centred copy. */
  .problem__item,
  .qualify__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
  }
  .problem__item svg,
  .qualify__item svg { flex: none; margin-top: 0; }
  .problem__list { gap: var(--space-8); }
  .qualify__list { gap: var(--space-6); }

  .qualify__title { justify-content: center; }

  /* Proof numerals */
  .case__result { justify-content: center; }
  .case__caption { text-align: center; }
  .pledge__sign { justify-content: center; }

  /* Footer */
  .site-footer .container { justify-content: center; text-align: center; }
  .site-footer ul { justify-content: center; }
}

/* --- Motion -------------------------------------------------------------- */

/* Reveals are opt-in and only ever applied once JS confirms it can run, so
   the default render is fully visible. */

.js .anim-rise {
  opacity: 0;
  transform: translateY(18px);
}
.js .anim-rise.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s var(--ease-out-expo),
              transform 0.75s var(--ease-out-expo);
  transition-delay: var(--delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .anim-rise { opacity: 1; transform: none; }
}