/* =========================================================================
   THE BOSTON ARTISTRY — concept redesign
   ------------------------------------------------------------------------
   DIRECTION  "Wet studio." Gallery paper, oversized editorial type, and
              paint as the only decoration. Nothing is illustrated, nothing
              is themed. The colour is pigment, used the way a studio uses it.
   INKS       Four. Yellow, magenta, blue, black, on paper. A process set,
              which is what a print and footwear designer actually works in.
   TYPE       Bricolage Grotesque (display) + Schibsted Grotesk (body).
              Deliberately not Inter, not Roboto.
   MOTION     Line clips, image clips, a pointer-tracked preview, one
              interactive canvas. No fade-up-on-scroll anywhere.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root{
  --paper:   #FAF7F2;
  --paper-2: #F2EDE4;
  --card:    #FFFFFF;
  --ink:     #141418;

  /* the four inks — the entire colour system */
  --y: #FFC72C;
  --m: #E8336D;
  --pink:   #F28FAF;   /* --m lifted 45% to white: pastel, but deep enough to carry */
  --pink-2: #EF7099;
  --blue:   #82B0F2;   /* --c lifted 45% */
  --blue-2: #5F9AEF;
  --sun:    #FFC72C;   /* --y itself; a lifted yellow dies on the cream */
  --sun-2:  #F0A21A;
  --coal:   #141418;   /* --ink, for the buttons that must beat every layer */
  --coal-2: #2C2C36;
  --c: #1B6FE8;

  /* lifted off thebostonartistry.com, 12 Sep 2026: the two tints the live
     site actually paints with. Decoration only — never type, never a button. */
  --pink-soft: #FFC6DE;
  --y-soft:    #FDCD1A;

  /* Text-safe shades of two of the inks. The pigments above stay untouched
     for paint, bars and dabs; these exist only where the ink becomes type,
     because #E8336D and #1B6FE8 do not clear 4.5:1 at body sizes. */
  --m-txt: #C2255C;
  --c-txt: #1257B8;

  /* neutrals are the ink, thinned. no extra hues enter the system */
  --ink-2: #4B4B55;
  --ink-3: #6A6A75;   /* 5.0:1 on paper, 4.6:1 on tint. AA at every size */
  --on-ink-2: #C0C0CB;
  --on-ink-3: #8E8E9A; /* 5.7:1 on ink */
  --line:  #E6E0D5;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:    "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;  --s7:3rem;   --s8:4.5rem;
  --s9:7rem;   --s10:10rem;

  --r-sm:12px; --r-md:20px; --r-lg:30px; --r-xl:42px;

  /* Apple: critically damped by default. bounce only follows momentum. */
  --spring:   cubic-bezier(.22,1,.36,1);
  --spring-b: cubic-bezier(.34,1.42,.4,1);
  --fast:150ms; --base:300ms; --slow:640ms;

  --sh-1: 0 1px 2px rgba(20,20,24,.04), 0 6px 18px rgba(20,20,24,.05);
  --sh-2: 0 2px 8px rgba(20,20,24,.05), 0 22px 50px rgba(20,20,24,.10);
  --sh-3: 0 6px 16px rgba(20,20,24,.07), 0 40px 84px rgba(20,20,24,.16);

  --wrap: 1240px;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .22vw,1.075rem);
  line-height:1.6;
  letter-spacing:-.008em;
  color:var(--ink);
  background:var(--paper);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
ol,ul{ list-style:none; }

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--c); outline-offset:3px; border-radius:6px;
}

.skip{
  position:fixed; top:-100px; left:var(--s4); z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.85rem 1.3rem; border-radius:0 0 var(--r-sm) var(--r-sm);
  text-decoration:none; font-weight:600;
  transition:top var(--fast) var(--spring);
}
.skip:focus{ top:0; }

/* ---------------------------------------------------------------- type */
h1,h2,h3{
  font-family:var(--display); font-weight:700; margin:0;
  line-height:1.03; text-wrap:balance;
  letter-spacing:-.035em;               /* size specific: tightens as it grows */
  font-optical-sizing:auto;
}
h2{ font-size:clamp(2.1rem,1.35rem + 3.2vw,4rem); }
h3{ font-size:clamp(1.14rem,1.06rem + .45vw,1.5rem); letter-spacing:-.026em; line-height:1.16; }
h2 em{ font-style:normal; color:var(--m-txt); }
p{ margin:0 0 var(--s4); text-wrap:pretty; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.73rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3);
  margin:0 0 var(--s5);
}
/* a bead of wet ink, not a bullet */
.ink{
  width:11px; height:11px; flex:0 0 auto;
  border-radius:52% 48% 44% 56% / 46% 54% 46% 54%;
  background:var(--k,var(--y));
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.16);
}
.ink--y{ --k:var(--y); } .ink--m{ --k:var(--m); } .ink--c{ --k:var(--c); }
.sec--ink .eyebrow{ color:#A9A9B4; }
.sec--ink h2 em{ color:var(--y); }

.lede{ font-size:clamp(1.06rem,1rem + .38vw,1.28rem); color:var(--ink-2); max-width:52ch; line-height:1.52; }
.sec--ink .lede,.sec--ink p{ color:var(--on-ink-2); }

/* ---------------------------------------------------------------- layout */
.wrap{ width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.5rem,820px); }
.sec{ padding-block:var(--sec-pad,clamp(var(--s8),7vw,var(--s10))); position:relative; }   /* --sec-pad: the phone pass, end of sheet */
.sec--flush{ padding-bottom:clamp(var(--s7),5vw,var(--s9)); }
.sec__head{ max-width:58ch; margin-bottom:clamp(var(--s6),5vw,var(--s8)); }
.sec__head--center{ margin-inline:auto; text-align:center; }
.sec__head--center .eyebrow{ justify-content:center; }
.sec--ink{ background:var(--ink); color:var(--paper); }
/* her dark checkerboard behind every ink section (Canva page 3, the sneakers page mockup, 23 Sep 2026): #1A1A1C / #262628, 36px checks */
.sec--ink{ background-color:#1A1A1C; background-image:repeating-conic-gradient(#262628 0 25%, #1A1A1C 0 50%); background-size:72px 72px; }
.sec--tint{ background:var(--paper-2); }

/* One lifted mark per section, never two, and only where it means something.
   isolation:isolate makes the section its own stacking context so the smear
   at z-index:-1 lands above the section's paper and under every word. */
/* isolate makes it a stacking context so the smear's z-index:-1 lands above
   the section's own paper and under every word. overflow-x:clip trims the
   3% the smear hangs past the right edge WITHOUT clipping the y axis, so the
   wet-paint drips under the two buttons still hang free. */
#sneakers{ isolation:isolate; overflow-x:clip; }
.smear{
  position:absolute; z-index:-1; pointer-events:none;
  top:-2%; right:-3%; width:min(42%,460px); height:auto; opacity:.5;
}

/* ---------------------------------------------------------------- buttons */
.btn{
  --bg:var(--ink); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:52px; padding:.9rem 1.7rem;
  background:var(--bg); color:var(--fg);
  font-weight:600; font-size:.98rem; letter-spacing:-.014em;
  text-decoration:none; border:0; border-radius:100px; cursor:pointer;
  transition:transform var(--fast) var(--spring), background var(--base) var(--spring),
             color var(--fast) linear, box-shadow var(--base) var(--spring);
  will-change:transform;
}
.btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.btn:hover{ --bg:var(--m); box-shadow:0 12px 30px color-mix(in srgb,var(--m) 32%,transparent); }
.btn:active{ transform:scale(.962); }     /* feedback on the press, not the release */
.btn--lg{ min-height:60px; padding:1.1rem 2.1rem; font-size:1.03rem; }
.btn--sm{ min-height:44px; padding:.55rem 1.2rem; font-size:.92rem; }
.btn--block{ width:100%; }
.btn--ghost{ --bg:transparent; --fg:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover{ --bg:var(--ink); --fg:#fff; box-shadow:none; }
.sec--ink .btn{ --bg:var(--y); --fg:var(--ink); }
.sec--ink .btn:hover{ --bg:#fff; box-shadow:0 12px 30px rgba(255,255,255,.16); }
.btn--y{ --bg:var(--y); --fg:var(--ink); }

/* ------------------------------------------------------------- wet-paint CTA
   One-to-one port of the 21st.dev "Wet Paint Button" by @vaib215. Its code is
   paywalled, so every number here was read off its public preview bundle
   cdn.21st.dev/vaib215/wet-paint-button/default/bundle.1753943861761.html :
   4px radius, four drips at 10/30/57/85% that are 8px wide and 24/20/10/16
   tall, a 6px concave fillet on each shoulder, an 8px drop that falls 50px and
   fades, and framer-motion's 2s easeIn (cubic-bezier(.42,0,1,1)) loop with a
   2s rest -- a 4s cycle -- at the reference's .5/3/4.25/1.5s offsets.
   What is NOT the reference's, each on Nitin's word, 12 Sep 2026:
     - the paint. Brand colours instead of indigo, one per background layer.
     - the label colour, because white cannot be read on the pastels.
     - the box. .wpb rides on .btn, so each button keeps its own size; the
       reference's 44px / 10px / 16px is gone.
     - the drip order. The reference's own four heights and four delays are
       dealt out three ways so no two buttons on a screen drip in lockstep.
     - pointer-events:none on the drips, so a faded drop cannot swallow a
       click 50px below the button.
   Everything else -- the shapes, the geometry, every timing -- is the
   reference's. Colours and the .btn overrides are at the end of this sheet. */
.wpb__drip{
  position:absolute; top:99%; left:var(--l); width:8px;
  transform:scaleY(.75); transform-origin:top; pointer-events:none;
  will-change:transform;   /* onto the compositor: the hero's WebGL paint sim owns the main thread, and without this the drips stutter with it */
  animation:wpb-stretch 4s var(--d) infinite;
}
.wpb__col{
  display:block; width:8px; height:var(--h);
  border-radius:0 0 9999px 9999px; background:var(--wpb-paint);
  transition:background-color .15s cubic-bezier(.4,0,.2,1);
}
/* .btn svg (0,1,1) also matches these, and it forces 18px, fill:none and a
   2.2px currentColor stroke -- which drew a black outline round every
   shoulder and blew it up to three times its size. Beat it on specificity. */
.wpb .wpb__cap{ position:absolute; top:0; width:6px; height:6px; stroke:none; fill:none; }
.wpb .wpb__cap path{ fill:var(--wpb-paint); stroke:none; transition:fill .15s cubic-bezier(.4,0,.2,1); }
.wpb__cap--r{ left:100%; }
.wpb__cap--l{ right:100%; transform:rotate(90deg); }
.wpb__drop{
  position:absolute; top:100%; left:0; width:8px; height:8px;
  border-radius:9999px; background:var(--wpb-paint);
  transform:translateY(-8px); opacity:1; will-change:transform,opacity;
  transition:background-color .15s cubic-bezier(.4,0,.2,1);
  animation:wpb-fall 4s var(--d) infinite;
}
@keyframes wpb-stretch{
  0%    { transform:scaleY(.75); animation-timing-function:cubic-bezier(.42,0,1,1); }
  12.5% { transform:scaleY(1);   animation-timing-function:cubic-bezier(.42,0,1,1); }
  50%   { transform:scaleY(.75); }
  100%  { transform:scaleY(.75); }
}
@keyframes wpb-fall{
  0%    { transform:translateY(-8px); opacity:1; animation-timing-function:cubic-bezier(.42,0,1,1); }
  50%   { transform:translateY(50px); opacity:0; }
  100%  { transform:translateY(50px); opacity:0; }
}

/* ---------------------------------------------------------------- header */
.hdr{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb,var(--paper) 72%,transparent);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  padding-top:env(safe-area-inset-top);
}
.hdr__in{
  width:min(100% - 2rem,1400px); margin-inline:auto;
  display:flex; align-items:center; gap:var(--s5); min-height:76px;
}
.hdr__edge{
  position:absolute; inset:100% 0 auto 0; height:26px; pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 62%,transparent),transparent);
  opacity:0; transition:opacity var(--base) linear;
}
.hdr.is-stuck .hdr__edge{ opacity:1; }

.hdr__brand{
  display:flex; align-items:center; gap:.65rem; text-decoration:none;
  font-family:var(--display); font-weight:500; font-size:.98rem;
  letter-spacing:-.028em; flex:0 0 auto; min-height:44px;
}
.hdr__brand img{ width:40px; height:40px; border-radius:50%; }
.hdr__brand b{ font-weight:800; }

.hdr__nav{ display:flex; gap:.1rem; margin-inline:auto; }
.hdr__nav a{ white-space:nowrap; }   /* 20 Sep 2026: Blog and Newsletter joined the row; nothing may break mid-word */
.hdr__nav a{
  position:relative; padding:.6rem .9rem; border-radius:100px; text-decoration:none;
  font-weight:500; font-size:.95rem; color:var(--ink-2);
  transition:color var(--fast) linear;
}
/* the underline is a brush mark that grows from where the pointer entered */
.hdr__nav a::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.42rem; height:2.5px;
  background:var(--ink); border-radius:2px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--base) var(--spring);
}
.hdr__nav a:hover{ color:var(--ink); }
.hdr__nav a:hover::after{ transform:scaleX(1); }

.hdr__act{ display:flex; align-items:center; gap:.45rem; flex:0 0 auto; }
.tel{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.4rem .65rem;
  border-radius:100px; text-decoration:none; font-weight:600; font-size:.92rem;
  transition:color var(--fast) linear, background var(--fast) linear;
}
.tel svg{ width:17px; height:17px; fill:currentColor; }
.tel:hover{ color:var(--m); background:var(--card); }

.burger{
  display:none; width:46px; height:46px; padding:0; place-items:center; gap:5px;
  background:var(--ink); border:0; border-radius:15px; cursor:pointer;
}
.burger span{ display:block; width:18px; height:2px; background:#fff; border-radius:2px;
  transition:transform var(--base) var(--spring); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.sheet{
  position:fixed; z-index:99; inset:auto 1rem auto 1rem;
  top:calc(76px + env(safe-area-inset-top));
  background:color-mix(in srgb,var(--card) 90%,transparent);
  backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:var(--s4);
  transform-origin:top right;               /* grows out of the button that opened it */
  opacity:0; transform:scale(.94) translateY(-8px);
  transition:opacity var(--fast) linear, transform var(--base) var(--spring);
}
.sheet.is-open{ opacity:1; transform:none; }
.sheet nav{ display:grid; margin-bottom:var(--s3); }
.sheet nav a{
  display:flex; align-items:center; gap:.75rem; min-height:52px; padding:.8rem .75rem;
  text-decoration:none; font-family:var(--display); font-weight:700; font-size:1.06rem;
  letter-spacing:-.028em; border-radius:var(--r-sm); border-bottom:1px solid var(--line);
}
.sheet nav a:last-child{ border-bottom:0; }
.sheet nav a::before{
  content:""; width:10px; height:10px; flex:0 0 auto; background:var(--k,var(--y));
  border-radius:52% 48% 44% 56% / 46% 54% 46% 54%;
}
.sheet nav a:active{ background:var(--paper-2); }

/* ---------------------------------------------------------------- hero
   Full bleed, paint first. Layer order matters and is the whole trick:
     paper  ->  SVG brush strokes  ->  the wet canvas  ->  a soft paper
     wash under the copy  ->  the type.
   Because the wash sits between the paint and the words, a visitor can
   paint the entire hero magenta and the body copy still clears AA.       */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  /* tall, but the palette has to stay above the fold on a laptop, because
     it is the thing that tells you the hero is yours to paint */
  /* Nitin, 12 Sep 2026: the black strip below (Birthday parties, Custom
     sneakers) belongs on the first screen, so the hero leaves room for the
     76px header and the ~62px strip. */
  min-height:min(calc(100svh - 142px),800px);
  display:flex; align-items:center;
  /* the black drip band at the foot of the hero is an overlay, so its height
     has to be reserved here or it eats the last line of the copy. One value,
     used by the padding below, the tools and the drip itself. */
  --drip:clamp(28px,4.5vw,60px);
  /* 12 Sep 2026: tightened so the ticker and the index below it sit higher on
     a laptop screen, per Nitin. */
  padding-block:calc(var(--brand-top) + var(--w) + var(--s5))
                calc(clamp(1.25rem,3vw,1.75rem) + var(--drip));
}
/* on desktop the drip sits under the strip, not in the hero, so the hero
   need not reserve room for it */
@media (min-width:1081px){
  /* Nitin, 16 Sep 2026, fifth pass: the hero keeps its first-screen height
     (the black strip stays at the foot of the first screen); only the corner
     logo tucks up under the nav, with a clear band between it and the pill */
  .hero{ padding-block:calc(var(--brand-top) + var(--w) + var(--s5)) .75rem; }
  .hero .hero__sub{ margin-bottom:var(--s3); }   /* the two buttons a little higher */
  .hero .hero__cta{ margin-bottom:var(--s3); }
}

/* --- layer 1: the brush strokes, which paint themselves in --- */
.paint{
  position:absolute; inset:-2% -2% 0; width:104%; height:104%;
  z-index:-2; pointer-events:none;
}
/* SUBTLE, Nitin 12 Sep 2026. The paint is a wash the type sits on, not a
   poster. Band and accents sit right back; the heart is the single mark
   allowed to read, because it is the mark the live site is known for. */
.paint .st{ fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:.34; }
.paint .accent{ opacity:.20; }
.paint .drips path,.paint .spat circle{ opacity:.32; }
.paint .heart .st{ opacity:.60; }
.paint .heart .drop{ opacity:.55; transform:scaleY(0); transform-origin:top center; }
.paint .narrow{ display:none; }   /* phones only, see the 760px block */
/* the wing marks only exist to carry the paint out to the edges of a frame
   wider than the artwork. fitScene() in site.js sets is-wide the moment the
   hero is wider than 1200x820, so this follows the real shape of the hero
   rather than a guess at a screen width. A phone never renders them, so the
   intro animation costs exactly what it did before, and with no JS at all
   they stay off, which is the old behaviour. */
.paint .wing{ display:none; }
.hero.is-wide .paint .wing{ display:block; }
.paint .drips path{ transform:scaleY(0); transform-origin:top center; }
.paint .spat circle{ transform:scale(0); transform-origin:center; }

.js .paint .st{ stroke-dasharray:1; stroke-dashoffset:1; }
.js .hero.is-wet .paint .st{
  animation:brush var(--dur,1200ms) cubic-bezier(.22,1,.36,1) var(--del,0ms) forwards;
}
.js .hero.is-wet .paint .drips path{
  animation:run 900ms cubic-bezier(.34,1.42,.4,1) var(--del,0ms) forwards;
}
.js .hero.is-wet .paint .spat circle{
  animation:land 520ms cubic-bezier(.34,1.5,.4,1) var(--del,0ms) forwards;
}
.js .hero.is-wet .paint .heart .drop{
  animation:run 900ms cubic-bezier(.34,1.42,.4,1) var(--del,0ms) forwards;
}
@keyframes brush{ to{ stroke-dashoffset:0; } }
@keyframes run  { to{ transform:scaleY(1); } }
@keyframes land { to{ transform:scale(1); } }

/* --- layer 2: the wet canvas --- */
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:-1;
  touch-action:pan-y;                     /* a finger still scrolls the page */
  cursor:crosshair;
}

.hero__wrap{
  position:relative; z-index:1;
  width:min(100% - 2.5rem,1400px); margin-inline:auto;
  pointer-events:none;                    /* the canvas underneath stays reachable */
}
.hero__wrap a,.hero__wrap button{ pointer-events:auto; }

/* --- layer 3: the wash. invisible as a shape, decisive for legibility --- */
.hero__copy{ position:relative; max-width:44rem; }
.hero__copy::before{
  content:""; position:absolute; z-index:-1;
  inset:-14% -22% -12% -30%;
  background:radial-gradient(72% 62% at 42% 50%,
    color-mix(in srgb,var(--paper) 88%,transparent) 0%,
    color-mix(in srgb,var(--paper) 72%,transparent) 46%,
    transparent 78%);
}
/* the mark, 16 Sep 2026 (Nitin): the small badge above the eyebrow is gone.
   A big brand, roundel + wordmark, sits above the pill at the left until the
   first scroll; then #fly carries it up into the header (site.js) and the
   header brand takes over. Sizes are all multiples of --w so the big brand,
   scaled by 40/--w, lands exactly on the small one (40px mark, .98rem type,
   .65rem gap). */
/* 16 Sep 2026, second pass (Nitin): too close to the pill. It is a corner
   logo now: absolute in the hero's top-left, a little left of the copy's
   edge, with its own padding, and the hero reserves the band above the copy
   so the two can never touch. --w lives on .hero so both sums agree. */
.hero{ --w:clamp(76px,9.2vw,132px); --brand-top:clamp(2px,.4vw,6px); }   /* Nitin 16 Sep, fifth pass: almost no padding under the nav */
.hero__brand{
  position:absolute; z-index:2; pointer-events:none;
  top:var(--brand-top);
  left:max(.25rem, calc((100% - 1400px) / 2 - 2rem));   /* further left than the copy: 4px in from the edge on a 1440 screen, more room on wider ones */
}
.hero__brand-in, .fly{
  display:flex; align-items:center; gap:calc(var(--w) * .26);
  font-family:var(--display); font-weight:500; line-height:1;
  font-size:calc(var(--w) * .392); letter-spacing:-.028em; white-space:nowrap;
}
.hero__brand-in img, .fly img{
  width:var(--w); height:var(--w); border-radius:50%; flex:0 0 auto;
  box-shadow:0 14px 28px -14px rgba(20,20,24,.5);
}
.hero__brand b, .fly b{ font-weight:800; }
.js.is-stuck .hero__brand{ opacity:0; pointer-events:none; }      /* the flyer takes over the same frame */
.fly{
  --w:clamp(76px,9.2vw,132px);          /* must equal .hero --w */
  position:fixed; z-index:101; left:0; top:0; display:none;
  transform-origin:0 0; transition:transform 620ms var(--spring);
  pointer-events:none;
}
.fly.is-on{ display:flex; }
/* the header brand is hidden while the big one shows, and until the flyer lands */
.js .hdr__brand{ transition:opacity var(--fast) linear; }
.js:not(.is-landed) .hdr__brand{ opacity:0; pointer-events:none; }
.hero__copy .eyebrow{ margin-bottom:var(--s3); }

.hero__h1{
  font-size:clamp(2.9rem,1rem + 5.9vw,4.6rem);
  font-weight:800; line-height:.95; letter-spacing:-.052em;
  margin:0 0 var(--s4);
}
/* the single place the paint is allowed to touch the type. Hand shaped, so
   it reads as a mark somebody made rather than a highlighter rectangle. */
.wet{ position:relative; display:inline-block; z-index:0; }
.wet::before{
  content:""; position:absolute; z-index:-1;
  left:-.1em; right:-.1em; top:.1em; bottom:.02em;
  background:var(--y);
  border-radius:46% 54% 50% 50% / 62% 38% 60% 40%;
  transform:rotate(-1.1deg);
}

.hero__sub{ font-size:clamp(1.05rem,1rem + .36vw,1.2rem); color:var(--ink-2); max-width:42ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); row-gap:44px; margin-bottom:var(--s5); }  /* 44px: the longest drip (24px) and its 6px shoulder must clear the button below when the row wraps */
/* .hero__meta (hours, guests, inks) removed 16 Sep 2026; .loved sits there now, see the end of this file */

/* --- the tools sit on the paint, not in a sidebar --- */
.hero__tools{
  /* under the work, not centred, because centred lands it on top of the
     Wed-Sun / 8-18 / Four inks row */
  position:absolute; z-index:2; right:clamp(1.5rem,4vw,3.5rem);
  bottom:calc(clamp(1.5rem,4vw,3rem) + var(--drip,0px));
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  width:max-content; max-width:calc(100% - 2.5rem);
}
.palette{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  padding:.5rem .7rem; border-radius:100px;
  background:color-mix(in srgb,var(--card) 86%,transparent);
  backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:var(--sh-2);
}
.palette__label{
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding-inline:.45rem .3rem;
}
.swatch{
  width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:transparent; display:grid; place-items:center;
  transition:transform var(--base) var(--spring-b);
}
.swatch i{
  display:block; width:25px; height:25px; background:var(--k);
  border-radius:52% 48% 44% 56% / 46% 54% 46% 54%;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.2), 0 1px 3px rgba(20,20,24,.22);
  transition:transform var(--base) var(--spring-b), box-shadow var(--base) var(--spring);
}
.swatch:hover i{ transform:scale(1.16) rotate(8deg); }
.swatch:active{ transform:scale(.9); }
.swatch[aria-pressed="true"] i{
  transform:scale(1.24);
  box-shadow:0 0 0 3px var(--card), 0 0 0 5.5px var(--k), inset 0 -2px 4px rgba(0,0,0,.2);
}
.palette__reset{
  min-height:44px; padding:0 1rem; border:0; border-radius:100px; cursor:pointer;
  background:var(--paper-2); color:var(--ink-2); font-size:.85rem; font-weight:600;
  transition:background var(--fast) linear, color var(--fast) linear, transform var(--fast) var(--spring);
}
.palette__reset:hover{ background:var(--ink); color:#fff; }
.palette__reset:active{ transform:scale(.95); }

.hero__hint{ margin:0; transition:opacity var(--slow) linear; }
.hero__hint span{
  display:inline-flex; align-items:center; gap:.4rem;
  background:color-mix(in srgb,var(--ink) 94%,transparent);
  color:#fff; font-size:.76rem; font-weight:500;
  padding:.4rem .85rem; border-radius:100px;
}
.hero__hint.is-gone{ opacity:0; }

/* Desktop only: the palette leaves the foot of the hero (where, on a short
   laptop, it used to fall below the fold) and becomes a dock on the right. */
@media (min-width:1081px){
  /* the palette is a dock on the right edge of the hero (Nitin, 12 Sep): the
     swatches stack top-down, the hint sits beside it, and the foot of the
     hero stays clear. Vertically centred, so it is in view on a short
     window too, which is what the old bottom clamp was for. */
  .hero__tools{
    top:50%; bottom:auto; transform:translateY(-50%);
    right:clamp(.5rem,1vw,1rem);         /* hugs the edge (Nitin, 12 Sep) */
    flex-direction:row-reverse; align-items:center; gap:.8rem;
  }
  .palette{ flex-direction:column; flex-wrap:nowrap; padding:.7rem .45rem; gap:.35rem; }
  .palette__label{ display:none; }     /* the dock needs no name (Nitin, 12 Sep) */
  .palette__reset{ width:44px; height:44px; min-height:0; padding:0; border-radius:50%; font-size:.72rem; }
}

/* The wet edge. It used to sit at the hero's bottom, which put it ON TOP of
   the offerings line and read as a lumpy black band, not as paint. Nitin,
   12 Sep 2026: move it AFTER that line, so the ink runs OFF the band and
   down onto the paper below — which is the only way a drip reads as a drip. */
.ticker__drip{ position:relative; z-index:1; margin-top:-1px; line-height:0; pointer-events:none; }
.ticker__drip svg{ width:100%; height:var(--drip,clamp(28px,4.5vw,60px)); display:block; }

/* ---------------------------------------------------------------- ticker */
.ticker{ background:var(--ink); color:var(--paper); overflow:hidden; padding:.9rem 0; }
.ticker__track{ display:flex; align-items:center; gap:1.7rem; width:max-content; will-change:transform; }
.ticker span{
  font-family:var(--display); font-weight:500;
  font-size:clamp(.95rem,.85rem + .5vw,1.4rem); letter-spacing:-.03em; white-space:nowrap;
}
.ticker i{
  width:11px; height:11px; flex:0 0 auto; background:var(--k,var(--y));
  border-radius:52% 48% 44% 56% / 46% 54% 46% 54%;
}

/* ======================================================== THE INDEX (desktop)
   An editorial index, not a card grid. Hovering a line brings its picture
   toward the pointer with a little lag, the way a real studio site does it. */
.idx{ margin:0; padding:0; border-top:1px solid var(--line); }
.idx__row{ border-bottom:1px solid var(--line); }
.idx__row > a{
  display:grid; align-items:center; gap:var(--s5);
  grid-template-columns:auto 1fr auto auto;
  padding:clamp(1.15rem,2.2vw,1.9rem) .25rem;
  text-decoration:none; position:relative;
  transition:padding-left var(--base) var(--spring), color var(--base) linear;
}
.idx__row > a::before{                       /* a wet bar wipes in from the left */
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:var(--k); border-radius:3px;
  transform:scaleY(0); transform-origin:center;
  transition:transform var(--base) var(--spring);
}
.idx__row > a:hover,.idx__row > a:focus-visible{ padding-left:1.6rem; }
.idx__row > a:hover::before,.idx__row > a:focus-visible::before{ transform:scaleY(1); }

.idx__n{
  font-family:var(--display); font-weight:500; font-size:.9rem;
  color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.idx__t{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem,1rem + 2.3vw,3.05rem); letter-spacing:-.04em; line-height:1.05;
}
.idx__d{ font-size:.95rem; color:var(--ink-3); text-align:right; }
.idx__go{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--paper-2); transition:background var(--base) linear, transform var(--base) var(--spring); }
.idx__go svg{ width:19px; height:19px; fill:none; stroke:var(--ink); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; }
.idx__row > a:hover .idx__go{ background:var(--k); transform:translateX(5px); }
.idx__m{ display:none; }                     /* the picture lives in #peek on desktop */

.idx__peek{
  position:fixed; z-index:60; top:0; left:0; width:clamp(220px,19vw,300px);
  aspect-ratio:4/5; border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--sh-3); pointer-events:none;
  opacity:0; transform:translate3d(-50%,-50%,0) scale(.9);
  transition:opacity var(--base) linear, transform var(--base) var(--spring);
  will-change:transform,opacity;
}
.idx__peek.is-on{ opacity:1; }
.idx__peek img{ width:100%; height:100%; object-fit:cover; }

