/* ===== Stellar Haus Media — shared site styles (brand-book palette: deep navy-ink family,
   mint hero accent, gold, rose; dark-first "70% ink" calm. Editorial / empty-space direction
   kept — NO starfield, NO aurora, NO eyebrows, NO white surfaces.) ===== */
@font-face{font-family:"Bricolage";src:url("./fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Hanken";src:url("./fonts/hanken-grotesk.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JBMono";src:url("./fonts/jetbrains-mono.woff2") format("woff2");font-weight:100 800;font-display:swap}
:root{
  /* brand-book palette: Ink #080B14 · Surface #121A2E · Ink2 #0C1120 · Ink3 #10172A ·
     Mint #5FE3C6 · Gold #F4CC85 · Rose #FF8C7A · Text #EAEEF7 · Muted #94A1BC · Caption #6E7C99 */
  --surf:#121A2E; --surf-2:#10172A; --surf-3:#1A2440; --glow-core:#1A2440; /* surf-3 = the lighter step at the core of the star's glow; the portal lands here */
  --ink:#080B14; --ink-2:#0C1120;
  /* light surfaces — the brand's cool blue-grey text tone used as a field, so the site breathes
     light/dark in balance while staying in the book's palette (ink text, darkened brand accents) */
  --lt:#F0B7A6; --lt-2:#96DEC7; --lt-3:#E5977F; /* light mode = the BRAND's warm world: salmon-pink / mint / coral fields — real colour, zero white */
  --tx-ink:#0A0F1C; --mut-ink:#313C5A; /* text + muted for light surfaces */
  --rose-ink:#8D2E1A; /* brand rose darkened to read as text/accent on the pink and coral fields */
  --per:#9DB2F0; --blue-ink:#2A3C8F; /* periwinkle field (the calendar-category blue promoted to a section colour) + its deep accent */
  --teal-deep:#0C5F50; --gold-deep:#7C5A0E; /* brand mint/gold darkened to read as text on light */
  --mint:#5FE3C6; --gold:#F4CC85; --rose:#FF8C7A; --rose-pop:#FF8C7A;
  --cat-edu:#5FE3C6; --cat-trust:#F4CC85; --cat-proof:#FF8C7A; --cat-promo:#9DB2F0; /* the 4 content categories — shared by pillars, calendar tiles + legend so they always match; promo is a soft cosmic blue (was a near-white that read as blank) */
  --cal-empty:rgba(234,238,247,.08); --cal-blank:rgba(234,238,247,.05);
  --txt:#EAEEF7; --mut:#94A1BC; --cap:#6E7C99;
  --fd:"Bricolage",system-ui,sans-serif; --fb:"Hanken",system-ui,Arial,sans-serif; --fm:"JBMono",ui-monospace,monospace;
  --e:cubic-bezier(.22,1,.3,1); --eb:cubic-bezier(.65,0,.35,1);
  --maxw:1160px; --pill:999px;
  --tx:var(--txt); --tx-soft:var(--mut); --acc:var(--mint); --acc2:var(--gold); --on-acc:#080B14; --line:rgba(234,238,247,.14);
  --glitch-a:var(--mint); --glitch-b:var(--rose);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surf);color:var(--tx);font-family:var(--fb);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip} /* clip (hidden = old-browser fallback): blocks the sideways wiggle WITHOUT creating a scroll container — and unlike clip on html it leaves position:sticky alive. NEVER move this to html. */
::selection{background:var(--mint);color:#080B14}
html{-webkit-tap-highlight-color:transparent} /* kill the browser's blue tap-flash on press (chips/buttons/links); designed :focus-visible + :active states carry the feedback */
h1,h2,h3,h4{margin:0;font-family:var(--fd);font-weight:800;line-height:1.0;letter-spacing:-.035em;color:var(--tx);text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.3rem,5vw,3.6rem)}
.wrap.narrow{max-width:860px}
.pad{padding:clamp(4.5rem,11vw,10rem) 0}
.pad-s{padding:clamp(3rem,7vw,6rem) 0}
img{max-width:100%;display:block}

/* section bg contexts — four navy depths + the mint/gold statement fields (ink text there, per the book).
   Each context sets color:var(--tx) so bare text (list items, spans without rules) inherits the
   SECTION's resolved tone, not the body's — inheritance passes computed values, not variables. */
.s-surf{color:var(--tx);background:var(--surf);--tx:var(--txt);--tx-soft:var(--mut);--acc:var(--mint);--acc2:var(--gold);--on-acc:#080B14;--line:rgba(234,238,247,.14);--glitch-a:var(--mint);--glitch-b:var(--rose)}
.s-surf2{color:var(--tx);background:var(--surf-2);--tx:var(--txt);--tx-soft:var(--mut);--acc:var(--mint);--acc2:var(--gold);--on-acc:#080B14;--line:rgba(234,238,247,.14);--glitch-a:var(--mint);--glitch-b:var(--rose)}
.s-surf3{color:var(--tx);background:var(--surf-3);--tx:var(--txt);--tx-soft:var(--mut);--acc:var(--mint);--acc2:var(--gold);--on-acc:#080B14;--line:rgba(234,238,247,.16);--glitch-a:var(--mint);--glitch-b:var(--rose)} /* the glow-core step the portal opens into */
.s-ink{color:var(--tx);background:var(--ink);--tx:var(--txt);--tx-soft:var(--mut);--acc:var(--mint);--acc2:var(--gold);--on-acc:#080B14;--line:rgba(234,238,247,.14);--glitch-a:var(--mint);--glitch-b:var(--rose)}
.s-ink2{color:var(--tx);background:var(--ink-2);--tx:var(--txt);--tx-soft:var(--mut);--acc:var(--mint);--acc2:var(--gold);--on-acc:#080B14;--line:rgba(234,238,247,.14);--glitch-a:var(--mint);--glitch-b:var(--rose)}
.s-mint,.s-mint2{color:var(--tx);background:var(--mint);--on-acc:var(--mint);--tx:#080B14;--tx-soft:#0B4C40;--acc:#080B14;--acc2:#0B4C40;--line:rgba(8,11,20,.22)} /* .s-mint2 = mint closing field (own class so dark mode can deepen closings without touching mid-page mint) */
.s-rose{color:var(--tx);background:var(--rose);--on-acc:var(--rose);--tx:#080B14;--tx-soft:#5C1F12;--acc:#080B14;--acc2:#5C1F12;--line:rgba(8,11,20,.22)} /* rose closing field */
.s-gold{color:var(--tx);background:var(--gold);--on-acc:var(--gold);--tx:#080B14;--tx-soft:#6B4E12;--acc:#080B14;--acc2:#6B4E12;--line:rgba(8,11,20,.22)}
.s-goldd{color:var(--tx);background:#2A210C;--tx:#F4E9D2;--tx-soft:#C9B88C;--acc:var(--gold);--acc2:var(--mint);--on-acc:#080B14;--line:rgba(244,204,133,.18);--glitch-a:var(--gold);--glitch-b:var(--rose)} /* dark mode's closing field: a deep shade of the brand gold instead of the bright block */
.s-mintd{color:var(--tx);background:#0D2921;--tx:#DDF6EC;--tx-soft:#9CCFC0;--acc:var(--mint);--acc2:var(--gold);--on-acc:#080B14;--line:rgba(95,227,198,.18);--glitch-a:var(--mint);--glitch-b:var(--gold)} /* dark mode's mint closing: deep mint, no bright end block */
.s-rosed{color:var(--tx);background:#2E120B;--tx:#F7DED6;--tx-soft:#CE9A8C;--acc:var(--rose);--acc2:var(--gold);--on-acc:#080B14;--line:rgba(255,140,122,.18);--glitch-a:var(--rose);--glitch-b:var(--gold)} /* dark mode's rose closing: deep rose, no bright end block */
/* light surfaces — ink text, brand accents darkened for legibility; balance the navy */
.s-lt{color:var(--tx);background:var(--lt);--tx:var(--tx-ink);--tx-soft:#6E3B30;--acc:var(--rose-ink);--acc2:var(--gold-deep);--on-acc:#FFF4EE;--line:rgba(70,25,12,.20);--glitch-a:var(--rose-ink);--glitch-b:var(--gold-deep)} /* salmon-pink field, warm accents (teal on pink was rejected) */
.s-lt2{color:var(--tx);background:var(--lt-2);--tx:var(--tx-ink);--tx-soft:#175346;--acc:var(--teal-deep);--acc2:var(--gold-deep);--on-acc:#ECFBF5;--line:rgba(8,45,36,.22);--glitch-a:var(--teal-deep);--glitch-b:var(--gold-deep)} /* mint field, deep-teal accents */
.s-lt3{color:var(--tx);background:var(--lt-3);--tx:var(--tx-ink);--tx-soft:#5C2B1F;--acc:#6E2413;--acc2:var(--gold-deep);--on-acc:#FFF4EE;--line:rgba(70,25,12,.22);--glitch-a:var(--rose-ink);--glitch-b:var(--gold-deep)} /* coral field (glow-core step); acc darker than rose-ink — small accent text needs 4.5:1 on the deeper coral */
.s-per{color:var(--tx);background:var(--per);--tx:var(--tx-ink);--tx-soft:#2E3A63;--acc:var(--blue-ink);--acc2:var(--rose-ink);--on-acc:#F2F5FE;--line:rgba(20,30,80,.24);--glitch-a:var(--blue-ink);--glitch-b:var(--rose-ink)} /* periwinkle field */
.s-white{color:var(--tx);background:#fff;--tx:var(--tx-ink);--tx-soft:var(--mut-ink);--acc:var(--teal-deep);--acc2:var(--gold-deep);--on-acc:#fff;--line:rgba(10,15,28,.14);--glitch-a:var(--teal-deep);--glitch-b:var(--gold-deep)} /* clean white — the contact page (owner request) */
/* the newer light fields reuse the ink-tint card treatment the s-lt* fields get */
.s-per :is(.stg,.pillar,.term,.cal,.funnel,.step,.chat,.dlcard,.stat,.msg,.listing,.caps li,.flowmap span),.s-per .direct a,.s-gold :is(.stg,.pillar,.term,.cal,.funnel,.step,.chat,.dlcard,.stat,.msg,.listing,.caps li,.flowmap span),.s-gold .direct a,.s-white :is(.stg,.pillar,.term,.cal,.funnel,.step,.chat,.dlcard,.stat,.msg,.listing,.caps li,.flowmap span),.s-white .direct a{background:rgba(10,15,28,.055);border-color:rgba(10,15,28,.2)}
.s-per .engine.flow .stg.lit,.s-gold .engine.flow .stg.lit,.s-white .engine.flow .stg.lit{background:rgba(10,15,28,.09)}
.s-per .bub.them,.s-gold .bub.them,.s-white .bub.them{background:rgba(10,15,28,.07)}
.s-per :is(.chip span,.filebtn,.btn-line),.s-gold :is(.chip span,.filebtn,.btn-line),.s-white :is(.chip span,.filebtn,.btn-line),.s-per .field :is(input,textarea),.s-gold .field :is(input,textarea),.s-white .field :is(input,textarea){border-color:rgba(10,15,28,.4)}
.s-per .field :is(input,textarea),.s-gold .field :is(input,textarea),.s-white .field :is(input,textarea){background:rgba(10,15,28,.05);color-scheme:light;color:var(--tx)}
.s-per .field :is(input,textarea)::placeholder,.s-gold .field :is(input,textarea)::placeholder,.s-white .field :is(input,textarea)::placeholder{color:var(--mut-ink)}
/* glassy cards are tuned for dark fields; on light surfaces flip them to a dark-tint glass so they still read as cards */
.s-lt .stg,.s-lt2 .stg,.s-lt3 .stg,.s-lt .pillar,.s-lt2 .pillar,.s-lt3 .pillar,.s-lt .term,.s-lt2 .term,.s-lt3 .term,.s-lt .cal,.s-lt2 .cal,.s-lt3 .cal,.s-lt .funnel,.s-lt2 .funnel,.s-lt3 .funnel,.s-lt .step,.s-lt2 .step,.s-lt3 .step,.s-lt .direct a,.s-lt2 .direct a,.s-lt3 .direct a,.s-lt .field input,.s-lt2 .field input,.s-lt3 .field input,.s-lt .field textarea,.s-lt2 .field textarea,.s-lt3 .field textarea,.s-lt .chat,.s-lt2 .chat,.s-lt3 .chat,.s-lt .dlcard,.s-lt2 .dlcard,.s-lt3 .dlcard,.s-lt .stat,.s-lt2 .stat,.s-lt3 .stat,.s-lt .msg,.s-lt2 .msg,.s-lt3 .msg{background:rgba(10,15,28,.055);border-color:rgba(10,15,28,.2)} /* deeper fill + border so cards read on light */
.s-lt .engine.flow .stg.lit,.s-lt2 .engine.flow .stg.lit,.s-lt3 .engine.flow .stg.lit{background:rgba(10,15,28,.09)}
.s-lt .bub.them,.s-lt2 .bub.them,.s-lt3 .bub.them{background:rgba(10,15,28,.07)}
/* interactive-control edges must clear 3:1 on light — the .14 dark-surface hairline is too weak inverted */
.s-lt .chip span,.s-lt2 .chip span,.s-lt3 .chip span,.s-lt .filebtn,.s-lt2 .filebtn,.s-lt3 .filebtn,.s-lt .btn-line,.s-lt2 .btn-line,.s-lt3 .btn-line,.s-lt .field input,.s-lt2 .field input,.s-lt3 .field input,.s-lt .field textarea,.s-lt2 .field textarea,.s-lt3 .field textarea{border-color:rgba(10,15,28,.4)}
.s-lt .field input,.s-lt2 .field input,.s-lt3 .field input,.s-lt .field textarea,.s-lt2 .field textarea,.s-lt3 .field textarea{background:rgba(10,15,28,.05);color-scheme:light}
.s-lt .field input::placeholder,.s-lt2 .field input::placeholder,.s-lt3 .field input::placeholder,.s-lt .field textarea::placeholder,.s-lt2 .field textarea::placeholder,.s-lt3 .field textarea::placeholder{color:var(--mut-ink)}
.xfade{display:none}

/* eyebrow */
.eyebrow{display:none}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor;opacity:.7;border-radius:2px}

/* buttons */
.btn{font-family:var(--fb);font-weight:600;font-size:1rem;padding:1rem 1.8rem;border-radius:var(--pill);display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;border:1.5px solid transparent;transition:transform .35s var(--e),box-shadow .35s var(--e),background .3s,color .3s,border-color .3s}
.btn .ar{transition:transform .35s var(--e)}.btn:hover .ar{transform:translateX(4px)}
.btn-dark{background:var(--mint);color:#080B14}.btn-dark:hover{transform:translateY(-3px);box-shadow:0 16px 36px -14px rgba(95,227,198,.35)}
.s-mint .btn-dark,.s-mint2 .btn-dark,.s-gold .btn-dark,.s-rose .btn-dark,.s-per .btn-dark{background:var(--ink);color:var(--txt)} /* on ALL the colour fields the pill reverses out in ink, per the book — else mint-on-mint (or mint-on-periwinkle) vanishes */
.btn-mint{background:var(--mint);color:#080B14}.btn-mint:hover{transform:translateY(-3px);box-shadow:0 16px 38px -14px rgba(95,227,198,.6)}
.btn-line{background:transparent;color:var(--tx);border-color:rgba(234,238,247,.34)}.btn-line:hover{border-color:currentColor;transform:translateY(-3px)}
.btn-lg{font-size:1.08rem;padding:1.1rem 2rem}

/* type helpers */
h2.big{font-size:clamp(2.1rem,5.6vw,4rem);letter-spacing:-.04em}
.h-xl{font-size:clamp(2.7rem,7.4vw,5.4rem);letter-spacing:-.045em;line-height:.96}
.lead{font-size:clamp(1.1rem,1.7vw,1.35rem);color:var(--tx-soft);line-height:1.5;max-width:60ch}
.coral{color:#080B14;background:var(--rose);padding:.01em .1em;border-radius:.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone} /* marker highlight: ink on rose, readable on the dark heroes */
.mintline{background:linear-gradient(transparent 60%, rgba(95,227,198,.55) 0)}
.muted{color:var(--tx-soft)}

/* page hero (service pages) */
.phero{min-height:calc(100svh - 70px);display:grid;align-content:center;padding:clamp(2.5rem,6vw,4rem) 0}
.phero .eyebrow{margin-bottom:1.6rem}
.phero h1{font-size:clamp(2.5rem,6.6vw,5rem);letter-spacing:-.045em;line-height:.97;max-width:16ch;margin:0 0 clamp(1.2rem,2.4vw,1.6rem)}
.phero .lead{margin-bottom:2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem 1.1rem;align-items:center}
.free{display:block;font-family:var(--fm);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-soft);margin-top:1rem}
.free-i{font-family:var(--fm);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-soft)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:transparent;padding:clamp(.55rem,1.5vw,.9rem) clamp(.7rem,3vw,1.4rem) 0;transition:padding .4s var(--e)}
.nav .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:.6rem 1.35rem;border-radius:30px;background:rgba(12,17,32,.55);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.09);box-shadow:0 12px 36px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10);transition:padding .35s var(--e),box-shadow .4s,background .4s} /* floating frosted-glass pill: empty left, star centre, controls right */
.nav.small{padding-top:clamp(.35rem,.9vw,.55rem)}
.nav.small .row{padding-top:.46rem;padding-bottom:.46rem;box-shadow:0 8px 26px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.09)}
.brand{grid-column:2;justify-self:center;display:flex;align-items:center;gap:.55rem;font-family:var(--fd);font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.brand .brand-word{display:none} /* the logo is the star mark alone */
.brand svg{width:27px;height:27px;transition:transform .55s var(--e),filter .4s}
html:not(.rm) .brand:hover svg{transform:rotate(90deg) scale(1.08);filter:drop-shadow(0 0 9px rgba(95,227,198,.55))}
.nav .cta{grid-column:3;justify-self:end;display:flex;align-items:center;gap:.6rem}
.nav .cta .btn{padding:.6rem 1.15rem;font-size:.9rem;white-space:nowrap}
.burger{display:inline-flex;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:0 0 auto} /* the one menu control, at every width */
.burger span{width:18px;height:2px;background:var(--tx);border-radius:2px;transition:transform .3s var(--e),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile{position:fixed;inset:0 0 0 auto;width:min(88vw,384px);background:var(--ink);color:var(--txt);z-index:60;transform:translateX(100%);transition:transform .5s var(--e);padding:1.1rem 1.9rem 2.4rem;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;counter-reset:mi} /* the single menu at every width; scrollable so landscape phones reach every link; contain = drawer pans never chain to the page */
.mobile.open{transform:none}
.m-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--ink);padding-bottom:1.1rem;margin-bottom:.5rem;z-index:2}
.m-brand{display:flex;align-items:center;gap:.5rem;font-family:var(--fd);font-weight:700;font-size:.95rem;letter-spacing:-.02em;color:var(--txt)}
.m-brand svg{width:22px;height:22px}
.m-nav{display:flex;flex-direction:column}
.m-nav a{counter-increment:mi;position:relative;display:flex;align-items:baseline;gap:.9rem;font-family:var(--fd);font-weight:700;font-size:clamp(1.55rem,6vw,1.95rem);line-height:1.06;padding:.66rem 0;border-bottom:1px solid rgba(234,238,247,.12);color:var(--txt);transition:color .3s var(--e),padding-left .35s var(--e)}
.m-nav a::before{content:counter(mi,decimal-leading-zero);font-family:var(--fm);font-weight:500;font-size:.68rem;letter-spacing:.12em;color:var(--tx-soft);transform:translateY(-.15em);transition:color .3s}
.m-nav a::after{content:"\2192";margin-left:auto;align-self:center;font-size:1.05rem;color:var(--mint);opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .35s var(--e)}
.m-nav a:hover,.m-nav a:focus-visible{color:var(--mint);padding-left:.5rem}
.m-nav a:hover::after,.m-nav a:focus-visible::after{opacity:1;transform:none} /* index number stays muted on hover — label + arrow lead the eye */
.m-nav a[aria-current]{color:var(--mint)}
.m-nav a[aria-current]::before{color:var(--mint)}
.mobile .btn{margin-top:1.4rem;justify-content:center;border-bottom:0;font-size:1rem;padding:.9rem 1.3rem}
.m-signoff{margin:1.3rem 0 0;font-family:var(--fm);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-soft)}
/* menu opens with a staggered editorial cascade — reduced motion shows it instantly */
html:not(.rm) .mobile.open .m-brand,html:not(.rm) .mobile.open .m-nav a,html:not(.rm) .mobile.open .m-signoff{animation:mIn .5s var(--e) both}
html:not(.rm) .mobile.open .btn{animation:mFade .5s var(--e) .38s both}
html:not(.rm) .mobile.open .m-nav a:nth-of-type(1){animation-delay:.05s}
html:not(.rm) .mobile.open .m-nav a:nth-of-type(2){animation-delay:.09s}
html:not(.rm) .mobile.open .m-nav a:nth-of-type(3){animation-delay:.13s}
html:not(.rm) .mobile.open .m-nav a:nth-of-type(4){animation-delay:.17s}
html:not(.rm) .mobile.open .m-nav a:nth-of-type(5){animation-delay:.21s}
html:not(.rm) .mobile.open .m-nav a:nth-of-type(6){animation-delay:.25s}
html:not(.rm) .mobile.open .m-nav a:nth-of-type(7){animation-delay:.29s}
html:not(.rm) .mobile.open .m-nav a:nth-of-type(8){animation-delay:.33s}
html:not(.rm) .mobile.open .m-signoff{animation-delay:.42s}
@keyframes mIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mFade{from{opacity:0}to{opacity:1}}
/* no-JS: the drawer can't be opened, so render it inline as a plain nav fallback */
html:not(.js) .burger,html:not(.js) .scrim,html:not(.js) .mclose{display:none}
html:not(.js) .mobile{position:static;transform:none;width:auto;height:auto;background:none;color:inherit;z-index:auto;padding:1rem 0 0;overflow:visible}
html:not(.js) .m-head{position:static;background:none;padding-bottom:.4rem}
.scrim{position:fixed;inset:0;background:rgba(4,6,12,.55);z-index:55;opacity:0;visibility:hidden;transition:.35s}
.scrim.open{opacity:1;visibility:visible}
.mclose{flex:none;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--txt);font-size:1.7rem;line-height:1;cursor:pointer;border-radius:12px;transition:color .3s} /* close sits in the sticky .m-head row */
.mclose:hover{color:var(--mint)}
@media(max-width:1140px){.nav .cta{gap:.5rem}
 .nav .cta .btn{padding:.5rem .85rem;font-size:.8rem}} /* the strongest CTA stays visible on mobile, compact */
@media(max-width:560px){.nav .cta .btn{display:none}} /* smallest screens: the CTA lives in the menu drawer — no room beside the star */

/* hide the native scrollbar — the top progress bar reads position instead (owner request) */
html{scrollbar-width:none;-ms-overflow-style:none} /* NO overflow on html: root-level clip breaks EVERY position:sticky (nav, portal, deck stages) in Chrome — the sideways clip lives on body instead */
/* Japanese pages: Latin glyphs keep the brand fonts; JP glyphs fall to each device's best native family
   (the approach major JP sites use — a JP webfont would cost ~2MB). Tokens only — no per-component work. */
html[lang="ja"]{--fd:"Bricolage","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif;
  --fb:"Hanken","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif;
  --fm:"JBMono","Hiragino Sans","Yu Gothic UI",Meiryo,ui-monospace,monospace}
html[lang="ja"] body{line-height:1.85} /* JP text breathes better a touch looser */
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
.scrollprog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--mint),var(--gold));z-index:200;pointer-events:none;will-change:transform}

/* reveal */
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--e),transform .8s var(--e)}
html.js .reveal.in{opacity:1;transform:none}
html.rm .reveal{opacity:1!important;transform:none!important;transition:none}
/* SAFETY NET: content must never stay hidden. If a reveal hasn't fired within ~4s of load
   (observer hiccup, JS failure, anything), it force-reveals by pure CSS. */
html.js .reveal:not(.in){animation:rvsafe .7s var(--e) 4s both}
html.js:not(.rm) .wsplit:not(.in) .w{animation:rvsafe .7s var(--e) 4.2s both}
@keyframes rvsafe{to{opacity:1;transform:none}}
.st>*{transition-delay:calc(var(--i,0)*70ms)}

/* HERO star-split */
.hero{position:relative;text-align:center;padding:clamp(2.4rem,5vw,4rem) 0 clamp(3rem,7vw,5rem)}
.hero .stage{position:relative;width:clamp(190px,min(29vw,35vh),330px);height:clamp(190px,min(29vw,35vh),330px);margin:0 auto clamp(1.2rem,min(4vw,4vh),2.8rem);overflow:visible} /* vh-capped so star + headline + lead always fit one viewport (minus the in-flow nav) — the first scroll must go into the zoom, never cut the star */
.aura{position:absolute;inset:-38%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 46%, var(--glow-core), transparent 66%)} /* the soft luminous navy glow — the portal circle borrows its exact core tone */
html:not(.rm) .aura{animation:spin 24s linear infinite}
@media(prefers-reduced-motion:reduce){.aura{animation:none!important}} /* no-JS never gets the .rm class — the media query must hold on its own */
@keyframes spin{to{transform:rotate(360deg)}}
.star{position:absolute;inset:0;z-index:1;-webkit-mask:radial-gradient(circle at 50% 50%,#0000 0 9.9%,#000 10.15%);mask:radial-gradient(circle at 50% 50%,#0000 0 9.9%,#000 10.15%)} /* tight mask band — a soft band becomes a blur ring when the portal scales the star */
.piece{position:absolute;inset:0;transform-origin:50% 50%;transition:transform 1.05s var(--eb),opacity 1.05s ease,filter .35s ease;filter:drop-shadow(0 5px 15px rgba(0,0,0,.5))}
.piece svg{width:100%;height:100%;display:block}
html.js .stage:not(.shown) .piece{opacity:0;transform:scale(.5)}
.stage.shown .piece{opacity:1;transform:none}
/* burst: mask removed so pieces aren't clipped by the centre-hole square; they fan out (this
   split moment now lives on the front-desk page) */
.stage.burst{overflow:visible}
.stage.burst .star{-webkit-mask:none;mask:none}
.stage.burst .p-top{transform:translate(-6%,-30%) rotate(-8deg) scale(1.03);opacity:.92}
.stage.burst .p-right{transform:translate(30%,-22%) rotate(8deg) scale(1.03);opacity:.92} /* E/W climb/dip clear of the centred fd title (keep in sync with the no-JS rules below) */
.stage.burst .p-bottom{transform:translate(6%,30%) rotate(-8deg) scale(1.03);opacity:.92}
.stage.burst .p-left{transform:translate(-30%,22%) rotate(8deg) scale(1.03);opacity:.92}
.p-right{transition-delay:.04s}.p-bottom{transition-delay:.08s}.p-left{transition-delay:.12s}

/* OFFBRAND-principle portal (home hero, motion users only): the hero holds while the star swells
   and its centre hole — backed by the growing pink-3 disc — becomes the doorway to the next section */
.hero.portal{padding:0;overflow:clip}
.hero.portal .wrap{position:sticky;top:0;min-height:100vh;min-height:100svh;display:grid;align-content:center;justify-items:center;padding-bottom:min(10vh,76px)} /* the in-flow nav pushes the wrap down by its height — reserving the same space at the bottom keeps star + copy centred in what's actually visible at rest (the zoom recentres itself via portalY) */
/* the ink disc is FIXED and laid out near its final size (150vmax), then scaled DOWN — so at full
   portal it renders near native resolution: crisp edge, no raster blur. JS keeps it glued to the
   star's hole centre each frame. */
.p-disc{position:fixed;left:50%;top:40%;width:150vmax;aspect-ratio:1;transform:translate(-50%,-50%) scale(var(--ds,0));border-radius:50%;background:var(--glow-core);z-index:0;pointer-events:none} /* the glow-core pink — same as the section it opens into, so the whole zoom stays one colour */
.hero.portal .stage{will-change:transform} /* cache the rasterised star during the zoom scrub */
.hero.portal.zooming .piece{filter:drop-shadow(0 5px 15px rgba(0,0,0,0))} /* the pieces' drop-shadows turn to mud at portal scale — fade to zero-alpha (none doesn't interpolate, so it would snap) */
.hero.portal.zoomdeep .piece{filter:none} /* alpha is already 0 here — drop the (expensive) filter entirely for the deep zoom */

/* front-desk star, scroll-bound: the section holds while the whole star splits into four —
   the four timings — and "One desk, every hour." rises in the centre between the pieces */
.stage-sm{position:relative;width:clamp(170px,22vw,240px);height:clamp(170px,22vw,240px);margin:0}
.fd-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:1rem}
@media(max-width:760px){.fd-grid{grid-template-columns:1fr}}
.fd-stage{position:relative;display:grid;place-items:center;min-height:clamp(280px,44vh,400px)}
.fd-stage .fd-title{position:absolute;inset:0;display:grid;place-items:center;text-align:center;margin:0;font-size:clamp(1.4rem,2.4vw,2rem);pointer-events:none;z-index:2} /* the title must paint above the star pieces in every state */
/* no-JS: neither .shown nor .burst is ever added, so the star would sit assembled over the title —
   rest it in the split pose instead (mirror of .stage.burst above; keep the two in sync) */
html:not(.js) #stage-fd .star{-webkit-mask:none;mask:none}
html:not(.js) #stage-fd .p-top{transform:translate(-6%,-30%) rotate(-8deg) scale(1.03);opacity:.92}
html:not(.js) #stage-fd .p-right{transform:translate(30%,-22%) rotate(8deg) scale(1.03);opacity:.92}
html:not(.js) #stage-fd .p-bottom{transform:translate(6%,30%) rotate(-8deg) scale(1.03);opacity:.92}
html:not(.js) #stage-fd .p-left{transform:translate(-30%,22%) rotate(8deg) scale(1.03);opacity:.92}
html.js:not(.rm) .fdshow .fd-title{opacity:0}
html.js:not(.rm) .fdshow .daynight .row{opacity:.45;transition:opacity .5s var(--e)}
html.js:not(.rm) .fdshow .daynight .row.lit{opacity:1}
.fdshow .wrap{position:sticky;top:0;min-height:100vh;min-height:100svh;display:grid;align-content:center}
.fdshow .piece{transition:opacity .5s ease} /* the scrub owns the transforms */
.fdshow .star{-webkit-mask:none;mask:none} /* no hole-punch clipping while the pieces travel */
.hero h1{font-size:clamp(2.7rem,min(7.4vw,10.6vh),5.6rem);letter-spacing:-.045em;line-height:.96;margin:0 auto clamp(1.2rem,2.4vw,1.7rem);max-width:15ch} /* the vh cap only bites on short viewports, keeping the whole hero above the fold */
@media(max-height:520px){ /* landscape phones: the regular floors overflow the fold — shrink below them */
  .hero .stage{width:clamp(120px,30vh,190px);height:clamp(120px,30vh,190px);margin-bottom:.8rem}
  .hero h1{font-size:clamp(1.8rem,9vh,2.7rem);margin-bottom:.8rem}
  .hero .lead{font-size:1rem}
  .hero.portal .wrap{padding-bottom:56px}
}
.hero .lead{margin:0 auto clamp(1rem,min(3.5vw,3vh),2.3rem);max-width:44ch;text-align:center}
.svcline{display:none} /* hidden: the services get their moment in the card-stack showcase below */
.svcline span{font-family:var(--fm);font-size:clamp(.64rem,1.1vw,.74rem);letter-spacing:.14em;text-transform:uppercase;color:var(--tx);padding:0 clamp(.7rem,1.5vw,1.05rem);position:relative}
.svcline span:not(:last-child)::after{content:"✦";position:absolute;right:-3px;top:50%;transform:translateY(-50%);color:var(--rose);opacity:.5;font-size:.6em}

/* marquee band */
.marq{display:none}
.marq-x{overflow:hidden;padding:.9rem 0}
.marq .t{display:flex;gap:2.2rem;width:max-content;white-space:nowrap;font-family:var(--fm);font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tx-soft)}
html:not(.rm) .marq .t{animation:scroll 34s linear infinite}
.marq .s{color:var(--acc)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* two-col */
.two{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,5vw,4.5rem);align-items:center}
.two.top{align-items:start}
@media(max-width:760px){.two{grid-template-columns:1fr}}

/* engine */
.engine{display:flex;gap:0;margin-top:2.4rem;overflow-x:auto;scrollbar-width:none}
.engine::-webkit-scrollbar{display:none}
.stg{flex:1 0 148px;padding:1.2rem 1rem 1.3rem;border-radius:16px;background:rgba(234,238,247,.06);border:1px solid var(--line);transition:transform .4s var(--e)}
.s-ink .stg,.s-ink2 .stg{background:rgba(234,238,247,.05)}
.stg:hover{transform:translateY(-5px)}
.stg .n{font-family:var(--fm);font-size:.66rem;letter-spacing:.16em;color:var(--acc)}
.stg h4{font-size:1.16rem;margin:.5rem 0 .3rem;letter-spacing:-.02em}
.stg p{font-size:.86rem;color:var(--tx-soft)}
.join{flex:0 0 26px;align-self:center;height:2px;background:linear-gradient(90deg,var(--rose),var(--gold));border-radius:2px;transform-origin:left}
html.js .engine:not(.drawn) .join{transform:scaleX(0)}
.engine .join{transition:transform .6s var(--e)}.engine.drawn .join{transform:scaleX(1)}
/* engine left→right flow (motion): stages light as the connection reaches them; the JS scrub owns the join fill */
html.js:not(.rm) .engine.flow .stg{transition:border-color .5s var(--e),background-color .5s var(--e),box-shadow .5s var(--e)}
html.js:not(.rm) .engine.flow .stg .n{color:var(--tx-soft);transition:color .45s var(--e)}
html.js:not(.rm) .engine.flow .stg.lit{border-color:var(--acc);background:rgba(234,238,247,.1)}
html.js:not(.rm) .engine.flow .stg.lit .n{color:var(--acc)}
html.js:not(.rm) .engine.flow .stg.now{box-shadow:inset 0 0 0 2px var(--acc),inset 0 0 30px -10px var(--acc)} /* inset so the engine's own overflow-x scroll box can't shear a drop-glow */
html.js:not(.rm) .engine.flow .join{transition:none}
@media(max-width:720px){.join{display:none}.engine{gap:.7rem}}

/* terms / tick lists */
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.8rem;margin-top:2rem}
.term{display:flex;align-items:center;gap:.8rem;padding:1.1rem 1.2rem;border-radius:14px;background:rgba(234,238,247,.06);border:1px solid var(--line)}
.s-ink .term,.s-ink2 .term{background:rgba(234,238,247,.05)}
.term .tk{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--mint);display:grid;place-items:center;font-weight:800;font-size:.78rem;flex:none}
.s-ink .term .tk{background:var(--mint);color:var(--ink)}
.term p{font-family:var(--fd);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;color:var(--tx)}
/* the risk reversal, promoted from footnote to guarantee cards */
.guarantee-line{font-family:var(--fd);font-weight:800;font-size:clamp(1.4rem,3.4vw,2.4rem);letter-spacing:-.02em;line-height:1.05;color:var(--acc);margin:2.4rem 0 1.1rem;max-width:22ch}
.terms.guarantees{gap:1rem;margin-top:0}
.terms.guarantees .term{padding:1.4rem 1.5rem;border-width:2px;border-radius:16px}
.terms.guarantees .term p{font-size:clamp(1.05rem,1.6vw,1.22rem)}
.terms.guarantees .tk{width:30px;height:30px;font-size:.9rem}
.lead-stack{display:grid;gap:1rem}
/* footer guarantee strip above the "stellar way" flourish */
.foot-guarantee{font-family:var(--fm);font-size:clamp(.72rem,1.4vw,.84rem);letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 clamp(1.4rem,3vw,2.2rem)}
/* "See it work" proof section */
.seeit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.8rem);margin-top:2.4rem}
@media(max-width:680px){.seeit{grid-template-columns:1fr}}
.see-card{margin:0}
.see-card .slot{margin-top:0;aspect-ratio:16/10;display:grid;place-content:center;gap:.5rem;padding:1.4rem;text-transform:none;letter-spacing:0}
.see-card .slot b{font-family:var(--fd);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:var(--tx)}
.see-card .slot span{font-family:var(--fm);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-soft)}
.see-card figcaption{margin-top:.9rem;color:var(--tx-soft);font-size:.95rem;line-height:1.5}
.flowmap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .2rem;margin-top:2.4rem}
.flowmap span{font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tx);background:rgba(234,238,247,.06);border:1px solid var(--line);border-radius:var(--pill);padding:.5rem .85rem}
.s-lt .flowmap span,.s-lt2 .flowmap span,.s-lt3 .flowmap span{background:rgba(10,15,28,.05)}
.flowmap span:not(:last-child)::after{content:"→";margin-left:.6rem;color:var(--acc);opacity:.8}
.caps{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem}
.caps li{position:relative;padding:.9rem 1rem .9rem 2.4rem;border-radius:12px;background:rgba(234,238,247,.05);border:1px solid var(--line);font-weight:500;color:var(--tx)}
.s-lt .caps li,.s-lt2 .caps li,.s-lt3 .caps li{background:rgba(10,15,28,.05)}
.caps li::before{content:"✦";position:absolute;left:1rem;top:.9rem;color:var(--acc)}
/* why-us — the three points */
.whys{display:grid;gap:0;margin-top:2.4rem}
.why{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.4rem);align-items:start;padding:clamp(1.8rem,3.4vw,2.6rem) 0;border-top:1px solid var(--line)}
.why .n{font-family:var(--fm);font-size:clamp(1.1rem,2.4vw,1.6rem);color:var(--acc);line-height:1}
.why h3{font-size:clamp(1.3rem,3vw,2rem);letter-spacing:-.02em;margin:0 0 .7rem;max-width:24ch}
.why p{color:var(--tx-soft);max-width:60ch;line-height:1.6}
@media(max-width:560px){.why{grid-template-columns:1fr;gap:.4rem}}
/* careers — job columns */
.job{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);margin-top:2.2rem}
.job.two-up{margin-top:clamp(2rem,5vw,3.4rem)}
@media(max-width:720px){.job{grid-template-columns:1fr}}
.job-col h3{font-size:1.2rem;letter-spacing:-.01em;margin:0 0 1rem}
.job-col p{color:var(--tx-soft);line-height:1.6;max-width:52ch}
/* footer mini-nav (why-us / careers) */

