/* =========================================================
   The Dancer's Desk
   Palette and type pulled from the Dance Audition Planner Vol.01
   ========================================================= */

:root{
  --bone:      #F4F0E8;
  --bone-2:    #EDE7DB;
  --paper:     #FAF8F4;
  --greige:    #D9D2C5;

  --ink:       #2C2823;
  --ink-80:    rgba(44,40,35,.80);
  --ink-60:    rgba(44,40,35,.60);
  --ink-40:    rgba(44,40,35,.40);
  --cocoa:     #4B3A2B;

  --blue-deep: #3D5FA3;
  --blue:      #6285C1;
  --blue-soft: #A6C4E7;
  --blue-mist: #D3E1F1;

  --sage:      #DCE2DE;

  --line:      rgba(44,40,35,.16);
  --line-2:    rgba(44,40,35,.28);

  --display: 'Figtree', 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --label:   'Space Grotesk', 'Figtree', monospace;
  --round:   'Quicksand', 'Figtree', sans-serif;

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --r: 4px;
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--display);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

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

/* section anchors clear of any floating chrome */
[id]{ scroll-margin-top:24px; }

.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.34; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

.sketch{
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; pointer-events:none;
}

/* =========================================================
   TYPE
   ========================================================= */
.h2{
  font-size:clamp(2rem, 4.4vw, 3.5rem);
  line-height:1.02; letter-spacing:-.035em; font-weight:800; margin:0;
}
.h2--light{ color:var(--paper); }

.h3{
  font-size:clamp(1.35rem, 2vw, 1.75rem);
  line-height:1.1; letter-spacing:-.028em; font-weight:800; margin:0 0 .5rem;
}

.eyebrow{
  font-family:var(--label); font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-60);
  margin:0 0 1.1rem;
}
.eyebrow--light{ color:rgba(250,248,244,.72); }

.body{ margin:0 0 1rem; color:var(--ink-80); }
.body-lg{ font-size:1.075rem; line-height:1.7; color:var(--ink-80); margin:0 0 1.25rem; }
.dot{ opacity:.5; padding-inline:.35em; }

.oval-badge{
  display:inline-block; font-family:var(--round); font-weight:600;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cocoa); padding:.75em 2.4em;
  border:1px solid var(--line-2); border-radius:50%/100%; margin:0 0 1.6rem;
}
.oval-badge--sm{ font-size:.63rem; padding:.7em 2em; }

.scribbled{ position:relative; display:inline-block; }
.scribble{
  position:absolute; left:-5%; top:-22%; width:110%; height:150%;
  fill:none; stroke:var(--ink-40); stroke-width:1.5;
  stroke-linecap:round; vector-effect:non-scaling-stroke; pointer-events:none;
}
.scribble-under{
  display:block; width:230px; height:24px; margin-top:.9rem;
  fill:none; stroke:var(--ink-40); stroke-width:1.6;
  stroke-linecap:round; vector-effect:non-scaling-stroke;
}

.stamp{
  display:grid; place-items:center; width:72px; height:72px; border-radius:50%;
  background:var(--paper); border:1px solid var(--cocoa);
  box-shadow:0 0 0 3px var(--paper), 0 0 0 4px rgba(75,58,43,.35);
  font-family:var(--round); font-weight:600; font-size:.6rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--cocoa);
  text-align:center; line-height:1.1; margin-bottom:1.4rem;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:.9rem;
  letter-spacing:-.01em; padding:.85em 1.7em; border-radius:100px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--lg{ padding:1.05em 2.2em; font-size:.98rem; }
.btn--ink{ background:var(--ink); color:var(--bone); }
.btn--ink:hover{ background:var(--cocoa); }
.btn--paper{ background:var(--paper); color:var(--ink); }
.btn--paper:hover{ background:var(--bone-2); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }

.link-arrow{
  font-weight:600; font-size:.95rem; text-decoration:none;
  border-bottom:1px solid var(--line-2); padding-bottom:2px;
  transition:border-color .18s ease;
}
.link-arrow::after{ content:" →"; }
.link-arrow:hover{ border-color:var(--ink); }

.round-btn{
  width:46px; height:46px; border-radius:50%;
  background:transparent; color:var(--paper);
  border:1px solid rgba(250,248,244,.4); font-size:1rem; cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.round-btn:hover{ background:var(--paper); color:var(--blue-deep); }

.chip{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--label); font-size:.6rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; padding:.5em 1em; border-radius:100px;
}
.chip--ink{ background:var(--ink); color:var(--bone); }

.pill{
  font-family:var(--display); font-size:.8rem; font-weight:600;
  padding:.5em 1.05em; border-radius:100px; cursor:pointer;
  background:transparent; color:var(--ink-80);
  border:1px solid var(--line-2);
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.pill:hover{ border-color:var(--ink); }
.pill.is-on{ background:var(--ink); color:var(--bone); border-color:var(--ink); }

/* =========================================================
   TOP BAR, static so it scrolls away
   ========================================================= */
.topbar{
  position:relative; z-index:10;
  max-width:var(--wrap); margin-inline:auto;
  padding:1.6rem var(--pad) 0;
  display:flex; align-items:center; gap:2rem;
}

.wordmark{ display:flex; flex-direction:column; align-items:flex-start; line-height:.9; text-decoration:none; margin-right:auto; }
.wordmark__mark{
  font-family:var(--label); font-size:.56rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-60);
}
.wordmark__strong{ font-size:1.5rem; font-weight:900; letter-spacing:-.045em; }

/* The barre under the word. A rule with a short drop at each end, which is
   the shape of a real barre seen from the front, and it ties the wordmark
   back to the name. It takes its colour from the text, so it works on the
   bone header and the dark footer without a second rule. */
/* The lock is a grid so its column takes the width of the word, and the
   barre below stretches to exactly that, rather than to the width of the
   whole lockup where the letterspaced line above would decide it. */
.wordmark__lock{ display:inline-grid; justify-items:stretch; }
.wordmark__barre{
  display:block; position:relative; width:106%; margin-left:-3%; height:0;
  border-top:2px solid currentColor; margin-top:.26em;
}
.wordmark__barre::before,
.wordmark__barre::after{
  content:""; position:absolute; top:0; width:2px; height:.34em; background:currentColor;
}
.wordmark__barre::before{ left:0; }
.wordmark__barre::after{ right:0; }

/* The desk is the returning surface, so it reads a shade stronger than the
   rest of the navigation without becoming a second call to action. */
.topbar__desk{ font-weight:700; color:var(--blue-deep) !important; }

.wordmark--lg .wordmark__strong{ font-size:2.6rem; }
.wordmark--lg .wordmark__mark{ font-size:.65rem; }
.wordmark--lg .wordmark__barre{ border-top-width:3px; margin-top:.22em; }
.wordmark--lg .wordmark__barre::before,
.wordmark--lg .wordmark__barre::after{ width:3px; height:.3em; }

.topbar__links{ display:flex; gap:1.9rem; }
.topbar__links a{
  font-size:.9rem; font-weight:500; text-decoration:none; color:var(--ink-80);
  position:relative; padding-bottom:3px;
}
.topbar__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--ink); transition:width .22s ease;
}
.topbar__links a:hover::after{ width:100%; }

/* =========================================================
   FLOATING CONTROLS, bottom right, appear once you scroll
   ========================================================= */
.floatnav{
  position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px);
  z-index:120; display:flex; gap:.6rem; align-items:center;
  opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.3,1);
}
.floatnav.is-on{ opacity:1; transform:none; pointer-events:auto; }

.floatnav__btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-size:.85rem; font-weight:700;
  padding:.85em 1.35em; border-radius:100px; cursor:pointer; border:1px solid transparent;
  box-shadow:0 14px 30px -16px rgba(44,40,35,.6);
  transition:background .18s ease, color .18s ease;
}
.floatnav__cart{ background:var(--paper); color:var(--ink); border-color:var(--line); }
.floatnav__cart:hover{ background:var(--bone-2); }
.floatnav__count{
  display:grid; place-items:center; min-width:21px; height:21px; padding:0 6px;
  border-radius:100px; background:var(--blue-deep); color:var(--paper);
  font-family:var(--label); font-size:.66rem; font-weight:700;
}
.floatnav.is-bump .floatnav__count{ animation:bump .4s ease; }
@keyframes bump{ 0%,100%{transform:scale(1)} 40%{transform:scale(1.35)} }

.floatnav__menu{ background:var(--ink); color:var(--bone); }
.floatnav__menu:hover{ background:var(--cocoa); }
.floatnav__bars{ display:grid; gap:4px; width:16px; }
.floatnav__bars i{ display:block; height:1.6px; background:currentColor; border-radius:2px; transition:transform .25s ease; }
.floatnav__menu[aria-expanded="true"] .floatnav__bars i:first-child{ transform:translateY(2.8px) rotate(45deg); }
.floatnav__menu[aria-expanded="true"] .floatnav__bars i:last-child{ transform:translateY(-2.8px) rotate(-45deg); }

/* =========================================================
   OVERLAY MENU
   ========================================================= */
.overlay{
  position:fixed; inset:0; z-index:130; background:var(--bone);
  display:grid; place-items:center;
  opacity:0; transition:opacity .32s ease;
}
.overlay[hidden]{ display:none; }
.overlay.is-on{ opacity:1; }
.overlay__inner{ width:100%; max-width:var(--wrap); padding:var(--pad); position:relative; }

