/* Idea 6 · The board, all the way down.
   One near-black-green page. Sections vary by layout, height, lighter green surfaces,
   one cream panel (the offers), a colour-coded accent each (--acc), and two big statement sections.
   Text: cream #F3EFE2 on #16201B (about 14.5:1); muted #BEC4B8 (about 9:1); coral labels about 4.9:1. */
:root {
  --c-base: #16201B; --c-paper: #1E2B25; --c-brand: #2F4A3F; --c-on-brand: #F3EFE2;
  --c-ink: #F3EFE2; --c-muted: #BEC4B8; --c-accent: #F2C94C; --c-accent-2: #E07A5F; --c-accent-3: #9DBFAF;
  --c-dark: #0F1713; --c-on-dark: #F3EFE2; --c-tint-1: #253530; --c-tint-2: #F3EFE2; --c-tint-3: #2A3B34;
  --font-head: "Familjen Grotesk", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;   /* baked from the tweak panel, 27 Oct */
  --h-scale: 1; --body-size: 18px; --space: 1; --radius: 14px;
  --vh: 1vh;
  --pad: calc(var(--space) * clamp(72px, 10vw, 136px));
  --acc: var(--c-accent);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* strong ease-out for UI */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* strong ease-in-out for on-screen movement */
  --dur-press: 160ms;  --dur-ui: 200ms;  --dur-hover: 150ms;
}

body { font-family: var(--font-body); font-size: var(--body-size); line-height: 1.6; color: var(--c-ink); background: var(--c-base); }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
h1, h2, h3 { font-family: var(--font-head); margin: 0; font-weight: 700; letter-spacing: -0.025em; }
p { margin: 0; }
section { overflow: hidden; }
.content { position: relative; z-index: 1; }

.eyebrow { font-weight: 700; font-size: .78em; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); margin-bottom: 16px; }
.h-section { font-size: calc(var(--h-scale) * clamp(1.6rem, 2.7vw, 2.4rem)); line-height: 1.12; }
.draft { background: rgba(255,255,255,.12); color: #FFC4D2; }

/* A highlight that draws in under one key word per section, in that section's colour */
mark.hl { color: inherit; background: none; background-image: linear-gradient(color-mix(in srgb, var(--acc) 45%, transparent), color-mix(in srgb, var(--acc) 45%, transparent)); background-repeat: no-repeat; background-size: 100% 36%; background-position: 0 88%; padding: 0 .06em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 1.5px solid transparent; transition: transform var(--dur-press) var(--ease-out); }
.btn svg { width: 18px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: .9em; }
.btn-lg { min-height: 56px; padding: 0 30px; font-size: 1.06em; }
.btn-yellow { background: var(--c-accent); color: #16201B; }
.btn-ghost, .btn-line { border-color: currentColor; color: inherit; }

.tag { display: inline-block; font: 700 .72em/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; padding: 8px 11px; border-radius: 4px; background: var(--c-accent); color: #16201B; transform: rotate(-3deg); }
.tag-after { background: var(--c-accent-3); transform: rotate(2deg); }

/* Decorative shapes placed in a section */
/* Every shape on the page shares one scale (--u), so tubes, grain and shadows match; --s sizes one on purpose. */
:root { --u: .78px; }
/* A shape is either fully inside its section (clamped here, on every screen width) or bleeds off an edge on purpose. */
.shape.deco { position: absolute; left: min(var(--x), calc(100% - var(--vbw) * var(--u) * var(--s, 1) - 6px)); top: var(--y); z-index: 0; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--c-base) 92%, transparent); backdrop-filter: blur(8px); }
.nav-in { display: flex; align-items: center; gap: 30px; height: 70px; position: relative; }
.logo { font: 700 22px/1 var(--font-head); letter-spacing: -0.03em; text-decoration: none; }
.nav-links { display: flex; gap: 28px; margin-left: auto; font-weight: 500; }
.nav-links a { text-decoration: none; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; }
.nav-end { display: flex; align-items: center; gap: 6px; }
header .nav-links.is-open { background: var(--c-paper); color: var(--c-ink); }
@media (max-width: 760px) { .nav-end { margin-left: auto; } }

/* ---------- 1. Hero ----------
   The JUNIKO wordmark nearly edge to edge. Clay shapes may sit close to any letter and tuck behind its edge,
   never on top of it: a large pinwheel behind the J, a medium star behind the K's arm, a small flower
   dotting the I (clear of it).
   Everything in the picture is sized in em of the wordmark, so it scales as one piece.
   Under it: headline on the left, the booking button on the right, centred against it.
   Placed shapes (hero-composer.html) sit directly in the hero, in front of or behind the wordmark and text. */
.hero { isolation: isolate; }
.mark-stage, .hero-body { position: relative; z-index: 2; }
.hero > .shape.placed { position: absolute; z-index: 4; }
.hero > .shape.placed.behind { z-index: 1; }
.hero { padding-top: clamp(18px, 2.5vw, 36px); }
.mark-stage { display: flex; justify-content: center; padding: .2em 0 .1em; font: 700 calc(var(--h-scale) * min(29.5vw, 455px))/0.84 var(--font-head); }
.mark { position: relative; display: inline-block; letter-spacing: -0.055em; isolation: isolate; }
/* Hidden for the first instant so the tumble starts from nothing; shown at once with reduce motion, and after 3 s whatever happens. */
.js .mark { visibility: hidden; animation: mark-fallback 0s 3s forwards; }
.js.is-still .mark { visibility: visible; animation: none; }
@keyframes mark-fallback { to { visibility: visible; } }
.wordmark { position: relative; z-index: 1; margin: 0; display: flex; align-items: flex-end; white-space: nowrap; font: inherit; }
.wl { display: inline-block; }
.mark .shape { position: absolute; width: calc(var(--vbw) * var(--s, 1) * 0.0068em); z-index: 2; }
/* in front: large and medium, tucked behind letter edges (z 0 = behind the letters) */
.mark .m-pin  { --s: 1.12; left: -.2em; top: -.16em; z-index: 0; }   /* large, behind the J */
.mark .m-star { --s: .5;  left: 1.99em; top: -.12em; z-index: 0; }   /* medium, behind the K's upper arm */
.mark .m-flower { --s: .28; left: 1.5em; top: -.2em; }               /* small, the dot on the I, clear of it */

.hero-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 80px); align-items: center; padding-top: clamp(10px, 1.6vw, 22px); }
.h-hero { font-size: calc(var(--h-scale) * clamp(1.5rem, 2.4vw, 2.2rem)); line-height: 1.14; letter-spacing: -0.025em; max-width: 19em; }
.lede { font-size: 1.02em; color: var(--c-muted); max-width: 32em; margin-top: 12px; }
.hero-act { max-width: 26em; }   /* the one button sits centred against the headline and line */
/* text and buttons sit in a narrower, centred band under the wordmark */
.hero .hero-body { width: min(1040px, 80%); justify-content: space-between; }   /* inset at every width from tablet up */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.proof { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: .9em; color: var(--c-muted); }
.proof-photo { flex: none; width: 44px; height: 44px; border-radius: 50%; border-width: 1.5px; color: var(--c-accent); }
.proof-photo { overflow: hidden; border: 1.5px solid var(--c-accent); }
.proof-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 18%; transform: scale(1.5); transform-origin: 50% 22%; }
/* space between the text and the showreel */
.hero-body { padding-bottom: clamp(28px, 4vw, 56px); }

