/* ==========================================================================
   Yuga Services — "Ten Worlds, One Take" scroll film (concept page)
   One pinned stage; ten worlds swap in and out on a scrubbed master timeline.
   ========================================================================== */
.sf {
    --serif: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;   /* display */
    --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ink: #111111;
    --paper: #f3f0ea;
    --grey: #d9d4ca;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --violet: #6d28d9;
    --magenta: #d6247a;
    --amber: #e2701f;
    --accent: #ea4826;
    position: relative;
    background: #000;
    color: #f2f2f2;
    font-family: var(--sans);
}
.sf *, .sf *::before, .sf *::after { box-sizing: border-box; }

/* ---- Static fallback (no JS / reduced motion): an editorial list ---- */
.sf-label {
    margin: 0;
    padding: 120px 20px 32px;
    font: 500 15px/1 var(--sans);
    letter-spacing: 0.06em;
    color: #8a8a8a;
}
.sf-sr-list { padding: 0 20px 100px; }
.sf-sr-item { padding: 32px 0; border-top: 1px solid #1f1f1f; }
.sf-sr-item h3 { margin: 0 0 12px; font: 800 clamp(36px, 5vw, 72px)/1 var(--serif); letter-spacing: -0.05em; }
.sf-sr-item h3 span { font: 500 13px var(--mono); color: var(--accent); vertical-align: top; }
.sf-sr-item .t { margin: 0 0 8px; font-size: 20px; }
.sf-sr-item .d { margin: 0 0 12px; max-width: 60ch; color: #9a9a9a; line-height: 1.6; }
.sf-sr-item ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; color: #cfcfcf; font-size: 14px; }
.sf-stage { display: none; }

/* ---- Live film ---- */
.sf-live .sf-label,
.sf-live .sf-sr-list {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    padding: 0;
}
.sf-live .sf-stage {
    display: block;
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: #07060c;
    isolation: isolate;
}
.sf-world { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.sf-bg { position: absolute; inset: 0; }
.sf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

/* HUD: scene number + growing hairline (top left) */
.sf-hud {
    position: absolute;
    left: 4vw;
    top: 96px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    font: 500 12px/1 var(--mono);
    letter-spacing: 0.08em;
    color: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
}
.sf-hud-cur { font-weight: 600; }
.sf-hud-rule { position: relative; width: 120px; height: 1px; background: rgba(255, 255, 255, 0.28); }
.sf-hud-rule i { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.sf-hud-name { text-transform: uppercase; opacity: 0.7; }

/* ---- Editorial grammar shared by every scene ---- */
.sf-type { position: absolute; left: 4vw; top: 16vh; z-index: 3; }
.sf-h {
    margin: 0;
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(56px, 10vw, 190px);
    line-height: 0.88;
    letter-spacing: -0.058em;
}
.sf-h em { font-style: normal; font-weight: 250; letter-spacing: -0.05em; }
.sf-ln { display: block; overflow: hidden; padding: 0.04em 0.08em 0.24em 0; margin: -0.04em 0 -0.24em; }
.sf-ln-in { display: block; white-space: nowrap; }
.nav.sf-nav-blend { mix-blend-mode: difference; }
.sf-ln .sf-c { display: inline-block; will-change: transform; }
.sf-sub {
    position: absolute;
    right: 4vw;
    bottom: 9vh;
    width: min(28vw, 360px);
    z-index: 3;
}
.sf-subh {
    margin: 0 0 14px;
    font: 700 clamp(20px, 1.7vw, 30px)/1.12 var(--sans);
    letter-spacing: -0.035em;
}
.sf-desc { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.7; opacity: 0.7; }
/* statement: sub-heading flows into the description — bright, then grey — with a pill in between */
.sf-stmt { width: min(38vw, 560px); }
.sf-stmt-p { margin: 0; font: 600 clamp(18px, 1.65vw, 31px)/1.16 var(--sans); letter-spacing: -0.038em; }
.sf-stmt .lo { opacity: 0.4; font-weight: 500; }
.sf-stmt .sf-sw { display: inline-block; }
.sf-pill { display: inline-block; width: 2.4em; height: 0.84em; border-radius: 99px; background: #ea4826; vertical-align: -0.06em; transform-origin: 0 50%; }
.sf-index {
    position: absolute;
    left: 4vw;
    bottom: 9vh;
    width: min(34vw, 440px);
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 3;
}
.sf-index li {
    position: relative;
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    min-height: 38px;
    padding: 9px 0;
    font: 600 12px/1.2 var(--sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sf-ix { font: 500 11px var(--mono); opacity: 0.55; text-transform: lowercase; }
.sf-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: 0.28; transform-origin: 0 50%; transform: scaleX(0); }
.sf-word { display: block; overflow: hidden; padding: 0.04em 0 0.26em; margin: -0.04em 0 -0.26em; }
.sf-word > span { display: block; }

/* ---------------------------------------------------------------- 01 */
.sf-w1 { color: #f6f2ff; }
.sf-w1 > .sf-bg { background: #000; }
.sf1-ink { display: none; }
.sf1-ink i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; mix-blend-mode: screen; opacity: 0.85; }
.sf1-ink .b1 { left: -8%; top: -14%; background: radial-gradient(closest-side, #6d28d9, transparent); }
.sf1-ink .b2 { right: -10%; top: 4%; background: radial-gradient(closest-side, #d6247a, transparent); }
.sf1-ink .b3 { left: 22%; bottom: -26%; background: radial-gradient(closest-side, #e2701f, transparent); }
.sf1-ink .b4 { left: 30%; top: 20%; width: 40vmax; height: 40vmax; background: radial-gradient(closest-side, #1e1b4b, transparent); }
.sf1-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; overflow: visible; }
.sf1-field .co { fill: #f3f0ea; }
.sf1-field .co.s { fill: #a9aeb5; }
.sf1-field .co.o { fill: #ea4826; }
.sf1-field .co.hero { fill: #e2701f; }
.sf1-field .lk { fill: none; stroke: rgba(243, 240, 234, 0.4); stroke-width: 1.2; }
.sf1-field .pu { fill: #ea4826; }
.sf-orb {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34vmin;
    height: 34vmin;
    margin: -17vmin 0 0 -17vmin;
    border-radius: 50%;
    background: #e2701f;
    opacity: 0;
    will-change: transform;
}
.sf1-type .sf-amp { display: inline-block; }
.sf1-type .sf-h { font-size: clamp(60px, 11vw, 210px); }
.sf1-list li { cursor: default; pointer-events: auto; transition: color 0.3s; }
.sf1-list li:hover { color: #ffd2a8; }
.sf1-spark { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #ea4826; z-index: 6; pointer-events: none; }

/* ---------------------------------------------------------------- 02 */
.sf-w2 { color: #111; }
.sf-w2 > .sf-bg { background: #fff; }
.sf2-clip { position: absolute; inset: 0; clip-path: circle(150% at 50% 50%); }
.sf2-clip::before { content: ""; position: absolute; inset: 0; background: #07060c; }
.sf2-paper { position: absolute; inset: 0; background: #f3f0ea; clip-path: circle(0% at 50% 50%); }
.sf2-orb { opacity: 1; }
.sf2-mark { position: absolute; left: calc(50% - 50vmin); top: calc(50% - 50vmin); width: 100vmin; height: 100vmin; overflow: visible; transform-origin: 0 0; }
.sf2-shape { fill: #e2701f; }
.sf2-box { fill: none; stroke: #0d99ff; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; }
.sf2-anchors rect { fill: #fff; stroke: #0d99ff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sf2-guides i { position: absolute; background: #ff2d8a; opacity: 0; }
.sf2-guides .gv { top: 0; bottom: 0; width: 1px; }
.sf2-guides .gh { left: 0; right: 0; height: 1px; }
.sf2-cursor { position: absolute; left: 0; top: 0; z-index: 8; opacity: 0; will-change: transform; }
.sf2-arrow, .sf5-arrow, .sf8-arrow { display: block; width: 30px; height: 30px; overflow: visible; }
.sf2-tag {
    position: absolute;
    left: 24px;
    top: 24px;
    padding: 4px 9px;
    border-radius: 3px 10px 10px 10px;
    background: linear-gradient(135deg, #ff9a52, #ea4826 60%, #c4210f);
    box-shadow: 0 0 14px rgba(234, 72, 38, 0.45);
    color: #fff;
    font: 600 12px/1.2 var(--sans);
    white-space: nowrap;
}
.sf2-cursor.flip .sf2-tag, .sf2-cursor.flip .sf2-tip { left: auto; right: 30px; border-radius: 10px 3px 10px 10px; }
.sf2-tip { position: absolute; left: 24px; top: 52px; padding: 4px 7px; border-radius: 4px; background: #111; color: #fff; font: 500 11px var(--mono); white-space: nowrap; opacity: 0; }
.sf2-type { left: 0; right: 0; top: 15vh; text-align: center; }
.sf2-type .sf-h { font-size: clamp(64px, 12.5vw, 240px); }
.sf2-list, .sf2-sub { bottom: 11vh; }
.sf2-list { left: 13vw; width: min(40vw, 520px); }
.sf2-sub { right: 13vw; }
.sf2-proof { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; height: 26px; }
.p-logo svg { height: 22px; fill: #111; }
.p-stat { position: relative; width: 44px; }
.p-stat i { position: absolute; right: 6px; top: 2px; width: 16px; height: 22px; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 1.5px #111; transform-origin: 50% 100%; animation: sfFan 3s ease-in-out infinite; }
.p-stat i:nth-child(1) { --r: -18deg; background: #ea4826; }
.p-stat i:nth-child(2) { --r: 0deg; background: #111; }
.p-stat i:nth-child(3) { --r: 18deg; }
@keyframes sfFan { 0%, 15% { transform: rotate(0); } 45%, 75% { transform: rotate(var(--r)); } 100% { transform: rotate(0); } }
.p-book { position: relative; width: 34px; perspective: 120px; }
.p-book i { position: absolute; right: 0; top: 2px; width: 16px; height: 22px; background: #e8e2d8; border: 1px solid #111; }
.p-book .flip { background: #fff; transform-origin: 0 50%; right: 0; animation: sfFlip 2.4s ease-in-out infinite; }
@keyframes sfFlip { 0%, 20% { transform: rotateY(0); } 60%, 100% { transform: rotateY(-178deg); } }
.p-type { font: 300 22px/1 var(--sans); animation: sfWeight 2.8s ease-in-out infinite alternate; }
@keyframes sfWeight { from { font-weight: 200; } to { font-weight: 900; } }
.p-sw { gap: 3px; }
.p-sw i { position: relative; width: 14px; height: 14px; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1.5px #111; }
.p-sw b { position: absolute; left: 50%; top: 17px; transform: translateX(-50%); font: 500 6px var(--mono); opacity: 0.6; }
.sf2-ring { position: absolute; left: 50%; top: 50%; width: 18vmin; height: 18vmin; margin: -9vmin 0 0 -9vmin; overflow: visible; }
.sf2-ring circle { stroke-dasharray: 296; stroke-dashoffset: 296; }

/* ---------------------------------------------------------------- 03 */
.sf-w3 { color: #111; }
.sf-w3 > .sf-bg { background: #fff; }
.sf3-app { position: absolute; left: calc(50% - min(450px, 46vw)); top: 0; width: min(900px, 92vw); padding-top: 15vh; }
.sf3-head { display: flex; align-items: center; gap: 7%; padding: 0 5% 30px; }
.sf3-slot { flex: none; width: clamp(84px, 11vw, 150px); aspect-ratio: 1; }
.sf3-meta p { margin: 0 0 14px; }
.sf3-handle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sf3-handle b { font: 500 22px var(--sans); margin-right: 8px; }
.sf3-btn { padding: 7px 16px; border-radius: 8px; background: #0d99ff; color: #fff; font: 600 13px var(--sans); }
.sf3-btn.alt { background: #efefef; color: #111; }
.sf3-stats { display: flex; gap: 28px; font-size: 15px; }
.sf3-stats b { font-weight: 600; }
.sf3-bio { display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: #333; }
.sf3-tabs { display: flex; justify-content: center; gap: 52px; padding: 14px 0; border-top: 1px solid #e6e6e6; font: 600 12px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #8e8e8e; }
.sf3-tabs .on { color: #111; }
.sf3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sf3-col { display: grid; gap: 4px; align-content: start; }
.sf3-tile { position: relative; aspect-ratio: 1; overflow: hidden; background: #ececec; }
.sf3-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf3-tile > svg { position: absolute; left: 50%; top: 50%; height: 46%; transform: translate(-50%, -50%); }
.tile-brain { background: radial-gradient(circle at 30% 30%, #6d28d9, transparent 60%), radial-gradient(circle at 70% 60%, #d6247a, transparent 55%), radial-gradient(circle at 40% 85%, #e2701f, transparent 50%), #07060c; }
.tile-logo { background: #111; } .tile-logo svg { fill: #f3f0ea; }
.tile-logo2 { background: #f3f0ea; } .tile-logo2 svg { fill: #111; height: 70%; }
.tile-neuron { background: radial-gradient(circle at 50% 50%, #ffe0bd 0, #e2701f 6%, rgba(214, 36, 122, 0.4) 18%, transparent 40%), #0b0912; }
.tile-type { background: #ea4826; display: flex; align-items: center; justify-content: center; }
.tile-type b { font: 250 5vw/1 var(--serif); letter-spacing: -0.05em; color: #111; }
.tile-grad { background: #111; }
.tile-grad::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #ea4826; transform: translate(-50%, -50%); }
.sf3-tile-hero { background: linear-gradient(90deg, #eceeec 0 56%, #111 56% 100%); }
/* feed posts — flat, type-led, in the spirit of a clean brand campaign */
.sf3-post { container-type: size; }
.pt { position: absolute; inset: 0; padding: 7cqw; font-family: var(--sans); color: #111; background: #eceeec; overflow: hidden; }
.pt-logo { display: inline-flex; align-items: center; gap: 2cqw; font: 600 5cqw/1 var(--sans); letter-spacing: -0.02em; }
.pt-logo svg { position: static; height: 6cqw; transform: none; fill: currentColor; }
.pt-h { display: block; font: 700 8.4cqw/1 var(--sans); letter-spacing: -0.05em; }
.pt-s { font: 500 3.8cqw/1.25 var(--sans); }
.pt-btn { padding: 1.6cqw 3.4cqw; border: 1px solid currentColor; border-radius: 99px; font: 500 3.4cqw/1 var(--sans); }
.pt-disc { position: absolute; border-radius: 50%; aspect-ratio: 1; }
.pt-a .pt-h { position: absolute; left: 44%; right: 7cqw; top: 7cqw; }
.pt-a .pt-s { position: absolute; left: 7cqw; bottom: 22cqw; }
.pt-a .pt-btn { position: absolute; left: 7cqw; bottom: 7cqw; }
.pt-b { background: #ea4826; }
.pt-b .pt-disc { left: 18%; top: 10%; width: 64%; background: #111; }
.pt-b .pt-disc.s { left: 56%; top: 52%; width: 28%; background: #f3f0ea; }
.pt-b .pt-logo { position: absolute; left: 7cqw; bottom: 7cqw; color: #111; }
.pt-c .pt-disc { right: -14%; top: 22%; width: 66%; background: #ea4826; }
.pt-c .pt-h { position: relative; font-size: 11cqw; }
.pt-c .pt-s { position: absolute; left: 7cqw; bottom: 7cqw; }
.pt-d { background: #111; padding: 0; display: flex; align-items: center; justify-content: center; }
.pt-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.pt-grid i { border-radius: 50%; background: #ea4826; }
.pt-grid i:nth-child(2n) { background: #2a2a2a; }
.pt-d .pt-h { position: relative; font-size: 11cqw; text-align: center; color: #fff; mix-blend-mode: difference; }
.st { position: absolute; display: flex; align-items: center; gap: 3cqw; font: 500 3.6cqw/1.2 var(--sans); }
.st i { display: grid; place-items: center; width: 25cqw; aspect-ratio: 1; border-radius: 50%; background: #111; color: #fff; font: 700 6.4cqw/1 var(--sans); font-style: normal; letter-spacing: -0.04em; }
.st.a { left: 12%; top: 5%; } .st.b { left: 54%; top: 27%; } .st.b i { background: #ea4826; }
.st.c { left: 9%; top: 50%; } .st.d { left: 36%; top: 72%; }
.pt-f { background: #111; color: #f3f0ea; display: flex; align-items: center; }
.pt-f ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3.6cqw; }
.pt-f li { display: flex; align-items: center; gap: 3cqw; font: 500 6.6cqw/1 var(--sans); letter-spacing: -0.03em; }
.pt-f li i { width: 5cqw; aspect-ratio: 1; border-radius: 50%; background: #f3f0ea; }
.pt-f li.on { color: #ea4826; } .pt-f li.on i { background: #ea4826; }
.sf-avatar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sf3-avatar { position: absolute; left: 0; top: 0; transform-origin: 0 0; z-index: 2; }
.sf-device { position: absolute; inset: 0; transform-style: preserve-3d; }
.sf-frame {
    position: absolute;
    left: calc(50% - var(--pw) / 2);
    top: calc(50% - var(--ph) / 2);
    width: var(--pw);
    height: var(--ph);
    border-radius: calc(var(--pw) * 0.16);
    background: #0c0c0c;
    background: #111;
}
.sf-island { position: absolute; left: 50%; top: calc(var(--pb) + 1.6%); width: 30%; height: 3.4%; margin-left: -15%; border-radius: 99px; background: #000; z-index: 4; }
.sf-scr {
    position: absolute;
    left: calc(50% - var(--pw) / 2 + var(--pb));
    top: calc(50% - var(--ph) / 2 + var(--pb));
    width: calc(var(--pw) - var(--pb) * 2);
    height: calc(var(--ph) - var(--pb) * 2);
    border-radius: calc(var(--pw) * 0.13);
    overflow: hidden;
    background: #fff;
    container-type: size;
}
.sf-ig { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #111; padding-top: 12cqh; }
.ig-top { display: flex; align-items: center; gap: 4cqw; padding: 0 5cqw 3cqw; }
.ig-top b { flex: 1; font: 600 5cqw var(--sans); }
.ig-top span { width: 6cqw; height: 6cqw; border-radius: 30%; border: 0.6cqw solid #111; }
.ig-post-head { display: flex; align-items: center; gap: 3cqw; padding: 3cqw 4cqw; }
.ig-post-head i { width: 8cqw; height: 8cqw; border-radius: 50%; background: #ea4826; }
.ig-post-head b { width: 30cqw; height: 2.4cqw; border-radius: 9px; background: #222; }
.ig-slot { width: 100%; aspect-ratio: 1; background: linear-gradient(90deg, #eceeec 0 56%, #111 56% 100%); flex: none; }
.ig-actions { display: flex; align-items: center; gap: 4cqw; padding: 3.4cqw 4cqw; }
.ig-actions svg { width: 7cqw; height: 7cqw; fill: #111; }
.ig-actions i { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; border: 0.7cqw solid #111; }
.ig-actions i.r { margin-left: auto; border-radius: 1cqw; }
.ig-cap { display: flex; flex-direction: column; gap: 2cqw; padding: 0 4cqw; }
.ig-cap b { height: 2.2cqw; width: 70%; border-radius: 9px; background: #d9d9d9; }
.ig-cap b + b { width: 46%; }
.ig-next { margin: 5cqw 4cqw 0; flex: 1; border-radius: 3cqw; background: #f1f1f1; }
.ig-nav { display: flex; justify-content: space-around; padding: 4cqw 4cqw 7cqw; border-top: 1px solid #eee; }
.ig-nav i { width: 6cqw; height: 6cqw; border-radius: 30%; background: #111; }
.sf3-device .sf-frame, .sf3-device .sf-scr { opacity: 0; }
.sf3-hero { position: absolute; left: 0; top: 0; width: 10px; height: 10px; z-index: 6; visibility: hidden; transform-origin: 50% 50%; }
.sf-poster { position: absolute; inset: 0; overflow: hidden; background: #eceeec; color: #111; container-type: size; }
/* the lifted post: light type panel + ink services panel */
.sf-poster-in { position: absolute; inset: 0; display: flex; }
.pz-l, .pz-r { position: relative; height: 100%; padding: max(4cqmin, 12cqh) 4.4cqmin 4.4cqmin; }
.pz-l { width: 56%; }
.pz-r { width: 44%; background: #111; color: #f3f0ea; display: flex; flex-direction: column; justify-content: flex-end; }
.pz-logo { display: inline-flex; align-items: center; gap: 1.2cqmin; font: 600 max(8px, 2.2cqmin)/1 var(--sans); letter-spacing: -0.02em; }
.pz-logo svg { height: 2.8cqmin; fill: currentColor; }
.pz-mast { margin: 3cqmin 0 0; font: 800 min(6.6cqw, 11.5cqh)/0.95 var(--sans); letter-spacing: -0.055em; }
.pz-mast .w { display: inline-block; }
.pz-mast .lt { font-weight: 250; }
.pz-strap { position: absolute; left: 4.4cqmin; right: 4.4cqmin; bottom: 4.4cqmin; display: grid; grid-template-columns: 1fr 1.7fr; gap: 1.6cqmin 2cqmin; align-items: end; }
.pz-kick { margin: 0; font: 500 max(7px, 1.6cqmin)/1.2 var(--sans); }
.pz-d { margin: 0; font: 400 max(6px, 1.25cqmin)/1.5 var(--sans); }
.pz-btn { justify-self: start; padding: 0.7cqmin 1.8cqmin; border: 1px solid #111; border-radius: 99px; font: 500 max(7px, 1.4cqmin)/1 var(--sans); }
.pz-circles { position: absolute; top: max(4cqmin, 12cqh); right: 4.4cqmin; display: flex; }
.pz-circles i { width: 9cqmin; aspect-ratio: 1; margin-left: -2.6cqmin; border-radius: 50%; background: #ea4826; }
.pz-circles i:nth-child(2) { background: #f3f0ea; }
.pz-circles i:nth-child(3) { background: #3a3a3a; }
.pz-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.7cqmin; }
.pz-lines li { display: flex; align-items: center; gap: 1.4cqmin; font: 500 min(2.6cqw, 4.4cqh)/1.1 var(--sans); letter-spacing: -0.025em; }
.pz-lines li i { flex: none; width: 1.8cqmin; aspect-ratio: 1; border-radius: 50%; background: #f3f0ea; }
.pz-lines li.on { color: #ea4826; }
.pz-lines li.on i { background: #ea4826; }
.pz-heart { position: absolute; left: 50%; top: 52%; width: 16cqmin; height: 16cqmin; margin: -8cqmin; fill: #fff; transform: scale(0); }
.pz-burst { position: absolute; left: 50%; top: 52%; }
.pz-burst b { position: absolute; width: 1.6cqmin; height: 1.6cqmin; margin: -0.8cqmin; border-radius: 50%; background: #fff; opacity: 0; }

/* ---------------------------------------------------------------- 04 */
.sf-w4 { color: #111; }
.sf-w4 > .sf-bg { background: #f3f0ea; }
.sf4-scr { left: 0; top: 0; }
.sf4-wall { position: absolute; inset: 0; background: #ea4826; }
.sf4-icons { position: absolute; left: 9%; right: 9%; top: 15%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7cqw 7cqw; }
.sf4-icons i { position: relative; aspect-ratio: 1; border-radius: 26%; background: var(--c); }
.sf4-icons i:nth-child(3n)::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: #ea4826; }
.sf4-icons i:nth-child(4n+1)::after { content: ""; position: absolute; inset: 30%; border-radius: 3px; background: #f3f0ea; }
.sf4-icons i:nth-child(2) { background: #111; box-shadow: inset 0 0 0 0.9cqw #f3f0ea; }
.sf4-icons .is-yuga svg { position: absolute; left: 50%; top: 50%; height: 56%; transform: translate(-50%, -50%); fill: #111; }
.sf4-igwrap { position: absolute; inset: 0; transform-origin: 0 0; overflow: hidden; }
.sf4-app { position: absolute; inset: 0; background: #fff; visibility: hidden; transform-origin: 0 0; overflow: hidden; }
.sf4-splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6cqw; background: #f3f0ea; z-index: 3; }
.sf4-splash svg { height: 16cqw; fill: #111; }
.sf4-prog { width: 36cqw; height: 0.8cqw; border-radius: 9px; background: #ddd; overflow: hidden; }
.sf4-prog b { display: block; height: 100%; background: #ea4826; transform-origin: 0 50%; transform: scaleX(0); }
.sf4-ui-root { position: absolute; inset: 0; }
.ap { position: absolute; border-radius: 1.6cqmin; background: #ececec; overflow: hidden; }
.ap > * { clip-path: inset(0 100% 0 0); }
.ap-nav { display: flex; align-items: center; gap: 4%; padding: 0 4%; background: #ececec; border-radius: 0; }
.ap-nav .ap-logo { width: 10%; height: 34%; border-radius: 9px; background: #111; }
.ap-nav i { width: 8%; height: 18%; border-radius: 9px; background: #888; }
.ap-nav i:first-of-type { margin-left: auto; }
.ap-nav .ap-cta { width: 14%; height: 46%; border-radius: 99px; background: #ea4826; }
.ap-hero { display: flex; flex-direction: column; justify-content: center; gap: 7%; padding: 0 6%; background: #f3f0ea; }
.ap-hero b { height: 11%; width: 82%; border-radius: 99px; background: #111; }
.ap-hero b.s { width: 54%; height: 7%; background: #9a9a9a; }
.ap-hero .ap-btn { width: 30%; height: 14%; border-radius: 99px; background: #ea4826; }
.ap-media i { position: absolute; inset: 0; background: #ea4826; }
.ap-media i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #f3f0ea; transform: translate(-50%, -50%); }
.ap-c1 i, .ap-c2 i, .ap-c3 i { position: absolute; left: 6%; right: 6%; top: 8%; height: 52%; border-radius: 1.2cqmin; }
.ap-c1 i { background: #111; }
.ap-c2 i { background: #ea4826; }
.ap-c3 i { background: #d9d4ca; }
.ap-c1 b, .ap-c2 b, .ap-c3 b { position: absolute; left: 6%; top: 68%; width: 70%; height: 8%; border-radius: 99px; background: #111; }
.ap-c1 b.s, .ap-c2 b.s, .ap-c3 b.s { top: 82%; width: 44%; background: #aaa; }
.ap-c1, .ap-c2, .ap-c3 { background: #fff; box-shadow: inset 0 0 0 1.5px #111; }
.sf4-ripple { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); transform: scale(0); z-index: 6; }
.sf4-homebar { position: absolute; left: 35%; right: 35%; bottom: 1.6%; height: 0.9%; border-radius: 99px; background: #111; z-index: 7; }
.sf4-chrome {
    position: absolute;
    left: calc(50% - var(--bw) / 2);
    top: calc(50% - var(--bh) / 2);
    width: var(--bw);
    height: var(--bb);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 14px 14px 0 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    opacity: 0;
}
.sf4-chrome i, .sf5-bar i { width: 11px; height: 11px; border-radius: 50%; background: #e2e2e2; }
.sf4-chrome i:first-child, .sf5-bar i:first-child { background: #ff5f57; }
.sf4-chrome span, .sf5-bar span { margin: 0 auto; padding: 5px 60px; border-radius: 99px; background: #f2f2f2; font: 500 12px var(--mono); color: #777; }
/* split letters lose kerning: this mid-size heading gets looser tracking and room between its lines */
.sf4-type .sf-h { font-size: clamp(40px, 5vw, 96px); line-height: 1.04; letter-spacing: -0.035em; }
.sf4-type .sf-h em { font-weight: 300; letter-spacing: -0.028em; }
.sf4-list { width: min(30vw, 400px); }
.sf4-list li { grid-template-columns: 30px 1fr auto; }
.sf4-ui { display: inline-flex; align-items: center; gap: 4px; }
.u-toggle { width: 34px; height: 20px; border-radius: 99px; background: #d4d4d4; position: relative; }
.u-toggle i { position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.u-nav { width: 70px; height: 18px; padding: 0 5px; border-radius: 4px; background: #111; }
.u-nav b { width: 12px; height: 5px; border-radius: 9px; background: #ea4826; margin-right: auto; }
.u-nav i { width: 8px; height: 3px; border-radius: 9px; background: #aaa; }
.u-tabs { gap: 6px; padding: 4px 6px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1.5px #111; }
.u-tabs i { width: 9px; height: 9px; border-radius: 3px; background: #c9c9c9; }
.u-tabs i.on { background: #ea4826; }
.u-dash { align-items: flex-end; gap: 3px; height: 22px; padding: 3px 5px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1.5px #111; }
.u-dash i { width: 6px; height: calc(var(--h) * 16px); border-radius: 2px; background: #111; }
.u-dash i:nth-child(4) { background: #ea4826; }
.u-btns { gap: 4px; }
.u-btns i { padding: 4px 6px; border-radius: 5px; background: #111; color: #fff; font: 600 8px var(--sans); letter-spacing: 0; text-transform: none; font-style: normal; }
.u-btns i.h { background: #333; }
.u-btns i.p { background: #000; transform: scale(0.94); }
.u-btns i.d { background: #ddd; color: #999; }

/* ---------------------------------------------------------------- 05 */
.sf-w5 { color: #111; }
.sf-w5 > .sf-bg { background: #f3f0ea; }
.sf-browser {
    position: absolute;
    left: calc(50% - var(--bw) / 2);
    top: calc(50% - var(--bh) / 2);
    width: var(--bw);
    height: var(--bh);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 0 0 2px #111;
    transform-origin: 0 0;
    z-index: 2;
}
.sf5-bar { height: var(--bb); display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid #eee; }
.caret { display: inline-block; width: 0.55em; height: 1.1em; margin-left: 3px; background: #ea4826; animation: sfBlink 1s steps(1) infinite; }
@keyframes sfBlink { 50% { opacity: 0; } }
@keyframes sfPing { to { box-shadow: 0 0 0 10px rgba(31, 174, 107, 0); } }

/* ---------------------------------------------------------------- 06 */
.sf-w6 { color: #111; }
.sf-w6 > .sf-bg { background: #f3f0ea; }

/* ---------------------------------------------------------------- 07 */
.sf-w7 { color: #f2f2f2; }
.sf-w7 > .sf-bg { background: #0e0e10; opacity: 0; }
.sf7-frame { position: absolute; left: 0; top: 0; width: 10px; height: 10px; z-index: 30; overflow: hidden; border-radius: 16px; visibility: hidden; background: #000; }
.sf7-frame canvas, .sf7-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.sf7-frame img { opacity: 0; }
.sf7-frame::after { content: ""; position: absolute; inset: 0; background: rgba(10, 16, 40, 0.42); opacity: var(--shade, 0); }
.sf7-type { z-index: 31; color: #fff; }
.sf7-h span { display: block; }
.sf7-sub { z-index: 31; color: #fff; }

/* ---------------------------------------------------------------- 08 */
.sf-w8 { color: #111; }
.sf-w8 > .sf-bg { background: #f6f6f4; opacity: 0; }
.sf8-sky { position: absolute; inset: 0; background: linear-gradient(#4f9cff, #a9d4ff 55%, #eaf5ff); opacity: 0; }
.sf8-feed { position: absolute; inset: -40vh 0; display: flex; justify-content: center; gap: 2.4vw; opacity: 0; }
.sf8-fc { width: 17vw; display: flex; flex-direction: column; gap: 2.4vw; }
.sf8-fc i { height: 24vw; border-radius: 18px; background: #e6e1d8; flex: none; }
.sf8-fc i:nth-child(3n) { background: #d9d4ca; }
.sf8-card { position: absolute; left: 50%; top: 50%; width: min(330px, 76vw); border-radius: 22px; background: #fff; box-shadow: 0 0 0 2px #111; z-index: 3; }
.sf8-img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px 22px 0 0; }
.sf8-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; }
.sf8-info { padding: 16px 18px 18px; }
.sf8-info p { margin: 0; }
.sf8-brand { font: 600 11px var(--mono); letter-spacing: 0.16em; color: #ea4826; }
.sf8-name { margin: 4px 0 6px !important; font: 700 17px var(--sans); letter-spacing: -0.02em; }
.sf8-stars { font-size: 13px; color: #111; }
.sf8-stars span { color: #777; }
.sf8-price { margin: 8px 0 14px !important; display: flex; align-items: baseline; gap: 8px; }
.sf8-price b { font: 800 26px var(--sans); letter-spacing: -0.04em; }
.sf8-price s { color: #999; }
.sf8-buy { position: relative; width: 100%; height: 48px; border: 0; border-radius: 99px; background: #111; color: #fff; font: 600 15px var(--sans); overflow: hidden; }
.sf8-ripple { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); transform: scale(0); }
.sf8-toast { position: absolute; right: -18px; top: 26px; margin: 0; padding: 9px 14px; border-radius: 12px; background: #ea4826; color: #111; font: 700 13px var(--sans); opacity: 0; }
.sf8-card > *:not(.sf8-img) { opacity: 0; }
.sf8-cursor { position: absolute; left: 0; top: 0; z-index: 8; opacity: 0; will-change: transform; }
.sf8-cursor .sf8-arrow { width: 34px; height: 34px; }
.sf8-chart, .sf8-big { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sf8-chart { z-index: 4; }

/* ---------------------------------------------------------------- 09 */
.sf-w9 { color: #111; }
.sf-w9 > .sf-bg, .sf9-sky { background: linear-gradient(#3d8bff, #9fd0ff 55%, #e8f4ff); }
.sf9-sky { position: absolute; inset: 0; }
.sf9-sky::after { content: ""; position: absolute; inset: 0; background: #ea4826; opacity: var(--dusk, 0); }
.sf9-cam { position: absolute; inset: 0; }
.sf9-layer { position: absolute; inset: -30vh 0; }
.sf9-layer .cl { position: absolute; fill: #fff; overflow: visible; }
.sf9-layer.l0 { opacity: 0.5; } .sf9-layer.l1 { opacity: 0.75; } .sf9-layer.l2 { opacity: 0.92; }
.sf9-layer.l3 { filter: blur(10px); }
.sf9-arrow { position: absolute; left: 0; top: 0; width: 46px; height: 46px; overflow: visible; z-index: 3; }
.sf9-hcloud { position: absolute; left: calc(50% - 30vw); top: calc(42% - 9vw); width: 60vw; overflow: visible; fill: #fff; }
.sf9-h { max-width: 9ch; }
.sf9-list { z-index: 7; }
.sf9-fog { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; }
.sf9-inside { position: absolute; inset: 0; z-index: 5; background: #f3f0ea; opacity: 0; }
.sf9-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.sf9-net .lk { stroke: rgba(17, 17, 17, 0.28); stroke-width: 1.5; fill: none; }
.sf9-net .nd { fill: #f3f0ea; stroke: #111; stroke-width: 2.5; }
.sf9-net .nd.on { fill: #ea4826; stroke: #111; }
.sf9-net .sh { fill: #111; stroke: #111; stroke-width: 4; }
.sf9-net .ck { fill: none; stroke: #ea4826; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.sf9-net .scan { fill: url(#sfScan); }
.sf9-board { position: absolute; right: 4vw; top: 38vh; width: min(390px, 34vw); margin: 0; padding: 8px 18px; list-style: none; border-radius: 16px; background: #fff; box-shadow: 0 0 0 2px #111; font-size: 13px; }
.sf9-board li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid rgba(17, 17, 17, 0.12); opacity: 0; }
.sf9-board li:last-child { border-bottom: 0; }
.sf9-board .dot { width: 9px; height: 9px; border-radius: 50%; background: #111; }
.sf9-board li.flash .dot { background: #ea4826; transform: scale(1.6); }
.sf9-board .nm { font-weight: 700; letter-spacing: -0.01em; }
.sf9-board .op { font: 500 10px var(--mono); color: #111; opacity: 0.55; letter-spacing: 0.06em; text-transform: uppercase; }
.sf9-city { position: absolute; inset: 0; z-index: 4; }
.sf9-city svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sf9-city .far rect { fill: #2a2a2a; }
.sf9-city .near rect { fill: #111; }
.sf9-city .glass > rect:first-child { fill: #111; }
.sf9-city .win { fill: #2e2e2e; }
.sf9-city .lit { fill: #f7f7f7; }
.sf9-type { z-index: 7; }
.sf9-sub { z-index: 7; }

/* ---------------------------------------------------------------- 10 */
.sf-w10 { color: #2a1c10; }
.sf10-in { position: absolute; inset: 0; z-index: 11; visibility: hidden; overflow: hidden; }
.sf10-room { position: absolute; left: calc(50% - max(50vw, 80vh)); top: calc(50% - max(31.25vw, 50vh)); width: max(100vw, 160vh); height: max(62.5vw, 100vh); transform-origin: 50% 49%; }
.sf10-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the monitor: the lit window from 09 becomes this screen */
.sf10-screen { position: absolute; left: 35.75%; top: 35.2%; width: 28.5%; height: 27.6%; overflow: hidden; border-radius: 0.3%; container-type: size; background: #f7f7f7; }
.sf10-ui { position: absolute; inset: 0; color: #111; font-family: var(--sans); }
.sf10-ui aside { position: absolute; left: 0; top: 0; bottom: 0; width: 6cqw; background: #111; display: flex; flex-direction: column; align-items: center; gap: 2.2cqw; padding-top: 15cqh; }
.sf10-ui aside b { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #ea4826; }
.sf10-ui aside i { width: 2.2cqw; height: 2.2cqw; border-radius: 0.5cqw; background: #444; }
.sf10-ui aside i.on { background: #fff; }
/* the card and its envelope (flat: ink tones + orange, no glow) */
.sf10-env-back, .sf10-flap, .sf10-pocket { position: absolute; left: 22cqw; width: 56cqw; top: 34cqh; height: 63cqh; display: block; }
.sf10-env-back { z-index: 1; background: #2a2a2a; }
.sf10-flap { z-index: 2; background: #222; clip-path: polygon(0 0, 100% 0, 50% 58%); transform-origin: 50% 0; }
.sf10-pocket { z-index: 4; background: #161616; clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }
.sf10-seal { position: absolute; z-index: 6; left: calc(50cqw - 2.4cqw); top: calc(34cqh + 63cqh * 0.56 - 2.4cqw); width: 4.8cqw; height: 4.8cqw; border-radius: 50%; background: #ea4826; display: block; }
.sf10-card { position: absolute; z-index: 3; left: 25cqw; width: 50cqw; top: 15cqh; height: 60cqh; box-sizing: border-box; padding: 3cqw; background: #ea4826; color: #111; display: grid; grid-template-columns: 14cqw 1fr; grid-template-rows: auto 1fr; }
.sf10-brand { grid-column: 1; grid-row: 1; align-self: start; display: flex; align-items: center; gap: 0.55cqw; margin: 0.35cqw 0 0; font: 700 1.4cqw/1 var(--sans); letter-spacing: -0.02em; }
.sf10-brand svg { height: 1.9cqw; width: auto; fill: #111; flex: none; }
.sf10-title { grid-column: 2; grid-row: 1; margin: 0; font: 800 4.3cqw/0.98 var(--sans); letter-spacing: -0.058em; color: #111; }
.sf10-ln { display: block; overflow: hidden; padding: 0.04em 0.06em 0.24em 0; margin: -0.04em 0 -0.24em; }
.sf10-ln > span { display: block; white-space: nowrap; }
.sf10-pts { grid-column: 2; grid-row: 2; align-self: end; margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3cqw; }
.sf10-pts li { font: 600 1.3cqw/1.3 var(--sans); letter-spacing: -0.02em; white-space: nowrap; padding-bottom: 0.08em; }
.sf10-sub { display: none; z-index: 12; color: #111; }

/* ---------------------------------------------------------------- exit */
.sf-wx { color: #fff; }
/* the closing line: styled like 01's opening line, words rise out of a blur */
.sfx-line { position: absolute; left: 0; right: 0; bottom: 7vh; z-index: 9; margin: 0; padding-bottom: 0.2em; text-align: center;
  font: 600 clamp(24px, 3.1vw, 46px)/1.14 var(--sans); letter-spacing: -0.025em; color: #f2f2f2; text-wrap: balance; }
.sfx-line em { font-style: normal; }
.sfx-line .sfx-hl {
    background: linear-gradient(100deg, #ffc49a 0%, #ff7a3d 35%, #ea4826 62%, #ff9a5e 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------------------------------------------------------- phones & tablets */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1200px) {
    .sf-hud { top: 84px; left: 16px; font-size: 10px; }
    .sf-hud-rule { width: 60px; }
    .sf-hud-name { display: none; }
    .sf-type { left: 16px; right: 16px; top: 15vh; }
    .sf-h { font-size: clamp(44px, 13vw, 84px); }
    .sf4-type .sf-h { font-size: clamp(44px, 13vw, 84px); }          /* same scale as "AI Creative & Automation" */
    .sf-sub { left: 16px; right: 16px; width: auto; bottom: calc(9vh + 205px); }
    .sf-sub .sf-desc, .sf-stmt .lo, .sf-stmt .sf-pill { display: none; }
    .sf-subh { font-size: 18px; margin: 0; }
    .sf-index { left: 16px; right: 16px; width: auto; bottom: 4vh; }
    .sf-index li { min-height: 0; padding: 7px 0; font-size: 11px; }
    .sf2-type .sf-h { font-size: clamp(54px, 16vw, 100px); }
    .sf2-list, .sf2-sub { left: 10vw; right: 10vw; }
    .sf3-head { gap: 5%; }
    .sf3-stats { gap: 14px; font-size: 13px; }
    .sf3-bio, .sf3-btn.alt { display: none; }
    .sf4-list .sf4-ui { display: none; }
    .sf9-board { left: 16px; right: 16px; width: auto; top: auto; bottom: 4vh; }
    .sf9-board li { padding: 7px 0; font-size: 11px; }
    .sfx-line { padding: 0 16px; }
}

.sf-w4 .sf-stmt { width: min(30vw, 440px); }
.sf2-sub.sf-stmt { width: min(28vw, 420px); }

/* service points: bold type only — no rules, no a–e, no mini graphics */
.sf-index .sf-ix,
.sf-index .sf-rule,
.sf-index .sf2-proof,
.sf-index .sf4-ui { display: none; }
.sf-index li {
    display: block;
    min-height: 0;
    padding: 0.14em 0;
    font: 700 clamp(17px, 1.45vw, 26px)/1.12 var(--sans);
    letter-spacing: -0.035em;
    text-transform: none;
}
@media (max-width: 900px), (orientation: portrait) and (max-width: 1200px) {
    .sf-index li { font-size: 16px; padding: 0.1em 0; }
}

/* 01: only a few dots and links, kept clear of the type */
.sf1-field .nr.off,
.sf1-spark { display: none; }

@media (max-width: 900px), (orientation: portrait) and (max-width: 1200px) {
    .sf10-sub { display: block; left: 16px; right: 16px; width: auto; top: 92px; bottom: auto; }
}

/* paper plane: 09 → 10 courier (stage-pixel svg above the worlds) */
.sf-plane { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 15; pointer-events: none; visibility: hidden; }
.sf-plane .pl-b { fill: #ffffff; }
.sf-plane .pl-k { fill: #d6d2ca; }


/* ---------------------------------------------------------------- 05 desktop: the browser settles into a flat monitor */
.sf5-page { position: absolute; left: 0; right: 0; bottom: 0; top: var(--bb); overflow: hidden; container-type: size; background: #fff; border-radius: 0 0 14px 14px; }
.sf5-nav { position: absolute; left: 5cqw; right: 5cqw; top: 7cqh; display: flex; align-items: center; gap: 2.2cqw; }
.sf5-nav .lg { width: 3cqw; height: 3cqw; border-radius: 50%; background: #111; margin-right: auto; }
.sf5-nav i { width: 6cqw; height: 1cqh; border-radius: 9px; background: #e4e0d8; }
.sf5-nav .cta { padding: 1.5cqh 2cqw; border-radius: 99px; background: #111; color: #fff; font: 600 1.45cqw/1 var(--sans); }
.sf5-h { position: absolute; left: 5cqw; top: 20cqh; margin: 0; font: 800 7cqw/0.98 var(--sans); letter-spacing: -0.055em; color: #111; }
.sf5-h .lw { font-weight: 250; }
.sf5-ln { display: block; overflow: hidden; padding: 0.04em 0.06em 0.24em 0; margin: -0.04em 0 -0.24em; }
.sf5-ln > span { display: block; white-space: nowrap; }
.sf5-panel { position: absolute; left: 5cqw; right: 5cqw; bottom: 7cqh; height: 36cqh; box-sizing: border-box; border-radius: 1.2cqw; background: #f3f0ea; }
.sf5-panel .pt { position: absolute; left: 2.4cqw; top: 3.2cqh; margin: 0; font: 600 1.55cqw/1 var(--sans); letter-spacing: -0.01em; color: #111; }
.sf5-panel .pv { position: absolute; right: 2.4cqw; top: 2.4cqh; margin: 0; font: 800 3cqw/1 var(--sans); letter-spacing: -0.045em; color: #111; }
.sf5-chart { position: absolute; left: 2.4cqw; bottom: 3cqh; width: calc(100% - 4.8cqw); height: 21cqh; overflow: visible; }
.sf5-chart .ax { fill: none; stroke: #e0dbd1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sf5-chart .ln { fill: none; stroke: #ea4826; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sf5-dot { position: absolute; left: calc(2.4cqw + (100% - 4.8cqw) * 0.88 - 0.8cqw); top: calc(36cqh - 3cqh - 21cqh + 21cqh * 0.243 - 0.8cqw); width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #ea4826; box-shadow: 0 0 0 0.45cqw #f3f0ea; }
.sf5-tag { position: absolute; left: calc(2.4cqw + (100% - 4.8cqw) * 0.88); top: calc(36cqh - 3cqh - 21cqh + 21cqh * 0.243 - 6.4cqh); padding: 1cqh 1.2cqw; border-radius: 99px; background: #111; color: #fff; font: 600 1.25cqw/1 var(--sans); white-space: nowrap; }
.sf5-bezel, .sf5-neck, .sf5-foot { position: absolute; display: block; }
.sf5-bezel { z-index: 1; left: calc(var(--mx) - var(--mw) / 2 - var(--mb)); top: calc(var(--my) - var(--mh) / 2 - var(--mb)); width: calc(var(--mw) + 2 * var(--mb)); height: calc(var(--mh) + 2 * var(--mb) + var(--mc)); border-radius: calc(var(--mb) * 1.3); background: #111; }
.sf5-neck { z-index: 0; left: calc(var(--mx) - var(--mw) * 0.07); top: calc(var(--my) + var(--mh) / 2 + var(--mb) + var(--mc)); width: calc(var(--mw) * 0.14); height: calc(var(--mh) * 0.16); background: #2a2a2a; }
.sf5-foot { z-index: 1; left: calc(var(--mx) - var(--mw) * 0.17); top: calc(var(--my) + var(--mh) / 2 + var(--mb) + var(--mc) + var(--mh) * 0.16); width: calc(var(--mw) * 0.34); height: calc(var(--mh) * 0.035); border-radius: 99px 99px 3px 3px; background: #111; }
/* the five services float around the monitor */
.sf5-lbl { position: absolute; z-index: 3; margin: 0; display: flex; align-items: center; gap: 0.5em; font: 700 clamp(15px, 1.3vw, 22px)/1.1 var(--sans); letter-spacing: -0.03em; color: #111; white-space: nowrap; }
.sf5-star { flex: none; width: 0.8em; height: 0.8em; fill: #ea4826; overflow: visible; }
.sf5-lbl .m { display: block; overflow: hidden; padding: 0.04em 0.04em 0.26em; margin: -0.04em 0 -0.26em; }
.sf5-lbl .m > span { display: block; }
.sf5-lbl.l0, .sf5-lbl.l1 { right: calc(100% - (var(--mx) - var(--mw) / 2 - var(--mb)) + 3vw); }
.sf5-lbl.l2, .sf5-lbl.l3, .sf5-lbl.l4 { left: calc(var(--mx) + var(--mw) / 2 + var(--mb) + 3vw); }
.sf5-lbl.l0 { top: calc(var(--my) - var(--mh) * 0.3); }
.sf5-lbl.l1 { top: calc(var(--my) + var(--mh) * 0.2); }
.sf5-lbl.l2 { top: calc(var(--my) - var(--mh) * 0.44); }
.sf5-lbl.l3 { top: calc(var(--my) - var(--mh) * 0.04); }
.sf5-lbl.l4 { top: calc(var(--my) + var(--mh) * 0.36); }
.sf5-sub { left: calc(50% - min(22vw, 320px)); right: auto; bottom: 4vh; width: min(44vw, 640px); text-align: center; }

/* ---------------------------------------------------------------- 06 editor: preview, ruler, story chips */
.sf6-cam { position: absolute; inset: 0; }
.sf6-frames { position: absolute; left: calc(50% - min(88.9vh, 82vw) / 2); top: 13vh; width: min(88.9vh, 82vw); aspect-ratio: 16 / 9; border-radius: 18px; background: #111; overflow: hidden; container-type: size; }
.sf6-frames .br { position: absolute; top: 30%; bottom: 30%; width: 3cqw; border: 0.45cqw solid #8b8f99; display: block; }
.sf6-frames .br.l { left: 15%; border-right: 0; }
.sf6-frames .br.r { right: 15%; border-left: 0; }
.sf6-txt { position: absolute; left: 22%; right: 22%; top: 50%; margin: 0; transform: translateY(-50%); text-align: center; font: 500 3.2cqw/1.25 var(--sans); letter-spacing: -0.02em; color: #f3f0ea; padding-bottom: 0.1em; }
.sf6-txt.big { font-weight: 800; font-size: 5.6cqw; letter-spacing: -0.05em; }
.sf6-txt .caret { width: 0.07em; height: 1em; margin-left: 0.08em; vertical-align: -0.14em; }
.sf6-tl { position: absolute; left: calc(50% - min(88.9vh, 82vw) / 2); width: min(88.9vh, 82vw); top: calc(13vh + min(50vh, 46.1vw) + 3vh); height: 15vh; }
.sf6-ruler { position: absolute; left: 0; right: 0; top: 2.6vh; height: 2.2vh; background: repeating-linear-gradient(to right, #b3ada2 0 1px, transparent 1px 11px); }
.sf6-chips { position: absolute; left: 0; right: 0; top: 6.6vh; height: 6.4vh; display: flex; gap: 0.5%; }
.sf6-chip { display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #e4e0d8; font: 500 clamp(10px, 0.95vw, 15px)/1 var(--sans); color: #111; white-space: nowrap; }
.sf6-chip.c0 { width: 10%; } .sf6-chip.c1 { width: 8%; } .sf6-chip.c2 { width: 50%; } .sf6-chip.c3 { width: 16%; } .sf6-chip.c4 { width: 14%; }
.sf6-chip.on { background: #ea4826; color: #fff; }
.sf6-ph { position: absolute; inset: 0; pointer-events: none; }
.sf6-ph i { position: absolute; left: 0; top: 1.4vh; bottom: 0; width: 2px; margin-left: -1px; background: #111; }
.sf6-ph i::before { content: ""; position: absolute; left: -7px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: #111; }

@media (max-width: 900px), (orientation: portrait) and (max-width: 1200px) {
    .sf5-lbl { font-size: 14px; }
    .sf5-lbl.l0, .sf5-lbl.l1, .sf5-lbl.l2, .sf5-lbl.l3, .sf5-lbl.l4 { left: 16px; right: auto; }
    .sf5-lbl.l0 { top: 58vh; } .sf5-lbl.l1 { top: 62.4vh; } .sf5-lbl.l2 { top: 66.8vh; } .sf5-lbl.l3 { top: 71.2vh; } .sf5-lbl.l4 { top: 75.6vh; }
    .sf5-sub { left: 16px; right: 16px; width: auto; bottom: 4vh; text-align: left; }
    .sf6-frames, .sf6-tl { left: 4vw; width: 92vw; }
    .sf6-frames { top: 26vh; }
    .sf6-tl { top: calc(26vh + 51.75vw + 3vh); }
    .sf6-chip { font-size: 9px; border-radius: 8px; }
}

/* the Yuga Design Studio wordmark wherever a text logo sat */
svg.wm { display: block; width: auto; fill: currentColor; overflow: visible; }
.pt-logo svg.wm { height: 9cqw; }
.pz-logo svg.wm { height: 4.6cqmin; }
.sf10-brand svg.wm { height: 3.6cqw; fill: #111; }


/* cursors: one glowing gradient arrow everywhere (gradient #sfCur lives in .sf-defs) */
.sf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sf-cur { overflow: visible; filter: drop-shadow(0 0 2px rgba(255, 196, 140, 0.95)) drop-shadow(0 0 10px rgba(255, 112, 52, 0.7)) drop-shadow(0 0 28px rgba(234, 72, 38, 0.45)); }

/* 08: minimal growth page — one line, five services, the cursor rides it */
.sf8-type { z-index: 7; }
/* split letters lose kerning, so this mid-size heading gets looser tracking and room for the descenders */
.sf8-type .sf-h { font-size: clamp(42px, 5.6vw, 112px); line-height: 1.02; letter-spacing: -0.038em; }
.sf8-type .sf-h em { font-weight: 300; letter-spacing: -0.03em; }
.sf8-chart .ln { fill: none; stroke: #111; stroke-width: 1.6; stroke-linecap: round; }
.sf8-chart .pt circle { fill: #f6f6f4; stroke: #111; stroke-width: 1.6; }
.sf8-chart .pt.on circle { fill: #ea4826; stroke: #ea4826; }
.sf8-chart .pt text { font: 700 clamp(13px, 1.15vw, 20px) var(--sans); letter-spacing: -0.025em; fill: #111; }
.sf8-sub { z-index: 7; top: auto; bottom: 9vh; right: 4vw; width: min(30vw, 440px); }
@media (max-width: 900px), (orientation: portrait) and (max-width: 1200px) {
    .sf8-sub { top: auto; bottom: 7vh; left: 16px; right: 16px; width: auto; }
    .sf8-chart .pt text { font-size: 11px; }
}

/* orange elements glow (filters #sfGlow / #sfAura live in .sf-defs) */
.sf8-chart .ln { stroke: url(#sfLine); stroke-width: 2.6; }
.sf8-chart .pt.on circle { filter: url(#sfDot); }
.sf5-star { filter: drop-shadow(0 0 3px rgba(255, 150, 90, 0.9)) drop-shadow(0 0 10px rgba(234, 72, 38, 0.6)); }
.sf5-chart .ln { stroke-width: 3.4; }
.sf5-dot { box-shadow: 0 0 0 0.45cqw #f3f0ea, 0 0 1.8cqw 0.4cqw rgba(234, 72, 38, 0.75); }
.sf10-seal { background: radial-gradient(circle at 35% 30%, #ffb36b, #ea4826 55%, #b81e0e); box-shadow: 0 0 1.4cqw rgba(255, 106, 43, 0.85), 0 0 4cqw rgba(234, 72, 38, 0.45); }

/* 10: the card — wordmark and address on top, two-weight title, services below, on a warm gradient */
.sf10-card { padding: 3cqw 3.2cqw; background: linear-gradient(150deg, #ff9455 0%, #ea4826 46%, #b81e0e 100%); color: #fff8f2;
    grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; box-shadow: 0 1.6cqw 5cqw rgba(234, 72, 38, 0.35); }
.sf10-brand { grid-column: 1; grid-row: 1; margin: 0; }
.sf10-brand svg.wm { height: 3.4cqw; fill: #fff8f2; }
.sf10-url { grid-column: 2; grid-row: 1; align-self: start; margin: 0; padding-top: 0.3cqw; font: 500 1.05cqw/1 var(--mono); letter-spacing: 0.04em; opacity: 0.8; }
.sf10-title { grid-column: 1 / -1; grid-row: 2; align-self: end; margin: 0; font: 800 5.4cqw/0.96 var(--sans); letter-spacing: -0.058em; color: #fff8f2; }
.sf10-title .lw { font-weight: 250; }
.sf10-pts { grid-column: 1 / -1; grid-row: 3; align-self: end; margin: 2.6cqh 0 0; grid-template-columns: repeat(2, max-content); gap: 0.45cqw 3cqw; }
.sf10-pts li { font: 600 1.2cqw/1.3 var(--sans); letter-spacing: -0.02em; opacity: 0.92; }

/* 10: the screen goes dark once we're inside; a cream envelope carries the orange card */
.sf10-ui aside { display: none; }
.sf10-screen .sf10-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 58%, rgba(234, 72, 38, 0.22), rgba(234, 72, 38, 0) 70%); opacity: 0; pointer-events: none; }
.sf10-env-back { background: #e3dbcd; }
.sf10-flap { background: #d8cebd; }
.sf10-pocket { background: #f1ebe1; }

/* 09 → 10 in one colour story: an orange window, a white plane, a white envelope */
.sf9-city .lit { fill: #ea4826; }
.sf-plane .pl-b { fill: #f6f1e8; }
.sf-plane .pl-k { fill: #ddd5c8; }
.sf10-screen { background: #ea4826; }
.sf10-env-back { background: #e6ddcf; }
.sf10-flap { background: #dcd2c2; }
.sf10-pocket { background: #f6f1e8; }
.sf10-screen .sf10-glow { background: linear-gradient(to bottom, #140604 0%, rgba(20, 6, 4, 0.82) 48%, rgba(20, 6, 4, 0) 100%); }

/* 09 dusk: a dark-to-orange sky glowing at the horizon */
.sf9-sky::after { background:
    radial-gradient(ellipse 85% 55% at 50% 100%, #ff9a52 0%, #ea4826 32%, rgba(234, 72, 38, 0) 72%),
    linear-gradient(to bottom, #120504 0%, #3d0e07 42%, #a8260f 78%, #ea4826 100%); }
/* buildings stay flat black silhouettes against the glowing sky */
.sf9-city .far rect { fill: #1a1a1a; }
.sf9-city .near rect, .sf9-city .glass > rect:first-child { fill: #0b0b0b; }
.sf9-city .win { fill: #222; }
/* the person sits in front of the monitor: their layer stacks above the screen */
.sf10-screen { isolation: isolate; z-index: 1; }   /* the card's own z-index stays inside the screen */
.sf10-front { pointer-events: none; z-index: 2; }
/* 08: nothing waits on the line — each service pops in only when the arrow reaches it */
.sf8-chart .pt > * { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.2, 1.5, 0.4, 1); }
.sf8-chart .pt circle { transform: scale(0); }
.sf8-chart .pt text { transform: translateY(10px); }
.sf8-chart .pt.on > * { opacity: 1; transform: none; }
/* the riding cursor is scaled up, so its glow is kept tighter */
.sf8-cursor .sf-cur { filter: drop-shadow(0 0 1px rgba(255, 196, 140, 0.9)) drop-shadow(0 0 5px rgba(255, 112, 52, 0.55)) drop-shadow(0 0 12px rgba(234, 72, 38, 0.3)); }
/* 01: the full-stop pill beside "Strategy" (sized and placed from the type in JS) */
.sf1-pill { position: absolute; left: 0; top: 0; z-index: 4; border-radius: 99px; background: #ea4826; transform-origin: 0 50%; pointer-events: none; }
/* 10: the envelope is sealed with the same pill */
.sf10-seal { left: calc(50cqw - 3.9cqw); top: calc(34cqh + 63cqh * 0.56 - 1.3cqw); width: 7.8cqw; height: 2.6cqw; border-radius: 99px; background: #ea4826; box-shadow: none; }
/* 01: baseline probe for the full-stop pill */
.sf1-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
/* 10: the seal pill glows like the old wax dot */
.sf10-seal { background: radial-gradient(ellipse 70% 120% at 35% 25%, #ffb36b, #ea4826 55%, #b81e0e); box-shadow: 0 0 1.4cqw rgba(255, 106, 43, 0.85), 0 0 4cqw rgba(234, 72, 38, 0.45); }
/* 05: services as glowing orange gradient buttons — bright core, soft lit rim, warm halo */
.sf5-lbl { z-index: 4; translate: 0 -50%; gap: 0.55em; padding: 0.72em 1.35em 0.72em 1.1em; border-radius: 99px; color: #3a0d03; font-weight: 700;
  background: radial-gradient(120% 150% at 50% 118%, #fff3e6 0%, #ffc596 22%, #ff8a4c 52%, #f05a2c 78%, #e2431f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -10px 18px rgba(255, 240, 226, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(234, 72, 38, 0.18), 0 12px 30px rgba(234, 72, 38, 0.38), 0 0 46px rgba(255, 122, 61, 0.28); }
.sf5-lbl .sf5-star { fill: #fff; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 196, 150, 0.8)); }
/* layout: two columns staggered round the monitor; every other button tucks over its edge */
.sf5-lbl.l0 { right: calc(100% - (var(--mx) - var(--mw) / 2 - var(--mb)) - 1.4vw); top: calc(var(--my) - var(--mh) * 0.14); }
.sf5-lbl.l1 { right: calc(100% - (var(--mx) - var(--mw) / 2 - var(--mb)) + 2.4vw); top: calc(var(--my) + var(--mh) * 0.3); }
.sf5-lbl.l2 { left: calc(var(--mx) + var(--mw) / 2 + var(--mb) - 1.4vw); top: calc(var(--my) - var(--mh) * 0.26); }
.sf5-lbl.l3 { left: calc(var(--mx) + var(--mw) / 2 + var(--mb) + 2.6vw); top: calc(var(--my) + var(--mh) * 0.06); }
.sf5-lbl.l4 { left: calc(var(--mx) + var(--mw) / 2 + var(--mb) - 1.4vw); top: calc(var(--my) + var(--mh) * 0.38); }
@media (max-width: 900px), (orientation: portrait) and (max-width: 1200px) {
    .sf5-lbl { padding: 0.5em 1em 0.5em 0.85em; font-size: 13px; translate: none; }
    .sf5-lbl.l0, .sf5-lbl.l1, .sf5-lbl.l2, .sf5-lbl.l3, .sf5-lbl.l4 { left: 16px; right: auto; }
    .sf5-lbl.l0 { top: 57vh; } .sf5-lbl.l1 { top: 62vh; } .sf5-lbl.l2 { top: 67vh; } .sf5-lbl.l3 { top: 72vh; } .sf5-lbl.l4 { top: 77vh; }
}
/* 05 → 06: the light sweep and the dark it leaves behind */
.sf5-sweep { position: absolute; inset: 0; z-index: 10; overflow: hidden; border-radius: inherit; pointer-events: none; }
.sf5-sweep .wipe { position: absolute; inset: 0; background: #111; display: block; }
.sf5-sweep .bar { position: absolute; top: -10%; bottom: -10%; width: 14%; display: block;
  background: linear-gradient(90deg, rgba(234, 72, 38, 0), rgba(255, 120, 60, 0.85) 38%, #ffd2a8 50%, rgba(255, 120, 60, 0.85) 62%, rgba(234, 72, 38, 0));
  filter: blur(6px); box-shadow: 0 0 60px 20px rgba(234, 72, 38, 0.35); }
/* 06: the preview plays a kinetic-type explainer — black, a drifting orange glow, scroll-driven words */
.sf6-frames .br { display: none; }
.sf6-frames { background: #050505; }
.sf6-vid { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.sf6-vid .bl { position: absolute; display: block; border-radius: 50%; filter: blur(6cqw); mix-blend-mode: screen; opacity: 0.85; }
.sf6-vid .b1 { left: 0; top: 30%; width: 60cqw; height: 55cqh; background: radial-gradient(closest-side, #ea4826, rgba(234, 72, 38, 0)); }
.sf6-vid .b2 { left: 30%; top: 5%; width: 52cqw; height: 60cqh; background: radial-gradient(closest-side, #c4210f, rgba(184, 30, 14, 0)); }
.sf6-vid .b3 { left: 40%; top: 50%; width: 30cqw; height: 50cqh; background: radial-gradient(closest-side, #ff9a52, rgba(255, 154, 82, 0)); }
.sf6-vid .vig { position: absolute; inset: 0; display: block; background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%); }
.sf6-vid .ks { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.sf6-vid .line { margin: 0; color: #fff; white-space: nowrap; }
.sf6-vid .kw { display: inline-block; overflow: hidden; padding: 0.06em 0.04em 0.18em; margin: -0.06em -0.04em -0.18em; vertical-align: top; }
.sf6-vid .kw > span { display: inline-block; will-change: transform; }
.sf6-vid .hot > span { background: linear-gradient(90deg, #ffd2a8, #ff8a4c 45%, #ea4826); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sf6-vid .k0 .line { align-self: flex-start; font: 700 6.4cqw/1.1 var(--sans); letter-spacing: -0.045em; }
.sf6-vid .k1 { align-items: center; }
.sf6-vid .k1 .line { display: flex; flex-direction: column; align-items: center; font: 800 13.5cqw/0.9 var(--sans); letter-spacing: -0.055em; text-align: center; }
.sf6-vid .k1 .row { display: block; white-space: nowrap; }
.sf6-vid .k1 .row.r0 { font-size: 0.62em; font-weight: 600; letter-spacing: -0.04em; margin-bottom: 0.06em; }
.sf6-vid .k1 .c { display: inline-block; overflow: hidden; padding: 0.06em 0.01em 0.16em; margin: -0.06em -0.01em -0.16em; vertical-align: top; }
.sf6-vid .k1 .c > span { display: inline-block; will-change: transform; }
.sf6-vid .k1 .r1 .c > span { background: linear-gradient(180deg, #fff 18%, #ffc9a3 55%, #ff7a3d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sf6-vid .k2 { align-items: center; }
.sf6-vid .k2 .lab { margin: 0 0 2.4cqh; font: 600 1.7cqw/1 var(--mono, monospace); letter-spacing: 0.18em; text-transform: uppercase; color: #ff8a4c; }
.sf6-vid .k2 .roll { position: relative; width: 100%; height: 9cqw; overflow: hidden; }
.sf6-vid .k2 .it { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: 1.4cqw; font: 800 7cqw/1 var(--sans); letter-spacing: -0.05em; color: #fff; white-space: nowrap; }
.sf6-vid .k2 .it b { font: 600 1.8cqw/1 var(--mono, monospace); letter-spacing: 0.05em; color: #ff8a4c; align-self: flex-start; margin-top: 0.6cqw; }
.sf6-vid .k3 { align-items: center; padding: 0 10%; }
.sf6-vid .k3 .line { white-space: normal; text-align: center; font: 600 6cqw/1.12 var(--sans); letter-spacing: -0.045em; }
.sf6-vid .k4 { align-items: center; }
.sf6-vid .k4 .line { font: 800 9cqw/1 var(--sans); letter-spacing: -0.06em; }
.sf6-vid .k4 .url { margin: 3cqh 0 0; font: 500 1.6cqw/1 var(--mono, monospace); letter-spacing: 0.08em; color: #fff; }
/* 03: the lifted post as a deck slide — black, gradient type, an orange-lit orbit of services */
.sf-poster { background: #000; color: #f3f0ea; }
.sf-poster-in { display: block; }
.pz-glow { position: absolute; inset: 0; display: block;
  background: radial-gradient(ellipse 46% 62% at 100% 55%, #ff7a3d 0%, #d4441a 22%, rgba(150, 40, 12, 0.75) 42%, rgba(90, 22, 8, 0.35) 62%, rgba(0, 0, 0, 0) 80%); }
.pz-circles { position: absolute; right: 0; top: 55%; width: 0; height: 0; display: block; }
.pz-circles i { position: absolute; left: 0; top: 0; aspect-ratio: 1; margin: 0; border-radius: 50%; background: none; translate: -50% -50%;
  border: 1px solid rgba(255, 160, 110, 0.22); }
.pz-circles i:nth-child(1) { width: 42cqmin; background: none; }
.pz-circles i:nth-child(2) { width: 74cqmin; background: none; border-color: rgba(255, 160, 110, 0.18); }
.pz-circles i:nth-child(3) { width: 108cqmin; background: none; border-color: rgba(255, 160, 110, 0.14); }
.pz-circles i:nth-child(4) { width: 144cqmin; background: none; border-color: rgba(255, 160, 110, 0.1); }
.pz-top { position: absolute; left: 4.4cqmin; right: 4.4cqmin; top: max(4cqmin, 16cqh);   /* clear of the site's own logo and menu */ display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.pz-logo { color: #f3f0ea; }
.pz-logo svg.wm { height: 3.6cqmin; }
.pz-handle { font: 500 max(6px, 1.25cqmin)/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243, 240, 234, 0.75); }
.pz-l { position: absolute; left: 4.4cqmin; top: 0; bottom: 0; width: 54%; height: auto; padding: 0; display: flex; flex-direction: column; justify-content: center; z-index: 2; }
.pz-kick { margin: 0 0 2.4cqmin; font: 400 max(7px, 1.7cqmin)/1.2 var(--sans); color: rgba(243, 240, 234, 0.7); }
.pz-mast { margin: 0; font: 400 min(6.2cqw, 10.5cqh)/1.02 var(--sans); letter-spacing: -0.035em; }
.pz-mast .w { display: inline-block; padding-bottom: 0.06em; background-clip: text; -webkit-background-clip: text; color: transparent; }
.pz-mast .a { background-image: linear-gradient(90deg, #ffffff, #e9e6e2); }
.pz-mast .b { background-image: linear-gradient(90deg, #c9c6c2, #7f8796); }
.pz-mast .c { background-image: linear-gradient(90deg, #ff9a63, #ea4826 70%, #c4361a); }
.pz-strap { position: static; display: block; margin-top: 3cqmin; max-width: 74%; }
.pz-d { margin: 0; font: 400 max(6px, 1.35cqmin)/1.5 var(--sans); color: rgba(243, 240, 234, 0.6); }
.pz-lines { position: absolute; left: 56%; right: 0; top: 0; bottom: 0; margin: 0; padding: 0; list-style: none; display: block; z-index: 2; }
.pz-lines li { position: absolute; translate: -50% -50%; display: block; padding: 0.75em 1.35em; border-radius: 99px; white-space: nowrap;
  font: 500 max(6px, 1.5cqmin)/1 var(--sans); letter-spacing: -0.01em; color: #f6e7dc;
  background: linear-gradient(180deg, rgba(80, 24, 10, 0.72), rgba(40, 12, 5, 0.72));
  box-shadow: inset 0 0 0 1px rgba(255, 150, 100, 0.42), inset 0 1px 0 rgba(255, 210, 180, 0.18), 0 0 18px rgba(234, 72, 38, 0.18); }
.pz-lines li i { display: none; }
.pz-lines li.hub { left: 36%; top: 58%; font-size: max(8px, 2.1cqmin); padding: 0.8em 1.5em; color: #fff;
  background: linear-gradient(180deg, rgba(120, 36, 14, 0.85), rgba(60, 16, 6, 0.85));
  box-shadow: inset 0 0 0 1px rgba(255, 170, 120, 0.6), 0 0 30px rgba(234, 72, 38, 0.35); }
.pz-lines li.t0 { left: 24%; top: 33%; }
.pz-lines li.t1 { left: 68%; top: 27%; }
.pz-lines li.t2 { left: 72%; top: 47%; }
.pz-lines li.t3 { left: 18%; top: 80%; }
.pz-lines li.t4 { left: 62%; top: 86%; }
.pz-heart { fill: #fff; filter: drop-shadow(0 0 2cqmin rgba(234, 72, 38, 0.6)); z-index: 3; }
/* 03 post: squarer frames (the in-feed slot) keep the split but tighten it */
@container (aspect-ratio < 1.25) {
  .pz-l { width: 50%; }
  .pz-mast { font-size: 5.6cqw; }
  .pz-strap { max-width: 92%; }
  .pz-lines { left: 54%; }
  .pz-lines li { font-size: max(5px, 1.9cqw); padding: 0.65em 1.1em; }
  .pz-lines li.hub { font-size: max(6px, 2.6cqw); }
  .pz-lines li.t0 { left: 40%; }
  .pz-lines li.t3 { left: 36%; }
  .pz-lines li.hub { left: 48%; }
}
/* tall frames (phones): the type sits on top, the orbit lights the lower half */
@container (aspect-ratio < 0.8) {
  .pz-l { left: 6cqw; right: 6cqw; width: auto; top: 22cqh; bottom: auto; justify-content: flex-start; }
  .pz-mast { font-size: 10.5cqw; }
  .pz-kick { font-size: max(8px, 3.4cqw); }
  .pz-d { font-size: max(8px, 3cqw); }
  .pz-top { top: 13cqh; left: 6cqw; right: 6cqw; }
  .pz-glow { background: radial-gradient(ellipse 90% 40% at 100% 82%, #ff7a3d 0%, #d4441a 22%, rgba(150, 40, 12, 0.75) 42%, rgba(90, 22, 8, 0.35) 62%, rgba(0, 0, 0, 0) 82%); }
  .pz-circles { top: 82%; }
  .pz-lines { left: 0; top: 56%; }
  .pz-lines li { font-size: max(8px, 3.1cqw); }
  .pz-lines li.hub { font-size: max(9px, 3.9cqw); left: 44%; top: 46%; }
  .pz-lines li.t0 { left: 28%; top: 19%; }
  .pz-lines li.t1 { left: 70%; top: 6%; }
  .pz-lines li.t2 { left: 76%; top: 30%; }
  .pz-lines li.t3 { left: 26%; top: 72%; }
  .pz-lines li.t4 { left: 66%; top: 84%; }
}
/* 03: the real post lives in the feed tile and in the phone's post slot */
.sf3-tile-hero { position: relative; overflow: hidden; background: #000; }
.ig-slot { position: relative; overflow: hidden; background: #000; }
/* bigger wordmark and handle */
.pz-logo svg.wm { height: 6.2cqmin; }
.pz-handle { font-size: max(6px, 1.6cqmin); }
/* gradient-clipped words need room below for their descenders, or the g and p are cut off */
.pz-mast .w { padding: 0.04em 0.02em 0.24em; margin: -0.04em -0.02em -0.24em; }
@container (aspect-ratio < 0.8) {
  .pz-logo svg.wm { height: 7.5cqw; }
  .pz-handle { font-size: max(7px, 2.6cqw); }
}
/* 08: the ad as a dark product card — full-bleed photo, white type on a fade, a glowing Buy Now */
.sf8-card { width: min(320px, 74vw); aspect-ratio: 4 / 5.5; border-radius: 28px; overflow: visible; background: #111;
  box-shadow: 0 0 0 3px #0b0b0b, 0 0 0 8px rgba(17, 17, 17, 0.06), 0 34px 70px rgba(17, 17, 17, 0.28); }
.sf8-img { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 28px; overflow: hidden; }
/* a progressive blur under the type, then a smoothly eased black fade over it */
.sf8-img::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 1;
  backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 38%, rgba(0, 0, 0, 0.6) 62%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 38%, rgba(0, 0, 0, 0.6) 62%, rgba(0, 0, 0, 0) 100%); }
.sf8-img::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: linear-gradient(to top, rgba(6, 6, 6, 0.94) 0%, rgba(6, 6, 6, 0.86) 14%, rgba(6, 6, 6, 0.68) 27%, rgba(6, 6, 6, 0.45) 39%,
    rgba(6, 6, 6, 0.24) 50%, rgba(6, 6, 6, 0.09) 60%, rgba(6, 6, 6, 0) 70%); }
.sf8-like { position: absolute; z-index: 2; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10, 10, 10, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); }
.sf8-like svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.8; }
.sf8-info { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 18px 18px; color: #fff; }
.sf8-name { margin: 0 !important; font: 700 23px/1.1 var(--sans); letter-spacing: -0.035em; color: #fff; }
.sf8-brand { margin: 5px 0 0; font: 500 13px/1 var(--sans); letter-spacing: 0; color: rgba(255, 255, 255, 0.55); }
.sf8-row { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf8-price { margin: 0 !important; display: flex; align-items: baseline; gap: 8px; }
.sf8-price b { font: 400 36px/1 var(--sans); letter-spacing: -0.045em; color: #fff; }
.sf8-price s { font-size: 13px; color: rgba(255, 255, 255, 0.4); }
/* Buy Now: the glowing orange gradient button */
.sf8-buy { width: auto; height: 48px; padding: 0 20px 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 99px;
  font: 700 15px/1 var(--sans); letter-spacing: -0.02em; color: #3a0d03;
  background: radial-gradient(120% 150% at 50% 118%, #fff3e6 0%, #ffc596 22%, #ff8a4c 52%, #f05a2c 78%, #e2431f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -10px 18px rgba(255, 240, 226, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(234, 72, 38, 0.25), 0 10px 26px rgba(234, 72, 38, 0.55), 0 0 40px rgba(255, 122, 61, 0.45); }
.sf8-buy span { position: relative; z-index: 1; }
.sf8-cart { position: relative; z-index: 1; width: 19px; height: 19px; fill: none; stroke: #3a0d03; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sf8-cart circle { fill: #3a0d03; stroke: none; }
.sf8-ripple { background: rgba(255, 255, 255, 0.6); }
.sf8-toast { right: -22px; top: 70px; z-index: 3; color: #fff; background: #111; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); }
/* 05 buttons: white type on a deeper glowing core, bigger stars */
.sf5-lbl { color: #fff; text-shadow: 0 1px 6px rgba(150, 30, 6, 0.45);
  background: radial-gradient(120% 150% at 50% 118%, #ffc08f 0%, #ff9152 24%, #f6662f 52%, #e94a22 78%, #cf3514 100%); }
.sf5-lbl .sf5-star { width: 1.15em; height: 1.15em; }
/* 08: numbered service pills, clear of the line, popping in as the arrow reaches them */
.sf8-chart .pt text { display: none; }
.sf8-tags { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.sf8-tag { position: absolute; display: flex; align-items: center; gap: 0.6em; padding: 0.42em 1em 0.42em 0.42em; border-radius: 99px; white-space: nowrap;
  font: 600 clamp(13px, 1.05vw, 19px)/1 var(--sans); letter-spacing: -0.02em; color: #111; background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.07), 0 10px 28px rgba(17, 17, 17, 0.09);
  opacity: 0; transform: translateY(10px) scale(0.85); transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.2, 1.5, 0.4, 1); }
.sf8-tag b { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; font: 600 0.62em/1 var(--mono, monospace); letter-spacing: 0;
  color: #fff; background: radial-gradient(circle at 35% 30%, #ffb36b, #ea4826 60%, #c4210f); box-shadow: 0 0 10px rgba(234, 72, 38, 0.5); }
.sf8-tag.on { opacity: 1; transform: none; box-shadow: 0 0 0 1px rgba(234, 72, 38, 0.22), 0 10px 28px rgba(234, 72, 38, 0.16); }
.sf8-tag[data-side="up"] { translate: -50% calc(-100% - 22px); }
.sf8-tag[data-side="dn"] { translate: -50% 22px; }
.sf8-tag[data-edge="end"][data-side="up"] { translate: calc(-100% + 16px) calc(-100% - 22px); }
.sf8-tag[data-edge="end"][data-side="dn"] { translate: calc(-100% + 16px) 22px; }
.sf8-tag[data-edge="start"][data-side="up"] { translate: -16px calc(-100% - 22px); }
.sf8-tag[data-edge="start"][data-side="dn"] { translate: -16px 22px; }
@media (max-width: 900px), (orientation: portrait) and (max-width: 1200px) { .sf8-tag { font-size: 11px; } .sf8-tag[data-side="up"] { translate: -50% calc(-100% - 16px); } .sf8-tag[data-side="dn"] { translate: -50% 16px; } }
/* 03 post: larger supporting type on desktop */
.pz-kick { font-size: max(8px, 2.3cqmin); }
.pz-d { font-size: max(7px, 1.95cqmin); line-height: 1.5; }
.pz-strap { max-width: 82%; }
.pz-handle { font-size: max(7px, 1.8cqmin); }
.pz-lines li { font-size: max(6px, 1.85cqmin); }
.pz-lines li.hub { font-size: max(8px, 2.5cqmin); }
@container (aspect-ratio < 1.25) {
  .pz-lines li { font-size: max(5px, 1.9cqw); }
  .pz-lines li.hub { font-size: max(6px, 2.6cqw); }
}
@container (aspect-ratio < 0.8) {
  .pz-kick { font-size: max(8px, 3.4cqw); }
  .pz-d { font-size: max(8px, 3cqw); }
  .pz-lines li { font-size: max(8px, 3.1cqw); }
  .pz-lines li.hub { font-size: max(9px, 3.9cqw); }
}
/* Instagram home feed, rebuilt from the Figma frame "Instagram Main" (375 x 812): 1 Figma pt = --u */
.sf-ig { --u: calc(100cqw / 375); display: block; padding: 0; background: #fff; color: #262626; font-family: var(--sans); overflow: hidden; }
.sf-ig .igp { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h)); }
.sf-ig .igp > img { display: block; width: 100%; height: 100%; }
.ig-status { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 44); z-index: 2; }
.ig-status .tm { position: absolute; left: calc(var(--u) * 21); top: calc(var(--u) * 13); width: calc(var(--u) * 54); text-align: center; font: 600 calc(var(--u) * 15)/1.2 var(--sans); letter-spacing: -0.02em; color: #171717; }
.ig-bar { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 88); background: #fafafa; box-shadow: 0 calc(var(--u) * 0.33) 0 #a6a6aa; z-index: 1; }
.ig-stories { position: absolute; left: 0; top: calc(var(--u) * 88); width: 100%; height: calc(var(--u) * 98); overflow: hidden; background: #fff; box-shadow: 0 calc(var(--u) * 0.33) 0 rgba(60, 60, 67, 0.29); }
.ig-story { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * 9); width: calc(var(--u) * 62); height: calc(var(--u) * 86); }
.ig-story .ring { position: absolute; left: calc(var(--u) * -1); top: calc(var(--u) * -1); width: calc(var(--u) * 64); height: calc(var(--u) * 64); }
.ig-story .pic { position: absolute; left: calc(var(--u) * 3); top: calc(var(--u) * 3); width: calc(var(--u) * 56); height: calc(var(--u) * 56); }
.ig-story img { display: block; width: 100%; height: 100%; }
.ig-story .nm { position: absolute; left: 50%; top: calc(var(--u) * 67); transform: translateX(-50%); white-space: nowrap; font: 400 calc(var(--u) * 12)/1.2 var(--sans); color: #262626; }
.ig-story .live { position: absolute; left: calc(var(--u) * 18); top: calc(var(--u) * 51); width: calc(var(--u) * 26); height: calc(var(--u) * 16); box-sizing: border-box; display: grid; place-items: center;
  border: calc(var(--u) * 2) solid #fefefe; border-radius: calc(var(--u) * 3); font: 500 calc(var(--u) * 8)/1 var(--sans); letter-spacing: 0.06em; color: #fefefe;
  background: linear-gradient(139.6deg, #c90083 10.8%, #d22463 29.3%, #e10038 93.4%); }
.ig-phead { position: absolute; left: 0; top: calc(var(--u) * 186); width: 100%; height: calc(var(--u) * 54); background: #fff; box-shadow: 0 calc(var(--u) * 0.33) 0 rgba(60, 60, 67, 0.29); }
.ig-phead .un { position: absolute; left: calc(var(--u) * 52); top: calc(var(--u) * 11); font: 600 calc(var(--u) * 13)/calc(var(--u) * 18) var(--sans); letter-spacing: -0.01em; }
.ig-phead .loc { position: absolute; left: calc(var(--u) * 52); top: calc(var(--u) * 30); font: 400 calc(var(--u) * 11)/1.2 var(--sans); }
.sf-ig .ig-slot { position: absolute; left: 0; top: calc(var(--u) * 240); width: 100%; height: calc(var(--u) * 375); aspect-ratio: auto; overflow: hidden; background: #000; }
.ig-count { position: absolute; z-index: 4; left: calc(var(--u) * 327); top: calc(var(--u) * 14); width: calc(var(--u) * 34); height: calc(var(--u) * 26); border-radius: calc(var(--u) * 13);
  display: grid; place-items: center; background: rgba(18, 18, 18, 0.7); font: 400 calc(var(--u) * 12)/1 var(--sans); color: #f9f9f9; }
.ig-pfoot { position: absolute; left: 0; top: calc(var(--u) * 615); width: 100%; height: calc(var(--u) * 147); background: #fff; }
.ig-pfoot p { position: absolute; margin: 0; left: calc(var(--u) * 15); right: calc(var(--u) * 15); color: #262626; }
.ig-pfoot .likes { left: calc(var(--u) * 39); top: calc(var(--u) * 48); font: 400 calc(var(--u) * 13)/calc(var(--u) * 18) var(--sans); white-space: nowrap; }
.ig-pfoot .cap { top: calc(var(--u) * 72); font: 400 calc(var(--u) * 13)/calc(var(--u) * 18) var(--sans); }
.ig-pfoot b { font-weight: 600; }
.ig-pfoot .date { top: calc(var(--u) * 121); font: 400 calc(var(--u) * 11)/1.2 var(--sans); color: rgba(0, 0, 0, 0.4); }
.ig-tabs { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(var(--u) * 79); background: #fafafa; box-shadow: 0 calc(var(--u) * -0.33) 0 #a6a6aa; z-index: 3; }
.ig-tabs .home { position: absolute; left: calc(50% + var(--u) * 0.5); bottom: calc(var(--u) * 9); width: calc(var(--u) * 134); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -67); border-radius: 99px; background: #060606; }
/* 04: iOS home screen, rebuilt from the Figma frame "Home Screen" (402 x 874): 1 Figma pt = --u */
.sf4-home { --u: calc(100cqw / 402); position: absolute; inset: 0; overflow: hidden; background: #2a0904;
  font-family: -apple-system, "SF Pro Text", "SF Pro", system-ui, var(--sans); color: #fff; }
.sf4-home .wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf4-home .st { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 62); }
.sf4-home .st b { position: absolute; left: calc(var(--u) * 16); top: calc(var(--u) * 23); width: calc(var(--u) * 108); text-align: center;
  font: 600 calc(var(--u) * 17)/calc(var(--u) * 22) -apple-system, "SF Pro Text", system-ui, var(--sans); }
.sf4-home .st img { position: absolute; display: block; }
.sf4-home .st .cel { left: calc(var(--u) * 293.2); top: calc(var(--u) * 26.9); width: calc(var(--u) * 19.2); height: calc(var(--u) * 12.23); }
.sf4-home .st .wif { left: calc(var(--u) * 319.4); top: calc(var(--u) * 26.8); width: calc(var(--u) * 17.14); height: calc(var(--u) * 12.33); }
.sf4-home .st .bat { left: calc(var(--u) * 343.54); top: calc(var(--u) * 26.5); width: calc(var(--u) * 27.33); height: calc(var(--u) * 13); }
.sf4-home .ic { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: calc(var(--u) * 64); height: calc(var(--u) * 64); }
.sf4-home .ic > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.sf4-home .ic span { position: absolute; left: 50%; top: calc(var(--u) * 69); transform: translateX(-50%); white-space: nowrap;
  font: 500 calc(var(--u) * 12)/1.2 -apple-system, "SF Pro Text", system-ui, var(--sans); color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.12); }
.sf4-home .ic.dk { top: auto; bottom: calc(var(--u) * 36); }
.sf4-home .is-yuga .plate { position: absolute; left: calc(var(--u) * 7); top: calc(var(--u) * 10); width: calc(var(--u) * 50); height: calc(var(--u) * 45); background: linear-gradient(#313131, #131313); }
.sf4-home .is-yuga .mark { position: absolute; left: calc(var(--u) * 17); top: calc(var(--u) * 11.2); width: calc(var(--u) * 30.95); height: calc(var(--u) * 47.79); display: block; }
.sf4-home .search { position: absolute; left: 50%; bottom: calc(var(--u) * 139); transform: translateX(-50%); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 12);
  display: flex; align-items: center; gap: calc(var(--u) * 3); border-radius: 99px; white-space: nowrap;
  font: 600 calc(var(--u) * 11.5)/1 -apple-system, "SF Pro Text", system-ui, var(--sans); color: #fff;
  background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.sf4-home .search svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; }
.sf4-home .dock { position: absolute; left: calc(var(--u) * 17); right: calc(var(--u) * 17); bottom: calc(var(--u) * 17); height: calc(var(--u) * 102); border-radius: calc(var(--u) * 42);
  background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
/* 04: the Yuga app opens on the dark gradient from Figma (296:269) */
.sf4-appbg { position: absolute; inset: 0; display: block; background: #2e2e2e url("ios/app-bg.webp") center / cover no-repeat; }
.sf4-splash { background: transparent; }
.sf4-splash svg { fill: #f3f0ea; }
.sf4-prog { background: rgba(255, 255, 255, 0.18); }
/* 04: the Yuga app, rebuilt from the Figma frame "Swipe" (393 x 852): 1 Figma pt = --u */
.sf4-view { --u: calc(100cqw / 393); position: absolute; inset: 0; z-index: 2; color: #fff; font-family: var(--sans); }
.sf4-view img { display: block; }
.hv-clip { position: absolute; left: 0; right: 0; top: calc(var(--u) * 135); bottom: 0; overflow: hidden; }
.hv-feed { position: absolute; left: calc(var(--u) * 21); top: calc(var(--u) * 6); width: calc(var(--u) * 348); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 24); will-change: transform; }
.hv-feed > img { width: 100%; object-fit: cover; border-radius: calc(var(--u) * 48); }
.hv-feed > img.s { height: calc(var(--u) * 170); }
.hv-feed > img.l { height: calc(var(--u) * 330); }
.hv-copy { width: calc(var(--u) * 288); font: 400 calc(var(--u) * 12)/1.366 var(--sans); color: #fff; }
.hv-copy p { margin: 0 0 calc(var(--u) * 16.4); }
.hv-copy p:last-child { margin-bottom: 0; }
.hv-head { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 135); }
.hv-head .mk { position: absolute; left: calc(var(--u) * 22); top: calc(var(--u) * 61); width: calc(var(--u) * 64); height: calc(var(--u) * 64); }
.hv-head .wm { position: absolute; left: calc(var(--u) * 157); top: calc(var(--u) * 71); width: calc(var(--u) * 79); height: calc(var(--u) * 44); object-fit: cover; opacity: 0.8; }
.hv-head .btn { position: absolute; left: calc(var(--u) * 307); top: calc(var(--u) * 61); width: calc(var(--u) * 64); height: calc(var(--u) * 64); border-radius: calc(var(--u) * 30);
  display: grid; place-items: center; background: radial-gradient(circle, rgba(62, 56, 56, 0.6), rgba(71, 68, 68, 0.6) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.hv-head .btn img { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.hv-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(var(--u) * 116); border-radius: calc(var(--u) * 40) calc(var(--u) * 40) 0 0; background: #3e3c3a; }
.hv-bar .tb { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * 16); width: calc(var(--u) * 76); height: calc(var(--u) * 60); }
.hv-bar .tb img { position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 12); width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.hv-bar .tb b { position: absolute; left: 50%; top: calc(var(--u) * 41); transform: translateX(-50%); white-space: nowrap; font: 300 calc(var(--u) * 12)/1.2 "Glancyr", var(--sans); color: #8f8f8f; }
.hv-bar .hi { position: absolute; left: calc(var(--u) * 130); top: calc(var(--u) * 103); width: calc(var(--u) * 134); height: calc(var(--u) * 5); border-radius: 99px; background: #161616; }
/* the wireframe that takes over for the desktop reflow shows whole, with no wipe */
.sf4-ui-root .ap > * { clip-path: none; }
/* 04: dock icon is the Haven app (Figma 2002:1019) */
.sf4-home .is-yuga .plate { left: calc(var(--u) * 7); top: calc(var(--u) * 10.2); width: calc(var(--u) * 50); height: calc(var(--u) * 45); background: linear-gradient(#ff6545, #ff2331); }
.sf4-home .is-yuga .mark { left: calc(var(--u) * 8.9); top: calc(var(--u) * 8.1); width: calc(var(--u) * 46.2); height: calc(var(--u) * 53.84); }
/* 04: the Haven app's "Search Nearby" screen, rebuilt from Figma (393 x 852): 1 Figma pt = --u */
.nb { --u: calc(100cqw / 393); overflow: hidden; color: #2d2d2d; font-family: "Glancyr", var(--sans); }
.nb img { display: block; position: absolute; }
.nb-bg { position: absolute; inset: 0; display: block; background: #feeee9; }
.nb .nb-map { left: calc(var(--u) * -116); top: calc(var(--u) * -70); width: calc(var(--u) * 654); height: calc(var(--u) * 1029); will-change: transform; }
.nb-st { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 56); }
.nb-st b { position: absolute; left: calc(var(--u) * 1.5); top: calc(var(--u) * 18); width: calc(var(--u) * 117.5); text-align: center; font: 600 calc(var(--u) * 14)/calc(var(--u) * 20) "DM Sans", var(--sans); letter-spacing: -0.025em; color: #292927; }
.nb-st img { left: calc(var(--u) * 274); top: calc(var(--u) * 21.5); width: calc(var(--u) * 117.5); height: calc(var(--u) * 13); }
/* location header */
.nb-head { position: absolute; left: calc(var(--u) * 7); top: calc(var(--u) * 63); width: calc(var(--u) * 380); height: calc(var(--u) * 98); border-radius: calc(var(--u) * 24); background: #fff; }
.nb-head .pn { left: calc(var(--u) * 24); top: calc(var(--u) * 24); width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.nb-head .lo { position: absolute; left: calc(var(--u) * 56); top: calc(var(--u) * 24); font: 400 calc(var(--u) * 14)/1.4 "Glancyr", var(--sans); letter-spacing: 0.014em; white-space: nowrap; }
.nb-head .lo b { font-weight: 400; display: inline-block; min-width: 1.1em; text-align: center; }
.nb-head .ci { position: absolute; left: calc(var(--u) * 24); top: calc(var(--u) * 48); font: 600 calc(var(--u) * 16)/1.4 "Glancyr", var(--sans); letter-spacing: 0.012em; white-space: nowrap; }
.nb-head .ln { left: calc(var(--u) * 24); top: calc(var(--u) * 74); width: calc(var(--u) * 194.5); height: calc(var(--u) * 1); }
.nb-head .chip { position: absolute; left: calc(var(--u) * 243); top: calc(var(--u) * 24); width: calc(var(--u) * 113); height: calc(var(--u) * 50); border-radius: calc(var(--u) * 12);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); padding-left: calc(var(--u) * 20); box-sizing: border-box;
  font: 400 calc(var(--u) * 14)/1.4 "Glancyr", var(--sans); color: #fff;
  background: radial-gradient(120% 140% at 70% 10%, rgba(255, 250, 249, 0.45), rgba(255, 250, 249, 0) 55%), #f15822; }
.nb-head .chip img { position: absolute; left: calc(var(--u) * 16); top: calc(var(--u) * 15); width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
/* search radius: four soft squircles round the agent */
.nb-radar { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.nb-ring { position: absolute; display: block; }
.nb-ring.r0 { left: calc(var(--u) * 44); top: calc(var(--u) * 217); width: calc(var(--u) * 304.1); height: calc(var(--u) * 298); border-radius: calc(var(--u) * 60);
  background: radial-gradient(90% 80% at 25% 20%, rgba(255, 250, 249, 0.55), rgba(255, 250, 249, 0) 60%), rgba(241, 88, 34, 0.2); }
.nb-ring.r1 { left: calc(var(--u) * 76.24); top: calc(var(--u) * 248.37); width: calc(var(--u) * 240.49); height: calc(var(--u) * 235.26); border-radius: calc(var(--u) * 40);
  background: radial-gradient(90% 80% at 25% 20%, rgba(255, 250, 249, 0.35), rgba(255, 250, 249, 0) 60%), rgba(241, 88, 34, 0.4); }
.nb-ring.r2 { left: calc(var(--u) * 107.61); top: calc(var(--u) * 279.74); width: calc(var(--u) * 176.88); height: calc(var(--u) * 173.4); border-radius: calc(var(--u) * 32);
  background: radial-gradient(90% 80% at 25% 20%, rgba(255, 250, 249, 0.3), rgba(255, 250, 249, 0) 60%), rgba(241, 88, 34, 0.4); }
.nb-ring.r3 { left: calc(var(--u) * 137.23); top: calc(var(--u) * 311.98); width: calc(var(--u) * 118.5); height: calc(var(--u) * 108.92); border-radius: calc(var(--u) * 24);
  background: radial-gradient(90% 80% at 25% 20%, rgba(255, 250, 249, 0.45), rgba(255, 250, 249, 0) 60%), rgba(241, 88, 34, 0.4); }
.nb-pulse { position: absolute; display: block; left: calc(var(--u) * 44); top: calc(var(--u) * 217); width: calc(var(--u) * 304.1); height: calc(var(--u) * 298); border-radius: calc(var(--u) * 60);
  box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(241, 88, 34, 0.7), 0 0 calc(var(--u) * 18) rgba(241, 88, 34, 0.35); }
.nb-agent { position: absolute; left: calc(var(--u) * 158); top: calc(var(--u) * 331); width: calc(var(--u) * 76); height: calc(var(--u) * 70); border-radius: calc(var(--u) * 16); background: #fff; }
.nb-agent img { left: calc(var(--u) * 4); top: calc(var(--u) * 4); width: calc(var(--u) * 68); height: calc(var(--u) * 62); border-radius: calc(var(--u) * 12); object-fit: cover; }
/* property pins */
.nb-pin { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: calc(var(--u) * 79.69); height: calc(var(--u) * 81.96); }
.nb-pin .tail { left: calc(var(--u) * -0.5); top: calc(var(--u) * -0.5); width: calc(var(--u) * 80.69); height: calc(var(--u) * 82.96); }
.nb-pin .ph { left: calc(var(--u) * 4.33); top: calc(var(--u) * 4.33); width: calc(var(--u) * 71.03); height: calc(var(--u) * 64.96); border-radius: calc(var(--u) * 20); object-fit: cover; }
/* property card */
.nb-card { position: absolute; left: calc(var(--u) * 7); bottom: calc(var(--u) * 133); width: calc(var(--u) * 380); height: calc(var(--u) * 148); border-radius: calc(var(--u) * 28); color: #fff;
  background: radial-gradient(80% 120% at 12% 30%, #fde2d6 0%, #f8a98e 18%, #f48158 34%, #f15822 62%), #f15822;
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 30) rgba(4, 6, 15, 0.05); }
.nb-card .ph { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 14); width: calc(var(--u) * 120); height: calc(var(--u) * 120); border-radius: calc(var(--u) * 20); overflow: hidden; background: #bdbdbd; }
.nb-card .ph > img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.nb-card .rt { position: absolute; left: calc(var(--u) * 69); top: calc(var(--u) * 12); height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 4); display: flex; align-items: center; gap: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 4); background: rgba(240, 240, 240, 0.9); font: 400 calc(var(--u) * 10)/1 "Glancyr", var(--sans); color: #2d2d2d; }
.nb-card .rt img { position: static; width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.nb-card .from { position: absolute; left: calc(var(--u) * 150); top: calc(var(--u) * 24); font: 300 calc(var(--u) * 10)/1.4 "Glancyr", var(--sans); letter-spacing: 0.02em; }
.nb-card .nb-price { position: absolute; left: calc(var(--u) * 150); top: calc(var(--u) * 40); font: 600 calc(var(--u) * 24)/1.2 "Glancyr", var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nb-card .nm { position: absolute; left: calc(var(--u) * 150); top: calc(var(--u) * 76); font: 500 calc(var(--u) * 20)/1.2 "Glancyr", var(--sans); white-space: nowrap; }
.nb-card .ar { position: absolute; left: calc(var(--u) * 150); top: calc(var(--u) * 98); font: 300 calc(var(--u) * 14)/1.4 "Glancyr", var(--sans); letter-spacing: 0.014em; white-space: nowrap; }
.nb-card .hr { left: calc(var(--u) * 322); top: calc(var(--u) * 30); width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.nb-card .ct { left: calc(var(--u) * 322); top: calc(var(--u) * 86); width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
/* tab bar */
.nb-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(var(--u) * 118); border-radius: calc(var(--u) * 40) calc(var(--u) * 40) 0 0; background: #fff;
  box-shadow: 0 calc(var(--u) * -6) calc(var(--u) * 24) rgba(4, 6, 15, 0.05); }
.nb-bar .tb { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * 29); width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.nb-bar .tb img { left: 0; top: 0; width: 100%; height: 100%; }
.nb-bar .tb b { position: absolute; left: 50%; top: calc(var(--u) * 29); transform: translateX(-50%); white-space: nowrap; font: 300 calc(var(--u) * 12)/1.2 "Glancyr", var(--sans); color: #2d2d2d; }
.nb-bar .tb.on b { color: #f15822; font-weight: 400; }
.nb-bar .tb.on img { left: calc(var(--u) * 2); top: calc(var(--u) * 2); width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.nb-bar .big { position: absolute; left: calc(var(--u) * 157.5); top: calc(var(--u) * 16); width: calc(var(--u) * 78); height: calc(var(--u) * 62); border-radius: calc(var(--u) * 16);
  background: radial-gradient(110% 120% at 70% 15%, rgba(255, 250, 249, 0.55), rgba(255, 250, 249, 0) 55%), #f15822; }
.nb-bar .big img { left: calc(var(--u) * 25.5); top: calc(var(--u) * 16.9); width: calc(var(--u) * 26.6); height: calc(var(--u) * 28.3); }
/* 04 -> 05: the website page inside the phone screen; it reflows as the screen widens into the browser */
.sf4-site { top: 0; border-radius: inherit; z-index: 3; }
.sf4-site .sf5-chart { clip-path: inset(0% 100% 0% 0%); }
.sf4-site .sf5-tag, .sf4-site .sf5-dot { opacity: 0; }
.sf4-scr { background: #050505; }   /* black behind the screens as they turn and recede */
/* 07: Yuga AI as a real product screen — full-bleed, quiet, one column */
.sf7-chat { position: absolute; inset: 0; z-index: 4; color: #ececee; font-family: var(--sans); overflow: hidden;
  background:
    radial-gradient(150% 78% at 50% 110%, #ff9b56 0%, #fa843f 20%, #ec6c35 33%, #cf5630 44%, rgba(160, 64, 42, 0.85) 54%, rgba(110, 50, 40, 0.6) 63%, rgba(66, 40, 40, 0.32) 73%, rgba(36, 34, 40, 0.1) 83%, rgba(29, 32, 39, 0) 92%),
    linear-gradient(180deg, #1b1e25 0%, #1e2129 60%, #2a2226 100%); }
/* fluted glass: every rib catches light on its left edge and falls into shade on its right */
.sf7-chat::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.012) 4px, rgba(0, 0, 0, 0.03) 10px, rgba(0, 0, 0, 0.13) 17px, rgba(255, 255, 255, 0.05) 18px) 0 0 / 18px 100%; }
.sf7-chat::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 22, 28, 0.55), rgba(20, 22, 28, 0) 22%); }
.sf7-col { z-index: 1; }
.sf7-col { position: absolute; left: 50%; top: 0; bottom: 0; width: min(720px, calc(100% - 40px)); translate: -50% 0; }
.sf7-chat svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* thread */
.sf7-thread { position: absolute; left: 0; right: 0; top: clamp(84px, 13vh, 130px); display: flex; flex-direction: column; }
.sf7-bubble { align-self: flex-end; max-width: min(78%, 520px); margin: 0 0 28px; padding: 12px 18px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font: 400 15px/1.55 var(--sans); color: #ededf0; opacity: 0; }
.sf7-ai { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 500 13px/1.4 var(--sans); }
.sf7-ai .av { display: block; width: 24px; height: 24px; }
.sf7-ai b { font-weight: 600; color: #f2f2f4; }
.sf7-st { display: grid; }
.sf7-st > span { grid-area: 1 / 1; white-space: nowrap; }
.sf7-gen { background: linear-gradient(90deg, #6a6a70 0%, #6a6a70 35%, #e8e8ea 50%, #6a6a70 65%, #6a6a70 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sf7Shine 1.8s linear infinite; }
.sf7-pct { font-style: normal; font-variant-numeric: tabular-nums; }
.sf7-done { color: #85858b; }
@keyframes sf7Shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.sf7-slot { width: min(100%, calc((100vh - 460px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 16px; }
.sf7-acts { display: flex; align-items: center; gap: 2px; margin-top: 10px; width: min(100%, calc((100vh - 460px) * 16 / 9)); }
.sf7-acts b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: rgba(255, 255, 255, 0.8); }
.sf7-acts .up { display: inline-flex; gap: 7px; width: auto; height: 32px; margin-left: auto; padding: 0 13px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.18);
  font: 500 12px/1 var(--sans); color: #fff; background: rgba(20, 20, 24, 0.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* composer */
.sf7-dock { position: absolute; left: 0; right: 0; bottom: clamp(16px, 4vh, 36px); }
.sf7-hello { position: absolute; left: 4px; right: 0; bottom: calc(100% + 28px); text-align: left; }
.sf7-hello .hi { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 400 clamp(18px, 1.5vw, 22px)/1.2 var(--sans); color: #e6e6ea; letter-spacing: -0.01em; }
.sf7-hello .hi img { display: block; width: 26px; height: 26px; }
.sf7-hello h4 { margin: 0; font: 500 clamp(28px, 2.6vw, 38px)/1.12 var(--sans); letter-spacing: -0.03em; color: #fff; }
.sf7-input { position: relative; padding: 18px 14px 12px 20px; border-radius: 22px; background: rgba(16, 16, 19, 0.88); border: 1px solid rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(255, 140, 80, 0.12), 0 0 28px rgba(255, 106, 43, 0.28), 0 0 70px rgba(255, 106, 43, 0.12), 0 24px 60px rgba(0, 0, 0, 0.45); }
.sf7-input::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 160, 110, 0.95), rgba(255, 255, 255, 0.28) 30%, rgba(255, 255, 255, 0.12) 55%, rgba(255, 196, 150, 0.6) 80%, rgba(255, 106, 43, 0.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.sf7-text { position: relative; min-height: 3em; padding-right: 6px; font: 400 16px/1.5 var(--sans); color: #f2f2f4; }
.sf7-ph { position: absolute; left: 3px; top: 0; color: #6c6c73; white-space: nowrap; pointer-events: none; }
.sf7-ph b { display: inline-flex; align-items: center; gap: 2px; margin: 0 4px; font-weight: 600; color: #e9e9ec; }
.sf7-ph b svg { width: 14px; height: 14px; stroke-width: 2.2; }
.sf7-typed { white-space: pre-wrap; }
.sf7-caret { display: inline-block; vertical-align: -0.2em; width: 2px; height: 1.2em; margin-left: 1px; background: #ff6a2b; animation: sfBlink 1s steps(1) infinite; }
.sf7-tools { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.sf7-tb, .sf7-tag { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.09);
  font: 500 13px/1 var(--sans); color: #c4c4ca; white-space: nowrap; }
.sf7-tb.plus { width: 34px; padding: 0; justify-content: center; border: 0; color: #d4d4d8; }
.sf7-tb.plus svg { width: 19px; height: 19px; }
.sf7-mic { display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; color: #d4d4d8; }
.sf7-mic svg { width: 19px; height: 19px; }
.sf7-tag { color: #ffb08a; border-color: rgba(255, 106, 43, 0.32); background: rgba(255, 106, 43, 0.1); }

.sf7-send { position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; margin-left: 4px; border-radius: 50%; background: #3a3a3e; color: #121214; }
.sf7-send .lit { position: absolute; inset: 0; border-radius: inherit; background: #fff; box-shadow: 0 0 18px rgba(255, 255, 255, 0.25); }
.sf7-send svg { position: relative; width: 18px; height: 18px; stroke-width: 2.2; }
.sf7-chips { position: absolute; left: 0; right: 0; top: calc(100% + 18px); display: flex; flex-wrap: wrap; gap: 8px; }
.sf7-chip { padding: 11px 18px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.04); background: rgba(38, 38, 43, 0.82); font: 500 13px/1 var(--sans); color: #8f8f96;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 700px) {
  .sf7-col { width: calc(100% - 32px); }
  .sf7-thread { top: 84px; }
  .sf7-dock { bottom: 84px; }   /* clear of the site's back-to-top button */
  .sf7-bubble { font-size: 14px; margin-bottom: 22px; }
  .sf7-text { min-height: 4.5em; font-size: 15px; }
  .sf7-hello h4 { font-size: 27px; }
  .sf7-hello .hi { font-size: 17px; }
  .sf7-chat::before { background-size: 13px 100%; }
  .sf7-chip { padding: 8px 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sf7-gen { animation: none; } }
/* 07: the service chips light up as glowing gradient buttons, like Buy Now */
.sf7-chip { position: relative; }
.sf7-chip > span { position: relative; z-index: 1; }
.sf7-chip .lit { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 150% at 50% 118%, #fff3e6 0%, #ffc596 22%, #ff8a4c 52%, #f05a2c 78%, #e2431f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -8px 14px rgba(255, 240, 226, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(234, 72, 38, 0.25), 0 8px 22px rgba(234, 72, 38, 0.5), 0 0 34px rgba(255, 122, 61, 0.42); }
.sf7-chips { gap: 10px; }
.sf7-chip { padding: 13px 20px; font: 600 14px/1 var(--sans); letter-spacing: -0.01em; }
@media (max-width: 700px) { .sf7-chip { padding: 10px 14px; font-size: 12.5px; } .sf7-chips { gap: 8px; } }
/* 07: the services list sits on the picture, above the frame */
.sf7-list { z-index: 32; color: #fff; }
/* 03: posts in the deck style — white with orange smoke, or dark with a warm glow */
.pq-white { background: #fff; }
.pq-top { position: absolute; left: 7cqw; right: 7cqw; top: 6cqw; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 2cqw; border-bottom: 1px solid rgba(17, 17, 17, 0.12); }
.pq-top b { display: block; font: 600 2.6cqw/1.2 var(--sans); letter-spacing: -0.01em; }
.pq-top small { display: block; font: 400 2.1cqw/1.25 var(--sans); opacity: 0.6; }
.pq-top svg { width: 3.6cqw; height: 3.6cqw; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pq-blob { position: absolute; right: -24%; bottom: -16%; width: 86%; height: 86%; filter: blur(4.6cqw); transform: rotate(-28deg);
  background: radial-gradient(26% 48% at 38% 52%, rgba(255, 66, 26, 1), rgba(255, 66, 26, 0) 72%),
    radial-gradient(56% 20% at 58% 32%, rgba(255, 108, 58, 0.9), rgba(255, 108, 58, 0) 70%),
    radial-gradient(20% 44% at 74% 62%, rgba(255, 136, 88, 0.85), rgba(255, 136, 88, 0) 70%),
    radial-gradient(52% 26% at 30% 82%, rgba(255, 184, 158, 0.85), rgba(255, 184, 158, 0) 70%); }
.pq-blob::after { content: ""; position: absolute; left: -26%; top: -8%; width: 70%; height: 60%; transform: rotate(52deg);
  background: radial-gradient(50% 28% at 50% 50%, rgba(255, 150, 120, 0.75), rgba(255, 150, 120, 0) 70%); }
.pq-blob.b2 { right: -32%; top: 14%; bottom: auto; width: 76%; height: 66%; }
.pq-h { position: absolute; left: 7cqw; right: 7cqw; top: 21cqw; z-index: 2; font: 400 9.4cqw/0.98 var(--sans); letter-spacing: -0.055em; color: #111; }
.pq-s { position: absolute; left: 7cqw; bottom: 7cqw; z-index: 2; font: 400 3.8cqw/1.15 var(--sans); letter-spacing: -0.03em; }
.pq-swoosh { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 42%; fill: none; stroke: #111; stroke-width: 4.2; stroke-linejoin: miter; stroke-miterlimit: 8; }
/* sunset */
.pq-sun { background: linear-gradient(180deg, #7c2b0c 0%, #451607 30%, #140806 56%, #050505 100%); color: #fff; }
.pq-sun .pq-top { border-color: rgba(255, 255, 255, 0.18); }
.pq-ball { position: absolute; left: 50%; top: 17%; width: 46cqw; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 72%, #ffe58a 0%, #ffb53f 32%, #ff7a1e 64%, #e4461a 100%);
  box-shadow: 0 0 8cqw 2cqw rgba(255, 120, 40, 0.55), 0 0 22cqw rgba(255, 90, 30, 0.35); }
.pq-hills { position: absolute; left: 0; top: 38%; width: 100%; height: 62%; fill: #0a0605; stroke: rgba(255, 150, 70, 0.6); stroke-width: 0.5;
  filter: drop-shadow(0 -1cqw 2.4cqw rgba(255, 110, 40, 0.55)); }
.pq-sun .pq-h { top: auto; bottom: 18cqw; color: #fff; }
/* the first post: white with smoke, big light type, the call to action low */
.pt-a .pq-blob { right: -28%; bottom: -22%; }
.pt-a .pt-logo { position: relative; z-index: 2; }
.pt-a .pt-h { left: 7cqw; right: 7cqw; top: 23cqw; z-index: 2; font: 400 10cqw/0.98 var(--sans); letter-spacing: -0.055em; }
.pt-a .pt-s { bottom: 18.5cqw; z-index: 2; font-size: 3.6cqw; }
.pt-a .pt-btn { bottom: 5cqw; z-index: 2; display: inline-flex; align-items: center; gap: 3cqw; padding: 1.2cqw 1.2cqw 1.2cqw 4.4cqw;
  border: 1px solid rgba(17, 17, 17, 0.16); background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 4cqw/1 var(--sans); }
.pt-a .pt-btn i { display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%;
  background: linear-gradient(140deg, #ff7a45, #ea4826); box-shadow: 0 0 3cqw rgba(234, 72, 38, 0.45); }
.pt-a .pt-btn svg { width: 4.4cqw; height: 4.4cqw; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* 05: the page title is the hero — bigger, with "Development" lit in the orange gradient */
.sf5-h { top: 18cqh; font-size: min(10.5cqw, 16.5cqh); line-height: 0.96; }
.sf5-h .sf5-ln > span { padding-bottom: 0.2em; margin-bottom: -0.2em; }
.sf5-h .sf5-ln:first-child > span { background: linear-gradient(180deg, #111 45%, #4a2116 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sf5-h .lw { font-weight: 300; letter-spacing: -0.05em;
  background: linear-gradient(95deg, #ffb07a 0%, #ff7a3d 28%, #ea4826 58%, #b8220f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0.06em 0.22em rgba(234, 72, 38, 0.28)); }
/* ================================================================ responsive pass: phones & tablets */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1200px) {
    /* statements take the full width (later desktop widths were overriding this) */
    .sf-w4 .sf-stmt, .sf2-sub.sf-stmt { width: auto; }
    .sf-stmt-p { white-space: normal; }
    /* 02: the title fits between the logo's stems (8% each side) */
    .sf2-type .sf-h { font-size: min(100px, 10.4vw); }
}
@media (max-width: 1200px) and (orientation: portrait) {
    /* 04: the line sits right under the heading; the phone settles between it and the list */
    .sf-w4 .sf-sub { top: calc(15vh + 2.12 * clamp(44px, 13vw, 84px) + 22px); bottom: auto; }
    /* 06: the editor sits in the middle of the screen */
    .sf6-frames { top: calc(50vh - (51.75vw + 18vh) / 2 + 3vh); }
    .sf6-tl { top: calc(50vh - (51.75vw + 18vh) / 2 + 3vh + 51.75vw + 3vh); }
}
/* phones held sideways: short screens — the editor sizes to the height, lists move to a right-hand column */
@media (max-height: 500px) and (orientation: landscape) {
    .sf-type { top: 18vh; }
    .sf-h { font-size: clamp(30px, 8.5vh, 48px); }
    .sf2-type .sf-h { font-size: min(48px, 7vw); }
    .sf4-type .sf-h { font-size: 30px; }
    .sf-sub, .sf5-sub, .sf8-sub { left: 16px; right: auto; width: 44vw; top: auto; bottom: 6vh; }
    .sf-subh { font-size: 15px; }
    .sf-index, .sf2-list { left: auto; right: 16px; width: 34vw; bottom: 6vh; }
    .sf-index li { font-size: 13px; padding: 1px 0; }
    .sf6-frames, .sf6-tl { left: calc(50% - min(106.7vh, 82vw) / 2); width: min(106.7vh, 82vw); }
    .sf6-frames { top: 9vh; }
    .sf6-tl { top: calc(9vh + min(60vh, 46.1vw) + 2vh); }
    .sf5-lbl { font-size: 11px; }
    .sf-type { top: 23vh; }
    .sf-index, .sf2-list { right: 80px; }                  /* clear of the site's back-to-top button */
    .sf2-sub { left: 11vw; } .sf2-list { right: 11vw; }   /* 02: inside the logo's stems */
}
/* tablets: phone layouts, tablet-sized type */
@media (min-width: 701px) and (max-width: 900px) and (min-height: 501px), (min-width: 701px) and (max-width: 1200px) and (orientation: portrait) {
    .sf-index li { font-size: 21px; }
    .sf-subh { font-size: 23px; }
    .sf5-lbl { font-size: 16px; }
    .sf8-tag { font-size: 13.5px; }
    .sf6-chip { font-size: 13px; }
    .sf-w4 .sf-sub { top: calc(15vh + 112px); }
}
/* 03: the poster as a tiny feed tile — only the headline and the glow, the small print would just be noise */
@container (max-width: 220px) {
  .pz-strap, .pz-kick, .pz-handle, .pz-lines li:not(.hub), .pz-heart { display: none; }
  .pz-mast { font-size: 9cqw; }
}
/* ================================================================ responsive pass 2 */
/* 05: the service buttons' wrapper is invisible on desktop (the buttons keep their positions round the monitor) */
.sf5-lbls { position: absolute; inset: 0; pointer-events: none; }
@media (max-width: 900px), (orientation: portrait) and (max-width: 1200px) {
    /* 05: on phones and tablets the buttons flow as a centred row of chips under the monitor, like the AI chips */
    .sf5-lbls { inset: auto; left: 16px; right: 16px; top: calc(var(--my) + var(--mh) * 0.5 + var(--mh) * 0.42 + 26px);
      display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; z-index: 4; }
    .sf5-lbls .sf5-lbl { position: relative; left: auto !important; right: auto !important; top: auto !important; translate: none;
      padding: 12px 18px; font: 600 13.5px/1 var(--sans); letter-spacing: -0.01em; }
    .sf5-lbls .sf5-lbl .sf5-star { display: none; }
    .sf5-sub { bottom: calc(4vh + 56px); }               /* clear of the site's back-to-top button */
}
@media (max-width: 1200px) and (orientation: portrait) {
    /* 02: no side bands — a big stacked title, like the AI scene */
    .sf2-type, .sf2-type .sf-h { left: 6vw; right: 6vw; text-align: left; }
    .sf2-type .sf-h { font-size: min(19vw, 170px); line-height: 0.92; }
    .sf2-type .sf-ln { display: block; }
    .sf2-type .sf-ln + .sf-ln { margin-left: 0; }
    .sf2-list, .sf2-sub { left: 6vw; right: 6vw; }
}
/* tablets: every scene title at the same scale as "Cloud Management" */
@media (min-width: 701px) and (max-width: 900px) and (min-height: 501px), (min-width: 701px) and (max-width: 1200px) and (orientation: portrait) {
    .sf-type .sf-h, .sf1-type .sf-h, .sf4-type .sf-h, .sf8-type .sf-h { font-size: clamp(48px, 10vw, 112px); }
    .sf2-type .sf-h { font-size: min(19vw, 170px); }
    .sf-w4 .sf-sub { top: calc(15vh + 2.12 * clamp(48px, 10vw, 112px) + 24px); }
    .sf5-lbls .sf5-lbl { padding: 14px 22px; font-size: 16px; }
    .sf5-lbls { gap: 12px; }
}
/* 03: the poster on tall screens — smaller type that never runs into the orbit, and the tags in a tidy two-column orbit */
@container (aspect-ratio < 0.8) {
  .pz-mast { font-size: min(10.5cqw, 6.2cqh); }
  .pz-kick { font-size: max(8px, min(3.4cqw, 2cqh)); }
  .pz-d { font-size: max(8px, min(3cqw, 1.8cqh)); }
  .pz-lines { top: 60%; bottom: 2%; }
  .pz-lines li { font-size: max(8px, min(3.1cqw, 1.9cqh)); }
  .pz-lines li.hub { font-size: max(9px, min(3.9cqw, 2.4cqh)); left: 50%; top: 44%; }
  .pz-lines li.t0 { left: 27%; top: 12%; }
  .pz-lines li.t1 { left: 73%; top: 12%; }
  .pz-lines li.t2 { left: 27%; top: 74%; }
  .pz-lines li.t3 { left: 73%; top: 74%; }
  .pz-lines li.t4 { left: 50%; top: 94%; }
}
/* the page's featured projects: two roomy cards on tablets instead of three thin ones */
@media (min-width: 701px) and (max-width: 1200px) and (orientation: portrait), (min-width: 769px) and (max-width: 1024px) {
    .featured-projects-section .projects-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
    .featured-projects-section .project-card:nth-child(n+3) { display: none !important; }
    .featured-projects-section .project-card { height: 62vh !important; min-height: 420px !important; max-height: 760px !important; }
    .featured-projects-section .project-card-title { font-size: 20px !important; white-space: nowrap; }
}
/* 02: the two title lines sit side by side on desktop */
.sf2-type .sf-ln { display: inline-block; vertical-align: top; }
.sf2-type .sf-ln + .sf-ln { margin-left: 0.24em; }
@media (max-width: 1200px) and (orientation: portrait) {
    .sf2-type .sf-ln { display: block; }
    .sf2-type .sf-ln + .sf-ln { margin-left: 0; }
}
/* 05 on phones and tablets: small chips, laid out like the AI chips (left-aligned, wrapping) */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1200px) {
    .sf5-lbls { justify-content: flex-start; gap: 7px; left: 16px; right: 16px; }
    .sf5-lbls .sf5-lbl { padding: 8px 13px; font-size: 12px; font-weight: 600; letter-spacing: -0.005em; }
}
@media (min-width: 701px) and (max-width: 900px) and (min-height: 501px), (min-width: 701px) and (max-width: 1200px) and (orientation: portrait) {
    .sf5-lbls { gap: 10px; left: 6vw; right: 6vw; }
    .sf5-lbls .sf5-lbl { padding: 11px 17px; font-size: 14px; }
}

/* 01: the opening line above the dotted brain (the brain fits itself below it) */
.sf1-intro {
    position: absolute; left: 50%; top: clamp(92px, 13vh, 130px); translate: -50% 0; z-index: 6;
    width: min(calc(100% - 40px), 860px); margin: 0; text-align: center;
    font: 600 clamp(22px, 3.1vw, 46px)/1.14 var(--sans); letter-spacing: -0.025em; color: #f2f2f2;
    text-wrap: balance;
}
.sf1-intro em { font-style: normal; }
.sf1-intro .sf1-hl {
    background: linear-gradient(100deg, #ffc49a 0%, #ff7a3d 35%, #ea4826 62%, #ff9a5e 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 700px) {
    .sf1-intro { top: 96px; font-size: clamp(22px, 6.4vw, 30px); line-height: 1.18; }
}

/* phones & tablets (portrait): bottom-placed text stays clear of the browser's bottom toolbar.
   The stage is 100vh tall (toolbar hidden); --sfb is how much of it the toolbar can cover (100vh - 100svh). */
@media (orientation: portrait) and (max-width: 1200px) {
    .sf-live .sf-stage { --sfb: 0px; }
    @supports (height: 100svh) { .sf-live .sf-stage { --sfb: calc(100vh - 100svh); } }
    .sf-index, .sf9-board { bottom: calc(max(24px, 3vh) + var(--sfb)); }
    .sf-sub { bottom: calc(9vh + 205px + var(--sfb)); }
    .sf5-sub { bottom: calc(4vh + 56px + var(--sfb)); }
    .sf8-sub { bottom: calc(7vh + var(--sfb)); }
    .sfx-line { bottom: calc(7vh + var(--sfb)); }
    .sf7-dock { bottom: calc(clamp(16px, 4vh, 36px) + var(--sfb)); }
}