.overlay__close{
  position:absolute; top:0; right:var(--pad);
  background:none; border:0; cursor:pointer;
  font-family:var(--label); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-60);
}
.overlay__close:hover{ color:var(--ink); }

.overlay__nav{ display:grid; gap:.2rem; margin-top:3rem; }
.overlay__nav a{
  display:flex; align-items:baseline; gap:1.2rem; text-decoration:none;
  font-size:clamp(2rem, 6vw, 4rem); font-weight:800; letter-spacing:-.04em;
  line-height:1.12; padding:.28em 0; border-bottom:1px solid var(--line);
  transition:color .18s ease, padding-left .25s ease;
}
.overlay__nav a span{
  font-family:var(--label); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; color:var(--ink-40);
}
.overlay__nav a:hover{ color:var(--blue-deep); padding-left:.6rem; }
.overlay__foot{
  margin:2.5rem 0 0;
  font-family:var(--label); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-60);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; padding-top:clamp(2.5rem, 6vw, 5rem); overflow:hidden; }

.hero__dancer{ position:absolute; color:var(--ink); pointer-events:none; }
.hero__dancer--a{ width:clamp(260px, 30vw, 440px); height:auto; top:-2%; left:-6%; opacity:.16; transform:rotate(-6deg); }
.hero__dancer--b{ width:clamp(200px, 20vw, 300px); height:auto; top:14%; right:-4%; opacity:.13; transform:scaleX(-1) rotate(5deg); }

.hero__inner{ position:relative; z-index:2; text-align:center; }

.hero__title{
  font-size:clamp(2.3rem, 10.2vw, 9.5rem);
  line-height:.86; letter-spacing:-.055em; font-weight:900;
  margin:0 0 1.8rem; display:grid;
}
.hero__title-accent{ color:var(--blue-deep); }

.hero__lede{
  max-width:56ch; margin:0 auto 2.4rem;
  font-size:clamp(1.08rem, 1.5vw, 1.22rem); line-height:1.65; color:var(--ink-80);
}
/* The anchors a skimming eye lands on. Full ink and heavy, against the
   softer running text, so the four facts read before the sentences do. */
.hero__lede strong{ color:var(--ink); font-weight:800; }
.hero__lede{ margin-bottom:1.5rem; }
/* The statement stands apart from the facts above it, with room to
   breathe, so it reads as the sentence it is rather than a tail. */
.hero__made{
  max-width:56ch; margin:0 auto 2.6rem;
  font-family:var(--round); font-size:clamp(1.02rem, 1.4vw, 1.15rem);
  line-height:1.5; color:var(--ink); font-style:italic;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:center; }

.hero__trust{
  list-style:none; margin:2.8rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:center;
  font-family:var(--label); font-size:.68rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60);
}
.hero__trust li{ position:relative; }
.hero__trust li:not(:last-child)::after{ content:"✳"; position:absolute; right:-1.15rem; opacity:.45; font-size:.6rem; }

.hero__strip{
  margin-top:clamp(3rem, 6vw, 5.5rem); padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(10px, 1.6vw, 22px);
  max-width:1500px; margin-inline:auto;
}
.hero__strip img{
  width:100%; aspect-ratio:1.414/1; object-fit:cover; object-position:top center;
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 22px 44px -30px rgba(44,40,35,.5);
}
.hero__strip img:nth-child(2), .hero__strip img:nth-child(4){ transform:translateY(-16px); }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  margin-top:clamp(3rem, 6vw, 5rem);
  background:var(--blue-deep); color:var(--paper);
  padding:1.15rem 0; overflow:hidden; white-space:nowrap;
}
.marquee__track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee__track span{
  font-family:var(--label); font-size:.82rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; padding-right:2.5rem;
}
.marquee__track i{ opacity:.5; font-style:normal; padding-inline:.5rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* =========================================================
   PROBLEM
   ========================================================= */
.problem{ padding:clamp(5rem, 11vw, 9.5rem) 0; }
.problem__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem, 6vw, 6rem); align-items:start; }
.problem__left .h2{ max-width:12ch; }

.ticks{ list-style:none; margin:2rem 0; padding:0; display:grid; gap:.9rem; }
.ticks li{ position:relative; padding-left:2.2rem; color:var(--ink-80); font-size:1rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.45em; width:13px; height:13px;
  border-radius:50%; border:1.5px solid var(--blue); background:var(--blue-mist);
}
.problem__punch{ font-weight:700; color:var(--ink); margin:0; }

/* =========================================================
   SECTION HEADS
   ========================================================= */
.section-head{ max-width:64ch; margin-bottom:clamp(2.5rem, 5vw, 4rem); }
.section-head .h2{ max-width:20ch; }
.section-head__sub{ margin-top:1.4rem; max-width:56ch; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .h2{ max-width:none; }

.card__tag{
  font-family:var(--label); font-size:.6rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-60); margin:0 0 .8rem;
}
.price{ font-size:2rem; font-weight:800; letter-spacing:-.03em; margin:0; }

/* =========================================================
   THE PRODUCT
   ========================================================= */
.product{ padding:0 0 clamp(4rem, 9vw, 7rem); }
.product__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 5rem); align-items:start;
}
.product__media{
  position:relative; padding:clamp(20px, 3vw, 40px);
  background:var(--blue-soft); border:1px solid var(--line); border-radius:var(--r);
}
.product__media img{
  width:100%; aspect-ratio:1.414/1; object-fit:cover; object-position:top center;
  border-radius:2px; box-shadow:0 20px 40px -22px rgba(44,40,35,.65);
}
.product__title{
  font-size:clamp(1.6rem, 2.8vw, 2.4rem); font-weight:800;
  letter-spacing:-.035em; line-height:1.06; margin:0 0 1rem;
}
.product__list{ list-style:none; margin:1.6rem 0; padding:0; display:grid; gap:.7rem; }
.product__list li{ position:relative; padding-left:1.7rem; font-size:.97rem; color:var(--ink-80); }
.product__list li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
  border-radius:50%; background:var(--blue-deep);
}
.product__buy{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:2rem; }
.product__fine{
  margin:1.1rem 0 0;
  font-family:var(--label); font-size:.65rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60);
}

/* =========================================================
   LOOK INSIDE
   ========================================================= */
.inside{ background:var(--blue-deep); color:var(--paper); padding:clamp(4.5rem, 9vw, 7.5rem) 0 clamp(4rem, 8vw, 6.5rem); }
.inside__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2.2rem, 4vw, 3.4rem); }
.inside__head .h2{ max-width:18ch; }
.inside__nav{ display:flex; gap:.7rem; flex-shrink:0; }

/* The strip passes slowly on its own. Scroll snapping is deliberately not
   used here: mandatory snap fights the small per frame scroll steps that
   drive the pass, and pulls the strip back as soon as it is nudged. */
.gallery{
  display:flex; gap:clamp(14px, 1.8vw, 26px);
  overflow-x:auto;
  /* Full bleed. With the arrows gone there is nothing beside the strip, so
     the cards start at the left edge instead of indenting to the text. */
  padding:0 0 1.6rem;
  scrollbar-width:thin; scrollbar-color:rgba(250,248,244,.45) transparent;
}
.gallery::-webkit-scrollbar{ height:5px; }
.gallery::-webkit-scrollbar-track{ background:rgba(250,248,244,.15); }
.gallery::-webkit-scrollbar-thumb{ background:rgba(250,248,244,.5); border-radius:100px; }
.gallery figure{ margin:0; flex:0 0 clamp(280px, 34vw, 480px); }

/* The frame clips the image, so the hover zoom grows inside the card edge
   instead of spilling over its neighbours. */
.gallery__frame{
  display:block; overflow:hidden; border-radius:var(--r);
  box-shadow:0 26px 46px -28px rgba(20,26,42,.85);
  transition:transform .55s cubic-bezier(.2,.7,.3,1), box-shadow .55s ease;
}
.gallery img{
  display:block; width:100%; aspect-ratio:1.414/1;
  object-fit:cover; object-position:top center;
  transition:transform .65s cubic-bezier(.2,.7,.3,1);
}
.gallery figcaption{
  margin-top:.9rem; font-family:var(--label); font-size:.66rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(250,248,244,.72);
  transition:color .4s ease;
}
.gallery figure:hover .gallery__frame,
.gallery figure:focus-within .gallery__frame{
  transform:translateY(-6px);
  box-shadow:0 36px 62px -26px rgba(20,26,42,.95);
}
.gallery figure:hover img,
.gallery figure:focus-within img{ transform:scale(1.07); }
.gallery figure:hover figcaption,
.gallery figure:focus-within figcaption{ color:var(--paper); }

/* =========================================================
   COMPANY ATLAS
   ========================================================= */
