/* Base reset */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* ===== Site styles ===== */
/* Octave: Home new (Figma "Website Design new" 384:18407 → Home new 386:34361).
   One white page for now: slim nav, typed need line, octopus, logo strip and showreel. More sections come later.
   The design is light only, so the page commits to one look and sets every color explicitly. */
:root{
  --bg:#f1f3f2;          /* page */
  --surface:#f8faf9;     /* panels, chips, nav pill */
  --white:#ffffff;
  --ink:#242e2c;         /* text, icons, selected chip, dark button (Figma: light sections) */
  --ink-2:#626967;       /* secondary text */
  --ink-hover:#323e3b;
  --ink-press:#1b2321;
  --teal:#2dd4bf;        /* primary action, caret, accents */
  --teal-hover:#27c5b0;
  --teal-press:#21b19e;
  --teal-deep:#0e6b62;   /* outcomes, active tags */
  --mint:#d9f2ec;        /* active row, Octave column */
  --dark:#222424;        /* nav + hero band */
  --dark-ink:#ced9d7;    /* text and icons on the dark band */
  --dark-mute:#9aa3a1;   /* body copy on the dark band */
  --glass:rgba(206,217,215,.06);
  --glass-hover:rgba(206,217,215,.11);
  --glass-press:rgba(206,217,215,.16);
  --glass-rim:rgba(206,217,215,.09);
  --line:rgba(11,42,49,.08);
  --line-2:rgba(11,42,49,.10);
  --line-3:rgba(11,42,49,.14);
  --line-4:rgba(11,42,49,.20);
  --hover:rgba(11,42,49,.05);
  --press:rgba(11,42,49,.09);
  --scrim:rgba(11,42,49,.45);
  --on-dark:#f8faf9;
  --on-dark-2:rgba(248,250,249,.75);
  --danger:#b42318;
  --danger-bg:#fdeceb;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px, 7.78vw, 112px);
  --maxw:1216px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t1:120ms; --t2:200ms; --t3:320ms;
  --nav-h:98px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.is-locked{overflow:hidden}
body{margin:0;background:#fff;color:var(--ink);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:#fff}
h1,h2,h3,p,figure,blockquote,ul,ol,dl,dd,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img,svg,video{display:block;max-width:100%}
img{height:auto}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:max(16px,env(safe-area-inset-left,0px));top:-80px;z-index:120;background:var(--ink);color:var(--on-dark);padding:12px 18px;border-radius:999px;font-weight:500;transition:top var(--t2) var(--ease)}
.skip:focus-visible{top:calc(12px + env(safe-area-inset-top,0px))}
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
[id]{scroll-margin-top:84px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 26px;border-radius:999px;border:0 solid transparent;font-size:16px;font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background-color var(--t2) var(--ease),border-color var(--t2) var(--ease),color var(--t2) var(--ease),transform var(--t1) var(--ease)}
/* labels are trimmed to cap height → alphabetic baseline (Figma's vertical trim), so the pill centres the capitals exactly */
.lbl{display:block}
@supports (text-box: trim-both cap alphabetic){.lbl{text-box:trim-both cap alphabetic}}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--teal);color:var(--ink)}
.btn-primary:active{background:var(--teal-press)}
.btn-secondary,.btn-outline-light,.btn-outline-mute{height:48px;border-width:1px}   /* Figma: Secondary is 48 tall, its border included */
.btn-secondary{border-color:var(--line-4);color:var(--ink)}
.btn-secondary:active{background:var(--press)}
.btn-dark{background:var(--ink);color:var(--on-dark)}
.btn-dark:active{background:var(--ink-press)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn .arr{width:16px;height:16px;transition:transform var(--t2) var(--ease)}
@media (hover:hover){
  .btn-primary:hover{background:var(--teal-hover)}
  .btn-secondary:hover{background:var(--hover);border-color:rgba(11,42,49,.32)}
  .btn-dark:hover{background:var(--ink-hover)}
  .btn:hover .arr{transform:translateX(3px)}
}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--line-4);color:var(--ink);transition:background-color var(--t2),border-color var(--t2),transform var(--t1)}
.icon-btn svg{width:20px;height:20px}
.icon-btn:active{transform:scale(.94);background:var(--press)}
@media (hover:hover){.icon-btn:hover{background:var(--hover);border-color:rgba(11,42,49,.32)}}
.link-btn{font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-4);border-radius:4px;transition:text-decoration-color var(--t2)}
@media (hover:hover){.link-btn:hover{text-decoration-color:var(--ink)}}

/* ---------- nav: base layout (Home new colours follow below) ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--dark);color:var(--dark-ink);transition:background-color var(--t3) var(--ease),box-shadow var(--t3) var(--ease)}
.nav.is-scrolled{background:rgba(34,36,36,.9);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);box-shadow:0 1px 0 rgba(206,217,215,.08)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:24px;transition:padding var(--t3) var(--ease)}
.nav.is-scrolled .nav-in{padding-block:12px}
.brand{display:inline-flex;align-items:center;border-radius:8px;flex:none;color:#0f1116}
.nav .brand,.dlg-menu .brand{color:var(--dark-ink)}
.brand svg{width:119px;height:25px}
.glass{background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-rim),inset 0 1px 0 rgba(255,255,255,.035);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.links{display:flex;gap:2px;padding:6px;border-radius:999px}
.links a,.links button{display:flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:500;line-height:1.2;color:var(--dark-ink);transition:background-color var(--t2) var(--ease),color var(--t2) var(--ease)}
.links [aria-current]{background:rgba(206,217,215,.14);color:#f8faf9}
.links a:active,.links button:active{background:var(--glass-press)}
@media (hover:hover){.links a:not([aria-current]):hover,.links button:hover{background:var(--glass-hover);color:#e6eeec}}
.nav-end{display:none;align-items:center;gap:10px}
.menu-btn{display:none;width:48px;height:48px}
.nav .icon-btn,.dlg-menu .icon-btn{border-color:rgba(206,217,215,.28);color:var(--dark-ink);background:transparent}
.nav .icon-btn:active,.dlg-menu .icon-btn:active{background:var(--glass-press)}
@media (hover:hover){.nav .icon-btn:hover,.dlg-menu .icon-btn:hover{background:var(--glass-hover);border-color:rgba(206,217,215,.45)}}
@media (max-width:959px){.links{display:none}.nav-end{display:flex}.menu-btn{display:inline-grid}}
@media (max-width:599px){.nav-in{padding-block:16px}}


/* ---------- showreel player ---------- */
.player{position:relative;aspect-ratio:4/3;width:100%;border-radius:24px;overflow:hidden;background:var(--ink);color:var(--on-dark);isolation:isolate}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.player-hit{position:absolute;inset:0;z-index:1;cursor:pointer}
.player-scrim{position:absolute;inset:auto 0 0;height:46%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(11,42,49,.82),rgba(11,42,49,0));transition:opacity var(--t3) var(--ease)}
.player-big{position:absolute;left:50%;top:50%;z-index:3;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;transition:transform var(--t2) var(--ease),opacity var(--t2) var(--ease);filter:drop-shadow(0 10px 24px rgba(0,0,0,.28))}
.player-big svg{width:84px;height:84px}
.player-big .rp{display:none}
.player-big:active{transform:scale(.95)}
.player-big:focus-visible{outline-color:var(--on-dark);outline-offset:4px;border-radius:50%}
@media (hover:hover){.player-big:hover,.player-hit:hover ~ .player-big{transform:scale(1.06)}}
.player-caption{position:absolute;left:28px;bottom:23px;z-index:2;pointer-events:none;transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.pc-title{font-size:18px;font-weight:500;line-height:1.3}
.pc-sub{font-size:14px;line-height:1.5;color:var(--on-dark-2)}
.player-spin{position:absolute;left:50%;top:50%;z-index:3;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3px solid rgba(248,250,249,.22);border-top-color:var(--teal);animation:spin .8s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.player-bar{position:absolute;left:14px;right:14px;bottom:14px;z-index:4;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(11,42,49,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.pb-btn{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--on-dark);transition:background-color var(--t2)}
.pb-btn svg{width:20px;height:20px}
.pb-btn:focus-visible{outline-color:var(--on-dark);outline-offset:1px}
@media (hover:hover){.pb-btn:hover{background:rgba(248,250,249,.14)}}
.pb-btn .i-on,.pb-btn[aria-pressed="true"] .i-off{display:block}
.pb-btn .i-off,.pb-btn[aria-pressed="true"] .i-on{display:none}
.pb-time{flex:none;font-size:13px;font-variant-numeric:tabular-nums;color:var(--on-dark-2);padding:0 6px;min-width:88px;text-align:center}
.pb-range{flex:1;min-width:0;height:24px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;--p:0%}
.pb-range:focus-visible{outline:2px solid var(--on-dark);outline-offset:2px;border-radius:6px}
.pb-range::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--teal) var(--p),rgba(248,250,249,.26) var(--p))}
.pb-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--on-dark);border:0}
.pb-range::-moz-range-track{height:4px;border-radius:4px;background:rgba(248,250,249,.26)}
.pb-range::-moz-range-progress{height:4px;border-radius:4px;background:var(--teal)}
.pb-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--on-dark);border:0}
.player-fallback{position:absolute;inset:0;z-index:5;display:grid;place-items:center;align-content:center;gap:18px;padding:24px;text-align:center;background:var(--ink)}
.player-fallback svg{width:min(60%,360px);height:auto}
.player-fallback p{color:var(--on-dark-2);font-size:15px}
.player-fallback .btn{border-color:rgba(248,250,249,.35);color:var(--on-dark)}
/* player states */
.player[data-state="playing"] .player-big,.player[data-state="loading"] .player-big{opacity:0;pointer-events:none;transform:scale(.9)}
.player[data-state="playing"] .player-caption,.player[data-state="paused"] .player-caption,.player[data-state="loading"] .player-caption,.player[data-state="ended"] .player-caption{opacity:0;transform:translateY(6px)}
.player[data-state="playing"] .player-bar,.player[data-state="paused"] .player-bar,.player[data-state="loading"] .player-bar,.player[data-state="ended"] .player-bar{opacity:1;transform:none;pointer-events:auto}
.player[data-state="playing"].is-idle .player-bar{opacity:0;pointer-events:none;transform:translateY(8px)}
.player[data-state="playing"].is-idle .player-scrim{opacity:0}
.player[data-state="playing"].is-idle{cursor:none}
.player[data-state="ended"] .player-big .pl{display:none}
.player[data-state="ended"] .player-big .rp{display:block}

/* ---------- chips (the brief form) ---------- */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;background:var(--surface);border:1px solid var(--line-3);color:var(--ink);font-size:16px;font-weight:500;line-height:1.2;white-space:nowrap;transition:background-color var(--t2) var(--ease),border-color var(--t2) var(--ease),color var(--t2) var(--ease),padding var(--t2) var(--ease),transform var(--t1) var(--ease)}
.chip svg{display:none;width:14px;height:14px}
.chip[aria-pressed="true"]{height:42px;border-width:0;background:var(--ink);color:var(--on-dark);padding-left:14px}
.chip[aria-pressed="true"] svg{display:block}
.chip:active{transform:scale(.96)}
@media (hover:hover){
  .chip[aria-pressed="false"]:hover{background:var(--white);border-color:rgba(11,42,49,.34)}
  .chip[aria-pressed="true"]:hover{background:var(--ink-hover);border-color:var(--ink-hover)}
  .cs-tabs .chip:not([aria-current]):hover{background:var(--white);border-color:rgba(11,42,49,.34)}
  .cs-tabs .chip[aria-current]:hover{background:var(--ink-hover)}
}
.chip[aria-current="page"]{height:42px;border-width:0;background:var(--ink);color:var(--on-dark);padding-left:14px}
.chip[aria-current="page"] svg{display:block}