/* ---------------------------------------------------------------- founder */
.founder{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(var(--s6),5vw,var(--s9)); align-items:center; }
.founder__img > img{ width:100%; border-radius:var(--r-xl); }
.founder__copy h2{ margin-bottom:var(--s5); }
.creds{
  display:flex; flex-wrap:wrap; gap:var(--s7);
  margin:var(--s7) 0 0; padding:var(--s5) 0 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.creds li{ display:grid; gap:.05rem; }
.creds b{ font-family:var(--display); font-weight:700; font-size:1.7rem; letter-spacing:-.038em; color:var(--y); }
.creds span{ font-size:.83rem; color:#A9A9B4; }

/* ---------------------------------------------------------------- rails */
/* Desktop drifts on its own. Touch gets a real swipe with snap points,
   because an auto-scrolling rail you cannot control is hostile on a phone. */
.rail{ overflow:hidden; margin-top:var(--s4); }
.rail__track{ display:flex; gap:var(--s4); width:max-content; will-change:transform; }
.rail figure{
  margin:0; flex:0 0 auto; width:clamp(180px,21vw,300px);
  aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  background:var(--paper-2); box-shadow:var(--sh-1);
}
.rail figure:nth-child(3n){ aspect-ratio:1/1; }
.rail figure:nth-child(4n){ aspect-ratio:4/3; }
/* one grade across every photo, so a mix of phone and camera shots cohere */
.rail img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.04) contrast(1.02); }

/* ---------------------------------------------------------------- tiers */
.tiers{ display:grid; gap:var(--s5); grid-template-columns:repeat(3,1fr); align-items:start; }
.tier{
  position:relative; overflow:hidden;
  background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:var(--s6) var(--s5) var(--s5); display:grid; gap:.65rem; align-content:start;
}
.tier::before{ content:""; position:absolute; inset:0 0 auto 0; height:7px; background:var(--k,var(--c)); }
.tier h3{ margin:0; }
.tier p{ margin:0; color:var(--ink-2); font-size:.95rem; }
.tier ul{ margin:.3rem 0 0; padding:0; display:grid; gap:.45rem; }
.tier li{ position:relative; padding-left:1.35rem; font-size:.92rem; color:var(--ink-2); }
.tier li::before{
  content:""; position:absolute; left:0; top:.52em; width:9px; height:9px;
  background:var(--k,var(--c)); border-radius:52% 48% 44% 56% / 46% 54% 46% 54%;
}
.tier__flag{
  margin:0; font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--y);
}
.tier--hero{ background:var(--ink); color:var(--paper); grid-row:span 2; box-shadow:var(--sh-3); }
.tier--hero p,.tier--hero li{ color:var(--on-ink-2); }
.tier--hero li::before{ background:var(--y); }
.tier--hero .btn{ margin-top:.8rem; justify-self:start; }

/* ---------------------------------------------------------------- split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--s6),5vw,var(--s9)); align-items:center; }
.split--rev .split__copy{ order:2; }
.split__copy h2{ margin-bottom:var(--s4); }
.split__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); row-gap:44px; margin-top:var(--s5); }  /* same reason as .hero__cta */
.split__img img{ width:100%; border-radius:var(--r-xl); box-shadow:var(--sh-2); }

/* image clip reveal — the picture uncovers itself and settles, no fade */
[data-clip]{ overflow:hidden; border-radius:var(--r-xl); }
.js [data-clip] img{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.1);
  transition:clip-path 900ms var(--spring), transform 1200ms var(--spring);
}
.js [data-clip].in img{ clip-path:inset(0 0 0 0); transform:scale(1); }

/* ---------------------------------------------------------------- quote */
.sec--quote{ padding-block:clamp(var(--s7),6vw,var(--s9)); }
/* 20ch was set on the figure, where a ch is the 16px body font — so the review
   was squeezed into a 210px column, two words a line. The measure belongs to
   the quote's own 3.4rem type (seen in Chrome at 1710px, 12 Sep 2026). */
.quote{ margin:0; text-align:center; margin-inline:auto; }
.stars{ display:flex; gap:.35rem; justify-content:center; margin-bottom:var(--s5); }
.stars svg{ width:22px; height:22px; fill:var(--y); }
.quote blockquote{ margin:0; }
.quote blockquote p{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.75rem,1.1rem + 2.8vw,3.4rem); line-height:1.08; letter-spacing:-.042em;
  color:#fff; margin:0 auto; max-width:20ch;
}
.quote figcaption{ margin-top:var(--s5); font-weight:600; color:var(--y); }
.quote figcaption span{ display:block; font-weight:400; color:var(--on-ink-3); font-size:.86rem; }

/* ---------------------------------------------------------------- faq */
.faq{ display:grid; gap:var(--s3); }
.faq details{ background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-1); overflow:hidden; }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:1.15rem var(--s5); min-height:60px;
  font-family:var(--display); font-weight:700; font-size:1.04rem; letter-spacing:-.028em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary span{
  flex:0 0 auto; position:relative; width:27px; height:27px; border-radius:50%;
  background:var(--paper-2);
  transition:transform var(--base) var(--spring), background var(--base) linear;
}
.faq summary span::before,.faq summary span::after{
  content:""; position:absolute; inset:50% 7.5px auto 7.5px; height:2px;
  background:var(--ink); border-radius:2px; transform:translateY(-50%);
}
.faq summary span::after{ transform:translateY(-50%) rotate(90deg); transition:transform var(--base) var(--spring); }
.faq details[open] summary span{ background:var(--y); transform:rotate(180deg); }
.faq details[open] summary span::after{ transform:translateY(-50%) rotate(0deg); }
.faq details > div{ padding:0 var(--s5) 1.3rem; }
.faq details > div p{ margin:0; color:var(--ink-2); max-width:64ch; }

/* ---------------------------------------------------------------- visit */
.visit{ display:grid; grid-template-columns:1fr .8fr; gap:clamp(var(--s6),5vw,var(--s8)); align-items:stretch; }
/* round 11 (26 Sep 2026), her "FIX THE LAYOUT" on the pop-ups contact block: the card ended 240px above the copy and the
   Phone box was narrower than the dropdown. The card now runs the copy's height, the message box takes the spare room, and
   every field fills its column. Same rules serve every page's contact block. */
.visit .form{ display:flex; flex-direction:column; }
.visit .form .field:has(> textarea){ flex:1 1 auto; grid-template-rows:auto minmax(100px,1fr) auto; }
.field{ min-width:0; }
.field input,.field select,.field textarea{ width:100%; min-width:0; }

.visit__facts{ margin:var(--s7) 0 0; padding:0; display:grid; gap:var(--s5); }
.visit__facts li{ display:flex; gap:var(--s4); align-items:flex-start; }
.visit__facts svg{
  flex:0 0 auto; width:22px; height:22px; margin-top:4px;
  fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.visit__facts b{ display:block; font-weight:600; }
.visit__facts a{ font-size:.92rem; color:var(--c-txt); text-decoration:underline; text-underline-offset:3px;
  display:inline-flex; min-height:44px; align-items:center; }
.visit__facts span{ font-size:.92rem; color:var(--ink-3); }

.form{
  background:var(--card); border-radius:var(--r-xl); box-shadow:var(--sh-2);
  padding:clamp(var(--s5),3vw,var(--s6)); display:grid; gap:var(--s4);
}
.form h3{ margin:0; }
.field{ display:grid; gap:.35rem; }
.field label{ font-weight:600; font-size:.9rem; }
.field label i{ color:var(--m-txt); font-style:normal; }
.field input,.field select,.field textarea{
  min-height:52px; padding:.8rem 1rem;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r-sm);
  font-size:1rem;                       /* 16px, so iOS does not zoom on focus */
  transition:border-color var(--fast) linear, background var(--fast) linear;
}
.field textarea{ min-height:100px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--ink); background:var(--card); }
.field.is-bad input,.field.is-bad select{ border-color:var(--m-txt); }
.hint{ margin:0; font-size:.82rem; color:var(--ink-3); }
.err{ margin:0; font-size:.82rem; font-weight:600; color:var(--m-txt); }
.err:empty{ display:none; }
.form__note{ margin:30px 0 0; font-size:.8rem; color:var(--ink-3); text-align:center; }  /* room for the Send enquiry drips */
.form__ok{
  margin:0; padding:.95rem 1rem; border-radius:var(--r-sm);
  background:var(--ink); color:#fff; font-weight:600; font-size:.94rem; text-align:center;
}
/* 27 Sep 2026: .field, .news__row and .btn set display, which beat the hidden attribute, so a sent
   form kept its fields and a "Sending" button on screen. Inside a form, hidden always hides. */
form [hidden]{ display:none !important; }

/* ---------------------------------------------------------------- footer
   MOTION FOOTER — a one-to-one rebuild of 21st.dev @jahed "Motion Footer"
   (CinematicFooter), read out of the public preview bundle
   cdn.21st.dev/easemize/motion-footer/default/bundle.1774887915333.html
   on 12 Sep 2026, so every number below is the reference's own, not a
   look-alike. React + GSAP there; plain CSS + 40 lines of scroll maths here.

   THE TRICK: the outer .mftr gets a clip-path, which makes it the
   containing block for position:fixed children. So the footer is pinned to
   the viewport but cropped to the outer box — the page scrolls away like a
   curtain and the footer is revealed underneath it. No sticky, no JS.

   GSAP eases, converted:  power1.out 1-(1-p)^2 · power3.out 1-(1-p)^4
   power2.out cubic-bezier(.33,1,.68,1) · elastic.out(1,0.3) the linear()
   below, sampled at 33 points off 2^(-10t)·sin((t-.075)·2π/.3)+1.
   Colours are the site's four inks, not the reference's shadcn tokens:
   foreground=--paper, background=--ink, primary=--y, secondary=--m.       */

.mftr{ position:relative; width:100%; height:calc(100vh + 24px); margin-top:-24px;
       clip-path:polygon(0% 0, 100% 0%, 100% 100%, 0 100%); }

/* THE SHEET. Watched in Chrome, 12 Sep 2026: half of what makes the reference
   read as a reveal is the page itself — its <main> ends in 24px rounded
   corners (rounded-b-3xl) with a 1px border, so the content visibly lifts off
   the footer. The footer box starts 24px higher, under those corners, so the
   dark shows through them instead of paper. */
#main{ position:relative; z-index:2; background:var(--paper);
       border-radius:0 0 24px 24px; overflow:clip;
       border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent); }

/* the site header is not in the reference. Left sticky, it lay across the top
   of the revealed footer and hid the marquee; it steps aside once the page
   has fully lifted off (site.js adds .is-away). */
.hdr{ transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .3s linear; }
.hdr.is-away{ transform:translateY(-100%); opacity:0; pointer-events:none; }

.ftr{
  position:fixed; bottom:0; left:0; width:100%; height:100vh;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; background:var(--ink); color:var(--paper);
  --pill-bg-1:      rgba(250,247,242,.03);
  --pill-bg-2:      rgba(250,247,242,.01);
  --pill-border:    rgba(250,247,242,.08);
  --pill-highlight: rgba(250,247,242,.10);
  --pill-shadow:    rgba(20,20,24,.50);
  --pill-inset:     rgba(20,20,24,.80);
  --pill-bg-1-h:      rgba(250,247,242,.08);
  --pill-bg-2-h:      rgba(250,247,242,.02);
  --pill-border-h:    rgba(250,247,242,.20);
  --pill-highlight-h: rgba(250,247,242,.20);
  --pill-shadow-h:    rgba(20,20,24,.70);
}

/* --- layer 0: the breathing aurora (8s ease-in-out alternate, .6→1) ----- */
.ftr__aurora{
  position:absolute; left:50%; top:50%; height:60vh; width:80vw;
  transform:translate(-50%,-50%); border-radius:50%; filter:blur(80px);
  pointer-events:none; z-index:0;
  /* over a near-black ground a 20%-alpha pastel desaturates to grey, which is
     what made the reference's glow read red-brown here. Screened, the pastel
     survives as itself (Nitin, 12 Sep 2026: "brand colours, pastel"). */
  mix-blend-mode:screen;
  /* Nitin, 12 Sep 2026: the reference's primary/secondary at 15% landed as a
     flat red hue on the ink. These are the site's own lifted pastels — sun,
     pink, blue — so the glow is the brand's, not a tint of magenta. */
  background:radial-gradient(circle at 50% 50%,
    rgba(242,143,175,.30) 0%, rgba(130,176,242,.26) 40%, transparent 70%);
  animation:ftr-breathe 8s ease-in-out infinite alternate;
}
@keyframes ftr-breathe{
  0%  { transform:translate(-50%,-50%) scale(1);   opacity:.6; }
  100%{ transform:translate(-50%,-50%) scale(1.1); opacity:1;  }
}

/* --- layer 0: 60px graph paper, masked away top and bottom ------------- */
.ftr__grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:60px 60px;
  background-image:
    linear-gradient(to right,  rgba(250,247,242,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(250,247,242,.03) 1px, transparent 1px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}

/* --- layer 0: the giant wordmark. 26vw, outlined, fading into the ink --- */
.ftr__word{
  position:absolute; bottom:5vh; left:50%; white-space:nowrap;
  z-index:0; pointer-events:none; user-select:none;
  /* "Boston Artistry" is fifteen characters where the reference's word is
     six, so it is set to span the footer rather than run off both edges
     at the reference's 26vw (Nitin, 12 Sep 2026). */
  font-family:var(--display); font-size:15.6vw; line-height:.78;
  font-weight:800; letter-spacing:-.05em; color:transparent;
  -webkit-text-stroke:1px rgba(250,247,242,.05);
  background:linear-gradient(180deg, rgba(250,247,242,.10) 0%, transparent 60%);
  -webkit-background-clip:text; background-clip:text;
  /* scrubbed: y 10vh→0, scale .8→1, opacity 0→1, power1.out */
  --p:0;
  transform:translate(-50%, calc(10vh - var(--p) * 10vh)) scale(calc(.8 + var(--p) * .2));
  opacity:var(--p);
}

/* --- layer 1: the tilted marquee, 40s linear, two copies, translateX -50% */
/* Nitin, 12 Sep 2026 (latest): the band goes back to the TOP of the footer,
   above the headline, with the logo stamped on it at the far left. It sat low
   over the wordmark before. .ftr__band holds both so the logo can overlap. */
.ftr__band{ position:relative; z-index:2; width:100%; margin-top:clamp(3rem,9vh,5.5rem); }
.ftr__marquee{
  position:relative; width:100%; overflow:hidden; z-index:1;
  margin:0;
  border-top:1px solid rgba(250,247,242,.09); border-bottom:1px solid rgba(250,247,242,.09);
  background:rgba(20,20,24,.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:1rem 0; transform:rotate(-2deg) scale(1.1);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
}
.ftr__marquee ul{
  display:flex; width:max-content; list-style:none; margin:0; padding:0;
  font-size:.75rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:#A1A1A1; animation:ftr-marquee 40s linear infinite;
}
.ftr__marquee li{ display:flex; align-items:center; gap:3rem; padding:0 1.5rem; }
.ftr__marquee b{ font-weight:700; }
.ftr__marquee i{ font-style:normal; }
.ftr__marquee i:nth-of-type(odd){  color:rgba(255,199,44,.6); }
.ftr__marquee i:nth-of-type(even){ color:rgba(232,51,109,.6); }
@keyframes ftr-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* --- the middle: headline, then the pills -------------------------------- */
.ftr__mid{
  position:relative; z-index:1; flex:1 1 auto;
  /* Nitin, 12 Sep 2026: headline and buttons pulled up under the band with
     even gaps, instead of floating in the middle of the leftover space */
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  width:100%; max-width:80rem; margin:0 auto; padding:0 1.5rem; margin-top:clamp(4rem,10vh,5.5rem); /* +~32px for the tilted band */
}
/* the mark again, 12 Sep 2026: Nitin asked for it above this headline too,
   same sticker treatment as the hero's, with room to breathe above it so it
   does not sit flush against the wordmark scrubbing in behind it. Bigger and
   to the left, his second call once he saw it centered at 64px; third call,
   further left and on the marquee band, which runs behind it like a sticker. */
.ftr__logo{
  position:absolute; z-index:2; left:clamp(1rem,4vw,3.5rem); top:50%;
  width:112px; height:112px; border-radius:50%; transform:translateY(-50%) rotate(-11deg);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
}
.ftr__h2{
  font-family:var(--display); font-size:clamp(2rem,8.2vw,3rem); font-weight:800;
  letter-spacing:-.05em; margin:0 0 clamp(2.5rem,6vh,3.5rem); text-align:center;
  background:linear-gradient(180deg, #fff 0%, rgba(250,247,242,.78) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 20px rgba(250,247,242,.15));
}
.ftr__acts{ display:flex; flex-direction:column; align-items:center; gap:clamp(1.5rem,4vh,2.5rem); width:100%; }
.ftr__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; row-gap:44px; width:100%; }
.ftr__row--links{ gap:.75rem; row-gap:.75rem; margin-top:0; }

/* both scrubbed blocks: y 50px→0, opacity 0→1, power3.out, .15 stagger */
.ftr__h2, .ftr__acts{ --p:0; transform:translateY(calc(50px - var(--p) * 50px)); opacity:var(--p); }

/* --- the glass pill, and the magnet ------------------------------------- */
.pill{
  --mx:0px; --my:0px; --rx:0deg; --ry:0deg; --ms:1;
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  border-radius:999px; text-decoration:none; cursor:pointer;
  background:linear-gradient(145deg, var(--pill-bg-1) 0%, var(--pill-bg-2) 100%);
  border:1px solid var(--pill-border);
  box-shadow:0 10px 30px -10px var(--pill-shadow),
             inset 0 1px 1px var(--pill-highlight),
             inset 0 -1px 2px var(--pill-inset);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transform:translate3d(var(--mx),var(--my),0) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--ms));
  transform-style:preserve-3d;
  transition:background .4s cubic-bezier(.16,1,.3,1),
             border-color .4s cubic-bezier(.16,1,.3,1),
             box-shadow .4s cubic-bezier(.16,1,.3,1),
             color .4s cubic-bezier(.16,1,.3,1),
             transform .4s cubic-bezier(.33,1,.68,1);      /* power2.out */
}
.pill:hover{
  background:linear-gradient(145deg, var(--pill-bg-1-h) 0%, var(--pill-bg-2-h) 100%);
  border-color:var(--pill-border-h);
  box-shadow:0 20px 40px -10px var(--pill-shadow-h), inset 0 1px 1px var(--pill-highlight-h);
  color:var(--paper);
}
/* the release. elastic.out(1, 0.3), 1.2s — the reference's own spring */
.pill.is-home{
  transition:transform 1.2s linear(0.0000,0.3612,0.8322,1.1998,1.3641,1.3357,1.1928,1.0287,0.9116,0.8685,0.8893,0.9438,1.0000,1.0364,1.0466,1.0359,1.0156,0.9967,0.9857,0.9838,0.9886,0.9960,1.0022,1.0054,1.0055,1.0035,1.0009,0.9989,0.9980,0.9981,0.9989,0.9998,1.0005);
}
.pill--lg{ padding:1.25rem 2.5rem; font-family:var(--body); font-weight:700;
           font-size:.875rem; color:var(--paper); }
/* the hero's wet-paint drips, on the footer's two real buttons. The paint is
   a brand pastel per button and the cap selector below had to widen, because
   the drip shapes were written for .wpb and these are pills. */
.pill--drip{ overflow:visible; }
.pill--pink, .pill--blue{
  color:var(--ink); font-weight:700; border-color:transparent;
  background:var(--wpb-paint);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.35);
}
.pill--pink{ --wpb-paint:var(--pink); }
.pill--blue{ --wpb-paint:var(--blue); }
.pill--pink:hover{ --wpb-paint:var(--pink-2); }
.pill--blue:hover{ --wpb-paint:var(--blue-2); }
.pill--pink:hover, .pill--blue:hover{ background:var(--wpb-paint); color:var(--ink); border-color:transparent;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.35); }
.pill--pink svg, .pill--blue svg, .pill--pink:hover svg, .pill--blue:hover svg{ color:var(--ink); }
.pill--drip .wpb__cap{ position:absolute; top:0; width:6px; height:6px; stroke:none; fill:none; }
.pill--drip .wpb__cap path{ fill:var(--wpb-paint); stroke:none;
                            transition:fill .15s cubic-bezier(.4,0,.2,1); }

.pill--lg svg{ width:1.5rem; height:1.5rem; color:var(--on-ink-3); transition:color .15s linear; }
.pill--lg:hover svg{ color:var(--paper); }
.pill--sm{ padding:.75rem 1.5rem; font-family:var(--body); font-weight:500;
           font-size:.75rem; color:var(--on-ink-3); }
.pill--ico{ width:3rem; height:3rem; padding:0; color:var(--on-ink-3); }
.pill--ico svg{ width:1.25rem; height:1.25rem; }

/* --- the base bar -------------------------------------------------------- */
.ftr__base{
  position:relative; z-index:2; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:0 1.5rem calc(2rem + env(safe-area-inset-bottom));
}
.ftr__legal{ order:2; font-size:.625rem; font-weight:600; letter-spacing:.1em;
             text-transform:uppercase; color:var(--on-ink-3); text-align:center; margin:0; }
.ftr__legal span{ white-space:nowrap; }
.ftr__legal a{ color:var(--y); text-decoration:none; }
.ftr__legal a:hover{ text-decoration:underline; }
.ftr__made{ order:1; gap:.5rem; padding:.75rem 1.5rem; white-space:nowrap;
            border-color:rgba(250,247,242,.09); cursor:default; }
.ftr__made span{ white-space:nowrap; font-size:.625rem; font-weight:700; letter-spacing:.1em;
                 text-transform:uppercase; color:var(--on-ink-3); }
.ftr__made a{ white-space:nowrap; font-family:var(--display); font-weight:800; font-size:.75rem;
              letter-spacing:0; color:var(--paper); text-decoration:none; margin-left:.25rem; }
.ftr__made a:hover{ color:var(--y); }
.ftr__heart{ font-size:.875rem; color:var(--m); animation:ftr-heartbeat 2s cubic-bezier(.25,1,.5,1) infinite; }
@keyframes ftr-heartbeat{
  0%,100%{ transform:scale(1);   filter:drop-shadow(0 0 5px rgba(232,51,109,.5)); }
  15%,45%{ transform:scale(1.2); filter:drop-shadow(0 0 10px rgba(232,51,109,.8)); }
  30%    { transform:scale(1); }
}
.ftr__ends{ order:3; display:flex; align-items:center; gap:.5rem; }
/* Nitin, 12 Sep 2026: hovering a social lights it in that platform's own
   colour, not the footer's. Values are each brand's published ones. */
.soc:hover{ color:#fff; }
.soc--ig:hover{ border-color:#DD2A7B;
  background:linear-gradient(135deg,#F58529 0%,#DD2A7B 45%,#8134AF 72%,#515BD4 100%);
  box-shadow:0 20px 40px -10px rgba(221,42,123,.55); }
.soc--fb:hover{ border-color:#1877F2; background:#1877F2;
  box-shadow:0 20px 40px -10px rgba(24,119,242,.55); }
.soc--tt:hover{ border-color:#25F4EE; background:#010101;
  box-shadow:-3px 0 0 -1px #FE2C55 inset, 3px 0 0 -1px #25F4EE inset,
             0 20px 40px -10px rgba(37,244,238,.45); }
.ftr__top svg{ transition:transform .3s linear; }
.ftr__top:hover svg{ transform:translateY(-.375rem); }

@media (min-width:768px){
  .ftr__h2{ font-size:clamp(3.5rem,9vw,8.5rem); line-height:1; }
  .ftr__marquee ul{ font-size:.875rem; }
  .ftr__row--links{ gap:1.5rem; }
  .pill--lg{ font-size:1rem; }
  .pill--sm{ font-size:.875rem; }
  .ftr__base{ flex-direction:row; padding:0 3rem calc(2rem + env(safe-area-inset-bottom)); }
  .ftr__legal{ order:1; text-align:left; font-size:.75rem; }
  .ftr__made{ order:2; }
  .ftr__ends{ order:3; }
}

/* the curtain needs a viewport to be revealed in. On a short screen the
   footer's own content is taller than 100vh, so it scrolls normally. */
@media (max-height:560px), (max-width:560px){
  .mftr{ height:auto; margin-top:0; clip-path:none; }
  .ftr{ position:relative; height:auto; min-height:100vh; }
  .ftr__word{ font-size:26vw; bottom:-2vh; }
  .ftr__h2{ font-size:3rem; line-height:1; margin-bottom:2rem; }
  .ftr__band{ margin-top:3.5rem; }
  .ftr__logo{ width:80px; height:80px; left:.75rem; }
  .ftr__mid{ margin-top:3rem; padding-bottom:1rem; }
  .ftr__base{ padding-top:1rem; }
}

@media (prefers-reduced-motion:reduce){
  .ftr__aurora, .ftr__marquee ul, .ftr__heart{ animation:none !important; }
  .ftr__word, .ftr__h2, .ftr__acts{ --p:1 !important; transform:none !important; opacity:1 !important; }
  .pill{ transition:none !important; }
}



/* ---------------------------------------------------------------- the dock
   Mobile only. Booking belongs in the thumb zone, not in a header nobody
   reaches one-handed. This is a phone decision, not a shrunk desktop one. */
.dock{
  display:none; position:fixed; z-index:90; left:.75rem; right:.75rem;
  bottom:calc(.75rem + env(safe-area-inset-bottom));
  gap:.5rem; padding:.5rem;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-radius:100px; box-shadow:var(--sh-3);
  transform:translateY(160%); opacity:0;
  transition:transform var(--base) var(--spring), opacity var(--fast) linear;
}
.dock.is-up{ transform:none; opacity:1; }
.dock__call{
  display:inline-flex; align-items:center; gap:.4rem; flex:0 0 auto;
  min-height:52px; padding:0 1.15rem; border-radius:100px;
  background:var(--paper-2); text-decoration:none; font-weight:600; font-size:.95rem;
}
.dock__call svg{ width:18px; height:18px; fill:currentColor; }
.dock__book{ flex:1 1 auto; }

/* ---------------------------------------------------------------- motion */
/* Line clip: the type is uncovered, it does not fade in. */
.lw{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.js .li{
  display:block; transform:translateY(105%);
  transition:transform 780ms var(--spring) var(--d,0ms);
}
.js .is-lit .li{ transform:none; }

/* Everything else rises a short distance, once, on a spring. Used sparingly. */
.js [data-rise]{
  opacity:0; transform:translateY(14px);
  transition:opacity 500ms linear var(--d,0ms), transform 620ms var(--spring) var(--d,0ms);
}
.js [data-rise].in{ opacity:1; transform:none; }

/* ============================================================== SCHEDULE
   The real programme, written as text. The Sawyer widget still does the
   booking, but it is an iframe, so nothing inside it is readable by Google
   or by an assistant. This block is how the studio becomes findable for
   "after school art classes Hingham" instead of only for its own name. */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
     clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--s6); }
.filt{
  display:inline-flex; align-items:center; min-height:44px; padding:.55rem 1.15rem;
  background:var(--card); border-radius:100px; box-shadow:var(--sh-1);
  text-decoration:none; font-weight:600; font-size:.92rem;
  transition:transform var(--fast) var(--spring), background var(--base) linear, color var(--base) linear;
}
.filt:hover{ background:var(--ink); color:#fff; }
.filt:active{ transform:scale(.96); }

.prog{ display:grid; gap:.6rem; margin:0 0 var(--s7); padding:0; }
.prog__row{
  position:relative; overflow:hidden;
  display:grid; align-items:center; gap:.4rem var(--s5);
  grid-template-columns:118px minmax(0,1fr) 92px 210px 168px auto;
  padding:1.05rem 1.35rem 1.05rem 1.7rem;
  background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-1);
  transition:transform var(--base) var(--spring), box-shadow var(--base) var(--spring);
}
.prog__row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--k);
}
.prog__row:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.prog__tag{
  font-size:.66rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3);
}
.prog__t{ font-size:1.06rem; letter-spacing:-.024em; margin:0; }
.prog__age,.prog__when,.prog__run{ font-size:.88rem; color:var(--ink-3); }
.prog__fee{ font-size:.92rem; font-weight:600; font-variant-numeric:tabular-nums; }
.prog__go{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 1.25rem; border-radius:100px;
  background:var(--ink); color:#fff; text-decoration:none; font-weight:600; font-size:.9rem;
  transition:background var(--base) linear, transform var(--fast) var(--spring);
}
.prog__go:hover{ background:var(--m); }
.prog__go:active{ transform:scale(.95); }
/* the run of dates is the least urgent thing here, so it sits under the day */
.prog__run{ grid-column:4; grid-row:2; }
.prog__row{ grid-template-rows:auto auto; }
.prog__tag{ grid-column:1; grid-row:1/3; align-self:center; }
.prog__t{ grid-column:2; grid-row:1/3; align-self:center; }
.prog__age{ grid-column:3; grid-row:1/3; align-self:center; }
.prog__when{ grid-column:4; grid-row:1; align-self:end; }
.prog__fee{ grid-column:5; grid-row:1/3; align-self:center; }
.prog__go{ grid-column:6; grid-row:1/3; align-self:center; }

.embed{
  background:var(--card); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2);
}
.embed__bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:.85rem 1.25rem; border-bottom:1px solid var(--line);
  font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.embed__bar a{
  text-transform:none; letter-spacing:0; font-size:.9rem; color:var(--c-txt);
  text-decoration:underline; text-underline-offset:3px;
  display:inline-flex; align-items:center; min-height:44px;
}
.embed iframe{ display:block; width:100%; height:760px; border:0; background:var(--paper); }
.embed__note{ margin:var(--s4) 0 0; font-size:.85rem; color:var(--ink-3); }

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  /* 16 Sep 2026: the palette (about 96px) sits 52px up from the foot of the
     hero; the Loved block is taller than the hours row was, so reserve the
     whole of it or the quote runs under the swatches. */
  .hero{ min-height:0; padding-bottom:calc(7.25rem + clamp(1.5rem,4vw,3rem) + var(--drip)); }
  .hero__tools{ left:50%; right:auto; transform:translateX(-50%); }
  .hero__copy::before{ inset:-12% -14% -10% -14%; }
  .hdr__nav{ display:none; }
  .burger{ display:grid; }
  .founder,.visit,.split{ grid-template-columns:1fr; }
  .split--rev .split__copy{ order:0; }
  .tiers{ grid-template-columns:repeat(2,1fr); }
  .tier--hero{ grid-row:span 1; grid-column:span 2; }
  .idx__peek{ display:none; }
  .prog__row{ grid-template-columns:110px minmax(0,1fr) 190px auto; }
  .prog__age{ grid-column:3; grid-row:1; align-self:end; }
  .prog__when{ grid-column:3; grid-row:2; align-self:start; }
  .prog__run{ display:none; }
  .prog__fee{ grid-column:4; grid-row:1; align-self:end; }
  .prog__go{ grid-column:4; grid-row:2; align-self:start; }
  .embed iframe{ height:680px; }
}

