/* =========================================================
   STUDIO design: a portfolio-led layout after Giant Digital's website, in each site's own colours
   (Veaivo's violet, blue and deep navy for Veaivo's own site). Soft shapes that drift, wavy edges with
   a line that draws itself across, photo cards of different sizes, and a handwritten word in headings.
   Built on the Union design: the page wears .d-union and .d-studio, and this sheet loads after
   union.css, so every rule here starts with .d-studio (or .x-studio) and wins over Union's.
   Layout follows the width of the page itself (container queries).
   ========================================================= */

.site.d-studio, .x-studio {
  --st-violet: var(--c-accent, #6C4CF1);
  --st-blue: var(--c-support, #2B31DA);
  --st-navy: var(--c-main, #0B1120);
  --st-mint: var(--c-highlight, #7CE0C3);
  /* The line along a wavy edge: a stronger mint, so it stands out on the band and on white. */
  --st-wave-line: color-mix(in srgb, var(--st-mint) 55%, #00B386);
  --st-tint: var(--c-tint, #F3F0FF);
  /* Cards on the dark bands, a shade lighter than the band and leaning towards the accent. */
  --st-night: color-mix(in srgb, var(--st-navy) 90%, var(--st-violet));
  /* Words in the accent colour on white stay readable. */
  --st-deep: color-mix(in srgb, var(--st-violet) 88%, #000);
  --st-lilac: color-mix(in srgb, var(--st-violet) 42%, #fff);
  /* The article pages: a slate band, a deeper page under it, and cards between the two. */
  --st-slate: color-mix(in srgb, var(--st-navy) 85%, #7F8BB8);
  --st-deeper: color-mix(in srgb, var(--st-navy) 72%, #000);
  --st-card: color-mix(in srgb, var(--st-navy) 82%, #7F8BB8);
  --st-ink: #0B0D13;
  --st-soft: #4E5666;
  --st-line: #E4E2F0;
  /* The grey edge of a filter button. */
  --st-pill: #C4C1CF;
  --st-hand: 'Caveat', 'Segoe Print', cursive;
  --st-r: 20px;
  --un-main: var(--st-navy);
  --un-accent: var(--st-violet);
  --un-accent-deep: var(--st-violet);
  --un-support: var(--st-blue);
  --un-tint: var(--st-tint);
  --un-grey: var(--st-tint);
  --un-ink: var(--st-ink);
  --un-soft: var(--st-soft);
  --un-line: var(--st-line);
  --un-foot: var(--st-navy);
  --wrap: 1300px;
}
.site.d-studio { font-size: 18px; line-height: 1.62; color: var(--st-ink); background: #fff; overflow-x: clip; }
.d-studio .un-texture { display: none; }

/* ---------- Words ---------- */
.d-studio .st-hand { font-family: var(--st-hand); font-style: normal; font-weight: 700; font-size: 1.22em; line-height: .8; letter-spacing: 0; color: var(--st-violet); }
.d-studio :is(.st-bg-main, .st-bg-accent, .st-hero, .st-quote.st-bg-accent, .st-quote.st-bg-main, .st-band-points) .st-hand { color: var(--st-mint); }
.d-studio .st-hero .st-hand { color: #fff; }
/* A handwritten word writes itself on, word by word, once its heading has risen into view. */
.d-studio .st-w { display: inline-block; }
html.motion .d-studio .sw-rise .st-w { clip-path: inset(-40% -15% -40% -15%); transition: clip-path .6s cubic-bezier(.55, 0, .35, 1); transition-delay: calc(var(--d, 0ms) + 420ms + var(--i, 0) * 240ms); }
html.motion .d-studio .sw-rise:not(.in) .st-w { clip-path: inset(-40% 100% -40% -15%); }
.d-studio .st-h2 { font: 800 clamp(32px, 3.6cqi, 50px)/1.1 var(--f-head); letter-spacing: -.02em; color: var(--st-ink); text-wrap: balance; }
.d-studio :is(.st-bg-main, .st-bg-accent) .st-h2 { color: #fff; }
/* Union's blocks (the news list, figures, contact panel) take the same headings, centred. */
.d-studio .un-head-row { justify-content: center; text-align: center; }
.d-studio .un-h2 { font: 800 clamp(32px, 3.6cqi, 50px)/1.1 var(--f-head); letter-spacing: -.02em; color: var(--st-ink); }
.d-studio .un-intro { color: var(--st-soft); }
.d-studio .st-foot .st-hand { color: var(--st-mint); }
.d-studio .st-head { max-width: 780px; margin-bottom: clamp(32px, 4cqi, 52px); }
.d-studio .st-head.st-centre { margin-inline: auto; text-align: center; }
.d-studio .st-intro { margin-top: 16px; font-size: clamp(18px, 1.6cqi, 21px); line-height: 1.55; color: var(--st-soft); }
.d-studio :is(.st-bg-main, .st-bg-accent) .st-intro { color: rgba(255, 255, 255, .86); }
.d-studio .st-date { margin-bottom: 14px; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, .88); }
.d-studio .st-kicker { margin-bottom: 14px; font: 700 15px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--st-deep); }
.d-studio :is(.st-bg-main, .st-bg-accent, .st-hero) .st-kicker { color: var(--st-mint); }
.d-studio .st-prose { font-size: 18px; line-height: 1.72; color: var(--st-soft); }
.d-studio .st-prose > * + * { margin-top: 1em; }
.d-studio .st-prose a { color: var(--st-deep); text-decoration: underline; text-decoration-color: var(--st-lilac); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.d-studio .st-prose strong { color: var(--st-ink); }
.d-studio .st-prose ul { padding-inline-start: 1.2em; list-style: disc; }
.d-studio .st-prose li + li { margin-top: .35em; }
.d-studio .st-prose li::marker { color: var(--st-violet); }
.d-studio :is(.st-bg-main, .st-bg-accent) .st-prose { color: rgba(255, 255, 255, .86); }
.d-studio :is(.st-bg-main, .st-bg-accent) .st-prose :is(a, strong) { color: #fff; }
.d-studio .st-small { max-width: 760px; margin: 28px auto 0; font-size: 15px; line-height: 1.6; color: var(--st-soft); text-align: center; }

/* ---------- Bands ---------- */
.d-studio .st-bg-white { background: #fff; }
.d-studio .st-bg-tint { background: var(--st-tint); }
.d-studio .st-bg-main { background: var(--st-navy); color: #fff; }
.d-studio .st-bg-accent { background: linear-gradient(110deg, var(--st-violet), var(--st-blue)); color: #fff; }
.d-studio .st-bg-white + .st-bg-white, .d-studio .st-bg-tint + .st-bg-tint,
.d-studio .ed-block:has(> .st-bg-white) + .ed-block > .st-bg-white, .d-studio .ed-block:has(> .st-bg-tint) + .ed-block > .st-bg-tint { padding-top: 0; }

/* ---------- Buttons: round pills that wobble like jelly under the mouse ---------- */
.d-studio .btn.un-pill, .x-studio .btn.un-pill { min-height: 50px; padding: 14px 28px; font: 700 16.5px/1.2 var(--f-body); letter-spacing: -.005em; }
.d-studio .btn.st-fill, .x-studio .btn.st-fill { background: var(--st-violet); color: #fff; }
.d-studio .btn.st-fill:hover { background: var(--st-blue); }
.d-studio .btn.st-white { background: #fff; color: var(--st-navy); }
.d-studio .btn.st-white:hover { background: var(--st-tint); }
.d-studio .btn.st-line { background: transparent; color: var(--st-deep); box-shadow: inset 0 0 0 2px var(--st-violet); }
.d-studio .btn.st-line:hover { background: var(--st-violet); color: #fff; }
.d-studio .btn.st-line-white { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
.d-studio .btn.st-line-white:hover { background: #fff; color: var(--st-navy); }
.d-studio .st-pills { margin-top: 32px; }
@keyframes st-jelly {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.07, .93); }
  50% { transform: scale(.96, 1.05); }
  70% { transform: scale(1.02, .98); }
  100% { transform: scale(1, 1); }
}
@media (hover: hover) {
  html.motion .d-studio .btn.un-pill:hover, html.motion .d-studio .st-filter:hover, html.motion .d-studio .st-shuffle:hover { animation: st-jelly .6s ease both; }
}

/* ---------- Header: over the banner, then a floating bar ---------- */
.d-studio .un-head { --st-bar: 116px; --st-gap: 28px; background: transparent; margin-bottom: calc(-1 * var(--st-bar)); color: #fff; }
/* The space above the bar at the top of the page is only a shift down, never a change of place, so the
   logo and links stay exactly where they are as the bar turns into a floating panel. */
.site.d-studio .un-head.sw-pinned { top: 0; }
.d-studio .un-bar { border: 0; }
/* The bar is wider than the page, as on Giant Digital, so the links have room before they fold. */
.d-studio .un-head .un-bar-row { max-width: 1680px; }
.d-studio .un-bar-row { height: var(--st-bar); box-sizing: border-box; padding-block: 0; gap: 12px; transform: translateY(var(--st-gap)); }
/* Once the page moves, the bar becomes a thick rounded navy panel floating over it, as on Giant Digital.
   The logo and links keep their height, and only draw in a little from each side. */
.d-studio .un-bar-row::before { content: ""; position: absolute; z-index: -1; inset: 6px calc(var(--gutter) - 30px); border-radius: 32px; background: color-mix(in srgb, var(--st-navy) 94%, transparent); box-shadow: 0 14px 40px rgba(4, 6, 20, .35); opacity: 0; transform: scaleX(.94); transition: opacity .35s, transform .45s cubic-bezier(.3, .7, .3, 1); }
.d-studio .un-head.is-stuck .un-bar-row::before { opacity: 1; transform: none; }
@supports (backdrop-filter: blur(1px)) { .d-studio .un-bar-row::before { background: color-mix(in srgb, var(--st-navy) 92%, transparent); backdrop-filter: blur(14px); } }
.d-studio .un-head.is-stuck .un-bar { box-shadow: none; }

/* The logo: Veaivo's violet and blue V on a white disc, so it shows on every banner, with the name
   centred underneath it. */
.d-studio .st-brand { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-inline-end: 26px; color: #fff; text-align: center; }
.d-studio .st-brand img { height: 64px; width: auto; }
.d-studio .st-brand-v { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(4, 6, 20, .22); line-height: 0; transition: width .35s, height .35s; }
.d-studio .st-v { width: 29px; height: 29px; margin-top: 2px; transition: width .35s, height .35s; }
.d-studio .st-v path { fill: var(--st-violet); stroke: var(--st-violet); stroke-width: 2.4; stroke-linejoin: round; }
.d-studio .st-v .st-v2 { fill: var(--st-blue); stroke: var(--st-blue); }
.d-studio .st-brand-words { display: flex; flex-direction: column; align-items: center; line-height: 1.05; transition: opacity .3s, max-height .35s; max-height: 60px; overflow: hidden; }
.d-studio .st-brand-words b { font: 800 17px/1.05 var(--f-head); letter-spacing: -.01em; }
.d-studio .st-brand-words span { font: 600 13px/1.15 var(--f-body); color: var(--st-lilac); letter-spacing: .01em; }


.d-studio .un-nav-links { gap: 6px; font: 700 16.5px/1.2 var(--f-body); }
/* The links sit at the right, beside the buttons, as on Giant Digital, so the mouse has a short way to go
   from a link to a button. The logo takes the spare space on its left instead. */
.d-studio:not(.sw-fold) .un-bar-row > .st-brand { margin-inline-end: auto; }
.d-studio:not(.sw-fold) .un-bar-row > .un-nav-links { margin-inline-end: 16px; }
.d-studio:not(.sw-fold) .un-nav-links > li:not(.un-nav-refer) { position: relative; display: flex; align-items: center; }
.d-studio:not(.sw-fold) .un-nav-links > li > a { padding: 10px 10px; border: 0; color: #fff; }
.d-studio:not(.sw-fold) .un-nav-links > li > a:hover { color: var(--st-mint); }
.d-studio:not(.sw-fold) .st-sub-btn { color: #fff; }
.d-studio .st-sub-btn { display: grid; place-items: center; width: 26px; height: 26px; margin-inline-start: -6px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.d-studio .st-sub-btn svg { width: 12px; height: 12px; transition: transform .25s; }
.d-studio .st-has-sub:is(:hover, :focus-within, .is-open) .st-sub-btn svg { transform: rotate(180deg); }
/* A link's own panel of links, a white card under it. */
.d-studio:not(.sw-fold) .st-sub { position: absolute; z-index: 30; top: calc(100% + 10px); inset-inline-start: -14px; display: grid; gap: 2px; min-width: 300px; padding: 10px; border-radius: 18px; background: #fff; color: var(--st-ink); box-shadow: 0 22px 50px rgba(8, 10, 30, .28); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s, transform .22s, visibility .22s; }
.d-studio:not(.sw-fold) .st-sub::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.d-studio:not(.sw-fold) .st-has-sub:is(:hover, :focus-within, .is-open) .st-sub { opacity: 1; visibility: visible; transform: none; }
.d-studio .st-sub a { display: block; padding: 11px 14px; border-radius: 12px; color: var(--st-ink); text-decoration: none; }
.d-studio .st-sub a:hover { background: var(--st-tint); }
/* The Union design underlines every menu link on hover; on these rounded cards that line curled up at both ends. */
.d-studio .un-nav-links .st-sub a, .d-studio .un-nav-links .st-sub a:hover { border: 0; }
.d-studio .st-sub b { display: block; font-size: 16px; font-weight: 700; }
.d-studio .st-sub span { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--st-soft); }
/* Folded, the links under each link are listed beneath it. */
.d-studio.sw-fold .st-sub-btn { display: none; }
.d-studio.sw-fold .st-sub { margin: -6px 0 6px; padding: 0 0 8px 14px; border-bottom: 1px solid var(--st-line); }
.d-studio.sw-fold .st-sub a { padding: 8px 0; border-radius: 0; }
.d-studio.sw-fold .st-sub b { font-size: 16px; font-weight: 600; color: var(--st-soft); }
.d-studio.sw-fold .st-sub span { display: none; }
.d-studio.sw-fold.menu-open .tl-menu > li.st-has-sub > a { border-bottom: 0; }
.d-studio.sw-fold.menu-open .un-nav-refer .btn.st-white { box-shadow: inset 0 0 0 2px var(--st-navy); }
.d-studio.sw-fold.menu-open .un-nav-refer + .un-nav-refer { margin-top: 10px; }

.d-studio .un-bar-row > .btn.un-pill { min-height: 46px; padding: 11px 22px; font-size: 16px; }
.d-studio .un-bar-row > .btn.st-fill { background: var(--st-mint); color: var(--st-navy); }
.d-studio .un-bar-row > .btn.st-fill:hover { background: #fff; }
.d-studio .un-bar-row > .btn.st-white + .btn { margin-inline-start: 2px; }
.site.d-studio { --tl-main: var(--st-navy); --tl-accent: var(--st-violet); --tl-ink: var(--st-ink); --tl-soft: var(--st-soft); --tl-line: var(--st-line); --tl-grey: var(--st-tint); --tl-corner: 22px; --tl-tool-fill: #fff; --tl-tool-on: var(--st-navy); }
.d-studio .un-head .tl-tool { width: 42px; height: 42px; color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.d-studio .un-head .tl-tool:hover, .d-studio .un-head .tl-tool[aria-expanded="true"], .d-studio .un-head .tl-tool[aria-pressed="true"] { background: #fff; color: var(--st-navy); box-shadow: none; }
.d-studio .un-head .un-bar-row > .tl-tool:first-of-type { margin-inline-start: 10px; }
.d-studio .un-nav-toggle { background: #fff; color: var(--st-navy); }
/* Folded, the tools and the menu button sit at the right, with whichever header buttons still fit
   (fitButtons in studio.js). A button that stays in the bar leaves the folded menu. */
.d-studio.sw-fold .un-bar-row > .btn:not(.st-keep) { display: none; }
.d-studio.sw-fold .un-bar-row > .btn.st-keep { display: inline-flex; flex-shrink: 0; white-space: nowrap; }
.d-studio.sw-fold .un-bar-row > .st-brand { margin-inline-end: auto; flex-shrink: 0; }
.d-studio.sw-fold .un-nav-refer.st-kept { display: none !important; }
@container site (max-width: 600px) {
  .d-studio .un-head { --st-bar: 92px; --st-gap: 12px; }
  .d-studio .st-brand { gap: 5px; }
  .d-studio .st-brand-v { width: 38px; height: 38px; }
  .d-studio .st-v { width: 26px; height: 26px; }
  .d-studio .st-brand-words b { font-size: 16px; }
  .d-studio .st-brand-words span { font-size: 12.5px; }
  .d-studio .un-bar-row::before { inset: 4px 6px; border-radius: 22px; }
}

/* ---------- Banners ---------- */
.d-studio .st-hero { position: relative; z-index: 2; color: #fff; isolation: isolate; }
.d-studio .st-h1 { font: 800 clamp(40px, 5.4cqi, 76px)/1.06 var(--f-head); letter-spacing: -.025em; text-wrap: balance; }
.d-studio .st-lead { max-width: 640px; margin-top: 24px; font-size: clamp(18px, 1.7cqi, 22px); line-height: 1.55; color: rgba(255, 255, 255, .9); }
.d-studio .st-hero .un-pills { margin-top: 34px; }

/* Home: a deep band with a large soft shape that drifts and leans towards the mouse. */
.d-studio .st-hero-home { padding: calc(var(--head-h, 112px) + clamp(56px, 8cqi, 120px)) 0 clamp(40px, 5cqi, 70px); background: var(--st-navy); overflow: hidden; }
.d-studio .st-hero-blob { position: absolute; z-index: -1; inset: 2% 2.5% 8% 2.5%; width: 95%; height: 90%; overflow: visible; will-change: transform; }
.d-studio .st-hero-home .st-hero-body { display: flex; flex-direction: column; align-items: center; max-width: 1040px; text-align: center; }
.d-studio .st-hero-home .st-lead { margin-inline: auto; }
.d-studio .st-hero-home .un-pills { justify-content: center; }
.d-studio .st-logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: clamp(48px, 7cqi, 96px); }
.d-studio .st-logo-tile { display: grid; place-items: center; width: 200px; height: 96px; padding: 16px 22px; box-sizing: border-box; border-radius: 18px; background: rgba(11, 17, 32, .32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background-color .3s, transform .3s; }
@supports (backdrop-filter: blur(1px)) { .d-studio .st-logo-tile { backdrop-filter: blur(8px); } }
.d-studio a.st-logo-tile:hover { background: rgba(11, 17, 32, .5); transform: translateY(-3px); }
.d-studio .st-logo-tile img { max-width: 150px; max-height: 58px; width: auto; height: auto; object-fit: contain; }

/* Inner pages: a band from the accent colour to the second, with a wavy lower edge. */
.d-studio .st-hero-page { padding: calc(var(--head-h, 112px) + clamp(30px, 4cqi, 60px)) 0 clamp(36px, 4cqi, 56px); background: linear-gradient(90deg, var(--st-violet), var(--st-blue)); }
.d-studio .st-hero-page .st-hero-body { text-align: center; }
.d-studio .st-hero-page :is(.st-lead) { margin-inline: auto; }
.d-studio .st-hero-page .un-pills { justify-content: center; }
.d-studio .st-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 4cqi, 48px); font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .85); text-align: start; }
.d-studio .st-crumbs a { color: inherit; }
.d-studio .st-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.d-studio .st-crumbs [aria-current] { color: #fff; }
.d-studio .st-wave { position: absolute; z-index: -1; top: calc(100% - 1px); left: 0; width: 100%; height: clamp(64px, 10cqi, 150px); overflow: visible; }
.d-studio .st-wave-line { fill: none; stroke: var(--st-wave-line); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; clip-path: inset(-20px 0 -20px 0); transition: clip-path 2.4s cubic-bezier(.45, 0, .2, 1) .3s; }
/* The line is drawn on by uncovering it from the left. (A dashed stroke that does not stretch is
   mis-measured by Chrome and stopped the line short of the right-hand edge.) */
html.motion .d-studio .st-wave:not(.in) .st-wave-line { clip-path: inset(-20px 100% -20px 0); }
/* The section after a wavy banner leaves room for the wave. */
.d-studio .st-hero-page + section, .d-studio .st-hero-page + article, .d-studio .ed-block:has(> .st-hero-page) + .ed-block > section { padding-top: calc(clamp(56px, 8cqi, 104px) + clamp(64px, 10cqi, 150px)); }

/* The article pages' banner: slate, with a taller edge that swings far up and down. The line is drawn
   from beyond one side of the page to beyond the other, so it never seems to stop. */
.d-studio .st-hero-dark { background: var(--st-slate); }
.d-studio .st-hero-dark .st-wave-fill { fill: var(--st-slate); }
.d-studio .st-wave.is-tall { height: clamp(110px, 18cqi, 260px); }
.d-studio .st-wave.is-tall .st-wave-line { stroke-width: 5; }
.d-studio .st-hero-dark + section, .d-studio .st-hero-dark + article, .d-studio .ed-block:has(> .st-hero-dark) + .ed-block > section { padding-top: calc(clamp(24px, 4cqi, 56px) + clamp(110px, 18cqi, 260px)); }
.d-studio .st-bg-main.st-deep { background: var(--st-deeper); }

/* ---------- Service cards ---------- */
.d-studio .st-cards { display: grid; gap: 22px; }
.d-studio .st-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-studio .st-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.d-studio .st-cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.d-studio .st-card { display: flex; flex-direction: column; gap: 14px; padding: 30px 30px 28px; border-radius: var(--st-r); background: #fff; box-shadow: inset 0 0 0 1px var(--st-line), 0 2px 4px rgba(11, 13, 19, .03); color: inherit; text-decoration: none; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.d-studio .st-bg-tint .st-card { box-shadow: 0 2px 4px rgba(11, 13, 19, .04), 0 14px 30px -18px rgba(40, 30, 120, .25); }
.d-studio a.st-card:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--st-lilac), 0 24px 44px -20px rgba(70, 50, 200, .38); }
.d-studio :is(.st-bg-main, .st-bg-accent) .st-card { background: var(--st-night); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); color: #fff; }
.d-studio .st-card-top { display: flex; align-items: center; gap: 18px; }
.d-studio .st-card h3 { font: 800 23px/1.2 var(--f-head); letter-spacing: -.01em; }
.d-studio .st-card p { color: var(--st-soft); font-size: 17.5px; line-height: 1.6; }
.d-studio :is(.st-bg-main, .st-bg-accent) .st-card p { color: rgba(255, 255, 255, .8); }
.d-studio .st-icon { flex-shrink: 0; width: 50px; height: 50px; fill: none; stroke: var(--st-violet); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.d-studio .st-icon .st-i2 { stroke: var(--st-blue); }
.d-studio :is(.st-bg-main, .st-bg-accent) .st-icon { stroke: var(--st-lilac); }
.d-studio :is(.st-bg-main, .st-bg-accent) .st-icon .st-i2 { stroke: var(--st-mint); }
.d-studio .st-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 16.5px; color: var(--st-deep); }
.d-studio :is(.st-bg-main, .st-bg-accent) .st-more { color: #fff; }
.d-studio .st-arrow { width: 18px; height: 18px; transition: transform .3s; }
.d-studio a:hover .st-arrow { transform: translateX(5px); }
[dir="rtl"] .d-studio .st-arrow { scale: -1 1; }
[dir="rtl"] .d-studio a:hover .st-arrow { transform: translateX(-5px); }

/* ---------- Quote beside a soft photo ---------- */
.d-studio .st-quote { overflow: hidden; }
.d-studio .st-quote-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 6cqi, 90px); align-items: center; }
.d-studio .st-quote-row.no-pic { grid-template-columns: minmax(0, 860px); justify-content: center; }
.d-studio .st-quote-mark { display: block; height: .55em; font: 700 110px/1 var(--f-head); color: var(--st-mint); }
.d-studio .st-quote blockquote { margin-top: 12px; font: 600 clamp(20px, 1.9cqi, 25px)/1.5 var(--f-head); letter-spacing: -.005em; }
.d-studio .st-quote blockquote p + p { margin-top: .8em; }
.d-studio .st-quote figcaption { margin-top: 24px; font-weight: 700; font-size: 16.5px; opacity: .92; }
.d-studio .st-quote-act:not(:empty) { margin-top: 32px; }
.d-studio .st-quote.st-bg-tint .st-quote-mark { color: var(--st-violet); }
.d-studio .st-quote-pic svg { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; filter: drop-shadow(0 30px 40px rgba(5, 5, 30, .3)); }
.d-studio .st-quote-pic-edit img { border-radius: 40%; aspect-ratio: 1; object-fit: cover; }

/* ---------- Our work ---------- */
.d-studio .st-work { position: relative; }
.d-studio .st-work-card { position: relative; display: block; overflow: hidden; border-radius: var(--st-r); background: var(--st-night); color: #fff; text-decoration: none; isolation: isolate; transform: translateZ(0); }
.d-studio .st-work-card[hidden] { display: none; }
.d-studio .st-work-img { position: absolute; inset: 0; z-index: -2; }
.d-studio .st-work-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.d-studio a.st-work-card:hover .st-work-img img { transform: scale(1.06); }
.d-studio .st-work-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 8, 22, .55) 0%, rgba(5, 8, 22, 0) 32%, rgba(5, 8, 22, 0) 52%, rgba(5, 8, 22, .78) 100%); }
.d-studio .st-work-logo { position: absolute; top: 20px; inset-inline-start: 22px; display: block; max-width: 46%; }
.d-studio .st-work-logo img { display: block; max-height: 46px; max-width: 100%; width: auto; height: auto; object-fit: contain; object-position: left; }
.d-studio .st-work-words { position: absolute; inset-inline: 22px 78px; bottom: 20px; display: flex; flex-direction: column; gap: 4px; }
.d-studio .st-work-title { font: 800 21px/1.2 var(--f-head); letter-spacing: -.01em; }
.d-studio .st-work-text { font-size: 15.5px; line-height: 1.45; opacity: .9; }
.d-studio .st-work-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.d-studio .st-work-tags span { padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 13px; font-weight: 600; }
@supports (backdrop-filter: blur(1px)) { .d-studio .st-work-tags span { backdrop-filter: blur(6px); } }
.d-studio .st-round { position: absolute; inset-inline-end: 20px; bottom: 20px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--st-navy); transition: transform .35s, background-color .3s; }
.d-studio .st-round svg { width: 15px; height: 15px; }
.d-studio a.st-work-card:hover .st-round { transform: rotate(45deg) scale(1.08); background: var(--st-mint); }
[dir="rtl"] .d-studio .st-round svg { scale: -1 1; }

/* Scattered: cards of different sizes at different heights, as on Giant Digital's home page. */
.d-studio .st-work-scatter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px 28px; align-items: start; }
.d-studio .st-work-scatter .st-work-card { aspect-ratio: 4 / 3; }
.d-studio .st-work-scatter .st-pos-1 { grid-column: 1 / 7; aspect-ratio: 16 / 10; }
.d-studio .st-work-scatter .st-pos-2 { grid-column: 7 / 10; aspect-ratio: 4 / 5; margin-top: 70px; }
.d-studio .st-work-scatter .st-pos-3 { grid-column: 10 / 13; aspect-ratio: 1; margin-top: 10px; }
.d-studio .st-work-scatter .st-pos-4 { grid-column: 2 / 6; aspect-ratio: 5 / 4; margin-top: 10px; }
.d-studio .st-work-scatter .st-pos-5 { grid-column: 6 / 13; aspect-ratio: 16 / 9; margin-top: 60px; }
.d-studio .st-work-scatter .st-pos-6 { grid-column: 3 / 9; aspect-ratio: 16 / 9; }
.d-studio .st-work-scatter .st-pos-2 .st-work-title, .d-studio .st-work-scatter .st-pos-3 .st-work-title { font-size: 19px; }
.d-studio .st-work-scatter .st-pos-2 .st-work-text, .d-studio .st-work-scatter .st-pos-3 .st-work-text { display: none; }
.d-studio .st-work-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: clamp(36px, 5cqi, 60px); }
.d-studio .st-shuffle { display: inline-flex; align-items: center; gap: 10px; padding: 10px 6px; border: 0; background: transparent; color: inherit; font: 700 16.5px/1 var(--f-body); cursor: pointer; }
.d-studio .st-shuffle svg { width: 22px; height: 22px; transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.d-studio .st-shuffle:hover svg { transform: rotate(-200deg); }
.d-studio .st-bg-white .st-shuffle, .d-studio .st-bg-tint .st-shuffle { color: var(--st-deep); }

/* With filters: two cards, then one wide, and so on. */
.d-studio .st-work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.d-studio .st-work-grid .st-work-card { aspect-ratio: 16 / 11; }
.d-studio .st-work-grid .st-work-card.is-wide { grid-column: 1 / -1; aspect-ratio: 21 / 8; }
.d-studio .st-work-grid .st-work-title { font-size: 24px; }
.d-studio .st-filters { display: grid; gap: 14px; margin-bottom: 36px; }
.d-studio .st-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.d-studio .st-filter-label { margin-inline-end: 6px; font-size: 15px; font-weight: 700; color: var(--st-soft); }
.d-studio .st-filter-row { row-gap: 8px; }
/* A real border, not a drawn shadow: iPhones left the shadow off, so the buttons looked like loose words. */
.d-studio .st-filter { -webkit-appearance: none; appearance: none; padding: 7.5px 16.5px; border: 1.5px solid var(--st-pill); border-radius: 999px; background: transparent; color: var(--st-ink); font: 700 15.5px/1.2 var(--f-body); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.d-studio .st-filter:hover { border-color: var(--st-violet); }
.d-studio .st-filter[aria-pressed="true"] { background: var(--st-violet); border-color: var(--st-violet); color: #fff; }
.d-studio .st-bg-main .st-filter { color: #fff; border-color: rgba(255, 255, 255, .45); }
.d-studio .st-bg-main .st-filter[aria-pressed="true"] { background: var(--st-mint); border-color: var(--st-mint); color: var(--st-navy); }
.d-studio .st-bg-main .st-filter-label { color: rgba(255, 255, 255, .75); }
.d-studio .st-filter-count { font-size: 15px; color: var(--st-soft); }
.d-studio .st-bg-main .st-filter-count { color: rgba(255, 255, 255, .7); }
@keyframes st-pop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.d-studio .st-work-card.st-pop { animation: st-pop .55s cubic-bezier(.2, .7, .2, 1) both; }

/* ---------- Points in a soft shape ---------- */
.d-studio .st-band { position: relative; overflow: hidden; padding-block: clamp(70px, 9cqi, 130px); background: var(--st-tint); }
.d-studio .st-band-shape { position: absolute; inset-block: -16%; inset-inline-start: -6%; width: 54%; }
.d-studio .st-band.flip .st-band-shape { inset-inline-start: auto; inset-inline-end: -6%; }
.d-studio .st-band-shape svg { width: 100%; height: 100%; }
.d-studio .st-band-fill { fill: var(--st-violet); }
.d-studio .st-band-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 8cqi, 120px); align-items: center; }
.d-studio .st-band.flip .st-band-points { order: 2; }
.d-studio .st-band-points { display: grid; gap: 30px; justify-items: center; color: #fff; text-align: center; }
.d-studio .st-band-points strong { display: block; font: 800 clamp(26px, 2.8cqi, 38px)/1.1 var(--f-head); letter-spacing: -.02em; }
.d-studio .st-band-points span { display: block; margin-top: 4px; font-size: 16.5px; opacity: .88; }
.d-studio .st-band .btn.st-white { background: var(--st-navy); color: #fff; }
.d-studio .st-band .btn.st-white:hover { background: var(--st-violet); }
.d-studio .st-band .un-pills, .d-studio .st-band .btn { margin-top: 28px; }

/* ---------- Words beside a picture ---------- */
.d-studio .st-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6cqi, 90px); align-items: center; }
.d-studio .st-split.flip .st-split-copy { order: 2; }
.d-studio .st-split.no-pic { grid-template-columns: minmax(0, 820px); }
.d-studio .st-split-copy .st-prose { margin-top: 20px; }
.d-studio .st-split-copy .un-pills { margin-top: 30px; }
.d-studio .st-split-pic { position: relative; }
.d-studio .st-blob-pic { position: relative; z-index: 1; display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; }
.d-studio .st-blob-ring { position: absolute; inset: -4% 0 0; width: 100%; max-width: 560px; height: auto; margin-inline: auto; overflow: visible; pointer-events: none; }
.d-studio .st-ring { fill: none; stroke: var(--st-mint); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.d-studio .st-plain { overflow: hidden; border-radius: var(--st-r); }
.d-studio .st-plain img { width: 100%; height: auto; }
.d-studio .st-frame { position: relative; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 2px 4px rgba(11, 13, 19, .06), 0 40px 70px -30px rgba(30, 20, 110, .45); }
.d-studio :is(.st-bg-main, .st-bg-accent) .st-frame { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.d-studio .st-frame-bar { display: flex; gap: 7px; padding: 12px 14px; background: #EEEDF5; }
.d-studio .st-frame-bar i { width: 11px; height: 11px; border-radius: 50%; background: #CFCCE0; }
.d-studio .st-frame-bar i:first-child { background: #F59A8F; }
.d-studio .st-frame-bar i:nth-child(2) { background: #F5D07F; }
.d-studio .st-frame-bar i:nth-child(3) { background: #8FD9A8; }
.d-studio .st-frame img { width: 100%; height: auto; }
.d-studio .st-phone { overflow: hidden; width: min(270px, 72%); margin-inline: auto; border: 9px solid #12141f; border-radius: 34px; background: #12141f; box-shadow: 0 40px 70px -30px rgba(30, 20, 110, .5); }
.d-studio .st-phone img { width: 100%; height: auto; border-radius: 25px; }
.d-studio .st-phone-front { position: absolute; z-index: 2; inset-inline-end: -3%; bottom: -12%; width: 27%; border-width: 6px; border-radius: 24px; }
.d-studio .st-phone-front img { border-radius: 18px; }
html.motion .d-studio .st-pic-frame .st-phone-front, html.motion .d-studio .st-case-shots .st-phone-front { animation: st-float 7s ease-in-out infinite; }
@keyframes st-float { 50% { transform: translateY(-12px); } }
.d-studio .st-points { display: grid; gap: 12px; margin-top: 24px; }
.d-studio .st-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 17.5px; line-height: 1.5; }
.d-studio .st-tick { flex-shrink: 0; width: 26px; height: 26px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: var(--st-tint); color: var(--st-violet); }
.d-studio .st-bg-tint .st-tick { background: #fff; }
.d-studio :is(.st-bg-main, .st-bg-accent) .st-tick { background: rgba(255, 255, 255, .12); color: var(--st-mint); }
.d-studio .st-points-edit { white-space: pre-line; }

/* ---------- Prices side by side ---------- */
.d-studio .st-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1040px; margin-inline: auto; align-items: stretch; }
.d-studio .st-plan { position: relative; display: flex; flex-direction: column; padding: 36px 34px 32px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--st-line), 0 18px 40px -26px rgba(40, 30, 120, .3); }
.d-studio .st-plan.is-featured { background: var(--st-navy); color: #fff; box-shadow: 0 30px 60px -24px rgba(70, 50, 220, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.d-studio .st-plan.is-featured::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--st-violet) 45%, transparent), transparent 70%); pointer-events: none; }
.d-studio .st-plan > * { position: relative; z-index: 1; }
.d-studio .st-plan-flag { position: absolute; top: -14px; inset-inline-start: 34px; padding: 6px 14px; border-radius: 999px; background: var(--st-mint); color: var(--st-navy); font-size: 13.5px; font-weight: 800; letter-spacing: .02em; }
.d-studio .st-plan-name { font: 800 24px/1.2 var(--f-head); }
.d-studio .st-plan-price { margin-top: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.d-studio .st-plan-price strong { font: 800 clamp(44px, 4.4cqi, 58px)/1 var(--f-head); letter-spacing: -.03em; }
.d-studio .st-plan-price span { font-size: 17px; color: var(--st-soft); }
.d-studio .st-plan.is-featured .st-plan-price span { color: rgba(255, 255, 255, .75); }
.d-studio .st-plan-note { margin-top: 8px; font-size: 15.5px; font-weight: 700; color: var(--st-deep); }
.d-studio .st-plan.is-featured .st-plan-note { color: var(--st-mint); }
.d-studio .st-plan-text { margin-top: 16px; font-size: 17px; color: var(--st-soft); }
.d-studio .st-plan.is-featured .st-plan-text { color: rgba(255, 255, 255, .82); }
.d-studio .st-plan .st-points { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--st-line); }
.d-studio .st-plan.is-featured .st-points { border-top-color: rgba(255, 255, 255, .14); }
.d-studio .st-plan.is-featured .st-tick { background: rgba(255, 255, 255, .12); color: var(--st-mint); }
.d-studio .st-plan .st-points li { font-size: 16.5px; }
.d-studio .st-plan-go { margin-top: auto; padding-top: 30px; }
.d-studio .st-plan-go .btn { width: 100%; box-sizing: border-box; }
.d-studio .st-plan.is-featured .btn.st-fill { background: var(--st-mint); color: var(--st-navy); }
.d-studio .st-plan.is-featured .btn.st-fill:hover { background: #fff; }

/* ---------- Rates in rows ---------- */
.d-studio .st-rates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(30px, 6cqi, 90px); align-items: start; }
.d-studio .st-rates.st-rates-top { grid-template-columns: minmax(0, 760px); justify-content: center; }
.d-studio .st-rates .st-head { margin-bottom: 0; }
.d-studio .st-rate-rows { border-top: 2px solid var(--st-ink); }
.d-studio .st-bg-main .st-rate-rows { border-top-color: #fff; }
.d-studio .st-rate-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 17px 2px; border-bottom: 1px solid var(--st-line); font-size: 18px; }
.d-studio .st-bg-main .st-rate-rows li { border-bottom-color: rgba(255, 255, 255, .14); }
.d-studio .st-rate-rows strong { flex-shrink: 0; font: 800 20px/1.2 var(--f-head); color: var(--st-deep); }
.d-studio .st-bg-main .st-rate-rows strong { color: var(--st-mint); }
.d-studio .st-rates .st-small { margin: 18px 0 0; text-align: start; }

/* ---------- Steps, joined by a line that draws itself ---------- */
.d-studio .st-steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 34px 28px; counter-reset: st; }
.d-studio .st-steps::before { content: ""; position: absolute; top: 27px; inset-inline: 30px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--st-violet), var(--st-blue), var(--st-mint)); transform-origin: left; transition: transform 2s cubic-bezier(.45, 0, .2, 1) .2s; }
[dir="rtl"] .d-studio .st-steps::before { transform-origin: right; }
html.motion .d-studio .st-steps:not(.in)::before { transform: scaleX(0); }
.d-studio .st-step { position: relative; }
.d-studio .st-step-n { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--st-violet), var(--st-blue)); color: #fff; font: 800 22px/1 var(--f-head); box-shadow: 0 0 0 7px #fff; }
.d-studio .st-bg-tint .st-step-n { box-shadow: 0 0 0 7px var(--st-tint); }
.d-studio .st-bg-main .st-step-n { box-shadow: 0 0 0 7px var(--st-navy); }
.d-studio .st-step h3 { font: 800 21px/1.25 var(--f-head); }
.d-studio .st-step p { margin-top: 8px; font-size: 17px; color: var(--st-soft); }
.d-studio .st-bg-main .st-step p { color: rgba(255, 255, 255, .8); }
.d-studio .st-step .st-step-time { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--st-deep); }
.d-studio .st-bg-main .st-step .st-step-time { color: var(--st-mint); }

/* ---------- Questions that open ---------- */
.d-studio .st-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(30px, 6cqi, 90px); align-items: start; }
.d-studio .st-faq .st-head { margin-bottom: 0; }
.d-studio .st-fold { border-bottom: 1px solid var(--st-line); }
.d-studio .st-fold:first-child { border-top: 1px solid var(--st-line); }
.d-studio .st-fold-q { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 2px; font: 700 19.5px/1.35 var(--f-head); cursor: pointer; list-style: none; }
.d-studio .st-fold-q::-webkit-details-marker { display: none; }
.d-studio .st-fold-q:hover { color: var(--st-deep); }
.d-studio .st-plus { position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--st-tint); transition: transform .3s, background-color .3s; }
.d-studio .st-plus::before, .d-studio .st-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px; border-radius: 2px; background: var(--st-violet); }
.d-studio .st-plus::after { transform: rotate(90deg); transition: transform .3s; }
.d-studio .st-fold[open] .st-plus { background: var(--st-violet); }
.d-studio .st-fold[open] .st-plus::before { background: #fff; }
.d-studio .st-fold[open] .st-plus::after { transform: rotate(0); background: #fff; }
.d-studio .st-fold .st-prose { padding: 0 2px 26px; }

/* ---------- A call to action in a soft shape (in a block and in the footer) ---------- */
.d-studio .st-cta-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(30px, 6cqi, 90px); align-items: center; }
.d-studio .st-cta-row.alone { grid-template-columns: minmax(0, 600px); justify-content: center; }
.d-studio .st-cta, .d-studio .st-foot-cta { position: relative; display: grid; place-items: center; min-height: 460px; padding: 70px 13%; box-sizing: border-box; text-align: center; color: var(--st-navy); isolation: isolate; }
.d-studio :is(.st-cta, .st-foot-cta) :is(.st-cta-shape, .st-cta-ring) { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.d-studio :is(.st-cta, .st-foot-cta) .st-cta-ring { inset: -3% -2% -2% -4%; width: 106%; height: 105%; z-index: -2; }
.d-studio .st-cta-fill { fill: var(--st-lilac); }
.d-studio :is(.st-cta, .st-foot-cta) .st-ring { stroke: var(--st-violet); stroke-width: 2; }
.d-studio .st-foot-cta .st-ring { stroke: var(--st-mint); }
.d-studio .st-cta-body { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.d-studio .st-cta-mark { width: 92px; height: 92px; padding: 18px; box-sizing: border-box; border-radius: 50%; background: #fff; box-shadow: 0 10px 24px -10px rgba(20, 10, 80, .45); }
.d-studio .st-cta-mark path { fill: var(--st-violet); }
.d-studio .st-cta-mark .st-v2 { fill: var(--st-blue); }
.d-studio .st-cta-h { font: 800 clamp(26px, 2.6cqi, 34px)/1.15 var(--f-head); letter-spacing: -.015em; color: var(--st-navy); }
.d-studio .st-cta-h .st-hand { color: var(--st-navy); }
.d-studio .st-cta-body p { font-size: 17.5px; line-height: 1.55; color: color-mix(in srgb, var(--st-navy) 82%, transparent); }
.d-studio .st-cta-body .un-pills { justify-content: center; margin-top: 8px; }
.d-studio .st-cta-body .btn.st-line { color: var(--st-navy); box-shadow: inset 0 0 0 2px var(--st-navy); }
.d-studio .st-cta-body .btn.st-line:hover { background: var(--st-navy); color: #fff; }
.d-studio .st-cta-body .btn.st-white { background: var(--st-navy); color: #fff; }
.d-studio .st-cta-body .btn.st-white:hover { background: var(--st-violet); }
.d-studio .st-cta-aside { font-size: 19px; }

/* ---------- A project's story ---------- */
.d-studio .st-case { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(36px, 6cqi, 90px); align-items: start; }
.d-studio .st-facts { position: sticky; top: calc(var(--head-h, 112px) + 20px); padding: 28px; border-radius: var(--st-r); background: var(--st-tint); }
.d-studio .st-facts dl { margin: 0; }
.d-studio .st-facts dl > div + div { margin-top: 18px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--st-violet) 18%, transparent); }
.d-studio .st-facts dt { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--st-deep); }
.d-studio .st-facts dd { margin: 4px 0 0; font-size: 17.5px; font-weight: 600; line-height: 1.45; }
.d-studio .st-facts .btn { margin-top: 24px; width: 100%; box-sizing: border-box; }
.d-studio .st-case-copy .st-prose { margin-top: 22px; }
.d-studio .st-case-shots { position: relative; width: min(100%, 1080px); margin: clamp(56px, 8cqi, 100px) auto 40px; }
.d-studio .st-case-shots .st-phone-front { width: 22%; inset-inline-end: -2%; bottom: -8%; }

/* ---------- Words ---------- */
.d-studio .st-text { max-width: 860px; }
.d-studio .st-text .st-prose { margin-top: 22px; }

/* ---------- Blog cards (Union's news list) and a post's own page ---------- */
.d-studio .un-post-cards { gap: 26px; }
.d-studio .un-post-card { overflow: hidden; border-radius: var(--st-r); background: #fff; box-shadow: inset 0 0 0 1px var(--st-line), 0 18px 40px -28px rgba(40, 30, 120, .35); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.d-studio .st-bg-tint .un-post-card, .d-studio .un-bg-grey .un-post-card { box-shadow: 0 18px 40px -26px rgba(40, 30, 120, .35); }
.d-studio a.un-post-card:hover { transform: translateY(-5px); }
.d-studio .un-post-card .un-card-img { aspect-ratio: 16 / 10; border-radius: 0; background: var(--st-tint); }
.d-studio .un-post-card :is(time, h3, p) { padding-inline: 26px; }
.d-studio .un-post-card time { margin-top: 22px; font-size: 14.5px; font-weight: 700; color: var(--st-deep); }
.d-studio .un-post-card h3 { font: 800 22px/1.25 var(--f-head); letter-spacing: -.01em; }
.d-studio .un-post-card p { padding-bottom: 28px; }
.d-studio a.un-post-card:hover h3 { text-decoration: none; color: var(--st-deep); }
.d-studio .un-mark { background: linear-gradient(120deg, var(--st-violet), var(--st-blue)); }

/* ---------- Articles: the list and each article, after Giant Digital ---------- */
.d-studio .st-articles .st-filters { margin-bottom: clamp(28px, 4cqi, 48px); }
.d-studio .st-art-grid { column-count: 3; column-gap: 26px; }
.d-studio .st-art { display: block; width: 100%; box-sizing: border-box; break-inside: avoid; margin: 0 0 26px; overflow: hidden; border-radius: var(--st-r); background: var(--st-card); color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .3s; }
.d-studio a.st-art:hover { transform: translateY(-5px); background: color-mix(in srgb, var(--st-card) 88%, #fff); }
.d-studio .st-art[hidden] { display: none; }
.d-studio .st-art.st-pop { animation: st-pop .55s cubic-bezier(.2, .7, .2, 1) both; }
.d-studio .st-art-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--st-night); }
.d-studio .st-art-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.d-studio a.st-art:hover .st-art-img img { transform: scale(1.04); }
.d-studio .st-art-body { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 24px; }
.d-studio .st-art-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14.5px; color: rgba(255, 255, 255, .78); }
.d-studio .st-art-meta b { font-weight: 700; color: #fff; }
.d-studio .st-art-meta i { font-style: normal; opacity: .55; }
.d-studio .st-art-title { font: 800 21px/1.3 var(--f-head); letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.d-studio .st-art-sum { font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.d-studio .st-art .st-art-more-link { margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); color: #fff; }
.d-studio .st-art-count { margin-top: 8px; text-align: end; }
.d-studio .st-empty { text-align: center; color: rgba(255, 255, 255, .8); }
/* The pills over the cards: white outlines on the dark page, the chosen one filled. */
.d-studio .st-articles .st-filter { color: #fff; border-color: rgba(255, 255, 255, .55); }
.d-studio .st-articles .st-filter:hover { border-color: #fff; }
.d-studio .st-articles .st-filter[aria-pressed="true"] { background: var(--st-mint); border-color: var(--st-mint); color: var(--st-navy); }
/* The page ends on its dark band, and the footer's own wave rises out of it. */
.d-studio main:has(> .st-deep:last-child) + .st-foot, .d-studio main:has(> .ed-block:last-child > .st-deep) + .st-foot { margin-top: 0; }
.d-studio .st-articles.st-deep { padding-bottom: clamp(90px, 10cqi, 150px); }
/* The list of articles sits on the site's own purple under the slate banner, with dark cards on it,
   and is as wide as Giant Digital's (1440px of cards between side gaps). */
.d-studio .st-articles.st-deep { background: var(--st-violet); --st-card: var(--st-night); }
.d-studio .st-articles > .un-wrap { max-width: calc(1440px + 2 * var(--gutter)); }
.d-studio .st-art-grid { column-gap: 27px; }
.d-studio .st-art { margin-bottom: 27px; }

/* An article: its title beside no picture, who wrote it, then a narrow column of words. */
.d-studio .st-hero-post .st-hero-body { text-align: start; }
.d-studio .st-hero-dark { padding-bottom: clamp(8px, 1.5cqi, 24px); }
.d-studio .st-hero-post .st-crumbs { margin-bottom: clamp(18px, 2.6cqi, 34px); }
.d-studio .st-crumb-now { overflow: hidden; max-width: 22ch; color: #fff; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.d-studio .st-hero-post .st-hero-body > .st-post-head { max-width: 820px; margin-inline: auto; }
.d-studio .st-post-head .st-h1 { font-size: clamp(34px, 4.2cqi, 56px); }
.d-studio .st-post-head .st-lead { max-width: none; margin-top: 22px; margin-inline: 0; font-size: clamp(18px, 1.6cqi, 21px); }
.d-studio .st-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 22px; font-size: 17px; color: #fff; }
.d-studio .st-by-av { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: #fff; line-height: 0; }
.d-studio .st-by-av img { width: 100%; height: 100%; object-fit: cover; }
.d-studio .st-by-v { width: 28px; height: 28px; margin-top: 2px; }
.d-studio .st-by-v path { fill: var(--st-violet); stroke: var(--st-violet); stroke-width: 2.4; stroke-linejoin: round; }
.d-studio .st-by-v .st-v2 { fill: var(--st-blue); stroke: var(--st-blue); }
.d-studio .st-by time { margin-inline-start: 10px; color: rgba(255, 255, 255, .88); }
.d-studio .st-tag { margin-top: 26px; font-size: 15px; color: rgba(255, 255, 255, .72); }
.d-studio .st-article { max-width: calc(820px + 2 * var(--gutter)); }
.d-studio .st-article-pic { margin-bottom: 40px; }
.d-studio .st-article .st-prose { font-size: 19px; line-height: 1.7; color: rgba(255, 255, 255, .92); }
.d-studio .st-article .st-prose h2, .d-studio .st-article .st-prose h3 { margin-top: 1.6em; font: 800 26px/1.25 var(--f-head); color: #fff; }
.d-studio .st-article .st-prose a { text-decoration-color: var(--st-mint); }
.d-studio .st-article .st-prose li::marker { color: var(--st-mint); }
/* It follows the dark article on a different colour, so it keeps a section's usual space above its heading. */
.d-studio .st-art-more { padding-top: clamp(56px, 8cqi, 104px); }
.d-studio .st-art-more .st-h2 { margin-bottom: 0; }

/* ---------- Footer ---------- */
.d-studio .st-foot { position: relative; margin-top: clamp(50px, 6cqi, 90px); padding: 30px 0 34px; background: var(--st-navy); color: #fff; }
.d-studio .st-foot-wave { position: absolute; bottom: calc(100% - 1px); left: 0; width: 100%; height: clamp(40px, 6cqi, 90px); }
.d-studio .st-foot-wave path { fill: var(--st-navy); }
.d-studio .st-foot-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; align-items: stretch; }
.d-studio .st-foot-card { padding: 34px 32px; border-radius: 24px; background: var(--st-night); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.d-studio .st-foot-talk h2 { font: 800 30px/1.15 var(--f-head); letter-spacing: -.015em; }
.d-studio .st-foot-talk p { margin-top: 14px; font-size: 17px; color: rgba(255, 255, 255, .82); }
.d-studio .st-foot-contact { display: flex; flex-wrap: wrap; gap: 6px 12px; font-weight: 700; }
.d-studio .st-foot-contact a { color: #fff; text-decoration: underline; text-decoration-color: var(--st-mint); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.d-studio .st-foot-contact span { opacity: .4; }
.d-studio .st-foot-small { font-size: 15px; }
.d-studio .st-foot .sw-social { margin-top: 22px; }
.d-studio .st-foot .sw-social a { color: #fff; }
.d-studio .st-foot-links ul { columns: 2; column-gap: 24px; }
.d-studio .st-foot-links li { break-inside: avoid; }
.d-studio .st-foot-links a { display: inline-block; padding: 7px 0; line-height: 1.22; font-size: 16.5px; font-weight: 600; color: rgba(255, 255, 255, .88); }
.d-studio .st-foot-links a:hover { color: var(--st-mint); }
.d-studio .st-foot-cta { min-height: 380px; padding: 54px 15%; }
.d-studio .st-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14.5px; color: rgba(255, 255, 255, .78); }
.d-studio .st-foot-small-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.d-studio .st-foot-small-links a, .d-studio .st-foot-small-links button { color: inherit; }
.d-studio .st-foot-small-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Cookie settings is a button, underlined by the shared tools; here it matches the links beside it. */
.d-studio .st-foot-small-links .tl-cookie-link { margin: 0; text-decoration: none; }
.d-studio .st-foot-small-links .tl-cookie-link:hover { color: #fff; text-decoration: underline; }

/* ---------- Forms, in Veaivo's colours ---------- */
.x-studio .btn.sw-navy { border-radius: 999px; background: var(--st-violet); color: #fff; }
.x-studio .btn.sw-navy:hover { background: var(--st-blue); }
.x-studio .sw-modal-panel { border-radius: 24px; }
/* The form: no small capitals over the title, plain headings over each part, and lighter labels. */
.x-studio .sw-modal .sw-label { display: none; }
.x-studio .sw-modal h2 { font-weight: 800; letter-spacing: -.02em; }
.x-studio .sw-modal legend { font: 700 19px/1.3 var(--f-head); letter-spacing: -.01em; text-transform: none; color: var(--st-ink); }
.x-studio .sw-modal label { font-weight: 500; }
.x-studio .sw-modal .sw-choice span { font-weight: 400; }

/* ---------- Narrower pages ---------- */
@container site (max-width: 1100px) {
  .d-studio .st-cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-studio .st-foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .d-studio .st-foot-cta { grid-column: 1 / -1; min-height: 360px; max-width: 620px; width: 100%; margin-inline: auto; }
}
@container site (max-width: 900px) {
  .d-studio .st-cards.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-studio :is(.st-split, .st-quote-row, .st-band-row, .st-rates, .st-faq, .st-cta-row, .st-case) { grid-template-columns: minmax(0, 1fr); }
  .d-studio .st-split.flip .st-split-copy, .d-studio .st-band.flip .st-band-points { order: 0; }
  .d-studio .st-split-pic { max-width: 560px; width: 100%; margin-inline: auto; }
  .d-studio .st-band-shape { inset: 0 -20% auto; width: 140%; height: 56%; }
  .d-studio .st-band-row { gap: 70px; }
  .d-studio .st-band-points { padding-block: 10px; }
  .d-studio .st-facts { position: static; }
  .d-studio .st-work-scatter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .d-studio .st-work-scatter .st-work-card { grid-column: auto !important; margin-top: 0 !important; aspect-ratio: 4 / 3 !important; }
  .d-studio .st-work-scatter .st-work-card:nth-child(3n + 1) { grid-column: 1 / -1 !important; aspect-ratio: 16 / 9 !important; }
  .d-studio .st-work-grid .st-work-card.is-wide { aspect-ratio: 16 / 8; }
  .d-studio .st-art-grid { column-count: 2; }
  .d-studio .st-quote-pic svg { max-width: 380px; }
}
@container site (max-width: 640px) {
  .d-studio :is(.st-cards.cols-2, .st-cards.cols-3, .st-cards.cols-4, .st-work-grid, .st-foot-grid) { grid-template-columns: minmax(0, 1fr); }
  .d-studio .st-art-grid { column-count: 1; }
  .d-studio .st-work-scatter { grid-template-columns: minmax(0, 1fr); }
  .d-studio .st-work-scatter .st-work-card { aspect-ratio: 4 / 3 !important; }
  .d-studio .st-work-grid .st-work-card, .d-studio .st-work-grid .st-work-card.is-wide { grid-column: auto; aspect-ratio: 4 / 3; }
  .d-studio .st-card { padding: 26px 22px; }
  .d-studio .st-hero-blob { inset: 4% -30% 10%; width: 160%; }
  .d-studio .st-logo-row { gap: 10px; }
  .d-studio .st-logo-tile { width: calc(50% - 5px); height: 80px; }
  .d-studio .st-logo-tile img { max-width: 120px; max-height: 46px; }
  .d-studio .st-plan { padding: 32px 24px 28px; }
  .d-studio .st-cta, .d-studio .st-foot-cta { min-height: 400px; padding: 60px 12%; }
  .d-studio .st-foot-links ul { columns: 1; }
  .d-studio .st-case-shots .st-phone-front { width: 30%; }
  .d-studio .st-filters { gap: 10px; }
  .d-studio .st-filter { padding: 6.5px 12.5px; font-size: 14.5px; }
}

/* ---------- High contrast, chosen in the header panel ---------- */
html.a11y-contrast .site.d-studio { --st-lilac: #fff; --st-soft: #1d1f27; --st-line: #0B0D13; --st-pill: #0B0D13; }
html.a11y-contrast .d-studio :is(.st-hero-home, .st-hero-page, .st-bg-accent, .st-bg-main, .st-foot) { background: #000; }
html.a11y-contrast .d-studio .st-hero-blob { opacity: .35; }
html.a11y-contrast .d-studio .st-wave-fill, html.a11y-contrast .d-studio .st-foot-wave path { fill: #000; }
html.a11y-contrast .d-studio .st-work-card::after { background: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .9)); }
html.a11y-contrast .d-studio :is(.st-card, .st-plan, .un-post-card) { box-shadow: inset 0 0 0 2px #000; }
html.a11y-contrast .d-studio .st-hero-dark { background: #000; }
html.a11y-contrast .d-studio .st-art { background: #000; box-shadow: inset 0 0 0 2px #fff; }
html.a11y-contrast .d-studio .st-band { background: #fff; }
html.a11y-contrast .d-studio .st-band-fill { fill: #000; }

/* ---------- A moving row of photos ---------- */
.d-studio .st-reel { --gap: clamp(22px, 3cqi, 48px); overflow: hidden; padding: 6px 0 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.d-studio .st-reel-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
/* Each photo carries its own gap, so the two copies of the row are exactly half the track each. */
.d-studio .st-reel-item { flex: 0 0 auto; width: clamp(210px, 21cqi, 290px); margin-inline-end: var(--gap); text-align: center; }
.d-studio .st-reel-pic { display: block; width: 100%; aspect-ratio: 1; height: auto; }
.d-studio .st-reel-pic-edit img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 46%; }
.d-studio .st-reel-item b { display: block; margin-top: 18px; font: 800 19px/1.3 var(--f-head); }
.d-studio .st-reel-item span { display: block; max-width: 250px; margin: 6px auto 0; font-size: 16px; line-height: 1.5; color: var(--st-soft); }
.d-studio :is(.st-bg-main, .st-bg-accent) .st-reel-item span { color: rgba(255, 255, 255, .78); }
html.motion .d-studio .st-reel:not(.is-edit) .st-reel-track { animation: st-reel calc(var(--n, 6) * 7s) linear infinite; }
html.motion .d-studio [dir="rtl"] .st-reel:not(.is-edit) .st-reel-track, html.motion [dir="rtl"] .d-studio .st-reel:not(.is-edit) .st-reel-track { animation-name: st-reel-rtl; }
.d-studio .st-reel:is(:hover, :focus-within) .st-reel-track { animation-play-state: paused; }
@keyframes st-reel { to { transform: translateX(-50%); } }
@keyframes st-reel-rtl { to { transform: translateX(50%); } }
/* Standing still, the row can be scrolled, and its copy is not shown. */
html:not(.motion) .d-studio .st-reel, .d-studio .st-reel.is-edit { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; }
html:not(.motion) .d-studio .st-reel-item[aria-hidden], .d-studio .st-reel.is-edit .st-reel-item[aria-hidden] { display: none; }
html:not(.motion) .d-studio .st-reel-track, .d-studio .st-reel.is-edit .st-reel-track { padding-inline: var(--gutter); }
html:not(.motion) .d-studio .st-reel-item { scroll-snap-align: center; }

/* Sections of words one after another, as on the terms page, sit closer together. */
.d-studio .st-text-sec + .st-text-sec, .d-studio .ed-block:has(> .st-text-sec) + .ed-block > .st-text-sec { padding-top: 0; }

/* ---------- Interactive blocks: a countdown, what your gift does, and a check with a score ---------- */
/* A countdown: the words on one side, the days, hours and minutes in a dark rounded box on the other. */
.d-studio .st-count { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5cqi, 80px); align-items: center; }
.d-studio .st-count-box { padding: clamp(30px, 4cqi, 48px); border-radius: var(--st-r); background: var(--st-navy); color: #fff; text-align: center; }
.d-studio .st-bg-main .st-count-box { background: var(--st-night); }
.d-studio .st-count-cells { display: flex; justify-content: center; gap: clamp(14px, 3cqi, 40px); margin: 0; }
.d-studio .st-count-cells[hidden], .d-studio .st-count-msg[hidden] { display: none; }
.d-studio .st-count-cell { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.d-studio .st-count-cell b { font: 800 clamp(46px, 6.4cqi, 88px)/1 var(--f-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.d-studio .st-count-cell span { margin-top: 10px; font: 700 14px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--st-mint); }
.d-studio .st-count-msg { margin: 0; font: 800 clamp(26px, 3cqi, 38px)/1.2 var(--f-head); color: #fff; text-wrap: balance; }
.d-studio .st-count-date { margin: 22px 0 0; font-size: 17px; color: rgba(255, 255, 255, .8); }
.d-studio .st-count-box .btn { margin-top: 26px; }

/* What your gift does: a white card with the slider on one side and what it buys on the other. */
.d-studio .st-give { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4cqi, 60px); max-width: 1080px; margin-inline: auto; padding: clamp(28px, 4cqi, 50px); border-radius: var(--st-r); background: #fff; color: var(--st-ink); box-shadow: inset 0 0 0 1px var(--st-line), 0 24px 60px -34px rgba(11, 13, 19, .35); }
.d-studio .st-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--st-tint); box-shadow: inset 0 0 0 1px var(--st-line); }
.d-studio .st-seg button { min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--st-ink); font: 700 16px/1.2 var(--f-body); cursor: pointer; }
.d-studio .st-seg button[aria-pressed="true"] { background: var(--st-violet); color: #fff; }
.d-studio .st-seg button:focus-visible, .d-studio .st-give-range:focus-visible { outline: 3px solid var(--st-violet); outline-offset: 3px; }
.d-studio .st-give-amt { margin: 26px 0 6px; font: 800 clamp(48px, 5.4cqi, 68px)/1 var(--f-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.d-studio .st-give-amt span { font: 600 19px/1 var(--f-body); letter-spacing: 0; color: var(--st-soft); }
.d-studio .st-give-label { display: block; margin: 18px 0 8px; font-size: 16px; font-weight: 600; color: var(--st-soft); }
.d-studio .st-give-range { width: 100%; height: 28px; margin: 0; accent-color: var(--st-violet); cursor: pointer; }
.d-studio .st-give-go { margin-top: 24px; }
.d-studio .st-give-out { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(24px, 3cqi, 36px); border-radius: calc(var(--st-r) - 4px); background: var(--st-tint); }
.d-studio .st-give-line { margin: 0; font: 800 clamp(22px, 2.3cqi, 30px)/1.3 var(--f-head); letter-spacing: -.01em; text-wrap: balance; }
.d-studio .st-give-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 34px; }
.d-studio .st-give-icons svg { width: 32px; height: 32px; fill: none; stroke: var(--st-violet); stroke-width: 1.8; stroke-linejoin: round; }
.d-studio .st-give-icons .st-give-fill { fill: var(--st-violet); fill-opacity: .2; }
.d-studio .st-give-icons svg.is-part { opacity: .45; stroke-dasharray: 2.5 2; }
.d-studio .st-give-more { margin-inline-start: 6px; font-size: 16px; font-weight: 700; color: var(--st-deep); }
html:not(.js) .d-studio :is(.st-seg, .st-give-range, .st-give-label) { display: none; }

/* A quick check with a score: an invitation with a dial beside it, and the check itself in a white card
   on the page or in a window, after the Veracross check: large answer cards, a thin bar along the top,
   calm spacing and a big dial. */
.d-studio .st-check-invite { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5cqi, 72px); align-items: center; max-width: 1080px; margin-inline: auto; padding: clamp(30px, 4.4cqi, 60px); border-radius: var(--st-r); background: #fff; box-shadow: inset 0 0 0 1px var(--st-line), 0 24px 60px -34px rgba(11, 13, 19, .35); }
.d-studio .st-check-invite .st-h2 { color: var(--st-ink); }
.d-studio .st-check-invite .st-intro { color: var(--st-soft); }
.d-studio .st-check-invite .st-hand { color: var(--st-violet); }
.d-studio .st-check-pic { padding: 26px 22px 18px; border-radius: 46% 54% 50% 50% / 56% 50% 50% 44%; background: var(--st-tint); }
.d-studio .st-check-card { max-width: 780px; margin-inline: auto; padding: clamp(26px, 4cqi, 44px); border-radius: var(--st-r); background: #fff; color: var(--st-ink); box-shadow: inset 0 0 0 1px var(--st-line), 0 24px 60px -34px rgba(11, 13, 19, .35); }
.d-studio .st-check-list { margin: 0; padding-inline-start: 1.3em; font-size: 18px; line-height: 1.6; }
.d-studio .st-check-list li + li { margin-top: .5em; }
.d-studio .st-check-list[hidden], .d-studio .st-check-flow[hidden] { display: none; }
.d-studio .st-check-edit ol { margin: 0 0 24px; padding-inline-start: 1.3em; }
.d-studio .st-check-edit li + li { margin-top: 16px; }
.d-studio .st-check-note { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-soft); }
.d-studio .st-check-q { font-weight: 700; }
.d-studio .st-check-fix { font-size: 16px; color: var(--st-soft); }

/* The window, which the browser keeps above the page. It lies outside the page's layout, so it sizes
   itself by the screen rather than the page. */
.d-studio .st-check-dialog { width: min(760px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: var(--st-r); background: #fff; color: var(--st-ink); box-shadow: 0 40px 120px -30px rgba(11, 13, 19, .55); overflow: auto; overscroll-behavior: contain; }
.d-studio .st-check-dialog::backdrop { background: rgba(11, 17, 32, .62); backdrop-filter: blur(3px); }
html:has(.st-check-dialog[open]) { overflow: hidden; }
.d-studio .st-check-dlg { padding: 26px 32px 34px; }
.d-studio .st-check-dlg-top { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.d-studio .st-check-dlg-h { flex: 1; margin: 0; font: 800 26px/1.2 var(--f-head); letter-spacing: -.01em; }
.d-studio .st-check-close { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--st-tint); color: var(--st-ink); cursor: pointer; }
.d-studio .st-check-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.d-studio .st-check-close:hover { background: var(--st-line); }
.d-studio :is(.st-check-close, .st-q-opt, .st-q-link):focus-visible { outline: 3px solid var(--st-violet); outline-offset: 3px; }

/* One question at a time. */
.d-studio .st-q-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; font-weight: 600; color: var(--st-soft); }
.d-studio .st-q-bar { height: 6px; margin: 12px 0 26px; border-radius: 99px; background: var(--st-tint); overflow: hidden; }
.d-studio .st-q-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--st-violet), var(--st-blue)); }
html.motion .d-studio .st-q-bar i { transition: width .4s ease; }
.d-studio .st-q-text { margin: 0 0 24px; font: 700 clamp(22px, 2.4vw, 28px)/1.3 var(--f-head); letter-spacing: -.01em; text-wrap: balance; }
.d-studio .st-q-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.d-studio .st-q-opt { display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 16px 20px; border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--st-line); color: var(--st-ink); font: 700 18px/1.3 var(--f-body); text-align: start; cursor: pointer; transition: box-shadow .15s, background .15s; }
.d-studio .st-q-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--st-line); transition: box-shadow .15s; }
/* Only with a mouse: a phone keeps the look on the spot last tapped, so the next question's answer there
   looked already chosen. */
@media (hover: hover) {
  .d-studio .st-q-opt:hover { background: var(--st-tint); box-shadow: inset 0 0 0 2px var(--st-violet); }
  .d-studio .st-q-opt:hover .st-q-mark { box-shadow: inset 0 0 0 7px var(--st-violet); }
}
.d-studio .st-q-link { margin-top: 20px; padding: 6px 2px; border: 0; background: none; color: var(--st-deep); font: 700 16px/1.3 var(--f-body); text-decoration: underline; text-decoration-color: var(--st-lilac); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }

/* The result: a big dial with the score, the band it falls in, and the one thing to fix first. */
.d-studio .st-res { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 36px; align-items: center; }
.d-studio .st-dial { width: 100%; max-width: 214px; margin-inline: auto; text-align: center; }
.d-studio .st-dial-svg { display: block; width: 100%; height: auto; }
/* Square ends: round ones on bands that meet bulge into each other. Dark reads as low, bright as high,
   and none of the three turns white in high contrast. */
.d-studio .st-dial-svg > path { fill: none; stroke-width: 15; stroke-linecap: butt; }
.d-studio .st-dial-low { stroke: color-mix(in srgb, var(--st-navy) 55%, var(--st-violet)); }
.d-studio .st-dial-mid { stroke: var(--st-violet); }
.d-studio .st-dial-high { stroke: var(--st-mint); }
.d-studio .st-needle { transform-box: view-box; transform-origin: 100px 110px; }
.d-studio .st-needle path { stroke: var(--st-ink); stroke-width: 4; stroke-linecap: round; }
.d-studio .st-needle circle { fill: var(--st-ink); }
.d-studio .st-needle .st-needle-dot { fill: #fff; }
html.motion .d-studio .st-res .st-needle { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.d-studio .st-dial-n { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin: 10px 0 0; }
.d-studio .st-dial-n b { font: 800 46px/1 var(--f-head); letter-spacing: -.03em; }
.d-studio .st-dial-n span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--st-soft); }
.d-studio .st-res-h { margin: 0; outline: none; }
.d-studio .st-res-band { display: inline-block; padding: 7px 16px; border-radius: 999px; font: 800 17px/1.2 var(--f-body); }
.d-studio .st-res-band.is-low { background: #FDE8EC; color: #9F1239; }
.d-studio .st-res-band.is-mid { background: var(--st-tint); color: var(--st-deep); }
.d-studio .st-res-band.is-high { background: color-mix(in srgb, var(--st-mint) 40%, #fff); color: #065F46; }
.d-studio .st-res-first { margin-top: 18px; padding: 18px 20px; border-radius: 16px; background: var(--st-tint); }
.d-studio .st-res-first b { display: block; margin-bottom: 4px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-deep); }
.d-studio .st-res-first p { margin: 0; font-size: 18px; line-height: 1.5; }
.d-studio .st-res-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 24px; }
.d-studio .st-res-go .st-q-link { margin-top: 0; }

@container site (max-width: 900px) {
  .d-studio :is(.st-count, .st-give, .st-check-invite) { grid-template-columns: minmax(0, 1fr); }
  .d-studio .st-check-invite { text-align: center; }
  .d-studio .st-check-invite .un-pills { justify-content: center; }
  .d-studio .st-check-pic { width: min(260px, 70%); margin-inline: auto; }
}
@container site (max-width: 640px) {
  .d-studio .st-check-card .st-res { grid-template-columns: minmax(0, 1fr); gap: 18px; text-align: center; }
  .d-studio .st-check-card .st-dial { width: min(214px, 80%); }
  .d-studio .st-check-card .st-res-first { text-align: start; }
  .d-studio .st-check-card .st-res-go { justify-content: center; }
  .d-studio .st-check-card .st-q-opts { grid-template-columns: minmax(0, 1fr); }
  .d-studio .st-count-box { padding: 28px 18px; }
}
@media (max-width: 640px) {
  .d-studio .st-check-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .d-studio .st-check-dlg { padding: 18px 18px 26px; }
  .d-studio .st-check-dlg-h { font-size: 21px; }
  .d-studio .st-check-dialog .st-q-opts { grid-template-columns: minmax(0, 1fr); }
  .d-studio .st-check-dialog .st-q-opt { min-height: 56px; }
  .d-studio .st-check-dialog .st-res { grid-template-columns: minmax(0, 1fr); gap: 18px; text-align: center; }
  .d-studio .st-check-dialog .st-dial { width: min(214px, 75%); }
  .d-studio .st-check-dialog .st-res-first { text-align: start; }
  .d-studio .st-check-dialog .st-res-go { justify-content: center; }
}
html.a11y-contrast .d-studio :is(.st-give, .st-check-invite, .st-check-card, .st-q-opt) { box-shadow: inset 0 0 0 2px #000; }
html.a11y-contrast .d-studio .st-count-box { background: #000; }