/* ==========================================================================
   carnalridge primary school · website proposal
   styles.css

   contents
   1. design tokens (the school's badge colours live here)
   2. reset and base
   3. typography helpers
   4. layout: cards on the yellow page
   5. ui: buttons, pills, arrow buttons, highlights, quotes
   6. decorative shapes (all css or inline svg, no images)
   7. photo cards, screenshots, bubbles
   8. chrome: progress bar, skip link, dot nav, download pdf button
   9. password gate
   10. sections, in page order
   11. reveal and motion
   12. responsive
   13. reduced motion
   14. print (the "download pdf" button prints this stylesheet's view)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. design tokens
   -------------------------------------------------------------------------- */
:root {
  /* carnalridge primary school brand colours, taken from the school badge.
     these four are the only "real" colours in the system below, everything
     else in this file references them. swap these four hex values and the
     whole site updates. */
  --school-pale:  #A7D0F0;   /* light blue */
  --school-blue:  #3B9BDB;   /* blue */
  --school-navy:  #13316E;   /* dark blue */
  --school-white: #FFFFFF;   /* white */

  /* page and cards */
  --yellow:      var(--school-pale);   /* page background */
  --cream:       var(--school-white);  /* card background */
  --cream-deep:  var(--school-pale);   /* inputs, subtle panels on cream */
  --ink:         var(--school-navy);   /* main text colour */
  --ink-soft:    rgba(19, 49, 110, .68);   /* secondary text on cream */
  --line:        rgba(19, 49, 110, .18);

  /* accent palette: every card, pill and tile pulls one of these three
     brand tones (dark blue, blue, light blue). some names share a value,
     since the badge only gives us three usable tones plus white, and that
     repetition is what makes the site read as consistently "on brand"
     rather than a rainbow of unrelated colours. */
  --green:       var(--school-navy);
  --purple:      var(--school-blue);
  --pink:        var(--school-pale);
  --coral:       var(--school-blue);
  --blue:        var(--school-navy);
  --yellow-hl:   var(--school-pale);   /* text highlighter */

  /* text colour that sits on each accent (checked for contrast).
     white on the mid blue only clears ~3:1, too low for small pill text,
     so --on-purple/--on-coral use navy instead (~4:1) */
  --on-green:    var(--school-white);
  --on-purple:   var(--school-navy);
  --on-pink:     var(--school-navy);
  --on-coral:    var(--school-navy);
  --on-blue:     var(--school-white);
  --on-yellow:   var(--school-navy);
  --on-ink:      var(--school-white);

  /* type */
  --font-head:   "Bricolage Grotesque", "Arial Black", Impact, sans-serif;
  --font-mono:   "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-ui:     "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* shape and spacing */
  --radius-card: 18px;
  --radius-tile: 26px;
  --radius-pill: 999px;
  --gap:         14px;      /* the strip of yellow between cards */
  --pad:         clamp(28px, 6vw, 80px);
  --max:         1180px;

  /* motion */
  --ease-out:    cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur:         .8s;

  --shape-scale: 1;
}


/* --------------------------------------------------------------------------
   2. reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
figure { margin: 0; }
dl, dt, dd { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* visible, consistent focus everywhere */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}


/* --------------------------------------------------------------------------
   3. typography helpers
   -------------------------------------------------------------------------- */
.mono  { font-family: var(--font-mono); }
.small { font-size: .85rem; }

.h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.7rem);
  margin-bottom: .55em;
  text-wrap: balance;
}
.h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 2.2rem 0 1rem;
}
.h2--flanked {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  flex-wrap: wrap;
  justify-content: center;
}

.eyebrow {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.lead {
  font-size: clamp(.95rem, 1.3vw, 1.02rem);
  line-height: 1.7;
  max-width: 62ch;
}
.section--centre .lead { margin-inline: auto; }

.prose,
.prose p {
  font-family: var(--font-mono);
  font-size: .98rem;
  line-height: 1.75;
  max-width: 64ch;
}
.prose p + p { margin-top: 1.1em; }
.prose--centre { margin-inline: auto; text-align: left; }
.prose.small { font-size: .9rem; }

.caption {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .95rem;
  text-align: center;
  margin-top: 14px;
}

.note {
  font-size: .85rem;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 32px auto 0;
  line-height: 1.7;
}


/* --------------------------------------------------------------------------
   4. layout: cards on the yellow page
   -------------------------------------------------------------------------- */
.proposal {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap);
  max-width: calc(var(--max) + var(--gap) * 2);
  margin: 0 auto;
  outline: none;
}
.proposal[hidden] { display: none; }

.section-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.card {
  position: relative;
  isolation: isolate;
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: var(--pad);
  scroll-margin-top: 20px;
}

/* faint paper grain on every cream card */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: .07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.card--dark::before { opacity: .12; mix-blend-mode: screen; }

/* clipped layer for shapes that bleed off the card edges */
.card__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}

.section--centre { text-align: center; }
.section--slim { padding-block: clamp(36px, 5vw, 56px); }

.card--dark {
  background: var(--ink);
  color: var(--on-ink);
}