/* --------- phone: different decisions, not a compressed desktop --------- */
@media (max-width:760px){
  .hdr__book{ display:none; }             /* booking moves to the dock */
  .tel span{ display:none; }
  .tel{ width:44px; justify-content:center; }
  .dock{ display:flex; }
  body{ padding-bottom:5.5rem; }          /* clear the dock */

  /* the canvas goes full bleed and shorter, so the headline still leads */
  /* the hero keeps its paint. The strokes stretch for a tall frame and the
     tools lift clear of the bottom edge so they never meet the dock. */
  .hero{ padding-top:calc(var(--brand-top) + var(--w) + var(--s5)); padding-bottom:calc(7.75rem + clamp(1rem,4vw,2rem) + var(--drip)); min-height:0; }   /* top: the corner logo's band, 16 Sep 2026 */   /* 16 Sep 2026: the palette (97px) plus its offset, so the Loved quote clears it */
  .hero__h1{ font-size:clamp(2.7rem,11.2vw,3.6rem); line-height:.96; }
  .hero__sub{ max-width:none; }
  /* stacked, the drips of the top button need to clear the one below:
     the longest drip is 24px and its shoulder 6px, so 44px of room. */
  .hero__cta{ display:grid; grid-template-columns:1fr; row-gap:44px; margin-bottom:var(--s6); }
  .hero__meta{ gap:var(--s5) var(--s6); }
  .hero__tools{ bottom:calc(clamp(1rem,4vw,2rem) + var(--drip,0px)); gap:.5rem; }
  .palette{ gap:.25rem; padding:.4rem .5rem; }
  .palette__label{ display:none; }

  /* A phone is a tall narrow frame, so the paint is rearranged rather than
     squashed. The stroke that lived in the desktop gutter is gone from the
     page entirely, the heart drops down beside the stats row instead of
     sitting behind the copy, and the wash under the words becomes a flat
     veil rather than a soft pool. */
  .paint{ inset:-4% -16% 0; width:132%; height:108%; }
  .paint .accent{ opacity:.28; }
  .paint .heart{
    transform-box:view-box; transform-origin:700px 318px;
    transform:translate(-30px,150px) scale(.5);
  }
  .paint .heart .st{ opacity:.5; }
  .smear{ width:68%; right:-12%; top:-1%; opacity:.34; }
  .paint .narrow{ display:block; }
  .hero__copy::before{
    inset:-6% -9% -4% -9%;
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--paper) 90%,transparent) 0%,
      color-mix(in srgb,var(--paper) 84%,transparent) 62%,
      color-mix(in srgb,var(--paper) 66%,transparent) 88%,
      transparent 100%);
  }

  /* the index becomes real cards, because there is no hover to reveal with */
  .idx{ border-top:0; display:grid; gap:var(--s4); }
  .idx__row{ border-bottom:0; background:var(--card); border-radius:var(--r-lg);
    overflow:hidden; box-shadow:var(--sh-1); display:flex; flex-direction:column-reverse; }
  .idx__row > a{
    grid-template-columns:auto 1fr auto; grid-template-areas:"n t g" "n d g";
    gap:.15rem var(--s4); padding:var(--s5); align-items:center;
  }
  .idx__row > a:hover{ padding-left:var(--s5); }
  .idx__row > a::before{ display:none; }
  .idx__n{ grid-area:n; font-size:1rem; }
  .idx__t{ grid-area:t; font-size:1.45rem; }
  .idx__d{ grid-area:d; text-align:left; font-size:.88rem; }
  .idx__go{ grid-area:g; width:42px; height:42px; }
  .idx__m{ display:block; aspect-ratio:16/10; overflow:hidden; }
  .idx__m img{ width:100%; height:100%; object-fit:cover; }

  /* rails become a swipeable, snapping gallery instead of an auto marquee */
  .rail{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-inline:1.25rem; }
  .rail::-webkit-scrollbar{ display:none; }
  .rail--rev{ display:none; }              /* one gallery on a phone, not two */
  .rail__track{ transform:none !important; gap:.75rem; }
  .rail figure{ width:74vw; max-width:320px; scroll-snap-align:center; aspect-ratio:4/5 !important; }

  .tiers{ grid-template-columns:1fr; }
  .tier--hero{ grid-column:span 1; }

  /* a table row does not survive 390px, so on a phone this becomes a card */
  .prog__row{
    grid-template-columns:1fr auto; grid-template-rows:auto auto auto auto;
    gap:.3rem .75rem; padding:1.1rem 1.1rem 1.1rem 1.5rem;
  }
  .prog__tag{ grid-column:1/3; grid-row:1; }
  .prog__t{ grid-column:1/3; grid-row:2; font-size:1.12rem; }
  .prog__age{ grid-column:1; grid-row:3; }
  .prog__when{ grid-column:1; grid-row:4; align-self:start; }
  .prog__run{ display:none; }
  .prog__fee{ grid-column:2; grid-row:3; align-self:center; text-align:right; }
  .prog__go{ grid-column:2; grid-row:4; align-self:center; padding:0 1rem; }
  .filters{ margin-inline:-.15rem; }
  .embed iframe{ height:560px; }
  .embed__bar{ padding:.7rem 1rem; }
  .sec__head{ margin-bottom:var(--s6); }
  .creds{ gap:var(--s5) var(--s6); }
  .quote{ max-width:none; }
}

/* ---------------------------------------------------------------- the intro
   16 Sep 2026 (Nitin). <html>.is-intro is set in <head> before first paint.
   site.js: .is-intro-out at ~.95s (paper lifts, the mark flies down onto the
   hero brand), .is-intro-live at ~1.35s (hero type rises), all gone at ~1.8s.
   Reduced motion never gets the class. The inline script after #intro adds
   .is-up two frames in, which is what brings the mark up. */
.intro{ display:none; }
.is-intro .intro{
  display:grid; place-items:center; position:fixed; inset:0; z-index:200;
}
.is-intro .intro::before{
  content:""; position:absolute; inset:0; background:var(--paper);
  clip-path:inset(0 0 0 0); transition:clip-path 700ms var(--spring);
}
.is-intro .intro img{
  position:relative; z-index:1;
  width:clamp(120px,22vw,220px); height:auto; border-radius:50%;
  box-shadow:0 30px 60px -30px rgba(20,20,24,.55);
  opacity:0; transform:scale(.55) rotate(-11deg);
  transition:transform 720ms var(--spring-b), opacity 300ms linear;
}
.is-intro .intro.is-up img{ opacity:1; transform:none; }
.is-intro-out .intro::before{ clip-path:inset(0 0 100% 0); }
.is-intro-out .intro img{ transition:transform 700ms var(--spring); box-shadow:0 14px 28px -14px rgba(20,20,24,.5); }
/* hold the hero type and the header until the paper has lifted */
.is-intro:not(.is-intro-live) .hero .li{ transform:translateY(105%); transition:none; }
.is-intro:not(.is-intro-live) .hero [data-rise]{ opacity:0; transform:translateY(14px); transition:none; }
.is-intro:not(.is-intro-out) .hdr{ transform:translateY(-100%); transition:none; }

/* ---------------------------------------------------------------- a11y prefs */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js [data-rise]{ opacity:1 !important; transform:none !important; }
  .js .li{ transform:none !important; }
  .js [data-clip] img{ clip-path:none !important; transform:none !important; }
  .idx__peek{ display:none; }
  .hero__canvas{ cursor:default; }
  /* the strokes are the design, not the animation, so they stay on the page */
  .js .paint .st{ stroke-dashoffset:0 !important; }
  .js .paint .drips path{ transform:scaleY(1) !important; }
  .js .paint .heart .drop{ transform:scaleY(1) !important; }
  .js .paint .spat circle{ transform:scale(1) !important; }
  .dock{ transform:none; opacity:1; }
}
@media (prefers-reduced-transparency: reduce){
  .hdr{ background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .sheet,.dock{ background:var(--card); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .hero__hint span{ background:var(--ink); backdrop-filter:none; }
  .palette{ background:var(--card); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media (prefers-contrast: more){
  :root{ --ink-2:#1E1E24; --ink-3:#41414B; --line:#BFB8A9; }
  .hdr{ background:var(--paper); backdrop-filter:none; }
  .paint{ opacity:.4; }
  .hero__copy::before{ inset:-14% -18%; background:var(--paper); }
  .card,.tier,.faq details,.form,.idx__row{ box-shadow:0 0 0 1.5px var(--ink); }
}
@media print{
  .hdr,.sheet,.ticker,.ticker__drip,.rail,.hero__canvas,.hero__tools,.form,.dock,.idx__peek{ display:none !important; }
  .js [data-rise],.js .li{ opacity:1 !important; transform:none !important; }
  .js [data-clip] img{ clip-path:none !important; transform:none !important; }
}


/* =========================================================== WET PAINT LAYER
   The hero canvas is now a GPU pigment field. It sits above the printed
   brush strokes and below the copy wash, so a visitor paints on top of the
   studio's work without ever covering the words. */
/* Normal compositing, not multiply. The buffer is already premultiplied, so
   multiply lightened every partially covered pixel and ringed each stroke
   with a halo. Source-over lays the pigment down flat. */
.hero.has-gl .hero__canvas{ mix-blend-mode:normal; }

/* ---------------------------------------------------------------- the brush
   A real brush, not a dot. It lags the pointer slightly and leans into the
   direction of travel, which is what makes it read as a held object rather
   than a cursor graphic. Pointer devices only. */
.brush{
  position:fixed; z-index:120; top:0; left:0;
  width:34px; height:132px; margin:-127px 0 0 -17px;   /* the bristle tip sits on the pointer */
  pointer-events:none; opacity:0;
  transform-origin:17px 127px;     /* pivots where the bristles touch the paper */
  transition:opacity 200ms linear;
  will-change:transform;
  display:none;
}
.brush svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 10px 12px rgba(20,20,24,.22)); }
.brush__tip{ fill:url(#brushTipGrad); }
.brush__tip-a{ stop-color:var(--brush-ink,#FFC72C);  transition:stop-color 220ms var(--spring); }
.brush__tip-b{ stop-color:var(--brush-ink2,#F0A21A); transition:stop-color 220ms var(--spring); }
.brush.is-on{ opacity:1; }

@media (hover:hover) and (pointer:fine){
  .brush{ display:block; }
  /* the native arrow would fight the brush */
  .hero.has-gl .hero__canvas{ cursor:none; }
}

/* ------------------------------------------------- painted heading underline
   Injected under every section heading. Draws itself once, on arrival. */
.uline{ display:block; width:min(100%,340px); height:16px; margin-top:.35rem; overflow:visible; }
.uline path{
  fill:none; stroke:var(--k,var(--y)); stroke-width:11; stroke-linecap:round;
  filter:url(#bristleEdge);
}
.js .uline path{ stroke-dasharray:1; stroke-dashoffset:1; }
.js .uline.in path{ animation:brush 900ms cubic-bezier(.22,1,.36,1) forwards; }
.sec__head--center .uline{ margin-inline:auto; }

/* --------------------------------------------------------- paint-flood hover
   A button fills with colour from the point the pointer entered it, instead
   of switching background instantly. */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),
    var(--flood,var(--m)) 0%, var(--flood,var(--m)) 60%, transparent 72%);
  transform:scale(0); opacity:0;
  transition:transform 460ms cubic-bezier(.22,1,.36,1), opacity 200ms linear;
}
.btn:hover::before{ transform:scale(2.6); opacity:1; }
.btn:hover{ box-shadow:none; }
.sec--ink .btn{ --flood:#fff; }
.btn--ghost{ --flood:var(--ink); }
.btn--ghost:hover{ color:#fff; }


/* ------------------------------------------------- wet-paint button, colours
   .wpb rides on top of .btn, so every button keeps its own size. It only
   changes the corner, kills .btn's radial flood (which needs overflow:hidden,
   and that would cut the drips off) and names the paint. One paint per
   background layer, picked so it carries: pink and blue on the cream and tint
   sections, the brand yellow for the quieter second button, ink where the
   button has to beat everything around it (header, form, phone). Placed at the
   end of the sheet so it wins the source-order ties with .btn. */
.wpb{ overflow:visible; border-radius:4px; align-self:center;
      --bg:var(--wpb-paint); --fg:var(--wpb-fg); --flood:var(--wpb-paint); }
.wpb::before{ content:none; }
.wpb:hover{ --bg:var(--wpb-paint-2); --wpb-paint:var(--wpb-paint-2); box-shadow:none; }
.wpb--pink{ --wpb-paint:var(--pink); --wpb-paint-2:var(--pink-2); --wpb-fg:var(--ink); }
.wpb--blue{ --wpb-paint:var(--blue); --wpb-paint-2:var(--blue-2); --wpb-fg:var(--ink); }
.wpb--sun { --wpb-paint:var(--sun);  --wpb-paint-2:var(--sun-2);  --wpb-fg:var(--ink); }
.wpb--ink { --wpb-paint:var(--coal); --wpb-paint-2:var(--coal-2); --wpb-fg:#fff; }
.sec--ink .wpb{ --fg:var(--wpb-fg); }

@media (prefers-reduced-motion: reduce){
  .brush{ display:none !important; }
  .hero.has-gl .hero__canvas{ cursor:default; }
  .js .uline path{ stroke-dashoffset:0 !important; animation:none !important; }
  .btn::before{ transition:none; }
  .wpb__drip, .wpb__drop{ animation:none; }
}

/* ======================================================= LOVED BY THE COMMUNITY
   16 Sep 2026. Three pieces, one data source (the hidden .rcard list in #community):
   .loved   the line across the hero under the buttons, and the row of cards
   .tstm    photo stack + word-by-word quote, prev/next, autoplays
   .rev     the review cards that land in the row under the line
   Paint is the only decoration: one ink per review, cycling y, m, c. */

/* shared: the round arrow buttons */
.rnav{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  border:0; padding:0; cursor:pointer; background:var(--paper-2); color:var(--ink);
  transition:background var(--base) linear, transform var(--base) var(--spring);
}
.rnav svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.rnav:hover,.rnav:focus-visible{ background:var(--y); transform:scale(1.08); }
.rnav:active{ transform:scale(.94); }
.rnav--lg{ width:46px; height:46px; }
.sec--ink .rnav{ background:rgba(255,255,255,.1); color:var(--paper); }
.sec--ink .rnav:hover,.sec--ink .rnav:focus-visible{ background:var(--y); color:var(--ink); }

/* the word reveal: each word is a span with --i; blur to sharp, a short lift */
.rw{ display:inline-block; }
.js .is-words .rw{
  opacity:0; filter:blur(7px); transform:translateY(.28em);
  transition:opacity .32s linear, filter .5s var(--spring), transform .5s var(--spring);
  transition-delay:calc(var(--i) * 26ms);
}
.js .is-words.is-in .rw{ opacity:1; filter:blur(0); transform:none; }

/* ---------------------------------------------------------- hero: .loved
   Nitin, 16 Sep 2026 (third pass): one line across the whole width under the
   buttons, a clear gap above it, and under the line the reviews pop in side
   by side. Sits outside .hero__copy so it can run edge to edge of the wrap. */
.loved{ margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line); }
.loved__bar{ display:flex; align-items:center; gap:1rem 1.25rem; flex-wrap:wrap; margin-bottom:var(--s3); }
.loved__h{
  display:inline-flex; align-items:center; gap:.55rem; margin:0;
  font-size:clamp(1.15rem,1rem + .6vw,1.45rem); letter-spacing:-.03em;
}
.loved__faces{ display:flex; }
.loved__faces img{
  width:32px; height:32px; border-radius:50%; object-fit:cover; margin-left:-10px;
  border:2px solid var(--paper); box-shadow:var(--sh-1);
}
.loved__faces img:first-child{ margin-left:0; }
.loved__score{ display:flex; align-items:baseline; gap:.5rem; line-height:1; }
.loved__score b{
  font-family:var(--display); font-weight:800; font-size:1.15rem; letter-spacing:-.03em;
  display:inline-flex; align-items:center; gap:.35rem;
}
.loved__score .stars{ margin:0; gap:.08rem; }
.loved__score .stars svg{ width:14px; height:14px; }
.loved__score > span{ font-size:.8rem; color:var(--ink-3); white-space:nowrap; }

/* the row: four slots across on desktop, two on a tablet, one on a phone.
   Its height is fixed so the hero does not jump while cards land. */
.loved__row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); min-height:96px; align-items:start; }
@media (max-width:1080px){ .loved__row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .loved__row{ grid-template-columns:1fr; } }

/* a review card as it lands: one ink per review, a splat behind the photo */
.rev{
  position:relative; overflow:hidden; --rot:0deg;
  display:grid; grid-template-columns:40px 1fr; gap:.6rem; align-items:start;
  background:var(--card); color:var(--ink); border-radius:var(--r-md); box-shadow:var(--sh-2);
  padding:.75rem 1rem .8rem .85rem;
  opacity:0; transform:translate3d(0,22px,0) scale(.9) rotate(var(--rot));
  transition:transform .6s var(--spring-b), opacity .25s linear;
}
.rev.is-in{ opacity:1; transform:rotate(var(--rot)); }
.rev.is-gone{ opacity:0; transform:translate3d(0,-8px,0) scale(.94) rotate(var(--rot)); transition-duration:.3s; }
.rev::before{
  content:""; position:absolute; left:-22px; top:-18px; width:90px; height:90px;
  background:var(--k); border-radius:52% 48% 44% 56% / 46% 54% 46% 54%; transform:rotate(-12deg); opacity:.95;
}
.rev__av{ position:relative; width:40px; height:40px; border-radius:50%; object-fit:cover; border:2.5px solid var(--card); box-shadow:var(--sh-1); }
.rev__head{ display:flex; align-items:center; gap:.45rem; font-size:.7rem; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; font-weight:600; }
.rev__head .stars{ margin:0; gap:.08rem; }
.rev__head .stars svg{ width:12px; height:12px; }
.rev p{ margin:.2rem 0 0; font-size:.84rem; line-height:1.35; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rev b{ display:block; margin-top:.2rem; font-size:.76rem; color:var(--ink-2); }
.rev b span{ font-weight:400; color:var(--ink-3); }

/* ------------------------------------------------ section: photo stack */
.sec--loved{ overflow:hidden; }
.sec--loved h2 em{ color:var(--y); }
.tstm{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(var(--s6),6vw,var(--s9)); align-items:center;
}
.tstm__stack{ position:relative; width:min(100%,400px); aspect-ratio:4/5; margin-inline:auto; }
.tstm__stack::before,.tstm__stack::after{           /* two paint blots behind the pile */
  content:""; position:absolute; z-index:0; border-radius:52% 48% 44% 56% / 46% 54% 46% 54%;
  filter:blur(2px); opacity:.9;
}
.tstm__stack::before{ inset:auto -14% -10% auto; width:58%; height:46%; background:var(--m); transform:rotate(-14deg); }
.tstm__stack::after { inset:-8% auto auto -12%;   width:44%; height:36%; background:var(--c); transform:rotate(9deg); }
.tstm__stack img{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  border-radius:var(--r-lg); box-shadow:var(--sh-3); background:var(--coal-2);
  transform:rotate(var(--r)) scale(.94); opacity:0;
  transition:transform .7s var(--spring), opacity .45s linear;
}
.tstm__stack img.is-under{ opacity:.85; z-index:2; }   /* the two behind the top one */
.tstm__stack img.is-on{ transform:none; opacity:1; z-index:4; }
.tstm__stack img.is-out{ transform:rotate(var(--r)) scale(.9) translateY(8%); opacity:0; z-index:3; }
.tstm__body{ margin:0; position:relative; }
.tstm__body .stars{ justify-content:flex-start; margin-bottom:var(--s4); }
.tstm__body blockquote{ margin:0; }
.tstm__text{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.3rem,1.05rem + 1.2vw,2.05rem); letter-spacing:-.03em; line-height:1.2;
  color:var(--paper); margin:0 0 var(--s5); text-wrap:pretty; min-height:5.4em;
}
.tstm__who{ font-weight:700; color:var(--y); font-size:1.02rem; }
.tstm__who span{ display:block; font-weight:400; color:var(--on-ink-3); font-size:.88rem; margin-top:.15rem; }
.tstm__nav{ display:flex; align-items:center; gap:.6rem; margin-top:var(--s5); }
.tstm__count{ margin-left:.5rem; font-size:.85rem; color:var(--on-ink-3); font-variant-numeric:tabular-nums; }

/* the marquee of cards was cut 16 Sep 2026 (Nitin, by pop-up); its CSS is in git */
.tstm__all{ margin-left:auto; font-size:.88rem; color:var(--on-ink-2); text-decoration-color:var(--y); text-underline-offset:.2em; }
.tstm__all:hover{ color:var(--y); }

/* the fixed bottom-corner pop-up and the hero wall were cut 16 Sep 2026 (Nitin, third pass); both are in git */

@media (max-width:1080px){
  .tstm{ grid-template-columns:1fr; gap:var(--s7); }
  .tstm__stack{ width:min(100%,340px); }
  .tstm__text{ min-height:0; }
}
@media (prefers-reduced-motion:reduce){
  .js .is-words .rw{ transition:none; opacity:1; filter:none; transform:none; }
  .tstm__stack img,.rev{ transition:none; }
}

/* ================================================================ how it works
   Section 2 of the 16 Sep 2026 home page order: four numbered steps, one
   brand colour each, joined by a thin line on desktop. Stacks on phones. */
/* .steps / .step (the four cards, 16 Sep morning) gave way to .how the same evening; in git. */

/* =================================================================== nandita
   Section 4, the biggest on the page. 17 Sep 2026, Nitin: the hoodie
   portrait out, "highlight her, make it pop, make it colourful", and the
   componentry annotated-text marks throughout (assets/js/annotate.js draws
   them; their CSS is the block right after this one). Four looks the same
   evening: a warm wash ("colours"), the live site's gingham in CSS ("very
   bad"), a pastel gradient ("too much, it should merge with the website
   theme"). So: the page's paper and ink, her two listing photos as a
   leaning pair on a butter card over one yellow blot, two pastel dabs and
   a name tag, the words that matter hand-marked in the three inks. */
.sec--nandita{
  --nd-plum:#4B3F63; --nd-butter:#FFE7A3; --nd-rose:#FFC4D6; --nd-mint:#C6EBD9;
  position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(var(--s8),8vw,11rem);
  /* Nitin, 17 Sep, fourth look ("too much; it should be based on the brand and
     website theme, it should merge"): the section sits on the page's own paper
     with the page's ink, like every other section; its quirk is the hand-marked
     words and the leaning photo pair on a butter card over one yellow blot. */
  color:var(--ink); background:var(--paper);
}
.nandita__wash{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.nandita__wash i{ display:none; }
.sec__head--wide{ max-width:none; }
.nandita__h{ max-width:24ch; font-size:clamp(2.4rem,1.4rem + 4.2vw,5.2rem); line-height:1.08; }
.nandita{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--s7),6vw,var(--s10)); align-items:center; }
.nandita__pics{ position:relative; padding:5% 16% 10% 4%; }
.nandita__pics::after{                               /* one paint blot behind the pile, the brand yellow, as the first build had */
  content:""; position:absolute; z-index:-1; right:-4%; bottom:-2%; width:56%; height:46%;
  border-radius:52% 48% 44% 56% / 46% 54% 46% 54%; background:var(--y); opacity:.9; transform:rotate(-12deg);
}
.nandita__pics::before{                              /* the sky backing card the pair leans on */
  content:""; position:absolute; z-index:0; left:0; top:0; width:80%; height:86%;
  border-radius:var(--r-xl); background:var(--nd-butter); opacity:.95; transform:rotate(4deg);
}
.nandita__main{
  position:relative; z-index:1; margin:0; aspect-ratio:4/5; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-3); background:var(--nd-sky); transform:rotate(var(--r,0deg));
}
.nandita__main img{ display:block; width:100%; height:100%; object-fit:cover; }
.nandita__side{
  position:absolute; z-index:2; right:0; bottom:0; margin:0; width:46%; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-3); border:6px solid #FFF; background:var(--nd-mint); transform:rotate(var(--r));
}
.nandita__side img{ display:block; width:100%; height:100%; object-fit:cover; }
.nandita__tag{
  position:absolute; z-index:3; left:-3%; top:1%; padding:.55rem 1rem; border-radius:999px; background:#FFF; color:var(--ink);
  font-family:var(--display); font-weight:700; font-size:.95rem; letter-spacing:-.01em; box-shadow:var(--sh-2); transform:rotate(var(--r));
}
.nandita__dab{ position:absolute; border-radius:52% 48% 44% 56% / 46% 54% 46% 54%; }
.nandita__dab--a{ z-index:0; width:20%; aspect-ratio:1; left:-7%; bottom:16%; background:var(--nd-mint); transform:rotate(30deg); }
.nandita__dab--b{ z-index:3; width:11%; aspect-ratio:1; right:10%; top:-3%; background:var(--nd-rose); transform:rotate(-20deg); }
.nandita__copy .lede{ max-width:none; }
.nandita__why{ font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem); letter-spacing:-.03em; line-height:1.4; color:var(--ink); margin:var(--s5) 0 var(--s6); }
.diff{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s4); }
.diff li{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start;
  padding:var(--s4) 0; border-top:1px solid var(--line);
}
.diff__n{ font-family:var(--display); font-weight:800; font-size:1.05rem; color:var(--k); letter-spacing:-.02em; padding-top:.2rem; min-width:2.2rem; }
.diff b{ display:block; font-family:var(--display); font-weight:700; font-size:1.18rem; letter-spacing:-.024em; color:var(--ink); margin-bottom:.35rem; }
.diff p{ margin:0; font-size:.98rem; line-height:1.5; color:var(--ink-2); }
/* the three credentials: one row of three equal plum chips, every width (Nitin, 17 Sep: "all over the place, should be in one line") */
.sec--nandita .creds{ display:flex; flex-wrap:nowrap; gap:.6rem; margin-top:var(--s6); max-width:none; border-top-color:var(--line); }
.sec--nandita .creds li{ flex:1 1 0; min-width:0; display:grid; gap:.15rem; align-content:center; text-align:center; background:var(--ink); color:#FFF; border-radius:var(--r-md); padding:.9rem .6rem; }
.sec--nandita .creds b{ color:var(--y); font-size:clamp(1.2rem,1rem + .9vw,1.6rem); line-height:1.05; letter-spacing:-.03em; }
.sec--nandita .creds span{ color:#FFF; opacity:.88; font-size:.78rem; line-height:1.25; }

@media (max-width:1080px){
  .steps::before{ display:none; }
  .nandita{ grid-template-columns:1fr; }
  .nandita__pics{ max-width:520px; margin-inline:auto; }
}
@media (max-width:760px){
  .nandita__h{ max-width:none; }
  .nandita__pics{ padding:6% 14% 12% 6%; }
  .nandita__copy .lede{ font-size:1.06rem; }
}
@media (prefers-reduced-motion:reduce){
  .step,.step:hover{ transform:none; }
}

/* ============================================================ one paint blot per section
   One-theme move 4 (Nitin's yes, 17 Sep, plan-one-theme/): one paint blot behind each
   section's quirk, the three inks in turn down the page: How it works magenta, Experiences
   blue, Nandita yellow (in its own block), Studio magenta, FAQ blue, Visit yellow. Same
   blot shape and weight as Nandita's; the hero keeps its drips instead. */
.how,.visit{ position:relative; }
.how,.xs__deck,.fstack,.visit{ isolation:isolate; }
.how__side::after,.xs__deck::before,.fstack::before,.visit::before{
  content:""; position:absolute; z-index:-1; pointer-events:none; opacity:.9;
  border-radius:52% 48% 44% 56% / 46% 54% 46% 54%;
}
.how__side::after{ right:-6%; bottom:-7%; width:38%; height:40%; background:var(--m); transform:rotate(14deg); }   /* 18 Sep: on the pinned panel, the block itself is four cards tall now */
.xs__deck::before{ z-index:0; left:-5%; bottom:-7%; width:24%; height:40%; background:var(--c); transform:rotate(-10deg); }   /* the cards sit at z 1 to 7 */
.fstack::before{ left:-4%; bottom:-8%; width:28%; height:44%; background:var(--c); transform:rotate(-12deg); }
.visit::before{ right:-3%; top:-4%; width:15%; height:22%; background:var(--y); transform:rotate(16deg); }
@media (max-width:760px){
  .how__side::after{ width:34%; height:30%; }
  .xs__deck::before{ width:34%; height:30%; }
  .fstack::before{ width:40%; height:32%; }
  .visit::before{ width:24%; height:12%; }
}

/* ============================================================ annotated text
   The marks assets/js/annotate.js draws (componentry.dev annotated-text,
   ported one to one; the geometry lives in the script). Each mark is an
   SVG or a CSS box laid over the words in em units, so it scales with the
   type; --ann on the span sets its colour. Markup:
   <span class="ann" data-ann="circle" style="--ann:var(--m)">words</span> */
.ann{ position:relative; display:inline-block; white-space:nowrap; }
.ann--circle{ padding-inline:.25rem; } .ann--box{ padding-inline:.4em; } .ann--bracket{ padding-inline:.35em; }
.ann__svg,.ann__css{ position:absolute; display:block; pointer-events:none; color:var(--ann,currentColor); }
.ann__svg{ overflow:visible; max-width:none; } /* the global svg{max-width:100%} clipped circles to the word: ring cut the last letter */
.ann__t{ position:relative; z-index:1; }
.ann--wavy .ann__svg{ bottom:-.4em; left:-2%; width:104%; height:.7em; }
.ann--underline .ann__svg{ bottom:-.32em; left:-1%; width:102%; height:.5em; }
.ann--doubleUnderline .ann__svg{ bottom:-.5em; left:-1%; width:102%; height:.7em; }
.ann--arrow .ann__svg{ bottom:-.45em; left:-1%; width:106%; height:.8em; }
.ann--highlight .ann__svg{ left:-4%; bottom:-.08em; z-index:0; width:108%; height:1.15em; opacity:.6; }
.ann--circle .ann__svg{ top:-.6em; left:-.55em; width:calc(100% + 1.1em); height:calc(100% + 1.2em); }
.ann--box .ann__svg{ top:-.4em; left:-.4em; width:calc(100% + .8em); height:calc(100% + .8em); }
.ann--bracket .ann__svg{ top:-.25em; left:-.15em; width:calc(100% + .3em); height:calc(100% + .5em); }
.ann--strikethrough .ann__svg{ top:50%; left:-1%; width:102%; height:.5em; transform:translateY(-50%); }
.ann--crossOut .ann__svg{ top:50%; left:-2%; width:104%; height:1.4em; transform:translateY(-50%); }
.ann--dottedUnderline .ann__css{ bottom:-.35em; left:-1%; width:102%; height:.55em; background:radial-gradient(circle,currentColor 1.5px,transparent 1.5px) 0 100% / .5em 100% repeat-x; }
.ann--line .ann__css{ bottom:-.18em; left:-1%; width:102%; height:2px; border-radius:2px; background:currentColor; }
/* a circle or a box reaches .6em / .4em above its words: a heading that carries one on
   its first line gets that much more room, so the mark clears the eyebrow above it */
.hx:has(.ann--circle){ margin-top:.7em; }
@media (max-width:760px){ #visit .hx .ann--circle{ margin-top:.5em; } } /* "Hingham" wraps to line 2 on phones: room so the ring clears "Water" */
.hx:has(.ann--box){ margin-top:.45em; }

/* ================================================================== the blank
   Nitin, 16 Sep 2026: the right half of the hero is one paintable object
   (sneaker, denim jacket, basketball, cap) with a picker under it. The
   base is white with a soft shadow, the paint canvas sits on it, the line
   art sits on top. Redrawn 17 Sep 2026 as coloring-book line art (Nitin's
   references in assets/new images/Hero): a thick outline, every panel its
   own closed region, stitch dashes, eyelets and buttons; the paint stays
   inside the panel a stroke starts in. _site/build-blank-shapes.py draws
   them into assets/js/blank.js. */
.blank{ position:relative; margin-top:var(--s5); pointer-events:auto; }
.blank__stage{
  position:relative; display:block; width:100%; aspect-ratio:4/3; padding:0; border:0; background:transparent;
  font:inherit; color:inherit; cursor:pointer; user-select:none; -webkit-user-select:none;
  transition:transform var(--base) var(--spring-b);
}
.blank__stage:hover{ transform:translateY(-4px); }
.blank__stage:active{ transform:scale(.985); }
.blank__stage:focus-visible{ outline:3px solid var(--ink); outline-offset:6px; border-radius:24px; }
.blank__go{                                    /* the "Colour it in" pill on the blank */
  position:absolute; right:5%; bottom:5%; z-index:3; display:inline-flex; align-items:center; gap:.45rem;
  min-height:44px; padding:.55rem 1.05rem .55rem .8rem; border-radius:100px; background:var(--ink); color:#fff;
  font-size:.86rem; font-weight:600; letter-spacing:-.01em; box-shadow:var(--sh-2); white-space:nowrap;
  transition:opacity var(--base) linear, transform var(--base) var(--spring-b);
}
.blank__go i{ width:14px; height:14px; border-radius:50%; background:conic-gradient(from 0deg,var(--y),var(--m),var(--c),var(--y)); box-shadow:0 0 0 2px #fff; }
@media (hover:hover){
  .blank__go{ opacity:0; transform:translateY(6px); }
  .blank__stage:hover .blank__go,.blank__stage:focus-visible .blank__go{ opacity:1; transform:none; }
}
.blank__cv{ position:absolute; inset:0; width:100%; height:100%; display:block; transition:opacity var(--base) linear; }
/* the line art is a PICTURE per blank (data-src on each .pick); assets/js/blank.js lifts its lines off the paper and draws them over the paint */
.blank__stage.is-loading .blank__cv,.studio__stage.is-loading .studio__cv{ opacity:.35; }
/* THE FOUR BLANKS (Nitin, 18 Sep 2026, by pop-up: "aqua.adobe.com, the section Built to nurture creativity: those
   icons are animated cards, I want those for the sneaker, jacket, cap and basketball"). Aqua's three are colourful
   hand-drawn Lottie icons with a bold name under them, no box around. Ours: the icon is the blank's OWN picture painted
   in by blank.js (so the cards follow the pictures), it moves all the time in its own way (data-move on the button:
   rock, sway, bounce, tip), and a click makes the whole card hop and throws five droplets in the card's ink (--k):
   blank.js adds .is-pop for one run. Only transforms move, so the GPU does it all and nothing flickers: a first try
   shivered the lines with an SVG turbulence filter and Nitin saw it as the code breaking (18 Sep), so it is gone. The
   hop is on the card, not the icon, so the icon's own move never stops and never snaps back. No library. */
.blank__pick{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.3rem; margin-top:var(--s6); padding:.2rem .1rem 0; }   /* air under the blank: a jumping card never reaches it (Nitin, 18 Sep) */
.pick{
  --d:10px;
  position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; gap:.2rem;
  min-width:0; min-height:44px; padding:.2rem .1rem .4rem; border:0; border-radius:20px; background:transparent; cursor:pointer;
  color:var(--ink); font:inherit; font-size:.84rem; font-weight:700; letter-spacing:-.01em; line-height:1.15; text-align:center;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--base) var(--spring-b);
}
.pick::before{                                   /* the shadow the icon stands on */
  content:""; position:absolute; z-index:-1; left:22%; right:22%; top:calc(.2rem + (100% - 2.2rem) * .86); height:9px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,20,24,.2),transparent);
}
.pick::after{                                    /* the droplets a click throws */
  content:""; position:absolute; z-index:-1; left:50%; top:38%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; background:var(--k,var(--y)); opacity:0; pointer-events:none;
  box-shadow:calc(var(--d)*4.6) calc(var(--d)*-2.2) 0 -1px var(--k,var(--y)), calc(var(--d)*-4.8) calc(var(--d)*-1.4) 0 0 var(--k,var(--y)),
             calc(var(--d)*3.8) calc(var(--d)*2.6) 0 -2px var(--k,var(--y)), calc(var(--d)*-4) calc(var(--d)*2.4) 0 -1px var(--k,var(--y)),
             calc(var(--d)*.4) calc(var(--d)*-4.2) 0 -2px var(--k,var(--y));
}
.pick__ico{                                      /* the picture, painted in: set by blank.js once it is read */
  flex:0 0 auto; width:100%; max-width:132px; aspect-ratio:4/3; background:center/contain no-repeat; visibility:hidden;
  transform-origin:50% 86%; will-change:transform;
}
.pick__ico.is-set{ visibility:visible; }
html.studio-open .blank .pick__ico{ animation-play-state:paused; }   /* the hero is under the studio: its cards rest */
.pick[data-move="rock"] .pick__ico{ animation:mvRock 2.6s ease-in-out infinite alternate; }
.pick[data-move="sway"] .pick__ico{ transform-origin:50% 8%; animation:mvSway 3.2s ease-in-out -.8s infinite alternate; }
.pick[data-move="bounce"] .pick__ico{ animation:mvBounce 1.15s cubic-bezier(.3,0,.7,1) -.3s infinite alternate; }
.pick[data-move="tip"] .pick__ico{ transform-origin:78% 84%; animation:mvTip 2.9s ease-in-out -1.4s infinite alternate; }
@keyframes mvRock{ 0%{ transform:rotate(-5deg) translateY(0); } 50%{ transform:rotate(0deg) translateY(-3px); } 100%{ transform:rotate(5deg) translateY(0); } }
@keyframes mvSway{ 0%{ transform:rotate(-6deg); } 100%{ transform:rotate(6deg); } }
@keyframes mvBounce{ 0%{ transform:translateY(2px) scale(1.06,.92); } 18%{ transform:translateY(-2px) scale(.98,1.03); } 100%{ transform:translateY(-16px) scale(1,1); } }
@keyframes mvTip{ 0%{ transform:rotate(3deg); } 100%{ transform:rotate(-9deg) translateY(-3px); } }
.pick span{ max-width:100%; padding:.16rem .6rem; border-radius:100px; white-space:nowrap; transition:background var(--fast) linear, color var(--fast) linear; }
.blank__hint{ display:none; grid-column:1 / -1; justify-content:center; align-items:center; padding-top:.6rem; font-size:.78rem; font-weight:500; color:var(--ink-3); white-space:nowrap; }
.pick:hover{ transform:translateY(-4px) scale(1.04); }
.pick:active{ transform:scale(.95); }
.pick:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }
.pick[aria-pressed="true"] span{ background:var(--ink); color:#fff; }
.pick.is-pop::after{ animation:pickDrops .7s cubic-bezier(.2,.7,.2,1) both; }
.pick.is-pop{ animation:pickJump .7s var(--spring-b) both; }   /* the whole card hops once */
@keyframes pickDrops{ 0%{ opacity:1; transform:scale(.25); } 70%{ opacity:1; } 100%{ opacity:0; transform:scale(1.3); } }
@keyframes pickJump{ 0%{ transform:scale(1.12,.8) translateY(4px); } 38%{ transform:scale(.94,1.12) translateY(-26px) rotate(-10deg); } 70%{ transform:scale(1.08,.92) translateY(0) rotate(4deg); } 100%{ transform:none; } }
.blank__cv.is-swap{ animation:blankSwap .42s var(--spring-b) both; }          /* the new blank settles in */
@keyframes blankSwap{ 0%{ opacity:0; transform:scale(.9) rotate(-3deg); } 100%{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .pick .pick__ico,.pick.is-pop,.pick.is-pop::after,.blank__cv.is-swap{ animation:none !important; } }
@media (min-width:1081px){
  /* copy left, the blank right; the palette dock hugs the hero's right edge,
     so the blank leaves it room */
  .hero__wrap{ display:grid; grid-template-columns:minmax(0,44rem) minmax(0,1fr); grid-template-rows:auto auto; column-gap:clamp(var(--s6),4vw,var(--s9)); row-gap:0; align-items:center; }
  /* Nitin, 16 Sep 2026 19:47 (chat B owns the hero): copy left, the blank
     right, and the "Loved by the community" band runs the full width under
     both, left to right, as he asked. */
  .hero__wrap > .hero__copy{ grid-column:1; grid-row:1; }
  /* .loved left the hero 16 Sep 2026 (Nitin); row 2 is empty */
  .blank{ grid-column:2; grid-row:1; align-self:center; margin-top:0; padding-right:clamp(64px,6vw,96px); }
  /* the wash hint used to sit beside the dock, which is now over the blank's heel; the words move into the picker row */
  .hero__hint{ display:none; }
  .blank__hint{ display:inline-flex; }
}
@media (max-width:760px){
  .pick{ --d:7px; font-size:.74rem; }
  .pick span{ padding:.14rem .42rem; }
}

/* ============================================================ experiences: the flip stack
   Nitin, 17 Sep 2026, reference componentry.dev case-study-flip-stack; the
   read-out is in the section's HTML comment, the scroll maths in
   assets/js/experiences.js. Sizes are the reference's own: an 860px 1.76:1
   panel (3:4 under 640px), a 1.15fr text column beside a .85fr photo, radius
   clamp(18px,2vw,30px), shadow 0 16px 50px, the photo inset
   clamp(10px,1.2vw,18px) under a black-to-white corner wash, an 800px
   perspective. Colours are the HOW IT WORKS pastels ("pastel bright, but
   not too bright"), plum text, one pastel per card. The pill is ours: the
   home page routes. Nitin's three looks, 17 Sep (the section's HTML comment
   has them): no full-screen stage around the card, no card filling the
   screen, no heading pinned in the cards' flight path, every card leaves.
   So: the heading scrolls away, one sticky wrapper (.xs__pin) holds the
   deck alone, centred in the viewport, the card 1000px at most and never
   taller than the viewport minus a gap each side; the heading gap and the
   section's bottom padding are halved. One viewport of scroll folds one
   card, the last included. Under 640px the card is 3:4. */
.sec--xs{ container-type:inline-size; padding-bottom:clamp(var(--s6),4vw,var(--s8)); }
.xs__head{ margin-bottom:clamp(var(--s5),3vw,var(--s6)); }
.xs{
  --xs-peach:#FFD5C2; --xs-rose:#FFC4D6; --xs-butter:#FFE7A3; --xs-mint:#C6EBD9;
  --xs-sky:#C7DEF8; --xs-lilac:#DDD2F5; --xs-aqua:#C2E6E8; --xs-plum:#4B3F63;
  --xs-ar:1.76; --xs-max:1000px; --xs-gutter:clamp(14px,4vw,64px); --xs-gap:clamp(32px,7svh,72px);
  --xs-h:min(calc(var(--xs-max) / var(--xs-ar)), calc((100cqw - 2 * var(--xs-gutter)) / var(--xs-ar)), calc(100svh - 2 * var(--xs-gap)));   /* the card's height */
  position:relative; height:calc(var(--n,7) * 100svh + var(--xs-h) - 45svh);   /* one viewport of scroll per card, every card leaves; the pin lets go .45 of a viewport early, while the last card is still folding, so the next section rises under it instead of an empty deck (experiences.js uses the same .45) */
}
.xs__pin{ position:sticky; top:max(var(--xs-gap), calc((100svh - var(--xs-h)) / 2)); height:var(--xs-h); padding-inline:var(--xs-gutter); }
.xs__deck{
  list-style:none; margin:0 auto; padding:0; position:relative; width:calc(var(--xs-h) * var(--xs-ar)); max-width:100%; height:100%;
  perspective:800px;
}
.xs__card{
  position:absolute; inset:0; z-index:calc(var(--n,7) - var(--i,0));
  transform-origin:50% 50%; transform-style:preserve-3d; backface-visibility:hidden; will-change:transform;
}
.xs__in{
  display:grid; grid-template-columns:1.15fr .85fr; height:100%; overflow:hidden;
  border-radius:clamp(18px,2vw,30px); box-shadow:0 16px 50px rgba(20,17,10,.18);
  background:var(--bg,var(--xs-peach)); color:var(--xs-plum); transform-origin:50% 100%; will-change:transform;
}
.xs__text{ display:flex; flex-direction:column; min-width:0; padding:clamp(24px,3vw,48px); }
.xs__n{ font-family:var(--display); font-weight:500; font-size:clamp(24px,2.5vw,36px); line-height:1; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.xs__copy{ margin-top:auto; max-width:46rem; padding-top:2rem; }
.xs__eyebrow{ margin:0 0 clamp(10px,1.5vw,22px); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.16em; opacity:.85; }   /* reference .7, lifted for AA on a pastel */
.xs__t{ margin:0; max-width:16ch; font-family:var(--display); font-weight:600; font-size:clamp(28px,3.25vw,48px); line-height:.96; letter-spacing:-.05em; text-wrap:balance; color:inherit; }
.xs__d{ margin:clamp(16px,1.8vw,24px) 0 0; max-width:42rem; font-size:clamp(13px,1.1vw,16px); line-height:1.5; opacity:.9; color:inherit; }
.xs__go{ align-self:flex-start; margin-top:clamp(16px,1.8vw,24px); }   /* one-theme move 5, 17 Sep: the card pill is the site's .btn.btn--sm, nothing of its own */
.xs__pic{
  position:relative; margin:clamp(10px,1.2vw,18px); margin-left:0; min-height:180px; overflow:hidden;
  border-radius:clamp(12px,1.4vw,22px); background:color-mix(in srgb,var(--xs-plum) 12%,var(--bg,var(--xs-peach)));
}
.xs__pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.xs__pic::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top right,rgba(0,0,0,.2),transparent,rgba(255,255,255,.1)); }
.xs__hint{
  display:flex; align-items:center; gap:clamp(10px,1.5vw,18px); margin:clamp(1.25rem,2vw,1.75rem) 0 0;
  font-family:var(--display); font-weight:500; font-size:clamp(1.15rem,1rem + .8vw,1.6rem); letter-spacing:-.045em; color:var(--ink-2);
}
.xs.is-going .xs__hint{ opacity:0; transition:opacity .4s linear; }   /* the hint has done its job once the first card moves */
.xs__arrow{ display:inline-block; animation:xsBob 1.4s ease-in-out infinite; }
.xs__arrow--b{ animation-delay:.18s; }
@keyframes xsBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(10px); } }
@media (min-width:640px){ .xs__eyebrow{ font-size:12px; } }
@media (max-width:639px){
  .xs{ --xs-ar:.75; --xs-gap:clamp(12px,3svh,24px); }
  .xs__in{ grid-template-columns:1fr; grid-template-rows:auto minmax(160px,1fr); }
  .xs__pic{ margin-left:clamp(10px,1.2vw,18px); min-height:0; }
  .xs__copy{ padding-top:1.25rem; }
}
html:not(.js) .xs{ height:auto; }
html:not(.js) .xs__pin{ position:static; }
html:not(.js) .xs__deck{ width:auto; height:auto; display:grid; gap:1rem; }
html:not(.js) .xs__card{ position:relative; aspect-ratio:var(--xs-ar); }
@media (prefers-reduced-motion:reduce){
  .xs__arrow{ animation:none; }
}

/* ============================================================ HOW IT WORKS
   Second build, 16 Sep 2026 late. Reference: 21st.dev @ayushmxxn feature-section.
   The analysis behind it is in the section's HTML comment. In short: a 4:3 panel
   the art fills, a pastel system (no outlines, two tones per object, tinted soft
   shadows, a sky gradient + two drifting blobs per scene), eased entrances, one
   story beat per step, idle motion until the swap, a 5:7 list-to-panel split.
   assets/js/how.js runs the clock (5.2s a step) and re-adds .is-on to a scene,
   which is what starts every animation below. */
.how{
  --hp-cream:#FFFBF4; --hp-peach:#FFD5C2; --hp-peach-2:#F7B99E; --hp-rose:#FFC4D6; --hp-rose-2:#F49CB9;
  --hp-butter:#FFE7A3; --hp-butter-2:#F5D26A; --hp-mint:#C6EBD9; --hp-mint-2:#9ED8BD; --hp-sky:#C7DEF8; --hp-sky-2:#9CC3EE;
  --hp-lilac:#DDD2F5; --hp-lilac-2:#BFAEEA; --hp-plum:#4B3F63;
  --hw-out:cubic-bezier(.2,.8,.2,1); --hw-over:cubic-bezier(.34,1.56,.64,1); --hw-in:cubic-bezier(.55,0,1,.45);
  --hw-col:clamp(2rem,5vw,4.5rem);                                                /* between the pile and the panel */
  --hw-hs:min(calc((100cqw - var(--hw-col)) * .4375), calc(100svh - 108px));     /* the panel's height: 7/12 of the row wide, 4:3, never taller than the window under the header */
  --hw-hc:calc((var(--hw-hs) - 30px) / 1.0309);                                   /* a card's height: the pile of four (the last one 30px lower and 3.09% nearer) ends level with the panel */
  --hw-top:max(92px, calc((100svh - var(--hw-hs)) / 2));                          /* the pair pins centred in the window, never under the header */
  container-type:inline-size;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--hw-col); align-items:start;
}
/* Fourth pass, 18 Sep 2026 (Nitin: "design the card animation like this ... with each scroll step 1,
   step 2, step 3, step 4, up and down, the side animation changing with it"). Reference: 21st.dev
   @youcefbnm cards-stack, numbers read from its bundle: every card is position:sticky, top = index x 10px,
   z = index x 10px under a 1000px perspective, 32px between cards (space-y-8), the column beside them
   pinned for the whole run. Ours: the rail, the ticks and the 2.6s clock are gone (archived, see the
   section's HTML comment); the four steps are four pastel cards that scroll up with the page and stop on
   the pile, each leaving a 10px sliver of the one under it, and they peel off again on the way up. The
   perspective is per card with its origin on the card's top edge, so a sliver is 10px at every depth (the
   reference's one shared origin lets the slivers creep as the page moves). His standing notes on pinned
   cards hold: no empty stage, so a card is as tall as the panel beside it and the pair pins centred; the
   list's bottom padding makes the pile and the panel let go on the same pixel, the moment card 4 lands, so
   the next section comes up under it. assets/js/how.js v6 reads which card is on top and swaps the scene. */
