/* ============================================================================
   Syntri Labs — Lead Generation for Calgary Home Service Businesses
   Landing page stylesheet. Plain CSS3, no framework, no build step.

   Design tokens below are copied verbatim from the live site's
   https://syntrilabs.com/assets/css/tokens.css so this page stays visually
   consistent with the main brand. If the brand palette changes there,
   update the :root block here to match.

   Written mobile-first: base rules target small screens, then min-width
   media queries layer on tablet (768px) and desktop (1024px).
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Palette — exact values from the live Syntri Labs stylesheet.
     RULE: --amber is for dark backgrounds and button fills only.
           --amber-deep is the accent on light backgrounds.
           Swapping them breaks colour contrast. */
  --amber: #FFB703;
  --amber-deep: #8A5A00;
  --amber-muted: #D6990A;
  --ink: #0A0A0A;
  /* Softer charcoal used for the hero so it reads warmer than the near-black
     header/footer while staying in the same family. */
  --charcoal: #17181C;
  --ink-text: #0F0F0F;
  --btn-text: #374151;
  --light: #F5F5F3;
  --warm: #EDE9E0;
  --muted-dark: #999995;
  --muted-hero: #AEADA6;
  --muted-light: #4A4A47;
  --border-dark: #666661;
  --divider-amber: rgba(255, 183, 3, 0.5);
  --coral: #D6402B;

  --font-display: 'Unbounded', sans-serif;
  --font-body: 'Inter', sans-serif;

  --container-inset: 20px;
  --section-gap: 72px;
  --card-gap: 20px;
  --card-pad: 24px;

  --radius-btn: 5px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-pill: 40px;

  --header-h: 64px;
}

@media (min-width: 768px) {
  :root {
    --container-inset: 40px;
    --section-gap: 104px;
    --header-h: 80px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-inset: 80px;
    --section-gap: 136px;
    --card-gap: 28px;
    --card-pad: 28px;
  }
}

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

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-text);
  background: var(--light);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.5px;
}

h1 { font-size: clamp(30px, 7vw, 56px); }
h2 { font-size: clamp(26px, 5.2vw, 42px); }
h3 { font-size: clamp(18px, 2.4vw, 22px); letter-spacing: -0.2px; }

/* Visible keyboard focus everywhere. Never remove without a replacement. */
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--amber);
  color: #0a0a0a;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-btn) 0;
}
.skip-link:focus { left: 0; }

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

/* ------------------------------------------------------- layout helpers */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--container-inset);
}

.section {
  padding-block: var(--section-gap);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Anchored sections must clear the sticky header AND leave breathing room,
     otherwise the heading sits directly under the bar. */
  scroll-margin-top: calc(var(--header-h) + 32px);
}

