/* Dessert Dock — shared styles
   Follows the Brand Guidelines v1.0: pink paint on raw steel.
   Anthracite (RAL 7016) is the steel, Dock Pink (RAL 4010) is for edges, frames and the logo shadow.
   Modak is for the logo and the odd one-word sticker only. Archivo does everything else. */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/archivo-var.woff2') format('woff2'); }
@font-face { font-family: 'Modak'; font-style: normal; font-weight: 400; font-display: block; src: url('/fonts/modak.woff2') format('woff2'); }

:root {
  /* Brand palette (see guidelines section 02) */
  --pink: #BC4077;         /* Dock Pink · RAL 4010 Telemagenta · accent */
  --anthracite: #293133;   /* RAL 7016 Anthracite grey · primary */
  --signal: #ECECE7;       /* RAL 9003 Signal white · base */
  --steel: #8F9695;        /* RAL 7045 Telegrey 1 · support */
  --milk: #E1A6AD;         /* Strawberry Milk · RAL 3015 · highlight, never text on white */

  /* Working tints of the palette */
  --panel: #F5F5F1;        /* card surface on Signal White */
  --rule: #D6D7D2;
  --ink-soft: #4C5557;     /* secondary text on light */
  --steel-dark: #20272A;
  --steel-rib: #3A4346;

  /* Steel ribs: the container wall in Anthracite */
  --ribs: repeating-linear-gradient(90deg,
    var(--anthracite) 0 26px,
    var(--steel-dark) 26px 30px,
    var(--steel-rib) 30px 42px,
    #30393C 42px 46px,
    var(--anthracite) 46px 52px);

  --logo: 'Modak', 'Archivo', system-ui, sans-serif;
  --sans: 'Archivo', system-ui, sans-serif;

  --gutter: clamp(16px, 5vw, 40px);
  --radius: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--signal);
  color: var(--anthracite);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--pink); color: var(--signal); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

/* Headlines: Archivo Black (900), tight, sentence case */
h1, h2, h3 { font-family: var(--sans); font-weight: 900; line-height: 0.9; letter-spacing: -0.02em; }
h1 { font-size: clamp(52px, 10vw, 124px); }
h2 { font-size: clamp(38px, 6vw, 72px); }
h3 { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.05; letter-spacing: -0.01em; }
.pink { color: var(--pink); }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--ink-soft); max-width: 600px; }

/* Labels: bold uppercase Archivo, tracked out */
.eyebrow, .label {
  font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--anthracite); }
.eyebrow::before { content: ''; width: 12px; height: 12px; background: var(--pink); border-radius: 2px; flex-shrink: 0; }
.eyebrow + h2, .eyebrow + h1 { margin-top: 14px; }

/* ---------- Logo (built in Modak, never stretched, tilted or given extra effects) ---------- */
.logo {
  display: inline-flex; flex-direction: column; align-items: center;
  text-decoration: none; color: var(--pink);
  --size: 40px; --shadow: none;
}
.logo-word {
  font-family: var(--logo); font-weight: 400; font-size: var(--size);
  line-height: 0.7; text-align: center; letter-spacing: 0.01em;
  padding-top: 0.12em; text-shadow: var(--shadow);
}
.logo-line {
  margin-top: calc(var(--size) * 0.2);
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; white-space: nowrap;
  font-size: calc(var(--size) * 0.16); letter-spacing: 0.04em; color: var(--pink);
}
/* Charcoal colourway: white letters, pink shadow */
.logo.on-dark { color: var(--signal); --shadow: 0.06em 0.06em 0 var(--pink); }
/* Pink colourway: white letters, anthracite shadow */
.logo.on-pink { color: var(--signal); --shadow: 0.06em 0.06em 0 var(--anthracite); }
.logo.on-pink .logo-line { color: var(--signal); }

/* Modak sticker: one word only ("Yum.") */
.sticker {
  display: inline-grid; place-items: center;
  font-family: var(--logo); font-size: 44px; line-height: 0.62; padding: 22px 26px 16px;
  color: var(--signal); background: var(--pink); border-radius: 999px;
  text-shadow: 0.06em 0.06em 0 var(--anthracite);
}

/* ---------- Buttons & forms ---------- */
/* On Dock Pink, only Signal White text at 18px bold or larger */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 700; font-size: 18px; line-height: 1.2;
  padding: 15px 24px; border-radius: 4px;
  border: 0; background: var(--pink); color: var(--signal);
  text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: #A8346A; }