/* --------------------------------------------------------------------------
   5. ui: buttons, pills, arrow buttons, highlights, quotes
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  background: var(--yellow-hl);
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: scale(1.04) translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn__arrow { width: 18px; height: 18px; transition: transform .35s var(--ease-spring); }
.btn:hover .btn__arrow { transform: translate(3px, -3px); }
.btn--sm { padding: 11px 18px; font-size: .9rem; }
.btn--lg { padding: 18px 30px; font-size: 1.1rem; }

.btn--pink   { background: var(--pink);   color: var(--on-pink); }
.btn--green  { background: var(--green);  color: var(--on-green); }
.btn--purple { background: var(--purple); color: var(--on-purple); }
.btn--coral  { background: var(--coral);  color: var(--on-coral); }
.btn--yellow { background: var(--yellow-hl); color: var(--on-yellow); }

.pill {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.1;
  text-decoration: none;
  letter-spacing: .01em;
  background: var(--yellow-hl);
  color: var(--ink);
  transition: transform .35s var(--ease-spring);
}
a.pill:hover { transform: scale(1.06); }
.pill--purple { background: var(--purple); color: var(--on-purple); }
.pill--green  { background: var(--green);  color: var(--on-green); }
.pill--pink   { background: var(--pink);   color: var(--on-pink); }
.pill--blue   { background: var(--blue);   color: var(--on-blue); }
.pill--coral  { background: var(--coral);  color: var(--on-coral); }
.pill--black  { background: var(--ink);    color: var(--on-ink); }
.pill--cream  { background: var(--cream);  color: var(--ink); }

/* small solid pill marker beside headings and list points */
.pill-dot {
  display: inline-block;
  width: 34px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--pink);
  flex: none;
}
.pill-dot--pink   { background: var(--pink); }
.pill-dot--green  { background: var(--green); }
.pill-dot--purple { background: var(--purple); }
.pill-dot--blue   { background: var(--blue); }

/* circular arrow button */
.arrow-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  flex: none;
  transition: transform .35s var(--ease-spring), background .3s;
}
.arrow-btn svg { width: 20px; height: 20px; transition: transform .35s var(--ease-spring); }
.arrow-btn--sm { width: 36px; height: 36px; }
.arrow-btn--sm svg { width: 16px; height: 16px; }
.arrow-btn--ghost { border-color: currentColor; color: inherit; }

/* text highlighter, sweeps in from the left when on screen */
.hl {
  color: inherit;
  background: linear-gradient(var(--yellow-hl), var(--yellow-hl)) no-repeat 0 0 / 0% 100%;
  padding: .06em .18em;
  margin: 0 -.05em;
  border-radius: .2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1.1s var(--ease-out);
}
.hl.is-on { background-size: 100% 100%; }

/* a whole word in a coloured pill inside a heading */
.hl-pill {
  display: inline-block;
  padding: .02em .22em .06em;
  border-radius: .3em;
  background: var(--coral);
  color: var(--on-coral);
  line-height: 1;
}
.hl-pill--yellow { background: var(--yellow-hl); color: var(--on-yellow); }

/* big bold quotation marks */
.quote {
  position: absolute;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(5rem, 9vw, 8rem);
  line-height: .55;
  color: var(--ink);
  pointer-events: none;
  z-index: 2;
  user-select: none;
}
.quote--black { color: var(--ink); }
.quote--coral { color: var(--coral); }
.quote--sm { font-size: clamp(3.5rem, 6vw, 5rem); }
.quote--corner { top: 18px; left: 22px; }
.quote--corner-right { top: 22px; right: 26px; }
.quote--inline { position: static; font-size: 1.2em; line-height: .5; transform: translateY(.18em); }


/* --------------------------------------------------------------------------
   6. decorative shapes
   -------------------------------------------------------------------------- */
.shape {
  position: absolute;
  width: var(--s, 80px);
  height: var(--s, 80px);
  pointer-events: none;
  z-index: 2;
  transform: translateY(var(--py, 0px)) scale(var(--shape-scale));
  will-change: transform;
}
.shape svg { width: 100%; height: 100%; overflow: visible; }
.card__clip .shape { z-index: 0; }

.shape--purple { color: var(--purple); }
.shape--yellow { color: var(--yellow-hl); }
.shape--pink   { color: var(--pink); }
.shape--green  { color: var(--green); }
.shape--blue   { color: var(--blue); }

/* starburst sitting inside a heading line */
.shape--inline-star {
  position: static;
  display: inline-block;
  --s: .7em;
  transform: none;
}

/* half circle bleeding off a card edge (used inside .card__clip) */
.half-circle {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--blue);
}
.half-circle--blue  { background: var(--blue); }
.half-circle--green { background: var(--green); }
.half-circle--pink  { background: var(--pink); }

/* small pixel square clusters */
.pixels {
  width: 14px;
  height: 14px;
  background: var(--green);
  box-shadow: 18px 18px 0 0 var(--green), 36px 0 0 0 var(--green);
}
.pixels--blue {
  background: var(--blue);
  box-shadow: 18px -18px 0 0 var(--blue), 18px 18px 0 0 var(--blue);
}

/* looping outline ellipses that draw themselves in */
.ellipses { color: var(--ink); }
.ellipses ellipse {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--ease-out);
}
.ellipses ellipse:nth-child(2) { transition-delay: .25s; }
.ellipses ellipse:nth-child(3) { transition-delay: .5s; }
.ellipses.is-on ellipse { stroke-dashoffset: 0; }

/* idle motion */
.spin         { animation: spin 26s linear infinite; }
.spin-reverse { animation: spin 32s linear infinite reverse; }
.float        { animation: float 7s ease-in-out infinite; }
.float-slow   { animation: float 11s ease-in-out infinite; }

@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -12px, 0); }
}


/* --------------------------------------------------------------------------
   7. photo cards, screenshots, bubbles
   -------------------------------------------------------------------------- */
/* rounded coloured card holding a cutout photo.
   swap the <img> src for a consent-cleared photo (a transparent png cutout
   looks best, but any photo works with object-fit: cover) */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  aspect-ratio: 4 / 5;
  background: var(--purple);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--purple { background: var(--purple); }
.photo--coral  { background: var(--coral); }
.photo--pink   { background: var(--pink); }
.photo--yellow { background: var(--yellow-hl); }
.photo--green  { background: var(--green); }
.photo--blue   { background: var(--blue); }
.photo--tall   { aspect-ratio: 3 / 4; }
.photo--organic-a { border-radius: 140px 30px 140px 30px; }
.photo--organic-b { border-radius: 30px 140px 30px 140px; }

