/* =========================================================
   Editsta Creations — site styles
   Dark glass, accents taken from the logo (yellow #FDEE1C, gold #B88B2D)
   ========================================================= */
:root {
  color-scheme: dark;
  --night: #0E0D15;
  --night-2: #17161F;
  --night-3: #201E2B;
  --text: #F6F5EF;
  --muted: #B4B1C2;
  --faint: #8A8799;
  --yellow: #FDEE1C;
  --yellow-soft: #FFF59A;
  --gold: #D9A93A;
  --gold-deep: #B88B2D;
  --ink: #12110A;          /* text on yellow */
  --violet: #4B3FB0;       /* background glow only */

  --glass: rgba(255, 255, 255, .055);
  --glass-strong: rgba(255, 255, 255, .1);
  --edge: rgba(255, 255, 255, .13);
  --edge-top: rgba(255, 255, 255, .28);
  --blur: 18px;

  --display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --body: "Montserrat", "Segoe UI", system-ui, sans-serif;

  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--night); color: var(--text); font: 400 1rem/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
[hidden] { display: none !important; } /* "hidden" always wins over display rules (e.g. lightbox image/video) */
a { color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; font-family: var(--display); line-height: 1.06; margin: 0; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--yellow); color: var(--ink); }

.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--yellow); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 16px; }

/* ---------- Background glow ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
  radial-gradient(1100px 700px at 88% -12%, #2B2511 0%, transparent 62%),
  radial-gradient(900px 640px at -12% 108%, #1B1838 0%, transparent 60%),
  var(--night); }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.orb-a { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; background: var(--yellow); opacity: .13; top: -14%; right: -6%; animation: drift-a 30s ease-in-out infinite alternate; }
.orb-b { width: 32vw; height: 32vw; max-width: 440px; max-height: 440px; background: var(--gold-deep); opacity: .2; top: 42%; left: -10%; animation: drift-b 36s ease-in-out infinite alternate; }
.orb-c { width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; background: var(--violet); opacity: .3; bottom: -14%; right: 10%; animation: drift-c 32s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(-8vw, 10vh) scale(1.1); } }
@keyframes drift-b { to { transform: translate(10vw, -8vh) scale(.9); } }
@keyframes drift-c { to { transform: translate(-12vw, -12vh) scale(1.12); } }

/* ---------- Glass ---------- */
.glass {
  background: linear-gradient(155deg, var(--glass-strong), var(--glass) 55%);
  border: 1px solid var(--edge);
  border-top-color: var(--edge-top);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255,255,255,.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(32, 30, 43, .94); }
}

/* Corner brackets — the viewfinder from the logo */
.frame { position: relative; }
.frame::before, .frame::after { content: ""; position: absolute; width: 34px; height: 34px; pointer-events: none; z-index: 3; }
.frame::before { top: -12px; left: -12px; border-top: 3px solid var(--yellow); border-left: 3px solid var(--yellow); }
.frame::after { bottom: -12px; right: -12px; border-bottom: 3px solid var(--text); border-right: 3px solid var(--text); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 1rem/1 var(--body); text-decoration: none; cursor: pointer; padding: 16px 26px; border-radius: 999px; border: 0; background: var(--yellow); color: var(--ink); box-shadow: 0 14px 32px -14px rgba(253, 238, 28, .6); transition: transform .2s ease, box-shadow .2s ease, background .2s; }
.btn:hover { transform: translateY(-2px); background: var(--yellow-soft); }
.btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn-glass { background: var(--glass-strong); color: var(--text); border: 1px solid var(--edge); box-shadow: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-glass:hover { background: rgba(255,255,255,.17); }
.btn-small { padding: 11px 18px; font-size: .92rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.link { color: var(--yellow); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(253,238,28,.4); }
.link:hover { border-bottom-color: var(--yellow); }

/* ---------- Header / nav ---------- */
.nav-wrap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; padding: 14px var(--gutter) 0; }
.nav { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 10px 9px 20px; border-radius: 999px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 40px; width: auto; }
.nav-links { list-style: none; display: flex; align-items: center; gap: 2px; }
.nav-links > li { position: relative; }
.nav-links a:not(.btn), .nav-links .sub-toggle { display: flex; align-items: center; gap: 6px; padding: 10px 13px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .95rem; background: none; border: 0; cursor: pointer; transition: color .2s, background .2s; }
.nav-links a:not(.btn):hover, .nav-links .sub-toggle:hover, .nav-links a[aria-current="page"], .nav-links .is-current > .sub-toggle { color: var(--text); background: rgba(255,255,255,.08); }
.sub-toggle::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.sub { list-style: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 250px; padding: 8px; border-radius: var(--r-md); display: none; background: rgba(23, 22, 31, .96); border: 1px solid var(--edge); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
.sub a:not(.btn) { border-radius: 10px; padding: 10px 12px; color: var(--muted); white-space: nowrap; }
.has-sub.open .sub { display: block; }
@media (hover: hover) and (min-width: 1001px) { .has-sub:hover .sub, .has-sub:focus-within .sub { display: block; } .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } }
.nav-toggle { display: none; }

/* ---------- Layout ---------- */
main { padding: 0 var(--gutter); }
.wrap { max-width: var(--max); margin: 0 auto; }
.section { max-width: var(--max); margin: 0 auto; padding-top: clamp(72px, 9vw, 120px); }
.section-head { max-width: 680px; margin-bottom: 38px; }
.section-head.split { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.section-head.split > div { max-width: 640px; }
.h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); font-stretch: 90%; letter-spacing: -.025em; }
.section-head p, .sub-lede { margin-top: 14px; color: var(--muted); font-size: 1.08rem; }
.prose p { color: var(--muted); font-size: 1.06rem; max-width: 40em; }
.prose p + p { margin-top: 14px; }
.muted { color: var(--muted); }

/* ---------- Home hero ---------- */
.hero { max-width: var(--max); margin: 0 auto; min-height: min(84vh, 800px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 64px); padding: 56px 0 36px; }
.tagline { color: var(--yellow); font-weight: 700; margin-bottom: 18px; display: inline-flex; gap: 10px; align-items: center; }
.tagline::before { content: ""; width: 26px; height: 2px; background: var(--yellow); }
.hero h1 { font-size: clamp(2.8rem, 6.2vw, 5.2rem); font-weight: 800; font-stretch: 78%; letter-spacing: -.035em; line-height: .96; }
.lede { margin-top: 24px; max-width: 34em; color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-media { position: relative; }
.reel { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--night-3); }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel-toggle { position: absolute; right: 14px; bottom: 14px; z-index: 4; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--edge); background: rgba(14,13,21,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; display: grid; place-items: center; }
.reel-toggle svg { width: 18px; height: 18px; fill: var(--text); }

/* Fallback hero art: floating proofs */
.proofs { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 520px; justify-self: end; margin-left: auto; }
.proof { position: absolute; border-radius: var(--r-md); transition: transform .5s cubic-bezier(.2,.7,.2,1); --tx: 0px; --ty: 0px; }
.proof-post { width: 56%; top: 3%; left: 4%; padding: 14px; transform: translate(var(--tx), var(--ty)) rotate(-6deg); }
.post-art { aspect-ratio: 1; border-radius: 12px; position: relative; overflow: hidden; background: linear-gradient(140deg, #22202F, #4A3E15 60%, var(--yellow)); }
.post-art span { position: absolute; border-radius: 50%; }
.post-art span:nth-child(1) { width: 66%; height: 66%; right: -16%; top: -14%; background: rgba(253,238,28,.85); }
.post-art span:nth-child(2) { width: 44%; height: 44%; left: 10%; bottom: 10%; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.5); }
.post-art span:nth-child(3) { width: 14%; height: 14%; left: 62%; bottom: 24%; background: #fff; }
.post-meta { margin-top: 12px; display: grid; }
.post-meta b { font-family: var(--display); font-size: 1.12rem; }
.post-meta small { color: var(--muted); }
.proof-menu { width: 46%; top: 30%; right: 0; padding: 18px 16px; transform: translate(var(--tx), var(--ty)) rotate(5deg); }
.menu-title { font: 700 1.05rem/1 var(--display); display: block; padding-bottom: 12px; border-bottom: 1px dashed rgba(255,255,255,.3); margin-bottom: 8px; white-space: nowrap; }
.proof-menu ul { list-style: none; font-size: .88rem; }
.proof-menu li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; color: var(--muted); white-space: nowrap; }
.proof-menu em { font-style: normal; color: var(--text); font-weight: 700; }
.proof-menu em::before { content: "₹"; color: var(--yellow); margin-right: 2px; }
.proof-card { width: 64%; bottom: 4%; left: 0; padding: 18px; display: flex; gap: 14px; align-items: center; transform: translate(var(--tx), var(--ty)) rotate(-2deg); }
.card-mark { width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--yellow); display: grid; place-items: center; }
.card-mark img { width: 70%; }
.card-lines { display: grid; line-height: 1.35; white-space: nowrap; }
.card-lines b { font-family: var(--display); font-size: 1.05rem; }
.card-lines small { color: var(--muted); font-size: .8rem; }
.proof-logo { width: 30%; top: 4%; right: 6%; padding: 16px; display: grid; justify-items: center; gap: 8px; transform: translate(var(--tx), var(--ty)) rotate(8deg); }
.proof-logo img { width: 62%; }
.proof-logo small { color: var(--muted); font-size: .72rem; }

/* ---------- Facts strip ---------- */
.facts { max-width: var(--max); margin: 8px auto 0; border-radius: var(--r-lg); display: grid; grid-template-columns: repeat(4, 1fr); }
.facts > div { padding: 22px 26px; display: grid; gap: 4px; }
.facts > div + div { border-left: 1px solid var(--edge); }
.facts b { font: 700 1.55rem/1.1 var(--display); font-stretch: 85%; }
.facts span { color: var(--muted); font-size: .9rem; line-height: 1.4; }

/* ---------- Service list ---------- */
.services { border-radius: var(--r-lg); display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; }
.service { padding: 28px 32px; display: grid; grid-template-columns: 40px 1fr auto; column-gap: 18px; align-items: start; border-bottom: 1px solid rgba(255,255,255,.08); text-decoration: none; transition: background .25s; }
.service:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08); }
.service:nth-last-child(-n+2) { border-bottom: 0; }
.service:hover { background: rgba(253, 238, 28, .05); }
.service .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(253,238,28,.1); border: 1px solid rgba(253,238,28,.3); }
.service .ico svg { width: 20px; height: 20px; stroke: var(--yellow); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service h3 { font-size: 1.32rem; font-stretch: 92%; }
.service p { color: var(--muted); margin-top: 6px; max-width: 34em; }
.service .go { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--edge); display: grid; place-items: center; transition: background .2s, border-color .2s; margin-top: 2px; }
.service .go svg { width: 14px; height: 14px; stroke: var(--text); fill: none; stroke-width: 2; }
.service:hover .go { background: var(--yellow); border-color: var(--yellow); }
.service:hover .go svg { stroke: var(--ink); }

/* ---------- Work grid (portfolio) ---------- */
.filters { display: grid; gap: 12px; margin-bottom: 28px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-row > span { color: var(--faint); font-size: .88rem; font-weight: 600; min-width: 70px; }
.chip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255,255,255,.04); color: var(--muted); font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .2s; }
.chip:hover { color: var(--text); border-color: var(--edge-top); }
.chip[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.work { margin: 0; position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--night-3); border: 1px solid var(--edge); cursor: zoom-in; padding: 0; text-align: left; display: block; width: 100%; }
.work img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.work:hover img { transform: scale(1.04); }
.work figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(8,8,12,.88)); display: grid; gap: 2px; }
.work b { font: 700 1.05rem/1.2 var(--display); }
.work small { color: var(--muted); font-size: .82rem; }
.work[hidden] { display: none; }
.work.placeholder { cursor: default; }
.ph { aspect-ratio: 4 / 3; display: grid; place-items: center; background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px), var(--night-3); color: var(--faint); font-weight: 600; font-size: .9rem; }
.empty-note { padding: 28px; border-radius: var(--r-md); color: var(--muted); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: 60px 16px; background: rgba(6,6,10,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox.open { display: grid; }
.lightbox figure { margin: 0; max-width: min(1100px, 100%); display: grid; gap: 12px; }
.lightbox img { max-height: 78vh; width: auto; margin: 0 auto; border-radius: 12px; }
.lightbox figcaption { text-align: center; color: var(--muted); }
.lightbox figcaption b { color: var(--text); font-family: var(--display); font-size: 1.15rem; display: block; }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--edge); background: rgba(255,255,255,.08); cursor: pointer; display: grid; place-items: center; }
.lb-btn svg { width: 20px; height: 20px; stroke: var(--text); fill: none; stroke-width: 2; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ---------- Before / after ---------- */
.ba-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ba { margin: 0; display: grid; gap: 12px; }
.ba-stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--edge); --pos: 50%; touch-action: pan-y; user-select: none; }
.ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--yellow); transform: translateX(-1px); pointer-events: none; }
.ba-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312110A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.ba-tag { position: absolute; top: 12px; padding: 5px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(8,8,12,.7); z-index: 2; }
.ba-tag.l { left: 12px; } .ba-tag.r { right: 12px; background: var(--yellow); color: var(--ink); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.ba figcaption b { font: 700 1.1rem/1.2 var(--display); }
.ba figcaption span { color: var(--muted); font-size: .92rem; display: block; }

/* ---------- Industries teaser ---------- */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ind { border-radius: var(--r-lg); padding: 28px; text-decoration: none; display: grid; gap: 10px; align-content: start; transition: border-color .2s, transform .2s; }
.ind:hover { border-color: rgba(253,238,28,.45); transform: translateY(-3px); }
.ind h3 { font-size: 1.45rem; font-stretch: 90%; }
.ind p { color: var(--muted); }
.ind .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ind .tags span { font-size: .8rem; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); }
.ind .more { margin-top: 8px; color: var(--yellow); font-weight: 700; }