/* ---------- dialogs ---------- */
dialog.dlg{border:0;padding:0;margin:auto;background:var(--surface);color:var(--ink);max-width:none;max-height:none;opacity:0;overflow:hidden;transition:opacity var(--t2) var(--ease),transform var(--t3) var(--ease-out)}
dialog.dlg::backdrop{background:var(--scrim);opacity:0;transition:opacity var(--t2) var(--ease)}
dialog.dlg.is-in{opacity:1;transform:none}
dialog.dlg.is-in::backdrop{opacity:1}
.dlg-sheet{width:min(560px,calc(100% - 32px));height:80dvh;max-height:80dvh;border-radius:6px;transform:translateY(18px) scale(.985)}   /* popups take 80% of the height, centred */
.sheet{display:flex;flex-direction:column;height:100%}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 32px 16px;border-bottom:1px solid var(--line)}
.sheet-head h2{font-size:28px;font-weight:600;line-height:1.15;letter-spacing:-.02em}
.sheet-body{flex:1;overflow:auto;padding:24px 32px calc(32px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
.sheet-lede{color:var(--ink-2);margin-bottom:24px}
.form{display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.label{font-size:15px;font-weight:500;line-height:1.3;color:var(--ink)}
.label .opt{font-weight:400;color:var(--ink-2);margin-left:6px;font-size:14px}
.input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--line-3);border-radius:14px;padding:13px 16px;transition:border-color var(--t2),box-shadow var(--t2)}
textarea.input{resize:vertical;min-height:112px;line-height:1.5}
.input::placeholder{color:rgba(76,97,104,.7)}
@media (hover:hover){.input:hover{border-color:rgba(11,42,49,.3)}}
.input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(45,212,191,.22)}
.input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(180,35,24,.10)}
.hint{font-size:14px;color:var(--ink-2)}
.err{display:flex;gap:6px;align-items:flex-start;font-size:14px;color:var(--danger);line-height:1.4}
.err svg{flex:none;width:16px;height:16px;margin-top:1px}
.chips-sm{gap:8px}
fieldset.is-invalid .chips-sm .chip[aria-pressed="false"]{border-color:rgba(180,35,24,.45)}
.form-foot{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:4px}
.done{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.done .ico{width:44px;height:44px}
.done h3{font-size:28px;font-weight:600;line-height:1.15;letter-spacing:-.02em}
.done > p{color:var(--ink-2)}
.summary{width:100%;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:6px 18px}
.summary > div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:12px 0}
.summary > div + div{border-top:1px solid var(--line)}
.summary dt{font-size:14px;color:var(--ink-2)}
.summary dd{font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.done-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:4px}
.done-status{font-size:14px;color:var(--ink-2);min-height:21px}
.done-status strong{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.done-status a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-4);text-underline-offset:3px;border-radius:4px}
@media (hover:hover){.done-status a:hover{text-decoration-color:currentColor}}

dialog.dlg.dlg-menu{margin:0 0 auto;width:100%;max-height:70dvh;overflow:auto;border-radius:0 0 24px 24px}   /* drops from the top */
.dlg-menu{transform:translateY(-18px)}
dialog.dlg.dlg-menu{background:var(--dark);color:var(--dark-ink)}
.menu{display:flex;flex-direction:column;gap:20px;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:24px}
.menu-head{display:flex;align-items:center;justify-content:space-between}
.menu-links{display:flex;flex-direction:column}
.menu-links a,.menu-links button{display:block;width:100%;padding:14px 4px;font-size:24px;font-weight:500;letter-spacing:-.01em;color:var(--dark-ink);border-bottom:1px solid rgba(206,217,215,.1);border-radius:6px}
.menu .btn{width:100%}

