/* Come Along waitlist, v2. Screen 1 = the dusk sky. */
:root {
  /* Brand colours: change these to re-colour the whole page (sky + mist images are separate files) */
  --deep: #101a33;        /* night navy: dark buttons, icon squares */
  --deep-hover: #1e2c4f;
  --accent: #2f5aa0;      /* evening blue: icons, links, selected chips */
  --accent-soft: #e4ebf7;
  --accent-ink: #1f3f75;
  --glow: #c27848;
  --sun: #f2b53a;         /* the sun in the logo */
  --cocoa: #232222;       /* "How it will work" panel (charcoal; name kept so rules stay put) */
  --cream: #faf7f0;
  --ink: #241f1c;
  --linen: #efe7d8;
  --display: "Geist", system-ui, sans-serif; /* same font as brandviz.ai (Geist, open source) */
  --body: "Geist", system-ui, sans-serif;
  --gutter: clamp(20px, 6.5vw, 128px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #f3f0eb; color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 16px; background: var(--cream); color: var(--ink); border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }
/* focus ring: blue on light backgrounds, cream on the dark ones (sky, charcoal, navy) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hook :focus-visible, .how-panel :focus-visible, .nv :focus-visible, .enq-panel > .enq-cards > :focus-visible { outline-color: var(--cream); }
.enq-card :focus-visible { outline-color: var(--accent); }

/* ---------- Screen 1: the hook ---------- */
.hook {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the wide marquee must not stretch the column */
  grid-template-rows: auto 1fr auto;
  /* inset in an off-white frame with soft corners, like the BrandViz hero */
  --frame: clamp(8px, 1vw, 16px);
  margin: var(--frame);
  border-radius: clamp(16px, 1.6vw, 24px);
  min-height: calc(100vh - 2 * var(--frame));
  min-height: calc(100svh - 2 * var(--frame));
  padding: 0 var(--gutter);
  overflow: hidden;
  color: var(--cream);
  /* sky = still base + cloud layer (the clouds sail across when motion is allowed, see the motion section) */
  background: url("images/clouds-wide.webp") center / 100% 100% no-repeat, var(--deep) url("images/sky-base-wide.webp") center / cover no-repeat;
}
@media (orientation: portrait) and (max-width: 900px) {
  .hook { background-image: url("images/clouds-tall.webp"), url("images/sky-base-tall.webp"); }
}
/* Film grain over the sky, drawn at screen resolution so it stays fine at any size */
.hook::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
  opacity: .42;
}

/* Top bar */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: clamp(18px, 3vh, 32px); }
.brand { white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; color: var(--cream); font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em; text-decoration: none; }
.links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.links a { white-space: nowrap; color: var(--cream); font-weight: 700; font-size: 1rem; text-decoration: none; }
.links a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.links .bar-join { padding: 10px 16px; background: var(--cream); color: var(--deep); border-radius: 10px; }
.links .bar-join:hover { text-decoration: none; background: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(242, 181, 58, .55), 0 0 0 3px rgba(242, 181, 58, .35); }

