/* ==========================================================================
   Wizzio Designs — main stylesheet
   Brand: #F25023 (Wizzio orange) on warm black (logo ink #1A1A1A)
   ========================================================================== */

:root {
  /* Brand */
  --brand: #F25023;
  --brand-hi: #FF7A45;
  --brand-lo: #C93A12;
  --brand-glow: rgba(242, 80, 35, .55);
  --ink: #1A1A1A;

  /* Surfaces (warm black) */
  --bg: #0A0807;
  --bg-2: #100C0A;
  --surface: #15100D;
  --surface-2: #1D1612;
  --line: rgba(255, 214, 196, .09);
  --line-2: rgba(255, 214, 196, .16);

  /* Text */
  --text: #F7F0EB;
  --text-2: #C9BDB5;
  --muted: #8F837B;

  /* Type */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout */
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 22px;
  --radius-sm: 14px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 1000;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 999px;
  transition: top .2s;
}
.skip:focus { top: 16px; }

/* Film grain over everything */
body::after {
  content: "";
  position: fixed; inset: -50%;
  z-index: 900; pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(80px, 12vw, 160px); }
.section--tight { padding-block: clamp(56px, 8vw, 104px); }

/* Section frame: corner ticks + mono label (from the reference) */
.frame {
  position: absolute; inset: 28px var(--gutter) auto; height: 14px;
  pointer-events: none; max-width: calc(var(--wrap) - 2 * var(--gutter)); margin-inline: auto;
}
.frame::before, .frame::after {
  content: ""; position: absolute; top: 0; width: 22px; height: 10px;
  border-top: 1px solid var(--line-2);
}
.frame::before { left: 0; border-left: 1px solid var(--line-2); }
.frame::after { right: 0; border-right: 1px solid var(--line-2); }
.frame span {
  position: absolute; top: -6px; font: 500 10px/1 var(--mono); letter-spacing: .32em;
  text-transform: uppercase; color: var(--muted); opacity: .7;
}
.frame span:first-child { left: 34px; }
.frame span:last-child { right: 34px; }
.frame i { position: absolute; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.frame i:first-of-type { left: 120px; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-2);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(242, 80, 35, .16), rgba(242, 80, 35, .04));
  border: 1px solid rgba(242, 80, 35, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px rgba(242, 80, 35, .2), 0 0 12px var(--brand);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(242, 80, 35, 0), 0 0 18px var(--brand); } }

.display {
  font-weight: 600;
  font-size: clamp(2.6rem, 7.2vw, 6.6rem);
  line-height: .96;
  letter-spacing: -.048em;
}
.h2 {
  font-weight: 600;
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.h3 { font-weight: 600; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.accent {
  background: linear-gradient(100deg, #FFB08A 0%, var(--brand-hi) 30%, var(--brand) 60%, #FF8A5B 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: sheen 6s ease-in-out infinite;
}
.accent .char, .accent .word { background: inherit; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@keyframes sheen { 50% { background-position: 100% 0; } }

.head { display: grid; gap: 20px; justify-items: start; margin-bottom: clamp(40px, 6vw, 72px); }
.head--center { justify-items: center; text-align: center; margin-inline: auto; }
.head--center .lead { margin-inline: auto; }
.head--split { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 32px 64px; }
.head--split > :last-child { justify-self: end; }
@media (max-width: 860px) {
  .head--split { grid-template-columns: 1fr; }
  .head--split > :last-child { justify-self: start; }
}

/* SplitText masks */
.line-mask { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }

/* ---------- Buttons ---------- */
.btn {
  --h: 54px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--h); padding: 0 8px 0 24px;
  border-radius: 999px;
  font-weight: 500; font-size: 15px; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .5s var(--ease-out), box-shadow .4s, background .3s, color .3s;
  will-change: transform;
}
.btn__label { position: relative; display: inline-block; overflow: hidden; }
.btn__label span { display: block; transition: transform .5s var(--ease-out); }
.btn__label span + span { position: absolute; inset: 0; transform: translateY(110%); }
.btn:hover .btn__label span:first-child { transform: translateY(-110%); }
.btn:hover .btn__label span + span { transform: translateY(0); }
.btn__icon {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  transition: transform .5s var(--ease-out), background .3s;
}
.btn__icon svg { width: 16px; height: 16px; }
.btn:hover .btn__icon { transform: rotate(-45deg); }

.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #FF7445 0%, var(--brand) 48%, #DE4416 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 6px rgba(120, 20, 0, .35),
    0 10px 30px -8px var(--brand-glow),
    0 0 0 1px rgba(255, 140, 100, .35);
}
.btn--primary .btn__icon { background: rgba(255, 255, 255, .16); }
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 6px rgba(120, 20, 0, .35), 0 16px 44px -8px rgba(242, 80, 35, .8), 0 0 0 1px rgba(255, 160, 120, .5); }
.btn--ghost {
  color: var(--text);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn--ghost .btn__icon { background: rgba(255, 255, 255, .06); }
.btn--ghost:hover { border-color: rgba(242, 80, 35, .5); background: rgba(242, 80, 35, .08); }
.btn--sm { --h: 44px; font-size: 14px; padding: 0 6px 0 18px; }
.btn--sm .btn__icon { width: 32px; height: 32px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--text-2);
  transition: color .3s, gap .4s var(--ease-out);
}
.link-arrow svg { width: 14px; height: 14px; transition: transform .4s var(--ease-out); }
.link-arrow:hover { color: var(--brand-hi); gap: 12px; }

/* ---------- Glass card ---------- */
.card {
  position: relative; isolation: isolate;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(242, 80, 35, .075) 0%, rgba(255, 255, 255, .012) 42%, rgba(255, 255, 255, .02) 100%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -30px rgba(0, 0, 0, .7);
}
/* Mouse-following border light */
.spot::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1px;
  background: radial-gradient(420px circle at var(--x, 50%) var(--y, 0%), rgba(255, 122, 69, .9), rgba(242, 80, 35, .25) 30%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.spot::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(500px circle at var(--x, 50%) var(--y, 0%), rgba(242, 80, 35, .12), transparent 55%);
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.spot:hover::before, .spot:hover::after { opacity: 1; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 16px 0 auto; z-index: 100;
  transition: transform .6s var(--ease-out);
}
.header.is-hidden { transform: translateY(-140%); }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 8px 0 22px;
  border-radius: 999px;
  background: rgba(16, 12, 10, .55);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 40px -20px rgba(0, 0, 0, .6);
  transition: background .4s, border-color .4s;
}
.header.is-scrolled .nav { background: rgba(14, 10, 8, .82); border-color: var(--line-2); }
.logo { display: inline-flex; align-items: center; color: var(--text); }
.logo svg { height: 30px; width: auto; }
.logo .logo__w { fill: var(--brand); }
.logo .logo__type { fill: currentColor; }
.nav__links { display: flex; gap: 4px; }
.nav__links a {
  position: relative; padding: 8px 14px; border-radius: 999px;
  font-size: 14px; color: var(--text-2); transition: color .3s, background .3s;
}
.nav__links a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.nav__links a[aria-current="page"] { color: var(--text); }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px var(--brand);
}
.nav__cta { display: flex; align-items: center; gap: 8px; }
.burger { display: none; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); position: relative; }
.burger span { position: absolute; left: 15px; right: 15px; height: 1.5px; background: var(--text); transition: transform .5s var(--ease-out), top .5s var(--ease-out); }
.burger span:first-child { top: 19px; }
.burger span:last-child { top: 27px; }
.menu-open .burger span:first-child { top: 23px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 23px; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .nav__links, .nav__cta .btn { display: none; }
  .burger { display: block; }
}

/* Mobile menu — minimal list */
.menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  padding: 108px var(--gutter) max(28px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(90% 40% at 50% 115%, rgba(242, 80, 35, .28), transparent 70%), var(--bg);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .7s var(--ease-out), visibility 0s .7s;
}
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease-out); }
.menu-open { overflow: hidden; }
.menu__label { font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.menu__links { border-top: 1px solid var(--line); }
.menu__links li { border-bottom: 1px solid var(--line); }
.menu__links a {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 2px;
  font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: var(--text-2);
  transform: translateY(14px); opacity: 0;
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out), color .3s;
}
.menu__links small { width: 22px; font: 500 11px var(--mono); letter-spacing: .06em; color: var(--muted); transition: color .3s; }
.menu__links svg { width: 16px; height: 16px; margin-left: auto; color: var(--muted); transition: transform .4s var(--ease-out), color .3s; }
.menu__links a:hover, .menu__links a:focus-visible, .menu__links a[aria-current="page"] { color: var(--text); }
.menu__links a:hover small, .menu__links a[aria-current="page"] small { color: var(--brand); }
.menu__links a:hover svg { transform: translateX(4px) rotate(-45deg); color: var(--brand-hi); }
.menu__links a[aria-current="page"] svg { color: var(--brand); }
.menu-open .menu__links a { transform: none; opacity: 1; }
.menu-open .menu__links li:nth-child(2) a { transition-delay: .04s; }
.menu-open .menu__links li:nth-child(3) a { transition-delay: .08s; }
.menu-open .menu__links li:nth-child(4) a { transition-delay: .12s; }
.menu-open .menu__links li:nth-child(5) a { transition-delay: .16s; }
.menu-open .menu__links li:nth-child(6) a { transition-delay: .2s; }
.menu__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 10px; }
.menu__contact {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  font-size: 15px; color: var(--text); transition: border-color .3s;
}
.menu__contact:hover { border-color: rgba(242, 80, 35, .45); }
.menu__contact small { display: block; font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.menu__icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--brand-hi); background: rgba(242, 80, 35, .12); border: 1px solid rgba(242, 80, 35, .28);
}
.menu__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu__foot .btn { width: 100%; margin-top: 6px; }

/* ---------- Cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 950; pointer-events: none; mix-blend-mode: normal; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor__dot { width: 6px; height: 6px; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.cursor__ring {
  width: 38px; height: 38px; border: 1px solid rgba(255, 160, 120, .45);
  display: grid; place-items: center;
  font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff;
  transition: width .45s var(--ease-out), height .45s var(--ease-out), background .3s, border-color .3s;
}
.cursor__ring span { opacity: 0; transition: opacity .2s; }
.cursor.is-link .cursor__ring { width: 58px; height: 58px; background: rgba(242, 80, 35, .12); border-color: rgba(242, 80, 35, .6); }
.cursor.is-view .cursor__ring { width: 92px; height: 92px; background: var(--brand); border-color: var(--brand); }
.cursor.is-view .cursor__ring span { opacity: 1; }
.cursor.is-view .cursor__dot { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--bg);
}
.preloader__mark { width: min(180px, 40vw); overflow: visible; }
.preloader__mark path { fill: transparent; stroke: var(--brand); stroke-width: 1.2; }
.preloader__count {
  position: absolute; right: var(--gutter); bottom: 28px;
  font-weight: 600; font-size: clamp(3rem, 10vw, 8rem); letter-spacing: -.06em; line-height: 1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.preloader__count sup { font: 500 12px var(--mono); color: var(--brand); vertical-align: top; margin-left: 4px; }
.preloader__meta { position: absolute; left: var(--gutter); bottom: 36px; display: grid; gap: 6px; color: var(--muted); }
.preloader__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, transparent, var(--brand)); box-shadow: 0 0 20px var(--brand); }
.no-js .preloader, .reduced .preloader { display: none; }

/* Page transition wipe */
.wipe {
  position: fixed; inset: 0; z-index: 980; pointer-events: none;
  background: var(--brand);
  transform: translateY(100%);
}
.wipe::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 50%, #FF8A5B, transparent 70%);
}

/* Scroll progress */
.progress { position: fixed; left: 0; top: 0; z-index: 110; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--brand-lo), var(--brand), var(--brand-hi)); box-shadow: 0 0 12px var(--brand); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  padding-top: clamp(140px, 18vw, 200px);
  padding-bottom: clamp(60px, 8vw, 120px);
  min-height: 100svh;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask: linear-gradient(180deg, #000 70%, transparent);
  mask: linear-gradient(180deg, #000 70%, transparent);
}

/* Rounded-tile grid (reference) */
.tiles {
  position: absolute; inset: -2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Crect x='5' y='5' width='62' height='62' rx='16' fill='%23ffffff' fill-opacity='.012' stroke='%23FFD6C4' stroke-opacity='.07'/%3E%3C/svg%3E");
  background-size: 72px 72px;
  background-position: center top;
  -webkit-mask: radial-gradient(70% 60% at 50% 38%, #000 10%, transparent 75%);
  mask: radial-gradient(70% 60% at 50% 38%, #000 10%, transparent 75%);
}
.tiles--lit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Crect x='5' y='5' width='62' height='62' rx='16' fill='%23F25023' fill-opacity='.08' stroke='%23FF7A45' stroke-opacity='.7'/%3E%3C/svg%3E");
  -webkit-mask: radial-gradient(220px circle at var(--mx, 50%) var(--my, 30%), #000, transparent 70%);
  mask: radial-gradient(220px circle at var(--mx, 50%) var(--my, 30%), #000, transparent 70%);
  opacity: 0; transition: opacity .6s;
}
.hero:hover .tiles--lit { opacity: 1; }
.glow {
  position: absolute; left: 50%; top: 62%;
  width: 1100px; height: 700px; transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(242, 80, 35, .32), rgba(242, 80, 35, .08) 45%, transparent 70%);
  filter: blur(20px);
}
.beam {
  position: absolute; left: 50%; top: 0; width: 2px; height: 58%;
  transform: translateX(-50%); transform-origin: top;
  background: linear-gradient(180deg, transparent, rgba(255, 122, 69, .35) 40%, #FF9A6B 92%, #fff);
  box-shadow: 0 0 18px 2px rgba(242, 80, 35, .6);
}
.beam::before {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 280px; height: 90px; transform: translate(-50%, 50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 210, 180, .95), rgba(242, 80, 35, .6) 25%, transparent 70%);
  filter: blur(6px);
}
.beam::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: 520px; height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 170, 130, .9), transparent);
}
.beam__spark { position: absolute; left: -2px; width: 6px; height: 60px; border-radius: 6px; background: linear-gradient(180deg, transparent, #fff); filter: blur(1px); animation: spark 2.8s var(--ease) infinite; }
@keyframes spark { 0% { top: -60px; opacity: 0; } 30% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.hero__inner { position: relative; display: grid; justify-items: center; text-align: center; gap: 28px; }
.hero__title { max-width: 14ch; }
.hero__title .accent { display: inline-block; }
.hero__sub { max-width: 60ch; margin-inline: auto; }
.trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.trust li { display: inline-flex; align-items: center; gap: 10px; }
.trust li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); margin-right: 12px; box-shadow: 0 0 8px var(--brand); }
.trust strong { color: var(--text); font-weight: 500; }

@media (max-width: 620px) {
  .eyebrow { font-size: 10px; letter-spacing: .08em; }
  .hero .beam { opacity: .45; }
  .trust { flex-direction: column; align-items: center; gap: 10px; }
  .trust li + li::before { display: none; }
  .hero .btn-row { justify-content: center; }
}

/* Hero stage — three orbit cards */
.stage {
  position: relative; margin-top: clamp(56px, 8vw, 96px);
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: center; gap: clamp(16px, 2.4vw, 34px);
  perspective: 1400px;
}
.stage__links { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.stage__links path { fill: none; stroke: rgba(255, 170, 130, .25); stroke-width: 1; stroke-dasharray: 3 6; }
.orb-card { position: relative; z-index: 1; padding: 16px; transform-style: preserve-3d; will-change: transform; text-align: left; }
.orb-card--side { min-height: 330px; }
.orb-card--main { min-height: 400px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(242, 80, 35, .25), 0 40px 120px -30px rgba(242, 80, 35, .45); }
.orb-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--text-2);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
}
.chip--brand { color: #FFD3C0; background: rgba(242, 80, 35, .14); border-color: rgba(242, 80, 35, .3); }
.orb-card__screen {
  position: relative; overflow: hidden; border-radius: 16px; height: 210px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(242, 80, 35, .16), transparent 60%), #0D0A08;
  border: 1px solid var(--line);
}
.orb-card--main .orb-card__screen { height: 270px; }
.orb-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 14px 14px 14px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.45; color: var(--text-2);
}
.orb-card__foot strong { color: var(--text); font-weight: 500; }
.round-arrow { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--text); transition: background .3s, border-color .3s, transform .4s var(--ease-out); }
.round-arrow svg { width: 14px; height: 14px; }
.orb-card:hover .round-arrow { background: var(--brand); border-color: var(--brand); transform: rotate(-45deg); }

/* Mini browser */
.mini-browser { position: absolute; inset: 18px 18px 0; border-radius: 12px 12px 0 0; background: #15100D; border: 1px solid var(--line-2); border-bottom: 0; overflow: hidden; }
.mini-browser__bar { display: flex; gap: 5px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.mini-browser__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.mini-browser__bar i:first-child { background: var(--brand); }
.mini-browser__body { padding: 14px; display: grid; gap: 8px; }
.sk { height: 8px; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .14), rgba(255, 255, 255, .06)); background-size: 200% 100%; animation: shimmer 2.2s linear infinite; }
.sk--hero { height: 46px; border-radius: 9px; background: linear-gradient(120deg, rgba(242, 80, 35, .5), rgba(242, 80, 35, .12)); animation: none; }
.sk--w60 { width: 60%; } .sk--w40 { width: 40%; } .sk--w80 { width: 80%; }
.sk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.sk-row span { height: 34px; border-radius: 7px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* W orb */
.w-orb { position: absolute; inset: 0; display: grid; place-items: center; }
.w-orb__rings { position: absolute; width: 230px; height: 230px; }
.w-orb__rings circle { fill: none; stroke: rgba(255, 170, 130, .22); }
.w-orb__rings .dash { stroke-dasharray: 2 7; stroke: rgba(255, 170, 130, .45); transform-origin: center; animation: spin 24s linear infinite; }
.w-orb__rings .node { fill: var(--brand); stroke: none; filter: drop-shadow(0 0 6px var(--brand)); }
.w-orb__spin { transform-origin: 115px 115px; animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.w-orb__mark { position: relative; width: 96px; filter: drop-shadow(0 0 22px rgba(242, 80, 35, .7)); }
.w-orb__mark path { fill: url(#wGrad); }
.swatches { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 6px; }
.swatches i { width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .12); }
.type-spec { position: absolute; right: 16px; bottom: 14px; font: 600 26px/1 var(--font); letter-spacing: -.04em; color: rgba(255, 255, 255, .75); }
.type-spec small { display: block; text-align: right; font: 500 9px var(--mono); letter-spacing: .1em; color: var(--muted); margin-top: 4px; }

/* Growth chart */
.growth { position: absolute; inset: 0; padding: 16px; }
.growth > svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; }
.growth .area { fill: url(#gArea); }
.growth .line { fill: none; stroke: var(--brand-hi); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(242, 80, 35, .8)); }
.growth .grid line { stroke: rgba(255, 255, 255, .05); }
.tasks { position: relative; display: grid; gap: 8px; }
.task { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(20, 15, 12, .8); border: 1px solid var(--line); font-size: 12px; color: var(--text-2); backdrop-filter: blur(6px); }
.task b { font-weight: 500; color: var(--text); }
.tick { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(242, 80, 35, .18); color: var(--brand-hi); box-shadow: 0 0 0 1px rgba(242, 80, 35, .35); }
.tick svg { width: 11px; height: 11px; }

@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .stage__links { display: none; }
  .orb-card--main { order: -1; }
  .orb-card--side { min-height: 0; }
}

/* Scroll cue */
.scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; color: var(--muted); }
.scroll-cue span { width: 1px; height: 46px; background: linear-gradient(180deg, var(--brand), transparent); animation: cue 2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ==========================================================================
   CLIENT STRIP
   ========================================================================== */
.clients { padding-block: clamp(48px, 7vw, 88px); }
.clients__label { text-align: center; margin-bottom: 28px; }
.marquee { position: relative; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 16px; will-change: transform; }
.logo-tile {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 250px; height: 96px; padding: 0 24px;
  border-radius: 18px; text-align: center;
  font-weight: 600; font-size: 19px; letter-spacing: -.03em; line-height: 1.1;
  color: rgba(247, 240, 235, .42); filter: grayscale(1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  transition: color .4s, filter .4s, border-color .4s, background .4s;
}
.logo-tile:hover { color: var(--text); filter: none; border-color: rgba(242, 80, 35, .4); background: linear-gradient(180deg, rgba(242, 80, 35, .12), rgba(242, 80, 35, .02)); }
.logo-tile em { display: block; font: 500 10px var(--mono); font-style: normal; letter-spacing: .24em; text-transform: uppercase; margin-top: 6px; opacity: .7; }
.logo-tile--next { flex-direction: row; gap: .3em; border-style: dashed; color: var(--muted); font-weight: 500; font-size: 15px; filter: none; }
.logo-tile--next b { color: var(--brand-hi); font-weight: 500; }

/* ==========================================================================
   SERVICES GRID
   ========================================================================== */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc { display: flex; flex-direction: column; gap: 18px; min-height: 290px; padding: 28px; overflow: hidden; }
.svc__top { display: flex; align-items: center; justify-content: space-between; }
.svc__icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  color: var(--brand-hi);
  background: linear-gradient(180deg, rgba(242, 80, 35, .2), rgba(242, 80, 35, .04));
  border: 1px solid rgba(242, 80, 35, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 30px -10px rgba(242, 80, 35, .5);
  transition: transform .6s var(--ease-out);
}
.svc__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.svc:hover .svc__icon { transform: rotate(-8deg) scale(1.06); }
.svc__num { font: 500 12px var(--mono); color: var(--muted); letter-spacing: .1em; }
.svc h3 { margin-top: auto; }
.svc p { color: var(--text-2); font-size: 15px; line-height: 1.5; }
.svc .link-arrow { margin-top: 4px; }
.svc__bg { position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; z-index: -1; color: rgba(242, 80, 35, .05); transition: color .6s, transform .8s var(--ease-out); }
.svc__bg svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: .6; }
.svc:hover .svc__bg { color: rgba(242, 80, 35, .14); transform: rotate(-10deg) scale(1.08); }
@media (max-width: 1000px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .services { grid-template-columns: 1fr; } .svc { min-height: 0; } }

/* ==========================================================================
   WORK (horizontal on desktop)
   ========================================================================== */
.work { overflow: hidden; }
.work__pin { position: relative; }
.work__track { display: flex; gap: clamp(16px, 2vw, 28px); padding-inline: var(--gutter); width: max-content; will-change: transform; }
.project { position: relative; flex: none; width: clamp(300px, 42vw, 620px); display: grid; gap: 18px; }
.project__cover { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); isolation: isolate; }
.project__cover img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform 1.2s var(--ease-out); }
.project__art { position: absolute; inset: 0 -10%; transition: transform 1.2s var(--ease-out); }
/* The homepage rail slides covers sideways, so they need spare width on both sides */
@media (min-width: 900px) { .work__track .project__cover img { position: absolute; top: 0; left: -5%; width: 110%; max-width: none; } }
.project__cover .art__label { z-index: 2; }
.project:hover .project__art, .project:hover .project__cover img { transform: scale(1.05); }
.project__index { color: #fff; background: rgba(14, 10, 8, .72); border-color: rgba(255, 255, 255, .25); }
.project__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.project__meta h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.project__meta p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.project__index { position: absolute; top: 16px; left: 16px; z-index: 2; }
.work__end { flex: none; width: clamp(260px, 26vw, 360px); display: grid; place-content: center; gap: 20px; text-align: center; justify-items: center; }
.work__end .h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }
@media (max-width: 899px) {
  .work__track { flex-direction: column; width: auto; }
  .project { width: 100%; }
  .work__end { width: 100%; padding-block: 24px; }
}