/* browser style screenshot card */
.shot {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--cream-deep);
  border: 2px solid var(--ink);
  aspect-ratio: 4 / 5;
}
.shot__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 2px solid var(--ink);
  background: #fff;
  font-family: var(--font-mono);
  font-size: .75rem;
}
.shot__chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); opacity: .25; }
.shot__chrome span { margin-left: 8px; opacity: .6; }
.shot img { width: 100%; height: calc(100% - 42px); object-fit: cover; object-position: top; }

/* small coloured bubble cards that overlap a screenshot */
.bubble {
  position: absolute;
  width: 190px;
  padding: 18px 20px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.bubble strong { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; line-height: 1; }
.bubble .mono { font-size: .78rem; line-height: 1.4; }
.bubble--green  { background: var(--green);  color: var(--on-green); }
.bubble--coral  { background: var(--coral);  color: var(--on-coral); }
.bubble--purple { background: var(--purple); color: var(--on-purple); }
.bubble--yellow { background: var(--yellow-hl); color: var(--on-yellow); }
.bubble--tr { top: -22px; right: -26px; }
.bubble--bl { bottom: 34px; left: -30px; }
.bubble--tl { top: -22px; left: -26px; }
.bubble--br { bottom: 34px; right: -30px; }


/* --------------------------------------------------------------------------
   8. chrome: progress bar, skip link, dot nav
   -------------------------------------------------------------------------- */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 60;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--coral);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.skip {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 70;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.dotnav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: none;
  flex-direction: column;
  gap: 10px;
}
.dotnav a {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.dotnav a span {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--ink);
  opacity: .35;
  transition: transform .3s var(--ease-spring), opacity .3s, background .3s;
}
.dotnav a:hover span,
.dotnav a:focus-visible span { opacity: .8; transform: scale(1.3); }
.dotnav a[aria-current="true"] span {
  opacity: 1;
  background: var(--coral);
  transform: scale(1.5);
}
.dotnav a::after {
  content: attr(data-label);
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .78rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease-out);
}
.dotnav a:hover::after,
.dotnav a:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.dotnav a:focus-visible { outline-offset: 0; }
body.is-unlocked .dotnav { display: flex; }

/* download pdf button: fixed bottom right, only once the gate is open */
.pdf-btn {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 55;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .85rem;
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .35);
  transition: transform .35s var(--ease-spring);
}
.pdf-btn svg { width: 17px; height: 17px; }
.pdf-btn:hover { transform: scale(1.05) translateY(-1px); }
.pdf-btn:active { transform: scale(.98); }
body.is-unlocked .pdf-btn { display: inline-flex; }

/* "copied to clipboard" toast, positioned above whichever mailto: link
   was just clicked (see script.js) */
.copy-toast {
  position: absolute;
  transform: translate(-50%, -100%) translateY(6px);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--yellow-hl);
  color: var(--on-yellow);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .78rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.copy-toast.is-in { opacity: 1; transform: translate(-50%, -100%) translateY(0); }


/* --------------------------------------------------------------------------
   9. password gate
   -------------------------------------------------------------------------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--yellow);
  overflow: hidden;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), visibility 0s .7s;
}
.gate.is-leaving {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  visibility: hidden;
}
.gate[hidden] { display: none; }

.gate__shapes { position: absolute; inset: 0; pointer-events: none; }
.shape--gate-star    { --s: 120px; top: 8vh; right: 12vw; color: var(--purple); }
.shape--gate-half    { --s: 260px; left: -130px; bottom: 10vh; }
.shape--gate-half::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--blue); }
.shape--gate-scallop { --s: 200px; right: -70px; bottom: -60px; color: var(--green); }
.shape--gate-pixels  { left: 14vw; top: 12vh; }

.gate__card {
  width: min(100%, 460px);
  padding: 44px 40px 36px;
  text-align: left;
  animation: gateIn .9s var(--ease-out) both;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .25);
}
.gate__card.is-shaking { animation: shake .5s var(--ease-out); }

.logo--gate { width: 80px; height: 80px; margin-bottom: 26px; object-fit: contain; }
.gate__title {
  font-size: clamp(2rem, 6vw, 2.6rem);
  margin: 6px 0 28px;
}
.gate__label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 8px;
}
.gate__row { display: flex; gap: 8px; }
.gate__input {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink);
}
.gate__input:focus-visible { outline-offset: 2px; }
.gate__error {
  min-height: 1.6em;
  margin-top: 10px;
  font-size: .82rem;
  color: var(--pink);
}
.gate__foot {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  color: var(--ink-soft);
}

@keyframes gateIn {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}


/* --------------------------------------------------------------------------
   10. sections
   -------------------------------------------------------------------------- */

/* logos ------------------------------------------------------------------- */
.logo--inline { width: 28px; height: 28px; display: inline-block; vertical-align: middle; margin-right: 6px; object-fit: contain; }
.logo--footer { width: 48px; height: 48px; margin: 0 auto 14px; object-fit: contain; }
.logo--lowe { margin-top: auto; padding-top: 34px; width: 140px; height: auto; }

