/* ==========================================================================
   Wonder & Co — wonderandco.supanice.co.uk
   AUTHORITATIVE STYLESHEET — full rewrite 1 Sep 2026, supersedes all prior
   partial edits.

   Brand: pink #FFACEC / charcoal #222222 / warm paper #FCFBF9.
   Typography: ONE family — Poppins (geometric, matches the wordmark);
   expression via scale, weight (300–600) and italics only.
   Layout: one --gutter token on every edge component (header, hero, sections,
   footer, scroll cue).
   Motion: preloader, word-mask hero reveal, crossing marquees, per-word
   hover swaps, parallax backdrops, cursor glow, magnetic CTA. Transform /
   opacity only; reduced-motion and no-JS safe.
   ========================================================================== */

:root {
  --pink: #FFACEC;
  --ink: #222222;
  --ink-70: rgba(34, 34, 34, 0.72);
  --ink-45: rgba(34, 34, 34, 0.45);
  --line: rgba(34, 34, 34, 0.12);
  --paper: #FCFBF9;
  --paper-70: rgba(252, 251, 249, 0.72);
  --paper-20: rgba(252, 251, 249, 0.2);
  --sans: 'Poppins', 'Futura', 'Century Gothic', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --gutter: clamp(28px, 6vw, 120px);
}

* { box-sizing: border-box; border-radius: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--pink); color: var(--ink); }

a { color: inherit; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--pink); }

/* Italic accent — same family, different voice. Used sparingly. */
.ser { font-style: italic; font-weight: 500; }
.w-pink { color: var(--pink); padding-right: 3px; }
.pd { color: var(--pink); display: inline-block; }

/* ---- film grain ---------------------------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- scroll progress ------------------------------------------------------ */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 80;
}

/* ---- preloader ------------------------------------------------------------- */
.preloader { display: none; }

.js .preloader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  align-items: flex-end;
  padding: var(--gutter);
}

body.loaded .preloader {
  transform: translate3d(0, -101%, 0);
  transition: transform 0.9s var(--ease-io);
}

.pre-inner { width: 100%; }

.pre-word {
  margin: 0 0 18px;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(38px, 6vw, 84px);
  line-height: 1.1;
  color: var(--pink);
}

.pre-line {
  display: block;
  height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: pre-sweep 0.85s var(--ease) 0.05s forwards;
}

@keyframes pre-sweep { to { transform: scaleX(1); } }

.pre-sub {
  margin: 12px 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--paper-70);
}

/* ---- shared ----------------------------------------------------------------- */
.section-inner {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 clamp(44px, 6vw, 80px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.label .index {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--pink);
}

.label-dark { color: var(--paper-70); }
.label-ink { color: rgba(34, 34, 34, 0.55); }

/* ---- header ------------------------------------------------------------------ */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(20px, 3.2vw, 40px) var(--gutter);
}

.brand img {
  display: block;
  height: clamp(40px, 4.4vw, 64px);
  width: auto;
  transition: transform 0.6s var(--ease);
}
.brand:hover img { transform: translateY(-2px); }

.talk-pill {
  display: inline-block;
  margin-top: 4px;
  padding: 12px 28px;
  border: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.talk-pill:hover,
.talk-pill:focus-visible {
  background: var(--ink);
  color: var(--pink);
  outline: none;
}

/* ---- hero ---------------------------------------------------------------------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: center;
  padding-top: clamp(110px, 16vh, 190px);
  overflow: hidden;
}

/* Hero wrapper is NOT .section-inner, so the gutter is applied here
   explicitly — same token, same alignment as every other section. */
.hero-inner {
  width: 100%;
  position: relative;
  z-index: 2;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: 1600px;
  margin: 0 auto;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-70);
}

.eyebrow .dot { width: 9px; height: 9px; background: var(--pink); display: inline-block; }

.hero-title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(40px, 6.8vw, 120px);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.hero-title .ser { letter-spacing: -0.015em; padding-right: 0.05em; }

/* Staircase — sized to real Poppins metrics: no line wraps mid-phrase >=768px.
   Reset to 0 in the mobile block below. */
.ind1 { margin-left: 3vw; }
.ind2 { margin-left: 1.5vw; }
.ind3 { margin-left: 6.5vw; }

/* Word-level masks (built by JS). A word can never wrap inside its own clip
   window, so the reveal is wrap-proof at every viewport and font state.
   Generous padding so ascenders/descenders/italics never clip; the negative
   margins reclaim the space so rhythm is unchanged. */
.hline { display: block; }