.section--dark { background: var(--ink); color: #fff; }
.section--light { background: var(--light); }
.section--warm { background: var(--warm); }
.section--dark h2, .section--dark h3 { color: #fff; }

.measure { max-width: 62ch; }

/* -------------------------------------------------------------- kicker */
/* 28px hairline + uppercase label. Brand signature — see live site. */
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 16px;
}
.kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.section--dark .kicker,
.hero .kicker { color: var(--amber); }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  padding: 14px 22px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn--primary { background: var(--amber); color: var(--btn-text); }
.btn--primary:hover { background: #e6a600; }
.btn--full { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* --------------------------------------------- large background numeral */
/* Editorial section numbers. Desktop only — noise on small screens. */
.sec-num {
  display: none;
  position: absolute;
  top: 24px;
  right: 40px;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(110px, 13vw, 190px);
  line-height: 1;
  letter-spacing: -6px;
  color: rgba(10, 10, 10, .055);
  pointer-events: none;
  user-select: none;
}
.sec-num--dark { color: rgba(255, 255, 255, .05); }

@media (min-width: 1024px) { .sec-num { display: block; } }

/* -------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  height: var(--header-h);
  display: flex;
  align-items: center;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
/* Logo sized up from the live site's 104px for landing-page prominence:
   +15% on mobile, +27% from 768px. The mobile step is smaller on purpose —
   the full CTA label has to fit beside it on a 390px bar without wrapping. */
.site-header .logo img {
  width: 120px;
  height: 30px;
  aspect-ratio: 3366 / 842;
  object-fit: contain;
}
@media (min-width: 768px) {
  .site-header .logo img { width: 132px; height: 33px; }
}
/* nowrap keeps the approved CTA label on one line beside the larger logo. */
.site-header .btn { padding: 10px 13px; font-size: 12px; white-space: nowrap; }

@media (min-width: 768px) {
  .site-header .btn { padding: 13px 20px; font-size: 14px; }
}

/* ---------------------------------------------------------------- hero */
/* Dark editorial hero on charcoal, with a real founder photograph on the
   right at desktop. The photo is the LCP element, so it is eagerly loaded
   with fetchpriority="high" and carries explicit dimensions. */
.hero {
  background: var(--charcoal);
  color: #fff;
  padding-block: 48px 44px;
}
.hero h1 { color: #fff; max-width: 16ch; }
.hero__lede {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--muted-hero);
  max-width: 56ch;
  margin-top: 20px;
}
.hero__lede + .hero__lede { margin-top: 12px; }
.hero__actions { margin-top: 28px; }
.hero__micro {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted-dark);
}
.hero__micro span { display: block; }
.hero__micro span + span { margin-top: 4px; }

/* ---- Hero background photograph -------------------------------------
   ACTIVATES AUTOMATICALLY once a home-service photograph is saved to
   assets/img/hero-home-service.jpg — no code change required. Until then
   the layer is invisible and the hero renders as the charcoal editorial
   block below. See README.md section 12.

   The overlay is a hard requirement: it is what keeps the headline at
   an accessible contrast ratio over any photograph. Do not remove it. */
.hero { position: relative; isolation: isolate; }
.hero__photo,
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* The image URL is gated behind .has-photo so the page never requests a file
   that does not exist yet — an unconditional url() would 404 on every visit. */
.hero__photo {
  background-size: cover;
  background-position: center 40%;
  /* very light parallax-style drift, disabled under reduced motion */
  transition: transform 1.2s ease-out;
}
.hero.has-photo .hero__photo {
  background-image: url("assets/img/hero-home-service.jpg");
}
.hero.has-photo .hero__scrim {
  background:
    linear-gradient(to right, rgba(12, 13, 16, .96), rgba(12, 13, 16, .86) 46%, rgba(12, 13, 16, .62));
}
@media (max-width: 1023px) {
  .hero.has-photo .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(12, 13, 16, .94), rgba(12, 13, 16, .88) 50%, rgba(12, 13, 16, .96));
  }
}
.hero .container { position: relative; z-index: 1; }

/* "Free" emphasis badge */
.hero__free {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 183, 3, .12);
  border: 1px solid var(--amber);
  border-radius: var(--radius-pill);
  padding: 9px 18px 9px 14px;
  margin-bottom: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.2px;
  color: var(--amber);
}
.hero__free::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}

@media (min-width: 768px) {
  .hero { padding-block: 84px 72px; }
  .hero__actions .btn { width: auto; }
}
@media (min-width: 1024px) {
  .hero { padding-block: 116px 104px; }
}

/* -------------------------------------------------------- proof strip */
.proof {
  background: var(--warm);
  border-top: 1px solid var(--divider-amber);
  padding-block: 40px;
}
.proof__head { margin-bottom: 28px; }
.proof__head h2 { font-size: clamp(19px, 2.4vw, 24px); }
.proof__grid { display: grid; gap: 20px; }
/* Each result is its own card so it reads as a separate client project
   rather than three numbers from one engagement. */
.proof__item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-top: 3px solid var(--amber-deep);
  border-radius: var(--radius-card);
  padding: 22px 24px;
}
.proof__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5.4vw, 46px);
  line-height: .95;
  letter-spacing: -1.5px;
  color: var(--amber-deep);
}
.proof__label {
  font-size: 14px;
  color: var(--muted-light);
  margin-top: 10px;
}
.proof__src {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--ink-text);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, .1);
}
.proof__src::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--amber-deep);
  flex: none;
}

@media (min-width: 768px) {
  .proof { padding-block: 56px; }
  .proof__grid { grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
}

/* ---------------------------------------------------------- key cards */
.lede-block { max-width: 60ch; margin-top: 18px; font-size: 17px; }
.section--dark .lede-block { color: var(--muted-hero); }

.key-grid {
  display: grid;
  gap: var(--card-gap);
  margin-top: 40px;
}
.key-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-left: 3px solid var(--amber-deep);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}
.key-card h3 { margin-bottom: 8px; font-size: 17px; }
.key-card p { color: var(--muted-light); font-size: 15px; }