/* 1. hero ------------------------------------------------------------------ */
.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  min-height: min(86vh, 820px);
  padding-top: clamp(80px, 12vw, 130px);
}
.hero__text { position: relative; }
.hero .quote--black { position: absolute; top: -.78em; left: -.02em; font-size: clamp(3.6rem, 6vw, 5.4rem); }
.hero__title {
  font-size: clamp(3rem, 7.4vw, 6.4rem);
  letter-spacing: -.045em;
  line-height: .92;
  max-width: 9ch;
  margin-bottom: 26px;
}
.shape--hero-star {
  --s: clamp(28px, 3vw, 40px);
  position: absolute;
  top: 0;
  right: clamp(0px, 6vw, 60px);
  color: var(--purple);
}
.hero__sub {
  font-size: clamp(.95rem, 1.4vw, 1.08rem);
  line-height: 1.6;
  max-width: 40ch;
}
.hero__by {
  margin-top: 28px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.hero__grid .photo:nth-child(2n) { margin-top: 44px; }
.hero__grid .photo:nth-child(2n + 1):nth-child(n + 3) { margin-top: -44px; }
/* with only three brand tones, --purple/--coral and --pink/--yellow-hl each
   share a colour. override two of the four hero cards so this 2x2 grid
   doesn't pair up two identical tiles side by side. */
.hero__grid .photo--coral  { background: var(--pink); }
.hero__grid .photo--yellow { background: var(--green); }

.shape--hero-scallop  { --s: 170px; top: -70px; left: 38%; color: var(--green); }
.shape--hero-half     { --s: 190px; right: -95px; bottom: 8%; }
.shape--hero-ellipses { width: 320px; height: 220px; left: -70px; bottom: -70px; }

/* 2. contents -------------------------------------------------------------- */
.contents__title {
  font-size: clamp(3rem, 7vw, 5.6rem);
  letter-spacing: -.045em;
  margin-bottom: 26px;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 48px;
}
.toc__row { border-top: 1px solid var(--line); }
.toc__row:last-child { border-bottom: 1px solid var(--line); }
.toc__link {
  display: grid;
  grid-template-columns: 2.4rem 1fr 1.15fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  text-decoration: none;
  transition: padding .3s var(--ease-out);
}
.toc__link:hover { padding-left: 6px; }
.toc__num { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; }
.toc__name { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.03em; }
.toc__desc { font-size: .84rem; color: var(--ink-soft); }
.toc__link:hover .arrow-btn { background: var(--ink); color: var(--cream); }
.toc__link:hover .arrow-btn svg { transform: translate(2px, -2px); }

.shape--contents-arc    { --s: 110px; right: 48px; top: -44px; color: var(--green); }
.shape--contents-pixels { left: 42%; bottom: -14px; }

/* 3. intro ----------------------------------------------------------------- */
.intro { padding-top: clamp(80px, 10vw, 120px); }
.shape--intro-half   { --s: 240px; left: -120px; top: 38%; }
.shape--intro-pixels { right: 12%; bottom: -14px; }

/* 4. values ---------------------------------------------------------------- */
.values { padding-block: clamp(70px, 9vw, 110px); }
.values__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 16px;
  max-width: 900px;
  margin: 0 auto 36px;
}
.value {
  position: relative;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.2rem, 6.4vw, 5rem);
  letter-spacing: -.045em;
  line-height: 1;
  padding: .12em .42em .2em;
  border-radius: var(--radius-pill);
  background: var(--c, var(--green));
  color: var(--fg, var(--ink));
}
.value--green  { --c: var(--green);  --fg: var(--on-green); }
.value--purple { --c: var(--purple); --fg: var(--on-purple); }
.value--pink   { --c: var(--pink);   --fg: var(--on-pink); }
.value--blue   { --c: var(--blue);   --fg: var(--on-blue); }
.value--coral  { --c: var(--coral);  --fg: var(--on-coral); }
.value__spark {
  position: absolute;
  top: -.28em;
  right: -.12em;
  width: .5em;
  height: .5em;
  color: var(--yellow-hl);
}
.value__spark svg { width: 100%; height: 100%; transform: scale(0); }
.values__line { max-width: 52ch; margin: 0 auto; }
.shape--values-arc { --s: 120px; left: -34px; top: 34%; color: var(--green); }
.shape--values-arc svg { transform: rotate(90deg); }

/* 5. what you told us ------------------------------------------------------ */
.told {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) 2.2fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.told__intro { position: sticky; top: 40px; }
.told__intro .h2 { margin-bottom: 18px; }
.told__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 210px;
  padding: 24px;
  border-radius: var(--radius-tile);
  background: var(--bg, var(--cream-deep));
  color: var(--fg, var(--ink));
  font-family: var(--font-ui);
}
.tile__icon { width: 30px; height: 30px; margin-bottom: auto; }
.tile__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}
.tile__text { font-weight: 600; font-size: 1.02rem; line-height: 1.4; }
.tile--purple  { --bg: var(--purple); --fg: var(--on-purple); }
.tile--coral   { --bg: var(--coral);  --fg: var(--on-coral); }
.tile--black   { --bg: var(--ink);    --fg: var(--on-ink); }
.tile--green   { --bg: var(--green);  --fg: var(--on-green); }
.tile--blue    { --bg: var(--blue);   --fg: var(--on-blue); }
.tile--pink    { --bg: var(--pink);   --fg: var(--on-pink); }
.tile--yellow  { --bg: var(--yellow-hl); --fg: var(--on-yellow); }
.tile--outline { --bg: transparent; --fg: var(--ink); border: 2px solid var(--ink); }
.told__grid .tile:last-child { grid-column: span 2; min-height: 0; }
.shape--told-star   { --s: 96px; right: -34px; top: -34px; }
.shape--told-pixels { left: 6%; bottom: -14px; }