/* ---- landing page teaser ---- */
.atlas-teaser{
  position:relative; overflow:hidden;
  background:#141A2A; color:var(--paper);
  padding:clamp(3.5rem, 8vw, 6.5rem) 0;
}
.atlas-teaser{ min-height:min(82vh, 780px); display:flex; align-items:center; }
.atlas-teaser__globe{
  position:absolute; inset:0; z-index:1;
}
#miniGlobe{ display:block; width:100%; height:100%; touch-action:none; }
.atlas-teaser__inner{
  position:relative; z-index:2; width:100%;
  display:grid; grid-template-columns:1fr; pointer-events:none;
}
.atlas-teaser__body{
  margin-left:auto; width:min(500px, 100%); pointer-events:auto;
}
.atlas-teaser__lede{ color:rgba(250,248,244,.84); max-width:52ch; margin:1.4rem 0 2rem; }
.atlas-teaser__lede strong{ color:var(--paper); }
.atlas-teaser__stats{
  list-style:none; margin:0 0 2.2rem; padding:0;
  display:flex; flex-wrap:wrap; gap:2.4rem;
}
.atlas-teaser__stats li{ display:grid; }
.atlas-teaser__stats strong{ font-size:1.8rem; font-weight:800; letter-spacing:-.03em; }
.atlas-teaser__stats span{
  font-family:var(--label); font-size:.6rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(250,248,244,.6);
}

/* ---- atlas page ---- */
.page-atlas{ background:var(--bone); }
.topbar__links a.is-current{ color:var(--ink); font-weight:700; }
.topbar__links a.is-current::after{ width:100%; }

.atlas-hero{ padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.5rem); text-align:center; }
.atlas-hero__title{
  font-size:clamp(2.6rem, 7vw, 5.5rem); line-height:.92;
  letter-spacing:-.05em; font-weight:900; margin:0 0 1.5rem;
}
.atlas-hero__lede{
  max-width:62ch; margin:0 auto; font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.65; color:var(--ink-80);
}
.atlas-hero__lede strong{ color:var(--ink); font-weight:800; }

.atlas-main{ padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(4rem,8vw,6rem); }
.atlas__layout--wide{ grid-template-columns:1.15fr .85fr; }
.atlas__stage{ display:grid; gap:1rem; justify-items:center; }

.globe-controls{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:center;
}
.globe-btn{
  min-width:38px; height:38px; padding:0 .7em; border-radius:100px;
  background:var(--paper); color:var(--ink); border:1px solid var(--line-2);
  cursor:pointer; font-family:var(--display); font-size:1rem; font-weight:700;
  transition:background .16s ease, color .16s ease;
}
.globe-btn--wide{
  font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}
.globe-btn:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.globe-zoom{
  font-family:var(--label); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; color:var(--ink-60); min-width:44px; text-align:center;
}
.globe-mode{
  margin:0; text-align:center;
  font-family:var(--label); font-size:.6rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-40);
}

/* ---- audition boards ---- */
.boards{ background:var(--bone-2); border-block:1px solid var(--line); padding:clamp(4rem,8vw,6.5rem) 0; }
.boards__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.6vw,20px); }
.board{
  display:grid; grid-template-columns:1fr auto; gap:.3rem 1rem; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.3rem 1.5rem; text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease;
}
.board:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.board__name{ grid-column:1; grid-row:1; font-size:1.05rem; font-weight:800; letter-spacing:-.025em; }
.board__note{ grid-column:1; grid-row:2; font-size:.9rem; color:var(--ink-80); }
.board__go{ grid-column:2; grid-row:1 / span 2; align-self:center; font-size:1.2rem; color:var(--ink-40); }
.board:hover .board__go{ color:var(--ink); }

.atlas-note{ padding:clamp(4rem,8vw,6.5rem) 0; }
.atlas-cta{ background:var(--blue-deep); color:var(--paper); padding:clamp(3.5rem,7vw,5.5rem) 0; }
.atlas-cta__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2.5rem; flex-wrap:wrap;
}

.atlas__controls{
  display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem;
  padding-bottom:1.6rem; margin-bottom:clamp(1.6rem,3vw,2.4rem);
  border-bottom:1px solid var(--line);
}
.atlas__filters{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.atlas__label{
  font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-60); margin-right:.4rem;
}

.atlas__layout{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 4vw, 3.5rem); align-items:start; }

.atlas__globe{
  position:relative; aspect-ratio:1/1; width:100%;
  display:grid; place-items:center;
}
#globeCanvas{ cursor:grab; touch-action:none; border-radius:50%; }

.globe-tip{
  position:absolute; z-index:5; pointer-events:none;
  transform:translate(-50%, calc(-100% - 14px));
  background:var(--ink); color:var(--bone);
  padding:.5rem .8rem; border-radius:6px; white-space:nowrap;
  opacity:0; transition:opacity .16s ease;
  display:grid; gap:1px;
}
.globe-tip.is-on{ opacity:1; }
.globe-tip strong{ font-size:.82rem; font-weight:700; }
.globe-tip span{ font-family:var(--label); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }

.globe-spin{
  position:absolute; bottom:2%; left:50%; transform:translateX(-50%);
  background:var(--paper); color:var(--ink-80); border:1px solid var(--line);
  border-radius:100px; padding:.45em 1.1em; cursor:pointer;
  font-family:var(--label); font-size:.6rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}
.globe-spin:hover{ color:var(--ink); border-color:var(--line-2); }

/* ---- side panel ---- */
.atlas__side{ display:grid; gap:1.6rem; }

.atlas__panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.4rem, 2.4vw, 2rem); min-height:260px;
}
.atlas-detail--empty h3{ font-size:1.5rem; font-weight:800; letter-spacing:-.03em; margin:0 0 .7rem; }
.atlas-detail--empty p{ margin:0; color:var(--ink-80); font-size:.95rem; }

.atlas-detail__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.atlas-chip{
  font-family:var(--label); font-size:.58rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.45em .9em; border-radius:100px; background:var(--sage); color:var(--ink);
}
.atlas-chip--classical{ background:var(--blue-mist); }
.atlas-chip--contemporary{ background:var(--greige); }
.atlas-chip--both{ background:var(--blue-soft); }

.atlas-daynight{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-60);
}
.atlas-daynight i{ width:9px; height:9px; border-radius:50%; display:block; }
.atlas-daynight.is-day i{ background:#E8B44A; box-shadow:0 0 0 3px rgba(232,180,74,.25); }
.atlas-daynight.is-night i{ background:#2E3A5C; box-shadow:0 0 0 3px rgba(46,58,92,.20); }
.atlas-daynight b{ color:var(--ink); }

.atlas-detail__name{ font-size:clamp(1.3rem,2vw,1.75rem); font-weight:800; letter-spacing:-.032em; line-height:1.08; margin:0 0 .35rem; }
.atlas-detail__place{
  margin:0 0 1.4rem; font-family:var(--label); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60);
}

.atlas-facts{ margin:0 0 1.6rem; display:grid; gap:.9rem; }
.atlas-facts div{ display:grid; grid-template-columns:120px 1fr; gap:.9rem; align-items:start; }
.atlas-facts dt{
  font-family:var(--label); font-size:.6rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60); padding-top:.15em;
}
.atlas-facts dd{ margin:0; font-size:.95rem; color:var(--ink); }
.atlas-facts .since{
  display:block; margin-top:.22rem;
  font-family:var(--label); font-size:.56rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-40);
}
.stage .atlas-facts .since{ color:rgba(232,240,250,.45); }
.st--open{ color:var(--blue-deep); font-weight:700; }
.st--closed{ color:var(--ink-60); }

.atlas-actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.atlas-actions .btn{ font-size:.82rem; padding:.7em 1.3em; }
.atlas-actions a:not(.btn){
  font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60);
  text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:2px;
}
.atlas-actions a:not(.btn):hover{ color:var(--ink); border-color:var(--ink); }

.atlas-checked{ margin:1.3rem 0 0; font-size:.8rem; color:var(--ink-60); line-height:1.5; }

/* ---- browse ---- */
.atlas__browse{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1rem; }
#atlasSearch{
  width:100%; font-family:var(--display); font-size:.92rem; color:var(--ink);
  padding:.75em 1em; border:1px solid var(--line-2); border-radius:100px; background:var(--bone);
}
#atlasSearch:focus{ outline:2px solid var(--blue-deep); outline-offset:2px; }
.atlas__count{
  margin:.8rem 0 .5rem;
  font-family:var(--label); font-size:.6rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-60);
}
.atlas__list{ max-height:300px; overflow-y:auto; display:grid; gap:2px; scrollbar-width:thin; }
.atlas__list::-webkit-scrollbar{ width:5px; }
.atlas__list::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:100px; }

.atlas-row{
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; padding:.6rem .5rem; border-radius:3px;
  transition:background .14s ease;
}
.atlas-row:hover{ background:var(--bone-2); }
.atlas-row.is-active{ background:var(--blue-mist); }
.atlas-row__dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.atlas-row__text{ display:grid; flex:1; min-width:0; }
.atlas-row__text strong{ font-size:.88rem; font-weight:600; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atlas-row__text em{
  font-style:normal; font-family:var(--label); font-size:.58rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-60);
}
.atlas-row__type{
  font-family:var(--label); font-size:.54rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-40); flex-shrink:0;
}
.atlas-empty{ margin:1rem .5rem; font-size:.9rem; color:var(--ink-60); }

.atlas__note{ margin:clamp(2rem,4vw,3rem) 0 0; font-size:.9rem; color:var(--ink-60); max-width:70ch; }
.atlas__note a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2); }
.atlas__note a:hover{ border-color:var(--ink); }

