/* =========================================================
   departo — landing page
   Brand: Sand #d8d3cb · Green #60ef9d · Ink #0d0d0d
   Type: Grifter Bold (display) · Playfair Display Black Italic (italic accent)
   ========================================================= */

/* ---------- Optional self-hosted brand fonts -----------------
   Drop your licensed Grifter Bold file into /public/fonts/
   then uncomment the @font-face below. Until then the page
   falls back to Archivo Black, which keeps the geometric
   heaviness of the brand wordmark.
------------------------------------------------------------- */
/*
@font-face {
  font-family: "GRIFTER";
  src: url("/fonts/GRIFTERBold.woff2") format("woff2"),
       url("/fonts/GRIFTERBold.woff")  format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

/* ---------- Tokens ---------- */
:root {
  --sand:   #d8d3cb;
  --sand-2: #e3ddd2;
  --green:  #60ef9d;
  --green-2:#4ed98a;
  --green-3:#37c476;
  --ink:    #0d0d0d;
  --ink-2:  #1c1c1c;
  --muted:  #595959;
  --white:  #ffffff;

  --font-display: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --font-italic:  "Playfair Display", "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --max:   1200px;
  --pad-x: clamp(20px, 5vw, 64px);
  --pad-y: clamp(28px, 5vw, 56px);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  --dur-fast: .25s;
  --dur:      .55s;
  --dur-slow: .9s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  background: var(--sand);
  line-height: 1.4;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }
a { color: inherit; text-decoration: none; }

/* a11y helper */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 100;
  padding: 10px 14px; background: var(--ink); color: var(--white);
  border-radius: var(--r-sm); transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* ---------- Page shell ---------- */
.page { min-height: 100dvh; display: flex; flex-direction: column; }

/* ───────────────── HERO (sand) ───────────────── */
.hero {
  position: relative;
  background: var(--sand);
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  isolation: isolate;
}

/* subtle film grain */
.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

/* topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(40px, 6vw, 80px);
  max-width: var(--max);
  width: 100%;
  margin-inline: auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  text-decoration: none;
  color: var(--ink);
}
.brand .logo {
  width: auto;
  height: 40px;
}
.brand-mark {
  height: clamp(28px, 3.4vw, 40px);
  width: auto;
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  /* tighten to mimic Grifter's compact rhythm with the Archivo Black fallback */
  font-stretch: 90%;
}
.topnav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.topnav-link {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  position: relative;
  padding: 6px 2px;
  transition: opacity .2s;
}
.topnav-link:hover { opacity: .65; }
.topnav-link--cta {
  background: var(--ink);
  color: var(--sand);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  transition: transform .25s var(--ease-out), background .25s;
}
.topnav-link--cta:hover { background: var(--ink-2); transform: translateY(-1px); opacity: 1; }
@media (max-width: 520px) {
  .topnav-link:not(.topnav-link--cta) { display: none; }
}

/* hero body */
.hero-body {
  max-width: var(--max);
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: center;
  padding-block: clamp(8px, 3vw, 24px);
}

/* ---------- Headline ---------- */
.headline {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--ink);
  font-size: clamp(40px, 7.4vw, 120px);
  line-height: .98;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(24px, 3.5vw, 40px);
  max-width: 14ch;
}
.headline .line {
  display: block;
  white-space: normal;
}
.headline .line[data-line="2"] {

}
.headline .line[data-line="4"] {
  margin-top:-.50em;
}
.headline .word {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  /* breathing room for descenders and italic lean — compensated by negative margins
     so external layout is unchanged */
  padding: .14em .08em .22em;
  margin-block: -.14em -.22em;
  /* clip-path masks the rise-up animation without altering inline-block baseline
     (which is what overflow:hidden would do). Generous side slack keeps italic
     glyph leans from clipping. */
  clip-path: inset(0 -.12em 0 -.06em);
}
.headline .word:last-child { margin-right: 0; }
.headline .italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.01em;
  /* Playfair's italic display weight has a smaller cap-height than Archivo Black,
     so a tiny upsize makes mixed lines feel optically aligned through the middle. */
  font-size: .90em;
  /* nudge baseline so italic descenders sit inside the same optical band */
  transform: translateY(.02em);
}