/* Restrained line icons. Stroke-only, currentColor, decorative (aria-hidden). */
.icon {
  width: 26px;
  height: 26px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.key-card .icon { color: var(--amber-deep); margin-bottom: 14px; }
.stage-card .icon { color: var(--amber); }

.closing-note {
  margin-top: 32px;
  max-width: 60ch;
  font-size: 16px;
  color: var(--muted-light);
}
.section--dark .closing-note { color: var(--muted-dark); }

@media (min-width: 768px) {
  .key-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------- stage cards */
.stage-grid {
  display: grid;
  gap: var(--card-gap);
  margin-top: 40px;
}
.stage-card {
  background: #151515;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius-panel);
  padding: 28px 26px;
}
.stage-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.stage-card__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--amber);
}
.stage-card h3 { margin-bottom: 10px; }
.stage-card p { color: var(--muted-hero); font-size: 15px; }

@media (min-width: 1024px) {
  .stage-grid { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------- case studies */
.case__head { display: flex; flex-direction: column; gap: 10px; }
.case__logo {
  width: 68px; height: 68px;
  object-fit: contain;
  border-radius: var(--radius-card);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  padding: 8px;
}
.case__label {
  font-size: 13px;
  letter-spacing: .4px;
  color: var(--muted-light);
}
.case__work {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted-light);
  max-width: 62ch;
}
.case__work strong { color: var(--ink-text); font-weight: 600; }

.case__layout {
  display: grid;
  gap: 36px;
  margin-top: 36px;
  align-items: start;
}

.case__figures { display: grid; gap: 18px; }
.case__figure {
  border-top: 1px solid rgba(0, 0, 0, .1);
  padding-top: 14px;
}
.case__figure b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--coral);
}
.case__figure span {
  display: block;
  font-size: 13px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-top: 8px;
}
/* Figures that are statements rather than single numbers */
.case__figure--text b {
  font-size: clamp(17px, 2.4vw, 20px);
  letter-spacing: -0.2px;
  color: var(--ink-text);
  line-height: 1.3;
}

.case__body {
  margin-top: 28px;
  border-left: 3px solid var(--amber);
  padding: 6px 0 6px 22px;
  max-width: 68ch;
  font-size: 16px;
  color: var(--muted-light);
}

/* Screenshot tiles. object-fit:contain so dashboard and Instagram
   information is never cropped by the layout. */
.shots { display: grid; gap: 16px; }
.shots figure { margin: 0; }
.shots img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  padding: 10px;
}
.shots figcaption {
  font-size: 12px;
  color: var(--muted-light);
  padding-top: 8px;
}
.shots--pair { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.shots--pair img { height: 240px; }
/* Single hero screenshot for a case with one visual — given more presence
   so the section does not feel under-weighted. */
.shots--single img { height: 300px; padding: 16px; }

/* Two stacked campaign screenshots. Each is labelled so the two campaigns
   read as separate, and the figures stay legible inside the screenshots. */
.shots--stack { gap: 22px; }
.shots--stack img { height: 210px; padding: 14px; }
.shots--stack figcaption b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-text);
  margin-right: 4px;
}
.shots__note {
  font-size: 12px;
  color: var(--muted-light);
  margin-top: 10px;
  max-width: 46ch;
}

@media (min-width: 768px) {
  .case__head { flex-direction: row; align-items: center; gap: 18px; }
  .shots img { height: 300px; }
  .shots--pair img { height: 280px; }
  .shots--single img { height: 400px; }
}
@media (min-width: 1024px) {
  .case__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; }
  /* mirrored second case so the pair does not read as a repeat */
  .case--mirror .case__col-text { order: 2; }
  .case--mirror .case__col-media { order: 1; }
}

/* ------------------------------------------------------------- chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.chip {
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: var(--radius-pill);
  padding: 9px 17px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
}

/* ---------------------------------------------------------- fit list */
/* align-items:start keeps the image card pinned to the top of the row rather
   than centring it against the full height of the text column. */
.fit-layout { display: grid; gap: 32px; margin-top: 32px; align-items: start; }
.fit-copy > .lede-block { margin-top: 0; margin-bottom: 28px; }
.fit-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  font-size: 15px;
  color: var(--muted-hero);
}
.fit-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--amber);
}

/* ---- Audience visual --------------------------------------------------
   ACTIVATES AUTOMATICALLY once assets/img/audience-home-service.jpg
   exists. Until then this renders as a bordered accent panel carrying the
   CTA, so the space reads as intentional rather than empty.
   See README.md section 12. */