/* =========================================================
   WHO IT IS FOR
   ========================================================= */
.who{ padding:clamp(5rem, 11vw, 9rem) 0; }
.who__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem, 4vw, 4rem); }
.who__col{ position:relative; padding:clamp(1.8rem, 2.4vw, 2.6rem) 0 0; border-top:1px solid var(--line-2); overflow:hidden; }
.who__art{ position:absolute; right:-16%; top:8%; width:52%; height:auto; color:var(--ink); opacity:.10; pointer-events:none; }
.num{ font-family:var(--label); font-size:.7rem; font-weight:500; letter-spacing:.2em; color:var(--blue); margin:0 0 1.6rem; }

/* =========================================================
   SPECS
   ========================================================= */
/* The four promises. The background drifts very slowly so the band feels
   alive without pulling attention away from the words. The section sits
   tight to its neighbours on purpose: it is a strip, not a chapter. */
.specs{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--bone-2); border-block:1px solid var(--line);
  padding:clamp(2rem, 4vw, 3.25rem) 0;
}
.specs__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.specs__blob{ position:absolute; border-radius:50%; filter:blur(46px); opacity:.5; will-change:transform; }
.specs__blob--a{ width:min(38vw,420px); aspect-ratio:1; left:-6%;  top:-38%;    background:rgba(166,196,231,.55); animation:specDrift 26s ease-in-out infinite; }
.specs__blob--b{ width:min(30vw,340px); aspect-ratio:1; right:-4%; bottom:-44%; background:rgba(220,226,222,.75); animation:specDrift 34s ease-in-out infinite reverse; }
.specs__blob--c{ width:min(24vw,260px); aspect-ratio:1; left:46%;  top:-52%;    background:rgba(211,225,241,.60); animation:specDrift 30s ease-in-out infinite 3s; }
.specs__grain{
  position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(circle, rgba(44,40,35,.13) 1px, transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
  animation:specPan 40s linear infinite;
}
@keyframes specDrift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(3%,6%,0) scale(1.12); }
}
@keyframes specPan{ from{ background-position:0 0; } to{ background-position:20px 20px; } }

.specs__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.8rem, 1.6vw, 1.4rem); align-items:start; }

.spec{
  position:relative; padding:.9rem .8rem 1rem; border-radius:10px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), background-color .35s ease, box-shadow .35s ease;
}
.spec::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.45rem; height:1px;
  background:var(--line-2); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.spec:hover{ transform:translateY(-4px); background:rgba(250,248,244,.72); box-shadow:0 10px 26px -20px rgba(44,40,35,.42); }
.spec:hover::after{ transform:scaleX(1); }
.spec h4{ font-size:1.08rem; font-weight:800; letter-spacing:-.025em; margin:0 0 .5rem; }
.spec p{ margin:0; font-size:.93rem; color:var(--ink-80); }
.spec .stamp{
  margin-bottom:1rem;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.spec:hover .stamp{
  transform:rotate(-6deg) scale(1.06);
  background:var(--blue-deep); color:var(--paper); border-color:var(--blue-deep);
  box-shadow:0 0 0 3px var(--bone-2), 0 0 0 4px rgba(61,95,163,.40);
}

/* =========================================================
   NOTE
   ========================================================= */
.note{ padding:clamp(5rem, 11vw, 9rem) 0; }
.torn{ position:relative; max-width:820px; margin-inline:auto; padding:clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4.5rem); }
.torn__paper{
  position:absolute; inset:0; background-color:var(--paper);
  background-image:radial-gradient(circle, rgba(61,95,163,.20) 1px, transparent 1px);
  background-size:22px 22px; filter:url(#tornEdge);
  box-shadow:0 30px 60px -44px rgba(44,40,35,.7);
}
.torn__content{ position:relative; text-align:center; }
.note__title{ color:var(--cocoa); margin-bottom:2rem; }
.note__body{ max-width:52ch; margin-inline:auto; text-align:left; }
.note__body p{ margin:0 0 1.15rem; color:var(--ink-80); }
.note__punch{ font-weight:700; color:var(--ink) !important; }
.signature{
  display:inline-block; margin:2.2rem 0 0; padding-top:.9rem;
  border-top:1.5px solid rgba(75,58,43,.35);
  font-family:var(--display); font-weight:800; font-size:1.05rem;
  letter-spacing:-.03em; color:var(--cocoa);
}

/* =========================================================
   COMING NEXT
   ========================================================= */
.next{ position:relative; overflow:hidden; background:var(--blue); color:var(--paper); padding:clamp(4rem, 9vw, 7rem) 0; }
.bundle__dancer{ position:absolute; left:-5%; top:-14%; width:clamp(240px, 26vw, 420px); height:auto; color:var(--paper); opacity:.20; pointer-events:none; }
.next .wrap{ position:relative; }
.next__title{ max-width:16ch; margin-bottom:clamp(2rem,4vw,3rem); }
.next__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2rem,4vw,4rem); }
.next__grid article{ border-top:1px solid rgba(250,248,244,.3); padding-top:1.5rem; }
.next__num{
  font-family:var(--label); font-size:.66rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(250,248,244,.7); margin:0 0 1rem;
}
.next__grid h3{ font-size:clamp(1.3rem,2vw,1.7rem); font-weight:800; letter-spacing:-.03em; margin:0 0 .6rem; }
.next__grid p{ margin:0; color:rgba(250,248,244,.86); font-size:.97rem; }
.next__cta{ margin:clamp(2rem,4vw,3rem) 0 0; color:rgba(250,248,244,.9); }
.next__cta a{ color:var(--paper); font-weight:700; border-bottom:1px solid rgba(250,248,244,.5); text-decoration:none; }
.next__cta a:hover{ border-color:var(--paper); }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ padding:clamp(5rem, 11vw, 9rem) 0; }
.faq__inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.5rem, 6vw, 6rem); align-items:start; }
.faq__head{ position:sticky; top:40px; }
.faq__list details{ border-bottom:1px solid var(--line); }
.faq__list summary{
  list-style:none; cursor:pointer; padding:1.5rem 3rem 1.5rem 0; position:relative;
  font-size:clamp(1.05rem, 1.5vw, 1.28rem); font-weight:700; letter-spacing:-.025em;
}
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:14px; height:14px; margin-top:-7px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/14px 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.5px 14px no-repeat;
  transition:transform .28s ease;
}
.faq__list details[open] summary::after{ transform:rotate(135deg); }
.faq__list p{ margin:0 0 1.6rem; color:var(--ink-80); max-width:58ch; font-size:1rem; }

/* =========================================================
   FREE PAGE
   ========================================================= */
.free{ background:var(--blue-mist); border-block:1px solid var(--line); padding:clamp(4.5rem, 10vw, 8rem) 0; overflow:hidden; }
.free__inner{ position:relative; text-align:center; max-width:720px; }
.free__dancer{ position:absolute; left:-26%; bottom:-38%; width:44%; height:auto; color:var(--blue-deep); opacity:.24; pointer-events:none; }
.free__sub{ max-width:46ch; margin:1.4rem auto 2.2rem; }
.free__form{ display:flex; gap:.7rem; max-width:460px; margin-inline:auto; }
.free__form input{
  flex:1; font-family:var(--display); font-size:.95rem; color:var(--ink);
  padding:.95em 1.3em; border:1px solid var(--line-2); border-radius:100px; background:var(--paper);
}
.free__form input:focus{ outline:2px solid var(--blue-deep); outline-offset:2px; }
.free__msg{
  margin:1.1rem 0 0; min-height:1.4em;
  font-family:var(--label); font-size:.7rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-deep);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink); color:var(--bone); padding:clamp(4rem, 8vw, 6rem) 0 2rem; }
.footer__inner{ display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(2.5rem, 5vw, 5rem); }
.footer .wordmark__mark{ color:rgba(244,240,232,.55); }
.footer__tag{ margin:1.2rem 0 0; color:rgba(244,240,232,.7); max-width:32ch; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.footer__cols h5{
  font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(244,240,232,.55); margin:0 0 1.2rem;
}
.footer__cols a{
  display:block; text-decoration:none; font-size:.93rem;
  color:rgba(244,240,232,.85); margin-bottom:.7rem; transition:color .18s ease;
}
.footer__cols a:hover{ color:var(--bone); }
.footer__base{
  margin-top:clamp(3rem, 6vw, 5rem); padding-top:1.6rem;
  border-top:1px solid rgba(244,240,232,.18);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.footer__base p{
  margin:0; font-family:var(--label); font-size:.65rem; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(244,240,232,.5);
}

/* =========================================================
   CART DRAWER
   ========================================================= */
.drawer{ position:fixed; inset:0; z-index:140; }
.drawer[hidden]{ display:none; }
.drawer__scrim{
  position:absolute; inset:0; background:rgba(20,17,14,.42);
  opacity:0; transition:opacity .32s ease;
}
.drawer.is-on .drawer__scrim{ opacity:1; }

.drawer__panel{
  position:absolute; top:0; right:0; height:100%;
  width:min(420px, 92vw);
  background:var(--bone); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .36s cubic-bezier(.2,.8,.3,1);
  box-shadow:-30px 0 60px -40px rgba(44,40,35,.8);
}
.drawer.is-on .drawer__panel{ transform:none; }

.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem var(--pad) 1.2rem; border-bottom:1px solid var(--line);
}
.drawer__head h2{ margin:0; font-size:1.35rem; font-weight:800; letter-spacing:-.03em; }
.drawer__close{
  background:none; border:0; cursor:pointer;
  font-family:var(--label); font-size:.66rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-60);
}
.drawer__close:hover{ color:var(--ink); }