/* ---------- Clients ---------- */
.client-wall { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.client-wall li { font: 600 clamp(.98rem, 1.5vw, 1.18rem)/1 var(--display); padding: 14px 20px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255,255,255,.035); color: #E2E0EA; }
.client-wall li:nth-child(4n+1) { border-color: rgba(253,238,28,.35); }
.logo-wall { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.logo-wall li { aspect-ratio: 3 / 2; border-radius: var(--r-sm); display: grid; place-items: center; padding: 16px; background: rgba(255,255,255,.92); }
.logo-wall img { max-height: 100%; width: auto; object-fit: contain; }

/* ---------- Reviews ---------- */
.rating { display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 999px; text-decoration: none; }
.rating b { font: 800 1.5rem/1 var(--display); }
.stars { color: var(--yellow); letter-spacing: 2px; }
.rating small { color: var(--muted); }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review { margin: 0; border-radius: var(--r-md); padding: 24px; display: grid; gap: 14px; align-content: start; }
.review blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.review footer { display: flex; gap: 12px; align-items: center; }
.review .who { display: grid; line-height: 1.3; }
.review .who b { font-family: var(--display); }
.review .who small { color: var(--muted); }
.review .av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--night-3); flex: none; }

/* ---------- Steps ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: step; }
.steps li { border-radius: var(--r-md); padding: 22px 20px 24px; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; margin-bottom: 16px; font: 700 1rem/1 var(--display); background: rgba(253,238,28,.12); color: var(--yellow); border: 1px solid rgba(253,238,28,.35); }
.steps b { font: 700 1.12rem/1.2 var(--display); display: block; }
.steps p { color: var(--muted); margin-top: 8px; font-size: .94rem; line-height: 1.55; }

/* ---------- CTA band ---------- */
.cta { max-width: var(--max); margin: clamp(80px, 10vw, 130px) auto 0; border-radius: var(--r-lg); padding: clamp(32px, 5vw, 60px); display: grid; grid-template-columns: 1.3fr auto; gap: 28px; align-items: center; }
.cta h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); font-stretch: 80%; letter-spacing: -.03em; }
.cta p { color: var(--muted); margin-top: 12px; font-size: 1.08rem; max-width: 36em; }
.cta .hero-actions { margin-top: 0; justify-content: flex-end; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 7vw, 88px) 0 0; display: grid; gap: 18px; }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; color: var(--faint); font-size: .88rem; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--faint); }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--yellow); }
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 800; font-stretch: 80%; letter-spacing: -.035em; max-width: 16em; }
.page-hero .lede { margin-top: 0; max-width: 40em; }
.page-hero .hero-actions { margin-top: 8px; }

/* ---------- Service / industry detail ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 60px); align-items: start; }
.panel { border-radius: var(--r-lg); padding: clamp(22px, 3.5vw, 34px); }
.panel h2, .panel h3 { font-size: 1.5rem; font-stretch: 92%; }
.ticks { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--muted); }
.ticks li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: rgba(253,238,28,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDEE1C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; margin-top: 2px; }
.ticks li b { color: var(--text); font-weight: 700; }
.pain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pain > div { border-radius: var(--r-md); padding: 24px; }
.pain h3 { font-size: 1.15rem; }
.pain p { color: var(--muted); margin-top: 8px; font-size: .96rem; }
.related { display: flex; flex-wrap: wrap; gap: 10px; }
.related a { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--edge); text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem; }
.related a:hover { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }

/* ---------- About / team ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 60px); align-items: start; }
blockquote.quote { margin: 0; padding: 26px 28px; border-radius: var(--r-md); }
blockquote.quote p { font: 500 1.22rem/1.45 var(--display); color: var(--text); }
blockquote.quote cite { display: block; margin-top: 14px; font-style: normal; color: var(--muted); font-size: .92rem; }
.team { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.team li { border-radius: var(--r-md); padding: 14px 14px 22px; display: grid; gap: 4px; align-content: start; }
.avatar { aspect-ratio: 1; border-radius: 12px; overflow: hidden; margin-bottom: 12px; position: relative; background: linear-gradient(150deg, #2A2716, #1D1B29); }
.avatar::before { content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center; font: 800 2.6rem/1 var(--display); color: rgba(253,238,28,.75); }
.avatar img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.team b { font: 700 1.1rem/1.25 var(--display); }
.team .role { color: var(--yellow); font-size: .88rem; font-weight: 600; }
.team p { color: var(--muted); font-size: .92rem; margin-top: 8px; line-height: 1.55; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.values > div { border-radius: var(--r-md); padding: 24px; }
.values h3 { font-size: 1.2rem; }
.values p { color: var(--muted); margin-top: 8px; }

/* ---------- Case studies ---------- */
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.case { border-radius: var(--r-lg); overflow: hidden; text-decoration: none; display: grid; }
.case img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.case div { padding: 22px 24px 26px; display: grid; gap: 6px; }
.case small { color: var(--yellow); font-weight: 700; }
.case h3 { font-size: 1.4rem; }
.case p { color: var(--muted); }
.case-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.case-body h2 { font-size: 1.6rem; margin: 32px 0 10px; }
.case-body h2:first-child { margin-top: 0; }
.case-facts { border-radius: var(--r-md); padding: 22px; display: grid; gap: 14px; position: sticky; top: 110px; }
.case-facts dt { color: var(--faint); font-size: .85rem; }
.case-facts dd { margin: 2px 0 0; font-weight: 600; }
.case-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.case-gallery img { border-radius: var(--r-sm); width: 100%; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 10px; max-width: 880px; }
details { border-radius: var(--r-md); }
summary { list-style: none; cursor: pointer; padding: 20px 60px 20px 24px; font: 600 1.1rem/1.35 var(--display); position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); transform: translateY(-70%) rotate(45deg); transition: transform .25s; }
details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
details > p { padding: 0 24px 22px; color: var(--muted); max-width: 46em; }

/* ---------- Forms ---------- */
.form { border-radius: var(--r-lg); padding: clamp(22px, 3.5vw, 36px); display: grid; gap: 20px; }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.form legend, .field > label { font-weight: 700; font-size: .95rem; padding: 0; }
.form legend small, .field > label small { color: var(--faint); font-weight: 500; }
.field { display: grid; gap: 8px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
input[type=text], input[type=tel], input[type=email], input[type=date], select, textarea {
  width: 100%; font: 500 1rem/1.4 var(--body); color: var(--text); background: rgba(5, 5, 10, .4); border: 1px solid var(--edge); border-radius: var(--r-sm); padding: 13px 14px; transition: border-color .2s, background .2s; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--yellow) 50%), linear-gradient(135deg, var(--yellow) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
select option { background: var(--night-2); color: var(--text); }
textarea { resize: vertical; min-height: 130px; }
::placeholder { color: rgba(180, 177, 194, .55); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--yellow); background: rgba(5, 5, 10, .55); }
.invalid input, .invalid textarea, .invalid select, fieldset.invalid .opts { outline: 1px solid #FF7A6B; outline-offset: 2px; border-radius: var(--r-sm); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.opt span { display: block; padding: 10px 15px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255,255,255,.04); color: var(--muted); font-weight: 600; font-size: .92rem; transition: all .15s; }
.opt input:checked + span { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.opt input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }
.opt:hover span { border-color: var(--edge-top); color: var(--text); }
.opt input:checked:hover + span { color: var(--ink); }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(5,5,10,.35); width: max-content; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--muted); }
.seg input:checked + span { background: var(--text); color: var(--night); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; font-weight: 600; }
.form-status.ok { color: var(--yellow); }
.form-status.err { color: #FF8D80; }
.form-note { color: var(--faint); font-size: .86rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 60px); align-items: start; }
.channels { display: grid; gap: 12px; }
.channel { border-radius: var(--r-md); padding: 18px 20px; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; text-decoration: none; transition: border-color .2s; }
a.channel:hover { border-color: rgba(253,238,28,.5); }
.channel .ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(253,238,28,.12); display: grid; place-items: center; }
.channel .ico svg { width: 20px; height: 20px; fill: var(--yellow); }
.channel small { color: var(--faint); display: block; font-size: .84rem; }
.channel b { font: 600 1.12rem/1.3 var(--display); }
.cities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cities span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--edge); font-weight: 600; font-size: .9rem; }

/* ---------- Policy ---------- */
.policy { max-width: 880px; display: grid; gap: 18px; }
.policy .panel p, .policy .panel li { color: var(--muted); }
.policy .panel p { margin-top: 12px; }
.policy .panel ul { margin: 14px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }

/* ---------- Footer ---------- */
.footer { padding: clamp(80px, 9vw, 120px) var(--gutter) 28px; }
.footer-inner { max-width: var(--max); margin: 0 auto; border-radius: var(--r-lg); padding: clamp(26px, 4vw, 40px); display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.footer-brand img { height: 44px; width: auto; }
.footer-brand p { color: var(--muted); margin-top: 14px; font-size: .94rem; max-width: 26em; }
.footer h4 { font: 700 .95rem/1 var(--body); color: var(--text); margin-bottom: 14px; }
.footer ul { list-style: none; display: grid; gap: 9px; }
.footer a { color: var(--muted); text-decoration: none; font-size: .93rem; }
.footer a:hover { color: var(--yellow); }
.footer-base { max-width: var(--max); margin: 18px auto 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--faint); font-size: .85rem; padding: 0 8px; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--edge); display: grid; place-items: center; }
.social a:hover { background: var(--yellow); border-color: var(--yellow); }
.social svg { width: 17px; height: 17px; fill: var(--text); }
.social a:hover svg { fill: var(--ink); }

/* ---------- WhatsApp float ---------- */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 12px 28px -8px rgba(37,211,102,.6); transition: transform .2s; }
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }

/* ---------- 404 ---------- */
.not-found { min-height: 64vh; display: grid; align-content: center; justify-items: start; gap: 18px; max-width: var(--max); margin: 0 auto; }
.not-found h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-stretch: 80%; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }
  .logo-wall { grid-template-columns: repeat(4, 1fr); }
  .footer-inner { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .nav-toggle { display: grid; gap: 6px; place-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--edge); background: rgba(255,255,255,.08); cursor: pointer; }
  .nav-toggle i { width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s; }
  .nav-toggle[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
  .nav { border-radius: 24px; flex-wrap: wrap; padding: 8px 8px 8px 16px; }
  .nav-links { display: none; width: 100%; flex-direction: column; align-items: stretch; padding: 6px 2px 10px; max-height: calc(100vh - 110px); overflow-y: auto; }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn), .nav-links .sub-toggle { padding: 13px 12px; font-size: 1.05rem; width: 100%; justify-content: space-between; }
  .sub { position: static; transform: none; min-width: 0; box-shadow: none; background: rgba(255,255,255,.04); margin: 2px 0 6px; }
  .nav-links .btn { margin-top: 8px; width: 100%; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 36px; }
  .proofs { margin: 8px auto 0; max-width: 440px; }
  .services, .ba-list, .cases { grid-template-columns: 1fr; }
  .service:nth-child(odd) { border-right: 0; }
  .service:nth-last-child(2) { border-bottom: 1px solid rgba(255,255,255,.08); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-grid, .reviews, .pain, .values { grid-template-columns: 1fr; }
  .detail, .about-grid, .contact-grid, .case-body { grid-template-columns: minmax(0, 1fr); }
  .case-facts { position: static; }
  .cta { grid-template-columns: 1fr; }
  .cta .hero-actions { justify-content: flex-start; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts > div:nth-child(3) { border-left: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--edge); }
}
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .page-hero h1 { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .hero-actions .btn { width: 100%; }
  .facts { grid-template-columns: 1fr; }
  .facts > div + div { border-left: 0; border-top: 1px solid var(--edge); }
  .steps, .team { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
  .service { padding: 22px 18px; grid-template-columns: 36px 1fr; }
  .service .go { display: none; }
  .row-2 { grid-template-columns: 1fr; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .filter-row::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .case-gallery { grid-template-columns: 1fr; }
  .brand img { height: 34px; }
  .proof-menu { width: 50%; right: 3%; font-size: .8rem; padding: 14px 12px; }
  .menu-title { font-size: .95rem; }
  .proof-post { width: 54%; }
  .proof-card { width: 70%; padding: 14px; }
  .card-mark { width: 40px; height: 40px; }
  .frame::before, .frame::after { width: 24px; height: 24px; }
  .frame::before { top: -8px; left: -8px; } .frame::after { bottom: -8px; right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb { animation: none; }
  .proof, .btn, .service, .work img, .ind, summary::after { transition: none; }
}

/* ---------- Brochure additions ---------- */
.avatar { border-radius: 50%; }
.team { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.team li { justify-items: center; text-align: center; padding: 22px 18px 24px; }
.team .avatar { width: 100%; max-width: 170px; }
.logo-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1000px) { .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logo-wall li { background: #FEF8E6; padding: 12px; }
.logo-wall img { max-width: 100%; max-height: 100%; }
.ratings { display: flex; flex-wrap: wrap; gap: 10px; }
.rating small { line-height: 1.3; font-size: .8rem; }
.founder { margin: 0; display: grid; gap: 0; }
.founder-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.founder .quote { border-radius: 0 0 var(--r-lg) var(--r-lg); border-top: 0; }
.founder .quote p { font-size: 1.08rem; }
.founder .quote p + p { margin-top: 12px; }
.groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.groups > div { border-radius: var(--r-md); padding: 22px 24px; }
.groups h3 { font-size: 1.15rem; color: var(--yellow); }
.groups ul { list-style: none; margin-top: 10px; display: grid; gap: 6px; color: var(--muted); }
.cities span { background: rgba(255,255,255,.04); }
@media (max-width: 1000px) { .groups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .groups { grid-template-columns: 1fr; } .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } .logo-wall li { padding: 8px; } }

/* ---------- Video items and portrait before/after ---------- */
.work .play { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; transform: translate(-50%, -60%); border-radius: 50%; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%2312110A'/%3E%3C/svg%3E") 56% 50%/26px no-repeat; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.lightbox video { max-height: 78vh; max-width: 100%; margin: 0 auto; border-radius: 12px; background: #000; }
.ba-list { max-width: 980px; }
.ba-stage { aspect-ratio: 4 / 5; }

/* ---------- Case study ---------- */
.case-feature { grid-template-columns: 1.2fr 1fr; align-items: stretch; }
.case-feature img { height: 100%; aspect-ratio: auto; min-height: 320px; }
.case-feature div { padding: clamp(24px, 3.5vw, 40px); align-content: center; gap: 12px; }
.case-feature h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.case .more { color: var(--yellow); font-weight: 700; margin-top: 6px; }
.case-cover { padding-top: 48px; }
.case-cover img { width: 100%; height: auto; border-radius: var(--r-lg); aspect-ratio: 16 / 9; object-fit: cover; }
.case-cover.frame::before { top: 36px; }
.case-body .prose h2, .case-logo .prose h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 14px; }
.case-svcs { list-style: none; display: grid; gap: 4px; }
.case-svcs a { color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(253,238,28,.35); }
.case-svcs a:hover { color: var(--yellow); }
.case-steps { grid-template-columns: repeat(4, 1fr); }
.case-logo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 56px); align-items: center; }
.construction { margin: 0; border-radius: var(--r-lg); overflow: hidden; padding: 0; }
.construction img { width: 100%; background: #fff; }
.construction figcaption, .case-video figcaption, .case-gallery figcaption { padding: 12px 16px; color: var(--muted); font-size: .9rem; }
.palette { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
.palette li { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--edge); background: rgba(255,255,255,.03); }
.palette .sw { width: 38px; height: 38px; border-radius: 10px; grid-row: span 2; }
.palette b { font-size: .95rem; }
.palette code { color: var(--muted); font-size: .85rem; }
.case-video { margin: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--edge); background: var(--night-3); }
.case-video video { width: 100%; display: block; background: #fff; aspect-ratio: 16 / 9; object-fit: cover; }
.case-gallery { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.case-gallery figure { margin: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--edge); background: var(--night-3); }
.case-gallery figure.wide { grid-column: span 2; }
.case-gallery img { border-radius: 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; }
.case-gallery figure.wide img { aspect-ratio: 16 / 9; }
@media (max-width: 1000px) {
  .case-feature { grid-template-columns: 1fr; }
  .case-feature img { min-height: 0; aspect-ratio: 16 / 9; }
  .case-steps { grid-template-columns: 1fr 1fr; }
  .case-logo { grid-template-columns: 1fr; }
  .case-gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .case-steps { grid-template-columns: 1fr; }
  .case-gallery { grid-template-columns: 1fr; }
  .case-gallery figure.wide { grid-column: auto; }
  .palette { grid-template-columns: 1fr; }
}

/* ---------- Spacing fixes (audit) ---------- */
.logo-wall li { min-width: 0; overflow: hidden; }
.logo-wall img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.section.tight { padding-top: clamp(52px, 6.5vw, 84px); }
.case-cover { padding-top: 36px; }
.case-facts { position: static; max-width: var(--max); margin: 18px auto 0; border-radius: var(--r-md); padding: 18px 24px; }
.case-facts dl { margin: 0; display: grid; grid-template-columns: auto auto 1fr; gap: 14px 44px; align-items: start; }
.case-facts dt { color: var(--faint); font-size: .82rem; }
.case-facts dd { margin: 4px 0 0; font-weight: 600; }
.case-svcs { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.case-svcs a { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--edge); border-bottom-color: var(--edge); font-size: .86rem; font-weight: 600; }
.case-svcs a:hover { border-color: var(--yellow); }
.case-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.case-row .prose p { max-width: 62ch; }
.case-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.case-result .prose h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 14px; }
.ticks.two-col { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.case-steps li { padding: 20px 18px 22px; }
.case-gallery { gap: 14px; }
@media (max-width: 1000px) {
  .case-row, .case-result { grid-template-columns: minmax(0, 1fr); }
  .case-facts dl { grid-template-columns: 1fr 1fr; }
  .case-facts .wide { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .ticks.two-col { grid-template-columns: 1fr; } }

/* ---------- Audit round 2 ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq-wrap .section-head { margin-bottom: 0; position: sticky; top: 110px; }
.faq-wrap .faq-list { max-width: none; }
.related-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 56px; }
.h3x { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 16px; }
.make-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 14px; }
.about-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; }
.founder-photo { aspect-ratio: 1 / 1; border-radius: var(--r-lg); object-position: center 30%; }
.founder-quote { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); }
.founder-quote .qmark { font: 800 5rem/0.8 var(--display); color: var(--yellow); }
.founder-quote p { font: 500 clamp(1.08rem, 1.6vw, 1.3rem)/1.55 var(--display); max-width: 70ch; }
.founder-quote p + p { margin-top: 12px; }
.contact-grid > div:first-child { display: grid; gap: 16px; align-content: start; }
.contact-grid > div:first-child > .channels { margin-top: 0 !important; }
.contact-grid .channel { padding: 14px 18px; }
.contact-grid textarea { min-height: 190px; }
.quote-trust { display: grid; gap: 12px; }
.quote-trust h3 { font-size: 1.3rem; }
@media (min-width: 1001px) { .contact-grid > div:first-child, .contact-grid > .channels { position: sticky; top: 100px; } }
@media (max-width: 1000px) {
  .faq-wrap, .related-pair { grid-template-columns: minmax(0, 1fr); }
  .faq-wrap .section-head { position: static; }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .founder-photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) { .make-list { grid-template-columns: 1fr; } .founder-quote { grid-template-columns: 1fr; } .founder-quote .qmark { font-size: 3.5rem; } }

.ba-wrap { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 56px); align-items: center; }
.ba-wrap .section-head { margin-bottom: 0; }
.ba-wrap .ba-list { max-width: none; }
@media (max-width: 1000px) { .ba-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .ba-list { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
  .case-gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
  .case-gallery figure.wide { grid-column: 1 / -1; }
  .case-gallery figcaption { padding: 8px 10px; font-size: .8rem; }
  .palette { grid-template-columns: 1fr 1fr; }
  .palette li { grid-template-columns: 30px 1fr; padding: 8px; column-gap: 8px; }
  .palette .sw { width: 30px; height: 30px; }
}

/* ---------- Reviews (masonry) ---------- */
.reviews { display: block; columns: 3 300px; column-gap: 16px; }
.review { break-inside: avoid; margin: 0 0 16px; display: grid; gap: 14px; padding: 22px 24px; border-radius: var(--r-md); }
.review blockquote { margin: 0; font-size: 1rem; line-height: 1.6; }
.review-lead blockquote { font: 500 clamp(1.1rem, 1.6vw, 1.28rem)/1.5 var(--display); }
.review figcaption { display: flex; gap: 12px; align-items: center; }
.review .who small { display: block; line-height: 1.35; margin-top: 2px; }
.review .av-i { display: grid; place-items: center; font: 700 .95rem/1 var(--display); color: var(--ink); background: var(--yellow); }
.reviews-more { margin-top: 8px; }
@media (max-width: 600px) {
  .reviews { columns: auto; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 10px; scrollbar-width: none; align-items: stretch; }
  .reviews::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 84%; margin: 0; scroll-snap-align: start; align-content: start; }
  .review-lead blockquote { font: 400 1rem/1.6 var(--body); }
  .reviews-more { margin-top: 14px; }
}
.swipe-hint { display: none; }
@media (max-width: 600px) { .swipe-hint { display: inline; } }

/* ---------- Reviews marquee ---------- */
.reviews-sec { max-width: none; }
.reviews-sec > .section-head, .reviews-sec > .reviews-more { max-width: var(--max); margin-left: auto; margin-right: auto; }
.marquee { overflow: hidden; margin: 0 calc(var(--gutter) * -1); padding: 8px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 18px; width: max-content; align-items: stretch;
  animation: marquee calc(var(--n) * 7s) linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
.r-card { flex: 0 0 380px; margin: 0; padding: 26px 26px 28px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 16px; }
.r-card.r-wide { flex-basis: 560px; }
.r-person { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--edge); }
.r-av { width: 76px; height: 76px; flex: none; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--yellow); box-shadow: 0 0 0 4px rgba(253,238,28,.12); background: var(--night-3); }
.r-av-i { display: grid; place-items: center; font: 800 1.5rem/1 var(--display); color: var(--ink); background: var(--yellow); }
.r-who { display: grid; gap: 3px; min-width: 0; }
.r-name { font: 700 1.3rem/1.15 var(--display); letter-spacing: -.01em; color: var(--text); }
.r-role { font-weight: 700; font-size: .95rem; line-height: 1.35; color: var(--yellow); }
.r-company { font-weight: 600; font-size: .92rem; line-height: 1.35; color: #DCD9E6; }
.r-card .stars { font-size: 1.05rem; letter-spacing: 3px; }
.r-card blockquote { margin: 0; font-size: 1.04rem; line-height: 1.62; color: #E9E7F0; }
.reviews-more { margin-top: 18px; }
@media (max-width: 600px) {
  .r-card { flex-basis: 300px; padding: 22px 20px 24px; }
  .r-card.r-wide { flex-basis: 330px; }
  .r-av { width: 64px; height: 64px; }
  .r-name { font-size: 1.15rem; }
  .marquee-track { animation-duration: calc(var(--n) * 6s); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; }
  .marquee-track > [aria-hidden="true"] { display: none; }
}
.r-person { min-height: 118px; } @media (max-width: 600px) { .r-person { min-height: 104px; } }
.reviews-more { justify-content: center; }

/* ---------- Montserrat type scale ---------- */
/* Montserrat is wider than the old condensed display face, so large sizes come down a step and tracking tightens. */
body { font-size: .97rem; line-height: 1.7; }
h1, h2, h3, h4 { letter-spacing: -.02em; }
.hero h1 { font-size: clamp(2.4rem, 5.1vw, 4.3rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; }
.page-hero h1 { font-size: clamp(2.2rem, 4.7vw, 3.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; }
.h2, .section-head h2 { font-size: clamp(1.75rem, 3.5vw, 2.7rem); font-weight: 800; letter-spacing: -.025em; }
.cta h2 { font-size: clamp(1.8rem, 3.8vw, 3rem); font-weight: 800; }
.not-found h1 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); font-weight: 800; }
.case-body .prose h2, .case-logo .prose h2, .case-result .prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; }
.service h3, .ind h3, .case h3 { font-weight: 700; letter-spacing: -.015em; }
.service h3 { font-size: 1.18rem; }
.ind h3 { font-size: 1.3rem; }
.case-feature h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
.steps b, .pain h3, .values h3, .groups h3, .panel h2, .panel h3 { font-weight: 700; }
.facts b { font-size: 1.4rem; font-weight: 800; }
.r-name { font-size: 1.18rem; font-weight: 700; }
.r-role { font-size: .9rem; }
.r-company { font-size: .88rem; }
.r-card blockquote { font-size: .98rem; }
.lede, .section-head p, .prose p { line-height: 1.7; }
.btn { font-weight: 700; letter-spacing: .005em; }
blockquote.quote p, .founder-quote p { font-weight: 500; font-style: italic; }
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(2rem, 9.4vw, 2.8rem); }
  .page-hero h1 { font-size: clamp(1.85rem, 8.4vw, 2.6rem); }
  .h2, .section-head h2 { font-size: clamp(1.55rem, 7vw, 2rem); }
  .cta h2 { font-size: clamp(1.6rem, 7.4vw, 2.1rem); }
}
.facts b { color: var(--yellow); }

/* ---------- Quote form: category picker ---------- */
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cat { position: relative; }
.cat input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cat span { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--edge);
  background: rgba(255,255,255,.04); color: var(--text); font-weight: 600; font-size: .95rem; line-height: 1.3; transition: background .15s, border-color .15s, color .15s; }
