/* Caduceus Studio — design-system rebuild, July 2026 */

/* Self-hosted fonts (no external CDN). Display: Clash Display. Body: Satoshi. */
@font-face{font-family:"Clash Display";src:url("../assets/fonts/clash-display-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/clash-display-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/clash-display-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../assets/fonts/clash-display-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../assets/fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../assets/fonts/satoshi-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../assets/fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root {
  --teal: #163a3c;
  --sand: #f3ead6;
  --cream: #fbf6e8;
  --gold: #eab13c;
  --flame: #f0824a;
  --sage: #9ba986;
  --light-sage: #c6d4a8;
  --purple: #65265d;
  --electric-lime: #c9f43d;
  --ink-soft: rgba(22, 58, 60, .68);
  --cream-soft: rgba(251, 246, 232, .72);
  --line-dark: rgba(22, 58, 60, .16);
  --line-light: rgba(251, 246, 232, .2);
  --shadow: 0 22px 65px rgba(22, 58, 60, .16);
  --font-display: "Clash Display", system-ui, sans-serif;
  --font-body: "Satoshi", system-ui, sans-serif;
  --display-tracking: .012em; /* headline letter-spacing — nudge to taste */
  --ease: cubic-bezier(.2, .75, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--teal); }
body {
  min-width: 320px;
  overflow-x: hidden;
  color: var(--teal);
  background: var(--cream);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1; letter-spacing: var(--display-tracking); }
h1, h2 { font-size: clamp(2.65rem, 6vw, 6.6rem); }
p { text-wrap: pretty; }
.wide { width: min(1400px, calc(100% - 8vw)); margin-inline: auto; }
.narrow { width: min(850px, calc(100% - 10vw)); margin-inline: auto; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1001; padding: .8rem 1rem; background: var(--electric-lime); color: var(--teal); }
.skip-link:focus { top: 1rem; }

/* Navigation */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 76px;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 clamp(1rem, 4vw, 3.5rem);
  color: var(--cream);
  background: rgba(22, 58, 60, .94);
  border-bottom: 1px solid var(--line-light);
  backdrop-filter: blur(14px);
}
.brand-tab {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 98px;
  padding: .7rem .95rem .85rem;
  color: var(--cream);
  text-decoration: none;
  background: var(--teal);
  border: 1px solid var(--line-light);
  border-top: 0;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  transition: transform .35s var(--ease);
}
.brand-tab:hover { transform: translateY(4px); }
.brand-mark-wrap { width: 54px; aspect-ratio: 1; display: grid; place-items: center; }
.brand-mark-wrap img { width: 54px; max-height: 54px; object-fit: contain; }
.brand-square { width: 62px; height: auto; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.8rem); }
.site-nav a { position: relative; text-decoration: none; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.45rem; height: 2px; background: var(--light-sage); transition: right .3s var(--ease); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; }
.site-nav .nav-enquiry { padding: .62rem 1rem; border: 1px solid rgba(201, 244, 61, .7); border-radius: 999px; }
.site-nav .nav-enquiry::after { display: none; }
.site-nav .nav-enquiry:hover { background: var(--electric-lime); color: var(--teal); }
.menu-button { display: none; margin-left: auto; border: 0; background: none; padding: .5rem; }
.menu-button span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--cream); }

/* Hero */
.hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--teal); color: var(--cream); }
.hero-slides, .hero-slide, .hero-slide img, .hero-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
/* clip the slides' zoom-settle inside their box — without this the scaling
   poster pokes below the container, past the gradient fade (visible as a
   band that "drifts into place" during crossfades) */