.drawer__items{ flex:1; overflow-y:auto; padding:.5rem var(--pad); }
.drawer__empty{ padding:3rem 0; text-align:center; }
.drawer__empty p{ margin:0; font-weight:700; }
.drawer__emptysub{ margin-top:.5rem !important; font-weight:400 !important; color:var(--ink-60); font-size:.92rem; }

.cart-item{
  display:grid; grid-template-columns:1fr auto; gap:.5rem 1rem;
  padding:1.2rem 0; border-bottom:1px solid var(--line); align-items:center;
}
.cart-item__text{ display:grid; gap:.2rem; }
.cart-item__text strong{ font-size:.98rem; font-weight:700; letter-spacing:-.02em; }
.cart-item__text span{
  font-family:var(--label); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-60);
}
.cart-item__qty{
  display:flex; align-items:center; gap:.2rem;
  border:1px solid var(--line-2); border-radius:100px; padding:.15rem;
}
.cart-item__qty button{
  width:26px; height:26px; border-radius:50%; border:0; cursor:pointer;
  background:transparent; color:var(--ink); font-size:1rem; line-height:1;
}
.cart-item__qty button:hover{ background:var(--bone-2); }
.cart-item__qty span{ min-width:22px; text-align:center; font-size:.9rem; font-weight:700; }
.cart-item__rm{
  grid-column:1 / -1; justify-self:start;
  background:none; border:0; cursor:pointer; padding:0;
  font-family:var(--label); font-size:.58rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-40);
}
.cart-item__rm:hover{ color:var(--ink); }

.drawer__foot{ padding:1.4rem var(--pad) 1.8rem; border-top:1px solid var(--line); }
.drawer__total{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.1rem;
}
.drawer__total span{
  font-family:var(--label); font-size:.66rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-60);
}
.drawer__total strong{ font-size:1.7rem; font-weight:800; letter-spacing:-.03em; }
.drawer__foot .btn{ width:100%; }
.drawer__fine{ margin:.9rem 0 0; font-size:.78rem; color:var(--ink-60); text-align:center; }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 140%);
  z-index:200; background:var(--ink); color:var(--bone);
  padding:.9rem 1.6rem; border-radius:100px; font-size:.88rem; font-weight:600;
  box-shadow:0 20px 40px -22px rgba(0,0,0,.6);
  opacity:0; visibility:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.3,1), opacity .3s ease, visibility .3s;
}
.toast.is-on{ transform:translate(-50%, 0); opacity:1; visibility:visible; }

/* =========================================================
   REVEAL
   ========================================================= */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js .reveal.is-in{ opacity:1; transform:none; }


/* =========================================================
   THE STAGE, globe as a full bleed background
   ========================================================= */
.stage{
  position:relative; overflow:hidden;
  background:#070B14;
  min-height:min(92vh, 900px);
  display:flex; align-items:center;
  border-block:1px solid rgba(157,190,220,.18);
}
.stage__globe{ position:absolute; inset:0; }
.stage__globe canvas{ display:block; width:100%; height:100%; }

.stage__ui{
  position:relative; z-index:3; width:100%;
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(1.5rem,3vw,2.5rem) var(--pad);
  pointer-events:none;
}
.stage__col{
  margin-left:auto; width:min(440px, 100%);
  display:grid; gap:.9rem; pointer-events:auto;
}

/* glassy cards so the planet reads through */
.stage .atlas__controls{
  display:grid; gap:.6rem; margin:0;
  padding:.85rem 1rem;
  background:rgba(10,16,28,.68);
  border:1px solid rgba(157,190,220,.22);
  backdrop-filter:blur(14px) saturate(1.2);
  border-radius:8px;
}
.stage .atlas__filters{ gap:.35rem; }
.stage .atlas__label{ color:rgba(232,240,250,.6); margin-right:.2rem; flex:0 0 auto; }
.stage .pill{
  background:rgba(12,18,32,.55); color:rgba(238,244,252,.86);
  border-color:rgba(157,190,220,.32); backdrop-filter:blur(8px);
  font-size:.74rem; padding:.42em .9em;
}
.stage .pill:hover{ border-color:rgba(157,190,220,.7); color:#fff; }
.stage .pill.is-on{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

.stage .atlas__panel,
.stage .atlas__browse{
  background:rgba(10,16,28,.68);
  border:1px solid rgba(157,190,220,.22);
  backdrop-filter:blur(14px) saturate(1.2);
  border-radius:8px;
}
.stage .atlas__panel{ padding:1.3rem 1.4rem; min-height:auto; }
.stage .atlas__browse{ padding:.9rem; }

.stage .atlas-detail--empty h3,
.stage .atlas-detail__name{ color:var(--paper); }
.stage .atlas-detail--empty p{ color:rgba(232,240,250,.72); }
.stage .eyebrow{ color:rgba(232,240,250,.55); }
.stage .atlas-detail__place{ color:rgba(232,240,250,.6); }
.stage .atlas-facts dt{ color:rgba(232,240,250,.55); }
.stage .atlas-facts dd{ color:rgba(240,246,252,.92); }
.stage .st--open{ color:#6BF0B0; }
.stage .atlas-checked{ color:rgba(232,240,250,.5); }
.stage .atlas-daynight{ color:rgba(232,240,250,.6); }
.stage .atlas-daynight b{ color:var(--paper); }
.stage .atlas-actions .btn--ink{ background:var(--paper); color:var(--ink); }
.stage .atlas-actions .btn--ink:hover{ background:var(--blue-soft); }
.stage .atlas-actions .btn--ghost{ color:rgba(238,244,252,.9); border-color:rgba(157,190,220,.4); }
.stage .atlas-actions .btn--ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.stage .atlas-actions a:not(.btn){ color:rgba(232,240,250,.6); border-color:rgba(157,190,220,.35); }
.stage .atlas-actions a:not(.btn):hover{ color:var(--paper); border-color:var(--paper); }

.stage #atlasSearch{
  background:rgba(6,10,20,.6); color:var(--paper);
  border-color:rgba(157,190,220,.28);
}
.stage #atlasSearch::placeholder{ color:rgba(232,240,250,.45); }
.stage .atlas__count{ color:rgba(232,240,250,.5); }
.stage .atlas__list{ max-height:min(34vh, 300px); }
.stage .atlas-row:hover{ background:rgba(157,190,220,.14); }
.stage .atlas-row.is-active{ background:rgba(157,190,220,.26); }
.stage .atlas-row__text strong{ color:var(--paper); }
.stage .atlas-row__text em{ color:rgba(232,240,250,.55); }
.stage .atlas-row__type{ color:rgba(232,240,250,.4); }
.stage .atlas-empty{ color:rgba(232,240,250,.6); }

/* globe chrome pinned to the stage */
.stage .globe-controls{
  position:absolute; left:var(--pad); bottom:2.6rem; z-index:4;
  justify-content:flex-start;
}
.stage .globe-btn{
  background:rgba(12,18,32,.6); color:rgba(238,244,252,.9);
  border-color:rgba(157,190,220,.3); backdrop-filter:blur(8px);
}
.stage .globe-btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.stage .globe-zoom{ color:rgba(232,240,250,.6); }
.stage .globe-mode{
  position:absolute; left:var(--pad); bottom:2.1rem; z-index:4;
  text-align:left; color:rgba(232,240,250,.38);
}
.globe-hint{
  position:absolute; left:var(--pad); bottom:.7rem; z-index:4; margin:0;
  font-family:var(--label); font-size:.58rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(232,240,250,.3);
}

.atlas-hero__jump{ margin:1.2rem 0 0; font-size:.95rem; color:var(--ink-60); }
.atlas-hero__jump a{ color:var(--ink); font-weight:700; border-bottom:1.5px solid var(--blue-soft); text-decoration:none; }
.atlas-hero__jump a:hover{ border-color:var(--ink); }
.atlas-cta__sub{ color:rgba(250,248,244,.86); max-width:46ch; margin-top:1.2rem; }

/* cart button in the top bar */
.topbar__cart{
  display:inline-flex; align-items:center; gap:.5rem;
  background:none; border:0; cursor:pointer; padding:.4rem .2rem;
  font-family:var(--display); font-size:.9rem; font-weight:500; color:var(--ink-80);
}
.topbar__cart:hover{ color:var(--ink); }
.topbar__count{
  display:grid; place-items:center; min-width:21px; height:21px; padding:0 6px;
  border-radius:100px; background:var(--blue-deep); color:var(--paper);
  font-family:var(--label); font-size:.64rem; font-weight:700;
}
/* Both badges set their own display, which beats the browser's rule
   for the hidden attribute. Without this line an empty cart still
   shows a zero. Same trap as every other [hidden] line in this file. */
.floatnav__count[hidden], .topbar__count[hidden], .floatnav__cart[hidden]{ display:none; }


/* =========================================================
   THE SPIN, gamified prize wheel
   ========================================================= */
.spin-trigger{
  position:fixed; left:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px);
  z-index:118; display:inline-flex; align-items:center; gap:.55rem;
  background:var(--cocoa); color:var(--bone);
  border:0; border-radius:100px; cursor:pointer;
  padding:.85em 1.35em;
  font-family:var(--display); font-size:.85rem; font-weight:700;
  box-shadow:0 14px 30px -16px rgba(44,40,35,.7);
  transition:transform .2s ease, background .2s ease;
}
.spin-trigger:hover{ transform:translateY(-2px); background:#5B4234; }
.spin-trigger__dot{
  width:9px; height:9px; border-radius:50%; background:#E8B44A;
  box-shadow:0 0 0 0 rgba(232,180,74,.7); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(232,180,74,.6); }
  70%{ box-shadow:0 0 0 9px rgba(232,180,74,0); }
  100%{ box-shadow:0 0 0 0 rgba(232,180,74,0); }
}

.spin{ position:fixed; inset:0; z-index:160; display:grid; place-items:center; }
.spin[hidden]{ display:none; }
.spin__scrim{
  position:absolute; inset:0; background:rgba(20,17,14,.55);
  opacity:0; transition:opacity .3s ease; backdrop-filter:blur(3px);
}
.spin.is-on .spin__scrim{ opacity:1; }

.spin__box{
  position:relative; width:min(460px, 92vw);
  max-height:92vh; overflow-y:auto;
  background:var(--bone); border:1px solid var(--line-2); border-radius:10px;
  padding:clamp(1.6rem,4vw,2.4rem);
  text-align:center;
  transform:translateY(16px) scale(.97); opacity:0;
  transition:transform .34s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
  box-shadow:0 40px 80px -40px rgba(44,40,35,.75);
}
.spin.is-on .spin__box{ transform:none; opacity:1; }

.spin__close{
  position:absolute; top:1rem; right:1.2rem;
  background:none; border:0; cursor:pointer;
  font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-40);
}
.spin__close:hover{ color:var(--ink); }
.spin__head .eyebrow{ margin-bottom:.6rem; }
.spin__title{
  font-size:clamp(1.9rem,5vw,2.6rem); font-weight:900;
  letter-spacing:-.045em; line-height:.9; margin:0 0 .7rem;
}
.spin__sub{ margin:0 auto 1.4rem; max-width:34ch; color:var(--ink-80); font-size:.95rem; }

