/* ===========================================================
   CandyWrap.ai — one-page home (per sketch)
   Loads AFTER styles.css. Self-contained for the home page.
   =========================================================== */
:root{
  --bg:#FDFAFA;            /* canvas, per house rules */
  --ai:#C22058;
  --ctl-h:40px;            /* every control in a row reads this, never padding */
  --ctl-h-sm:34px;
  --ctl-h-lg:48px;
  --plum:#2B1B33;
  --ink:#2D2A33;
  --slate:#6E6878;
  --mist:#EFE3EA;
  --white:#fff;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sec-y:clamp(64px,9vh,108px);   /* standard section padding, top & bottom */
  --bar-h:76px;            /* 14px padding + 48px control + 14px, the fixed bar */

  /* DLS v1 type scale, 1.25 major third. Mirrored from
     CandyWrapDLS/css/candywrap-tokens.css so the home page uses the system
     sizes instead of ad-hoc clamps. */
  --t-display: clamp(40px,6vw,68px);
  --t-h1:      clamp(32px,4.4vw,48px);
  --t-h2:      clamp(26px,3vw,34px);
  --t-h3:      22px;
  --t-h4:      18px;
  --t-body-lg: 17px;
  --t-body:    15.5px;
  --t-small:   13.5px;
  --t-micro:   11.5px;
  --lh-tight:1.12; --lh-head:1.24; --lh-body:1.62; --ls-tight:-.02em;
}
/* styles.css defaults the body to --cloud (grey). Every page in this design
   sits on the pink-white --bg, so set it once here for all page types. */
body{background:var(--bg)}
body[data-page="home"]{background:var(--bg);color:var(--ink)}

.w{width:min(1180px,88%);margin:0 auto}
.hd{font-family:"Sora",sans-serif;font-weight:500;letter-spacing:-.025em;line-height:1.1;color:var(--plum)}
.it{font-family:"Playfair Display","Georgia",serif;font-style:normal;font-weight:800;
  color:var(--ai);letter-spacing:-.015em}

/* ---------------- top bar: logo left, nav right, one CTA ---------------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:120;padding:14px 0;transition:.3s var(--ease)}
.bar.stuck{background:rgba(253,250,250,.88);backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--mist)}
.bar-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);width:min(1180px,88%);margin:0 auto}
/* logo pushes everything else to the right */
.logo-swap{flex:0 0 auto;margin-right:auto}

.bar-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px)}
.bar-nav a{font-family:"Sora",sans-serif;font-weight:500;font-size:var(--t-body);color:var(--plum);
  white-space:nowrap;position:relative;padding:4px 0;transition:color .2s var(--ease)}
.bar-nav a:hover{color:var(--ai)}
/* current page marked with a rule, not an underline on a button */
.bar-nav a[aria-current="page"]{color:var(--ai)}
.bar-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;border-radius:2px;background:var(--ai)}
.bar-nav .drawer-cta{display:none}

.bar-end{display:flex;align-items:center;gap:12px;flex:0 0 auto}

/* left-aligned logo: icon by default, wordmark on hover */
.logo-swap{position:relative;display:flex;align-items:center;height:var(--ctl-h-lg);width:168px}
.logo-swap img{position:absolute;left:0;top:50%;transform:translateY(-50%);transition:.35s var(--ease)}
/* white variants ship in the markup on every page but only show on product banners */
.logo-swap .ic-w,.logo-swap .wm-w{display:none}
.logo-swap .ic{height:38px;opacity:1}
.logo-swap .wm{height:27px;opacity:0;transform:translateY(-50%) scale(.94)}
.logo-swap:hover .ic{opacity:0;transform:translateY(-50%) scale(.8)}
.logo-swap:hover .wm{opacity:1;transform:translateY(-50%) scale(1)}

/* .bar-nav a is (0,1,1) and outranks .bar-cta at (0,1,0), so any CTA sitting
   inside the nav (the drawer button, the mega panel button) would inherit plum
   text on the magenta pill. Pin it back to white at matching specificity. */
.bar-nav .bar-cta,.bar-nav .bar-cta:hover{color:#fff}
.bar-cta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--ctl-h);padding:0 20px;background:var(--ai);color:#fff;font-weight:600;font-size:var(--t-body);
  border-radius:100px;text-decoration:none;transition:.25s var(--ease);white-space:nowrap}
.bar-cta:hover{background:#a81b4c;transform:translateY(-1px)}

/* burger only exists below the drawer breakpoint */
.burger{display:none;height:var(--ctl-h);width:var(--ctl-h);align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;color:var(--ai);padding:0}
.burger span{display:block;width:22px;height:2.5px;background:currentColor;border-radius:3px;transition:.28s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---- mobile drawer ---- */
@media(max-width:880px){
  .burger{display:flex}
  .bar-end > .bar-cta{display:none}
  .bar-nav{position:fixed;left:0;right:0;top:0;padding:86px clamp(20px,6vw,40px) 28px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(253,250,250,.97);backdrop-filter:blur(16px) saturate(160%);
    border-bottom:1px solid var(--mist);box-shadow:0 24px 46px -30px rgba(194,32,88,.55);
    transform:translateY(-102%);transition:transform .38s var(--ease);z-index:-1}
  .bar-nav.open{transform:translateY(0)}
  .bar-nav a{font-size:var(--t-h4);padding:13px 0;border-bottom:1px solid var(--mist)}
  .bar-nav a[aria-current="page"]::after{display:none}
  .bar-nav a:last-of-type{border-bottom:0}
  .bar-nav .drawer-cta{display:inline-flex;margin-top:16px;height:var(--ctl-h-lg);font-size:var(--t-body);border-bottom:0}
}
@media(prefers-reduced-motion:reduce){.bar-nav{transition:none}}

/* =====================================================================
   MEGA MENU
   The panel is position:fixed, which is what lets it span the viewport while
   still living inside .navitem in the DOM. That matters: one element serves
   the desktop panel and the mobile accordion, and pointer-leave on .navitem
   covers the trigger and the panel together.

   The trigger is a real <a href> in the markup. Script adds the ARIA and the
   open behaviour, so with JS off the nav degrades to four working links.
   ===================================================================== */
.navitem{position:relative;display:flex;align-items:center}
.bar-nav .navitem__t{display:inline-flex;align-items:center;gap:5px}
.navitem__chev{width:13px;height:13px;opacity:.55;transition:transform .26s var(--ease),opacity .2s var(--ease)}
.navitem__t:hover .navitem__chev{opacity:1}
.navitem[data-open] .navitem__chev{transform:rotate(180deg);opacity:1}
.navitem[data-open] > .navitem__t{color:var(--ai)}
/* no chevron until the script can act on it */
.bar-nav:not([data-mm]) .navitem__chev{display:none}

.mm{position:fixed;left:0;right:0;top:var(--bar-h);z-index:119;
  /* canvas, not white, so the white cards inside have something to sit on */
  background:rgba(253,250,250,.985);backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--mist);
  box-shadow:0 34px 64px -40px rgba(194,32,88,.6);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility 0s linear .26s}
.navitem[data-open] .mm{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* full-bleed panel, content on the 1180px grid.
   Three columns in both panels: Products is three products, Services is two
   services and the CTA card, so the two menus read as one system. */
.mm__in{width:min(1180px,88%);margin:0 auto;
  padding:clamp(24px,2.8vw,34px) 0 clamp(18px,2.2vw,24px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.4vw,20px);align-items:stretch}

/* every child of the panel is the same card: white, magenta shadow, no
   outline at rest. The site's card language, not a menu-specific one. */
.bar-nav .mmi,.mm__cta{background:#fff;border:1px solid transparent;border-radius:18px;
  padding:clamp(18px,1.7vw,23px);box-shadow:0 18px 40px -30px rgba(194,32,88,.6)}
.bar-nav .mmi{display:block;white-space:normal;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.bar-nav .mmi:hover{transform:translateY(-4px);border-color:var(--ai);
  box-shadow:0 28px 54px -30px rgba(194,32,88,.8)}
.bar-nav .mmi[aria-current="page"]::after{display:none}
.mmi__ic{display:block;width:36px;height:36px;margin-bottom:14px}
.mmi b{display:flex;align-items:center;gap:6px;font-family:"Sora",sans-serif;font-weight:600;
  font-size:var(--t-body);color:var(--plum);line-height:1.3;transition:color .28s var(--ease)}
.bar-nav .mmi:hover b{color:var(--ai)}
.mmi__ext{width:12px;height:12px;opacity:.5}
.mmi__tag{display:block;margin-top:3px;font-family:"Sora",sans-serif;font-weight:600;
  font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--ai)}
.mmi__d{display:block;margin-top:9px;font-size:var(--t-small);line-height:1.52;color:var(--slate)}

/* the CTA card shares the card shell exactly; only its contents differ */
.mm__cta{display:flex;flex-direction:column}
.mm__cta h4{font-family:"Sora",sans-serif;font-weight:600;font-size:var(--t-body);
  color:var(--plum);line-height:1.3}
.mm__cta p{margin-top:9px;font-size:var(--t-small);line-height:1.52;color:var(--slate)}
/* margin-top:auto pins the button to the foot of the card so it lines up with
   the bottom of the two service cards beside it */
.bar-nav .mm__cta .bar-cta{margin-top:auto;display:flex;width:100%;
  font-size:var(--t-small)}
.mm__cta p{margin-bottom:18px}

.mm__foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-top:8px;padding-top:16px;border-top:1px solid var(--mist)}
.bar-nav .mm__all{display:inline-flex;align-items:center;gap:8px;
  font-family:"Sora",sans-serif;font-weight:600;font-size:var(--t-small);color:var(--ai)}
.mm__all svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.bar-nav .mm__all:hover svg{transform:translateX(4px)}
.mm__note{font-size:var(--t-small);color:var(--slate)}

/* while a panel is open the bar takes its solid treatment even on the home
   page, so the panel does not appear to hang off a transparent strip */
.bar.mm-live{background:rgba(253,250,250,.92);backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--mist)}
.mm-scrim{position:fixed;inset:0;z-index:118;background:rgba(43,27,51,.22);
  opacity:0;visibility:hidden;transition:opacity .26s var(--ease),visibility 0s linear .26s}
.mm-scrim.on{opacity:1;visibility:visible;transition-delay:0s}

@media(max-width:1040px){
  .mm__in{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(prefers-reduced-motion:reduce){
  .mm,.mm-scrim{transition:opacity .01s,visibility .01s}
  .mm{transform:none}
  .bar-nav .mmi,.bar-nav .mmi:hover{transform:none}
  .navitem__chev{transition:none}
}

/* ---- below the drawer breakpoint the panel becomes an accordion ---- */
@media(max-width:880px){
  .navitem{display:block}
  .bar-nav .navitem__t{width:100%;justify-content:space-between;
    font-size:var(--t-h4);padding:13px 0;border-bottom:1px solid var(--mist)}
  .navitem__chev{width:16px;height:16px}
  .mm{position:static;opacity:1;visibility:visible;transform:none;transition:none;
    background:none;backdrop-filter:none;box-shadow:none;border-bottom:0;
    display:none;z-index:auto}
  .navitem[data-open] .mm{display:block}
  .mm__in{width:100%;padding:8px 0 12px;display:grid;grid-template-columns:1fr;gap:8px}
  /* the card shell is too heavy stacked in a drawer; keep the shape, drop
     the shadow and the blurb, which is index-page work rather than menu work */
  .bar-nav .mmi{padding:12px 14px;border-radius:14px;box-shadow:none;background:#fff}
  .mmi__ic{width:26px;height:26px;margin-bottom:9px}
  .mmi__d{display:none}
  .mm__cta{display:none}          /* the drawer already ends with the CTA */
  .mm__foot{margin-top:2px;padding-top:12px}
  .mm__note{display:none}
  .mm-scrim{display:none}
}

/* ---------------- floating WhatsApp ---------------- */
/* WhatsApp brand green #25D366 carries white at 1.98:1 and their mid teal
   #128C7E only reaches 4.14:1, both under AA. Measured up to #0F7A6D, which
   is 5.22:1 with white and still reads as WhatsApp. */
.wafab{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:130;
  display:inline-flex;align-items:center;gap:0;height:var(--ctl-h-lg);padding:0;
  background:#0F7A6D;color:#fff;border-radius:100px;text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(15,122,109,.55);
  transition:gap .3s var(--ease),padding .3s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.wafab-ic{flex:none;width:var(--ctl-h-lg);height:var(--ctl-h-lg);display:grid;place-items:center}
.wafab-ic svg{width:24px;height:24px}
/* label is collapsed to zero width and revealed on hover or keyboard focus */
.wafab-label{max-width:0;overflow:hidden;white-space:nowrap;font-family:"Sora",sans-serif;
  font-weight:600;font-size:var(--t-body);opacity:0;transition:max-width .3s var(--ease),opacity .25s var(--ease)}
.wafab:hover,.wafab:focus-visible{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(15,122,109,.65)}
.wafab:hover .wafab-label,.wafab:focus-visible .wafab-label{max-width:170px;opacity:1}
.wafab:hover,.wafab:focus-visible{padding-right:18px}
/* gentle attention pulse, once the page has settled */
.wafab::before{content:"";position:absolute;inset:0;border-radius:100px;border:2px solid #0F7A6D;
  animation:wapulse 2.8s ease-out 3s infinite;pointer-events:none}
@keyframes wapulse{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.35)}}
@media(prefers-reduced-motion:reduce){.wafab::before{animation:none}.wafab{transition:none}}
@media(max-width:560px){.wafab-label{display:none}}

/* chat bar */
.askbar{margin:34px auto 0;max-width:880px;text-align:left}
.askrow{max-width:720px;margin:0 auto}   /* input keeps its size; tags get the extra room */
.chips{justify-content:center}
.askrow{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--mist);border-radius:100px;
  padding:8px 8px 8px 20px;box-shadow:0 14px 34px -22px rgba(194,32,88,.4)}
.askrow input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:"Inter";font-size:var(--t-body);color:var(--ink)}
.askrow input::placeholder{color:#a99fb2}
.icobtn{flex:none;width:var(--ctl-h);height:var(--ctl-h);border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;transition:.22s}
.icobtn.mic{background:#f7eef3;color:var(--slate)}
.icobtn.mic:hover{color:var(--ai)}
.icobtn.send{background:var(--plum);color:#fff}
.icobtn.send:hover{background:var(--ai);transform:scale(1.06)}
.icobtn svg{width:18px;height:18px}
/* one line on wide screens; wraps only when it must */
.chips{display:flex;flex-wrap:nowrap;justify-content:center;gap:8px;margin-top:14px}
.chip2{white-space:nowrap;flex:0 0 auto}
@media(max-width:900px){.chips{flex-wrap:wrap}}
/* ghost / outline tags */
.chip2{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--plum);
  border:1px solid rgba(43,27,51,.18);cursor:pointer;
  font-family:"Inter";font-size:var(--t-small);font-weight:500;height:var(--ctl-h-sm);padding:0 15px;border-radius:100px;transition:.22s var(--ease)}
.chip2:hover{border-color:var(--ai);color:var(--ai);background:rgba(194,32,88,.05);transform:translateY(-2px)}
.chip2 svg{width:14px;height:14px;opacity:.7}
.chip2:hover svg{opacity:1}

/* ------- conversational stage (centre) with floating source chips ------- */
/* full-bleed stage: icons spread across the whole window, panel stays centred */
.stage{position:relative;margin-top:62px;padding:26px 0 10px;min-height:560px;
  width:100vw;left:50%;transform:translateX(-50%)}
.stage-cap{position:relative;z-index:3;text-align:center;margin-top:22px;font-size:var(--t-micro);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#b3a6bd}
.convo{position:relative;z-index:3;width:min(600px,100%);margin:0 auto;background:rgba(255,255,255,.78);
  border:1px solid var(--mist);border-radius:22px;padding:16px;backdrop-filter:blur(12px);
  box-shadow:0 26px 60px -32px rgba(194,32,88,.5)}
#convo-body{height:400px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
#convo-body > *{flex:none}
.convo-top{display:flex;align-items:center;gap:8px;padding:2px 6px 12px;border-bottom:1px solid var(--mist);margin-bottom:12px}
.convo-top i{width:8px;height:8px;border-radius:50%;background:#e4d7de;display:block}
.convo-top b{font-size:var(--t-micro);font-weight:600;color:var(--slate);margin-left:6px;font-family:"Inter"}
.cline{max-width:88%;padding:10px 14px;border-radius:14px;font-size:var(--t-small);line-height:1.5;margin-bottom:9px;
  opacity:0;transform:translateY(8px);animation:rise .45s var(--ease) forwards}
.cline.u{margin-left:auto;background:var(--ai);color:#fff;border-bottom-right-radius:4px}
.cline.a{background:#f7f2f6;color:var(--ink);border:1px solid var(--mist);border-bottom-left-radius:4px}
.cline .src2{display:block;margin-top:7px;font-size:11px;color:var(--slate)}
.cline .src2 b{background:#eaf5f3;color:#00695C;border-radius:5px;padding:1px 6px;margin-right:4px;font-weight:600}
@keyframes rise{to{opacity:1;transform:none}}
.dots3{display:inline-flex;gap:4px;align-items:center}
.dots3 i{width:6px;height:6px;border-radius:50%;background:#b9aec2;animation:bl 1.2s infinite}
.dots3 i:nth-child(2){animation-delay:.16s}.dots3 i:nth-child(3){animation-delay:.32s}
@keyframes bl{0%,60%,100%{opacity:.3}30%{opacity:1}}
.caret{display:inline-block;width:2px;height:14px;background:var(--ai);vertical-align:-2px;margin-left:1px;animation:cb .9s steps(1) infinite}
@keyframes cb{0%,50%{opacity:1}51%,100%{opacity:0}}

/* AI suggestion chips inside the convo */
.sugg{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;margin:-2px 0 10px;
  opacity:0;transform:translateY(8px);animation:rise .45s var(--ease) forwards}
.sugg span{font-size:var(--t-micro);font-weight:500;color:var(--ai);background:#fff;border:1px solid #f0d7e2;
  border-radius:100px;padding:6px 12px;white-space:nowrap}
.sugg span.pick{background:var(--ai);color:#fff;border-color:var(--ai)}

/* generated report card */
.repcard{background:#fff;border:1px solid var(--mist);border-radius:14px;padding:13px 14px;margin-bottom:9px;
  display:flex;align-items:center;gap:12px;box-shadow:0 10px 24px -18px rgba(194,32,88,.5);
  opacity:0;transform:translateY(8px);animation:rise .45s var(--ease) forwards}
.repcard .ri{flex:none;width:36px;height:36px;border-radius:10px;background:#f7eef3;color:var(--ai);display:grid;place-items:center}
.repcard .ri svg{width:18px;height:18px}
.repcard .rt{flex:1;min-width:0}
.repcard .rt b{display:block;font-size:var(--t-small);color:var(--plum);font-family:"Sora";font-weight:700}
.repcard .rt span{display:block;font-size:var(--t-micro);color:var(--slate);margin-top:2px}
.repcard .rb{flex:none;font-size:var(--t-micro);font-weight:600;color:#fff;background:var(--plum);border-radius:100px;padding:6px 13px}

/* floating source chips around the stage */
.float{position:absolute;z-index:2;background:#fff;border:1px solid var(--mist);border-radius:14px;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;color:var(--ai);
  box-shadow:0 12px 26px -14px rgba(194,32,88,.5);animation:fl 6s ease-in-out infinite;
  cursor:default;transition:box-shadow .25s var(--ease),border-color .25s var(--ease)}
.float svg{width:24px!important;height:24px!important;flex:none;transition:transform .25s var(--ease)}
.float:hover{border-color:var(--ai);box-shadow:0 16px 30px -12px rgba(194,32,88,.45);z-index:9}
.float:hover svg{transform:scale(1.1)}
/* hover tooltip */
.float::after{content:attr(data-label);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--plum);color:#fff;font-family:"Inter";font-size:var(--t-micro);font-weight:600;white-space:nowrap;
  padding:6px 11px;border-radius:8px;opacity:0;pointer-events:none;transition:.22s var(--ease);
  box-shadow:0 10px 22px -12px rgba(194,32,88,.7)}
.float::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(4px);
  border:5px solid transparent;border-top-color:var(--plum);opacity:0;pointer-events:none;transition:.22s var(--ease)}
.float:hover::after,.float:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
/* stagger the drift */
.float:nth-child(2){animation-delay:-1.2s}.float:nth-child(3){animation-delay:-2.4s}
.float:nth-child(4){animation-delay:-3.1s}.float:nth-child(5){animation-delay:-4.3s}
.float:nth-child(6){animation-delay:-5s}.float:nth-child(7){animation-delay:-.6s}
.float:nth-child(8){animation-delay:-2.9s}.float:nth-child(9){animation-delay:-4.8s}
.float:nth-child(10){animation-delay:-1.9s}.float:nth-child(11){animation-delay:-3.6s}
.float:nth-child(12){animation-delay:-5.4s}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* positioned off the panel edge (panel is 600px wide, so half = 300px)
   negative offsets < 300px make the chip overlap the panel */
/* Inner ring hugs the 600px panel (edges at 50% ∓ 300px); outer icons spread
   across the full window so the whole hhero reads as "all your systems". */
.f1{left:calc(50% - 346px);top:6%;z-index:4}      /* Email  — ~6px overlap */
.f2{left:calc(50% + 294px);top:2%;z-index:4}      /* Drive  — ~6px overlap */
.f3{left:calc(50% - 402px);top:36%}               /* Tally  — just clear */
.f4{left:calc(50% + 350px);top:30%}               /* Sheets — just clear */
.f5{left:calc(50% - 436px);top:72%}               /* ERP    — further out */
.f6{left:calc(50% + 384px);top:78%}               /* PDFs   — further out */
/* outer spread, viewport-anchored */
.f7{left:4%;top:14%}          /* Databases */
.f8{left:12%;top:58%}         /* CRM */
.f9{left:6%;top:88%}          /* Cloud apps */
.f10{right:4%;top:12%}        /* Reports */
.f11{right:12%;top:56%}       /* Orders */
.f12{right:5%;top:86%}        /* Team chats */
@media(max-width:1400px){
  .f7{left:2%}.f8{left:7%}.f9{left:3%}
  .f10{right:2%}.f11{right:7%}.f12{right:3%}
}
@media(max-width:1180px){
  .f1{left:calc(50% - 320px)}.f2{left:calc(50% + 270px)}
  .f3{left:calc(50% - 358px)}.f4{left:calc(50% + 308px)}
  .f5{left:calc(50% - 382px)}.f6{left:calc(50% + 332px)}
  .f7,.f8,.f9,.f10,.f11,.f12{display:none}   /* keep it uncluttered */
}
@media(max-width:900px){.float{display:none}.stage{min-height:0;margin-top:40px}}

/* ---------------- logo marquee ---------------- */
.marq{padding:30px 0;border-top:1px solid var(--mist);border-bottom:1px solid var(--mist);background:transparent;overflow:hidden}
.marq .lbl2{text-align:center;font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#a99fb2;margin-bottom:18px}
.track{display:flex;gap:44px;width:max-content;animation:slide 32s linear infinite}
.marq:hover .track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.track span{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;color:#bdb0c8;transition:.25s}
.track span svg{width:28px!important;height:28px!important;flex:none}
.track span:hover{color:var(--ai);transform:translateY(-2px)}

/* ---------------- generic section ---------------- */
/* one standard vertical rhythm for every section */
.sec2{padding:var(--sec-y) 0}
/* the UX argument: the one place on the home page that runs as prose */
.why .h{margin-bottom:clamp(22px,3.4vh,34px)}
.whytext{max-width:640px;margin:0 auto;text-align:left}
.whytext p{color:var(--slate);font-size:var(--t-body-lg);line-height:var(--lh-body);margin-bottom:16px}
.whytext p:last-child{margin-bottom:0}
.whytext strong{color:var(--plum);font-weight:600}
@media(max-width:600px){.whytext{text-align:left}}
.sec2 .h{text-align:center;max-width:740px;margin:0 auto clamp(32px,5vh,52px)}
.sec2 .h h2{font-size:var(--t-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
.sec2 .h p{margin-top:16px;color:var(--slate);font-size:var(--t-body-lg);line-height:var(--lh-body)}

/* products 2x2 */
/* standard product card — rectangle, used site-wide:
   big icon → paragraph → name + subheading */
/* Product cards and their gradients were removed 10 Aug 2026 with the
   "One company, three ways in" section. No card carries a gradient now:
   The Wrap belongs to the CTA band only. */


/* full-width CTA banner */
/* brand gradient that slowly drifts — shared by CTA banner + menu */
@keyframes brandflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ===========================================================
   HOME PAGE, rebuilt 16 Aug 2026
   Editorial hhero in the Wispr Flow direction: quiet canvas,
   oversized serif emphasis, motion that explains rather than decorates.
   Every animated element is readable with JS off, see the
   .no-gsap fallbacks at the end of this block.
   =========================================================== */

/* the DLS reserves DM Serif Display for the emphasis phrase inside a heading:
   one per heading, in --primary-ink, upright rather than italic */
.hd em,.it{font-family:"DM Serif Display","Playfair Display",Georgia,serif;
  font-style:normal;font-weight:400;color:var(--ai);letter-spacing:-.01em}

/* ---------------- hero + client wash ----------------
   .topwash holds the blurred brand shapes and spans BOTH the hero and the
   client strip, so the colour carries through instead of being cut at the
   hero's bottom edge. overflow:hidden lives on the wrapper, which is what
   keeps the blur from causing horizontal scroll.

   Named .hhero, not .hero, on purpose. styles.css still carries a dark-hero
   block: .hero{color:#EDE7F1} and .hero h1{color:#fff}. That h1 rule is
   (0,1,1) and beats .hd at (0,1,0), so the headline rendered white on the
   near-white canvas. Renaming puts it out of reach; the explicit colours
   below mean it stays fixed even if someone reintroduces the name. */
.topwash{position:relative;overflow:hidden;background:var(--bg)}
.topwash__blobs{position:absolute;inset:0;pointer-events:none;z-index:0}
/* Very light, and centred outside the text column. Slate body copy only has
   5.17:1 on bare canvas, so there is almost no headroom: two blobs overlapping
   at 0.06 each already drops it to 4.49:1. These sit at 0.07 to 0.09 and the
   veil below guarantees the type never pays for them. */
.topwash__blobs i{position:absolute;display:block;border-radius:50%;filter:blur(100px)}
.topwash__blobs i:nth-child(1){width:50vw;height:50vw;left:-20vw;top:-18vw;
  background:var(--ai);opacity:.09;animation:drift1 34s ease-in-out infinite}
.topwash__blobs i:nth-child(2){width:44vw;height:44vw;right:-18vw;top:-6vw;
  background:#FF5555;opacity:.08;animation:drift2 29s ease-in-out infinite}
.topwash__blobs i:nth-child(3){width:40vw;height:40vw;left:-14vw;bottom:-14vw;
  background:#FF7FA6;opacity:.08;animation:drift3 41s ease-in-out infinite}
/* the fourth sits low right, so the tint still reads behind the logo strip */
.topwash__blobs i:nth-child(4){width:46vw;height:46vw;right:-16vw;bottom:-20vw;
  background:var(--ai);opacity:.07;animation:drift2 37s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4vw,3vw,0) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3vw,4vw,0) scale(.94)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4vw,-3vw,0) scale(1.06)}}

/* canvas veil behind the reading column. The colour stays visible at the edges
   and carries down into the client strip, but text sits on clean paper. */
.topwash::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(820px 520px at 50% 38%,
    var(--bg) 0%, rgba(253,250,250,.92) 42%, rgba(253,250,250,.55) 62%, transparent 80%)}
/* the bar is transparent until you scroll, so ease the canvas back in behind it */
.topwash::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:2;
  pointer-events:none;background:linear-gradient(180deg,var(--bg) 8%,rgba(253,250,250,.6) 58%,transparent)}

.hhero{position:relative;z-index:3;color:var(--ink);
  padding:clamp(120px,17vh,180px) 0 clamp(56px,8vh,90px);background:transparent}
.hhero__in{text-align:center;position:relative;z-index:2}
/* the bar is transparent until you scroll, so ease the canvas back in behind it */
.topwash::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:1;
  pointer-events:none;background:linear-gradient(180deg,var(--bg) 8%,rgba(253,250,250,.6) 58%,transparent)}
.hhero .hhero__h1{color:var(--plum);font-size:var(--t-display);line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);max-width:16ch;margin:0 auto;font-weight:500}
.hhero__sub{margin:clamp(20px,3vh,30px) auto 0;max-width:56ch;color:var(--slate);
  font-size:var(--t-body-lg);line-height:var(--lh-body)}
.hhero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(24px,3.4vh,34px)}

/* ---------------- client proof strip ---------------- */
.clients{position:relative;z-index:3;padding:clamp(30px,4.6vh,52px) 0;
  border-top:1px solid var(--mist);border-bottom:1px solid var(--mist);
  background:transparent;overflow:hidden}
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee__track{display:flex;align-items:center;gap:clamp(34px,5vw,68px);width:max-content;
  will-change:transform}
/* client logos arrive in every colour and aspect ratio, so they are normalised
   to one optical height and desaturated at rest. Colour returns on hover of the
   whole strip rather than per logo, which is unusable while it is moving. */
.marquee__logo{height:clamp(24px,3vw,36px);width:auto;flex:none;display:block;
  filter:grayscale(1);opacity:.62;transition:filter .4s var(--ease),opacity .4s var(--ease)}
.marquee:hover .marquee__logo{filter:grayscale(0);opacity:1}
@media(prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee__track{flex-wrap:wrap;justify-content:center;width:auto;gap:28px}
  .marquee__logo{opacity:.85}
}

/* ---------------- the argument ---------------- */
.why__h2{font-size:var(--t-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);
  max-width:18ch;margin:0 auto clamp(24px,3.4vh,36px);text-align:center;font-weight:500}
.whytext{max-width:640px;margin:0 auto}
.whytext p{color:var(--slate);font-size:var(--t-body-lg);line-height:var(--lh-body);margin-bottom:16px}
.whytext p:last-child{margin-bottom:0}
.whytext strong{color:var(--plum);font-weight:600}

/* ---------------- demo frame ---------------- */
.demo .h{text-align:center;max-width:740px;margin:0 auto clamp(30px,4.4vh,46px)}
.demo .h h2{font-size:var(--t-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);font-weight:500}
.demo .h p{margin-top:16px;color:var(--slate);font-size:var(--t-body-lg);line-height:var(--lh-body)}
.frame{max-width:940px;margin:0 auto;border-radius:20px;overflow:hidden;background:#fff;
  box-shadow:0 40px 80px -40px rgba(194,32,88,.55),0 4px 14px -6px rgba(43,27,51,.12)}
.frame__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#F6F2F3;
  border-bottom:1px solid var(--mist)}
.frame__bar i{width:9px;height:9px;border-radius:50%;background:#dccfd6;display:block}
.frame__url{margin-left:14px;font-size:var(--t-micro);color:var(--slate);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.frame__body{padding:clamp(16px,2.4vw,26px);background:
  radial-gradient(600px 300px at 20% 0%,rgba(194,32,88,.05),transparent 65%),#fff}
.frame__video{width:100%;height:auto;display:block;border-radius:12px}
/* the animated conversation sits inside the frame, so it loses its own card */
.frame .convo{background:transparent;border:0;box-shadow:none;padding:0;backdrop-filter:none;
  width:min(620px,100%)}

.srcrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;
  margin-top:clamp(22px,3vh,32px);font-size:var(--t-small);color:var(--slate)}
.srcrow b{font-weight:600;color:var(--plum);background:#fff;border-radius:100px;padding:6px 13px;
  box-shadow:0 10px 22px -16px rgba(194,32,88,.6)}

/* ---------------- what private means ---------------- */
.priv .h{text-align:center;max-width:700px;margin:0 auto clamp(30px,4.4vh,46px)}
.priv .h h2{font-size:var(--t-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);font-weight:500}
.priv .h p{margin-top:16px;color:var(--slate);font-size:var(--t-body-lg);line-height:var(--lh-body)}
.privgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.privcard{background:#fff;border:1px solid transparent;border-radius:20px;padding:26px;
  box-shadow:0 20px 44px -28px rgba(194,32,88,.6);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.privcard:hover{transform:translateY(-5px);border-color:var(--ai);
  box-shadow:0 30px 56px -28px rgba(194,32,88,.75)}
.privcard__n{font-family:"Sora",sans-serif;font-weight:800;font-size:var(--t-micro);letter-spacing:.13em;
  color:var(--ai);margin-bottom:14px}
.privcard h3{font-family:"Sora",sans-serif;font-weight:700;font-size:var(--t-h4);color:var(--plum);margin-bottom:8px}
.privcard p{font-size:var(--t-body);line-height:var(--lh-body);color:var(--slate)}
/* 90% of the content column rather than a 66ch measure, so the sentence runs
   the width of the card grid above it instead of sitting in a narrow block */
.privnote{margin:clamp(22px,3vh,30px) auto 0;width:90%;max-width:none;text-align:center;
  font-size:var(--t-small);line-height:var(--lh-body);color:var(--slate)}
.privnote a{color:var(--ai);font-weight:600}

/* ---------------- offers ---------------- */
.offers .h{text-align:center;max-width:720px;margin:0 auto clamp(30px,4.4vh,46px)}
.offers .h h2{font-size:var(--t-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);font-weight:500}
.offers .h p{margin-top:16px;color:var(--slate);font-size:var(--t-body-lg);line-height:var(--lh-body)}
.offergrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;
  max-width:1000px;margin:0 auto}
.offer{position:relative;display:flex;flex-direction:column;align-items:flex-start;background:#fff;
  border:1px solid transparent;border-radius:20px;padding:clamp(22px,2.6vw,30px);text-decoration:none;
  box-shadow:0 20px 44px -28px rgba(194,32,88,.6);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.offer:hover{transform:translateY(-6px);border-color:var(--ai);box-shadow:0 30px 56px -28px rgba(194,32,88,.75)}
.offer__icon{width:clamp(40px,4.2vw,50px);height:auto;margin-bottom:18px}
.offer h3{font-family:"Sora",sans-serif;font-weight:700;font-size:var(--t-h3);
  color:var(--plum);transition:color .28s var(--ease)}
.offer:hover h3{color:var(--ai)}
.offer h3 span{display:block;margin-top:6px;font-family:"Inter",sans-serif;font-weight:600;
  font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--ai)}
.offer p{margin-top:12px;font-size:var(--t-body);line-height:var(--lh-body);color:var(--slate)}
.offer__go{margin-top:20px;width:var(--ctl-h);height:var(--ctl-h);border-radius:50%;display:grid;
  place-items:center;color:var(--ai);background:rgba(194,32,88,.08);transition:.28s var(--ease)}
.offer__go svg{width:18px;height:18px}
.offer:hover .offer__go{background:var(--ai);color:#fff;transform:translateX(3px)}

/* Services. The pill version read as two stray buttons under three cards and
   gave the studio side no weight, which the section heading promises it. Same
   card language as .offer, laid on its side: two up, wider, shorter. A hairline
   above separates the products from the ways to commission us. */
.svcrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;
  max-width:1000px;margin:clamp(28px,3.8vh,40px) auto 0;
  padding-top:clamp(28px,3.8vh,40px);border-top:1px solid var(--mist)}
.svc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:18px;
  background:#fff;border:1px solid transparent;border-radius:20px;
  padding:clamp(22px,2.4vw,28px);text-decoration:none;
  box-shadow:0 20px 44px -28px rgba(194,32,88,.6);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.svc:hover{transform:translateY(-5px);border-color:var(--ai);
  box-shadow:0 30px 56px -28px rgba(194,32,88,.75)}
.svc__tx{display:block;min-width:0}
.svc b{display:block;font-family:"Sora",sans-serif;font-weight:700;font-size:var(--t-h4);
  color:var(--plum);line-height:var(--lh-head);transition:color .28s var(--ease)}
.svc:hover b{color:var(--ai)}
/* same descriptor treatment as the product cards, so the two tiers read as
   one system rather than two decisions */
.svc__tag{display:block;margin-top:5px;font-family:"Inter",sans-serif;font-weight:600;
  font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--ai)}
.svc__d{display:block;margin-top:10px;font-size:var(--t-small);line-height:1.58;color:var(--slate)}
.svc__go{flex:none;width:var(--ctl-h);height:var(--ctl-h);border-radius:50%;display:grid;
  place-items:center;color:var(--ai);background:rgba(194,32,88,.08);transition:.28s var(--ease)}
.svc__go svg{width:18px;height:18px}
.svc:hover .svc__go{background:var(--ai);color:#fff;transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.svc,.svc:hover{transform:none}}

/* ---------------- numbers ----------------
   NOTE: this block was called .stats and silently collided with a
   .stats{display:grid;grid-template-columns:repeat(3,1fr)} rule still living in
   styles.css, which turned the whole <section> into a three-column grid.
   Renamed to .numbers. Check styles.css before reusing any short class name. */
.numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(20px,3vw,38px);
  max-width:1000px;margin:0 auto;text-align:center}
.num b{display:block;font-family:"DM Serif Display","Playfair Display",Georgia,serif;font-weight:400;
  font-size:var(--t-display);line-height:1;color:var(--ai);letter-spacing:var(--ls-tight)}
.num span{display:block;margin-top:12px;font-size:var(--t-body);line-height:var(--lh-body);color:var(--slate)}

/* ---------------- motion, and life without it ---------------- */
/* elements start hidden only when GSAP is actually driving them. If the
   library fails or JS is off, .no-gsap on <html> keeps everything visible. */
html.gsap-ready [data-fade],
html.gsap-ready [data-frame]{opacity:0}
html.gsap-ready [data-split]{visibility:hidden}
.no-gsap [data-fade],.no-gsap [data-frame]{opacity:1!important}
.no-gsap [data-split]{visibility:visible!important}
@media(prefers-reduced-motion:reduce){
  [data-fade],[data-frame]{opacity:1!important;transform:none!important}
  [data-split]{visibility:visible!important}
  .topwash__blobs i{animation:none}
  .marquee__track{transform:none!important}
}

/* CTA band: "The Wrap", the one company gradient. Coral to Candy at 150deg,
   reserved for banners and CTA bands only, never cards or buttons. */
.ctaband{position:relative;width:100%;padding:var(--sec-y) 0;text-align:center;color:#fff;overflow:hidden;
  background:linear-gradient(150deg,#FF5555 0%,#C22058 55%)}
/* Both DLS colours and the 150deg angle are kept, but the Candy stop is pulled
   to 55% so the Coral end stays in the top-left corner and the content column
   sits on #C22058 (white 5.77:1). Left at the default 100% stop the copy landed
   near #E03A6E, which is 4.20:1 and fails AA for normal text.
   The text shadow is the DLS answer to the Coral corner: zero offset, wide
   blur, low alpha, in a deepened brand hue, layered so the halo falls off.
   It aids legibility without changing the measured ratio. */
.ctaband h2{font-size:var(--t-h1);color:#fff;max-width:20ch;margin:0 auto;
  text-shadow:0 0 18px rgba(126,18,64,.34), 0 0 44px rgba(126,18,64,.22), 0 0 80px rgba(126,18,64,.14)}
.ctaband .it{color:#FFE1EC}
.ctaband p{color:#fff;max-width:52ch;margin:18px auto 30px;font-size:var(--t-body-lg);line-height:var(--lh-body);
  text-shadow:0 0 16px rgba(126,18,64,.30), 0 0 38px rgba(126,18,64,.18)}
.ctaband > *{position:relative;z-index:1}
.ctaband .row2{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* sheen sweep, reserved for hhero and CTA */
.ctaband::after{content:"";position:absolute;top:0;bottom:0;width:38%;left:-50%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  animation:sheen 9s ease-in-out 2s infinite}
@keyframes sheen{0%{left:-50%}55%,100%{left:120%}}
@media(prefers-reduced-motion:reduce){.ctaband::after{animation:none;opacity:0}}

/* ---- buttons: a mirror pair. Primary inverts, secondary converts. ---- */
/* isolation + z-index:-1 keeps the sliding fill behind the label. A bare text
   node cannot be lifted with z-index, so the fill has to go back, not the text
   forward, and isolate stops -1 escaping behind the button's own background. */
.b1,.b2{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--ctl-h-lg);padding:0 28px;border-radius:100px;font-weight:600;font-size:var(--t-body);
  text-decoration:none;transition:color .28s var(--ease),transform .25s var(--ease),border-color .28s var(--ease)}
.b1::before,.b2::before{content:"";position:absolute;left:0;right:0;height:100%;z-index:-1;
  transition:transform .34s var(--ease)}
/* primary: brand fill, white text. On hover white fills DOWN from the top. */
.b1{background:var(--ai);color:#fff}
.b1::before{top:0;background:#fff;transform:translateY(-100%)}
.b1:hover{color:var(--ai);transform:translateY(-2px)}
.b1:hover::before{transform:translateY(0)}
/* secondary: outlined, brand text. On hover brand fills UP from the bottom. */
.b2{background:transparent;color:var(--ai);border:1px solid rgba(194,32,88,.4)}
.b2::before{bottom:0;background:var(--ai);transform:translateY(100%)}
.b2:hover{color:#fff;border-color:var(--ai);transform:translateY(-2px)}
.b2:hover::before{transform:translateY(0)}
/* on the gradient band both invert to read against The Wrap */
.ctaband .b1{background:#fff;color:var(--ai)}
.ctaband .b1::before{background:#7E1240}
.ctaband .b1:hover{color:#fff}
.ctaband .b2{color:#fff;border-color:rgba(255,255,255,.5)}
.ctaband .b2::before{background:#fff}
.ctaband .b2:hover{color:var(--ai);border-color:#fff}
@media(prefers-reduced-motion:reduce){.b1,.b2,.b1::before,.b2::before{transition:none}}

/* footer */
/* Footer sits on Midnight, the deep neutral the DLS defines it against.
   This is why --primary-light exists: raw Candy #C22058 is only 3.11:1 here,
   so every link uses Candy Rose #FF7FA6, which measures 7.56:1. */
.ft{background:#1E1226;color:rgba(255,255,255,.78);padding:64px 0 30px}
/* four columns: brand, what we do, more, contact.
   The contact block moved here when the full-screen menu was retired. */
.ft-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:clamp(24px,3.4vw,48px);
  align-items:start;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14)}
@media(max-width:940px){.ft-in{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-in{grid-template-columns:1fr}}
.ft img{height:clamp(38px,4vw,52px)}
.ft .tg{margin-top:12px;font-size:var(--t-small);color:rgba(255,255,255,.62);max-width:32ch;line-height:1.55}
.ft-studio{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:var(--t-small);
  font-weight:600;color:#FF7FA6;transition:.2s var(--ease)}
.ft-studio:hover{color:#fff}
.ft-studio svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.ft-studio:hover svg{transform:translateX(4px)}
.ft-col h4{font-family:"Sora",sans-serif;font-size:var(--t-small);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;margin-bottom:16px}
.ft .lk{display:flex;flex-direction:column;gap:9px}
.ft .lk a{font-size:var(--t-body);color:rgba(255,255,255,.78);transition:.2s}
.ft .lk a:hover{color:#FF7FA6}
.ft-contact .qrow{display:flex;align-items:flex-start;gap:9px;font-size:var(--t-small);color:rgba(255,255,255,.78);
  margin-bottom:11px;line-height:1.5;transition:.2s}
.ft-contact a.qrow:hover{color:#FF7FA6}
.ft-contact .qi{flex:none;width:17px;height:17px;color:#FF7FA6;margin-top:1px}
.ft-contact .qi svg{width:17px;height:17px}
.ft-contact .qaddr{align-items:flex-start}
.ft-contact .maps{display:inline-block;font-size:var(--t-small);font-weight:600;color:#FF7FA6;margin-top:2px;transition:.2s}
.ft-contact .maps:hover{color:#fff}
.ft-soc{display:flex;gap:10px;margin-top:18px}
.ft-soc a{width:var(--ctl-h-sm);height:var(--ctl-h-sm);border-radius:10px;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);transition:.22s}
.ft-soc a:hover{background:var(--ai);color:#fff;border-color:var(--ai);transform:translateY(-2px)}
.ft-soc svg{width:17px;height:17px}
.ft .bt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:20px;font-size:var(--t-small);color:rgba(255,255,255,.55)}

/* The full-screen menu was retired 10 Aug 2026 in favour of a header nav.
   Its CSS block lived here; markup archived at _archive/menu.php.2026-08-10.bak */


/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:.7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}
  .track,.float,.cline{animation:none!important}.cline{opacity:1;transform:none}}