.cat span::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--edge-top); background: transparent center/12px no-repeat; transition: inherit; }
.cat:hover span { border-color: rgba(253,238,28,.5); }
.cat input:checked + span { background: rgba(253,238,28,.12); border-color: var(--yellow); }
.cat input:checked + span::before { background-color: var(--yellow); border-color: var(--yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312110A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.cat input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }
.cat-else span { color: var(--muted); }
/* Details panel: one panel under the grid, a tab per ticked service, the active tab's options below */
.svc-detail { margin-top: 4px; padding: 16px; border-radius: 14px; background: rgba(5,5,10,.35); border: 1px dashed rgba(253,238,28,.35); animation: subIn .2s ease; }
.svc-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.svc-tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--edge); background: transparent;
  color: var(--muted); font: 500 .84rem/1.3 var(--body); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.svc-tab:hover { color: var(--text); border-color: var(--edge-top); }
.svc-tab[aria-selected="true"] { color: var(--text); background: rgba(253,238,28,.12); border-color: var(--yellow); }
.svc-tab:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.svc-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--yellow); color: var(--ink); font: 600 .7rem/1 var(--body); font-style: normal; }
.svc-count[hidden] { display: none; }
/* panes of ticked services share one grid cell, so the panel keeps the height of the tallest one and never jumps when switching tabs */
.svc-panes { display: grid; }
.svc-panes > .sub-opts { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .18s ease; }
.svc-panes > .sub-opts.is-active { visibility: visible; opacity: 1; }
.svc-panes > .sub-opts.is-off { display: none; }
.sub-title { font-weight: 700; font-size: .92rem; margin-bottom: 10px; color: var(--yellow); }
.sub-title small { color: var(--muted); font-weight: 500; }
.opt-sm span { padding: 7px 13px; font-size: .86rem; }
@keyframes subIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
fieldset.invalid .cats { outline: 1px solid #FF7A6B; outline-offset: 4px; border-radius: 16px; }
@media (max-width: 600px) { .cats { grid-template-columns: 1fr; } .cat span { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) { .svc-detail { animation: none; } .svc-panes > .sub-opts, .svc-tab { transition: none; } }
@media (max-width: 600px) {
  .cats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cat span { min-height: 56px; padding: 10px 11px; gap: 9px; font-size: .84rem; }
  .cat span::before { width: 18px; height: 18px; }
}

/* ---------- Hero: bento artwork ---------- */
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 0; padding: 56px 0 48px; }
.hero h1 { max-width: 11.5em; }
.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.mini-logos { display: flex; flex: none; }
.mini-logos span { width: 36px; height: 36px; border-radius: 50%; background: #FEF8E6 center/78% no-repeat; border: 2px solid var(--night); margin-left: -9px; }
.mini-logos span:first-child { margin-left: 0; }
.hp-text { display: grid; gap: 1px; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.hp-text b { color: var(--text); }
.hp-text .st { color: var(--yellow); letter-spacing: 2px; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); gap: 12px; aspect-ratio: 1 / 1; width: 100%; max-width: 600px; margin-left: auto; transform: rotate(-3deg); }
.bento > a, .bento > div { position: relative; display: block; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: var(--night-3); box-shadow: 0 30px 60px -30px rgba(0,0,0,.85); }
.bento img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.bento a:hover img { transform: scale(1.05); }
.bento a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.bento .tag { position: absolute; left: 10px; bottom: 10px; padding: 5px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff; background: rgba(14,13,21,.75); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.b1 { grid-column: 1 / 4; grid-row: 1 / 5; }
.b2 { grid-column: 4 / 7; grid-row: 1 / 3; }
.b3 { grid-column: 4 / 6; grid-row: 3 / 5; }
.bento .b4 { grid-column: 6 / 7; grid-row: 3 / 5; background: var(--yellow); display: grid; place-items: center; border-color: var(--yellow); }
.bento .b4 img { width: 64%; height: auto; }
.bento .b5 { grid-column: 1 / 3; grid-row: 5 / 7; display: grid; align-content: center; padding: 16px; background: linear-gradient(150deg, #2B2511, #17161F); }
.b5 b { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; color: var(--yellow); line-height: 1; }
.b5 span { color: var(--muted); font-size: .84rem; margin-top: 6px; line-height: 1.4; }
.b6 { grid-column: 3 / 7; grid-row: 5 / 7; }
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .bento { margin: 12px auto 0; max-width: 520px; transform: rotate(-2deg); }
}
@media (max-width: 600px) {
  .bento { gap: 8px; transform: none; }
  .bento > a, .bento > div { border-radius: 12px; }
  .bento .tag { left: 6px; bottom: 6px; padding: 4px 8px; font-size: .64rem; }
  .bento .b5 { padding: 10px; }
  .b5 span { font-size: .7rem; }
  .hero-proof { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .bento img { transition: none; } }

.mini-logos span { display: grid; place-items: center; width: 44px; height: 44px; background: #FEF8E6; overflow: hidden; margin-left: -10px; padding: 5px; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.mini-logos img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mini-logos { gap: 6px; flex-wrap: wrap; }
.mini-logos span { width: 76px; height: 40px; margin-left: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); padding: 5px 7px; box-shadow: none; }
.hero-proof { flex-wrap: wrap; row-gap: 12px; }
@media (max-width: 600px) { .mini-logos span { width: 60px; height: 34px; padding: 4px 5px; } }
/* hero logos back in circles: logo sits inside the circle's safe area so nothing is cut off */
.mini-logos { gap: 0; flex-wrap: nowrap; }
.mini-logos span { width: 58px; height: 58px; border-radius: 50%; margin-left: -10px; padding: 0 9px; border: 3px solid var(--night); background: #FEF8E6; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.mini-logos span:first-child { margin-left: 0; }
.mini-logos img { width: 100%; height: 60%; object-fit: contain; }
@media (max-width: 600px) { .mini-logos span { width: 50px; height: 50px; padding: 0 7px; margin-left: -8px; } }
.b5 span strong { color: var(--text); font-weight: 800; font-size: 1.15em; display: block; }

/* ---------- Hero headline: "design brands" switches on like a tubelight ---------- */
/* White as normal -> hollow yellow outline forms -> outline flickers like an old tubelight -> switches ON
   -> fills with solid brand yellow + soft glow. Plays once, then stays. Only these two words animate;
   the stroke is drawn on the glyph edge, so no size or position changes. */
.hero h1 .neon { -webkit-text-stroke-width: 1.5px; color: var(--yellow); -webkit-text-stroke-color: rgba(253,238,28,0); text-shadow: 0 0 14px rgba(253,238,28,.45), 0 0 36px rgba(253,238,28,.22); filter: none;
  animation: tube-on 4.6s linear .2s 1 both; }
@keyframes tube-on {
  0% { color: var(--text); -webkit-text-stroke-color: rgba(253,238,28,0); filter: drop-shadow(0 0 2.0px rgba(253,238,28,0.00)) drop-shadow(0 0 6.0px rgba(253,238,28,0.00)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  12% { color: var(--text); -webkit-text-stroke-color: rgba(253,238,28,0); filter: drop-shadow(0 0 2.0px rgba(253,238,28,0.00)) drop-shadow(0 0 6.0px rgba(253,238,28,0.00)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  26% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,0.5); filter: drop-shadow(0 0 2.0px rgba(253,238,28,0.00)) drop-shadow(0 0 6.0px rgba(253,238,28,0.00)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  29% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,0.5); filter: drop-shadow(0 0 2.0px rgba(253,238,28,0.00)) drop-shadow(0 0 6.0px rgba(253,238,28,0.00)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  30% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,1); filter: drop-shadow(0 0 6.0px rgba(253,238,28,0.85)) drop-shadow(0 0 16.0px rgba(253,238,28,0.45)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  31% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,0.2); filter: drop-shadow(0 0 2.0px rgba(253,238,28,0.00)) drop-shadow(0 0 6.0px rgba(253,238,28,0.00)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  34% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,0.22); filter: drop-shadow(0 0 2.0px rgba(253,238,28,0.00)) drop-shadow(0 0 6.0px rgba(253,238,28,0.00)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  35% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,0.9); filter: drop-shadow(0 0 4.8px rgba(253,238,28,0.59)) drop-shadow(0 0 13.0px rgba(253,238,28,0.32)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  37% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,0.65); filter: drop-shadow(0 0 3.4px rgba(253,238,28,0.30)) drop-shadow(0 0 9.5px rgba(253,238,28,0.16)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  38% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,1); filter: drop-shadow(0 0 5.4px rgba(253,238,28,0.72)) drop-shadow(0 0 14.5px rgba(253,238,28,0.38)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  39% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,0.18); filter: drop-shadow(0 0 2.0px rgba(253,238,28,0.00)) drop-shadow(0 0 6.0px rgba(253,238,28,0.00)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  43% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,0.2); filter: drop-shadow(0 0 2.0px rgba(253,238,28,0.00)) drop-shadow(0 0 6.0px rgba(253,238,28,0.00)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  44% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,1); filter: drop-shadow(0 0 5.6px rgba(253,238,28,0.77)) drop-shadow(0 0 15.0px rgba(253,238,28,0.41)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  45.5% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,0.75); filter: drop-shadow(0 0 3.8px rgba(253,238,28,0.38)) drop-shadow(0 0 10.5px rgba(253,238,28,0.20)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  46.5% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,1); filter: drop-shadow(0 0 5.6px rgba(253,238,28,0.77)) drop-shadow(0 0 15.0px rgba(253,238,28,0.41)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  47.5% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,0.3); filter: drop-shadow(0 0 2.2px rgba(253,238,28,0.04)) drop-shadow(0 0 6.5px rgba(253,238,28,0.02)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  49% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,1); filter: drop-shadow(0 0 6.0px rgba(253,238,28,0.85)) drop-shadow(0 0 16.0px rgba(253,238,28,0.45)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  51% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,0.9); filter: drop-shadow(0 0 5.2px rgba(253,238,28,0.68)) drop-shadow(0 0 14.0px rgba(253,238,28,0.36)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  53% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,1); filter: drop-shadow(0 0 5.8px rgba(253,238,28,0.81)) drop-shadow(0 0 15.5px rgba(253,238,28,0.43)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  55% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,0.95); filter: drop-shadow(0 0 5.5px rgba(253,238,28,0.75)) drop-shadow(0 0 14.8px rgba(253,238,28,0.40)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  57% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,1); filter: drop-shadow(0 0 5.7px rgba(253,238,28,0.78)) drop-shadow(0 0 15.2px rgba(253,238,28,0.41)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  64% { color: transparent; -webkit-text-stroke-color: rgba(253,238,28,1); filter: drop-shadow(0 0 5.7px rgba(253,238,28,0.78)) drop-shadow(0 0 15.2px rgba(253,238,28,0.41)); text-shadow: 0 0 14px rgba(253,238,28,0.00), 0 0 36px rgba(253,238,28,0.00); }
  84% { color: var(--yellow); -webkit-text-stroke-color: rgba(253,238,28,1); filter: drop-shadow(0 0 2.0px rgba(253,238,28,0.00)) drop-shadow(0 0 6.0px rgba(253,238,28,0.00)); text-shadow: 0 0 14px rgba(253,238,28,0.45), 0 0 36px rgba(253,238,28,0.22); }
  100% { color: var(--yellow); -webkit-text-stroke-color: rgba(253,238,28,0); filter: drop-shadow(0 0 2.0px rgba(253,238,28,0.00)) drop-shadow(0 0 6.0px rgba(253,238,28,0.00)); text-shadow: 0 0 14px rgba(253,238,28,0.45), 0 0 36px rgba(253,238,28,0.22); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .neon { animation: none; }
}

/* ---------- Trusted by: minimal logo strip ---------- */
.trust { max-width: none; padding-top: clamp(64px, 8vw, 104px); }
.trust-head { max-width: 640px; margin: 0 auto; text-align: center; display: grid; gap: 8px; }
.trust-title { font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 700; letter-spacing: -.01em; }
.trust-head p { color: var(--faint); font-size: .92rem; }
.trust-badges { display: flex; justify-content: center; margin-top: 22px; }
.logo-rails { display: grid; gap: clamp(26px, 3vw, 38px); margin: clamp(30px, 4vw, 44px) calc(var(--gutter) * -1) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logo-rail { display: flex; overflow: hidden; --gap: clamp(44px, 5vw, 72px); }
.logo-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--gap); padding-right: var(--gap); flex: none;
  animation: logo-slide calc(var(--n) * 3.2s) linear infinite; }
.logo-rail.rev .logo-track { animation-direction: reverse; }
.logo-rails:hover .logo-track { animation-play-state: paused; }
.logo-track li { flex: none; display: flex; align-items: center; }
.logo-track img { height: 30px; width: auto; max-width: 132px; object-fit: contain; opacity: .5; transition: opacity .3s ease; }
.logo-track img:hover { opacity: .95; }
@keyframes logo-slide { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.trust-note { text-align: center; color: var(--faint); font-size: .82rem; margin-top: clamp(26px, 3vw, 36px); }
@media (max-width: 600px) {
  .logo-rail { --gap: 36px; }
  .logo-track img { height: 24px; max-width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
  .logo-rail { overflow-x: auto; scrollbar-width: none; }
  .logo-rail .logo-track[aria-hidden] { display: none; }
}
.logo-track img.sq { height: 42px; }
@media (max-width: 600px) { .logo-track img.sq { height: 34px; } }

/* Seamless loop: one track = logo set + identical copy; every logo carries its own right margin,
   so the track is exactly two equal halves and moving it by -50% lands on a pixel-identical frame. */
.logo-rail { overflow: hidden; }
.logo-track { gap: 0; padding-right: 0; width: max-content; animation: logo-loop calc(var(--n) * 3.2s) linear infinite; animation-direction: normal; will-change: transform; }
.logo-rail.rev .logo-track { animation-direction: normal; }
.logo-rail.slow .logo-track { animation-duration: calc(var(--n) * 3.8s); }
.logo-track li { margin-right: var(--gap); }
@keyframes logo-loop { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
  .logo-track li[aria-hidden="true"] { display: none; }
}

/* ---------- Logo strip: hover reveals original brand colours; rows move in opposite directions at one speed ---------- */
.logo-track .lg { position: relative; display: block; line-height: 0; }
.logo-track .lg::before { content: ""; position: absolute; inset: -9px -12px; border-radius: 10px; background: #fff; opacity: 0; transition: opacity .35s ease; }
.logo-track .lg img { position: relative; transition: opacity .35s ease; }
.logo-track .lg .lg-color { position: absolute; left: 0; top: 0; opacity: 0; }
.logo-track .lg:hover::before { opacity: 1; }
.logo-track .lg:hover img:not(.lg-color) { opacity: 0; }
.logo-track .lg:hover .lg-color { opacity: 1; }
.logo-track img:hover { opacity: inherit; }
.logo-rail .logo-track { animation-name: logo-loop; animation-direction: normal; }
.logo-rail.rev .logo-track { animation-direction: reverse; }
.logo-rail.slow .logo-track { animation-duration: inherit; }
/* Room for the hover chip, same section height */
.logo-rail { padding-block: 10px; }
.logo-rails { gap: clamp(6px, 1vw, 18px); }
.logo-rails { margin-top: clamp(20px, 3vw, 34px); }

/* ---------- Hero headline: hand-drawn underline under "remember" ---------- */
/* Two quick pen strokes, drawn once after "design brands" lights up. Absolutely positioned,
   so the headline's size and line spacing don't change. */
.hero h1 .scribble { position: relative; white-space: nowrap; }
.hero h1 .scribble svg { position: absolute; left: -2%; width: 104%; height: auto; bottom: -.25em; overflow: visible; pointer-events: none; }
.hero h1 .scribble path { fill: none; stroke: var(--yellow); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: scribble-draw .3s cubic-bezier(.5,.05,.3,1) 3.7s 1 forwards; }
.hero h1 .scribble path + path { stroke-width: 2.6; opacity: .9; animation-duration: .24s; animation-delay: 3.96s; }
@keyframes scribble-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 600px) { .hero h1 .scribble path { stroke-width: 4.6; } .hero h1 .scribble path + path { stroke-width: 3.4; } }
@media (prefers-reduced-motion: reduce) { .hero h1 .scribble path { animation: none; stroke-dashoffset: 0; } }

/* ---------- Industries: four cards (Hospitality | Education | Retail | Service) ---------- */
.ind-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ind-grid.four .ind { padding: 26px 24px; }
@media (max-width: 1200px) { .ind-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ind-grid.four { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Homepage "Recent work": editorial collage (4 curated rows) ---------- */
/* Desktop: 12-column grid, each row = 2 units tall, every row a different composition.
   R1: large | 2 small stacked | medium portrait   R2: medium portrait | large wide
   R3: tall | wide | 2 small stacked               R4: large wide | medium            */
.work-grid.collage { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 14.5vw, 205px); gap: 16px; }
.collage .work { height: 100%; min-height: 0; }
.collage .work img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; display: block; }
.collage .t1  { grid-column: 1 / span 5;  grid-row: 1 / span 2; }
.collage .t2  { grid-column: 6 / span 3;  grid-row: 1; }
.collage .t4  { grid-column: 6 / span 3;  grid-row: 2; }
.collage .t3  { grid-column: 9 / span 4;  grid-row: 1 / span 2; }
.collage .t5  { grid-column: 1 / span 4;  grid-row: 3 / span 2; }
.collage .t6  { grid-column: 5 / span 8;  grid-row: 3 / span 2; }
.collage .t7  { grid-column: 1 / span 3;  grid-row: 5 / span 2; }
.collage .t8  { grid-column: 4 / span 6;  grid-row: 5 / span 2; }
.collage .t9  { grid-column: 10 / span 3; grid-row: 5; }
.collage .t10 { grid-column: 10 / span 3; grid-row: 6; }
.collage .t11 { grid-column: 1 / span 7;  grid-row: 7 / span 2; }
.collage .t12 { grid-column: 8 / span 5;  grid-row: 7 / span 2; }
/* Small tiles: tighter caption so the image stays the hero */
.collage .sz-S figcaption { padding: 28px 14px 11px; }
.collage .sz-S b { font-size: .95rem; }

/* Tablet: 6 columns, same hierarchy re-composed (large/wide tiles lead, portraits stay portrait) */
@media (max-width: 1000px) {
  .work-grid.collage { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 14px; }
  .collage .t1  { grid-column: 1 / span 4; grid-row: 1 / span 2; }
  .collage .t3  { grid-column: 5 / span 2; grid-row: 1 / span 2; }
  .collage .t2  { grid-column: 1 / span 3; grid-row: 3; }
  .collage .t4  { grid-column: 4 / span 3; grid-row: 3; }
  .collage .t5  { grid-column: 1 / span 2; grid-row: 4 / span 2; }
  .collage .t6  { grid-column: 3 / span 4; grid-row: 4 / span 2; }
  .collage .t8  { grid-column: 1 / span 4; grid-row: 6 / span 2; }
  .collage .t7  { grid-column: 5 / span 2; grid-row: 6 / span 2; }
  .collage .t9  { grid-column: 1 / span 3; grid-row: 8; }
  .collage .t10 { grid-column: 4 / span 3; grid-row: 8; }
  .collage .t11 { grid-column: 1 / span 4; grid-row: 9 / span 2; }
  .collage .t12 { grid-column: 5 / span 2; grid-row: 9 / span 2; }
}

/* Mobile: 2 columns, tiles keep their role (large = full width, wide = full width,
   portrait = half width & tall, small = half width) and pack without holes */
@media (max-width: 600px) {
  .work-grid.collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 112px; grid-auto-flow: row dense; gap: 12px; }
  .collage .work { grid-column: auto; grid-row: auto; }
  .collage .sz-L { grid-column: span 2; grid-row: span 3; }
  .collage .sz-W { grid-column: span 2; grid-row: span 2; }
  .collage .sz-T { grid-column: span 1; grid-row: span 2; }
  .collage .sz-S { grid-column: span 1; grid-row: span 1; }
  .collage .work figcaption { padding: 26px 11px 9px; }
  .collage .work b { font-size: .88rem; }
  .collage .work small { font-size: .72rem; }
  .collage .sz-S small { display: none; }
}

/* ---------- Case study card: "Read the case study" as a smaller yellow button ---------- */
/* Same yellow pill as "Get a quote", one step down: smaller text and padding, softer shadow. */
.case .more.btn { justify-self: start; align-self: start; width: auto; margin-top: 14px; padding: 9px 16px; font-size: .84rem; gap: 8px; color: var(--ink); background: var(--yellow); box-shadow: 0 10px 22px -14px rgba(253, 238, 28, .55); }
.case .more.btn svg { width: 15px; height: 15px; transition: transform .2s ease; }
.case:hover .more.btn { background: var(--yellow-soft); transform: translateY(-1px); }
.case:hover .more.btn svg { transform: translateX(3px); }

/* ---------- Industry page: client reviews grid ---------- */
.ind-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ind-reviews .r-card, .ind-reviews .r-card.r-wide { flex: none; width: auto; }
@media (max-width: 1000px) { .ind-reviews { grid-template-columns: minmax(0, 1fr); } }
.ba-wrap[hidden] { display: none !important; }

/* ---------- About: global presence map ---------- */
/* Muted world silhouette, served countries in a faint yellow tint, small yellow pins.
   Each pin softly glows in turn (west to east), then rests; pins never disappear. */
.global { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.global-copy p { color: var(--muted); margin-top: 12px; max-width: 30em; }
.country-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 20px; }
.country-list li { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 600; color: var(--text); }
.country-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(253,238,28,.14); flex: none; }
.world { position: relative; margin: 0; width: 100%; }
.world img { display: block; width: 100%; height: 100%; }
.pin { position: absolute; width: 0; height: 0; --d: 7s; }
/* Glow ring at the exact location */
.pin::before { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, rgba(253,238,28,.55) 0%, rgba(253,238,28,.18) 45%, rgba(253,238,28,0) 70%);
  opacity: 0; transform: scale(.4); animation: pin-pulse var(--d) ease-out calc(var(--i) * .55s + .6s) infinite; pointer-events: none; }
/* The pin itself: a small teardrop whose tip sits on the location */
.pin-head { position: absolute; left: 0; top: 0; width: 13px; height: 13px; transform: translate(-50%, -100%) translateY(-2px); }
.pin-head::before { content: ""; position: absolute; inset: 0; background: var(--yellow); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.45);
  animation: pin-glow var(--d) ease-in-out calc(var(--i) * .55s + .6s) infinite; }
.pin-head::after { content: ""; position: absolute; left: 50%; top: 42%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #0E0D15; }
@keyframes pin-pulse { 0% { opacity: 0; transform: scale(.4); } 4% { opacity: 1; } 16% { opacity: 0; transform: scale(2.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes pin-glow { 0%, 18%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.45); } 6% { box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 0 12px 2px rgba(253,238,28,.55); } }
/* Country name on hover */
.pin::after { content: attr(data-name); position: absolute; left: 0; top: -30px; transform: translate(-50%, -100%); white-space: nowrap; font-size: .74rem; font-weight: 700; color: var(--ink); background: var(--yellow);
  padding: 4px 9px; border-radius: 999px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.pin:hover::after { opacity: 1; }
.pin:hover { z-index: 2; }
.pin { cursor: default; }
.pin .pin-head { pointer-events: auto; }
@media (max-width: 1000px) {
  .global { grid-template-columns: minmax(0, 1fr); }
  .country-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .country-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pin-head { width: 9px; height: 9px; }
  .pin-head::after { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; }
  .pin::before { left: -7px; top: -7px; width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pin::before, .pin-head::before { animation: none; }
}
@media (max-width: 1000px) {
  .global { gap: 0; }
  .global-copy { display: contents; }
  .global .h2 { order: 1; }
  .global-copy p { order: 2; }
  .world { order: 3; margin-top: 26px; }
  .country-list { order: 4; margin-top: 24px; }
}
/* Country list: round flags instead of bullets */
.country-list li::before { content: none; }
.country-list .flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px rgba(253,238,28,.35), 0 2px 6px rgba(0,0,0,.4); background: #222; }
.country-list .flag-dot { width: 7px; height: 7px; background: var(--yellow); }
.country-list li { gap: 12px; }

/* ---------- About: industry groups with icons and bullets ---------- */
.groups .group-head { display: flex; align-items: center; gap: 12px; }
.groups .group-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: rgba(253,238,28,.1); border: 1px solid rgba(253,238,28,.28); color: var(--yellow); }
.groups .group-ico svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; }
.groups ul { margin-top: 14px; gap: 8px; padding-left: 0; }
.groups li { position: relative; padding-left: 18px; }
.groups li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(253,238,28,.12); }

/* ---------- About intro: founder photo, full square image sized to match the text ---------- */
/* The whole photo is shown (no crop, no stretch). main.js sets --photo to the text block's height,
   so the square photo is exactly as tall as the paragraphs beside it. */
.about-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.about-grid .founder { width: var(--photo, clamp(300px, 34vw, 440px)); max-width: 560px; }
.about-grid .founder-photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; border-radius: var(--r-lg); }
@media (max-width: 1150px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-grid .founder { width: 100%; max-width: 560px; }
  .about-grid .founder-photo { aspect-ratio: 1 / 1; }
}

/* ---------- About: How we work (three promises) ---------- */
.ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.way { position: relative; border-radius: var(--r-lg); padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.way::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, var(--yellow), rgba(253,238,28,0)); opacity: .8; }
.way:hover { transform: translateY(-4px); border-color: rgba(253,238,28,.4); box-shadow: 0 18px 40px -22px rgba(253,238,28,.35); }
.way-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.way-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(253,238,28,.1); border: 1px solid rgba(253,238,28,.3); color: var(--yellow); }
.way-ico svg { width: 24px; height: 24px; stroke-width: 1.8; }
.way-num { font: 800 2.6rem/1 var(--display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.22); }
.way h3 { font-size: 1.25rem; }
.way p { color: var(--muted); }
.way-proof { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: .84rem; font-weight: 700; color: var(--yellow);
  border-top: 1px solid rgba(255,255,255,.08); width: 100%; padding-top: 14px; }
.way-proof svg { width: 16px; height: 16px; stroke-width: 2.4; flex: none; }
@media (max-width: 1000px) { .ways { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .way { transition: none; } .way:hover { transform: none; } }

/* ---------- Founder quote: Hindi translation in a thin line ---------- */
.founder-quote p.quote-hi { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); max-width: 70ch;
  font-family: "Mukta", "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", sans-serif; font-weight: 300; font-style: normal;
  font-size: clamp(1.02rem, 1.45vw, 1.18rem); line-height: 1.75; color: var(--muted); letter-spacing: .005em; }
.founder-quote p, .founder-quote p.quote-hi { max-width: 56rem; }
.hero h1 + .hero-actions { margin-top: clamp(36px, 4vw, 48px); }
.reviews-sec > .section-head.split { flex-wrap: nowrap; } .reviews-sec > .section-head.split > div { flex: 1 1 auto; max-width: 560px; min-width: 0; } @media (max-width: 1000px) { .reviews-sec > .section-head.split { flex-wrap: wrap; } }

/* ---------- Hand-drawn underline in section headings (drawn when scrolled into view) ---------- */
.h2 .scribble { position: relative; white-space: nowrap; }
.h2 .scribble svg { position: absolute; left: -2%; width: 104%; height: auto; bottom: -.24em; overflow: visible; pointer-events: none; }
.h2 .scribble path { fill: none; stroke: var(--yellow); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.h2 .scribble path + path { stroke-width: 2.8; opacity: .9; }
.h2 .scribble.is-drawn path { animation: scribble-draw .3s cubic-bezier(.5,.05,.3,1) .15s 1 forwards; }
.h2 .scribble.is-drawn path + path { animation-duration: .24s; animation-delay: .41s; }
@media (prefers-reduced-motion: reduce) { .h2 .scribble path { stroke-dashoffset: 0; animation: none !important; } }

/* ---------- Rating badges: platform logo in a circle + bold source line ---------- */
.rating small strong { font-weight: 700; color: var(--text); }
.rating small strong + br + strong, .rating small br + strong { font-weight: 700; color: #D9D6E2; }
.rating-logo { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.12); overflow: hidden; }
.rating-logo img { width: 70%; height: 70%; object-fit: contain; }
@media (min-width: 1001px) { .reviews-sec > .section-head.split > .ratings { flex-wrap: nowrap; flex: none; } .reviews-sec > .section-head.split > div { flex: 1 1 0; } }

/* ---------- Industry cards: links aligned on one line at the bottom ---------- */
.ind-grid .ind { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; height: 100%; }
.ind-grid .ind .tags { margin-bottom: 4px; }
.ind-grid .ind .more { margin-top: auto; padding-top: 14px; }
.ind-grid .ind > p { flex: 1 1 auto; }
/* Rating badges with logos: compact and never wrapping */
.rating small { white-space: nowrap; }
.rating:has(.rating-logo) { gap: 11px; padding: 9px 18px 9px 9px; }
.rating .stars { letter-spacing: 1px; }
@media (max-width: 1300px) and (min-width: 1001px) { .rating .stars { font-size: .82rem; } .rating b { font-size: 1.3rem; } }
.reviews-sec > .section-head.split > .ratings { max-width: none; }

/* ---------- How This Works: 01-05 numbering, multi-line copy ---------- */
.steps li::before { content: counter(step, decimal-leading-zero); width: auto; min-width: 44px; height: 36px; padding: 0 12px; border-radius: 999px; font-size: .95rem; letter-spacing: .04em; }
.steps li { display: flex; flex-direction: column; }
.steps b { font-size: 1.08rem; line-height: 1.25; }
.steps p { font-size: .9rem; line-height: 1.55; }
.steps b + p { margin-top: 10px; }
.steps p + p { margin-top: 6px; }
@media (max-width: 1200px) and (min-width: 1001px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li::before { align-self: flex-start; }
.faq-wrap .section-head .btn { white-space: nowrap; padding: 14px 20px; font-size: .95rem; gap: 9px; } @media (max-width: 420px) { .faq-wrap .section-head .btn { font-size: .86rem; padding: 13px 16px; } }
@media (max-width: 1200px) and (min-width: 1001px) { .faq-wrap .section-head .btn { font-size: .84rem; padding: 12px 15px; gap: 8px; } }
@media (max-width: 1100px) and (min-width: 1001px) { .faq-wrap .section-head .btn { font-size: .76rem !important; padding: 11px 13px !important; gap: 7px; } .faq-wrap .section-head .btn svg { width: 17px; height: 17px; } }
.nowrap { white-space: nowrap; }

/* ---------- Industry cards: tagline + description ---------- */
.ind-grid .ind .ind-tagline { color: var(--text); font-weight: 600; font-size: 1rem; line-height: 1.45; flex: none; }
.ind-grid .ind > p.ind-desc { color: var(--muted); font-size: .93rem; }
.ind-grid .ind .more span { display: inline-block; transition: transform .2s ease; }
.ind-grid .ind:hover .more span { transform: translateX(4px); }
#industries .section-head { max-width: 820px; }

/* ---------- Services grid: bold tagline above the description ---------- */
.service .svc-tagline { color: var(--text); font-weight: 600; margin-top: 6px; line-height: 1.45; }
.service .svc-tagline + p { margin-top: 6px; }

/* ---------- Homepage services: click name/tagline to slide the description down ---------- */
.svc-acc .svc-h { margin: 0; font-size: inherit; }
.svc-acc .svc-toggle { all: unset; display: block; cursor: pointer; width: 100%; }
.svc-acc .svc-toggle:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 6px; }
.svc-acc .svc-name { display: block; font: 700 1.32rem/1.25 var(--display); font-stretch: 92%; color: var(--text); }
.svc-acc .svc-tagline { display: block; margin-top: 6px; color: var(--text); font-weight: 600; line-height: 1.45; }
.svc-acc .svc-chev { display: inline-block; width: 8px; height: 8px; margin-left: 10px; border-right: 2px solid var(--yellow); border-bottom: 2px solid var(--yellow); transform: translateY(-3px) rotate(45deg); transition: transform .3s ease; }
.svc-acc.open .svc-chev { transform: translateY(1px) rotate(-135deg); }
.svc-acc .svc-desc > div { overflow: hidden; }
.svc-acc .svc-desc p { color: var(--muted); margin-top: 8px; max-width: 34em; }
/* Collapsed only once JS is running, so the text is never lost without it */
.js .svc-acc .svc-desc { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .38s ease, opacity .3s ease; }
.js .svc-acc.open .svc-desc { grid-template-rows: 1fr; opacity: 1; }
.svc-acc .go { color: inherit; text-decoration: none; }
.svc-acc .go:hover { background: var(--yellow); border-color: var(--yellow); }
.svc-acc .go:hover svg { stroke: var(--ink); }
@media (prefers-reduced-motion: reduce) { .js .svc-acc .svc-desc, .svc-acc .svc-chev { transition: none; } }

/* ---------- About: closing line under the team ---------- */
.team-note { margin: 32px auto 0; max-width: 64rem; text-align: center; color: var(--text); font: 600 clamp(1rem, 1.6vw, 1.15rem)/1.5 var(--display); }
.page-hero + .about-grid { padding-top: 44px; }

/* ---------- About: closing line under the country list ---------- */
.global-copy p.global-note { margin-top: 26px; color: var(--text); font: 600 1.02rem/1.5 var(--display); max-width: none; }
@media (max-width: 1000px) { .global-copy p.global-note { order: 5; margin-top: 22px; } }
@media (min-width: 1001px) { .global { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .global .h2 { font-size: clamp(1.75rem, 2.7vw, 2.35rem); } }
@media (min-width: 1001px) { .global .h2 { font-size: clamp(1.6rem, 2.35vw, 2.05rem); } .global-copy p.global-note { font-size: .95rem; } }
/* About map: larger on desktop */
@media (min-width: 1001px) {
  .global { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(20px, 3vw, 40px); }
  .global .world { width: 114%; max-width: none; margin-left: -4%; }
}
@media (max-width: 1000px) { .global .world { width: 108%; margin-left: -4%; } }
@media (min-width: 1001px) and (max-width: 1399px) { .global .world { width: 107%; margin-left: -4%; } }
@media (min-width: 1001px) { .global .h2 { font-size: clamp(1.45rem, 2.1vw, 1.85rem); } }
/* Homepage tagline: on narrow screens the cities sit on their own line (no stray dot) */
.tag-loc { white-space: nowrap; }
@media (max-width: 600px) { .hero .tagline .tag-sep { display: none; } .hero .tagline .tag-loc { display: block; margin-top: 2px; } }

/* ---------- Homepage collage: images crossfade inside each tile ---------- */
.collage .work { position: relative; }
.collage .work .cl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease, transform .5s ease; }
.collage .work .cl-img.is-on { opacity: 1; }
.collage .work:hover .cl-img { transform: scale(1.04); }
.collage .work .play { z-index: 2; transition: opacity .6s ease; }
.collage .work:not(.is-video) .play { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .collage .work .cl-img { transition: none; } }

/* =========================================================
   Type system — three weights, each with one job
   600  headings, titles, actions (buttons, links)
   500  labels and UI (eyebrows, roles, chips, nav, FAQ)
   400  reading text (paragraphs, taglines, descriptions)
   Hierarchy comes from size, colour and spacing, not from heavier weights.
   ========================================================= */
:root { --w-head: 600; --w-ui: 500; --w-body: 400; }
b, strong { font-weight: var(--w-head); }

/* Display headings */
h1, h2, h3, h4 { font-weight: var(--w-head); }
.page-hero h1, .not-found h1 { font-weight: var(--w-head); letter-spacing: -.03em; }
.hero h1 { font-weight: 800; letter-spacing: -.035em; } /* homepage hero headline keeps its original Extra Bold */
.h2, .section-head h2, .cta h2, .global .h2,
.case-body .prose h2, .case-logo .prose h2, .case-result .prose h2 { font-weight: var(--w-head); letter-spacing: -.028em; }

/* Card, panel and list titles */
.service h3, .ind h3, .case h3, .case-feature h3, .way h3, .h3x, .steps b, .pain h3, .values h3,
.groups h3, .panel h2, .panel h3, .trust-title, .svc-acc .svc-name, .team b, .r-name, .menu-title,
.footer h4, .ba figcaption b, .lightbox figcaption b, .work figcaption b, .palette b, .post-meta b, .card-lines b,
.channel b, .ticks li b { font-weight: var(--w-head); }

/* Numbers and decorative glyphs */
.facts b, .b5 b, .b5 span strong, .rating b, .r-av-i, .qmark, .founder-quote .qmark { font-weight: var(--w-head); }

/* Actions */
.btn, .link, .ind .more, .case .more, .way-proof, .skip { font-weight: var(--w-head); }

/* Labels and UI */
.tagline { font-weight: var(--w-ui); letter-spacing: .01em; }
.nav-links a:not(.btn), .nav-links .sub-toggle { font-weight: var(--w-ui); }
summary { font-weight: var(--w-ui); }
.team .role, .r-role, .case small, .proof-menu em,
.chip, .opt span, .seg span, .cat span, .filter-row > span, .related a, .cities span, .case-svcs a,
.country-list li, .case-facts dd, .form-status, .ba-tag, .bento .tag, .pin::after { font-weight: var(--w-ui); }
.form legend, .field > label, .sub-title, .rating small strong,
.rating small strong + br + strong, .rating small br + strong { font-weight: var(--w-head); }
.team-note, .global-copy p.global-note { font-weight: var(--w-ui); }

/* Reading text: secondary lines step down so the titles above them lead */
.service .svc-tagline, .svc-acc .svc-tagline, .ind-grid .ind .ind-tagline { font-weight: var(--w-body); }
.r-company { font-weight: var(--w-body); }

/* ---------- Quote form: budget cards (range left, tier right) ---------- */
.form fieldset.budget { gap: 12px; }
.buds { display: grid; gap: 10px; }
.bud { position: relative; display: block; }
.bud input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.bud-box { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 13px 16px; border-radius: var(--r-sm); border: 1px solid var(--edge); background: rgba(255,255,255,.04); transition: background .15s, border-color .15s, box-shadow .15s; }
.bud-dot { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #CFCDD6; transition: background .15s, border-color .15s; }
.bud-r { flex: 1; min-width: 0; font-size: 1rem; font-weight: 500; color: var(--text); }
.bud-t { flex: none; text-align: right; font-size: .8rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.bud:hover .bud-box { border-color: var(--edge-top); background: rgba(255,255,255,.07); }
.bud input:checked + .bud-box { background: #F6F5EA; border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow), 0 10px 26px -16px rgba(253,238,28,.55); }
.bud input:checked + .bud-box .bud-r { color: var(--ink); }
.bud input:checked + .bud-box .bud-t { color: #7D6C00; font-weight: 600; }
.bud input:checked + .bud-box .bud-dot { background: transparent; border: 1.5px solid #7D6C00; }
.bud input:checked + .bud-box .bud-dot::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border-right: 1.5px solid #7D6C00; border-bottom: 1.5px solid #7D6C00; transform: rotate(45deg); }
.bud input:focus-visible + .bud-box { outline: 2px solid var(--yellow); outline-offset: 2px; }
@media (max-width: 420px) { .bud-box { gap: 10px; padding: 12px 13px; } .bud-r { font-size: .94rem; } .bud-t { font-size: .74rem; } }
@media (prefers-reduced-motion: reduce) { .bud-box, .bud-dot { transition: none; } }
.bud-r { white-space: nowrap; }
@media (max-width: 420px) { .bud-box { gap: 9px; padding: 12px; } .bud-r { font-size: .9rem; } .bud-t { font-size: .72rem; white-space: normal; line-height: 1.25; max-width: 7.5em; } }
.form fieldset.budget { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 380px) { .budget .seg span { padding: 7px 11px; } }

/* ---------- Get a quote: form on the left, "What happens next" column on the right ---------- */
.quote-side { display: grid; gap: 16px; align-content: start; }
.quote-side > .channels { margin-top: 0 !important; }
@media (min-width: 1001px) {
  .contact-grid.quote-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .quote-side { position: sticky; top: 100px; }
}
/* Side and form headings share the "Trusted by 200+ brands" size */
.quote-side .panel h2, .quote-grid fieldset[data-required=services] > legend { font-size: 1.3rem; line-height: 1.2; }
.quote-grid fieldset[data-required=services] > legend small { font-size: .8rem; }

/* ---------- Quote form: budget dropdown (button + list, keeps range and tier on one row) ---------- */
.bud-dd { position: relative; }
.bud-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 13px 40px 13px 14px; text-align: left; cursor: pointer;
  font: 500 1rem/1.4 var(--body); color: rgba(180,177,194,.75); background: rgba(5,5,10,.4); border: 1px solid var(--edge); border-radius: var(--r-sm);
  background-image: linear-gradient(45deg, transparent 50%, var(--yellow) 50%), linear-gradient(135deg, var(--yellow) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; transition: border-color .2s, background-color .2s; }
.bud-btn:hover { border-color: var(--edge-top); }
.bud-btn[aria-expanded="true"], .bud-btn:focus-visible { outline: none; border-color: var(--yellow); background-color: rgba(5,5,10,.55); }
.bud-btn.has-value { color: var(--text); }
.bud-btn-r { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bud-btn-t { flex: none; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.bud-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); gap: 4px; padding: 6px; border-radius: var(--r-md); border: 1px solid var(--edge);
  background: #1B1A24; box-shadow: 0 24px 50px -18px rgba(0,0,0,.75); }
.bud-list[hidden] { display: none; }
.bud-list .bud-box { min-height: 46px; padding: 11px 12px; border-color: transparent; background: transparent; }
.bud-list .bud:hover .bud-box { background: rgba(255,255,255,.07); border-color: transparent; }
.bud-list .bud-dot { visibility: hidden; }
.bud-list .bud input:checked + .bud-box .bud-dot { visibility: visible; }
.bud-list .bud input:checked + .bud-box { box-shadow: none; }
.bud-list .bud input:focus-visible + .bud-box { outline: 2px solid var(--yellow); outline-offset: -2px; }
@media (max-width: 420px) { .bud-btn { gap: 9px; padding-left: 12px; } .bud-btn-r { font-size: .94rem; } .bud-btn-t { font-size: .72rem; } }
@media (max-width: 420px) { .bud-list .bud-t { max-width: none; flex: 0 1 auto; } .bud-list .bud-box { padding: 10px; gap: 8px; } }
@media (max-width: 420px) { .bud-list .bud-r { flex: none; } .bud-list .bud-t { flex: 1 1 auto; min-width: 0; white-space: normal; } }

@media (max-width: 420px) { .bud-btn-r { flex: none; } .bud-btn-t { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: right; line-height: 1.2; } }
/* Quote form spacing: a little air under "What do you need?", note sits close under the button */
.quote-grid fieldset[data-required=services] > legend { margin-bottom: 12px; }
.quote-grid .form-status:empty { min-height: 0; height: 0; overflow: hidden; }
.quote-grid .form-status:empty + .form-note { margin-top: -28px; }
.quote-grid .form-status + .form-note { margin-top: -8px; }
/* Details panel: tighter tabs and chips so the panel stays compact */
.svc-tab { padding: 5px 11px; font-size: .8rem; }
@media (max-width: 600px) {
  .svc-detail { padding: 12px; }
  .svc-tabs { gap: 5px; padding-bottom: 10px; margin-bottom: 12px; }
  .svc-panes .opts { gap: 6px; }
  .svc-panes .opt-sm span { padding: 6px 10px; font-size: .78rem; }
}

/* ---------- Case studies without project photos yet: title card in place of a cover image ---------- */
.case-tcover { position: relative; display: grid; align-content: end; justify-items: start; gap: 4px; aspect-ratio: 16 / 9; padding: clamp(20px, 3vw, 32px); overflow: hidden;
  background: radial-gradient(120% 90% at 88% 8%, rgba(253,238,28,.20), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(75,63,176,.35), transparent 60%), linear-gradient(140deg, #1D1C27, #0F0E16); }
.case-tcover::after { content: ""; position: absolute; right: clamp(18px, 4vw, 44px); top: clamp(18px, 4vw, 40px); width: 34%; aspect-ratio: 3 / 4; border-radius: 6px 14px 14px 6px;
  border: 1px solid rgba(253,238,28,.35); box-shadow: inset 10px 0 0 rgba(253,238,28,.10); transform: rotate(6deg); opacity: .7; }
.tc-k { color: var(--yellow); font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.tc-t { position: relative; z-index: 1; font: 600 clamp(2.2rem, 5vw, 3.6rem)/1 var(--display); letter-spacing: -.03em; color: var(--text); }
.tc-s { position: relative; z-index: 1; color: var(--muted); font-size: clamp(.95rem, 1.4vw, 1.1rem); font-style: italic; }
.tc-stat { margin-top: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(253,238,28,.55); color: var(--text); font-size: .8rem; font-weight: 500; background: rgba(14,13,21,.5); }
.case-cover-type .case-tcover { aspect-ratio: 21 / 8; border-radius: var(--r-lg); }
.case-cover-type .case-tcover::after { width: 16%; }
.case-cover-type .tc-t { font-size: clamp(2.6rem, 7vw, 5rem); }
@media (max-width: 600px) { .case-cover-type .case-tcover { aspect-ratio: 4 / 3; } .case-cover-type .case-tcover::after { width: 30%; } }

/* Story-style case study pieces */
.case-lead { font: 500 clamp(1.08rem, 1.6vw, 1.25rem)/1.45 var(--display); color: var(--text); margin-bottom: 14px; max-width: 40ch; }
.section-head .case-lead { margin: 10px 0 0; }
.case-stat { display: grid; place-items: center; text-align: center; gap: 6px; padding: clamp(28px, 4vw, 44px); }
.case-stat b { font: 600 clamp(3rem, 7vw, 4.6rem)/1 var(--display); letter-spacing: -.035em; color: var(--yellow); }
.case-stat span { color: var(--muted); font-size: 1rem; }
.case-quote { margin: 0; border-radius: var(--r-lg); padding: clamp(22px, 3.5vw, 36px); display: grid; gap: 18px; }
.case-quote blockquote.quote { padding: 0; }
.case-quote blockquote.quote p + p { margin-top: 12px; }
.case-quote figcaption { display: flex; align-items: center; gap: 14px; }
.case-quote figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.case-quote figcaption span { display: grid; gap: 2px; }
.case-quote figcaption b { font-size: 1.02rem; }
.case-quote figcaption small { color: var(--muted); font-size: .86rem; }

/* ---------- Phone & touch refinements (mobile audit) ---------- */
/* Open mobile menu: keep the floating WhatsApp button out of the way; fit the menu to the visible screen */
html.menu-open .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 1000px) { .nav-links { max-height: calc(100dvh - 110px); overscroll-behavior: contain; } }
/* Bigger arrow buttons for touch screens */
@media (pointer: coarse) { .service .go { width: 40px; height: 40px; } }
@media (max-width: 600px) {
  /* Homepage "What We Design": keep the arrow so every service page is one tap away on phones */
  .service.svc-acc { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 14px; }
  .service.svc-acc .go { display: grid; margin-top: 0; }
  /* Hero tiles: labels readable on small screens */
  .bento .tag { font-size: .75rem; padding: 4px 9px; }
  .b5 span { font-size: .75rem; }
  /* Footer: link columns share the width evenly, and links get a taller tap area */
  .footer-inner { grid-template-columns: auto auto; justify-content: space-between; column-gap: 16px; }
  .footer-inner > div:last-child { grid-column: 1 / -1; }
  .footer ul a { font-size: .86rem; }
  .footer ul { gap: 1px; }
  .footer li a { display: inline-block; padding: 4px 0; }
}
/* Get a quote: side column never wider than the screen; rating badges compact on narrow phones */
.quote-side { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 380px) {
  .quote-trust .rating:has(.rating-logo) { gap: 8px; padding: 8px 14px 8px 8px; }
  .quote-trust .rating b { font-size: 1.2rem; }
  .quote-trust .rating .stars { font-size: .74rem; letter-spacing: 0; }
}
/* Contact cards: long values (email, hours) wrap instead of pushing the card past the screen edge */
.channels { grid-template-columns: minmax(0, 1fr); }
.channel { grid-template-columns: 44px minmax(0, 1fr); }
.channel b { overflow-wrap: anywhere; }

/* Portfolio page: justified gallery. Every image keeps its own shape (never cropped); tiles in a row share one
   height and grow in proportion to their aspect ratio (--ar = width / height), so rows fill the width edge to edge.
   No captions, corners or borders; titles still show in the lightbox. */
.portfolio-sec .work-grid.gallery { display: flex; flex-wrap: wrap; gap: 6px; --row: 220px; }
.portfolio-sec .work-grid.gallery::after { content: ""; flex: 10000 1 0; }   /* last row keeps natural size instead of stretching */
.portfolio-sec .gallery .work { flex: var(--ar, 1.333) 1 calc(var(--ar, 1.333) * var(--row)); aspect-ratio: var(--ar, 1.333); width: auto; min-width: 0;
  border: 0; border-radius: 0; background: var(--night-3); }
.portfolio-sec .gallery .work img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; display: block; }
.portfolio-sec .gallery .work figcaption { display: none; }
@media (max-width: 1000px) { .portfolio-sec .work-grid.gallery { --row: 170px; gap: 5px; } }
@media (max-width: 600px)  { .portfolio-sec .work-grid.gallery { --row: 120px; gap: 4px; } }
/* Portfolio: social media industry filter (second, smaller row) */
.filter-row.sub-row { gap: 6px; padding-left: 2px; }
.chip.chip-sm { padding: 6px 13px; font-size: .82rem; }

/* Case study tables (name checks, label system, model range) */
.case-table-wrap { margin: 18px 0 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--edge); border-radius: var(--r-sm); }
.case-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.case-table th, .case-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--edge); }
.case-table thead th { font-weight: var(--w-ui); color: var(--muted); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.03); white-space: nowrap; }
.case-table tbody th { font-weight: var(--w-head); color: var(--text); white-space: nowrap; }
.case-table tbody tr:last-child th, .case-table tbody tr:last-child td { border-bottom: 0; }
.case-table td.ok { color: #7fd99a; }
.case-table td.no { color: var(--muted); }
.case-table.checks td, .case-table.checks thead th { text-align: center; }
.case-table.checks thead th:first-child { text-align: left; }
.case-table tr.pick th, .case-table tr.pick td { background: rgba(253, 238, 28, .08); }
.case-row .prose .case-table-wrap + .form-note { margin-top: 8px; }
@media (max-width: 600px) {
  .case-table { font-size: .84rem; }
  .case-table th, .case-table td { padding: 9px 10px; }
  .case-table tbody th { white-space: normal; }
  .case-table thead th { letter-spacing: 0; font-size: .72rem; }
  .case-table.checks th, .case-table.checks td { padding: 9px 6px; }
  .case-table td.ok span, .case-table td.no span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .case-table td.ok::before { content: "✓"; font-weight: 700; }
  .case-table td.no::before { content: "✕"; }
}

/* ---------- Interactive case study ("story" layout) ---------- */
.story .section.tight { padding-top: clamp(56px, 7vw, 88px); }
.story .section-head { margin-bottom: 26px; }
.story .case-lead { margin-top: 10px; }
.st-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.st-tabs .chip[aria-selected="true"], .st-dot[aria-selected="true"] b { color: var(--ink); }
.st-tabs .chip[aria-selected="true"] { background: var(--yellow); border-color: var(--yellow); }
.st-fig { margin: 0; }
.st-fig img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); background: #fff; }
[data-panel][hidden] { display: none !important; }
[data-panel] { animation: stIn .35s ease; }
@keyframes stIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* brief vs outcome */
.st-brief { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr); gap: 18px; align-items: stretch; }
.st-card { border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); }
.st-card small { color: var(--faint); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.st-card h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 8px 0 10px; }
.st-card p { color: var(--muted); margin: 0; }
.st-card-hi { border-color: rgba(253, 238, 28, .35); }
.st-arrow { display: grid; place-items: center; }
.st-arrow svg { width: 34px; height: 34px; fill: var(--yellow); }
.st-pills { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.st-pills li { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255,255,255,.05); font-size: .9rem; font-weight: var(--w-ui); }

/* before / after slider */
.st-compares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.st-compare { margin: 0; }
.st-compare figcaption { color: var(--muted); font-size: .9rem; padding: 10px 4px 0; }
.cmp { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--edge); background: var(--night-3); user-select: none; touch-action: pan-y; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp .cmp-after { clip-path: inset(0 0 0 var(--pos)); }
.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--yellow); pointer-events: none; }
.cmp-line i { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: var(--yellow); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.cmp-line i::before, .cmp-line i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 6px solid transparent; margin-top: -6px; }
.cmp-line i::before { left: 7px; border-right-color: var(--ink); }
.cmp-line i::after { right: 7px; border-left-color: var(--ink); }
.cmp-tag { position: absolute; top: 12px; padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; pointer-events: none; }
.cmp-tag-b { left: 12px; background: rgba(14,13,21,.78); color: var(--text); }
.cmp-tag-a { right: 12px; background: var(--yellow); color: var(--ink); }
.cmp { cursor: ew-resize; }
.cmp-range { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cmp:focus-within .cmp-line i { outline: 3px solid #fff; outline-offset: 2px; }

/* journey stepper */
.st-journey { border-radius: var(--r-lg); padding: clamp(18px, 3vw, 30px); }
.st-track { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 24px; }
.st-track::before { content: ""; position: absolute; left: 4%; right: 4%; top: 19px; height: 2px; background: var(--edge); }
.st-bar { position: absolute; left: 4%; top: 19px; height: 2px; width: calc(var(--p, 0) * 92%); background: var(--yellow); transition: width .35s ease; }
.st-dot { position: relative; display: grid; justify-items: center; gap: 8px; padding: 0; background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; text-align: center; }
.st-dot span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--night-3); border: 1px solid var(--edge); font-size: .82rem; font-weight: 700; transition: all .25s; }
.st-dot b { font-size: .82rem; font-weight: var(--w-ui); line-height: 1.25; }
.st-dot.done span { background: rgba(253, 238, 28, .18); border-color: rgba(253, 238, 28, .5); color: var(--text); }
.st-dot[aria-selected="true"] span { background: var(--yellow); border-color: var(--yellow); color: var(--ink); transform: scale(1.08); }
.st-dot[aria-selected="true"] b { color: var(--text); }
.st-stage { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 4vw, 44px); align-items: center; }
.st-stage-text small { color: var(--yellow); font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.st-stage-text h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 8px 0 12px; }
.st-stage-text p { color: var(--muted); font-size: 1.05rem; margin: 0; }
.st-stage .st-fig img { aspect-ratio: 4 / 3; object-fit: contain; }
.st-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.st-nav button[disabled] { opacity: .35; pointer-events: none; }

/* text + visual split */
.st-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 60px); align-items: center; }
.st-split.flip .st-text { order: 2; }
.st-text .h2 { margin-bottom: 4px; }
.st-text p { color: var(--muted); max-width: 52ch; margin: 0 0 12px; }
.st-text .case-lead { margin: 6px 0 14px; }
.st-text .case-lead { color: var(--text); }
.st-media { border-radius: var(--r-lg); padding: clamp(14px, 2vw, 20px); margin: 0; }
.st-media .form-note { margin: 12px 2px 0; }

/* naming */
.st-names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.st-names li { padding: 6px 12px; border-radius: 999px; font-size: .86rem; color: var(--faint); border: 1px solid rgba(255,255,255,.08); }
.st-names li.short { color: var(--text); border-color: rgba(253, 238, 28, .45); }
.st-names li.pick { background: var(--yellow); border-color: var(--yellow); color: var(--ink); font-weight: 700; }
.st-legend { display: flex; gap: 16px; margin: 12px 2px 0; font-size: .8rem; color: var(--muted); }
.st-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.st-legend .short::before { border: 1px solid rgba(253, 238, 28, .7); }
.st-legend .pick::before { background: var(--yellow); }
.st-label { margin: 18px 2px 0; font-size: .8rem; color: var(--faint); letter-spacing: .05em; text-transform: uppercase; }
.st-naming > .st-label:first-child { margin-top: 2px; }
.st-naming .case-table-wrap { margin-top: 8px; }
.case-table.marks td span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.case-table.marks td.ok::before { content: "✓"; font-weight: 700; }
.case-table.marks td.no::before { content: "✕"; }
.case-table.marks th, .case-table.marks td { padding: 9px 10px; }

/* hotspots */
.st-hotspots { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.st-ladder { border-radius: var(--r-lg); padding: 10px; position: sticky; top: 100px; }
.st-ladder-in { position: relative; border-radius: var(--r-md); overflow: hidden; background: #fff; }
.st-ladder-in img { display: block; width: 100%; height: auto; }
.st-hot { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border-radius: 50%; border: 0; background: var(--night); color: var(--yellow); font: 700 .85rem/1 var(--body); cursor: pointer; box-shadow: 0 0 0 3px var(--yellow), 0 8px 18px rgba(0,0,0,.35); transition: transform .2s; }
.st-hot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--yellow); opacity: 0; animation: stPulse 2.2s ease-out infinite; }
.st-hot:hover, .st-hot[aria-selected="true"] { transform: scale(1.12); background: var(--yellow); color: var(--ink); }
.st-hot[aria-selected="true"]::after { animation: none; }
@keyframes stPulse { 0% { opacity: .8; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.4); } }
.st-hot-side { border-radius: var(--r-lg); padding: clamp(16px, 2.4vw, 24px); }
.st-hot-panel h3 { font-size: 1.35rem; margin: 4px 0 8px; }
.st-hot-panel p { color: var(--muted); margin: 0 0 16px; }
.st-detail { margin: 0; border-radius: var(--r-md); background: #fff; display: flex; justify-content: center; align-items: center; padding: 10px; }
.st-detail img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(62vh, 560px); object-fit: contain; }
.st-note { margin-top: 12px; }

/* models */
.st-models { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-models li { padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--edge); background: rgba(255,255,255,.04); display: grid; gap: 4px; }
.st-models b { font-size: 1.2rem; font-weight: var(--w-head); }
.st-models span { color: var(--muted); font-size: .92rem; }

/* closing statement */
.st-statement { margin: 0 auto; max-width: 900px; text-align: center; font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: var(--w-head); line-height: 1.25; letter-spacing: -.01em; }
.story .case-result { padding-top: clamp(44px, 6vw, 72px); }

@media (max-width: 1000px) {
  .st-split, .st-hotspots, .st-stage { grid-template-columns: minmax(0, 1fr); }
  .st-split.flip .st-text { order: 0; }
  .st-ladder { position: static; max-width: 520px; width: 100%; justify-self: center; }
  .st-track { grid-template-columns: repeat(7, minmax(78px, 1fr)); overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .st-track::-webkit-scrollbar { display: none; }
  .st-track::before, .st-bar { display: none; }
}
@media (max-width: 760px) {
  .st-brief { grid-template-columns: minmax(0, 1fr); }
  .st-arrow svg { transform: rotate(90deg); width: 28px; height: 28px; }
  .st-compares { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .st-models { grid-template-columns: minmax(0, 1fr); }
  .st-nav { justify-content: space-between; }
  .st-hot { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: .75rem; }
  .st-detail img { max-height: 52vh; }
}
.st-split > *, .st-hotspots > *, .st-stage > * { min-width: 0; }
@media (max-width: 600px) {
  .case-table.marks th, .case-table.marks td { padding: 9px 5px; text-align: center; }
  .case-table.marks thead th { font-size: .62rem; letter-spacing: 0; }
  .case-table.marks th[scope="row"] { text-align: left; padding-left: 10px; font-size: .8rem; }
  .case-table.marks thead th:first-child { text-align: left; padding-left: 10px; }
}
.st-deliv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-top: 18px; }
.st-deliv h4 { margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--yellow); }
.st-deliv .ticks { margin: 0; }
@media (max-width: 420px) { .st-deliv { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Services dropdown: two balanced columns + "All Services" action ---------- */
.sub-mega { min-width: 0; width: max-content; padding: 10px; }
.sub-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 2px 6px; }
.sub-cols a:not(.btn) { width: 100%; }
.sub-foot { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .07); }
.nav-links .sub-foot a.sub-all { justify-content: center; width: 100%; gap: 8px; padding: 11px 12px; border-radius: 10px; color: var(--muted); background: none; }
.nav-links .sub-foot a.sub-all:hover, .nav-links .sub-foot a.sub-all:focus-visible { color: var(--yellow); background: none; }
.nav-links .sub-foot a.sub-all[aria-current="page"] { background: none; color: var(--text); }
.sub-all svg { width: 16px; height: 16px; fill: currentColor; transition: transform .2s ease; }
.sub-all:hover svg, .sub-all:focus-visible svg { transform: translateX(4px); }
@media (max-width: 1000px) {
  .sub-mega { width: auto; padding: 8px; }
  .sub-cols a:not(.btn) { white-space: normal; }
}
@media (max-width: 560px) {
  .sub-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}
@media (prefers-reduced-motion: reduce) { .sub-all svg { transition: none; } }

/* ---------- Services dropdown: icons + light-sweep shimmer on hover/focus ---------- */
.sub-cols a:not(.btn) { position: relative; overflow: hidden; isolation: isolate; gap: 10px; justify-content: flex-start; transition: color .35s ease, background .35s ease; }
.sub-ic { flex: 0 0 auto; width: 17px; height: 17px; color: var(--faint); opacity: .85; transition: color .45s ease .08s, opacity .45s ease .08s; }
.sub-cols a:not(.btn) > span { position: relative; z-index: 1; }
.sub-cols a:not(.btn)::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 32%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 28%, rgba(255,255,255,.24) 50%, rgba(255,255,255,.05) 72%, rgba(255,255,255,0) 100%);
  mix-blend-mode: plus-lighter; opacity: 0; transform: translateX(-140%) skewX(-18deg);
  transition: opacity .25s ease, transform 0s linear .25s;
}
.sub-cols a:not(.btn):hover::after, .sub-cols a:not(.btn):focus-visible::after {
  opacity: 1; transform: translateX(360%) skewX(-18deg);
  transition: transform .95s cubic-bezier(.45, .05, .3, 1), opacity .15s ease;
}
.sub-cols a:not(.btn):hover .sub-ic, .sub-cols a:not(.btn):focus-visible .sub-ic, .sub-cols a[aria-current="page"] .sub-ic { color: var(--yellow); opacity: 1; }
.sub-cols a:not(.btn):focus-visible { color: var(--text); background: rgba(255,255,255,.08); outline: 2px solid rgba(253, 238, 28, .55); outline-offset: -2px; }
@media (max-width: 1000px) { .nav-links .sub-cols a:not(.btn) { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) {
  .sub-cols a:not(.btn)::after { display: none; }
  .sub-ic, .sub-cols a:not(.btn) { transition: none; }
}

/* ---------- Service page: mixed-size work tiles (mosaic) ---------- */
.work-grid.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 14.5vw, 205px); grid-auto-flow: row dense; gap: 12px; }
.mosaic .work { height: 100%; }
.mosaic .work img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; transition: transform .5s ease; }
.mosaic .work:hover img { transform: scale(1.03); }
.mosaic .b-big { grid-column: span 2; grid-row: span 2; }
.mosaic .b-wide { grid-column: span 2; }
.mosaic .b-tall { grid-row: span 2; }
@media (max-width: 600px) {
  .work-grid.mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 118px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .mosaic .work img { transition: none; } }