/* Headline left, what-it-is right, credit line under the headline */
.hook-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-areas:
    "title what"
    "credit credit";
  column-gap: clamp(32px, 6vw, 120px);
  row-gap: clamp(20px, 3.5vh, 40px);
  align-content: center;
  align-items: end;
  padding-block: clamp(32px, 7vh, 96px);
}
.hook h1 {
  grid-area: title;
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(3.1rem, 7.4vw, 8.25rem);
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hook h1 span { display: block; }

.what { grid-area: what; align-self: center; max-inline-size: 30rem; }
.what p { margin: 0 0 28px; font-size: clamp(1.05rem, 1.25vw, 1.25rem); line-height: 1.5; color: rgba(250, 247, 240, .85); }

.join {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 7px 7px 7px 24px;
  background: var(--cream);
  color: var(--ink);
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  transition: background-color .15s var(--ease-out);
}
.join:hover { background: #fff; transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 34px -12px rgba(242, 181, 58, .6), 0 0 0 3px rgba(242, 181, 58, .35); }
.join-icon { display: grid; place-items: center; width: 44px; height: 44px; background: var(--deep); color: var(--cream); border-radius: 8px; transition: transform .2s var(--ease-out); }
.join:hover .join-icon { transform: translateY(2px); background: var(--sun); color: var(--deep); }
.join-icon { transition: transform .35s var(--ease-out), background-color .25s ease, color .25s ease; }

.ticks { color: rgba(250, 247, 240, .86); display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 18px 0 0; padding: 0; list-style: none; font-size: .98rem; }
.ticks li { display: inline-flex; align-items: center; gap: 8px; }

.credit { color: rgba(250, 247, 240, .93); grid-area: credit; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; font-size: 1rem; }
.credit span + span::before { content: ""; display: inline-block; width: 1px; height: 1.1em; margin: 0 16px; vertical-align: -.2em; background: currentColor; opacity: .55; }

/* The kinds of classes: the one moving thing on the page */
.kinds { padding-bottom: clamp(24px, 5vh, 56px); margin-inline: calc(var(--gutter) * -1); }
.kinds-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; padding-inline: var(--gutter); }
.kinds h2 { margin: 0; font-family: var(--body); font-weight: 500; font-size: 1rem; letter-spacing: .01em; text-align: center; text-shadow: 0 1px 12px rgba(16, 26, 51, .7), 0 0 2px rgba(16, 26, 51, .35); }

.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee ul { display: flex; flex-shrink: 0; gap: clamp(20px, 2.5vw, 40px); margin: 0; padding: 0 clamp(20px, 2.5vw, 40px); list-style: none; animation: drift 42s linear infinite; }
.marquee li { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 500; letter-spacing: -.02em; font-size: clamp(1.05rem, 1.55vw, 1.45rem); line-height: 1.2; white-space: nowrap; color: rgba(250, 247, 240, .78); }
.marquee li svg { flex: none; width: 1.05em; height: 1.05em; }
.marquee li::after { content: ""; width: 1.5px; height: .9em; margin-left: clamp(20px, 2.5vw, 40px); background: currentColor; opacity: .55; }
@keyframes drift { to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee ul { flex-shrink: 1; flex-wrap: wrap; justify-content: center; gap: 6px 28px; max-inline-size: 64rem; margin-inline: auto; animation: none; }
  .marquee ul[aria-hidden] { display: none; }
  .marquee li { font-size: clamp(1rem, 1.35vw, 1.2rem); }
  .marquee li::after { display: none; }
}

/* Phones and narrow tablets: stack */
@media (max-width: 860px) {
  .links a:not(.bar-join) { display: none; }
  .hook-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "what" "credit";
    align-content: center;
  }
  .hook-body { row-gap: 22px; padding-block: 20px 28px; }
  .what { align-self: start; }
  .what p { margin-bottom: 20px; font-size: 1.1rem; }
  .ticks { margin-top: 14px; gap: 2px 20px; }
  .credit { flex-direction: column; align-items: flex-start; gap: 0; font-size: .95rem; }
  .credit span + span::before { display: none; }
  .kinds h2 { font-size: 1rem; }
}
@media (max-width: 420px) {
  .hook { --gutter: 18px; }
  .brand { font-size: 1.15rem; gap: 7px; }
  .brand svg { width: 22px; height: 22px; }
  .links .bar-join { padding: 9px 11px; font-size: .9rem; }
  .join { width: 100%; justify-content: space-between; }
}