/* highlight under "Global" — uses the brand marker.svg shape */
.headline .highlight { padding-right: .04em; }
.marker-wrap {
  position: absolute;
  /* the inner italic now extends past the glyph for clip slack — pull the marker
     in slightly so it tracks the visible glyph width */
  left: .02em; right: .02em;
  /* sit just below baseline — inside the .word's padding-bottom but above the
     descender allowance so the marker stays glued to the bottom of the glyphs */
  bottom: .25em;
  height: .18em;
  pointer-events: none;
  transform-origin: left center;
  transform: scaleX(0);
  animation: markerDraw 1.1s var(--ease-out) 1.05s forwards;
  z-index: -1;
}
.marker-wrap .marker {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 0 rgba(13,13,13,.04));
}
@keyframes markerDraw {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* ---------- Word reveal animation ----------
   Each .word is clipped (clip-path) so the inner .reveal can slide up
   from below the line and be masked while it's offscreen.
   clip-path is used instead of overflow:hidden because overflow:hidden
   on inline-block forces the element's baseline to its bottom edge,
   which breaks mixed Playfair-italic / Archivo-Black baseline alignment.
   Per-word delays are set via the [data-line] selectors below.
*/
.reveal {
  display: inline-block;
  transform: translateY(150%);
  will-change: transform;
  animation: wordRise .9s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes wordRise {
  0%   { transform: translateY(150%) skewY(4deg); }
  100% { transform: translateY(0)     skewY(0); }
}

/* explicit per-word delays — gives the line-by-line cinematic feel */
.line[data-line="0"] .word:nth-child(1) .reveal { --d: .10s; }
.line[data-line="0"] .word:nth-child(2) .reveal { --d: .18s; }
.line[data-line="1"] .word:nth-child(1) .reveal { --d: .28s; }
.line[data-line="1"] .word:nth-child(2) .reveal { --d: .36s; }
.line[data-line="2"] .word:nth-child(1) .reveal { --d: .46s; }
.line[data-line="2"] .word:nth-child(2) .reveal { --d: .54s; }
.line[data-line="3"] .word:nth-child(1) .reveal { --d: .12s; }
.line[data-line="3"] .word:nth-child(2) .reveal { --d: .22s; }
.line[data-line="4"] .word:nth-child(1) .reveal { --d: .34s; }

/* generic [data-reveal] elements */
[data-reveal] { opacity: 0; transform: translateY(14px); animation: fadeUp .9s var(--ease-out) forwards; }
.topbar[data-reveal]   { animation-delay: 0s; }
.tagline[data-reveal]  { animation-delay: .72s; }
.waitlist[data-reveal] { animation-delay: .9s; }
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Tagline ---------- */
.tagline {
  margin: 0 0 clamp(28px, 4vw, 44px);
  font-size: clamp(18px, 1.4vw, 26px);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}
.tagline span { display: inline-block; }

/* ---------- Waitlist form ---------- */
.waitlist {
  width: 100%;
  max-width: 520px;
}
.field {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--white);
  border-radius: var(--r-pill);
  padding: 6px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 18px 40px -22px rgba(13,13,13,.25),
    inset 0 0 0 1px rgba(13,13,13,.06);
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.field:focus-within {
  box-shadow:
    0 0 0 3px rgba(96,239,157,.55),
    0 1px 0 rgba(0,0,0,.04),
    0 22px 44px -22px rgba(13,13,13,.3),
    inset 0 0 0 1px rgba(13,13,13,.08);
  transform: translateY(-1px);
}
.field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
}
.field input::placeholder { color: #9a9a9a; font-weight: 500; }

.cta {
  position: relative;
  appearance: none;
  border: 0;
  background: var(--ink);
  color: var(--sand);
  border-radius: var(--r-pill);
  padding: 0 22px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  transition: background .25s var(--ease-out), transform .25s var(--ease-out);
  font-family: var(--font-display);
  text-transform: uppercase;
}
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-3) 100%);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
  z-index: 0;
}
.cta > * { position: relative; z-index: 1; }
.cta:hover::before { transform: translateY(0); }
.cta:hover { color: var(--ink); }
.cta:active { transform: scale(.98); }