.fit-visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-panel);
  border: 1px solid rgba(255, 255, 255, .14);
  background-color: #131418;
  background-size: cover;
  background-position: center;
  /* Sized by aspect ratio rather than a fixed min-height, so the card cannot
     grow taller than its content needs and leave dead space beneath. */
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  padding: 26px;
}
.fit-visual.has-photo {
  background-image: url("assets/img/audience-home-service.jpg");
}
.fit-visual.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, .92), rgba(10, 10, 10, .35));
}
.fit-visual__inner { position: relative; z-index: 1; }
.fit-visual h3 { font-size: 19px; margin-bottom: 10px; }
.fit-visual p { color: var(--muted-hero); font-size: 14px; margin-bottom: 20px; max-width: 34ch; }

@media (min-width: 1024px) {
  .fit-layout { grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 420px); gap: 56px; }
}

/* This section's content is short; trim the trailing padding so it does not
   end on a large band of empty background. */
#who-its-for { padding-bottom: calc(var(--section-gap) * 0.55); }

/* ------------------------------------------------------ growth review */
.review__layout { display: grid; gap: 44px; margin-top: 40px; align-items: start; }

.steps { counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 52px;
  margin-bottom: 28px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--amber-deep);
  color: var(--amber-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps h3 { font-size: 17px; margin-bottom: 6px; }
.steps p { color: var(--muted-light); font-size: 15px; }

.assess { margin-top: 8px; }
.assess h3 { font-size: 15px; margin-bottom: 14px; }

/* Offset amber block behind the founder photo — brand photo treatment.
   The block is anchored to the media wrapper, not the whole <figure>, so it
   never grows to sit behind the caption. */
.photo-frame { margin: 0; max-width: 360px; }
.photo-frame__media { position: relative; display: block; }
/* Offset accent kept deliberately light — a thin amber edge rather than a
   solid slab, so it frames the photo instead of competing with it. */
.photo-frame__media::after {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  background: transparent;
  border: 2px solid var(--amber);
  border-radius: 14px;
  z-index: 0;
}
.photo-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 24px 55px -18px rgba(0, 0, 0, .3);
}
.photo-frame figcaption {
  margin-top: 34px;
  font-size: 14px;
  color: var(--muted-light);
}

.disclaimer {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, .12);
  font-size: 14px;
  color: var(--muted-light);
  max-width: 62ch;
}

@media (min-width: 1024px) {
  .review__layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; }
  .photo-frame { margin-left: 14px; }
}

/* ------------------------------------------------------- client reviews */
.reviews__grid {
  display: grid;
  gap: var(--card-gap);
  margin-top: 40px;
}
.review-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: 0;
  cursor: zoom-in;
  text-align: left;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.review-card:hover {
  transform: translateY(-4px);
  border-color: var(--amber-deep);
  box-shadow: 0 24px 48px -22px rgba(0, 0, 0, .3);
}
/* Card previews are pre-cropped to one shared aspect ratio (top-anchored),
   so the three cards align exactly and no line of review text is ever cut
   off at the sides. The full, uncropped review opens in the lightbox. */
.review-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 580;
  object-fit: cover;
  object-position: top center;
  background: #fff;
}
.review-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-size: 12px;
  color: var(--muted-light);
}
.review-card__foot span { font-weight: 600; color: var(--amber-deep); }
.reviews__note { margin-top: 22px; font-size: 13px; color: var(--muted-light); }

@media (min-width: 768px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Lightbox --------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, .9);
  backdrop-filter: blur(4px);
}
.lightbox[open] { display: flex; }
.lightbox img {
  max-width: min(760px, 100%);
  max-height: 88vh;
  width: auto;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
}
.lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-dark);
  background: var(--ink);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { border-color: var(--amber); color: var(--amber); }

/* ------------------------------------------------------------ pricing */
.pricing__box { max-width: 680px; }
/* Free-review emphasis — the single loudest element in this section. */
.pricing__free {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--amber);
  color: #0a0a0a;
  border-radius: var(--radius-panel);
  padding: 26px 30px;
  margin: 24px 0;
}
.pricing__free b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.6px;
}
.pricing__free span { font-size: 14px; font-weight: 500; }
.pricing__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.8vw, 25px);
  line-height: 1.3;
  letter-spacing: -0.4px;
  margin: 22px 0;
  padding: 22px 0;
  border-block: 1px solid var(--divider-amber);
}
.pricing p { color: var(--muted-light); }
.pricing .btn { margin-top: 28px; }