.spin__wheelwrap{ position:relative; width:min(300px, 74vw); margin:0 auto 1.4rem; }
.spin__svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 14px 28px rgba(44,40,35,.35)); }
#spinRotor{ transform-origin:50% 50%; will-change:transform; }
.spin__hub{ position:absolute; inset:0; pointer-events:none; filter:none; }
.spin__pointer{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:0; height:0; z-index:2;
  border-left:11px solid transparent; border-right:11px solid transparent;
  border-top:18px solid var(--ink);
  filter:drop-shadow(0 2px 3px rgba(44,40,35,.4));
}

.spin__form[hidden]{ display:none; }
.spin__won{
  display:grid; gap:.3rem; margin:0 0 1.2rem;
  padding:1rem; border-radius:6px;
  background:var(--blue-mist); border:1px solid var(--line);
}
.spin__prizelabel{
  font-family:var(--label); font-size:.58rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-60);
}
.spin__won strong{ font-size:1.05rem; font-weight:800; letter-spacing:-.02em; }
.spin__row{ display:flex; gap:.6rem; }
.spin__row input{
  flex:1; min-width:0; font-family:var(--display); font-size:.93rem; color:var(--ink);
  padding:.85em 1.1em; border:1px solid var(--line-2); border-radius:100px; background:var(--paper);
}
.spin__row input:focus{ outline:2px solid var(--blue-deep); outline-offset:2px; }
.spin__fine{ margin:.9rem 0 0; font-size:.78rem; color:var(--ink-60); }
.spin__msg{
  margin:.6rem 0 0; min-height:1.2em;
  font-family:var(--label); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-deep);
}

/* discount line in the cart */
.drawer__discount{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem .9rem; margin-bottom:.9rem; border-radius:6px;
  background:var(--blue-mist); border:1px solid var(--line);
}
.drawer__discount[hidden]{ display:none; }
.drawer__discount span{
  font-family:var(--label); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue-deep);
}
.drawer__discount b{ font-size:.82rem; font-weight:700; }

/* =========================================================
   RESOURCES PAGE
   ========================================================= */
.res-hero{ padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem); }
.res-hero__title{
  font-size:clamp(2.4rem,6.5vw,5rem); line-height:.92;
  letter-spacing:-.05em; font-weight:900; margin:0 0 1.4rem; max-width:16ch;
}
.res-hero__lede{ max-width:62ch; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.65; color:var(--ink-80); }

.res-group{ padding:clamp(2.5rem,5vw,4rem) 0; border-top:1px solid var(--line); }
.res-group:nth-child(even){ background:var(--bone-2); }
.res-group__head{ margin-bottom:clamp(1.6rem,3vw,2.4rem); max-width:60ch; }
.res-group__head h2{ font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800; letter-spacing:-.035em; margin:0 0 .6rem; }
.res-group__head p{ margin:0; color:var(--ink-80); }

.res-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.6vw,18px); }
.res-card{
  display:grid; grid-template-columns:1fr auto; gap:.35rem 1rem; align-items:start;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:1.2rem 1.4rem; text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s ease;
}
.res-card:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.res-card__name{ grid-column:1; grid-row:1; font-size:1.02rem; font-weight:800; letter-spacing:-.025em; }
.res-card__note{ grid-column:1; grid-row:2; font-size:.9rem; color:var(--ink-80); }
.res-card__go{ grid-column:2; grid-row:1 / span 2; align-self:center; font-size:1.1rem; color:var(--ink-40); }
.res-card:hover .res-card__go{ color:var(--ink); }


/* =========================================================
   CONTACT
   ========================================================= */
.contact{ background:var(--bone-2); border-block:1px solid var(--line); padding:clamp(4rem,9vw,7rem) 0; }
.contact__sub{ margin-inline:auto; }
.contact__grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem,5vw,4.5rem); align-items:start;
  margin-top:clamp(2rem,4vw,3rem);
}
.contact__routes{ display:grid; gap:1.5rem; }
.contact__routes .stamp{ width:42px; height:42px; font-size:.44rem; margin-bottom:.65rem; box-shadow:0 0 0 2px var(--bone-2), 0 0 0 3px rgba(75,58,43,.3); }
.contact__routes h4{ font-size:1rem; font-weight:800; letter-spacing:-.025em; margin:0 0 .3rem; }
.contact__routes p{ margin:0; font-size:.9rem; color:var(--ink-80); line-height:1.5; }