/* 6. what we'll build ------------------------------------------------------ */
.build {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.build .lead { margin-bottom: 30px; }
.acc__item { border-top: 1px solid var(--line); }
.acc__item:last-child { border-bottom: 1px solid var(--line); }
.acc__btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 0;
  border: 0;
  background: none;
  text-align: left;
}
.acc__icon { width: 24px; height: 24px; flex: none; }
.acc__label {
  flex: 1;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.acc__btn .arrow-btn { width: 38px; height: 38px; }
.acc__btn .arrow-btn svg { width: 18px; height: 18px; }
.acc__btn:hover .arrow-btn { transform: scale(1.08); }
.acc__item.is-open .arrow-btn { background: var(--ink); color: var(--cream); }
.acc__item.is-open .arrow-btn svg { transform: rotate(180deg); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease-out);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.subpages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 20px 40px;
}
.subpages li {
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .82rem;
}
.build__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: sticky;
  top: 40px;
}
.build__photos .photo--tall { aspect-ratio: 2 / 3.3; }
.build__photos > :nth-child(2) { margin-top: 56px; }
.shape--build-pixels { right: 9%; top: -14px; }
.shape--build-star   { --s: 68px; left: -28px; bottom: 15%; }

/* 7. staff logins ---------------------------------------------------------- */
.logins {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.logins__text { position: relative; padding-top: 44px; }
.logins__text .quote { top: -10px; left: -6px; }
.shape--logins-half { --s: 200px; left: -100px; bottom: -50px; }
.shape--logins-star { --s: 72px; right: -26px; top: -26px; }

/* the css built dashboard mockup */
.mock {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
  font-family: var(--font-ui);
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .35);
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 2px solid var(--ink);
  background: var(--cream);
  font-family: var(--font-mono);
  font-size: .76rem;
}
.mock__dots { display: flex; gap: 5px; }
.mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); opacity: .3; }
.mock__crumb { flex: 1; }
.mock__user { display: inline-flex; align-items: center; gap: 6px; }
.mock__user svg { width: 14px; height: 14px; }
.mock__body { display: grid; grid-template-columns: 110px 1fr; }
.mock__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 12px;
  border-right: 2px solid var(--ink);
  background: var(--cream);
}
.mock__navitem {
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .8rem;
}
.mock__navitem.is-active { background: var(--ink); color: var(--cream); }
.mock__form { padding: 22px 24px 24px; }
.mock__title { font-size: 1.45rem; margin-bottom: 18px; }
.mock__label {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 12px 0 6px;
  opacity: .7;
}
.mock__input {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 600;
}
.mock__caret {
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  background: var(--ink);
  animation: blink 1s steps(2) infinite;
}
.mock__upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 78px;
  border: 2px dashed var(--ink);
  border-radius: 12px;
  background: var(--cream);
  font-size: .85rem;
  font-weight: 600;
}
.mock__upload svg { width: 18px; height: 18px; }
.mock__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 18px; }
.mock__save { font-size: .85rem; font-weight: 600; text-decoration: underline; }
.mock__publish.is-pulsing { animation: pulse .6s var(--ease-spring); }
.mock__toast {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--on-green);
  font-weight: 700;
  font-size: .85rem;
  transform: translateX(24px) scale(.9);
  opacity: 0;
  transition: transform .5s var(--ease-spring), opacity .3s;
}
.mock__toast svg { width: 16px; height: 16px; }
.mock__toast.is-in { transform: none; opacity: 1; }
@keyframes blink { to { visibility: hidden; } }
@keyframes pulse { 50% { transform: scale(1.1); } }

/* 8. our school websites --------------------------------------------------- */
.work-intro .h2 { margin-bottom: .4em; }
.shape--work-star   { --s: 56px; left: 8%; top: -22px; }
.shape--work-pixels { left: 10%; bottom: -14px; }

.case {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.case__text > .pill { margin-bottom: 22px; }
.case__title { margin-bottom: 26px; }
.fields { margin-bottom: 30px; }
.fields__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.fields__row:last-child { border-bottom: 1px solid var(--line); }
.fields dt {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-top: .35em;
  color: var(--ink-soft);
}
.fields dd { font-size: .9rem; line-height: 1.7; }
.case__visual { position: relative; padding: 26px 30px 40px; }
.case--flip .case__text { order: 2; }
.case__note {
  grid-column: 1 / -1;
  order: 3;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--ink-soft);
  text-align: center;
}
.shape--case-arc  { --s: 110px; right: -30px; top: -30px; color: var(--green); }
.shape--case-half { --s: 220px; left: -110px; top: 30%; }

/* 9. built to be found ----------------------------------------------------- */
.found {
  display: grid;
  grid-template-columns: .9fr 1.4fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-top: clamp(70px, 9vw, 110px);
}
.found__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tall {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 24px 22px;
  border-radius: 30px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  overflow: hidden;
  transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease-out);
}
.tall--green  { --bg: var(--green);  --fg: var(--on-green); }
.tall--purple { --bg: var(--purple); --fg: var(--on-purple); }
/* uses --pink rather than --coral so this card reads as light blue,
   keeping it visually distinct from --purple next to it in this row */
.tall--coral  { --bg: var(--pink);  --fg: var(--on-pink); }
.tall__icon { width: 34px; height: 34px; }
.tall__body {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .45s var(--ease-spring);
}
.tall__title { font-size: 1.6rem; }
.tall__text { font-weight: 500; font-size: .92rem; line-height: 1.45; }
.tall .pill { align-self: flex-start; margin-top: 4px; }
.tall:hover { transform: translateY(-10px); box-shadow: 0 28px 40px -28px rgba(0, 0, 0, .45); }
.tall:hover .tall__body { transform: translateY(-6px); }
.shape--found-scallop { --s: 160px; right: -60px; top: -64px; color: var(--green); }

/* 10. design --------------------------------------------------------------- */
.design {
  display: grid;
  grid-template-columns: .85fr 1.3fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-top: clamp(80px, 10vw, 120px);
}
.design__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.design__cards .photo--tall { aspect-ratio: 3 / 4.4; }
.shape--design-pixels   { right: 6%; top: -14px; }
.shape--design-star     { --s: 68px; left: 46%; bottom: -30px; }
.shape--design-ellipses { width: 300px; height: 210px; left: -80px; bottom: -70px; }