/* ---------------------------------------------------------------- faq */
.faq__list { margin-top: 36px; max-width: 800px; }
.faq__item { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  color: var(--amber-deep);
}
.faq__item[open] summary::after { content: "–"; }
.faq__answer {
  padding: 0 0 22px;
  max-width: 68ch;
  color: var(--muted-light);
  font-size: 15px;
}
.faq__item summary:hover { color: var(--amber-deep); }
.faq__item summary::after { transition: transform .25s ease; }
.faq__item[open] summary::after { transform: translateY(-50%) rotate(180deg); }
/* Height animation is driven by script.js; this is the transition it uses.
   The collapsed height is set explicitly rather than relying on the browser
   to hide the content of a closed <details> — once script.js wraps the
   answer in .faq__wrap, that default cannot be counted on. Inline heights
   set during the animation override this rule while it runs. */
.faq__wrap { overflow: hidden; }
.faq__item:not([open]) .faq__wrap { height: 0; }
.faq__wrap.is-animating { transition: height .3s ease; }

/* --------------------------------------------------------- form block */
.form__intro { max-width: 56ch; margin-top: 18px; color: var(--muted-hero); }

/* ---- HubSpot form -----------------------------------------------------
   READ BEFORE EDITING. The embed renders inside a CROSS-ORIGIN iframe on
   js.hsforms.net, so none of the .hs-form-wrap rules below actually reach the
   form — they are inert, and are kept only in case the embed is ever switched
   to an inline render. That includes the white `label` colour further down.

   Label colour is a HubSpot form-editor setting, and on the current free plan
   it is a PAID feature (the Style panel is padlocked). HubSpot's default label
   colour is #212d3a, which is invisible on a dark panel — this is what made
   the labels unreadable.

   The only lever this page still has is the surface BEHIND the transparent
   iframe, so this card is light. That is what makes the labels legible.
   Do NOT darken it again unless the label colour is first changed inside
   HubSpot (requires a paid plan). */
.hs-form-wrap {
  margin-top: 36px;
  max-width: 760px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-panel);
  padding: clamp(22px, 3vw, 34px);
}
.hs-form-wrap .hs-form-field { margin-bottom: 18px; }
.hs-form-wrap label,
.hs-form-wrap .hs-form-field > label {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 7px;
}
.hs-form-wrap .hs-form-required { color: var(--amber); margin-left: 2px; }
.hs-form-wrap input[type="text"],
.hs-form-wrap input[type="email"],
.hs-form-wrap input[type="tel"],
.hs-form-wrap input[type="number"],
.hs-form-wrap select,
.hs-form-wrap textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 15px;
  color: #fff;
  background: #0f0f0f;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  transition: border-color .2s ease;
}
.hs-form-wrap textarea { min-height: 110px; resize: vertical; }
.hs-form-wrap input:focus,
.hs-form-wrap select:focus,
.hs-form-wrap textarea:focus {
  outline: none;
  border-color: var(--amber);
}
.hs-form-wrap input::placeholder,
.hs-form-wrap textarea::placeholder { color: var(--muted-dark); }
/* HubSpot renders side-by-side fields in .hs-form-columns */
.hs-form-wrap .hs-form-booleancheckbox-display,
.hs-form-wrap .hs-form-checkbox-display {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--muted-hero);
}
.hs-form-wrap .hs-form-booleancheckbox-display input { width: auto; margin-top: 3px; }
.hs-form-wrap .legal-consent-container,
.hs-form-wrap .hs-richtext {
  font-size: 13px;
  color: var(--muted-dark);
  line-height: 1.5;
}
.hs-form-wrap .hs-richtext p { margin-bottom: 10px; }
.hs-form-wrap .hs-error-msg,
.hs-form-wrap .hs-error-msgs label { color: #FF8A78; font-size: 13px; font-weight: 500; }
.hs-form-wrap .hs-button,
.hs-form-wrap input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--btn-text);
  background: var(--amber);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  padding: 15px 24px;
  margin-top: 8px;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.hs-form-wrap .hs-button:hover,
.hs-form-wrap input[type="submit"]:hover {
  background: #e6a600;
  transform: translateY(-1px);
}