.btn:active { transform: translateY(2px); }
.btn[disabled] { opacity: 0.6; cursor: wait; }
.btn.ghost { background: transparent; color: var(--anthracite); box-shadow: inset 0 0 0 2px var(--anthracite); }
.btn.ghost:hover { background: var(--anthracite); color: var(--signal); }
.dark .btn.ghost { color: var(--signal); box-shadow: inset 0 0 0 2px var(--signal); }
.dark .btn.ghost:hover { background: var(--signal); color: var(--anthracite); }

.signup { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.signup input[type=email] { flex: 1 1 220px; }
input, textarea {
  font: inherit; font-size: 16px; color: var(--anthracite);
  padding: 15px 18px; border-radius: 4px;
  border: 2px solid var(--anthracite); background: var(--panel);
  width: 100%;
}
.dark input, .dark textarea { border-color: var(--signal); background: var(--signal); }
textarea { resize: vertical; }
input:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--pink); outline-offset: 3px;
}
.dark input:focus-visible, .dark textarea:focus-visible, .dark .btn:focus-visible, .dark a:focus-visible { outline-color: var(--milk); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; color: var(--ink-soft); margin-top: 12px; }
.form-done, .form-error { display: none; font-weight: 700; margin-top: 4px; }
.form-error { font-weight: 500; font-size: 15px; margin-top: 12px; }
form.is-done { display: none; }
form.is-done ~ .form-done { display: block; }
form.is-error ~ .form-error { display: block; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--signal);
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.nav.scrolled { border-bottom-color: var(--anthracite); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.nav .logo { --size: 38px; }
.nav .logo-icon { display: none; width: 44px; height: 44px; }
.nav-links a { white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 26px; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; }
.nav-links a { text-decoration: none; }
.nav-links a:not(.btn):hover { color: var(--pink); }
.nav-links a[aria-current=page] { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.nav-links .btn { padding: 11px 16px; font-size: 18px; text-transform: none; letter-spacing: 0; }
@media (max-width: 640px) {
  .nav-links { gap: 16px; font-size: 13px; }
  .nav-links .hide-sm { display: none; }
  .nav .logo-word, .nav .logo-line { display: none; }
  .nav .logo-icon { display: block; }
}

/* ---------- Dark steel surfaces ---------- */
.dark { background: var(--anthracite); color: var(--signal); }
.dark .lead { color: #C9CCC8; }
.dark .eyebrow { color: var(--milk); }
.ribs { background: var(--ribs); }
.pink-edge { border-bottom: 10px solid var(--pink); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(56px, 9vw, 112px) 0 clamp(64px, 8vw, 100px); overflow: hidden; }
.hero h1 { margin-top: 18px; }
.hero .lead { margin-top: 24px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }

/* Pink edges: a hatch frame with corner castings */
.hatch {
  position: relative; padding: 16px;
  background:
    linear-gradient(var(--pink), var(--pink)) top left / 26px 26px no-repeat,
    linear-gradient(var(--pink), var(--pink)) top right / 26px 26px no-repeat,
    linear-gradient(var(--pink), var(--pink)) bottom left / 26px 26px no-repeat,
    linear-gradient(var(--pink), var(--pink)) bottom right / 26px 26px no-repeat;
}
.hatch > img { border: 6px solid var(--pink); }
.hero-photo { width: 100%; max-width: 420px; justify-self: end; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.hero-photo .sticker { position: absolute; left: -24px; bottom: 44px; font-size: 40px; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { max-width: 360px; margin: 10px auto 0; justify-self: center; }
  .hero-photo .sticker { left: -8px; font-size: 32px; }
}

/* ---------- Product line ticker ---------- */
.ticker { background: var(--signal); color: var(--anthracite); border-bottom: 2px solid var(--anthracite); overflow: hidden; padding: 16px 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 50s linear infinite; }
.ticker span { font-weight: 800; font-size: clamp(18px, 2.6vw, 26px); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 20px; white-space: nowrap; }
.ticker span::after { content: '·'; margin-left: 40px; color: var(--pink); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section { position: relative; }
.pad { padding: clamp(72px, 11vw, 136px) 0; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); margin-top: 44px; }
.card {
  position: relative; background: var(--panel); border-radius: var(--radius);
  padding: 28px 26px 26px; border-top: 6px solid var(--pink);
}
.card p { color: var(--ink-soft); font-size: 15.5px; margin-top: 10px; }
.card .label { color: var(--pink); display: block; margin-bottom: 10px; font-size: 13px; }
.card.darkcard { background: var(--anthracite); color: var(--signal); }
.card.darkcard p { color: #C9CCC8; }
.card.darkcard .label { color: var(--milk); }

/* What's in the hold */
.hold .card h3 { font-size: clamp(26px, 3vw, 34px); }
.hold-note { margin-top: 22px; font-size: 15px; color: var(--ink-soft); }

/* Founder / straight-talk note on steel */
.note {
  background: var(--signal); color: var(--anthracite); border-radius: var(--radius);
  border-left: 8px solid var(--pink);
  padding: clamp(26px, 5vw, 52px); margin-top: 40px; max-width: 760px;
}
.note p { font-size: clamp(17px, 1.8vw, 20px); margin-top: 16px; }
.note p:first-child { margin-top: 0; }
.note .sig { font-weight: 900; font-size: 24px; letter-spacing: -0.02em; color: var(--pink); margin-top: 26px; }

.status { list-style: none; display: grid; gap: 12px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.status li { background: rgba(236, 236, 231, 0.06); border: 2px solid var(--steel-rib); border-left: 6px solid var(--pink); border-radius: var(--radius); padding: 16px 18px; }
.status b { display: block; font-size: 18px; font-weight: 800; }
.status span { font-size: 15px; color: #C9CCC8; }

/* Big CTA */
.cta { text-align: center; }
.cta .eyebrow { justify-content: center; }
.cta .signup { margin: 34px auto 0; justify-content: center; }
.cta .form-done { margin-top: 30px; font-size: 22px; }

/* ---------- Footer ---------- */
.footer { background: var(--anthracite); color: var(--signal); padding: 64px 0 36px; border-top: 10px solid var(--pink); }
.footer .logo { --size: clamp(64px, 11vw, 120px); }
.footer .row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 48px; font-size: 14px; color: #C9CCC8; }
.footer nav { display: flex; gap: 22px; flex-wrap: wrap; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--milk); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Container scroll story (landlords) ---------- */
.story { position: relative; height: 480vh; }
.story-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: clamp(16px, 4vw, 56px);
  max-width: 1240px; margin: 0 auto; padding: 72px var(--gutter) 24px;
}
.scene { position: relative; width: 100%; }
.scene svg { width: 100%; height: auto; overflow: visible; }
.story-copy { position: relative; min-height: 300px; }
.story-step {
  position: absolute; inset: 0 0 auto 0;
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.story-step.active { opacity: 1; transform: none; pointer-events: auto; }
.story-step .num { font-weight: 700; color: var(--anthracite); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; }
.story-step h2 { font-size: clamp(32px, 4.6vw, 60px); margin-top: 10px; }
.story-step p { margin-top: 16px; color: var(--ink-soft); font-size: clamp(16px, 1.6vw, 19px); max-width: 440px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.swatch { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; background: var(--panel); border-radius: var(--radius); padding: 6px 12px 6px 6px; }
.swatch i { width: 30px; height: 30px; border-radius: 4px; background: var(--c, var(--pink)); }
.story-dots { display: flex; gap: 8px; margin-top: 340px; }
.story-dots i { width: 28px; height: 8px; border-radius: 2px; background: var(--rule); transition: background 0.3s ease, width 0.3s ease; }
.story-dots i.on { background: var(--pink); width: 48px; }

/* parts driven by --arrive, --hatch, --treats, --glow (0 → 1), set from site.js */
.story { --arrive: 0; --hatch: 0; --treats: 0; --glow: 0; }
/* lowered in from above, like it's coming off a crane */
#box { transform-box: view-box; transform-origin: 50% 0; transform: translateY(calc((1 - var(--arrive)) * -420px)); opacity: min(1, calc(var(--arrive) * 4)); }
#cable { transform-box: view-box; transform: translateY(calc((1 - var(--arrive)) * -420px)); opacity: calc(1 - var(--hatch) * 3); }
#flap { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(calc(1 - var(--hatch) * 1.45)); }
#flaplogo { opacity: calc(1 - var(--hatch) * 5); }
#interior { opacity: calc(var(--hatch) * 1.2); }
#lights circle { opacity: var(--glow); }
#glowfx { opacity: calc(var(--glow) * 0.8); }
.treat { transform-box: fill-box; transform-origin: 50% 100%; }
#t1 { transform: translateY(calc((1 - min(1, var(--treats) * 3)) * 70px)) scale(min(1, var(--treats) * 3)); }
#t2 { transform: translateY(calc((1 - clamp(0, var(--treats) * 3 - 0.6, 1)) * 70px)) scale(clamp(0, var(--treats) * 3 - 0.6, 1)); }
#t3 { transform: translateY(calc((1 - clamp(0, var(--treats) * 3 - 1.2, 1)) * 70px)) scale(clamp(0, var(--treats) * 3 - 1.2, 1)); }
#t4 { transform: translateY(calc((1 - clamp(0, var(--treats) * 3 - 1.8, 1)) * 70px)) scale(clamp(0, var(--treats) * 3 - 1.8, 1)); }
#pin { opacity: var(--glow); transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(calc((1 - var(--glow)) * -60px)); }
.floaty { animation: floaty 3.4s ease-in-out infinite; transform-box: fill-box; }
@keyframes floaty { 50% { translate: 0 -6px; } }
.scroll-hint { margin-top: 36px; font-weight: 700; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--milk); }

@media (max-width: 860px) {
  .story-stage { grid-template-columns: 1fr; align-content: center; gap: 8px; padding-top: 76px; }
  .story-copy { min-height: 250px; }
  .story-step p { font-size: 16px; }
  .story-dots { margin-top: 0; position: absolute; bottom: -14px; }
}

/* ---------- Landlords ---------- */
.spec { background: var(--panel); border-radius: var(--radius); border-top: 6px solid var(--pink); margin-top: 40px; overflow: hidden; }
.spec div { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 16px; padding: 18px 26px; border-top: 1px solid var(--rule); }
.spec div:first-child { border-top: 0; }
.spec dt { font-weight: 800; }
.spec dd { color: var(--ink-soft); }
@media (max-width: 600px) { .spec div { grid-template-columns: 1fr; gap: 4px; } }

.band { background: var(--panel); border-block: 2px solid var(--anthracite); }
.timeline { position: relative; margin-top: 50px; padding-left: 70px; --fill: 0; }
.timeline::before, .timeline::after { content: ''; position: absolute; left: 22px; top: 10px; bottom: 10px; width: 6px; border-radius: 2px; background: var(--rule); }
.timeline::after { background: var(--pink); bottom: auto; height: calc((100% - 20px) * var(--fill)); }
.step { position: relative; padding-bottom: 40px; }
.step:last-child { padding-bottom: 0; }
.step .n { position: absolute; left: -70px; top: -4px; width: 50px; height: 50px; z-index: 1; display: grid; place-items: center; border-radius: 4px; background: var(--anthracite); color: var(--signal); font-weight: 900; font-size: 20px; transition: background 0.3s ease; }
.step.lit .n { background: var(--pink); }
.step p { color: var(--ink-soft); margin-top: 8px; max-width: 620px; }

.faq details { border-bottom: 2px solid var(--anthracite); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-weight: 800; font-size: clamp(18px, 2vw, 21px); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex-shrink: 0; width: 36px; height: 36px; border-radius: 4px; display: grid; place-items: center; background: var(--anthracite); color: var(--signal); font-size: 22px; font-weight: 700; transition: transform 0.2s ease, background 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--pink); }
.faq details p { color: var(--ink-soft); padding-bottom: 22px; max-width: 760px; }

.enquiry { display: grid; gap: 16px; margin-top: 34px; text-align: left; }
.enquiry label { display: block; font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; color: var(--signal); }
.enquiry .btn { justify-self: start; }

/* ---------- Privacy ---------- */
.prose { background: var(--panel); border-radius: var(--radius); border-top: 6px solid var(--pink); padding: clamp(24px, 5vw, 48px); margin-top: 36px; color: var(--ink-soft); }
.prose h2 { font-size: 26px; color: var(--anthracite); margin: 36px 0 10px; }
.prose ul { padding-left: 22px; margin-top: 10px; }
.prose li { margin-top: 8px; }
.prose strong { color: var(--anthracite); }
.prose a { color: var(--anthracite); text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Reduced motion: show everything in its finished state ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .story { height: auto; --arrive: 1 !important; --hatch: 1 !important; --treats: 1 !important; --glow: 1 !important; }
  .story-stage { position: relative; height: auto; }
  .story-copy { min-height: 0; }
  .story-step { position: static; opacity: 1; transform: none; margin-bottom: 28px; }
  .story-dots { display: none; }
}