/* ---------- Screen 2: why it's needed (one white card on a warm grey page) ---------- */
.why { padding: clamp(16px, 4vw, 64px) clamp(12px, 4vw, 64px); background: #f3f0eb; }
.why-card { max-inline-size: 1240px; margin-inline: auto; padding: clamp(56px, 10vh, 140px) clamp(20px, 5vw, 72px) clamp(40px, 7vh, 96px); background: #fff; border-radius: 24px; text-align: center; }
.why h2 span { display: inline-block; }
.why h2 { margin: 0 auto; max-inline-size: 26ch; font-family: var(--display); font-weight: 500; font-size: clamp(2.1rem, 3.8vw, 3.5rem); line-height: 1.08; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.why-lead { margin: 22px auto 0; max-inline-size: 52ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.55; color: #4a423d; }
.why-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 7vh, 80px); text-align: left; }
.why-cols article { padding-bottom: 0; }
.why-cols .why-stat { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(3.4rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.05em; color: var(--accent); }
.why h3 { margin: 16px 0 10px; font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem, 2vw, 1.9rem); line-height: 1.15; letter-spacing: -.025em; color: var(--ink); }
.why-cols p strong { color: var(--ink); font-weight: 500; }
.why-cols p { margin: 0; font-size: 1rem; line-height: 1.6; color: #4a423d; max-inline-size: 38ch; }

/* Lower half of the card turns navy: problems on white above, fixes on navy below.
   It bleeds to the card's edges by cancelling the card's side and bottom padding. */
.nv { margin: clamp(28px, 4vh, 44px) calc(-1 * clamp(20px, 5vw, 72px)) calc(-1 * clamp(40px, 7vh, 96px)); padding: clamp(32px, 5vw, 56px) clamp(20px, 5vw, 72px) clamp(28px, 4vw, 40px); background: var(--deep); border-radius: 0 0 24px 24px; color: var(--cream); text-align: left; }
.nv-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.nv-row p { margin: 0; font-size: 1.1rem; line-height: 1.5; font-weight: 400; color: rgba(250, 247, 240, .82); }
.nv-row b { display: block; margin-bottom: 6px; color: var(--sun); font-size: .9rem; font-weight: 500; }
.nv-close { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; margin-top: clamp(32px, 5vh, 48px); padding-top: 26px; border-top: 1px solid rgba(250, 247, 240, .18); }
.nv-close p { margin: 0; max-inline-size: 30ch; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.25; letter-spacing: -.03em; font-weight: 500; }
.nv .why-btn { margin-top: 0; background: var(--cream); color: var(--deep); }
.nv .why-btn .join-icon { background: var(--deep); color: var(--cream); }
.nv .why-btn:hover { background: #fff; transform: translateY(-3px) scale(1.02); box-shadow: 0 0 0 3px rgba(242, 181, 58, .45), 0 14px 36px -8px rgba(242, 181, 58, .55); }
.nv .why-btn:hover .join-icon { background: var(--sun); color: var(--deep); transform: translateY(2px); }
.nv-src { margin: 26px 0 0; font-size: .82rem; line-height: 1.5; color: rgba(250, 247, 240, .7); text-align: center; text-wrap: balance; }
.nv-src a { color: inherit; }
.nv-src a:focus-visible, .nv .why-btn:focus-visible { outline-color: var(--cream); }
.why-btn { display: inline-flex; align-items: center; gap: 18px; margin-top: 6px; padding: 7px 7px 7px 24px; background: var(--deep); color: var(--cream); border-radius: 12px; font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.why-btn .join-icon { background: var(--cream); color: var(--deep); }
.why-btn:hover { background: var(--deep-hover); }
.why-btn:focus-visible, .why-source a:focus-visible { outline-color: var(--accent); }
.why-source { margin: 28px auto 0; max-inline-size: 96ch; text-wrap: balance; font-size: .85rem; line-height: 1.5; color: #6b625c; }
.why-source a { color: inherit; }

@media (max-width: 860px) {
  .why-cols, .nv-row { grid-template-columns: minmax(0, 1fr); }
  .why h3 { margin-top: 10px; }
}

/* ---------- How it will work: Bitely-style alternating steps with mini cards, on the cocoa panel ---------- */
.how { padding: 0 clamp(12px, 4vw, 64px); background: #f3f0eb; }
.how-head { max-inline-size: 64rem; margin: 0 auto; padding: clamp(24px, 6vh, 72px) 0 clamp(28px, 4vh, 48px); text-align: center; }
.how h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: 1.05; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.how-head p { margin: 14px auto 0; max-inline-size: 52ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.5; color: #3b332e; }
.how-panel { position: relative; isolation: isolate; overflow: hidden; max-inline-size: 1240px; margin-inline: auto; padding: clamp(32px, 5vw, 72px) clamp(20px, 5vw, 80px); background: radial-gradient(ellipse 75% 50% at 85% 105%, rgba(194, 120, 72, .48), transparent 70%), radial-gradient(ellipse 55% 38% at 5% -5%, rgba(194, 120, 72, .2), transparent 70%), var(--cocoa) url("images/panel-charcoal-wide.webp") center / cover no-repeat; /* a little apricot glow, like the sky's horizon */ border-radius: 24px; color: var(--cream); }
@media (orientation: portrait) and (max-width: 900px) { .how-panel { background-image: radial-gradient(ellipse 75% 50% at 85% 105%, rgba(194, 120, 72, .48), transparent 70%), radial-gradient(ellipse 55% 38% at 5% -5%, rgba(194, 120, 72, .2), transparent 70%), url("images/panel-charcoal-tall.webp"); } }
/* grain over the cocoa clouds */
.how-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 240px; mix-blend-mode: screen; opacity: .16; } /* light specks show on the dark charcoal */

.steps { margin: 0; padding: 0; list-style: none; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.row.r .row-text { order: 2; }
.row-text { max-inline-size: 30rem; }
.st-n { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 50%; font-weight: 700; font-size: 1rem; color: var(--cocoa); }
.n1, .n3 { background: #e9a46f; } .n2, .n4 { background: #a9c1ea; }
.row-text h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -.025em; }
.row.l h3 { color: #f2c6a0; } .row.r h3 { color: #c9d8f3; }
.row-text p { margin: 0; color: rgba(250, 247, 240, .82); font-size: 1.05rem; line-height: 1.55; }

.mini { overflow: hidden; background: #fff; border-radius: 14px; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6); color: var(--ink); }
.mini-bar { display: flex; gap: 6px; padding: 11px 14px; background: #f5f3f0; border-bottom: 1px solid #ece8e2; }
.mini-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d8d3cc; }
.mini-bar i:first-child { background: #e9a46f; } .mini-bar i:nth-child(2) { background: #a9c1ea; }
.mini-body { padding: 16px 20px 8px; }
.mini-body > b { display: block; margin-bottom: 6px; font-weight: 700; font-size: .98rem; }
.mini ul { margin: 0; padding: 0; list-style: none; }
.mini li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid #f0ece6; font-size: .92rem; }
.mini li:first-child { border-top: 0; }
.mini li.sub { padding: 14px 0 4px; border-top: 0; font-size: .74rem; font-weight: 700; color: #8a7f76; }
.mini li.sub + li { border-top: 0; }
.pill { flex: none; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.pill.ok { background: #e3f1e6; color: #1d5a33; }
.pill.info { background: var(--accent-soft); color: var(--accent-ink); }
.pill.warm { background: #fbe9da; color: #8a4b1c; }

.curve { height: clamp(40px, 5vw, 64px); margin: 4px 0; color: rgba(250, 247, 240, .35); }
.curve svg { display: block; width: 100%; height: 100%; }

@media (max-width: 860px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .row.r .row-text { order: 0; }
  .curve { height: 28px; }
  .curve svg { display: none; }
  /* phones: cards shown, but compact */
  .mini-bar { padding: 8px 12px; }
  .mini-body { padding: 12px 14px 4px; }
  .mini li { padding: 8px 0; font-size: .86rem; }
  .pill { font-size: .7rem; padding: 3px 8px; }
}

.how-note { display: flex; align-items: center; justify-content: center; gap: 10px; max-inline-size: 64rem; margin: 28px auto 0; color: #3b332e; font-size: 1.1rem; line-height: 1.5; text-align: center; }
.how-note svg { flex: none; color: var(--cocoa); }
.how-note b { color: var(--ink); font-weight: 500; }
.how-hosts { max-inline-size: 60ch; margin: 14px auto 0; padding-bottom: 8px; text-align: center; color: #3b332e; line-height: 1.55; }
.how-hosts a { color: var(--accent); font-weight: 700; }

@media (max-width: 560px) {
  .how-note { align-items: flex-start; text-align: left; }
}

/* ---------- Screen 3: two enquiry cards on the dusk sky ---------- */
.enq { padding: 0 clamp(12px, 4vw, 64px) clamp(16px, 4vw, 64px); background: #f3f0eb; }
/* faint line separating How it will work from the forms */
.enq::before { content: ""; display: block; max-inline-size: 1240px; height: 1px; margin: clamp(40px, 6vh, 72px) auto 0; background: rgba(36, 31, 28, .14); }
.enq-panel { position: relative; isolation: isolate; max-inline-size: 1240px; margin-inline: auto; padding: clamp(40px, 8vh, 104px) clamp(16px, 5vw, 72px); border-radius: 24px; overflow: hidden; background: url("images/clouds-wide.webp") center / 100% 100% no-repeat, var(--deep) url("images/sky-base-wide.webp") center 78% / cover no-repeat; /* same dusk sky as screen 1, lower part, so the page closes where it opened */ }
@media (orientation: portrait) and (max-width: 900px) { .enq-panel { background-image: url("images/clouds-tall.webp"), url("images/sky-base-tall.webp"); background-position: center, center 70%; } }
.enq-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 240px; mix-blend-mode: overlay; opacity: .6; }
.enq-head { max-inline-size: 64rem; margin: 0 auto; padding: clamp(24px, 6vh, 72px) 0 clamp(32px, 5vh, 56px); text-align: center; }
.enq h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: 1.05; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.enq-head p { margin: 16px auto 0; max-inline-size: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.5; color: #3b332e; }

.enq-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); align-items: stretch; }
.enq-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 40px); background: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(16, 26, 51, .06), 0 18px 40px -16px rgba(16, 26, 51, .22); }
.enq-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #ece7df; color: var(--accent); }
.enq h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 2.3vw, 2.1rem); line-height: 1.1; letter-spacing: -.025em; color: var(--ink); }
.enq-sub { margin: 0; color: #5c534d; line-height: 1.5; }
.enq fieldset { margin: 0; padding: 0; border: 0; }
.enq-label, .enq-field > label { font-weight: 700; font-size: .98rem; }
.enq-field { display: grid; gap: 6px; }
.enq-opt { font-weight: 400; color: #6b625c; }
.enq-field input, .enq-field select { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid #cfc6bb; border-radius: 10px; background: #fff; font: inherit; color: var(--ink); }
.enq-field input::placeholder { color: #7a716a; opacity: 1; }
.enq-field input:focus-visible, .enq-field select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.enq-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.enq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.enq-chips label { position: relative; }
.enq-chips input { position: absolute; inset: 0; opacity: 0; }
.enq-chips span { display: inline-block; padding: 9px 14px; background: #f3f0eb; border: 1.5px solid transparent; border-radius: 10px; font-size: .95rem; cursor: pointer; }
.enq-chips input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.enq-chips input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.enq-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; color: #4a423d; }
.enq-consent input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); }
.enq-consent a { color: inherit; }
.enq-send { align-self: flex-start; margin-top: auto; min-height: 50px; padding: 12px 22px; border: 0; border-radius: 10px; background: var(--deep); color: var(--cream); font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.enq-send:hover { background: var(--deep-hover); }
.enq-send:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.trap { display: none; } /* spam trap: bots fill it from the HTML; display:none keeps browser autofill out of it */

@media (max-width: 860px) {
  .enq-cards, .enq-two { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Footer (quiet line, like the main site) ---------- */
.foot { max-inline-size: 1240px; margin: clamp(32px, 6vh, 64px) auto 0; padding: 28px clamp(12px, 4vw, 0px) 36px; border-top: 1px solid rgba(36, 31, 28, .12); color: #5c534d; font-size: .95rem; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.foot-meta { margin-top: 18px; }
.foot p { margin: 0; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; text-decoration: none; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot-links a { color: #5c534d; text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-contact a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(92, 83, 77, .4); }
.foot-contact a:hover { color: var(--ink); }
.foot-contact { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot :focus-visible { outline-color: var(--accent); }
/* placeholders still to fill in: highlighted so they can't be missed */
.todo { padding: 1px 6px; background: #fff3b0; color: #6b4e00; border-radius: 4px; font-size: .9em; }
@media (max-width: 860px) {
  .foot-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Motion (only under html.motion: never with reduced motion, never without JS) ----------
   Rule from the AI-tells research: no blanket fade-up on scroll. One authored entrance on load,
   then motion only where it shows meaning: lines that connect steps, checks that tick off, answers under problems. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tick { from { opacity: 0; transform: translateX(8px) scale(.94); } to { opacity: 1; transform: none; } }

/* 1. Page load: headline line by line, then the rest (unhurried: about 2.3s in all) */
.motion .hook h1 span { animation: rise 1.05s var(--ease-out) .15s both; }
.motion .hook h1 span:nth-child(2) { animation-delay: .35s; }
.motion .hook h1 span:nth-child(3) { animation-delay: .55s; }
.motion .hook .bar { animation: settle .9s var(--ease-out) .95s both; }
.motion .hook .what { animation: settle .9s var(--ease-out) .95s both; }
.motion .hook .credit { animation: settle .9s var(--ease-out) 1.15s both; }
.motion .hook .kinds { animation: settle 1.1s var(--ease-out) 1.35s both; }

/* 2. Steps: dashed lines draw along their own curve with scroll (JS sets the mask's dash offset) */
.motion .curve .draw { stroke-dashoffset: 1; transition: stroke-dashoffset .35s cubic-bezier(.25, .8, .35, 1); }
/* each card's status pills tick in, one row after another */
.motion .row .pill { opacity: 0; }
.motion .row.in .pill { animation: tick .45s var(--ease-out) both; }
.motion .row.in li:nth-child(2) .pill { animation-delay: .18s; }
.motion .row.in li:nth-child(3) .pill { animation-delay: .36s; }
.motion .row.in li:nth-child(4) .pill { animation-delay: .54s; }

/* 3. Problems and fixes: each answer arrives under its problem, sun first */
.motion .nv-row p { opacity: 0; }
.motion .nv-row.in p { animation: settle .55s var(--ease-out) both; }
.motion .nv-row.in p:nth-child(2) { animation-delay: .2s; }
.motion .nv-row.in p:nth-child(3) { animation-delay: .4s; }

/* ---------- Premium details: interaction feedback and two quiet ambient touches ---------- */
/* Interaction feedback (applies to everyone; colour/transform transitions are not "motion" for reduced-motion purposes, but kept short) */
.join, .why-btn, .enq-send, .links .bar-join, .mini-join { transition: background-color .25s var(--ease-out), transform .2s var(--ease-out), box-shadow .25s var(--ease-out); }
.join:active, .why-btn:active, .enq-send:active, .links .bar-join:active, .mini-join:active { transform: scale(.97); }
.join-icon, .why-btn .join-icon { transition: transform .35s var(--ease-out), background-color .25s ease, color .25s ease; }
.why-btn:hover .join-icon { transform: translateY(2px); }
.enq-send:hover { box-shadow: 0 8px 20px -10px rgba(16, 26, 51, .6); }
.enq-field input, .enq-field select { transition: border-color .2s ease, box-shadow .2s ease; }
.enq-field input:hover, .enq-field select:hover { border-color: #a99f93; }
.enq-chips span { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--ease-out); }
.enq-chips label:hover span { background: #ebe6de; }
.enq-chips input:checked + span { transform: scale(1.03); }
.links a:not(.bar-join), .foot-links a, .mini-links a:not(.mini-join) { transition: color .2s ease, opacity .2s ease; }
/* the sun in the logo turns a little on hover */
.brand svg, .foot-brand svg, .mini-brand svg { transition: transform .8s var(--ease-out); }
.brand:hover svg, .foot-brand:hover svg, .mini-brand:hover svg { transform: rotate(45deg); }

/* Slim bar that follows you after the hero */
.minibar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px clamp(16px, 4vw, 64px); background: rgba(250, 247, 240, .96); border-bottom: 1px solid rgba(36, 31, 28, .1); transform: translateY(-110%); visibility: hidden; transition: transform .45s var(--ease-out), visibility 0s linear .45s; }
.minibar.show { transform: none; visibility: visible; transition: transform .45s var(--ease-out), visibility 0s; }
.mini-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.mini-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.mini-links a { color: #4a423d; font-weight: 500; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.mini-links a:not(.mini-join):hover { color: var(--ink); }
.mini-join { padding: 8px 14px; background: var(--deep); color: var(--cream) !important; border-radius: 9px; }
.mini-join:hover { background: var(--deep-hover); }
#why, #how, #join, #host { scroll-margin-top: 72px; }
@media (max-width: 860px) { .mini-links a:not(.mini-join) { display: none; } }
@media (prefers-reduced-motion: reduce) { .minibar, .minibar.show { transition: none; } }

/* Ambient: the clouds sail steadily across the sky, looping seamlessly (the cloud tile wraps sideways).
   The base sky stays still; a strip two skies wide slides left by exactly one sky, then repeats. */
@keyframes sail { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.motion .hook { background-image: url("images/sky-base-wide.webp"); }
.motion .enq-panel { background-image: url("images/sky-base-wide.webp"); background-position: center 78%; }
.motion .hook::after, .motion .enq-panel::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 200%; z-index: -2; pointer-events: none; background: url("images/clouds-wide.webp") 0 0 / 50% 100% repeat-x; animation: sail 80s linear infinite; will-change: transform; }
.motion .enq-panel::after { animation-duration: 95s; }
@media (orientation: portrait) and (max-width: 900px) {
  .motion .hook { background-image: url("images/sky-base-tall.webp"); }
  .motion .enq-panel { background-image: url("images/sky-base-tall.webp"); background-position: center 70%; }
  .motion .hook::after, .motion .enq-panel::after { background-image: url("images/clouds-tall.webp"); animation-duration: 45s; }
}

/* (Step numbers stay still: animating them over the grainy panel stuttered while scrolling) */

/* hero ticks on one line where there's room (they need ~525px at this size) */
@media (min-width: 1400px) { .ticks { flex-wrap: nowrap; width: max-content; gap: 8px 18px; font-size: .92rem; } .ticks li { white-space: nowrap; } }

/* the sun in the logo is yellow wherever the wordmark appears */
.brand svg, .mini-brand svg, .foot-brand svg { color: var(--sun); }

/* ---------- Form states: errors, sending, thank-you ---------- */
.enq-err { margin: 4px 0 0; color: #a3241c; font-size: .9rem; font-weight: 500; }
.enq-field input[aria-invalid="true"], .enq-field select[aria-invalid="true"] { border-color: #a3241c; }
.enq-fail { margin: 0; padding: 10px 12px; background: #fbe9e7; color: #8a1f17; border-radius: 8px; font-size: .95rem; }
.enq-send[disabled] { opacity: .7; cursor: progress; }
.enq-done { display: grid; align-content: center; justify-items: start; gap: 12px; min-height: 320px; }
.enq-done[hidden] { display: none; }
.enq-done:focus { outline: none; }
.enq-done:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.done-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #e3f1e6; color: #1d5a33; }
.enq-done h3 { margin: 4px 0 0; }
.enq-done p { margin: 0; color: #4a423d; font-size: 1.05rem; line-height: 1.55; max-inline-size: 36ch; }
.share-ask { margin-top: 10px !important; padding-top: 18px; border-top: 1px solid #ece7df; font-size: .98rem !important; color: #5c534d !important; }
.share-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 11px 20px; border: 1.5px solid var(--deep); border-radius: 10px; background: #fff; color: var(--deep); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .2s var(--ease-out); }
.share-btn:hover { background: var(--deep); color: var(--cream); }
.share-btn:active { transform: scale(.97); }
.share-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.share-status { min-height: 1.4em; margin: 0 !important; font-size: .92rem !important; color: #1d5a33 !important; font-weight: 500; }
.motion .enq-done:not([hidden]) { animation: settle .5s var(--ease-out) both; }

/* ---------- Questions ---------- */
.faq { max-inline-size: 820px; margin: 0 auto; padding: clamp(48px, 9vh, 104px) clamp(16px, 4vw, 0px) 0; }
.faq h2 { margin: 0 0 clamp(20px, 3vh, 32px); font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.04em; color: var(--ink); text-align: center; }
.faq-list { border-top: 1px solid rgba(36, 31, 28, .14); }
.faq-group + .faq-group { margin-top: clamp(36px, 6vh, 56px); }
.faq-group h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 500; color: var(--accent); }
.faq details { border-bottom: 1px solid rgba(36, 31, 28, .14); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; cursor: pointer; list-style: none; font-weight: 500; font-size: clamp(1.1rem, 1.5vw, 1.25rem); letter-spacing: -.015em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.faq-icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--accent); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .3s var(--ease-out); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq details p { margin: 0; padding: 0 48px 24px 4px; color: #4a423d; font-size: 1.05rem; line-height: 1.6; max-inline-size: 64ch; }
.faq details p a { color: var(--accent); }
.motion .faq details[open] p { animation: settle .35s var(--ease-out) both; }

/* ---------- Plain pages: privacy notice, thank-you ---------- */
.doc-page { background: #f3f0eb; }
.doc-bar { max-inline-size: 760px; margin: 0 auto; padding: 28px 20px 0; }
.doc { max-inline-size: 760px; margin: 0 auto; padding: 32px 20px 72px; color: #3b332e; line-height: 1.65; }
.doc h1 { margin: 0 0 12px; font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.2rem); letter-spacing: -.04em; line-height: 1.05; color: var(--ink); }
.doc h2 { margin: 32px 0 8px; font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.doc p, .doc li { font-size: 1.05rem; }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: 6px; }
.doc a { color: var(--accent); }
.doc-back { margin-top: 40px; font-weight: 500; }

/* ---------- Stubs for screens 2 and 3 (preview only) ---------- */
.stub { display: grid; place-items: center; min-height: 60vh; padding: 48px var(--gutter); border-top: 1px solid var(--linen); text-align: center; color: #5c534d; }
.stub p { max-inline-size: 36ch; margin: 0; }