.js .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.14em 0.08em 0.26em;
  margin: -0.14em -0.08em -0.26em;
}

.wi { display: inline-block; padding-bottom: 0.02em; }

.js .wi {
  transform: translate3d(0, 135%, 0);
  transition: transform 1.1s var(--ease) calc(var(--dl, 0s) + var(--wd, 0ms));
  will-change: transform;
}

.js body.ready .wi { transform: translate3d(0, 0, 0); }

.hero-meta {
  margin: clamp(32px, 5vw, 64px) 0 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.hero-cue {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(26px, 5vh, 48px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.cue-line { width: 56px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateX(-100%);
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
}

/* rotating badge — phrase runs ONCE around the ring, padded with dots */
.badge {
  position: absolute;
  right: clamp(28px, 7vw, 120px);
  bottom: clamp(56px, 12vh, 120px);
  z-index: 3;
  width: 150px;
  height: 150px;
  color: var(--ink-70);
  animation: spin 26s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.badge svg { display: block; }

.badge-core {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-weight: 500;
  font-size: 42px;
  color: var(--pink);
  animation: spin 26s linear infinite reverse;
  padding-right: 4px;
}

/* ---- crossing marquees --------------------------------------------------------- */
.cross {
  position: relative;
  padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 128px);
}

.ticker {
  width: 110vw;
  margin-left: -5vw;
  padding: clamp(12px, 1.8vw, 20px) 0;
  overflow: hidden;
  background: var(--pink);
  color: var(--ink);
}

.tk-a { transform: rotate(-1.6deg); }
.tk-b {
  transform: rotate(1.1deg);
  margin-top: -clamp(18px, 3vw, 42px);
  background: var(--ink);
  color: var(--paper);
  position: relative;
  z-index: 1;
}

.tt-track {
  display: flex;
  width: max-content;
  animation: roll 28s linear infinite;
  will-change: transform;
}

.tt {
  white-space: nowrap;
  font-size: clamp(16px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
}

@keyframes roll { to { transform: translateX(-50%); } }

/* ---- fragments ------------------------------------------------------------------- */
.fragments { padding: clamp(64px, 9vw, 140px) 0 clamp(96px, 13vw, 200px); }

.frag-list { max-width: 1300px; }

.frag {
  margin: 0;
  font-size: clamp(38px, 6.6vw, 108px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.028em;
  cursor: default;
}

.frag-long {
  font-size: clamp(27px, 4.6vw, 72px);
  max-width: 20ch;
  margin-top: clamp(18px, 2.6vw, 40px);
}

/* Hover swap: italic ghost slides up over the roman word — one clip window
   PER WORD (built by JS from [data-swap]). A single word has no break
   opportunities, so its dual-item grid cell can never wrap or clip; long
   lines wrap BETWEEN word windows. The cell is sized by whichever variant is
   wider, so the italic (wider than upright in Poppins) can never be cut at
   the right edge. Bottom padding clears descenders. */
.fi {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.06em 0 0.24em;
  margin: -0.06em 0 -0.24em;
}

.fw,
.fghost {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.fw { transition: transform 0.55s var(--ease); }

.fghost {
  font-style: italic;
  color: var(--ink);
  transform: translate3d(0, 135%, 0);
  transition: transform 0.55s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .frag:hover .fw,
  .frag:focus-within .fw { transform: translate3d(0, -112%, 0); }
  .frag:hover .fghost,
  .frag:focus-within .fghost { transform: translate3d(0, 0, 0); }
}

/* ---- wonder (dark chapter) -------------------------------------------------------- */
.wonder {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(110px, 15vw, 220px) 0;
}

.wm {
  position: absolute;
  right: -3vw;
  top: 2vw;
  z-index: 1;
  font-weight: 600;
  font-size: 24vw;
  line-height: 0.8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(252, 251, 249, 0.10);
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}

.glow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 46vmax;
  height: 46vmax;
  background: radial-gradient(circle, rgba(255, 172, 236, 0.18), transparent 62%);
  pointer-events: none;
  will-change: transform;
}

.wonder .section-inner { max-width: 1400px; }

.wonder-big {
  margin: 0;
  font-size: clamp(30px, 4.8vw, 76px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.02em;
  max-width: 23ch;
}

.wonder-big .w-pink { padding-right: 5px; }

.em-d { color: var(--paper-20); }

.wonder-question {
  margin: clamp(28px, 4vw, 64px) 0 0 clamp(24px, 14vw, 280px);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 76px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--pink);
  transform: rotate(-1.2deg);
  transform-origin: 0 0;
}

/* ---- works --------------------------------------------------------------------------- */
.works { padding: clamp(88px, 12vw, 180px) 0 clamp(96px, 13vw, 200px); }

.work {
  display: grid;
  grid-template-columns: clamp(96px, 12vw, 180px) minmax(0, 720px);
  gap: 20px clamp(40px, 6vw, 110px);
  padding: clamp(36px, 4.5vw, 64px) 0;
  border-top: 1px solid var(--line);
}
.work:last-child { border-bottom: 1px solid var(--line); }

.wn {
  margin: 0;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.2;
  color: var(--ink-45);
  transition: color 0.5s var(--ease), transform 0.6s var(--ease);
}

.work:hover .wn { color: var(--pink); transform: translateX(10px); }

.work-label {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.work-text {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-70);
  max-width: 58ch;
}

/* ---- CTA -------------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--pink);
  padding: clamp(96px, 14vw, 220px) 0 clamp(64px, 9vw, 140px);
}

.amp {
  position: absolute;
  right: -6vw;
  bottom: -26vw;
  z-index: 1;
  font-style: italic;
  font-weight: 500;
  font-size: 56vw;
  line-height: 0.8;
  color: var(--ink);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.cta-lede {
  margin: 0 0 clamp(24px, 3.5vw, 48px);
  font-size: clamp(23px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 25ch;
}

.cta-giant { margin: 0 0 clamp(36px, 5vw, 72px); }

.magnet { display: inline-block; will-change: transform; }

.m-inner {
  display: inline-block;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(52px, 13vw, 224px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 95%;
  background-size: 0% 0.045em;
  transition: background-size 0.7s var(--ease);
}

.magnet:hover .m-inner,
.magnet:focus-visible .m-inner { background-size: 100% 0.045em; outline: none; }

/* ---- contact form (Formspree-ready) ---------------------------------------- */
.cform { max-width: 780px; }

.cform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(28px, 4vw, 56px);
}

.cform-field {
  display: flex;
  flex-direction: column;
  margin: 0 0 clamp(24px, 3vw, 40px);
}

.cform-field label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(34, 34, 34, 0.55);
}

.cform-field input,
.cform-field textarea {
  border: 0;
  border-bottom: 1px solid rgba(34, 34, 34, 0.4);
  background: transparent;
  padding: 6px 0 12px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--ink);
  border-radius: 0;
}

.cform-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }

.cform-field input:focus,
.cform-field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
  box-shadow: 0 1px 0 var(--ink);
}