.cta-text {
  position: relative;
  display: inline-grid;
  grid-template-areas: "stack";
  overflow: hidden;
}
.cta-text > span {
  grid-area: stack;
  transition: transform .35s var(--ease-out), opacity .35s;
}
.cta-text-hover { transform: translateY(120%); opacity: 0; }
.cta:hover .cta-text-default { transform: translateY(-120%); opacity: 0; }
.cta:hover .cta-text-hover   { transform: translateY(0);     opacity: 1; }

.cta-arrow {
  width: 18px; height: 18px;
  transition: transform .35s var(--ease-out);
}
.cta:hover .cta-arrow { transform: translateX(4px); }

@media (max-width: 480px) {
  .field { padding: 5px; }
  .field input { padding: 12px 14px; font-size: 15px; }
  .cta { padding: 0 14px; height: 44px; font-size: 14px; }
  .cta-arrow { width: 16px; height: 16px; }
}

.form-status {
  margin: 14px 4px 0;
  min-height: 1.2em;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--muted);
  transition: color .2s;
}
.form-status.is-error   { color: #b3261e; }
.form-status.is-success { color: var(--green-3); }
.form-meta {
  margin: 8px 4px 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

/* ───────────────── SECURED (green) ───────────────── */
.secured {
  position: relative;
  background: var(--green);
  color: var(--white);
  padding: clamp(56px, 8vw, 120px) var(--pad-x) clamp(28px, 4vw, 48px);
  overflow: hidden;
  isolation: isolate;
}
.secured-heading {
  font-family: var(--font-display);
  font-weight: 900;
  margin: 0;
  font-size: clamp(64px, 13vw, 188px);
  line-height: .9;
  letter-spacing: -0.035em;
  max-width: var(--max);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.secured-heading .line { display: block; }
.secured-heading .word {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  padding: .14em .1em .22em;
  margin-block: -.14em -.22em;
  clip-path: inset(0 -.14em 0 -.08em);
}
.secured-heading .italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1.06em;
  transform: translateY(.02em);
}

/* layered giant D decoration on the right */
.decor {
  position: absolute;
  right: clamp(-60px, -4vw, -20px);
  bottom: clamp(-40px, -3vw, -10px);
  height: clamp(280px, 56vw, 720px);
  width: auto;
  z-index: 1;
  pointer-events: none;
  transition: transform .5s var(--ease-out);
}
.decor--back {
  fill: var(--green-2);
  transform: translate(8%, 10%) rotate(-315deg) scale(2.04);
  opacity: .92;
  animation: decorIn 1.4s var(--ease-out) .35s both;
}
.decor--front {
  fill: var(--green-3);
  transform: translate(-2%, 4%);
  opacity: .55;
  animation: decorIn 1.4s var(--ease-out) .15s both;
}
@keyframes decorIn {
  0%   { opacity: 0; transform: translate(20%, 30%) rotate(-6deg) scale(.88); }
  100% { opacity: var(--o, .9);  /* fallback handled by per-class default */ }
}
/* keep per-element opacity exactly */
.decor--back  { --o: .92; }
.decor--front { --o: .55; }

/* parallax-ish reaction handled in JS for nicer feel */

/* footnote */
.footnote {
  position: relative;
  z-index: 2;
  margin-top: clamp(40px, 6vw, 80px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  max-width: var(--max);
  margin-inline: auto;
  color: rgba(13,13,13,.78);
}
.footnote a:hover { color: var(--ink); }
.footnote .dot { opacity: .5; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
  }
  .reveal, [data-reveal], .marker-wrap { transform: none !important; opacity: 1 !important; }
}

/* ---------- Tiny screens fine-tune ---------- */
@media (max-width: 380px) {
  .headline { font-size: 38px; }
  .secured-heading { font-size: 60px; }
}

/* ---------- Print ---------- */
@media print {
  .grain, .decor, .topnav, .waitlist { display: none !important; }
  body, .hero, .secured { background: white !important; color: black !important; }
}