/* Phone: the wordmark fills the width and the text stacks (headline, line, buttons, proof). */
@media (max-width: 760px) {
  .mark-stage { font-size: calc(var(--h-scale) * 29.5vw); padding: .3em 0 .12em; }
  .mark .m-pin { left: -.1em; top: -.2em; --s: 1; }
  .hero-body { grid-template-columns: 1fr; gap: 22px; }
  .hero .hero-body { width: min(1200px, 100% - 40px); }   /* phones keep the full width */
  .hero-act { max-width: none; }
  .hero-act .btn { flex: 1 1 auto; }   /* one full-width button on phones */
}

/* Showreel peeking up */
.reel { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; max-height: 640px; width: 100%; border-radius: var(--radius) var(--radius) 0 0; background: var(--c-paper); overflow: hidden; color: var(--c-ink); text-decoration: none; }
.reel .shape { position: absolute; width: calc(var(--vbw) * var(--u) * var(--s, 1)); }
/* the quarter circle deliberately tucked into the reel's bottom right corner */
.reel-q { --s: 1.5; right: -1.5%; bottom: -3%; }
.reel-z { left: 5%; top: 9%; }
.play { position: relative; z-index: 2; width: 84px; height: 84px; border-radius: 50%; background: var(--c-ink); color: #16201B; display: grid; place-items: center; transition: transform var(--dur-ui) var(--ease-out); }
.play svg { width: 30px; height: 30px; margin-left: 4px; }

/* ---------- 2. The problem and the fix (variation A) ----------
   One large statement, the short line, the three costs as quiet coral pills, then the three fixes
   side by side, each owning a colour. No shapes: the coloured numbers do the work. */
.problem { padding: clamp(72px, 9vw, 128px) 0; }
.pf-heading { font: 700 calc(var(--h-scale) * clamp(2.1rem, 5vw, 4.4rem))/1.04 var(--font-head); letter-spacing: -0.045em; max-width: 15em; margin: 0; }
.pf-line { color: var(--c-muted); font-size: 1.06em; max-width: 34em; margin-top: 22px; }
.pf-costs { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pf-costs li { padding: 9px 16px; border-radius: 999px; border: 1.5px solid rgba(224,122,95,.45); color: #F0B4A4; font-size: .95em; }
.pf-fix { margin-top: clamp(44px, 5vw, 72px); }
.pf-fix-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.pf-fix-head .eyebrow { margin-bottom: 16px; }
.pf-dots { --s: 1; flex: none; margin-bottom: 10px; }
.pf-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid rgba(243,239,226,.16); }
.pf-steps li { padding: 30px 28px 10px 0; display: grid; gap: 18px; align-content: start; }
.pf-steps li + li { padding-left: 28px; border-left: 1.5px solid rgba(243,239,226,.16); }
.pf-num { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; font: 700 1.2em/1 var(--font-head); background: var(--cc); color: #16201B; }
.pf-t { font-size: clamp(1.1em, 1.45vw, 1.32em); line-height: 1.45; }
/* the bold title always stays on one line */
.pf-t b { display: block; white-space: nowrap; color: var(--cc); font: 700 calc(var(--h-scale) * clamp(1.45rem, 2.2vw, 2.05rem))/1.15 var(--font-head); letter-spacing: -0.025em; margin-bottom: 8px; }

/* ---------- 3. Meet Megan (variation C) ----------
   Words first, set larger like a spoken quote; a tall arched portrait on the right with a yellow quarter
   circle tucked behind it and a coral star at its corner; a sage squiggle under the text. */
.megan { padding: clamp(72px, 8vw, 112px) 0; }
.mg-grid { display: grid; grid-template-columns: 1fr 360px; gap: clamp(40px, 7vw, 112px); align-items: center; }
.mg-p { font: 500 calc(var(--h-scale) * clamp(1.3rem, 2vw, 1.75rem))/1.4 var(--font-head); letter-spacing: -0.015em; max-width: 26em; margin: 0; }
.mg-s { display: inline; }
.mg-photo { position: relative; margin: 0; }
.mg-frame { position: relative; z-index: 1; aspect-ratio: 4 / 5; border-radius: 180px 180px var(--radius) var(--radius); overflow: hidden; background: #2a332e; }
.mg-frame img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; }
.megan .shape { position: absolute; z-index: 2; }
.mg-star { --s: .8; right: -30px; top: -34px; }
.mg-squig { position: static !important; display: block; --s: 1.2; margin-top: 36px; }

/* ---------- 4. Prices (variation A): one cream panel, two tiers ----------
   The three offers on top, then "Not ready to commit?" with the two small starters, then one quiet link. */
.offers { position: relative; overflow: hidden; padding: var(--pad) 0; }
.offers .content { position: relative; z-index: 1; }
.cream-panel { --c-ink-on: #16201B; background: #F3EFE2; color: #16201B; border-radius: calc(var(--radius) * 1.6); padding: clamp(28px, 4.5vw, 64px); }
.cream-panel .eyebrow { color: #7A5C0A; }
.p-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 36px; }
.p-h { font: 700 calc(var(--h-scale) * clamp(1.6rem, 2.7vw, 2.4rem))/1.12 var(--font-head); letter-spacing: -0.025em; margin: 0; max-width: 18em; }
.vat { margin: 0; font-size: .88em; color: #4F5A54; }
.boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.box { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px 26px; border: 1.5px solid rgba(22,32,27,.18); border-radius: var(--radius); background: #FBF8EF; }
.box h3 { font-size: calc(var(--h-scale) * 1.28rem); }
.box .price { font: 700 calc(var(--h-scale) * 2rem)/1 var(--font-head); letter-spacing: -0.03em; }
.box .price b { font-weight: inherit; font-variant-numeric: tabular-nums; }
.box .price small { font-size: .45em; font-weight: 500; letter-spacing: 0; margin-right: 2px; }
.box .price span { font-size: .45em; font-weight: 500; letter-spacing: 0; }
.box .desc, .box .fine { margin: 0; }
.box .desc { font-size: .97em; }
.box .fine { font-size: .82em; opacity: .9; }
.box .btn { margin-top: auto; align-self: flex-start; }
.box-rec { background: #16201B; color: #F3EFE2; border-color: #16201B; }
.rec { position: absolute; top: -13px; left: 22px; font: 700 .7em/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; background: var(--c-accent); color: #16201B; padding: 7px 10px; border-radius: 4px; }
.tier { margin-top: 36px; }
.tier-label { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.tier-label .rule { flex: 1; border-top: 1.5px dashed rgba(22,32,27,.25); transform-origin: left center; }
.nr-label { margin: 0; font: 700 .78em/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #7A5C0A; }
.tier-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.st { background: #ECE5D1; border-radius: var(--radius); padding: 20px 22px; }
.st h4 { margin: 0 0 6px; font: 700 1.08em/1.25 var(--font-head); letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.st h4 b { font-size: 1.1em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st p { margin: 0; font-size: .93em; color: #3f4a44; line-height: 1.5; }
/* one quiet link for both starters; the underline is drawn as a background so it can grow in */
.nr-link { display: inline-block; margin-top: 18px; padding-bottom: 4px; font: 700 .95em/1.3 var(--font-body); color: #7A5C0A; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / var(--line, 100%) 1.5px no-repeat; }
.nr-link:hover { color: #16201B; }
.offers .shape { position: absolute; z-index: 0; }
.of-star { --s: .9; right: 2%; top: 30px; }

/* ---------- 6. How it works (variation A): one line, four ticks ----------
   On the page's own dark green. Four rings on one yellow line, each with a tick: "you approve each one", shown.
   Phones: the line runs down the left, one short piece between each pair of rings. */
.process { position: relative; overflow: hidden; padding: calc(var(--pad) * .7) 0 var(--pad); }
.process .eyebrow { width: fit-content; }   /* so the pinwheel can sit beside it */
.process .content { position: relative; z-index: 1; }
.hw-h { margin: 0; max-width: 16em; }
.hw-tlw { position: relative; margin-top: 52px; }
.hw-tl { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.hw-line { position: absolute; left: 22px; right: calc((100% - 84px) / 4 - 22px); top: 21px; height: 3px; border-radius: 2px; background: var(--c-accent); transform-origin: left center; }
.hw-tl li { position: relative; }
.hw-node { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-base); border: 3px solid var(--c-accent); margin-bottom: 18px; }
.hw-node svg { width: 22px; fill: none; stroke: var(--c-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hw-seg { display: none; }
.hw-k { display: block; font: 700 .95em/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 8px; }
.hw-tl h3 { margin: 0 0 6px; font: 700 1.15em/1.25 var(--font-head); letter-spacing: -0.01em; }
.hw-tl p { margin: 0; color: var(--c-muted); font-size: .97em; line-height: 1.55; }
.hw-promise { display: flex; align-items: center; gap: 12px; margin: 44px 0 0; font-weight: 600; font-size: 1.05em; }
.hw-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c-accent-2); }
.process .shape { position: absolute; z-index: 0; }
.hw-pin { --s: 1; right: 3%; top: 56px; }

/* ---------- 7. FAQ (variation B): two plain columns of questions ----------
   Trust and AI on the left; videos, changes and timing on the right. A plus that turns into a minus.
   A cream and sage double arch, tilted, in the top corner. On phones the columns become one list. */
.faq { position: relative; overflow: hidden; padding: calc(var(--pad) * .7) 0 var(--pad); }
.faq .content { position: relative; z-index: 1; }
.faq-h { width: fit-content; margin: 0 0 28px; }
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
details { border-top: 1.5px solid rgba(243,239,226,.14); }
details:last-child { border-bottom: 1.5px solid rgba(243,239,226,.14); }
summary { cursor: pointer; list-style: none; position: relative; padding: 20px 48px 20px 0; font: 600 1.1em/1.35 var(--font-head); letter-spacing: -0.01em; }
summary::-webkit-details-marker { display: none; }
details p { margin: 0; padding: 0 48px 24px 0; color: var(--c-muted); line-height: 1.7; }
.faq-col details:first-child { border-top: 0; }
.faq-col details:first-child summary { padding-top: 6px; }
.pm { position: absolute; right: 4px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; border: 1.5px solid var(--acc); transition: background-color var(--dur-ui) ease; }
.faq-col details:first-child .pm { margin-top: -20px; }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: var(--acc); border-radius: 1px; transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) ease; }
.pm::after { transform: rotate(90deg); }
details[open] .pm { background: var(--acc); }
details[open] .pm::before, details[open] .pm::after { background: #16201B; }
details[open] .pm::after { transform: rotate(0deg); }
.faq .shape { position: absolute; z-index: 0; }
.faq-arch { --s: .9; right: 2.5%; top: 34px; }

/* ---------- 8. Final call (variation A): big and centred, on the page's own dark green ----------
   The question large, the line under it, one big yellow button. A coral flower top right and a coral
   quarter circle near the button, bookending the hero. */
.final { position: relative; overflow: hidden; padding: calc(var(--pad) * 1.1) 0 40px; text-align: center; }   /* little space under the button, so it stays in view above the footer */
.final .content { position: relative; z-index: 1; }
.final-in { display: grid; justify-items: center; gap: 26px; }
.h-final .nb { white-space: nowrap; }   /* "get stuck?" stays together, so the question breaks after "customers" */
.h-final { margin: 0; font-size: calc(var(--h-scale) * clamp(2.2rem, 7.7vw, 7.4rem)); line-height: 1.02; letter-spacing: -0.045em; max-width: none; }   /* fills the full page width, like the sections above */
.fc-line { margin: 0; font-size: clamp(1.15em, 1.6vw, 1.35em); line-height: 1.55; color: var(--c-muted); max-width: 40em; }
.fc-cta { position: relative; display: inline-grid; margin-top: 4px; }
.fc-btn { position: relative; overflow: hidden; min-height: 58px; padding: 0 32px; font-size: 1.08em; z-index: 1; }
.fc-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; }
.fc-ring { position: absolute; inset: 0; border-radius: 999px; border: 2px solid var(--c-accent); opacity: 0; pointer-events: none; }
/* hover (mouse only): the button lifts, glows softly, and a shine sweeps across it, echoing its entrance */
.fc-btn { transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-ui) ease; }
.fc-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-134%) skewX(-18deg); pointer-events: none; }
@keyframes fc-sweep { from { transform: translateX(-134%) skewX(-18deg); } to { transform: translateX(400%) skewX(-18deg); } }
.final .shape { position: absolute; z-index: 0; }
.fc-flower { --s: 1.1; right: 3%; top: 40px; }
.fc-quarter { --s: 1.3; left: 6%; bottom: 40px; }   /* level with the button */

/* ---------- 9. Footer: its own colour, a card that slides up over the final call to action ----------
   Coral with dark green text by default; cream is the other choice in the tweak panel (Footer colour).
   The giant JUNIKO is tone on tone: a slightly darker shade of the footer colour. */
.footer { --foot-bg: #F3EFE2; --foot-ink: #16201B; --foot-word: #E4DDC8; --foot-muted: #4F5A53; --foot-swoosh: var(--c-accent);   /* yellow, like the nav button */
  position: relative; z-index: 2; container-type: inline-size; overflow: hidden;
  padding: clamp(40px, 4vw, 56px) 0 22px; border-radius: 56px 56px 0 0;
  background: var(--foot-bg); color: var(--foot-ink); font-size: .95em; }
html[data-footer="coral"] .footer { --foot-bg: #E07A5F; --foot-word: #D26C51; --foot-muted: #2B1E19; }
.foot-top { display: grid; grid-template-columns: 1fr auto; gap: 32px 64px; align-items: start; }
.foot-line { margin: 0; font: 700 clamp(28px, 2.8vw, 40px)/1.1 var(--font-head); letter-spacing: -0.025em; }
.foot-nav { display: grid; grid-template-columns: auto auto; gap: 10px 56px; padding-top: 6px; }
.foot-links, .foot-contact { display: grid; gap: 10px; align-content: start; justify-items: start; }   /* links only as wide as their words, so the underline fits */
.foot-links, .foot-contact { position: relative; z-index: 1; }   /* above the giant JUNIKO, which tucks up close enough to cover the last underline */
.footer a { position: relative; color: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
/* on hover a hand-drawn underline swooshes in over the plain one */
.footer a:not(.foot-word)::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -7px; height: 8px; background: var(--foot-swoosh);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.5C18 2.5 34 6.5 52 4S84 2 99 4.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.5C18 2.5 34 6.5 52 4S84 2 99 4.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-hover) var(--ease-out); pointer-events: none; }
.footer a:not(.foot-word):focus-visible { text-decoration-color: transparent; }
.footer a:not(.foot-word):focus-visible::after { clip-path: inset(0 0 0 0); }
/* JUNIKO fills the footer's width, edge gutter to edge gutter */
.foot-wrap { overflow: clip; }   /* the footer slides up inside this; clip keeps the page from growing */
.foot-word { display: block; width: fit-content; white-space: nowrap; font: 700 calc((100cqw - 40px) * .3555)/1.02 var(--font-head);   /* tall line box: the J has a tail below the line */
  /* full width, unless the screen is too short: then it shrinks so the whole footer fits under the final
     "Book a 20-minute call" button (482px = nav bar, button and its space, and the rest of the footer) */
  font-size: min(calc((100cqw - 40px) * .3555), calc((var(--vh) * 100 - 482px) / .9));
  margin: calc(clamp(8px, 2vw, 24px) - .12em) auto 0;   /* tucks up into the empty space above the capitals */ letter-spacing: -0.055em; color: var(--foot-word) !important; text-decoration: none !important; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 18px; color: var(--foot-muted); font-size: .9em; }
.copy { margin: 0; }
.foot-bottom a { font-weight: 400; }
/* Reduce motion: nothing moves, but colour changes still fade gently so you can see what happened. */
@media (prefers-reduced-motion: reduce) {
  .fc-btn:hover { transform: none !important; }
  .fc-btn:hover::after { animation: none !important; }
  .pm, .pm::before, .pm::after { transition: background-color var(--dur-ui) ease !important; }
  .footer a:not(.foot-word)::after { clip-path: inset(0 0 0 0) !important; opacity: 0; transition: opacity var(--dur-hover) ease !important; }
  .footer a:not(.foot-word):focus-visible::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .footer a:not(.foot-word):hover::after { opacity: 1; }
}
/* Hover effects only where there is a real mouse: on phones a tap would leave them stuck on. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .reel:hover .play { transform: scale(1.06); }
  summary:hover .pm { background: color-mix(in srgb, var(--acc) 25%, transparent); }
  details[open] summary:hover .pm { background: var(--acc); }
  .footer a:not(.foot-word):hover { text-decoration-color: transparent; }
  .footer a:not(.foot-word):hover::after { clip-path: inset(0 0 0 0); }
  .fc-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(242, 201, 76, .28); }
  .fc-btn:hover::after { animation: fc-sweep 700ms var(--ease-out); }
}
.btn:active { transform: scale(0.97); }   /* a small press-in while the finger or mouse is down */
/* one soft pulse on the Monthly button, started by main.js; it uses the separate `scale` property, so it never fights the hover lift */
.btn.is-pulsing { animation: btn-pulse 500ms ease-in-out 1; }
@keyframes btn-pulse { 50% { scale: 1.08; } }

@media (max-width: 900px) {
  .hero-row { grid-template-columns: 1fr; }
  .faq-arch { display: none; }
  .of-star { display: none; }
  /* the three offers stay side by side down to tablet width, just a little tighter */
  .boxes { gap: 10px; }
  .box { padding: 24px 16px 22px; }
  .cream-panel { padding: 28px 18px; }
  .hw-tl { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .hw-line, .hw-pin { display: none; }
  .hide-sm { display: none !important; }
}
/* Phones: the three offers stack in the same order as on laptop; the three fixes stack too; Meet Megan puts the portrait first */
@media (max-width: 760px) {
  .footer { border-radius: 40px 40px 0 0; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-nav { gap: 10px 40px; padding-top: 0; }
  .faq-cols { grid-template-columns: 1fr; gap: 0; }
  .faq-col + .faq-col details:first-child { border-top: 1.5px solid rgba(243,239,226,.14); }
  .faq-col + .faq-col details:first-child summary { padding-top: 20px; }
  .faq-col + .faq-col details:first-child .pm { margin-top: -13px; }
  .faq-col:first-child details:last-child { border-bottom: 0; }
  summary { padding-right: 44px; font-size: 1.04em; }
  details p { padding-right: 0; }
  .mg-grid { grid-template-columns: 1fr; gap: 44px; }
  .mg-photo { order: -1; max-width: 300px; }
  .mg-star { --s: .6; right: 4px; top: -26px; }
  .pf-steps { grid-template-columns: 1fr; }
  .pf-steps li, .pf-steps li + li { padding: 22px 0; border-left: 0; grid-template-columns: 52px 1fr; gap: 12px; }
  .pf-steps li + li { border-top: 1.5px solid rgba(243,239,226,.16); }
}
@media (max-width: 680px) {
  .fc-cta, .fc-btn { width: 100%; }
  .fc-flower { --s: .8; right: 14px; top: 12px; }
  .fc-quarter { --s: .7; left: 14px; top: 12px; bottom: auto; }   /* phones: top left, opposite the flower; the button is full width */
  .hw-tl { grid-template-columns: 1fr; gap: 30px; }
  .hw-tl li { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; }
  .hw-node { grid-column: 1; grid-row: 1 / 4; margin: 0; }
  .hw-seg { display: block; position: absolute; left: 20.5px; top: 44px; bottom: -30px; width: 3px; background: var(--c-accent); transform-origin: top center; }
  .boxes, .tier-row { grid-template-columns: 1fr; }
  .boxes { gap: 22px; }   /* room for the Recommended tag above Monthly */
  .p-head { margin-bottom: 26px; }
}
@media (max-width: 560px) {
  .cta-row .btn { flex: 1 1 auto; }
  :root { --u: .56px; }
  .reel-q { display: none; }   /* on a phone it would touch the placeholder label */
  .bigtype { font-size: calc(var(--h-scale) * 17vw); }
  .bt-line:nth-child(2) { padding-left: 0; }
  .wm-frame { padding: 8% 6% 12%; }
}

/* Phone menu: slides down from the bar (200ms) instead of popping on and off. */
@media (max-width: 760px) {
  header .nav-links, header .nav-links:not(.is-open) {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    padding: 12px 20px 20px; background: var(--c-paper); color: var(--c-ink);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
    opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
  }
  header .nav-links.is-open {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility 0s;
  }
  header .nav-links a { padding: 10px 0; }
}
/* With reduce motion: the menu still fades, but does not move. */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  header .nav-links, header .nav-links:not(.is-open) { transform: none !important; transition: opacity var(--dur-hover) ease, visibility 0s linear var(--dur-hover) !important; }
  header .nav-links.is-open { transition: opacity var(--dur-hover) ease, visibility 0s !important; }
}

/* Review tool: the "Phone view" button, next to the Tweaks button (never ships). Not needed on a real phone. */
.phone-view { position: fixed; right: 124px; bottom: 16px; z-index: 9998; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: #111; color: #fff; font: 600 13px/1 system-ui, sans-serif; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.phone-view:hover, .phone-view:focus-visible { background: #2F4A3F; }
@media (max-width: 760px) { .phone-view { display: none; } }

/* ==================== Round 4: polish (27 Oct 2026) ====================
   Every change below sits behind a tweak panel switch (the data-* names on <html>), so before and after
   can be compared. Switches: stones, trail, family (shapes), text, spacing, grain, herotext. */

/* ---------- Text levels (switch: Text levels) ----------
   Three fixed levels on each surface: headlines 100%, body about 80%, small print about 60%.
   Each is a solid colour mixed from the headline colour into the surface, checked for at least 4.5:1:
   dark board 14.5 / 9.7 / 6.0; cream panel 14.5 / 8.1 / 5.0 (small print at 65%: 60% would be 4.2);
   coral footer 5.7 / 5.0 / 4.6 (only near-full strength passes on coral, so its levels sit at 100 / 90 / 85%). */
:root {
  --t-hi: #F3EFE2; --t-mid: #C7C6BA; --t-lo: #9B9C92;
  --t-hi-light: #16201B; --t-mid-light: #424943; --t-lo-light: #636861;
  --t-hi-coral: #16201B; --t-mid-coral: #2A2922; --t-lo-coral: #342E25;
}
html[data-text="fixed"] .lede, html[data-text="fixed"] .pf-line, html[data-text="fixed"] .pf-t,
html[data-text="fixed"] .pf-costs li, html[data-text="fixed"] .hw-tl p, html[data-text="fixed"] details p,
html[data-text="fixed"] .fc-line, html[data-text="fixed"] .box-rec .desc { color: var(--t-mid); }
html[data-text="fixed"] .box-rec .fine { color: var(--t-lo); opacity: 1; }
html[data-text="fixed"] .cream-panel { color: var(--t-hi-light); }
html[data-text="fixed"] .box:not(.box-rec) .desc, html[data-text="fixed"] .st p { color: var(--t-mid-light); }
html[data-text="fixed"] .vat, html[data-text="fixed"] .box:not(.box-rec) .fine { color: var(--t-lo-light); opacity: 1; }
html[data-text="fixed"] .footer { --foot-ink: var(--t-hi-light); --foot-muted: var(--t-lo-light); }
html[data-text="fixed"][data-footer="coral"] .footer { --foot-ink: var(--t-hi-coral); --foot-muted: var(--t-lo-coral); }

/* ---------- Section spacing (switch: Section spacing) ----------
   One step, --sp, above and below every body section, so every gap between sections is the same (2 × --sp:
   160px on a laptop, 112px on a phone). The final call is the one deliberate exception: twice the room above
   it, because it is the last ask. The slider "Section spacing" still scales it. */
:root { --sp: calc(var(--space) * clamp(56px, 5.6vw, 80px)); --offers-pt: var(--pad); --offers-pb: var(--pad); }
html[data-spacing="even"] { --offers-pt: var(--sp); --offers-pb: var(--sp); }
html[data-spacing="even"] .problem, html[data-spacing="even"] .megan, html[data-spacing="even"] .offers,
html[data-spacing="even"] .process, html[data-spacing="even"] .faq { padding-top: var(--sp); padding-bottom: var(--sp); }
html[data-spacing="even"] .final { padding-top: calc(var(--sp) * 2); }

/* ---------- Stepping stones (switch: Stepping stones) ----------
   The method's three stones (yellow, coral, sage, as in the "How I fix it" corner) as the page's motif:
   a small stone before each section label, and stones as the markers wherever the page lists things.
   Small and quiet on purpose: noticed on the second look. */
html[data-stones="on"] .eyebrow::before, html[data-stones="on"] .nr-label::before {
  content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .8em; border-radius: 50%;
  background: var(--stone, var(--acc)); vertical-align: .08em; }
.cream-panel { --stone: var(--c-accent); }
html[data-stones="on"] .pf-costs li { display: inline-flex; align-items: center; gap: 9px; }
html[data-stones="on"] .pf-costs li::before, html[data-stones="on"] .st h4 span::before {
  content: ""; flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--stone); }
.pf-costs li:nth-child(1), .st:nth-child(1) { --stone: var(--c-accent); }
.pf-costs li:nth-child(2), .st:nth-child(2) { --stone: var(--c-accent-2); }
.pf-costs li:nth-child(3) { --stone: var(--c-accent-3); }
html[data-stones="on"] .st h4 span::before { margin-right: 10px; vertical-align: .12em; }
/* an open question gets a sage stone in the margin beside it */
summary { --sum-pt: 20px; }
.faq-col details:first-child summary { --sum-pt: 6px; }
html[data-stones="on"] summary::before {
  content: ""; position: absolute; left: -20px; top: calc(var(--sum-pt) + .675em - 4px); width: 8px; height: 8px; border-radius: 50%;
  background: var(--acc); opacity: 0; transform: scale(.6); transition: opacity var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out); }
html[data-stones="on"] details[open] summary::before { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .faq-col + .faq-col details:first-child summary { --sum-pt: 20px; }
  html[data-stones="on"] summary::before { left: -10px; width: 6px; height: 6px; top: calc(var(--sum-pt) + .675em - 3px); }
}
@media (prefers-reduced-motion: reduce) { html[data-stones="on"] summary::before { transform: none; transition: opacity var(--dur-ui) ease; } }

/* The trail (switch: Trail): one stone per section down the left margin, from the hero to the final call.
   A stone fills with its section's colour once you have scrolled to that section (main.js). It appears once
   you start reading and leaves as the footer arrives. The same on phones and laptops; nothing to hover. */
.trail { position: fixed; z-index: 30; left: max(5px, calc((100vw - 1200px) / 4 - 4px)); top: 50%; transform: translateY(-50%);
  display: grid; gap: 14px; margin: 0; padding: 0; opacity: 0; transition: opacity 400ms ease; pointer-events: none; }
.trail.is-on { opacity: 1; }
html[data-trail="off"] .trail { display: none; }
.trail::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; margin-left: -.5px; background: rgba(243,239,226,.14); }
.trail i { position: relative; display: block; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--sc) 60%, transparent); background: var(--c-base);
  transition: background-color 300ms ease, border-color 300ms ease; }
.trail i.is-past { background: var(--sc); border-color: var(--sc); }
@media (max-width: 760px) { .trail { gap: 12px; } .trail i { width: 6px; height: 6px; border-width: 1px; } }

/* ---------- Shapes: connected (switch: Shapes) ----------
   The body shapes as one family with the hero. Each section has a pair, one larger and one smaller, one tucked
   partly behind something and one in front. Each sits beside its section's key idea, uses that section's colour
   plus one of the hero's (yellow or sage), and the shapes at the section edges carry over into the next section.
   "Current" shows the earlier set. The hard rule still holds: main.js moves or hides any shape that would touch text. */
html[data-family="connected"] .shape[data-family="current"], html[data-family="current"] .shape[data-family="connected"] { display: none !important; }
/* shapes may cross a section's top or bottom edge, never its sides */
html[data-family="connected"] main > section:not(.hero) { overflow-x: clip; overflow-y: visible; }

/* 2. The problem: a coral and sage arch tucked behind the showreel's bottom corner, pointing down at the problem;
      the three stones beside "How I fix it" are its small partner, in front */
.pf-arch { position: absolute; z-index: -1; --s: 1.15; left: calc(max(20px, 50% - 600px) - 44px); top: -50px; }
/* 3. Meet Megan: a coral star in front of the portrait's corner (small);
      the squiggle carries on into Prices, tucked behind the top of the cream panel */
html[data-family="connected"] .megan .mg-star { z-index: 2; }
.megan .mg-squig2 { position: absolute; z-index: 0; --s: 1.2; left: calc(max(20px, 50% - 600px) + 40px); bottom: calc(-1 * var(--offers-pt) - 18px); }
/* 4. Prices: the star sits on the corner of the Recommended plan, in front */
.offers .of-star2 { position: absolute; z-index: 2; --s: .55; right: 10px; top: -34px; }
/* 6. How it works: the hero's own pinwheel (yellow and sage, same turn) peeks up from behind the bottom of the
      prices panel as you scroll in; a small sage flower closes the heading, beside "approve each one" */
.process .hw-pin2 { --s: 1.15; right: calc(max(20px, 50% - 600px) + 4%); top: calc(-1 * var(--offers-pb) - 24px); }
html[data-family="connected"] .hw-h { position: relative; width: fit-content; }
/* 7. FAQ: a small sage and yellow arch beside "Questions", in front; a large sage quarter circle tucked off the
      page edge leads down into the final call */
html[data-family="connected"] .faq-h { position: relative; }
.faq .faq-arch2 { --s: .6; right: -80px; top: -12px; z-index: 1; }
.faq .faq-quarter { --s: 1.5; right: -36px; bottom: -96px; }
@media (max-width: 1100px) { .faq .faq-quarter { --s: 1.1; } }   /* tablets: smaller, so it clears both the last question and the final heading */
/* 8. Final call: the flower beside "stuck" (placed by main.js), in front; a yellow quarter circle (yellow, not coral, so it stands out against the coral footer) tucked behind the
      footer's top edge, so the footer covers it as it slides up */
.final .fc-flower2 { --s: .75; z-index: 1; }
.final .fc-quarter2 { --s: 1.3; left: calc(max(20px, 50% - 600px) + 2%); bottom: -64px; }

@media (max-width: 760px) {
  .pf-arch { --s: .9; left: auto; right: 12px; top: -26px; }
  .megan .mg-squig2 { --s: 1; left: 36px; }
  .offers .of-star2 { top: -22px; }   /* the star is smaller here, so it comes down to sit on the card's corner */
  .process .hw-pin2 { --s: .75; right: 18px; top: calc(-1 * var(--offers-pb) - 16px); }
  .faq .faq-arch2 { --s: .55; right: -60px; top: -8px; }
  .faq .faq-quarter { --s: 1.1; right: -14px; bottom: -50px; }
  .final .fc-flower2 { --s: .55; }
  .final .fc-quarter2 { --s: .7; left: 14px; bottom: -46px; }
}

/* ---------- Grain (switch: Grain, off by default) ----------
   A fine, still grain on the dark board only, about 3% strength. Drawn as vector noise, so the browser renders it
   at the screen's own resolution and it stays crisp on retina screens. It sits behind everything: the cream panel,
   the footer and the shapes stay flat. */
html[data-grain="on"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .03;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px; }

/* ---------- Hero text (switch: Hero text) ----------
   Inset (current): the headline, line and buttons sit in a narrower band centred under the wordmark.
   Aligned: they start on the same line as the JUNIKO logo in the nav and the sections below. */
html[data-herotext="aligned"] .hero .hero-body { width: min(1200px, 100% - 40px); }

/* ==================== How it works as stepping stones (switch: How it works) ====================
   A sage clay stream runs under the four steps, like water, and each step has a clay stone sitting on it
   (yellow, coral, cream, yellow, so they stand out from the sage). Laptops: the stream runs across and each
   stone sits where it passes. Tablets and phones: the steps stack and the stream runs upright down the left.
   main.js sizes the stream and sets each stone on it. The STEP labels are a size up from the body text.
   "Ticks (current)" keeps the yellow line and tick circles. Design: design/section-6-stones.html, A. */
html:not([data-steps="stones"]) .process .hw-stream, html:not([data-steps="stones"]) .process .hw-stream-v,
html:not([data-steps="stones"]) .process .hw-stone { display: none; }
html[data-steps="stones"] .hw-line, html[data-steps="stones"] .hw-node, html[data-steps="stones"] .hw-seg { display: none !important; }
html[data-steps="stones"] .hw-k { font-size: 1.15em; margin-bottom: 10px; }
html[data-steps="stones"] .hw-tl li { padding-top: 140px; }
.process .hw-stream { left: -8px; right: -8px; top: 0; width: auto; }
.process .hw-stream-v { display: none; left: 0; top: 0; }
.process .hw-stone { --s: .82; left: 0; top: 30px; z-index: 1; }
@media (max-width: 900px) {
  html[data-steps="stones"] .hw-tl { grid-template-columns: 1fr; gap: 34px; }
  html[data-steps="stones"] .hw-tl li { display: block; padding: 0 0 0 84px; min-height: 70px; }
  .process .hw-stone { --s: .56; top: -4px; }
  .process .hw-stream { display: none; }
  html[data-steps="stones"] .process .hw-stream-v { display: block; }
}
@media (max-width: 560px) { .process .hw-stone { --s: .78; } }   /* the same stone size on a phone's smaller scale */

/* ==================== Going live (29 Oct 2026) ====================
   The showreel is parked until the real reel is made: the placeholder is hidden, and so is the arch in
   section 2 that tucks behind its corner. To bring it back, delete these two lines.
   The red section numbers were for reviewing only; they stay in the code (data-num) but are never shown.
   Sections: 1 Hero, 2 Problem and fix, 3 Meet Megan, 4 Prices, (5 parked), 6 How it works, 7 FAQ, 8 Final call, 9 Footer. */
.hero .reel-row { display: none; }
.problem .pf-arch { display: none !important; }
.num-label { display: none !important; }

/* No single word left alone on a last line (29 Oct 2026): headings even out their lines, paragraphs avoid a lone last word. Whole site, privacy page included. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, summary, dd { text-wrap: pretty; }