/* 11. timeline ------------------------------------------------------------- */
.timeline .h2 .count { color: var(--coral); font-variant-numeric: tabular-nums; }
.tl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 44px auto 0;
  max-width: 1000px;
  text-align: left;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.tl__cell {
  position: relative;
  padding: 28px 26px 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .5s var(--ease-out);
}
.tl__cell.is-lit { background: rgba(255, 255, 255, .45); }
.tl__num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .85rem;
  transition: background .4s var(--ease-out), transform .5s var(--ease-spring), color .3s;
}
.tl__cell.is-lit .tl__num { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
/* --green and --blue both resolve to the dark navy, so their lit number
   needs white text to stay legible; the others stay legible on navy text */
.tl__cell[style*="--green"].is-lit .tl__num,
.tl__cell[style*="--blue"].is-lit .tl__num { color: var(--on-green); }
.tl__title { font-size: 1.25rem; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.tl__date { font-family: var(--font-mono); font-weight: 400; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.tl__text { font-size: .86rem; line-height: 1.6; color: var(--ink-soft); }
.tl__star {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 44px;
  height: 44px;
  color: var(--yellow-hl);
  transform: scale(0);
  transition: transform .6s var(--ease-spring);
}
.tl__star svg { width: 100%; height: 100%; }
.tl__cell--launch.is-lit { background: var(--yellow-hl); }
.tl__cell--launch.is-lit .tl__num { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.tl__cell--launch.is-lit .tl__star { transform: scale(1) rotate(15deg); color: var(--ink); }
.tl__cell--launch.is-lit { animation: launchPop .7s var(--ease-spring); }
@keyframes launchPop { 40% { transform: scale(1.04); } }
.shape--timeline-arc    { --s: 100px; right: -34px; top: 26%; color: var(--blue); }
.shape--timeline-pixels { right: 5%; bottom: -14px; }

/* 12. measuring success ---------------------------------------------------- */
.success .h2 { margin-bottom: .45em; }
.points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
  max-width: 880px;
  margin: 44px auto 0;
  text-align: left;
}
.point { display: flex; gap: 16px; align-items: flex-start; }
.point .pill-dot { margin-top: 6px; }
.point__title { font-size: 1.25rem; margin-bottom: 6px; }
.point p { font-size: .9rem; line-height: 1.7; }
.closing { max-width: 56ch; margin: 44px auto 0; }
.shape--success-half     { --s: 240px; right: -120px; top: 18%; }
.shape--success-ellipses { width: 300px; height: 210px; left: -80px; bottom: -60px; }

/* 13. about lowe design ---------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  align-items: stretch;
}
.dark {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 30px;
  background: var(--ink);
  color: var(--cream);
}
.dark__title { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin-bottom: 22px; }
.dark__text { font-family: var(--font-mono); font-size: .9rem; line-height: 1.75; margin-bottom: 28px; max-width: 52ch; }
.dark .btn { align-self: flex-start; }
.stats { display: grid; gap: 14px; }
.stat {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  grid-template-areas: "icon big arrow" "icon cap arrow";
  column-gap: 20px;
  row-gap: 4px;
  align-items: center;
  padding: 24px 26px;
  border-radius: 26px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
}
/* uses --pink rather than --coral so this card reads as light blue,
   keeping it visually distinct from --purple next to it in this stack */
.stat--coral  { --bg: var(--pink);  --fg: var(--on-pink); }
.stat--purple { --bg: var(--purple); --fg: var(--on-purple); }
.stat--green  { --bg: var(--green);  --fg: var(--on-green); }
.stat__icon { grid-area: icon; width: 34px; height: 34px; align-self: start; }
.stat__big { grid-area: big; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__cap { grid-area: cap; font-weight: 600; font-size: .9rem; line-height: 1.35; }
.stat .arrow-btn { grid-area: arrow; }
.marquee {
  overflow: hidden;
  display: flex;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -.03em;
  white-space: nowrap;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__dot { color: var(--coral); }
@keyframes marquee { to { transform: translateX(-100%); } }
.shape--about-star   { --s: 80px; left: -30px; top: 22%; }
.shape--about-pixels { right: 10%; bottom: -14px; }

/* 14. investment ----------------------------------------------------------- */
.invest .h2 { margin-bottom: 40px; }
.prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
}
.price {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 260px;
  padding: 28px 28px 84px;
  border-radius: 30px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
}
.price--green  { --bg: var(--green);  --fg: var(--on-green); }
.price--purple { --bg: var(--purple); --fg: var(--on-purple); }
/* uses --pink rather than --coral so this card reads as light blue,
   keeping it visually distinct from --purple next to it in this row */
.price--coral  { --bg: var(--pink);  --fg: var(--on-pink); }
.price__icon { width: 32px; height: 32px; margin-bottom: 14px; }
.price__title { font-size: 1.35rem; }
.price__amount { font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; letter-spacing: -.04em; line-height: 1; margin: 6px 0 4px; }
.price__line { font-family: var(--font-mono); font-size: .8rem; line-height: 1.55; opacity: .95; }
/* notched bottom corner holding the circular arrow */
.price__corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80px;
  height: 80px;
  border-top-left-radius: 30px;
  background: var(--cream);
  display: grid;
  place-items: end;
  padding: 14px 0 0 14px;
}
.price:hover .arrow-btn { transform: scale(1.08); background: var(--ink); color: var(--cream); }
.price:hover .arrow-btn svg { transform: translate(2px, -2px); }

.total {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  padding: 22px 30px;
  border-radius: 24px;
  border: 2px solid var(--ink);
  text-align: left;
}
.total__label { font-family: var(--font-ui); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; }
.total__amount { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.total__pay { font-size: .85rem; color: var(--ink-soft); }
.invest .h3 { text-align: left; }
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
}
.plan {
  position: relative;
  padding: 28px;
  border-radius: 26px;
}
.plan--outline { border: 2px solid var(--ink); }
.plan--filled { background: var(--yellow-hl); }
.plan__title { font-size: 1.5rem; margin-bottom: 8px; }
.plan__price { font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; letter-spacing: -.04em; line-height: 1; margin-bottom: 14px; }
.plan__price span { font-family: var(--font-mono); font-weight: 400; font-size: .85rem; letter-spacing: 0; margin-left: 4px; }
.plan__text { font-size: .86rem; line-height: 1.7; }
.plan__tag {
  position: absolute;
  top: -16px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--radius-pill);
  background: var(--purple);
  color: var(--on-purple);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .78rem;
  transform: rotate(4deg);
}
.plan__tag svg { width: 16px; height: 16px; color: var(--yellow-hl); }
.shape--invest-scallop { --s: 150px; left: -56px; top: -56px; color: var(--green); }

/* 15. next steps ----------------------------------------------------------- */
.next { padding-top: clamp(80px, 10vw, 120px); }
.steps {
  display: grid;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}
.step {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px 12px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
}
.step__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  background: var(--green);
}
.step__num--green  { background: var(--green);  color: var(--on-green); }
.step__num--purple { background: var(--purple); color: var(--on-purple); }
.step__num--pink   { background: var(--pink);   color: var(--on-pink); }
.step__num--blue   { background: var(--blue);   color: var(--on-blue); }
.shape--next-pixels   { left: 10%; bottom: -14px; }
.shape--next-pixels-2 { right: 8%; top: -14px; }

/* 16. cta ------------------------------------------------------------------ */
.cta { padding-block: clamp(80px, 11vw, 140px); }
.cta__title {
  font-size: clamp(2.4rem, 6.4vw, 5.2rem);
  letter-spacing: -.045em;
  line-height: .95;
  color: #fff;
  max-width: 14ch;
  margin: 0 auto 24px;
}
.cta__line { color: rgba(251, 246, 238, .78); margin-bottom: 36px; }
.cta__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.cta__details { margin-top: 30px; font-size: .9rem; color: rgba(251, 246, 238, .78); }
.cta__details a { text-decoration-color: var(--coral); text-underline-offset: 4px; }
.cta__details a:hover { color: #fff; }
.card--dark :focus-visible { outline-color: var(--yellow-hl); }
.shape--cta-star    { --s: 90px; left: -30px; top: -30px; }
.shape--cta-star-2  { --s: 54px; right: 7%; top: -24px; }
.shape--cta-pixels  { right: 5%; bottom: 12%; }
.shape--cta-half    { --s: 220px; right: -110px; bottom: -70px; }
.shape--cta-scallop { --s: 160px; left: -60px; top: -60px; color: var(--purple); }
.cta .card__clip { z-index: -1; }

/* footer ------------------------------------------------------------------- */
.footer {
  text-align: center;
  padding: 28px 16px 40px;
  color: rgba(17, 17, 17, .75);
}
.footer a { text-decoration-color: var(--coral); text-underline-offset: 3px; }
.print-note { display: none; }


/* --------------------------------------------------------------------------
   11. reveal and motion
   -------------------------------------------------------------------------- */
/* each card slides up and fades in */
[data-reveal] {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* staggered children (script sets --i on each child) */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + .2s);
}
.is-visible [data-stagger] > * { opacity: 1; transform: none; }
/* the hover transforms above still apply once revealed */
.is-visible [data-stagger] > .tall:hover { transform: translateY(-10px); }

/* hero: headline words pop in one by one, photos drop with a bounce */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em) rotate(2deg);
}
.is-visible .word {
  animation: popWord .75s var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 120ms + .15s);
}
@keyframes popWord {
  to { opacity: 1; transform: none; }
}
.hero__grid .photo { opacity: 0; transform: translateY(-40px); }
.is-visible .hero__grid .photo {
  animation: drop .9s var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 140ms + .45s);
}
@keyframes drop {
  to { opacity: 1; transform: none; }
}

/* values: one at a time with a spark */
.is-visible .value {
  animation: valueIn .6s var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 180ms + .1s);
}
.is-visible .value__spark svg {
  animation: spark .8s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 180ms + .35s);
}
@keyframes valueIn {
  from { opacity: 0; transform: translateY(20px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes spark {
  0%   { transform: scale(0) rotate(0deg); }
  50%  { transform: scale(1.2) rotate(30deg); }
  100% { transform: scale(0) rotate(60deg); }
}


/* --------------------------------------------------------------------------
   12. responsive
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  body.is-unlocked .dotnav { display: flex; }
}
@media (max-width: 1099px) {
  body.is-unlocked .dotnav { display: none; }
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__grid { max-width: 520px; }
  .told { grid-template-columns: 1fr; }
  .told__intro { position: static; }
  .told__grid { grid-template-columns: repeat(2, 1fr); }
  .build { grid-template-columns: 1fr; }
  .build__photos { position: static; max-width: 520px; }
  .logins { grid-template-columns: 1fr; }
  .case { grid-template-columns: 1fr; }
  .case--flip .case__text { order: 0; }
  .case__visual { max-width: 520px; margin-inline: auto; }
  .found { grid-template-columns: 1fr; }
  .design { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; }
  .tl { grid-template-columns: repeat(2, 1fr); }
  .prices { grid-template-columns: 1fr; }
  .price { min-height: 0; }
}

@media (max-width: 720px) {
  :root { --shape-scale: .6; --pad: clamp(26px, 7vw, 40px); }
  .toc__link { grid-template-columns: 2rem 1fr auto; }
  .toc__desc { grid-column: 2; }
  .toc__link .arrow-btn { grid-row: 1 / span 2; grid-column: 3; }
  .told__grid { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
  .told__grid .tile:last-child { grid-column: auto; }
  .found__cards { grid-template-columns: 1fr; }
  .tall { min-height: 300px; }
  .design__cards { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .tl { grid-template-columns: 1fr; }
  .points { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .total { grid-template-columns: 1fr; gap: 8px; }
  .bubble { width: 160px; padding: 14px 16px; }
  .bubble strong { font-size: 1.15rem; }
  .case__visual { padding: 22px 20px 34px; }
  .mock__body { grid-template-columns: 1fr; }
  .mock__nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 2px solid var(--ink); }
  .fields__row { grid-template-columns: 1fr; gap: 6px; }
  .quote { font-size: 3.2rem; }
  .quote--corner { top: 14px; left: 16px; }
  .quote--corner-right { top: 14px; right: 16px; }
  .hero { padding-top: 70px; }
  .hero .quote--black { font-size: 3rem; top: -.7em; }
  .hero__grid .photo:nth-child(2n) { margin-top: 24px; }
  .hero__grid .photo:nth-child(2n + 1):nth-child(n + 3) { margin-top: -24px; }
  .build__photos > :nth-child(2) { margin-top: 32px; }
  /* the biggest shapes go on small screens, the small accents stay */
  .shape--hero-ellipses, .shape--design-ellipses, .shape--success-ellipses,
  .shape--hero-half, .shape--intro-half, .shape--logins-half, .shape--case-half,
  .shape--success-half, .shape--cta-half, .shape--gate-half,
  .shape--invest-scallop, .shape--cta-scallop { display: none; }
  .shape--hero-scallop { --s: 120px; top: -50px; left: 60%; }
  .gate__card { padding: 34px 26px 28px; }
  .gate__row { flex-direction: column; }
  .gate__row .btn { justify-content: center; }
}

@media (max-width: 420px) {
  .hero__grid { gap: 10px; }
  .value { font-size: 2rem; }
}


/* --------------------------------------------------------------------------
   13. reduced motion: no parallax, idle motion, drawing, counters or sweeps
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .shape { transform: scale(var(--shape-scale)); }
  [data-reveal], [data-stagger] > *, .word, .hero__grid .photo, .value {
    opacity: 1 !important;
    transform: none !important;
  }
  .hl { background-size: 100% 100%; }
  .ellipses ellipse { stroke-dashoffset: 0; }
  .value__spark { display: none; }
  .mock__caret { display: none; }
  .marquee__track { animation: none; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .tl__cell .tl__num { background: var(--accent); border-color: var(--accent); }
  .tl__cell[style*="--green"] .tl__num,
  .tl__cell[style*="--blue"] .tl__num { color: var(--on-green); }
  .tl__cell--launch { background: var(--yellow-hl); }
  .tl__cell--launch .tl__star { transform: scale(1) rotate(15deg); color: var(--ink); }
  .tl__cell--launch .tl__num { background: var(--ink); border-color: var(--ink); color: var(--cream); }
}


/* --------------------------------------------------------------------------
   14. print
   the "download pdf" button (and the browser's own print command) both
   land here. script.js resolves every scroll-triggered animation to its
   finished state on the "beforeprint" event, so a pdf saved from the top of
   the page still shows real counters, the typed dashboard demo and a lit
   timeline instead of "0" and blank fields. the rules below are a css-only
   safety net for the same end states, plus the print-specific adjustments
   js can't do: hiding on-screen-only chrome, keeping colour backgrounds,
   and not splitting small cards across a page break
   -------------------------------------------------------------------------- */
@media print {
  @page { margin: 14mm; }

  /* this design is almost entirely coloured backgrounds; without this,
     every browser strips them by default when printing */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* fixed, screen-only chrome: harmless on screen, but fixed position
     elements repeat on every printed page if left in */
  .skip, .progress, .dotnav, .pdf-btn { display: none !important; }

  .print-note { display: block; margin-top: 14px; }

  /* freeze idle motion (spin, float, marquee, blinking caret) on its
     resting frame rather than whatever frame it was on when printed */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .value__spark { display: none; }
  .mock__caret { display: none; }
  .marquee { mask-image: none; -webkit-mask-image: none; }

  /* scroll-triggered end states: script.js forces these on "beforeprint",
     this is the fallback if js hasn't run for any reason */
  [data-reveal], [data-stagger] > *, .word, .hero__grid .photo, .value {
    opacity: 1 !important;
    transform: none !important;
  }
  .hl { background-size: 100% 100%; }
  .ellipses ellipse { stroke-dashoffset: 0; }
  .tl__cell .tl__num { background: var(--accent); border-color: var(--accent); }
  .tl__cell[style*="--green"] .tl__num,
  .tl__cell[style*="--blue"] .tl__num { color: var(--on-green); }
  .tl__cell--launch { background: var(--yellow-hl); }
  .tl__cell--launch .tl__star { transform: scale(1) rotate(15deg); color: var(--ink); }
  .tl__cell--launch .tl__num { background: var(--ink); border-color: var(--ink); color: var(--cream); }

  /* the site structure accordion can't be clicked open on paper */
  .acc__panel { grid-template-rows: 1fr !important; }
  .acc__inner { overflow: visible !important; }
  .acc__btn .arrow-btn { display: none; }

  /* sticky has no meaning on a paginated page */
  .told__intro, .build__photos { position: static; }

  /* keep small cards and rows whole rather than split across a page break */
  .tile, .price, .plan, .stat, .tl__cell, .value, .step, .point,
  .toc__row, .tall, .bubble, .fields__row {
    break-inside: avoid;
  }
}