/* Art-directed CSS covers (placeholders until real photography) */
.art { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.art__mono { font-weight: 600; letter-spacing: -.08em; line-height: .8; }
.art--jewel { background: radial-gradient(80% 70% at 50% 40%, #3A2A12, #120C06 70%); }
.art--jewel .art__mono { font-size: 15rem; color: transparent; -webkit-text-stroke: 1px rgba(232, 196, 120, .7); text-shadow: 0 0 60px rgba(232, 196, 120, .25); }
.art--jewel .art__ring { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(232, 196, 120, .35); box-shadow: 0 0 80px rgba(232, 196, 120, .12) inset; }
.art--jewel .art__ring + .art__ring { width: 72%; border-style: dashed; opacity: .4; }
.art__label { position: absolute; left: 22px; bottom: 20px; font: 500 11px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.art--stationery { background: linear-gradient(145deg, #1B2230, #0D1118); }
.art--stationery .sheet { position: absolute; width: 46%; aspect-ratio: 210 / 297; border-radius: 6px; background: linear-gradient(180deg, #F4F1EC, #E6E1DA); box-shadow: 0 40px 60px -20px rgba(0, 0, 0, .7); transform: rotate(-8deg) translate(-18%, 4%); }
.art--stationery .sheet::before { content: ""; position: absolute; left: 12%; top: 10%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #2B5BD7; }
.art--stationery .sheet::after { content: ""; position: absolute; left: 12%; right: 12%; top: 34%; height: 40%; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 12px); }
.art--stationery .bcard { position: absolute; width: 38%; aspect-ratio: 85 / 55; border-radius: 6px; background: #2B5BD7; transform: rotate(10deg) translate(46%, 46%); box-shadow: 0 30px 50px -16px rgba(0, 0, 0, .8); display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 1.6rem; letter-spacing: -.05em; }
.art--resort { background: linear-gradient(180deg, #F2A15E 0%, #D9623A 38%, #5A2A3A 70%, #1A1220 100%); }
.art--resort .sun { position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; top: 18%; background: radial-gradient(circle, #FFE7C2, #FFB070 60%, transparent 62%); filter: blur(.5px); }
.art--resort .sea { position: absolute; inset: 60% 0 0; background: repeating-linear-gradient(180deg, rgba(255, 210, 170, .18) 0 2px, transparent 2px 14px), linear-gradient(180deg, #3B1E33, #120C16); }
.art--resort .frame-ui { position: absolute; left: 10%; right: 10%; top: 12%; height: 8%; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .3); }
.art--realty { background: linear-gradient(180deg, #11151B, #0A0C10); }
.art--realty .tower { position: absolute; bottom: 0; width: 18%; background: linear-gradient(180deg, #2A313C, #161A21); border: 1px solid rgba(255, 255, 255, .08); background-image: repeating-linear-gradient(180deg, rgba(255, 196, 120, .5) 0 3px, transparent 3px 16px), linear-gradient(180deg, #2A313C, #161A21); background-size: 40% 100%, 100% 100%; background-repeat: repeat-x, no-repeat; background-position: 30% 0, 0 0; }
.art--realty .t1 { left: 18%; height: 70%; } .art--realty .t2 { left: 40%; height: 88%; width: 20%; } .art--realty .t3 { left: 64%; height: 58%; }
.art--realty .wire { position: absolute; inset: 0; background-image: linear-gradient(rgba(242, 80, 35, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 80, 35, .12) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%); }
.art--logistics { background: linear-gradient(135deg, #0E2233, #071019); }
.art--logistics .road { position: absolute; left: -10%; right: -10%; top: 55%; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .6) 0 30px, transparent 30px 60px); transform: rotate(-12deg); }
.art--logistics .art__mono { font-size: 11rem; color: #F2B84B; font-style: italic; letter-spacing: -.1em; text-shadow: 0 20px 60px rgba(242, 184, 75, .3); }
.art--logistics .stripe { position: absolute; left: 0; right: 0; height: 18%; top: 41%; background: linear-gradient(90deg, transparent, rgba(242, 184, 75, .2), transparent); transform: rotate(-12deg); }
.art--event { background: radial-gradient(70% 60% at 30% 30%, #4B1D6B, transparent 60%), radial-gradient(70% 60% at 80% 80%, #F25023, transparent 60%), #120A18; }
.art--event .badge { position: absolute; width: 36%; aspect-ratio: 3 / 4; border-radius: 14px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .25); transform: rotate(-6deg); display: grid; align-content: end; padding: 16px; color: #fff; font-weight: 600; font-size: 1.4rem; line-height: 1; letter-spacing: -.04em; }
.art--event .badge::before { content: ""; position: absolute; top: -8px; left: 50%; width: 30%; height: 16px; margin-left: -15%; border-radius: 4px; background: rgba(255, 255, 255, .3); }

/* ==========================================================================
   WHY WIZZIO
   ========================================================================== */
.why { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.why__sticky { position: sticky; top: 140px; display: grid; gap: 24px; }
.why__big { position: relative; margin-top: 12px; width: min(340px, 80%); aspect-ratio: 1; }
.why__big svg { width: 100%; height: 100%; overflow: visible; }
.why__list { display: grid; }
.why__item { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 32px 0; border-top: 1px solid var(--line); opacity: .28; transition: opacity .6s; }
.why__item:last-child { border-bottom: 1px solid var(--line); }
.why__item.is-active { opacity: 1; }
.why__num { font: 500 13px var(--mono); color: var(--brand); padding-top: 6px; }
.why__item h3 { margin-bottom: 8px; }
.why__item p { color: var(--text-2); }
@media (max-width: 860px) {
  .why { grid-template-columns: 1fr; }
  .why__sticky { position: relative; top: 0; }
  .why__big { display: none; }
  .why__item { opacity: 1; }
}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.process__rail { position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: var(--line-2); }
.process__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--brand-lo), var(--brand), var(--brand-hi)); box-shadow: 0 0 14px var(--brand); }
.step { position: relative; padding-top: 64px; }
.step__node { position: absolute; top: 14px; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); display: grid; place-items: center; transition: border-color .4s, box-shadow .4s; }
.step__node::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: background .4s, box-shadow .4s; }
.step.is-lit .step__node { border-color: var(--brand); box-shadow: 0 0 0 6px rgba(242, 80, 35, .12); }
.step.is-lit .step__node::after { background: var(--brand); box-shadow: 0 0 12px var(--brand); }
.step .card { padding: 26px; height: 100%; }
.step__day { margin-bottom: 18px; }
.step h3 { margin-bottom: 10px; }
.step p { color: var(--text-2); font-size: 15px; }
@media (max-width: 900px) {
  .process { grid-template-columns: 1fr; gap: 12px; padding-left: 44px; }
  .process__rail { left: 13px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .process__fill { transform-origin: top; transform: scaleY(0); }
  .step { padding-top: 0; }
  .step__node { left: -44px; top: 26px; }
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote { display: flex; flex-direction: column; gap: 28px; padding: 30px; }
.quote__stars { display: flex; gap: 3px; color: var(--brand-hi); }
.quote__stars svg { width: 15px; height: 15px; fill: currentColor; }
.quote blockquote { font-size: 1.12rem; line-height: 1.5; letter-spacing: -.01em; color: var(--text); }
.quote figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #7A2008); color: #fff; font-weight: 600; box-shadow: 0 0 0 3px rgba(242, 80, 35, .16); }
.quote figcaption div span { display: block; color: var(--muted); font-size: 13px; }
.reviews-badge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border-radius: 999px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); font-size: 14px; color: var(--text-2); transition: border-color .3s; }
.reviews-badge:hover { border-color: rgba(242, 80, 35, .5); }
.reviews-badge b { color: var(--text); font-weight: 500; }
.reviews-badge .g { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #4285F4; font-weight: 700; font-size: 15px; }
@media (max-width: 960px) { .quotes { grid-template-columns: 1fr; } }

/* ==========================================================================
   INDUSTRIES (kinetic marquee)
   ========================================================================== */
.industries { overflow: hidden; padding-block: clamp(72px, 10vw, 140px); border-block: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(242, 80, 35, .04), transparent); }
.kinetic { display: flex; width: max-content; gap: 0; will-change: transform; }
.kinetic + .kinetic { margin-top: 8px; }
.kinetic span {
  display: inline-flex; align-items: center; gap: clamp(18px, 3vw, 40px); padding-right: clamp(18px, 3vw, 40px);
  font-weight: 600; font-size: clamp(2.6rem, 7vw, 6.5rem); letter-spacing: -.05em; line-height: 1.08; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 214, 196, .28);
  transition: color .4s, -webkit-text-stroke-color .4s;
}
.kinetic--fill span { color: var(--text); -webkit-text-stroke: 0; }
.kinetic span:hover { color: var(--brand); -webkit-text-stroke-color: var(--brand); }
.kinetic span::after { content: ""; width: .32em; height: .32em; border-radius: 30%; background: var(--brand); transform: rotate(45deg); box-shadow: 0 0 24px var(--brand); flex: none; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-wrap .head { position: sticky; top: 140px; }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); transition: border-color .4s, background .4s; }
.faq details[open] { border-color: rgba(242, 80, 35, .35); background: linear-gradient(180deg, rgba(242, 80, 35, .07), transparent 70%), var(--surface); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 24px; cursor: pointer; list-style: none;
  font-weight: 500; font-size: 1.06rem; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__plus { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform .5s var(--ease-out), background .3s, border-color .3s; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--text); }
.faq__plus::after { transform: rotate(90deg); transition: transform .5s var(--ease-out); }
.faq details[open] .faq__plus { background: var(--brand); border-color: var(--brand); transform: rotate(180deg); }
.faq details[open] .faq__plus::after { transform: rotate(0); }
.faq__a { overflow: hidden; }
.faq__a p { padding: 0 24px 24px; color: var(--text-2); max-width: 62ch; }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; } .faq-wrap .head { position: relative; top: 0; } }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.cta { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(72px, 10vw, 140px) var(--gutter); border-radius: clamp(24px, 3vw, 40px); }
.cta__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 50% 110%, rgba(242, 80, 35, .55), rgba(242, 80, 35, .1) 45%, transparent 70%), var(--bg-2); border: 1px solid var(--line); border-radius: inherit; }
.cta__bg .tiles { -webkit-mask: radial-gradient(60% 70% at 50% 100%, #000, transparent 80%); mask: radial-gradient(60% 70% at 50% 100%, #000, transparent 80%); }
.cta__mark { width: clamp(70px, 9vw, 110px); margin: 0 auto 28px; filter: drop-shadow(0 0 30px rgba(242, 80, 35, .8)); }
.cta__mark path { fill: url(#wGrad2); }
.cta .h2 { max-width: 16ch; margin-inline: auto; font-size: clamp(2.4rem, 6vw, 5.4rem); }
.cta .lead { margin: 20px auto 36px; }
.cta .btn-row { justify-content: center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; padding-top: clamp(72px, 10vw, 120px); overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer__brand p { color: var(--text-2); max-width: 34ch; margin-top: 18px; font-size: 15px; }
.footer h4 { font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.footer ul { display: grid; gap: 10px; }
.footer li a, .footer li { font-size: 15px; color: var(--text-2); }
.footer li a { transition: color .3s; }
.footer li a:hover { color: var(--brand-hi); }
.footer__word { margin-top: clamp(56px, 8vw, 96px); line-height: .8; user-select: none; }
.footer__word svg { width: 100%; height: auto; overflow: visible; }
.footer__word path { fill: none; stroke: rgba(255, 214, 196, .14); stroke-width: .6; }
.footer__word .fillpath { fill: url(#footGrad); stroke: none; opacity: .14; }
.footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 24px 0 32px; border-top: 1px solid var(--line); margin-top: -4px; font-size: 13px; color: var(--muted); }
.footer__bar a:hover { color: var(--text); }
.footer__bar nav { display: flex; gap: 20px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }


/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.page-hero { position: relative; overflow: hidden; padding-top: clamp(150px, 18vw, 220px); padding-bottom: clamp(56px, 8vw, 96px); }
.page-hero .hero__bg .tiles { -webkit-mask: radial-gradient(70% 80% at 50% 0%, #000 10%, transparent 75%); mask: radial-gradient(70% 80% at 50% 0%, #000 10%, transparent 75%); }
.page-hero .glow { top: 0; height: 600px; opacity: .8; }
.page-hero__inner { display: grid; gap: 26px; justify-items: start; max-width: 980px; }
.page-hero .display { font-size: clamp(2.4rem, 5.6vw, 5rem); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--muted); }
.crumbs a:hover { color: var(--brand-hi); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.block { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 5vw, 80px); padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.block:first-child { border-top: 0; }
.block__head { display: grid; gap: 14px; align-content: start; position: sticky; top: 130px; }
.block__head .h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.block__head > .eyebrow, .block__head > div { justify-self: start; }
@media (max-width: 860px) { .block { grid-template-columns: 1fr; } .block__head { position: relative; top: 0; } }

.checklist { display: grid; gap: 10px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); }
.checklist li .tick { margin-top: 1px; }
.checklist--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .checklist--2 { grid-template-columns: 1fr; } }

.mini { padding: 24px; display: grid; gap: 8px; align-content: start; }
.mini h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; }
.mini p { color: var(--text-2); font-size: 15px; }
.mini__n { font: 500 11px var(--mono); color: var(--brand); letter-spacing: .1em; margin-bottom: 8px; }

.taglist { display: flex; flex-wrap: wrap; gap: 10px; }
.taglist li { padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); font-size: 15px; color: var(--text-2); transition: border-color .3s, color .3s, background .3s; }
.taglist li:hover { border-color: rgba(242, 80, 35, .5); color: var(--text); background: rgba(242, 80, 35, .08); }

.steps { display: grid; gap: 10px; counter-reset: s; }
.steps li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding: 20px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.steps li::before { counter-increment: s; content: "0" counter(s); font: 500 13px var(--mono); color: var(--brand); padding-top: 3px; }
.steps h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: 4px; }
.steps p { color: var(--text-2); font-size: 15px; }

.pkg { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.pkg__name { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.pkg__price { font-size: 1.9rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.pkg__price small { display: block; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pkg p { color: var(--text-2); font-size: 15px; }
.pkg .btn { margin-top: auto; align-self: flex-start; }
.pkg--feat { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(242, 80, 35, .4), 0 30px 80px -30px rgba(242, 80, 35, .5); }
.note { margin-top: 14px; font-size: 14px; color: var(--muted); }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .related { grid-template-columns: 1fr; } }

/* Services hub */
.cat { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.cat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.svc-hub { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.svc-hub ul { display: grid; gap: 8px; margin-block: 4px 8px; }
.svc-hub li { display: flex; gap: 10px; font-size: 14px; color: var(--text-2); }
.svc-hub li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; margin-top: 9px; background: var(--brand); box-shadow: 0 0 8px var(--brand); }
.svc-hub .btn { margin-top: auto; align-self: flex-start; }

/* Work page filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.filters button { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; color: var(--text-2); transition: all .3s; }
.filters button:hover { color: var(--text); border-color: rgba(242, 80, 35, .5); }
.filters button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 24px -8px var(--brand-glow); }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px) 24px; }
.work-grid .project { width: auto; }
.work-grid .project.is-hidden { display: none; }
.empty { display: none; padding: 48px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--muted); }
.empty.is-shown { display: block; grid-column: 1 / -1; }
@media (max-width: 760px) { .work-grid { grid-template-columns: 1fr; } }

/* Pricing */
.toggle { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); }
.toggle button { height: 40px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text-2); transition: all .35s var(--ease-out); }
.toggle button[aria-pressed="true"] { background: linear-gradient(180deg, #FF7445, var(--brand)); color: #fff; box-shadow: 0 6px 18px -6px var(--brand-glow); }
.ptable { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.ptable th { text-align: left; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 0 22px 8px; }
.ptable td { padding: 20px 22px; background: var(--surface); border-block: 1px solid var(--line); font-size: 15px; }
.ptable td:first-child { border-left: 1px solid var(--line); border-radius: 14px 0 0 14px; font-weight: 500; }
.ptable td:last-child { border-right: 1px solid var(--line); border-radius: 0 14px 14px 0; color: var(--text-2); }
.ptable tr:hover td { background: var(--surface-2); }
.price { font-weight: 600; font-variant-numeric: tabular-nums; }
.price [data-usd] { display: none; }
.usd .price [data-usd] { display: inline; }
.usd .price [data-inr] { display: none; }
@media (max-width: 680px) {
  .ptable thead { display: none; }
  .ptable tr { display: grid; grid-template-columns: 1fr auto; margin-bottom: 8px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
  .ptable td, .ptable td:first-child, .ptable td:last-child { border: 0; border-radius: 0; padding: 14px 16px; }
  .ptable td:first-child { grid-column: 1 / -1; padding-bottom: 0; }
}
.terms { display: grid; gap: 10px; }

/* About */
.founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.founder__stage { position: relative; aspect-ratio: 1 / 1.08; margin: 0; overflow: hidden; border-radius: var(--radius); isolation: isolate; }
.founder__panel { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; background: var(--brand); color: #1A1A1A; container-type: inline-size; }
.founder__name { position: absolute; left: 0; right: 0; top: 6.5%; text-align: center; font-weight: 700; font-size: 31cqw; line-height: .9; letter-spacing: -.05em; white-space: nowrap; color: #D63E14; will-change: transform; }
.founder__mark { position: absolute; left: 4.5%; bottom: 4.5%; width: 7%; }
.founder__mark svg { display: block; width: 100%; height: auto; }
.founder__mark svg path { fill: #1A1A1A; }
.founder__tag { position: absolute; right: 4.5%; bottom: 4.5%; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #F7F0EB; z-index: 2; }
.founder__cut { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; transform-origin: 50% 100%; will-change: transform; }
.founder__text { display: grid; gap: 20px; }
.founder__text p { color: var(--text-2); font-size: 1.1rem; }
.founder__text .sign { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { padding: 32px; }
.stat__n { font-weight: 600; font-size: clamp(3rem, 6vw, 5rem); letter-spacing: -.06em; line-height: 1; }
.stat__n em { font-style: normal; color: var(--brand); }
.stat p { color: var(--text-2); margin-top: 10px; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }

/* Contact */
.contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.form { padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 14px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--line-2);
  font-size: 15px; transition: border-color .3s, background .3s, box-shadow .3s;
  -webkit-appearance: none; appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23C9BDB5' stroke-width='1.5'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.field select option { background: var(--surface); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); background: rgba(242, 80, 35, .05); box-shadow: 0 0 0 4px rgba(242, 80, 35, .14); }
.field fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { cursor: pointer; }
.checks label { position: relative; }
.field .checks input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; pointer-events: none; }
.checks span { display: inline-flex; height: 40px; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font: 400 14px var(--font); letter-spacing: 0; text-transform: none; color: var(--text-2); transition: all .3s; }
.checks input:checked + span { background: rgba(242, 80, 35, .16); border-color: var(--brand); color: var(--text); }
.checks input:focus-visible + span { outline: 2px solid var(--brand-hi); outline-offset: 2px; }
.form .btn { grid-column: 1 / -1; justify-self: start; }
.form__note { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
@media (max-width: 960px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }
.ways { display: grid; gap: 10px; }
.way { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.way__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(242, 80, 35, .12); border: 1px solid rgba(242, 80, 35, .28); color: var(--brand-hi); }
.way__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.way small { display: block; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.way b { font-weight: 500; }
.map { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); aspect-ratio: 16 / 7; filter: grayscale(1) invert(.92) contrast(.9); }
.map iframe { width: 100%; height: 100%; border: 0; }

/* Long-form text: legal pages, blog posts */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; margin: 48px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.2rem; font-weight: 600; margin: 32px 0 10px; }
.prose p, .prose li { color: var(--text-2); font-size: 1.05rem; line-height: 1.7; }
.prose p + p { margin-top: 14px; }
.prose ul { list-style: disc; padding-left: 1.3em; display: grid; gap: 8px; margin: 14px 0; }
.prose a { color: var(--brand-hi); text-decoration: underline; text-underline-offset: 3px; }
.author { display: flex; align-items: center; gap: 14px; }
.filters .chip { height: 40px; padding: 0 16px; font-size: 13px; transition: border-color .3s, color .3s; }
.filters .chip:hover { border-color: rgba(242, 80, 35, .5); color: var(--text); }

/* Thank you */
.center-page { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 140px var(--gutter) 80px; }
.center-page .btn-row { justify-content: center; }

/* ---------- Reveal defaults (JS sets initial state) ---------- */
.js [data-reveal] { opacity: 0; }
.reduced [data-reveal], .no-gsap [data-reveal] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  body::after { animation: none; }
}

/* ==========================================================================
   Showcase (inline SVG wireframes, e.g. Shopify page)
   ========================================================================== */
.block--wide { display: block; }
.showcase { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.shot { display: grid; gap: 14px; align-content: start; }
.shot__frame {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: clamp(10px, 1.4vw, 18px);
  background: radial-gradient(80% 60% at 50% 0%, rgba(242, 80, 35, .14), transparent 70%), var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -30px rgba(0, 0, 0, .7);
  transition: border-color .5s, transform .8s var(--ease-out);
}
.shot__frame svg { width: 100%; height: auto; border-radius: 12px; transition: transform 1s var(--ease-out); }
.shot:hover .shot__frame { border-color: rgba(242, 80, 35, .4); }
.shot:hover .shot__frame svg { transform: scale(1.02); }
.shot figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-inline: 4px; }
.shot figcaption .mini__n { margin: 0; }
.shot figcaption b { font-weight: 600; font-size: 1.05rem; letter-spacing: -.015em; }
.shot figcaption span:last-child { flex-basis: 100%; color: var(--muted); font-size: 14px; }
.shot--shopify-home { grid-column: span 8; }
.shot--shopify-mobile { grid-column: span 4; grid-row: span 2; }
.shot--shopify-mobile .shot__frame { display: grid; place-items: center; height: 100%; }
.shot--shopify-mobile .shot__frame svg { max-width: 300px; border-radius: 0; }
.shot--shopify-product, .shot--shopify-collection { grid-column: span 4; }
@media (max-width: 900px) {
  .shot--shopify-home, .shot--shopify-product, .shot--shopify-collection { grid-column: 1 / -1; }
  .shot--shopify-mobile { grid-column: 1 / -1; grid-row: auto; }
  .shot--shopify-mobile .shot__frame svg { max-width: 260px; }
}

/* ==========================================================================
   About: toolkit tiles + audience cards
   ========================================================================== */
.tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tool {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px;
  align-items: center; padding: 16px; border-radius: 18px;
  transition: transform .6s var(--ease-out), border-color .4s;
}
.tool:hover { transform: translateY(-4px); }
.tool__mono {
  grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  font-weight: 600; font-size: 16px; letter-spacing: -.02em; color: var(--brand-hi);
  background: linear-gradient(180deg, rgba(242, 80, 35, .18), rgba(242, 80, 35, .04));
  border: 1px solid rgba(242, 80, 35, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: background .4s, color .4s, transform .6s var(--ease-out), box-shadow .4s;
}
.tool:hover .tool__mono {
  color: #fff; transform: rotate(-8deg) scale(1.06);
  background: linear-gradient(180deg, #FF7445, var(--brand) 55%, #DE4416);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -8px var(--brand-glow);
}
.tool__name { font-weight: 500; font-size: 15px; letter-spacing: -.01em; align-self: end; }
.tool__cat { font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); align-self: start; }
@media (max-width: 1100px) { .tools { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) {
  .tools { grid-template-columns: repeat(2, 1fr); }
  .tool { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 4px; padding: 16px; }
  .tool__mono { grid-row: auto; width: 40px; height: 40px; font-size: 14px; margin-bottom: 10px; }
}

.auds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.aud {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px;
  min-height: 320px; padding: 30px;
  transition: transform .7s var(--ease-out);
}
.aud:hover { transform: translateY(-6px); }
.aud__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; padding-bottom: 40px; }
.aud__icon { position: relative; display: grid; place-items: center; width: 64px; height: 64px; color: var(--brand-hi); }
.aud__icon::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 80, 35, .28), rgba(242, 80, 35, .06) 70%);
  box-shadow: 0 0 30px -4px rgba(242, 80, 35, .45);
  transition: box-shadow .5s;
}
.aud__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: transform 1.6s var(--ease-out); }
.aud__ring circle { fill: none; stroke: rgba(255, 140, 100, .5); stroke-width: 1; stroke-dasharray: 3 6; }
.aud__glyph { position: relative; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease-out); }
.aud:hover .aud__ring { transform: rotate(180deg); }
.aud:hover .aud__glyph { transform: scale(1.12); }
.aud:hover .aud__icon::before { box-shadow: 0 0 44px 0 rgba(242, 80, 35, .7); }
.aud h3 { position: relative; }
.aud p { position: relative; color: var(--text-2); font-size: 15px; max-width: 30ch; }
.aud__num {
  position: absolute; right: 18px; bottom: -26px; z-index: -1;
  font-weight: 600; font-size: 9rem; line-height: 1; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 214, 196, .08);
  transition: -webkit-text-stroke-color .5s, transform .8s var(--ease-out);
}
.aud:hover .aud__num { -webkit-text-stroke-color: rgba(242, 80, 35, .35); transform: translateY(-8px); }
@media (max-width: 960px) { .auds { grid-template-columns: 1fr; } .aud { min-height: 0; } .aud__top { padding-bottom: 24px; } }

/* ==========================================================================
   Case study pages (/work/<slug>/)
   ========================================================================== */
.case-hero { position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(140px, 16vw, 190px); padding-bottom: clamp(48px, 6vw, 80px); }
.case-hero__media { position: absolute; inset: 0; z-index: -2; }
.case-hero__media video { width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(.9); }
.case-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bg) 18%, rgba(10, 8, 7, .72) 55%, rgba(10, 8, 7, .45)), linear-gradient(0deg, var(--bg), transparent 40%); }
.case-hero__inner { display: grid; gap: 40px; }
.case-hero__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.case-hero__copy { display: grid; gap: 22px; justify-items: start; }
.case-title { font-size: clamp(2.6rem, 6.4vw, 5.8rem); }
.case-sub { font: 500 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-hi); }
.case-logo { position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 1; display: grid; place-items: center; }
.case-logo::before { content: ""; position: absolute; inset: 2%; border-radius: 50%; background: radial-gradient(closest-side, #000 0 58%, rgba(0, 0, 0, .85) 70%, rgba(232, 176, 75, .10) 86%, transparent 100%); box-shadow: 0 0 80px -10px rgba(232, 176, 75, .28); }
.case-logo img {
  position: relative; width: 96%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
}
.case-logo__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(232, 176, 75, .28); animation: spin 40s linear infinite; }
.case-logo__ring::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #E8B04B; box-shadow: 0 0 14px #E8B04B; }
.case-logo__ring--2 { inset: 9%; border-style: dashed; border-color: rgba(242, 80, 35, .3); animation-duration: 26s; animation-direction: reverse; }
.case-logo__ring--2::after { background: var(--brand); box-shadow: 0 0 14px var(--brand); }
.snapshot { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(16, 12, 10, .7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; }
.snapshot div { padding: 20px 22px; border-left: 1px solid var(--line); }
.snapshot div:first-child { border-left: 0; }
.snapshot dt { font: 500 10px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.snapshot dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; }
@media (max-width: 1000px) {
  .case-hero__grid { grid-template-columns: 1fr; }
  .case-logo { width: min(70%, 320px); justify-self: start; order: -1; }
  .snapshot { grid-template-columns: repeat(2, 1fr); }
  .snapshot div { border-left: 0; border-top: 1px solid var(--line); }
  .snapshot div:nth-child(-n+2) { border-top: 0; }
  .snapshot div:nth-child(even) { border-left: 1px solid var(--line); }
  .snapshot div:last-child { grid-column: 1 / -1; border-left: 0; }
}

/* Browser with scroll-linked full-page screenshot */
.browser { position: relative; border-radius: var(--radius); overflow: hidden; background: #0D0A08; border: 1px solid var(--line-2); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(232, 176, 75, .08), 0 40px 120px -60px rgba(232, 176, 75, .35); }
.browser__bar { display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.browser__bar i:first-child { background: var(--brand); }
.browser__url { flex: 1; max-width: 420px; margin: 0 auto; height: 28px; display: grid; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font: 500 12px var(--mono); color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 12px; }
.browser__visit { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); transition: color .3s; }
.browser__visit:hover { color: var(--brand-hi); }
.browser__visit svg { width: 13px; height: 13px; }
.browser__view { position: relative; height: min(72vh, 760px); overflow: hidden; }
.browser__view img { width: 100%; height: auto; will-change: transform; }
.no-gsap .browser__view, .reduced .browser__view { overflow-y: auto; }
@media (max-width: 620px) { .browser__view { height: 62vh; } .browser__url { display: none; } .browser__bar { justify-content: space-between; } }

.case-prose { display: grid; gap: 18px; }
.case-prose p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.65; color: var(--text-2); }
.case-prose p:first-child { color: var(--text); }
.case-step .svc__icon { margin-bottom: 16px; }

/* Palette + type */
.case-style { background: radial-gradient(60% 50% at 50% 0%, rgba(232, 176, 75, .08), transparent 70%); }
.palette-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; }
.swatch { display: grid; gap: 6px; padding: 12px 12px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); transition: transform .6s var(--ease-out); }
.swatch:hover { transform: translateY(-6px); }
.swatch__chip { display: block; aspect-ratio: 4 / 3; border-radius: 12px; margin-bottom: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.swatch b { font-weight: 500; font-size: 15px; padding-inline: 4px; }
.swatch code { font: 500 11px var(--mono); color: var(--muted); padding-inline: 4px; }
.typespecs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.typespec { display: grid; gap: 18px; padding: 28px; min-height: 190px; align-content: space-between; }
.typespec__sample { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.05; color: #F1D08A; }
.typespec:nth-child(2) .typespec__sample { color: var(--text); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.typespec:nth-child(3) .typespec__sample { font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--text-2); }
.typespec__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.typespec__meta span { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); align-self: center; }
@media (max-width: 900px) { .palette-list { grid-template-columns: repeat(3, 1fr); } .typespecs { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .palette-list { grid-template-columns: repeat(2, 1fr); } }

/* Key screens bento */
.screens { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.screen { display: grid; gap: 14px; align-content: start; }
.screen--0 { grid-column: span 7; } .screen--1 { grid-column: span 5; margin-top: 64px; }
.screen--2 { grid-column: span 5; } .screen--3 { grid-column: span 7; margin-top: -64px; }
.screen__frame { overflow: hidden; border-radius: 18px; border: 1px solid var(--line-2); background: #0D0A08; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); transition: border-color .5s, transform .8s var(--ease-out); }
.screen__bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.screen__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.screen__frame img { width: 100%; height: auto; transition: transform 1.2s var(--ease-out); }
.screen:hover .screen__frame { border-color: rgba(232, 176, 75, .45); transform: translateY(-6px); }
.screen:hover .screen__frame img { transform: scale(1.03); }
.screen figcaption, .phone figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-inline: 4px; }
.screen figcaption .mini__n { margin: 0; }
.screen figcaption b { font-weight: 600; font-size: 1.05rem; }
.screen figcaption span:last-child { flex-basis: 100%; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .screen--0, .screen--1, .screen--2, .screen--3 { grid-column: 1 / -1; margin-top: 0; } }

/* Phones */
.case-mobile { overflow: hidden; background: radial-gradient(50% 60% at 50% 60%, rgba(242, 80, 35, .12), transparent 70%); }
.phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 3vw, 44px); padding-block: 40px; }
.phone { display: grid; gap: 16px; justify-items: center; width: min(28%, 300px); }
.phone--1 { margin-top: 64px; }
.phone__body { position: relative; width: 100%; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 40px; border: 8px solid #1B1512; outline: 1px solid var(--line-2); background: #000; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .9), 0 30px 80px -40px rgba(232, 176, 75, .35); }
.phone__body img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone__notch { position: absolute; top: 8px; left: 50%; z-index: 2; width: 34%; height: 22px; margin-left: -17%; border-radius: 999px; background: #000; }
.phone figcaption { color: var(--muted); }
@media (max-width: 620px) { .phones { gap: 10px; } .phone { width: 32%; } .phone__body { border-width: 4px; border-radius: 22px; } .phone__notch { height: 12px; top: 5px; } .phone--1 { margin-top: 32px; } }

/* Film */
.film-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.film-facts div { padding: 10px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); }
.film-facts dt { font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.film-facts dd { margin: 2px 0 0; font-weight: 500; }
.film { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: clamp(18px, 2.4vw, 32px); border: 1px solid var(--line-2); background: #000; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9), 0 40px 140px -60px rgba(232, 176, 75, .4); }
.film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film__play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; gap: 16px; padding: clamp(18px, 3vw, 36px); text-align: left; color: #fff; background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent 45%); transition: opacity .5s, visibility .5s; }
.film__play .mono { align-self: flex-end; margin-bottom: clamp(29px, 3.4vw, 46px); }
.film__btn { position: relative; display: grid; place-items: center; width: clamp(70px, 8vw, 104px); height: clamp(70px, 8vw, 104px); border-radius: 50%; background: linear-gradient(180deg, #FF7445, var(--brand) 55%, #DE4416); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 20px 50px -10px var(--brand-glow); transition: transform .6s var(--ease-out); }
.film__btn::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(255, 160, 120, .5); animation: pulse-ring 2.4s var(--ease) infinite; }
@keyframes pulse-ring { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.film__btn svg { width: 34%; margin-left: 6%; }
.film__play:hover .film__btn { transform: scale(1.08); }
.film.is-playing .film__play { opacity: 0; visibility: hidden; }
.filmstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.filmstrip li { overflow: hidden; border-radius: 14px; border: 1px solid var(--line); aspect-ratio: 16 / 9; }
.filmstrip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out), filter .6s; filter: saturate(.8) brightness(.85); }
.filmstrip li:hover img { transform: scale(1.06); filter: none; }
@media (max-width: 620px) { .filmstrip { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Minimal case study (e.g. /work/melanie-houchens/)
   ========================================================================== */
.micon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--brand-hi); background: rgba(242, 80, 35, .1); border: 1px solid rgba(242, 80, 35, .25); flex: none; }
.micon svg, .chip__i svg, .ptab__i svg, .reel__i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chip__i { display: inline-grid; place-items: center; }
.chip__i svg { width: 13px; height: 13px; }

.mcase-hero { position: relative; overflow: hidden; padding-top: clamp(140px, 16vw, 190px); padding-bottom: clamp(40px, 6vw, 72px); }
.mcase-glow { background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--case, #E21874) 28%, transparent), rgba(242, 80, 35, .08) 45%, transparent 70%); top: 70%; }
.mcase-hero__top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px 64px; align-items: end; margin: 26px 0 40px; }
.mcase-title { font-size: clamp(3rem, 8vw, 7.2rem); }
.mcase-hero__side { display: grid; gap: 18px; justify-items: start; padding-bottom: 10px; }
.mcase-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mcase-chips .chip { height: 32px; padding: 0 12px; font-size: 12px; color: var(--text); }
.mcase-chips .chip__i { color: var(--brand-hi); }
@media (max-width: 900px) { .mcase-hero__top { grid-template-columns: 1fr; } }

/* Logo stage */
.logo-stage {
  position: relative; overflow: hidden; display: grid; place-items: center;
  aspect-ratio: 16 / 7; border-radius: clamp(20px, 3vw, 36px);
  background: radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--case, #E21874) 12%, transparent), transparent 60%), color-mix(in srgb, var(--case, #E21874) 3%, #fff);
  box-shadow: 0 60px 120px -50px color-mix(in srgb, var(--case, #E21874) 45%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .6);
  color: #252525;
}
.logo-stage__guides { position: absolute; inset: 0; pointer-events: none; }
.logo-stage__guides span { position: absolute; background: rgba(37, 37, 37, .07); }
.logo-stage__guides span:nth-child(1) { left: 0; right: 0; top: 30%; height: 1px; }
.logo-stage__guides span:nth-child(2) { left: 0; right: 0; top: 70%; height: 1px; }
.logo-stage__guides span:nth-child(3) { top: 0; bottom: 0; left: 18%; width: 1px; }
.logo-stage__guides span:nth-child(4) { top: 0; bottom: 0; right: 18%; width: 1px; }
.logo-stage__logo { width: var(--lw, min(64%, 760px)); }
.logo-stage__logo svg, .lt__logo svg { width: 100%; height: auto; overflow: visible; }
.lt__mark svg { width: 100%; height: auto; overflow: hidden; border-radius: 50%; }
.logo-stage__tag { position: absolute; left: 24px; bottom: 20px; color: rgba(37, 37, 37, .5); }
.logo-stage__dot { position: absolute; right: 24px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--case, #E21874); box-shadow: 0 0 0 6px color-mix(in srgb, var(--case, #E21874) 15%, transparent); animation: pulse 2.4s var(--ease) infinite; }
@media (max-width: 620px) { .logo-stage { aspect-ratio: 4 / 3; } .logo-stage__logo { width: 82%; } }

.msnap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0 0; }
.msnap div { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.msnap .micon { grid-row: span 2; }
.msnap dt { font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.msnap dd { margin: 0; font-weight: 500; font-size: 15px; }
@media (max-width: 900px) { .msnap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .msnap { grid-template-columns: 1fr; } }

/* Section header: 01 ⟐ Logo ———— */
.mhead { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.mhead__n { font: 500 12px var(--mono); color: var(--brand); letter-spacing: .1em; }
.mhead__t { font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.035em; }
.mhead__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }

/* Logo bento */
.lbento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(120px, auto); gap: 14px; }
.lt { position: relative; overflow: hidden; display: grid; place-items: center; border-radius: 26px; padding: 32px; min-height: 260px; transition: transform .8s var(--ease-out); }
.lt:hover { transform: translateY(-6px); }
.lt__cap { position: absolute; left: 20px; bottom: 16px; opacity: .65; }
.lt--pink { grid-column: span 7; background: radial-gradient(90% 80% at 30% 0%, #F0478F, #E21874 55%, #B90F5C); color: #fff; }
.lt--mark { grid-column: span 5; background: #141414; }
.lt--ink { grid-column: span 5; background: #0B0B0B; border: 1px solid rgba(255, 255, 255, .06); }
.lt--pal { grid-column: span 4; background: var(--surface); border: 1px solid var(--line); place-items: stretch; padding: 18px; }
.lt--type { grid-column: span 3; background: #FBF6F7; color: #252525; place-items: stretch; padding: 18px; gap: 10px; }
.lt__logo { width: min(84%, 520px); }
.lt__logo--white { color: #fff; }
.lt--ink .lt__logo { width: min(78%, 380px); }
.lt__mark { position: relative; z-index: 1; width: min(42%, 170px); filter: drop-shadow(0 20px 40px rgba(226, 24, 116, .45)); transition: transform 1s var(--ease-out); }
.lt--mark:hover .lt__mark { transform: rotate(-8deg) scale(1.06); }
.lt__ring { position: absolute; width: min(70%, 280px); aspect-ratio: 1; border-radius: 50%; border: 1px dashed oklch(83.7% .261 139.9 / .55); animation: spin 30s linear infinite; }
.lt__ring::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: oklch(83.7% .261 139.9); box-shadow: 0 0 14px oklch(83.7% .261 139.9); }
.lt--mark .lt__cap, .lt--ink .lt__cap { color: #fff; }
.mpal { display: grid; gap: 6px; align-content: center; }
.mpal li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 6px; border-radius: 12px; transition: background .3s; }
.mpal li:hover { background: rgba(255, 255, 255, .04); }
.mpal span { width: 34px; height: 34px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.mpal b { font-weight: 500; font-size: 14px; }
.mpal code { font: 500 10px var(--mono); color: var(--muted); }
.mtype { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.mtype > span:first-child { grid-row: span 2; font-size: 2.6rem; line-height: 1; color: #E21874; }
.mtype b { font-weight: 600; font-size: 14px; }
.mtype .mono { color: rgba(37, 37, 37, .55); font-size: 10px; }
@media (max-width: 1000px) {
  .lt--pink, .lt--mark, .lt--ink { grid-column: span 6; }
  .lt--pink { grid-column: 1 / -1; }
  .lt--pal, .lt--type { grid-column: span 6; }
}
@media (max-width: 620px) { .lt--pink, .lt--mark, .lt--ink, .lt--pal, .lt--type { grid-column: 1 / -1; } .lt { min-height: 200px; } }

/* Website showcase: browser + phones + page tabs */
.wshow { position: relative; padding-right: clamp(0px, 14vw, 200px); }
.wshow__view { height: min(66vh, 640px); background: #fff; }
.wshow__view img { animation: pagescroll var(--dur, 22s) ease-in-out 1.2s infinite alternate; transition: opacity .35s; }
.wshow__view:hover img { animation-play-state: paused; }
.wshow__view img.is-swapping { opacity: 0; }
@keyframes pagescroll { to { transform: translateY(var(--dist, 0px)); } }
.wshow__phones { position: absolute; right: 0; bottom: -40px; display: flex; align-items: flex-end; gap: 14px; pointer-events: none; }
.mphone { position: relative; width: clamp(120px, 15vw, 210px); aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 32px; border: 6px solid #1B1512; outline: 1px solid var(--line-2); background: #000; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 30px 80px -40px color-mix(in srgb, var(--case, #E21874) 45%, transparent); }
.mphone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mphone--1 { margin-bottom: 70px; }
.ptabs { display: grid; grid-template-columns: repeat(var(--tabs, 5), 1fr); gap: 12px; margin-top: clamp(56px, 7vw, 84px); }
.ptab { display: grid; gap: 10px; padding: 8px 8px 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); text-align: left; transition: border-color .3s, transform .5s var(--ease-out), background .3s; }
.ptab img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 11px; opacity: .6; transition: opacity .4s; }
.ptab > span { display: flex; align-items: center; gap: 8px; padding-inline: 4px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.ptab__i { color: var(--muted); display: inline-grid; }
.ptab__i svg { width: 15px; height: 15px; }
.ptab:hover { transform: translateY(-4px); }
.ptab:hover img { opacity: .9; }
.ptab[aria-selected="true"] { border-color: var(--case, #E21874); background: linear-gradient(180deg, color-mix(in srgb, var(--case, #E21874) 12%, transparent), transparent 70%), var(--surface); }
.ptab[aria-selected="true"] img { opacity: 1; }
.ptab[aria-selected="true"] > span { color: var(--text); }
.ptab[aria-selected="true"] .ptab__i { color: var(--case-hi, #F0478F); }
@media (max-width: 900px) {
  .wshow { padding-right: 0; }
  .wshow__phones { display: none; }
  .ptabs { grid-template-columns: repeat(var(--tabs, 5), minmax(140px, 1fr)); overflow-x: auto; padding-bottom: 6px; margin-top: 16px; scroll-snap-type: x mandatory; }
  .ptab { scroll-snap-align: start; }
}

/* Reels */
.reels { display: flex; justify-content: center; gap: clamp(20px, 5vw, 80px); flex-wrap: wrap; }
.reel { display: grid; gap: 16px; justify-items: center; }
.reel:nth-child(2) { margin-top: 60px; }
.reel__phone { position: relative; width: clamp(220px, 24vw, 300px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 40px; border: 8px solid #1B1512; outline: 1px solid var(--line-2); background: #000; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9), 0 40px 100px -40px color-mix(in srgb, var(--case, #E21874) 55%, transparent); }
.reel__phone video { width: 100%; height: 100%; object-fit: cover; }
.reel__sound { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .2); transition: background .3s, transform .4s var(--ease-out); }
.reel__sound:hover { background: var(--case, #E21874); transform: scale(1.08); }
.reel__i { display: grid; }
.reel__i--on, .reel.is-sound .reel__i--off { display: none; }
.reel.is-sound .reel__i--on { display: grid; }
.reel figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.reel figcaption .mini__n { margin: 0; color: var(--case-hi, #F0478F); }
.reel figcaption b { font-weight: 600; }
.reel figcaption .mono { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
@media (max-width: 620px) { .reel:nth-child(2) { margin-top: 0; } }

/* Minimal case: Meet the client */
.mabout { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.mabout__quote { position: relative; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--case, #E21874) 22%, transparent), transparent 60%), var(--surface); border: 1px solid var(--line); overflow: hidden; }
.mabout__quote::before { content: "“"; position: absolute; right: 24px; top: -30px; font: 400 12rem/1 Georgia, serif; color: color-mix(in srgb, var(--case, #E21874) 20%, transparent); }
.mabout__quote blockquote { position: relative; font-family: var(--quote-font, serif); font-weight: 500; font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.14; letter-spacing: -.01em; color: var(--text); }
.mabout__quote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 26px; }
.mabout__quote figcaption b { font-weight: 600; }
.mabout__quote figcaption .mono { color: var(--case-hi, #F0478F); font-size: 11px; }
.mabout__side { display: grid; gap: 22px; }
.mfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mfact { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, transform .5s var(--ease-out); }
.mfact:hover { border-color: color-mix(in srgb, var(--case, #E21874) 45%, transparent); transform: translateY(-3px); }
.mfact .micon { color: var(--case-hi, #F0478F); background: color-mix(in srgb, var(--case, #E21874) 10%, transparent); border-color: color-mix(in srgb, var(--case, #E21874) 28%, transparent); }
.mfact b { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 2px; }
.mfact span { font-size: 13px; line-height: 1.45; color: var(--muted); }
@media (max-width: 900px) { .mabout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .mfacts { grid-template-columns: 1fr; } }

/* Minimal case: shared accent, dark logo stage, film header */
.mcase .mcase-chips .chip__i, .mcase .mhead__n { color: var(--case-hi); }
.mcase .mhead .micon, .mcase .msnap .micon { color: var(--case-hi); background: color-mix(in srgb, var(--case) 10%, transparent); border-color: color-mix(in srgb, var(--case) 28%, transparent); }
.mcase-hero { isolation: isolate; }
.mcase-media { z-index: -2; }
.mcase-media video { opacity: .22; }
.logo-stage--dark { background: radial-gradient(60% 80% at 50% 50%, #000 0 45%, transparent 75%), radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--case) 22%, transparent), transparent 65%), #070605; box-shadow: 0 60px 120px -50px color-mix(in srgb, var(--case) 45%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--case) 22%, transparent); color: var(--text); }
.logo-stage--dark .logo-stage__guides span { background: color-mix(in srgb, var(--case) 16%, transparent); }
.logo-stage--dark .logo-stage__logo { width: min(58%, 680px); }
.logo-stage--dark .logo-stage__logo img { width: 100%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 18%, #000 82%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-composite: intersect; }
.logo-stage--dark .logo-stage__tag { color: color-mix(in srgb, var(--case-hi) 60%, transparent); }
.logo-stage--dark .logo-stage__dot { background: var(--case); box-shadow: 0 0 0 6px color-mix(in srgb, var(--case) 18%, transparent); }
.mfilm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.mfilm-head b { font-family: var(--quote-font, inherit); font-weight: 500; font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -.01em; }
@media (max-width: 620px) { .logo-stage--dark .logo-stage__logo { width: 86%; } }

/* Minimal case: raster logo board, social gallery, video grid */
.logo-stage__img { width: 100%; }
.logo-stage__logo:has(.logo-stage__img) { mix-blend-mode: multiply; }
.lt--light { grid-column: span 7; background: #fff; }
.lt__raster { width: min(80%, 560px); height: auto; mix-blend-mode: multiply; }
.lt--light .lt__cap { color: #252525; }
.lt--photo { grid-column: span 5; grid-row: span 2; padding: 0; background: #111; }
.lt--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.lt--photo:hover img { transform: scale(1.04); }
.lt--photo .lt__cap { color: #fff; z-index: 1; }
.lt--palwide { grid-column: span 7; }
.mpal--row { grid-template-columns: 1fr 1fr; column-gap: 18px; }
@media (max-width: 1000px) { .lt--light, .lt--palwide { grid-column: 1 / -1; } .lt--photo { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 5; } }

.sg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .sg { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .sg { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.sg__item { display: block; width: 100%; aspect-ratio: 4 / 5; margin: 0; padding: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); cursor: zoom-in; transition: transform .6s var(--ease-out), border-color .3s, box-shadow .6s; }
.sg__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.sg__item:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--case) 55%, transparent); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--case) 60%, transparent); }
.sg__item:hover img { transform: scale(1.04); }
.lightbox { position: fixed; inset: 0; z-index: 960; display: grid; place-items: center; padding: 24px; background: rgba(5, 4, 3, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(92vw, 900px); max-height: 88vh; width: auto; border-radius: 16px; box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9); cursor: default; }
.lightbox__close { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }

.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.vcard { display: grid; gap: 12px; }
.vcol { display: grid; gap: 28px; min-width: 0; }
.vcard__frame { position: relative; overflow: hidden; aspect-ratio: var(--ar, 9 / 16); border-radius: 26px; border: 1px solid var(--line-2); background: #000; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 30px 90px -50px color-mix(in srgb, var(--case) 55%, transparent); transition: transform .7s var(--ease-out); }
.vcard:hover .vcard__frame { transform: translateY(-6px); }
.vcard__frame video { width: 100%; height: 100%; object-fit: cover; }
.vcard figcaption { display: flex; align-items: center; gap: 10px; padding-inline: 4px; }
.vcard figcaption .mini__n { margin: 0; color: var(--case-hi); }
.vcard figcaption b { font-weight: 600; font-size: 15px; }
.vcard figcaption .mono { margin-left: auto; color: var(--muted); }
.vcard.is-sound .reel__i--off { display: none; } .vcard.is-sound .reel__i--on { display: grid; }
@media (max-width: 900px) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .vgrid { gap: 12px; } .vcol { gap: 18px; } .vcard__frame { border-radius: 18px; } .vcard figcaption b { font-size: 13px; } .vcard figcaption .mono { display: none; } }
.sg__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 900px) { .sg__item:first-child { grid-column: span 3; grid-row: auto; aspect-ratio: 4 / 5; } }
@media (max-width: 560px) { .sg__item:first-child { grid-column: span 2; } }

/* On Time & Delivered: full-bleed colour blocks */
.otd { --g: #456548; --g2: #3F5C42; --ink: #4C4B4E; overflow: clip; }
.otd .otd-c-g, .otd .otd-c-i { color: inherit; }
.otd-logo { display: block; width: 100%; height: auto; }
.otd-ch { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.otd-ch__n { font-size: 12px; opacity: .6; }
.otd-ch .micon { color: inherit; background: transparent; border-color: currentColor; opacity: .75; }
.otd-ch h2 { flex-basis: 100%; margin: 6px 0 0; font-size: clamp(3rem, 9vw, 8.5rem); font-weight: 600; line-height: .98; letter-spacing: -.04em; }
.otd-cap { position: absolute; left: 16px; bottom: 16px; z-index: 1; padding: 7px 13px; border-radius: 99px; font-size: 11px; color: #fff; background: rgba(15, 15, 15, .72); backdrop-filter: blur(8px); }
.otd-shot { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.otd-shot img { display: block; width: 100%; height: auto; }
.otd-shot:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

.otd-hero { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 100svh; padding: 110px 0 28px; overflow: hidden; color: #fff; background: radial-gradient(90% 80% at 25% 40%, #52785A, var(--g2) 70%); }
.otd-hero .crumbs, .otd-hero .crumbs a, .otd-hero .crumbs li { color: rgba(255, 255, 255, .78); }
.otd-hero__clock { position: absolute; right: -14vw; top: 50%; width: min(92vh, 62vw); aspect-ratio: 1; margin-top: calc(min(92vh, 62vw) / -2); color: #fff; opacity: .09; pointer-events: none; }
.otd-big { display: block; width: 100%; height: 100%; }
.otd-hero__logo { position: relative; width: min(84vw, 1180px); margin: auto; }
.otd-facts { position: relative; display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 18px 24px; margin: 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .28); }
.otd-facts > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.otd-facts .micon { grid-row: span 2; color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); }
.otd-facts dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.otd-facts dd { margin: 0; font-size: 15px; font-weight: 500; }

.otd-brand { padding: clamp(70px, 10vw, 140px) 0; color: #232423; background: #fff; }
.otd-brand__logo { width: min(100%, 980px); margin: clamp(50px, 8vw, 110px) auto; }
.otd-brand__logo .otd-c-g { color: var(--g); }
.otd-brand__logo .otd-c-i { color: var(--ink); }
.otd-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.otd-part { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin: 0; padding: 20%; overflow: hidden; border-radius: 24px; }
.otd-part .otd-logo { transition: transform 1s var(--ease-out); }
.otd-part:hover .otd-logo { transform: scale(1.06); }
.otd-part figcaption { position: absolute; left: 20px; bottom: 16px; font-size: 11px; opacity: .75; }
.otd-part--light { color: var(--g); background: #EEF1EC; }
.otd-part--green { color: #fff; background: var(--g); }
.otd-part--ink { color: #fff; background: var(--ink); }
.otd-pal { display: flex; margin-top: 14px; overflow: hidden; border: 1px solid #E3E5E1; border-radius: 24px; }
.otd-pal > div { flex: 1 1 0; min-width: 0; display: grid; gap: 4px; align-content: end; min-height: clamp(110px, 14vw, 190px); padding: 18px 20px; }
.otd-pal b { font-size: 15px; font-weight: 600; }
.otd-pal code { font: 500 11px var(--mono); opacity: .75; }

.otd-card { position: relative; color: #fff; background: #2C4A33; }
.otd-card .otd-ch { position: absolute; left: var(--gutter, 5vw); top: clamp(40px, 6vw, 90px); z-index: 1; width: 40%; }
.otd-card .otd-ch h2 { font-size: clamp(2.4rem, 6vw, 5.5rem); }
.otd-card__img { display: block; width: 100%; height: min(66.7vw, 112vh); object-fit: cover; }

.otd-truck { padding: clamp(70px, 10vw, 140px) 0 clamp(30px, 4vw, 60px); overflow: hidden; color: #232423; background: #fff; }
.otd-truck__stage { width: min(94vw, 1500px); margin: 10px auto 0; }
.otd-truck__img .otd-cap { left: 4%; bottom: 8%; }

.otd-ticker { overflow: hidden; padding: 16px 0; color: #fff; background: var(--g); }
.otd-ticker__track { display: flex; align-items: center; gap: 26px; width: max-content; font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 500; white-space: nowrap; animation: otdTicker 26s linear infinite; }
.otd-ticker svg { width: .9em; height: .9em; fill: currentColor; opacity: .55; }
@keyframes otdTicker { to { transform: translateX(-50%); } }

.otd-covers { padding: clamp(60px, 9vw, 130px) 0; overflow: hidden; background: var(--ink); }
.otd-cover { width: 80%; border-radius: 18px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85); }
.otd-cover img { border-radius: 18px; }
.otd-cover--b { z-index: 1; margin: -5% 0 0 auto; }

.otd-flyer { overflow: hidden; background: var(--g2); }
.otd-flyer__img .otd-cap { left: auto; right: 16px; }

.otd-box { position: relative; height: min(62vw, 100vh); overflow: hidden; background: #111; }
.otd-box img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }

@media (max-width: 900px) {
  .otd-facts { grid-template-columns: repeat(2, 1fr); }
  .otd-parts { gap: 10px; }
  .otd-part { border-radius: 16px; padding: 16%; }
  .otd-part figcaption { left: 10px; bottom: 8px; font-size: 9px; }
}
@media (max-width: 760px) {
  .otd-card .otd-ch { position: static; width: auto; padding: 56px 5vw 28px; }
  .otd-card__img { height: auto; }
  .otd-cover { width: 100%; }
  .otd-cover--b { margin-top: 12px; }
  .otd-cover, .otd-cover img { border-radius: 12px; }
  .otd-cap { left: 10px; bottom: 10px; padding: 4px 10px; font-size: 10px; }
  .otd-pal { border-radius: 16px; }
  .otd-pal > div { padding: 12px; }
  .otd-pal b { font-size: 12px; }
  .otd-pal code { font-size: 9px; }
  .otd-box { height: 72vw; }
}
@media (prefers-reduced-motion: reduce) { .otd-ticker__track { animation: none; } }

/* Yashnandini Jewellers: emerald and gold */
.ynd { --gold: #C9A45C; --teal: #053237; --em: #12322F; --ivory: #F3EEE5; overflow: clip; }
.ynd-ch { position: relative; z-index: 1; display: grid; gap: 8px; }
.ynd-ch__n { font-size: 12px; color: var(--gold); }
.ynd-ch h2 { margin: 0; font-family: "Italiana", Georgia, serif; font-size: clamp(3.4rem, 10vw, 9.5rem); font-weight: 400; line-height: 1; letter-spacing: -.01em; }
.ynd-cap { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 6px 12px; border-radius: 99px; font-size: 11px; color: #F3EEE5; background: rgba(6, 28, 26, .72); backdrop-filter: blur(8px); }
.ynd-shot { position: relative; display: block; width: 100%; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 4px; background: none; cursor: zoom-in; }
.ynd-shot img { display: block; width: 100%; height: auto; transition: transform 1.4s var(--ease-out); }
.ynd-shot:hover img { transform: scale(1.03); }
.ynd-shot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ynd-ring { position: absolute; aspect-ratio: 1; color: var(--gold); pointer-events: none; }
.ynd-ring__svg { display: block; width: 100%; height: 100%; }

.ynd-hero { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: min(100svh, 170vw); padding: 110px 0 28px; overflow: hidden; color: var(--ivory); background: #1A2A22; }
.ynd-hero__bg { position: absolute; inset: -6% 0; }
.ynd-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 16, .35), transparent 22%, transparent 68%, rgba(8, 20, 16, .75)); }
.ynd-hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ynd-hero > .wrap { position: relative; }
.ynd-hero .crumbs, .ynd-hero .crumbs a, .ynd-hero .crumbs li { color: rgba(243, 238, 229, .8); }
.ynd-facts { display: flex; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin: 0; padding-top: 20px; border-top: 1px solid rgba(201, 164, 92, .45); }
.ynd-facts > div { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; }
.ynd-facts .micon { grid-row: span 2; color: var(--gold); background: rgba(8, 20, 16, .35); border-color: rgba(201, 164, 92, .5); }
.ynd-facts dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.ynd-facts dd { margin: 0; font-size: 15px; font-weight: 500; }

.ynd-id { position: relative; padding: clamp(70px, 10vw, 140px) 0; overflow: hidden; color: #1E1B15; background: var(--ivory); }
.ynd-id .ynd-ch__n { color: #8C6E33; }
.ynd-ring--id { right: -12vw; top: -14vw; width: 44vw; color: #C9A45C; opacity: .55; }
.ynd-id__grid { position: relative; display: grid; grid-template-columns: 7fr 3fr; gap: 14px; margin-top: clamp(36px, 5vw, 64px); }
.ynd-pal { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid rgba(30, 27, 21, .14); border-radius: 4px; }
.ynd-pal li { flex: 1; display: grid; align-content: end; gap: 3px; min-height: 84px; padding: 16px 18px; transition: flex-grow .7s var(--ease-out); }
.ynd-pal li:hover { flex-grow: 1.6; }
.ynd-pal b { font-size: 15px; font-weight: 500; }
.ynd-pal code { font: 500 11px var(--mono); opacity: .75; }

.ynd-pack { position: relative; overflow-x: auto; color: var(--ivory); background: radial-gradient(70% 90% at 30% 50%, #1B4640, var(--em)); }
.ynd-pack.is-pinned { overflow: hidden; }
.ynd-rail { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); width: max-content; height: 100svh; padding: 90px var(--gutter) 40px; }
.ynd-rail__intro { position: relative; flex: none; display: grid; place-items: center start; width: min(60vw, 820px); height: 100%; }
.ynd-ring--pack { left: 6%; top: 50%; width: min(70vh, 40vw); margin-top: calc(min(70vh, 40vw) / -2); opacity: .4; }
.ynd-rail__item { flex: none; width: auto; height: min(72vh, 42vw); aspect-ratio: var(--ar); }
.ynd-rail__item img { height: 100%; width: 100%; object-fit: cover; }

.ynd-camp { position: relative; padding: clamp(70px, 10vw, 140px) 0 clamp(80px, 12vw, 180px); overflow: hidden; color: var(--ivory); background: var(--teal); }
.ynd-ring--camp { left: 50%; top: 42%; width: 62vw; margin-left: -31vw; opacity: .22; }
.ynd-camp__grid { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(20px, 5vw, 80px); align-items: start; margin-top: clamp(30px, 4vw, 56px); }
.ynd-camp__b { margin-top: 22%; }

.ynd-poster { background: var(--teal); padding-bottom: clamp(60px, 9vw, 130px); }
.ynd-poster__in { width: 100%; }
.ynd-poster .ynd-shot { border-radius: 0; }

@media (max-width: 900px) {
  .ynd-id__grid { grid-template-columns: 1fr; }
  .ynd-pal { flex-direction: row; }
  .ynd-pal li { flex: 1 1 0; min-width: 0; min-height: 110px; padding: 10px; align-content: end; }
  .ynd-pal li:hover { flex-grow: 1; }
  .ynd-pal b { font-size: 11px; line-height: 1.2; }
  .ynd-pal code { font-size: 8px; }
  .ynd-pack { overflow: hidden; }
  .ynd-rail { flex-direction: column; align-items: stretch; width: auto; height: auto; padding: 70px var(--gutter); }
  .ynd-rail__intro { width: auto; height: auto; padding-bottom: 14px; }
  .ynd-ring--pack { left: auto; right: -20vw; top: 0; width: 70vw; margin-top: -20vw; }
  .ynd-rail__item { width: 100%; height: auto; }
  .ynd-cap { left: 10px; bottom: 10px; padding: 4px 10px; font-size: 10px; }
  .ynd-camp__b { margin-top: 14%; }
}
@media (max-width: 560px) {
  .ynd-camp__grid { grid-template-columns: 1fr; }
  .ynd-camp__b { margin-top: 0; }
  .ynd-facts dd { font-size: 14px; }
}

/* Naam Placement */
.nm { --slate: #5C5872; --deep: #32345E; --orange: #FF8114; --ink: #23223A; --paper: #ECECEA; overflow: clip; }
.nm-ch { display: grid; gap: 6px; }
.nm-ch__n { font-size: 12px; color: var(--orange); }
.nm-ch h2 { margin: 0; font: italic 700 clamp(4rem, 12vw, 11.5rem)/.9 "Barlow Condensed", var(--sans, sans-serif); letter-spacing: -.01em; text-transform: uppercase; }
.nm-cap { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 6px 12px; border-radius: 99px; font-size: 11px; color: #fff; background: rgba(35, 34, 58, .78); backdrop-filter: blur(8px); }
.nm-shot { position: relative; display: block; width: 100%; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: none; cursor: zoom-in; }
.nm-shot img { display: block; width: 100%; height: auto; }
.nm-shot:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.nm-loupe { position: absolute; z-index: 2; width: clamp(170px, 18vw, 260px); aspect-ratio: 1; border: 3px solid #fff; border-radius: 50%; background-repeat: no-repeat; box-shadow: 0 14px 40px rgba(20, 20, 40, .45); pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .25s, transform .35s var(--ease-out); }
.nm-shot:hover .nm-loupe { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.nm-hero { --x: 50%; --y: 50%; --r: clamp(84px, 15vw, 210px); position: relative; overflow: hidden; color: #9896B8; background: var(--deep); }
.nm-hero__in { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 100svh; padding: 110px 0 28px; }
.nm-hero .crumbs, .nm-hero .crumbs a, .nm-hero .crumbs li { color: rgba(255, 255, 255, .78); }
.nm-hero__name { margin: 14px 0 0; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.nm-type { display: grid; margin-block: 0; font: italic 700 min(17vw, 25svh)/.86 "Barlow Condensed", sans-serif; letter-spacing: -.01em; text-transform: uppercase; }
.nm-type__l { display: block; width: max-content; padding-right: .06em; }
.nm-facts { position: relative; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 18px 28px; margin: 0; padding-top: 18px; color: #fff; border-top: 1px solid rgba(255, 255, 255, .24); }
.nm-facts dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.nm-facts dd { margin: 3px 0 0; font-size: 15px; font-weight: 500; }
.nm-lens { position: absolute; inset: 0; color: var(--ink); background: var(--orange); clip-path: circle(var(--r) at var(--x) var(--y)); pointer-events: none; }
.nm-lens__mag { position: absolute; inset: 0; transform: scale(1.14); transform-origin: var(--x) var(--y); }
.nm-ghost { visibility: hidden; }
.nm-glass { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2); overflow: visible; fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; pointer-events: none; transform: translate(calc(var(--x) - var(--r)), calc(var(--y) - var(--r))); }
.nm-glass path { stroke-width: 15; }

.nm-logo { padding: clamp(70px, 10vw, 140px) 0; color: var(--ink); background: var(--paper); }
.nm-logo .nm-ch__n { color: #C75B00; }
.nm-logo__img { margin-top: clamp(30px, 4vw, 56px); }
.nm-logo__img .nm-shot { border-radius: 0; }
.nm-logo__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 6vw, 90px); align-items: stretch; margin-top: clamp(36px, 5vw, 64px); }
.nm-marks { display: grid; margin: 0; padding: 0; list-style: none; }
.nm-marks li { display: grid; grid-template-columns: 44px 1fr 1.6fr; gap: 12px; align-items: baseline; padding: 18px 0; border-top: 1px solid rgba(35, 34, 58, .18); }
.nm-marks li:last-child { border-bottom: 1px solid rgba(35, 34, 58, .18); }
.nm-marks span { font-size: 11px; color: #C75B00; }
.nm-marks b { font: italic 700 clamp(1.6rem, 2.6vw, 2.3rem)/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.nm-marks em { font-style: normal; font-size: 15px; color: rgba(35, 34, 58, .72); }
.nm-pal { display: flex; min-height: 190px; margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid rgba(35, 34, 58, .16); border-radius: 6px; }
.nm-pal li { flex: 1; display: grid; align-content: end; gap: 3px; min-width: 0; padding: 14px; transition: flex-grow .7s var(--ease-out); }
.nm-pal li:hover { flex-grow: 1.5; }
.nm-pal b { font-size: 14px; font-weight: 500; }
.nm-pal code { font: 500 11px var(--mono); opacity: .78; }

.nm-id { padding: clamp(70px, 10vw, 140px) 0; color: #fff; background: var(--deep); }
.nm-id__grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.nm-id__side { position: sticky; top: 110px; display: grid; gap: clamp(24px, 3vw, 40px); }
.nm-id__side h2 { font-size: clamp(4rem, 7.6vw, 7.5rem); }
.nm-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.nm-steps li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; font-size: 16px; color: rgba(255, 255, 255, .55); border-top: 1px solid rgba(255, 255, 255, .2); transition: color .4s, padding-left .5s var(--ease-out); }
.nm-steps li span { font-size: 11px; }
.nm-steps li.is-on { padding-left: 12px; color: var(--orange); }
.nm-stack { display: grid; gap: clamp(20px, 3vw, 44px); justify-items: end; }
.nm-stack__item--tall { width: min(100%, 68svh); }

.nm-mkt { padding: clamp(70px, 10vw, 140px) 0 clamp(50px, 6vw, 90px); overflow: hidden; color: var(--ink); background: var(--orange); }
.nm-mkt .nm-ch__n { color: var(--ink); }
.nm-mkt__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(20px, 4vw, 64px); align-items: start; margin-top: clamp(30px, 4vw, 56px); margin-bottom: clamp(80px, 11vw, 170px); }
.nm-mkt__b { margin-top: 18%; }
.nm-run { overflow: hidden; }
.nm-run__line { display: flex; width: max-content; font: italic 700 clamp(2.6rem, 7vw, 6.6rem)/1 "Barlow Condensed", sans-serif; text-transform: uppercase; white-space: nowrap; }
.nm-run__line span { padding-right: .7em; }
.nm-run__line span::after { content: "/"; margin-left: .7em; color: #fff; }

@media (max-width: 900px) {
  .nm-type { font-size: 24vw; }
  .nm-hero__in { min-height: min(100svh, 190vw); }
  .nm-facts { grid-template-columns: repeat(2, auto); }
  .nm-logo__grid, .nm-id__grid, .nm-mkt__grid { grid-template-columns: 1fr; }
  .nm-id__side { position: static; }
  .nm-id__side h2 { font-size: clamp(4rem, 12vw, 6rem); }
  .nm-steps { display: none; }
  .nm-stack__item--tall { width: 100%; }
  .nm-marks li { grid-template-columns: 34px 1fr; }
  .nm-marks em { grid-column: 2; }
  .nm-pal { min-height: 130px; }
  .nm-pal li { padding: 10px; }
  .nm-mkt__b { margin-top: 0; }
  .nm-cap { left: 10px; bottom: 10px; padding: 4px 10px; font-size: 10px; }
}

/* Cscrubs Collection */
body:has(.cs-hero) .header:not(.is-scrolled) .nav { background: rgba(14, 10, 8, .86); }
.cs { --ink: #26252B; overflow: clip; }
.cs-ch { display: grid; gap: 6px; }
.cs-ch__n { font-size: 12px; opacity: .7; }
.cs-ch h2 { margin: 0; font: 400 clamp(3.4rem, 9.5vw, 9rem)/1 "Bodoni Moda", Georgia, serif; letter-spacing: -.02em; }

.cs-hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding-top: 110px; overflow: hidden; color: var(--ink); background: #fff; }
.cs-hero .crumbs, .cs-hero .crumbs a, .cs-hero .crumbs li { color: rgba(38, 37, 43, .7); }
.cs-hero__logo { flex: 1; display: grid; place-items: center; padding-block: 28px; }
.cs-hero__logo img { display: block; width: min(100%, 980px); height: auto; }
.cs-facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 16px 28px; margin: 0 0 22px; padding-top: 16px; border-top: 1px solid rgba(38, 37, 43, .18); }
.cs-facts dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.cs-facts dd { margin: 3px 0 0; font-size: 15px; font-weight: 500; }
.cs-shades { display: flex; align-items: flex-end; height: 27svh; }
.cs-shades i { flex: 1; height: calc(var(--h) * 100%); background: var(--c); transform-origin: bottom; }

.cs-logo { padding-top: clamp(70px, 10vw, 130px); color: var(--ink); background: #fff; }
.cs-tiles { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(30px, 4vw, 56px); }
.cs-tile { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 10%; }
.cs-tile img { display: block; width: 100%; height: auto; }
.cs-tile--dark img { filter: invert(1); }

.cs-social { padding: clamp(70px, 10vw, 130px) 0; color: #fff; }
.cs-social__in { display: grid; gap: clamp(28px, 4vw, 56px); }
.cs-count { margin: 18px 0 0; font-size: 14px; opacity: .9; }
.cs-count b { font-weight: 500; font-size: 2.2em; }
.cs-deck { display: grid; gap: 18px; }
.cs-post { display: block; width: 100%; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); cursor: zoom-in; }
.cs-post img { display: block; width: 100%; height: auto; }
.cs-post:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cs-social.is-pinned { height: 100svh; padding: 0; overflow: hidden; }
.is-pinned .cs-social__in { grid-template-columns: 5fr 7fr; align-items: center; height: 100%; padding-top: 80px; }
.is-pinned .cs-ch h2 { font-size: clamp(3.4rem, 7.2vw, 7rem); }
.is-pinned .cs-deck { position: relative; display: block; justify-self: center; width: min(74svh, 44vw); aspect-ratio: 1; }
.is-pinned .cs-post { position: absolute; inset: 0; }

.cs-cat { padding: clamp(70px, 10vw, 130px) 0 clamp(50px, 7vw, 90px); color: var(--ink); background: linear-gradient(120deg, #D5C8EE, #F6CFDC 50%, #C6E5F4); }
.cs-stage { display: grid; justify-items: center; gap: 18px; margin-top: clamp(28px, 4vw, 48px); padding-inline: var(--gutter); }
.cs-book { --ww: min(100%, calc(74svh * 1.4134)); position: relative; width: var(--ww); aspect-ratio: 1190 / 842; }
.cs-book::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -3%; height: 7%; border-radius: 50%; background: rgba(40, 30, 70, .35); filter: blur(22px); z-index: 0; pointer-events: none; transition: left .9s var(--ease-out), right .9s var(--ease-out); }
.cs-book.is-front::after, .cs-book.is-back::after { left: 30%; right: 30%; }
.cs-book__slide { position: relative; z-index: 1; width: 100%; height: 100%; transition: transform .9s var(--ease-out); }
.cs-book.is-front .cs-book__slide { transform: translateX(-25%); }
.cs-book.is-back .cs-book__slide { transform: translateX(25%); }
.cs-book__pages { width: 100%; height: 100%; }
.cs-page { background: #F5F4F2; overflow: hidden; }
.cs-page img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.cs-bar { display: flex; align-items: center; gap: 14px; }
.cs-bar__n { min-width: 170px; margin: 0; font-size: 13px; text-align: center; }
.cs-btn { display: grid; place-items: center; width: 46px; height: 46px; color: #fff; border-radius: 50%; background: var(--ink); transition: transform .3s var(--ease-out), opacity .3s; }
.cs-btn:hover:not(:disabled) { transform: scale(1.08); }
.cs-btn:disabled { opacity: .3; cursor: default; }
.cs-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cs-btn--prev svg { transform: rotate(180deg); }
.cs-btn--full { color: var(--ink); background: rgba(255, 255, 255, .7); }
.cs-hint { margin: 0; font-size: 11px; opacity: .7; text-align: center; }
.cs-stage:fullscreen { align-content: center; margin: 0; background: linear-gradient(120deg, #D5C8EE, #F6CFDC 50%, #C6E5F4); }
.cs-stage:fullscreen .cs-book { --ww: min(100%, calc(84vh * 1.4134)); }
.cs-stage:fullscreen .cs-hint { display: none; }

@media (max-width: 900px) {
  .cs-facts { grid-template-columns: repeat(2, auto); }
  .cs-shades { height: 20svh; }
  .cs-hero { min-height: min(100svh, 200vw); }
}
@media (max-width: 639px) {
  .cs-book { --ww: min(100%, calc(70svh * .7067)); aspect-ratio: 595 / 842; }
  .cs-bar__n { min-width: 120px; font-size: 12px; }
}

/* Jansad */
body:has(.jn-hero) .header:not(.is-scrolled) .nav { background: rgba(14, 10, 8, .86); }
.jn { --jn-o: #FF6A00; --jn-ink: #1F1F1F; --jn-paper: #F7F4EE; --jn-serif: "Newsreader", Georgia, serif; overflow: clip; color: var(--jn-ink); background: var(--jn-paper); }
.jn-ch { display: grid; gap: 6px; }
.jn-ch__n { font-size: 12px; opacity: .7; }
.jn-ch h2 { margin: 0; font: 400 clamp(3.2rem, 9vw, 8.5rem)/1 var(--jn-serif); letter-spacing: -.025em; }

.jn-hero { position: relative; padding-top: calc(var(--header-h, 80px) + 34px); color: var(--jn-ink); }
.jn-hero .crumbs, .jn-hero .crumbs a { color: rgba(31, 31, 31, .66); }
.jn-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: center; padding-block: clamp(30px, 4vw, 56px); }
.jn-hero__logo { width: min(100%, 430px); height: auto; }
.jn-hero__line { margin: clamp(30px, 4vw, 56px) 0 0; font: 400 clamp(2.5rem, 5.4vw, 5.4rem)/1.03 var(--jn-serif); letter-spacing: -.025em; text-wrap: balance; }
.jn-scales { width: min(100%, 520px); height: auto; justify-self: center; overflow: visible; fill: var(--jn-o); }
.jn-scales__line { fill: none; stroke: var(--jn-o); stroke-width: 11; }
.jn-scales text { font: italic 400 44px var(--jn-serif); fill: var(--jn-ink); text-anchor: middle; }
.jn-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding-block: 22px; border-top: 2px solid var(--jn-ink); }
.jn-facts dt { font-size: 11px; opacity: .62; text-transform: uppercase; letter-spacing: .08em; }
.jn-facts dd { margin: 5px 0 0; font-size: 1rem; font-weight: 500; }
.jn-run { overflow: hidden; background: var(--jn-o); color: var(--jn-ink); }
.jn-run__line { display: flex; width: max-content; padding-block: 12px; animation: jn-run 34s linear infinite; }
.jn-run__line span { font: 400 clamp(1.15rem, 2vw, 1.6rem)/1.2 var(--jn-serif); white-space: nowrap; padding-inline: 26px; position: relative; }
.jn-run__line span::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--jn-ink); }
@keyframes jn-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .jn-run__line { animation: none; } }

.jn-about { padding-block: clamp(70px, 10vw, 140px); }
.jn-kicker { margin: 0 0 22px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .66; }
.jn-lede { margin: 0; max-width: 18em; font: 400 clamp(2.2rem, 5vw, 4.8rem)/1.06 var(--jn-serif); letter-spacing: -.02em; }
.jn-about__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); margin-top: clamp(40px, 6vw, 80px); padding-top: 26px; border-top: 1px solid rgba(31, 31, 31, .25); }
.jn-cols { columns: 2; column-gap: 36px; font: 400 1.16rem/1.55 var(--jn-serif); }
.jn-cols p { margin: 0 0 1em; break-inside: avoid; }
.jn-cols p:first-child::first-letter { float: left; margin: .07em .09em 0 0; font-size: 3.4em; line-height: .84; color: var(--jn-o); }
.jn-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.jn-lists h3 { margin: 0 0 12px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; opacity: .62; }
.jn-lists ul { margin: 0; padding: 0; list-style: none; font-size: .98rem; line-height: 1.8; }

.jn-logo { background: #fff; padding-top: clamp(60px, 8vw, 110px); }
.jn-tiles { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(30px, 4vw, 54px); }
.jn-tile { display: grid; place-items: center; min-height: clamp(240px, 32vw, 460px); padding: 34px; border-block: 1px solid rgba(31, 31, 31, .12); }
.jn-tile img { width: min(100%, 400px); height: auto; }
.jn-tile--dark { background: #1C1C1C; border-color: #1C1C1C; }
.jn-strap { display: flex; justify-content: space-between; gap: 18px; margin: 0; padding: clamp(24px, 4vw, 54px) clamp(20px, 4vw, 56px); overflow: hidden; font: 400 clamp(2.3rem, 9.4vw, 9.4rem)/1.1 var(--jn-serif); letter-spacing: -.03em; }
.jn-strap span { display: inline-block; }
.jn-strap span:nth-child(2) { color: var(--jn-o); }

.jn-web { background: #161616; color: #F3F0EA; padding-block: clamp(60px, 9vw, 120px); }
.jn-web__in { display: grid; gap: 36px; }
.jn-steps { list-style: none; margin: 26px 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.jn-steps li { display: flex; gap: 14px; align-items: baseline; padding-block: 12px; border-bottom: 1px solid rgba(255, 255, 255, .2); color: rgba(243, 240, 234, .6); transition: color .35s; }
.jn-steps span { font-size: 11px; }
.jn-steps b { font-weight: 500; }
.jn-steps li.is-on { color: var(--jn-o); }
.jn-visit { display: inline-block; font-size: 13px; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.jn-visit:hover { color: var(--jn-o); }
.jn-stack { display: grid; gap: 28px; }
.jn-browser { margin: 0; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; }
.jn-browser__bar { display: flex; align-items: center; gap: 7px; flex: none; height: 40px; padding-inline: 14px; background: #E9E6DF; color: #55524C; }
.jn-browser__bar i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #B9B4A9; }
.jn-browser__bar span { margin-left: 10px; padding: 3px 12px; border-radius: 99px; background: #fff; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-screen { position: relative; overflow-y: auto; background: #fff; }
.jn-screen img { display: block; width: 100%; height: auto; }
.jn-browser .jn-screen { height: 66svh; }
.is-driven .jn-screen { overflow: hidden; }
.is-driven .jn-screen img { will-change: transform; }
.jn-web.is-pinned { height: 100svh; padding: 0; overflow: hidden; }
.jn-web.is-pinned .jn-web__in { height: 100%; grid-template-columns: minmax(230px, 1fr) minmax(0, 2.7fr); gap: clamp(30px, 4vw, 64px); align-items: stretch; padding-block: calc(var(--header-h, 80px) + 14px) 28px; }
.jn-web.is-pinned .jn-web__side { align-self: center; }
.jn-web.is-pinned .jn-ch h2 { font-size: clamp(3rem, 5.4vw, 5.4rem); }
.jn-web.is-pinned .jn-stack { display: block; position: relative; height: 100%; }
.jn-web.is-pinned .jn-browser { position: absolute; inset: 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, .45); }
.jn-web.is-pinned .jn-browser .jn-screen { flex: 1; height: auto; min-height: 0; }

.jn-mob { background: var(--jn-o); padding-block: clamp(60px, 9vw, 120px) clamp(70px, 10vw, 140px); overflow: clip; }
.jn-phones { display: flex; justify-content: center; gap: clamp(20px, 4vw, 64px); margin-top: clamp(40px, 6vw, 80px); padding-inline: 20px; }
.jn-phone { flex: 0 1 300px; min-width: 0; margin: 0; }
.jn-phone .jn-screen { aspect-ratio: 390 / 800; border: 9px solid #141414; border-radius: 38px; box-shadow: 0 34px 70px rgba(80, 30, 0, .4); }
.jn-phone figcaption { margin-top: 14px; font-size: 12px; text-align: center; }
@media (max-width: 900px) {
  .jn-hero__grid, .jn-about__grid { grid-template-columns: 1fr; }
  .jn-hero__line { font-size: clamp(2.3rem, 10vw, 4rem); }
  .jn-scales { width: min(84%, 380px); }
  .jn-facts { grid-template-columns: 1fr 1fr; }
  .jn-phones { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; scrollbar-width: none; }
  .jn-phones::-webkit-scrollbar { display: none; }
  .jn-phone { flex: 0 0 min(70vw, 300px); scroll-snap-align: center; }
}
@media (max-width: 639px) {
  .jn-cols { columns: 1; }
  .jn-tiles { grid-template-columns: 1fr; }
  .jn-tile { min-height: 200px; }
  .jn-browser .jn-screen { height: 58svh; }
}

/* Kanchan Oil */
body:has(.kn-hero) .header:not(.is-scrolled) .nav { background: rgba(14, 10, 8, .86); }
.kn { --kn-g: #045C33; --kn-gd: #03422A; --kn-y: #FFC914; --kn-c: #FFF8E3; --kn-serif: "Fraunces", Georgia, serif; --kn-gu: "Anek Gujarati", "Noto Sans Gujarati", sans-serif; overflow: clip; color: var(--kn-gd); background: var(--kn-y); }
.kn-ch { display: grid; gap: 6px; }
.kn-ch__n { font-size: 12px; opacity: .75; }
.kn-ch h2 { margin: 0; font: 600 clamp(3rem, 8.6vw, 8rem)/1 var(--kn-serif); letter-spacing: -.025em; }
.kn-shot { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.kn-shot img { display: block; width: 100%; height: auto; }

.kn-hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding-top: calc(var(--header-h, 80px) + 34px); background: linear-gradient(var(--kn-c) 64%, var(--kn-y) 64%); isolation: isolate; overflow: clip; }
.kn-hero.is-live { background: var(--kn-c); }
.kn-oil { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.kn-oil__front { fill: var(--kn-y); }
.kn-oil__back { fill: #FFE27A; }
.kn-drop { position: absolute; top: 0; left: 0; z-index: -1; width: 24px; height: auto; fill: var(--kn-y); }
.kn-hero:not(.is-live) .kn-drop { display: none; }
.kn-hero .crumbs, .kn-hero .crumbs a { color: rgba(3, 66, 42, .72); }
.kn-hero__logo { flex: 1; display: grid; place-items: center; padding: 16px 20px; }
.kn-hero__logo img { width: min(100%, clamp(320px, 42vw, 620px)); height: auto; }
.kn-hero__low { padding-bottom: 26px; }
.kn-hero__line { margin: 0; font: 700 clamp(2.1rem, 5.4vw, 5.2rem)/1.2 var(--kn-gu); text-wrap: balance; }
.kn-hero__sub { margin: 6px 0 0; font-size: 13px; }
.kn-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 22px 0 0; padding-top: 16px; border-top: 2px solid var(--kn-gd); }
.kn-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.kn-facts dd { margin: 5px 0 0; font-weight: 500; }

.kn-gold { padding-block: clamp(70px, 10vw, 130px); }
.kn-lede { margin: 0; max-width: 17em; font: 600 clamp(2.1rem, 5vw, 4.8rem)/1.08 var(--kn-serif); letter-spacing: -.02em; }
.kn-logo { margin-top: clamp(70px, 10vw, 130px); }
.kn-plate { display: grid; place-items: center; margin-top: clamp(28px, 4vw, 48px); padding: clamp(36px, 8vw, 110px) clamp(20px, 6vw, 90px); border-radius: var(--radius); background: var(--kn-c); }
.kn-plate img { width: min(100%, 880px); height: auto; }
.kn-colours { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 2vw, 24px); margin: clamp(10px, 2vw, 24px) 0 0; padding: 0; list-style: none; }
.kn-colours li { position: relative; display: flex; align-items: flex-end; min-height: clamp(120px, 15vw, 210px); padding: 14px; border-radius: var(--radius); background: rgba(255, 248, 227, .45); overflow: hidden; }
.kn-colours span { position: absolute; inset: 0; background: var(--c); transform-origin: bottom; }
.kn-colours b { position: relative; font-size: .9rem; font-weight: 500; }
.kn-colours li:nth-child(-n+2) b { color: #fff; }

.kn-run { overflow: hidden; background: var(--kn-gd); color: var(--kn-y); }
.kn-run__line { display: flex; width: max-content; padding-block: 12px; animation: kn-run 40s linear infinite; }
.kn-run__line span { padding-inline: 30px; font: 700 clamp(1.3rem, 2.4vw, 2rem)/1.3 var(--kn-gu); white-space: nowrap; }
@keyframes kn-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .kn-run__line { animation: none; } }

.kn-social { padding-block: clamp(60px, 9vw, 120px); background: var(--kn-g); color: var(--kn-c); }
.kn-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); margin-top: clamp(30px, 5vw, 64px); }
.kn-post { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 26px 60px rgba(0, 25, 12, .45); transition: box-shadow .4s; }
.kn-post:hover { box-shadow: 0 34px 80px rgba(0, 25, 12, .65); }

.kn-mkt { padding-block: clamp(60px, 9vw, 120px); background: var(--kn-c); }
.kn-mkt__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 5vw, 80px); align-items: start; margin-top: clamp(30px, 5vw, 64px); }
.kn-fig { margin: 0; }
.kn-fig figcaption { margin-top: 12px; font-size: 12px; }
.kn-fig--news { position: sticky; top: 110px; }
.kn-flyer { border-radius: 10px; overflow: hidden; box-shadow: 0 24px 56px rgba(90, 65, 0, .28); }
.kn-news { border-radius: 10px; overflow: hidden; box-shadow: 0 24px 56px rgba(50, 30, 0, .3); }

.kn-hoard { background: #10150F; color: #fff; }
.kn-hoard__head { padding-block: clamp(60px, 9vw, 110px) clamp(30px, 4vw, 54px); }
.kn-board { position: relative; margin: 0; height: 100svh; overflow: hidden; }
.kn-board__in { display: block; position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.kn-board img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: var(--ox) var(--oy); }
.kn-board figcaption { position: absolute; left: 20px; bottom: 20px; padding: 6px 12px; border-radius: 99px; font-size: 12px; color: #fff; background: rgba(12, 12, 10, .72); pointer-events: none; }
@media (max-width: 900px) {
  .kn-facts { grid-template-columns: 1fr 1fr; }
  .kn-posts, .kn-mkt__grid { grid-template-columns: 1fr; }
  .kn-fig--news { position: static; }
  .kn-colours { grid-template-columns: 1fr 1fr; }
  .kn-board { height: 62svh; margin-bottom: 8px; }
  .kn-board img { position: absolute; top: 0; left: 0; width: auto; max-width: none; height: 100%; object-fit: initial; }
}

/* ==========================================================================
   Social media marketing page
   ========================================================================== */
.sm-hero { padding-bottom: clamp(40px, 6vw, 80px); }
.sm-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sm-hero__text { display: grid; gap: 26px; justify-items: start; }
.sm-hero .display { font-size: clamp(2.3rem, 4.5vw, 4.3rem); }
.sm-stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 640px; margin-inline: auto; perspective: 1100px; }
.sm-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--line-2); stroke-width: .18; stroke-dasharray: .7 1; z-index: 0; }
.sm-app { display: grid; place-items: center; aspect-ratio: 1; border-radius: 27%; background: var(--t, var(--brand)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 10px 26px rgba(0, 0, 0, .45); }
.sm-app svg { width: 56%; height: 56%; display: block; }
.sm-orb { position: absolute; width: 12%; transform: translate(-50%, -50%); will-change: transform, opacity; }

/* Phone */
.sm-phone { position: absolute; left: 50%; top: 50%; z-index: 2; width: 39%; aspect-ratio: 9 / 18.6; margin-left: -19.5%; margin-top: -40.3%; display: flex; flex-direction: column; padding: 2.2%; border-radius: 13% / 6.3%; background: #17120F; box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px rgba(0, 0, 0, .65), 0 0 90px rgba(242, 80, 35, .22); transform-style: preserve-3d; container-type: inline-size; }
.sm-phone svg { display: block; }
.sm-phone__screen { position: relative; flex: 1; overflow: hidden; border-radius: 10cqw 10cqw 0 0; background: #0D0A08; }
.sm-phone__nav { display: flex; justify-content: space-around; align-items: center; padding: 4cqw 3cqw 5cqw; color: var(--text-2); }
.sm-phone__nav svg { width: 7.4cqw; height: 7.4cqw; }
.sm-frame { position: absolute; inset: 0; background: #0D0A08; }
.sm-stage:not(.is-live) .sm-frame:not(:first-child) { display: none; }
.sm-frame__chip { position: absolute; z-index: 3; top: 4cqw; right: 4cqw; padding: 1.2cqw 3cqw; border-radius: 99px; background: var(--brand); color: #fff; font: 500 3.4cqw/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.sm-post__head { display: flex; align-items: center; gap: 2.4cqw; padding: 4cqw; }
.sm-av { flex: none; width: 8cqw; height: 8cqw; border-radius: 50%; background: linear-gradient(135deg, #FF7A45, #F25023); }
.sm-sk { display: block; height: 2.2cqw; border-radius: 99px; background: rgba(255, 240, 230, .18); }
.sm-post__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.sm-art { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.sm-art i { position: absolute; display: block; }
.sm-art .l { left: 10%; height: 4.5%; border-radius: 99px; background: currentColor; }
.sm-art .l:nth-child(2) { top: 11%; width: 56%; }
.sm-art .l:nth-child(3) { top: 19%; width: 36%; opacity: .6; }
.sm-art--1 { background: #F25023; color: #F7F0EB; }
.sm-art--1 .s { right: -14%; bottom: -12%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: #F7F0EB; }
.sm-art--2 { background: #F7F0EB; color: #1A1A1A; }
.sm-art--2 .s { right: 13%; bottom: 0; width: 50%; height: 56%; border-radius: 999px 999px 0 0; background: #F25023; }
.sm-art--3 { background: #1A1A1A; color: #F7F0EB; }
.sm-art--3 .s { right: -22%; bottom: -16%; width: 84%; aspect-ratio: 1; border-radius: 50%; border: 18px solid #F25023; }
.sm-art--4 { background: radial-gradient(90% 60% at 50% 42%, #FF7A45, #C93A12 62%, #4A1708); color: transparent; }
.sm-art--4 .s { left: 50%; top: 45%; width: 66%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); transform: translate(-50%, -50%); }
.sm-art--4 .l { display: none; }
.sm-art--5 { background: #F7F0EB; color: #1A1A1A; }
.sm-art--5 .s { left: 50%; top: 56%; width: 74%; aspect-ratio: 1; border-radius: 50%; background: #F25023; transform: translate(-50%, -50%); }
.sm-art--5 .l:nth-child(2) { top: 15%; }
.sm-art--5 .l:nth-child(3) { top: 20%; height: 2.4%; }
.sm-burst { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }
.sm-burst svg { width: 34cqw; height: 34cqw; fill: #fff; stroke: none; }
.sm-actions { display: flex; align-items: center; gap: 3.4cqw; padding: 3.4cqw 4cqw 2cqw; color: var(--text); }
.sm-actions svg { width: 7.4cqw; height: 7.4cqw; }
.sm-actions i { flex: 1; }
.sm-post__cap { display: grid; gap: 2cqw; padding: 1cqw 4cqw; }
.sm-slides__track { display: flex; width: 300%; height: 100%; }
.sm-slides__track .sm-art { flex: none; width: 33.333%; }
.sm-dots { display: flex; justify-content: center; gap: 1.6cqw; padding-top: 2.4cqw; }
.sm-dots i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--brand-hi); opacity: .3; }
.sm-frame--reel > .sm-art, .sm-frame--story > .sm-art { position: absolute; inset: 0; }
.sm-frame--reel::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.sm-reel__play { position: absolute; z-index: 2; left: 50%; top: 45%; display: grid; place-items: center; width: 17cqw; height: 17cqw; margin: -8.5cqw; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; backdrop-filter: blur(6px); }
.sm-reel__play svg { width: 8cqw; height: 8cqw; fill: #fff; margin-left: 1cqw; }
.sm-reel__side { position: absolute; z-index: 2; right: 3.4cqw; bottom: 14cqw; display: grid; gap: 4.4cqw; color: #fff; }
.sm-reel__side svg { width: 7.6cqw; height: 7.6cqw; }
.sm-reel__cap { position: absolute; z-index: 2; left: 4cqw; right: 16cqw; bottom: 6cqw; display: flex; align-items: center; gap: 2.4cqw; }
.sm-reel__cap .sm-sk { background: rgba(255, 255, 255, .55); }
.sm-reel__bar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: .9cqw; background: rgba(255, 255, 255, .25); }
.sm-reel__bar i { display: block; height: 100%; background: var(--brand-hi); transform-origin: 0 50%; }
.sm-story__bars { position: absolute; z-index: 2; left: 3cqw; right: 3cqw; top: 2.4cqw; display: flex; gap: 1.4cqw; }
.sm-story__bars i { position: relative; flex: 1; height: .9cqw; background: #fff; border-radius: 99px; transform-origin: 0 50%; box-shadow: 0 0 0 .1px rgba(255, 255, 255, .4); }
.sm-frame--story .sm-frame__chip { top: 6cqw; }
.sm-story__reply { position: absolute; z-index: 2; left: 4cqw; right: 4cqw; bottom: 4cqw; display: flex; align-items: center; gap: 3cqw; color: #fff; }
.sm-story__reply span { flex: 1; height: 8.6cqw; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .7); }
.sm-story__reply svg { width: 7.4cqw; height: 7.4cqw; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5)); }
.sm-pop { position: absolute; z-index: 4; display: grid; place-items: center; width: 7.6%; aspect-ratio: 1; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 8px 22px rgba(242, 80, 35, .45); pointer-events: none; }
.sm-pop svg { width: 54%; height: 54%; }

/* Ribbon */
.sm-ribbon { position: relative; overflow: hidden; padding-block: 14px; background: var(--brand); color: #150C07; }
.sm-ribbon__track { display: flex; width: max-content; }
.sm-ribbon__track span { flex: none; display: grid; place-items: center; width: clamp(64px, 7vw, 104px); }
.sm-ribbon__track svg { width: clamp(24px, 2.6vw, 36px); height: clamp(24px, 2.6vw, 36px); display: block; }
@media (prefers-reduced-motion: no-preference) {
  .sm-ribbon__track { animation: sm-run 46s linear infinite; }
  .sm-ribbon:hover .sm-ribbon__track { animation-play-state: paused; }
}
@keyframes sm-run { to { transform: translateX(-50%); } }

/* Recent work */
.sm-wall { overflow: hidden; }
.sm-wall__row { --h: clamp(280px, 27vw, 410px); }
.sm-wall__row + .sm-wall__row { margin-top: clamp(40px, 5vw, 72px); }
.sm-wall__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 32px; margin-bottom: 18px; }
.sm-wall__head h3 { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: -.025em; }
.sm-wall__head h3::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 16px var(--c); }
.sm-wall__head p { margin-top: 6px; color: var(--text-2); }
.sm-wall__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.sm-wall__view { overflow-x: auto; padding-block: 10px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
.sm-wall__view::-webkit-scrollbar { display: none; }
.sm-wall__track { display: flex; width: max-content; padding-inline: var(--gutter); }
.sm-shot { flex: none; display: block; height: var(--h); aspect-ratio: var(--ar); margin-right: clamp(10px, 1.2vw, 18px); padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: zoom-in; scroll-snap-align: start; transition: transform .6s var(--ease-out), opacity .4s, box-shadow .4s; }
.sm-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sm-shot:focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 3px; }
.sm-shot.dup { display: none; }
.sm-wall__more { display: flex; justify-content: center; margin-top: clamp(36px, 5vw, 64px); }
@media (hover: hover) and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .sm-wall__view { overflow: visible; scroll-snap-type: none; }
  .sm-wall__track { padding-inline: 0; animation: sm-run var(--d) linear infinite; }
  .is-rev .sm-wall__track { animation-direction: reverse; }
  .sm-shot.dup { display: block; }
  .sm-wall__view:hover .sm-wall__track, .sm-wall__view:focus-within .sm-wall__track { animation-play-state: paused; }
  .sm-wall__view:hover .sm-shot { opacity: .5; }
  .sm-wall__view .sm-shot:hover { opacity: 1; transform: translateY(-6px) scale(1.03); box-shadow: 0 22px 50px rgba(0, 0, 0, .55), 0 0 0 1px var(--c); }
}

/* Why it works */
.sm-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sm-why__head { display: grid; gap: 20px; justify-items: start; }
.sm-why ul { display: grid; list-style: none; padding: 0; margin: 0; }
.sm-why li { display: flex; gap: 18px; padding-block: 22px; border-top: 1px solid var(--line); }
.sm-why li:last-child { border-bottom: 1px solid var(--line); }
.sm-why__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(242, 80, 35, .14); color: var(--brand-hi); }
.sm-why__icon svg { width: 22px; height: 22px; display: block; }
.sm-why h3 { font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; }
.sm-why li p { margin-top: 5px; color: var(--text-2); line-height: 1.5; }

/* Platform tiles */
/* The tiles start scattered, so keep them from widening the page */
.sm-platforms { overflow-x: clip; }
.sm-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); list-style: none; padding: 0; margin: 0; }
.sm-tile { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; aspect-ratio: 1 / 1.08; padding: 12px 8px; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); text-align: center; isolation: isolate; }
.sm-tile__fill { position: absolute; inset: 0; z-index: -1; background: var(--t); opacity: 0; transform: scale(1.06); transition: opacity .5s var(--ease-out); }
.sm-tile__glyph { display: grid; place-items: center; margin-bottom: 8px; color: var(--text); transition: transform .6s var(--ease-out), color .4s; }
.sm-tile__glyph svg { width: clamp(30px, 3.4vw, 46px); height: clamp(30px, 3.4vw, 46px); display: block; }
.sm-tile b { font-weight: 600; font-size: .95rem; line-height: 1.2; transition: color .4s; }
.sm-tile small { font-size: .78rem; line-height: 1.3; color: var(--muted); transition: color .4s; }
.sm-tile:hover .sm-tile__fill, .sm-tile.is-lit .sm-tile__fill { opacity: 1; }
.sm-tile:hover .sm-tile__glyph, .sm-tile.is-lit .sm-tile__glyph { transform: translateY(-4px) scale(1.12) rotate(-5deg); color: #fff; }
.sm-tile:hover b, .sm-tile.is-lit b { color: #fff; }
.sm-tile:hover small, .sm-tile.is-lit small { color: rgba(255, 255, 255, .82); }

/* What's included */
.sm-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.sm-inc { display: flex; flex-direction: column; gap: 18px; min-height: 300px; padding: clamp(16px, 1.6vw, 22px); overflow: hidden; }
.sm-inc--cal, .sm-inc--report { grid-column: span 2; }
.sm-inc__text h3 { font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; line-height: 1.25; }
.sm-inc__text p { margin-top: 6px; color: var(--text-2); font-size: .96rem; line-height: 1.45; }
.v { position: relative; flex: 1; min-height: 170px; border-radius: 12px; }
.v svg { display: block; }

.v-cal { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 6px; }
.v-cal span { display: grid; place-items: center; min-height: 38px; border-radius: 8px; background: rgba(255, 240, 230, .05); color: transparent; }
.v-cal span.on { background: rgba(242, 80, 35, .16); box-shadow: inset 0 0 0 1px rgba(242, 80, 35, .4); color: var(--brand-hi); }
.v-cal svg { width: 48%; height: 48%; min-width: 15px; min-height: 15px; }

.v-posts { display: grid; place-items: center; overflow: hidden; }
.v-posts .sm-art { grid-area: 1 / 1; width: 56%; height: auto; aspect-ratio: 4 / 5; border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, .5); }
.v-posts .sm-art:nth-child(1) { transform: translateX(-44%) rotate(-8deg) scale(.9); }
.v-posts .sm-art:nth-child(3) { transform: translateX(44%) rotate(8deg) scale(.9); }
.v-posts .sm-art:nth-child(2) { z-index: 1; }

.v-reels { display: grid; place-items: center; align-content: center; gap: 20px; }
.v-reels__icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 24px; background: linear-gradient(135deg, #FF7A45, #F25023); color: #fff; box-shadow: 0 14px 34px rgba(242, 80, 35, .4); }
.v-reels__icon svg { width: 54%; height: 54%; }
.v-reels__eq { display: flex; align-items: center; gap: 4px; height: 30px; }
.v-reels__eq i { width: 3px; height: 100%; border-radius: 9px; background: var(--brand-hi); transform: scaleY(.5); }

.v-caption { display: grid; align-content: center; gap: 11px; }
.v-caption .sm-sk { height: 9px; }
.v-caption div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.v-caption b { padding: 5px 10px; border-radius: 99px; background: rgba(242, 80, 35, .14); color: var(--brand-hi); font: 500 12px var(--mono); }

.v-sched { display: grid; align-content: center; gap: 20px; container-type: inline-size; }
.v-sched div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.v-sched__plane { --fly: calc(100cqw - 40px); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(242, 80, 35, .16); color: var(--brand-hi); }
.v-sched__plane svg { width: 20px; height: 20px; }

.v-stories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; place-items: center; align-content: center; }
.v-stories span { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--surface-2); color: var(--text); }
.v-stories span::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: 50%; background: conic-gradient(#FF7A45, #F25023, #FEDA75, #FF7A45); }
.v-stories span::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--surface-2); }
.v-stories svg { position: relative; width: 26px; height: 26px; }
.v-stories { isolation: isolate; }

.v-ads { display: grid; place-items: center; }
.v-ads > * { grid-area: 1 / 1; }
.v-ads .sm-app { width: 72px; z-index: 1; }
.v-ads i { width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgba(90, 130, 255, .55); }

.v-report { display: flex; align-items: flex-end; gap: 6px; padding-top: 12px; }
.v-report i { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--brand), rgba(242, 80, 35, .12)); transform-origin: 50% 100%; }
.v-report svg { position: absolute; inset: 12px 0 0; width: 100%; height: calc(100% - 12px); overflow: visible; fill: none; stroke: #FFD8C8; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.v-report path { vector-effect: non-scaling-stroke; }

@media (prefers-reduced-motion: no-preference) {
  .v-cal span { animation: sm-cell 7s var(--ease-out) infinite; animation-delay: calc(var(--i) * .13s); }
  .v-posts .sm-art:nth-child(1) { animation: sm-fan-l 5s var(--ease-out) infinite alternate; }
  .v-posts .sm-art:nth-child(3) { animation: sm-fan-r 5s var(--ease-out) infinite alternate; }
  .v-reels__eq i { animation: sm-eq 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.17s); }
  .v-reels__icon { animation: sm-bob 3.4s ease-in-out infinite; }
  .v-caption b { animation: sm-tag 4.5s var(--ease-out) infinite; }
  .v-caption b:nth-child(2) { animation-delay: .25s; }
  .v-caption b:nth-child(3) { animation-delay: .5s; }
  .v-sched__plane { animation: sm-fly 4.8s var(--ease-out) infinite; }
  .v-sched .sm-app { animation: sm-hit 4.8s var(--ease-out) infinite; }
  .v-sched .sm-app:nth-child(2) { animation-delay: .5s; }
  .v-sched .sm-app:nth-child(3) { animation-delay: 1s; }
  .v-sched .sm-app:nth-child(4) { animation-delay: 1.5s; }
  .v-stories span::before { animation: sm-spin 5s linear infinite; }
  .v-stories span { animation: sm-bob 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
  .v-ads i { animation: sm-ping 3.6s ease-out infinite; }
  .v-ads i:nth-child(2) { animation-delay: 1.2s; }
  .v-ads i:nth-child(3) { animation-delay: 2.4s; }
  .v-report i { animation: sm-grow 6s var(--ease-out) infinite; animation-delay: calc(var(--i) * .07s); }
  .v-report path { animation: sm-draw 6s var(--ease-out) infinite; }
}
@keyframes sm-cell { 0%, 100% { opacity: .35; transform: scale(.86); } 12%, 80% { opacity: 1; transform: scale(1); } }
@keyframes sm-fan-l { from { transform: translateX(-26%) rotate(-3deg) scale(.86); } to { transform: translateX(-48%) rotate(-10deg) scale(.92); } }
@keyframes sm-fan-r { from { transform: translateX(26%) rotate(3deg) scale(.86); } to { transform: translateX(48%) rotate(10deg) scale(.92); } }
@keyframes sm-eq { from { transform: scaleY(.18); } to { transform: scaleY(1); } }
@keyframes sm-bob { 50% { transform: translateY(-6px); } }
@keyframes sm-tag { 0%, 100% { opacity: .35; transform: translateY(6px); } 12%, 82% { opacity: 1; transform: none; } }
@keyframes sm-fly { 0% { transform: translateX(0) rotate(0); opacity: 0; } 8% { opacity: 1; } 42% { opacity: 1; transform: translate(calc(var(--fly, 180px)), -4px) rotate(8deg); } 50%, 100% { opacity: 0; transform: translate(calc(var(--fly, 180px) + 20px), -8px) rotate(8deg); } }
@keyframes sm-hit { 0%, 8%, 40%, 100% { transform: none; } 18% { transform: translateY(-7px) scale(1.08); } 28% { transform: none; } }
@keyframes sm-spin { to { transform: rotate(360deg); } }
@keyframes sm-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
@keyframes sm-grow { 0% { transform: scaleY(.1); opacity: .4; } 16%, 86% { transform: none; opacity: 1; } 100% { transform: scaleY(.1); opacity: .4; } }
@keyframes sm-draw { 0%, 100% { opacity: 0; } 22%, 86% { opacity: 1; } }

/* The month */
.sm-flow { position: relative; --p: 1; padding-top: 34px; }
.sm-flow ol { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); list-style: none; padding: 0; margin: 0; }
.sm-flow__line { position: absolute; left: 10%; right: 10%; top: 69px; height: 2px; background: var(--line-2); }
.sm-flow__fill { position: absolute; inset: 0; background: var(--brand); transform: scaleX(var(--p)); transform-origin: 0 50%; box-shadow: 0 0 14px var(--brand-glow); }
.sm-flow__plane { position: absolute; z-index: 2; left: calc(var(--p) * 100%); top: 50%; display: none; width: 22px; height: 22px; margin: -66px 0 0 -11px; color: var(--brand-hi); }
.sm-flow.is-armed .sm-flow__plane { display: block; }
.sm-flow__plane svg { width: 100%; height: 100%; display: block; }
.sm-step { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.sm-step__node { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 12px; border-radius: 22px; background: var(--brand); color: #fff; box-shadow: 0 12px 34px rgba(242, 80, 35, .32); transition: background .5s, color .5s, box-shadow .5s, transform .6s var(--ease-out); }
.sm-step__node svg { width: 32px; height: 32px; display: block; }
.sm-step h3 { font-weight: 600; font-size: 1.1rem; }
.sm-step p { color: var(--text-2); font-size: .96rem; line-height: 1.45; max-width: 26ch; }
.sm-flow.is-armed .sm-step:not(.on) .sm-step__node { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); transform: scale(.9); }

/* Plans */
.sm-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.sm-plan { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 2vw, 28px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.sm-plan--hot { background: var(--brand); border-color: transparent; color: #fff; }
.sm-plan > p { margin-top: -8px; color: var(--text-2); font-size: 1rem; line-height: 1.45; min-height: 4.35em; }
.sm-plan--hot > p { color: rgba(255, 255, 255, .92); }
.sm-plan__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; align-content: start; flex: 1; }
.sm-plan__grid i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; }
.c-post { background: rgba(255, 240, 230, .14); }
.c-reel { background: rgba(242, 80, 35, .2); color: var(--brand-hi); }
.c-reel svg { width: 66%; height: 66%; display: block; }
.sm-plan--hot .c-post { background: rgba(255, 255, 255, .24); }
.sm-plan--hot .c-reel { background: #150C07; color: #fff; }
.sm-plan__counts { display: flex; gap: 22px; }
.sm-plan__counts span { font-size: .95rem; color: var(--text-2); }
.sm-plan__counts b { display: block; font-weight: 600; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.05; letter-spacing: -.03em; color: var(--text); }
.sm-plan--hot .sm-plan__counts span, .sm-plan--hot .sm-plan__counts b { color: #fff; }
.sm-plan ul { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.sm-plan li { display: flex; align-items: center; gap: 9px; font-size: .96rem; }
.sm-plan li svg { flex: none; width: 19px; height: 19px; color: var(--brand-hi); }
.sm-plan--hot li svg { color: #fff; }
.sm-note { display: flex; align-items: center; gap: 12px; margin-top: 20px; color: var(--muted); font-size: .94rem; }
.sm-note svg { flex: none; width: 22px; height: 22px; color: var(--text-2); }

@media (hover: none) { .sm-tile:hover .sm-tile__fill { opacity: 0; } }
@media (max-width: 1040px) {
  .sm-hero__grid, .sm-why { grid-template-columns: 1fr; }
  .sm-plan > p { min-height: 0; }
  .sm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-plans { grid-template-columns: 1fr; }
  .sm-plan__grid { grid-template-columns: repeat(16, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sm-flow { padding-top: 0; }
  .sm-flow__line { left: 35px; right: auto; top: 36px; bottom: 90px; width: 2px; height: auto; }
  .sm-flow__fill { transform: scaleY(var(--p)); transform-origin: 50% 0; }
  .sm-flow.is-armed .sm-flow__plane { display: none; }
  .sm-flow ol { grid-template-columns: 1fr; gap: 26px; }
  .sm-step { grid-template-columns: 72px 1fr; column-gap: 18px; row-gap: 2px; justify-items: start; text-align: left; align-content: center; }
  .sm-step__node { grid-row: span 2; margin: 0; }
  .sm-step h3 { align-self: end; }
  .sm-step p { max-width: none; }
  .sm-plan__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm-tile { aspect-ratio: auto; padding: 16px 6px; }
  .sm-tile small { font-size: .7rem; }
  .sm-tile b { font-size: .85rem; }
  .sm-bento { grid-template-columns: 1fr; }
  .sm-inc--cal, .sm-inc--report { grid-column: auto; }
  .sm-inc { min-height: 0; }
  .sm-orb { width: 13%; }
}
.sm-hero .display { text-wrap: balance; }

/* ==========================================================================
   Redesigned service pages: shared parts
   ========================================================================== */
@media (min-width: 761px) {
  .sm-flow ol { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
  .sm-flow__line { left: calc(50% / var(--n, 5)); right: calc(50% / var(--n, 5)); }
}
.sm-inc--w { grid-column: span 2; }
.sm-plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sm-plan__space { flex: 1; }
.sm-shot { position: relative; }
.sm-shot__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; backdrop-filter: blur(6px); transition: transform .4s var(--ease-out), background .3s; }
.sm-shot__play svg { width: 22px; height: 22px; margin-left: 3px; fill: #fff; }
.sm-shot:hover .sm-shot__play { background: var(--brand); transform: scale(1.1); }
.lightbox [hidden] { display: none !important; }
.lightbox video { max-width: 92vw; max-height: 88vh; border-radius: 14px; background: #000; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sm-app--t { font: 600 clamp(9px, 2.1cqw, 13px) var(--mono); letter-spacing: 0; }

.sv-tiles { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); list-style: none; padding: 0; margin: 0; }
.sv-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 196px; padding: clamp(18px, 1.8vw, 24px); overflow: hidden; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); isolation: isolate; }
.sv-tile__fill { position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, #FF7A45, #F25023); opacity: 0; transition: opacity .5s var(--ease-out); }
.sv-tile__glyph { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: auto; border-radius: 14px; background: rgba(242, 80, 35, .14); color: var(--brand-hi); transition: transform .6s var(--ease-out), background .4s, color .4s; }
.sv-tile__glyph svg { width: 26px; height: 26px; display: block; }
.sv-tile h3 { margin-top: 20px; font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; transition: color .4s; }
.sv-tile p { color: var(--text-2); font-size: .96rem; line-height: 1.45; transition: color .4s; }
.sv-tile:hover .sv-tile__fill, .sv-tile.is-lit .sv-tile__fill { opacity: 1; }
.sv-tile:hover .sv-tile__glyph, .sv-tile.is-lit .sv-tile__glyph { background: rgba(255, 255, 255, .2); color: #fff; transform: translateY(-3px) rotate(-5deg); }
.sv-tile:hover h3, .sv-tile.is-lit h3, .sv-tile:hover p, .sv-tile.is-lit p { color: #fff; }
.sv-tile--cta { padding: 0; border-style: dashed; border-color: var(--line-2); background: transparent; }
.sv-tile--cta a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: clamp(18px, 1.8vw, 24px); }
.sv-tile--cta p svg { display: inline-block; width: 12px; height: 12px; }

.sv-band { padding-block: clamp(20px, 3vw, 40px); overflow: hidden; }
.sv-band .eyebrow { margin-bottom: 18px; }
.sv-band__view { overflow: hidden; border-block: 1px solid var(--line); padding-block: 18px; }
.sv-band__track { display: flex; width: max-content; }
.sv-band__track span { flex: none; display: inline-flex; align-items: center; padding-inline: clamp(16px, 2vw, 28px); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 2.2rem); letter-spacing: -.025em; color: var(--text); white-space: nowrap; }
.sv-band__track span::after { content: ""; width: 9px; height: 9px; margin-left: clamp(32px, 4vw, 56px); border-radius: 50%; background: var(--brand); }
@media (prefers-reduced-motion: no-preference) { .sv-band__track { animation: sm-run 50s linear infinite; } }

/* Bento visuals */
.vx-search { display: grid; align-content: center; gap: 12px; }
.vx-search .sm-sk { height: 8px; }
.vx-search__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border-radius: 99px; background: rgba(255, 240, 230, .06); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--brand-hi); }
.vx-search__bar svg { width: 18px; height: 18px; flex: none; }
.vx-search__bar i { display: block; height: 8px; width: 62%; border-radius: 99px; background: rgba(255, 240, 230, .3); transform-origin: 0 50%; }
.vx-concepts { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 10px; }
.vx-concepts span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; background: rgba(255, 240, 230, .05); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.vx-concepts svg { width: 60%; height: 60%; }
.vx-palette { display: grid; align-content: center; gap: 14px; }
.vx-palette b { font-weight: 600; font-size: 3.4rem; line-height: 1; letter-spacing: -.04em; }
.vx-palette div { display: flex; gap: 6px; }
.vx-palette i { flex: 1; height: 48px; border-radius: 8px; background: var(--s); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transform-origin: 50% 100%; }
.vx-formats { display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; gap: 8px; }
.vx-formats span { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.1; border-radius: 8px; background: rgba(242, 80, 35, .14); color: var(--brand-hi); font: 600 13px var(--mono); clip-path: polygon(0 0, 72% 0, 100% 24%, 100% 100%, 0 100%); }
.vx-doc { display: flex; align-items: center; justify-content: center; }
.vx-doc span { display: flex; flex-direction: column; gap: 8px; width: 42%; aspect-ratio: 3 / 4; padding: 12% 8%; background: #F7F0EB; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.vx-doc span:first-child { border-radius: 8px 0 0 8px; transform: perspective(300px) rotateY(16deg); transform-origin: 100% 50%; }
.vx-doc span:last-child { border-radius: 0 8px 8px 0; transform: perspective(300px) rotateY(-16deg); transform-origin: 0 50%; background: #E9E0D9; }
.vx-doc i { display: block; height: 5px; border-radius: 9px; background: rgba(26, 26, 26, .5); }
.vx-doc i:first-child { height: 14px; background: #F25023; }
.vx-stat { position: relative; }
.vx-stat span { position: absolute; display: flex; flex-direction: column; gap: 6px; background: #F7F0EB; color: #F25023; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.vx-stat svg { width: 22px; height: 22px; margin-bottom: 8px; flex: none; }
.vx-stat i { display: block; height: 5px; width: 80%; border-radius: 9px; background: rgba(26, 26, 26, .4); }
.vx-stat .a { left: 10%; top: 6%; width: 56%; height: 88%; padding: 14px; border-radius: 6px; transform: rotate(-4deg); }
.vx-stat .b { right: 6%; bottom: 8%; width: 56%; aspect-ratio: 85 / 55; padding: 10px; border-radius: 6px; background: #1A1A1A; transform: rotate(5deg); }
.vx-stat .b i { background: rgba(255, 255, 255, .55); }
.vx-stat .b svg { width: 16px; height: 16px; margin-bottom: 4px; }
.vx-profile { position: relative; display: flex; flex-direction: column; align-items: center; }
.vx-profile .c { width: 100%; height: 42%; border-radius: 10px; background: linear-gradient(120deg, #F25023, #FF7A45); }
.vx-profile .p { display: grid; place-items: center; width: 60px; height: 60px; margin-top: -30px; border-radius: 50%; background: #1A1A1A; color: #F25023; box-shadow: 0 0 0 3px var(--surface); }
.vx-profile .p svg { width: 62%; height: 62%; }
.vx-profile div { display: flex; gap: 10px; margin-top: 10px; }
.vx-profile i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--brand-hi); color: var(--text); }
.vx-profile i svg { width: 16px; height: 16px; }
.vx-feed { display: grid; grid-template-columns: repeat(2, 64px); justify-content: center; align-content: center; gap: 10px; }
.vx-feed--line { grid-template-columns: repeat(auto-fit, 56px); color: var(--brand-hi); }
.vx-feed--line .sm-app { color: var(--brand-hi); box-shadow: inset 0 0 0 1px rgba(242, 80, 35, .35); }
.vx-badge { display: grid; place-items: center; }
.vx-badge span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 58%; padding: 22px 12px 14px; border-radius: 10px; background: #F7F0EB; color: #F25023; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); transform-origin: 50% -30px; }
.vx-badge span::before { content: ""; position: absolute; top: -34px; width: 2px; height: 42px; background: var(--brand-hi); }
.vx-badge svg { width: 44px; height: 44px; }
.vx-badge .h { width: 22%; height: 6px; border-radius: 9px; background: #1A1A1A; }
.vx-badge .l { width: 78%; height: 5px; border-radius: 9px; background: rgba(26, 26, 26, .35); }
.vx-floor { display: grid; place-items: center; }
.vx-floor svg { width: 100%; max-height: 190px; stroke: var(--brand-hi); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.vx-mock { display: grid; place-items: center; perspective: 600px; }
.vx-cube { position: relative; width: 96px; height: 120px; transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(-32deg); }
.vx-cube i { position: absolute; display: block; }
.vx-cube .f { inset: 0; background: linear-gradient(160deg, #FF7A45, #F25023); transform: translateZ(36px); }
.vx-cube .f::after { content: ""; position: absolute; left: 22%; right: 22%; top: 34%; aspect-ratio: 1; border-radius: 50%; background: #F7F0EB; }
.vx-cube .s { top: 0; left: 96px; width: 72px; height: 120px; margin-left: -36px; background: #C93A12; transform: rotateY(90deg); }
.vx-cube .t { left: 0; top: -36px; width: 96px; height: 72px; background: #FF9A70; transform: rotateX(90deg); }
.vx-bar { display: grid; place-items: center; }
.vx-bar__l { display: grid; gap: 8px; width: 82%; padding: 14px; border-radius: 10px; background: #F7F0EB; color: #1A1A1A; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.vx-bar__l .sm-sk { background: rgba(26, 26, 26, .3); }
.vx-bar__tags { display: flex; gap: 5px; }
.vx-bar__tags b { padding: 2px 6px; border-radius: 4px; background: #F25023; color: #fff; font: 600 10px var(--mono); }
.vx-bar__code { display: flex; gap: 2px; height: 42px; }
.vx-bar__code i { display: block; background: #1A1A1A; }
.vx-dev { position: relative; display: grid; place-items: center; }
.vx-dev span { display: flex; flex-direction: column; gap: 7px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px rgba(0, 0, 0, .4); overflow: hidden; }
.vx-dev i { display: block; height: 7px; border-radius: 9px; background: rgba(255, 240, 230, .16); }
.vx-dev .h { height: 42%; border-radius: 6px; background: linear-gradient(135deg, #FF7A45, #F25023); }
.vx-dev .d { width: 74%; aspect-ratio: 16 / 9; padding: 12px; border-radius: 10px; }
.vx-dev .m { position: absolute; right: 7%; bottom: 0; width: 22%; aspect-ratio: 9 / 17; padding: 7px; border-radius: 12px; }
.vx-gauge { display: grid; place-items: center; align-content: center; }
.vx-gauge svg { width: 88%; stroke-width: 9; stroke-linecap: round; }
.vx-gauge .t { stroke: rgba(255, 240, 230, .1); }
.vx-gauge .f { stroke: var(--brand-hi); stroke-dasharray: 1; stroke-dashoffset: .12; }
.vx-gauge b { margin-top: -34px; font-weight: 600; font-size: 1.15rem; }
.vx-edit { display: grid; align-content: center; gap: 12px; }
.vx-edit .sm-sk { height: 8px; }
.vx-edit__f { display: block; padding: 11px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--brand-hi); }
.vx-edit__f i { display: block; width: 58%; height: 8px; border-radius: 9px; background: rgba(255, 240, 230, .35); transform-origin: 0 50%; }
.vx-edit__b { justify-self: start; padding: 5px 16px; border-radius: 99px; background: var(--brand); color: #fff; font-size: .82rem; font-weight: 500; }
.vx-pages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: center; }
.vx-pages span { display: flex; flex-direction: column; gap: 6px; aspect-ratio: 3 / 4.4; padding: 9px; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.vx-pages i { display: block; height: 6px; border-radius: 9px; background: rgba(255, 240, 230, .16); }
.vx-pages .h { height: 44%; border-radius: 5px; background: linear-gradient(135deg, #FF7A45, #F25023); }
.vx-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; gap: 7px; }
.vx-grid span { aspect-ratio: 1; border-radius: 8px; background: rgba(242, 80, 35, .22); }
.vx-aspect { display: flex; align-items: center; justify-content: center; gap: 8px; }
.vx-aspect span { display: grid; place-items: center; width: calc(var(--w) * 1%); aspect-ratio: var(--w) / var(--h); border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--brand-hi); color: var(--text); font: 500 11px var(--mono); }
.vx-time { position: relative; display: grid; align-content: center; gap: 7px; overflow: hidden; }
.vx-time div { display: flex; gap: 4px; }
.vx-time b { height: 30px; border-radius: 6px; background: linear-gradient(135deg, #FF7A45, #C93A12); }
.vx-time div:nth-of-type(2) b { background: rgba(255, 240, 230, .16); }
.vx-time div:nth-of-type(3) b { background: rgba(242, 80, 35, .28); }
.vx-time .p { position: absolute; z-index: 1; top: 0; bottom: 0; left: 18%; width: 2px; background: #fff; box-shadow: 0 0 10px #fff; }
.vx-thumb { display: grid; place-items: center; }
.vx-thumb span { position: relative; display: grid; place-items: center; width: 84%; aspect-ratio: 16 / 9; border-radius: 10px; background: linear-gradient(120deg, #F25023, #1A1A1A); color: #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.vx-thumb svg { width: 40px; height: 40px; fill: #fff; }
.vx-thumb i { position: absolute; left: 8%; height: 7px; border-radius: 9px; background: #fff; }
.vx-thumb i:nth-of-type(1) { bottom: 26%; width: 46%; }
.vx-thumb i:nth-of-type(2) { bottom: 12%; width: 28%; }
.vx-tour { position: relative; display: grid; place-items: center; }
.vx-tour i { position: absolute; width: 74%; aspect-ratio: 1 / .34; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--brand-hi); }
.vx-tour i:nth-child(2) { transform: rotate(90deg); opacity: .4; }
.vx-tour b { font-weight: 600; font-size: 1.5rem; }
.vx-tune { display: grid; align-content: center; gap: 22px; }
.vx-tune i { position: relative; display: block; height: 4px; border-radius: 9px; background: rgba(255, 240, 230, .14); }
.vx-tune i::after { content: ""; position: absolute; top: -7px; left: 40%; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 14px var(--brand-glow); }

@media (prefers-reduced-motion: no-preference) {
  .vx-search__bar i { animation: sv-type 4.5s var(--ease-out) infinite; }
  .vx-concepts span { animation: sv-pick 7.5s var(--ease-out) infinite; animation-delay: calc(var(--i) * 2.5s); }
  .vx-palette i { animation: sv-pour 6s var(--ease-out) infinite; animation-delay: calc(var(--i) * .15s); }
  .vx-formats span { animation: sm-tag 6s var(--ease-out) infinite; animation-delay: calc(var(--i) * .2s); }
  .vx-stat .b, .vx-feed .sm-app, .vx-grid span { animation: sm-bob 3.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.35s); }
  .vx-feed .sm-app:nth-child(2) { animation-delay: -.8s; } .vx-feed .sm-app:nth-child(3) { animation-delay: -1.6s; } .vx-feed .sm-app:nth-child(4) { animation-delay: -2.4s; }
  .vx-profile i { animation: sm-bob 3.4s ease-in-out infinite; }
  .vx-profile i:nth-child(2) { animation-delay: -1s; } .vx-profile i:nth-child(3) { animation-delay: -2s; }
  .vx-badge span { animation: sv-swing 5s ease-in-out infinite; }
  .vx-floor path { stroke-dasharray: 1; animation: sv-draw 7s var(--ease-out) infinite; }
  .vx-floor path[stroke-dasharray] { animation: none; }
  .vx-cube { animation: sv-turn 9s ease-in-out infinite alternate; }
  .vx-bar__code i { animation: sv-scan 3s ease-in-out infinite; }
  .vx-dev .m { animation: sm-bob 3.6s ease-in-out infinite; }
  .vx-dev .h, .vx-pages .h { animation: sv-pour 6s var(--ease-out) infinite; transform-origin: 50% 100%; }
  .vx-gauge .f { animation: sv-gauge 5s var(--ease-out) infinite; }
  .vx-edit__f i { animation: sv-type 4.5s var(--ease-out) infinite; }
  .vx-pages span { animation: sm-tag 6s var(--ease-out) infinite; animation-delay: calc(var(--i) * .2s); }
  .vx-grid span { animation: sm-tag 6s var(--ease-out) infinite; animation-delay: calc(var(--i) * .12s); }
  .vx-aspect span { animation: sv-pick 6s var(--ease-out) infinite; }
  .vx-aspect span:nth-child(2) { animation-delay: 2s; } .vx-aspect span:nth-child(3) { animation-delay: 4s; }
  .vx-time .p { animation: sv-play 6s linear infinite; }
  .vx-thumb span { animation: sm-bob 4s ease-in-out infinite; }
  .vx-tour i { animation: sv-tour 6s linear infinite; }
  .vx-tour i:nth-child(2) { animation-direction: reverse; }
  .vx-tune i::after { animation: sv-slide 4.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.4s); }
}
@keyframes sv-type { 0% { transform: scaleX(.05); } 40%, 86% { transform: scaleX(1); } 100% { transform: scaleX(.05); } }
@keyframes sv-pick { 0%, 30%, 100% { color: var(--muted); background: rgba(255, 240, 230, .05); transform: none; } 6%, 26% { color: #FF7A45; background: rgba(242, 80, 35, .16); transform: translateY(-4px); } }
@keyframes sv-pour { 0%, 100% { transform: scaleY(.25); opacity: .6; } 18%, 84% { transform: none; opacity: 1; } }
@keyframes sv-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes sv-draw { 0% { stroke-dashoffset: 1; } 34%, 84% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes sv-turn { from { transform: rotateX(-14deg) rotateY(-44deg); } to { transform: rotateX(-14deg) rotateY(-14deg); } }
@keyframes sv-scan { 50% { opacity: .55; } }
@keyframes sv-gauge { 0%, 100% { stroke-dashoffset: 1; } 30%, 84% { stroke-dashoffset: .12; } }
@keyframes sv-play { from { left: 0; } to { left: 100%; } }
@keyframes sv-tour { to { transform: rotate(360deg); } }
@keyframes sv-slide { from { left: 8%; } to { left: 78%; } }

/* ==========================================================================
   Hero stages
   ========================================================================== */
.sv-stage { container-type: inline-size; }
.sv-stage .sm-sk { background: rgba(26, 26, 26, .2); }
.st-core { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.st-chip { position: absolute; z-index: 3; display: grid; overflow: hidden; height: 1.75em; padding-inline: .9em; border-radius: 99px; background: var(--brand); color: #fff; font: 500 clamp(9px, 2.1cqw, 13px)/1.75 var(--mono); text-transform: uppercase; }
.st-chip span { grid-area: 1 / 1; opacity: 0; }
.st-chip span:first-child { opacity: 1; }
.st-tag { position: absolute; z-index: 3; padding: .45em .95em; border-radius: 99px; background: rgba(21, 16, 13, .9); box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 24px rgba(0, 0, 0, .4); color: var(--text); font: 500 clamp(9px, 2.2cqw, 13px) var(--mono); text-transform: uppercase; backdrop-filter: blur(6px); }
.st-tag[style*="--i:0"] { left: 1%; top: 18%; } .st-tag[style*="--i:1"] { right: 2%; top: 26%; }
.st-tag[style*="--i:2"] { left: 0; bottom: 26%; } .st-tag[style*="--i:3"] { right: 0; bottom: 14%; }
.st-print .st-tag, .st-pack .st-tag { --x: 0; }

/* Logo */
.st-board { width: 54cqw; aspect-ratio: 1; padding: 3cqw; border-radius: 5cqw; background: #15100D; box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px rgba(0, 0, 0, .65), 0 0 90px rgba(242, 80, 35, .22); }
.st-board > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.st-board .st-chip { left: 3.2cqw; top: 3.2cqw; }
.st-guides { stroke: rgba(255, 240, 230, .16); stroke-width: .35; stroke-dasharray: 1.2 1.2; }
.st-mark { opacity: 0; }
.st-mark:nth-of-type(2) { opacity: 1; }
.st-swatches { position: absolute; right: 3.2cqw; bottom: 3.2cqw; display: flex; gap: .9cqw; }
.st-swatches i { width: 3.2cqw; height: 3.2cqw; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }

/* Print */
.st-sheet { position: absolute; width: 46cqw; aspect-ratio: 3 / 4; border-radius: 1.2cqw; background: #F7F0EB; box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
.st-sheet--b { left: 15%; top: 16%; background: #F25023; transform: rotate(-11deg); }
.st-sheet--c { right: 14%; top: 18%; background: #1A1A1A; box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px rgba(0, 0, 0, .6); transform: rotate(10deg); }
.st-sheet--a { display: flex; flex-direction: column; gap: 1.4cqw; width: 50cqw; padding: 3.4cqw; }
.st-ink { position: relative; flex: 1; margin-bottom: 1.4cqw; }
.st-ink b { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: multiply; }
.st-ink .c { left: 3%; top: 2%; background: #00AEEF; }
.st-ink .m { right: 3%; top: 2%; background: #EC008C; }
.st-ink .y { left: 21%; bottom: 0; background: #FFF200; }
.crop { position: absolute; width: 2.4cqw; height: 2.4cqw; border: 0 solid #1A1A1A; }
.crop.tl { left: 1cqw; top: 1cqw; border-width: 1px 0 0 1px; } .crop.tr { right: 1cqw; top: 1cqw; border-width: 1px 1px 0 0; }
.crop.bl { left: 1cqw; bottom: 1cqw; border-width: 0 0 1px 1px; } .crop.br { right: 1cqw; bottom: 1cqw; border-width: 0 1px 1px 0; }
.st-bar { position: absolute; right: -3.2cqw; top: 14%; display: grid; gap: .5cqw; }
.st-bar i { display: block; width: 2cqw; height: 2cqw; }
.st-bar i:nth-child(1) { background: #00AEEF; } .st-bar i:nth-child(2) { background: #EC008C; } .st-bar i:nth-child(3) { background: #FFF200; } .st-bar i:nth-child(4) { background: #1A1A1A; }

/* Packaging */
.st-die { position: absolute; inset: 3%; width: 94%; height: 94%; stroke: rgba(255, 214, 196, .2); stroke-width: .6; stroke-dasharray: 3 3; }
.st-box { --w: 30cqw; --h: 42cqw; --d: 18cqw; perspective: 110cqw; width: var(--w); height: var(--h); }
.st-box__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(-32deg); }
.st-box__in > span { position: absolute; display: block; backface-visibility: visible; }
.st-box .f, .st-box .k { inset: 0; }
.st-box .f { background: linear-gradient(160deg, #FF7A45, #F25023); transform: translateZ(calc(var(--d) / 2)); overflow: hidden; }
.st-box .f .s { position: absolute; right: -16%; bottom: -8%; width: 86%; aspect-ratio: 1; border-radius: 50%; background: #F7F0EB; }
.st-box .f .l, .st-box .r .l, .st-box .b .l { display: block; height: 1cqw; margin: 2cqw 2.2cqw 0; border-radius: 9px; background: #F7F0EB; }
.st-box .f .l:nth-of-type(3) { width: 40%; opacity: .7; margin-top: 1cqw; }
.st-box .k { background: #C93A12; transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.st-box .r, .st-box .b { top: 0; left: 50%; width: var(--d); height: 100%; margin-left: calc(var(--d) / -2); }
.st-box .r { background: #F7F0EB; transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.st-box .r .l { background: rgba(26, 26, 26, .35); margin-top: 1.2cqw; }
.st-box .b { background: #D9460F; transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.st-box__code { display: flex; gap: .3cqw; height: 6cqw; margin: 20cqw 1.6cqw 0; }
.st-box__code i { display: block; background: #1A1A1A; }
.st-box .t, .st-box .u { left: 0; top: 50%; width: 100%; height: var(--d); margin-top: calc(var(--d) / -2); }
.st-box .t { background: #FF9A70; transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.st-box .u { background: #8F2C0B; transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
.st-pouch, .st-jar { position: absolute; z-index: 1; display: block; }
.st-pouch { left: 7%; bottom: 8%; width: 19cqw; height: 25cqw; border-radius: 1.2cqw 1.2cqw 3cqw 3cqw; background: #F7F0EB; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.st-pouch i { position: absolute; left: 0; right: 0; top: 2.6cqw; height: 1px; background: rgba(26, 26, 26, .3); }
.st-pouch b { position: absolute; left: 22%; right: 22%; top: 38%; aspect-ratio: 1; border-radius: 50%; background: #F25023; }
.st-jar { right: 6%; bottom: 10%; width: 17cqw; height: 21cqw; border-radius: 2.2cqw; background: #1D1612; box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px rgba(0, 0, 0, .5); }
.st-jar i { position: absolute; left: 12%; right: 12%; top: -2.2cqw; height: 3.2cqw; border-radius: .8cqw; background: #F25023; }
.st-jar b { position: absolute; left: 0; right: 0; top: 34%; height: 40%; background: #F7F0EB; }

/* Website */
.st-browser { width: 84cqw; aspect-ratio: 16 / 10.4; overflow: hidden; border-radius: 2.4cqw; background: #120D0A; box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px rgba(0, 0, 0, .65), 0 0 90px rgba(242, 80, 35, .2); }
.st-browser__top { display: flex; align-items: center; gap: 1cqw; padding: 1.8cqw; border-bottom: 1px solid var(--line); }
.st-browser__top i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: rgba(255, 240, 230, .2); }
.st-browser__top i:first-child { background: var(--brand); }
.st-browser__top span { flex: 1; height: 2.6cqw; margin-left: 2cqw; border-radius: 99px; background: rgba(255, 240, 230, .07); }
.st-browser__load { height: 2px; background: var(--brand-hi); transform-origin: 0 50%; box-shadow: 0 0 10px var(--brand-glow); }
.st-site { display: grid; gap: 2cqw; padding: 2.4cqw; }
.st-site .n { display: flex; gap: 1.4cqw; justify-content: flex-end; }
.st-site .n i { width: 6cqw; height: 1cqw; border-radius: 9px; background: rgba(255, 240, 230, .18); }
.st-site .h { display: grid; gap: 1.4cqw; justify-items: start; align-content: center; height: 24cqw; padding: 3cqw; border-radius: 1.6cqw; background: linear-gradient(120deg, #F25023, #FF7A45); }
.st-site .h .sm-sk { width: 52%; height: 2.2cqw; background: #F7F0EB; }
.st-site .h .sm-sk + .sm-sk { width: 34%; opacity: .7; }
.st-site .h b { margin-top: .6cqw; padding: .6cqw 1.8cqw; border-radius: 99px; background: #150C07; color: #fff; font-weight: 500; font-size: clamp(8px, 1.8cqw, 12px); }
.st-site .g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.st-site .g i { height: 9cqw; border-radius: 1.2cqw; background: rgba(255, 240, 230, .08); box-shadow: inset 0 0 0 1px var(--line); }
.st-cursor { position: absolute; left: 62%; top: 72%; width: 4cqw; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.st-cursor svg { display: block; width: 100%; }
.st-mob { position: absolute; z-index: 3; right: 2%; bottom: 12%; display: grid; align-content: start; gap: 1cqw; width: 19cqw; aspect-ratio: 9 / 17.5; padding: 1.4cqw; border-radius: 3cqw; background: #120D0A; box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px rgba(0, 0, 0, .65); }
.st-mob .n { height: 1cqw; width: 40%; margin: .6cqw auto; border-radius: 9px; background: rgba(255, 240, 230, .2); }
.st-mob .h { display: grid; gap: 1cqw; align-content: end; height: 15cqw; padding: 1.2cqw; border-radius: 1.4cqw; background: linear-gradient(140deg, #F25023, #FF7A45); }
.st-mob .h .sm-sk { height: 1cqw; background: #F7F0EB; }
.st-mob .h b { display: block; width: 70%; height: 2.4cqw; border-radius: 99px; background: #150C07; }
.st-mob .g { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8cqw; }
.st-mob .g i { height: 7cqw; border-radius: 1cqw; background: rgba(255, 240, 230, .08); }
.st-float { position: absolute; z-index: 3; width: 10.5cqw; }
.st-float[style*="--i:0"] { left: 1%; top: 12%; } .st-float[style*="--i:1"] { left: 27%; top: 5%; }
.st-float[style*="--i:2"] { right: 16%; top: 8%; } .st-float[style*="--i:3"] { left: 2%; bottom: 14%; }

/* Shopify */
.st-store { width: 40cqw; aspect-ratio: 9 / 18.6; padding: 1cqw; border-radius: 5cqw; background: #17120F; box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px rgba(0, 0, 0, .65), 0 0 90px rgba(242, 80, 35, .22); display: flex; flex-direction: column; gap: 1.4cqw; overflow: hidden; }
.st-store__top { display: flex; align-items: center; justify-content: space-between; padding: 2.4cqw 2cqw 1cqw; }
.st-store__top .sm-sk { width: 40%; height: 1.2cqw; background: rgba(255, 240, 230, .22); }
.st-cart { position: relative; display: block; width: 4.4cqw; color: var(--text); }
.st-cart svg { display: block; width: 100%; }
.st-cart b { position: absolute; right: -1.2cqw; top: -1.2cqw; display: grid; place-items: center; min-width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: var(--brand); color: #fff; font: 600 clamp(7px, 1.5cqw, 10px) var(--mono); }
.st-store__grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 1cqw; padding-inline: 1cqw; }
.st-prod { display: flex; flex-direction: column; gap: .7cqw; min-height: 0; }
.st-prod .sm-art { flex: 1; min-height: 0; border-radius: 1cqw; }
.st-prod > i { display: block; width: 76%; height: .9cqw; border-radius: 9px; background: rgba(255, 240, 230, .24); }
.st-prod > b { display: block; width: 42%; height: .9cqw; border-radius: 9px; background: var(--brand-hi); margin-bottom: .5cqw; }
.st-store__btn { margin: .4cqw 1cqw 1.4cqw; padding: 1.5cqw; border-radius: 99px; background: var(--brand); color: #fff; text-align: center; font-weight: 500; font-size: clamp(8px, 2cqw, 13px); }
.st-tap { position: absolute; left: 50%; bottom: 3.4cqw; width: 7cqw; height: 7cqw; margin-left: -3.5cqw; border-radius: 50%; background: rgba(255, 255, 255, .4); opacity: 0; }
.st-fly { position: absolute; left: 50%; bottom: 8cqw; width: 8cqw; height: 8cqw; margin-left: -4cqw; border-radius: 1.2cqw; background: #F7F0EB; opacity: 0; }

/* Video */
.st-edit { display: flex; flex-direction: column; gap: 2cqw; width: 88cqw; padding: 2.4cqw; border-radius: 3cqw; background: #120D0A; box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px rgba(0, 0, 0, .65), 0 0 90px rgba(242, 80, 35, .2); }
.st-edit__mon { display: grid; place-items: center; height: 49cqw; border-radius: 1.6cqw; background: #070504; }
.st-frame { position: relative; display: grid; place-items: center; width: 26cqw; height: 46cqw; overflow: hidden; border-radius: 1cqw; background: radial-gradient(90% 70% at 50% 40%, #FF7A45, #C93A12 62%, #4A1708); }
.st-frame__tag { position: absolute; left: 1.2cqw; top: 1.2cqw; display: grid; padding: .2cqw .9cqw; border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff; font: 500 clamp(8px, 1.7cqw, 11px) var(--mono); }
.st-frame__tag span { grid-area: 1 / 1; opacity: 0; }
.st-frame__tag span:first-child { opacity: 1; }
.st-frame__play { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(0, 0, 0, .4); color: #fff; }
.st-frame__play svg { width: 44%; height: 44%; fill: #fff; margin-left: 6%; }
.st-frame__cc { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); padding: .3cqw 1cqw; background: #fff; color: #150C07; font-weight: 600; font-size: clamp(8px, 1.8cqw, 12px); white-space: nowrap; }
.st-edit__tl { position: relative; display: grid; gap: .8cqw; padding-block: .6cqw; overflow: hidden; }
.st-edit__tl .tr { display: flex; gap: .5cqw; height: 4.4cqw; }
.st-edit__tl .tr b { border-radius: .7cqw; background: linear-gradient(135deg, #FF7A45, #C93A12); }
.st-edit__tl .tr.vt b { background: rgba(255, 240, 230, .14); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-edit__tl .tr.a { align-items: center; gap: .3cqw; }
.st-edit__tl .tr.a i { flex: 1; height: 100%; border-radius: 9px; background: var(--brand-hi); opacity: .75; transform: scaleY(.4); }
.st-head { position: absolute; z-index: 1; top: 0; bottom: 0; left: 30%; width: 2px; background: #fff; box-shadow: 0 0 10px #fff; }

/* 3D */
.st-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-chip--c { left: 50%; bottom: 6%; transform: translateX(-50%); }
.st-chip--c span { animation: none !important; }

/* Google Ads */
.st-serp { display: grid; gap: 2.6cqw; width: 88cqw; padding: 3cqw; border-radius: 3.4cqw; background: #120D0A; box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px rgba(0, 0, 0, .65), 0 0 90px rgba(242, 80, 35, .22); }
.st-serp .sm-sk { height: 1.3cqw; background: rgba(255, 240, 230, .16); }
.st-serp__bar { display: flex; align-items: center; gap: 1.6cqw; padding: 2cqw 2.6cqw; border-radius: 99px; background: rgba(255, 240, 230, .06); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.st-serp__bar svg { flex: none; width: 3.6cqw; height: 3.6cqw; }
.st-serp__bar svg:last-child { margin-left: auto; color: var(--brand-hi); }
.st-q { min-height: 1.3em; font-size: clamp(11px, 2.7cqw, 17px); white-space: nowrap; }
.st-caret { width: 2px; height: 3.2cqw; background: var(--brand-hi); }
.st-ad { display: grid; gap: 1.2cqw; padding: 2.8cqw; border-radius: 2cqw; background: linear-gradient(135deg, rgba(242, 80, 35, .2), rgba(242, 80, 35, .05)); box-shadow: inset 0 0 0 1.5px var(--brand); }
.st-ad small { color: var(--brand-hi); font: 500 clamp(9px, 1.9cqw, 12px) var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.st-ad b { font-weight: 600; font-size: clamp(16px, 4.2cqw, 28px); letter-spacing: -.02em; }
.st-ad__acts { display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: 1cqw; }
.st-ad__acts span { display: inline-flex; align-items: center; gap: .8cqw; padding: .8cqw 1.8cqw; border-radius: 99px; background: var(--brand); color: #fff; font-weight: 500; font-size: clamp(9px, 2.1cqw, 13px); }
.st-ad__acts svg { width: 2.6cqw; height: 2.6cqw; min-width: 11px; min-height: 11px; }
.st-res { display: grid; gap: 1.3cqw; padding-inline: 2.8cqw; }
.sv-pop { position: absolute; z-index: 4; display: grid; place-items: center; width: 9%; aspect-ratio: 1; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 8px 22px rgba(242, 80, 35, .45); pointer-events: none; }
.sv-pop svg { width: 54%; height: 54%; }

@media (prefers-reduced-motion: no-preference) {
  .st-chip span { animation: sv-swap 9s steps(1) infinite; animation-delay: calc(var(--n, 0) * 3s); }
  .st-chip span:nth-child(2) { --n: 1; opacity: 0; } .st-chip span:nth-child(3) { --n: 2; opacity: 0; }
  .st-mark { animation: sv-mark 9s var(--ease-out) infinite; animation-delay: calc((var(--i) * 3s)); }
  .st-mark:nth-of-type(2) { opacity: 0; }
  .st-guides circle { transform-origin: 50% 50%; animation: sv-tour 24s linear infinite; }
  .st-swatches i { animation: sm-bob 3.2s ease-in-out infinite; }
  .st-swatches i:nth-child(2) { animation-delay: -.8s; } .st-swatches i:nth-child(3) { animation-delay: -1.6s; } .st-swatches i:nth-child(4) { animation-delay: -2.4s; }
  .st-ink .c { animation: sv-ink1 7s ease-in-out infinite; } .st-ink .m { animation: sv-ink2 7s ease-in-out infinite; } .st-ink .y { animation: sv-ink3 7s ease-in-out infinite; }
  .st-sheet--b { animation: sv-fanl 6s ease-in-out infinite alternate; } .st-sheet--c { animation: sv-fanr 6s ease-in-out infinite alternate; }
  .st-tag { animation: sm-bob 4s ease-in-out infinite; animation-delay: calc(var(--i) * -1s); }
  .st-pouch { animation: sv-bob2 4.4s ease-in-out infinite; } .st-jar { animation: sv-bob2 5s ease-in-out infinite -1.4s; }
  .st-browser__load { animation: sv-load 8s var(--ease-out) infinite; }
  .st-site .h, .st-site .n, .st-site .g i, .st-mob .h, .st-mob .g i { animation: sv-build 8s var(--ease-out) infinite; }
  .st-site .h, .st-mob .h { animation-delay: .25s; } .st-site .g i:nth-child(1), .st-mob .g i:nth-child(1) { animation-delay: .5s; } .st-site .g i:nth-child(2), .st-mob .g i:nth-child(2) { animation-delay: .65s; } .st-site .g i:nth-child(3) { animation-delay: .8s; }
  .st-cursor { animation: sv-cursor 8s var(--ease-out) infinite; }
  .st-site .h b { animation: sv-press 8s var(--ease-out) infinite; }
  .st-float { animation: sm-bob 4s ease-in-out infinite; animation-delay: calc(var(--i) * -1s); }
  .st-mob { animation: sv-bob2 5s ease-in-out infinite; }
  .st-frame { animation: sv-ratio 9s var(--ease-out) infinite; }
  .st-frame__tag span { animation: sv-swap 9s steps(1) infinite; }
  .st-frame__tag span:nth-child(2) { animation-delay: 3s; opacity: 0; } .st-frame__tag span:nth-child(3) { animation-delay: 6s; opacity: 0; }
  .st-head { animation: sv-play 6s linear infinite; }
  .st-edit__tl .tr.a i { animation: sm-eq 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); }
  .st-caret { animation: sv-blink 1s steps(1) infinite; }
}
@keyframes sv-swap { 0% { opacity: 1; } 33.33%, 100% { opacity: 0; } }
@keyframes sv-mark { 0% { opacity: 0; transform: scale(.86); } 4%, 29% { opacity: 1; transform: none; } 33.33%, 100% { opacity: 0; } }
@keyframes sv-ink1 { 50% { transform: translate(12%, 12%); } }
@keyframes sv-ink2 { 50% { transform: translate(-12%, 12%); } }
@keyframes sv-ink3 { 50% { transform: translateY(-16%); } }
@keyframes sv-fanl { from { transform: rotate(-7deg); } to { transform: rotate(-15deg) translateX(-3%); } }
@keyframes sv-fanr { from { transform: rotate(6deg); } to { transform: rotate(14deg) translateX(3%); } }
@keyframes sv-bob2 { 50% { transform: translateY(-5%); } }
@keyframes sv-load { 0% { transform: scaleX(0); opacity: 1; } 16% { transform: scaleX(1); opacity: 1; } 22%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes sv-build { 0%, 4% { opacity: 0; transform: translateY(8px); } 14%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sv-cursor { 0%, 26% { transform: translate(180%, 240%); opacity: 0; } 34% { opacity: 1; } 56%, 66% { transform: translate(-560%, -350%); opacity: 1; } 84%, 100% { transform: translate(120%, 160%); opacity: 0; } }
@keyframes sv-press { 0%, 56% { transform: none; } 60% { transform: scale(.9); background: #fff; color: #150C07; } 66%, 100% { transform: none; } }
@keyframes sv-ratio { 0%, 28% { width: 26cqw; height: 46cqw; } 33.33%, 61% { width: 44cqw; height: 44cqw; } 66.66%, 95% { width: 78cqw; height: 44cqw; } 100% { width: 26cqw; height: 46cqw; } }
@keyframes sv-blink { 50% { opacity: 0; } }

@media (max-width: 1040px) {
  .sm-plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sm-plans--4, .sv-tiles { grid-template-columns: 1fr; }
  .sv-tile { min-height: 0; flex-direction: row; flex-wrap: wrap; column-gap: 14px; align-items: center; }
  .sv-tile__glyph { margin: 0; }
  .sv-tile h3 { margin: 0; flex: 1; }
  .sv-tile p { flex-basis: 100%; }
  .sm-inc--w { grid-column: auto; }
}
.sm-inc--w .v-posts .sm-art { width: 30%; }

/* ---- U&W Enterprise case ---- */
.uw { --uw-o: #F26B1D; --uw-d: #12151B; --uw-c: #F6F1E8; --uw-disp: "Oswald", "Arial Narrow", sans-serif; overflow: clip; color: var(--uw-c); background: var(--uw-d); }
.uw-ch { display: grid; gap: 8px; }
.uw-ch__n { font-size: 12px; color: var(--uw-o); letter-spacing: .08em; text-transform: uppercase; }
.uw-ch h2 { margin: 0; font: 600 clamp(3rem, 8vw, 7.4rem)/1 var(--uw-disp); letter-spacing: -.01em; text-transform: uppercase; }

.uw-hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding-top: calc(var(--header-h, 80px) + 24px); isolation: isolate; overflow: clip; color: #fff; }
.uw-hero__sky { position: absolute; inset: 0 0 42% 0; z-index: -3; background: linear-gradient(#0F2747 0%, #2C4A78 38%, #B9694A 76%, #F7A24C 100%); overflow: hidden; }
.uw-sun { position: absolute; left: 50%; bottom: -13vmin; width: 34vmin; height: 34vmin; margin-left: -17vmin; border-radius: 50%; background: radial-gradient(circle, #FFE9B0 0 34%, #FFC15C 58%, rgba(255, 150, 60, 0) 72%); }
.uw-hero__ground, .uw-road { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.uw-road { z-index: -1; }
.uw.is-live .uw-hero__ground { display: none; }
.uw-hero__mid { position: relative; display: grid; justify-items: center; gap: 6px; margin-top: clamp(4px, 1.5vh, 20px); text-align: center; }
.uw-mark { width: clamp(64px, 8vmin, 92px); height: auto; filter: drop-shadow(0 4px 18px rgba(10, 18, 34, .45)); }
.uw-hero__name { margin: 0; font: 600 clamp(3.2rem, 12.5vw, 12.5rem)/.95 var(--uw-disp); letter-spacing: -.012em; text-transform: uppercase; text-shadow: 0 8px 50px rgba(10, 18, 34, .4); }
.uw-hero__line { margin: 10px 0 0; font-size: clamp(1rem, 1.5vw, 1.3rem); }
.uw-hero__low { margin-top: auto; padding-bottom: clamp(18px, 3vh, 34px); }
.uw-hero::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 24%; background: linear-gradient(transparent, rgba(13, 15, 19, .82)); pointer-events: none; }
.uw-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px clamp(16px, 3vw, 44px); margin: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .28); }
.uw-facts dt { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.uw-facts dd { margin: 3px 0 0; font-size: clamp(.92rem, 1.2vw, 1.05rem); }

.uw-about { padding-block: clamp(72px, 11vw, 150px); color: var(--uw-d); background: var(--uw-c); }
.uw-lede { max-width: 21em; margin: 0; font: 500 clamp(2rem, 4.8vw, 4.3rem)/1.08 var(--uw-disp); letter-spacing: -.005em; text-transform: uppercase; }
.uw-lanes { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 8vw, 120px); margin-top: clamp(48px, 7vw, 96px); }
.uw-lanes__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background: repeating-linear-gradient(var(--uw-o) 0 26px, transparent 26px 46px); transform-origin: top; }
.uw-lane__k { margin: 0 0 12px; font-size: 12px; color: #B84A0E; text-transform: uppercase; letter-spacing: .06em; }
.uw-lane h3 { margin: 0 0 12px; font: 600 clamp(1.6rem, 3vw, 2.5rem)/1.1 var(--uw-disp); text-transform: uppercase; }
.uw-lane p:not(.uw-lane__k) { margin: 0; line-height: 1.6; max-width: 34em; }
.uw-lane__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.uw-lane__list li { padding: 7px 13px; border: 1px solid rgba(18, 21, 27, .25); border-radius: 99px; font-size: 13px; }

.uw-social { position: relative; isolation: isolate; overflow: clip; padding-top: clamp(56px, 8vw, 90px); }
.uw-social__sky { position: absolute; inset: 0; z-index: -3; background: linear-gradient(#0F2747 0%, #24406C 42%, #A65F47 76%, #EE9A4A 92%); }
.uw-hills { position: absolute; left: 0; bottom: var(--uw-street); z-index: -2; width: 200%; height: 16%; fill: #1B1E24; }
.uw-social { --uw-street: 84px; }
.uw-rail { display: flex; align-items: flex-end; gap: clamp(28px, 4vw, 64px); padding-inline: clamp(20px, 4vw, 64px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.uw-rail::-webkit-scrollbar { display: none; }
.uw-social__intro { flex: none; align-self: center; width: min(84vw, 520px); scroll-snap-align: start; }
.uw-social__intro > p { margin: 16px 0 0; line-height: 1.6; max-width: 30em; }
.uw-hint { font-size: 12px; color: #FFC08E; }
.uw-hint__d { display: none; }
.uw-board { flex: none; width: min(74vw, 340px); margin: 0; scroll-snap-align: center; }
.uw-board__in { display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: none; box-shadow: 0 0 0 5px #23262C, 0 26px 50px rgba(5, 8, 16, .5); cursor: zoom-in; }
.uw-board__in img { display: block; width: 100%; height: auto; transition: transform .7s var(--ease, ease); }
.uw-board__in:hover img { transform: scale(1.03); }
.uw-board__legs { position: relative; display: flex; align-items: center; justify-content: center; height: 46px; }
.uw-board__legs::before, .uw-board__legs::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9px; background: linear-gradient(90deg, #17191E, #3A3D44); }
.uw-board__legs::before { left: 18%; } .uw-board__legs::after { right: 18%; }
.uw-board__legs span { position: relative; z-index: 1; max-width: 62%; font-size: 11px; line-height: 1.2; color: #fff; text-align: center; text-transform: uppercase; }
.uw-rail__end { flex: none; width: 1px; }
.uw-street { position: relative; height: var(--uw-street); background: #1B1E24; }
.uw-street::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--uw-o); }
.uw-street::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 4px; background: repeating-linear-gradient(90deg, var(--uw-c) 0 60px, transparent 60px 120px); background-position-x: var(--dash, 0); }
.uw-truck { position: absolute; left: clamp(16px, 8vw, 110px); bottom: 26px; z-index: 2; width: clamp(130px, 15vw, 210px); height: auto; }

.uw-perks { overflow: hidden; padding-block: 16px; background: var(--uw-o); color: var(--uw-d); }
.uw-perks__line { display: flex; width: max-content; font: 600 clamp(1.1rem, 2vw, 1.6rem)/1 var(--uw-disp); text-transform: uppercase; animation: uw-run 44s linear infinite; }
.uw-perks__line span { padding-inline: 22px; white-space: nowrap; }
.uw-perks__line span::after { content: "/"; margin-left: 44px; opacity: .45; }
@keyframes uw-run { to { transform: translateX(-50%); } }

.uw-web { padding-top: clamp(72px, 10vw, 140px); }
.uw-web__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.uw-web__text p { margin: 0 0 14px; line-height: 1.65; }
.uw-visit { display: inline-block; font-size: 13px; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.uw-visit:hover { color: var(--uw-o); }
.uw-web__sub { margin: clamp(48px, 6vw, 80px) 0 16px; font-size: 12px; color: #FFB27F; text-transform: uppercase; letter-spacing: .06em; }
.uw-opens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); }
.uw-open { margin: 0; }
.uw-open img { display: block; width: 100%; height: auto; border-radius: 10px; }
.uw-open figcaption { margin-top: 10px; font-size: 11px; opacity: .72; }
.uw-route { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; margin-top: clamp(40px, 6vw, 70px); padding: clamp(20px, 3vh, 34px) clamp(20px, 4vw, 64px); box-sizing: border-box; }
.uw-route__side .uw-web__sub { margin-top: 0; }
.uw-stops { position: relative; display: grid; gap: clamp(14px, 3vh, 30px); margin: 18px 0 0; padding: 0 0 0 30px; list-style: none; }
.uw-stops__line { position: absolute; left: 6px; top: 6px; bottom: 6px; width: 3px; background: rgba(255, 255, 255, .16); }
.uw-stops__line i { position: absolute; left: -6px; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--uw-o); box-shadow: 0 0 0 5px rgba(242, 107, 29, .25); }
.uw-stops li { display: flex; align-items: baseline; gap: 10px; opacity: .45; transition: opacity .35s; }
.uw-stops li.is-on { opacity: 1; }
.uw-stops li.uw-stops__line { display: block; opacity: 1; }
.uw-stops span { font-size: 11px; color: var(--uw-o); }
.uw-stops b { font: 500 clamp(1.05rem, 1.7vw, 1.5rem)/1.1 var(--uw-disp); text-transform: uppercase; }
.uw-browser { display: flex; flex-direction: column; min-width: 0; margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }
.uw-browser__bar { display: flex; align-items: center; gap: 7px; flex: none; height: 38px; padding-inline: 14px; background: #E6E7EA; color: #4C4F55; }
.uw-browser__bar i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #B4B6BB; }
.uw-browser__bar span { margin-left: 10px; padding: 3px 12px; border-radius: 99px; background: #fff; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uw-browser__screen { height: 74svh; overflow-y: auto; background: #fff; }
.uw-browser__screen img { display: block; width: 100%; height: auto; }
.uw.is-driven .uw-browser__screen { overflow: hidden; }
.uw.is-driven .uw-route { height: 100svh; margin-top: 0; padding-top: calc(var(--header-h, 80px) + 8px); }
.uw.is-driven .uw-browser { align-self: stretch; }
.uw.is-driven .uw-browser__screen { flex: 1; height: auto; min-height: 0; }

.uw-mob { padding-block: clamp(72px, 10vw, 140px); }
.uw-mob__text { max-width: 34em; margin: 18px 0 0; line-height: 1.65; }
.uw-phones { display: flex; justify-content: center; gap: clamp(20px, 4vw, 64px); margin-top: clamp(40px, 6vw, 80px); padding-inline: 20px; }
.uw-phone { flex: 0 1 300px; min-width: 0; margin: 0; }
.uw-phone__screen { aspect-ratio: 390 / 800; border: 9px solid #2A2D33; border-radius: 38px; overflow: hidden; background: #fff; box-shadow: 0 34px 70px rgba(0, 0, 0, .55); }
.uw-phone__screen img { display: block; width: 100%; height: auto; }
.uw-phone figcaption { margin-top: 14px; font-size: 12px; text-align: center; }

@media (min-width: 901px) {
  .uw-hint__d { display: inline; } .uw-hint__m { display: none; }
  .uw-social.is-pinned { height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--header-h, 80px) + 6px); }
  .uw-social.is-pinned .uw-rail { flex: 1; min-height: 0; width: max-content; overflow: visible; padding-inline: clamp(40px, 6vw, 100px) 12vw; }
  .uw-social.is-pinned .uw-board { width: auto; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
  .uw-social.is-pinned .uw-board__in { height: calc(100% - 46px); max-height: calc(100svh - var(--header-h, 80px) - var(--uw-street) - 66px); aspect-ratio: 4 / 5; width: auto; }
  .uw-social.is-pinned .uw-board__in img { height: 100%; width: 100%; object-fit: cover; }
}
@media (max-width: 900px) {
  .uw-web__head { grid-template-columns: 1fr; }
  .uw-route { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
  .uw.is-driven .uw-route { grid-template-rows: auto minmax(0, 1fr); }
  .uw-route__side .uw-web__sub { margin-bottom: 8px; }
  .uw-stops { display: flex; gap: 14px; margin: 0; padding: 0 0 12px; overflow: hidden; border-bottom: 2px solid rgba(255, 255, 255, .14); }
  .uw-stops li.uw-stops__line { display: none; }
  .uw-stops li { flex: none; display: none; opacity: 1; }
  .uw-stops li.is-on { display: flex; }
  .uw:not(.is-driven) .uw-stops li { display: flex; }
  .uw:not(.is-driven) .uw-stops { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .uw-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .uw-facts > div:last-child { grid-column: 1 / -1; }
  .uw-hero__low { width: 100%; max-width: none; background: #0D0F13; padding-top: 2px; }
  .uw-lanes { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .uw-lanes__line { left: 0; right: 0; top: 50%; bottom: auto; width: 100%; height: 4px; margin: -2px 0 0; background: repeating-linear-gradient(90deg, var(--uw-o) 0 26px, transparent 26px 46px); transform-origin: left; }
  .uw-opens { grid-template-columns: minmax(0, 1fr); }
  .uw-phones { gap: 14px; overflow-x: auto; justify-content: flex-start; scroll-snap-type: x proximity; scrollbar-width: none; }
  .uw-phone { flex: none; width: 66vw; scroll-snap-align: center; }
}

/* ---- The Woman Who Finishes case ---- */
.tw { --tw-p: #E8177A; --tw-l: #57F02A; --tw-k: #0B0B0B; --tw-disp: "Anton", Impact, "Arial Narrow", sans-serif; overflow: clip; color: #fff; background: var(--tw-k); }
.tw-ch { display: grid; gap: 8px; }
.tw-ch__n { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tw-l); }
.tw-ch h2 { margin: 0; font: 400 clamp(3.2rem, 9vw, 8.6rem)/1 var(--tw-disp); text-transform: uppercase; }

.tw-hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding-top: calc(var(--header-h, 80px) + 22px); padding-bottom: clamp(16px, 3vh, 30px); overflow: clip; background: radial-gradient(70% 55% at 50% 52%, #4A0A2B 0%, var(--tw-k) 72%); }
.tw-hero__stage { position: relative; flex: 1; min-height: 340px; margin-block: clamp(8px, 2vh, 20px); }
.tw-title { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; font: 400 min(17.6vw, 31svh)/1.04 var(--tw-disp); text-transform: uppercase; white-space: nowrap; }
.tw-t { display: block; overflow: hidden; padding-inline: .05em; }
.tw-t i { display: block; font-style: normal; }
.tw-t--b i { color: var(--tw-p); }
.tw-title--line { z-index: 3; pointer-events: none; color: transparent; }
.tw-title--line .tw-t i { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .92); }
.tw-hero__art { position: absolute; left: 50%; top: 50%; z-index: 2; width: min(40vw, calc(66svh * .8)); margin-left: calc(min(40vw, calc(66svh * .8)) / -2); transform: translateY(-50%); }
.tw-hero__art img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 50px 110px rgba(0, 0, 0, .65); }
.tw-seal { position: absolute; right: clamp(14px, 6vw, 110px); bottom: 2%; z-index: 4; width: clamp(92px, 11vw, 160px); height: auto; }
.tw-seal circle { fill: var(--tw-l); }
.tw-seal text { font: 400 25px var(--tw-disp); letter-spacing: 2.2px; fill: #111; }
.tw-seal path:not([id]) { stroke: #111; stroke-linecap: round; stroke-linejoin: round; }
.tw-seal__spin { transform-origin: 100px 100px; animation: tw-spin 16s linear infinite; }
@keyframes tw-spin { to { transform: rotate(360deg); } }
.tw-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px clamp(14px, 3vw, 44px); margin: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .25); }
.tw-facts dt { font-size: 11px; color: var(--tw-l); text-transform: uppercase; letter-spacing: .06em; }
.tw-facts dd { margin: 3px 0 0; font-size: clamp(.92rem, 1.2vw, 1.05rem); }

.tw-about { padding-block: clamp(80px, 12vw, 170px); }
.tw-quote { max-width: 15em; margin: 0; font: 400 clamp(2.8rem, 8vw, 7.6rem)/1.06 var(--tw-disp); text-transform: uppercase; }
.tw-quote em { font-style: normal; color: var(--tw-l); }
.tw-about__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 8vw, 130px); margin-top: clamp(44px, 6vw, 84px); }
.tw-about__grid p { margin: 0 0 16px; line-height: 1.65; max-width: 36em; }
.tw-scope { margin: 0; padding: 0; list-style: none; }
.tw-scope li { display: flex; gap: 16px; align-items: baseline; padding-block: 12px; border-top: 1px solid rgba(255, 255, 255, .2); font: 400 clamp(1.2rem, 2vw, 1.7rem)/1.2 var(--tw-disp); text-transform: uppercase; }
.tw-scope li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.tw-scope span { font-size: 11px; color: var(--tw-p); }

.tw-logo { padding-top: clamp(72px, 10vw, 130px); color: #111; background: #fff; }
.tw-logo .tw-ch__n { color: #C40F64; }
.tw-logo__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); align-items: end; margin-top: clamp(20px, 3vw, 40px); }
.tw-logo__mark img { display: block; width: 100%; max-width: 760px; height: auto; margin-inline: auto; }
.tw-logo__side p { margin: 0 0 26px; line-height: 1.65; }
.tw-logo__cap { margin: 0; border-radius: 10px; overflow: hidden; }
.tw-logo__cap img { display: block; width: 100%; height: auto; }
.tw-swatches { display: flex; margin: clamp(48px, 7vw, 90px) 0 0; padding: 0; list-style: none; height: clamp(150px, 24vw, 300px); }
.tw-swatches li { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 0; padding: 16px clamp(10px, 2vw, 26px); color: var(--t); background: var(--c); transition: flex-grow .6s var(--ease, ease); }
.tw-swatches li:last-child { box-shadow: inset 0 1px 0 #E5E5E5; }
.tw-swatches li:hover { flex-grow: 2; }
.tw-swatches b { font: 400 clamp(1rem, 2vw, 1.8rem)/1.1 var(--tw-disp); text-transform: uppercase; }
.tw-swatches span { font-size: 11px; }

.tw-swipe { background: var(--tw-swipe, #E8177A); padding-block: clamp(30px, 6vw, 60px); }
.tw-swipe .tw-ch__n { color: #111; }
.tw-swipe__rail { display: flex; align-items: center; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: 20px; }
.tw-swipe__rail::-webkit-scrollbar { display: none; }
.tw-swipe__intro { flex: none; width: min(84vw, 560px); padding-right: clamp(20px, 5vw, 80px); scroll-snap-align: start; }
.tw-swipe__intro h2 { font-size: clamp(3rem, 7.6vw, 7rem); }
.tw-swipe__intro > p { margin: 16px 0 0; line-height: 1.6; color: #111; font-weight: 500; }
.tw-hint { font-size: 12px; }
.tw-hint__d { display: none; }
.tw-swipe__p { flex: none; display: block; width: min(84vw, 420px); padding: 0; border: 0; background: none; cursor: zoom-in; scroll-snap-align: center; }
.tw-swipe__p img { display: block; width: 100%; height: auto; }
.tw-swipe__end { flex: none; width: 20px; height: 1px; }

.tw-wall { padding-block: clamp(80px, 11vw, 150px) clamp(40px, 6vw, 80px); overflow: clip; }
.tw-wall__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 70px); align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.tw-h3 { margin: 0; font: 400 clamp(2.4rem, 5.6vw, 5rem)/1.04 var(--tw-disp); text-transform: uppercase; }
.tw-wall__head p { margin: 0; line-height: 1.6; max-width: 32em; }
.tw-wall__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); padding-inline: clamp(12px, 3vw, 44px); }
.tw-wall__col { display: grid; align-content: start; gap: clamp(10px, 1.6vw, 22px); }
.tw-post { display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: none; cursor: zoom-in; }
.tw-post img { display: block; width: 100%; height: auto; transition: transform .7s var(--ease, ease); }
.tw-post:hover img { transform: scale(1.04); }

.tw-films { padding-block: clamp(72px, 10vw, 130px) clamp(60px, 8vw, 100px); overflow: clip; background: linear-gradient(#0B0B0B, #3A0722); }
.tw-films__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 70px); align-items: end; }
.tw-films__head p { margin: 0; line-height: 1.6; max-width: 34em; }
.tw-hand { display: flex; gap: 12px; margin-top: clamp(36px, 5vw, 70px); padding-inline: 20px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.tw-hand::-webkit-scrollbar { display: none; }
.tw-reel { flex: none; width: 58vw; max-width: 300px; margin: 0; scroll-snap-align: center; }
.tw-reel__in { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #111; box-shadow: 0 24px 50px rgba(0, 0, 0, .55); cursor: pointer; transition: transform .45s var(--ease, ease); }
.tw-reel__in img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.tw-reel__i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 13px; box-sizing: border-box; border-radius: 50%; color: #111; background: var(--tw-l); }
.tw-reel figcaption { margin-top: 10px; font-size: 11px; line-height: 1.35; }
.tw-reel figcaption span { color: var(--tw-l); }
.tw-now { display: none; margin: 26px 0 0; font-size: 13px; text-align: center; color: var(--tw-l); }

.tw-web { padding-top: clamp(72px, 10vw, 130px); }
.tw-web__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 70px); align-items: end; margin-bottom: clamp(30px, 4vw, 50px); }
.tw-web__head p { margin: 0 0 14px; line-height: 1.6; max-width: 34em; }
.tw-visit { font-size: 13px; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.tw-visit:hover { color: var(--tw-l); }
.tw-site { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: center; padding: 20px clamp(20px, 4vw, 64px); box-sizing: border-box; }
.tw-names { margin: 0; padding: 0; list-style: none; }
.tw-names button { display: block; padding: 2px 0; border: 0; background: none; color: transparent; font: 400 clamp(2rem, 4.4vw, 4rem)/1.12 var(--tw-disp); text-align: left; text-transform: uppercase; -webkit-text-stroke: 1px rgba(255, 255, 255, .5); cursor: pointer; transition: color .3s; }
.tw-names button:hover { -webkit-text-stroke-color: #fff; }
.tw-names button.is-on { color: var(--tw-l); -webkit-text-stroke-color: var(--tw-l); }
.tw-browser { display: flex; flex-direction: column; min-width: 0; margin: 0; border-radius: 12px; overflow: hidden; background: #1A1A1A; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 90px rgba(232, 23, 122, .25); }
.tw-browser__bar { display: flex; align-items: flex-end; gap: 7px; flex: none; height: 42px; padding-inline: 14px; }
.tw-browser__bar > i { flex: none; align-self: center; width: 10px; height: 10px; border-radius: 50%; background: #4A4A4A; }
.tw-tabs { display: flex; gap: 2px; margin-left: 10px; min-width: 0; overflow: hidden; }
.tw-tabs span { padding: 8px 14px; border-radius: 8px 8px 0 0; font-size: 11px; color: #9A9A9A; white-space: nowrap; }
.tw-tabs span.is-on { color: #fff; background: #000; }
.tw-frames { display: grid; gap: 12px; background: #000; }
.tw-frame { height: 70svh; overflow-y: auto; background: #000; }
.tw-frame img { display: block; width: 100%; height: auto; }
.tw.is-driven .tw-site { height: 100svh; padding-top: calc(var(--header-h, 80px) + 8px); }
.tw.is-driven .tw-browser { align-self: stretch; }
.tw.is-driven .tw-frames { position: relative; display: block; flex: 1; min-height: 0; overflow: hidden; }
.tw.is-driven .tw-frame { position: absolute; inset: 0; height: auto; overflow: hidden; }

.tw-mob { margin-top: clamp(72px, 10vw, 130px); color: #111; background: var(--tw-l); overflow: clip; }
.tw-mob .tw-ch__n { color: #111; }
.tw-mob h2 { font-size: clamp(3rem, 7vw, 6.6rem); }
.tw-mob__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 70px); align-items: center; padding-block: clamp(60px, 8vw, 100px); }
.tw-mob__grid p { margin: 18px 0 0; line-height: 1.6; max-width: 30em; font-weight: 500; }
.tw-phones { display: flex; justify-content: center; gap: clamp(14px, 3vw, 40px); }
.tw-phone { flex: 0 1 270px; min-width: 0; margin: 0; }
.tw-phone:nth-child(2) { margin-top: 70px; }
.tw-phone__in { border: 8px solid #111; border-radius: 34px; overflow: hidden; background: #000; box-shadow: 0 30px 60px rgba(0, 40, 0, .35); }
.tw-phone img { display: block; width: 100%; height: auto; }
.tw-phone figcaption { margin-top: 12px; font-size: 12px; text-align: center; }

.tw-end { padding-top: clamp(72px, 10vw, 130px); color: #111; background: var(--tw-p); overflow: clip; }
.tw-end__k { margin: 0 0 22px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.tw-ticket { position: relative; display: flex; max-width: 1000px; margin-inline: auto; filter: drop-shadow(0 30px 40px rgba(70, 0, 40, .45)); }
.tw-ticket__main, .tw-ticket__stub { background: #FFF8F2; --n: radial-gradient(circle 14px at 0 0, transparent 98%, #000); }
.tw-ticket__main { flex: 1; display: grid; gap: 10px; min-width: 0; padding: clamp(22px, 4vw, 48px); border-radius: 14px 0 0 14px; border-right: 3px dashed rgba(17, 17, 17, .35); }
.tw-ticket__main strong { font: 400 clamp(2.2rem, 7vw, 6rem)/1.02 var(--tw-disp); text-transform: uppercase; }
.tw-ticket__main .mono { font-size: 12px; }
.tw-ticket__stub { flex: none; display: grid; place-items: center; width: clamp(64px, 12vw, 150px); border-radius: 0 14px 14px 0; }
.tw-ticket__stub span { writing-mode: vertical-rl; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.tw-stamp { position: absolute; left: 50%; top: 50%; padding: .1em .32em; border: .07em solid var(--tw-p); border-radius: .12em; color: var(--tw-p); font: 400 clamp(2.6rem, 9vw, 7.6rem)/1.05 var(--tw-disp); text-transform: uppercase; white-space: nowrap; transform: translate(-58%, -50%) rotate(-11deg); }
.tw-end__line { margin: clamp(30px, 4vw, 50px) auto clamp(50px, 7vw, 90px); max-width: 32em; text-wrap: balance; font: 400 clamp(1.5rem, 3.2vw, 2.8rem)/1.2 var(--tw-disp); color: #fff; text-align: center; text-transform: uppercase; }
.tw-next { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: clamp(24px, 3.4vw, 44px) clamp(20px, 4vw, 64px); color: #fff; background: var(--tw-k); text-decoration: none; }
.tw-next .mono { font-size: 12px; text-transform: uppercase; }
.tw-next .mono:last-child { text-align: right; }
.tw-next b { font: 400 clamp(1.6rem, 3.8vw, 3.4rem)/1.1 var(--tw-disp); color: var(--tw-l); text-transform: uppercase; text-align: center; }
.tw-next:hover .mono:last-child { color: var(--tw-l); }

@media (min-width: 901px) {
  .tw-hint__d { display: inline; } .tw-hint__m { display: none; }
  .tw-swipe.is-pinned { height: 100svh; display: flex; align-items: center; padding-block: calc(var(--header-h, 80px) + 4px) 22px; box-sizing: border-box; }
  .tw-swipe.is-pinned .tw-swipe__rail { width: max-content; height: 100%; overflow: visible; padding-inline: clamp(40px, 6vw, 100px) 8vw; }
  .tw-swipe.is-pinned .tw-swipe__p { width: auto; height: 100%; aspect-ratio: 4 / 5; }
  .tw-swipe.is-pinned .tw-swipe__p img { height: 100%; }
  .tw-swipe.is-pinned .tw-swipe__end { display: none; }
  .tw-hand { justify-content: center; gap: 0; padding-block: 50px 30px; overflow: visible; }
  .tw-reel { width: 12vw; max-width: 230px; margin-inline: -1.1vw; }
  .tw-reel figcaption { display: none; }
  .tw-reel:hover, .tw-reel:focus-within { z-index: 5; }
  .tw-reel:hover .tw-reel__in, .tw-reel:focus-within .tw-reel__in { transform: translateY(-44px) scale(1.24); }
  .tw-now { display: block; }
}
@media (max-width: 900px) {
  .tw-site { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; }
  .tw.is-driven .tw-site { grid-template-rows: auto minmax(0, 1fr); }
  .tw-names { display: flex; flex-wrap: wrap; gap: 0 12px; }
  .tw-names button { font-size: 1.5rem; }
  .tw.is-driven .tw-names li { display: none; }
  .tw.is-driven .tw-names li:has(.is-on) { display: block; }
  .tw.is-driven .tw-names button { font-size: 2.4rem; }
  .tw-tabs { display: none; }
  .tw-browser__bar { align-items: center; height: 30px; }
}
@media (max-width: 760px) {
  .tw-title { position: relative; inset: auto; z-index: 3; font-size: 18vw; text-shadow: 0 6px 30px rgba(0, 0, 0, .55); }
  .tw-title--line { display: none; }
  .tw-hero__stage { min-height: 0; }
  .tw-hero__art { position: relative; left: auto; top: auto; width: min(68vw, 42svh); margin: -5vw auto 0; transform: none; }
  .tw-seal { bottom: -2%; }
  .tw-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tw-about__grid, .tw-logo__grid, .tw-wall__head, .tw-films__head, .tw-web__head, .tw-mob__grid { grid-template-columns: minmax(0, 1fr); }
  .tw-wall__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tw-wall__col:nth-child(3) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tw-next { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .tw-next .mono:last-child { text-align: center; }
}

/* ---- Speak Life Symposium case ---- */
.sl { --sl-k: #0B0906; --sl-g: #D9A441; --sl-l: #F1D08A; --sl-c: #F3EBDD; --sl-serif: "Cormorant Garamond", Georgia, serif; --sl-script: "Cookie", cursive; overflow: clip; color: var(--sl-c); background: var(--sl-k); }
.sl-ch { display: grid; gap: 6px; }
.sl-ch__n { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-g); }
.sl-ch h2 { margin: 0; font: 500 clamp(3rem, 8vw, 7.4rem)/1 var(--sl-serif); letter-spacing: -.01em; }
.sl-kick { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-g); }

.sl-hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding-top: calc(var(--header-h, 80px) + 22px); padding-bottom: clamp(16px, 3vh, 30px); isolation: isolate; overflow: clip; --c: 166deg; --px: 50%; --py: 46%; --mx: 50%; --my: 50%; --r: 900px; }
.sl-beam { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 30vmin 16vmin at var(--px) var(--py), rgba(241, 208, 138, .24), transparent 100%), conic-gradient(from var(--c) at 50% -12%, transparent 0deg, rgba(241, 208, 138, .24) 14deg, transparent 28deg, transparent 360deg); }
.sl-dust { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.sl-hero__mid { flex: 1; display: grid; align-content: center; justify-items: center; gap: 4px; padding-inline: 20px; text-align: center; }
.sl-mark { position: relative; width: min(72vw, 820px); max-width: calc(46svh * 2.24); }
.sl-mark img { display: block; width: 100%; height: auto; }
.sl-mark__dim { position: absolute; inset: 0; opacity: .13; filter: saturate(.4); }
.sl-mark__lit { position: relative; -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 42%, transparent 100%); mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 42%, transparent 100%); }
.sl-sym { margin: -.1em 0 0; padding-left: .5em; font: 500 clamp(1.2rem, 3.4vw, 3rem)/1.1 var(--sl-serif); letter-spacing: .5em; text-transform: uppercase; }
.sl-line { max-width: 34em; margin: 14px 0 0; line-height: 1.55; }
.sl-hint { margin: 12px 0 0; font-size: 11px; color: var(--sl-g); }
.sl-hint__d { display: none; }
@media (hover: hover) and (pointer: fine) { .sl-hint__d { display: inline; } }
.sl-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px clamp(14px, 3vw, 44px); margin: 0; padding-top: 14px; border-top: 1px solid rgba(217, 164, 65, .3); }
.sl-facts dt { font-size: 11px; color: var(--sl-g); text-transform: uppercase; letter-spacing: .06em; }
.sl-facts dd { margin: 3px 0 0; font-size: clamp(.92rem, 1.2vw, 1.05rem); }

.sl-not { padding-block: clamp(80px, 12vw, 150px); background: radial-gradient(60% 50% at 50% 60%, #241A0A, transparent 100%); }
.sl-not__in { text-align: center; }
.sl-not__list { display: grid; justify-items: center; gap: .02em; margin: clamp(14px, 2vh, 26px) 0 0; padding: 0; list-style: none; font: 500 min(10.5vw, 14svh)/1.04 var(--sl-serif); }
.sl-not__list span { position: relative; display: inline-block; padding-inline: .1em; }
.sl-strike { position: absolute; left: -.04em; right: -.04em; top: 56%; height: .045em; background: var(--sl-g); transform-origin: left center; }
.sl-align { margin: clamp(4px, 1vh, 14px) 0 0; font: 400 min(15vw, 19svh)/1 var(--sl-script); color: var(--sl-l); text-shadow: 0 0 60px rgba(241, 208, 138, .45); }
.sl-not__text { max-width: 32em; margin: 12px auto 0; line-height: 1.6; }
.sl.is-driven .sl-not { display: grid; align-items: center; min-height: 100svh; padding-block: calc(var(--header-h, 80px) + 10px) 20px; box-sizing: border-box; }

.sl-why { padding-block: clamp(70px, 10vw, 140px); }
.sl-lit { max-width: 20em; margin: 0; font: 500 clamp(2.1rem, 5.2vw, 4.8rem)/1.14 var(--sl-serif); }
.sl-lit i { font-style: normal; }
.sl-why__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); align-items: center; margin-top: clamp(50px, 7vw, 100px); }
.sl-iris { margin: 0; border-radius: 10px; overflow: hidden; }
.sl-iris img { display: block; width: 100%; height: auto; }
.sl-aims { margin: 14px 0 0; padding: 0; list-style: none; }
.sl-aims li { display: flex; gap: 16px; align-items: baseline; padding-block: 14px; border-top: 1px solid rgba(217, 164, 65, .25); font: 500 clamp(1.25rem, 2.1vw, 1.8rem)/1.2 var(--sl-serif); }
.sl-aims span { font-size: 11px; color: var(--sl-g); }
.sl-nums { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 26px; }
.sl-nums b { display: block; font: 400 clamp(1.9rem, 3.2vw, 2.8rem)/1.05 var(--sl-script); color: var(--sl-l); }
.sl-nums span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; opacity: .8; }

.sl-web { padding-top: clamp(60px, 8vw, 110px); }
.sl-web__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 70px); align-items: end; margin-bottom: clamp(26px, 4vw, 50px); }
.sl-web__head p { margin: 0 0 14px; line-height: 1.6; max-width: 34em; }
.sl-visit { font-size: 13px; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.sl-visit:hover { color: var(--sl-l); }
.sl-stage { display: grid; grid-template-columns: minmax(170px, 250px) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: center; padding: 20px clamp(20px, 4vw, 64px); box-sizing: border-box; }
.sl-acts { margin: 0; padding: 0; list-style: none; }
.sl-acts button { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: clamp(5px, 1vh, 9px) 0; border: 0; background: none; color: inherit; text-align: left; opacity: .42; cursor: pointer; transition: opacity .3s, color .3s; }
.sl-acts button:hover { opacity: .8; }
.sl-acts button.is-on { opacity: 1; color: var(--sl-l); }
.sl-acts .mono { flex: none; width: 54px; font-size: 11px; }
.sl-acts b { font: 500 clamp(1.3rem, 2.2vw, 2rem)/1.1 var(--sl-serif); }
.sl-browser { display: flex; flex-direction: column; min-width: 0; margin: 0; border-radius: 12px; overflow: hidden; background: #17130C; box-shadow: 0 0 0 1px rgba(217, 164, 65, .3), 0 0 120px rgba(217, 164, 65, .16); }
.sl-browser__bar { display: flex; align-items: center; gap: 7px; flex: none; height: 38px; padding-inline: 14px; }
.sl-browser__bar i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #4B4230; }
.sl-browser__bar span { margin-left: 10px; padding: 3px 12px; border-radius: 99px; background: #0B0906; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-frames { position: relative; display: grid; gap: 12px; background: #000; }
.sl-frame { height: 70svh; overflow-y: auto; background: #000; }
.sl-frame img { display: block; width: 100%; height: auto; }
.sl-curtain { display: none; position: absolute; top: 0; bottom: 0; z-index: 9; width: 50.5%; background: linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .5)), repeating-linear-gradient(90deg, #4A1014 0, #7A1B22 3.5%, #3A0B0E 7%); }
.sl-curtain--l { left: 0; box-shadow: inset -3px 0 0 var(--sl-g); }
.sl-curtain--r { right: 0; box-shadow: inset 3px 0 0 var(--sl-g); }
.sl.is-driven .sl-curtain { display: block; }
.sl.is-driven .sl-stage { height: 100svh; padding-top: calc(var(--header-h, 80px) + 8px); }
.sl.is-driven .sl-browser { align-self: stretch; }
.sl.is-driven .sl-frames { display: block; flex: 1; min-height: 0; overflow: hidden; }
.sl.is-driven .sl-frame { position: absolute; inset: 0; height: auto; overflow: hidden; }

.sl-film { position: relative; padding-top: clamp(70px, 9vw, 120px); isolation: isolate; overflow: clip; }
.sl-film__beam { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: conic-gradient(from 158deg at 50% -6%, transparent 0deg, rgba(241, 208, 138, .13) 22deg, transparent 44deg, transparent 360deg); }
.sl-film__name { margin: 0 0 10px; font: 400 clamp(2.2rem, 4vw, 3.6rem)/1 var(--sl-script); color: var(--sl-l); }
.sl-screen { position: relative; width: min(100% - 40px, 1320px); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 0 140px rgba(241, 208, 138, .22); }
.sl-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sl-screen__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; width: 100%; padding: 0; border: 0; color: #fff; background: rgba(0, 0, 0, .18); cursor: pointer; transition: background .3s; }
.sl-screen__play:hover { background: rgba(0, 0, 0, .05); }
.sl-screen__play .mono { font-size: 12px; }
.sl-screen__i { width: clamp(58px, 7vw, 92px); height: clamp(58px, 7vw, 92px); display: grid; place-items: center; padding: 0; box-sizing: border-box; border-radius: 50%; color: #111; background: var(--sl-l); }
.sl-screen__i svg { width: 40%; height: 40%; }
.sl-strip { margin-top: clamp(30px, 5vw, 60px); padding-block: 16px; background: #000; overflow-x: auto; scrollbar-width: none; --hole: repeating-linear-gradient(90deg, rgba(243, 235, 221, .55) 0 12px, transparent 12px 28px); position: relative; }
.sl-strip::-webkit-scrollbar { display: none; }
.sl-strip__in { position: relative; display: flex; gap: 10px; width: max-content; padding-inline: clamp(16px, 8vw, 120px); }
.sl-strip__in::before, .sl-strip__in::after { content: ""; position: absolute; left: 0; right: 0; height: 7px; background: var(--hole); }
.sl-strip__in::before { top: -12px; } .sl-strip__in::after { bottom: -12px; }
.sl-still { flex: none; display: block; width: clamp(240px, 36vw, 560px); padding: 0; border: 0; background: none; cursor: zoom-in; }
.sl-still img { display: block; width: 100%; height: auto; }

.sl-run { overflow: hidden; padding-block: 16px; border-block: 1px solid rgba(217, 164, 65, .3); }
.sl-run__line { display: flex; width: max-content; font: italic 500 clamp(1.2rem, 2.2vw, 1.9rem)/1 var(--sl-serif); color: var(--sl-l); animation: uw-run 52s linear infinite; }
.sl-run__line span { padding-inline: 20px; white-space: nowrap; }
.sl-run__line span::after { content: "\2726"; margin-left: 40px; font-size: .7em; color: var(--sl-g); }

.sl-mob { padding-block: clamp(70px, 9vw, 120px); overflow: clip; }
.sl-mob__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 90px); align-items: center; }
.sl-mob__grid p { margin: 18px 0 0; line-height: 1.6; max-width: 30em; }
.sl-phones { display: flex; justify-content: center; gap: clamp(14px, 3vw, 40px); }
.sl-phone { flex: 0 1 270px; min-width: 0; margin: 0; }
.sl-phone:nth-child(2) { margin-top: 70px; }
.sl-phone__in { border: 8px solid #2B2418; border-radius: 34px; overflow: hidden; background: #000; box-shadow: 0 0 80px rgba(217, 164, 65, .28); }
.sl-phone img { display: block; width: 100%; height: auto; }
.sl-phone figcaption { margin-top: 12px; font-size: 12px; text-align: center; }

.sl-end { position: relative; padding-block: clamp(90px, 14vw, 190px); isolation: isolate; overflow: clip; text-align: center; }
.sl-end__pool { position: absolute; left: 50%; top: 50%; z-index: -1; width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax; border-radius: 50%; background: radial-gradient(circle, rgba(241, 208, 138, .24), transparent 58%); }
.sl-lit--q { max-width: 19em; margin-inline: auto; font-style: italic; }
.sl-end__by { display: grid; gap: 6px; justify-items: center; margin: 30px 0 0; }
.sl-end__by b { font: 400 clamp(2rem, 3.6vw, 3.2rem)/1 var(--sl-script); color: var(--sl-l); }
.sl-end__by .mono { font-size: 12px; }

@media (max-width: 900px) {
  .sl-stage { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; }
  .sl.is-driven .sl-stage { grid-template-rows: auto minmax(0, 1fr); }
  .sl-acts { display: flex; flex-wrap: wrap; gap: 0 14px; }
  .sl-acts button { width: auto; }
  .sl.is-driven .sl-acts li { display: none; }
  .sl.is-driven .sl-acts li:has(.is-on) { display: block; }
  .sl-browser__bar { height: 30px; }
}
@media (max-width: 760px) {
  .sl-mark { width: 92vw; }
  .sl-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sl-why__grid, .sl-web__head, .sl-mob__grid { grid-template-columns: minmax(0, 1fr); }
  .sl-not__list { font-size: 17vw; }
  .sl-align { font-size: 25vw; }
}

/* ---- Melanie Houchens case ---- */
.mh { --mh-p: #E21874; --mh-b: #FBDDEB; --mh-k: #171717; --mh-l: oklch(83.7% .261 139.9); --mh-serif: "DM Serif Display", Georgia, serif; overflow: clip; color: var(--mh-k); background: var(--mh-b); }
.mh-ch { display: grid; gap: 8px; }
.mh-ch__n { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #B80F5B; }
.mh-ch h2 { margin: 0; font: 400 clamp(3rem, 8vw, 7.4rem)/1 var(--mh-serif); letter-spacing: -.015em; }
.mh-sign { position: relative; --w: 125%; }
.mh-sign svg { display: block; width: 100%; height: auto; }
.mh-sign__ink { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 50px), transparent) 0 0 / var(--w) 100% no-repeat; mask: linear-gradient(90deg, #000 calc(100% - 50px), transparent) 0 0 / var(--w) 100% no-repeat; }
.mh-nib { position: absolute; left: var(--w); top: var(--ny, 50%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--mh-l); box-shadow: 0 0 18px var(--mh-l); opacity: var(--no, 0); pointer-events: none; }

.mh-hero { display: flex; flex-direction: column; min-height: 100svh; padding-top: calc(var(--header-h, 80px) + 22px); padding-bottom: clamp(16px, 3vh, 30px); overflow: clip; background: var(--mh-b); }
.mh-cover { position: relative; flex: 1; min-height: 420px; margin-top: 8px; overflow: clip; }
.mh-disc { position: absolute; left: 50%; bottom: -14%; width: min(74svh, 78vw); aspect-ratio: 1; margin-left: calc(min(74svh, 78vw) / -2); border-radius: 50%; background: #fff; }
.mh-cut { position: absolute; left: 50%; bottom: 0; width: auto; height: 100%; max-width: none; transform: translateX(-50%); }
.mh-sign--cover { position: absolute; left: 50%; top: 56%; width: min(92vw, 1180px); margin-left: calc(min(92vw, 1180px) / -2); color: var(--mh-p); transform: translateY(-50%); filter: drop-shadow(0 6px 22px rgba(255, 255, 255, .35)); }
.mh-cover__k, .mh-cover__l { position: absolute; top: 3%; z-index: 2; margin: 0; }
.mh-cover__k { left: max(20px, calc((100% - 1200px) / 2)); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.mh-cover__l { right: max(20px, calc((100% - 1200px) / 2)); max-width: 11em; font: italic 400 clamp(1.3rem, 2.2vw, 2rem)/1.15 var(--mh-serif); color: #B80F5B; text-align: right; }
.mh-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px clamp(14px, 3vw, 44px); margin: 0; padding-top: 14px; border-top: 1px solid rgba(23, 23, 23, .22); }
.mh-facts dt { font-size: 11px; color: #B80F5B; text-transform: uppercase; letter-spacing: .06em; }
.mh-facts dd { margin: 3px 0 0; font-size: clamp(.92rem, 1.2vw, 1.05rem); }

.mh-about { padding-block: clamp(80px, 11vw, 150px); background: #fff; }
.mh-about__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(30px, 7vw, 110px); align-items: end; }
.mh-lede { margin: 0; font: 400 clamp(2.8rem, 6.6vw, 6.2rem)/1.04 var(--mh-serif); letter-spacing: -.015em; }
.mh-lede em, .mh-end__q em { color: var(--mh-p); }
.mh-about__t p { margin: 0; line-height: 1.65; }
.mh-about__t blockquote { margin: 26px 0 0; padding-left: 18px; border-left: 3px solid var(--mh-p); font: italic 400 clamp(1.3rem, 2vw, 1.8rem)/1.2 var(--mh-serif); }
.mh-about__t cite { display: block; margin-top: 10px; font-size: 11px; font-style: normal; }

.mh-roles { display: flex; flex-direction: column; gap: 4px; background: #000; }
.mh-role { position: relative; flex: 1 1 0; min-width: 0; height: 88svh; overflow: hidden; color: #fff; }
.mh-role img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 20%); }
.mh-role::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }
.mh-role__t { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(18px, 3vw, 40px); }
.mh-role h3 { margin: 0; font: italic 400 clamp(3rem, 7vw, 6.8rem)/1 var(--mh-serif); }
.mh-role p { width: min(84vw, 30em); margin: 10px 0 0; line-height: 1.5; }

.mh-logo { padding-top: clamp(72px, 10vw, 130px); background: #fff; }
.mh-logo__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 70px); align-items: end; margin-bottom: clamp(30px, 4vw, 50px); }
.mh-logo__head p { margin: 0; line-height: 1.6; }
.mh-ways { position: relative; display: grid; place-items: center; min-height: 72svh; padding: 40px 20px; color: #fff; background: #171717; }
.mh.is-driven .mh-ways { height: 100svh; min-height: 0; box-sizing: border-box; padding-top: calc(var(--header-h, 80px) + 10px); }
.mh-sign--way { width: min(84vw, 1000px); }
.mh-ways svg [fill="#e21874"], .mh-ways svg [fill="#ffffff"] { transition: fill .35s; }
.mh-ways.is-swap svg [fill="#e21874"] { fill: #fff; }
.mh-ways.is-swap svg [fill="#ffffff"] { fill: var(--mh-p); }
.mh-ways__l { position: absolute; left: 0; right: 0; bottom: clamp(16px, 4vh, 36px); display: flex; justify-content: center; gap: clamp(12px, 3vw, 34px); margin: 0; padding: 0; list-style: none; font-size: 12px; }
.mh-ways__l li { opacity: .4; transition: opacity .3s; }
.mh-ways__l li.is-on { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.mh-kit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); align-items: center; padding-block: clamp(50px, 7vw, 90px); }
.mh-swatches { display: flex; flex-wrap: wrap; gap: 18px clamp(10px, 2vw, 22px); margin: 0; padding: 0; list-style: none; }
.mh-swatches li { display: grid; justify-items: center; gap: 8px; width: clamp(56px, 6.4vw, 96px); text-align: center; }
.mh-swatches i { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(23, 23, 23, .12); }
.mh-swatches b { font-size: 12px; font-weight: 500; line-height: 1.25; }
.mh-types { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.mh-types > div { display: grid; gap: 4px; }
.mh-types .mono { font-size: 11px; opacity: .7; }
.mh-types b { font-weight: 600; }
.mh-aa { font-size: clamp(3.6rem, 7vw, 6.4rem); line-height: 1; font-weight: 500; }
.mh-aa--s { font-family: var(--mh-serif); color: var(--mh-p); font-weight: 400; }

.mh-web { padding-top: clamp(72px, 10vw, 130px); color: #fff; background: var(--mh-k); overflow: clip; }
.mh-web .mh-ch__n { color: var(--mh-l); }
.mh-web__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 70px); align-items: end; margin-bottom: clamp(30px, 5vw, 60px); }
.mh-web__head p { margin: 0 0 14px; line-height: 1.6; }
.mh-visit { font-size: 13px; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.mh-visit:hover { color: var(--mh-l); }
.mh-plane-w { padding-bottom: clamp(50px, 7vw, 90px); }
.mh-plane { display: flex; gap: 12px; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.mh-plane::-webkit-scrollbar { display: none; }
.mh-col { flex: none; width: 66vw; color: inherit; text-decoration: none; scroll-snap-align: center; }
.mh-col > .mono { display: block; margin-bottom: 10px; font-size: 11px; line-height: 1.3; }
.mh-col:hover > .mono { color: var(--mh-l); }
.mh-col img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }

.mh-reels { position: relative; padding-block: clamp(70px, 10vw, 130px); color: #fff; background: var(--mh-p); overflow: clip; isolation: isolate; }
.mh-reels .mh-ch__n { color: #111; }
.mh-reels__bg { position: absolute; left: 0; top: 50%; z-index: -1; margin: 0; font: italic 400 clamp(8rem, 25vw, 24rem)/1 var(--mh-serif); color: #C71166; white-space: nowrap; transform: translateY(-50%); }
.mh-reels__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 70px); align-items: center; }
.mh-reels__grid p { margin: 18px 0 0; line-height: 1.6; max-width: 26em; color: #111; font-weight: 500; }
.mh-reels__set { display: flex; justify-content: center; gap: clamp(12px, 3vw, 40px); }
.mh-reel { flex: 0 1 290px; min-width: 0; margin: 0; }
.mh-reel:nth-child(2) { margin-top: 56px; }
.mh-reel__in { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 8px solid #111; border-radius: 30px; overflow: hidden; background: #111; box-shadow: 0 34px 60px rgba(90, 0, 40, .5); cursor: pointer; }
.mh-reel__in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease, ease); }
.mh-reel__in:hover img { transform: scale(1.04); }
.mh-reel__i { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; color: #111; background: var(--mh-l); }
.mh-reel__i svg { width: 42%; height: 42%; }
.mh-reel figcaption { margin-top: 12px; font-size: 11px; line-height: 1.35; }
.mh-reel figcaption span { color: #111; }

.mh-mob { padding-block: clamp(70px, 9vw, 120px); overflow: clip; }
.mh-mob h2 { font-size: clamp(2.8rem, 6vw, 5.6rem); }
.mh-mob__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 70px); align-items: center; }
.mh-mob__grid p { margin: 18px 0 0; line-height: 1.6; max-width: 30em; }
.mh-phones { display: flex; justify-content: center; gap: clamp(14px, 3vw, 40px); }
.mh-phone { flex: 0 1 270px; min-width: 0; margin: 0; }
.mh-phone:nth-child(2) { margin-top: 70px; }
.mh-phone__in { border: 8px solid #171717; border-radius: 34px; overflow: hidden; background: #000; box-shadow: 0 30px 60px rgba(140, 10, 80, .28); }
.mh-phone img { display: block; width: 100%; height: auto; }
.mh-phone figcaption { margin-top: 12px; font-size: 12px; line-height: 1.3; text-align: center; }

.mh-end { padding-block: clamp(80px, 11vw, 150px); color: #fff; background: var(--mh-k); }
.mh-end__q { max-width: 13em; margin: 0 auto; font: 400 clamp(2.8rem, 7vw, 6.6rem)/1.04 var(--mh-serif); text-align: center; }
.mh-sign--end { width: min(78vw, 760px); margin: clamp(30px, 5vw, 60px) auto 0; color: #fff; }
.mh-link { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr); gap: clamp(16px, 3vw, 34px); align-items: center; max-width: 640px; margin: clamp(40px, 6vw, 70px) auto 0; padding: 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .3s; }
.mh-link:hover { border-color: var(--mh-l); }
.mh-link img { display: block; width: 100%; height: auto; border-radius: 6px; }
.mh-link > span { display: grid; gap: 8px; }
.mh-link .mono { font-size: 11px; }
.mh-link b { font: 400 clamp(1.4rem, 2.6vw, 2.2rem)/1.1 var(--mh-serif); }

@media (min-width: 901px) {
  .mh-roles { flex-direction: row; height: 100svh; }
  .mh-role { height: auto; }
  .mh-role p { opacity: var(--tx, 1); }
  .mh-role h3 { transform: scale(calc(.38 + .62 * var(--tx, 1))); transform-origin: 0 100%; white-space: nowrap; }
}
@media (min-width: 761px) {
  .mh-plane { justify-content: center; overflow: visible; padding-inline: clamp(16px, 2.4vw, 36px); align-items: flex-start; }
  .mh-col { flex: 1 1 0; width: auto; min-width: 0; }
}
@media (max-width: 760px) {
  .mh-cover { min-height: 58svh; }
  .mh-cover__k, .mh-cover__l { position: relative; top: auto; left: auto; right: auto; display: block; padding-inline: 20px; }
  .mh-cover__l { max-width: none; margin-top: 8px; text-align: left; }
  .mh-cut { height: 78%; }
  .mh-sign--cover { top: 66%; }
  .mh-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mh-about__grid, .mh-logo__head, .mh-kit, .mh-web__head, .mh-reels__grid, .mh-mob__grid { grid-template-columns: minmax(0, 1fr); }
  .mh-ways__l { gap: 10px; font-size: 11px; }
}