:root{
    --blue:#1F2BFF; --blue-light:#5B63FF; --ink:#15115C; --ink-2:#1F1A78; --ink-3:#2B2492;
    --paper:#F6F7FF; --mist:#E6E8FB; --accent:#FFB3E1; --note:#FFF0F7; --cross:#F03A3A; --live:#3FBF7F;
    --text:#15115C; --body:#34376B; --muted:#565A92; --on-ink:#D2D0FA; --on-blue-soft:#CFD0FF;
    --line:rgba(21,17,92,.12); --line-strong:rgba(21,17,92,.28); --line-dark:rgba(255,255,255,.16); --line-dark-strong:rgba(255,255,255,.34);
    --grad-down:linear-gradient(180deg,#1F2BFF 0%,#6670FF 100%);
    --grad-side:linear-gradient(90deg,#1F2BFF 0%,#6670FF 100%);
    --grad-tile:linear-gradient(135deg,#6670FF 0%,#1F2BFF 75%);
    --display:"Anton",Impact,sans-serif; --sans:"Archivo","Helvetica Neue",Arial,sans-serif; --hand:"Caveat",cursive;
    --glide:cubic-bezier(.19,1,.22,1); --inout:cubic-bezier(.77,0,.175,1); --bounce:cubic-bezier(.34,1.56,.64,1);
    --hover:.5s; --reveal:1.1s;
    --arrow:polygon(0 0,100% 0,100% 100%,76.8% 100%,76.8% 40%,16.8% 100%,0 83.1%,59.8% 23.3%,0 23.3%);
    --container:clamp(992px,100vw,1680px);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{overflow-x:clip;scroll-padding-top:5em}
  html[data-lock]{overflow:hidden}
  .motion{scroll-behavior:smooth}
  /* everything is sized in em off one fluid base, so the whole layout scales with the window */
  body{font-family:var(--sans);font-size:calc(var(--container) / 90);line-height:1.5;color:var(--body);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:clip;
    --cp:3em; --sec:9em; --header-h:5em; --r-section:2.5em; --r-card:1.25em;
    --inset:max(var(--cp), calc((100vw - 1680px) / 2 + var(--cp)))}
  @media (max-width:991px){body{--container:clamp(768px,100vw,991px);font-size:calc(var(--container) / 52.125);--cp:1.5em;--sec:6.5em;--header-h:4.5em}}
  @media (max-width:767px){body{--container:clamp(320px,100vw,767px);font-size:calc(var(--container) / 24.375)}}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  ul{list-style:none}
  :focus-visible{outline:2px solid var(--blue);outline-offset:3px}
  [data-ground=ink] :focus-visible,[data-ground=blue] :focus-visible,.header[data-theme=dark] :focus-visible{outline-color:#fff}
  .wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--cp)}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* type */
  .t-display,.t-h1,.t-h2{font-family:var(--display);font-weight:400;text-transform:uppercase;color:var(--text)}
  .t-display{font-size:9.5em;line-height:.86}
  .t-h1{font-size:6.5em;line-height:.9}
  .t-h2{font-size:4.75em;line-height:.92}
  .t-h3{font-size:2em;line-height:1.12;font-weight:500;letter-spacing:-.02em;color:var(--text)}
  .t-h4{font-size:1.5em;line-height:1.2;font-weight:500;letter-spacing:-.01em;color:var(--text)}
  .t-lead{font-size:1.375em;line-height:1.45}
  .t-small{font-size:.9375em}
  .t-meta{font-size:.75em;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
  .t-hand{font-family:var(--hand);font-weight:600;font-size:1.75em;line-height:1.05;color:var(--blue)}
  .mark{display:inline-block;width:fit-content;background:var(--accent);color:var(--ink);border-radius:.18em;padding:.02em .28em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .soft{color:var(--blue)}
  .t-hand.mark{color:var(--ink)}
  .text-link{border-bottom:1.5px solid currentColor;transition:color var(--hover) var(--glide)}
  .text-link:hover{color:var(--blue)}

  /* grounds */
  [data-ground=white]{background-color:#fff}
  [data-ground=paper]{background-color:var(--paper)}
  [data-ground=accent]{background-color:var(--accent);color:var(--ink)}
  [data-ground=ink]{background-color:var(--ink);color:var(--on-ink)}
  [data-ground=blue]{background-color:var(--blue);color:#fff}
  [data-ground=blue][data-gradient]{background-image:var(--grad-side)}
  :is([data-ground=ink],[data-ground=blue]) :is(.t-display,.t-h1,.t-h2,.t-h3,.t-h4){color:#fff}
  :is([data-ground=ink],[data-ground=blue]) .t-hand:not(.mark){color:var(--accent)}
  [data-ground=ink] .soft{color:#A5A3FF}
  [data-ground=blue] .soft{color:var(--on-blue-soft)}
  :is([data-ground=ink],[data-ground=blue]) .text-link:hover{color:#fff}
  .section{padding-block:var(--sec)}
  .round{border-radius:var(--r-section);position:relative;z-index:1}
  .round-top{border-radius:var(--r-section) var(--r-section) 0 0;position:relative;z-index:1}
  /* a rounded section that follows a coloured one slides over it, so its corners show that colour instead of white notches */
  :is([data-ground=blue],[data-ground=ink],[data-ground=paper]) + :is(.round,.round-top){margin-top:calc(var(--r-section) * -1)}
  .round:has(+ :is(.round,.round-top)){border-bottom-left-radius:0;border-bottom-right-radius:0}
  /* same for the footer, which sits outside <main> */
  main:has(> :is([data-ground=blue],[data-ground=ink],[data-ground=paper]):last-child) + .footer{margin-top:calc(var(--r-section) * -1)}
  main > .round:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}

  /* hand-drawn pen strokes: every path with pathLength="1" draws itself */
  .pen{fill:none;stroke:var(--accent);stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
  .motion .pen path{stroke-dasharray:1;stroke-dashoffset:1px;opacity:0;transition:stroke-dashoffset .8s var(--inout) var(--pd,.5s),opacity 1ms linear var(--pd,.5s)}
  .motion .pen path.head{transition-duration:.3s,1ms;transition-delay:calc(var(--pd,.5s) + .8s)}
  .motion .is-in .pen path,.motion .is-in.pen path{stroke-dashoffset:0;opacity:1}

  /* reveal + word split */
  .motion [data-reveal]{opacity:0;transform:translateY(1.5em);transition:opacity var(--reveal) var(--glide) var(--d,0s),transform var(--reveal) var(--glide) var(--d,0s)}
  .motion [data-reveal].is-in{opacity:1;transform:none}
  .motion [data-split]:not(.is-split){visibility:hidden}
  .w{display:inline-block;overflow:hidden;vertical-align:top;margin:-.16em 0 -.06em;padding:.16em 0 .06em}
  .motion .wi{display:inline-block;transform:translateY(125%);transition:transform var(--reveal) var(--glide) calc(min(var(--i), 12) * 40ms)}
  .motion .is-in .wi{transform:none}

  /* buttons: text rolls up on hover, arrow mark */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;width:fit-content;height:3.25em;padding-inline:1.5em;border-radius:100em;border:1px solid transparent;font-size:1em;line-height:1.2;white-space:nowrap;cursor:pointer;
    transition:background-color var(--hover) var(--glide),color var(--hover) var(--glide),border-color var(--hover) var(--glide)}
  .btn--lg{height:3.75em;padding-inline:1.85em;font-size:1.125em}
  /* solid buttons all light up pink on hover, so the whole site answers the same way */
  .btn--blue{background:var(--blue);color:#fff}.btn--blue:hover{background:var(--accent);color:var(--ink)}
  .btn--white{background:#fff;color:var(--ink)}.btn--white:hover{background:var(--accent);color:var(--ink)}
  .btn--ghost{border-color:var(--line-strong);color:var(--text)}.btn--ghost:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
  .btn--ghost-light{border-color:var(--line-dark-strong);color:#fff}.btn--ghost-light:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
  .roll{display:inline-block;overflow:hidden;line-height:1.2}
  .roll__t{display:block;position:relative;transition:transform var(--hover) var(--glide)}
  .roll__t::after{content:attr(data-text);position:absolute;top:100%;left:0;white-space:nowrap}
  @media (hover:hover){.motion :is(a,button):hover .roll__t{transform:translateY(-100%)}}
  .arr{display:inline-block;flex:none;width:.8em;aspect-ratio:1046/1044;background:currentColor;clip-path:var(--arrow)}
  .abtn{display:grid;place-items:center;width:3.25em;height:3.25em;border-radius:50%;border:1px solid var(--line-strong);color:var(--text);transition:background-color var(--hover) var(--glide),color var(--hover) var(--glide),border-color var(--hover) var(--glide),opacity .3s}
  .abtn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
  .abtn[aria-disabled=true]{opacity:.35;pointer-events:none}
  .abtn .arr{width:.85em}
  .abtn.prev .arr{rotate:-135deg}.abtn.next .arr{rotate:45deg}
  :is([data-ground=ink],[data-ground=blue]) .abtn{border-color:var(--line-dark-strong);color:#fff}
  :is([data-ground=ink],[data-ground=blue]) .abtn:hover{background:#fff;border-color:#fff;color:var(--blue)}

  /* ---------- header ---------- */
  .header{position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);color:var(--text);transition:color var(--hover) var(--glide)}
  .header[data-theme=dark],.header[data-menu-open]{color:#fff}
  .header__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5em}
  .logo{display:inline-block;font-family:var(--display);font-weight:400;font-size:2.6em;line-height:1;letter-spacing:.02em;color:var(--blue)}
  .logo .dot{color:var(--accent)}
  .header .logo{transition:color var(--hover) var(--glide),opacity var(--hover) var(--glide),visibility 0s}
  .header[data-theme=dark] .logo,.header[data-menu-open] .logo{color:#fff}
  .header[data-scrolled]:not([data-menu-open]) .logo{opacity:0;visibility:hidden;transition-delay:0s,0s,var(--hover)}
  .header__nav{transition:opacity var(--hover) var(--glide),transform var(--hover) var(--glide),visibility 0s}
  .header[data-scrolled] .header__nav,.header[data-menu-open] .header__nav{opacity:0;visibility:hidden;transform:translateY(-.75em);transition-delay:0s,0s,var(--hover)}
  .nav-list{display:flex;gap:.375em;padding:.375em;border-radius:100em;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1px var(--line)}
  .nav-list > li > a{display:flex;align-items:center;height:2.4em;padding-inline:1em;border-radius:100em;color:var(--ink);transition:background-color var(--hover) var(--glide),color var(--hover) var(--glide)}
  .nav-list > li > a:hover,.nav-list > li > a[aria-current]{background:var(--blue);color:#fff}
  .cluster{display:flex;align-items:center;gap:.75em}
  .call{display:inline-flex;align-items:center;gap:.7em;height:3em;padding:0 1.25em 0 .35em;border-radius:100em;background:var(--blue);color:#fff;white-space:nowrap;transition:background-color var(--hover) var(--glide),color var(--hover) var(--glide)}
  .header[data-theme=dark] .call{background:#fff;color:var(--ink)}
  .call:hover,.header[data-theme=dark] .call:hover{background:var(--ink);color:#fff}
  .avatar{position:relative;flex:none;width:2.3em;height:2.3em;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center}
  .avatar svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .live{position:absolute;right:-.05em;bottom:-.05em;width:.7em;height:.7em;border-radius:50%;background:var(--live);box-shadow:0 0 0 2px #fff}
  .wave{position:absolute;left:-.7em;bottom:-.45em;font-size:1.35em;line-height:1;opacity:0;scale:0;transform-origin:70% 80%;pointer-events:none;transition:opacity .3s var(--glide),scale .4s ease-out}
  .motion .header[data-scrolled]:not([data-menu-open]) .wave{opacity:1;scale:1;animation:wave 1.8s ease-in-out .3s 2}
  @keyframes wave{0%,100%{rotate:0deg}15%{rotate:18deg}30%{rotate:-12deg}45%{rotate:16deg}60%{rotate:-8deg}75%{rotate:10deg}}
  .toggle{display:grid;place-items:center;width:3em;height:3em;border-radius:50%;background:var(--blue);color:#fff;
    transition:background-color var(--hover) var(--glide),color var(--hover) var(--glide),opacity var(--hover) var(--glide),width var(--hover) var(--glide),margin var(--hover) var(--glide),visibility 0s}
  .header[data-theme=dark] .toggle,.header[data-menu-open] .toggle{background:#fff;color:var(--blue)}
  .toggle:hover,.header[data-theme=dark] .toggle:hover{background:var(--ink);color:#fff}
  @media (min-width:992px){.header:not([data-scrolled]):not([data-menu-open]) .toggle{opacity:0;visibility:hidden;width:0;margin-left:-.75em;transition-delay:0s,0s,0s,0s,0s,var(--hover)}}
  .bars{display:grid;gap:.4em;width:1.1em}
  .bars span{display:block;height:1.5px;background:currentColor;transition:transform var(--hover) var(--glide)}
  .toggle[aria-expanded=true] .bars span:first-child{transform:translateY(.24em) rotate(45deg)}
  .toggle[aria-expanded=true] .bars span:last-child{transform:translateY(-.24em) rotate(-45deg)}
  .menu{position:fixed;inset:0;z-index:90;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;gap:.2em;padding:calc(var(--header-h) + 1em) var(--inset) 3em;opacity:0;visibility:hidden;transition:opacity .5s var(--glide),visibility 0s .5s}
  .menu[data-open]{opacity:1;visibility:visible;transition:opacity .5s var(--glide)}
  .menu a{font-family:var(--display);text-transform:uppercase;font-size:min(6.5em,calc((100svh - 12em) / 6.5),calc((100vw - 2 * var(--inset)) / 4));line-height:1.02;width:max-content;transition:color .3s,translate .6s var(--glide),opacity .6s var(--glide)}
  .menu a:hover{color:var(--accent)}
  .motion .menu a{opacity:0;translate:0 .4em}
  .motion .menu[data-open] a{opacity:1;translate:0 0;transition-delay:0s,calc(var(--i) * 50ms + .1s),calc(var(--i) * 50ms + .1s)}
  .menu .t-hand{margin-top:1em;color:var(--accent)}

  /* ---------- hero ---------- */
  .hero{background-image:var(--grad-down);padding-bottom:calc(var(--r-section) + 1.75em);position:relative;overflow:clip}
  .hero__inner{display:grid;grid-template-columns:minmax(0,1fr) 32.7em;grid-template-rows:auto auto 1fr;column-gap:2em;min-height:46em;padding-top:calc(var(--header-h) + 4em);padding-bottom:2em;position:relative}
  .hero h1{font-family:var(--display);font-weight:400;text-transform:uppercase;color:#fff;font-size:7.6em;line-height:.92;white-space:nowrap}
  .hero h1 .ln{display:block}
  .hero h1 .u{position:relative;display:inline-block}
  .hero h1 .u svg{position:absolute;top:94%;left:-.5%;width:101%;height:.2em;stroke-width:9px;--pd:1.1s}
  .hero__copy{grid-area:2 / 1;align-self:start;max-width:39em;padding-top:2em;position:relative;z-index:3}
  .hero__copy .t-lead{color:#fff;text-wrap:balance}
  .hero__actions{display:flex;flex-wrap:wrap;gap:.75em;margin-top:2em}
  .arrow-mark{display:block;aspect-ratio:1046/1044;clip-path:var(--arrow);background:linear-gradient(#5A5EFF 0%,#B4B7FF 100%)}
  .hero__arrow{position:absolute;top:0;right:4%;width:80%;z-index:0}
  .motion .hero__arrow{animation:hero-arrow 5.5s ease-in-out infinite alternate}
  @keyframes hero-arrow{from{translate:-.5em .5em}to{translate:.6em -.6em}}
  @keyframes drop{0%{opacity:0;translate:0 -3em;scale:.9}30%{opacity:1}100%{opacity:1;translate:0 0;scale:1}}
  @keyframes bob{50%{transform:translateY(-.4em)}}

  /* ---------- proof wall ---------- */
  .proof{--frame:.75em;--band:calc(var(--r-section) + var(--frame));position:relative;z-index:2;margin-top:calc((var(--band) + 1em) * -1);margin-bottom:calc(var(--r-section) * -1);background:linear-gradient(#fff,#fff) bottom / 100% var(--band) no-repeat}
  .proof__wall{border:var(--frame) solid #fff;border-radius:var(--band);padding-block:3.75em;overflow:hidden}
  .proof__mq{overflow-x:clip;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent)}
  .proof__track{display:flex;width:max-content}
  .motion .proof__track{animation:run 80s linear infinite}
  .proof__item{display:flex;align-items:center;gap:4.5em;padding-right:4.5em}
  .proof__name{font-family:var(--display);text-transform:uppercase;font-size:3.5em;line-height:.92;color:var(--text);white-space:nowrap}
  .proof__sep{flex:none;width:.625em;height:.625em;background:var(--blue);rotate:45deg}
  @keyframes run{to{transform:translateX(-50%)}}
  .proof + section{padding-top:calc((var(--sec) + var(--r-section)) * .9)}

  /* ---------- is this you ---------- */
  .csigns__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4em;align-items:start}
  .csigns__intro{display:grid;justify-items:start;gap:1.75em}
  .csigns__intro .t-lead{max-width:90%}
  .csigns .t-hand{font-size:2.1em;rotate:-3deg}
  .notepad{position:relative;background:var(--note);color:var(--ink);border-radius:1.5em;padding:4.25em 2.25em 1.75em 7em;overflow:clip;box-shadow:0 14px 34px rgba(5,5,61,.08);rotate:1deg}
  .notepad::before{content:"";position:absolute;inset:0 0 auto;height:2.75em;background:var(--accent);border-bottom:2px dashed var(--line-strong)}
  .notepad::after{content:"";position:absolute;top:2.75em;bottom:0;left:5.1em;width:3px;border-inline:1px solid rgba(255,86,86,.5)}
  .note-list li{display:flex;align-items:center;gap:1.8em;padding-block:.95em;border-bottom:1px solid rgba(31,43,255,.16);font-size:1.0625em}
  .note-list li:last-child{border-bottom:0}
  /* each row ticks itself as it scrolls into view */
  .note-list li{--pd:.2s}
  .motion .notepad.is-in .tick path{stroke-dashoffset:1px;opacity:0}
  .motion .note-list li.is-in .tick path{stroke-dashoffset:0;opacity:1}
  .tick{flex:none;width:2em;height:2em;margin-left:-4.5em;margin-right:1.3em;stroke:var(--cross);stroke-width:3.2px}
  .tick rect{stroke:var(--line-strong);stroke-width:1.5px}
  .motion .tick path{transition-duration:.35s,1ms}
  .motion .tick path.head{transition-delay:calc(var(--pd,.5s) + .3s)}

  /* ---------- fix + laptop ---------- */
  .fix{overflow:clip}
  .fix__head{display:grid;justify-items:center;gap:1.5em;text-align:center}
  .hand-row{display:flex;align-items:flex-end;gap:.5em;margin-bottom:-.5em}
  .hand-row .t-hand{font-size:2.1em;rotate:-4deg}
  .hand-row svg{width:2.6em;height:2.6em}
  .fix__title{font-family:var(--display);font-weight:400;text-transform:uppercase;color:#fff;font-size:10.5em;line-height:.9}
  .fix__title .u{position:relative;display:inline-block;color:var(--accent)}
  .fix__title .u svg{position:absolute;top:96%;left:-2%;width:104%;height:.16em;stroke-width:9px;--pd:.9s}
  .fix__lead{max-width:34em;color:#fff;text-wrap:balance;margin-top:.75em}
  .fix__stage{position:relative;display:grid;place-items:center;min-height:31em;margin-top:3em}
  .fix__mq{width:100%;overflow-x:clip}
  .fix__track{display:flex;gap:1.25em;width:max-content;padding-right:1.25em}
  .motion .fix__track{animation:run 60s linear infinite}
  .fcard{flex:none;width:17em;aspect-ratio:1/1.12;border-radius:1.75em;background:var(--c);color:var(--fg,#fff);padding:1.6em;display:flex;flex-direction:column;overflow:hidden;position:relative}
  .fcard::after{content:"";position:absolute;right:-18%;top:-12%;width:60%;aspect-ratio:1;border-radius:50%;background:currentColor;opacity:.13}
  .fcard small{font-size:.8em;opacity:.75;font-weight:600}
  .fcard b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:2.6em;line-height:.95;margin-top:auto}
  .fcard--shot{padding:0;background:#fff}
  .fcard--shot::after{display:none}
  .fcard--shot img{width:100%;height:100%;object-fit:cover;object-position:top}
  .fcard u{text-decoration:none;align-self:flex-start;margin-top:.9em;font-size:.85em;font-weight:600;background:var(--fg,#fff);color:var(--c);border-radius:100em;padding:.5em 1em}
  .fix__laptop{position:absolute;width:44em;filter:drop-shadow(0 40px 60px rgba(3,2,30,.55))}
  .fix__lid{position:relative;width:86%;margin-inline:auto;padding:.7em .7em .9em;background:#07052E;border-radius:1.4em 1.4em 0 0;box-shadow:inset 0 0 0 .12em rgba(255,255,255,.2)}
  .fix__lid::before{content:"";position:absolute;z-index:3;top:.7em;left:50%;translate:-50%;width:5em;height:.7em;background:#07052E;border-radius:0 0 .5em .5em}
  .fix__screen{position:relative;aspect-ratio:16/10;background:#fff;border-radius:.7em .7em .2em .2em;overflow:hidden;display:flex;flex-direction:column;color:var(--text)}
  .fix__bar{position:relative;z-index:2;flex:none;height:2.2em;display:flex;align-items:center;gap:.8em;padding-inline:.9em;background:var(--ink-3)}
  .lights{display:flex;gap:.35em}.lights span{width:.5em;height:.5em;border-radius:50%;background:var(--line-dark-strong)}
  .fix__url{position:absolute;top:50%;left:50%;translate:-50% -50%;width:16em;height:1.5em;border-radius:100em;background:rgba(255,255,255,.1);display:grid}
  .fix__url span{grid-area:1 / 1;display:flex;align-items:center;justify-content:center;font-size:.6em;color:var(--on-ink);white-space:nowrap}
  .fix__base{position:relative;height:1.1em;border-radius:.2em .2em 1.2em 1.2em;background:linear-gradient(#C9CBE6,#8F92BD)}
  .fix__base::before{content:"";position:absolute;top:0;left:50%;translate:-50%;width:7em;height:.4em;background:#7A7DA8;border-radius:0 0 .5em .5em}
  .shot{position:absolute;inset:2.2em 0 0;padding:1.4em 1.6em;font-size:.82em;background:#fff}
  :is(.shot,.fix__url span):not([data-n="0"]){opacity:0}
  .motion :is(.shot,.fix__url span){opacity:0;animation:swap 40s linear infinite;animation-delay:calc(var(--i,0) * 5s)}
  .motion :is(.shot,.fix__url span)[data-n="0"]{opacity:1}
  .shot--site{padding:0;overflow:hidden}
  .shot--site img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
  .motion .shot--site img{animation:pan 40s ease-in-out infinite;animation-delay:calc(var(--i,0) * 5s)}
  @keyframes pan{0%,1.5%{object-position:50% 0}11.5%,100%{object-position:50% 100%}}
  @keyframes swap{0%,11.5%{opacity:1}12.5%,98.5%{opacity:0}100%{opacity:1}}
  .fix__foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5em;margin-top:3.5em}
  .fix__foot .text-link{color:#fff}
  /* laptop screen mock-ups */
  .sh-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1em}
  .sh-head b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.7em;color:var(--blue);line-height:1}
  .pillg{font-size:.8em;font-weight:600;color:#118A55;background:#E3F7EC;border-radius:100em;padding:.3em .8em}
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.7em;margin-bottom:1.1em}
  .kpis div{background:var(--paper);border-radius:.7em;padding:.6em .8em}
  .kpis span{font-size:.8em;color:var(--muted)}
  .kpis b{display:block;font-family:var(--display);font-weight:400;font-size:2em;line-height:1.05;color:var(--ink)}
  .chart{display:flex;align-items:flex-end;gap:.5em;height:9em;border-bottom:2px solid var(--ink);padding-inline:.3em}
  .chart i{flex:1;height:var(--h);background:var(--blue);border-radius:.3em .3em 0 0}
  .chart i:nth-child(even){background:#9AA2FF}.chart i:last-child{background:var(--accent)}
  .trow{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;align-items:center;gap:.6em;padding:.75em .4em;border-bottom:1px solid var(--line);font-size:.95em}
  .trow.th{font-size:.75em;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
  .trow b{font-weight:600;color:var(--ink)}
  .trow em{font-style:normal;display:flex;align-items:center;gap:.4em;color:#118A55;font-weight:600}
  .trow em::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--live)}
  .trow strong{font-family:var(--display);font-weight:400;font-size:1.3em;color:var(--blue)}
  .gsearch{display:flex;align-items:center;gap:.6em;border:1px solid var(--line-strong);border-radius:100em;padding:.6em 1.1em;margin-bottom:1em;font-size:1.05em}
  .gsearch::before{content:"⌕";font-weight:700;color:var(--blue)}
  .gres{padding:.6em .2em;opacity:.45}
  .gres.top{opacity:1;background:var(--paper);border-radius:.7em;padding:.8em 1em;border:1px solid rgba(31,43,255,.3)}
  .gres small{font-size:.8em;color:#118A55}
  .gres b{display:block;font-size:1.15em;font-weight:600;color:#1A0DAB}
  .gres span{font-size:.85em;color:var(--muted)}
  .gres .stars{color:#E0A800;letter-spacing:.06em}
  .ig-top{display:flex;align-items:center;gap:1.4em;margin-bottom:1em}
  .ig-top i{width:4em;height:4em;border-radius:50%;background:conic-gradient(#FFD60A,#FF5FA2,#1F2BFF,#FFD60A);padding:.2em}
  .ig-top div{display:flex;gap:1.6em;font-size:.9em}
  .ig-top b{display:block;font-size:1.3em;color:var(--ink)}
  .ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.3em}
  .ig-grid i{aspect-ratio:1;background:var(--c)}
  .site-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.4em}
  .site-nav b{font-family:var(--display);font-weight:400;font-size:1.3em;color:var(--ink)}
  .site-nav span{display:flex;gap:1em}.site-nav span i{width:3em;height:.45em;border-radius:1em;background:var(--mist)}
  .site-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:1.4em;align-items:center}
  .site-hero h4{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:2.6em;line-height:.92;color:var(--ink)}
  .site-hero u{text-decoration:none;display:inline-block;margin-top:.9em;background:var(--blue);color:#fff;border-radius:100em;padding:.5em 1.1em;font-size:.9em;font-weight:600}
  .site-hero s{display:block;aspect-ratio:1;border-radius:1em;background:linear-gradient(135deg,#FFD60A,#FF6B4A)}

  /* ---------- services carousel ---------- */
  .offer__head{display:flex;justify-content:space-between;align-items:flex-end;gap:3em}
  .offer__heading{display:grid;justify-items:start;gap:1.5em;min-width:0}
  .offer__heading .t-hand{font-size:2.1em;rotate:-3deg}
  .offer__heading .t-lead{max-width:40em}
  .arrows{display:flex;gap:.5em;flex:none}
  .track{display:flex;gap:1.25em;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--inset);scroll-padding-inline:var(--inset);overscroll-behavior-x:contain}
  .track::-webkit-scrollbar{display:none}
  .track > *{scroll-snap-align:start;flex:none}
  .track[data-dragging]{scroll-snap-type:none;cursor:grabbing}
  .track[data-dragging] *{pointer-events:none}
  .offer__track{margin-top:5.333em;padding-block:.5em 1em}
  .ocard{width:24em;min-height:27em;background:var(--paper);border-radius:var(--r-card);padding:1.5em;display:flex;flex-direction:column;gap:1.5em}
  .ocard .t-h4{margin-top:.1em}
  .ocard p{color:var(--body);margin-top:.6em}
  .ocard .btn{margin-top:auto;width:100%;white-space:normal;text-align:center;height:auto;min-height:3.25em;padding-block:.7em}
  .art{position:relative;min-height:16em;border-radius:.75em;background:var(--grad-tile);color:#fff;padding:1.25em;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
  .art.navy{background:var(--ink)}
  .chip{position:absolute;font-family:var(--hand);font-weight:700;font-size:1.5em;line-height:1.1;background:var(--accent);color:var(--ink);padding:0 .4em .1em;border-radius:.2em;rotate:-4deg;transition:opacity .3s 1s,translate .7s var(--bounce) 1s,scale .7s var(--bounce) 1s}
  .ui-pill{display:flex;align-items:center;gap:.5em;width:fit-content;background:#fff;color:var(--ink);border-radius:100em;padding:.45em .9em;font-size:.85em;box-shadow:0 .4em 1em rgba(5,5,61,.18)}
  .ui-pill::before{content:"⌕";color:var(--blue);font-weight:700}
  .ui-res{margin-top:.6em;background:rgba(255,255,255,.14);border-radius:.6em;padding:.55em .8em;font-size:.8em;line-height:1.25}
  .ui-res.top{background:#fff;color:var(--ink)}
  .ui-res b{display:block;font-size:1.1em}
  .ui-res.top b{color:var(--blue)}
  .ui-lbl{font-size:.8em;opacity:.8;margin-bottom:.6em}
  .ui-audit{display:grid;gap:.6em}
  .ui-audit span{display:grid;grid-template-columns:5em minmax(0,1fr) 1.6em;align-items:center;gap:.6em;font-size:.85em}
  .ui-audit b{font-weight:600}
  .ui-audit i{position:relative;height:.5em;border-radius:1em;background:rgba(255,255,255,.18);overflow:hidden}
  .ui-audit i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:#fff}
  .ui-audit span:last-child i::after{background:var(--accent)}
  .ui-audit em{font-style:normal;font-weight:700;text-align:right}
  .ui-brand{display:flex;align-items:center;justify-content:center;gap:1.4em}
  .ui-brand .aa{font-family:var(--display);font-size:5.5em;line-height:1}
  .ui-brand .wm{font-family:var(--display);font-size:1.4em;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5em}
  .ui-sw{display:grid;grid-template-columns:repeat(2,2.3em);gap:.5em}
  .ui-sw i{height:2.3em;border-radius:50%;background:var(--c);border:2px solid rgba(255,255,255,.7)}
  .ui-wire{background:#fff;border-radius:.6em;padding:.7em;display:grid;gap:.5em}
  .ui-wire .n{display:flex;justify-content:space-between}.ui-wire .n i{width:2.5em;height:.45em;border-radius:1em;background:var(--mist)}.ui-wire .n i:first-child{background:var(--ink);width:3.5em}
  .ui-wire .h{height:3.4em;border-radius:.4em;background:var(--grad-tile)}
  .ui-wire .c{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}.ui-wire .c i{height:2.2em;border-radius:.4em;background:var(--mist)}
  .motion .art > *,.motion [data-kids] > *{transition:opacity .5s var(--glide) calc(.25s + var(--k,0) * .09s),translate .7s var(--glide) calc(.25s + var(--k,0) * .09s),scale .6s var(--bounce) calc(.25s + var(--k,0) * .07s)}
  .motion .ocard:not([data-live]) .art > :not(.chip){opacity:0;translate:0 .6em}
  .motion .ocard:not([data-live]) [data-kids] > *{opacity:0;scale:.6}
  .motion .ocard:not([data-live]) .chip{opacity:0;translate:0 -.75em;scale:.9}

  /* ---------- pills (physics) ---------- */
  .pills{--pill-fill:#fff;--pill-text:#1F2BFF;position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:52em;padding-block:var(--sec) 2em;overflow:clip}
  .pills__copy{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;pointer-events:none}
  .pills__copy .ln{display:block}
  .pills__copy .t-lead{max-width:32em;color:#fff;text-wrap:balance;margin-top:1.5em}
  .pills__hand{display:none;align-items:flex-end;gap:.3em;margin-top:1.75em;rotate:-3deg}
  .pills__hand svg{width:1.6em;height:1.9em;margin-bottom:-1.2em;--pd:.4s}
  @media (hover:hover) and (pointer:fine){.pills[data-live] .pills__hand{display:inline-flex}}
  .pills__list{position:relative;z-index:1;display:flex;flex-wrap:wrap-reverse;justify-content:center;gap:.6em;margin-top:4em}
  .pp{display:flex;align-items:center;height:3.2em;padding-inline:1.6em;border-radius:100em;background:#fff;color:var(--blue);font-size:1.25em;font-weight:500;white-space:nowrap}
  .pills__list .pp{--dd:calc(var(--k,0) * 70ms + 50ms)}
  .motion .pills:not([data-live]) .pp{opacity:0}
  .motion .pills:not([data-live]) .pills__list.is-in .pp{animation:pill-drop .75s var(--bounce) var(--dd) both,pill-bob 4.2s ease-in-out calc(var(--dd) + 1.1s) infinite}
  @keyframes pill-drop{0%{opacity:0;translate:0 -3em;scale:.9}30%{opacity:1}100%{opacity:1;translate:0 0;scale:1}}
  @keyframes pill-bob{50%{transform:translateY(-.3em) rotate(var(--r,0deg))}}
  .pills__canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:none;touch-action:pan-y}
  .pills[data-live] .pills__list{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pills[data-live] .pills__canvas{display:block}
  .pills[data-grab] .pills__canvas{cursor:grab}
  .pills[data-grabbing] .pills__canvas{cursor:grabbing}

  /* ---------- work: pinned scroll-slide ---------- */
  .work__head{margin-bottom:3em;position:relative}
  .work__title{font-size:7.2em;white-space:nowrap}
  .work__actions{display:flex;justify-content:space-between;align-items:center;gap:1.5em;margin-top:2.5em}
  .work[data-sliding]{height:420vh;padding-block:0}
  .work[data-sliding] .work__pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--header-h);padding-bottom:1em;overflow:clip}
  .work[data-sliding] .work__carousel{font-size:min(1em,2vh)}
  .work[data-sliding] .work__head{margin-bottom:1.5em}
  .work[data-sliding] .work__actions{margin-top:1.25em}
  .work[data-sliding] .track{scroll-snap-type:none;overflow:hidden}
  .work__stage{position:relative}
  .work__aside{position:absolute;bottom:calc(100% + .25em);left:calc(var(--inset) + 15em);display:flex;align-items:flex-start;gap:.5em;rotate:-3deg;pointer-events:none;--pd:.9s}
  .work__aside .t-hand{font-size:2.5em}
  .work__aside svg{flex:none;width:4.25em;height:3.2em;margin-top:.6em}
  .work__aside .slide-only,.work[data-sliding] .work__aside .drag-only{display:none}
  .work[data-sliding] .work__aside .slide-only{display:block}
  @media (hover:none),(max-width:767px){.work__aside{display:none}}
  .work__track{gap:1.5em;padding-block:.5em}
  .wcard{position:relative;width:26em;--on:0}
  .wcard[data-active]{--on:1}
  @media (hover:none){.wcard{--on:1}}
  .wframe{position:relative;aspect-ratio:1080/1250;border-radius:var(--r-card);background:var(--ink-2);overflow:hidden}
  .work[data-sliding] .wcard{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"frame frame" "name meta" "result result";align-items:start;column-gap:1em}
  .work[data-sliding] .wframe{grid-area:frame;aspect-ratio:7/5}
  .wimg{position:absolute;inset:0;background:var(--c);opacity:calc(.55 + .45 * var(--on));transition:transform 1.2s var(--glide),opacity .5s var(--glide);padding:1.4em;display:flex;flex-direction:column}
  @media (hover:hover){.motion .wcard:hover .wimg{transform:scale(1.03)}}
  .wimg .site-nav b{color:var(--fg,#fff)}
  .wimg .site-nav span i{background:var(--fg,#fff);opacity:.5}
  .wimg h4{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:3em;line-height:.9;color:var(--fg,#fff);margin-top:auto;max-width:80%}
  .wimg u{text-decoration:none;align-self:flex-start;margin-top:.8em;background:var(--fg,#fff);color:var(--c);border-radius:100em;padding:.5em 1em;font-size:.85em;font-weight:600}
  .wimg::after{content:"";position:absolute;right:-12%;top:18%;width:52%;aspect-ratio:1;border-radius:50%;background:var(--fg,#fff);opacity:.16}
  .wmeta{margin-top:1.5em}
  .work[data-sliding] .wmeta{grid-area:meta;margin-top:1.25em}
  .chiplet{display:inline-block;border:1px solid var(--line-dark-strong);border-radius:100em;padding:.35em .8em;font-size:.75em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap}
  .wname{color:#fff;margin-top:.5em}
  .work[data-sliding] .wname{grid-area:name;margin-top:.715em;font-size:1.75em;line-height:1.1;min-width:0}
  .wname a::after{content:"";position:absolute;inset:0}
  .wname a:hover{text-decoration:underline 2px;text-underline-offset:.18em}
  .wres{color:#fff;margin-top:.3em;opacity:.9}
  .work[data-sliding] .wres{grid-area:result;margin-top:.2em}
  .wbar{position:relative;height:1px;margin-top:3.5em;background:var(--line-dark)}
  .work[data-sliding] .wbar{margin-top:1.5em}
  .wbar i{position:absolute;top:-1px;left:0;width:100%;height:2px;background:#fff;transform-origin:0 50%;transform:scaleX(.12);transition:transform .6s var(--glide)}

  /* ---------- testimonials ---------- */
  .quotes__header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2em}
  .quotes__heading{display:grid;justify-items:start;gap:1.5em}
  .quotes__heading .t-hand{font-size:2.1em;rotate:-3deg}
  .quotes__body{display:grid;grid-template-columns:minmax(0,1fr) 19em;column-gap:5em;margin-top:5em;padding-top:3em;border-top:1px solid var(--line-dark-strong)}
  .quotes__main{min-width:0}
  .stage{position:relative;display:grid;background:#fff;border-radius:2em;padding:3.5em 3.5em 3em;min-height:26em}
  .qp{grid-area:1 / 1;display:flex;flex-direction:column;justify-content:space-between;gap:2.5em;min-width:0;opacity:0;visibility:hidden;transition:opacity .4s var(--glide),visibility 0s .4s}
  .qp[data-active]{opacity:1;visibility:visible;transition:opacity .7s var(--glide) .1s}
  .qp blockquote{font-size:1.75em;line-height:1.35;max-width:24em;color:var(--text);letter-spacing:-.01em}
  .motion .qp blockquote{translate:0 .5em;transition:translate .9s var(--glide) .1s}
  .motion .qp[data-active] blockquote{translate:0 0}
  .qp figcaption{display:flex;align-items:center;gap:1em;padding-right:9em}
  .ini{flex:none;display:grid;place-items:center;width:3.5em;height:3.5em;border-radius:50%;background:var(--mist);color:var(--blue);font-weight:600;letter-spacing:.03em}
  .qp figcaption b{display:block;font-weight:500;font-size:1.15em;color:var(--text)}
  .qp figcaption small{color:var(--muted)}
  .qnav{position:absolute;right:2.5em;bottom:2.5em;display:flex;gap:.6em}
  .qnav button{display:grid;place-items:center;width:3.5em;height:3.5em;border-radius:50%;background:var(--accent);color:var(--ink);transition:background-color var(--hover) var(--glide),color var(--hover) var(--glide),scale var(--hover) var(--glide)}
  .qnav button:hover{background:var(--blue);color:#fff;scale:1.06}
  .qnav .arr{width:1em}.qnav .prev .arr{rotate:-135deg}.qnav .next .arr{rotate:45deg}
  .qtabs{display:flex;gap:1.25em;margin:3em -.5em -.5em;padding:.5em;overflow-x:auto;scrollbar-width:none}
  .qtabs::-webkit-scrollbar{display:none}
  .qt{flex:1 0 auto;min-width:10.5em;text-align:left;white-space:nowrap;color:var(--on-blue-soft);padding-bottom:.5em;transition:color var(--hover) var(--glide)}
  .qt:hover,.qt[data-active]{color:#fff}
  .qt .who{display:flex;align-items:center;gap:.625em}
  .qt .ini{width:2em;height:2em;font-size:.65em;opacity:.7;transition:opacity var(--hover) var(--glide)}
  .qt:hover .ini,.qt[data-active] .ini{opacity:1}
  .qt .line{display:block;position:relative;height:2px;margin-top:.9em;background:var(--line-dark)}
  .qfill{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
  .qt[data-active] .qfill{transform:scaleX(1)}
  .motion .quotes[data-enhanced] .qt[data-active] .qfill{animation:qfill 14s linear forwards}
  .motion .quotes[data-paused] .qt[data-active] .qfill{animation-play-state:paused}
  .motion .quotes[data-stopped] .qt[data-active] .qfill{animation:none;transform:scaleX(1)}
  @keyframes qfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .quotes__side{display:flex;flex-direction:column;justify-content:space-between;gap:3em;padding-left:3em;border-left:1px solid var(--line-dark-strong)}
  .stat{display:flex;flex-direction:column;gap:1em}
  .stat b{font-family:var(--display);font-weight:400;font-size:9.5em;line-height:.86;color:#fff;font-variant-numeric:tabular-nums}
  .stat .stars{color:var(--accent);font-size:1.3em;letter-spacing:.2em}
  .stat p{max-width:12em;color:#fff}
  .quotes__side .t-hand{font-size:1.9em;rotate:-3deg}

  /* ---------- steps ---------- */
  .csteps__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:3em;align-items:end}
  .csteps__title{display:grid;justify-items:start;gap:1.5em}
  .csteps__title .t-hand{font-size:2.25em;rotate:-3deg}
  .csteps__head .t-lead{color:var(--on-ink)}
  .csteps__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25em;margin-top:3.5em}
  .scard{display:grid;align-content:start;gap:1em;padding:2.25em;border-radius:2em;background:var(--ink-2);border:1px solid var(--line-dark)}
  .scard:first-child{background-image:var(--grad-down);border-color:transparent}
  .scard__top{display:flex;justify-content:space-between;align-items:center;gap:1em;margin-bottom:1.25em}
  .icon-tile{display:inline-grid;place-items:center;flex:none;width:3.5em;height:3.5em;border-radius:.9em;background:var(--grad-tile);color:#fff}
  .icon-tile svg{width:1.6em;height:1.6em;fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}
  .scard:first-child .icon-tile{background:#fff;color:var(--blue)}
  .scard__n{color:var(--accent)}
  .scard p{color:var(--on-ink)}
  .scard:first-child p{color:#fff}
  .csteps__cta{display:grid;justify-items:center;gap:2em;margin-top:3em}

  /* ---------- faq ---------- */
  .faq__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:5em;align-items:start}
  .faq__intro{position:sticky;top:calc(var(--header-h) + 2em)}
  .faq__intro .t-h1{line-height:1}
  .faq__intro .soft{display:block}
  .faq__more{color:var(--body);margin-top:2em}
  .faq__more .text-link{color:var(--text)}
  .faq__hand{width:fit-content;margin-top:2.5em;rotate:-3deg;--pd:.6s}
  .faq__hand svg{display:block;width:100%;height:.75em;margin-top:.2em;stroke:var(--blue)}
  .faq__list{display:grid;row-gap:.75em}
  .fq{border-radius:2.25em;background:var(--paper);box-shadow:inset 0 0 0 1px transparent;transition:background-color var(--hover) var(--glide),box-shadow var(--hover) var(--glide)}
  .fq:hover{background:var(--mist)}
  .fq[open]{background:#fff;box-shadow:inset 0 0 0 1px var(--blue)}
  .fq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:2em;padding:1em 1em 1em 1.75em;border-radius:2.25em}
  .fq summary::-webkit-details-marker{display:none}
  .fq summary span:first-child{font-size:1.25em;font-weight:500;color:var(--text);transition:color var(--hover) var(--glide)}
  .fq summary:hover span:first-child,.fq[open] summary span:first-child{color:var(--blue)}
  .fq .ic{position:relative;flex:none;width:2.75em;height:2.75em;border-radius:.75em;color:var(--text);transition:rotate var(--hover) var(--glide)}
  .fq .ic::before,.fq .ic::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:1em;height:.125em;border-radius:.125em;background:currentColor;transition:rotate var(--hover) var(--glide)}
  .fq .ic::after,.fq[open] .ic{rotate:90deg}
  .fq[open] .ic::before{rotate:-90deg}
  .fq p{max-width:40em;color:var(--body);padding:.25em 4.5em 1.875em 1.75em}
  .motion .fq[open] p{animation:fadeup .6s var(--glide)}
  @keyframes fadeup{from{opacity:0;translate:0 .5em}}

  /* ---------- close card ---------- */
  .close{padding-top:0}
  .close__card{position:relative;display:grid;align-items:center;border-radius:2em;padding:3em 3.5em;overflow:hidden;background-image:var(--grad-down)}
  .close__copy{position:relative;z-index:1;display:grid;justify-items:start;gap:1.5em;max-width:56%}
  .close__copy .t-hand{font-size:2.1em;rotate:-3deg}
  .close__title{font-size:5.25em}
  .close__copy .t-lead{max-width:27em}
  .close__actions{display:flex;flex-wrap:wrap;gap:.75em}
  .close__strips{position:absolute;top:3.5em;bottom:-1em;right:3.5em;width:38%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:1em}
  .strip{transition:translate var(--hover) var(--glide)}
  .strip:nth-child(1){margin-top:7em}.strip:nth-child(3){margin-top:3.5em}
  .strip:hover{translate:0 -.5em}
  .strip a{display:block;background:#fff;border-radius:.75em .75em 0 0;overflow:hidden;box-shadow:0 18px 40px rgba(5,5,61,.28)}
  .strip .mock{height:26em;padding:.8em;font-size:.6em;display:flex;flex-direction:column;gap:.8em}
  .strip .mock .h{height:12em;border-radius:.6em;background:var(--c);padding:1em;display:flex;align-items:flex-end;font-family:var(--display);font-size:1.4em;color:#fff;text-transform:uppercase;line-height:.95}
  .strip .mock i{display:block;height:.7em;border-radius:1em;background:var(--mist)}
  .strip .mock .g{display:grid;grid-template-columns:1fr 1fr;gap:.6em}.strip .mock .g i{height:5em;border-radius:.5em}

  /* ---------- footer ---------- */
  .footer__sheet{padding-top:7em;padding-bottom:2.5em;overflow:clip}
  .talk{display:block;font-family:var(--display);text-transform:uppercase;font-size:21.5em;line-height:.8;color:#fff;white-space:nowrap;user-select:none;text-align:center}
  .talk .row{display:block;line-height:.78;transition:opacity .35s var(--glide)}
  .talk .row + .row{margin-top:.045em}
  .talk .a{opacity:.56}.talk .b{opacity:.76}
  @media (hover:hover){.talk .row:hover{opacity:1}}
  .talk[data-cursor-ready]{cursor:none}
  @supports (animation-timeline:view()){
    .motion .talk .row{animation:rise linear both;animation-timeline:view();animation-range:entry cover 40%}
  }
  @keyframes rise{from{translate:0 .35em}to{translate:0 0}}
  .footer__cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5em 3em;margin-top:3.5em;--pd:.3s}
  .footer__hand{display:inline-flex;align-items:center;gap:.4em;margin-left:.5em;font-size:2.5em;rotate:-3deg;color:#fff}
  .footer__hand .avatar{width:1.9em;height:1.9em;font-size:.7em;border:2px solid #fff;margin-right:.25em;rotate:3deg}
  .footer__hand .pen{width:2.4em;height:1.6em;margin-bottom:.5em}
  .footer__or{color:#fff}
  .footer__grid{display:grid;grid-template-columns:minmax(0,1fr) repeat(2,auto);gap:3em 4.5em;margin-top:5em;padding:3em;border-radius:var(--r-card);background:#fff;color:var(--body)}
  .footer__brand{display:flex;flex-direction:column;align-items:flex-start}
  .footer__brand .logo{font-size:3em}
  .footer__brand p{max-width:25em;margin-top:1.5em;text-wrap:balance}
  .footer__heading{color:var(--muted);margin-bottom:1.25em}
  .footer__col ul{display:grid;gap:.55em}
  .footer__col a{color:var(--text);white-space:nowrap;transition:color var(--hover) var(--glide)}
  .footer__col a:hover{color:var(--blue)}
  .footer__col .arr{width:.55em;opacity:.7;margin-left:.3em}
  .footer__legal{color:#fff;text-align:center;margin-top:2em}
  .footer__legal :is(a,button){margin-left:1.5em;color:inherit;text-transform:inherit;letter-spacing:inherit;border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .2s}
  .footer__legal :is(a,button):hover{border-color:#fff}
  .talk-cursor{position:fixed;top:0;left:0;z-index:60;width:0;height:0;pointer-events:none}
  .talk-cursor__disc{position:absolute;top:-5.5em;left:-5.5em;width:11em;height:11em;border-radius:50%;background:var(--accent);display:grid;place-items:center;opacity:0;scale:0;rotate:-45deg;box-shadow:0 18px 40px rgba(5,5,61,.35);transition:scale .5s var(--glide),opacity .25s linear,rotate .6s var(--glide)}
  .talk-cursor.is-on .talk-cursor__disc{opacity:1;scale:1;rotate:0deg}
  .talk-cursor.is-down .talk-cursor__disc{scale:.86}
  .talk-cursor__disc .arr{width:4em;background:var(--ink)}

  /* ---------- responsive ---------- */
  @media (max-width:991px){
    .header__nav{display:none}
    .hero__inner{grid-template-columns:minmax(0,1fr);min-height:0;padding-bottom:0}
    .hero h1{font-size:6.3em}
    .csigns__inner,.csteps__head,.faq__inner{grid-template-columns:minmax(0,1fr);gap:2em}
    .csigns__inner{gap:3em}
    .fix__title{font-size:8em}
    .fix__laptop{width:36em}
    .fix__stage{min-height:26em}
    .fcard{width:14em}
    .offer__head{gap:2em}
    .offer__track{margin-top:4em}
    .work__title{white-space:normal;font-size:8em}
    .work__title .soft{display:block}
    .wcard{width:20em}
    .quotes__body{grid-template-columns:minmax(0,1fr)}
    .quotes__side{flex-direction:row;align-items:flex-end;padding:3em 0 0;margin-top:3em;border-left:0;border-top:1px solid var(--line-dark-strong)}
    .qtabs{margin-inline:calc(var(--cp) * -1);padding-inline:var(--cp)}
    .csteps__grid{grid-template-columns:minmax(0,1fr)}
    .faq__inner{row-gap:3.5em}
    .faq__intro{position:static}
    .close__card{display:block;padding:2.5em 2.5em 0}
    .close__copy{max-width:none}
    .close__art{position:relative;height:24em;margin:2em -2.5em 0;overflow:hidden}
    .close__strips{width:100%;top:0;right:0;bottom:-1em;padding-inline:2.5em}
    .talk{font-size:13.6em}
    .footer__grid{grid-template-columns:repeat(2,auto);justify-content:space-between;gap:3em 2em}
    .footer__brand{grid-column:1 / -1}
  }
  @media (min-width:992px){.close__art{display:contents}}
  @media (max-width:767px){
    .t-h1{font-size:4em}
    .t-h2,.close__title{font-size:3.4em}
    .t-lead{font-size:1.2em}
    .hero h1{font-size:4.1em;white-space:normal}
    .proof{--frame:.5em}
    .proof__wall{padding-block:2.5em}
    .proof__name{font-size:2.4em}
    .proof__item{gap:3em;padding-right:3em}
    .notepad{padding:4em 1.2em 1.2em 5.6em;rotate:none}
    .notepad::after{left:4em}
    .tick{margin-left:-4em;margin-right:.6em}
    .fix__title{font-size:5em}
    .fix__stage{min-height:0;padding-block:2.5em}
    .fix__laptop{width:86vw;font-size:.75em}
    .fcard{width:11em;border-radius:1.25em;font-size:.8em}
    .offer__head{flex-direction:column;align-items:flex-start}
    .ocard{width:19em}
    .pills{min-height:44em}
    .pp{height:3em;padding-inline:1.3em;font-size:1.0625em}
    .work__title{font-size:4.6em}
    .work__actions{flex-wrap:wrap}
    .wcard{width:17em}
    .stage{padding:2em 1.5em 6.5em}
    .qp blockquote{font-size:1.35em}
    .qp figcaption{padding-right:0}
    .qnav{right:1.5em;bottom:1.5em}
    .stat b{font-size:6em}
    .scard{padding:1.75em}
    .fq summary{padding-left:1.25em}
    .fq p{padding:.25em 1.25em 1.5em}
    .close__card{padding:2em 1.5em 0}
    .close__art{margin-inline:-1.5em}
    .close__strips{padding-inline:1.5em}
    .footer__sheet{padding-top:5em}
    .talk{font-size:5.4em}
    .footer__cta{flex-direction:column;align-items:flex-start}
    .footer__hand{font-size:2em}
    .footer__grid{grid-template-columns:1fr 1fr;padding:2em}
  }
  @media (max-width:479px){
    .header__inner{gap:.75em}
    .header .logo{font-size:2em}
    .cluster{gap:.5em}
    .call{padding-inline:.35em 1em}
  }

  /* =================== multi-page components =================== */

  /* dropdowns in the top nav */
  .drop{position:relative}
  .drop__trigger{display:flex;align-items:center;gap:.5em;height:2.4em;padding-inline:1em;border-radius:100em;color:var(--ink);transition:background-color var(--hover) var(--glide),color var(--hover) var(--glide)}
  .drop:hover > .drop__trigger,.drop__trigger[aria-expanded=true],.drop__trigger[data-within]{background:var(--blue);color:#fff}
  .chev{width:.6em;height:.4em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:rotate var(--hover) var(--glide)}
  .drop:hover .chev,.drop__trigger[aria-expanded=true] .chev{rotate:180deg}
  .drop__panel{position:absolute;top:100%;left:50%;padding-top:.9em;opacity:0;visibility:hidden;translate:-50% -.4em;transition:opacity var(--hover) var(--glide),translate var(--hover) var(--glide),visibility 0s linear var(--hover)}
  .drop:hover > .drop__panel,.drop__trigger[aria-expanded=true] + .drop__panel{opacity:1;visibility:visible;translate:-50% 0;transition-delay:0s}
  .drop__list{display:grid;gap:.125em;min-width:14em;padding:.5em;border-radius:1.4em;background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(5,5,61,.16)}
  .drop__list a{display:flex;align-items:center;height:2.9em;padding-inline:1em;border-radius:100em;color:var(--text);white-space:nowrap;transition:background-color var(--hover) var(--glide),color var(--hover) var(--glide)}
  .drop__list .arr{width:0;opacity:0;transition:width var(--hover) var(--glide),margin-right var(--hover) var(--glide),opacity var(--hover) var(--glide)}
  .drop__list a:hover,.drop__list a:focus-visible,.drop__list a[aria-current]{background:var(--paper);color:var(--blue)}
  .drop__list a:hover .arr,.drop__list a:focus-visible .arr,.drop__list a[aria-current] .arr{width:.7em;opacity:1;margin-right:.6em}
  .menu__parent{font-family:var(--display);text-transform:uppercase;font-size:min(6.5em,calc((100svh - 12em) / 7),calc((100vw - 2 * var(--inset)) / 4));line-height:1.02;color:#fff;text-align:left;width:max-content;display:flex;align-items:center;gap:.25em;transition:color .3s,translate .6s var(--glide),opacity .6s var(--glide)}
  .menu__parent:hover{color:var(--accent)}
  .menu__parent span{font-size:.6em;transition:rotate var(--hover) var(--glide)}
  .menu__parent[aria-expanded=true] span{rotate:45deg}
  .motion .menu .menu__parent{opacity:0;translate:0 .4em}
  .motion .menu[data-open] .menu__parent{opacity:1;translate:0 0;transition-delay:0s,calc(var(--i) * 50ms + .1s),calc(var(--i) * 50ms + .1s)}
  .menu__sub{display:grid;grid-template-columns:repeat(2,max-content);gap:.4em 2.5em;padding:.4em 0 1em}
  .menu__sub[hidden]{display:none}
  .menu .menu__sub a{font-family:var(--sans);text-transform:none;font-size:1.25em;line-height:1.3;opacity:1;translate:none;color:var(--on-ink)}
  .menu .menu__sub a:hover{color:var(--accent)}

  /* inner page heroes */
  .phero,.ahero{position:relative;overflow:clip;background-image:var(--grad-down);padding:calc(var(--header-h) + 2.5em) 0 calc(var(--r-section) + 4em)}
  .phero__arrow{position:absolute;top:calc(var(--header-h) - 1em);right:var(--inset);width:24em;opacity:.5;background:linear-gradient(#5A5EFF,#B4B7FF)}
  .motion .phero__arrow{animation:hero-arrow 5.5s ease-in-out infinite alternate}
  .phero__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3em;align-items:end}
  .crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:.6em;color:var(--on-blue-soft);margin-bottom:2em}
  .crumbs li + li::before{content:"/";margin-right:.6em;opacity:.6}
  .crumbs a:hover{color:#fff}
  .phero__title{font-family:var(--display);font-weight:400;text-transform:uppercase;color:#fff;font-size:8.5em;line-height:.9;max-width:13ch}
  .phero__title .u,.ahero__title .u{position:relative;display:inline-block}
  .phero__title .u svg{position:absolute;top:94%;left:-.5%;width:101%;height:.18em;stroke-width:9px;--pd:1.1s}
  .phero__copy > .t-lead{color:#fff;max-width:38em;margin-top:1.75em;text-wrap:balance}
  .phero__actions{display:flex;flex-wrap:wrap;gap:.75em;margin-top:2em}
  .phero__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5em 3em;margin-top:2em}
  .phero__row .t-lead{color:#fff;max-width:36em}
  .phero + section,.ahero + .abody{position:relative;z-index:1;margin-top:calc(var(--r-section) * -1);border-radius:var(--r-section) var(--r-section) 0 0}
  .chips{display:flex;flex-wrap:wrap;gap:.6em}
  .pchip{display:inline-flex;align-items:center;height:2.6em;padding-inline:1.1em;border-radius:100em;border:1px solid var(--line-dark-strong);color:#fff;white-space:nowrap;transition:background-color var(--hover) var(--glide),color var(--hover) var(--glide)}
  a.pchip:hover{background:#fff;color:var(--blue)}
  .chips--ink .pchip{border-color:var(--line-strong);color:var(--text)}
  .ticket{width:18em;background:#fff;color:var(--ink);border-radius:1.25em;padding:1.25em;rotate:2deg;box-shadow:0 1.4em 3em rgba(5,5,61,.3)}
  .ticket > .t-meta{color:var(--muted)}
  .ticket .art{min-height:11em;margin:.8em 0;font-size:.85em}
  .ticket__count{font-family:var(--display);font-size:5em;line-height:1;color:var(--blue);margin-top:.15em}
  .ticket__stars{color:#FFC21A;letter-spacing:.15em;margin:.3em 0 .8em}
  .ticket__chips{display:flex;flex-wrap:wrap;gap:.4em}
  .ticket__chips li{font-size:.75em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:100em;padding:.35em .8em}
  .ticket--hello .t-hand{font-size:2.1em;rotate:-3deg;margin-bottom:.6em}
  .ticket__list{display:grid;gap:.7em}
  .ticket__list li{display:flex;align-items:baseline;gap:.6em;border-top:1px solid var(--line);padding-top:.7em}
  .ticket__list b{font-family:var(--display);font-weight:400;font-size:2em;line-height:1;color:var(--blue);min-width:1.6em}
  .faces{display:flex}
  .faces .ini{width:3em;height:3em;border:2px solid var(--blue);margin-left:-.6em;font-size:.85em}
  .faces .ini:first-child{margin-left:0}

  /* icon cards (what you get / included / how we work) */
  .mwho .t-h1,.cinc .t-h1{margin-top:.4em}
  .mwho .t-hand,.cinc .t-hand,.croutes .t-hand{font-size:2.1em;rotate:-3deg}
  .cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25em;margin-top:3.5em}
  .icard{display:grid;align-content:start;gap:.9em;padding:2em;border-radius:1.5em;background:#fff;color:var(--body)}
  [data-ground=white] .icard,.icard--paper{background:var(--paper)}
  .icard__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}
  .icard__top .t-meta{color:var(--muted)}
  .icard .t-h3{font-size:1.7em}
  .cinc__head,.croutes__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5em 3em}
  .croutes__head .t-lead{max-width:30em}
  .routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25em;margin-top:3.5em}
  .route{position:relative;display:flex;flex-direction:column;gap:1.25em;padding:1.25em;border-radius:1.5em;background:#fff;transition:translate var(--hover) var(--glide),box-shadow var(--hover) var(--glide)}
  .route:hover{translate:0 -.4em;box-shadow:0 1.2em 2.4em rgba(5,5,61,.12)}
  .route .art{min-height:11em;font-size:.85em}
  .route__body{display:grid;gap:.4em;padding-right:3em}
  .route .acard__go{position:absolute;right:1.25em;bottom:1.25em}

  /* about: numbers band */
  .anum{padding-block:6em;margin-inline:var(--cp)}
  .anum__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:3em;align-items:end}
  .anum__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5em}
  .anum__list li{border-top:1px solid var(--line-dark-strong);padding-top:1em}
  .anum__list b{display:block;font-family:var(--display);font-weight:400;font-size:4.5em;line-height:1;color:#fff}
  .anum__list span{color:var(--on-ink)}

  /* filters + search (portfolio, blog) */
  .filters{display:flex;flex-wrap:wrap;align-items:center;gap:.5em}
  .filters > .t-meta{color:var(--muted);margin-right:.75em}
  .filter{display:inline-flex;align-items:center;gap:.5em;height:2.6em;padding-inline:1.1em;border-radius:100em;border:1px solid var(--line-strong);color:var(--text);transition:background-color var(--hover) var(--glide),color var(--hover) var(--glide),border-color var(--hover) var(--glide)}
  .filter span{font-size:.75em;color:var(--muted)}
  .filter:hover{border-color:var(--ink)}
  .filter[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
  .filter[aria-pressed=true] span{color:var(--on-blue-soft)}
  [data-filter-list] > [hidden]{display:none}

  /* portfolio grid */
  .pgrid__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5em 1.5em;margin-top:3em}
  .pcard__media{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--ink-2);--on:1}
  /* real screenshots fill the card from the top of the page, like the drawn stand-ins */
  :is(.wframe,.pcard__media) > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--glide)}
  @media (hover:hover){.motion :is(.wcard,.pcard):hover :is(.wframe,.pcard__media) > img{transform:scale(1.03)}}
  @media (hover:hover){.motion .pcard:hover .wimg{transform:scale(1.03)}}
  .pcard__note{position:absolute;left:1em;bottom:1em;z-index:2;font-size:1.5em;max-width:85%;rotate:-2deg;opacity:0;translate:0 .4em;transition:opacity var(--hover) var(--glide),translate var(--hover) var(--glide)}
  .pcard:hover .pcard__note,.pcard:focus-within .pcard__note{opacity:1;translate:0 0}
  @media (hover:none){.pcard__note{opacity:1;translate:0 0}}
  .pcard__meta{margin-top:1.1em}
  .pcard__meta b{display:block;font-weight:500}
  .pcard__meta .t-meta{color:var(--muted)}

  /* testimonials wall */
  .wall__list{columns:3;column-gap:1.25em}
  .rcard{break-inside:avoid;margin-bottom:1.25em;padding:2em;border-radius:1.5em;background:#fff;color:var(--text);display:grid;gap:1em;position:relative}
  .rcard--blue{background-image:var(--grad-down);color:#fff}
  .rcard--ink{background:var(--ink);color:#fff}
  .rcard__mark{font-family:var(--display);font-size:4em;line-height:.6;height:.45em;color:var(--blue)}
  .rcard--blue .rcard__mark,.rcard--ink .rcard__mark{color:var(--accent)}
  .rcard__stars{color:#FFC21A;letter-spacing:.15em}
  .rcard blockquote{font-size:1.15em;line-height:1.5}
  .rcard figcaption{display:flex;align-items:center;gap:.8em;margin-top:.5em}
  .rcard figcaption b{display:block;font-weight:600}
  .rcard figcaption small{opacity:.7}

  /* contact */
  .book__window{border-radius:1.5em;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
  .book__chrome{position:relative;display:flex;align-items:center;height:3em;padding-inline:1.25em;background:var(--ink)}
  .book__chrome .lights span{background:var(--line-dark-strong)}
  .book__address{position:absolute;left:50%;translate:-50%;white-space:nowrap;background:rgba(255,255,255,.1);color:var(--on-ink);border-radius:100em;padding:.4em 1.4em}
  .book__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:3em;padding:3em}
  .book__copy{display:grid;align-content:start;gap:1.25em}
  .book__facts{display:grid;gap:.6em}
  .book__facts li{display:flex;align-items:center;gap:.7em;color:var(--text)}
  .book__facts li::before{content:"";flex:none;width:1.2em;height:1.2em;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat}
  .book__note .t-hand{font-size:1.9em;rotate:-3deg}
  .book__screen{min-height:34em;border-radius:1em;background:#fff;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
  .book__frame{width:100%;height:100%;min-height:42em;border:0}
  .book__soon{height:100%;display:grid;place-content:center;justify-items:center;gap:1em;text-align:center;padding:2em}
  .book__soon .t-hand{font-size:2.2em;rotate:-3deg}
  .msg__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:5em;align-items:start}
  .msg__side{display:grid;gap:1.5em;justify-items:start}
  .msg__side .t-hand{font-size:2.1em;rotate:-3deg}
  .form{display:grid;grid-template-columns:1fr 1fr;gap:1.25em;padding:2.5em;border-radius:1.5em;background:#fff;box-shadow:0 0 0 1px var(--line)}
  .form__field{display:grid;gap:.5em}
  .form__field.full{grid-column:1 / -1}
  .form__field .t-meta{color:var(--muted)}
  .form input,.form select,.form textarea{font:inherit;color:var(--text);background:var(--paper);border:1px solid transparent;border-radius:.8em;padding:.9em 1em;width:100%;-webkit-appearance:none;appearance:none;transition:border-color .2s,background-color .2s}
  .form textarea{min-height:9em;resize:vertical}
  .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue);background:#fff}
  .form .btn{grid-column:1 / -1;justify-self:start;border:0}
  .hp{position:absolute;left:-9999px}

  /* blog list */
  .bfeat{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border-radius:1.5em;overflow:hidden;background:var(--ink);transition:translate var(--hover) var(--glide)}
  .bfeat:hover{translate:0 -.3em}
  .bfeat .thumb{border-radius:0;height:100%}
  .bfeat__panel{display:flex;flex-direction:column;gap:1.1em;padding:2.5em;color:var(--on-ink)}
  .bfeat__top{display:flex;align-items:center;gap:1em}
  .badge-latest{background:var(--accent);color:var(--ink);border-radius:100em;padding:.35em .8em}
  .bfeat__title{font-size:2.1em;line-height:1.15;font-weight:500;color:#fff;letter-spacing:-.02em}
  .bfeat__ex{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .bfeat__foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
  .bfeat .acard__go{background:#fff;color:var(--ink)}
  .blist__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5em;margin:3.5em 0 2.5em}
  .search{display:flex;align-items:center;gap:.6em;height:3em;min-width:18em;padding-inline:1.1em;border-radius:100em;border:1px solid var(--line-strong);color:var(--muted);transition:border-color .2s}
  .search:focus-within{border-color:var(--blue)}
  .search svg{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .search input{font:inherit;color:var(--text);border:0;outline:0;background:none;width:100%}
  /* iOS zooms the page into any field under 16px */
  @media (max-width:767px){.form :is(input,select,textarea),.search input{font-size:max(1em,16px)}}
  .acards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3em 1.5em}
  .acard{display:flex;flex-direction:column;gap:.7em;height:100%}
  .acard .thumb{transition:translate var(--hover) var(--glide)}
  .acard:hover .thumb{translate:0 -.3em}
  .acard__meta{color:var(--blue);margin-top:.6em}
  .acard__title{transition:color var(--hover) var(--glide)}
  .acard:hover .acard__title{color:var(--blue)}
  .acard__foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.5em;color:var(--muted)}
  .acard__go{display:grid;place-items:center;flex:none;width:2.6em;height:2.6em;border-radius:50%;background:var(--paper);color:var(--ink);transition:background-color var(--hover) var(--glide),color var(--hover) var(--glide)}
  .acard__go .arr{width:.75em;rotate:45deg}
  a:hover .acard__go,.route:hover .acard__go{background:var(--blue);color:#fff}
  .blist__empty{margin-top:2em;color:var(--muted)}

  /* blog thumbnails: drawn in code, sized off their own width */
  .thumb{position:relative;display:block;aspect-ratio:16/10;border-radius:1em;overflow:hidden;color:#fff;container-type:inline-size;padding:6cqi 6cqi;
    background:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0 / 8cqi 8cqi,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0 / 8cqi 8cqi,var(--grad-tile)}
  .thumb__arrow{position:absolute;right:-8cqi;bottom:-14cqi;width:52cqi;opacity:.35;background:linear-gradient(#8F95FF,#C9CCFF)}
  .thumb__sticker{position:relative;font-size:4.6cqi;rotate:-3deg}
  .thumb__title{position:relative;display:block;font-family:var(--display);text-transform:uppercase;font-size:10cqi;line-height:.9;margin-top:2.5cqi;max-width:60%}
  .thumb__cap{position:relative;display:block;font-size:2.4cqi;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-top:3cqi}
  .thumb .soft{color:var(--on-blue-soft)}
  .thumb__art{position:absolute;right:5cqi;bottom:7cqi;width:40cqi;font-size:2.4cqi;min-height:0;background:none;padding:0;border-radius:0;overflow:visible}
  .thumb--big .thumb__title{font-size:8.5cqi}

  /* article */
  .ahero__inner{position:relative;z-index:1;max-width:var(--container)}
  .ahero__kicker{color:var(--on-blue-soft)}
  .ahero__title{font-family:var(--display);font-weight:400;text-transform:uppercase;color:#fff;font-size:5.5em;line-height:.95;max-width:17ch;margin-top:.4em}
  .ahero__by{color:#fff;margin-top:1.5em;opacity:.9}
  .abody{background:#fff;padding-bottom:var(--sec)}
  .abody__cover{padding-top:3em;max-width:62em;margin-inline:auto}
  .abody__cover .thumb{border-radius:1.5em}
  .abody__grid{display:grid;grid-template-columns:16em minmax(0,44em);justify-content:center;gap:4em;margin-top:4em}
  .toc{position:sticky;top:calc(var(--header-h) + 1.5em);display:grid;gap:.9em}
  .toc .t-meta{color:var(--muted)}
  .toc ol{display:grid;gap:.6em;counter-reset:toc}
  .toc a{display:block;color:var(--body);font-size:.95em;line-height:1.35;border-left:2px solid var(--line);padding-left:.9em;transition:color .2s,border-color .2s}
  .toc a:hover{color:var(--blue);border-color:var(--blue)}
  .prose{color:var(--body);font-size:1.15em;line-height:1.7}
  .prose > * + *{margin-top:1.1em}
  .prose h2{font-family:var(--display);font-weight:400;text-transform:uppercase;color:var(--text);font-size:2.4em;line-height:1;margin-top:1.6em;scroll-margin-top:calc(var(--header-h) + 1em)}
  .prose h3{font-size:1.3em;font-weight:600;color:var(--text);margin-top:1.4em}
  .prose ul,.prose ol{padding-left:1.3em;display:grid;gap:.4em}
  .prose ul{list-style:disc}.prose ol{list-style:decimal}
  .prose li::marker{color:var(--blue)}
  .prose a{color:var(--blue);border-bottom:1.5px solid currentColor}
  .prose strong{color:var(--text)}
  .prose blockquote{border-left:3px solid var(--accent);padding:.2em 0 .2em 1.2em;font-family:var(--hand);font-size:1.5em;line-height:1.3;color:var(--blue)}
  .prose .callout{background:var(--paper);border-radius:1em;padding:1.4em 1.6em}
  .author{display:flex;align-items:center;gap:1.4em;margin-top:3.5em;padding:1.8em;border-radius:1.5em;background:var(--paper)}
  .author p + p{margin-top:.4em}
  .author__logo{flex:none;display:grid;place-items:center;width:3.6em;height:3.6em;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--display);font-size:1.4em}
  .author__logo .dot{color:var(--accent)}
  .amore__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5em;margin-bottom:3em}

  @media (max-width:991px){
    .phero__inner,.anum__inner,.book__body,.msg__inner,.bfeat{grid-template-columns:minmax(0,1fr)}
    .phero__title{font-size:6.5em}
    .ticket{justify-self:start;rotate:-1deg}
    .cards3,.routes,.pgrid__list,.acards{grid-template-columns:repeat(2,minmax(0,1fr))}
    .anum__list{grid-template-columns:repeat(2,minmax(0,1fr))}
    .wall__list{columns:2}
    .abody__grid{grid-template-columns:minmax(0,1fr)}
    .abody__rail{display:none}
    .ahero__title{font-size:4.5em}
    .msg__inner{gap:3em}
  }
  @media (max-width:767px){
    .phero__title{font-size:4.2em}
    .phero__arrow{width:14em;opacity:.35}
    .cards3,.routes,.pgrid__list,.acards,.anum__list{grid-template-columns:minmax(0,1fr)}
    .wall__list{columns:1}
    .icard{padding:1.5em}
    .anum{margin-inline:0;border-radius:0}
    .book__body{padding:1.5em;gap:2em}
    .form{grid-template-columns:minmax(0,1fr);padding:1.5em}
    .bfeat__panel{padding:1.5em}
    .bfeat__title{font-size:1.6em}
    .search{min-width:0;width:100%}
    .ahero__title{font-size:3.2em}
    .menu__sub{grid-template-columns:1fr}
  }

  /* =================== project pages =================== */
  .pcard__link{display:block}
  .pcard__meta{display:flex;justify-content:space-between;align-items:center;gap:1em}
  .chero .phero__title{max-width:none}
  .chero{padding-bottom:calc(var(--r-section) + 16em)}
  .facts{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:2em;margin-top:2.75em;padding-top:1.75em;border-top:1px solid var(--line-dark-strong);position:relative;z-index:1}
  .fact{display:grid;align-content:start;gap:.7em}
  .fact dt{color:var(--on-blue-soft)}
  .fact dd{color:#fff}
  .fact .chips{gap:.4em}
  /* project tags: outline pills with an icon, linking to the matching service */
  .ichip{display:inline-flex;align-items:center;gap:.6em;height:3em;padding:0 1.3em 0 1.05em;border-radius:100em;border:1px solid var(--line-dark-strong);color:#fff;white-space:nowrap;transition:background-color var(--hover) var(--glide),border-color var(--hover) var(--glide),color var(--hover) var(--glide)}
  .ichip svg{flex:none;width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round}
  a.ichip:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
  .chero__note{color:var(--on-blue-soft);margin-top:1.5em;position:relative;z-index:1}
  .case__story{margin-top:4em}
  .case__block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:3em;padding-block:2.5em;border-top:1px solid var(--line)}
  .case__text{display:grid;gap:1em;color:var(--body)}
  .case__result{font-family:var(--display);text-transform:uppercase;font-size:3.2em;line-height:1;color:var(--blue)}
  .cpage__head,.bc__head{display:grid;justify-items:start;gap:1em;margin-bottom:3em}
  .cpage__head .t-hand,.bc__head .t-hand{font-size:2.1em;rotate:-3deg}
  .cpage__window{border-radius:1.5em;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 60px rgba(5,5,61,.12)}
  .cpage__scroll{max-height:min(70vh,46em);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .cpage__scroll img{width:100%;display:block}

  @media (max-width:991px){
    .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
    .fact--wide{grid-column:1 / -1}
    .case__block{grid-template-columns:minmax(0,1fr);gap:1.25em}
  }
  @media (max-width:767px){
    .facts{grid-template-columns:minmax(0,1fr)}
    .case__result{font-size:2.4em}
    .cpage__scroll{max-height:70vh}
  }

  /* =================== drawn stand-ins for client sites =================== */
  .wimg--sp{padding:0;display:block;background:#fff;overflow:hidden}
  .wimg--sp::after{display:none}
  .sp{--pad:3.2em;background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:1em;line-height:1.45;text-align:left}
  .sp h6,.sp p{margin:0}
  .sp--f-serif :is(.m-h1,.m-h2,.m-logo,.m-band b,.m-quote p){font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.01em}
  .sp--f-display :is(.m-h1,.m-h2,.m-logo){font-family:var(--display);font-weight:400;text-transform:uppercase}
  .sp--f-sans :is(.m-h1,.m-h2,.m-logo){font-family:var(--sans);font-weight:800;letter-spacing:-.03em}
  .m-nav{display:flex;align-items:center;gap:2.4em;padding:1.3em var(--pad);border-bottom:1px solid color-mix(in srgb,var(--tx) 12%,transparent)}
  .m-logo{font-size:1.45em;margin-right:auto;color:var(--tx);line-height:1}
  .m-links{display:flex;gap:2em;font-size:.9em;opacity:.8}
  .m-btn{display:inline-flex;align-items:center;justify-content:center;height:2.9em;padding:0 1.4em;border-radius:100em;background:var(--c);color:var(--fg);border:1.5px solid var(--c);font-size:.85em;font-weight:600;white-space:nowrap}
  .m-ghost{background:transparent;color:var(--tx);border-color:color-mix(in srgb,var(--tx) 30%,transparent)}
  .m-btns{display:flex;flex-wrap:wrap;gap:.7em;margin-top:1.8em}
  .m-hero{position:relative;overflow:hidden;padding:4.5em var(--pad) 5em}
  .m-split{display:grid;grid-template-columns:1.1fr 1fr;gap:3em;align-items:center}
  .m-kicker{font-size:.75em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--a);margin-bottom:1em}
  .sp .m-h1{font-size:4.4em;line-height:.98;color:var(--tx);max-width:11ch;margin:0}
  .sp .m-h1--xl{font-size:8em;line-height:.85}
  .m-p{font-size:1.05em;opacity:.75;margin-top:1.1em;max-width:30em}
  .m-sec{padding:4.5em var(--pad)}
  .sp .m-h2{font-size:2.6em;line-height:1;color:var(--tx);margin-bottom:1.1em}
  .m-alt{background:color-mix(in srgb,var(--c) 7%,var(--bg))}
  .m-photo{position:relative;aspect-ratio:4/3;border-radius:1em;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 55%,#fff),var(--c))}
  .m-badge{position:absolute;left:-1.4em;bottom:2em;background:#fff;color:#1b1b1b;padding:.9em 1.3em;border-radius:.8em;box-shadow:0 .8em 2em rgba(0,0,0,.15);font-size:.85em}
  .m-badge b{display:block;font-size:2em;line-height:1}
  .m-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4em}
  .m-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4em}
  .m-card{background:#fff;border-radius:1em;padding:1.8em;box-shadow:0 .2em .8em rgba(0,0,0,.05)}
  .m-ic{display:block;width:2.6em;height:2.6em;border-radius:.7em;background:var(--c);margin-bottom:1.2em}
  .m-card h6{font-size:1.15em;font-weight:700;margin-bottom:.4em}
  .m-card p{font-size:.9em;opacity:.7}
  .m-band{display:grid;grid-template-columns:repeat(3,1fr);gap:2em;padding:3.2em var(--pad);background:var(--c);color:var(--fg)}
  .m-band b{display:block;font-size:2.6em;font-weight:800;line-height:1.05}
  .m-band span{opacity:.8;font-size:.9em}
  .m-quote{display:grid;justify-items:center;gap:1em;padding:5em var(--pad);text-align:center;background:color-mix(in srgb,var(--a) 16%,var(--bg))}
  .m-stars{font-style:normal;color:#F5B301;letter-spacing:.2em}
  .m-quote p{font-size:1.6em;line-height:1.35;max-width:26em}
  .m-quote small{opacity:.6}
  .m-cta{display:grid;justify-items:center;gap:1.2em;padding:5em var(--pad);text-align:center;background:var(--c);color:var(--fg)}
  .sp .m-cta .m-h2{color:var(--fg);margin:0}
  .m-cta .m-p{opacity:.85;margin:0}
  .m-cta .m-btn{background:var(--fg);color:var(--c);border-color:var(--fg)}
  .m-form{display:grid;grid-template-columns:1fr 1fr;gap:.8em;width:min(100%,34em)}
  .m-form span{display:flex;align-items:center;height:3.2em;padding:0 1.1em;border-radius:.6em;background:#fff;color:#8a8f99;font-size:.85em}
  .m-form .wide,.m-form .m-btn{grid-column:1 / -1}
  .m-form .m-btn{justify-content:center;background:var(--fg);color:var(--c);font-weight:700}
  .m-form--inline{grid-template-columns:1fr auto}
  .m-form--inline .wide,.m-form--inline .m-btn{grid-column:auto}
  .m-foot{display:flex;align-items:center;gap:2.4em;padding:2.4em var(--pad);background:var(--tx);color:var(--bg);font-size:.9em}
  .m-foot .m-logo{color:var(--bg);margin-right:1em}
  .m-foot small{margin-left:auto;opacity:.6}
  /* law */
  .sp--law .m-photo--frame{aspect-ratio:4/5;max-width:24em;width:100%;justify-self:center;background:linear-gradient(160deg,#33496f,var(--c));box-shadow:1.4em 1.4em 0 -.2em var(--a)}
  .sp--law .m-card{border-top:3px solid var(--a)}
  /* restaurant */
  .sp--restaurant .m-hero{background:var(--c)}
  .sp--restaurant .m-hero :is(.m-h1,.m-p){color:var(--fg)}
  .sp--restaurant .m-hero .m-btn{background:var(--a);color:var(--tx);border-color:var(--a)}
  .sp--restaurant .m-hero .m-ghost{background:transparent;color:var(--fg);border-color:rgba(255,255,255,.5)}
  .m-pizza{position:relative;width:min(100%,24em);aspect-ratio:1;justify-self:center;border-radius:50%;background:radial-gradient(circle,#F6C76E 0 57%,#D98B2B 58% 66%,#A3561A 67% 70%,transparent 71%)}
  .m-pizza i{position:absolute;width:13%;aspect-ratio:1;border-radius:50%;background:#B3261E;box-shadow:inset -.25em -.25em 0 rgba(0,0,0,.18)}
  .m-pizza i:nth-child(1){top:24%;left:30%}.m-pizza i:nth-child(2){top:30%;left:58%}.m-pizza i:nth-child(3){top:52%;left:22%}.m-pizza i:nth-child(4){top:58%;left:52%}.m-pizza i:nth-child(5){top:40%;left:42%;background:#FFF3D6}
  .m-pizza i:nth-child(6),.m-pizza i:nth-child(7){width:9%;border-radius:0 70% 0 70%;background:#2E7D32;box-shadow:none}
  .m-pizza i:nth-child(6){top:44%;left:66%}.m-pizza i:nth-child(7){top:68%;left:38%;rotate:60deg}
  .m-menu{display:grid;grid-template-columns:1fr 1fr;gap:1.6em 3.5em}
  .m-item{display:grid;grid-template-columns:auto 1fr auto;gap:.6em;align-items:baseline}
  .m-dots{border-bottom:2px dotted color-mix(in srgb,var(--tx) 30%,transparent)}
  .m-item p{grid-column:1 / -1;font-size:.88em;opacity:.65}
  .m-photo--map{aspect-ratio:16/10;background:linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px) 0 0 / 2.2em 2.2em,linear-gradient(90deg,rgba(0,0,0,.07) 1px,transparent 1px) 0 0 / 2.2em 2.2em,#EFE6D8}
  .m-photo--map::after{content:"";position:absolute;left:48%;top:40%;width:1.6em;height:1.6em;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--c);box-shadow:0 0 0 .4em rgba(215,54,43,.2)}
  .m-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1em}
  .m-gallery i{aspect-ratio:1;border-radius:.8em;background:radial-gradient(circle at 40% 40%,#F6C76E 0 30%,#D98B2B 31% 38%,transparent 39%),linear-gradient(135deg,#3b2a20,#1b120d)}
  .m-gallery i:nth-child(2){background:linear-gradient(135deg,var(--c),#7a1b14)}.m-gallery i:nth-child(4){background:linear-gradient(135deg,var(--a),#e08a00)}
  /* realty */
  .m-hero--photo{min-height:32em;display:grid;align-items:end;padding-top:7em;background:linear-gradient(180deg,#A9CFE0 0%,#F4DDBD 72%,#E2C092 100%)}
  .m-houses i{position:absolute;bottom:0}
  .m-houses i:nth-child(1){left:-10%;width:70%;height:30%;border-radius:50% 50% 0 0;background:#C9A271}
  .m-houses i:nth-child(2){right:6%;width:38%;height:42%;background:#FBF7F1;box-shadow:inset 0 -.6em 0 #e6dccd}
  .m-houses i:nth-child(3){right:3%;width:44%;height:5%;bottom:42%;background:var(--c)}
  .m-over{position:relative;max-width:46em}
  .m-search{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:.5em;margin-top:2em;padding:.6em;border-radius:100em;background:#fff;box-shadow:0 1em 2em rgba(0,0,0,.12)}
  .m-search span{display:flex;align-items:center;padding:0 1.2em;font-size:.85em;color:#6b7280}
  .m-search .m-btn{color:var(--fg)}
  .m-listing{background:#fff;border-radius:1em;overflow:hidden;box-shadow:0 .4em 1.4em rgba(0,0,0,.08);padding-bottom:1.3em}
  .m-listing .m-photo{border-radius:0;background:linear-gradient(160deg,hsl(var(--h) 45% 75%),hsl(calc(var(--h) + 30) 35% 42%))}
  .m-listing b{display:block;font-size:1.4em;font-weight:800;padding:.8em 1.2em 0}
  .m-listing p{padding:0 1.2em;font-size:.9em}
  .m-listing small{display:block;padding:0 1.2em;opacity:.6;font-size:.8em}
  /* fitness */
  .sp--fitness .m-nav{border-color:#222}
  .sp--fitness .m-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
  .m-stripes i{position:absolute;right:-8%;width:46%;height:1.8em;background:var(--c);rotate:-14deg}
  .m-stripes i:nth-child(1){top:22%}.m-stripes i:nth-child(2){top:34%;opacity:.6}.m-stripes i:nth-child(3){top:46%;opacity:.3}
  .m-table{display:grid;gap:.5em}
  .m-row{display:grid;grid-template-columns:7em 1fr 1fr auto;gap:1em;align-items:center;padding:1.1em 1.4em;border-radius:.7em;background:#161616}
  .m-row b{color:var(--c)}
  .m-tag{font-size:.75em;border:1px solid #333;border-radius:100em;padding:.3em .8em}
  .sp--fitness .m-card{background:#161616;box-shadow:none}
  .m-plan b{display:block;font-family:var(--display);font-weight:400;font-size:2.8em;line-height:1;margin:.3em 0}
  .m-plan b small{font-size:.4em;opacity:.6}
  .m-plan .m-btn{margin-top:1.2em}
  .m-plan:nth-child(2){background:var(--c);color:var(--fg)}
  .m-plan:nth-child(2) .m-btn{background:#0B0B0B;color:var(--c);border-color:#0B0B0B}
  .sp--fitness .m-quote{background:#141414}
  /* shop */
  .m-bottles{display:flex;justify-content:center;align-items:flex-end;gap:1.4em;padding:2em 2em 0;aspect-ratio:4/3;border-radius:1.2em;background:color-mix(in srgb,var(--c) 28%,var(--bg))}
  .m-bottles i{width:22%;border-radius:1em 1em .5em .5em;background:linear-gradient(#fff,var(--a));box-shadow:0 .8em 1.6em rgba(0,0,0,.08)}
  .m-bottles i::before{content:"";display:block;height:1.6em;border-radius:.5em .5em 0 0;background:var(--tx);opacity:.85}
  .m-bottles i:nth-child(1){height:62%}.m-bottles i:nth-child(2){height:82%}.m-bottles i:nth-child(3){height:52%}
  .m-prod{display:grid;gap:.45em;text-align:center;justify-items:center}
  .m-bottle{width:100%;aspect-ratio:3/4;border-radius:1em;display:grid;place-items:end center;padding-bottom:12%;background:color-mix(in srgb,var(--c) 18%,#fff);filter:hue-rotate(var(--t))}
  .m-bottle i{width:34%;height:62%;border-radius:.8em .8em .5em .5em;background:linear-gradient(#fff,color-mix(in srgb,var(--c) 45%,#fff));box-shadow:0 .6em 1.2em rgba(0,0,0,.1)}
  .m-prod h6{font-size:1.05em;font-weight:600;margin-top:.5em}
  .m-prod p{font-size:.8em;color:#F5B301}
  .m-prod .m-btn{height:2.5em;margin-top:.3em}
  /* clinic */
  .m-photo--round{aspect-ratio:1;max-width:24em;justify-self:center;width:100%;border-radius:50% 50% 1.2em 1.2em;background:linear-gradient(160deg,#C9F1F3,var(--c))}
  .m-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.6em;padding:2em var(--pad);background:color-mix(in srgb,var(--c) 8%,#fff)}
  .m-chips span{border:1px solid color-mix(in srgb,var(--c) 40%,transparent);border-radius:100em;padding:.5em 1.1em;font-size:.85em}
  .sp--clinic .m-card{background:color-mix(in srgb,var(--c) 6%,#fff)}
  /* phone-sized version */
  /* capital (investment firm): warm neutrals, serif headings with a coral word, pastel panels */
  .sp--capital .m-nav{border:0}
  .sp--capital .m-logo{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;color:var(--a)}
  .sp--capital .m-links{margin-inline:auto;opacity:.7}
  .sp--capital .m-logo,.sp--capital .m-nav .m-btn{flex:none}
  .sp--capital .m-logo{margin-right:0}
  .sp--capital .soft{color:var(--a)}
  .sp--capital .m-btn{height:2.6em;font-size:.78em}
  .sp--capital .m-ghost{background:color-mix(in srgb,var(--tx) 7%,transparent);border-color:transparent}
  .m-tag{display:inline-block;width:fit-content;padding:.35em .9em;border-radius:100em;background:color-mix(in srgb,var(--tx) 7%,transparent);font-size:.7em;margin-bottom:1.6em}
  .m-center{display:grid;justify-items:center;text-align:center;padding-top:3.5em}
  .sp--capital .m-h1{max-width:13ch;font-size:4em;line-height:1.02}
  .sp--capital .m-h2{font-size:2.5em;line-height:1.05}
  .m-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:.9em;width:100%;margin-top:3.5em;padding-bottom:3em;border-bottom:1px solid color-mix(in srgb,var(--tx) 18%,transparent)}
  .m-pillar{display:grid;justify-items:center;align-content:space-between;gap:1.6em;min-height:12em;padding:1.4em 1em;border-radius:.4em;background:color-mix(in srgb,var(--tx) 5%,var(--bg))}
  .m-pillar h6{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:1.25em}
  .m-pillar p{font-size:.72em;opacity:.75}
  .m-dots{display:flex;align-items:center;justify-content:center;height:2.6em}
  .m-dots i{width:1.9em;height:1.9em;border-radius:50%;background:var(--a);margin-left:-.5em}
  .m-dots i:first-child{margin-left:0;width:.7em;height:.7em;opacity:.8}
  .m-dots i:only-child{width:1.3em;height:1.3em;opacity:1}
  .m-dots .ring{width:1.9em;height:1.9em;opacity:1;background:radial-gradient(circle,var(--a) 0 32%,color-mix(in srgb,var(--a) 45%,var(--bg)) 34%)}
  .m-about .m-split{align-items:end;grid-template-columns:1fr 1fr}
  .m-about .m-p{font-size:.85em;justify-self:end;max-width:22em}
  /* reads as an out-of-focus photo of a meeting room: soft warm shapes, no hard edges */
  .m-photo--wide{aspect-ratio:2.3/1;margin-top:2.4em;border-radius:.6em;display:grid;place-items:center;background:radial-gradient(ellipse 18% 32% at 24% 42%,#ecd0b6,transparent),radial-gradient(ellipse 14% 28% at 47% 36%,#c99a7b,transparent),radial-gradient(ellipse 18% 34% at 74% 44%,#e2bfa2,transparent),radial-gradient(ellipse 70% 40% at 50% 100%,#3f342c,transparent),linear-gradient(180deg,#bfae99 0%,#8a7663 60%,#5e4d40 100%)}
  .m-photo--wide .m-btn{background:color-mix(in srgb,#000 55%,transparent);color:#fff}
  .m-c{text-align:center}
  .m-tag--c{display:block;margin-inline:auto}
  .m-panels{display:grid;gap:1.2em;margin-top:.6em}
  .m-panel{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:end;min-height:15em;padding:1.6em 0 1.6em 1.6em;border-radius:.4em;background:var(--p);overflow:hidden}
  .m-panel small{position:absolute;top:1.4em;left:1.6em;font-size:.65em;opacity:.7}
  .m-panel h6{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:1.5em;margin-bottom:.5em}
  .m-panel p{font-size:.72em;opacity:.8;max-width:26em}
  .m-orb{position:relative;align-self:stretch;margin:-1.6em 0 -1.6em 1em;border-radius:50% 0 0 50% / 50% 0 0 50%;background:linear-gradient(140deg,color-mix(in srgb,var(--p) 40%,#3d3a37),color-mix(in srgb,var(--p) 70%,#1c1a18))}
  .m-chip{position:absolute;right:1.4em;bottom:1.4em;padding:.6em 1em;border-radius:100em;background:#fff;font-size:.7em;box-shadow:0 .4em 1em rgba(0,0,0,.12)}
  .m-posts{display:grid;grid-template-columns:1fr 1.1fr 1.1fr;gap:1.2em;align-items:start}
  .m-post{display:grid;align-content:space-between;gap:1em;min-height:17em;padding:1.4em;border-radius:.4em}
  .m-post small{font-size:.65em;opacity:.8}
  .m-post h6{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:1.3em;line-height:1.15}
  .m-post p{font-size:.72em;opacity:.85}
  .m-post--a{background:color-mix(in srgb,var(--a) 75%,#fff)}
  .m-post--a .m-btn{justify-self:start;background:var(--tx);border-color:var(--tx)}
  .m-post--b{background:linear-gradient(160deg,#5b4f48,#1f1b19);color:#fff}
  .m-post--b .m-btn{justify-self:start;background:#fff;color:var(--tx)}
  .m-news{display:grid;grid-template-columns:1fr 1fr;gap:2em;align-items:end;padding:3.4em var(--pad);background:color-mix(in srgb,var(--tx) 5%,var(--bg))}
  .m-news .m-h2{font-size:2em;margin:0}
  .m-news .m-p{font-size:.8em}
  .m-line{display:flex;align-items:center;justify-content:space-between;gap:1em;padding-bottom:.6em;border-bottom:1px solid color-mix(in srgb,var(--tx) 30%,transparent);font-size:.8em;opacity:.85}
  .m-foot--big{display:grid;gap:1.6em;background:var(--bg);color:var(--tx);padding-bottom:1.6em}
  .m-fcols{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:.6em 5em;font-size:.8em}
  .m-giant{font-family:var(--sans);font-weight:800;letter-spacing:-.05em;font-size:17em;line-height:.8;color:var(--a)}
  .m-foot--big small{margin:0;font-size:.7em}
  .sp--m{--pad:1.6em}
  .sp--m .m-links,.sp--m .m-nav .m-btn{display:none}
  .sp--m .m-nav::after{content:"";width:1.6em;height:.9em;border-block:.22em solid currentColor}
  .sp--m :is(.m-split,.m-grid3,.m-menu,.m-band,.m-form){grid-template-columns:1fr}
  .sp--m :is(.m-grid4,.m-gallery){grid-template-columns:1fr 1fr}
  .sp--m .m-h1{font-size:3.2em}
  .sp--m .m-h1--xl{font-size:5.2em}
  .sp--m .m-search{grid-template-columns:1fr;border-radius:1em}
  .sp--m .m-search span{height:2.6em}
  .sp--m .m-row{grid-template-columns:1fr 1fr}
  .sp--m .m-foot{flex-wrap:wrap;gap:1em}
  .sp--m .m-hero--photo{min-height:28em}
  /* on a phone the text column is full width, so decorations that sat beside it would sit on it */
  .sp--m .m-stripes,.sp--m .m-houses i:nth-child(n+2){display:none}
  .sp--m :is(.m-pillars,.m-posts){grid-template-columns:1fr 1fr}
  .sp--m :is(.m-about .m-split,.m-news,.m-panel){grid-template-columns:1fr}
  .sp--m .m-pillar{min-height:9em}
  .sp--m .m-panel{padding-right:1.6em}
  .sp--m .m-orb{margin:1.2em -1.6em -1.6em 30%;min-height:9em}
  .sp--m .m-posts .m-h2{grid-column:1 / -1}
  .sp--m .m-giant{font-size:6.2em}
  .sp--m .m-fcols{grid-template-columns:1fr 1fr;gap:.6em 2em}

  /* project shots: realistic devices, cropped, on brand-colored tiles that overlap the hero */
  .case{padding-top:0;display:flow-root}
  .case__shots{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25em;margin-top:-13em}
  .case__shot{position:relative;aspect-ratio:1;border-radius:2em;overflow:hidden;background:var(--paper)}
  .case__shot > img{width:100%;height:100%;object-fit:cover}
  .case__shot--laptop{background:color-mix(in srgb,var(--a) 62%,#fff)}
  .case__shot--phone{background:color-mix(in srgb,var(--c) 16%,#EEF0F6)}
  .mac{position:absolute;left:15%;top:16%;width:118%;filter:drop-shadow(0 2em 2.5em rgba(5,5,40,.28))}
  .mac__lid{position:relative;padding:.8em .8em 0;border-radius:1.3em 1.3em 0 0;background:#0D0D10;box-shadow:inset 0 0 0 .14em #2B2B31}
  .mac__lid::before{content:"";position:absolute;z-index:2;top:.8em;left:50%;translate:-50%;width:8%;height:1.05em;border-radius:0 0 .55em .55em;background:#0D0D10}
  .mac__screen{aspect-ratio:16/10.3;overflow:hidden;border-radius:.4em .4em 0 0;background:#fff}
  .mac__screen > img{width:100%;display:block}
  .mac__base{height:1.6em;margin:0 -3%;border-radius:0 0 .7em .7em;background:linear-gradient(#34343A,#121215)}
  .iphone{position:absolute;left:50%;top:11%;translate:-50% 0;width:50%;aspect-ratio:9/19.5;padding:.65em;border-radius:3.3em;background:#0D0D10;box-shadow:inset 0 0 0 .2em #2B2B31,0 2em 3em rgba(5,5,40,.22)}
  .iphone::before{content:"";position:absolute;z-index:2;top:1.35em;left:50%;translate:-50%;width:32%;height:1.75em;border-radius:1em;background:#0D0D10}
  .iphone::after{content:"";position:absolute;right:-.3em;top:24%;width:.32em;height:13%;border-radius:0 .2em .2em 0;background:#1C1C21}
  .iphone__screen{height:100%;overflow:hidden;border-radius:2.75em;background:#fff;padding-top:3.4em;position:relative}
  .iphone__screen::before{content:"9:41";position:absolute;top:1.15em;left:0;width:34%;text-align:center;font-size:.8em;font-weight:700;color:#111}
  .iphone__screen > img{width:100%;display:block}
  @media (max-width:767px){
    .case__shots{grid-template-columns:minmax(0,1fr);margin-top:-10em}
    .chero{padding-bottom:calc(var(--r-section) + 13em)}
  }

  /* home hero: floating result cards */
  .hero__figure{grid-area:1 / 2 / 4;align-self:start;position:relative;height:38em;translate:1em -1em}
  .fl{position:absolute;z-index:2;background:#fff;color:var(--ink);border-radius:1.1em;padding:1em 1.1em;box-shadow:0 1.2em 2.4em rgba(5,5,61,.25);rotate:var(--r,0deg)}
  .f1{top:13%;left:-6%;width:17em;--r:-3deg}
  .f1 .row{display:flex;align-items:center;gap:.6em;font-weight:600}
  .f1 .row i{width:.65em;height:.65em;border-radius:50%;background:var(--live);box-shadow:0 0 0 .25em rgba(63,191,127,.2)}
  .f1 p{margin:.35em 0 .2em;color:var(--body)}
  .fl small,.fl .lbl{font-size:.85em;color:var(--muted)}
  .f2{top:40%;right:-2%;width:14em;--r:3deg}
  .f2 b,.f4 b{display:block;font-family:var(--display);font-weight:400;line-height:1}
  .f2 b{font-size:3.4em;color:var(--blue);margin:.08em 0 .1em}
  .f2 svg{display:block;width:100%;height:2.6em;stroke:var(--blue);stroke-width:3px;--pd:1.5s}
  .kpi__top{display:flex;align-items:center;justify-content:space-between;gap:.5em}
  .kpi__chg{font-size:.75em;font-weight:700;color:#0B7A45;background:#DDF7EA;border-radius:100em;padding:.2em .6em;white-space:nowrap}
  .kpi__chart{position:relative}
  .f2 .kpi__area{position:absolute;inset:0;height:100%;stroke:none;fill:var(--blue);opacity:.14;mask:linear-gradient(#000,transparent)}
  .kpi__chart::after{content:"";position:absolute;right:-.2em;top:calc(8% - .3em);width:.6em;height:.6em;border-radius:50%;background:var(--blue);box-shadow:0 0 0 .25em rgba(31,43,255,.18)}
  .kpi__axis{display:flex;justify-content:space-between;margin-top:.4em;font-size:.7em;color:var(--muted)}
  .motion .kpi__area{opacity:0;transition:opacity .8s 1.9s}
  .motion .hero__figure.is-in .kpi__area{opacity:.14}
  .motion .kpi__chart::after{scale:0;transition:scale .45s var(--bounce) 2.3s}
  .motion .hero__figure.is-in .kpi__chart::after{scale:1}
  /* sticker top = note top + the arrow's drop, so it stays centred on the arrow tip */
  .f3{top:calc(52.5% + 2.62em);left:12%;z-index:3;display:flex;align-items:center;gap:.25em;background:var(--accent);font-family:var(--hand);font-weight:700;font-size:1.9em;line-height:1.1;padding:.1em .55em .2em;border-radius:.3em;--r:-6deg;box-shadow:0 .6em 1.4em rgba(5,5,61,.25)}
  .f4{bottom:2%;left:17%;width:17em;background:var(--ink);color:#fff;--r:-2deg}
  .f4__top{display:flex;align-items:center;gap:.5em;font-size:.85em;color:var(--on-ink)}
  .f4__ic{display:grid;place-items:center;flex:none;width:1.6em;height:1.6em;border-radius:.5em;background:var(--live);color:#fff}
  .f4__ic svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round}
  .f4__live{margin-left:auto;display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:#fff}
  .f4__live i{width:.5em;height:.5em;border-radius:50%;background:var(--live);box-shadow:0 0 0 .22em rgba(63,191,127,.25)}
  .f4__mid{display:flex;align-items:center;gap:.7em;margin-top:.45em}
  .f4__mid span{display:grid;font-size:.8em;line-height:1.3;color:var(--on-ink)}
  .f4__mid em{font-style:normal;font-weight:600;color:#fff}
  .f4 b{font-size:2.8em;color:var(--accent)}
  .meter{height:.5em;border-radius:1em;background:rgba(255,255,255,.15);margin-top:.5em;overflow:hidden}
  .meter i{display:block;height:100%;width:82%;background:var(--accent);border-radius:1em;transform-origin:left}
  .f5{top:3%;right:2%;display:flex;align-items:center;gap:.4em;border-radius:100em;padding:.55em 1.1em;font-weight:600;font-size:.95em;--r:4deg}
  .f5 em{font-style:normal;color:#FFC21A;-webkit-text-stroke:.5px #C9A800;letter-spacing:.1em}
  .g-logo{display:inline-block;flex:none;width:1.25em;height:1.25em}
  .chip--g{display:inline-flex;align-items:center;gap:.25em}.chip--g .g-logo{width:1em;height:1em;padding:.08em;border-radius:50%;background:#fff}
  .f3 .g-logo{width:.95em;height:.95em;padding:.08em;border-radius:50%;background:#fff}
  .motion .fl{opacity:0}
  .motion .hero__figure.is-in .fl{animation:drop .8s var(--bounce) var(--dd) both,bob 5s ease-in-out calc(var(--dd) + .8s) infinite}
  .motion .hero__figure.is-in :is(.f2,.f4){animation-duration:.8s,6.5s}
  .motion .meter i{scale:0 1;transition:scale 1s var(--glide) 1.6s}
  .motion .hero__figure.is-in .meter i{scale:1 1}
  .hero__note{position:absolute;z-index:3;top:52.5%;right:93%;width:11em;rotate:-4deg;color:#fff}
  .hero__note .t-hand{display:block;color:#fff}
  .hero__note svg{display:block;width:6.5em;height:3.8em;margin:.4em 0 0 5em;stroke:#fff;--pd:1.2s}
  @media (max-width:991px){
    .hero__figure{grid-area:auto;height:38em;margin-top:5em;translate:none;width:min(100%,32em);justify-self:end}
  }
  @media (max-width:767px){
    .hero__figure{height:34em;font-size:.82em;margin-top:7em;width:100%}
    .hero__note{top:-6.5em;right:auto;left:0;width:10em;font-size:1.1em}
    .hero__note svg{rotate:35deg;margin:.2em 0 0 3.5em;width:5em}
    /* phones: the arrow points down, so the sticker sits on the first card and the rating moves to the empty corner */
    .f1{left:0}.f2{top:38%;right:0}.f4{left:0;bottom:0;width:16em}.f3{top:5.5%;left:39%}.f5{top:47%;left:0;right:auto;font-size:.85em}
  }

  /* stand-in sites scale with whatever frame holds them, like a screenshot would */
  .wimg--sp,.mac__screen,.iphone__screen,.cpage__scroll{container-type:inline-size}
  .wimg--sp .sp{font-size:calc(100cqi / 72);pointer-events:none}
  .mac .sp{font-size:calc(100cqi / 62)}
  .iphone .sp{font-size:calc(100cqi / 25)}
  .cpage__scroll .sp{font-size:max(calc(100cqi / 84), 6px)}

  /* ---------- two ways to work: the white break after the pills ---------- */
  .ways__head{display:grid;justify-items:start;gap:1.5em}
  .ways__head .t-hand{font-size:2.1em;rotate:-3deg}
  .ways__panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr);margin-top:4em;border-radius:2em;padding:2em 3.5em 3em}
  .ways__switch{position:relative;display:grid;grid-template-columns:1fr 1fr;width:fit-content;padding:.375em;border-radius:100em;background:rgba(255,255,255,.12);border:1px solid var(--line-dark)}
  .ways__thumb{position:absolute;top:.375em;bottom:.375em;left:.375em;width:calc(50% - .375em);border-radius:100em;background:var(--ink);transition:translate .6s var(--glide)}
  .ways__panel[data-mode=project] .ways__thumb{translate:100% 0}
  .ways__tab{position:relative;padding:.8em 2em;border-radius:100em;color:var(--on-blue-soft);white-space:nowrap;transition:color var(--hover) var(--glide)}
  .ways__tab:hover,.ways__tab[aria-selected=true]{color:#fff}
  /* both slips share one cell, so the panel keeps its height when you switch */
  .ways__pane{grid-area:2 / 1;display:grid;grid-template-columns:minmax(0,1fr) 25em;gap:4em;align-items:center}
  .ways__pane[hidden]{display:grid;visibility:hidden}
  .ways__copy{display:grid;justify-items:start;gap:1.5em;padding-top:2em}
  .ways__big{display:grid;justify-items:start;gap:.3em;color:#fff}
  .ways__big b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:8em;line-height:.9}
  .ways__copy > p:not(.ways__big){max-width:33em;color:#fff;opacity:.9}
  /* the slip sticks out above and below the panel, like it just came out of a printer */
  /* both slips stretch to the same height whichever tab is open; the total sits at the bottom */
  .ways__receipt{position:relative;align-self:stretch;display:flex;flex-direction:column;margin-block:-4.5em -6em;filter:drop-shadow(0 1.4em 2.2em rgba(5,5,61,.28))}
  .ways__paper{--z:.55em;flex:1;display:flex;flex-direction:column;rotate:2.5deg;background:#fff;color:var(--ink);font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;padding:2.2em 2.2em 3em;
    mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--z)) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom / calc(2 * var(--z)) var(--z) repeat-x}
  .ways__shop{font-family:var(--display);font-size:2.2em;line-height:1;text-align:center}
  .ways__shop .dot{color:var(--blue)}
  .ways__plan{text-align:center;margin-top:.6em;color:var(--muted)}
  .ways__lines,.ways__terms{display:grid;gap:.75em;padding-block:1.3em;border-bottom:1.5px dashed var(--line-strong)}
  .ways__lines{margin-top:1.3em;border-top:1.5px dashed var(--line-strong)}
  .ways__lines div{display:flex;align-items:baseline;gap:.5em;font-size:.8em;text-transform:uppercase}
  .ways__lines div::before{content:"";order:1;flex:1 1 1em;border-bottom:2px dotted var(--line-strong)}
  .ways__lines dd{order:2;color:var(--blue);font-weight:600}
  .ways__terms div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:1em;font-size:.8em}
  .ways__terms dt{text-transform:uppercase;color:var(--muted)}
  .ways__terms dd{text-align:right}
  .ways__total{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:1.5em;padding-top:1.8em;font-size:.9em;text-transform:uppercase}
  .ways__fig{position:relative;font-family:var(--sans);font-weight:600;font-size:1.15em;text-transform:none;color:var(--blue);text-align:right}
  .ways__ring{position:absolute;top:-.75em;left:-1em;width:calc(100% + 2em);height:calc(100% + 1.5em);stroke:var(--blue);stroke-width:2px;--pd:1s}
  .ways__aside{position:absolute;right:calc(100% - 1.5em);bottom:7em;display:grid;justify-items:start;width:11em;rotate:-4deg}
  .ways__aside .t-hand{font-size:1.6em}
  .ways__aside svg{width:6em;height:3.5em;margin:.3em 0 0 3.5em;--pd:1.4s}
  .ways__foot{display:grid;justify-items:center;gap:1.75em;margin-top:6.5em;text-align:center}
  .ways__foot .t-h3 .u{position:relative;display:inline-block}
  .ways__foot .t-h3 .u svg{position:absolute;top:92%;left:-1%;width:102%;height:.3em;stroke-width:4px;--pd:.6s}
  @media (max-width:991px){
    .ways__panel{padding:2em 2em 2.5em}
    .ways__pane{grid-template-columns:minmax(0,1fr);gap:3em}
    .ways__big b{font-size:6em}
    .ways__pane{align-content:start}
    .ways__receipt{align-self:start;margin:0 auto -5em;width:min(100%,25em)}
    .ways__aside{right:auto;left:calc(100% - 3em);bottom:auto;top:-3.5em}
    .ways__foot{margin-top:8.5em}
  }
  @media (max-width:767px){
    .ways__panel{margin-top:3em;padding:1.25em 1.25em 2em;border-radius:1.5em}
    .ways__switch{width:100%}
    .ways__tab{white-space:normal;padding:.7em .8em;font-size:.9em;line-height:1.25}
    .ways__big b{font-size:4.5em}
    .ways__paper{rotate:1.5deg;padding:1.6em 1.4em 2.4em}
    .ways__terms div{grid-template-columns:auto minmax(0,1fr)}
    .ways__aside{position:static;order:-1;rotate:-3deg;margin-bottom:.5em}
    .ways__aside svg{rotate:70deg;margin:.2em 0 0 4em;width:4em}
    .ways__foot{margin-top:8em}
  }


  /* ---------- about: "how we got here" timeline, cards zigzag either side of a dashed spine ---------- */
  .story__head{display:flex;justify-content:space-between;align-items:flex-end;gap:3em}
  .story__head .t-lead{max-width:24em}
  .tl{position:relative;list-style:none;display:grid;gap:1.5em;margin-top:4.5em}
  .tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px dashed var(--line-strong);translate:-1px 0}
  .tl__row{display:grid;grid-template-columns:minmax(0,1fr) 8em minmax(0,1fr);align-items:center}
  .tl__card{grid-column:1;grid-row:1;display:grid;gap:.9em;padding:2em 2.2em;border-radius:1.5em;background:var(--paper);color:var(--body)}
  .tl__row--flip .tl__card{grid-column:3}
  .tl__node{grid-column:2;grid-row:1;justify-self:center;position:relative}
  .tl__node .icon-tile{box-shadow:0 0 0 .6em #fff,0 1em 2em rgba(31,43,255,.3)}
  .tl__tags{display:flex;align-items:center;flex-wrap:wrap;gap:.4em .8em}
  .tl__tags .t-hand{font-size:1.5em;rotate:-3deg}
  .tl__tags .t-small{color:var(--muted)}
  .tl__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:2.3em;line-height:1;color:var(--ink)}
  .tl__you{display:flex;align-items:flex-start;gap:.6em;color:var(--blue);font-weight:500}
  .tl__you .arrow-mark{flex:none;width:.8em;margin-top:.35em;background:var(--blue)}
  .mwho__cta{display:grid;justify-items:center;gap:1.4em;margin-top:4.5em}
  @media (max-width:767px){
    .story__head{display:grid;justify-items:start;gap:1.5em}
    .tl{margin-top:3em}
    .tl::before{left:1.75em}
    .tl__row{grid-template-columns:3.5em minmax(0,1fr);gap:1em;align-items:start}
    .tl__card,.tl__row--flip .tl__card{grid-column:2;padding:1.5em}
    .tl__node{grid-column:1;padding-top:1.2em}
    .tl__node .icon-tile{width:3em;height:3em;box-shadow:0 0 0 .45em #fff,0 .8em 1.6em rgba(31,43,255,.3)}
    .tl__title{font-size:1.9em}
  }

  /* ---------- 404 ---------- */
  .lost .phero__inner{align-items:center}
  .lost .phero__copy{display:grid;justify-items:start;gap:0}
  .lost .phero__actions{margin-top:2.5em}
  .lost__code{font-family:var(--display);font-size:22em;line-height:.8;color:rgba(255,255,255,.14);user-select:none}
  @media (max-width:991px){.lost__code{display:none}}

  /* ---------- analytics on/off, opened from "Cookie settings" (only rendered when Google Analytics is set up) ---------- */
  .consent{position:fixed;left:1.25em;bottom:1.25em;z-index:95;width:min(27em,calc(100vw - 2.5em));display:grid;gap:1em;padding:1.3em 1.4em;border-radius:1.25em;background:#fff;color:var(--body);box-shadow:0 0 0 1px var(--line),0 1.2em 3em rgba(5,5,61,.25)}
  .consent[hidden]{display:none}
  .consent p{font-size:.95em;line-height:1.45}
  .consent__actions{display:flex;justify-content:flex-end;gap:.6em}
  .consent .btn{height:2.75em;padding-inline:1.2em}