/* self-hosted fonts (Manan, 27 Jul): Nourd headings, Noto Sans body, Libre Baskerville accents */
@font-face{font-family:'Nourd';src:url('fonts/nourd_regular.ttf');font-weight:400;font-display:swap}
@font-face{font-family:'Nourd';src:url('fonts/nourd_medium.ttf');font-weight:500;font-display:swap}
@font-face{font-family:'Nourd';src:url('fonts/nourd_semi_bold.ttf');font-weight:600;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('fonts/NotoSans-Regular.ttf');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('fonts/NotoSans-Medium.ttf');font-weight:500;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('fonts/NotoSans-SemiBold.ttf');font-weight:600;font-display:swap}
@font-face{font-family:'Libre Baskerville';src:url('fonts/LibreBaskerville.ttf');font-weight:400;font-display:swap}
@font-face{font-family:'Libre Baskerville';src:url('fonts/LibreBaskerville-Italic.ttf');font-weight:400;font-style:italic;font-display:swap}
/* Sahil Sheth · design system from "Sahil Design Style.jpg" (Mistral consulting reference):
   monochrome black/white, Inter, sentence case, light-weight display type, centered cinematic hero,
   watermark words, huge light stats, black feature sections. */
:root{
  --bg:#ffffff; --ink:#0a0a0a; --ink-soft:#3c3c3c; --mut:#6f6f6f;
  --line:#e8e8e8; --line-dark:rgba(255,255,255,.16);
  --dark:#0a0a0a; --dark-soft:#c9c9c9; --dark-mut:#9a9a9a;
  --r:10px; --r-lg:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Noto Sans',-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:'Nourd',sans-serif;font-weight:500;letter-spacing:-.015em;line-height:1.14}
h1{font-size:clamp(38px,4.8vw,64px)}
h2{font-size:clamp(30px,3.6vw,46px)}
h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
/* 8 Sep 2026: 100px top + 100px bottom meant 200px of dead space at every seam.
   Manan: "the website is too long on many of the pages", "too many empty white
   spaces", "not section after section after section. It should flow into each
   other". 64px halves the seam without cramping the content. */
section{padding:64px 0}
.lead{color:var(--mut);font-size:16.5px;max-width:600px}
.label{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--mut);margin-bottom:18px;display:block}
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:8px;padding:13px 24px;font-weight:500;font-size:14.5px;transition:transform .2s ease,opacity .2s ease;cursor:pointer}
.btn:hover{transform:translateY(-1px);opacity:.92}
button.btn{border:none;font:inherit;cursor:pointer}
.bookcard{cursor:pointer}
.btn-white{background:#fff;color:#0a0a0a}
.btn-black{background:#0a0a0a;color:#fff}
.btn-outline{border:1px solid var(--line);color:inherit}
.dark .btn-outline{border-color:var(--line-dark)}
.btn-wa{background:#25D366;color:#04220f}

/* dark sections */
.dark{background:var(--dark);color:#fff}
.dark .lead{color:var(--dark-mut)}
.dark .label{color:var(--dark-mut)}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
nav.on-hero{color:#fff}
nav.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);color:var(--ink);border-color:var(--line)}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px}
.nav-links{display:flex;gap:22px;font-size:13.5px;font-weight:500}
/* QA SS-04 (18 Sep 2026): opacity used to sit on .nav-links itself. Opacity on an
   ancestor applies to the WHOLE subtree, so the absolutely-positioned .mega panel
   inherited it and rendered 85% transparent with the page showing through. Keep the
   dimming on the top-level links only, never on the container. */
.nav-links>a,.nav-links>.dd>a{opacity:.85}
.nav-links>a:hover,.nav-links>.dd>a:hover{opacity:1}
.wordmark{font-weight:600;font-size:17px;letter-spacing:.32em;text-transform:uppercase;text-align:center}
.nav-right{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.nav-cta{border:1px solid currentColor;border-radius:8px;padding:9px 18px;font-size:13px;font-weight:500;opacity:.9}
.nav-cta:hover{opacity:1}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none;color:inherit}
.hamburger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px}
.mobile-nav{display:none;position:fixed;inset:0;top:64px;background:#fff;color:var(--ink);z-index:50;padding:26px;overflow-y:auto}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:15px 4px;border-bottom:1px solid var(--line);font-weight:500;font-size:16px}
@media(max-width:960px){.nav-links,.nav-cta{display:none}.hamburger{display:flex}.nav-in{grid-template-columns:auto 1fr auto}.wordmark{text-align:left;letter-spacing:.22em}}

/* ===== HERO (centered, Mistral style) ===== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;justify-content:center;text-align:center;padding:0 0 90px;color:#fff}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:saturate(.85) contrast(1.03)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.42) 0%,rgba(10,10,10,.18) 40%,rgba(10,10,10,.68) 82%,rgba(10,10,10,.85) 100%)}
.hero-in{position:relative;z-index:2;max-width:820px;padding:0 24px}
.hero h1{font-weight:500;margin-bottom:20px}
.hero-sub{color:rgba(255,255,255,.82);font-size:16.5px;max-width:520px;margin:0 auto 30px}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:700px){.hero{padding-bottom:70px;min-height:92svh}.hero-bg img{object-position:50% 14%}}

/* brand strip */
.brands{border-bottom:1px solid var(--line);padding:30px 0}
.brands .row{display:flex;gap:44px;justify-content:center;flex-wrap:wrap}
.brands span{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#b9b9b9;white-space:nowrap}

/* about with watermark */
.about{position:relative;overflow:hidden}
.watermark{position:absolute;left:-1%;top:38%;transform:translateY(-50%);font-size:clamp(120px,22vw,300px);font-weight:600;letter-spacing:-.04em;color:#f5f5f5;line-height:1;user-select:none;pointer-events:none;white-space:nowrap}
.about-in{position:relative;display:grid;grid-template-columns:1fr 1.2fr;gap:40px}
.about-txt{grid-column:2;font-size:clamp(20px,2.2vw,27px);font-weight:500;letter-spacing:-.02em;line-height:1.45;color:var(--ink)}
@media(max-width:820px){.about-in{grid-template-columns:1fr}.about-txt{grid-column:1}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:20px 0 0}
.stats b{display:block;font-size:clamp(40px,4.6vw,64px);font-weight:500;letter-spacing:-.03em;line-height:1}
.stats span{font-size:13px;color:var(--mut);margin-top:10px;display:block}
@media(max-width:700px){.stats{grid-template-columns:1fr 1fr;gap:36px 20px}}

/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px -22px rgba(0,0,0,.25)}
.dark .card{background:#141414;border-color:rgba(255,255,255,.09)}
.dark .card .lead{color:var(--dark-mut)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.num{font-size:13px;color:var(--mut);font-weight:600;margin-bottom:14px;display:block}
.dark .num{color:var(--dark-mut)}

.sec-head{max-width:720px;margin-bottom:30px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{color:var(--mut);margin-top:16px;font-size:16px}
.dark .sec-head p{color:var(--dark-mut)}

/* image feature cards (problems / universe) */
.feat{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:340px;display:flex;align-items:flex-end;border:1px solid rgba(255,255,255,.08)}
.feat img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9);transition:transform .5s ease}
.feat:hover img.bg{transform:scale(1.045)}
.feat .cc{position:relative;padding:26px;width:100%;background:linear-gradient(to top,rgba(10,10,10,.88),transparent)}
.feat .role{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.feat h3{font-size:21px;font-weight:600;margin:6px 0 6px;color:#fff}
.feat p{font-size:14px;color:rgba(255,255,255,.75)}

/* timeline */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px}
.tl-step{border-top:1px solid var(--line);padding-top:20px}
.dark .tl-step{border-color:var(--line-dark)}
.tl-step .yr{font-size:30px;font-weight:500;letter-spacing:-.02em}
.tl-step h3{margin:10px 0 8px;font-size:15.5px}
.tl-step p{font-size:14px;color:var(--mut);line-height:1.55}
.dark .tl-step p{color:var(--dark-mut)}
@media(max-width:900px){.tl{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tl{grid-template-columns:1fr}}

/* flow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:46px;counter-reset:fl}
.flow-step{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;text-align:left;background:#fff}
.flow-step .fnum{font-size:13px;color:var(--mut);font-weight:600}
.flow-step h3{margin:12px 0 8px}
.flow-step p{font-size:14px;color:var(--mut);line-height:1.55}
@media(max-width:980px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.flow{grid-template-columns:1fr}}

/* work wall */
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.wall a{border-radius:var(--r);overflow:hidden;position:relative;display:block}
.wall img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;transition:transform .45s ease}
.wall a:hover img{transform:scale(1.05)}
.wall .wide{grid-column:span 2}
.wall .wide img{aspect-ratio:2/1}
@media(max-width:820px){.wall{grid-template-columns:1fr 1fr}}

/* bts strip */
.bts{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.bts::-webkit-scrollbar{height:6px}
.bts::-webkit-scrollbar-thumb{background:#333;border-radius:3px}
.bts img{height:300px;width:auto;border-radius:var(--r);scroll-snap-align:start;flex:none}
@media(max-width:700px){.bts img{height:210px}}

/* reels (hospitality ad videos) */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.reel{margin:0}
.reel video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--line);background:#000;display:block}
.reel figcaption{margin-top:12px;font-size:13.5px;font-weight:500;color:var(--ink-soft)}
@media(max-width:820px){.reels{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.reel{flex:0 0 74%;scroll-snap-align:start}}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:20px 4px}
.faq details{transition:border-color .2s ease}
.faq summary{font-weight:500;cursor:pointer;font-size:16.5px;letter-spacing:-.01em;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::after{content:"";flex:none;width:13px;height:13px;margin-top:7px;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;opacity:.45;transition:transform .25s ease,opacity .2s ease}
.faq details[open] summary::after{transform:rotate(90deg);background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat;opacity:.8}
.faq summary:hover::after{opacity:.9}
.faq p{margin-top:12px;color:var(--mut);font-size:15px;max-width:680px}
.dark .faq details{border-color:var(--line-dark)}
.dark .faq p{color:var(--dark-mut)}

/* cta */
.cta-band{background:var(--dark);color:#fff;border-radius:20px;padding:88px 40px;text-align:center}

/* footer */
footer{background:var(--dark);color:var(--dark-mut);padding:60px 0 32px;font-size:14px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
footer h4{color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
footer a{display:block;padding:4px 0;color:var(--dark-mut)}
footer a:hover{color:#fff}
footer .base{border-top:1px solid var(--line-dark);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px}
footer .wordmark{text-align:left;color:#fff}
@media(max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* inner pages */
.page-hero{padding:150px 0 60px}
.page-hero .lead{margin-top:18px}
.breadcrumbs{font-size:12.5px;color:var(--mut);margin-bottom:18px;font-weight:500}
.kicker{font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:18px;display:inline-block}
.grad-text{font-style:normal}
.prose{max-width:720px;margin:0 auto;font-size:16.5px;color:var(--ink-soft)}
.prose h2{font-size:25px;margin:40px 0 14px;font-weight:600}
.prose p{margin-bottom:18px}
.chip{display:inline-block;font-size:12.5px;font-weight:500;padding:6px 14px;border-radius:999px;margin:0 6px 8px 0;border:1px solid var(--line);color:var(--ink-soft)}
.chip-grad{background:var(--dark);color:#fff;border-color:var(--dark)}
.soft{background:#fafafa;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ===== v6 ===== */
/* hero: copy left, cutout right. Two real grid columns, so the photo can never
   paint over the lead paragraph (feedback 16 Aug 00:00). Ring removed (00:24). */
.hero-lite{position:relative;background:#f4f3f0;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-lite .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:end;min-height:90svh;padding-top:120px}
.hero-lite .hero-copy{padding-bottom:84px;max-width:600px}
.hero-lite .label{margin-bottom:16px}
.hero-lite h1{font-size:clamp(34px,4.6vw,58px);max-width:15ch;line-height:1.06}
.hero-lite .lead{margin:22px 0 30px;max-width:47ch}
.hero-lite .hero-ctas{justify-content:flex-start}
.hero-cut{position:relative;align-self:end;height:min(76svh,640px);display:flex;align-items:flex-end;justify-content:center;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 92%,transparent 100%);mask-image:linear-gradient(to bottom,#000 92%,transparent 100%)}
.hero-cut img{height:100%;width:100%;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 26px 26px rgba(0,0,0,.10))}
@media(max-width:980px){
  .hero-lite .hero-grid{grid-template-columns:1fr;gap:6px;min-height:auto;padding-top:100px;padding-bottom:0}
  .hero-lite .hero-copy{padding-bottom:0;max-width:100%}
  .hero-cut{height:min(48svh,400px);margin-top:18px}
}

/* four-stage flow diagram (connected, not loose cards) */
.flowline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:16px}
.flowline::before{content:"";position:absolute;left:8%;right:8%;top:26px;height:1px;background:var(--line)}
.dark .flowline::before{background:var(--line-dark)}
.fstage{position:relative;padding:0 18px;text-align:left}
.fstage .dot{position:relative;z-index:1;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-family:'Nourd',sans-serif;font-size:15px;font-weight:500;color:var(--ink)}
.dark .fstage .dot{background:var(--dark);border-color:var(--line-dark);color:#fff}
.fstage .arw{position:absolute;top:20px;right:-7px;width:14px;height:14px;border-top:1px solid var(--line);border-right:1px solid var(--line);transform:rotate(45deg)}
.dark .fstage .arw{border-color:var(--line-dark)}
.fstage:last-child .arw{display:none}
.fstage h3{margin:20px 0 8px;font-size:17px}
.fstage p{font-size:13.8px;color:var(--mut);line-height:1.55}
.dark .fstage p{color:var(--dark-mut)}
.fstage:first-child{padding-left:0}
@media(max-width:860px){
  .flowline{grid-template-columns:1fr;gap:0}
  .flowline::before{left:26px;right:auto;top:26px;bottom:26px;width:1px;height:auto}
  .fstage{padding:0 0 30px 0;display:grid;grid-template-columns:52px 1fr;column-gap:20px;align-items:start}
  .fstage h3{margin:12px 0 6px;grid-column:2}
  .fstage p{grid-column:2}
  .fstage .dot{grid-row:1/2}
  .fstage .arw{display:none}
  .fstage:last-child{padding-bottom:0}
}

/* what comes out of the studio */
.studio{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;align-items:stretch}
.studio .lead-shot{border-radius:var(--r-lg);overflow:hidden;position:relative;min-height:420px}
.studio .lead-shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.studio .lead-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 24px 20px;color:#fff;font-size:13.5px;background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0))}
.studio .out{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.studio .out img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-lg)}
@media(max-width:860px){.studio{grid-template-columns:1fr}.studio .lead-shot{min-height:300px}}

/* services teaser cards with thumbs */
.svc-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.svc-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.svc-card .sc{padding:20px 22px 24px;display:flex;flex-direction:column;align-items:flex-start}
.svc-card .sc h3{margin-bottom:8px}

/* journey scroll affordance */
.journey-wrap{position:relative}
.journey-wrap::after{content:"";position:absolute;top:0;bottom:14px;right:0;width:80px;pointer-events:none;background:linear-gradient(to left,#fff,rgba(255,255,255,0))}
.journey-hint{font-size:12.5px;color:var(--mut);margin-top:12px;display:flex;align-items:center;gap:7px}

/* nav dropdown */
.dd{position:relative}
.dd>a::after{content:" \2193";font-size:10px}
.dd-menu{position:absolute;top:100%;left:-14px;padding-top:14px;display:none;min-width:250px}
.dd:hover .dd-menu{display:block}
.dd-menu .in{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 18px 44px -20px rgba(0,0,0,.22)}
.dd-menu a{display:block;padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--ink)}
.dd-menu a:hover{background:#f4f4f2}

/* journey stages */
.journey{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px}
.journey::-webkit-scrollbar{height:6px}
.journey::-webkit-scrollbar-thumb{background:#d9d9d6;border-radius:3px}
.j-card{flex:0 0 320px;scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.j-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.j-card .jc{padding:20px 22px 24px}
.j-card .yr{font-size:26px;font-weight:500;letter-spacing:-.02em}
.j-card h3{margin:6px 0 6px;font-size:15.5px}
.j-card p{font-size:13.5px;color:var(--mut);line-height:1.55}
@media(max-width:600px){.j-card{flex-basis:270px}}

/* with the team */
.crew-shot{border-radius:var(--r-lg);overflow:hidden}
.crew-shot img{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:50% 42%}

/* lets work light */
.lets{border-top:1px solid var(--line);padding:110px 0}
.lets .bulge{color:var(--ink);text-align:left;font-weight:500;letter-spacing:-.035em}
.lets .row{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-top:34px}
.lets .lead{max-width:420px}

/* service page extras */
.answer{border-left:3px solid var(--ink);padding:6px 0 6px 22px;font-size:17.5px;color:var(--ink-soft);max-width:820px}
.svc-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.svc-gallery img{border-radius:var(--r);width:100%;aspect-ratio:1/1;object-fit:cover}
@media(max-width:700px){.svc-gallery{grid-template-columns:1fr 1fr}}

/* v7: client logo wall */
.logos-sec{background:#fff}
/* client logos: wide continuous scroller (feedback 16 Aug 01:19) */
.logo-marquee{display:flex;flex-direction:column;gap:14px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.lm-row{overflow:hidden}
.lm-track{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);width:max-content;
  animation:lm 64s linear infinite;will-change:transform}
.lm-row.rev .lm-track{animation-duration:78s;animation-direction:reverse}
/* every logo sits in a fixed cell so the rhythm is even no matter the logo's
   aspect ratio. Manan, 8 Sep: "not looking clean and spaced out like the logos
   on my website". Previously each img sized itself and the gaps read as random. */
.lmc{flex:none;width:clamp(118px,10.5vw,158px);height:clamp(58px,6.2vw,78px);
     display:grid;place-items:center;padding:0 6px}
.lmc img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
     display:block;transition:transform .25s ease}
/* 10 of the 26 logo files ship with a solid background baked in, so on a white
   strip they read as random black rectangles. Giving those a rounded corner and
   a consistent height turns them into deliberate brand tiles instead.
   Manan, 8 Sep: "certain logos are not looking proper... not clean and spaced out". */
.lmc.boxed img{height:100%;width:auto;max-width:none;border-radius:10px}
.lmc:hover img{transform:scale(1.06)}
.logo-marquee:hover .lm-track{animation-play-state:paused}
@keyframes lm{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.lm-track{animation:none}}

/* the group: five companies (feedback 16 Aug 01:09) */
.group-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1040px){.group-row{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.group-row{grid-template-columns:1fr}}
.group-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gcard{display:flex;flex-direction:column;gap:12px;padding:26px;min-height:196px;justify-content:flex-start;border:1px solid var(--line);
  border-radius:var(--r-lg);background:#fff;transition:transform .25s ease,box-shadow .25s ease}
a.gcard:hover{transform:translateY(-3px);box-shadow:0 16px 40px -22px rgba(0,0,0,.25)}
.glogo{display:flex;align-items:center;height:34px;align-self:flex-start}
.glogo img{height:100%;width:auto;max-width:210px;object-fit:contain;object-position:left center}
.glogo.txt{font-family:'Nourd',sans-serif;font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.gcard p{color:var(--mut);font-size:14.5px}
@media(max-width:980px){.group-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.group-grid{grid-template-columns:1fr}}
/* v7: mega menu */
/* QA SS-04 (18 Sep 2026): was left:50% + translateX(-50%). The Services item sits
   in the nav's left column, so centring a 720px panel on it pushed ~300px off the
   left edge of the screen. Left-anchored and clamped to the viewport instead. */
.mega{position:absolute;top:100%;left:0;padding-top:16px;display:none;width:min(720px,calc(100vw - 32px));z-index:5}
.dd:hover .mega{display:block}
.mega .in{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 22px 54px -22px rgba(0,0,0,.25);display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega a{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px}
.mega a:hover{background:#f4f4f2}
.mega img{width:64px;height:44px;object-fit:cover;border-radius:8px;flex:none}
.mega b{display:block;font-size:13.5px;font-weight:600;font-family:'Nourd',sans-serif;letter-spacing:0}
.mega span{font-size:12px;color:var(--mut);line-height:1.35;display:block}
/* v7: crew merged section */
.crew-logos{display:flex;align-items:center;justify-content:center;gap:clamp(38px,6vw,72px);flex-wrap:wrap;margin-top:52px}
.crew-logos a{display:flex;align-items:center;height:30px;opacity:.92;transition:opacity .25s ease}
.crew-logos a:nth-child(2){height:42px}
.crew-logos a img{height:100%;width:auto;max-width:190px;object-fit:contain}
.crew-logos a:hover{opacity:1}
.serif-acc{font-family:'Libre Baskerville',serif;font-style:italic}

/* rule 28: brand-anchor backlink, live on the client domain only */
.mkc-credit{text-align:center;padding:14px 0 26px;font-size:11.5px;letter-spacing:.01em}
.mkc-credit a{color:var(--dark-mut,#9a9a9a);opacity:.62;transition:opacity .2s ease}
.mkc-credit a:hover{opacity:1}

/* about page: hover a reel and it plays with sound (feedback 8 Sep).
   REWRITTEN 8 Sep: .vplay had no rule at all and .reel.phone was never positioned,
   so the play button sat unstyled below the video and the muted badge positioned
   against the wrong ancestor. That is why Manan saw no sound affordance at all
   ("there is no sound playing on these videos, I don't understand", 06:50). */
.reel.phone{position:relative;transition:transform .3s ease,box-shadow .3s ease}
.reel.phone:hover{transform:translateY(-4px);box-shadow:0 34px 64px -30px rgba(0,0,0,.5)}
.reel.phone video{cursor:pointer}
.vplay{position:absolute;z-index:3;left:50%;top:calc(50% - 16px);transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  color:#0B1326;background:rgba(255,255,255,.94);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
  transition:opacity .25s ease,transform .2s ease,background .2s ease}
.vplay:hover{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.vplay svg{margin-left:3px}
.reel.phone.playing .vplay{opacity:0;pointer-events:none}
/* standing hint so the visitor knows sound exists before they touch anything */
.reel.phone::after{content:"Hover to play with sound";position:absolute;z-index:4;
  left:50%;transform:translateX(-50%);bottom:52px;white-space:nowrap;
  background:rgba(11,19,38,.72);color:#fff;font-size:11.5px;font-weight:500;
  padding:6px 12px;border-radius:100px;backdrop-filter:blur(5px);
  transition:opacity .2s ease;pointer-events:none}
.reel.phone.playing::after{opacity:0}
/* muted fallback badge, only shown when the browser refused sound */
.reel.phone.silent::before{content:"Click for sound";position:absolute;z-index:5;
  left:50%;transform:translateX(-50%);top:14px;
  background:#ffbe2e;color:#0B1326;font-size:11.5px;font-weight:600;letter-spacing:.01em;
  padding:6px 12px;border-radius:100px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
@media(hover:none){
  .reel.phone:hover{transform:none;box-shadow:none}
  .reel.phone::after{content:"Tap to play with sound"}
}

/* about page: the three ads share the hero phone treatment */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;justify-items:center}
.reel.phone{width:100%;max-width:300px}
@media(max-width:820px){.reels{grid-template-columns:1fr;gap:26px}}

/* MK Studios reel rail on the home page (feedback 8 Sep) */
/* Reel strip, 8 Sep 2026. Manan: "needs to be end-to-end... I don't want this
   weird scrolling thing at the bottom. It needs to be from left to right, and it
   needs to be continued scrolling." So: full-bleed, no scrollbar, always moving.
   The track holds the 8 reels TWICE, which is what makes translateX(-50%) loop
   without a jump. Hovering pauses it so a reel can be watched. */
.reelmarquee{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.rm-track{display:flex;gap:16px;width:max-content;
  animation:rmscroll 72s linear infinite;will-change:transform}
.reelmarquee.paused .rm-track{animation-play-state:paused}
@keyframes rmscroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.rm-track{animation:none;overflow-x:auto}}
.rm-track .rl{flex:none;width:clamp(184px,15vw,224px);display:block;text-decoration:none}
.rl-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 14px;
  color:#fff;font-size:12.5px;font-weight:500;line-height:1.35}
.rl-cap em{display:block;font-style:normal;font-size:11.5px;color:rgba(255,255,255,.72);
  margin-top:2px;opacity:0;transform:translateY(3px);transition:opacity .2s ease,transform .2s ease}
.rm-track .rl:hover .rl-cap em{opacity:1;transform:none}
.rl{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#0a0a0a;
  border:1px solid rgba(10,10,10,.1);cursor:pointer}
.rl video{width:100%;height:100%;object-fit:cover;display:block}
.rl::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0))}
.rl figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 14px;color:#fff;font-size:12.5px;font-weight:500}
.mks-cta{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.mks-cta img{height:17px;width:auto}

/* the crew, real faces (feedback 8 Sep 04:11) */
.teamrail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,1fr);gap:14px;margin-top:34px;
  overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.teamrail::-webkit-scrollbar{height:6px}
.teamrail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:100px}
.tm{scroll-snap-align:start}
.tm img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;display:block}
.tm figcaption{margin-top:9px;font-size:12.5px;color:var(--dark-mut)}

/* tools: vertical switcher (feedback 8 Sep 05:48) */
/* QA SS-01 (18 Sep 2026): was align-items:start with .tool-stage locked to a 4/5
   portrait ratio. At 1440px that made the image column 699px against a 422px tab
   column, leaving 277px of dead black space under the 'Try them free' CTA. Stretch
   instead, so the image column takes its height from the tabs beside it (rule 44). */
.toolswitch{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:stretch}
.tool-list{display:flex;flex-direction:column;gap:6px}
.tool-tab{display:flex;gap:16px;text-align:left;background:none;border:none;cursor:pointer;color:inherit;
  padding:18px 16px;border-radius:12px;border-left:2px solid transparent;transition:background .25s ease,border-color .25s ease}
.tool-tab:hover{background:rgba(255,255,255,.05)}
.tool-tab.on{background:rgba(255,255,255,.07);border-left-color:#fff}
.tool-tab .tn{font-size:12px;color:var(--dark-mut);padding-top:3px}
.tool-tab b{display:block;font-family:'Nourd',sans-serif;font-size:17px;font-weight:600;margin-bottom:5px}
.tool-tab em{font-style:normal;font-size:13.5px;color:var(--dark-mut);line-height:1.5;display:block}
.tool-tab.on em{color:#d8d8d8}
.tool-stage{position:relative;aspect-ratio:auto;min-height:420px;border-radius:var(--r-lg);overflow:hidden;background:#141414}
.tool-pane{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.tool-pane.on{opacity:1}
.tool-pane img{width:100%;height:100%;object-fit:cover}
/* stacked: the stage has no sibling to take its height from, so it needs a ratio
   again. Must stay AFTER the base rule above or it loses at equal specificity. */
@media(max-width:900px){.toolswitch{grid-template-columns:1fr;gap:24px}.tool-stage{aspect-ratio:3/2;min-height:0}}

/* ---------- work page: MK Studios catalog with in-page category filter ---------- */
.catfilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.cf{appearance:none;border:1px solid rgba(11,19,38,.14);background:#fff;color:var(--ink);
    font:inherit;font-size:14px;font-weight:500;letter-spacing:.01em;padding:9px 16px;
    border-radius:999px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.cf em{font-style:normal;opacity:.45;margin-left:6px;font-size:12px}
.cf:hover{border-color:rgba(11,19,38,.34)}
.cf.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cf.on em{opacity:.6}
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cc{display:block;text-decoration:none;color:inherit;border-radius:12px;overflow:hidden;
    background:#fff;border:1px solid rgba(11,19,38,.09);transition:transform .22s ease,border-color .22s ease}
.cc:hover{transform:translateY(-3px);border-color:rgba(11,19,38,.24)}
.cc-im{display:block;aspect-ratio:4/3;overflow:hidden;background:#eceae6}
.cc-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.cc:hover .cc-im img{transform:scale(1.045)}
.cc-b{display:block;padding:14px 15px 4px}
.cc-b b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.cc-m{display:block;font-size:12.5px;color:var(--ink-mute);margin-top:3px}
.cc-n{display:block;font-size:12px;color:var(--ink-mute);opacity:.7;margin-top:2px}
.cc-go{display:block;padding:8px 15px 15px;font-size:12.5px;font-weight:500;
       color:var(--ink);opacity:.55;transition:opacity .2s ease}
.cc:hover .cc-go{opacity:1}
.cc[hidden]{display:none}
.catnone{margin:22px 0 0;color:var(--ink-mute)}
.catout{display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:center;
        margin-top:34px;padding:24px 26px;border-radius:12px;background:#f5f4f1;
        border:1px solid rgba(11,19,38,.08)}
.catout h3{margin:0 0 4px;font-size:19px}
.catout p{margin:0}
.mkslogo img{width:100%;max-width:110px;height:auto;display:block}
.catout-ctas{display:flex;gap:10px;flex-wrap:wrap}

/* .go / .wcat had no rule at all: the "See the work" line rendered as bare inline
   text with no spacing. Written 8 Sep 2026 (CLAUDE.md rule 92). */
.card .go{display:block;margin-top:12px;font-size:13px;font-weight:500;
          color:var(--ink);opacity:.55;transition:opacity .2s ease}
.card:hover .go{opacity:1}
.wcat .card{display:flex;flex-direction:column}
.wcat .card p{flex:1 0 auto}
.wcat .card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
                border-radius:10px;margin-bottom:14px}

/* ---------- inner-page hero: copy left, real image right ----------
   Manan, 8 Sep: "why is this weird little thing over here on every page, there is
   no image here". Every inner page now carries one MK Studios frame. */
/* 8 Sep: "the hero banner is too big. There is too much white space on the top
   and bottom before the media catalog comes in." Trimmed and the figure capped,
   so the row height stops being driven by a 4/5 image on a 500px column. */
.page-hero.ph-split{padding:104px 0 34px;background:#f7f6f3;border-bottom:1px solid var(--line)}
/* QA SS-03 (18 Sep 2026): the section directly under a .ph-split hero used to carry
   an inline padding-top:10px on 11 pages. With the hero's own 34px bottom that left a
   44px gap where every other section on the page uses 64px, so the cards read as
   cramped against the hero. One class now owns that spacing everywhere. */
.after-hero{padding-top:40px}
.ph-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:center;max-width:1180px}
.ph-copy{min-width:0}
.ph-copy .lead{margin-top:18px;max-width:52ch}
.ph-fig{margin:0;position:relative;border-radius:14px;overflow:hidden;
        aspect-ratio:16/11;max-height:330px;background:#eceae6;border:1px solid rgba(11,19,38,.08)}
.ph-fig img{width:100%;height:100%;object-fit:cover;display:block}
.ph-fig figcaption{position:absolute;left:12px;bottom:12px;z-index:2;
        font-size:11.5px;font-weight:500;letter-spacing:.01em;color:#fff;
        background:rgba(11,19,38,.62);padding:6px 11px;border-radius:999px;
        backdrop-filter:saturate(140%) blur(6px)}

/* ---------- service pages: MK Studios project cards + one ad video ----------
   Replaces the random 3-image "In the field" strip (feedback 8 Sep, 03:04)
   and breaks up the text wall (02:54). Every card links out to MK Studios
   and carries the MKS mark (01:23). */
.mksrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.mksp{display:block;text-decoration:none;color:inherit;border-radius:12px;overflow:hidden;
      background:#fff;border:1px solid rgba(11,19,38,.09);
      transition:transform .22s ease,border-color .22s ease}
.mksp:hover{transform:translateY(-3px);border-color:rgba(11,19,38,.24)}
.mksp-im{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:#eceae6}
.mksp-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.mksp:hover .mksp-im img{transform:scale(1.05)}
.mksp-badge{position:absolute;right:10px;bottom:10px;z-index:2;display:grid;place-items:center;
      background:rgba(255,255,255,.95);border-radius:8px;padding:6px 9px;
      box-shadow:0 6px 18px -8px rgba(0,0,0,.45)}
.mksp-badge img{width:auto;height:15px;display:block;object-fit:contain;transform:none!important}
.mksp-b{display:block;padding:14px 15px 2px}
.mksp-b b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.mksp-b span{display:block;font-size:12.5px;color:var(--ink-mute);margin-top:3px}
.mksp-go{display:block;padding:8px 15px 15px;font-size:12.5px;font-weight:500;
      color:var(--ink);opacity:.55;transition:opacity .2s ease}
.mksp:hover .mksp-go{opacity:1}
.svcvid{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:center;margin-top:44px}
.svcvid .reel.phone{max-width:280px;margin:0}
.svcvid-copy h3{margin:10px 0 10px;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em}
.svcvid-copy .btn{margin-top:18px}

/* .bl / .sp are the bulge-band letters (transform is applied by effects.js);
   .inl is the inline text link on the story timeline. All three were shipped
   with no CSS rule at all (CLAUDE.md rule 92 sweep, 8 Sep 2026). */
.bulge .bl{display:inline-block;will-change:transform;transition:transform .12s ease-out}
.bulge .sp{display:inline-block;width:.34em}
.inl{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;
     padding-bottom:1px;opacity:.75;transition:opacity .2s ease}
.inl:hover{opacity:1}

/* ---------- insights: card thumbnails + one in-article figure ----------
   "in terms of insights this is okay, again too much text, maybe we can add
   some images" (feedback 8 Sep, 06:25). Every article body had zero images. */
.ic-im{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:10px;
       background:#eceae6;margin:0 0 14px}
.ic-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.card:hover .ic-im img{transform:scale(1.05)}
.art-fig{margin:34px 0 30px}
.art-fig img{width:100%;max-height:440px;object-fit:cover;display:block;
             border-radius:12px;border:1px solid rgba(11,19,38,.08)}
.art-fig figcaption{margin-top:10px;font-size:13.5px;color:var(--ink-mute)}
.art-fig figcaption b{display:block;font-weight:500;color:var(--ink-soft)}
.art-fig figcaption span{display:block;font-size:12px;opacity:.7;margin-top:2px}

/* ---------- about page: the intro video IS the about-me ----------
   "on the about page we can put the video, this is Sahil, about me" (8 Sep, 06:38). */
.ame{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center}
.ame .reel.phone{max-width:300px;margin:0}
.ame-copy h2{margin:10px 0 16px;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.025em}
.ame-copy .lead{max-width:56ch}
.ame-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------- service pages: ONE grid, projects and reels together ----------
   8 Sep 2026. Replaces the .mksrow + .svcvid pair. Manan: "put at least 5 to 6
   projects... don't just put a random reel below it... it is empty on the right
   in that particular section". A separate 280px video beside a short paragraph
   left half the row blank; folding the reels into the same 4-up grid removes the
   dead space, cuts a whole section, and makes the reels belong to the page. */
.ptgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.pt{position:relative;display:block;margin:0;aspect-ratio:4/5;border-radius:12px;
    overflow:hidden;background:#eceae6;text-decoration:none;color:#fff;
    border:1px solid rgba(11,19,38,.09);transition:transform .22s ease}
.pt:hover{transform:translateY(-3px)}
.pt > img,.pt video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pt:hover > img{transform:scale(1.05)}
.pt::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none;
    background:linear-gradient(to top,rgba(8,10,16,.86),rgba(8,10,16,.15) 62%,rgba(8,10,16,0))}
.pt-b{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 13px}
.pt-b b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.005em;color:#fff}
.pt-b span{display:block;font-size:11.5px;color:rgba(255,255,255,.76);margin-top:1px}
.pt-badge{position:absolute;right:9px;top:9px;z-index:2;display:grid;place-items:center;
    background:rgba(255,255,255,.94);border-radius:7px;padding:5px 7px}
.pt-badge img{height:12px;width:auto;display:block;transform:none!important}
.pt-reel .vplay{width:46px;height:46px;top:44%}
.pt-reel .vplay svg{margin-left:2px}
.pt-reel::before{content:"Reel";position:absolute;right:9px;top:9px;z-index:3;
    background:rgba(255,255,255,.94);color:#0B1326;font-size:10.5px;font-weight:600;
    letter-spacing:.03em;text-transform:uppercase;padding:4px 8px;border-radius:7px}
.pt-reel.playing .vplay{opacity:0;pointer-events:none}

/* sections that should read as one flowing page, not stacked blocks
   ("not section after section after section... less white space") */
.flowsec{padding:56px 0}
/* the repeated company name was removed from these cards (the logo is the name),
   so the logo now needs to sit closer to the description */
.gcard .glogo{margin-bottom:14px}
.gcard p{margin:0}

/* The SEO answer and the human intro used to be two stacked one-paragraph
   sections, roughly 200px of page for two sentences. One band, two columns.
   ("too many empty white spaces", "not section after section after section") */
.introband{padding:38px 0 30px}
.ib-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:start}
.ib-lead{font-size:17px;margin:0}
.introband .answer{margin:0}
/* the includes / engagement list runs two-up instead of one narrow column */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;align-items:start}
.faq > details{break-inside:avoid}

/* Responsive overrides for the catalog. MUST STAY AT THE END OF THIS FILE:
   at equal specificity the later rule wins, so moving these up next to the base
   rules silently disables them (CLAUDE.md rule 106). */
@media (max-width:1080px){
  .catgrid{grid-template-columns:repeat(3,1fr)}
  .catout{grid-template-columns:90px 1fr;row-gap:16px}
  .catout-ctas{grid-column:1 / -1}
}
@media (max-width:760px){
  .catgrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .cc-b{padding:11px 12px 3px}
  .cc-b b{font-size:14.5px}
  .cc-m,.cc-n{font-size:11.5px}
  .cc-go{padding:6px 12px 12px;font-size:11.5px;opacity:1}
  .catfilter{gap:6px;margin-bottom:20px}
  .cf{font-size:13px;padding:8px 13px}
  .catout{grid-template-columns:1fr;padding:20px}
  .catout-ctas .btn{flex:1 1 auto;text-align:center}
}
/* deliberately stays 2-up at 390px: one column made this page 16,534px tall */

@media (max-width:980px){
  .page-hero.ph-split{padding:112px 0 40px}
  .ph-grid{grid-template-columns:1fr;gap:28px}
  .ph-fig{aspect-ratio:16/10;max-height:340px}
  .ph-copy .lead{max-width:none}
}
@media (max-width:520px){
  .ph-fig{aspect-ratio:4/3;max-height:none}
  .ph-fig figcaption{font-size:11px;left:10px;bottom:10px}
}

@media (max-width:900px){
  .mksrow{grid-template-columns:1fr 1fr;gap:14px}
  .svcvid{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center}
  .svcvid-copy{max-width:520px}
}
@media (max-width:560px){
  .mksrow{grid-template-columns:1fr}
  .svcvid .reel.phone{max-width:240px}
}

@media (max-width:860px){
  .ame{grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center}
  .ame-copy{max-width:560px}
  .ame-copy .lead{max-width:none}
  .ame-ctas{justify-content:center}
}
@media (max-width:520px){
  .ame .reel.phone{max-width:250px}
  .ame-ctas .btn{flex:1 1 100%;text-align:center}
}

@media (max-width:1000px){ .ptgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){ .ptgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .pt-b{padding:10px 11px} .pt-b b{font-size:13px} .pt-b span{font-size:11px} }

@media (max-width:900px){
  .ib-grid{grid-template-columns:1fr;gap:20px}
  .faq{grid-template-columns:1fr;gap:0}
}