.hero-slides { overflow: hidden; }
.hero-slide { opacity: 0; transform: scale(1.04); transition: opacity 1.35s ease, transform 7s ease; }
.hero-slide.is-active { opacity: 1; transform: scale(1); z-index: 1; }
.hero-slide img { object-fit: cover; object-position: 50% 30%; } /* Dreamplays */
.hero-slide:nth-child(2) img { object-position: 50% 45%; } /* Magic Inc */
.hero-scrim { z-index: 2; background: linear-gradient(180deg, rgba(22,58,60,.46) 0%, rgba(22,58,60,.05) 35%, rgba(22,58,60,.18) 58%, rgba(22,58,60,.82) 84%, #163a3c 97%); }
.hero-brand {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 4rem;
  width: min(560px, 64vw, calc(100vw - 2.5rem));
  text-align: center;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, .35));
  animation: brand-arrive 2.2s var(--ease) .25s both;
}
.hero-brand img { width: 100%; }
.hero-brand span { display: block; margin-top: .6rem; font-family: var(--font-display); font-size: clamp(.72rem, 1.2vw, 1rem); letter-spacing: .52em; text-transform: uppercase; }
@keyframes brand-arrive { from { opacity: 0; transform: translate(-50%, 30px); filter: blur(12px) drop-shadow(0 0 25px rgba(198,212,168,.45)); } to { opacity: 1; transform: translate(-50%, 0); filter: blur(0) drop-shadow(0 8px 28px rgba(0,0,0,.35)); } }
.hero-switcher { position: absolute; z-index: 4; left: clamp(1.4rem, 4vw, 3.5rem); bottom: 2.3rem; display: flex; gap: .65rem; }
.hero-switcher button { width: 32px; height: 3px; border: 0; background: rgba(251,246,232,.35); cursor: pointer; transition: width .3s, background .3s; }
.hero-switcher button.is-active { width: 62px; background: var(--electric-lime); }
.hero-world-name { position: absolute; z-index: 4; left: clamp(1.4rem, 4vw, 3.5rem); bottom: 3.2rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.scroll-cue { position: absolute; z-index: 4; right: clamp(1.4rem, 4vw, 3.5rem); bottom: 2rem; width: 44px; height: 44px; border: 1px solid rgba(251,246,232,.5); border-radius: 50%; }
.scroll-cue span { position: absolute; width: 1px; height: 17px; left: 50%; top: 12px; background: var(--cream); }
.scroll-cue span::after { content: ""; position: absolute; left: -4px; bottom: 0; width: 7px; height: 7px; border-right: 1px solid var(--cream); border-bottom: 1px solid var(--cream); transform: rotate(45deg); }

/* Section foundations */
.section-cream { background: var(--cream); }
.section-sand { background: var(--sand); }
.section-teal { background: var(--teal); color: var(--cream); }
.section-light-sage { background: var(--light-sage); }
.intro { position: relative; padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(3.5rem, 6vw, 6rem); text-align: center; }
/* Always exactly two lines: each .h1-line is an unbreakable block, and the
   font scales with the viewport so the longer line always fits one row. */
/* Sized for the current split: longest line "gets you dreaming" (~9em wide) */
.intro h1 { margin: 0 auto; font-size: clamp(1.6rem, 9.4vw, 4.3rem); }
.h1-line { display: block; white-space: nowrap; }
.intro-copy { max-width: 650px; margin: 2rem auto 0; font-size: clamp(1.05rem, 1.4vw, 1.28rem); color: var(--ink-soft); }
.eyebrow { margin-bottom: 1.4rem; color: var(--flame); font-size: .7rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; }
.eyebrow-light { color: var(--light-sage); }
.copy-note { display: inline-block; margin: 0 .35rem .25rem 0; padding: .18rem .55rem; color: #a45131; background: rgba(240,130,74,.08); border: 1px dashed rgba(240,130,74,.72); border-radius: 999px; font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; vertical-align: .13em; }
.copy-note-on-dark { color: var(--electric-lime); background: rgba(201,244,61,.06); border-color: rgba(201,244,61,.55); }
/* (Project badge row removed 2026-07-21 — duplicated the tarot slate below.) */
.section-heading { max-width: 800px; }
.section-heading h2 { max-width: 11ch; }
.section-heading > p:last-child { max-width: 600px; margin-top: 1.7rem; color: var(--ink-soft); font-size: 1rem; }
.section-teal .section-heading > p:last-child { color: var(--cream-soft); }

/* Solid wave dividers between sections (per Charlotte 2026-08-02:
   solid shape divides, not line squiggles). Colours are inline per instance. */
.wave-divider { line-height: 0; margin-top: -1px; margin-bottom: -1px; position: relative; z-index: 4; }
.wave-divider svg { width: 100%; height: clamp(34px, 6vw, 76px); display: block; overflow: visible; }

/* Originals / landscape tarot */
.originals { padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
/* The slate is a real 3x2 grid. Cards live in their grid slots permanently;
   the "pile" is a per-card transform back to a shared origin, measured in JS
   (--pile-dx/--pile-dy). Dealing just removes that transform, so the cards
   slide down and outward into place. Layout never depends on the animation. */
.tarot-stage {
  display: grid;
  /* 2 columns for the current 4-card slate (clean 2x2). Bump back to
     repeat(3, 1fr) when the slate grows to 5-6 cards again. */
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.7vw, 30px);
  max-width: 1080px;
  margin-inline: auto;
  margin-top: clamp(3rem, 7vw, 6.5rem);
  perspective: 1800px;
  isolation: isolate;
}
.tarot-card {
  position: relative;
  aspect-ratio: 1256 / 760;
  transform: translate3d(var(--pile-dx, 0px), var(--pile-dy, 0px), 0) rotate(var(--pile-r, 0deg)) scale(var(--pile-s, 1));
  transition: transform 1.05s var(--ease) var(--delay), opacity .5s ease var(--delay);
}
/* Piled: stacked at the origin, newest card on top */
.tarot-stage.is-piled .tarot-card { z-index: var(--pile-z, 1); }
/* Dealt: no transform at all — the card rests in its natural grid slot */
.tarot-stage.is-dealt .tarot-card { transform: none; }
.tarot-card:hover, .tarot-card:focus-within { z-index: 30; }
.tarot-stage.is-dealt .tarot-card:hover { transform: translate3d(0, -14px, 0) scale(1.025); }
/* While measuring the pile, suppress transitions so the cards start piled
   rather than animating into the pile. */
.tarot-stage.is-measuring .tarot-card { transition: none; }
.tarot-inner { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 16px; background: transparent; color: inherit; cursor: pointer; transform-style: preserve-3d; transition: transform .9s var(--ease), filter .35s; box-shadow: var(--shadow); }
.tarot-inner:focus-visible { outline: 3px solid var(--electric-lime); outline-offset: 6px; }
.tarot-side { position: absolute; inset: 0; display: block; overflow: hidden; border: 1px solid rgba(251,246,232,.36); border-radius: 16px; backface-visibility: hidden; }
.tarot-back { background: var(--teal); }
.tarot-back::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(251,246,232,.48); border-radius: 11px; pointer-events: none; }
.tarot-back-art { position: absolute; left: 50%; top: 50%; width: 60.51%; height: 165.26%; max-width: none; object-fit: cover; transform: translate(-50%, -50%) rotate(90deg); }
.tarot-front { transform: rotateY(180deg); background: var(--teal); }
.tarot-front > img { width: 100%; height: 100%; object-fit: cover; }
.tarot-front-magic > img { object-fit: cover; object-position: 50% 69%; }
.tarot-card.is-flipped .tarot-inner { transform: rotateY(180deg); }
.project-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .55rem; padding: clamp(1.15rem, 2vw, 2rem); color: var(--cream); text-align: left; background: linear-gradient(180deg, rgba(22,58,60,.08) 5%, rgba(22,58,60,.22) 43%, rgba(22,58,60,.94) 100%); opacity: 0; transition: opacity .35s ease; }
/* Details follow the pointer: visible on hover, gone on leave.
   :focus-visible (not :focus-within) so a mouse click doesn't leave it stuck on.
   .show-details is the tap equivalent, applied by JS on touch devices only. */