.contact__form{
  display:grid; gap:.8rem;
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:clamp(1.4rem,2.6vw,2rem);
}
.contact__row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.contact__form input,
.contact__form select,
.contact__form textarea{
  width:100%; font-family:var(--display); font-size:.95rem; color:var(--ink);
  padding:.85em 1.1em; border:1px solid var(--line-2); border-radius:8px;
  background:var(--bone); resize:vertical;
}
.contact__form select{ border-radius:100px; }
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus{ outline:2px solid var(--blue-deep); outline-offset:2px; }
.contact__form .btn{ justify-self:start; }
.contact__msg{
  margin:.2rem 0 0; min-height:1.2em;
  font-family:var(--label); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-deep);
}
.contact__fine{ margin:.4rem 0 0; font-size:.85rem; color:var(--ink-60); }
.contact__fine a{ color:var(--ink); font-weight:700; border-bottom:1px solid var(--line-2); text-decoration:none; }
.contact__fine a:hover{ border-color:var(--ink); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .specs__grid{ grid-template-columns:repeat(2,1fr); row-gap:3rem; }
  .who__grid{ grid-template-columns:1fr; gap:0; }
  .who__col{ padding-block:2.2rem; }
  .who__art{ width:30%; right:0; top:14%; }
  .atlas__layout{ grid-template-columns:1fr; }
  .atlas__layout--wide{ grid-template-columns:1fr; }
  .stage{ min-height:auto; display:block; padding-bottom:5.5rem; }
  .stage__globe{ position:relative; height:min(56vh, 460px); inset:auto; }
  .stage__col{ margin-left:0; width:100%; }
  .stage .globe-controls{ left:50%; transform:translateX(-50%); bottom:2.6rem; }
  .stage .globe-mode{ left:0; right:0; text-align:center; }
  .atlas__globe{ max-width:520px; margin-inline:auto; }
  .atlas-teaser{ min-height:auto; display:block; padding-block:0 clamp(3rem,6vw,4rem); }
  .atlas-teaser__globe{ position:relative; inset:auto; height:min(52vh,420px); margin-bottom:2rem; }
  .atlas-teaser__body{ margin-left:0; width:100%; }
  .boards__grid{ grid-template-columns:1fr; }
  .res-grid{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
}

@media (max-width: 900px){
  /* The floating cart and menu sit over the page. Without this the last
     thing on the page stays permanently hidden underneath them. */
  body{ padding-bottom:5.5rem; }
  .topbar__links{ display:none; }
  .topbar__cta{ display:none; }
  .problem__inner{ grid-template-columns:1fr; }
  .product__grid{ grid-template-columns:1fr; }
  .faq__inner{ grid-template-columns:1fr; }
  .faq__head{ position:static; }
  .next__grid{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
  .hero__strip{ grid-template-columns:repeat(2,1fr); }
  .hero__strip img:nth-child(n){ transform:none; }
}

@media (max-width: 620px){
  body{ font-size:16px; }
  /* Two up rather than one: these four are short, and a single column
     turns the strip into a long scroll for no benefit. */
  .specs__grid{ grid-template-columns:repeat(2,1fr); gap:1.1rem .9rem; }
  .spec{ padding:.9rem .6rem 1rem; }
  .spec .stamp{ width:58px; height:58px; font-size:.5rem; margin-bottom:.75rem; }
  .spec h4{ font-size:.98rem; }
  .spec p{ font-size:.86rem; }
  /* Both sketches off on a phone. Even at sixteen per cent, a figure
     behind the opening paragraph is noise a small screen cannot afford,
     and the paragraph is the one thing here that has to be read. */
  .hero__dancer--a, .hero__dancer--b{ display:none; }
  .hero__lede{ font-size:1.1rem; line-height:1.7; color:var(--ink); max-width:34ch; margin-bottom:1.4rem; }
  .hero__made{ max-width:30ch; margin-bottom:2.2rem; }
  .hero__trust{ gap:.5rem 1.4rem; }
  .hero__trust li:not(:last-child)::after{ display:none; }
  .hero__cta{ flex-direction:column; align-items:stretch; gap:1.1rem; }
  .hero__cta .btn{ width:100%; }
  .link-arrow{ align-self:center; }
  .free__form{ flex-direction:column; }
  .free__form input{ text-align:center; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .contact__row{ grid-template-columns:1fr; }
  .inside__head{ flex-direction:column; align-items:flex-start; }
  .atlas-facts div{ grid-template-columns:1fr; gap:.2rem; }
  .floatnav__cart span:first-child{ display:none; }
}

@media (max-width: 400px){
  .specs__grid{ grid-template-columns:1fr; }
  .spec{ padding:.8rem .5rem .9rem; }
  .footer__cols{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  /* Exempt, by Miryam's decision: the strip keeps sliding and the
     wheel keeps its spin whatever the phone's motion setting. */
  .marquee__track{ animation-duration:42s !important; animation-iteration-count:infinite !important; }
  #spinRotor{ transition-duration:4.6s !important; }
  .js .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   YOUR DESK, on the landing page
   The desk was reachable only from one word in the nav, which
   is not a door anyone finds.
   ========================================================= */
.deskpitch{ background:var(--ink); color:var(--bone); padding:clamp(4rem,9vw,7rem) 0; }
.deskpitch__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.deskpitch__lede{ color:rgba(244,240,232,.82); margin-top:1.2rem; max-width:40ch; font-size:1.1rem; }
.deskpitch__list{ list-style:none; margin:1.8rem 0; padding:0; display:grid; gap:.75rem; }
.deskpitch__list li{
  position:relative; padding-left:1.6rem; font-size:1rem; line-height:1.5;
  color:rgba(244,240,232,.62);
}
.deskpitch__list b{ color:var(--bone); font-weight:700; }
.deskpitch__list li::before{
  content:""; position:absolute; left:0; top:.55em; width:7px; height:7px;
  border-radius:50%; background:var(--blue-soft);
}
.deskpitch__cta{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.deskpitch__fine{
  font-family:var(--label); font-size:.6rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(244,240,232,.5);
}
.deskpitch__art{ display:grid; gap:.9rem; }
.deskcard{
  background:rgba(244,240,232,.06); border:1px solid rgba(244,240,232,.16);
  border-radius:12px; padding:1.1rem 1.2rem; backdrop-filter:blur(6px);
}
.deskcard__row{
  display:flex; align-items:center; gap:.7rem; padding:.55rem 0;
  font-size:.92rem; font-weight:600; color:var(--bone);
  border-bottom:1px solid rgba(244,240,232,.1);
}
.deskcard__row:last-child{ border-bottom:0; }
.deskcard__dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.deskcard__row em{
  margin-left:auto; font-style:normal;
  font-family:var(--label); font-size:.56rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(244,240,232,.55);
}
.deskcard--wrap{ display:grid; gap:.2rem; background:var(--blue-deep); border-color:var(--blue-deep); }
.deskcard--wrap strong{ font-size:2.6rem; font-weight:900; letter-spacing:-.05em; line-height:.9; }
.deskcard--wrap span{
  font-family:var(--label); font-size:.58rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(250,248,244,.8);
}
@media (max-width: 900px){
  .deskpitch__inner{ grid-template-columns:1fr; }
}

/* =========================================================
   PRICING
   Free where it matters, paid where it saves time. The paid
   card is honest about not existing yet.
   ========================================================= */
.pricing{ background:var(--bone-2); border-block:1px solid var(--line); padding:clamp(4rem,9vw,7rem) 0; }
.pricing__sub{ margin-inline:auto; }
.pricing__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2.4vw,26px); margin-top:clamp(2rem,4vw,3rem);
  align-items:start;
}
.plan{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:clamp(1.6rem,3vw,2.2rem);
  display:grid; gap:.5rem; align-content:start;
}
.plan--paid{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.plan__flag{
  position:absolute; top:1.1rem; right:1.2rem;
  font-family:var(--label); font-size:.54rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.4em .8em; border-radius:100px;
  background:rgba(244,240,232,.16); color:var(--bone);
}
.plan__name{
  margin:0; font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-60);
}
.plan--paid .plan__name{ color:rgba(244,240,232,.6); }
.plan__price{ margin:.2rem 0 0; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.plan__price strong{ font-size:clamp(2.2rem,4vw,3rem); font-weight:900; letter-spacing:-.05em; line-height:.9; }
.plan__price span{ font-size:.9rem; color:var(--ink-60); }
.plan--paid .plan__price span{ color:rgba(244,240,232,.7); }
.plan__note{
  margin:.3rem 0 1rem; font-family:var(--label); font-size:.58rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-40);
}
.plan--paid .plan__note{ color:rgba(244,240,232,.5); }
.plan__list{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.55rem; }
.plan__list li{ position:relative; padding-left:1.5rem; font-size:.95rem; color:var(--ink-80); }
.plan--paid .plan__list li{ color:rgba(244,240,232,.86); }
.plan__list li::before{
  content:""; position:absolute; left:0; top:.5em; width:7px; height:7px;
  border-radius:50%; background:var(--blue-deep);
}
.plan--paid .plan__list li::before{ background:var(--blue-soft); }
.plan__list b{ color:var(--ink); }
.plan--paid .plan__list b{ color:var(--bone); }
.plan .btn{ justify-self:start; }
.plan__form{ display:flex; gap:.5rem; flex-wrap:wrap; }
.plan__form input{
  flex:1 1 12rem; min-width:0; font-family:var(--display); font-size:.92rem;
  padding:.8em 1.1em; border-radius:100px; border:1px solid rgba(244,240,232,.3);
  background:rgba(244,240,232,.08); color:var(--bone);
}
.plan__form input::placeholder{ color:rgba(244,240,232,.45); }
.plan__form input:focus{ outline:2px solid var(--blue-soft); outline-offset:2px; }
.plan__msg{
  margin:.6rem 0 0; min-height:1.1em;
  font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-soft);
}
.pricing__honest{
  margin:clamp(2rem,4vw,2.6rem) auto 0; max-width:64ch; text-align:center;
  font-size:.92rem; line-height:1.6; color:var(--ink-60);
}
@media (max-width: 820px){
  .pricing__grid{ grid-template-columns:1fr; }
}

/* =========================================================
   RESOURCES TEASER
   The atlas gets people here. This is a reason to come back,
   so it sits high on the page rather than in the basement.
   ========================================================= */
.restease{ padding:clamp(5rem, 11vw, 9rem) 0; background:var(--bone); }
/* Compact rows, one per group, the way it read best on a phone. Each
   row is one link into its group on the resources page. */
.restease__grid{
  list-style:none; margin:2.4rem auto 0; padding:0;
  max-width:760px; display:grid; gap:.55rem;
}
.restease__grid li{ display:flex; }
.restease__card{
  flex:1; padding:.95rem 1.1rem .9rem 1.2rem;
  border:1px solid var(--line); border-radius:12px;
  background:var(--paper); color:var(--ink); text-decoration:none;
  display:grid; gap:.35rem;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.restease__card:hover{ transform:translateX(3px); border-color:var(--ink-40); background:var(--bone-2); }
.restease__head{ display:flex; align-items:center; justify-content:space-between; gap:.9rem; }
.restease__titles{ display:grid; gap:.1rem; min-width:0; }
.restease__name{ margin:0; font-size:1.08rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.restease__group{
  font-family:var(--label); font-size:.56rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60);
}
.restease__n{
  flex-shrink:0; min-width:2rem; height:2rem; padding:0 .55rem; border-radius:999px;
  display:grid; place-items:center;
  font-family:var(--label); font-size:.72rem; font-weight:700; color:var(--ink-60);
  border:1px solid var(--line); background:var(--bone);
}
.restease__card:hover .restease__n{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.restease__blurb{ margin:0; font-size:.86rem; line-height:1.5; color:var(--ink-80); }
.restease__blurb strong{ color:var(--ink); font-weight:800; }
.restease__foot{
  margin-top:2.4rem; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
}
.restease__fine{
  margin:0; font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60);
}

/* =========================================================
   HOW IT FITS
   The section that answers the question the old page never
   did: what is free, what costs money, and why.
   ========================================================= */
.fits{ padding:clamp(5rem, 11vw, 9rem) 0; background:var(--paper); }
.fits__grid{
  list-style:none; margin:2.8rem 0 0; padding:0;
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(230px,100%), 1fr));
}
.fits__card{
  padding:1.7rem 1.5rem 1.5rem;
  border:1px solid var(--line); border-radius:10px;
  background:var(--bone);
  display:flex; flex-direction:column; gap:.6rem;
  transition:transform .25s ease, border-color .25s ease;
}
.fits__card:hover{ transform:translateY(-3px); border-color:var(--ink-40); }
.fits__card--paid{ background:var(--ink); border-color:var(--ink); }
.fits__card--paid .fits__name{ color:var(--bone); }
.fits__card--paid .fits__what{ color:rgba(245,241,232,.78); }
.fits__card--paid .fits__price{ color:rgba(245,241,232,.62); }
.fits__card--paid .link-arrow{ color:var(--bone); }
.fits__price{
  font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60);
}
.fits__name{ margin:0; font-size:1.12rem; font-weight:800; letter-spacing:-.02em; }
.fits__what{ margin:0 0 .3rem; font-size:.88rem; line-height:1.6; color:var(--ink-80); flex:1; }
/* The words a skimming eye lands on, in full ink; on the dark card, in bone. */
.section-head__sub strong{ color:var(--ink); font-weight:800; }
.fits__what strong{ color:var(--ink); font-weight:800; }
.fits__card--paid .fits__what strong{ color:var(--bone); }

/* What is coming: one slim line under the grid rather than a paragraph,
   with a tag so it reads at a glance as "not yet" and nothing else. */
.fits__soon{
  margin-top:1rem; padding:1.1rem 1.4rem;
  border:1px dashed var(--ink-40); border-radius:10px;
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
}
.fits__soon-tag{
  font-family:var(--label); font-size:.6rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.3rem .55rem; border-radius:3px; background:var(--ink); color:var(--bone);
}
.fits__soon p{ margin:0; flex:1; min-width:16rem; font-size:.92rem; line-height:1.55; color:var(--ink-60); }
.fits__soon p strong{ color:var(--ink); font-weight:800; }

/* =========================================================
   PLANNER TEASER, and the sub page heroes
   ========================================================= */
.ptease{ padding:clamp(4rem, 9vw, 7rem) 0; background:var(--bone); border-block:1px solid var(--line); }
.ptease__inner{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.ptease__media img{ width:100%; height:auto; border-radius:8px; border:1px solid var(--line); display:block; }
.ptease__body{ display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; }
.ptease__price{ margin:0; display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.ptease__price strong{ font-size:1.6rem; font-weight:800; letter-spacing:-.03em; }
.ptease__price span{
  font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60);
}
@media (max-width:820px){ .ptease__inner{ grid-template-columns:1fr; } }

.phero{ padding:clamp(4rem,9vw,7rem) 0 clamp(2rem,4vw,3rem); }
.phero__inner{ display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start; }
.hero__title--sm{ font-size:clamp(2.4rem, 6.5vw, 4.6rem); }
.faq__more{ margin:2rem 0 0; font-size:.92rem; color:var(--ink-60); }
.faq__more a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   LEGAL PAGES
   ========================================================= */
.legal{ padding:0 0 clamp(4rem,9vw,7rem); }
.legal__wrap{ max-width:70ch; }
.legal h2{
  margin:2.6rem 0 0; font-size:1.24rem; font-weight:800; letter-spacing:-.02em;
  padding-top:1.6rem; border-top:1px solid var(--line);
}
.legal h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
.legal p{ margin:1rem 0 0; line-height:1.7; color:var(--ink-80); }
.legal ul{ margin:1rem 0 0; padding-left:1.2rem; color:var(--ink-80); line-height:1.7; }
.legal li{ margin-bottom:.6rem; }
.legal a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.legal__note{
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.9rem; color:var(--ink-60);
}

/* =========================================================
   THE SHELF
   The shop index. Everything for sale in one place, with
   what is not yet finished said plainly rather than hidden.
   ========================================================= */
.shelf{ padding:clamp(1rem,3vw,2rem) 0 clamp(4rem,9vw,7rem); }
.shelf__grid{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(2rem,4vw,3rem); }
.shelf__item{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem); align-items:center;
  padding-bottom:clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line);
}
.shelf__item:last-of-type{ border-bottom:0; padding-bottom:0; }
.shelf__media{ display:block; }
.shelf__media img{ width:100%; height:auto; display:block; border-radius:8px; border:1px solid var(--line); }
.shelf__media--blank{
  aspect-ratio:1500/1060; border-radius:8px; border:1px dashed var(--ink-40);
  background:var(--bone-2, var(--bone));
  display:flex; align-items:center; justify-content:center;
}
.shelf__media--blank span{
  font-family:var(--label); font-size:.8rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-40);
}
.shelf__body{ display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; }
.shelf__vol{
  margin:0; display:flex; align-items:center; gap:.6rem;
  font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60);
}
.shelf__flag{
  padding:.2rem .45rem; border-radius:3px; background:var(--ink); color:var(--bone);
  font-size:.56rem; letter-spacing:.14em;
}
.shelf__name{ margin:0; font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.shelf__name a{ color:inherit; text-decoration:none; }
.shelf__name a:hover{ text-decoration:underline; text-underline-offset:4px; }
.shelf__what{ margin:0; max-width:56ch; line-height:1.6; color:var(--ink-80); }
.shelf__meta{
  margin:0; font-family:var(--label); font-size:.6rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60);
}
.shelf__buy{ margin-top:.4rem; display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.shelf__price{ margin:0; font-size:1.7rem; font-weight:800; letter-spacing:-.03em; }
.shelf__item--soon .shelf__name,
.shelf__item--soon .shelf__what{ color:var(--ink-60); }
.shelf__note{
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:1.8rem; border-top:1px solid var(--line);
  max-width:66ch;
}
.shelf__note h3{ margin:0 0 .7rem; font-size:1.05rem; font-weight:800; letter-spacing:-.02em; }
.shelf__note p{ margin:0 0 .8rem; font-size:.93rem; line-height:1.65; color:var(--ink-80); }
.shelf__note a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px){
  .shelf__item{ grid-template-columns:1fr; }
}
.atlas-detail__rel{
  margin:.2rem 0 .8rem; font-size:.84rem; color:var(--ink-60);
}
.atlas-detail__rel a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   TOP BAR MENU
   Phones only. Where the links are hidden, a menu button takes
   the cart's place in the corner, and the cart moves to the
   bubble that appears on scroll.
   ========================================================= */