/* careers — an actual job listing, not a showcase */
.jobs-h{font-size:clamp(1.9rem,3.8vw,2.9rem);letter-spacing:-.03em;margin:0 0 1.1rem;max-width:26ch}
.listing{max-width:52rem;border:1px solid var(--line);border-radius:18px;padding:clamp(1.5rem,4vw,2.6rem);background:rgba(234,238,247,.04)}
.s-lt .listing,.s-lt2 .listing,.s-lt3 .listing{background:rgba(10,15,28,.045);border-color:rgba(10,15,28,.2)}
.listing-head{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line);margin-bottom:1.4rem}
.listing-head h2{font-size:clamp(1.4rem,2.6vw,1.85rem);letter-spacing:-.02em}
.jobtags{display:flex;gap:.45rem;flex-wrap:wrap}
.jobtags span{font-family:var(--fm);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .7rem;border:1px solid var(--line);border-radius:var(--pill);color:var(--tx-soft)}
.listing h3{font-size:1.05rem;margin:1.9rem 0 .7rem;letter-spacing:-.01em}
.listing .ticks{margin-top:.2rem}
.applylist{margin:.7rem 0 0;padding-left:1.25rem;display:grid;gap:.5rem;color:var(--tx)}
.apply-note{margin-top:1rem;color:var(--tx-soft)}
.listing .btn{margin-top:1.4rem}