.tarot-card:hover .project-overlay,
.tarot-card .tarot-inner:focus-visible .project-overlay,
.tarot-card.show-details .project-overlay { opacity: 1; }
.project-overlay strong { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1; }
.project-type { color: var(--electric-lime); font-size: .63rem; letter-spacing: .15em; text-transform: uppercase; }
.project-copy { max-width: 38ch; color: rgba(251,246,232,.82); font-size: .78rem; }
.back-label { position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: 1rem; padding: .55rem .8rem; color: var(--cream); background: rgba(22,58,60,.82); border: 1px solid rgba(251,246,232,.24); border-radius: 999px; font-size: .65rem; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.tarot-instruction { max-width: 560px; margin: 0 auto; color: var(--cream-soft); text-align: center; font-size: .75rem; letter-spacing: .07em; }

/* Work */
.work { padding: clamp(6rem, 10vw, 10rem) 0; }
/* 3 across on desktop per Charlotte (9 shows = 3x3) */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin-top: 4rem; }
.work-card { min-width: 0; }
.work-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; background: var(--cream); border: 1px solid var(--line-dark); border-radius: 14px; box-shadow: 0 12px 30px rgba(22,58,60,.08); }
.work-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-card h3 { margin-top: 1.15rem; font-size: clamp(1.05rem, 1.5vw, 1.35rem); letter-spacing: 0; }
.work-card p { margin-top: .35rem; color: var(--ink-soft); font-size: .78rem; }
.work-note { margin-top: 3rem; color: var(--ink-soft); font-size: .85rem; }

