/* ==========================================================================
   duh. — landing  (design tokens straight from the Figma variables)
   Two reference frames: desktop 1440, mobile 390. Type/spacing interpolate
   fluidly between them and hit both endpoints exactly.
   ========================================================================== */
/* Licensed faces from the design (Commercial Type 2607-ZKBQTH / Displaay) — this site only. */
@font-face {
  font-family: "Marr Sans Cond Web";
  src: url("assets/fonts/MarrSansCondensed-Bold-Web.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Haffer";
  src: url("assets/fonts/Haffer-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper:  #f8f5f2;   /* neutral/10  page bg      */
  --sand:   #e3dfda;   /* neutral/20  form card    */
  --line:   #cfc9c4;   /* neutral/30  borders      */
  --muted:  #a89e97;   /* neutral/50  placeholder  */
  --ink:    #0c0a0a;   /* neutral/120 near-black    */
  --green:  #49ca43;   /* brand/green/100          */

  --display: "Marr Sans Cond Web", "Arial Narrow", sans-serif;
  --body:    "Haffer", system-ui, -apple-system, sans-serif;

  /* Real licensed faces are in place, so type is set at the design's own values. */
  --display-cap-fix: 1;
  --display-lh: 0.78;              /* design: 78% */
}

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

/* Clip on BOTH html and body: only that combination reliably stops horizontal
   scroll from the full-bleed background across browsers. */
html, body { overflow-x: clip; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

/* 1440 canvas, centred, with the card inset (30px desktop → 20px mobile) */
/* Everything in the hero is sized off the 1440 frame and capped at it, so the whole
   composition scales as ONE piece at any width instead of drifting apart. */
:root { --u: min(100vw, 1440px); }        /* the design canvas width */

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  /* no bottom inset — the dark footer runs to the very bottom edge (no cream strip) */
  padding: calc(var(--u) * 30 / 1440) calc(var(--u) * 30 / 1440) 0;
}

/* Display face — Marr Sans Cond stand-in */
.display {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* Pill button — h48/min-w140/px28/20px (desktop) → h38/min-w90/px24/16px (mobile) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 48px;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 500 clamp(16px, calc(14.5px + 0.38vw), 20px)/1.1 var(--body);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover  { opacity: .88; }
.btn:active { transform: scale(.97); }

/* ==========================================================================
   HERO  — fixed-height green card, content centred (never clipped)
   ========================================================================== */
.hero {
  position: relative;
  background: var(--green);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1380 / 900;        /* design: Frame 99604 — height follows width, so the
                                      duck, type and green margins keep their ratio */
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 30 / 1440);
}

/* Nav floats over the hero (design: it sits outside the centred content frame,
   so the headline block stays centred in the full 840px inner height). */
.hero__nav {
  position: absolute;
  top: calc(var(--u) * 30 / 1440);
  left: calc(var(--u) * 30 / 1440);
  right: calc(var(--u) * 30 / 1440);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.hero__logo img { width: clamp(72px, calc(66.5px + 1.4vw), 87px); height: auto; }

/* Inner frame (design: Frame 99603, Fill 1320 × 840) — content is centred vertically,
   with the design's gap sitting between the headline+duck group and the tagline. */
.hero__body {
  flex: 1 0 auto;                  /* grow to fill, but NEVER shrink below content
                                     (so tall content grows the hero instead of clipping) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 26 / 1440); /* design gap, desktop */
}

/* Headline + duck — one group; the duck rides up over the headline's last line. */
.hero__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hero__title {
  margin: 0;
  font-size: calc(var(--u) * 160 / 1440 * var(--display-cap-fix));   /* design H1 160 @ 1440 */
  line-height: var(--display-lh);  /* design: 78% (kept as a real 124.8px step) */
  letter-spacing: -0.02em;         /* design: -2% */
  text-align: center;
  color: var(--ink);
}
.hero__title span { display: block; }

/* Duck + its "Duh." balloon, exported as one asset at the design's exact crop. */
.hero__duck {
  display: block;
  width: 30.06%;                   /* 396.81 / 1320 */
  margin-top: calc(var(--u) * -70 / 1440);   /* design overlap 70 @ 1440 */
  transform: translateX(-3.15%);   /* design sits the duck 12.5px left of centre */
}
.hero__duck-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 396.81 / 362.84;   /* design box — never let it deform */
}

.hero__tagline {
  margin: 0;
  max-width: calc(var(--u) * 404 / 1440);                 /* design P1 box */
  font-size: calc(var(--u) * 26 / 1440);                  /* design P1 26 @ 1440 */
  font-weight: 500;
  line-height: 1.1;                /* design: 110% */
  letter-spacing: -0.01em;         /* design: -1% */
  text-align: center;
  color: var(--ink);
  /* Figma trims this box to the cap height; CSS keeps the full line box, so pull the
     half-leading off both ends to land on the design's 47px (desktop) / 63px (phone). */
  margin-block: -0.1865em;
}

/* ==========================================================================
   CONTACT — fixed-scale mountains, form overlapping the dark footer
   ========================================================================== */
.contact {
  position: relative;
  /* hero → form gap: 24px (mobile) → 163px (desktop), per the design */
  --gap-top: clamp(24px, calc(13.24vw - 27.6px), 163px);
  padding-top: var(--gap-top);
}

/* Mountains: shown at a FIXED 1440px width (never stretched by the viewport) and
   cropped — centred on desktop, left-aligned + lifted on mobile (design crop). */
.mountains {
  position: absolute;
  /* spans from the ridge line down to the section's bottom (= the footer's bottom),
     so the halftone covers the whole footer's side margins and never overshoots. */
  top: calc(var(--gap-top) + 50px); /* design: mountains Top 1143.68 = 50px below the form top */
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: 0;                       /* behind form (z3) and the dark footer (z1) */
  pointer-events: none;
  /* Exported straight from the design, already cropped to the frame (1440 × 1189.32),
     so it only has to be laid across the full width from that top edge. */
  background-image: url("assets/mountains-figma.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

/* Form card — w680 / px30 py50 / gap50 (desktop) → px30 py40 / gap40 (mobile) */
.form {
  position: relative;
  z-index: 3;
  width: min(680px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 3.4vw, 50px);
  padding: clamp(40px, 3.4vw, 50px) 30px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.form__title {
  margin: 0;
  font-size: calc(clamp(42px, calc(30.9px + 2.86vw), 72px) * var(--display-cap-fix));  /* design H2 72 */
  line-height: 0.9;                /* design: 90% */
  text-align: center;
  color: var(--ink);
}

.form__fields {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.3vw, 19px);
  width: 100%;
}
.field {
  width: 100%;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 500 clamp(16px, calc(14.5px + 0.38vw), 20px)/1.1 var(--body);
  color: var(--ink);
}
.field::placeholder { color: var(--muted); opacity: 1; }
.field:focus { outline: none; border-color: var(--ink); }
.field--area { min-height: 160px; resize: vertical; }

/* Dark footer — pulled up so the form overlaps its top edge */
.footer {
  position: relative;
  z-index: 1;
  /* design: black starts at 1609.37 — i.e. 216.31px above the form's bottom edge */
  margin-top: -216.31px;
  padding-top: 264.79px;            /* black top → footer duck top (1874.16 - 1609.37) */
  padding-bottom: 36px;             /* design: 2333 - 2297.03 */
  background: var(--ink);
  border-radius: 16px 16px 0 0;    /* rounded top; bottom is square and runs off the page edge */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer__duck {
  width: 364.76px;                 /* design box; the asset is exported at that exact crop */
  max-width: 60%;
  aspect-ratio: 364.76 / 340.03;
  height: auto;
  margin-bottom: -42.16px;         /* headline rides up over the duck (2172.03 vs 2214.19) */
}
.footer__title {
  margin: 0;
  font-size: calc(min(11.3vw, 160px) * var(--display-cap-fix));   /* design 160, one line */
  line-height: var(--display-lh);  /* design: 78% */
  text-align: center;
  color: var(--paper);
}
.br-m { display: none; }           /* line breaks only on phones */

/* ==========================================================================
   Phone  (≤ 640px) — the 390 design frame
   ========================================================================== */
@media (max-width: 640px) {
  .wrap { padding-bottom: 0; }        /* footer is full-bleed → reaches the very bottom (no cream strip) */

  /* Phone canvas is 390 wide — same trick, everything scales off it as one piece.
     design: hero 350 × 802, padding 24, radius 14.03; inner 302 × 754, gap 22 */
  :root { --u: 100vw; }

  .wrap { padding: calc(var(--u) * 20 / 390) calc(var(--u) * 20 / 390) 0; }

  .hero {
    aspect-ratio: 350 / 802;
    border-radius: calc(var(--u) * 14.03 / 390);
    padding: calc(var(--u) * 24 / 390);
  }
  .hero__nav {
    top: calc(var(--u) * 24 / 390);
    left: calc(var(--u) * 24 / 390);
    right: calc(var(--u) * 24 / 390);
  }
  .hero__body { gap: calc(var(--u) * 22 / 390); }
  .hero__title { font-size: calc(var(--u) * 80 / 390 * var(--display-cap-fix)); }  /* design H1-M 80 @ 390 */
  .hero__duck {
    width: 87.42%;                  /* 264 / 302 */
    margin-top: calc(var(--u) * -49.1 / 390);
    transform: none;                /* phone design centres the duck exactly */
  }
  .hero__duck-img { aspect-ratio: 264 / 261.99; }   /* phone crop is near-square */
  .hero__tagline {
    max-width: calc(var(--u) * 302 / 390);          /* design P1-M box = full inner width */
    font-size: calc(var(--u) * 22 / 390);           /* design P1-M 22 @ 390 */
  }

  /* design phone Input (default-M): 62px tall — Figma draws the border inside the box */
  .field { padding: 21px; }

  .footer {
    margin-top: -72vw;              /* form overlaps the footer far more (black starts ~mid-form) */
    padding-top: 82vw;             /* push duck/headline below the form */
    width: 100vw;                   /* design: black is 507.63 wide at -58.81 → full-bleed */
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0;
    padding-top: 330.58px;          /* black 1183 → footer duck 1513.58 */
    padding-bottom: 32.95px;        /* design: 1944 - 1911.05 */
  }
  .footer__duck {
    width: 64.68vw;                 /* 252.27 / 390 */
    max-width: none;
    margin-bottom: -24.9px;         /* headline overlaps the duck less than on desktop */
  }
  .footer__title { font-size: calc(20.5vw * var(--display-cap-fix)); }  /* design H1-M 80 @ 390 */
  .br-m { display: inline; }

  /* Phone crop is its own export (390 × 1148) and sits 50px ABOVE the form top
     (design: mountains 796.08 vs form 846.08) — the opposite of desktop. */
  .mountains {
    top: calc(var(--gap-top) - 50px);
    background-image: url("assets/mountains-mobile.webp");
  }

  /* design: black starts at 1183, form bottom is 1480.08 */
  .footer {
    margin-top: -297.08px;
  }
}