/* ===== ONE-THEME MODE ===== the owner's call: no more dark/light strobing while scrolling.
   Sections are remapped by JS to a single family per mode (dark = navy shades only; light =
   pale shades only; mint/gold statement fields stay in both). html.light carries the mode. */
.langsw{flex:none;display:inline-flex;align-items:center;height:42px;padding:0 .95rem;border-radius:999px;border:1px solid var(--line);color:var(--tx);font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;transition:border-color .25s,color .25s,transform .25s var(--e)} /* EN⇄JA switch, styled as the tgl's sibling pill */
.langsw:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-2px)}
.m-langsw{display:inline-block;margin-top:.9rem;font-family:var(--fm);font-size:.78rem;letter-spacing:.1em;color:var(--tx-soft);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;width:fit-content}
.m-langsw:hover{color:var(--acc);border-color:var(--acc)}
html:not(.js) .langsw{display:inline-flex} /* the switch is a plain link — works without JS */
.tgl{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--tx);display:grid;place-items:center;cursor:pointer;font-size:1.05rem;line-height:1;transition:border-color .25s,transform .25s var(--e)}
.tgl:hover{border-color:var(--acc);transform:translateY(-2px)}
.tgl .sun{display:none}.tgl .moon{display:block}
html.light .tgl .sun{display:block}html.light .tgl .moon{display:none}
html.light{--glow-core:var(--lt-3);--cal-empty:rgba(10,15,28,.08);--cal-blank:rgba(10,15,28,.045)} /* the portal's circle + landing match in light too */
html.light .nav{background:transparent}
html.light .nav .row{background:rgba(250,238,232,.55);border-color:rgba(70,25,12,.14);box-shadow:0 12px 34px rgba(80,30,15,.16),inset 0 1px 0 rgba(255,255,255,.55)} /* warm glass over the pink world */
html.light .mobile,html.light .m-head{background:var(--lt)}
html.light .mobile{color:var(--tx-ink)}
html.light .m-brand,html.light .mclose{color:var(--tx-ink)}
html.light .mclose:hover{color:var(--rose-ink)}
html.light .m-nav a{color:var(--tx-ink);border-bottom-color:rgba(70,25,12,.16)}
html.light .m-nav a::before{color:rgba(70,25,12,.55)}
html.light .m-nav a::after{color:var(--rose-ink)}
html.light .m-nav a:hover,html.light .m-nav a:focus-visible,html.light .m-nav a[aria-current]{color:var(--rose-ink)}
html.light .m-nav a[aria-current]::before{color:var(--rose-ink)}
html.light .m-signoff{color:#6E3B30}
html.light .scrim{background:rgba(10,15,28,.3)}
html.light.morph footer.foot{background:var(--lt)!important}
html.light .rv-curtain i{background:linear-gradient(to bottom,rgba(141,46,26,0),var(--rose-ink))}
html.light .foot .huge .g{color:var(--rose-ink)}
html.light .foot-links a:hover{color:var(--rose-ink)}
html.light .foot-social a:hover,html.light .totop:hover{color:var(--rose-ink);border-color:var(--rose-ink)}
html.light .fcta{background:var(--rose-ink);color:#FFF4EE} /* the round CTA stamp: mint disc on the pink footer was the rejected pairing — reverse it warm */
html.light .fcta svg text{fill:#FFF4EE}
html.light .fcta:hover{box-shadow:0 24px 60px -20px rgba(141,46,26,.5)}
html.light .daynight .row::before{background:var(--gold-deep);box-shadow:0 0 0 4px rgba(124,90,14,.14)}
html.light .daynight .row:nth-child(3)::before,html.light .daynight .row:nth-child(4)::before{background:var(--teal-deep);box-shadow:0 0 0 4px rgba(12,95,80,.14)}
html.light .loader{background:var(--lt)}
html.light .ld-word{color:var(--mut-ink)}
html.light{--rose-pop:#8D2E1A} /* the "Empty chairs." accent deepens further — it lands on the coral field, so it needs the full rose-ink depth to clear 3:1 */
/* the service trays are now brand-coloured (each .svcN below) in both themes — no per-theme surface override */
html.light .ss-ticks button.on{background:var(--rose-ink)}
html.light .work a:hover .nm{color:var(--rose-ink)}
html.light .tp-rail i{background:var(--rose-ink)}
html.light .direct a:hover,html.light .ws-card:hover{border-color:var(--rose-ink)}
html.light .direct .ic{background:var(--rose-ink);color:#FFF4EE} /* contact icon chips: no bright mint on the pink field */
html.light .work a:hover .arw{background:var(--rose-ink);color:#FFF4EE;border-color:var(--rose-ink)}
html.light .funnel li.lose{color:#9E2A12;background:rgba(158,42,18,.14)} /* win/lose stay semantic red/green */
html.light .funnel li.win{color:var(--teal-deep);background:rgba(12,95,80,.14)}
html.light .tl .dot{background:var(--rose-ink)}
html.light .tl.last .dot{background:var(--gold-deep)}
html:not(.js) .tgl{display:none} /* no JS, no mode switch — don't show a dead control */
.ticks{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.7rem;max-width:60ch}
.ticks li{position:relative;padding-left:2.1rem;line-height:1.55} /* not grid: keeps inline <b> in normal flow */
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--acc);font-weight:800}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.6rem;margin-top:2.6rem;counter-reset:s}
.step{counter-increment:s}
.step .no{font-family:var(--fd);font-weight:800;font-size:2.4rem;letter-spacing:-.04em;color:var(--acc);line-height:1}
.step .no::before{content:"0" counter(s)}
.step h4{font-size:1.18rem;margin:.6rem 0 .35rem}
.step p{color:var(--tx-soft);font-size:.96rem}

/* featured-work list */
.work{margin-top:2.6rem;border-top:1px solid var(--line)}
.work a{display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(1rem,3vw,2.4rem);align-items:center;padding:clamp(1.5rem,3vw,2.3rem) 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--e)}
.work a:hover{padding-left:1rem}
.work .n{font-family:var(--fm);font-size:.74rem;letter-spacing:.14em;color:var(--tx-soft)}
.work .nm{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,5.2vw,3.6rem);letter-spacing:-.04em;color:var(--tx);transition:color .35s,transform .4s var(--e)}
.work a:hover .nm{color:var(--mint)}
.work .dc{color:var(--tx-soft);font-size:.98rem;max-width:34ch;justify-self:end;text-align:right}
.work .arw{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:1.2rem;transition:.4s;flex:none}
.work a:hover .arw{background:var(--mint);color:var(--ink);border-color:var(--mint);transform:rotate(-45deg)}
@media(max-width:820px){.work a{grid-template-columns:auto 1fr auto}.work .dc{display:none}}
/* scroll-driven spotlight: the row nearest the scroll focus line lights up (Robin Noguier feel). Enabled only when JS adds .sfx (never under reduced-motion); the list stays fully visible without it. Driven per-row by --p (0..1). */
.work.sfx a .nm{transition:none;transform:translate(calc(var(--p,0)*6px),0) scale(calc(1 + .06*var(--p,0)));transform-origin:left center;color:color-mix(in oklab,var(--mint) calc(var(--p,0)*100%),var(--tx));opacity:calc(.45 + .55*var(--p,0))}
.work.sfx a .n{transition:none;transform:translateX(calc(var(--p,0)*4px));color:color-mix(in oklab,var(--mint) calc(var(--p,0)*80%),var(--tx-soft));opacity:calc(.5 + .5*var(--p,0))}
.work.sfx a .dc{transition:none;transform:translateX(calc((1 - var(--p,0))*10px));opacity:calc(.35 + .65*var(--p,0))}
.work.sfx a .arw{transition:transform .4s var(--e),background .4s,color .4s;opacity:calc(.4 + .6*var(--p,0));border-color:color-mix(in oklab,var(--mint) calc(var(--p,0)*70%),var(--line))}
.work.sfx a:hover .nm{color:var(--mint);opacity:1}
.work.sfx a:hover .arw{opacity:1;border-color:var(--mint)}

/* Robin Noguier-style services showcase — full-height trays that glide as you scroll (layout
   skeleton borrowed from the reference at the owner's explicit request; type/colours ours).
   JS-built for motion users; the .work list is the no-JS / reduced-motion fallback and the
   single source of the copy. Section is s-ink, so mint is allowed. */
/* fallback list stays in the accessibility tree (sr-only) so screen readers always get all 5 services; its links are taken out of the tab order by JS */
html.js:not(.rm) .svcshow.ss-on .work{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ss-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ss-in{height:100vh;height:100svh;position:relative;display:grid;align-items:center}
.ss-slides{position:relative;height:min(76svh,44rem);width:100%}
.ss-slide{position:absolute;inset:0;visibility:hidden;will-change:transform;pointer-events:none}
.ss-slide.on{visibility:visible}
/* each service is an opaque CARD tray — the text sits INSIDE it, and each new card stacks over the pile */
.ss-card{position:absolute;inset:0;background:var(--ink-2);border:1px solid var(--line);border-radius:clamp(18px,2.5vw,26px);padding:clamp(1.6rem,4.5vw,3.6rem);display:grid;align-content:center;overflow:hidden;pointer-events:auto;box-shadow:0 -18px 60px rgba(10,6,8,.45);will-change:transform}
.ss-card .num{position:absolute;top:clamp(.9rem,2.5vw,1.8rem);right:clamp(1.2rem,3vw,2.4rem);font-family:var(--fm);font-size:clamp(3rem,8vw,6rem);color:var(--tx);opacity:.1;letter-spacing:-.04em;pointer-events:none}
.ss-card .cin{display:grid;gap:clamp(.9rem,2vw,1.3rem);justify-items:start}
.ss-card .nm{font-family:var(--fd);font-weight:800;font-size:clamp(2.8rem,8.5vw,6.4rem);letter-spacing:-.05em;line-height:.92;color:var(--tx);transition:color .35s}
.ss-card .nm:hover{color:var(--mint)}
.ss-card .dc{color:var(--tx-soft);font-size:clamp(1rem,1.5vw,1.15rem);max-width:38ch}
.ss-card .go{width:clamp(46px,5.5vw,58px);height:clamp(46px,5.5vw,58px);border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:1.25rem;color:var(--tx);transition:.35s}
.ss-card .nm:hover~.go,.ss-card .go:hover{background:var(--mint);color:var(--ink);border-color:var(--mint);transform:rotate(-45deg)}
.ss-card .shade{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none} /* dims a card as the next one covers it */
/* colored service cards — each panel a brand colour with ink text; wins over the dark/light .ss-card bg */
.ss-card.svc0{background:var(--cat-edu)}.ss-card.svc1{background:var(--cat-trust)}.ss-card.svc2{background:var(--cat-proof)}.ss-card.svc3{background:var(--cat-promo)}.ss-card.svc4{background:var(--mint)}
.ss-card[class*="svc"]{border-color:transparent;box-shadow:0 -18px 60px rgba(0,0,0,.4)}
.ss-card[class*="svc"] .num{color:#080B14;opacity:.16}
.ss-card[class*="svc"] .nm,.ss-card[class*="svc"] .go{color:#080B14}
.ss-card[class*="svc"] .dc{color:rgba(8,11,20,.78)}
.ss-card[class*="svc"] .go{border-color:rgba(8,11,20,.5)}
.ss-card[class*="svc"] .nm:hover{color:#080B14}
.ss-card[class*="svc"] .nm:hover~.go,.ss-card[class*="svc"] .go:hover{background:#080B14;color:#fff;border-color:#080B14}
.ss-card[class*="svc"] .shade{background:#080B14}
.ss-slide.intro{display:grid;align-content:center}
.ss-slide.intro h2{font-size:clamp(2.8rem,9vw,6.5rem);letter-spacing:-.045em;max-width:14ch!important}
.ss-ticks{position:absolute;right:clamp(.9rem,2.5vw,1.6rem);top:50%;transform:translateY(-50%);display:grid;gap:14px;z-index:2}
.ss-ticks button{position:relative;width:26px;height:4px;border:0;border-radius:2px;background:var(--line);cursor:pointer;padding:0;transition:background .3s,transform .3s}
.ss-ticks button::after{content:"";position:absolute;inset:-7px -10px} /* invisible finger-sized hit zone */
.ss-ticks button.on{background:var(--mint);transform:scaleX(1.35)}
@media(max-height:560px){.ss-card{padding:clamp(1.2rem,3vw,2rem)}.ss-card .nm{font-size:clamp(2.2rem,6.5vw,3.6rem)}.ss-slide.intro h2{font-size:clamp(2rem,6.5vw,3.6rem)}} /* short landscape phones: shrink the card type */

/* faq */
.faq{max-width:820px;margin:2.4rem auto 0}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.3rem 0;font-family:var(--fd);font-weight:700;font-size:clamp(1.05rem,2vw,1.35rem);letter-spacing:-.02em;color:var(--tx);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:28px;height:28px;position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--acc);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
.faq summary .pm::before{width:14px;height:2px}.faq summary .pm::after{width:2px;height:14px;transition:transform .3s}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq .a{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .42s var(--e),opacity .3s ease}
.faq details[open] .a{grid-template-rows:1fr;opacity:1}
.faq details.opening .a{grid-template-rows:0fr;opacity:0}
.faq details.closing .a{grid-template-rows:0fr;opacity:0}
.faq .a>p{margin:0;overflow:hidden;min-height:0;padding:0 0 1.4rem;color:var(--tx-soft);max-width:64ch;line-height:1.65;transition:padding-bottom .42s var(--e)} /* the padding must fold too, or it props the closing row open */
.faq details.closing .a>p{padding-bottom:0}
html.rm .faq .a{transition:none}

/* stat callout (21x) */
.stat{display:flex;gap:1.6rem;align-items:center;padding:clamp(1.6rem,3vw,2.2rem);border-radius:20px;background:rgba(234,238,247,.05);border:1px solid var(--line);margin-top:1.8rem;flex-wrap:wrap}
.stat .num{font-family:var(--fd);font-weight:800;font-size:clamp(3rem,8vw,5rem);letter-spacing:-.04em;color:var(--acc);line-height:.85}
.stat .num .x{color:var(--acc2)}
.stat .cap{color:var(--tx);max-width:44ch}
.stat .src{display:block;font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-soft);margin-top:.6rem}

/* ad card mockup */
.adcard{max-width:400px;border-radius:18px;overflow:hidden;background:var(--surf-2);border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.adcard .top{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem}
.adcard .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--mint),var(--gold))}
.adcard .top b{font-size:.9rem;color:var(--txt)}.adcard .top .sp{margin-left:auto;font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.adcard .im{aspect-ratio:16/10;background:linear-gradient(135deg,#121A2E,#1A2440);display:grid;place-items:center;color:var(--mut);font-family:var(--fm);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:1rem}
.adcard .bt{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.9rem 1rem;color:var(--txt)}
.adcard .bt b{font-size:.98rem;display:block}.adcard .bt div>span{font-size:.78rem;color:var(--mint);display:block;margin-top:2px}
.adcard .bt .cta{background:var(--mint);color:#080B14;border-radius:8px;padding:.5rem .9rem;font-size:.82rem;font-weight:600}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:2rem}
.pillar{padding:1.4rem;border-radius:16px;border:1px solid var(--line);background:rgba(234,238,247,.06)}
.s-ink .pillar{background:rgba(234,238,247,.05)}
.pillar .dot{width:14px;height:14px;border-radius:50%;margin-bottom:.9rem}
.pillar h4{font-size:1.15rem;margin-bottom:.35rem}.pillar p{font-size:.9rem;color:var(--tx-soft)}
.p-edu .dot{background:var(--mint)}.p-trust .dot{background:var(--gold)}.p-proof .dot{background:var(--rose)}.p-promo .dot{background:var(--cat-promo)}
/* each pillar box wears its calendar colour (owner request — mirrors the month heatmap legend) */
/* solid tile colours — the pillars must read as the exact same swatches as the calendar days */
.pillar.p-edu{background:var(--cat-edu);border-color:transparent}
.pillar.p-trust{background:var(--cat-trust);border-color:transparent}
.pillar.p-proof{background:var(--cat-proof);border-color:transparent}
.pillar.p-promo{background:var(--cat-promo);border-color:transparent}
.pillar.p-edu h4,.pillar.p-trust h4,.pillar.p-proof h4,.pillar.p-promo h4{color:#080B14}
.pillar.p-edu p,.pillar.p-trust p,.pillar.p-proof p,.pillar.p-promo p{color:rgba(8,11,20,.78)}
.pillar.p-edu .dot,.pillar.p-trust .dot,.pillar.p-proof .dot,.pillar.p-promo .dot{background:rgba(8,11,20,.35)}

/* carousel */
.carousel{max-width:420px;border-radius:20px;border:1px solid var(--line);background:rgba(234,238,247,.05);padding:2rem;text-align:center;margin-top:1.6rem}
.carousel .n{font-family:var(--fm);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-soft)}
.carousel .ti{font-family:var(--fd);font-weight:800;font-size:1.7rem;letter-spacing:-.03em;margin:.6rem 0 .4rem;color:var(--tx)}
.carousel .dots{display:flex;justify-content:center;gap:.4rem;margin-top:1.2rem}
.carousel .dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.carousel .dots i.on{background:var(--mint)}

/* calendar heatmap */
.cal{margin-top:1.6rem;max-width:420px;background:rgba(234,238,247,.07);border:1px solid var(--line);border-radius:18px;padding:1.3rem} /* card face — also what the bendy-edge effect draws */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-grid i{aspect-ratio:1;border-radius:6px;background:var(--cal-empty)} /* empty slot — must read on the pink card, so the month grid always shows a full rectangle */
.cal-grid i.x{background:var(--cal-blank)} /* blank lead-in before the 1st — part of the frame, never painted */
.cal-grid i.e{background:var(--cat-edu)}.cal-grid i.t{background:var(--cat-trust)}.cal-grid i.p{background:var(--cat-proof)}.cal-grid i.m{background:var(--cat-promo)}
.cal-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:1rem;font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-soft)}
.cal-legend span{display:inline-flex;align-items:center;gap:.4rem}.cal-legend b{width:11px;height:11px;border-radius:3px;display:inline-block}

/* chat */
.chat{max-width:400px;border-radius:20px;border:1px solid var(--line);background:rgba(234,238,247,.05);padding:1.2rem;display:flex;flex-direction:column;gap:.6rem;margin-top:1.6rem}
.chat .time{text-align:center;font-family:var(--fm);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-soft);margin-bottom:.3rem}
.bub{max-width:82%;padding:.7rem .95rem;border-radius:16px;font-size:.92rem;line-height:1.4}
.bub.them{align-self:flex-start;background:rgba(234,238,247,.08);color:var(--tx);border-bottom-left-radius:5px}
.bub.us{align-self:flex-end;background:var(--mint);color:#080B14;border-bottom-right-radius:5px}
html.js .chat .bub{opacity:0;transform:translateY(8px);transition:opacity .5s var(--e),transform .5s var(--e)}
.chat.play .bub.in{opacity:1;transform:none}
html.rm .chat .bub{opacity:1;transform:none}

/* day / night */
/* around-the-clock timeline: a rail with day/night dots — gold while the sun is up, mint after
   hours — so the four moments read as one continuous 24h line */
.daynight{display:grid;gap:0;margin-top:1.6rem;max-width:60ch;position:relative}
.daynight .row{display:grid;grid-template-columns:6.4rem 1fr;gap:1rem;padding:1.15rem 0 1.15rem 2.2rem;position:relative}
/* the rail runs dot-to-dot as per-row segments, so it always terminates at the last dot no matter how the text wraps */
.daynight .row:not(:last-child)::after{content:"";position:absolute;left:6px;top:calc(1.32rem + 14px);bottom:calc(-1.32rem - 1px);width:1px;background:var(--line)}
.daynight .row::before{content:"";position:absolute;left:0;top:1.32rem;width:13px;height:13px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(244,204,133,.12)}
.daynight .row:nth-child(3)::before,.daynight .row:nth-child(4)::before{background:var(--mint);box-shadow:0 0 0 4px rgba(95,227,198,.12)}
.daynight dt{font-family:var(--fm);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);padding-top:.2rem}
.daynight dd{margin:0;color:var(--tx-soft);transition:color .5s var(--e)}
.daynight .row.lit dd{color:var(--tx)}

/* timeline (no-show) */
.timeline{margin-top:2.2rem;display:grid;gap:0;position:relative;max-width:640px}
.tl{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding-bottom:1.8rem;position:relative}
.tl .dot{width:16px;height:16px;border-radius:50%;background:var(--mint);margin-top:5px;position:relative;z-index:1}
.tl:not(:last-child)::before{content:"";position:absolute;left:7px;top:16px;bottom:-4px;width:2px;background:var(--line)}
.tl.last .dot{background:var(--gold)}
.tl h4{font-size:1.1rem;margin-bottom:.25rem}.tl p{color:var(--tx-soft);font-size:.95rem}
.tl .msg{margin-top:.7rem;background:rgba(234,238,247,.06);border:1px solid var(--line);border-radius:12px;border-top-left-radius:4px;padding:.7rem .9rem;font-size:.9rem;color:var(--tx);max-width:30ch}

/* before/after funnels */
.funnels{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.8rem}
.funnel{border:1px solid var(--line);border-radius:18px;padding:1.4rem;background:rgba(234,238,247,.04)}
.funnel h4{font-family:var(--fm);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-soft);font-weight:500;margin-bottom:1rem}
.funnel ol{list-style:none;padding:0;margin:0;display:grid;gap:1.5rem}
.funnel li{padding:.7rem .9rem;border-radius:10px;background:rgba(234,238,247,.06);text-align:center;font-size:.92rem;position:relative}
.funnel li.lose{background:rgba(255,140,122,.16);color:var(--rose)}
.funnel li.win{background:rgba(95,227,198,.16);color:var(--mint)}
.funnel li:not(:last-child)::after{content:"↓";position:absolute;left:50%;bottom:-1.2rem;transform:translateX(-50%);color:var(--tx-soft);font-size:.95rem;line-height:1;opacity:.75}
@media(max-width:600px){.funnels{grid-template-columns:1fr}}
/* the comparison plays out on scroll: rows light level by level in BOTH columns together,
   ending on the red "leave" vs the mint "booked chair" (reduced-motion sees all lit) */
html.js:not(.rm) .funnels.seq .funnel li{opacity:.5;transition:opacity .45s var(--e)}
html.js:not(.rm) .funnels.seq .funnel li.lit{opacity:1}

/* obys template scroller — native horizontal scroll by default (all cards reachable, reduced-motion safe); JS upgrades it to a grab-and-drag marquee */
.ws{margin-top:2.4rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.ws::-webkit-scrollbar{display:none}
.ws-row{display:flex;gap:20px;width:max-content;padding:6px 0}
.ws.ws-js{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ws.ws-js.grabbing{cursor:grabbing}
html:not(.rm) .ws.ws-js .ws-row{will-change:transform}
.ws-card{width:clamp(240px,32vw,340px);flex:none;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:rgba(234,238,247,.05);transition:transform .4s var(--e),border-color .4s}
.ws-card:hover{transform:translateY(-6px);border-color:var(--mint)}
.ws-chrome{display:flex;gap:6px;padding:10px 12px;background:rgba(8,11,20,.6)}
.ws-chrome i{width:8px;height:8px;border-radius:50%;background:rgba(234,238,247,.25)}
.ws-shot{aspect-ratio:16/10;overflow:hidden;background:#080B14}
.ws-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform 2s var(--e)}
.ws-card:hover .ws-shot img{transform:scale(1.05)}
.ws-meta{padding:.9rem 1.1rem;border-top:1px solid var(--line)}
.ws-meta b{display:block;color:var(--tx);font-size:1rem}
.ws-meta span{font-family:var(--fm);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-soft)}

/* OBYS-principle vertical template showcase (websites page): full-screen cards glide vertically,
   giant ghost name behind, index + category, mint progress rail. JS-built for motion users; the
   drag rows are the reduced-motion / no-JS fallback. Every card links to its live demo. */
.tplshow .ws{display:none}
.tp-hold{position:relative}
/* a self-contained browse box: hover + wheel scrolls the demos, the page itself never moves;
   move the cursor off the box and the page scrolls past normally */
.tp-stage{position:relative;height:min(86vh,760px);overflow:hidden;overflow:clip;touch-action:pan-y} /* clip, not hidden: focus/find-in-page must never scroll the box's own overflow (it would shear the whole frame) */
.tp-br{position:absolute;top:50%;transform:translateY(-50%);width:clamp(12px,1.6vw,22px);height:clamp(240px,52vh,430px);z-index:2;pointer-events:none;border:2px solid var(--tx);opacity:.8}
.tp-br.l{left:calc(50% - min(23vw,280px) - clamp(26px,3vw,48px));border-right:0}
.tp-br.r{right:calc(50% - min(23vw,280px) - clamp(26px,3vw,48px));border-left:0}
@media(max-width:700px){.tp-br.l{left:calc(50% - 39vw - 14px)}.tp-br.r{right:calc(50% - 39vw - 14px)}}
.tp-row .ws-card.dim{filter:grayscale(.85);opacity:.5}
.tp-ghost{position:absolute;left:2vw;top:50%;transform:translateY(-50%);font-family:var(--fd);font-weight:800;font-size:clamp(4rem,15vw,12rem);letter-spacing:-.05em;line-height:.9;color:var(--tx);opacity:.07;pointer-events:none;white-space:nowrap;z-index:0}
.tp-row{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;gap:clamp(1.4rem,3vw,2.6rem);width:max-content;will-change:transform;z-index:1;padding:0 6vw}
.tp-row .ws-card{width:min(46vw,560px);flex:none;pointer-events:auto;will-change:transform;box-shadow:0 40px 90px -40px rgba(0,0,0,.6);transition:border-color .4s,filter .5s var(--e),opacity .5s var(--e)} /* transform transition off — the stage writes it per frame */
@media(max-width:700px){.tp-row .ws-card{width:min(78vw,560px)}}
.tp-meta{position:absolute;left:clamp(1.3rem,4vw,3rem);bottom:clamp(1.3rem,4vh,2.4rem);z-index:2;font-family:var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-soft)}
.tp-meta span{font-size:.62rem}
.tp-rail{position:absolute;left:50%;bottom:clamp(1.2rem,4vh,2rem);transform:translateX(-50%);width:min(38vw,320px);height:2px;background:var(--line);z-index:2;border-radius:2px;overflow:hidden}
.tp-rail i{position:absolute;inset:0;background:var(--mint);transform-origin:left;transform:scaleX(0)}

/* HELLOMONDAY-principle bendy cards: the card's surface is redrawn as an SVG whose edges curve
   smoothly toward the cursor (JS module; fine-pointer motion users only — others keep the
   plain card, whose own background/border are restored untouched). */
.bend-wrap{position:relative}
.bend-svg{position:absolute;left:-36px;top:-36px;width:calc(100% + 72px);height:calc(100% + 72px);pointer-events:none;z-index:0;transition:opacity .8s var(--e)}
.bend-wrap>*:not(.bend-svg){position:relative;z-index:1;height:100%} /* the card fills its wrap so the drawn face and the box always agree (grid-stretched funnels) */
html.js:not(.rm) .bend-wrap:has(>.reveal:not(.in)) .bend-svg{opacity:0} /* the painted face honours the card's own reveal */

/* CUBERTO-principle word-by-word reveals: split headings cascade in one word at a time */
html.js .reveal.wsplit{opacity:1;transform:none} /* the words carry the entrance, not the container */
html.js:not(.rm) .wsplit .w{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .4s var(--e),transform .4s var(--e);transition-delay:calc(var(--wi,0)*38ms)} /* snappy — a heading must never read as missing while you scroll */
html.js:not(.rm) .wsplit.in .w{opacity:1;transform:none}
html.js:not(.rm) .final-l h2 .w{display:block} /* the stacked closing line keeps its one-thought-per-line layout */
/* INSTRUMENT-principle stacked closing: each line rises from behind its own mask, heavily staggered */
html.js .final-l h2.instr{opacity:1;transform:none} /* the lines carry the entrance, not the container */
html.js:not(.rm) .final-l h2.instr .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.06em}
html.js:not(.rm) .final-l h2.instr .ln>i{display:block;font-style:normal;transform:translateY(118%);transition:transform 1s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--li,0)*115ms)}
html.js:not(.rm) .final-l h2.instr.in .ln>i{transform:none}
html.js:not(.rm) .final-l h2.instr:not(.in) .ln>i{animation:instrsafe .8s var(--e) 4.2s both} /* force-show if the observer never fires */
@keyframes instrsafe{to{transform:none}}
html.rm .final-l h2.instr .ln>i{transform:none}
html.rm .wsplit .w{opacity:1!important;transform:none!important}

/* OTTOGRAFIE-principle film strip (content page): the carousel opens across the screen on
   scroll, sweeping right to left, the section line showing through the gaps. */
.filmshow .slider{display:none}
.filmshow .two{grid-template-columns:1fr}
.fs-hold{position:relative}
.fs-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;align-items:center}
.fs-ghost{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--fd);font-weight:800;font-size:clamp(2.6rem,8.5vw,7rem);letter-spacing:-.045em;line-height:.95;color:var(--tx);opacity:.08;pointer-events:none;padding:0 4vw}
.fs-row{position:relative;display:flex;gap:clamp(1.6rem,4vw,3rem);width:max-content;will-change:transform;padding:0 2vw}
.fs-card{height:min(58svh,30rem);aspect-ratio:4/5;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.5);transition:transform .45s var(--e);flex:none;cursor:zoom-in}

/* slide lightbox: tap a strip card and the sample enlarges over the blurred page */
.lbx{position:fixed;inset:0;z-index:220;display:grid;place-items:center;background:rgba(4,6,12,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .3s ease;cursor:zoom-out}
.lbx.on{opacity:1;pointer-events:auto}
.lbx img{max-width:min(90vw,760px);max-height:86vh;border-radius:14px;box-shadow:0 40px 100px -30px rgba(0,0,0,.6)}
.fs-card:hover{transform:translateY(-12px) rotate(-1deg)}
.fs-card img{width:100%;height:100%;object-fit:cover;display:block}

/* generic screen-reader-only utility */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;list-style:none}

/* form */
.form{display:grid;gap:1rem;max-width:34rem}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--fm);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-soft)}
.field input,.field textarea{font:inherit;padding:.85rem 1rem;border-radius:12px;border:1px solid var(--line);background:rgba(234,238,247,.07);color:var(--tx);color-scheme:dark}
.field input::placeholder,.field textarea::placeholder{color:var(--mut);opacity:1}
.s-ink .field input,.s-ink .field textarea{background:rgba(234,238,247,.06);color:var(--tx)}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--acc);outline-offset:1px}
.direct{display:grid;gap:.8rem;margin-top:.4rem}
.direct a{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;border-radius:14px;border:1px solid var(--line);background:rgba(234,238,247,.06);transition:border-color .3s,transform .3s var(--e)}
.s-ink .direct a{background:rgba(234,238,247,.05)}
.direct a:hover{border-color:var(--mint);transform:translateY(-2px)}
.direct .ic{width:38px;height:38px;border-radius:10px;background:var(--mint);color:var(--ink);display:grid;place-items:center;font-weight:800;flex:none}
.direct b{display:block;color:var(--tx)}.direct span{font-size:.85rem;color:var(--tx-soft)}

/* redesigned contact — friendly, chip-based */
.contact-x .ct-intro{max-width:20ch}
.contact-x .ct-intro .lead{max-width:52ch}
.contact-x h1.ct-h{max-width:18ch}
.ct-form{max-width:42rem;margin-top:clamp(2rem,5vw,3.4rem);display:grid;gap:clamp(1.6rem,3.4vw,2.3rem)}
.ct-group{border:0;margin:0;padding:0;min-width:0;display:grid;gap:.8rem}
.ct-group legend{padding:0;font-family:var(--fd);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.45rem);letter-spacing:-.02em;color:var(--tx)}
.ct-hint{font-size:.9rem;color:var(--tx-soft);margin:-.3rem 0 .1rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:.62rem 1.1rem;border-radius:var(--pill);border:1px solid var(--line);font-size:.95rem;color:var(--tx);transition:background .2s var(--e),border-color .2s var(--e),color .2s var(--e),transform .2s var(--e)}
.chip:hover span{border-color:var(--acc);transform:translateY(-1px)}
.chip:has(input:checked) span{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.chip:has(input:focus-visible) span{outline:2px solid var(--acc);outline-offset:2px}
.ct-fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.ct-fields{grid-template-columns:1fr}}
.opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--tx-soft)}
.ct-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.filebtn{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.15rem;border-radius:12px;border:1px dashed var(--line);cursor:pointer;color:var(--tx);width:fit-content;max-width:100%;transition:border-color .2s var(--e)}
.filebtn:hover{border-color:var(--acc)}
.ct-file:has(input:focus-visible) .filebtn{outline:2px solid var(--acc);outline-offset:2px}
.filebtn .clip{width:24px;height:24px;border-radius:50%;background:var(--acc);color:var(--on-acc);display:grid;place-items:center;font-weight:700;flex:none;line-height:1}
.filebtn .fname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-filenote{font-size:.82rem;color:var(--tx-soft);margin-top:.55rem;max-width:46ch}
.ct-terms{margin-top:.2rem}

/* slot placeholder */
.slot{border:1px dashed var(--line);border-radius:16px;padding:2rem;text-align:center;color:var(--tx-soft);font-family:var(--fm);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(234,238,247,.04);margin-top:1.4rem}

/* final cta */
.final{text-align:center}
.final h2{font-size:clamp(2.6rem,7vw,5.4rem);letter-spacing:-.05em}
.final p{font-size:1.15rem;color:var(--tx-soft);max-width:50ch;margin:1.4rem auto 2.2rem}
/* Instrument-style stacked mega-type variant (home's closing line): left-aligned, one thought per line */
.final.final-l{text-align:left}
.final.final-l h2{font-size:clamp(3.4rem,12vw,9rem);line-height:.9;letter-spacing:-.055em}
.final.final-l h2 span{display:block}
.final.final-l p{margin:1.6rem 0 2.4rem}

/* footer basement-style */
.foot{padding:clamp(3rem,7vw,5rem) 0 2.4rem;position:relative;overflow:hidden}
.foot .wrap{position:relative;z-index:1}
/* Dennis-style CTA row: a hairline with a big round magnetic CTA sitting on it */
.foot-cta{position:relative;margin:clamp(3rem,7vw,5rem) 0 clamp(2rem,5vw,3.2rem);display:flex;justify-content:flex-end} /* rule behind the stamp removed on the owner's call (2026-07-04) */
/* stamp-style: the phrase runs around the rim (SVG text on a circular path, slowly rotating), the arrow sits dead-centre */
.fcta{flex:none;position:relative;width:clamp(150px,20vw,196px);aspect-ratio:1;border-radius:50%;background:var(--mint);color:#080B14;display:grid;place-items:center;margin-top:calc(clamp(150px,20vw,196px)/-2);transition:transform .35s var(--e),box-shadow .35s var(--e)}
@media(max-width:700px){.foot-cta{justify-content:center}.fcta{margin-top:0}} /* narrow screens: the raised stamp lands on the headline ("…way.") — sit it fully below the rule, centred, instead */
.fcta:hover{box-shadow:0 24px 60px -20px rgba(95,227,198,.5)} /* the magnetic pull owns the transform — a CSS hover transform would be clobbered mid-hover */
.fcta svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fcta svg text{font-family:var(--fm);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;fill:#080B14}
html:not(.rm) .fcta svg{animation:spin 18s linear infinite}
.fcta .ar{display:block;font-size:1.5rem;transition:transform .35s var(--e)}
.fcta:hover .ar{transform:translateX(5px)}
/* hairy interactive North Star above the footer headline (the canvas hair is added by JS; reduced-motion / no-JS just show the logo). Canvas gets explicit width/height — inset alone does not size a canvas. */
.fstar{position:relative;width:clamp(110px,14vw,160px);aspect-ratio:1;margin:0 0 clamp(1.8rem,4vw,2.6rem)}
.fstar svg{position:absolute;inset:0;width:100%;height:100%}
.fstar canvas{position:absolute;left:-75%;top:-75%;width:250%;height:250%;pointer-events:none}
.foot .huge{font-family:var(--fd);font-weight:800;font-size:clamp(3rem,13vw,9rem);letter-spacing:-.05em;line-height:.9;color:var(--tx);margin-bottom:clamp(2rem,5vw,3.5rem)}
.foot .huge .g{color:var(--mint)}
/* v2: type-led, decluttered — Pentagram-scale contact lines instead of the link grid */
.foot-links{display:grid;margin:0 0 clamp(2rem,5vw,3rem)}
.foot-links a{font-family:var(--fd);font-weight:800;font-size:clamp(1.15rem,4.6vw,3.4rem);letter-spacing:-.03em;line-height:1.15;padding:clamp(.5rem,1.4vw,.9rem) 0;border-top:1px solid var(--line);color:var(--tx);overflow-wrap:anywhere;transition:color .3s,padding-left .35s var(--e)}
.foot-links a:hover{color:var(--mint);padding-left:1rem}
.foot .base{margin-top:clamp(2.4rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem 1.6rem;color:var(--tx-soft);font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.base-r{display:flex;align-items:center;gap:1rem 1.4rem;flex-wrap:wrap}
.foot-social{display:flex;align-items:center;gap:.6rem}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;color:var(--tx-soft);transition:color .3s,border-color .3s,transform .3s var(--e)}
.foot-social a:hover{color:var(--mint);border-color:var(--mint);transform:translateY(-2px)}
.totop{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-soft);background:none;border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem;cursor:pointer;transition:color .3s,border-color .3s,transform .3s var(--e)}
.totop:hover{color:var(--mint);border-color:var(--mint);transform:translateY(-2px)}
.totop .ar{font-size:.85rem;line-height:1}

/* the refokus curtain: the page's colour layer lifts like a card off the footer fixed beneath it.
   Motion users only (scoped to html.morph); reduced-motion / no-JS get the normal in-flow footer. */
/* REFOKUS reveal: the footer is a stationary card pinned BEHIND the last section; that section is
   an opaque sheet pulled up over it (the footer carries a negative margin so it sits underneath).
   As you scroll, the section slides up and off, uncovering the footer beneath — the footer itself
   never moves. A jagged row of gradient bars curtains the seam. Motion users only. */
html.morph footer.foot{z-index:-2;background:var(--ink)!important} /* sits beneath the colour layer until it lifts; self-paints ink since the lifted layer no longer covers it */
.bg-layer.lift.capped{border-radius:0 0 26px 26px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)} /* the curved card-lift only where a .final curtain skirts the seam (home + service pages); bare subpages (careers/contact/404) reveal the footer with a clean straight edge */
html.morph .reveal-cap{position:relative} /* anchors the curtain at the section's trailing edge */
.rv-curtain{position:absolute;left:0;right:0;bottom:0;height:clamp(80px,14vh,150px);display:flex;gap:2px;align-items:flex-end;pointer-events:none;z-index:1}
.rv-curtain i{flex:1;height:100%;background:linear-gradient(to bottom,rgba(95,227,198,0),var(--mint))}
.rv-curtain i:nth-child(2n){height:66%}
.rv-curtain i:nth-child(3n){height:88%}
.rv-curtain i:nth-child(4n){height:50%}
.rv-curtain i:nth-child(5n){height:76%}
.rv-curtain i:nth-child(7n){height:40%}

:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:4px}

/* live slider */
.slider{position:relative;max-width:440px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#10172A;margin-top:1.6rem}
.slider .track{display:flex;transition:transform .55s var(--e)}
.slider .track img{width:100%;height:auto;flex:none;display:block} /* height:auto keeps the 4:5 ratio — the width/height attrs only reserve space pre-load */
.slider button.sl{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(8,11,20,.55);color:var(--txt);border:0;cursor:pointer;display:grid;place-items:center;font-size:1.2rem;backdrop-filter:blur(4px);transition:background .3s;z-index:2}
.slider button.sl:hover{background:rgba(8,11,20,.85)}
.slider .prev{left:12px}.slider .next{right:12px}
.slider .dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:.4rem;z-index:2}
.slider .dots i{width:7px;height:7px;border-radius:50%;background:rgba(234,238,247,.4);cursor:pointer;transition:background .3s}
.slider .dots i.on{background:var(--mint)}
/* calendar day names */
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-days span{text-align:center;font-family:var(--fm);font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-soft)}

/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* page transition */
@media (prefers-reduced-motion: no-preference){body{animation:pagein .5s ease both}}
@keyframes pagein{from{opacity:0}to{opacity:1}}

/* scroll-driven colour morph */
/* html self-paints the theme colour: on mobile the URL-bar resize can briefly open a gap between
   the lifted colour sheet and the footer beneath — any uncovered pixel must be brand, never white
   (it also shines through the curtain bars' transparent tops as a scroll "glitch") */
html{background:var(--ink,#080B14)}
html.light{background:var(--lt,#F0B7A6)}
.bg-layer{position:fixed;inset:0;z-index:-1;background:#080B14;pointer-events:none;will-change:transform}
html.morph body{background:transparent}
html.morph main section{background:transparent!important}
html.morph footer{background:transparent!important}

/* (removed 2026-07-04: the .g-obj blur(32px) gradient blob + its gospin/gob1-4 animations were
   dead CSS — never injected into any page's DOM. The hero glow that actually renders is .aura,
   a cheap radial-gradient with no blur filter, faded out during the portal zoom.) */

/* loading screen */
html.loading{background:#080B14}
.loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:none;place-items:center;transform:translateY(0);transition:transform .8s cubic-bezier(.76,0,.24,1)}
html.loading .loader{display:grid}
.loader.lift{transform:translateY(-100%)}
.ld-in{display:grid;place-items:center;gap:1.1rem;text-align:center}
.ld-star{width:66px;height:66px;filter:drop-shadow(0 0 22px rgba(95,227,198,.45))}
html.loading .ld-star{animation:ldstar 1s cubic-bezier(.22,1,.3,1) both}
@keyframes ldstar{0%{opacity:0;transform:scale(.35) rotate(-30deg)}60%{opacity:1;transform:scale(1.05) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.ld-word{font-family:var(--fm);font-size:.64rem;letter-spacing:.32em;text-transform:uppercase;color:#94A1BC;opacity:0}
html.loading .ld-word{animation:ldword .7s ease .35s forwards}
@keyframes ldword{to{opacity:1}}

/* Locomotive-style logo hover glitch */
.brand-word{position:relative;display:inline-block;white-space:nowrap}
.brand-word::before,.brand-word::after{content:attr(data-text);position:absolute;inset:0;white-space:nowrap;opacity:0;pointer-events:none}
/* the nav logo = the same minimal RGB-split colour glitch as the footer motto, fired on hover of
   the whole brand link (the star gives a tiny complementary shake). Pure CSS, no JS. */
html:not(.rm) .brand:hover svg{animation:glShake .18s steps(3,end) 1}
html:not(.rm) .brand:hover .brand-word::before{opacity:1;color:var(--glitch-a);animation:glLogoI .16s steps(2,end) 1 forwards}
html:not(.rm) .brand:hover .brand-word::after{opacity:1;color:var(--glitch-b);animation:glLogoII .16s steps(2,end) 1 forwards}
@keyframes glI{0%{clip-path:inset(0 0 82% 0);transform:translate(-5px,-1px) skewX(-3deg)}30%{clip-path:inset(44% 0 38% 0);transform:translate(4px,1px) skewX(2deg)}60%{clip-path:inset(70% 0 8% 0);transform:translate(-4px,0)}85%{clip-path:inset(18% 0 62% 0);transform:translate(3px,-1px)}100%{clip-path:inset(0 0 100% 0);transform:none;opacity:0}}
@keyframes glII{0%{clip-path:inset(22% 0 60% 0);transform:translate(5px,1px) skewX(3deg)}30%{clip-path:inset(60% 0 20% 0);transform:translate(-4px,-1px) skewX(-2deg)}60%{clip-path:inset(8% 0 78% 0);transform:translate(4px,0)}85%{clip-path:inset(50% 0 30% 0);transform:translate(-3px,1px)}100%{clip-path:inset(0 0 100% 0);transform:none;opacity:0}}
@keyframes glShake{0%,100%{transform:none}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,0)}}
@keyframes glLogoI{0%{clip-path:inset(0 0 82% 0);transform:translate(-2px,0)}30%{clip-path:inset(44% 0 38% 0);transform:translate(2px,0)}60%{clip-path:inset(70% 0 8% 0);transform:translate(-1px,0)}85%{clip-path:inset(18% 0 62% 0);transform:translate(1px,0)}100%{clip-path:inset(0 0 100% 0);transform:none;opacity:0}}
@keyframes glLogoII{0%{clip-path:inset(22% 0 60% 0);transform:translate(2px,0)}30%{clip-path:inset(60% 0 20% 0);transform:translate(-2px,0)}60%{clip-path:inset(8% 0 78% 0);transform:translate(1px,0)}85%{clip-path:inset(50% 0 30% 0);transform:translate(-1px,0)}100%{clip-path:inset(0 0 100% 0);transform:none;opacity:0}}

/* Footer headline glitch (same recipe as the logo). Also fires once via .fire when scrolled
   into view, so touch users (no hover) see it too. */
.glitch-h{position:relative}
.glitch-h::before,.glitch-h::after{content:attr(data-text);position:absolute;inset:0;white-space:pre;pointer-events:none;opacity:0;line-height:inherit;letter-spacing:inherit}
html:not(.rm) .glitch-h:hover::before,html:not(.rm) .glitch-h.fire::before{opacity:1;color:var(--glitch-a);animation:glI .16s steps(2,end) 1 forwards} /* locomotive-fast; forwards holds the collapsed end state (no residue) */
html:not(.rm) .glitch-h:hover::after,html:not(.rm) .glitch-h.fire::after{opacity:1;color:var(--glitch-b);animation:glII .16s steps(2,end) 1 forwards}

/* ad-card assembles as it scrolls into view (parts slide in staggered; plain visible without JS / with reduced motion) */
html.js:not(.rm) .adcard>*{transition:opacity .6s var(--e),transform .6s var(--e)}
html.js:not(.rm) .adcard>*:nth-child(2){transition-delay:.14s}
html.js:not(.rm) .adcard>*:nth-child(3){transition-delay:.28s}
html.js:not(.rm) .adcard:not(.built)>*{opacity:0;transform:translateY(16px)}

/* ad mini-scene (built by JS): after the ad loads, the view zooms out to a desktop monitor and a
   cursor glides in and clicks the ad. Warm ink bezel — no white, no navy. */
.adscene{max-width:480px}
.admon{border-radius:16px;padding:clamp(10px,1.8vw,16px);transition:background .6s ease,box-shadow .6s ease}
.adscene.zoom .admon{background:var(--ink);box-shadow:0 30px 70px -30px rgba(0,0,0,.5)}
.adscreen{position:relative;border-radius:10px;padding:clamp(12px,2.2vw,22px);display:grid;place-items:center;overflow:hidden;transition:background .6s ease,transform .95s var(--eb)}
html.js:not(.rm) .adscene:not(.zoom) .adscreen{transform:scale(1.08)}
.adscene.zoom .adscreen{background:rgba(234,238,247,.08)}
.adstand,.adbase{opacity:0;transition:opacity .5s ease .25s}
.adstand{width:12%;height:30px;background:var(--ink);margin:0 auto}
.adbase{width:36%;height:9px;border-radius:9px;background:var(--ink);margin:0 auto}
.adscene.zoom .adstand,.adscene.zoom .adbase{opacity:1}
.adcur{position:absolute;left:0;top:0;z-index:3;opacity:0;pointer-events:none}
.adscene.cursor .adcur{opacity:1;animation:adcurmove 1.3s var(--e) both}
@keyframes adcurmove{from{transform:translate(var(--cx0,320px),var(--cy0,40px))}to{transform:translate(var(--cx1,230px),var(--cy1,260px))}}
.adscene.clicked .adcur svg{animation:adcurdip .32s ease 1}
@keyframes adcurdip{40%{transform:scale(.82)}}
.adring{position:absolute;z-index:2;width:34px;height:34px;border-radius:50%;border:2px solid var(--rose);opacity:0;pointer-events:none}
.adscene.clicked .adring{animation:adring .55s ease-out 1}
@keyframes adring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.7)}}
.adscene.clicked .adcard .bt .cta{animation:adpress .35s ease 1}
@keyframes adpress{40%{transform:scale(.9)}}

/* content calendar paints itself in day by day on scroll (the "will" class is only added by JS
   under motion; reduced-motion / no-JS see the fully coloured month) */
html.js:not(.rm) .cal.will .cal-grid i{background:var(--cal-empty);transition:background .22s ease} /* snappy — the paint is scrubbed by scroll; unpainted days stay visible as empty slots */
html.js:not(.rm) .cal.will .cal-grid i.x{background:var(--cal-blank)}
html.js:not(.rm) .cal.will .cal-grid i.pnt.e{background:var(--cat-edu)}
html.js:not(.rm) .cal.will .cal-grid i.pnt.t{background:var(--cat-trust)}
html.js:not(.rm) .cal.will .cal-grid i.pnt.p{background:var(--cat-proof)}
html.js:not(.rm) .cal.will .cal-grid i.pnt.m{background:var(--cat-promo)}
/* the calendar section holds via sticky (the same natural mechanism as the services trays) while the days paint in */
.calshow .wrap{position:sticky;top:0;min-height:100vh;min-height:100svh;align-content:center}

/* page-transition star wink: the page fades, the star blinks, then we go */
.pt{position:fixed;inset:0;z-index:300;display:grid;place-items:center;pointer-events:none;opacity:0}
.pt.go{opacity:1;transition:opacity .16s ease}
.pt svg{width:72px;height:72px;filter:drop-shadow(0 6px 26px rgba(0,0,0,.4))}
.pt.go svg{animation:ptwink .44s var(--e) both}
@keyframes ptwink{0%{transform:scale(.35);opacity:0}45%{transform:scale(1.05);opacity:1}62%{transform:scale(1.05) scaleY(.14)}82%{transform:scale(1)}100%{transform:scale(1);opacity:1}}
body.pt-out main,body.pt-out header,body.pt-out footer{opacity:0;transition:opacity .38s ease}

/* ===== PHONE PILL-FIT (owner, 2026-07-04) — keep at EOF: these overrides must beat every earlier
   rule on source order (.langsw at ~352 was winning over an earlier media block). The controls were
   poking past the glass pill's right end on phones: the grid's equal 1fr sides pinned the star
   dead-centre and spilled the cluster out of the glass. Phones drop the grid — the star centres
   absolutely, the controls nest into the pill's right end, and the burger's RIGHT side curves into
   a semicircle echoing the pill's end cap (its LEFT side keeps the square 12px bubble). ===== */
@media(max-width:560px){
 .nav .row{display:flex;justify-content:flex-end;position:relative;padding-left:1rem;padding-right:.5rem}
 .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
 .nav .cta{gap:.45rem}
 .langsw{height:40px;padding:0 .6rem;font-size:.66rem}
 .burger{width:42px;height:42px;border-radius:12px 21px 21px 12px}
}
@media(max-width:424px){ /* the JA pages' "English" pill is wider than 日本語 — their centred star
 runs out of room earlier, so JA anchors left below ~424px */
 html[lang="ja"] .brand{position:static;top:auto;left:auto;transform:none;margin-right:auto}
}
@media(max-width:400px){ /* below ~400px a centred star and three controls cannot coexist —
 the star anchors left instead of overlapping the language pill */
 .brand{position:static;top:auto;left:auto;transform:none;margin-right:auto}
}