/* Client/logo strip */
.clients { padding: clamp(5rem, 8vw, 8rem) 0; text-align: center; }
.logo-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.8rem, 4.5vw, 4rem); margin-top: 2.8rem; }
.logo-strip img { height: clamp(24px, 3vw, 38px); width: auto; }
/* squarer stacked marks read too small at wordmark height */
.logo-strip img.logo-tall { height: clamp(44px, 5.4vw, 68px); }
.asset-note { margin-top: 1.2rem; color: var(--ink-soft); font-size: .72rem; }

/* Founder */
.founder { padding: clamp(6rem, 10vw, 11rem) 0; }
/* "About Us" as a proper section title (was a tiny eyebrow that disappeared) */
.about-eyebrow { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); font-family: var(--font-display); font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 700; letter-spacing: .01em; text-transform: none; color: var(--teal); }
.founder-grid { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(380px, 1.18fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; }
.founder-grid + .founder-grid { margin-top: clamp(4rem, 8vw, 7rem); }
/* Second bio mirrors the first: copy left, portrait right */
.founder-grid-reverse { grid-template-columns: minmax(380px, 1.18fr) minmax(300px, .82fr); }
.role-line { margin-top: .6rem; font-weight: 700; color: var(--ink-soft); font-size: 1.05rem; letter-spacing: .04em; }
/* The crossed-out word in "what we're ~working~ playing on" */
.playful-strike { text-decoration-color: var(--flame); text-decoration-thickness: 2px; }
.portrait-placeholder { display: grid; place-items: center; }
/* max-height stops the portrait ballooning when the grid stacks or the
   window is narrow — it should never dominate the viewport. */
/* Portal-arch frame — the brand's doorway mark as a photo window */
.portrait-window { position: relative; width: 100%; max-width: 420px; max-height: 58vh; aspect-ratio: 4 / 5; margin-inline: auto; overflow: hidden; border-radius: 999px 999px 20px 20px; background: var(--sage); box-shadow: var(--shadow); }
.portrait-window img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 35%; }
/* Names: max two lines, sized to fill the column ("Charlotte Rose" is the
   longest line at ~7.5em; 4.4vw keeps it inside the desktop grid column). */
.founder-copy h2 { font-size: clamp(2rem, 4.4vw, 4rem); }
.h2-line { display: block; white-space: nowrap; }
.founder-copy > p:not(.eyebrow) { max-width: 680px; margin-top: .9rem; color: rgba(22,58,60,.8); font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.66; }
.founder-copy p.role-line { margin-top: .45rem; }
.founder-copy .management-note { padding-top: 1.4rem; border-top: 1px solid rgba(22,58,60,.22); font-size: .83rem !important; }