@media (min-width: 640px) {
  .hs-form-wrap .hs-form-columns > div { padding-right: 14px; }
  .hs-form-wrap .hs-button,
  .hs-form-wrap input[type="submit"] { width: auto; min-width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-form-wrap .hs-button:hover,
  .hs-form-wrap input[type="submit"]:hover { transform: none; }
}

/* Deliberately NOT a working form: no inputs, no submit button.
   This is a labelled slot showing where the HubSpot embed will render. */
.form-slot {
  margin-top: 36px;
  border: 2px dashed var(--border-dark);
  border-radius: var(--radius-panel);
  background:
    repeating-linear-gradient(45deg, #141414, #141414 10px, #111 10px, #111 20px);
  padding: 32px 24px;
  max-width: 720px;
}
.form-slot__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--divider-amber);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  margin-bottom: 18px;
}
.form-slot h3 { font-size: 17px; margin-bottom: 8px; }
.form-slot > p { color: var(--muted-dark); font-size: 14px; }
.form-slot__fields {
  margin-top: 20px;
  display: grid;
  gap: 8px 20px;
  font-size: 14px;
  color: var(--muted-hero);
}
.form-slot__fields li { padding-left: 18px; position: relative; }
.form-slot__fields li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--amber);
}
.form-note { margin-top: 22px; font-size: 13px; color: var(--muted-dark); }

@media (min-width: 640px) {
  .form-slot__fields { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------- footer */
.site-footer {
  background: var(--ink);
  color: #fff;
  padding-block: 44px 28px;
}
.site-footer .logo img {
  width: 160px;
  aspect-ratio: 3366 / 842;
  object-fit: contain;
}
.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.site-footer__meta { font-size: 14px; color: var(--muted-hero); }
.site-footer__meta a { color: #fff; }
.site-footer hr {
  border: none;
  border-top: 1px solid var(--divider-amber);
  margin: 28px 0 18px;
}
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: var(--muted-dark);
}

@media (min-width: 768px) {
  .site-footer__top { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .site-footer__meta { text-align: right; }
  .site-footer__bottom { flex-direction: row; justify-content: space-between; }
}

/* ------------------------------------------------------ thank-you page */
.ty {
  background: var(--ink);
  color: #fff;
  padding-block: 72px 64px;
}
.ty h1 { color: #fff; max-width: 18ch; }
.ty p { color: var(--muted-hero); margin-top: 18px; max-width: 56ch; }

.calendar-slot {
  margin: 0 auto;
  max-width: 900px;
  border: 2px dashed rgba(0, 0, 0, .35);
  border-radius: var(--radius-panel);
  background: #fff;
  padding: 40px 26px;
  text-align: center;
}
.calendar-slot__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--amber-deep);
  border: 1px solid var(--amber-deep);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  margin-bottom: 16px;
}
.calendar-slot p { color: var(--muted-light); font-size: 14px; max-width: 52ch; margin: 8px auto 0; }

/* ------------------------------------------------------- motion layer */
/* Elements start visible; script.js adds .rv to opt them into the reveal.
   If JavaScript fails or is blocked, all content stays readable. */
/* No will-change here on purpose: it would promote every revealed element to
   its own compositor layer for the life of the page, which costs GPU memory
   on long pages for no benefit once the one-off transition has finished. */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.rv-in { opacity: 1; transform: none; }

/* Restrained hover polish on interactive cards. */
.key-card, .stage-card, .chip, .proof__item {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.key-card:hover, .proof__item:hover {
  transform: translateY(-3px);
  border-color: var(--amber-deep);
  box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .25);
}
.stage-card:hover { transform: translateY(-3px); border-color: var(--amber); }
.chip:hover { border-color: var(--amber-deep); transform: translateY(-2px); }
.btn--primary:hover { transform: translateY(-1px); }
.shots img { transition: transform .35s ease; }
.shots figure:hover img { transform: scale(1.015); }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .key-card, .stage-card, .chip, .proof__item, .review-card,
  .btn, .shots img, .hero__photo, .faq__wrap, .faq__item summary::after {
    transition: none !important;
  }
  .key-card:hover, .proof__item:hover, .stage-card:hover,
  .chip:hover, .btn--primary:hover, .review-card:hover,
  .shots figure:hover img {
    transform: none;
  }
}

/* --------------------------------------------------------------- print */
@media print {
  .site-header, .form-slot, .btn { display: none; }
  body { background: #fff; color: #000; }
}