.how__list{ list-style:none; margin:0; padding:0 0 calc(var(--hw-hs) - 30px - var(--hw-hc)); }
.how__step{ position:sticky; top:calc(var(--hw-top) + var(--i,0) * 10px); height:var(--hw-hc); margin-bottom:calc((3 - var(--i,0)) * 10px); }   /* the margin folds into the next card's 32px, so nothing moves; it only makes the list's end push all four at once, and the pile leaves in one piece instead of squaring up */
.how__step + .how__step{ margin-top:32px; }
.how__btn{
  display:flex; flex-direction:column; width:100%; height:100%; margin:0; border:0; text-align:left; font:inherit; cursor:pointer;
  padding:clamp(1.4rem,2.6vw,2.4rem); border-radius:var(--r-lg); background:var(--k); color:var(--hp-plum);
  box-shadow:0 -12px 26px -16px rgba(75,63,99,.34), 0 30px 70px -30px rgba(75,63,99,.28), 0 2px 6px rgba(75,63,99,.06);
  transform-origin:50% 0; transform:perspective(1000px) translateZ(calc(var(--i,0) * 10px)); backface-visibility:hidden;
}
.how__btn:focus-visible{ outline:3px solid var(--hp-plum); outline-offset:3px; }
.how__n{
  display:block; font-family:var(--display); font-weight:800; font-size:clamp(4rem,2.4rem + 5.2vw,7.5rem); line-height:.8;
  letter-spacing:-.06em; font-variant-numeric:tabular-nums; color:color-mix(in srgb,var(--k2,var(--hp-plum)) 82%,var(--hp-plum));
}
.how__body{ display:block; margin-top:auto; min-width:0; }
.how__t{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,1.1rem + 1.5vw,2.25rem); letter-spacing:-.035em; line-height:1.05; margin:0 0 .6rem; color:var(--hp-plum); text-wrap:balance; }
.how__d{ display:block; color:var(--ink-2); font-size:clamp(.97rem,.9rem + .25vw,1.08rem); line-height:1.5; max-width:40ch; }

/* the pinned side: the panel, and the section's paint blot behind it (one-paint-blot block above) */
.how__side{ position:sticky; top:var(--hw-top); height:var(--hw-hs); display:grid; place-items:center; isolation:isolate; }
.how__stage{
  position:relative; width:min(100%,calc(var(--hw-hs) * 4 / 3)); height:100%; border-radius:var(--r-lg); overflow:hidden; background:var(--hp-cream);
  box-shadow:0 30px 70px -30px rgba(75,63,99,.28), 0 2px 6px rgba(75,63,99,.06); perspective:1400px;
}
.how__scene{
  position:absolute; inset:0; margin:0; opacity:0;
  transform:translateY(72px) rotateX(-14deg) scale(.97); transform-origin:50% 60%;
  transition:opacity .36s var(--hw-out), transform .42s var(--hw-out); pointer-events:none;
}
.how__scene.is-on{ opacity:1; transform:none; }
.how__scene.is-out{ opacity:0; transform:translateY(-64px) rotateX(12deg) scale(.97); transition-duration:.28s,.32s; }
.how__scene svg{ width:100%; height:100%; display:block; }
/* the step pill, top left of the stage, in the step's colour */
.how__count{
  position:absolute; z-index:2; top:clamp(.9rem,2vw,1.35rem); left:clamp(.9rem,2vw,1.35rem);
  display:inline-flex; align-items:baseline; gap:.3em; padding:.5em .95em .45em; border-radius:999px;
  background:var(--k,var(--hp-butter)); color:var(--hp-plum); font-family:var(--display); font-weight:800;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; line-height:1;
  box-shadow:0 8px 20px -10px rgba(75,63,99,.45); transition:background-color .5s linear;
}
.how__count b{ display:inline-block; font-size:1.35em; letter-spacing:0; min-width:1ch; text-align:center; }
.how__count b.is-flip{ animation:hwFlip .45s var(--hw-out); }
@keyframes hwFlip{ 0%{ transform:translateY(-.7em); opacity:0; } 100%{ transform:none; opacity:1; } }

/* --- the pastel system, as classes so the scenes stay short ------------- */
.how .f-cream{ fill:var(--hp-cream); } .how .f-peach{ fill:var(--hp-peach); } .how .f-peach2{ fill:var(--hp-peach-2); }
.how .f-rose{ fill:var(--hp-rose); } .how .f-rose2{ fill:var(--hp-rose-2); } .how .f-butter{ fill:var(--hp-butter); } .how .f-butter2{ fill:var(--hp-butter-2); }
.how .f-mint{ fill:var(--hp-mint); } .how .f-mint2{ fill:var(--hp-mint-2); } .how .f-sky{ fill:var(--hp-sky); } .how .f-sky2{ fill:var(--hp-sky-2); }
.how .f-lilac{ fill:var(--hp-lilac); } .how .f-lilac2{ fill:var(--hp-lilac-2); } .how .f-plum{ fill:var(--hp-plum); }
.how .s-rose2{ stroke:var(--hp-rose-2); } .how .s-butter{ stroke:var(--hp-butter); } .how .s-butter2{ stroke:var(--hp-butter-2); }
.how .s-mint2{ stroke:var(--hp-mint-2); } .how .s-sky2{ stroke:var(--hp-sky-2); } .how .s-lilac2{ stroke:var(--hp-lilac-2); } .how .s-plum{ stroke:var(--hp-plum); }
.how .hw-label{ font-family:var(--display); font-weight:800; font-size:24px; fill:var(--hp-plum); text-anchor:middle; letter-spacing:-.02em; }
.how .hw-wd text{ font-family:var(--display); font-weight:700; font-size:21px; fill:var(--hp-plum); text-anchor:middle; }
.how .hw-wd{ transform:translateY(-118px); }
.how .hw-days rect{ fill:#F1ECE3; }
.how .hw-tag-t{ font-family:var(--display); font-weight:800; font-size:24px; fill:#FFFFFF; text-anchor:middle; }
.how .hw-stamp-t{ font-family:var(--display); font-weight:800; font-size:22px; fill:var(--hp-plum); text-anchor:middle; letter-spacing:.04em; }
.how .hw-stamp-s{ font-family:var(--display); font-weight:700; font-size:14px; fill:var(--hp-plum); text-anchor:middle; letter-spacing:.22em; }

/* --- motion. Every piece waits in its start pose; .is-on runs it. ------- */
.how svg [class*="hw-"]{ transform-box:fill-box; transform-origin:50% 50%; }
@keyframes hwIn{ to{ opacity:1; transform:none; } }
@keyframes hwDrift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-26px,20px) scale(1.08); } }
@keyframes hwBob{ from{ opacity:1; transform:translateY(0); } to{ opacity:1; transform:translateY(-6px); } }
@keyframes hwDraw{ to{ stroke-dashoffset:0; } }
.is-on .hw-blob{ animation:hwDrift 9s ease-in-out infinite alternate; }
.is-on .hw-blob--b{ animation-duration:11s; animation-direction:alternate-reverse; }

/* scene 1: cards */
.hw-card{ transform-origin:50% 100%; opacity:0; transform:translateY(40px) rotate(var(--rot)); }
@keyframes hwCardIn{ to{ opacity:1; transform:translateY(0) rotate(var(--rot)); } }
@keyframes hwCardFloat{ from{ opacity:1; transform:translateY(0) rotate(var(--rot)); } to{ opacity:1; transform:translateY(-8px) rotate(var(--rot)); } }
.is-on .hw-card{ animation:hwCardIn .5s var(--hw-out) forwards, hwCardFloat 4.2s ease-in-out infinite alternate; }
.is-on .hw-card--1{ animation-delay:.02s,.53s; }
.is-on .hw-card--2{ animation-delay:.09s,.7s; animation-duration:.7s,3.6s; }
.is-on .hw-card--3{ animation-delay:.15s,.63s; animation-duration:.7s,4.8s; }
@keyframes hwLift{ to{ transform:translateY(-16px) scale(1.05); } }
.is-on .hw-card--2 .hw-card-in{ animation:hwLift .43s var(--hw-over) .75s forwards; }
.hw-sticker{ opacity:0; transform:translateY(-90px) scale(.5) rotate(-20deg); }
.is-on .hw-sticker{ animation:hwIn .4s var(--hw-over) .93s forwards; }
.hw-cf{ opacity:0; transform:scale(0); }
@keyframes hwConf{
  0%{ opacity:0; transform:translate(0,0) scale(0) rotate(0deg); }
  15%{ opacity:1; transform:translate(calc(var(--dx) * .45),calc(var(--dy) * .45)) scale(1) rotate(calc(var(--r) * .4)); }
  100%{ opacity:0; transform:translate(var(--dx),calc(var(--dy) + 70px)) scale(.9) rotate(var(--r)); }
}
.is-on .hw-cf{ animation:hwConf 1.01s var(--hw-out) 1.02s forwards; }

/* scene 2: calendar */
.hw-cal{ opacity:0; transform:translateY(36px); }
.is-on .hw-cal{ animation:hwIn .5s var(--hw-out) .05s forwards, hwBob 5s ease-in-out .5s infinite alternate; }
.hw-days rect{ opacity:0; }
@keyframes hwFade{ to{ opacity:1; } }
@keyframes hwOpen{ to{ fill:var(--hp-mint); } }
.is-on .hw-days rect{ animation:hwFade .26s linear forwards; animation-delay:calc(.22s + var(--i) * .02s); }
.is-on .hw-days .hw-open{ animation:hwFade .26s linear forwards, hwOpen .36s linear forwards; animation-delay:calc(.22s + var(--i) * .02s), calc(.65s + var(--i) * .02s); }
.hw-drop{ opacity:0; transform:translateY(-330px) scale(.9); }
@keyframes hwDrop{ 0%{ opacity:1; transform:translateY(-330px) scale(.9); } 92%{ opacity:1; transform:translateY(0) scale(1,1.12); } 100%{ opacity:0; transform:translateY(3px) scale(1.3,.6); } }
.is-on .hw-drop{ animation:hwDrop .43s var(--hw-in) .87s forwards; }
.hw-splat{ opacity:0; transform:scale(.2); }
@keyframes hwSplat{ to{ opacity:1; transform:scale(1); } }
.is-on .hw-splat{ animation:hwSplat .32s var(--hw-over) 1.15s forwards; }
.hw-ripple{ opacity:0; transform:scale(.6); }
@keyframes hwRipple{ 0%{ opacity:.8; transform:scale(.6); } 100%{ opacity:0; transform:scale(2.3); } }
.is-on .hw-ripple{ animation:hwRipple .5s var(--hw-out) 1.15s forwards; }
.hw-tag{ opacity:0; transform:translateX(50px) scale(.9); }
.is-on .hw-tag{ animation:hwIn .43s var(--hw-over) 1.45s forwards; }
.hw-heart{ opacity:0; }
@keyframes hwHeart{ 0%{ opacity:0; transform:translateY(0) scale(.6); } 20%{ opacity:1; transform:translateY(-14px) scale(1); } 100%{ opacity:0; transform:translateY(-74px) scale(1); } }
.is-on .hw-heart{ animation:hwHeart 1.22s ease-out 1.65s forwards; }
.is-on .hw-heart--2{ animation-delay:1.78s; }

/* scene 3: easel and rainbow */
.hw-easel{ opacity:0; transform:translateY(36px); }
.is-on .hw-easel{ animation:hwIn .5s var(--hw-out) .05s forwards; }
.is-on .hw-pot{ animation:hwBob 3.4s ease-in-out .5s infinite alternate; }
.is-on .hw-pot:nth-of-type(2){ animation-delay:.8s; } .is-on .hw-pot:nth-of-type(3){ animation-delay:1.06s; }
.hw-arc, .hw-arc4{ stroke-dasharray:1; stroke-dashoffset:1; }
.is-on .hw-arc--1{ animation:hwDraw .65s ease-in-out .46s forwards; }
.is-on .hw-arc--2{ animation:hwDraw .65s ease-in-out .97s forwards; }
.is-on .hw-arc--3{ animation:hwDraw .58s ease-in-out 1.5s forwards; }
.hw-brush{ transform-box:view-box; transform-origin:0 0; offset-rotate:0deg; offset-distance:0%; opacity:0; }
@keyframes hwBrush{ 0%{ opacity:0; offset-distance:0%; } 9%{ opacity:1; offset-distance:0%; } 91%{ opacity:1; offset-distance:100%; } 100%{ opacity:0; offset-distance:100%; } }
.is-on .hw-brush--1{ animation:hwBrush .8s ease-in-out .41s forwards; }
.is-on .hw-brush--2{ animation:hwBrush .8s ease-in-out .93s forwards; }
.is-on .hw-brush--3{ animation:hwBrush .72s ease-in-out 1.45s forwards; }
@supports not (offset-path: path('M0 0')){ .hw-brush{ display:none; } }
.hw-drip{ opacity:0; }
@keyframes hwDrip{ 0%{ opacity:1; transform:translateY(0) scale(.6); } 30%{ opacity:1; transform:translateY(6px) scale(1); } 100%{ opacity:0; transform:translateY(48px) scale(1); } }
.is-on .hw-drip--1{ animation:hwDrip .72s ease-in .95s forwards; }
.is-on .hw-drip--2{ animation:hwDrip .72s ease-in 1.47s forwards; }
.hw-sun{ opacity:0; transform:scale(0) rotate(-40deg); }
.is-on .hw-sun{ animation:hwIn .43s var(--hw-over) 1.93s forwards; }
@keyframes hwSpin{ to{ transform:rotate(360deg); } }
.is-on .hw-sun-rays{ animation:hwSpin 16s linear 2.19s infinite; }

/* scene 4: the sneaker and the door */
.hw-door{ opacity:0; transform:translateX(26px); }
.is-on .hw-door{ animation:hwIn .5s var(--hw-out) .12s forwards; }
.hw-light{ opacity:0; }
@keyframes hwGlow{ from{ opacity:.35; } to{ opacity:.75; } }
.is-on .hw-light{ animation:hwGlow 3s ease-in-out .5s infinite alternate; }
.hw-shoe{ opacity:0; transform:translateY(40px); }
.is-on .hw-shoe{ animation:hwIn .5s var(--hw-out) .02s forwards; }
.is-on .hw-arc4--1{ animation:hwDraw .5s ease-in-out .48s forwards; }
.is-on .hw-arc4--2{ animation:hwDraw .5s ease-in-out .7s forwards; }
.is-on .hw-arc4--3{ animation:hwDraw .5s ease-in-out .93s forwards; }
/* the shoe group is mirrored, so a hop to the right is a negative x here */
@keyframes hwHop{
  0%{ transform:translate(0,0) rotate(0deg); } 18%{ transform:translate(-48px,-42px) rotate(8deg); }
  36%{ transform:translate(-96px,0) rotate(0deg); } 54%{ transform:translate(-150px,-42px) rotate(8deg); }
  72%{ transform:translate(-204px,0) rotate(0deg); } 88%{ transform:translate(-224px,-14px) rotate(3deg); }
  100%{ transform:translate(-236px,0) rotate(0deg); }
}
.is-on .hw-shoe-in{ animation:hwHop 1.22s ease-in-out 1.35s forwards; }
@keyframes hwShadow{
  0%{ transform:translateX(0) scale(1); opacity:.14; } 18%{ transform:translateX(35px) scale(.72); opacity:.07; }
  36%{ transform:translateX(69px) scale(1); opacity:.14; } 54%{ transform:translateX(108px) scale(.72); opacity:.07; }
  72%{ transform:translateX(147px) scale(1); opacity:.14; } 100%{ transform:translateX(170px) scale(1); opacity:.14; }
}
.is-on .hw-shadow{ animation:hwShadow 1.22s ease-in-out 1.35s forwards; }
.hw-spark{ opacity:0; transform:scale(0); }
@keyframes hwSpark{ 0%,100%{ opacity:0; transform:scale(0) rotate(0deg); } 50%{ opacity:1; transform:scale(1) rotate(45deg); } }
.is-on .hw-spark{ animation:hwSpark 1.6s ease-in-out 1.6s infinite; }
.is-on .hw-spark--2{ animation-delay:1.8s; } .is-on .hw-spark--3{ animation-delay:2s; }
.hw-stamp{ opacity:0; transform:scale(1.7) rotate(-30deg); }
@keyframes hwStamp{ to{ opacity:1; transform:scale(1) rotate(-12deg); } }
.is-on .hw-stamp{ animation:hwStamp .36s cubic-bezier(.2,1.3,.4,1) 1.8s forwards; }

/* under 900px the panel pins under the header and the pile builds right below it: one column, a flex
   column so the panel's sticky box is the whole block, not its own grid row. The panel's bottom margin
   (12 gap + 30 of pile steps + a card + the list's 8) is taken back by the list's top margin: it only
   makes the panel let go on the same pixel as the pile. The panel gives up height before the pile
   slips under the phone's dock. */
@media (max-width:899px){
  .how{
    display:flex; flex-direction:column; align-items:stretch;
    --hw-hc:13rem; --hw-top:84px;
    --hw-hs:max(150px, min(75cqw, calc(100svh - var(--hw-top) - 12px - var(--hw-hc) * 1.0309 - 30px - 86px)));   /* 86: the Call / Book dock (70 + 12) sits on the window's foot on a phone */
  }
  .how__side{ order:-1; margin-bottom:calc(var(--hw-hc) + 50px); }
  .how__side::after{ bottom:3%; }   /* the blot stays beside the panel, not down onto the pile under it */
  .how__list{ margin-top:calc(-1 * (var(--hw-hc) + 38px)); padding-bottom:8px; }
  .how__step{ top:calc(var(--hw-top) + var(--hw-hs) + 12px + var(--i,0) * 10px); }
  .how__btn{ padding:1.15rem 1.25rem 1.2rem; border-radius:var(--r-md); }
  .how__n{ font-size:2.6rem; }
  .how__t{ font-size:1.3rem; margin-bottom:.35rem; } .how__d{ font-size:.92rem; max-width:none; }
}
html:not(.js) .how__step, html:not(.js) .how__side{ position:relative; top:auto; }   /* no script, no scene swap: a plain list beside a still panel */
@media (prefers-reduced-motion:reduce){
  .how__scene{ transition:none; } .how__count b.is-flip{ animation:none; }
  .how .hw-card,.how .hw-card-in,.how .hw-sticker,.how .hw-cal,.how .hw-days rect,.how .hw-splat,.how .hw-tag,.how .hw-easel,
  .how .hw-sun,.how .hw-door,.how .hw-shoe,.how .hw-shoe-in,.how .hw-stamp,.how .hw-pot,.how .hw-blob,.how .hw-sun-rays,.how .hw-shadow{
    animation:none !important; transform:none !important; opacity:1 !important; }
  .how .hw-shadow{ opacity:.14 !important; }
  .how .hw-drop,.how .hw-ripple,.how .hw-cf,.how .hw-brush,.how .hw-drip,.how .hw-heart,.how .hw-spark,.how .hw-light{ animation:none !important; opacity:0 !important; }
  .how .hw-arc,.how .hw-arc4{ animation:none !important; stroke-dashoffset:0 !important; }
  .how .hw-open{ fill:var(--hp-mint) !important; }
}

/* 16 Sep 2026, command 3: small text links in the footer get a 24px hit area (WCAG 2.5.8) */
.ftr__legal a,.ftr__made a{ display:inline-block; padding:.3rem 0; }

/* ================================================================ FAQ stack
   17 Sep 2026, Nitin: the FAQ is the 21st.dev hover-stack (hyperiux/hover-stack),
   numbers read out of its bundle: card 280 wide, overlap 96, lift 30, push 235,
   spread 24 (cards beside the hovered one drift 24*.4 = 9.6px), rotation table
   -8 5 -3 6 -4 7 3 -5, hovered card straightens and scales 1.035, 500ms.
   Card height is the component's prop (360 in the demo); ours is 400 because a
   question plus its answer needs the room, and fstack.js lifts it further if any
   card would clip. Pastels are the brand inks lifted to the same three tints as
   How it works (rose = magenta, butter = yellow, sky = blue). Touch screens and
   windows narrower than the stack get the component's own column layout. */
.fstack{
  /* 17 Sep, Nitin: first set too dull, second too bright, and no colour twice on a page:
     fourteen soft pastels, one per card, in the order the cards take them (a page has up to 14) */
  --fs-rose:#FFC4D6; --fs-butter:#FFE59A; --fs-sky:#B9D6FF; --fs-mint:#BFEDD2; --fs-lilac:#D9CBFF; --fs-peach:#FFD3B6; --fs-aqua:#B8ECEA; --fs-lime:#E0F2A6; --fs-coral:#FFBFB0; --fs-lavender:#F0C6EE; --fs-sage:#CDE3B5; --fs-periwinkle:#C5CCFF; --fs-sand:#EBDDC2; --fs-blush:#FFE0EA;
  --cw:280px; --ch:400px; --ov:96px; --lift:30px; --push:235px; --drift:9.6px; --dur:500ms;
  --w:calc(var(--ov) * (var(--n) - 1) + var(--cw));
  position:relative; width:var(--w); height:calc(var(--ch) + var(--lift) + 24px);
  margin-inline:calc((100% - var(--w)) / 2);
  color:var(--ink);
}
.fs-card{
  position:absolute; left:0; top:0; width:var(--cw); height:var(--ch);
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  padding:24px; border-radius:16px; border:1px solid rgba(0,0,0,.1);
  background:var(--bg); transform-origin:center center; cursor:pointer; user-select:none;
  will-change:transform; z-index:calc(var(--i) + 1); outline:none;
  transform:translate3d(calc(var(--i) * var(--ov)),0,0) rotate(calc(var(--rot) * 1deg)) scale(1);
  transition:transform 343ms cubic-bezier(.4,0,.2,1), box-shadow 271ms cubic-bezier(.4,0,.2,1);
}
.fstack.is-hover .fs-card{ transition:transform var(--dur) cubic-bezier(.22,1,.36,1), box-shadow var(--dur) cubic-bezier(.22,1,.36,1); }
.fs-card.is-before{ transform:translate3d(calc(var(--i) * var(--ov) - var(--push)),calc(var(--drift) * -1),0) rotate(calc(var(--rot) * 1deg)) scale(1); }
.fs-card.is-after{  transform:translate3d(calc(var(--i) * var(--ov) + var(--push)),var(--drift),0) rotate(calc(var(--rot) * 1deg)) scale(1); }
.fs-card.is-on{
  transform:translate3d(calc(var(--i) * var(--ov)),calc(var(--lift) * -1),0) rotate(0deg) scale(1.035);
  z-index:999; box-shadow:0 0 0 3px transparent;
  transition:transform var(--dur) cubic-bezier(.22,1.6,.32,1), box-shadow calc(var(--dur) * 900 / 700) cubic-bezier(.22,1.6,.32,1);
}
.fs-body{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center; }
.fs-q{ margin:0; max-width:95%; font-family:var(--display); font-weight:700; font-size:1.75rem; line-height:1; letter-spacing:-.03em; }
.fs-a{ margin:.8rem 0 0; font-size:.9rem; line-height:1.4; color:var(--ink-2); }
.fs-a a{ color:inherit; }
.fs-a > *{ margin:0; }
.fs-a > * + *{ margin-top:.5rem; }
.fs-a ul{ padding-left:1.1rem; }
.fs-foot{ position:relative; z-index:2; display:flex; flex-direction:column; gap:16px; }
.fs-rule{ height:1px; width:100%; background:currentColor; opacity:.15; }
.fs-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fs-l{ display:flex; align-items:center; gap:10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.16em; }
.fs-dot{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#000; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.18); }
.fs-dot svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; }
.fs-n{ font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-variant-numeric:tabular-nums; opacity:.55; }

/* the component's touch layout: one column, 8.8vw apart, 7vw side room */
.fstack.is-col{ width:auto; height:auto; margin-inline:0; padding-inline:7vw; display:flex; flex-direction:column; gap:8.8vw; }
.fstack.is-col .fs-card{
  position:relative; width:100%; height:auto; min-height:62vw; border-radius:24px; cursor:default;
  transform:none; z-index:auto; transition:none; box-shadow:none;
}
.fstack.is-col .fs-q{ max-width:100%; font-size:1.5rem; line-height:1.05; }
@media (max-width:768px){ .fstack.is-col .fs-q{ font-size:1.25rem; } }

/* reduced motion: no travel, the hovered card only comes to the front */
.fstack.is-rm .fs-card{ transition:none !important; }
.fstack.is-rm .fs-card.is-before,.fstack.is-rm .fs-card.is-after{ transform:translate3d(calc(var(--i) * var(--ov)),0,0) rotate(calc(var(--rot) * 1deg)) scale(1); }
.fstack.is-rm .fs-card.is-on{ transform:translate3d(calc(var(--i) * var(--ov)),0,0) rotate(calc(var(--rot) * 1deg)) scale(1); box-shadow:none; }

/* ------------------------------------------------- visit: colour + Google reviews (17 Sep 2026) */
/* Nitin's reference: 21st.dev @shadcnspace/contact-01. Under the contact details it puts a 1px
   rule, a muted "Trusted by" line and a logo row that slides left for ever (20s linear, 1rem gap,
   pauses on hover, the list repeated so the loop has no seam). His change: the row is the 11
   Google reviews as pastel cards, and the section takes a soft wash of the same pastels so this
   corner of the page stops being plain cream. The pastels are the seven Experiences pastels
   (.xs), same hex, plum type; six on the cards (yellow stars die on butter, so butter only washes). */
#visit{
  --v-peach:#FFD5C2; --v-rose:#FFC4D6; --v-butter:#FFE7A3; --v-mint:#C6EBD9;
  --v-sky:#C7DEF8; --v-lilac:#DDD2F5; --v-aqua:#C2E6E8; --v-plum:#4B3F63;
  /* one-theme move 1 (Nitin's yes, 17 Sep, plan-one-theme/): the pastel wash comes
     off, every section sits on the page's cream; the pastels stay on the discs and
     the review cards, objects inside the section. The wash was four radial
     gradients of peach, sky, rose and butter over paper-2. */
  background:var(--paper);
}
/* the four facts each sit on their own pastel disc; the icon line turns plum */
#visit .visit__facts svg{ width:42px; height:42px; padding:10px; margin-top:0; border-radius:50%; stroke:var(--v-plum); background:var(--v-peach); }
#visit .visit__facts li:nth-child(2) svg{ background:var(--v-sky); }
#visit .visit__facts li:nth-child(3) svg{ background:var(--v-rose); }
#visit .visit__facts li:nth-child(4) svg{ background:var(--v-mint); }
#visit .visit__facts li{ align-items:center; }

.gtrust{ margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.gtrust__label{ margin:0 0 var(--s4); display:flex; align-items:center; gap:.55rem; font-size:.95rem; color:var(--ink-3); }
.gtrust__stars{ display:inline-flex; gap:.12rem; }
.gtrust__stars svg{ width:16px; height:16px; fill:var(--y); }
html:not(.js) .gtrust{ display:none; }                  /* the row is built by reviews.js; no script, no empty band */

.visit__copy{ min-width:0; }                            /* the grid column must not grow to the marquee's full length */
.gmq{
  --gap:1rem; --duration:55s; contain:inline-size;       /* the row's 5,000px of cards weigh nothing in the layout */                            /* ~55px a second: slow enough to read a card as it passes */
  display:flex; gap:var(--gap); overflow:hidden; padding-block:8px 14px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.gmq__track{ list-style:none; margin:0; padding:0; display:flex; flex:0 0 auto; gap:var(--gap); animation:gmq var(--duration) linear infinite; }
.gmq:hover .gmq__track{ animation-play-state:paused; }
@keyframes gmq{ from{ transform:translateX(0); } to{ transform:translateX(calc(-100% - var(--gap))); } }

.gcard{
  flex:0 0 auto; width:min(300px, 78vw); margin:0; padding:15px 17px 16px;
  display:grid; grid-template-columns:44px 1fr; column-gap:.75rem; align-items:start;
  background:var(--bg, var(--v-peach)); color:var(--v-plum); border-radius:18px;
  box-shadow:0 1px 2px rgba(20,20,24,.04), 0 12px 26px -16px rgba(75,63,99,.45);
}
.gcard__av{ grid-row:span 3; width:44px; height:44px; border-radius:50%; object-fit:cover; border:2.5px solid #FFF; box-shadow:var(--sh-1); }
.gcard__head{ display:flex; align-items:center; gap:.45rem; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.85; }
.gcard__stars{ display:inline-flex; gap:.08rem; }
.gcard__stars svg{ width:12px; height:12px; fill:var(--y); }
.gcard blockquote{ margin:.3rem 0 0; font-size:.9rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.gcard__who{ display:block; margin-top:.5rem; font-size:.78rem; font-weight:700; }
.gcard__who span{ font-weight:400; opacity:.8; }

@media (prefers-reduced-motion: reduce){                 /* no slide: the row scrolls by hand, one copy only */
  .gmq{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-mask-image:none; mask-image:none; }
  .gmq__track{ animation:none; }
  .gmq__track + .gmq__track{ display:none; }
  .gcard{ scroll-snap-align:start; }
}

/* ================================================================ the studio
   Nitin, 17 Sep 2026, reference aqua.adobe.com/draw (Create & Explore, Fashion
   Island): tap the blank in the hero and it opens here, on top of the page,
   as a colouring page. A paper table with three soft paint blobs, the page
   white with a shadow, the tools down the left, the colours down the right;
   under 900px the colours and the tools become two rows under the page.
   assets/js/blank.js runs it; the line art is the same as the hero's. */
html.studio-open{ overflow:hidden; }
.studio{
  position:fixed; inset:0; z-index:1600; display:grid; grid-template-rows:auto minmax(0,1fr);   /* above the header (and the chat bubble) */
  grid-template-columns:minmax(0,1fr);            /* 20 Sep 2026: the letters panel's canvas must not widen the page */
  color:var(--ink);
  background:
    radial-gradient(38rem 22rem at 6% 98%, color-mix(in srgb,var(--y) 36%,transparent), transparent 70%),
    radial-gradient(30rem 20rem at 97% 4%, color-mix(in srgb,var(--m) 22%,transparent), transparent 70%),
    radial-gradient(26rem 18rem at 90% 94%, color-mix(in srgb,var(--c) 18%,transparent), transparent 70%),
    var(--paper);
  opacity:0; transition:opacity var(--base) linear;
}
.studio[hidden]{ display:none; }
.studio.is-open{ opacity:1; }
.studio__bar{
  display:flex; align-items:center; gap:var(--s4); padding:var(--s3) var(--s5);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
  background:color-mix(in srgb,var(--paper) 72%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.studio__back,.studio__save{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:0 1rem; border:0; border-radius:100px;
  background:var(--card); box-shadow:var(--sh-1); font:inherit; font-size:.9rem; font-weight:600; color:var(--ink-2); cursor:pointer;
  transition:transform var(--fast) var(--spring), background var(--fast) linear, color var(--fast) linear;
}
.studio__back{ padding-left:.7rem; }
.studio__back svg,.studio__save svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.studio__back:hover,.studio__save:hover{ background:var(--ink); color:#fff; }
.studio__back:active,.studio__save:active{ transform:scale(.95); }
.studio__title{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.studio__title small{ font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.studio__title h2{ margin:.1rem 0 0; font-size:clamp(1.1rem,2.2vw,1.5rem); letter-spacing:-.02em; white-space:nowrap; }
.studio__blanks{ display:flex; gap:.4rem; margin-left:auto; padding:.35rem .3rem; overflow-x:auto; scrollbar-width:none; }
.studio__blanks .pick{ --d:5px; flex:0 0 auto; flex-direction:row; gap:.35rem; padding:.2rem .85rem .2rem .4rem; border-radius:100px; background:var(--card); box-shadow:var(--sh-1); font-size:.82rem; font-weight:600; }
.studio__blanks .pick::before{ display:none; }
.studio__blanks .pick::after{ left:calc(.4rem + 26px); top:50%; }
.studio__blanks .pick .pick__ico{ width:52px; max-width:none; animation:none; }
.studio__blanks .pick span{ padding:0; }
.studio__blanks .pick .pick__ico:not(.is-set){ display:none; }   /* no picture yet: no hole beside the name */
.studio__blanks .pick:has(.pick__ico:not(.is-set)){ padding-left:.85rem; }
.studio__blanks .pick[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.studio__blanks .pick[aria-pressed="true"] span{ background:transparent; }
.studio__blanks::-webkit-scrollbar{ display:none; }
.studio__actions{ display:flex; align-items:center; gap:.5rem; }
.studio__done{ min-height:44px; padding:.6rem 1.35rem; font-size:.92rem; }
.studio__body{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--s5); min-height:0; padding:var(--s4) var(--s5) var(--s5); }
.studio__tools{ display:flex; flex-direction:column; gap:.3rem; padding:.5rem; border-radius:24px; background:var(--card); box-shadow:var(--sh-2); }
.tool{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; width:66px; min-height:58px; padding:.45rem 0;
  border:0; border-radius:18px; background:transparent; font:inherit; font-size:.68rem; font-weight:600; color:var(--ink-2); cursor:pointer;
  transition:background var(--fast) linear, color var(--fast) linear, transform var(--fast) var(--spring);
}
.tool svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tool:hover{ background:var(--paper-2); }
.tool:active{ transform:scale(.94); }
.tool[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.tool:disabled{ opacity:.32; cursor:default; }
.tool:disabled:hover{ background:transparent; }
.tool__sizes{ display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.2rem 0; }
.size{ display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.size i{ display:block; width:var(--d); height:var(--d); border-radius:50%; background:var(--ink-2); }
.size:hover{ background:var(--paper-2); }
.size[aria-pressed="true"]{ background:var(--paper-2); box-shadow:inset 0 0 0 2px var(--ink); }
.size[aria-pressed="true"] i{ background:var(--ink); }
.tool__gap{ height:1px; margin:.25rem .6rem; background:color-mix(in srgb,var(--ink) 10%,transparent); }
.studio__page{ display:grid; place-items:center; min-height:0; height:100%; }
.studio__stage{
  position:relative; width:min(100%, calc((100vh - 10rem) * 4 / 3)); aspect-ratio:4/3;
  background:#fff; border-radius:22px; box-shadow:var(--sh-2); overflow:hidden;
  touch-action:none; user-select:none; -webkit-user-select:none; cursor:crosshair;
  transform:scale(.96); transition:transform var(--slow) var(--spring-b);
}
.studio.is-open .studio__stage{ transform:none; }
.studio__cv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.studio__colours{ display:grid; grid-template-columns:repeat(2,44px); gap:.45rem; padding:.55rem; border-radius:24px; background:var(--card); box-shadow:var(--sh-2); }
.col{
  position:relative; width:44px; height:44px; border:0; border-radius:50%; padding:0; background:var(--k); cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(20,20,24,.1); transition:transform var(--base) var(--spring-b), box-shadow var(--fast) linear;
}
.col:hover{ transform:scale(1.1); }
.col:active{ transform:scale(.94); }
.col[aria-pressed="true"],.col--any.is-on{ box-shadow:inset 0 0 0 1px rgba(20,20,24,.1), 0 0 0 3px var(--card), 0 0 0 5px var(--ink); }
.col--any{ display:block; background:conic-gradient(from 0deg,#F04E3E,#FFC72C,#4CAF50,#1B6FE8,#A98BF2,#E8336D,#F04E3E); }
.col--any input{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:pointer; }
/* THE LETTERS PANEL (Nitin, 20 Sep 2026): only on screen while the Letters tool is held.
   It sits over the colour rail, because the rail is what colours the word. */
.studio__word{ display:none; }
.studio[data-tool="word"] .studio__word{
  display:flex; flex-direction:column; gap:.55rem; width:230px; min-width:0; box-sizing:border-box; padding:.85rem;
  border-radius:24px; background:var(--card); box-shadow:var(--sh-2);
}
.studio[data-tool="word"] .studio__body{ grid-template-columns:auto minmax(0,1fr) auto auto; gap:var(--s4); }
.studio[data-tool="word"] .studio__colours{ align-self:start; }
.studio__word .wrow{ display:flex; gap:.25rem; }
.wstyle{
  flex:1; min-height:38px; padding:.3rem .2rem; border:0; border-radius:100px; background:var(--paper-2);
  font-family:var(--display); font-weight:700; font-size:.76rem; letter-spacing:-.01em; color:var(--ink-2); cursor:pointer;
  transition:background var(--fast) linear, color var(--fast) linear;
}
.wstyle:hover{ background:color-mix(in srgb,var(--ink) 10%,transparent); }
.wstyle[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.wfield{ position:relative; display:block; }
.wfield .wlab{
  display:block; margin-bottom:.25rem; font-size:.68rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
}
.wfield input{
  width:100%; min-height:46px; padding:.5rem 3.2rem .5rem .8rem; box-sizing:border-box;
  border:2px solid color-mix(in srgb,var(--ink) 16%,transparent); border-radius:14px; background:var(--paper);
  font-family:var(--display); font-weight:800; font-size:1.05rem; letter-spacing:.02em; text-transform:uppercase; color:var(--ink);
}
.wfield input:focus{ outline:none; border-color:var(--ink); }
.wcount{ position:absolute; right:.7rem; bottom:.85rem; font-size:.72rem; font-weight:600; color:var(--ink-3); }
.wprev{
  width:100%; min-width:0; max-width:100%; height:78px; border-radius:14px; background:var(--paper);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent);
}
.whint{ margin:0; font-size:.74rem; line-height:1.35; color:var(--ink-3); }
.studio[data-tool="word"] .studio__stage{ cursor:text; }

@media (max-width:899px){
  .studio{ grid-template-rows:auto minmax(0,1fr) auto auto; }
  .studio[data-tool="word"] .studio__word{ order:2; width:auto; margin:var(--s3) var(--s4) 0; border-radius:20px; }
  .studio[data-tool="word"] .studio__colours{ order:3; }
  .studio[data-tool="word"] .studio__tools{ order:4; }
  .wprev{ height:64px; }
  .studio__bar{ flex-wrap:wrap; gap:.5rem .6rem; padding:.6rem var(--s4); }
  .studio__title h2{ font-size:1.05rem; }
  .studio__blanks{ order:5; flex-basis:100%; margin-left:0; }
  .studio__save span{ display:none; }
  .studio__save{ padding:0 .8rem; }
  .studio__body{ display:contents; }                       /* page, colours, tools become rows of the studio grid */
  .studio__page{ order:1; padding:var(--s3) var(--s4) 0; height:auto; align-self:center; }
  .studio__colours{ order:2; }
  .studio__tools{ order:3; }
  .studio__stage{ width:min(100%, calc((100vh - 19rem) * 4 / 3)); }
  .studio__colours{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:40px; justify-content:start; overflow-x:auto; scrollbar-width:none; margin:var(--s3) var(--s4) 0; border-radius:100px; }
  .studio__colours::-webkit-scrollbar{ display:none; }
  .col{ width:40px; height:40px; }
  .studio__tools{ flex-direction:row; justify-content:center; gap:.15rem; margin:var(--s3) var(--s4) var(--s4); padding:.35rem; overflow-x:auto; scrollbar-width:none; }
  .studio__tools::-webkit-scrollbar{ display:none; }
  .tool{ width:58px; min-height:54px; font-size:.64rem; }
  .tool__sizes{ flex-direction:row; padding:0 .1rem; }
  .tool__gap{ width:1px; height:auto; margin:.5rem .2rem; }
}
@media (prefers-reduced-motion:reduce){
  .studio,.studio__stage,.blank__stage,.blank__go,.col,.tool{ transition:none; }
  .studio__stage{ transform:none; }
}

/* 17 Sep 2026, later (Nitin): the Google review row runs the entire width of the page, end to end,
   under the Visit columns; the label keeps the rule line inside the wrap; the form is two fields to a row. */
.gtrust--full{ margin-top:clamp(var(--s6),5vw,var(--s8)); padding-top:0; border-top:0; }
.gtrust--full > .wrap{ padding-top:var(--s5); border-top:1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.gtrust--full .gtrust__label{ margin-bottom:var(--s4); }
.gtrust--full .gmq{ width:100%; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); align-items:start; }
@media (max-width:560px){ .form__row{ grid-template-columns:1fr; } }

/* ============================================================== STUDIO · open the door
   Nitin, 17 Sep 2026. Reference: 21st.dev @arunachalam/scroll-expansion-hero,
   read out of its public bundle (ScrollExpandMedia): a 300x400 card grows to
   300+1250p x 400+400p px (phones under 768: 650 / 200), capped at 95vw x 85vh,
   radius 16 (video 14), shadow 0 0 50px rgba(0,0,0,.3); a black/30 dim over
   the video at opacity .5-.3p; a full-screen background behind it, black/10,
   at opacity 1-p; two lines centred over the card slide apart p*150vw
   (phones 180vw), text blue-200 #BEDBFF, 24px / 16px medium; the content
   under it fades in over .7s once p reaches 1 and out again under .75.
   The reference locks the wheel and counts deltaY*.0009, so 1111px of wheel
   opens it; ours pins with sticky and reads the same 1111px off the page
   (phones: 70svh). Nitin's two notes on the first build: the background
   slot is not a second video but a Polaroid wall of the studio pictures
   (.pol below, 4x4, phones 3x6), and the card's clip starts on the first
   scroll. Reduced motion: no pin, the card sits open on its poster. */
.sx{ --p:0; --sx-scroll:1111px; position:relative; height:calc(100svh + var(--sx-scroll)); }
.sx__pin{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--paper); }
.sx__bg{ position:absolute; inset:0; z-index:0; opacity:calc(1 - var(--p)); transition:opacity .1s; pointer-events:none; }
/* the Polaroid wall (Nitin, 17 Sep 2026, "do a Polaroid picture wall in the
   background"; his own pictures to come, the rail photos stand in): sixteen
   prints, one a cell, each a white frame with the thick bottom edge, a strip
   of tape at the top, and its own small tilt and nudge so the grid reads as
   a wall somebody pinned up, not a table. */
.sx__wall{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); place-items:center; padding:1.5vh 1.5vw; background:var(--paper); }
.pol{ --r:0deg; --dx:0px; --dy:0px; position:relative; margin:0; height:86%; aspect-ratio:5/6; box-sizing:border-box; padding:4% 4% 12%; background:#fff; box-shadow:0 1px 2px rgba(20,20,24,.08), 0 10px 26px rgba(20,20,24,.16); transform:translate(var(--dx),var(--dy)) rotate(var(--r)); }
.pol img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; background:var(--paper-2); filter:saturate(1.04) contrast(1.02); }
.pol::before{ content:""; position:absolute; left:50%; top:-8px; width:36%; height:15px; transform:translateX(-50%) rotate(calc(var(--r) * -.7)); background:rgba(255,246,214,.72); box-shadow:0 1px 2px rgba(20,20,24,.14); }
.pol:nth-child(8n+1){ --r:-5deg; --dx:4px; --dy:-3px; }
.pol:nth-child(8n+2){ --r:3deg; --dx:-3px; --dy:5px; }
.pol:nth-child(8n+3){ --r:-2deg; --dx:6px; --dy:2px; }
.pol:nth-child(8n+4){ --r:6deg; --dx:-5px; --dy:-4px; }
.pol:nth-child(8n+5){ --r:4deg; --dx:2px; --dy:4px; }
.pol:nth-child(8n+6){ --r:-6deg; --dx:-4px; --dy:-2px; }
.pol:nth-child(8n+7){ --r:2deg; --dx:5px; --dy:-5px; }
.pol:nth-child(8n+8){ --r:-4deg; --dx:-6px; --dy:3px; }
.sx__bg i{ position:absolute; inset:0; background:rgba(0,0,0,.1); }
.sx__box{
  position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(300px + var(--p) * 1250px); height:calc(400px + var(--p) * 400px);
  max-width:95vw; max-height:85vh; margin:0;
  border-radius:16px; box-shadow:0 0 50px rgba(0,0,0,.3);
}
.sx__box video{ display:block; width:100%; height:100%; object-fit:cover; border-radius:14px; pointer-events:none; }
.sx__box i{ position:absolute; inset:0; border-radius:14px; background:rgba(0,0,0,.3); opacity:calc(.5 - var(--p) * .3); transition:opacity .2s; pointer-events:none; }
.sx__cap{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sx__lines{ position:relative; z-index:2; margin-top:1rem; text-align:center; color:#BEDBFF; --slide:150vw; pointer-events:none; }
.sx__lines p{ margin:0; }
.sx__date{ font-size:1.5rem; line-height:2rem; transform:translateX(calc(var(--p) * var(--slide) * -1)); }
.sx__hint{ font-size:1rem; line-height:1.5rem; font-weight:500; transform:translateX(calc(var(--p) * var(--slide))); }
.sx + .rail{ margin-top:var(--s6); }
.js .sx ~ .rail{ transition:opacity .7s; }
.js .sx:not(.is-open) ~ .rail{ opacity:0; }
@media (max-width:767.98px){
  .sx{ --sx-scroll:70svh; }
  .sx__box{ width:calc(300px + var(--p) * 650px); height:calc(400px + var(--p) * 200px); }
  .sx__lines{ --slide:180vw; }
  .sx__wall{ grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(6,1fr); padding:1vh 2vw; }
  .pol{ height:90%; }
}
@media (prefers-reduced-motion: reduce){
  .sx{ height:auto; }
  .sx__pin{ position:static; height:auto; overflow:visible; background:none; }
  .sx__bg,.sx__lines{ display:none; }
  .sx__box{ position:relative; left:auto; top:auto; transform:none; width:min(95vw,1240px); height:auto; aspect-ratio:16/9; max-height:none; }
  .sx__box i{ opacity:.2; }
}

/* ------------------------------------------ the stroke that follows the scroll (Nitin, 17 Sep 2026)
   Reference: 21st.dev @reuno-ui svg-follow-scroll; assets/js/stroke.js draws the line once from the page and
   puts a copy of it in every section (first child) on the home page and the eight service pages; the numbers
   are in that file. His notes the same evening: behind every element, never in front, so z-index:-1 inside
   the section (made a stacking context here): on the section's paper, under every word and picture. (The story scroll built the same evening is out on his word:
   Archive/2026-09-17_story-scroll.) */
.has-stroke{ isolation:isolate; }
.stroke{ position:absolute; top:0; left:0; z-index:-1; max-width:none; pointer-events:none; overflow:hidden; }   /* each copy is its sheet's window on the one line */
.stroke path{ stroke:var(--y); fill:none; }


/* ---------------------------------------- the FAQ on a touch screen or a narrow window (17 Sep 2026, late)
   The hover-stack cannot fan without a pointer, and the component's own column laid 10 to 15 cards of
   62vw each down the page (4,600px of FAQ on a phone, Nitin's "text-heavy"). So whenever site.js puts a
   stack in column mode (touch, or a window too narrow to fan it) the stack steps aside for the kit's own
   accordion, `.faq details`, written right after it with the same questions in the same order; the
   accordion is hidden everywhere else, so nothing is read twice. Markup: the home page's FAQ and
   _site/build-service-pages.py faq(). */
.faq--alt{ display:none; }
.fstack.is-col{ display:none; }
.fstack.is-col + .faq--alt{ display:grid; }

/* ───────────────────────────────────────────────────────────── the name, 20 Sep 2026
   Nandita's note 4: the mark is "The Boston Artistry Sneaker Bar™". The two extra words do not
   fit beside the big roundel on a phone, so there the name breaks onto its own second line and
   the lockup steps down a little. Nothing changes on a laptop. */
.hdr__brand .sb, .hero__brand .sb, .fly .sb{ font-style:normal; }
@media (max-width:640px){
  .hero__brand-in, .fly{ white-space:normal; font-size:calc(var(--w) * .30); line-height:1.06; }
  .hero__brand-in .sb, .fly .sb{ display:block; }
}

/* the Polaroid wall is a photograph now (Nitin, 20 Sep 2026): his own picture of the studio's
   rail of instant prints, in place of the sixteen cloned rail photos. The .pol grid above still
   works and takes over if the picture is ever taken out of index.html. */
.sx__wall--pic{ display:block; padding:0; }
.sx__wallpic{ display:block; width:100%; height:100%; object-fit:cover; }
/* the photograph is far brighter than the paper the .pol grid sat on, so the scrim over it goes
   from 10% to 34%: without it the white card loses its edge and the two lines of type wash out. */
/* the veil stays light so the Polaroids keep their colour; the two lines carry their own contrast. */
.sx__wall--pic + i{ background:rgba(20,20,24,.18); }
.sx__wall--pic ~ * .sx__lines, .sx:has(.sx__wall--pic) .sx__lines{
  color:#fff; text-shadow:0 1px 2px rgba(20,20,24,.55), 0 8px 26px rgba(20,20,24,.45);
}

/* ====================================== THE NEWSLETTER BAND (Nitin, 20 Sep 2026)
   One block, on the home page and on every page of the journal. The button opens
   Nandita's Google form in a new tab; nothing is collected on this site. */
.news{ }
.news__in{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(var(--s5),4vw,var(--s7));
  align-items:center; padding:clamp(1.6rem,4vw,2.8rem); border-radius:clamp(22px,3vw,34px);
  background:var(--card); box-shadow:var(--sh-2);
}
.news__copy .hx{ margin:.3rem 0 .7rem; }
.news__copy .lede{ margin:0; max-width:52ch; }
.news__act{ display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; }
.news__act .btn{ margin-bottom:26px; }        /* the drips need room under the button */
.news__note{ margin:0; font-size:.84rem; color:var(--ink-3); max-width:34ch; }
@media (max-width:860px){
  .news__in{ grid-template-columns:1fr; }
}

/* ======================= NANDITA'S BOARD, 22 SEP 2026, PAGE 1 (home)
   Her headline runs four lines like the old one, but "and creative experiences" is the
   longest line on the site: at the old top size it is 759px in a 704px column, so the
   home headline tops out at 4.15rem (684px). Phones let that line wrap. */
.hero__h1--long{ font-size:clamp(2.6rem,1rem + 5.2vw,4.15rem); }
.h1-heart{ display:inline-block; width:.62em; height:.56em; margin-left:.14em; vertical-align:.02em;
  overflow:visible; transform:rotate(9deg); }
.h1-heart path{ fill:none; stroke:var(--m); stroke-width:4.2; stroke-linejoin:round; stroke-linecap:round; }
.hero__sub--long{ max-width:50ch; }
.sub-mark{ font-weight:600; color:var(--ink); text-decoration:underline; text-decoration-color:var(--y);
  text-decoration-thickness:.32em; text-underline-offset:-.12em; text-decoration-skip-ink:none; }
/* five blanks now: Canvas joined after Hat */
.blank__pick{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.pick[data-move="lean"] .pick__ico{ transform-origin:50% 96%; animation:mvLean 2.4s ease-in-out -.6s infinite alternate; }
@keyframes mvLean{ 0%{ transform:rotate(-4deg); } 100%{ transform:rotate(4deg) translateY(-2px); } }
@media (prefers-reduced-motion:reduce){ .pick[data-move="lean"] .pick__ico{ animation:none; } }
.nandita__more{ display:inline-block; margin-top:var(--s5); font-weight:700; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--m); text-decoration-thickness:3px; text-underline-offset:5px; }
.nandita__more:hover{ text-decoration-color:var(--y); }
@media (max-width:900px){
  .hero__h1--long{ font-size:clamp(2.45rem,10.4vw,3.4rem); }
}

/* ======================= HER LOGO, WHOLE (Nitin, 22 Sep 2026, third time: "the logo is still the old one")
   Her Canva logo is not a round badge: the shoe, its drips and the two ribbons spill past a small yellow disc.
   The 20 Sep roundel grew that disc into a circle and every place cropped it round, which read as the old
   badge. Every place now shows the whole mark, assets/img/logo-tba.webp, cut straight from her SVG. */
.hdr__brand img{ width:44px; height:46px; border-radius:0; object-fit:contain; }
.hero__brand-in img, .fly img{ border-radius:0; box-shadow:none; object-fit:contain;
  filter:drop-shadow(0 12px 14px rgba(20,20,24,.22)); }
/* on the dark footer the black drips would vanish: a white die-cut edge, like a sticker */
.ftr__logo{ border-radius:0; box-shadow:none; object-fit:contain;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
         drop-shadow(0 12px 18px rgba(0,0,0,.45)); }
/* the opening (round 4, Nitin: "the startup animation for the logo has a white background"): the badge's round crop
   and box shadow painted a pale disc behind her mark. The whole mark now, with a shadow that follows its shape. */
.is-intro .intro img{ border-radius:0; box-shadow:none; filter:drop-shadow(0 22px 22px rgba(20,20,24,.25)); }
.is-intro-out .intro img{ box-shadow:none; }

/* ======================= PHONE PASS (Nitin, 22 Sep 2026: "wherever we have two buttons, they will be side by side
   for the phone ... make the site and the spacing look proportionate for the phone, and make it dynamic").
   Every size here slides with the screen (clamp on vw) from a 320px Android to a 760px phablet, so each phone gets the
   same proportions instead of one fixed phone layout. Found in the same pass, all at 375px: the header ran 9px off the
   right edge on all 20 pages (a sideways scroll), the blank labels "Denim jacket" and "Basketball" ran into each other,
   the founder card's tag row wrapped with a "|" leading line two, footer links and booking-list links were under 44px. */
@media (max-width:760px){
  /* 1 · two buttons = one row of two equal halves; one button keeps the whole row (grid-auto-flow:column) */
  .hero__cta{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
              column-gap:clamp(.5rem,2.6vw,.9rem); }
  .hero__cta > .btn{ min-height:clamp(54px,15vw,60px); padding:.7rem clamp(.55rem,3vw,1.3rem);
                     font-size:clamp(.86rem,.62rem + 1.1vw,1.03rem); line-height:1.15; text-align:center; text-wrap:balance; }

  /* the footer's two big pills (book + call) on every page */
  .ftr__row:not(.ftr__row--links){ flex-wrap:nowrap; gap:clamp(.5rem,2.6vw,.9rem); }
  .ftr__row:not(.ftr__row--links) > .pill--lg{ flex:1 1 0; min-width:0; min-height:clamp(56px,15.5vw,66px);
    padding:.75rem clamp(.55rem,3vw,1.3rem); gap:.45rem; font-size:clamp(.8rem,.6rem + 1vw,.95rem); line-height:1.15;
    text-align:center; text-wrap:balance; }
  .ftr__row:not(.ftr__row--links) > .pill--lg svg{ flex:0 0 auto; width:1.15rem; height:1.15rem; }

  /* the service pages' "see also" rows: two to a row, a third takes the row under them. :root lifts these over
     service.css, which loads after this sheet and sets .also to a wrapping flex row. */
  :root .also{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.5rem,2.6vw,.75rem); }
  :root .also > .btn{ min-height:52px; padding:.6rem clamp(.5rem,2.6vw,1rem); font-size:clamp(.8rem,.64rem + .8vw,.92rem);
                line-height:1.2; text-align:center; text-wrap:balance; }
  :root .also > .btn:last-child:nth-child(odd){ grid-column:1 / -1; }
  :root .also > .btn:only-child{ justify-self:start; }

  /* 2 · spacing that follows the screen: 56px above and below a section on a 375 phone, 72px by 560px. Set as
     --sec-pad (read by .sec at the top of this sheet), so a section that sets its own padding keeps it. */
  :root{ --sec-pad:clamp(3.5rem,10vw + 1rem,4.5rem); }

  /* 3 · thumb-sized links (44px, Apple's floor) */
  .ftr__row--links .pill--sm{ min-height:44px; }
  .bk-row__go{ display:inline-flex; align-items:center; min-height:44px; }

  /* 4 · the blank labels wrap inside their own column instead of running into the next one */
  .pick{ font-size:clamp(.64rem,.5rem + .75vw,.74rem); }
  .pick span{ white-space:normal; text-align:center; line-height:1.12; padding:.14rem .3rem;
              width:min-content; max-width:none; }   /* each label at its narrowest: "Denim / jacket"; on a 320
              screen "Basketball" spills 4px into the empty gap beside it instead of into its neighbour */

  /* 5 · the founder tags: every tag carries its "|" in front, and the one that starts a line is clipped off,
     so a wrapped row never opens on a bare bar */
  :root .tm-tags{ margin-left:-1.9em; clip-path:inset(-6px -6px -6px 1.9em); }
  :root .tm-tags li::before{ content:"|"; display:inline-block; width:1.9em; margin:0; text-align:center; letter-spacing:0; }
}
/* the header name breaks after "Artistry" where the flying logo does (640px), so the menu button stays on screen */
@media (max-width:640px){
  .hdr__in{ gap:.75rem; }
  .hdr__act{ margin-left:auto; }              /* the nav that pushed it right is hidden here */
  .hdr__brand{ flex:0 1 auto; min-width:0; gap:.55rem; font-size:clamp(.8rem,3.52vw,.95rem); line-height:1.08; }
  .hdr__brand .sb{ display:block; }
}

/* ======================= ROUND 6 (Nandita's board, 22 Sep 2026): the collage footer, the newsletter box, the FAQ page
   Her footer is a paper collage: every word a cut-out, her thirteen links in her order, the address, the legal line,
   "Follow along", ART CHANGES EVERYTHING. The 12 Sep Motion Footer stays underneath (the clip reveal, the scrubbed
   wordmark, the magnet pills); only the marquee band is gone. A .scrap is one cut-out: a flat brand colour, a hard
   2px paper edge, a small tilt (--tilt), one of three type cuts (caps, wide, ital) so no two neighbours match. */
.scrap{ display:inline-block; padding:.14em .46em; border-radius:2px; color:var(--ink); background:var(--sc,var(--paper));
        line-height:1.12; transform:rotate(var(--tilt,0deg));
        box-shadow:0 2px 0 rgba(0,0,0,.28), 0 10px 22px -10px rgba(0,0,0,.65); }
.scrap--paper{ --sc:var(--paper); } .scrap--butter{ --sc:#FCF1C6; } .scrap--yellow{ --sc:#FDCC19; } .scrap--coral{ --sc:#FD5658; }
.scrap--pink{ --sc:#FCD6D7; } .scrap--peri{ --sc:#ABBCDA; } .scrap--aqua{ --sc:#AAD9E5; } .scrap--salmon{ --sc:#F18275; }
.scrap--caps{ font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; }
.scrap--wide{ font-family:var(--body); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.8em; }
.scrap--ital{ font-family:var(--display); font-style:italic; font-weight:500; letter-spacing:-.01em; }

.ftr--collage .ftr__mid{ margin-top:clamp(2.25rem,6vh,3.5rem); }
.ftr--collage .ftr__logo{ position:static; width:clamp(72px,8vw,100px); height:auto; margin:0 0 clamp(.75rem,2vh,1.25rem);
                          transform:rotate(-8deg); }
.ftr__h2--collage{ display:flex; flex-wrap:wrap; justify-content:center; gap:.22em .26em; margin:0 0 clamp(1.75rem,4.5vh,2.5rem);
  font-size:clamp(1.65rem,1rem + 3.6vw,3.1rem); letter-spacing:-.03em; line-height:1;
  background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--paper);
  -webkit-text-fill-color:currentColor; filter:none; }
.ftr__h2--collage .scrap{ color:var(--ink); -webkit-text-fill-color:var(--ink); }
.ftr__h2--collage .scrap:nth-child(1){ --tilt:-3deg; }  .ftr__h2--collage .scrap:nth-child(2){ --tilt:2deg; }
.ftr__h2--collage .scrap:nth-child(3){ --tilt:-1.5deg; } .ftr__h2--collage .scrap:nth-child(4){ --tilt:2.5deg; }
.ftr__row--scraps{ gap:.6rem .55rem; max-width:62rem; }
.pill.scrap{ border-radius:2px; border:0; backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--ink);
  background:var(--sc,var(--paper)); padding:.5rem .95rem; font-size:.84rem; line-height:1.15; gap:.4rem;
  box-shadow:0 2px 0 rgba(0,0,0,.28), 0 10px 20px -10px rgba(0,0,0,.7);
  transform:translate3d(var(--mx),var(--my),0) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--tilt,0deg)) scale(var(--ms)); }
.pill.scrap:hover{ background:#fff; color:var(--ink); box-shadow:0 2px 0 rgba(0,0,0,.28), 0 18px 30px -10px rgba(0,0,0,.8); }
.pill.scrap:focus-visible{ outline:3px solid var(--y); outline-offset:3px; }
.ftr__row--scraps .scrap:nth-child(7n+1){ --sc:#FCF1C6; } .ftr__row--scraps .scrap:nth-child(7n+2){ --sc:#FCD6D7; }
.ftr__row--scraps .scrap:nth-child(7n+3){ --sc:#AAD9E5; } .ftr__row--scraps .scrap:nth-child(7n+4){ --sc:#FDCC19; }
.ftr__row--scraps .scrap:nth-child(7n+5){ --sc:var(--paper); } .ftr__row--scraps .scrap:nth-child(7n+6){ --sc:#ABBCDA; }
.ftr__row--scraps .scrap:nth-child(7n+7){ --sc:#F18275; }
.ftr__row--scraps .scrap:nth-child(4n+1){ --tilt:-2deg; } .ftr__row--scraps .scrap:nth-child(4n+2){ --tilt:1.5deg; }
.ftr__row--scraps .scrap:nth-child(4n+3){ --tilt:-1deg; } .ftr__row--scraps .scrap:nth-child(4n+4){ --tilt:2.4deg; }
.ftr__row--scraps .scrap:nth-child(3n+1){ font-family:var(--display); font-weight:800; text-transform:uppercase; }
.ftr__row--scraps .scrap:nth-child(3n+2){ font-family:var(--body); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; }
.ftr__row--scraps .scrap:nth-child(3n){ font-family:var(--display); font-style:italic; font-weight:600; font-size:.92rem; }
.ftr__addr{ margin:.35rem 0 0; font-size:.74rem; --tilt:-1.2deg; }
.ftr--collage .ftr__base{ flex-direction:column; align-items:center; gap:.9rem; padding:.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); }
.ftr--collage .ftr__legal{ order:0; text-align:center; font-size:.68rem; }
.ftr__follow{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; }
.ftr__follow-l{ font-size:1.05rem; margin-right:.35rem; --tilt:-2deg; }
.ftr__last{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.9rem 1.5rem; }
.ftr__shout{ margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.25em .3em; font-size:clamp(.92rem,.7rem + .9vw,1.2rem); }
.ftr__shout .scrap:nth-child(1){ --tilt:-2.5deg; } .ftr__shout .scrap:nth-child(2){ --tilt:1.5deg; } .ftr__shout .scrap:nth-child(3){ --tilt:-1deg; }
.soc--pin:hover{ border-color:#E60023; background:#E60023; box-shadow:0 20px 40px -10px rgba(230,0,35,.55); }
.soc--yt:hover{ border-color:#FF0000; background:#FF0000; box-shadow:0 20px 40px -10px rgba(255,0,0,.5); }
@media (max-width:760px){
  .ftr__row--scraps{ gap:.5rem .45rem; }
  .pill.scrap{ padding:.45rem .8rem; }
  .ftr--collage .ftr__mid{ margin-top:2.25rem; }
}
@media (prefers-reduced-motion:reduce){ .scrap, .pill.scrap{ transform:none; } }

/* the newsletter box: one email and a wet-paint Sign up, posted to lead.php (site.js, form[data-lead]) */
.news__form{ display:grid; gap:.6rem; align-content:start; }
.news__row{ display:flex; flex-wrap:wrap; gap:.65rem; align-items:flex-start; }
.news__row input{ flex:1 1 220px; min-height:60px; padding:.8rem 1.1rem; font:inherit; font-size:1rem;
                  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r-sm);
                  transition:border-color var(--fast) linear, background var(--fast) linear; }
.news__row input:focus{ outline:none; border-color:var(--ink); background:var(--card); }
.news__row .btn{ margin-bottom:26px; }         /* the drips need room under the button */
.news__form.is-bad input{ border-color:var(--m-txt); }
.news__form .err{ margin:0; }
.news__form .form__ok{ margin-top:.2rem; }
@media (max-width:640px){ .news__row .btn{ width:100%; } }

/* the home page's one line to the FAQ page, and the FAQ page's groups (her reference: littleartistparty.com/faq) */
.faqlink__go{ margin:0; display:flex; justify-content:center; margin-bottom:26px; }
.faqg{ margin-top:clamp(var(--s6),5vw,var(--s8)); }
.faqg:first-of-type{ margin-top:0; }
.faqg__h{ display:flex; align-items:center; gap:.7rem; margin:0 0 var(--s4); font-family:var(--display); font-weight:800;
          letter-spacing:-.03em; line-height:1.1; font-size:clamp(1.35rem,1rem + 1.2vw,1.9rem); }
.faqg__h .scrap{ font-size:.6em; font-family:var(--body); font-weight:700; letter-spacing:.08em; --tilt:-3deg; }
.faqg__more{ margin:var(--s4) 0 0; font-weight:600; font-size:.95rem; }
.faqg__more a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--y); text-decoration-thickness:3px; text-underline-offset:5px; }
.faqg__more a:hover{ text-decoration-color:var(--m); }
.faq-still{ margin-top:clamp(var(--s7),6vw,var(--s9)); padding:clamp(1.5rem,3vw,2.5rem); border-radius:var(--r-lg);
            background:var(--card); box-shadow:var(--sh-2); display:grid; gap:.6rem; }
.faq-still h2{ margin:0; font-size:clamp(1.4rem,1rem + 1.3vw,2rem); }
.faq-still p{ margin:0; color:var(--ink-2); }
.faq-still .row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.5rem; margin-bottom:26px; background:none; box-shadow:none; border:0; border-radius:0; padding:0; }
@media (max-width:760px){ .faq-still .row{ display:grid; grid-template-columns:minmax(0,1fr); } .faq-still .row .btn{ text-align:center; overflow-wrap:anywhere; min-width:0; padding-inline:1.1rem; } }

/* /schedule/: the black card is now the door to /custom-projects/ (her arrow from "Planning a party?", board page 3) */
a.bk-ink{ display:flex; flex-direction:column; justify-content:space-between; gap:.9rem; text-decoration:none; color:#fff; }
a.bk-ink:hover .bk-out--ink{ background:#fff; color:var(--ink); }
.bk-out--ink{ border-color:#fff; color:#fff; }
a.bk-ink:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
/* the collage must fit the fixed 100vh box (it measured 965px at 1440x900): tighter rungs, and on a short
   screen the footer simply grows, the way it already does on phones */
.ftr--collage .ftr__mid{ margin-top:clamp(1.25rem,3.5vh,2.25rem); }
.ftr--collage .ftr__logo{ width:clamp(60px,6.5vw,84px); margin-bottom:clamp(.4rem,1.2vh,.75rem); }
.ftr__h2--collage{ margin-bottom:clamp(1.1rem,3vh,1.75rem); font-size:clamp(1.55rem,1rem + 3.2vw,2.8rem); }
.ftr--collage .ftr__acts{ gap:clamp(.9rem,2.2vh,1.4rem); }
.ftr--collage .ftr__row--scraps{ gap:.5rem .45rem; }
.ftr--collage .ftr__base{ gap:.65rem; padding-top:.5rem; padding-bottom:calc(1.1rem + env(safe-area-inset-bottom)); }
@media (max-height:820px) and (min-width:761px){
  .mftr{ height:auto; margin-top:0; clip-path:none; }
  .ftr.ftr--collage{ position:relative; height:auto; min-height:100vh; }
  .ftr--collage .ftr__word, .ftr--collage .ftr__h2, .ftr--collage .ftr__acts{ --p:1; transform:none; opacity:1; }
}

/* ======================= ROUND 6B (23 Sep 2026, Nitin: "build an exact 1:1 replica of what she has given"): her design
   Nandita's pictures (_site/copy/canva-round6/) are the specification. Every headline is now a soft serif (Fraunces, the
   free twin of the Recoleta she asked for); the page wears her paper-and-tape kit: gingham, washi tape, paper notes in a
   marker hand, polaroids, flat pastel bands, plain pill buttons. The 22 Sep dark collage footer is gone. */
:root{ --display:"Young Serif", Georgia, "Times New Roman", serif; --hand:"Caveat", "Segoe Script", cursive; }
.hx, .hero__h1{ letter-spacing:-.02em; }
.hero__h1{ font-weight:600; }
.hx{ font-weight:600; }
.pillbtn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:52px; padding:.85rem 1.6rem;
  border-radius:999px; font-family:var(--body); font-weight:700; font-size:.98rem; line-height:1.1; text-decoration:none;
  color:var(--ink); background:var(--card); border:0; cursor:pointer; box-shadow:0 8px 20px -12px rgba(20,17,10,.35);
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s linear, background .18s linear; }
.pillbtn:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(20,17,10,.45); }
.pillbtn--ink{ background:#141418; color:#fff; }
.pillbtn--ink:hover{ background:#2C2C36; }
.pillbtn--pink{ background:#FDCEE1; color:var(--ink); }
.pillbtn--pink:hover{ background:#FBB9D3; }
.pillbtn--white{ background:#fff; box-shadow:0 2px 0 rgba(0,0,0,.08), 0 8px 18px -12px rgba(20,17,10,.4); }
.pillbtn--caps{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.pillbtn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.dot-eyebrow{ display:flex; align-items:center; gap:.5rem; margin:0 0 .6rem; font-family:var(--body); font-size:.7rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); }
.dot-eyebrow::before{ content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--dot,var(--m)); }
.hand{ font-family:var(--hand); font-weight:700; }
.hl{ background:linear-gradient(transparent 18%, var(--hlc,#FDE382) 18%, var(--hlc,#FDE382) 86%, transparent 86%); padding:0 .12em; }
.hl--pink{ --hlc:#F7B8D9; }
.hl--yellow{ --hlc:#FDE382; }
.marker{ font-family:var(--hand); font-weight:700; color:var(--m); }
.gingham--pink{ background-color:#FCE4EC; background-image:linear-gradient(90deg, rgba(247,178,204,.55) 50%, transparent 50%),
  linear-gradient(rgba(247,178,204,.55) 50%, transparent 50%); background-size:34px 34px; }
.gingham--blue{ background-color:#EAF4FD; background-image:linear-gradient(90deg, rgba(171,216,246,.6) 50%, transparent 50%),
  linear-gradient(rgba(171,216,246,.6) 50%, transparent 50%); background-size:26px 26px; }
.tape{ position:absolute; display:block; height:26px; width:110px; opacity:.95; pointer-events:none; border-radius:2px;
  box-shadow:0 1px 2px rgba(0,0,0,.08); }
.tape--pink{ background-color:#FEBCD3; background-image:linear-gradient(90deg, rgba(255,255,255,.55) 50%, transparent 50%),
  linear-gradient(rgba(255,255,255,.55) 50%, transparent 50%); background-size:12px 12px; }
.tape--blue{ background-color:#ABD8F6; background-image:linear-gradient(90deg, rgba(255,255,255,.55) 50%, transparent 50%),
  linear-gradient(rgba(255,255,255,.55) 50%, transparent 50%); background-size:12px 12px; }
.tape--yellow{ background-color:#FDE382; background-image:linear-gradient(90deg, rgba(255,255,255,.5) 50%, transparent 50%),
  linear-gradient(rgba(255,255,255,.5) 50%, transparent 50%); background-size:12px 12px; }
.tape--check{ background-color:#141418; background-image:linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
  linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%); background-size:14px 14px; background-position:0 0, 7px 7px; }
.pnote{ position:absolute; display:block; padding:.55rem .8rem; background:#F7F1E6; color:var(--ink); font-family:var(--hand);
  font-weight:700; font-size:1.05rem; line-height:1.05; text-transform:uppercase; letter-spacing:.01em; text-align:center;
  box-shadow:0 2px 0 rgba(0,0,0,.08), 0 10px 20px -12px rgba(20,17,10,.45); transform:rotate(var(--tilt,-3deg)); pointer-events:none;
  border-radius:2px; }
.sticker{ position:absolute; display:block; width:56px; height:56px; pointer-events:none; filter:drop-shadow(0 4px 6px rgba(0,0,0,.14)); }
.polaroid{ position:relative; display:block; margin:0; padding:10px 10px 34px; background:#fff; border-radius:3px;
  box-shadow:0 2px 0 rgba(0,0,0,.05), 0 18px 30px -18px rgba(20,17,10,.45); transform:rotate(var(--tilt,0deg)); }
.polaroid img{ display:block; width:100%; height:auto; aspect-ratio:var(--ar,4/3); object-fit:cover; }
.polaroid .tape{ top:-12px; left:50%; transform:translateX(-50%) rotate(var(--tt,-2deg)); }
.polaroid__cap{ position:absolute; left:0; right:0; bottom:8px; margin:0; text-align:center; font-family:var(--hand); font-weight:700;
  font-size:1.05rem; color:var(--ink-2); }

/* --- HOW IT WORKS: her four sticker cards on a blue gingham band ------------------------------------------------ */
.how2{ padding-block:clamp(2.5rem,5vw,4rem); }
.how2__band{ position:relative; background:#FDF9F7; padding:clamp(2rem,4vw,3rem) 0 clamp(2.2rem,4vw,3.2rem); }
.how2__band::before, .how2__band::after{ content:""; position:absolute; left:0; right:0; height:16px; background-color:#EAF4FD;
  background-image:linear-gradient(90deg, rgba(171,216,246,.6) 50%, transparent 50%), linear-gradient(rgba(171,216,246,.6) 50%, transparent 50%);
  background-size:16px 16px; }
.how2__band::before{ top:0; } .how2__band::after{ bottom:0; }
.how2__eyebrow{ margin:0 0 .5rem; text-align:center; font-family:var(--body); font-size:.68rem; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-2); }
.how2__h{ margin:0; text-align:center; font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.08;
  font-size:clamp(1.7rem,1rem + 2.6vw,2.9rem); }
.how2__h .c-pink{ color:#FE56A1; } .how2__h .c-purple{ color:#8B6CF6; } .how2__h .c-green{ color:#28B38A; }
.how2__sub{ margin:.35rem 0 0; text-align:center; font-size:clamp(1rem,.9rem + .5vw,1.28rem); color:var(--ink-2); }
.how2__sub sup{ font-size:.55em; }
.how2__cards{ list-style:none; margin:clamp(1.4rem,3vw,2.2rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.7rem,1.4vw,1.1rem); }
.how2__card{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) calc(100% - var(--il)); gap:.4rem; padding:1rem 0 1rem 1.1rem; aspect-ratio:1.28;  /* her card is 432 x 334 on the board, so the sticker's place below is hers too */
  background:var(--bg); border-radius:22px; box-shadow:0 10px 26px -18px rgba(20,17,10,.35); }

.how2__num{ display:inline-flex; align-items:center; justify-content:center; min-width:2.2rem; height:1.6rem; padding:0 .55rem;
  border-radius:999px; background:var(--num); color:#fff; font-family:var(--body); font-weight:800; font-size:.86rem; }
.how2__card h3{ margin:.45rem 0 .35rem; font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,.9rem + .5vw,1.3rem); line-height:1.1; letter-spacing:-.01em; }
.how2__card p{ margin:0; font-size:.82rem; line-height:1.4; color:var(--ink-2); }
/* the sticker is matted out of her board with a transparent background (_site/cut-assets.py), and each one
   is put back where she drew it: --il/--it/--iw are its left, top and width as a share of her card (23 Sep 2026) */
/* overflow stays visible so a long line can make the card taller than her 1.15 (a grid item only
   grows past its ratio when it does not clip); nothing pokes out but a hair of the sneaker */
.how2__card{ overflow:visible; }
.how2__card img{ position:absolute; left:var(--il); top:var(--it); width:var(--iw); height:auto; }
@media (max-width:1000px){ .how2__cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* one card a row on a phone: her 1.15 would leave half the card empty, so the card lies flatter
   and the sticker is sized by its height and centred on the right (23 Sep 2026) */
@media (max-width:520px){ .how2__cards{ grid-template-columns:1fr; }
  .how2__card{ aspect-ratio:1.6; grid-template-columns:minmax(0,1fr) 40%; }
  .how2__card img{ left:auto; right:4%; top:50%; width:auto; height:78%; transform:translateY(-50%); } }

/* --- EXPERIENCES: her carousel, one big card with four coloured cards stacked behind it ------------------------ */
.xp{ overflow:hidden; }
.xp__h{ margin:0 0 .6rem; font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.02; font-size:clamp(2.2rem,1rem + 4vw,4rem); }
.xp__h .marker{ position:relative; display:inline-block; font-size:1.06em; }
.xp__h .marker svg{ position:absolute; right:-1.1em; top:.05em; width:.9em; height:.9em; }
.xp__sub{ margin:0; max-width:46ch; font-size:clamp(1rem,.9rem + .4vw,1.2rem); color:var(--ink-2); line-height:1.5; }
.xp__stage{ position:relative; margin-top:clamp(1.5rem,3vw,2.5rem); padding:0 clamp(2.8rem,5vw,4.5rem) 3.2rem; }
.xp__deck{ position:relative; max-width:1000px; margin:0 auto; }
.xp__back{ position:absolute; left:50%; bottom:0; width:calc(100% - var(--in)); height:100%; transform:translateX(-50%) translateY(var(--dy));
  border-radius:26px; background:var(--bg); z-index:0; }
.xp__slides{ list-style:none; margin:0; padding:0; position:relative; z-index:1; }
.xp__slide{ display:none; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(1rem,2.5vw,2.2rem); align-items:center;
  padding:clamp(1.2rem,2.6vw,2.2rem); background:var(--bg,#FDCEE1); border-radius:26px; box-shadow:0 26px 50px -30px rgba(20,17,10,.45); }
.xp__slide.is-on{ display:grid; animation:xpIn .45s cubic-bezier(.16,1,.3,1); }
@keyframes xpIn{ from{ opacity:0; transform:translateX(var(--dir,24px)); } to{ opacity:1; transform:none; } }
/* the stack behind shuffles when the card turns: each coloured card lifts a little and settles, back to front (23 Sep 2026) */
.xp__deck.is-turning .xp__back{ animation:xpShuffle .55s cubic-bezier(.16,1,.3,1) both; }
.xp__deck.is-turning .xp__back:nth-child(1){ animation-delay:.09s; } .xp__deck.is-turning .xp__back:nth-child(2){ animation-delay:.06s; }
.xp__deck.is-turning .xp__back:nth-child(3){ animation-delay:.03s; }
@keyframes xpShuffle{ 0%{ transform:translateX(-50%) translateY(var(--dy)); } 40%{ transform:translateX(-50%) translateY(calc(var(--dy) + 14px)) scale(1.01); } 100%{ transform:translateX(-50%) translateY(var(--dy)); } }
@media (prefers-reduced-motion:reduce){ .xp__deck.is-turning .xp__back{ animation:none; } .xp__slide.is-on{ animation:none; } }
.xp__num{ display:flex; align-items:center; gap:.6rem; margin:0 0 clamp(1rem,3vw,2.2rem); font-family:"Bricolage Grotesque",var(--body); font-weight:700;
  font-size:clamp(1.8rem,1rem + 2vw,2.6rem); color:var(--k,#E8336D); }
.xp__num::after{ content:""; width:3rem; height:2px; background:currentColor; opacity:.7; }
.xp__eyebrow{ margin:0 0 .5rem; font-family:var(--body); font-size:.7rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--kd,#2E2A6B); }
/* her card (board page 1): the number and the title are the bold grotesque, not the serif (Nitin, 23 Sep) */
.xp__t{ margin:0 0 .6rem; font-family:"Bricolage Grotesque",var(--body); font-weight:800; letter-spacing:-.02em; line-height:1.05; font-size:clamp(1.6rem,1rem + 2vw,2.5rem); color:var(--kd,#2E2A6B); }
.xp__d{ margin:0 0 1.2rem; font-size:.9rem; line-height:1.5; color:var(--kd,#2E2A6B); max-width:34ch; }
.xp__pic{ margin:0; border-radius:16px; overflow:hidden; aspect-ratio:1.1; box-shadow:0 12px 30px -20px rgba(20,17,10,.5); }
.xp__pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.xp__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:52px; height:52px; border-radius:50%; border:0;
  background:#fff; color:var(--ink); box-shadow:0 10px 24px -10px rgba(20,17,10,.4); cursor:pointer; display:grid; place-items:center; }
.xp__arrow svg{ width:20px; height:20px; }
.xp__arrow--l{ left:0; } .xp__arrow--r{ right:0; }
.xp__arrow:hover{ background:var(--ink); color:#fff; }
.xp__arrow:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.xp__dots{ display:flex; justify-content:center; gap:.55rem; margin-top:-1.6rem; }
.xp__dots button{ width:10px; height:10px; padding:0; border-radius:50%; border:0; background:#D9D2CA; cursor:pointer; }
.xp__dots button[aria-selected="true"]{ background:var(--m); }
.xp__dots button:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }
.xp__blob{ position:absolute; left:clamp(.5rem,4vw,3rem); bottom:2rem; width:clamp(90px,12vw,150px); aspect-ratio:1; border-radius:50%; background:#FB508A; z-index:0; }
.xp__squiggle{ position:absolute; left:0; bottom:-1rem; width:clamp(70px,9vw,120px); height:auto; z-index:0; }
.xp__cloud{ position:absolute; right:-4rem; top:-3rem; width:clamp(160px,26vw,360px); height:auto; z-index:0; opacity:.9; }
@media (max-width:760px){
  .xp__stage{ padding:0 0 3.2rem; }
  .xp__slide{ grid-template-columns:1fr; }
  .xp__arrow{ top:auto; bottom:0; transform:none; width:46px; height:46px; }
  .xp__arrow--l{ left:0; } .xp__arrow--r{ right:0; }
  .xp__dots{ margin-top:-2.6rem; }
  .xp__blob, .xp__cloud{ display:none; }
}

/* --- her two bands: 05 Family Discovery Workshop (lilac) and 07 Pop-ups + Partnerships (aqua) --------------------- */
.band{ padding-block:0; }
.band__in{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:stretch;
  border-radius:clamp(22px,3vw,34px); overflow:hidden; background:var(--bg); }
.band__copy{ padding:clamp(1.6rem,4vw,3.2rem); display:flex; flex-direction:column; justify-content:center; color:var(--kd,#231B3F); }
.band__num{ display:inline-block; margin:0 0 .35rem; font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,1rem + 1.4vw,2.2rem); line-height:1;
  padding-bottom:.2rem; border-bottom:2px solid currentColor; }
.band__eyebrow{ margin:.3rem 0 .9rem; font-family:var(--body); font-size:.7rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; }
.band__h{ margin:0 0 .5rem; font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.02; font-size:clamp(2rem,1rem + 3.2vw,3.6rem); }
.band__lead{ margin:0 0 .6rem; font-weight:700; font-size:clamp(1.05rem,.9rem + .6vw,1.35rem); }
.band__p{ margin:0; font-size:clamp(.95rem,.9rem + .3vw,1.1rem); line-height:1.5; max-width:46ch; }
.band__price{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem; align-items:center; margin:1.2rem 0 0; }
.band__tag{ display:inline-grid; place-items:center; padding:.6rem 1.1rem; background:#F9C1D8; border-radius:4px; transform:rotate(-2deg); text-align:center; }
.band__tag b{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,1rem + 1.6vw,2.3rem); line-height:1; }
.band__tag span{ font-family:var(--body); font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin-top:.2rem; }
.band__clock{ display:flex; align-items:center; gap:.7rem; margin:1rem 0 0; padding:.7rem 1rem; border-radius:14px; background:rgba(255,255,255,.35); font-size:.92rem; }
.band__clock svg{ width:1.6rem; height:1.6rem; flex:0 0 auto; }
.band__clock b{ display:block; }
.band__tags{ display:flex; flex-wrap:wrap; gap:.4rem 0; margin:1rem 0 0; padding:0; list-style:none; font-family:var(--body); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.band__tags li{ padding:.15rem .9rem .15rem 0; margin-right:.9rem; border-right:2px solid #F7B8D9; }
.band__tags li:nth-child(3n){ border-right:0; }
.band__go{ margin-top:1.4rem; align-self:flex-start; }
.band__pic{ margin:0; min-height:320px; }
.band__pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.band--lilac .band__in{ --bg:#E2DFFD; --kd:#231B3F; }
.band--aqua .band__in{ --bg:#D1F2F2; --kd:#1B2A33; }
.band--aqua .band__pic img{ border-radius:0 clamp(22px,3vw,34px) clamp(22px,3vw,34px) 0; }
@media (max-width:860px){ .band__in{ grid-template-columns:1fr; } .band__pic{ order:-1; min-height:0; aspect-ratio:4/3; } .band--aqua .band__pic img{ border-radius:0; } }

/* --- the newsletter: "Join Our Creative List", a cream card with washi tape and stickers ----------------------- */
.news2 .wrap{ position:relative; }
.news2__card{ position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3rem); align-items:center;
  padding:clamp(2rem,5vw,3.6rem) clamp(1.4rem,5vw,4rem); background:#FBF6F1; border-radius:22px; box-shadow:0 20px 50px -30px rgba(20,17,10,.4); }
.news2__brand{ margin:0 0 .4rem; font-family:var(--body); font-size:.66rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; }
.news2__h{ margin:0 0 .8rem; font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1; font-size:clamp(2.4rem,1rem + 4.2vw,4.4rem); }
.news2__h .hand{ display:inline-block; font-size:1.02em; padding:0 .15em; background:linear-gradient(transparent 22%, #FBC3D6 22%, #FBC3D6 82%, transparent 82%); }
.news2__h svg{ width:.7em; height:.7em; vertical-align:-.05em; margin-left:.15em; }
.news2__p{ margin:0; font-size:clamp(.95rem,.9rem + .3vw,1.08rem); line-height:1.5; color:var(--ink-2); max-width:44ch; }
.news2__tags{ display:flex; flex-wrap:wrap; gap:.4rem .8rem; margin:1rem 0 0; font-family:var(--body); font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.news2__tags span{ padding:.2rem .5rem; background:#FBE3EB; }
.news2__form{ position:relative; }
.news2__form .news__row{ flex-direction:column; align-items:stretch; }
.news2__form .news__row input{ min-height:56px; border-radius:999px; text-align:center; background:#fff; border:2px solid #F3D9E2; }
.news2__form .pillbtn{ min-height:56px; margin:0; box-shadow:0 4px 0 #E58AAE; border:2px solid #1B1B1B; }
.news2__form .news__note{ text-align:center; max-width:none; }
.news2__form .hand{ display:block; text-align:center; font-size:1.2rem; line-height:1; margin:0 0 .5rem; transform:rotate(-4deg); }
.news2__form .form__ok{ text-align:center; }
.news2__hearts{ display:flex; justify-content:center; gap:.5rem; margin:.6rem 0 0; }
.news2__hearts svg{ width:26px; height:26px; }
.news2__card > .tape--blue{ top:-10px; left:5%; transform:rotate(-8deg); }
.news2__card > .tape--pink.t2{ top:-8px; right:6%; transform:rotate(6deg); }
.news2__card > .tape--pink.t3{ bottom:-8px; left:3%; transform:rotate(-5deg); }
.news2__card > .tape--blue.t4{ bottom:8%; right:-10px; transform:rotate(-90deg); }
.news2__smile{ left:-18px; top:44%; }
.news2__star{ right:-14px; top:-16px; width:68px; height:68px; }
.news2__note{ right:2%; bottom:-4%; --tilt:-6deg; }
@media (max-width:860px){ .news2__card{ grid-template-columns:1fr; } .news2__note, .news2__smile, .news2__card > .tape--blue.t4{ display:none; } }

/* --- the footer, hers: pink gingham with a torn edge, the ransom-note headline, white pills, notes and tape, then cream ---- */
.ftr2{ position:relative; color:var(--ink); background:#F6F1EA; }
.ftr2__top{ position:relative; padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(3.4rem,7vw,5.2rem); overflow:hidden; }
.ftr2__in{ position:relative; width:min(100% - 2.5rem,1200px); margin-inline:auto; text-align:center; }
.ftr2__stick{ position:absolute; left:0; top:-.5rem; width:clamp(92px,11vw,150px); height:auto; transform:rotate(-8deg); z-index:2;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 10px 16px rgba(0,0,0,.2)); }
.ftr2__ransom{ margin:0 auto; width:min(100%,900px); }
.ftr2__ransom img{ display:block; width:100%; height:auto; }
.ftr2__pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem .5rem; margin:clamp(.6rem,2vw,1.4rem) auto 0; max-width:1000px; }
.ftr2__pills .pillbtn{ min-height:44px; padding:.55rem 1.15rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; border:1.5px solid rgba(0,0,0,.08); }
.ftr2__torn{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:38px; display:block; z-index:1; }
/* the notes used to hang off a zero-height box that sat inside the torn edge, so "Art fashion community
   always" was half eaten by the strip (Nitin, 23 Sep 2026). The decor now has a box of its own that stops
   short of the torn edge, and every note is pinned to a corner of it. */
.ftr2__decor{ position:absolute; inset:0 0 -.75rem; pointer-events:none; }
.ftr2__decor > *{ z-index:2; }
.ftr2__note--a{ right:1%; top:2.1rem; --tilt:-5deg; }  /* below the tape, not under it */
.ftr2__note--b{ right:0; bottom:0; --tilt:4deg; }
.ftr2__note--c{ left:0; bottom:0; --tilt:-4deg; }
.ftr2__tape--tl{ left:-2.2rem; top:1.6rem; transform:rotate(-30deg); width:140px; }
.ftr2__tape--tr{ right:-2.6rem; top:.2rem; transform:rotate(28deg); width:140px; }
.ftr2__tape--br{ right:-2.6rem; bottom:5.6rem; transform:rotate(-24deg); width:120px; }  /* clear of the note's words */
.ftr2__doodle{ position:absolute; pointer-events:none; }
.ftr2__doodle svg{ width:100%; height:100%; }
.ftr2__bottom{ position:relative; padding:clamp(1.6rem,4vw,2.8rem) 0 clamp(2rem,4vw,3rem); overflow:hidden; }
.ftr2__cols{ width:min(100% - 2.5rem,1200px); margin-inline:auto; display:grid; grid-template-columns:auto 1fr 1fr 1.2fr; gap:clamp(1rem,3vw,2.5rem);
  align-items:center; font-family:var(--body); font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; line-height:1.9; }
.ftr2__cols > *{ margin:0; padding-right:clamp(1rem,3vw,2.5rem); border-right:1px solid rgba(20,20,24,.18); }
.ftr2__cols > *:last-child{ border-right:0; padding-right:0; }
.ftr2__brand{ font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,1rem + 1vw,1.9rem); line-height:.92; letter-spacing:0; text-transform:uppercase; }
.ftr2__brand svg{ width:.75em; height:.75em; vertical-align:-.05em; margin-left:.1em; }
.ftr2__cols a{ color:inherit; text-decoration:none; }
.ftr2__cols a:hover{ text-decoration:underline; text-underline-offset:3px; }
.ftr2__follow{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.1rem; }
.ftr2__follow .hand{ font-size:1.5rem; line-height:1; letter-spacing:0; text-transform:none; transform:rotate(-8deg); margin-right:.4rem; }
.ftr2__follow span.off{ color:var(--ink-3); }
.ftr2__shout{ position:absolute; right:clamp(.5rem,4vw,3rem); bottom:.6rem; margin:0; padding:.5rem 1.2rem; background:#FABED1; font-family:var(--hand);
  font-weight:700; font-size:1.25rem; text-transform:uppercase; transform:rotate(-3deg); box-shadow:0 1px 2px rgba(0,0,0,.1); }
.ftr2__made{ position:absolute; left:clamp(.5rem,4vw,3rem); bottom:.6rem; margin:0; font-family:var(--body); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.ftr2__made a{ color:var(--ink); text-decoration:none; font-weight:700; }
.ftr2__tape--bl{ left:-2.4rem; bottom:.4rem; transform:rotate(-28deg); width:130px; }
.ftr2__tape--br2{ right:-1.6rem; top:-.6rem; transform:rotate(22deg); width:110px; }
@media (max-width:900px){
  .ftr2__cols{ grid-template-columns:1fr 1fr; }
  .ftr2__cols > *{ border-right:0; padding-right:0; }
  .ftr2__stick{ width:74px; top:0; }
  .ftr2__note--b, .ftr2__note--c, .ftr2__tape--br{ display:none; }
  .ftr2__bottom{ padding-bottom:4.2rem; }
}
@media (max-width:560px){
  .ftr2__cols{ grid-template-columns:1fr; text-align:center; }
  .ftr2__follow{ justify-content:center; }
  .ftr2__note--a{ display:none; }
  .ftr2__shout{ right:50%; transform:translateX(50%) rotate(-3deg); bottom:.9rem; }
  .ftr2__made{ left:50%; transform:translateX(-50%); bottom:3.4rem; }
  .ftr2__bottom{ padding-bottom:5.4rem; }
}
/* the phone dock must not cover the footer's last line */
@media (max-width:760px){ .ftr2{ padding-bottom:86px; } body:has(.ftr2){ padding-bottom:0; } } /* the footer clears the dock itself: the body pad left an 88px off-colour strip under it */
.band{ padding-block:clamp(.9rem,2vw,1.6rem); }
/* the booking page: "Too much Space" under the hero (Nandita, board page 4, 23 Sep 2026) */
.svc .hero--book + .sec{ padding-top:clamp(1.25rem,3vw,2.5rem); }
/* 23 Sep, after the first render against her picture: the pills keep clear of the notes at the sides, the email box is a
   box again (a column flex basis had stretched it), the tape and the credit stop colliding with the corner tape and the chat button */
.ftr2__pills{ max-width:min(76%, 860px); }
.news2__form .news__row input{ flex:0 0 auto; height:56px; }
.ftr2__shout{ right:clamp(5.2rem,9vw,7.5rem); bottom:1rem; }
.ftr2__made{ position:static; display:block; margin-top:.2rem; }
@media (max-width:900px){ .ftr2__pills{ max-width:none; } }
@media (max-width:560px){ .ftr2__shout{ right:50%; transform:translateX(50%) rotate(-3deg); bottom:1rem; } .ftr2__made{ transform:none; } .ftr2__bottom{ padding-bottom:4.6rem; } }

/* ======================= FOOTER REVEAL (23 Sep 2026, Nitin: "add that animation where it is revealing how we had before")
   The 12 Sep curtain, now on her gingham footer. .ftrv wraps .ftr2 on every page; site.js gives the box the footer's height
   and adds .is-fixed only when the footer fits in the viewport and motion is allowed. clip-path makes the box the containing
   block of the fixed footer, so the footer is pinned to the viewport but cropped to the box: the page (#main, 24px rounded
   corners) scrolls away and the footer is revealed underneath. --p (0 to 1, site.js) lifts the content in as it appears.
   Otherwise (phones, short screens, reduced motion) the footer scrolls normally. */
.ftrv{ position:relative; margin-top:-24px; }
.ftrv.is-fixed{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
.ftrv.is-fixed .ftr2{ position:fixed; left:0; bottom:0; width:100%; }
.ftrv.is-fixed .ftr2__in > *, .ftrv.is-fixed .ftr2__cols, .ftrv.is-fixed .ftr2__shout, .ftrv.is-fixed .ftr2__made{
  transform:translateY(calc((1 - var(--p,1)) * 46px)); opacity:calc(.1 + .9 * var(--p,1)); }
.ftrv.is-fixed .ftr2__stick{ transform:rotate(-8deg) translateY(calc((1 - var(--p,1)) * 60px)); }
.ftrv.is-fixed .ftr2__shout{ transform:rotate(-3deg) translateY(calc((1 - var(--p,1)) * 46px)); }
@media print{ .ftrv{ margin-top:0; clip-path:none; height:auto !important; } .ftrv .ftr2{ position:relative !important; } }

/* ======================= ROUND 7 (23 Sep 2026 night, Nandita's board re-laid: 9 pages; list at
   _site/NANDITA-REVIEW-2026-09-23-round7.md, her pictures in _site/copy/canva-round7/) ================================ */

/* --- "not a BIG FAN for & font": Fraunces draws a swash ampersand. One glyph, U+26 only, comes from Source Serif 4
   (OFL, 3 KB, self hosted), so every headline keeps Fraunces for every other letter. --------------------------------- */
@font-face{ font-family:"TBA Amp"; font-style:normal; font-weight:500 900; font-display:swap; unicode-range:U+26;
  src:url("../fonts/amp-source-serif-4.woff2") format("woff2"); }
:root{ --display:"TBA Amp", "Young Serif", Georgia, "Times New Roman", serif; }

/* --- every button drips ("make all the buttons drippy for website"). site.js dripify() adds the drips to any .btn
   or .pillbtn that has none, in the button's own colour (--wpb-paint); the drip parts are the .wpb ones above. ------- */
.drip7{ position:relative; overflow:visible !important; isolation:isolate; }
.btn.drip7::before{ content:none; }
.drip7:hover{ box-shadow:none; }
.drip7 .wpb__drip{ z-index:-1; }
.drip7--light .wpb__col, .drip7--light .wpb__drop{ box-shadow:inset 0 0 0 1.5px rgba(20,20,24,.18); }
.drip7--light .wpb__cap path{ fill:var(--wpb-paint); }
/* 27 Sep 2026 (Nitin: the Subscribe drips "are very bad", fix them like the home page's): dripify() painted the pill's
   pale pink over its black rim and pink ledge, four pale stubs across the ledge, and a pill has no .wpb shoulders. Here
   the paint is the ledge's pink and runs off the ledge's foot, the way the hero's "Book a class or party" drips run off
   its button. Every newsletter box: home, the blog pages, the Family Drop-In List. */
.news__form .pillbtn--pink.drip7{ --wpb-paint:#E58AAE !important; margin-bottom:30px; }   /* 30px: the longest drip (18px) under the 6px rim and ledge */
.news__form .pillbtn--pink.drip7:hover{ box-shadow:0 4px 0 #E58AAE; }
.news__form .pillbtn--pink.drip7 .wpb__drip{ top:calc(100% + 5px); }
.news__form .pillbtn--pink.drip7 .wpb__cap{ position:absolute; top:0; width:6px; height:6px; stroke:none; fill:none; }
.news__form .pillbtn--pink.drip7 .wpb__cap path{ fill:var(--wpb-paint); stroke:none; }
.news__form .pillbtn--pink.drip7 .wpb__col, .news__form .pillbtn--pink.drip7 .wpb__drop{ box-shadow:none; }

/* --- HOW IT WORKS, her new layout ("Change to this layout", home-how-it-works-new-layout.png) -------------------- */
.hw7{ background:#F6F1EA; }
.hw7__top{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:end; gap:clamp(1.5rem,4vw,4rem); }
.hw7__h{ margin:0; font-family:var(--display); font-weight:800; font-size:clamp(2.1rem,1.3rem + 3vw,3.6rem); line-height:1.02;
  letter-spacing:-.025em; color:var(--ink); }
.hw7__sub{ margin:0 0 .5rem; max-width:34ch; color:var(--ink-3); font-size:clamp(1rem,.95rem + .25vw,1.12rem); line-height:1.6; }
.hw7__steps{ list-style:none; margin:clamp(1.8rem,4vw,2.6rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  position:relative; border-top:1.5px solid #CFC8BC; }
.hw7__steps::before, .hw7__steps::after{ content:""; position:absolute; top:-5px; width:8px; height:8px; border-radius:50%; background:var(--ink); }
.hw7__steps::before{ left:-2px; } .hw7__steps::after{ right:-2px; }
.hw7__steps > li{ position:relative; padding:1.35rem clamp(1rem,1.6vw,1.4rem) 5.6rem; border-left:1px solid #E1DBD0; }
.hw7__steps > li:first-child{ border-left:0; padding-left:0; }
.hw7__row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:1.5rem; }
.hw7__n{ display:inline-grid; place-items:center; min-width:2.6rem; height:1.6rem; padding:0 .7rem; border-radius:999px;
  background:var(--k); font:800 .72rem/1 var(--body); letter-spacing:.08em; color:var(--ink); }
.hw7__tag{ font:700 .64rem/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.hw7__steps h3{ margin:0 0 .7rem; font-family:var(--display); font-weight:800; font-size:clamp(1.35rem,1.05rem + .9vw,1.7rem);
  line-height:1.08; letter-spacing:-.02em; color:var(--ink); }
.hw7__steps p{ margin:0; color:var(--ink-3); font-size:.93rem; line-height:1.65; }
.hw7__ico{ position:absolute; right:clamp(.9rem,1.6vw,1.4rem); bottom:1.4rem; width:52px; height:52px; display:grid; place-items:center;
  border-radius:16px; background:var(--k); transform:rotate(var(--r,-6deg)); box-shadow:4px 5px 0 rgba(20,20,24,.08), 0 8px 18px -10px rgba(20,20,24,.35); }
.hw7__ico svg{ width:24px; height:24px; }
@media (max-width:900px){
  .hw7__top{ grid-template-columns:1fr; gap:1rem; }
  .hw7__steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hw7__steps > li:nth-child(3){ border-left:0; padding-left:0; }
  .hw7__steps > li:nth-child(n+3){ border-top:1px solid #E1DBD0; }
}
@media (max-width:560px){
  .hw7__steps{ grid-template-columns:1fr; }
  .hw7__steps > li{ border-left:0; padding:1.2rem 0 1.4rem; padding-right:4.6rem; }
  .hw7__steps > li + li{ border-top:1px solid #E1DBD0; }
  .hw7__row{ margin-bottom:.9rem; justify-content:flex-start; }
  .hw7__ico{ right:0; top:1.1rem; bottom:auto; }
}

/* --- EXPERIENCES, six cards (her home-experiences-6-card-grid.png, in the site's fonts) ---------------------------- */
.xg{ background:#FBF8F3; }
.xg__top{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:end; gap:clamp(1.2rem,4vw,4rem); }
.xg__h{ margin:0; font-family:var(--display); font-weight:800; font-size:clamp(2rem,1.2rem + 3vw,3.5rem); line-height:1.02; letter-spacing:-.025em; }
.xg__sub{ margin:0 0 .4rem; max-width:36ch; color:var(--ink-3); line-height:1.6; }
.xg__swash{ position:relative; white-space:nowrap; }
.xg__swash svg{ position:absolute; left:-2%; bottom:-.55em; width:104%; height:.6em; overflow:visible; }
.xg__grid{ list-style:none; margin:clamp(1.6rem,3.5vw,2.4rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,1.8vw,1.4rem); }
.xg__card{ position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:clamp(1.3rem,2vw,1.7rem) clamp(1.2rem,2vw,1.6rem) 2.4rem;
  background:var(--bg); border-radius:20px; border-top:5px solid var(--top); box-shadow:0 1px 0 rgba(20,20,24,.03), 0 18px 34px -26px rgba(20,20,24,.35); }
.xg__eye{ --dot:var(--m); margin-bottom:.7rem; }
.xg__card h3{ margin:0 0 .75rem; font-family:var(--display); font-weight:800; font-size:clamp(1.35rem,1.05rem + .9vw,1.75rem); line-height:1.08; letter-spacing:-.02em; }
.xg__card p:not(.dot-eyebrow){ margin:0 0 1.4rem; color:var(--ink-2); font-size:.95rem; line-height:1.6; }
.xg__card .pillbtn{ margin-top:auto; min-height:44px; padding:.6rem 1.05rem; border-radius:9px; background:#fff; color:var(--ink);
  font-size:.9rem; box-shadow:inset 0 0 0 1.5px rgba(20,20,24,.28); }
@media (max-width:980px){ .xg__top{ grid-template-columns:1fr; } .xg__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .xg__grid{ grid-template-columns:1fr; } }

/* --- FOUNDER, her "Nandita" banner (home-founder-nandita-banner.png) + the six-stat row kept from the old block ---- */
.fd7{ background:#FBF8F3; }
.fd7__card{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); align-items:center; gap:clamp(1.8rem,4.5vw,4.5rem); }
.fd7__art{ position:relative; aspect-ratio:1.16; min-height:300px; }
.fd7__back{ position:absolute; inset:10% 2% 4% 10%; border-radius:6px; transform:rotate(-1.5deg); }
.fd7__main{ position:absolute; left:22%; top:4%; width:58%; margin:0; padding:9px 9px 30px; background:#fff; transform:rotate(2deg);
  box-shadow:0 18px 34px -18px rgba(20,20,24,.45); }
.fd7__main img, .fd7__mini img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.fd7__main .tape{ top:-12px; left:34%; transform:rotate(-4deg); }
.fd7__mini{ position:absolute; left:4%; bottom:0; width:32%; margin:0; padding:7px 7px 0; background:#fff; transform:rotate(-5deg);
  box-shadow:0 14px 26px -14px rgba(20,20,24,.5); z-index:2; }
.fd7__mini img{ aspect-ratio:1.05; }
.fd7__mini figcaption{ font:700 clamp(.85rem,.7rem + .4vw,1.05rem)/1.1 var(--hand); padding:.45rem .2rem .55rem; color:var(--ink); }
.fd7__note{ position:absolute; margin:0; padding:.7rem .85rem; font:700 clamp(.95rem,.8rem + .5vw,1.25rem)/1.12 var(--hand); color:var(--ink);
  box-shadow:0 10px 20px -12px rgba(20,20,24,.45); z-index:3; }
.fd7__note--pink{ left:0; top:14%; width:34%; background:#F9B9D0; transform:rotate(-6deg); }
.fd7__note--yellow{ right:4%; bottom:9%; width:30%; background:#FDE68A; transform:rotate(-4deg); }
.fd7__heart{ position:absolute; width:28px; height:auto; z-index:3; }
.fd7__heart--a{ right:4%; top:6%; fill:none; stroke:var(--ink); stroke-width:3; }
.fd7__heart--b{ right:0; top:48%; fill:#F9A8C6; stroke:var(--ink); stroke-width:2.5; }
.fd7__star{ position:absolute; right:-2%; bottom:-2%; width:54px; z-index:3; transform:rotate(-10deg); }
.fd7__name{ margin:0; font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,1.8rem + 3vw,4.1rem); line-height:1; letter-spacing:-.03em; }
.fd7__brush{ padding:0 .2em; background:linear-gradient(transparent 14%, #FFD75E 14%, #FFD75E 88%, transparent 88%); border-radius:.3em .15em .35em .2em; }
.fd7__ribbon{ display:inline-block; margin:.35rem 0 0 .5rem; padding:.3rem 1.1rem; background:#F7A1C0; color:var(--ink);
  font:800 .74rem/1.2 var(--body); letter-spacing:.2em; text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%); }
.fd7__tags{ margin:.9rem 0 .5rem; font:600 .8rem/1 var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); }
.fd7__h{ margin:0 0 .9rem; font-family:var(--display); font-weight:700; font-size:clamp(1.7rem,1.2rem + 1.8vw,2.55rem); line-height:1.1; letter-spacing:-.02em; }
.fd7__hl{ background:linear-gradient(transparent 55%, #FFD75E 55%, #FFD75E 92%, transparent 92%); padding:0 .06em; }
.fd7__text > p:not([class]){ margin:0 0 1rem; max-width:58ch; color:var(--ink-2); line-height:1.65; }
.fd7__quote{ margin:0 0 1.5rem; font:700 clamp(1.25rem,1rem + .8vw,1.6rem)/1.2 var(--hand); color:var(--m-txt); }
.fd7__text .pillbtn{ text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; }
.fd7__stats{ list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:1.4rem 0 0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--line); }
.fd7__stats li{ padding:.2rem .8rem; text-align:center; border-left:1px solid var(--line); font-size:.82rem; line-height:1.45; color:var(--ink-3); }
.fd7__stats li:first-child{ border-left:0; }
.fd7__stats svg{ display:block; width:24px; height:24px; margin:0 auto .5rem; fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fd7__stats b{ display:block; font:800 .74rem/1.3 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:.15rem; }
@media (max-width:900px){
  .fd7__card{ grid-template-columns:1fr; }
  .fd7__art{ max-width:560px; width:100%; margin-inline:auto; }
  .fd7__stats{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:1.2rem; }
  .fd7__stats li:nth-child(4){ border-left:0; }
}
@media (max-width:520px){
  .fd7__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fd7__stats li:nth-child(odd){ border-left:0; } .fd7__stats li:nth-child(4){ border-left:1px solid var(--line); }
  .fd7__ribbon{ margin-left:0; }
}

/* --- "+ADD": Come for the project. Stay for the maker mindset. (home-add-maker-mindset.png) ---------------------- */
.mk7{ padding-block:clamp(2.5rem,5vw,4rem); background-color:#121214;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.075) 0 36px,transparent 36px 72px),repeating-linear-gradient(0deg,rgba(255,255,255,.075) 0 36px,transparent 36px 72px); }   /* round 9: her dark gingham, not stripes */
.mk7__card{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:clamp(1.6rem,4vw,4rem);
  padding:clamp(1.8rem,4.5vw,3.6rem); border-radius:24px; background:#121214; color:#fff; box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }
.mk7 .dot-eyebrow{ color:#E9E9EF; --dot:#F28FAF; }
.mk7__h{ margin:0 0 1.1rem; font-family:var(--display); font-weight:800; font-size:clamp(2.1rem,1.3rem + 3vw,3.6rem); line-height:1.02; letter-spacing:-.025em; color:#fff; }
.mk7__card p:not(.dot-eyebrow){ margin:0; max-width:52ch; color:var(--on-ink-2); line-height:1.65; }
.mk7__rows{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.mk7__rows li{ padding:1rem 1.2rem; border-radius:12px; background:#232327; }
.mk7__rows b{ display:block; font:700 1rem/1.3 var(--body); color:#fff; margin-bottom:.3rem; }
.mk7__rows span{ font-size:.86rem; line-height:1.5; color:var(--on-ink-2); }
@media (max-width:860px){ .mk7__card{ grid-template-columns:1fr; } }

/* --- the footer's "Be your own Designer™", rebuilt as real letters on cut paper so it is sharp on every screen
   ("Please enhance the quality to high definition."). Colours read off her picture: black letters on cream, pink,
   yellow, blue, lilac, orange and graph-paper scraps, the B and e straight on the gingham. -------------------------- */
.ftr2__ransom.rn{ width:auto; margin:0 auto; }
.rn__in{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:.08em clamp(.35rem,1.4vw,1.1rem);
  font-size:clamp(2.4rem,.8rem + 3.5vw,4.3rem); line-height:1; color:var(--ink); }
/* the sneaker sticker sits top left and two paper notes hang at the right: keep the letters between them */
@media (min-width:821px){ .ftr2__ransom.rn{ max-width:calc(100% - 2 * clamp(110px,13vw,185px)); } }
.rn__w{ display:inline-flex; align-items:flex-end; }
.rn__c{ display:inline-block; font-style:normal; padding:.04em .07em .02em; margin:0 -.015em; background:var(--pc,transparent);
  transform:rotate(var(--r,0deg)) translateY(var(--y,0)); font-size:var(--s,1em); box-shadow:var(--sh,none);
  clip-path:var(--cut,none); }
.rn__c.p{ --sh:0 3px 0 rgba(20,20,24,.10); }
.rn__c.f1{ font-family:"Young Serif",Georgia,serif; font-weight:900; font-variation-settings:"SOFT" 0,"opsz" 144; }
.rn__c.f2{ font-family:"Bricolage Grotesque",Impact,sans-serif; font-weight:800; font-variation-settings:"opsz" 96; }
.rn__c.f3{ font-family:Georgia,"Times New Roman",serif; font-weight:700; }
.rn__c.f4{ font-family:"Young Serif",Georgia,serif; font-weight:600; font-variation-settings:"SOFT" 100,"opsz" 9; }
.rn__c.f5{ font-family:"Arial Black","Bricolage Grotesque",sans-serif; font-weight:900; letter-spacing:-.04em; }
.rn__c.f6{ font-family:"Times New Roman",Georgia,serif; font-weight:700; font-style:italic; }
.rn__c.cA{ --cut:polygon(3% 6%,97% 0,100% 94%,6% 100%); } .rn__c.cB{ --cut:polygon(0 3%,94% 8%,100% 100%,4% 95%); }
.rn__c.cC{ --cut:polygon(6% 0,100% 5%,95% 97%,0 100%); } .rn__c.cD{ --cut:polygon(0 0,100% 3%,97% 92%,2% 100%); }
.rn__c.grid{ background-color:#fff; background-image:linear-gradient(rgba(20,20,24,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,24,.16) 1px,transparent 1px); background-size:.16em .16em; }
.rn__tm{ align-self:flex-start; font:800 .26em/1 var(--body); margin-left:.1em; }
.ftr2__ransom.rn + .ftr2__pills{ margin-top:clamp(.9rem,2.4vw,1.6rem); }
@media (max-width:520px){ .rn__in{ font-size:clamp(2.1rem,10.5vw,3rem); } }

/* ======================= ROUND 8 (24 Sep 2026): How it works back to her sticker cards, her round 7 words;
   the small word beside the number is her CHOOSE / RESERVE / CREATE / MAKE IT YOURS */
.how2__tag{ display:inline-block; margin-left:.5rem; vertical-align:middle; font-family:var(--body); font-size:.62rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); }

/* --- Round 9 (24 Sep 2026), Nandita: "make the button visible all the time, why is the button hiding". service.css
   loads after this file and its .bk-out (ink text, ink border) beat .bk-out--ink, so on the black "Start a custom
   project" tile the button was ink on ink until hover. Specific enough to win from here. ---------------------------- */
.bk-pair .bk-ink .bk-out--ink{ background:#fff; color:var(--ink); border-color:#fff; }
.bk-pair .bk-ink:hover .bk-out--ink{ background:#FFD75E; border-color:#FFD75E; color:var(--ink); }

/* --- Round 9 (24 Sep 2026), Nitin's pick by pop-up for Nandita's "Fix the fonts g": Young Serif replaces Fraunces as the
   display face (one-loop g). It ships one weight, so no faked bold anywhere: the real face at every heading weight. ---- */
:root{ font-synthesis-weight:none; font-synthesis:none; }

/* ======================= ROUND 10 (25 Sep 2026, Nandita's 2-page whiteboard + Claude's covered-text scan of 19 pages;
   catalog _site/NANDITA-REVIEW-2026-09-25-round10.md, patch _site/patch-round10.py) =========================== */
/* her page 1: on a phone the pink note sat on the TikTok / Pinterest / YouTube row. Now it flows under the columns. */
@media (max-width:560px){
  .ftr2__shout{ position:static; display:inline-block; margin:1.3rem auto 0; transform:rotate(-3deg); }
  .ftr2__bottom{ text-align:center; padding-bottom:2.2rem; }
  .ftr2__tape--bl, .ftr2__doodle{ display:none; }   /* the tape sat on "TIK", the star on the Monthly tuition pill */
}
/* desktop: the note stops meeting the Ask-me pill in the corner */
@media (min-width:561px){ .ftr2__shout{ right:clamp(15rem,20vw,19rem); } }
/* the TBA app row under Follow along (her links, 25 Sep) */
.ftr2__apps{ flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .9rem; margin-top:.35rem; }
.ftr2__apps .hand{ font-size:1.25rem; line-height:1; letter-spacing:0; text-transform:none; transform:rotate(-6deg); margin-right:.3rem; }
@media (max-width:560px){ .ftr2__apps{ justify-content:center; } }
/* "The circle cropping the letters" (party inquiry): the ring now rides behind the words and clears their sides */
.hero__copy{ position:relative; isolation:isolate; }
.hero__copy .ann--circle{ z-index:-1; }
.hero__copy .ann--circle .ann__svg{ left:-.7em; width:calc(100% + 1.4em); }
/* teen party packages: "put a pink shadow in front of the darker pink gingham" */
.r10-pinkshadow{ box-shadow:0 5px 0 #F7A3C4, 0 12px 26px rgba(255,138,196,.35); }
/* 25 Sep 2026 (Nitin, after the stroke came back): inside the ticker's drip band the line showed yellow between the black
   drips ("a weird yellow dash on the black strip"). There it is black, so it reads as one more drip. */
.ticker__drip .stroke{ display:none; }   /* black read as "a black bar" (Nitin): the line now dives under the ticker and comes back below */
/* the footer note sat on the "Book on the go" row on wide screens: the columns keep a band free under them for it */
@media (min-width:561px){ .ftr2__bottom{ padding-bottom:clamp(5.4rem,6.5vw,6.2rem); } .ftr2__shout{ bottom:.9rem; } }
/* the credit gets its marker highlight (Nitin, 25 Sep) */
.ftr2__made{ font-size:.7rem; }
.ftr2__made a{ background:linear-gradient(transparent 22%, #FFD75E 22%, #FFD75E 90%, transparent 90%); padding:.05em .3em; border-radius:.2em; color:var(--ink); }
.ftr2__made a:hover{ background:#141418; color:#FFD75E; text-decoration:none; }

/* ======================= ROUND 12 (27 Sep 2026, her board page 1: "On phone correct the squish") ==================
   On a phone the sneaker sticker and the top-left tape sat on the B, e and D of "Be your own Designer", the
   top-right tape on "wn". The sticker gets its own row above the words; the tapes move out to the corners. */
@media (max-width:560px){
  .ftr2__ransom.rn{ padding-top:4.4rem; }
  .ftr2__stick{ width:62px; top:-.2rem; left:.3rem; }
  .ftr2__tape--tl{ top:-.3rem; left:-3.4rem; width:120px; }
  .ftr2__tape--tr{ top:-1.1rem; right:-3.2rem; width:120px; }
}

/* ===== ROUND 13 (28 Sep 2026, Nandita's launch checklist 4): the place line under the home hero buttons,
   clear of the longest button drip (24px) ===== */
.hero__place{ margin:2.2rem 0 0; font-size:.86rem; letter-spacing:.02em; line-height:1.5; color:var(--ink-3); }

/* ===== ROUND 13, her "LOVE THIS STYLE" (board picture 6c96efc6): the shop hero picture is her gingham merch board,
   built from the collage kit (.fd7__art): pink gingham card with a blue gingham edge, the hoodies + hats on a cream
   card, a yellow taped note, a polaroid of custom high tops, a pink "Limited drop" note that links to the form ===== */
.r13-shop{ aspect-ratio:1.5; max-width:660px; }
.r13-shop .fd7__back{ inset:7% 3% 3% 4%; transform:rotate(-1.2deg); }
.r13-shop__edge{ position:absolute; right:3%; top:9%; bottom:5%; width:4.5%; transform:rotate(-1.2deg); }
.r13-shop .fd7__main{ left:25%; top:10%; width:66%; padding:10px; background:#FAF4EF; border-radius:3px; transform:rotate(1.5deg); }
.r13-shop .fd7__main img{ aspect-ratio:3/2; }
.r13-shop .r13-shop__made{ left:6%; top:1%; right:auto; bottom:auto; width:27%; transform:rotate(-7deg); }
.r13-shop__made .tape{ top:-11px; right:-20px; width:62px; height:20px; transform:rotate(26deg); }
.r13-shop .fd7__mini{ left:0; bottom:1%; width:28%; transform:rotate(-6deg); }
.r13-shop .fd7__mini img{ object-position:50% 55%; }
.r13-shop .fd7__mini .r13-t1{ top:-9px; left:-16px; width:66px; height:20px; transform:rotate(-32deg); }
.r13-shop .fd7__mini .r13-t2{ top:52%; right:-18px; width:56px; height:18px; transform:rotate(-24deg); }
.r13-shop .r13-shop__drop{ left:auto; top:auto; right:0; bottom:2%; width:30%; transform:rotate(4deg); color:var(--ink); text-decoration:none;
  transition:transform .25s ease; }
.r13-shop .r13-shop__drop:hover, .r13-shop .r13-shop__drop:focus-visible{ transform:rotate(2deg) translateY(-3px); }
.r13-shop .fd7__star{ right:7%; top:-5%; bottom:auto; width:50px; }
.r13-shop .fd7__heart--a{ right:auto; left:31%; top:auto; bottom:4%; width:24px; }
.r13-shop .fd7__heart--b{ right:27%; top:auto; bottom:27%; width:22px; }
.r13-shop__pstar{ position:absolute; right:-2%; top:40%; width:34px; transform:rotate(14deg); z-index:3; }
.r13-shop__spark{ position:absolute; left:34%; bottom:-3%; width:26px; z-index:3; }
@media (max-width:640px){
  .r13-shop{ aspect-ratio:1.18; }
  .r13-shop .fd7__main{ left:14%; top:17%; width:80%; }
  .r13-shop .r13-shop__made{ left:2%; top:0; width:42%; }
  .r13-shop .fd7__mini{ width:34%; }
  .r13-shop .r13-shop__drop{ width:44%; bottom:0; }
  .r13-shop .fd7__heart--b, .r13-shop__pstar{ display:none; }
  .r13-shop .fd7__star{ width:40px; right:4%; top:2%; }
}
@media (prefers-reduced-motion:reduce){ .r13-shop .r13-shop__drop{ transition:none; } }

/* ======================= PHONE ROUND (Nitin, 29 Sep 2026), phones only (≤760px); desktop is untouched.
   1 "How it works" and the six Experiences cards become a pile as you scroll: 1, 2, 3, 4. Every card is sticky a
     --stk-step lower than the one before, so the next card slides up over it and the top strip of each card under it
     stays in view (the "01 CHOOSE" row, the "BIRTHDAY PARTIES" eyebrow). grid-auto-rows:1fr makes every card as tall
     as the tallest, so no foot shows under the next card. The margins keep it in one piece: card i sits (i - n) steps
     up and keeps (n - 1 - i) steps under it, so every card's margin box ends on the same line as the last card and
     the whole pile lets go the moment the last card lands (the list's top padding puts card 1 back where it was).
     The step shrinks on a short phone so the last card still clears the Call / Book dock.
   2 Every service hero with two buttons puts them on one row of two halves, as the home hero does.
   3 The dock is one line, 58px tall on every page (it was 68, and 95 where the label wrapped on /pop-up-events/, which
     keeps its full words in smaller type: Nitin's pick by pop-up).
   4 The home hero keeps its first two sentences only. */
@media (max-width:760px) and (min-height:520px){
  :root{ --stk-top:88px; }                                            /* the 76px header + 12px */
  :root .hw7__steps, :root .xg__grid{ display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:1fr; row-gap:1.25rem; }
  :root .hw7__steps > li, :root .xg__card{ position:sticky; top:calc(var(--stk-top) + var(--i,0) * var(--stk-step));
    margin:calc((var(--i,0) - var(--n)) * var(--stk-step)) 0 calc((var(--n) - 1 - var(--i,0)) * var(--stk-step)); }
  :root .hw7__steps, :root .xg__grid{ padding-top:calc(var(--n) * var(--stk-step)); }
  .hw7__steps{ --n:4; --stk-step:clamp(12px, (100svh - 380px) / 6, 50px); }    /* 50px from a 680 phone up, 31px on a 568 one */
  .xg__grid{ --n:6; --stk-step:clamp(10px, (100svh - 470px) / 5.6, 44px); }     /* six cards: 44px from 717 up, 17px on 568 */
  :root :is(.hw7__steps > li, .xg__card):nth-child(2){ --i:1; }
  :root :is(.hw7__steps > li, .xg__card):nth-child(3){ --i:2; }
  :root :is(.hw7__steps > li, .xg__card):nth-child(4){ --i:3; }
  :root :is(.hw7__steps > li, .xg__card):nth-child(5){ --i:4; }
  :root :is(.hw7__steps > li, .xg__card):nth-child(6){ --i:5; }

  /* How it works: the four steps were rows under a rule; here each is its own pastel card */
  :root .hw7__steps{ margin-top:1.6rem; border-top:0; }
  .hw7__steps::before, .hw7__steps::after{ display:none; }
  :root .hw7__steps > li{ border:0; padding:1rem 1.2rem 1.5rem; background:var(--k); border-radius:20px;
    box-shadow:0 0 0 1px rgba(20,20,24,.06), 0 -12px 26px -18px rgba(20,20,24,.5); }
  :root .hw7__row{ margin-bottom:1rem; padding-right:3rem; }
  :root .hw7__n{ background:#fff; }
  :root .hw7__tag{ color:var(--ink-2); }
  :root .hw7__steps p{ color:var(--ink-2); }
  :root .hw7__ico{ top:.55rem; right:.9rem; bottom:auto; width:40px; height:40px; border-radius:13px; background:#fff; }
  :root .hw7__ico svg{ width:20px; height:20px; }

  /* Experiences: already cards; each one throws its shadow up onto the card it covers */
  :root .xg__card{ box-shadow:0 0 0 1px rgba(20,20,24,.05), 0 -12px 26px -18px rgba(20,20,24,.5); }
}

@media (max-width:760px){
  /* 2 · the service heroes' own button rows (their sheets load after this one, hence :root) */
  :root :is(.ac-hero .ac-cta, .pt-hero__cta, .mk-hero .mk-cta, .fm-hero__cta, .r7t-hero__cta, .sk-hero .hero__cta){
    display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); column-gap:clamp(.5rem,2.6vw,.9rem); align-items:stretch; }
  :root :is(.ac-hero .ac-cta, .pt-hero__cta, .mk-hero .mk-cta, .fm-hero__cta, .r7t-hero__cta, .sk-hero .hero__cta) > :is(.btn, .pillbtn){
    width:auto; margin:0; min-height:clamp(54px,15vw,60px); padding:.7rem clamp(.55rem,3vw,1.3rem); justify-content:center;
    font-size:clamp(.86rem,.62rem + 1.1vw,1.03rem); line-height:1.15; text-align:center; text-wrap:balance; }

  /* 3 · the dock: one line, 46px buttons */
  .dock{ padding:.375rem; gap:.4rem; }
  .dock__call{ min-height:46px; padding:0 .95rem; font-size:.9rem; }
  .dock__book{ min-height:46px; padding:.45rem 1rem; font-size:clamp(.8rem,3.73vw,.9rem); line-height:1.1;
               white-space:nowrap; overflow:hidden; }
  /* Nitin's pick (29 Sep pop-up): the pop-up events bar keeps its full words, in smaller type, still on one line */
  .dock__book--long{ padding-inline:.7rem; font-size:clamp(.72rem,3.6vw,.9rem); letter-spacing:-.02em; }

  /* 4 · the home hero: "For kids, teens, adults and families. Led by professional designers and artists." */
  .hero__sub-more{ display:none; }
}
@media (max-width:340px){                                             /* a 320 phone: Call keeps its icon only */
  .dock__call{ width:46px; padding:0; gap:0; justify-content:center; font-size:0; }
}

/* ======================================================= LOVED BY THE COMMUNITY (home, 29 Sep 2026)
   Nitin's decision 10: eight Google reviews in one strip + one link to /community/. The page's cream,
   the usual heading kit, pastel only on the cards; the quirk is the tilt, straightened under the pointer. */
.hr8{ background:#F6F1EA; }
.hr8__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; }
.hr8__h{ margin:0; font-family:var(--display); font-weight:800; font-size:clamp(2.1rem,1.3rem + 3vw,3.6rem); line-height:1.02; letter-spacing:-.02em; }
.hr8__nav{ display:flex; gap:.6rem; flex:none; }
.hr8__nav .rnav{ width:48px; height:48px; background:#fff; box-shadow:inset 0 0 0 1.5px var(--line); }
.hr8__strip{ list-style:none; margin:clamp(1.6rem,3.5vw,2.4rem) 0 0; padding:.9rem .2rem 1.4rem; display:flex; align-items:stretch;
  --w:calc((100% - 3 * 1.25rem) / 3.25); column-gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-inline:.2rem; overscroll-behavior-x:contain; scrollbar-width:thin; }
.hr8__strip:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; border-radius:12px; }
.hr8__card{ flex:0 0 var(--w); scroll-snap-align:start; display:flex; flex-direction:column; gap:.9rem; margin:0; padding:1.4rem 1.35rem 1.3rem;
  background:var(--k); border-radius:18px; transform:rotate(var(--r)); transition:transform var(--base) var(--spring);
  box-shadow:0 14px 30px -24px rgba(20,17,10,.55); }
.hr8__card:hover{ transform:rotate(0) translateY(-3px); }
.hr8__card .stars{ justify-content:flex-start; margin:0; gap:.2rem; }
.hr8__card .stars svg{ width:16px; height:16px; fill:#141418; }
.hr8__card > p{ margin:0; font-size:.98rem; line-height:1.55; color:var(--ink); }
.hr8__card .hr8__who{ margin-top:auto; font-size:.84rem; line-height:1.35; color:var(--ink-3); }
.hr8__who b{ display:block; font-size:.95rem; color:var(--ink); }
.hr8__more{ margin:clamp(1rem,2.5vw,1.6rem) 0 0; text-align:center; }
@media (max-width:1080px){ .hr8__strip{ --w:calc((100% - 1.25rem) / 2.2); } }
@media (max-width:640px){
  .hr8__top{ display:block; }
  .hr8__nav{ display:none; }
  /* full bleed on a phone: cards slide off the screen edge, not cut at the 20px gutter; no grey scrollbar */
  .hr8__strip{ --w:calc((100vw - 2.5rem) * .84); column-gap:.9rem; margin-inline:-1.25rem; padding-inline:1.25rem;
    scroll-padding-inline:1.25rem; scrollbar-width:none; }
  .hr8__strip::-webkit-scrollbar{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .hr8__card, .hr8__card:hover{ transition:none; transform:none; } }