.cform-gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cform-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.cform-foot button {
  background: var(--ink);
  color: var(--pink);
  border: 1px solid var(--ink);
  padding: 14px 40px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}

.cform-foot button:hover { background: var(--paper); color: var(--ink); }
.cform-foot button:disabled { opacity: 0.55; cursor: default; }
.cform-foot button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.cform-status {
  margin: 0;
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.cform-status.show { opacity: 1; }

/* ---- footer ------------------------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(40px, 6vw, 80px) 0;
}

.footer-inner {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}

.footer-inner img { height: clamp(44px, 4.5vw, 68px); width: auto; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  align-items: baseline;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-45);
}

.footer-links a {
  text-decoration: none;
  border-bottom: 1px solid var(--pink);
  transition: background 0.3s ease;
}
.footer-links a:hover { background: var(--pink); }

.top-link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-45);
  text-decoration: none;
  transition: color 0.3s ease;
}
.top-link:hover { color: var(--ink); }

/* ---- reveal system ------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].in { opacity: 1; transform: translate3d(0, 0, 0); }

[data-parallax] { will-change: transform; }

a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.cta a:focus-visible, .magnet:focus-visible { outline: none; }

/* ---- mobile ---------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --gutter: 28px; }
  .work { grid-template-columns: 1fr; gap: 16px; }
  .wn { font-size: clamp(48px, 13vw, 72px); }
  .wonder-question { margin-left: 0; }
  .site-header { align-items: center; }
  .talk-pill { margin-top: 0; padding: 10px 18px; font-size: 12px; }
  .badge { display: none; } /* decorative; would collide with wrapped hero type */
  .hero-meta { display: none; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .cform-row { grid-template-columns: 1fr; gap: 0; }
  .ind1, .ind2, .ind3 { margin-left: 0; }
}

/* ---- reduced motion ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .preloader { display: none !important; }
  .tt-track, .badge, .badge-core, .cue-line::after { animation: none !important; }
  .cue-line::after { transform: translateX(0); }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .wi { transform: none !important; transition: none !important; }
  .fw, .fghost, .m-inner, .wn, .footer-links a { transition: none !important; }
}