/* ---------- toasts ---------- */
.toasts{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:150;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(520px,calc(100% - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:14px;max-width:100%;padding:12px 12px 12px 20px;border-radius:999px;background:var(--ink);color:var(--on-dark);font-size:15px;line-height:1.35;box-shadow:0 14px 34px rgba(11,42,49,.28);animation:toast-in var(--t3) var(--ease-out)}
.toast.no-act{padding-right:20px}
.toast button{flex:none;padding:7px 12px;border-radius:999px;color:var(--teal);font-weight:500}
.toast button:focus-visible{outline-color:var(--on-dark)}
@media (hover:hover){.toast button:hover{background:rgba(248,250,249,.1)}}
.toast.out{opacity:0;transform:translateY(8px);transition:opacity var(--t2),transform var(--t2)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}}



/* ---------- mobile menu: light, like the nav ---------- */
dialog.dlg.dlg-menu{background:#fff;color:#0f1116}
.dlg-menu :focus-visible{outline-color:#0f1116}
.dlg-menu .brand{color:#0f1116}
.dlg-menu .brand .brand-new{display:block}
.dlg-menu .icon-btn{border-color:#e4e5e5;color:#0f1116;background:transparent}
.dlg-menu .icon-btn:active{background:#ececec}
@media (hover:hover){.dlg-menu .icon-btn:hover{background:#f5f5f5;border-color:#d6d8d8}}
.menu-links a{color:#0f1116;border-bottom-color:#f0f1f1;font-weight:400;letter-spacing:-.02em}
.dlg-menu .menu-head{padding-top:clamp(0px,1.5vw,28px)}

/* ---------- phones ---------- */
@media (max-width:599px){
  .player-caption{left:18px;bottom:16px}
  .player-big,.player-big svg{width:68px;height:68px}
  .player-big{margin:-34px 0 0 -34px}
  .pb-time{min-width:0;font-size:12px}
  dialog.dlg.dlg-sheet{margin:auto 0 0;width:100%;border-radius:6px 6px 0 0}   /* phones: a bottom sheet, 80% tall */
  .dlg-sheet{transform:translateY(48px)}
  .sheet-head{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .sheet-body{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .player-spin{animation:none}
}

/* Intro loader (the Octave logo while the page loads) */
html.is-loading{overflow:hidden}
.ld{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;background:#fff;transition:opacity 520ms cubic-bezier(.22,1,.36,1),visibility 0s linear 520ms}
.ld.is-done{opacity:0;visibility:hidden;pointer-events:none}
.ld-logo{display:block;width:clamp(168px,17vw,240px);height:auto;overflow:visible;transition:transform 520ms cubic-bezier(.22,1,.36,1)}
.ld.is-done .ld-logo{transform:translateY(-12px) scale(.97)}
.ld-rise{transform:translateY(11.6px);animation:ld-rise 950ms cubic-bezier(.22,1,.36,1) 280ms forwards}
.ld-bob{animation:ld-bob 2.2s ease-in-out 1.25s infinite alternate}
.ld-sea{opacity:0;animation:ld-fade 520ms ease-out 60ms forwards}
.ld-flow{animation:ld-flow 1.15s linear infinite}
.ld-word path{opacity:0;transform:translateX(-2.4px);transform-box:fill-box;animation:ld-in 640ms cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(620ms + var(--i) * 70ms)}
@keyframes ld-rise{to{transform:translateY(0)}}
@keyframes ld-bob{to{transform:translateY(-.55px)}}
@keyframes ld-fade{to{opacity:1}}
@keyframes ld-flow{to{transform:translateX(6.0754px)}}
@keyframes ld-in{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ld-rise,.ld-bob,.ld-sea,.ld-flow,.ld-word path{animation:none;transform:none;opacity:1}
  .ld,.ld-logo{transition-duration:200ms}
  .ld.is-done .ld-logo{transform:none}
}

/* ---------- Inquiry panel (Figma "Inquiry popup" 580:36314 → Start panel 580:36570) ----------
   White, full height, 762px wide from the right over a 40% black scrim. 64px padding (40px at the bottom), 24px from
   the copy to the form. Chips 13/16 with a .8px #dbdcdc ring; picked ones go #232424 with a check. Fields are
   underlined (.8px #dbdcdc), labels 13px #979b99, the email is the only required field (teal asterisk). */
dialog.dlg.dlg-drawer{margin:0 0 0 auto;width:min(762px,100%);height:100vh;height:100dvh;max-height:none;border-radius:0;background:#fff;color:#232424;opacity:1;transform:translateX(100%);transition:transform 200ms cubic-bezier(.4,0,1,1)}
dialog.dlg.dlg-drawer.is-in{transform:none;transition:transform 420ms var(--ease-out)}
dialog.dlg.dlg-drawer::backdrop{background:rgba(0,0,0,.4)}
.iq{position:relative;height:100%;overflow:auto;overscroll-behavior:contain;padding:64px 64px calc(40px + env(safe-area-inset-bottom,0px));font-family:"SF Pro Display",var(--font-n);-webkit-font-smoothing:antialiased}
.iq-view{display:flex;flex-direction:column;align-items:stretch;gap:24px}
.iq-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:370px}
.iq-title{display:flex;flex-direction:column;font-weight:400;line-height:1;letter-spacing:-.02em;outline:none}
.iq-title .a{font-size:32px;color:#7e8180}
.iq-title .b{font-size:44px;line-height:46px;color:#000}   /* the two lines stack to 78px, as in Figma */
.iq-lede,.iq-mail{font-size:15px;line-height:1.6;color:#7d8281}
.iq-ink{color:#232424;overflow-wrap:anywhere}
.iq-mail a,.iq-status a{color:#000;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.8px;border-radius:2px}
.iq-x{position:absolute;top:64px;right:64px;z-index:1;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:none;color:#232424;cursor:pointer;transition:background-color 160ms}
.iq-x svg{display:block;width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square}
.iq-form{display:flex;flex-direction:column;gap:18px}
.iq-group{display:flex;flex-direction:column;gap:8px}
.iq-l{align-self:flex-start;font-size:13px;line-height:16px;color:#979b99}
.iq-req{color:#2dd4bf}
.iq-opts{display:flex;flex-wrap:wrap;gap:6px 4px}   /* 4px between chips, 6px between rows, for needs, budget and timeline alike */
#chips-form{gap:6px 4px}   /* the needs: 4px apart, rows 6px apart, as the page's chips */
.iq-chip{display:inline-flex;align-items:center;gap:2px;margin:0;padding:7px 14px;border:.8px solid #dbdcdc;border-radius:999px;background:#fff;color:#232424;font:400 13px/16px "SF Pro Display",var(--font-n);letter-spacing:-.02em;white-space:nowrap;cursor:pointer;transition:background-color 160ms,border-color 160ms,color 160ms}
.iq-chip svg{display:none;flex:none;width:12px;height:12px;fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.iq-chip[aria-pressed="true"]{padding:7px 15.2px;border-color:#232424;background:#232424;color:#fff}
.iq-chip[aria-pressed="true"][data-need] svg{display:block}
.iq-chip[data-need],.iq-chip[data-need][aria-pressed="true"]{padding:7px 16px 8.5px}   /* 33px tall, 16px sides (Figma 582:2560) */
.iq-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.iq-in{display:block;width:100%;margin:0;padding:8px 0 10px;border:0;border-bottom:.8px solid #dbdcdc;border-radius:0;background:transparent;color:#232424;font:400 15px/21px "SF Pro Display",var(--font-n);outline:none;box-shadow:none;transition:border-color 160ms,box-shadow 160ms}
.iq-in-lg{font-size:16px;line-height:22px}
.iq-in::placeholder{color:#979b99;opacity:1}
.iq-in:focus{border-bottom-color:#2dd4bf;box-shadow:0 .8px 0 #2dd4bf}
.iq-in[aria-invalid="true"]{border-bottom-color:#b42318;box-shadow:0 .8px 0 #b42318}
.iq-ta{min-height:64px;resize:vertical}
.iq-err{display:flex;gap:6px;align-items:flex-start;margin-top:2px;font-size:13px;line-height:1.4;color:#b42318}
.iq-err svg{flex:none;width:14px;height:14px;margin-top:2px}
.iq-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.iq-submit{padding-top:20px}
.iq-btn{display:inline-flex;align-items:center;gap:6px;height:34px;margin:0;padding:0 16px;border:0;border-radius:999px;background:#2dd4bf;color:#000;font:400 13px/16px "SF Pro Display",var(--font-n);letter-spacing:-.02em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color 160ms,box-shadow 160ms,transform 120ms}
.iq-btn > span{padding-bottom:2px}
.iq-arr{flex:none;width:10px;height:8.21px;fill:currentColor}
.iq-btn:active{background:#21b19e;transform:scale(.97)}
.iq-btn.is-ghost{background:#fff;color:#232424;box-shadow:inset 0 0 0 .8px #dbdcdc}
.iq-btn.is-ghost:active{background:#f5f5f5}
.iq-chip:focus-visible,.iq-btn:focus-visible,.iq-x:focus-visible,.iq-link:focus-visible,.iq-mail a:focus-visible,.iq-status a:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px}
@media (hover:hover){
  .iq-chip[aria-pressed="false"]:hover{border-color:#b9bdbc}
  .iq-chip[aria-pressed="true"]:hover{border-color:#000;background:#000}
  .iq-in:not(:focus):not([aria-invalid="true"]):hover{border-bottom-color:#b9bdbc}
  .iq-btn:not(.is-ghost):hover{background:#27c5b0}
  .iq-btn.is-ghost:hover{box-shadow:inset 0 0 0 .8px #b9bdbc}
  .iq-x:hover{background:#f5f5f5}
}
.iq-sum{display:flex;flex-direction:column;margin:0}
.iq-sum > div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:.8px solid #dbdcdc}
.iq-sum dt{font-size:13px;line-height:21px;color:#979b99}
.iq-sum dd{margin:0;font-size:15px;line-height:21px;color:#232424;white-space:pre-wrap;overflow-wrap:anywhere}
.iq-acts{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px}
.iq-status{font-size:13px;line-height:1.5;color:#7d8281;min-height:20px}
.iq-status strong{color:#232424;font-weight:400;overflow-wrap:anywhere}
.iq-link{align-self:flex-start;padding:0;border:0;background:none;color:#232424;font:400 13px/1.5 "SF Pro Display",var(--font-n);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.8px;cursor:pointer;border-radius:2px}
@media (max-width:760px){
  .iq{padding:24px max(20px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
  .iq-x{top:16px;right:max(12px,env(safe-area-inset-right,0px))}
  .iq-head{max-width:calc(100% - 40px)}
  .iq-title .a{font-size:28px}
  .iq-title .b{font-size:38px;line-height:40px}
  .iq-row{grid-template-columns:minmax(0,1fr);gap:18px}
  .iq-sum > div{grid-template-columns:88px minmax(0,1fr);gap:12px}
}
@media (prefers-reduced-motion:reduce){dialog.dlg.dlg-drawer,dialog.dlg.dlg-drawer.is-in{transform:none;opacity:0;transition:opacity 1ms}dialog.dlg.dlg-drawer.is-in{opacity:1}}

/* ---------- copy the studio email: a 16px icon right of the address (Start section and inquiry panel).
   Hover or focus shows "Copy"; a click copies it, the icon turns into a check and the tip says "Copied". ---------- */
.mail-copy{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.cp-btn{position:relative;display:inline-grid;place-items:center;flex:none;width:28px;height:28px;margin:-4px 0;padding:0;border:0;border-radius:6px;background:none;color:#7d8281;cursor:pointer;transition:background-color 160ms,color 160ms}
.cp-btn svg{grid-area:1/1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:opacity 160ms,transform 160ms}
.cp-ok{opacity:0;transform:scale(.6)}
.cp-btn.is-ok{color:#0e6b62}
.cp-btn.is-ok .cp-ico{opacity:0;transform:scale(.6)}
.cp-btn.is-ok .cp-ok{opacity:1;transform:none}
.cp-tip{position:absolute;bottom:calc(100% + 4px);left:50%;padding:4px 8px;border-radius:6px;background:#232424;color:#fff;font:400 12px/16px "SF Pro Display",var(--font-n);letter-spacing:0;white-space:nowrap;opacity:0;transform:translate(-50%,4px);pointer-events:none;transition:opacity 160ms,transform 160ms}
.cp-btn:focus-visible{outline:2px solid #2dd4bf;outline-offset:1px}
.cp-btn:focus-visible .cp-tip,.cp-btn.is-done .cp-tip{opacity:1;transform:translate(-50%,0)}
@media (hover:hover){
  .cp-btn:hover{background:rgba(35,36,36,.06);color:#232424}
  .cp-btn.is-ok:hover{color:#0e6b62}
  .cp-btn:hover .cp-tip{opacity:1;transform:translate(-50%,0)}
}

/* inquiry panel: the hidden bot trap and the sending state */
.iq-hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.iq-btn[aria-busy="true"]{cursor:progress;opacity:.75}
.iq-btn:disabled{pointer-events:none}

/* ---------- Phone menu (below 960px), in the inquiry panel's style ----------
   White, full height, from the right over the 40% black scrim (762px wide at most). The logo and the X sit exactly
   where the nav's logo and menu icon are. Rows: SF Pro Display 32px, .8px #dbdcdc rules, Figma's arrow on the right
   (teal on the current page). Then Start a project and the studio email with its copy icon. */
.nav .menu-btn{width:48px;height:48px;margin-right:-8px;padding:0;border:0;border-radius:8px;background:none;color:#232424;cursor:pointer;transition:background-color 160ms}
.menu-btn svg,.mn-x svg{display:block;width:32px;height:32px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square}
.nav .menu-btn:focus-visible,.mn-x:focus-visible{outline:2px solid #2dd4bf;outline-offset:-2px}
dialog.dlg.dlg-menu{margin:0 0 0 auto;width:min(762px,100%);height:100vh;height:100dvh;max-height:none;overflow:auto;overscroll-behavior:contain;border-radius:0;background:#fff;color:#232424;opacity:1;transform:translateX(100%);transition:transform 200ms cubic-bezier(.4,0,1,1)}
dialog.dlg.dlg-menu.is-in{transform:none;transition:transform 420ms var(--ease-out)}
dialog.dlg.dlg-menu::backdrop{background:rgba(0,0,0,.4)}
.mn{display:flex;flex-direction:column;min-height:100%;padding:calc(clamp(16px,4.2vw,32px) + env(safe-area-inset-top,0px)) max(var(--gn),env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(var(--gn),env(safe-area-inset-left,0px));font-family:"SF Pro Display",var(--font-n);-webkit-font-smoothing:antialiased}
html:has(.nav.is-scrolled) .mn{padding-top:calc(12px + env(safe-area-inset-top,0px))}   /* the nav is slimmer once scrolled */
.mn-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;margin-bottom:16px}
.mn .brand{color:#0f1116}
.mn .brand .brand-new{display:block}
.mn-x{width:48px;height:48px;margin-right:-8px;padding:0;border:0;border-radius:8px;background:none;color:#232424;cursor:pointer;transition:background-color 160ms}
.mn-links{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.mn-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 17px;border-bottom:.8px solid #dbdcdc;color:#232424;font:400 32px/1.1 "SF Pro Display",var(--font-n);letter-spacing:-.02em;text-decoration:none;transition:color 160ms}
.mn-arr{flex:none;width:14px;height:11.5px;fill:#979b99;transition:fill 160ms,transform 220ms var(--ease-out)}
.mn-links a[aria-current] .mn-arr{fill:#2dd4bf}
.mn-links a:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px;border-radius:2px}
.mn-links a:active{color:#000}
.mn-cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:32px}
.mn-mail{font-size:15px;line-height:1.6;color:#7d8281}
.mn-mail a{color:#000;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.8px;border-radius:2px}
.mn-mail a:focus-visible,.mn .hbtn:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px}
@media (hover:hover){
  .nav .menu-btn:hover,.mn-x:hover{background:#f5f5f5}
  .mn-links a:hover .mn-arr{fill:#232424;transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){dialog.dlg.dlg-menu,dialog.dlg.dlg-menu.is-in{transform:none;opacity:0;transition:opacity 1ms}dialog.dlg.dlg-menu.is-in{opacity:1}}

/* ===== Components ===== */
.pb-btn[data-alt="true"] .i-on{display:none}
.pb-btn[data-alt="true"] .i-off{display:block}
.player:fullscreen{border-radius:0;aspect-ratio:auto;width:100%;height:100%}
.player:fullscreen video{object-fit:contain}
/* Preview: the reel loops clean. Play button, caption and shade appear on hover, keyboard focus or a first tap. */
.player-big{transition:transform var(--t2) var(--ease),opacity var(--t3) var(--ease),scale var(--t3) var(--ease)}
.player-caption{transition:opacity var(--t3) var(--ease),transform var(--t2) var(--ease),translate var(--t3) var(--ease)}
.player[data-state="preview"]{cursor:pointer}
.player-big{color:var(--teal)}
.player-big:active{color:var(--teal-press)}
@media (hover:hover){.player-big:hover{color:var(--teal-hover)}}
.player[data-state="preview"] .player-big{opacity:0;scale:.9;pointer-events:none}
.player[data-state="preview"] .player-caption{opacity:0;translate:0 6px}
.player[data-state="preview"] .player-scrim{opacity:0}
.player[data-state="preview"].is-reveal .player-big,.player[data-state="preview"]:has(:focus-visible) .player-big{opacity:1;scale:1;pointer-events:auto}
.player[data-state="preview"].is-reveal .player-caption,.player[data-state="preview"]:has(:focus-visible) .player-caption{opacity:1;translate:none}
.player[data-state="preview"].is-reveal .player-scrim,.player[data-state="preview"]:has(:focus-visible) .player-scrim{opacity:1}
@media (hover:hover){
  .player[data-state="preview"]:hover .player-big{opacity:1;scale:1;pointer-events:auto}
  .player[data-state="preview"]:hover .player-caption{opacity:1;translate:none}
  .player[data-state="preview"]:hover .player-scrim{opacity:1}
}

/* ===== Pages and case studies ===== */
/* ============================================================
   Home new (Figma "Website Design new" 384:18407 → Home new 386:34361)
   White top band: slim nav, typed need line, octopus, logo strip + showreel.
   Type is SF Pro Display on Apple devices and Inter (optical sizes) elsewhere.
   ============================================================ */
:root{
  --font-n:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gn:clamp(16px,5.556vw,80px);          /* 80 at 1440 (Home Final uses 112) */
}
.wrap-n{width:100%;max-width:1440px;margin-inline:auto;padding-left:max(var(--gn),env(safe-area-inset-left,0px));padding-right:max(var(--gn),env(safe-area-inset-right,0px))}

/* nav (384:34272) */
.brand .brand-new{display:none;width:91px;height:17px}
body::before{background:#fff}
.nav{background:#fff;color:#7d8280;box-shadow:0 1px 0 #f5f5f5;--ink:#0f1116}
.nav.is-scrolled{background:rgba(255,255,255,.86);box-shadow:0 1px 0 #ededed}
.nav .wrap{max-width:1440px;padding-left:max(var(--gn),env(safe-area-inset-left,0px));padding-right:max(var(--gn),env(safe-area-inset-right,0px))}
.nav-in{padding-top:clamp(16px,4.2vw,32px);padding-bottom:12px}   /* Figma nav 384:34272: 32 top / 12 bottom */
.nav.is-scrolled .nav-in{padding-top:12px;padding-bottom:12px}
.nav :focus-visible{outline-color:#0f1116}
.nav .brand-old{display:none}
.nav .brand-new{display:block}
.nav .links{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;gap:0}
.nav .links a{height:32px;padding:0 16px;font:300 13px/1.2 var(--font-n);letter-spacing:-.02em;color:#7d8280;background:none}
/* hover: the label turns ink and a 1px underline draws in from the left; it leaves to the right */
.nav .links .lbl{position:relative}
.nav .links .lbl::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform 260ms var(--ease-out)}
.nav .links [aria-current]{background:none;color:#0f1116}
.nav .links [aria-current] .lbl::after,.nav .links a:focus-visible .lbl::after{transform:scaleX(1)}
.nav .links a:active{background:none;color:#0f1116}
.nav .icon-btn{border-color:#e4e5e5;color:#0f1116}
.nav .icon-btn:active{background:#ececec}
@media (hover:hover){
  .nav .links a:hover{background:none;color:#0f1116}
  .nav .links a:hover .lbl::after{transform:scaleX(1);transform-origin:left center}
  .nav .icon-btn:hover{background:#f5f5f5;border-color:#d6d8d8}
}

/* hero (384:34304) */
.home-top{position:relative;overflow-x:clip;background:#fff;color:#0f1116;font-family:var(--font-n);--l1:clamp(28px,3.889vw,56px);--l2:clamp(44px,7.778vw,112px)}
.home-top :focus-visible{outline-color:#0f1116}
.ht-hero{position:relative}
.ht-in{position:relative;z-index:1;padding-top:clamp(40px,6.944vw,100px);padding-bottom:clamp(48px,6.944vw,100px)}
.ht-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(36px,4.444vw,64px)}
.ht-lines{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.667vw,24px)}
.ht-line{font-size:var(--l1);font-weight:300;line-height:1.1;letter-spacing:-.04em;color:#7e8180;text-box:trim-both cap alphabetic}
@supports not (text-box:trim-both cap alphabetic){.ht-line{margin-block:-.2em}}
.ht-need-row{position:relative;top:calc(var(--l2) * -5 / 112);display:flex;align-items:center;max-width:100%;height:calc(var(--l2) * .75)}   /* sits 5px higher at full size (112px type), scaling down with the type */
.ht-need{display:block;font-size:calc(var(--l2) * var(--fit,1));font-weight:500;line-height:.7;letter-spacing:-.04em;color:#000;white-space:pre;padding:0 0 1px}
.ht-need span{display:block}
.ht-need-measure{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;font-size:var(--l2);font-weight:500;line-height:.7;letter-spacing:-.04em;white-space:pre}
.ht-caret{flex:none;position:relative;top:calc(var(--l2) * 6 / 112);width:1px;margin-left:max(6px,calc(var(--l2) * var(--fit,1) * .08));height:calc(var(--l2) * .75);background:#000;animation:htBlink 1.1s steps(1,end) infinite}
.ht-need-row.is-typing .ht-caret{animation:none}
@keyframes htBlink{50%{opacity:0}}
.ht-text{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.ht-body{max-width:min(504px,100%);font-family:"SF Pro Display",var(--font-n);font-size:15px;font-weight:400;line-height:1.6;letter-spacing:0;color:#7d8281}
/* desktop: the two lines break exactly where Figma's 470px box breaks them (384:34337), whatever font the browser ends up with */
@media (min-width:1200px){.ht-body{max-width:none}.ht-body .ln{display:block;white-space:nowrap}}
.ht-ctas{display:flex;flex-wrap:wrap;gap:8px}
.hbtn{display:inline-flex;align-items:center;justify-content:center;padding:8.5px 16px 9.5px;border-radius:999px;font:400 13px/16px var(--font-n);letter-spacing:-.02em;white-space:nowrap;cursor:pointer;transition:background-color var(--t2) var(--ease),color var(--t2) var(--ease),transform var(--t1) var(--ease)}
.hbtn:active{transform:scale(.97)}
.hbtn-teal{background:#2dd4bf;color:#000}
.hbtn-teal:active{background:#21b19e}
.hbtn-soft{background:#f5f5f5;color:#7a8583}
.hbtn-soft:active{background:#e6e7e7}
@media (hover:hover){.hbtn-teal:hover{background:#27c5b0}.hbtn-soft:hover{background:#ececec;color:#0f1116}}
@media (pointer:coarse){.hbtn{padding:13.5px 20px 14.5px}}   /* 44px tap targets on touch screens */

/* octopus (387:34482): the box is the hero's right 670 × 576, exactly as Figma clips it */
/* octopus (Figma 387:34482): drawn area 848x677 at x 665, y -7 on the 1440 frame; it runs off the right edge and its lower arms tuck behind the showreel */
.ht-octo{position:absolute;z-index:0;top:0;left:calc(max(0px,(100% - 1440px) / 2) + min(100%,1440px) * 665.42 / 1440);margin-top:calc(min(100%,1440px) * -6.8 / 1440);width:calc(min(100%,1440px) * 848 / 1440);pointer-events:none}
.ht-octo .oc-svg{display:block;width:100%;height:auto;overflow:visible}
@media (prefers-reduced-motion:no-preference){.ht-octo .oc-svg{animation:ocFloat 7s ease-in-out infinite}}
@keyframes ocFloat{50%{transform:translateY(-8px)}}
@supports not (overflow-x:clip){.home-top{overflow-x:hidden}}
/* the octopus drawn as teal dots on a canvas; the SVG under it keeps the box size and is the fallback */
.ht-octo .oc-dots{position:absolute;left:0;top:0;width:100%;height:auto;aspect-ratio:848/677;display:block}
.ht-octo.is-dots .oc-svg{visibility:hidden}
@media (prefers-reduced-motion:no-preference){.ht-octo .oc-dots{animation:ocFloat 7s ease-in-out infinite}}

/* logo strip (387:34599) + showreel (387:34483) */
.ht-row{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,480fr) minmax(0,580fr);column-gap:clamp(40px,15.278vw,220px);align-items:start;padding-bottom:clamp(56px,6.944vw,100px)}
.ht-logos{position:relative;height:92px;margin-left:calc(-1 * var(--gn) - max(0px,(100vw - 1440px) / 2))}
/* divider (387:34750): an eye-shaped stroke, 0.8px at the middle tapering to nothing at both ends */
.ht-logos::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-.1 0 1 92' preserveAspectRatio='none'%3E%3Cpath d='M0.399902 0C0.373236 1.53333 0.347902 3.06667 0.323902 4.6C0.107902 18.4 0 32.2 0 46C0 59.8 0.107902 73.6 0.323902 87.4C0.347902 88.9333 0.373236 90.4667 0.399902 92C0.426569 90.4667 0.451902 88.9333 0.475902 87.4C0.691902 73.6 0.799902 59.8 0.799902 46C0.799902 32.2 0.691902 18.4 0.475902 4.6C0.451902 3.06667 0.426569 1.53333 0.399902 0Z' fill='%23dbdcdc'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.ht-logos-in{position:absolute;inset:0 1px 0 0;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 48px);mask-image:linear-gradient(to right,transparent 0,#000 48px)}   /* hard cut at the divider, soft only at the window edge */
.ht-track{position:absolute;top:0;right:0;height:100%;display:flex;width:max-content}
@media (prefers-reduced-motion:no-preference){.ht-track{animation:htMarq 70s linear infinite}}
@keyframes htMarq{to{transform:translateX(50%)}}   /* logos drift right and slip behind the divider; two sets loop */
.ht-set{display:flex;align-items:center;flex:none;gap:56px;padding-right:56px}
.ht-set li{display:flex;align-items:center;flex:none}
.ht-set img{display:block;max-width:none;height:auto}
.ht-dot{width:3px;height:3px;background:#dbdcdc}
.ht-mask{display:block;width:126px;height:26px;background:#c1c3c3;-webkit-mask:url(../assets/logo-scratchrock.png) center/contain no-repeat;mask:url(../assets/logo-scratchrock.png) center/contain no-repeat}
.home-top .player{border-radius:6px;--ink:#0b2a31;--ink-2:#4c6168}   /* Figma 387:34483: 6px corners, 60% smoothing */
/* Figma's smoothed corner can't be drawn with border-radius, so the box is masked with the exact corner curve */
.home-top .player{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 12L0 9.6c0 -3.3603 0 -5.0405 0.654 -6.3239a6 6 0 0 1 2.6221 -2.6221c1.2835 -0.654 2.9636 -0.654 6.3239 -0.654L12 0L12 12Z'/%3E%3C/svg%3E") left top/12px 12px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath transform='matrix(-1 0 0 1 12 0)' d='M0 12L0 9.6c0 -3.3603 0 -5.0405 0.654 -6.3239a6 6 0 0 1 2.6221 -2.6221c1.2835 -0.654 2.9636 -0.654 6.3239 -0.654L12 0L12 12Z'/%3E%3C/svg%3E") right top/12px 12px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath transform='matrix(1 0 0 -1 0 12)' d='M0 12L0 9.6c0 -3.3603 0 -5.0405 0.654 -6.3239a6 6 0 0 1 2.6221 -2.6221c1.2835 -0.654 2.9636 -0.654 6.3239 -0.654L12 0L12 12Z'/%3E%3C/svg%3E") left bottom/12px 12px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath transform='matrix(-1 0 0 -1 12 12)' d='M0 12L0 9.6c0 -3.3603 0 -5.0405 0.654 -6.3239a6 6 0 0 1 2.6221 -2.6221c1.2835 -0.654 2.9636 -0.654 6.3239 -0.654L12 0L12 12Z'/%3E%3C/svg%3E") right bottom/12px 12px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 22px) no-repeat,linear-gradient(#000,#000) center/calc(100% - 22px) 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M0 12L0 9.6c0 -3.3603 0 -5.0405 0.654 -6.3239a6 6 0 0 1 2.6221 -2.6221c1.2835 -0.654 2.9636 -0.654 6.3239 -0.654L12 0L12 12Z'/%3E%3C/svg%3E") left top/12px 12px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath transform='matrix(-1 0 0 1 12 0)' d='M0 12L0 9.6c0 -3.3603 0 -5.0405 0.654 -6.3239a6 6 0 0 1 2.6221 -2.6221c1.2835 -0.654 2.9636 -0.654 6.3239 -0.654L12 0L12 12Z'/%3E%3C/svg%3E") right top/12px 12px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath transform='matrix(1 0 0 -1 0 12)' d='M0 12L0 9.6c0 -3.3603 0 -5.0405 0.654 -6.3239a6 6 0 0 1 2.6221 -2.6221c1.2835 -0.654 2.9636 -0.654 6.3239 -0.654L12 0L12 12Z'/%3E%3C/svg%3E") left bottom/12px 12px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath transform='matrix(-1 0 0 -1 12 12)' d='M0 12L0 9.6c0 -3.3603 0 -5.0405 0.654 -6.3239a6 6 0 0 1 2.6221 -2.6221c1.2835 -0.654 2.9636 -0.654 6.3239 -0.654L12 0L12 12Z'/%3E%3C/svg%3E") right bottom/12px 12px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 22px) no-repeat,linear-gradient(#000,#000) center/calc(100% - 22px) 100% no-repeat}
.home-top .player:fullscreen{border-radius:0;-webkit-mask:none;mask:none}
.home-top .player video{transform:scale(1.015)}   /* a hair of zoom so the dark ground never peeks out at the clipped edge */
.home-top .player:fullscreen video{transform:none}
.home-top .player-big,.home-top .player-big svg{width:56px;height:56px}   /* smaller play button (was 84) */
.home-top .player-big{margin:-28px 0 0 -28px}
/* the shade behind the caption and controls fades from black, not dark green */
.home-top .player-scrim{background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0))}
/* control bar: solid black and slimmer (36px tall, was 48) */
.home-top .player-bar{left:12px;right:12px;bottom:12px;gap:4px;padding:4px 8px;background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}
.home-top .pb-btn{width:28px;height:28px}
.home-top .pb-btn svg{width:16px;height:16px}
.home-top .pb-time{font-size:12px;min-width:80px}
.home-top .pb-range{height:18px}
.home-top .pb-range::-webkit-slider-runnable-track{height:3px}
.home-top .pb-range::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4.5px}
.home-top .pb-range::-moz-range-track,.home-top .pb-range::-moz-range-progress{height:3px}
.home-top .pb-range::-moz-range-thumb{width:12px;height:12px}
/* hover caption (Figma 387:34483 Frame 45): 16px from the left, 12px from the bottom */
.home-top .player-caption{left:16px;bottom:12px;display:flex;flex-direction:column;gap:2px}
.home-top .pc-title{font:500 15px/1.2 "SF Pro Display",var(--font-n);letter-spacing:-.02em;color:#fff}
.home-top .pc-sub{font:400 14px/1.6 "SF Pro Display",var(--font-n);letter-spacing:0;color:rgba(255,255,255,.7)}
@media (max-width:760px){.home-top .player-big,.home-top .player-big svg{width:48px;height:48px}.home-top .player-big{margin:-24px 0 0 -24px}}

/* Services — eight arms (Figma 433:36227): centred heading, then one 700px column of eight 450px items that zig-zag (every second item steps 250px right) */
.svc{background:#fff;color:#232424;font-family:"SF Pro Display",var(--font-n)}
.svc-in{display:flex;flex-direction:column;align-items:center;gap:64px;padding-block:clamp(64px,6.944vw,100px)}
.svc-title{display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(26px,2.222vw,32px);font-weight:400;line-height:1.2;letter-spacing:-.02em;color:#7e8180;text-align:center}
.svc-title::after{content:"";width:70px;height:.8px;margin-left:2px;background:#2dd4bf}
.svc-list{width:min(700px,100%);display:flex;flex-direction:column;gap:48px;list-style:none;margin:0;padding:0}
.svc-item{width:min(450px,100%);min-width:0;display:flex;flex-direction:column;padding-left:24px;border-left:.8px solid #dbdcdc}
.svc-item:nth-child(even){align-self:flex-end}
.svc-head{display:flex;align-items:center;gap:6px;min-height:19px}
.svc-ic{flex:none;display:flex}
.svc-ic svg{display:block;width:18px;height:18px}
.svc-name{font-size:16px;font-weight:500;line-height:1.2;letter-spacing:-.02em;color:#232424}
.svc-desc{margin-top:4px;font-size:15px;font-weight:400;line-height:1.6;color:#7d8281}
.svc-del{margin-top:12px;font-size:13px;font-weight:400;line-height:1.2;letter-spacing:-.01em;color:#979b99}
@media (min-width:1024px){.svc-1l{white-space:nowrap}}   /* Mobile app design + Dashboards & data read on one line (both sit in the left column, so the line has room) */
@media (max-width:760px){
  .svc-in{gap:40px}
  .svc-list{gap:36px}
  .svc-item{padding-left:20px}
}

/* How a project runs (Figma 433:36780, below Reviews): centred heading, then four 500px steps that each step 100px further right inside an 800px column */
.pr{background:#fff;color:#232424;font-family:"SF Pro Display",var(--font-n)}
.pr-in{display:flex;flex-direction:column;align-items:center;gap:64px;padding-top:clamp(64px,6.944vw,100px);padding-bottom:clamp(96px,13.889vw,200px)}
.pr-title{display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(26px,2.222vw,32px);font-weight:400;line-height:1.2;letter-spacing:-.02em;color:#7e8180;text-align:center}
.pr-title::after{content:"";width:70px;height:.8px;margin-left:2px;background:#2dd4bf}
.pr-list{width:min(920px,100%);display:flex;flex-direction:column;gap:64px;list-style:none;margin:0;padding:0}
.pr-step{--w:min(500px,100%);width:var(--w);margin-left:calc((100% - var(--w)) * var(--i) / 3);display:flex;flex-direction:column;padding-left:24px;border-left:.8px solid #dbdcdc}
.pr-num{align-self:flex-start;display:flex;flex-direction:column;width:35px}
.pr-n{font-size:18px;font-weight:300;line-height:1.2;letter-spacing:-.02em;color:#232424}
.pr-bar{display:flex;gap:1px;height:2px}
.pr-bar i{width:8px;height:2px;background:#dbdcdc}
.pr-bar i.on{background:#2dd4bf}
.pr-name{margin-top:16px;font-size:16px;font-weight:500;line-height:1.2;letter-spacing:-.02em;color:#232424}
.pr-desc{margin-top:4px;font-size:15px;font-weight:400;line-height:1.6;color:#7d8281}
.pr-get{margin-top:24px;font-size:13px;font-weight:400;line-height:1.2;letter-spacing:-.01em;color:#000}
@media (max-width:760px){
  .pr-in{gap:40px}
  .pr-list{gap:44px}
  .pr-step{padding-left:20px}
}

/* What changes with one studio (Figma 420:7838, below How a project runs): black band, one 820px block of 32px text.
   Text sits at #768B88 20%; while the block scrolls up the window, the light is typed in letter by letter (#768B88 for the question and
   the problem, teal #2DD4BF for the Octave answer) and a 2.5-line band stays lit. */
.oc{background:#000;color:#fff;font-family:"SF Pro Display",var(--font-n)}
.oc-in{display:flex;flex-direction:column;align-items:center;padding-block:clamp(120px,13.889vw,200px)}
.oc-text{position:relative;width:min(820px,100%);font-size:clamp(22px,calc(1.2rem + 1.5vw),32px);font-weight:400;line-height:1.45;letter-spacing:-.02em}
.oc-q{margin:0 0 1.45em;font:inherit;letter-spacing:inherit;color:rgba(118,139,136,.2)}
.oc-p{margin:0;color:#2dd4bf}
.oc-dim{color:rgba(118,139,136,.2)}
.oc-w.is-typing{color:transparent;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat}   /* lit letter by letter by the typing band (script below); without the script the Figma two-tone look stays */
@media (max-width:760px){.oc-in{padding-block:96px}}

/* Services tentacles (Figma 452:37471 / 452:37485): the same arms reach in from the left edge at the top and,
   turned 180°, from the right edge at the bottom; they hide where the list would run into them */
.svc{position:relative;overflow:clip}
.svc-in{position:relative;z-index:1}
.svc-tent{position:absolute;z-index:0;width:min(280px,19.444vw)}
.svc-tent-l{left:0;top:0}
.svc-tent-r{right:0;bottom:0;transform:rotate(180deg)}
@media (max-width:1179px){.svc-tent{display:none}}

/* Questions people ask first (Figma 452:36983, below What changes with one studio): tentacles hang in from the top-left,
   the 500px question list sits in the right half (starts 700px into the 1280 container) */
.fq{position:relative;overflow:clip;background:#fff;color:#232424;font-family:"SF Pro Display",var(--font-n)}
.fq-tent{position:absolute;left:0;top:0;width:min(607px,42.15vw)}
.fq-in{position:relative;display:flex;justify-content:flex-end;padding-top:clamp(120px,13.889vw,200px);padding-bottom:clamp(64px,6.944vw,100px)}
.fq-col{width:min(640px,100%);display:flex;flex-direction:column;gap:64px}
.fq-head{width:100%;display:flex;flex-direction:column;gap:16px}
.fq-title{align-self:flex-start;display:flex;flex-direction:column;font-size:clamp(26px,2.222vw,32px);font-weight:400;line-height:1.2;letter-spacing:-.02em;color:#7e8180}
.fq-title::after{content:"";width:100%;height:.8px;background:#2dd4bf}
.fq-lede{font-size:15px;line-height:1.6;color:#7d8281}
.fq-list{width:100%;display:flex;flex-direction:column;gap:24px}
.fq-item{padding-bottom:24px;border-bottom:.8px solid #dbdcdc}
.fq-h{font:inherit}
.fq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:20px;padding:0;border:0;background:none;color:#232424;font:500 16px/1.2 "SF Pro Display",var(--font-n);letter-spacing:-.02em;text-align:left;cursor:pointer}
.fq-q:focus-visible{outline:2px solid #2dd4bf;outline-offset:4px;border-radius:2px}
.fq-ic{flex:none;width:20px;height:20px;fill:none;stroke:#232424;stroke-width:1.6;stroke-linecap:round}
.fq-ic .v{transform-origin:10px 10px;transition:transform 240ms cubic-bezier(.2,.8,.2,1),opacity 240ms}
.fq-item.is-open .fq-ic .v{transform:rotate(90deg);opacity:0}
.fq-item.is-open .fq-ic{stroke-width:1.25}   /* Figma: the open item's minus is 1.25, the plus 1.6 */
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms cubic-bezier(.2,.8,.2,1)}
.fq-item.is-open .fq-a{grid-template-rows:1fr}
.fq-a-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s 320ms}
.fq-item.is-open .fq-a-in{visibility:visible;transition-delay:0s}
.fq-a p{padding-top:12px;font-size:15px;line-height:1.6;color:#7d8281}
@media (prefers-reduced-motion:reduce){.fq-a,.fq-a-in,.fq-ic .v{transition:none}}
@media (max-width:760px){.fq-col{gap:40px}.fq-in{justify-content:flex-start}}


/* Start (Figma 421:7721): two #fafafa panels side by side — the needs to pick (they are the same chips as the project
   form, so picks carry over) and the "What does your business need?" call to action */
.st{background:#fff;color:#232424;font-family:"SF Pro Display",var(--font-n)}
.st-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:40px;padding-block:clamp(64px,6.944vw,100px)}
.st-panel{min-width:0;max-width:100%;padding:64px;border-radius:6px;background:#fafafa}
.st-chips{display:flex;flex-direction:column;align-items:flex-start;gap:6px}   /* three rows, each chip 4px from the next (Figma 421:7722) */
.st-row{display:flex;flex-wrap:wrap;gap:6px 4px}
.st-chips .chip{height:auto;gap:2px;padding:7px 16px 8.5px;border:.8px solid #dbdcdc;border-radius:999px;background:transparent;color:#7a8583;font:400 13px/1.2 "SF Pro Display",var(--font-n);letter-spacing:-.02em;transition:background-color 160ms,color 160ms,border-color 160ms}
.st-chips .chip .lbl{text-box:normal;text-box-trim:none}   /* full line box, as in Figma (13/120) */
.st-chips .chip svg{display:none;width:12px;height:12px;fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.st-chips .chip[aria-pressed="true"]{height:auto;padding:7px 16px 8.5px;border:.8px solid #232424;background:#232424;color:#fff}
.st-chips .chip[aria-pressed="true"] svg{display:block}
.st-chips .chip:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px}
@media (hover:hover){
  .st-chips .chip[aria-pressed="false"]:hover{background:#fff;border-color:#b9bdbc;color:#232424}
  .st-chips .chip[aria-pressed="true"]:hover{background:#000;border-color:#000}
}
.st-cta{width:min(498px,100%);display:flex;flex-direction:column;gap:40px}
.st-copy{display:flex;flex-direction:column;gap:16px}
.st-title{align-self:flex-start;display:flex;flex-direction:column;font-weight:400;line-height:1;letter-spacing:-.02em}
.st-title .a{font-size:clamp(26px,2.222vw,32px);color:#7e8180}
.st-title .b{font-size:clamp(34px,3.056vw,44px);color:#000}
.st-title::after{content:"";width:100%;height:.8px;margin-top:2px;background:#2dd4bf}
.st-lede{max-width:370px;font-size:15px;line-height:1.6;color:#7d8281}
.st-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.st-mail{font-size:15px;line-height:1.6;color:#7d8281}
.st-mail a{color:#000;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.8px}
@media (max-width:760px){.st-in{flex-direction:column;align-items:stretch;gap:24px}.st-panel{width:100%;padding:32px 24px}}

/* Footer (Figma 421:7756): brand on the left, Elsewhere links on the right, then the copyright and the big teal
   octave wordmark, cut off by the bottom of the page */
.ft{background:#fff;color:#232424;font-family:"SF Pro Display",var(--font-n);overflow:hidden}
.ft-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:48px;padding-top:clamp(64px,6.944vw,100px)}
.ft-brand{width:min(340px,100%);display:flex;flex-direction:column;gap:16px}
.ft-id{display:flex;flex-direction:column;gap:12px}
.ft-logo svg{display:block;width:90px;height:17px}
.ft-who{font-size:14px;line-height:1.6;color:#7d8281}
.ft-who span{color:#232424}
.ft-blurb{font-size:15px;line-height:1.6;color:#7d8281}
.ft-else{display:flex;flex-direction:column;gap:16px}
.ft-else-h{padding-left:5px;font-size:13px;line-height:1.4;color:#232424}
.ft-else ul{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}
.ft-else a{display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:1.6;color:#7d8281;text-decoration:none;transition:color 160ms}
.ft-else a svg{flex:none;width:24px;height:24px}
.ft-else a:hover{color:#232424}
.ft-else a:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px;border-radius:4px}
.ft-bottom{display:flex;flex-direction:column;align-items:center;margin-top:clamp(12px,1.111vw,16px)}   /* 84px higher than Figma's 100: less empty space above the copyright and wordmark */
.ft-copy{display:flex;align-items:center;height:40px;font-size:14px;line-height:1.6;color:#9aa3a1}
.ft-word{width:min(1217px,84.5vw);margin-top:8px}
@media (max-width:760px){.ft-word{width:92vw}}

/* dot art: the wordmark and the tentacles are drawn as the hero octopus is, a field of tiny teal dots
   (the image stays underneath, hidden, as the shape source and the fallback) */
.dart{display:block;pointer-events:none;user-select:none}
.dart>img{display:block;width:100%;height:auto}
.dart>canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.dart.is-dots>img{visibility:hidden}
.ft-word{position:relative}
/* Start background: a field of teal pixels in the spirit of pixel-one.com; the panels keep a clean margin */
.st{position:relative;overflow:hidden}
.st-in{position:relative;z-index:1}
.st-dots{position:absolute;left:0;top:0;z-index:0;pointer-events:none;image-rendering:pixelated;-webkit-mask-image:linear-gradient(90deg,#000 2px,transparent 2px),linear-gradient(#000 2px,transparent 2px);-webkit-mask-size:3px 3px;-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 2px,transparent 2px),linear-gradient(#000 2px,transparent 2px);mask-size:3px 3px;mask-composite:intersect}

/* Selected work page (Figma 384:19181): a second view at #work. Hero 384:19199 has the tentacles of two octopuses
   reaching in from the top corners (drawn above the text, as in Figma), the big title, the lede and the filter chips;
   the grid 464:37524 is three 394 x 270 cards per row with 48px gaps at 1440. */
.wk-hero{position:relative;overflow:hidden;background:#fff;color:#000;font-family:"SF Pro Display",var(--font-n)}
.wk-hero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:32px;padding-block:100px;text-align:center}
.wk-copy{width:min(633px,100%);display:flex;flex-direction:column;align-items:center;gap:24px}
.wk-title{font-size:clamp(48px,6.667vw,96px);font-weight:500;line-height:.7;letter-spacing:-.04em;color:#000;white-space:nowrap;outline:none}
.wk-lede{max-width:520px;font-size:15px;font-weight:400;line-height:1.6;color:#7d8281;text-wrap:pretty}
.wk-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.wk-chip{display:inline-flex;align-items:center;gap:2px;padding:7px 16px 8.9px;border:.8px solid #dbdcdc;border-radius:999px;background:none;color:#7a8583;font:400 13px/1.2 "SF Pro Display",var(--font-n);letter-spacing:-.02em;white-space:nowrap;cursor:pointer;transition:background-color 160ms,color 160ms,border-color 160ms}
.wk-chip svg{display:none;width:12px;height:12px;fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.wk-chip[aria-current="page"]{border-color:#232424;background:#232424;color:#fff;cursor:default}
.wk-chip:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px}
.wk-chip:active{transform:scale(.97)}
@media (hover:hover){.wk-chip:not([aria-current]):hover{border-color:#b9bdbc;color:#232424}}
.wk-tent{position:absolute;top:0;z-index:2}
.wk-tent-l{left:0;width:min(521px,36.18vw)}
.wk-tent-r{right:0;width:min(525px,36.46vw)}
.wk-list{background:#fff;color:#232424;font-family:"SF Pro Display",var(--font-n)}
.wk-list-in{display:flex;flex-direction:column;gap:64px;padding-block:0 clamp(64px,6.944vw,100px)}   /* the heading sits right under the hero, 100px below the chips (Figma 384:19181) */
.wk-h{font-size:clamp(26px,2.222vw,32px);font-weight:400;line-height:1.2;letter-spacing:-.02em;color:#7e8180}
.wk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px clamp(24px,3.333vw,48px)}
.wk-grid .cs-media{aspect-ratio:394.67/296;margin-top:auto}   /* the pictures in a row line up even when a heading wraps */
@media (max-width:1023px){.wk-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}}
@media (max-width:760px){
  .wk-hero-in{padding-block:132px 64px;gap:28px}
  .wk-tent-l,.wk-tent-r{width:44vw}
  .wk-list-in{gap:32px}
  .wk-grid{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .wk-grid .cs-head{flex-direction:column;align-items:flex-start}
  .wk-grid .cs-meta{flex:none}
}
/* Shots and Animations (Figma 384:19803, 384:20940): the same page and grid with the other chip selected.
   Each card is one project; it opens the viewer. Animation cards play their clip, muted, while the mouse is over them. */
.wk-item{cursor:pointer}
.wk-open{display:block;width:100%;padding:0;border:0;text-align:inherit}
.wk-open:focus-visible{outline:2px solid #2dd4bf;outline-offset:3px}
.wk-item .cs-img{transition:transform 600ms var(--ease-out)}
@media (hover:hover){.wk-item:hover .cs-img,.wk-item:hover .wk-prev{transform:scale(1.025)}}
.wk-prev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 240ms,transform 600ms var(--ease-out)}
.wk-prev.is-on{opacity:1}
.wk-badge{position:absolute;left:10px;bottom:10px;z-index:1;display:inline-flex;align-items:center;gap:3px;padding:3px 9px 3px 6px;border-radius:999px;background:rgba(15,17,22,.62);color:#fff;font:500 12px/16px "SF Pro Display",var(--font-n);letter-spacing:-.01em;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wk-badge svg{width:14px;height:14px}
/* the viewer */
dialog.dlg.dlg-view{width:min(calc(100vw - 32px),calc((100vh - 136px) * 4 / 3),1200px);border-radius:10px;background:#fff;color:#232424;font-family:"SF Pro Display",var(--font-n);transform:translateY(10px) scale(.985)}
@supports (height:1dvh){dialog.dlg.dlg-view{width:min(calc(100vw - 32px),calc((100dvh - 136px) * 4 / 3),1200px)}}
dialog.dlg.dlg-view::backdrop{background:rgba(15,17,22,.72)}
.vw-media{position:relative;width:100%;aspect-ratio:4/3;background:#eceeed;overflow:hidden}
.vw-media img,.vw-media video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.vw-media video{cursor:pointer}
.vw-close{position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border:0;background:rgba(255,255,255,.92);color:#0f1116;box-shadow:0 4px 14px rgba(0,0,0,.16)}
.vw-close svg{width:18px;height:18px}
.vw-arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;border-radius:999px;background:rgba(255,255,255,.92);color:#0f1116;box-shadow:0 4px 14px rgba(0,0,0,.16);transition:background-color 160ms,transform 160ms}
.vw-arrow svg{width:16px;height:16px}
.vw-arrow.prev{left:12px}.vw-arrow.prev svg{transform:rotate(180deg)}
.vw-arrow.next{right:12px}
.vw-arrow:active,.vw-close:active{transform:scale(.94)}
.vw-arrow:focus-visible,.vw-close:focus-visible,.vw-play:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px}
@media (hover:hover){.vw-arrow:hover,.vw-close:hover{background:#fff}}
.vw-play{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:999px;background:rgba(15,17,22,.62);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vw-play svg{width:24px;height:24px}
.vw-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:16px 20px 18px}
.vw-meta{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:2px}
.vw-title{font-size:16px;font-weight:500;line-height:1.2;letter-spacing:-.02em;color:#232424}
.vw-sub{font-size:14px;line-height:1.6;color:#7d8281;text-wrap:pretty}
.vw-side{display:flex;align-items:center;gap:16px}
.vw-count{font-size:13px;line-height:1.2;letter-spacing:-.02em;color:#7a8583;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:560px){
  .vw-bar{padding:14px 16px 16px}
  .vw-side{width:100%;justify-content:space-between}
  .vw-arrow{width:34px;height:34px;margin-top:-17px}.vw-arrow.prev{left:8px}.vw-arrow.next{right:8px}
  .vw-close{top:8px;right:8px;width:32px;height:32px}
}
/* CloudNexus case study (Figma 495:7183): one 960 column (x 240 at 1440), padding 100 top and bottom. Each section is a
   row: an 18px label (365) beside the content (547), 48 apart, with 64 above and below and a 0.8px #dbdcdc line on top. */
.cn{position:relative;overflow:clip;background:#fff;color:#232424;font-family:"SF Pro Display",var(--font-n)}
/* two octopuses reach in from the top corners (Figma 528:10094 and 528:10109, rotated ±26°, clipped to 300 x 296 and
   310 x 292), drawn above the text as in Figma, with the same dot effect as the other tentacles */
.cn-tent{position:absolute;top:0;z-index:2}
.cn-tent-l{left:0;width:min(300px,20.833vw)}
.cn-tent-r{right:0;width:min(310px,21.528vw)}
.cn :is(h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul){margin:0}
.cn-in{box-sizing:content-box;max-width:960px;margin-inline:auto;padding-block:clamp(64px,6.944vw,100px);padding-left:max(var(--gn),env(safe-area-inset-left,0px));padding-right:max(var(--gn),env(safe-area-inset-right,0px))}
.cn-top{display:flex;flex-direction:column;gap:32px;padding-bottom:24px;border-bottom:1px solid #dbdcdc}
.cn-intro{max-width:810px;display:flex;flex-direction:column;gap:16px}
.cn-title{display:flex;flex-direction:column;gap:8px;font-size:clamp(30px,3.056vw,44px);font-weight:500;line-height:1.06;letter-spacing:-.03em;color:#000;text-wrap:balance;outline:none}
.cn-kicker{font-size:clamp(24px,2.222vw,32px);color:#7e8180}
.cn-lede{font-size:16px;line-height:1.6;color:#7d8281;text-wrap:pretty}
.cn-facts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 24px;margin:0}
.cn-facts div{display:flex;flex-direction:column;gap:6px}
.cn-facts dt{font-size:13px;line-height:1.2;color:#979b99}
.cn-facts dd{margin:0;font-size:14px;line-height:1.5;color:#232424}
.cn-facts .cn-fact-w279{max-width:279px}   /* Octave: Scope wraps to two lines, as in Figma */
.cn .cn-hero{margin:64px 0;aspect-ratio:16/9;max-width:100%;overflow:hidden;border-radius:6px;background:#d1d1db}   /* Figma 495:7219: r6 */
.cn-hero img{display:block;width:100%;height:100%;object-fit:cover}
.cn-sec{display:grid;grid-template-columns:minmax(0,365fr) minmax(0,547fr);column-gap:48px;padding-block:64px;border-top:.8px solid #dbdcdc}
.cn-label{font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.01em;color:#000}
.cn-body{min-width:0;display:flex;flex-direction:column;gap:40px}
.cn-group,.cn-stack24{display:flex;flex-direction:column;gap:24px}
.cn-stack16{display:flex;flex-direction:column;gap:16px}
.cn-stack32{display:flex;flex-direction:column;gap:32px}
.cn-body.is-g24{gap:24px}
.cn-pt8{padding-top:8px}
/* Airlith: the mark at three sizes (bottom-aligned, gap 28) and the applications gallery (rows of two, 15 apart, 24 between rows) */
.al-sizes{display:flex;align-items:flex-end;gap:28px;margin:0;padding:0;list-style:none}
.al-sizes li{display:flex;flex-direction:column;align-items:center;gap:8px}
.al-sizes img{display:block;height:auto}
.al-sizes span{font-size:13px;line-height:16px;letter-spacing:-.01em;color:#4c6168;white-space:nowrap}
.al-apps{display:flex;flex-direction:column;gap:24px}
.al-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;align-items:start}
.al-row.is-wide{grid-template-columns:minmax(0,354fr) minmax(0,179fr)}
.al-app{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.al-img{display:block;width:100%;height:auto;max-width:100%;border-radius:6px}
.al-app figcaption{display:flex;flex-direction:column;gap:4px}
.al-app b{font-weight:400;font-size:13px;line-height:1.2;letter-spacing:-.01em;color:#232424}
.al-app .s{font-size:12px;line-height:1.4;letter-spacing:-.01em;color:#979b99;text-wrap:pretty}
.al-app .s.is-13{font-size:13px}
@media (max-width:560px){.al-row,.al-row.is-wide{grid-template-columns:minmax(0,1fr);row-gap:24px}}
.cn-body:has(> .cn-gal){gap:24px}   /* Inside the app and In motion: headline to viewer 24 */
.cn-hd,.cn-blk{display:flex;flex-direction:column;gap:6px}
.cn-g12{gap:12px}
.cn-hl{font-size:16px;line-height:1.4;color:#232424}
.cn-t{font-size:15px;line-height:1.6;color:#7d8281;text-wrap:pretty}
.cn-h3{font-size:15px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:#000}
.cn-h4{font-size:16px;font-weight:500;line-height:1.3;color:#000}
.cn-h5{font-size:14px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:#000}
.cn-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.cn-chip{display:inline-flex;align-items:center;padding:6.3px 11px;border:.8px solid #dbdcdc;border-radius:999px;font-size:13px;line-height:1.2;letter-spacing:-.02em;color:#7a8583;white-space:nowrap}
.cn-chip.is-on{background:#232424;color:#fff}
.cn-model{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.cn-model li{display:flex;align-items:center;gap:8px}
.cn-model li+li::before{content:"\2192";font-size:15px;line-height:1.6;letter-spacing:-.01em;color:#7d8281}
.cn-num{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.cn-num li{display:flex;gap:12px;font-size:15px;line-height:1.6;color:#7d8281}
.cn-num span{flex:none;width:20px;font-size:13px;line-height:24px;letter-spacing:-.01em;color:#979b99}
.cn-quote{margin:0;display:flex;flex-direction:column;gap:12px;padding-left:20px;border-left:.8px solid #dbdcdc}
.cn-quote blockquote{margin:0;font-size:18px;line-height:1.5;letter-spacing:-.01em;color:#232424;text-wrap:pretty}
.cn-quote figcaption{font-size:13px;line-height:1.2;letter-spacing:-.01em;color:#979b99}
.cn-note{display:flex;flex-direction:column;gap:6px;padding-left:20px;border-left:.8px solid #2dd4bf}
.cn-people{display:flex;flex-direction:column;gap:40px}
.cn-person{display:flex;flex-direction:column;gap:12px}
.cn-who{display:flex;align-items:center;gap:12px}
.cn-who img{flex:none;width:40px;height:40px;border-radius:50%}
.cn-who div{display:flex;flex-direction:column;gap:2px}
.cn-pname{font-size:15px;font-weight:500;line-height:1.3;color:#000}
.cn-prole{font-size:13px;line-height:1.2;letter-spacing:-.01em;color:#979b99}
.cn-pq{font-size:15px;line-height:1.6;color:#232424;text-wrap:pretty}
.cn-ia{display:flex;flex-direction:column;gap:10px}
.cn-ia-row{display:flex;align-items:flex-start;gap:12px}
:is(#tend-view,#airlith-view,#torra-view) .cn-ia .cn-chips{column-gap:4px}
.cn-ia-k{flex:none;width:80px;font-size:13px;line-height:30.2px;letter-spacing:-.01em;color:#979b99}
.cn-dir{display:flex;flex-direction:column;gap:16px}
.cn-dir-t{display:flex;flex-direction:column;gap:4px}
.cn-dir-t .cn-h4{display:flex;align-items:center;gap:8px}
.cn-chosen{display:inline-flex;padding:3.3px 10.8px;border-radius:999px;background:#232424;color:#fff;font-size:13px;font-weight:400;line-height:1.2;letter-spacing:-.02em}
.cn-tag{font-size:13px;line-height:1.2;letter-spacing:-.01em;color:#979b99}
.cn-dir-img,.cn-lib{display:block;width:100%;height:auto;max-width:100%;border-radius:6px}
.cn-stats{display:grid;grid-template-columns:repeat(4,minmax(0,124px));gap:16px;margin:0;padding:8px 0 0;list-style:none}
.cn-stats li,.cn-res li{display:flex;flex-direction:column;gap:4px}
.cn-stats b,.cn-res b{font-size:32px;font-weight:300;line-height:1;letter-spacing:-.04em;color:#232424}
.cn-stats span{font-size:13px;line-height:1.2;letter-spacing:-.01em;color:#979b99}
.cn-sws{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:8px 0 0;list-style:none}
.cn-sws li{width:82px;display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.3;letter-spacing:-.01em}
.cn-sw{height:48px;border:.8px solid #dbdcdc;border-radius:6px}
.cn-swn{color:#232424}.cn-swh{color:#979b99}
.cn-res{display:flex;justify-content:space-between;gap:16px;margin:0;padding:0;list-style:none}
.cn-res li{min-width:0}
.cn-res .k{font-size:13px;line-height:1.2;letter-spacing:-.01em;color:#232424}
.cn-res .s{font-size:13px;line-height:1.4;letter-spacing:-.01em;color:#979b99}
/* Tend: research numbers (2 x 2, gap 24) and the dashed "Missed" swatch (0.8 #979b99, dash 5 4, no fill) */
.cn-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.cn-nums li{display:flex;flex-direction:column;gap:4px;min-width:0}
.cn-nums b{font-size:32px;font-weight:300;line-height:1;letter-spacing:-.04em;color:#232424}
.cn-nums .k{font-size:13px;line-height:1.2;letter-spacing:-.01em;color:#232424}
.cn-nums .s{font-size:13px;line-height:1.4;letter-spacing:-.01em;color:#979b99;text-wrap:pretty}
.cn-sw.is-dashed{border:0;background:none;position:relative}
.cn-sw.is-dashed svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cn-sw.is-dashed rect{width:calc(100% - .8px);height:calc(100% - .8px);fill:none;stroke:#979b99;stroke-width:.8;stroke-dasharray:5 4}
/* the mockup gallery and the video player share one frame (547 x 410, r6) and one control row */
.cn-gal{display:flex;flex-direction:column;gap:12px}
.cn-stage{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:4/3;padding:0;border:0;border-radius:6px;overflow:hidden;background:#d9deea;cursor:zoom-in}
.cn-stage img,.cn-stage video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.cn-stage:focus-visible{outline:2px solid #2dd4bf;outline-offset:3px}
.cn-player{background:#222424;cursor:default}
.cn-player::after{content:"";position:absolute;inset:0;background:rgba(15,17,22,.28);pointer-events:none;transition:opacity 240ms}
.cn-player.is-playing::after{opacity:0}
.cn-player video{cursor:pointer}
.cn-play{position:absolute;left:50%;top:50%;z-index:2;width:66px;height:66px;margin:-33px 0 0 -33px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:transform 160ms var(--ease-out)}
.cn-play svg{display:block;width:100%;height:100%}
.cn-play circle{fill:#f8faf9}.cn-play path{fill:#0b2a31}
.cn-play:active{transform:scale(.95)}
.cn-play:focus-visible{outline:2px solid #2dd4bf;outline-offset:3px}
.cn-player.is-playing .cn-play{display:none}
.cn-cap{position:absolute;left:22px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:1px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.25);pointer-events:none;transition:opacity 240ms}
.cn-cap b{font-size:14px;font-weight:500;line-height:1.3}
.cn-cap span{font-size:12px;line-height:1.3;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.cn-player.is-playing:not(:hover) .cn-cap{opacity:0}
.cn-ctl{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cn-dots{display:flex;align-items:center;gap:2px}
.cn-dots i{display:block;width:6px;height:3px;border-radius:5px;background:#dbdcdc;transition:width 200ms var(--ease-out),background-color 200ms}
.cn-dots i.is-on{width:12px;background:#000}
.cn-arws{display:flex;gap:6px}
.cn-arw{position:relative;display:grid;place-items:center;width:24.6px;height:24.6px;padding:0;border:.47px solid #dbdcdc;border-radius:50%;background:#fff;color:#0b2a31;cursor:pointer;transition:background-color 160ms,transform 160ms}
.cn-arw::before{content:"";position:absolute;inset:-8px}
.cn-arw svg{width:11.4px;height:11.4px;fill:none;stroke:currentColor;stroke-width:.85;stroke-linecap:round;stroke-linejoin:round}
.cn-arw.prev svg{transform:scaleX(-1)}
.cn-arw:active{transform:scale(.92)}
.cn-arw:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px}
@media (hover:hover){.cn-arw:hover{background:#f5f5f5}.cn-stage:not(.cn-player):hover img{transform:scale(1.015)}}
.cn-stage:not(.cn-player) img{transition:transform 500ms var(--ease-out)}
/* the end: next case study */
.cn-end{padding-top:64px;border-top:.8px solid #dbdcdc}
.cn-next{display:flex;align-items:center;gap:16px;padding-block:12px;border-bottom:1px solid #dbdcdc;color:inherit;text-decoration:none}
.cn-next img{flex:none;width:36px;height:36px}
.cn-next-t{display:flex;flex-direction:column;flex:1;min-width:0}
.cn-next-t span{font-size:15px;line-height:1.4;color:#7d8281}
.cn-next-t b{font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.02em;color:#000}
.cn-next-go{flex:none;width:36px;height:36px;fill:none;transition:transform 240ms var(--ease-out)}
.cn-next-go circle{stroke:#dbdcdc;stroke-width:.64}
.cn-next-go path{stroke:#7d8281;stroke-width:1.16;stroke-linecap:round;stroke-linejoin:round}
.cn-next:focus-visible{outline:2px solid #2dd4bf;outline-offset:4px;border-radius:4px}
@media (hover:hover){.cn-next:hover .cn-next-go{transform:translate(2px,-2px)}.cn-next:hover .cn-next-go path{stroke:#232424}}
@media (max-width:860px){
  .cn-in{padding-top:clamp(112px,26vw,160px)}
  .cn-tent-l,.cn-tent-r{width:28vw}
  .cn-sec{grid-template-columns:minmax(0,1fr);row-gap:20px;padding-block:48px}
  .cn .cn-hero{margin:40px 0}
  .cn-end{padding-top:48px}
}
@media (max-width:560px){
  .cn-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cn-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .cn-res{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
  .cn-ia-k{width:72px}
  #airlith-view .cn-ia-k{width:80px}   /* fits "The category" on one line */
  .cn-cap{left:14px;bottom:12px}
  .cn-play{width:56px;height:56px;margin:-28px 0 0 -28px}
}
/* case cards that open a case study: the whole card is the link */
.cs-card:has(.cs-link){position:relative;cursor:pointer}
.cs-link{color:inherit;text-decoration:none;outline:none}
.cs-link::after{content:"";position:absolute;inset:0;z-index:1}
.cs-card:has(.cs-link) .cs-img{transition:transform 600ms var(--ease-out)}
@media (hover:hover){.cs-card:has(.cs-link):hover .cs-img{transform:scale(1.025)}}
.cs-card:has(.cs-link:focus-visible) .cs-media{outline:2px solid #2dd4bf;outline-offset:3px}
/* Case studies (Figma 404:35065): row 1 sits in columns 2-3, row 2 in columns 1-2, so the cards step down like stairs */
.cs{background:#fff;color:#232424;font-family:"SF Pro Display",var(--font-n)}
.cs-in{display:flex;flex-direction:column;gap:64px;padding-block:clamp(64px,6.944vw,100px)}
/* heading row (Figma Frame 125): the title on the left, "See all cases" on the right, centred on each other */
.cs-top{display:flex;align-items:center;justify-content:space-between;gap:24px}
/* "See all cases" behaves like the nav links: darkens and an underline sweeps in from the left */
.cs-all{flex:none;font:400 13px/1.2 "SF Pro Display",var(--font-n);letter-spacing:-.02em;color:#7d8280;text-decoration:none;transition:color 200ms var(--ease-out)}
.cs-all .lbl{position:relative}
.cs-all .lbl::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform 260ms var(--ease-out)}
.cs-all:focus-visible .lbl::after{transform:scaleX(1)}
.cs-all:focus-visible{outline:none;color:#0f1116}
.cs-all:active{color:#0f1116}
@media (hover:hover){.cs-all:hover{color:#0f1116}.cs-all:hover .lbl::after{transform:scaleX(1);transform-origin:left center}}
.cs-title{align-self:flex-start;display:flex;flex-direction:column;font-size:clamp(26px,2.222vw,32px);font-weight:400;line-height:1.2;letter-spacing:-.02em;color:#7e8180}
.cs-title::after{content:"";width:100%;height:.8px;background:#2dd4bf}   /* full-width rule, as in Figma */
.cs-grid{display:grid;grid-template-columns:minmax(0,340fr) minmax(0,460fr) minmax(0,340fr);column-gap:clamp(32px,4.861vw,70px);align-items:start}
.cs-a{grid-area:1/2}
.cs-b{grid-area:1/3}
.cs-c{grid-area:2/1}
.cs-d{grid-area:2/2}
.cs-card{min-width:0;display:flex;flex-direction:column;gap:16px}   /* text to picture: 16px (Figma 24) */
.cs-head{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:24px;row-gap:10px}
.cs-meta{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:4px}
.cs-name{font-size:16px;font-weight:500;line-height:1.2;letter-spacing:-.02em;color:#232424}
.cs-desc{font-size:14px;font-weight:400;line-height:1.6;color:#7d8281}
.cs-tags{flex:none;display:flex;flex-wrap:wrap;gap:4px;list-style:none;padding:0}
.cs-tags li{padding:2px 10px 2.5px;border:.8px solid #dbdcdc;border-radius:999px;background:none;font-size:12px;font-weight:400;line-height:14px;letter-spacing:-.02em;color:#7a8583;white-space:nowrap}
.cs-media{position:relative;overflow:hidden;width:100%;max-width:100%;aspect-ratio:460/315;border-radius:6px;background:#f5f5f5}
/* case covers from Figma's All Mockups page (Cloud-case / TEND-case / Airlith-case mockup main, Website), drawn for exactly these box shapes */
.cs-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.cs-media.is-tall{aspect-ratio:340/409}
@media (max-width:1023px){
  .cs-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
  .cs-a,.cs-b,.cs-c,.cs-d{grid-area:auto}
}
@media (max-width:760px){
  .cs-in{gap:32px}
  .cs-grid{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .cs-head{flex-direction:column;align-items:flex-start}
  .cs-meta{flex:none}
}
/* Reviews (Figma 420:7679): featured review left, eye divider, two staggered rows that run off the right edge.
   With a fine pointer the rows drift left (paused on hover/focus and until the section is in view);
   on touch or reduced motion they are one horizontal scroller. Row 2 keeps Figma's 180px step. */
.rv{background:#fff;color:#232424;font-family:"SF Pro Display",var(--font-n);overflow-x:clip;--rv-w:386px;--rv-gap:80px;--rv-rgap:80px;--rv-off:180px}
.rv-in{display:flex;flex-direction:column;gap:48px;padding-block:clamp(64px,6.944vw,100px)}
.rv-title{align-self:flex-start;display:flex;flex-direction:column;font-size:clamp(26px,2.222vw,32px);font-weight:400;line-height:1.2;letter-spacing:-.02em;color:#7e8180}
.rv-title::after{content:"";width:60px;height:.8px;margin-left:3px;background:#2dd4bf}
/* Section headings have no underline (removed at the user's request) */
.svc-title::after,.cs-title::after,.rv-title::after,.pr-title::after,.fq-title::after,.st-title::after{content:none;display:none}
.rv-body{display:grid;grid-template-columns:min(511px,35.49vw) minmax(0,1fr);column-gap:clamp(48px,11.111vw,160px);align-items:start}
.rv-item{flex:none;width:var(--rv-w);display:flex;align-items:flex-start;gap:16px}
.rv-feat{width:auto;min-width:0;max-width:511px}
.rv-av{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;background:#f2f3f3}
.rv-ini{display:grid;place-items:center;background:var(--b);color:var(--c);font:500 13px/1 "Inter",var(--font-n);font-optical-sizing:auto;letter-spacing:0}
.rv-fig{flex:1 1 0;min-width:0;margin:0;display:flex;flex-direction:column}
.rv-who{display:flex;flex-direction:column;gap:4px}
.rv-name{font-size:16px;font-weight:500;line-height:1.2;letter-spacing:-.02em;color:#232424}
.rv-role{font-size:13px;font-weight:400;line-height:1.2;letter-spacing:-.01em;color:#979b99}
.rv-q{margin:12px 0 0;font-size:15px;font-weight:400;line-height:1.6;color:#7d8281}
.rv-loc{align-self:flex-start;display:flex;align-items:center;gap:2px;height:12px;margin-top:16px;padding-left:8px;border-left:.8px solid #dbdcdc;font-size:13px;font-weight:400;line-height:1.2;letter-spacing:-.01em;color:#979b99;white-space:nowrap}
.rv-flag{flex:none;width:12px;height:8.5px;margin:0 .5px 0 1.5px}
/* the wall runs to the right edge of the window, like the Figma frame clipping it */
.rv-wall{position:relative;min-width:0;padding-left:24px;margin-right:calc(-1 * var(--gn) - max(0px,(100vw - 1440px) / 2))}
.rv-wall::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-.1 0 1 92' preserveAspectRatio='none'%3E%3Cpath d='M0.399902 0C0.373236 1.53333 0.347902 3.06667 0.323902 4.6C0.107902 18.4 0 32.2 0 46C0 59.8 0.107902 73.6 0.323902 87.4C0.347902 88.9333 0.373236 90.4667 0.399902 92C0.426569 90.4667 0.451902 88.9333 0.475902 87.4C0.691902 73.6 0.799902 59.8 0.799902 46C0.799902 32.2 0.691902 18.4 0.475902 4.6C0.451902 3.06667 0.426569 1.53333 0.399902 0Z' fill='%23dbdcdc'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.rv-rows{display:flex;flex-direction:column;align-items:flex-start;gap:var(--rv-rgap);margin-left:-24px;padding-left:24px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.rv-rows::-webkit-scrollbar{display:none}
.rv-rows:focus-visible{outline:2px solid #2dd4bf;outline-offset:4px}
.rv-row{flex:none}
.rv-row2{padding-left:var(--rv-off)}
.rv-track{display:flex;width:max-content}
.rv-set{display:flex;align-items:flex-start;gap:var(--rv-gap);margin:0;padding:0 var(--rv-gap) 0 0;list-style:none}
.rv-dup{display:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .rv-rows{overflow:visible;margin-left:0;padding-left:0;align-items:stretch}
  .rv-row{overflow:hidden;margin-left:-23px;padding-left:23px}   /* hard cut right at the divider, no fade */
  .rv-row2{padding-left:23px}
  .rv-dup{display:flex}
  .rv-track{animation:rvMarq var(--rv-dur,80s) linear infinite}
  /* row 2 starts 180px in (as in Figma), glides to the divider once, then loops like row 1 */
  .rv-row2 .rv-track{animation:rvIn var(--rv-in,6.4s) linear both,rvMarq var(--rv-dur,80s) linear var(--rv-in,6.4s) infinite}
  .rv.is-idle .rv-track,.rv-rows:focus-visible .rv-track{animation-play-state:paused}   /* keeps moving under the mouse; only keyboard focus holds it */
}
@keyframes rvMarq{to{transform:translateX(-50%)}}
@keyframes rvIn{from{transform:translateX(var(--rv-off))}to{transform:translateX(0)}}
@media (max-width:899px){
  .rv{--rv-w:min(386px,calc(100vw - 2 * var(--gn) - 40px));--rv-gap:48px;--rv-rgap:48px;--rv-off:64px}
  .rv-body{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .rv-wall{padding-left:0;margin-inline:calc(-1 * var(--gn))}
  .rv-wall::before{display:none}
  .rv-rows{margin-left:0;padding-inline:var(--gn)}
}
@media (max-width:560px){
  .rv{--rv-w:min(386px,calc(100vw - 2 * var(--gn) - 64px));--rv-gap:32px;--rv-off:48px}
}
@media (max-width:899px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .rv-rows{padding-inline:0}
  .rv-row{margin-left:0;padding-left:var(--gn);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--gn),#000 calc(100% - var(--gn)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--gn),#000 calc(100% - var(--gn)),transparent 100%)}
  .rv-row2{padding-left:var(--gn)}
}
@media (max-width:760px){
  .ht-hero{display:flex;flex-direction:column}
  .ht-octo{order:-1;position:relative;left:auto;align-self:flex-end;width:min(104vw,560px);margin:4px -16vw 12px 0}
  .ht-in{padding-top:0}
  .ht-row{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .ht-logos{height:76px;margin-inline:calc(-1 * var(--gn))}
  .ht-logos::after{display:none}
  .ht-logos-in{inset:0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}
  .ht-set{gap:40px;padding-right:40px}
}