/* Enquiry */
.enquiries { padding: clamp(6rem, 10vw, 10rem) 0; }
.enquiry-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(4rem, 8vw, 9rem); align-items: start; }
.enquiry-intro { position: sticky; top: 130px; }
.enquiry-mark { width: 132px; margin-bottom: 2rem; }
.enquiry-intro h2 { max-width: 8ch; }
.enquiry-intro > p:not(.eyebrow):not(.submission-note):not(.enquiry-contact) { max-width: 480px; margin-top: 1.7rem; color: var(--cream-soft); }
.submission-note { max-width: 480px; margin-top: 2rem; padding-top: 1.2rem; color: var(--light-sage); border-top: 1px solid var(--line-light); font-size: .82rem; }
/* Enquiry form removed 2026-08-24: the intro is alone in a 2-col grid, so centre
   it. Delete this block (and the .no-form class) when the form comes back. */
.enquiry-grid.no-form { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.enquiry-grid.no-form .enquiry-intro { position: static; max-width: 620px; }
.enquiry-grid.no-form .enquiry-intro h2 { max-width: none; }
.enquiry-grid.no-form .enquiry-intro > p, .enquiry-grid.no-form .submission-note { margin-left: auto; margin-right: auto; }
/* global `img { display: block }` means text-align cannot centre this - needs auto margins */
.enquiry-grid.no-form .enquiry-mark { margin-left: auto; margin-right: auto; }
.enquiry-contact { margin-top: clamp(1.4rem, 2.6vw, 2.1rem); font-family: var(--font-display); font-size: clamp(1.25rem, 3.1vw, 2rem); line-height: 1.15; }
.mail-link { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(251,246,232,.28); padding-bottom: .1em; white-space: nowrap; transition: color .3s var(--ease), border-color .3s var(--ease); }
.mail-link:hover, .mail-link:focus-visible { color: var(--electric-lime); border-color: var(--electric-lime); }
.enquiry-form { display: grid; gap: 1.1rem; padding: clamp(1.4rem, 3vw, 2.7rem); background: rgba(251,246,232,.06); border: 1px solid var(--line-light); border-radius: 16px; }
.enquiry-form label { display: grid; gap: .5rem; color: var(--light-sage); font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { width: 100%; padding: .8rem .1rem; color: var(--cream); background: transparent; border: 0; border-bottom: 1px solid rgba(251,246,232,.35); border-radius: 0; outline: 0; resize: vertical; }
.enquiry-form select { color-scheme: dark; }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { border-color: var(--electric-lime); }
.enquiry-form .confirm-line { display: flex; grid-template-columns: auto 1fr; align-items: flex-start; gap: .8rem; margin-top: .5rem; color: var(--cream-soft); letter-spacing: 0; line-height: 1.4; text-transform: none; }
.confirm-line input { width: 18px; height: 18px; padding: 0; accent-color: var(--electric-lime); }
.enquiry-form button { justify-self: start; margin-top: .8rem; padding: .8rem 1.25rem; color: var(--teal); background: var(--electric-lime); border: 1px solid var(--electric-lime); border-radius: 999px; cursor: pointer; font-weight: 600; }
.enquiry-form button:hover { color: var(--cream); background: transparent; }
.form-status { color: var(--cream-soft); font-size: .72rem; }

/* Footer + reveals */
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 2.4rem 4vw 3rem; color: var(--cream-soft); background: var(--teal); border-top: 1px solid var(--line-light); font-size: .74rem; }
.site-footer img { width: 150px; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }


/* Strip-mode hero for anything narrower than a full desktop window: the
   poster shows COMPLETE at its native 16:9 (all slides share that ratio, so
   nothing crops), and the brand block sits below the image on teal instead
   of overlaying it. 1100px catches tablets and tall half-screen windows. */
@media (max-width: 1100px) {
  /* padding-top clears the fixed header, which otherwise covers the top of the poster */
  .hero { min-height: auto; display: flex; flex-direction: column; padding: 76px 0 1.2rem; }
  /* Order: image -> show name + dots as its caption -> wordmark -> cue,
     so the slideshow label stays attached to the artwork it names. */
  .hero-slides { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; flex: none; order: 0; }
  .hero-slide img { object-position: center; }
  .hero-scrim { display: none; }
  /* animation: none is load-bearing — brand-arrive ends on translateX(-50%)
     with fill-mode both, which would permanently drag the static block half
     its width off-screen (the cut-off wordmark bug, 2026-08-02). */
  /* Wordmark stamps over the poster's bottom edge (like the desktop lockup) */
  .hero-brand { position: static; order: 1; width: min(420px, 62vw); margin: -2.4rem auto 0; transform: none; animation: none; text-align: center; z-index: 2; }
  .hero-world-name { position: static; order: 2; margin: 1.6rem auto 0; text-align: center; }
  .hero-switcher { position: static; order: 3; justify-content: center; margin: .55rem auto 0; }
  /* relative (not static) + right/bottom reset so the inner arrow stays centred in the ring */
  .scroll-cue { position: relative; order: 4; right: auto; bottom: auto; display: block; margin: 1.3rem auto 0; }
}

@media (max-width: 1180px) {
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet: 2 across so the posters stay legible */
@media (max-width: 980px) {
  .tarot-stage { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  h1, h2 { font-size: clamp(2.6rem, 12vw, 4.9rem); }
  .site-header { height: 66px; }
  /* Charlotte's mobile mockup (2026-08-03): art runs from the very top of the
     screen (header hidden until you scroll), portrait crop, and fades
     seamlessly into the teal via a gradient like the desktop scrim. */
  .hero { padding-top: 0; }
  .hero-slides { aspect-ratio: 4 / 5; }
  .hero-slides::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 42%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(22,58,60,0) 0%, rgba(22,58,60,.55) 55%, #163a3c 96%); }
  .hero-brand { margin-top: -4.4rem; width: min(480px, 78vw); }
  .hero-brand span { display: none; } /* no STUDIO tag on the phone lockup */
  /* Header slides down only once you scroll (JS toggles body.hdr-hidden) */
  .site-header { transition: transform .6s var(--ease); }
  body.hdr-hidden .site-header { transform: translateY(-200px); }
  .brand-tab { min-height: 84px; padding: .55rem .7rem .65rem; }
  .brand-mark-wrap { width: 32px; }
  .brand-mark-wrap img { width: 31px; }
  .brand-square { width: 48px; }
  .menu-button { display: block; }
  .site-nav { position: absolute; left: 0; right: 0; top: 66px; display: none; flex-direction: column; align-items: flex-end; gap: 1.4rem; padding: 2rem 1.4rem; background: var(--teal); border-bottom: 1px solid var(--line-light); }
  .site-header.menu-open .site-nav { display: flex; }
  /* Mobile: one column — cards slide straight down into place, no fan */
  .tarot-stage { grid-template-columns: 1fr; gap: 1.5rem; margin: 4rem auto 0; max-width: 500px; }
  .tarot-card { transition-delay: calc(var(--delay) / 3); }
  .tarot-stage.is-dealt .tarot-card:hover { transform: none; }
  .tarot-instruction { margin-top: 2.7rem; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder-grid, .enquiry-grid { grid-template-columns: 1fr; }
  .portrait-window { max-width: 340px; }
  /* Name fills the stacked column width on mobile */
  .founder-copy h2 { font-size: clamp(2.2rem, 11.4vw, 4rem); }
  .enquiry-intro { position: static; }
}

@media (max-width: 520px) {
  .wide { width: min(100% - 2rem, 1400px); }
  .narrow { width: min(100% - 2rem, 850px); }
  .brand-mark-wrap { display: none; }
  .hero-brand span { letter-spacing: .42em; }
  .hero-switcher button { width: 22px; }
  .hero-switcher button.is-active { width: 42px; }
  .scroll-cue { width: 40px; height: 40px; }
  /* two across on mobile per Charlotte */
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .work-image { aspect-ratio: 16 / 10; }
  .work-card h3 { font-size: .92rem; }
  .work-card p { font-size: .68rem; }
  .logo-strip { gap: 1.4rem 2rem; }
  .logo-strip img { height: 22px; }
  .logo-strip img.logo-tall { height: 40px; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  /* No dealing animation — cards sit in their grid slots from the start */
  .tarot-stage .tarot-card { opacity: 1; transform: none !important; }
}


/* Service Work heading per Charlotte: centred; one line on desktop, max two
   anywhere (font scales to fit the full heading width, ~16.2em). */
.work .section-heading { max-width: none; text-align: center; }
/* measured: full heading = 16.88em wide; 5.4vw / 4.85rem keeps it one line
   in the 92vw/1325px container on desktop, two lines below that */
.work .section-heading h2 { max-width: none; margin-inline: auto; font-size: clamp(1.4rem, 5.4vw, 4.85rem); }
.work .section-heading > p:last-child { max-width: 900px; margin-inline: auto; }

/* Logo strip inside About, under Charlotte's bio */
.about-logos { margin: clamp(3rem, 6vw, 5rem) 0 clamp(1rem, 2vw, 1.5rem); text-align: center; }
.about-logos .logo-strip { margin-top: 1.8rem; }


/* Tiny ouroboros as a rest-stop between the two bios */
.bio-divider { text-align: center; margin: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 6vw, 5rem); }
.bio-divider img { display: inline-block; width: clamp(56px, 7vw, 84px); opacity: .9; }

/* Desktop keeps Tim mirrored (copy left, photo right) even though the photo
   comes first in the DOM for a sane mobile stack */
@media (min-width: 801px) {
  .founder-grid-reverse .portrait-window { order: 2; }
  .founder-grid-reverse .founder-copy { order: 1; }
}


/* Cosmic-Dino-style beckoning bounce on the scroll cue */
.scroll-cue { animation: cue-bob 2.2s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 7px; } }


/* Electric-lime moments (teal grounds only — lime text fails on cream) */
.playful-strike { text-decoration-color: var(--electric-lime); }
.site-nav a::after { background: var(--electric-lime); }
.lime { color: var(--electric-lime); }


/* Launch-simple masthead: wordmark + description below (the intro section),
   no big imagery. The slideshow hero CSS stays for when it returns. */
.masthead { position: relative; min-height: min(72svh, 640px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 120px 1.5rem 5rem; background: var(--teal); color: var(--cream); }
.masthead-mark { width: clamp(64px, 8vw, 96px); margin-bottom: .6rem; }
.masthead-wordmark { width: min(560px, 78vw); filter: drop-shadow(0 6px 22px rgba(0,0,0,.3)); animation: masthead-in 1.8s var(--ease) .2s both; }
.masthead-tag { font-family: var(--font-display); font-size: clamp(.72rem, 1.2vw, 1rem); letter-spacing: .52em; text-indent: .52em; text-transform: uppercase; color: var(--cream-soft); }
.masthead .scroll-cue { position: static; right: auto; bottom: auto; margin-top: 2.2rem; }
@media (max-width: 800px) {
  .masthead { min-height: 58svh; padding-top: 100px; }
}

@keyframes masthead-in { from { opacity: 0; transform: translateY(24px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }


/* "(coming soon)" tag on the Originals heading — lime, lighter, unmissable.
   Sized with its own clamp, NOT an `em` ratio of the h2: the heading clamps down
   hard on mobile, and .34em of that rendered at ~7px. Floor keeps it legible. */
.soon { display: block; margin-top: .55em; font-size: clamp(.8rem, 1.9vw, 1.65rem); font-weight: 600; letter-spacing: .06em; color: var(--electric-lime); }



/* Originals heading matches the Service Work heading size, centred */
.originals .section-heading { max-width: none; text-align: center; }
.originals .section-heading h2 { max-width: none; margin-inline: auto; font-size: clamp(1.4rem, 5.4vw, 4.85rem); }


/* Originals band: heading is the only content — keep it optically centred */
.originals .section-heading { margin: 0 auto; }
.originals .section-heading h2 { line-height: 1.05; }


/* AWGIE award lines on work cards */
.work-award { margin-top: .35rem; font-size: .72rem; font-weight: 700; color: #B85C36; line-height: 1.4; }