/* Daksh Mehta Studio homepage. Scoped so the shared site pages keep their editorial styles. */
.studio-page{--studio-radius:18px;--studio-radius-sm:12px;--studio-shadow:0 22px 60px color-mix(in srgb,var(--ink) 10%,transparent)}
.studio-page .beta-header{z-index:30;transition:background .35s,border-color .35s,color .35s}
/* studio-home.js adds .studio-top-dark to <html> while the navy hero is in
   view, so the sticky bar sits on it as glass rather than as a cream slab. */
.studio-page.studio-top-dark .beta-header{background:transparent;border-bottom-color:transparent;color:#eef3fa}
/* over the hero the bar is see-through, so the wave runs behind it; it only
   takes a tint while the pointer is on it */
.studio-page.studio-top-dark .beta-header:hover,.studio-page.studio-top-dark .beta-header:focus-within{background:#09182a8c;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.studio-page.studio-top-dark .beta-header::after{background:#8fc5f2}
.studio-page.studio-top-dark .beta-monogram>span{color:#8fc5f2}
.studio-page.studio-top-dark .beta-language>span,.studio-page.studio-top-dark .beta-language button{color:#a9bed5}
.studio-page.studio-top-dark .beta-language button[aria-pressed="true"]{color:#eef3fa}
.studio-page.studio-top-dark #beta-theme-toggle{border-color:#a8d2f547}
.studio-page.studio-top-dark #beta-menu-toggle>span{background:#eef3fa}
.studio-brand{font-weight:600}
/* The hero is a full-bleed navy band with the WebGL wave behind it
   (js/studio-hero-shader.js). Redefining the editorial tokens on the section
   re-skins every descendant in one place instead of overriding each rule:
   the buttons, eyebrow dot, orbits, arch and caption all read from them. */
.studio-hero{position:relative;isolation:isolate;overflow:hidden;padding-top:0;--paper:#09182a;--ink:#eef3fa;--muted:#a9bed5;--green:#8fc5f2;--line:#2b4763;--soft:#122a44;--portrait:#12283f;--accent:#a8d2f5;background:var(--paper);color:var(--ink)}
.studio-hero-inner{position:relative;z-index:2;padding-top:34px}
.studio-hero-stage{position:absolute;inset:0;z-index:0;pointer-events:none;background:#09182a}
#studio-hero-canvas{display:block;width:100%;height:100%}
/* Shown when WebGL is unavailable or the shader fails to compile. */
.studio-hero-stage.is-fallback{background:radial-gradient(118% 78% at 63% 54%,#31719f 0%,#17395c 36%,#09182a 74%)}
.studio-hero-stage.is-fallback>#studio-hero-canvas{display:none}
/* Keeps the headline readable: dark over the copy column, open over the
   portrait where the wave is meant to be seen, closing to solid at the join
   with the next (light) section. */
.studio-hero-veil{position:absolute;inset:0;background:linear-gradient(97deg,#071322fa 0%,#071322f0 22%,#071322a8 38%,#0713223d 56%,#07132200 78%,#07132212 100%)}
.studio-hero-veil::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#09182a99 0%,#09182a1a 20%,#09182a1a 72%,#09182a 100%)}
/* The legacy stylesheet still ships h1,h2,h3,h4{color:var(--text)}, which is a
   direct match and so beats the colour the hero section passes down by
   inheritance. Without this the headline renders in the light theme's ink on
   the navy band and is all but invisible. */
.studio-hero h1,.studio-hero h2,.studio-hero h3{color:var(--ink)}
.studio-hero h1 em{color:var(--green)}
.studio-hero .beta-button{box-shadow:0 10px 28px #0000004d}
.studio-hero .beta-button:hover{box-shadow:0 14px 34px #00000059}
.studio-hero .studio-portrait-caption{background:#10304d;box-shadow:0 18px 44px #00000059;border:1px solid #ffffff1f}
.studio-hero-top,.studio-hero-foot{display:flex;align-items:center;justify-content:space-between;gap:24px}
.studio-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);align-items:center;gap:58px;padding-block:34px 26px}
.studio-kicker{color:var(--green);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;font-weight:650;margin-bottom:20px}
.studio-hero h1{font-size:clamp(48px,5.2vw,80px);line-height:1.02;letter-spacing:-.055em;max-width:11ch}
.studio-hero h1 span,.studio-hero h1 em{display:block}
.studio-hero h1 em{color:var(--green);font-size:1.08em}
.studio-hero-intro{max-width:39ch;color:var(--muted);font-size:1.08rem;line-height:1.75;margin-top:28px}
.studio-hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:28px}
.studio-hero-foot{border-top:1px solid var(--line);padding-block:20px;color:var(--muted);font-size:.78rem}
.studio-portrait-scene{position:relative;min-height:520px;isolation:isolate;overflow:visible;padding:0 6px 22px}
.studio-portrait-art{position:relative;min-height:490px;overflow:visible;transform:perspective(900px) rotateX(var(--studio-tilt-x,0deg)) rotateY(var(--studio-tilt-y,0deg));transition:transform .35s ease}
.studio-portrait-arch{position:absolute;z-index:1;left:11%;right:11%;bottom:2%;height:76%;border:1px solid #a8d2f53d;border-bottom:0;border-radius:50% 50% 12px 12px;background:linear-gradient(160deg,#ffffff1c,#ffffff0a 55%,#07132226);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:inset 0 0 0 14px #ffffff08,12px 16px 0 #a8d2f512}
.studio-portrait-cutout{position:absolute;z-index:2;left:50%;bottom:-4%;width:min(88%,438px);max-width:none;height:auto;transform:translateX(-50%);filter:drop-shadow(0 18px 20px color-mix(in srgb,var(--ink) 18%,transparent));object-fit:contain}
.studio-portrait-orbit{position:absolute;z-index:0;border:1px solid #a8d2f52e;border-radius:50%;pointer-events:none}
.studio-portrait-orbit--one{inset:9% -4% 9%;transform:rotate(22deg)}
.studio-portrait-orbit--two{inset:15% -11% 13%;transform:rotate(-31deg)}
.studio-portrait-star{position:absolute;z-index:3;right:2%;top:6%;font-size:4.4rem;line-height:1;color:var(--green);animation:studio-spin 34s linear infinite}
.studio-portrait-caption{position:relative;z-index:4;width:82%;margin:-42px auto 0;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;background:#1b3c58;color:#f4f6fa;border-radius:var(--studio-radius-sm);box-shadow:10px 12px 0 color-mix(in srgb,var(--green) 14%,transparent)}
.studio-portrait-caption strong{display:block;font:400 1.9rem/1.05 "Instrument Serif",Georgia,serif}
.studio-portrait-caption div span{display:block;margin-top:7px;color:#c3d3e4;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.studio-portrait-caption>span{font-size:1.7rem}
.studio-section{padding-block:104px}
.studio-about{padding-top:116px}
.studio-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
.studio-intro-grid h2,.studio-section h2,.studio-contact h2{font-size:clamp(42px,4.8vw,70px);line-height:1.05;letter-spacing:-.05em}
.studio-intro-grid h2 em,.studio-section h2 em{color:var(--green)}
.studio-about-copy{padding-top:4px;max-width:44ch}
.studio-about-copy p{color:var(--muted);font-size:1rem;line-height:1.8}
.studio-about-copy .studio-lede{color:var(--ink);font-size:1.5rem;line-height:1.4;margin-bottom:18px}
.studio-pillars-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-top:78px;margin-bottom:25px;border-top:1px solid var(--line);padding-top:24px}
.studio-pillars-heading .beta-eyebrow{color:var(--green)}
.studio-pillars-heading>p:last-child{color:var(--muted);font-size:.95rem}
.studio-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:56px}
.studio-pillar{min-width:0;border:1px solid var(--line);border-radius:var(--studio-radius);background:color-mix(in srgb,var(--soft) 54%,var(--paper));overflow:hidden}
.studio-pillar-art{aspect-ratio:1/1;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(160deg,var(--pa-bg1),var(--pa-bg2));
  /* illustration palette: light */
  --pa-bg1:#E5EFE8;--pa-bg2:#F2F6F3;--pa-paper1:#FFFFFF;--pa-paper2:#EEF4F0;--pa-paper3:#DCE8E0;--pa-curl1:#D5E4DA;--pa-curl2:#B9CFC0;
  --pa-mid1:#B9D8C3;--pa-mid2:#8DB89C;--pa-deep1:#2F7A57;--pa-deep2:#0F3B2D;--pa-leaf1:#3F8A66;--pa-leaf2:#17513C;
  --pa-gold1:#F0D797;--pa-gold2:#D2A73F;--pa-sph1:#7FB292;--pa-sph2:#2F7A57;--pa-node2a:#2F7A57;--pa-node2b:#0F3B2D;
  --pa-ped1:#E3EBE5;--pa-ped2:#F6F9F7;--pa-ped3:#C7D8CD;--pa-shadow:rgba(15,59,45,.24);--pa-hilite:#FFFFFF}
:root[data-theme="dark"] .studio-pillar-art{background:linear-gradient(160deg,var(--pa-bg1),var(--pa-bg2));
  --pa-bg1:#17513C;--pa-bg2:#0F3B2D;--pa-paper1:#E7F1EA;--pa-paper2:#C9DDD0;--pa-paper3:#A9C6B4;--pa-curl1:#A9C6B4;--pa-curl2:#86AB96;
  --pa-mid1:#93BDA2;--pa-mid2:#6FA184;--pa-deep1:#2F7A57;--pa-deep2:#0B2F24;--pa-leaf1:#6FB08A;--pa-leaf2:#2F7A57;
  --pa-gold1:#F2DA9C;--pa-gold2:#D9AE45;--pa-sph1:#A8CDB3;--pa-sph2:#4E9370;--pa-node2a:#3C8862;--pa-node2b:#0B2F24;
  --pa-ped1:#2C6A50;--pa-ped2:#3F8062;--pa-ped3:#1D5340;--pa-shadow:rgba(3,20,14,.5);--pa-hilite:#FFFFFF}
.studio-pillar-svg{display:block;width:100%;height:100%}
/* hover: barely-there motion (idle art is completely still) */
.studio-pillar-svg :is(.pa-badge,.pa-leaf,.pa-node,.pa-dot,.pa-page,.pa-bar,.pa-path){transform-box:view-box;transition:transform .8s cubic-bezier(.33,.12,.24,1)}
.studio-pillar-svg .pa-bar{transform-box:fill-box;transform-origin:50% 100%}
.studio-pillar-svg .pa-leaf{transform-box:fill-box;transform-origin:50% 100%}
.studio-pillar-svg .pa-badge{transform-origin:164px 254px}
.studio-pillar-svg .pa-page{transform-origin:96px 312px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.studio-pillar:hover .pa-badge,.studio-pillar:focus-within .pa-badge{transform:rotate(3.5deg)}
.studio-pillar:hover .pa-leaf,.studio-pillar:focus-within .pa-leaf{transform:rotate(2deg)}
.studio-pillar:hover .pa-node-1,.studio-pillar:focus-within .pa-node-1{transform:translate(-2px,-3px)}
.studio-pillar:hover .pa-node-2,.studio-pillar:focus-within .pa-node-2{transform:translate(0,-3px)}
.studio-pillar:hover .pa-node-3,.studio-pillar:focus-within .pa-node-3{transform:translate(2px,-2px)}
.studio-pillar:hover .pa-dot-1,.studio-pillar:focus-within .pa-dot-1{transform:translate(3px,2px)}
.studio-pillar:hover .pa-dot-2,.studio-pillar:focus-within .pa-dot-2{transform:translate(-2px,-2px)}
.studio-pillar:hover .pa-page-1,.studio-pillar:focus-within .pa-page-1{transform:rotate(1deg)}
.studio-pillar:hover .pa-page-2,.studio-pillar:focus-within .pa-page-2{transform:rotate(1.6deg)}
.studio-pillar:hover .pa-page-3,.studio-pillar:focus-within .pa-page-3{transform:rotate(2deg)}
.studio-pillar:hover .pa-bar-1,.studio-pillar:focus-within .pa-bar-1{transform:scaleY(1.05)}
.studio-pillar:hover .pa-bar-2,.studio-pillar:focus-within .pa-bar-2{transform:scaleY(1.07)}
.studio-pillar:hover .pa-bar-3,.studio-pillar:focus-within .pa-bar-3{transform:scaleY(1.06)}
.studio-pillar:hover .pa-bar-4,.studio-pillar:focus-within .pa-bar-4{transform:scaleY(1.05)}
}
/* never set transform:none here: it would override the SVG transform attributes that position the artwork */
@media (prefers-reduced-motion:reduce){.studio-pillar-svg *{transition:none!important}}
.studio-pillar-copy{padding:22px 22px 26px}
.studio-pillar-index{font-size:.72rem;color:var(--green);letter-spacing:.12em}
.studio-pillar h3{font-size:1.38rem;line-height:1.15;letter-spacing:-.025em;margin-top:18px}
.studio-pillar-copy>p:not(.studio-pillar-index):not(.studio-pillar-note){font-size:.92rem;line-height:1.68;color:var(--muted);margin-top:14px}
.studio-pillar-note{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--green);margin-top:21px}
/* Every mark in assets/logos has a transparent background, so the white
   plates these used to sit on were drawing a box for no reason. Marks are
   tinted down to sit with the type and go full colour on hover.
   Heights are fixed px, never a percentage: --square is the near-square ISO
   globe, which needs more height than a wordmark to match it optically. */
/* ---- Pillar logo conveyor --------------------------------------------------
   Each pillar card carries a belt of the marks it works with. At rest the belt
   is still and the marks keep the tinted-back treatment below; hovering
   anywhere on the card starts the scroll and returns the marks to full colour
   as one gesture. The track holds the same list twice - the second copy is
   aria-hidden and exists only so translateX(-50%) wraps with no visible jump,
   which is exact because each copy carries its own trailing gap.
   --belt-span is the approximate width of one copy in px; dividing it by a
   fixed px/s speed keeps all three belts moving at the same apparent rate
   instead of the eight-logo one racing the five-logo one. */
.studio-belt{position:relative;margin-top:16px;overflow:hidden;--belt-gap:22px;--belt-fade:18px;--belt-h:38px;--belt-speed:26;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--belt-fade),#000 calc(100% - var(--belt-fade)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--belt-fade),#000 calc(100% - var(--belt-fade)),transparent 100%)}
.studio-belt-track{display:flex;width:max-content;animation:studio-belt-scroll linear infinite;animation-duration:calc(var(--belt-span,480) * 1s / var(--belt-speed));animation-play-state:paused}
.studio-pillar:hover .studio-belt-track,.studio-pillar:focus-within .studio-belt-track{animation-play-state:running}
@keyframes studio-belt-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.studio-framework-marks{list-style:none;margin:0;padding:0 var(--belt-gap) 0 0;display:flex;flex-wrap:nowrap;align-items:center;gap:0 var(--belt-gap);min-height:var(--belt-h)}
.studio-framework-mark{flex:none;display:flex;align-items:center}
.studio-framework-mark img{width:auto;height:25px;max-width:120px;object-fit:contain}
.studio-framework-mark--square img{height:34px}
.studio-framework-mark--mid img{height:28px}
.studio-framework-mark--wide img{height:20px}
/* Figma and Google Slides are taller than they are wide. Given the square
   height they would tower over the row and set the belt's height on their own,
   so the portrait tier sits a step below it. */
.studio-framework-mark--tall img{height:30px}
.studio-more{margin-top:40px;padding-top:0;border-top:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.studio-more-line{color:var(--ink);font:400 clamp(2rem,3.4vw,2.9rem)/1.05 "Instrument Serif",Georgia,serif;letter-spacing:-.02em}
.studio-more-sub{max-width:46ch;color:var(--muted);font-size:.98rem;line-height:1.7}
.studio-more-cta{margin-top:12px;display:inline-flex;align-items:center;gap:26px;padding:17px 30px;border-radius:999px;background:var(--green);color:var(--paper);font-size:.9rem;font-weight:550;transition:transform .22s,box-shadow .22s}
.studio-more-cta:hover{transform:translateY(-3px);box-shadow:0 12px 30px color-mix(in srgb,var(--green) 30%,transparent)}
.studio-more-cta>span:last-child{font-size:1.15rem;line-height:1}
.studio-experience{background:var(--soft);border-block:1px solid var(--line)}
.studio-section-heading{display:flex;justify-content:space-between;align-items:end;gap:42px;margin-bottom:40px}
.studio-section-heading>p,.studio-section-heading>div>p{max-width:35ch;color:var(--muted);line-height:1.75}
/* ---- Experience deck -------------------------------------------------------
   Three identical cards share one grid: the middle slot is wide and shows the
   full role, the two side slots are squares showing only the mark. Clicking a
   side card reassigns the slots, and studio-home.js FLIPs every card from its
   old box to its new one - so the card you clicked physically travels to the
   centre, instead of content being swapped underneath a panel that never moves. */
.studio-experience-deck{display:grid;grid-template-columns:minmax(0,214px) minmax(0,1fr) minmax(0,214px);gap:20px;align-items:center}
.studio-xp-card{position:relative;grid-row:1;min-width:0;border:1px solid var(--line);border-radius:var(--studio-radius);background:var(--paper);transform-origin:top left;transition:border-color .25s,box-shadow .25s}
.studio-xp-card.is-left{grid-column:1}
.studio-xp-card.is-active{grid-column:2;z-index:2;box-shadow:var(--studio-shadow)}
.studio-xp-card.is-right{grid-column:3}
.studio-xp-card:not(.is-active){aspect-ratio:1;align-self:center;box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 4%,transparent)}
.studio-xp-card:not(.is-active):hover{border-color:var(--green)}
.studio-xp-card.is-moving{z-index:3}
/* the square face - all a side card shows */
.studio-xp-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;border:0;border-radius:inherit;background:none;color:var(--ink);cursor:pointer;transition:opacity .3s,transform .3s}
/* the face of the card arriving at the centre is being scaled by the FLIP,
   so it clears fast rather than stretching in view while it travels */
.studio-xp-card.is-active>.studio-xp-face{opacity:0;pointer-events:none;transform:scale(.94);transition:opacity .16s linear,transform .3s}
.studio-xp-card:not(.is-active):hover>.studio-xp-face{transform:translateY(-3px)}
.studio-xp-mark{width:100%;max-width:142px;height:54px;display:grid;place-items:center}
.studio-xp-mark img{width:100%;height:100%;object-fit:contain}
.studio-xp-name{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:center}
/* the wide face: meta across the top, mark left, role right. Explicit rows and
   margins only - the rule this replaces mixed a 1fr row with a row span that ran
   past the end of its own template, which is what opened the gap under the title. */
.studio-xp-detail{display:none;grid-template-columns:minmax(0,148px) minmax(0,1fr);column-gap:38px;align-content:center;min-height:292px;padding:32px 40px}
.studio-xp-card.is-active>.studio-xp-detail{display:grid}
.studio-xp-meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:18px;color:var(--muted);font-size:.75rem;margin-bottom:26px}
.studio-xp-brand{grid-column:1;grid-row:2/5;align-self:center;display:grid;place-items:center;width:100%;height:84px}
.studio-xp-brand img{width:100%;height:100%;object-fit:contain}
.studio-xp-company{grid-column:2;grid-row:2;color:var(--green);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.studio-xp-role{grid-column:2;grid-row:3;font-size:clamp(1.6rem,2.4vw,2.5rem);line-height:1.08;letter-spacing:-.04em;margin-top:10px}
.studio-xp-body{grid-column:2;grid-row:4;color:var(--muted);font-size:1rem;line-height:1.75;margin-top:16px;max-width:46ch}
/* ---- Logo marks ------------------------------------------------------------
   Marks are tinted back so a row of them reads as texture rather than as six
   competing brands, and return to their real colours on hover or keyboard
   focus. In dark mode they are white silhouettes, and several (Thales, Dataiku,
   KEDGE) are near-black at full colour - so hovering shows their real
   colours with no halo - by request. */
.studio-proof-item img,.studio-framework-mark img,.studio-xp-mark img,.studio-xp-brand img{filter:grayscale(1) opacity(var(--mark-rest,.5));transition:filter .35s,transform .35s}
.studio-proof-item:hover img,.studio-xp-card:hover .studio-xp-mark img,.studio-xp-card:hover .studio-xp-brand img,.studio-xp-face:focus-visible .studio-xp-mark img{filter:none}
:root[data-theme="dark"] .studio-proof-item img,:root[data-theme="dark"] .studio-framework-mark img,:root[data-theme="dark"] .studio-xp-mark img,:root[data-theme="dark"] .studio-xp-brand img{filter:brightness(0) invert(1) opacity(var(--mark-rest-dark,.55))}
:root[data-theme="dark"] .studio-proof-item:hover img,:root[data-theme="dark"] .studio-xp-card:hover .studio-xp-mark img,:root[data-theme="dark"] .studio-xp-card:hover .studio-xp-brand img,:root[data-theme="dark"] .studio-xp-face:focus-visible .studio-xp-mark img{filter:none}
/* Back Market is the one mark that lives on its own brand tile; inverting it
   gives a white block, so it stays chromatic and simply greys back at rest. */
:root[data-theme="dark"] .studio-proof-item--tile img{filter:grayscale(1) brightness(1.1) opacity(.7)}
:root[data-theme="dark"] .studio-proof-item--tile:hover img{filter:none}
.studio-framework-mark{--mark-rest:.72;--mark-rest-dark:.68}
.studio-proof-item{--mark-rest:.46;--mark-rest-dark:.5}
.studio-xp-mark{--mark-rest:.5;--mark-rest-dark:.55}
.studio-xp-brand{--mark-rest:1;--mark-rest-dark:1}
/* Belt marks take their colour from the card, not from hovering one mark: the
   row slides under a stationary cursor, so a per-mark :hover would flicker
   marks in and out of colour as they pass the pointer. Same halo as above -
   Dataiku, SAP, Figma and PowerPoint are near-black at full colour and would
   disappear into the dark theme without it. No plate, on purpose. */
.studio-pillar:hover .studio-framework-mark img,.studio-pillar:focus-within .studio-framework-mark img{filter:none}
/* Belt marks go straight to their real colours on hover in dark mode too -
   no halo in this section, by request. */
:root[data-theme="dark"] .studio-pillar:hover .studio-framework-mark img,:root[data-theme="dark"] .studio-pillar:focus-within .studio-framework-mark img{filter:none}
/* Marks whose artwork IS its colour. The dark-theme silhouette treatment above
   works for line art and wordmarks, but it would render SAP as a plain white
   block and Python, Figma, PowerPoint and the GRI / ESRS / EU Taxonomy roundels
   as featureless blobs, since inverting a solid fill only gives you a solid
   fill. These stay chromatic in both themes - greyed back at rest, full colour
   on hover - and need no halo, being light enough against the navy already. */
:root[data-theme="dark"] .studio-framework-mark--colour img{filter:grayscale(1) brightness(1.12) opacity(.78)}
:root[data-theme="dark"] .studio-pillar:hover .studio-framework-mark--colour img,:root[data-theme="dark"] .studio-pillar:focus-within .studio-framework-mark--colour img{filter:none}
.studio-proof-item:hover img{transform:scale(1.06)}
.studio-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.studio-proof-bar{border-top:1px solid var(--line);margin-top:48px;padding-top:34px}
.studio-proof-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 34px;width:100%;align-items:center}
.studio-proof-item{position:relative;min-height:66px;display:grid;place-items:center}
.studio-proof-item img{width:100%;height:48px;object-fit:contain}
.studio-proof-item span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.studio-portfolio{padding-block:104px 78px}
.studio-portfolio .studio-section-heading{margin-bottom:0}
.studio-portfolio .studio-section-heading>div>p{margin-top:15px;font-size:1rem}
.studio-gallery-button{display:inline-flex;align-items:center;gap:28px;padding:16px 20px;border:1px solid var(--green);border-radius:999px;color:var(--green);font-size:.87rem;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.studio-gallery-button:hover{background:var(--green);color:var(--paper);transform:translateY(-2px)}
.studio-beyond{background:#1b3c58;color:#eef3f9;--line:#3f5c78;--muted:#b6c7d9}
.studio-beyond .beta-section-label{color:#b6c7d9}
.studio-beyond .beta-section-number,.studio-beyond h2 em{color:#a8d2f5}
.studio-beyond-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:76px}
.studio-beyond h2{color:#eef3f9}
.studio-beyond-grid>div>p{max-width:35ch;color:var(--muted);line-height:1.8;margin-top:22px}
.studio-beyond .beta-text-link{margin-top:23px;border-color:var(--line)}
/* Printed-photo look kept; the 3:4 crop is what made this section run so
   tall, so the plates are 4:5 and capped in width. */
.studio-beyond-images{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;width:100%;max-width:540px;justify-self:end}
.studio-beyond-images figure{position:relative;margin:0;background:#f6f8fc;padding:9px 9px 0;box-shadow:0 18px 34px #0b1e2f52;color:#1b3c58;transition:transform .35s}
.studio-beyond-images img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.studio-beyond-images figcaption{padding:10px 2px 12px;font-size:.7rem;display:flex;justify-content:space-between}
.studio-beyond-images figure:first-child{transform:rotate(-4deg);margin-top:-16px}
.studio-beyond-images figure:last-child{transform:rotate(4deg);margin-top:28px}
.studio-beyond-images figure:hover{transform:rotate(0) translateY(-4px)}
.studio-social{padding-bottom:92px}
.studio-social .studio-section-heading{align-items:center}
.studio-social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.studio-social-grid a{display:grid;grid-template-columns:1fr auto;gap:12px 15px;color:var(--ink);font-size:.95rem;line-height:1.35}
/* contain, not cover: these three posts run from 1.50 to 2.07 aspect and a
   cover crop was slicing the CEVA wordmark in half. */
.studio-social-grid img{grid-column:1/-1;aspect-ratio:16/10;width:100%;height:auto;object-fit:contain;background:color-mix(in srgb,var(--soft) 70%,var(--paper));padding:12px;border:1px solid var(--line);border-radius:var(--studio-radius-sm);transition:transform .35s,border-color .35s}
.studio-social-grid a:hover img{transform:translateY(-4px);border-color:var(--green)}
.studio-social-grid a>span:nth-last-child(1){color:var(--green);font-size:1.25rem}
.studio-contact{padding-block:105px 125px;border-top:1px solid var(--line);text-align:center;display:flex;align-items:center;flex-direction:column}
.studio-contact>.beta-eyebrow{color:var(--green);margin-bottom:25px}
.studio-contact h2{max-width:12ch}
.studio-contact>p:not(.beta-eyebrow){max-width:44ch;margin-top:24px;color:var(--muted);line-height:1.75}
.studio-contact-actions{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:28px;flex-wrap:wrap}
.studio-email{margin-top:22px;color:var(--muted);font-size:.82rem}
.studio-footer{background:var(--soft);border-top:1px solid var(--line);padding-block:30px 22px}
.studio-footer-main{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;align-items:start}
.studio-footer-brand{font:400 2rem/1 "Instrument Serif",Georgia,serif}
.studio-footer-main nav,.studio-footer-social{display:flex;flex-direction:column;gap:9px;font-size:.82rem;color:var(--muted)}
.studio-footer-main nav a:hover,.studio-footer-social a:hover{color:var(--green)}
.studio-footer-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:18px;margin-top:28px;color:var(--muted);font-size:.72rem}
@keyframes studio-spin{to{transform:rotate(360deg)}}
@media (max-width:1100px){
  .studio-hero-grid{gap:34px}.studio-portrait-scene{min-height:470px}.studio-portrait-art{min-height:445px}
  .studio-experience-deck{grid-template-columns:minmax(0,168px) minmax(0,1fr) minmax(0,168px);gap:14px}.studio-xp-card.is-active>.studio-xp-detail{padding-inline:28px;column-gap:26px}
}
@media (max-width:860px){
  .studio-hero-grid{grid-template-columns:1fr;gap:30px}.studio-hero-copy{max-width:52ch}.studio-portrait-scene{width:min(100%,520px);justify-self:center;order:-1}
  .studio-intro-grid,.studio-beyond-grid{grid-template-columns:1fr;gap:32px}.studio-pillars{grid-template-columns:1fr}.studio-pillar-art{aspect-ratio:1/1}
  .studio-experience-deck{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.studio-xp-card,.studio-xp-card.is-left,.studio-xp-card.is-right{grid-column:auto;grid-row:1;aspect-ratio:1;align-self:start}.studio-xp-card.is-active{grid-column:1/-1;grid-row:2;aspect-ratio:auto;margin-top:4px}.studio-xp-card.is-active>.studio-xp-face{display:none}.studio-xp-mark{height:48px}.studio-xp-card.is-active>.studio-xp-detail{min-height:0;grid-template-columns:118px minmax(0,1fr);column-gap:24px;padding:26px 24px}.studio-xp-brand{height:64px}.studio-proof-logos{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}.studio-social-grid{gap:15px}
}
@media (max-width:680px){.studio-page.studio-top-dark #beta-nav-links{background:#09182af7;border-bottom-color:#a8d2f52e}}
@media (max-width:620px){
  .studio-hero-inner{padding-top:26px}.studio-more{margin-top:30px;padding-top:0}.studio-more-cta{width:100%;justify-content:space-between}.studio-beyond-images{max-width:none;justify-self:stretch}.studio-hero-top,.studio-hero-foot{align-items:flex-start;flex-direction:column;gap:9px}.studio-hero-grid{padding-block:32px 22px}.studio-hero h1{font-size:clamp(42px,11vw,60px);max-width:13ch}.studio-hero-intro{font-size:1rem}.studio-portrait-scene{min-height:400px;padding-inline:0}.studio-portrait-art{min-height:378px}.studio-portrait-arch{left:6%;right:6%;height:77%}.studio-portrait-cutout{width:80%}.studio-portrait-star{font-size:3.5rem;right:3%;top:3%}.studio-portrait-caption{width:90%;padding:15px 17px;margin-top:-36px}.studio-portrait-caption strong{font-size:1.65rem}.studio-section{padding-block:72px}.studio-about{padding-top:78px}.studio-intro-grid h2,.studio-section h2,.studio-contact h2{font-size:clamp(42px,12vw,59px)}.studio-about-copy .studio-lede{font-size:1.3rem}.studio-pillars-heading{align-items:start;flex-direction:column;gap:12px;margin-top:54px}.studio-pillar-copy{padding:19px 18px 23px}.studio-pillar h3{font-size:1.28rem}.studio-section-heading{align-items:start;flex-direction:column;gap:20px}.studio-experience-deck{gap:8px}.studio-xp-card{border-radius:12px}.studio-xp-face{gap:10px;padding:8px}.studio-xp-mark{height:38px}.studio-xp-name{font-size:.62rem;letter-spacing:.04em}.studio-xp-card.is-active>.studio-xp-detail{grid-template-columns:1fr;padding:22px 18px}.studio-xp-brand{grid-column:1;grid-row:auto;height:54px;justify-self:start;width:132px;margin-bottom:18px}.studio-xp-meta{margin-bottom:18px;font-size:.7rem}.studio-xp-company,.studio-xp-role,.studio-xp-body{grid-column:1;grid-row:auto}.studio-xp-role{font-size:1.65rem}.studio-proof-logos{gap:20px 22px}.studio-proof-item{min-height:40px}.studio-portfolio{padding-block:70px}.studio-gallery-button{width:100%;justify-content:space-between}.studio-beyond-images{gap:10px}.studio-social-grid{grid-template-columns:1fr;gap:30px}.studio-contact{padding-block:78px 88px}.studio-footer-main{grid-template-columns:1fr 1fr}.studio-footer-brand{grid-column:1/-1}.studio-footer-bottom{flex-direction:column;gap:8px}
}
@media (max-width:620px){.studio-proof-logos{grid-template-columns:repeat(2,minmax(90px,1fr));gap:8px}}
.studio-hero h1{max-width:16ch}.studio-pillar-copy>p:not(.studio-pillar-index):not(.studio-pillar-note){font-size:1rem}.studio-pillar-note,.studio-xp-name,.studio-beyond-images figcaption,.studio-portrait-caption div span,.studio-pillar-index,.studio-xp-meta,.studio-xp-company,.studio-footer-bottom{font-size:.75rem}
@media (max-width:620px){.studio-proof-logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){
  .studio-page *,.studio-page *::before,.studio-page *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  /* The belt stops dead - static row, every mark still visible and still
     turning full-colour on hover, just no transform. */
  .studio-belt-track{animation:none!important;transform:none!important}
  .studio-portrait-art{transform:none!important}.studio-portrait-star{animation:none!important}.studio-beyond-images figure{transition:none}.studio-xp-card,.studio-xp-face{transition:none!important}
}

/* Dark-ink marks (B Impact, SBTi, Dataiku, GHG Protocol) disappear into the navy
   at full colour, and there is no halo in this section, so in dark mode they
   stay white on hover - brightening to full opacity instead of changing colour. */
:root[data-theme="dark"] .studio-pillar:hover .studio-framework-mark--mono img,:root[data-theme="dark"] .studio-pillar:focus-within .studio-framework-mark--mono img{filter:brightness(0) invert(1)}

/* Sizing pass: the belt marks were reading small against the card (GHG Protocol
   and SBTi text was illegible at 20-28px), so every tier steps up ~20% and the
   belt gets more air between marks. The cards also become flex columns with the
   label pushed to the bottom, so all three belts sit on one shared line even
   when a title wraps to two lines. */
.studio-belt{--belt-h:46px;--belt-gap:30px;margin-top:14px}
.studio-framework-mark img{height:30px;max-width:150px}
.studio-framework-mark--wide img{height:24px}
.studio-framework-mark--mid img{height:34px}
.studio-framework-mark--square img{height:40px}
.studio-framework-mark--tall img{height:36px}
.studio-pillar{display:flex;flex-direction:column}
.studio-pillar-copy{flex:1;display:flex;flex-direction:column}
.studio-pillar-copy>.studio-pillar-note{margin-top:auto;padding-top:24px}

/* Immersive top: the header used to sit ABOVE the hero, so its glass tint was
   mixing with the light page behind it and read as a grey slab. The hero now
   slides up underneath the sticky header (studio-home.js keeps
   --studio-header-h in step with the real header height), so the shader runs
   edge to edge from the very top of the window. */
.studio-hero{margin-top:calc(-1 * var(--studio-header-h,87px));padding-top:var(--studio-header-h,87px)}
.studio-hero-inner{padding-top:30px}
/* experience meta: base p{max-width:64ch} was stopping the row mid-card, which
   is why the location sat in the middle instead of at the right edge */
.studio-xp-meta{max-width:none}
.studio-xp-place{display:inline-flex;align-items:center;gap:6px;color:inherit;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.studio-xp-place:hover,.studio-xp-place:focus-visible{color:var(--ink);border-bottom-color:currentColor}
.studio-xp-place>span:last-child{font-size:.85em;transition:transform .2s}
.studio-xp-place:hover>span:last-child{transform:translate(2px,-2px)}
/* Dataiku's wordmark is near-black: at full colour it disappears on the dark
   cards, so in dark mode it stays white on hover as well. */
:root[data-theme="dark"] .studio-xp-card[data-xp="dataiku"]:hover .studio-xp-mark img,:root[data-theme="dark"] .studio-xp-card[data-xp="dataiku"]:hover .studio-xp-brand img,:root[data-theme="dark"] .studio-xp-card[data-xp="dataiku"] .studio-xp-face:focus-visible .studio-xp-mark img{filter:brightness(0) invert(1)}

/* Travel Triangle reads badly as a bare mark, so - like Back Market - it gets a
   tile of its own: a light rounded plate sized to the logo, not the column. It
   shares Back Market's dark-mode handling, so it is never inverted. */
.studio-proof-item--plate img{width:auto;max-width:100%;height:48px;padding:10px 16px;background:#fff;border-radius:10px}
/* INSEEC, KEDGE and JIMS are dark marks that sink into the navy at full colour,
   so in dark mode they stay white on hover and just brighten. */
:root[data-theme="dark"] .studio-proof-item:hover img[src*="Inseec"],:root[data-theme="dark"] .studio-proof-item:hover img[src*="KBS"],:root[data-theme="dark"] .studio-proof-item:hover img[src*="JIMS"]{filter:brightness(0) invert(1)}

/* with the labels gone, the belt itself sits on the shared bottom line */
.studio-pillar-copy>.studio-belt{margin-top:auto;padding-top:26px}

/* ...and it returns as soon as the page moves: over the hero it is a deep navy
   glass (never the grey it used to be, since the hero now sits behind it) */
.studio-page.studio-top-dark.studio-scrolled .beta-header{background:#09182ae0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:#a8d2f51f}
/* Logo row: each mark is now only as wide as its own artwork and the row spreads
   them with equal space between. With six equal grid cells, a narrow mark (JIMS)
   floated in a wide cell while the Travel Triangle tile filled its cell edge to
   edge, so the visible gaps either side of the tile were badly uneven. */
.studio-proof-logos{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 28px}
.studio-proof-item{flex:none;min-height:66px}
.studio-proof-item img{width:auto;max-width:190px}
@media (max-width:860px){.studio-proof-logos{justify-content:center;gap:22px 34px}}

/* Manager credit: a quiet line along the bottom-left of the open card. It lives
   inside the detail block, so it only shows for the card in the centre. */
.studio-xp-lead{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:26px;font-size:.78rem;color:var(--muted)}
.studio-xp-lead-label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.studio-xp-lead ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.studio-xp-lead a{display:inline-flex;align-items:center;gap:5px;color:var(--ink);border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.studio-xp-lead a:hover,.studio-xp-lead a:focus-visible{color:var(--green);border-bottom-color:currentColor}
.studio-xp-lead a>span{font-size:.85em;color:var(--muted);transition:transform .2s}
.studio-xp-lead a:hover>span{transform:translate(2px,-2px)}
@media (max-width:620px){.studio-xp-lead{margin-top:20px}}

/* Caption globe: a wireframe sphere whose meridians turn. Each meridian is the
   rim ellipse squashed with scaleX following a cosine - which is exactly what a
   line of longitude looks like rotating about the vertical axis - and the three
   are a third of a turn apart. non-scaling-stroke keeps the lines at an even
   weight while they squash. */
.studio-globe{flex:none;width:40px;height:40px;color:#9cc9ee;filter:drop-shadow(0 0 10px #9cc9ee40)}
.studio-globe svg{display:block;width:100%;height:100%;overflow:visible}
.studio-globe-rim,.studio-globe-lat,.studio-globe-mer{fill:none;stroke:currentColor;stroke-width:1.15;vector-effect:non-scaling-stroke}
.studio-globe-lat{opacity:.5}
.studio-globe-mer{transform-box:view-box;transform-origin:0 0;animation:studio-globe-turn 9s linear infinite}
.studio-globe-mer:nth-of-type(2){animation-delay:-3s}
.studio-globe-mer:nth-of-type(3){animation-delay:-6s}
@keyframes studio-globe-turn{0%{transform:scaleX(1)}12.5%{transform:scaleX(.707)}25%{transform:scaleX(0)}37.5%{transform:scaleX(-.707)}50%{transform:scaleX(-1)}62.5%{transform:scaleX(-.707)}75%{transform:scaleX(0)}87.5%{transform:scaleX(.707)}100%{transform:scaleX(1)}}
@media (max-width:620px){.studio-globe{width:34px;height:34px}}
@media (prefers-reduced-motion:reduce){.studio-globe-mer{animation:none!important}.studio-globe-mer:nth-of-type(2){transform:scaleX(.5)}.studio-globe-mer:nth-of-type(3){transform:scaleX(-.5)}}

/* links inside a role description: underlined so they read as links in running
   text, brightening on hover */
.studio-xp-inline{color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--green) 55%,transparent);text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s,text-decoration-color .2s}
.studio-xp-inline:hover,.studio-xp-inline:focus-visible{color:var(--green);text-decoration-color:currentColor}

/* ---- Phone layout ---------------------------------------------------------- */
.studio-pillars-nav{display:none}
.studio-proof-dup{display:none}
@media (max-width:680px){
  /* 1. the monogram alone carries the brand on a phone (the link keeps its
        accessible name via aria-label) */
  .studio-page .beta-header .beta-brand>span:last-child{display:none}
}
@media (max-width:620px){
  /* 2. the three pillar cards become a swipeable track with arrow buttons;
        each card is 86% wide so the next one peeks in and invites a swipe */
  .studio-pillars{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin-inline:-20px;padding:4px 20px 8px;scrollbar-width:none;overscroll-behavior-x:contain}
  .studio-pillars::-webkit-scrollbar{display:none}
  .studio-pillar{flex:0 0 86%;scroll-snap-align:start}
  .studio-pillars-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:16px}
  .studio-pillars-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:border-color .2s,opacity .2s,transform .2s}
  .studio-pillars-btn svg{width:18px;height:18px}
  .studio-pillars-btn:not(:disabled):active{transform:scale(.94);border-color:var(--green)}
  .studio-pillars-btn:disabled{opacity:.3;cursor:default}
  .studio-pillars-count{min-width:48px;text-align:center;font-size:.8rem;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}
  /* there is no hover on a phone, so the belt of the card in view runs */
  .studio-pillar.is-current .studio-belt-track{animation-play-state:running}

  /* 3. the logo row becomes a belt travelling left to right. The markup holds
        the six marks twice (the copy is aria-hidden); spacing is a margin on
        each item rather than a flex gap so the two halves are exactly equal
        and translateX(-50%) -> 0 wraps with no jump. */
  .studio-proof-bar{overflow:hidden;margin-inline:-20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .studio-proof-logos{flex-wrap:nowrap;justify-content:flex-start;width:max-content;gap:0;animation:studio-proof-belt 26s linear infinite}
  .studio-proof-dup{display:grid}
  .studio-proof-item{margin-right:38px;min-height:56px}
  .studio-proof-item img,.studio-proof-item--plate img{height:40px;max-width:150px}
}
@keyframes studio-proof-belt{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (max-width:620px) and (prefers-reduced-motion:reduce){
  .studio-proof-dup{display:none}
  .studio-proof-logos{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:20px 0}
}

/* Side cards hold nothing in flow (the face is absolutely positioned), so their
   height came from aspect-ratio alone. Safari lets a stretched grid item ignore
   aspect-ratio and collapsed them to their borders - two dots on an iPhone. A
   square spacer gives them real height in every engine. */
.studio-xp-card:not(.is-active)::before{content:"";display:block;padding-top:100%}
/* the star is an SVG: the ✳ glyph turns into a green emoji tile on iOS */
.studio-portrait-star svg{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

/* Experience autoplay progress: the bar's animation is the 5s timer (see studio-home.js). */
.studio-xp-progress{display:none;position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0 0 var(--studio-radius) var(--studio-radius);overflow:hidden;pointer-events:none;z-index:3}
.studio-xp-progress::after{content:"";display:block;height:100%;background:var(--forest,#0F3B2D);transform:scaleX(0);transform-origin:left center}
:root[data-theme="dark"] .studio-xp-progress::after{background:var(--gold,#E0BD68)}
.studio-experience-deck.is-autoplay .studio-xp-card.is-active>.studio-xp-progress{display:block}
.studio-experience-deck.is-autoplay .studio-xp-card.is-active>.studio-xp-progress::after{animation:xp-progress 5s linear forwards}
.studio-experience-deck.is-paused .studio-xp-card.is-active>.studio-xp-progress::after{animation-play-state:paused}
@keyframes xp-progress{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.studio-xp-progress{display:none!important}}

/* Legible display type and a copy-first opening on phones. */
.studio-hero h1{letter-spacing:-.035em}
.studio-xp-playback{display:block;margin:0 0 18px auto;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-size:.875rem;cursor:pointer}
.studio-xp-playback:hover{border-color:var(--green);background:var(--soft)}
.studio-xp-role:focus-visible,.studio-pillars:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:4px}
@media (max-width:680px){
  .studio-portrait-scene{order:0}
  .studio-hero-inner{padding-top:12px}
  .studio-hero-grid{padding-top:24px;gap:28px}
  .studio-hero h1{max-width:16ch}
  .studio-hero-intro{margin-top:22px}
  .studio-hero-actions{gap:16px 24px;margin-top:22px}
  .studio-page .studio-hero .studio-hero-veil{background:linear-gradient(180deg,#0b2f24f2 0%,#0b2f24e6 55%,#0b2f2440 78%,transparent 100%)}
}
@media (prefers-reduced-motion:reduce){
  .studio-belt{height:auto;overflow:visible;mask-image:none;-webkit-mask-image:none}
  .studio-belt-track{width:auto}
  .studio-framework-marks{flex-wrap:wrap;justify-content:center;gap:18px;width:100%}
  .studio-framework-marks[aria-hidden="true"]{display:none}
}
@media (min-width:861px) and (max-width:1599px){
  .studio-hero h1{font-size:clamp(48px,4.8vw,76px)}
}