.topbar__menu{
  display:none; align-items:center; gap:.5rem;
  padding:.55rem .85rem; border-radius:999px; border:1px solid var(--ink);
  background:var(--ink); color:var(--bone); cursor:pointer;
  font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
}
.topbar__menu .floatnav__bars{ width:16px; }
.topbar__menu .floatnav__bars i{ background:var(--bone); }
@media (max-width: 900px){
  .topbar__menu{ display:inline-flex; }
  .topbar__cart{ display:none; }
}

/* =========================================================
   THE CHECKLIST NUDGE
   A small card from the bottom, not a wall over the page.
   ========================================================= */
.nudge{
  position:fixed; left:1rem; right:auto; bottom:1rem; z-index:60;
  width:min(360px, calc(100vw - 2rem));
  padding:1.3rem 1.3rem 1.1rem; border-radius:14px;
  background:var(--paper); color:var(--ink); border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(44,40,35,.18);
  opacity:0; transform:translateY(16px);
  transition:opacity .3s ease, transform .3s ease;
}
.nudge.is-on{ opacity:1; transform:none; }
.nudge[hidden]{ display:none; }
.nudge__close{
  position:absolute; top:.8rem; right:.9rem;
  background:none; border:0; cursor:pointer;
  font-family:var(--label); font-size:.58rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60);
}
.nudge__close:hover{ color:var(--ink); }
.nudge__title{ margin:.3rem 2.6rem .35rem 0; font-size:1.12rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.nudge__sub{ margin:0 0 .9rem; font-size:.86rem; line-height:1.5; color:var(--ink-80); }
.nudge__form{ display:grid; gap:.5rem; }
.nudge__form input{
  width:100%; padding:.7rem .85rem; border:1px solid var(--line); border-radius:8px;
  background:var(--bone); font:inherit; color:var(--ink);
}
.nudge__form .btn, .nudge__go{ width:100%; }
.nudge__msg{ margin:.6rem 0 0; min-height:1.1em; font-size:.82rem; color:var(--ink-60); }
.nudge__msg a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
@media (max-width: 900px){
  /* on a phone the yellow wheel tab sits bottom left too; the card
     goes above the bubble row rather than under a thumb */
  .nudge{ left:.75rem; right:.75rem; width:auto; bottom:4.6rem; }
}
.free__msg a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }