/* Site chrome — the homepage's header (logo, sound, "Let's talk", menu + panel) and footer, lifted verbatim from
   lusion-clone.html (Oct 3) so other pages share them exactly. Lines: fonts 38–40, header 58–87, menu 120–157, footer 315–375.
   The homepage still carries its own copy; if these change, change both (or move the homepage onto this file). */
  @font-face{font-family:"Aeonik Pro";font-weight:400;src:url("fonts/AeonikPro-Regular.woff2") format("woff2"),url("fonts/AeonikPro-Regular.woff") format("woff");font-display:swap}
  @font-face{font-family:"Roobert";font-weight:500;src:url("fonts/Roobert-Medium.woff2") format("woff2");font-display:swap}
  @font-face{font-family:"Roobert";font-weight:600;src:url("fonts/Roobert-SemiBold.woff2") format("woff2");font-display:swap}
/* no sideways scroll on phones (Oct 4): a few elements spill a few px past the edge mid-animation; clip, not hidden, so sticky still works */
body{overflow-x:clip}
:root{
  --ground:#FFFEFB;--pill:#F1F0EC;--slate:#2A2926;--fill:#009DDC;--ink:#000;--card:#111113;
  --aeonik:"Aeonik Pro","Aeonik","Helvetica Neue",Arial,sans-serif;--med:"Roobert","Aeonik Pro","Helvetica Neue",Arial,sans-serif;
  --gutter:5vw;--logo-w:7.5vw;--logo-top:clamp(50px,4.1vw,61px);
  --icon:max(45px,2.8vw);--ui-top:clamp(41px,3.5vw,50px);--ui-size:max(14px,.875vw);
  --talk-w:max(134px,9.3vw);--menu-w:max(102px,7.1vw);
}
  .ui{font-family:var(--med);font-weight:500;font-size:var(--ui-size);line-height:1;text-transform:uppercase;letter-spacing:0}
  #logo{position:fixed;z-index:60;mix-blend-mode:exclusion;color:#fff;left:var(--gutter);top:var(--logo-top);height:calc(var(--logo-w)*.2);display:flex;align-items:center;font-family:var(--med);font-weight:600;font-size:calc(var(--logo-w)*.175);letter-spacing:.06em;text-transform:uppercase;line-height:1}
  #ui-right{position:fixed;z-index:60;right:calc(var(--gutter) - 2px);top:var(--ui-top);display:flex;align-items:center;gap:max(18px,1.3vw)}
  #icon{position:relative;flex:0 0 auto;width:var(--icon);height:var(--icon);border-radius:50%;background:var(--pill);display:flex;align-items:center;justify-content:center}
  #icon{border:0;padding:0;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.16,1,.3,1)}
  /* circle fill (Annnimate "Circle Fill Button", vanilla port): grows from the cursor entry point */
  #icon .cf-circle{position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;background:var(--fill,var(--slate));transform:translate(-50%,-50%) scale(0);pointer-events:none;z-index:0}
  #icon canvas{position:relative;z-index:1}
    #icon:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
  #icon canvas{width:60%;height:60%;display:block}
  .pill{position:relative;flex:0 0 auto;border:0;cursor:pointer;height:var(--icon);border-radius:999px;display:flex;align-items:center;transition:transform .35s cubic-bezier(.16,1,.3,1)}
  
  #talk{width:var(--talk-w);background:#0A0A0A;color:#fff;padding-left:calc(var(--talk-w)*.17)}
  /* icon button (Annnimate "Icon Button", vanilla port): the dot slides out ↗, an arrow slides in from ↙, blue grows from the dot to fill the pill */
  #talk{overflow:hidden;isolation:isolate}
  #talk .ib-text{position:relative;z-index:2}
  #talk .ib-icon-wrap{position:absolute;right:calc(var(--talk-w)*.17 - 5px);top:50%;width:14px;height:14px;margin-top:-7px;z-index:2}
  #talk .ib-icon-outer{position:absolute;inset:0;overflow:hidden}
  #talk .ib-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
  #talk .ib-icon i{display:block;width:4px;height:4px;border-radius:50%;background:#fff}
  #talk .ib-icon svg{width:10px;height:10px;display:block}
  #talk .ib-bg{position:absolute;right:calc(var(--talk-w)*.17 - 5px);top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--fill);z-index:1;transform:scale(0)}
  #menu{width:var(--menu-w);background:var(--pill);color:var(--ink);padding-left:calc(var(--menu-w)*.18)}
  
  #dotbtn{border:0;padding:0;cursor:pointer;display:none;position:fixed;z-index:60;right:var(--gutter);top:var(--logo-top);width:45px;height:45px;border-radius:50%;background:rgba(0,0,0,.08);align-items:center;justify-content:center;gap:4px;transform:translateY(-12px)}
  #dotbtn i{width:4px;height:4px;border-radius:50%;background:var(--ink)}
  /* ---------- menu (Lusion clone). MEASURED @1440 from the live open state:
     pill → white, "Menu" rolls to "Close", dots turn vertical · panel right-aligned under the buttons, 310 wide, 13px gaps
     card 1 (white, r10): 4 links 26px uppercase, ~58px rows, current page marked with a dot; hover = blue pill (r100) behind the link
     card 2 (white, r10): ~248 tall, 38px/43.7 title · card 3 (black, r10): ~76 tall, icon + label + ↗
     enter: cards tilt in from above, staggered. CHOSEN: card 2 is "Book a call" (no newsletter backend), card 3 is Dispatch. ---------- */
  #menu .roll{display:inline-block;height:1em;overflow:hidden;line-height:1;vertical-align:top}
  #menu .roll-in{display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.76,0,.24,1)}
  #menu .roll-in span{display:block;height:1em}
  #menu.open .roll-in{transform:translateY(-1em)}
  #menu .dots{position:absolute;right:18%;top:calc(50% - 2px);width:10px;height:4px;transition:transform .5s cubic-bezier(.76,0,.24,1)}
  #menu .dots i{position:absolute;top:0;width:4px;height:4px;border-radius:50%;background:var(--ink)}
  #menu .dots i:first-child{left:0}#menu .dots i:last-child{left:6px}
  #menu.open .dots{transform:rotate(90deg)}
  #menu{transition:background-color .4s ease,transform .35s cubic-bezier(.16,1,.3,1)}
  #menu.open,#menu:hover,#menu:focus-visible{background:#fff}
  #menu{box-shadow:0 0 0 0 rgba(10,10,10,0);transition:background-color .35s ease,box-shadow .35s ease}
  #menu:hover{box-shadow:0 6px 18px -10px rgba(10,10,10,.28)}
  #menu .dots i{transition:transform .35s cubic-bezier(.16,1,.3,1)}
  #menu:hover:not(.open) .dots i:first-child{transform:translateX(-2px)}
  #menu:hover:not(.open) .dots i:last-child{transform:translateX(2px)}
  #menu-panel{position:fixed;z-index:59;right:calc(var(--gutter) - 2px);top:calc(var(--ui-top) + var(--icon) + 13px);width:max(310px,21.5vw);display:flex;flex-direction:column;gap:13px;perspective:900px;pointer-events:none;visibility:hidden}
  #menu-panel.open{pointer-events:auto;visibility:visible}
  .mcard{border-radius:10px;background:#fff;transform-origin:50% 0;box-shadow:0 18px 40px -24px rgba(10,10,10,.25)}
  .mnav{padding:22px 14px}
  .mnav a{position:relative;display:flex;align-items:center;justify-content:space-between;height:58px;padding:0 18px;font-family:var(--aeonik);font-size:26px;line-height:1;text-transform:uppercase;color:var(--ink);isolation:isolate;transition:color .35s ease}
  .mnav a .hb{position:absolute;inset:4px 0;border-radius:100px;background:var(--fill);z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.76,0,.24,1)}
  .mnav a:hover{color:#fff}
  .mnav a:hover .hb{transform:scaleX(1)}
  .mnav a .cur{width:6px;height:6px;border-radius:50%;background:currentColor}
  .mbook{padding:28px 32px 30px}
  .mbook h3{font-family:var(--aeonik);font-weight:400;font-size:38px;line-height:1.15;letter-spacing:-.01em}
  .mbook a{margin-top:28px;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 22px;border-radius:12px;background:var(--pill);font-family:var(--med);font-weight:500;font-size:15px;color:var(--ink);transition:background-color .3s ease,color .3s ease}
  .mbook a:hover{background:var(--fill);color:#fff}
  .mlab{display:flex;align-items:center;gap:16px;height:76px;padding:0 26px;background:#0A0A0A;color:#fff;font-family:var(--aeonik);font-size:26px;text-transform:uppercase;line-height:1}
  .mlab .ic{width:20px;height:20px;border-radius:50%;border:2px solid #fff;flex:0 0 auto}
  .mlab .ar{margin-left:auto;transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .mlab:hover .ar{transform:translate(3px,-3px)}
  @media (max-width:1023px){#menu-panel{left:var(--gutter);right:var(--gutter);width:auto;top:calc(var(--logo-top) + 40px)}}
  /* ---------- FOOTER. Port of lusion.co #footer-section (their CSS, Oct 3), MEASURED:
     min-height 100vh, flex column · white ground, full bleed · font clamp(14px,1vw,32px) · top: flex-grow, margin-top 5vh
     middle: 12 cols; contact cols 1–6 at 1.25em (address cols 1–3 lh 1.4; links cols 4–6; enquiries/business 2.5em below)
     newsletter cols 7–12: header 3.375em, field 4.375em tall, max 33.75em, radius 1.125em, off-white ground
     bottom: margin-top 7vh, 12 cols: copyright 1–6 · labs link 7–9 · tagline 10–11 · up button 3.75em circle, bottom-right
     CHOSEN: newsletter → "Ask me anything" (sends the question to the chat site) · R&D link → Dispatch · copy ---------- */
  #footer{position:relative;z-index:46;display:flex;flex-direction:column;color:var(--ink);font-size:clamp(.875rem,1vw,2rem);
    padding:clamp(30px,4vw,50px) max(5vw,40px);font-family:var(--aeonik)}
  #footer a{color:inherit;text-decoration:none}
  #footer .f-bg{position:absolute;left:0;top:-2px;width:100%;height:calc(100% + 2px);background:#fff}
  #footer .f-top{position:relative;z-index:1;margin-top:5vh}   /* CHOSEN: no astronaut/window here, so no 100vh frame */
  #footer .f-mid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw}
  #footer .f-contact{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:2vw;grid-column:1/span 6;font-size:1.25em;align-content:start}
  #footer .f-ln{display:block;position:relative}
  #footer .wrap{position:relative;overflow:hidden;display:flex;flex-direction:column}
  #footer .wrap .w{display:inline-block;will-change:transform}
  #footer .f-addr{grid-column:1/span 3;grid-row:1/span 3;line-height:1.4;width:fit-content}
  #footer .f-addr .wrap{width:fit-content;transition:transform .6s cubic-bezier(.35,0,0,1)}
  @media (hover:hover){#footer .f-addr:hover .wrap{transform:translate3d(var(--dx,0),0,0)}}
  #footer .f-soc{grid-column:4/span 3}
  #footer .f-soc .wrap:not(:first-child){margin-top:.3em}
  #footer .f-soc a{display:block;position:relative}
  #footer .f-sv{position:absolute!important;top:0;left:-2em;width:1.25em;height:1.25em;transform:rotate(90deg);transition:transform .4s cubic-bezier(.35,0,0,1)}
  #footer .f-st{display:inline-block;position:relative;transition:transform .4s cubic-bezier(.35,0,0,1)}
  #footer .f-soc .wrap:hover .f-st,#footer .f-soc .wrap:hover .f-sv{transform:translate3d(2em,0,0) rotate(90deg)}
  #footer .f-soc .wrap:hover .f-st{transform:translate3d(2em,0,0)}
  #footer .f-enq,#footer .f-biz{margin-top:2.5em;grid-column:4/span 3}
  #footer .f-h{opacity:.5}
  #footer .f-u{width:fit-content;overflow:hidden;padding-bottom:.2em;margin-top:.3em}
  #footer .f-u::before,#footer .f-labs::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:.1em;background:var(--ink);transform:scale3d(0,1,1);transform-origin:left center;transition:transform .3s cubic-bezier(.35,0,0,1)}
  @media (hover:hover){#footer .f-u:hover::before,#footer .f-labs:hover::before{transform:scaleZ(1)}}
  #footer .f-news{grid-column:7/span 6}
  #footer .f-nh{font-size:3.375em;line-height:1.05;letter-spacing:-.01em}
  #footer .f-in{margin-top:2em;position:relative;height:4.375em;max-width:33.75em}
  #footer .f-in-bg{position:absolute;inset:0;background:var(--pill,#F1F0EC);border-radius:1.125em;transform-origin:left center}
  #footer .f-form{position:relative;height:100%}
  #footer .f-field{position:relative;box-sizing:border-box;width:100%;height:100%;border:0;outline:none;padding:.625em 3em .625em 1.25em;font:inherit;font-size:1.25em;background:transparent;color:var(--ink)}
  #footer .f-field::placeholder{opacity:0;color:var(--ink);transition:opacity .5s .3s}
  #footer .f-in.on .f-field::placeholder{opacity:.3}
  #footer .f-go{position:absolute;top:calc(50% - .75em);right:1.25em;width:1.5em;height:1.5em;padding:0;border:0;background:none;cursor:pointer;color:var(--ink)}
  #footer .f-go svg{width:100%;height:auto;display:block}
  #footer .f-bot{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;align-items:center;margin-top:7vh;font-family:var(--med);font-weight:500;text-transform:uppercase}
  #footer .f-copy{position:relative;overflow:hidden;grid-column:1/span 6}
  #footer .f-labs{position:relative;overflow:hidden;grid-column:7/span 3;padding-bottom:.1em;width:fit-content}
  #footer .f-labs::before{height:.125em;transition-duration:.6s}
  #footer .f-tag{position:relative;overflow:hidden;grid-column:10/span 2}
  #footer .f-bot .w{display:inline-block;will-change:transform}
  #footer .f-up{display:flex;justify-content:center;align-items:center;width:3.75em;height:3.75em;background:var(--ink);color:#fff;border-radius:100%;border:0;padding:0;cursor:pointer;position:absolute;right:0;bottom:-.5em;overflow:hidden}
  #footer .f-up svg{width:1.5em;height:1.5em;transition:transform .4s cubic-bezier(.35,0,0,1)}
  #footer .f-up svg:last-child{position:absolute!important;transform:translate3d(0,3em,0)}
  @media (hover:hover){#footer .f-up:hover svg{transform:translate3d(0,-3em,0)}#footer .f-up:hover svg:last-child{transform:translateZ(0)}}
  @media (max-width:1000px){
    #footer .f-mid{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:5em}
    #footer .f-contact{grid-row:2}#footer .f-news{grid-column:1/span 6}
    #footer .f-enq{grid-column:1/span 3}
    #footer .f-bot{row-gap:2em;grid-template-columns:repeat(6,minmax(0,1fr))}
    #footer .f-copy{grid-row:3}#footer .f-labs,#footer .f-tag{grid-column:1/span 6}
    #footer .f-up{bottom:0}
  }
  @media (max-width:812px){#footer .f-contact{grid-column:1/span 6}#footer .f-nh{font-size:2.6em}}

@media (max-width:1023px){
  :root{--gutter:max(15px,3.3vw);--logo-top:max(26px,4.7vw)}
  #logo{width:96px;height:19px;font-size:17px;left:var(--gutter)}
  #ui-right{display:none}
  #dotbtn{display:flex}
}

/* work filters (Oct 6): "AI Generated" shortens to "AI" where the filter bar would run under the header buttons */
@media (max-width:1240px){.cats .cx{display:none}}
/* centred, the bar runs under the sound and "Let's talk" buttons below ~1400px wide (it did with four filters too):
   there it sits just right of the name instead. Phones keep their own placement at the bottom. */
@media (min-width:813px) and (max-width:1400px) and (min-aspect-ratio:3/4){body .cats{left:150px;translate:none}}