:root {
  --bg:#080808;
  --panel:#0d0d0d;
  --panel-2:#111111;
  --text:#f0f0ec;
  --muted:#9a9a94;
  --line:#272725;
  --line-soft:#1d1d1b;
  --red:#cf1f32;
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.section-shell{width:min(calc(100% - 80px),var(--max));margin:0 auto}
.site-header{position:fixed;z-index:20;top:0;left:0;right:0;height:82px;padding:0 max(40px,calc((100vw - var(--max))/2));display:grid;grid-template-columns:150px 1fr 150px;align-items:center;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(8,8,8,.82);backdrop-filter:blur(18px)}
.brand img{width:112px;max-height:46px;object-fit:contain;object-position:left center}
.desktop-nav{display:flex;justify-content:center;gap:28px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#b5b5b0}
.desktop-nav a:hover{color:#fff}
.header-cta{justify-self:end;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid #777;padding-bottom:6px}

.hero{padding-top:160px;padding-bottom:42px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.hero-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:90px;align-items:center;min-height:520px}
.hero-logo-panel{min-height:420px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;padding-right:80px}
.hero-logo-panel img{width:min(100%,430px);max-height:220px;object-fit:contain;object-position:left center}
.hero-logo-panel p{margin:28px 0 0;color:#6f6f6b;font-size:10px;letter-spacing:.24em}
.eyebrow,.section-kicker,.contact-label{font-size:10px;letter-spacing:.2em;color:#777772;text-transform:uppercase}
.hero h1{font-size:clamp(56px,6.4vw,112px);line-height:.88;letter-spacing:-.065em;font-weight:600;margin:16px 0 28px;max-width:900px}
.hero h1 span{color:var(--red)}
.hero-copy>p{max-width:700px;color:#a2a29d;font-size:18px;line-height:1.65;margin:0}
.hero-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border:1px solid var(--line);font-size:11px;letter-spacing:.1em;text-transform:uppercase;transition:.25s ease}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}.btn-primary:hover{background:#e0263d}
.btn-ghost,.btn-outline{background:transparent}.btn-ghost:hover,.btn-outline:hover{background:#fff;color:#090909;border-color:#fff}
.stats{border-top:1px solid var(--line);margin-top:70px;padding-top:26px;display:grid;grid-template-columns:repeat(3,1fr)}
.stat{display:flex;align-items:baseline;gap:14px;border-right:1px solid var(--line);padding-right:24px;margin-right:24px}.stat:last-child{border-right:0}
.stat strong{font-size:clamp(36px,4vw,62px);letter-spacing:-.05em;font-weight:600}.stat span{color:var(--muted);font-size:13px}

.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#0a0a0a}
.marquee{min-width:max-content;padding:17px 0;display:flex;gap:22px;align-items:center;font-size:12px;letter-spacing:.14em;color:#c8c8c4;animation:drift 30s linear infinite}.marquee i{color:var(--red);font-style:normal}@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-18%)}}

.services,.work-section,.group-section,.founder-section,.impact{padding-top:132px;padding-bottom:132px}
.services-head,.section-heading.split{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:56px}
.services-head h2,.section-heading h2,.ai-copy h2,.founder-copy h2,.contact-inner h2{font-size:clamp(42px,5vw,76px);line-height:.98;letter-spacing:-.05em;margin:12px 0 0}
.services-head>p,.section-heading.split>p{width:340px;max-width:100%;color:var(--muted);line-height:1.65;margin:0 0 8px;font-size:15px}
.service-list{border-top:1px solid var(--line)}
.service-row{display:grid;grid-template-columns:58px 1.05fr 1fr 32px;gap:24px;align-items:center;min-height:116px;border-bottom:1px solid var(--line);transition:.25s ease;position:relative}
.service-row::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:.3s ease}
.service-row:hover{background:#0d0d0d;padding-left:12px}.service-row:hover::before{transform:scaleX(1)}
.service-num{font-size:10px;letter-spacing:.18em;color:#656561}.service-row h3{margin:0;font-size:clamp(21px,2vw,31px);font-weight:500;letter-spacing:-.03em}.service-row p{margin:0;color:#8e8e89;line-height:1.55;font-size:14px;max-width:520px}.service-arrow{justify-self:end;color:#555;transition:.25s}.service-row:hover .service-arrow{color:var(--red);transform:translate(2px,-2px)}

.work-section{border-top:1px solid var(--line)}
.section-heading{margin-bottom:50px}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.video-card{background:#111;border:1px solid var(--line);aspect-ratio:16/9;overflow:hidden;position:relative}
.video-card iframe,.yt-player{width:100%;height:100%;border:0;display:block}
.yt-player{background:linear-gradient(135deg,#111,#0d0d0d);position:relative}
.yt-player::before{content:"VIDEO";position:absolute;left:18px;bottom:16px;font-size:9px;letter-spacing:.18em;color:#555;z-index:0}
.center-action,.ai-actions{display:flex;justify-content:center;gap:12px;margin-top:34px;flex-wrap:wrap}

.ai-section{background:#0b0b0b;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.ai-section::before{content:"";position:absolute;width:700px;height:700px;left:-260px;top:-160px;background:radial-gradient(circle,rgba(207,31,50,.18),transparent 65%);filter:blur(24px)}
.ai-inner{padding-top:132px;padding-bottom:132px;position:relative}
.ai-header{display:grid;grid-template-columns:.72fr 1.28fr;gap:86px;align-items:center;margin-bottom:64px}
.ai-logo-stage{display:flex;align-items:center;min-height:260px}.ai-logo{width:min(100%,460px);max-height:230px;object-fit:contain;object-position:left center}
.ai-copy h2 span{color:var(--red)}.ai-copy>p{color:#aaa9a5;line-height:1.72;max-width:700px;font-size:17px}.section-kicker.red{color:var(--red)}
.ai-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}.ai-tags span{border:1px solid var(--line);border-radius:999px;padding:9px 12px;font-size:10px;letter-spacing:.05em;color:#c5c5c0}

.group-section{border-bottom:1px solid var(--line)}
.group-strip{display:grid;grid-template-columns:repeat(6,minmax(180px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);overflow-x:auto}
.group-card{min-height:410px;padding:22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a0a0a;display:flex;flex-direction:column;transition:.25s;min-width:180px}.group-card:hover{background:#101010}
.brand-stage{height:138px;display:flex;align-items:center;margin-bottom:auto}.brand-stage img{max-height:94px;max-width:165px;object-fit:contain;object-position:left center}.replay-stage img{max-height:70px}.solo-stage img{max-height:106px;max-width:150px}.dandara-stage img{max-height:104px;max-width:105px}.famous-stage{align-items:center}.famous-logo{font-size:30px;font-weight:700;letter-spacing:.14em}
.group-meta h3{font-size:12px;letter-spacing:.14em;font-weight:500;margin:0 0 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.group-meta p{font-size:13px;line-height:1.62;color:#8f8f8a;margin:0}.badge{font-size:8px;letter-spacing:.12em;color:#fff;background:var(--red);padding:5px 6px}

.founder-section{padding-top:118px;padding-bottom:108px}
.founder-layout{display:grid;grid-template-columns:1.28fr .72fr;gap:80px;align-items:center;border-top:1px solid var(--line);padding-top:70px}
.founder-copy .lead{font-size:21px;line-height:1.55;color:#deded9;max-width:820px}.founder-copy p:not(.lead){font-size:16px;line-height:1.75;color:#979792;max-width:820px}.founder-role{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:15px}.founder-role span{display:block;color:#73736f;margin-top:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.founder-photo{margin:0;border:1px solid var(--line);background:#111}.founder-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;filter:grayscale(100%)}

.impact{border-top:1px solid var(--line);padding-top:94px;padding-bottom:108px}.impact-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:28px}.impact-head h2{font-size:clamp(28px,3vw,46px);letter-spacing:-.035em;line-height:1.06;margin:12px 0 0;font-weight:500;max-width:720px}.artists-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;overflow:hidden;opacity:.9}.artists-strip img{width:100%;height:auto;display:block;filter:grayscale(100%);transition:.35s ease}.artists-strip:hover img{filter:grayscale(0%)}

.contact-section{background:var(--red);color:#fff}.contact-inner{min-height:520px;padding-top:100px;padding-bottom:90px;display:flex;flex-direction:column;justify-content:center}.contact-label{color:rgba(255,255,255,.68)}.contact-inner h2{max-width:1100px;margin-bottom:46px}.contact-inner h2 span{color:#19090c}.contact-links{display:flex;gap:38px;flex-wrap:wrap}.contact-links a{font-size:clamp(18px,1.9vw,28px);letter-spacing:-.02em;border-bottom:1px solid rgba(255,255,255,.66);padding-bottom:8px}.contact-links a:hover{color:#18080a;border-color:#18080a}
.site-footer{min-height:154px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;color:#777772;font-size:11px;letter-spacing:.08em}.site-footer img{width:90px;max-height:54px;object-fit:contain;object-position:left center;opacity:.72}.site-footer div:nth-child(2){text-align:center}.site-footer div:last-child{text-align:right}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .78s ease,transform .78s ease}.reveal.in{opacity:1;transform:translateY(0)}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}
.cursor-glow{position:fixed;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(207,31,50,.08),transparent 68%);pointer-events:none;z-index:0;transform:translate(-50%,-50%);opacity:0;transition:opacity .4s}

@media(max-width:1180px){
  .site-header{grid-template-columns:130px 1fr 130px}.desktop-nav{gap:18px}
  .hero-grid{grid-template-columns:1fr;gap:40px}.hero-logo-panel{min-height:auto;border-right:0;border-bottom:1px solid var(--line);padding:30px 0 46px}.hero-logo-panel img{width:280px}.hero-logo-panel p{margin-top:18px}
  .ai-header,.founder-layout{grid-template-columns:1fr;gap:52px}.founder-photo{max-width:520px}
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .group-strip{grid-template-columns:repeat(6,220px)}
}
@media (max-width:760px), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none){
  .section-shell{width:min(calc(100% - 34px),var(--max))}.site-header{height:72px;padding:0 17px;grid-template-columns:112px 1fr}.desktop-nav{display:none}.brand img{width:95px}.header-cta{font-size:9px}
  .hero{padding-top:116px;min-height:auto}.hero h1{font-size:clamp(48px,14vw,78px)}.hero-copy>p{font-size:16px}.hero-logo-panel{padding-top:18px}.hero-logo-panel img{width:220px}.hero-logo-panel p{font-size:8px}
  .stats{grid-template-columns:1fr;gap:18px}.stat{border-right:0;border-bottom:1px solid var(--line);padding-bottom:18px;margin-right:0}.stat:last-child{border-bottom:0}
  .services,.work-section,.group-section,.founder-section,.impact{padding-top:86px;padding-bottom:86px}.services-head,.section-heading.split,.impact-head{display:block}.services-head>p,.section-heading.split>p{width:auto;margin-top:20px}.services-head h2,.section-heading h2,.ai-copy h2,.founder-copy h2,.contact-inner h2{font-size:43px}
  .service-row{grid-template-columns:38px 1fr 22px;gap:15px;padding:22px 0}.service-row p{grid-column:2/4;margin-top:-8px}.service-row:hover{padding-left:0}.service-row h3{font-size:23px}
  .video-grid{grid-template-columns:1fr}.ai-inner{padding-top:86px;padding-bottom:86px}.ai-logo-stage{min-height:180px}.ai-logo{width:300px}
  .group-strip{grid-template-columns:repeat(6,240px);margin-right:-17px;padding-right:17px}.group-card{min-height:370px}
  .founder-layout{padding-top:46px}.founder-copy .lead{font-size:18px}.founder-copy p:not(.lead){font-size:15px}
  .impact-head h2{font-size:32px}.artists-strip{overflow-x:auto}.artists-strip img{width:900px;max-width:none}
  .contact-inner{min-height:460px}.contact-links{display:grid;gap:20px}.contact-links a{font-size:21px;width:max-content;max-width:100%}
  .site-footer{grid-template-columns:1fr;gap:18px;padding-top:42px;padding-bottom:42px}.site-footer div:nth-child(2),.site-footer div:last-child{text-align:left}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}


/* FINAL REFINEMENTS */
.services-v2{position:relative;overflow:hidden}
.services-v2::before{content:"";position:absolute;right:-240px;top:80px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(207,31,50,.08),transparent 68%);pointer-events:none}
.services-intro{display:grid;grid-template-columns:1.45fr .55fr;gap:80px;align-items:end;margin-bottom:64px;position:relative}
.services-intro h2{font-size:clamp(48px,5.6vw,84px);line-height:.96;letter-spacing:-.055em;font-weight:560;margin:14px 0 0;max-width:1000px}
.services-intro h2 span{color:#777772;font-weight:480}
.services-note{max-width:360px;justify-self:end;padding-top:18px;border-top:1px solid var(--line);position:relative}
.services-note::before{content:"";position:absolute;top:-1px;left:0;width:54px;height:1px;background:var(--red)}
.services-note span{display:block;font-size:9px;letter-spacing:.18em;color:#d0d0cb;margin-bottom:14px}
.services-note p{color:#858580;line-height:1.65;font-size:14px;margin:0}
.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);position:relative}
.capability-card{min-height:245px;padding:28px 28px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(10,10,10,.62);position:relative;overflow:hidden;transition:background .28s ease,transform .28s ease}
.capability-card::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .32s ease}
.capability-card:hover{background:#101010;transform:translateY(-2px)}
.capability-card:hover::after{transform:scaleX(1)}
.cap-top{display:flex;align-items:center;gap:12px;margin-bottom:52px}
.cap-top span{font-size:9px;letter-spacing:.18em;color:#656561}
.cap-top i{display:block;height:1px;background:#292927;flex:1}
.capability-card h3{font-size:clamp(24px,2vw,32px);line-height:1.05;letter-spacing:-.035em;font-weight:500;margin:0 0 15px;max-width:310px}
.capability-card p{font-size:13.5px;line-height:1.65;color:#8d8d88;margin:0;max-width:330px}

/* Stable native YouTube embeds: no iframe API/origin dependency. */
.video-card iframe{width:100%;height:100%;display:block;border:0;background:#0d0d0d}

/* Full Replay AI logo with generous safe-area. */
.ai-logo-stage{overflow:visible}
.ai-logo{width:min(100%,520px);max-height:280px;object-fit:contain;object-position:left center;overflow:visible}

/* Six Expressions — one identical logo frame for every brand. */
.group-strip{grid-template-columns:repeat(6,minmax(200px,1fr))}
.group-card{min-height:430px;padding:24px 22px}
.brand-stage{height:150px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:auto}
.brand-logo-frame{width:168px;height:104px;display:flex;align-items:center;justify-content:center;flex:none;overflow:visible}
.brand-logo-frame img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center}
.famous-frame{border:0}
.famous-logo{font-size:27px;line-height:1;font-weight:750;letter-spacing:.12em;white-space:nowrap}
.web-card .badge{white-space:nowrap}
.group-meta h3{min-height:30px;align-content:flex-start}

/* Impact title only, left aligned. */
.impact-head{display:block!important;text-align:left!important;margin-bottom:28px}
.impact-head h2{margin:0!important;max-width:760px;text-align:left!important}

/* Slightly stronger contact details. */
.contact-links a{font-size:clamp(21px,2.15vw,32px)}

@media(max-width:1180px){
  .services-intro{grid-template-columns:1fr;gap:30px}.services-note{justify-self:start}
  .capability-grid{grid-template-columns:repeat(2,1fr)}
  .group-strip{grid-template-columns:repeat(6,220px)}
}
@media (max-width:760px), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none){
  .services-intro h2{font-size:43px}.services-intro{margin-bottom:42px}.services-note{max-width:100%}
  .capability-grid{grid-template-columns:1fr}.capability-card{min-height:210px}.cap-top{margin-bottom:38px}
  .brand-stage{height:142px}.brand-logo-frame{width:160px;height:96px}
  .ai-logo{width:min(100%,340px);max-height:220px}
}


/* V4 FINAL POLISH — softer services, equal brand marks, balanced copy */
.services-v2::before{right:-180px;top:10px;width:520px;height:520px;opacity:.75}
.services-intro{margin-bottom:48px}
.capability-grid{border:0;gap:12px;grid-template-columns:repeat(3,1fr)}
.capability-card{border:1px solid #20201f!important;border-radius:24px;min-height:226px;padding:26px 26px 28px;background:linear-gradient(145deg,rgba(17,17,17,.9),rgba(9,9,9,.64));box-shadow:inset 0 1px 0 rgba(255,255,255,.018);transform:none!important}
.capability-card::after{height:1px;left:24px;right:24px;width:auto;bottom:18px;background:linear-gradient(90deg,var(--red),transparent)}
.capability-card:hover{background:linear-gradient(145deg,#151515,#0b0b0b)}
.cap-top{margin-bottom:42px}.cap-top span{width:34px;height:34px;border:1px solid #282826;border-radius:50%;display:grid;place-items:center;color:#8d8d88}.cap-top i{background:linear-gradient(90deg,#2d2d2a,transparent)}
.capability-card h3{font-size:clamp(23px,1.8vw,30px);margin-bottom:12px}.capability-card p{font-size:13px;max-width:300px}

.ai-logo-stage{padding:14px 0;min-height:250px;display:flex;align-items:center;overflow:visible!important}
.ai-logo{width:min(100%,580px)!important;max-height:none!important;object-fit:contain!important;object-position:left center!important;display:block;clip-path:none!important}

.group-strip{align-items:stretch}
.group-card{display:flex;flex-direction:column;min-height:440px}
.brand-stage{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.brand-logo-frame{width:180px;height:110px;display:flex;align-items:center;justify-content:center;overflow:visible!important}
.brand-logo-frame img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;display:block;clip-path:none!important}
.group-meta{display:grid;grid-template-rows:34px minmax(92px,1fr);align-content:start;gap:8px}
.group-meta h3{min-height:0!important;margin:0;display:flex;align-items:flex-start;flex-wrap:wrap;gap:7px;line-height:1.05}
.group-meta p{margin:0;font-size:12.5px;line-height:1.58;color:#8c8c87;max-width:100%;min-height:92px}
.web-card .badge{font-size:7px;padding:4px 6px;line-height:1;margin-top:1px}
.famous-frame,.famous-logo{all:unset}

.video-card{background:#080808;border:1px solid #1d1d1b;border-radius:16px;overflow:hidden;aspect-ratio:16/9;position:relative}
.video-card iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;background:#080808}

@media(max-width:1180px){.capability-grid{grid-template-columns:repeat(2,1fr)}.group-meta{grid-template-rows:34px minmax(100px,1fr)}}
@media (max-width:760px), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none){.capability-grid{grid-template-columns:1fr}.capability-card{min-height:196px}.brand-logo-frame{width:170px;height:105px}.group-meta p{min-height:96px}.ai-logo-stage{min-height:190px}.ai-logo{width:min(100%,390px)!important}}


/* ===== FINAL V5 OVERRIDES ===== */
/* Video cards: exact user-selected videos, visible thumbnails first, player loads on click. */
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px}
.video-item{min-width:0}
.video-card{width:100%;padding:0;border:1px solid #1d1d1b;border-radius:16px;overflow:hidden;aspect-ratio:16/9;position:relative;display:block;background:#080808;cursor:pointer;text-align:left}
.video-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.015);transition:transform .45s ease,filter .45s ease}
.video-card:hover>img{transform:scale(1.045);filter:brightness(.78)}
.video-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.35));pointer-events:none}
.video-play{position:absolute;left:18px;bottom:17px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:#060606;font-size:14px;padding-left:3px;box-shadow:0 7px 30px rgba(0,0,0,.24);transition:.25s ease}
.video-card:hover .video-play{transform:scale(1.07)}
.video-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#080808}
.video-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 3px 0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5f5f5a}
.video-meta span{font-variant-numeric:tabular-nums;color:#464641}
.video-meta a{color:#8d8d88;text-decoration:none;transition:.2s}.video-meta a:hover{color:#fff}

/* Replay AI: complete logo with safe space and zero clipping in both locations. */
.ai-logo-stage{min-height:290px;overflow:visible!important;padding:8px 0;display:flex;align-items:center}
.ai-logo{display:block;width:min(100%,650px)!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:left center!important;clip-path:none!important;overflow:visible!important}
.brand-stage{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:auto;overflow:visible!important}
.brand-logo-frame{width:172px!important;height:106px!important;display:flex;align-items:center;justify-content:center;overflow:visible!important}
.brand-logo-frame img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;clip-path:none!important;overflow:visible!important}
/* Optical sizing so six marks read at the same visual weight. */
.group-card:nth-child(1) .brand-logo-frame img{transform:scale(.94)}
.group-card:nth-child(2) .brand-logo-frame img{transform:scale(.92)}
.group-card:nth-child(3) .brand-logo-frame img{transform:scale(.92)}
.group-card:nth-child(4) .brand-logo-frame img{transform:scale(.90)}
.group-card:nth-child(5) .brand-logo-frame img{transform:scale(.84)}
.group-card:nth-child(6) .brand-logo-frame img{transform:scale(.92)}

/* Six Expressions: balanced copy blocks. */
.group-card{min-height:418px;padding:24px 22px}
.group-meta{display:grid;grid-template-rows:42px 104px;align-content:start;gap:8px}
.group-meta h3{height:42px;min-height:42px!important;margin:0;display:flex;align-items:flex-start;gap:7px;flex-wrap:wrap;line-height:1.05}
.group-meta p{height:104px;min-height:104px!important;margin:0;font-size:12.5px;line-height:1.6;color:#8c8c87;max-width:100%}

/* Bring Ehab section directly under Six Expressions: no divider, no dead space. */
.group-section{padding-bottom:58px!important}
.founder-section{padding-top:24px!important;padding-bottom:108px}
.founder-layout{border-top:0!important;padding-top:0!important}

@media(max-width:1180px){
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .group-meta{grid-template-rows:42px 112px}.group-meta p{height:112px;min-height:112px!important}
}
@media (max-width:760px), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none){
  .video-grid{grid-template-columns:1fr;gap:24px}
  .video-meta{padding-top:10px}
  .ai-logo-stage{min-height:210px}.ai-logo{width:min(100%,430px)!important}
  .brand-logo-frame{width:165px!important;height:102px!important}
  .group-section{padding-bottom:42px!important}.founder-section{padding-top:12px!important}
}


/* ===== FINAL V6 POLISH ===== */
/* Hero: slightly more restrained headline and UAE-first origin line. */
.hero h1{font-size:clamp(52px,5.85vw,102px)}

/* Replay AI: smaller left-side mark, full square canvas, never clipped. */
.ai-header{grid-template-columns:.60fr 1.40fr;gap:78px}
.ai-logo-stage{min-height:250px!important;padding:0!important;display:flex;align-items:center;justify-content:flex-start;overflow:visible!important}
.ai-logo{width:clamp(220px,21vw,315px)!important;height:clamp(220px,21vw,315px)!important;max-width:315px!important;max-height:315px!important;object-fit:contain!important;object-position:center!important;display:block!important;clip-path:none!important;overflow:visible!important;transform:none!important}

/* Six Expressions: exact uploaded canvases, one identical display box, no per-brand scaling. */
.group-strip{grid-template-columns:repeat(6,minmax(190px,1fr));align-items:stretch}
.group-card{min-height:402px!important;padding:24px 20px!important}
.brand-stage{height:158px!important;min-height:158px!important;display:flex!important;align-items:center!important;justify-content:center!important;margin-bottom:12px!important;overflow:visible!important}
.brand-logo-frame{width:142px!important;height:142px!important;min-width:142px!important;min-height:142px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}
.brand-logo-frame img{width:142px!important;height:142px!important;max-width:142px!important;max-height:142px!important;object-fit:contain!important;object-position:center!important;display:block!important;clip-path:none!important;transform:none!important;overflow:visible!important}
.group-card:nth-child(1) .brand-logo-frame img,
.group-card:nth-child(2) .brand-logo-frame img,
.group-card:nth-child(3) .brand-logo-frame img,
.group-card:nth-child(4) .brand-logo-frame img,
.group-card:nth-child(5) .brand-logo-frame img,
.group-card:nth-child(6) .brand-logo-frame img{transform:none!important}
.group-meta{display:grid!important;grid-template-rows:30px 88px!important;gap:8px!important;align-content:start!important}
.group-meta h3{height:30px!important;min-height:30px!important;margin:0!important;display:flex!important;align-items:flex-start!important;line-height:1.05!important;white-space:nowrap!important}
.group-meta p{height:88px!important;min-height:88px!important;margin:0!important;font-size:12.25px!important;line-height:1.58!important;color:#8c8c87!important;max-width:100%!important}

/* Keep the group-to-founder transition compact and clean. */
.group-section{padding-bottom:48px!important;border-bottom:0!important}
.founder-section{padding-top:16px!important}
.founder-layout{border-top:0!important;padding-top:0!important}

@media(max-width:1180px){
  .hero h1{font-size:clamp(50px,8vw,88px)}
  .ai-header{grid-template-columns:1fr;gap:38px}
  .ai-logo{width:270px!important;height:270px!important;max-width:270px!important;max-height:270px!important}
  .group-strip{grid-template-columns:repeat(6,220px)}
}
@media (max-width:760px), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none){
  .hero h1{font-size:clamp(44px,12.7vw,70px)}
  .ai-logo-stage{min-height:190px!important}
  .ai-logo{width:220px!important;height:220px!important;max-width:220px!important;max-height:220px!important}
  .brand-logo-frame,.brand-logo-frame img{width:132px!important;height:132px!important;min-width:132px!important;min-height:132px!important;max-width:132px!important;max-height:132px!important}
  .brand-stage{height:146px!important;min-height:146px!important}
}


/* ===== FINAL V7 REFINEMENTS ===== */
/* Hero: logo speaks for itself; no duplicated service line underneath. */
.hero-logo-panel p{display:none!important}

/* The headline keeps the original rhythm, with a stronger middle statement. */
.hero h1{font-size:clamp(52px,5.85vw,102px)}

/* Marquee removed in V7. Keep the transition into services clean and intentional. */
.hero{padding-bottom:58px}
.services-v2{padding-top:112px}

/* Selected Work — simple, premium view-count treatment under every video. */
.video-meta-stats{padding:13px 3px 0;align-items:flex-end}
.view-stat{display:flex!important;align-items:baseline;gap:7px;color:#f1f1ed!important;letter-spacing:0!important;text-transform:none!important}
.view-stat strong{font-size:21px;line-height:1;font-weight:620;letter-spacing:-.035em;color:#f1f1ed}
.view-stat small{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#777772;font-weight:500}
.video-meta-stats a{font-size:9px;letter-spacing:.14em;color:#6f6f6a}
.video-meta-stats a:hover{color:#fff}

@media (max-width:760px), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none){
  .services-v2{padding-top:86px}
  .view-stat strong{font-size:20px}
}


/* ===== FINAL V8 ASSET CLEANUP + VIEW STATS POLISH ===== */
.video-meta-stats{padding:14px 2px 0;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.view-pill{display:inline-flex;flex-direction:column;gap:8px;padding:12px 13px 11px;min-width:146px;border:1px solid #242421;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.view-title{font-size:10px;line-height:1.05;letter-spacing:.16em;text-transform:uppercase;color:#8f8f89;font-weight:520;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.view-stat{display:flex!important;align-items:baseline;gap:7px;color:#f2f2ee!important;letter-spacing:0!important;text-transform:none!important}
.view-stat strong{font-size:22px;line-height:1;font-weight:650;letter-spacing:-.04em;color:#fbfbf7}
.view-stat small{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#7d7d77;font-weight:520}
.video-meta-stats a{font-size:9px;letter-spacing:.16em;color:#73736f;white-space:nowrap;padding-bottom:4px}
.video-meta-stats a:hover{color:#fff}
@media (max-width:760px), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none){
  .video-meta-stats{gap:10px;align-items:center}
  .view-pill{min-width:0;flex:1;padding:11px 12px 10px}
  .view-title{font-size:9px}
  .view-stat strong{font-size:20px}
}

/* ===== FINAL LOCKED VERSION ===== */
.view-pill{justify-content:center;gap:0;padding:11px 13px 10px;min-width:116px}
.view-title{display:none!important}


/* ======================================================================
   MOBILE POLISH ONLY — DESKTOP/TABLET STYLES ABOVE REMAIN UNTOUCHED
   ====================================================================== */
@media (max-width:760px), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none){
  /* Global mobile rhythm — less endless vertical scrolling. */
  .section-shell{width:min(calc(100% - 28px),var(--max))}
  .services,.work-section,.group-section,.founder-section,.impact{padding-top:64px;padding-bottom:64px}
  .section-heading{margin-bottom:28px}
  .section-heading h2,.services-intro h2,.ai-copy h2,.founder-copy h2,.contact-inner h2{font-size:clamp(31px,9vw,40px)}

  /* Header + Hero: logo sits beside the statement, not on its own row. */
  .site-header{height:66px;padding:0 14px;grid-template-columns:96px 1fr}
  .brand img{width:82px}
  .header-cta{font-size:8px;letter-spacing:.12em;padding:10px 12px}
  .hero{padding-top:92px;padding-bottom:40px}
  .hero-grid{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;gap:18px!important;align-items:start!important;min-height:0!important}
  .hero-logo-panel{min-height:0!important;border:0!important;padding:28px 0 0!important;align-self:start!important;justify-content:flex-start!important}
  .hero-logo-panel img{width:86px!important;height:auto!important;max-height:none!important;object-fit:contain!important}
  .hero-copy{min-width:0}
  .hero-copy .eyebrow{font-size:8px;letter-spacing:.16em;margin-bottom:12px}
  .hero h1{font-size:clamp(31px,8.7vw,40px)!important;line-height:.94!important;letter-spacing:-.048em!important;margin-bottom:18px}
  .hero-copy>p{font-size:12.5px!important;line-height:1.55!important;max-width:none!important;color:#969691}
  .hero-actions{gap:8px;margin-top:20px;flex-wrap:wrap}
  .hero-actions .btn{min-height:39px;padding:0 13px;font-size:8px;letter-spacing:.11em}
  .stats{grid-template-columns:repeat(3,1fr)!important;gap:0!important;margin-top:34px!important;border-top:1px solid var(--line);padding-top:18px}
  .stat{border:0!important;border-right:1px solid var(--line)!important;padding:0 10px!important;margin:0!important;min-width:0}
  .stat:first-child{padding-left:0!important}.stat:last-child{border-right:0!important;padding-right:0!important}
  .stat strong{font-size:clamp(25px,7vw,34px)!important;line-height:1!important}
  .stat span{font-size:7.5px!important;letter-spacing:.11em!important;margin-top:7px!important;line-height:1.2}

  /* What We Do: one elegant rotating capability instead of six tall stacked cards. */
  .services-v2{padding-top:64px!important}
  .services-intro{margin-bottom:26px!important;gap:18px!important}
  .services-intro h2{font-size:clamp(35px,9.7vw,43px)!important;line-height:.98!important}
  .services-note{padding-top:13px!important;border-top-color:#242422!important}
  .services-note span{font-size:8px!important;margin-bottom:8px!important}
  .services-note p{font-size:11.5px!important;line-height:1.5!important;max-width:310px}
  .capability-grid{display:block!important;position:relative!important;height:184px!important;border:0!important;overflow:hidden!important}
  .capability-card{position:absolute!important;inset:0!important;display:block!important;min-height:0!important;height:184px!important;padding:20px 20px 22px!important;border-radius:20px!important;opacity:0!important;visibility:hidden!important;transform:translateY(12px)!important;pointer-events:none!important;transition:opacity .45s ease,transform .45s ease,visibility .45s!important;background:linear-gradient(145deg,rgba(17,17,17,.96),rgba(9,9,9,.9))!important}
  .capability-card.mobile-active{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;pointer-events:auto!important}
  .cap-top{margin-bottom:24px!important}.cap-top span{width:29px!important;height:29px!important;font-size:8px!important}
  .capability-card h3{font-size:24px!important;margin-bottom:9px!important;max-width:none!important}
  .capability-card p{font-size:12px!important;line-height:1.5!important;max-width:310px!important}
  .mobile-cap-dots{display:flex;gap:6px;align-items:center;margin-top:13px;height:4px}
  .mobile-cap-dot{display:block;width:20px;height:2px;border:0;padding:0;background:#2b2b28;border-radius:10px;transition:width .3s ease,background .3s ease}
  .mobile-cap-dot.active{width:34px;background:var(--red)}

  /* Both video sections: 2-up grid for fast scanning. */
  .video-grid,.ai-videos{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 9px!important}
  .video-card{border-radius:11px!important}
  .video-play{width:32px!important;height:32px!important;left:10px!important;bottom:9px!important;font-size:10px!important}
  .video-meta{padding:8px 1px 0!important;font-size:7px!important;letter-spacing:.08em!important;gap:5px!important}
  .video-meta a{font-size:7px!important;letter-spacing:.07em!important;white-space:nowrap}
  .video-meta-stats{display:flex!important;align-items:center!important;gap:5px!important}
  .view-pill{min-width:0!important;padding:7px 8px 7px!important;border-radius:10px!important;flex:0 1 auto!important}
  .view-stat{gap:4px!important}.view-stat strong{font-size:16px!important}.view-stat small{font-size:6px!important;letter-spacing:.10em!important}
  .center-action{margin-top:28px!important}.center-action .btn{font-size:8px!important;min-height:40px!important;padding:0 14px!important}

  /* Replay AI: compact logo and copy side by side. */
  .ai-inner{padding-top:64px!important;padding-bottom:64px!important}
  .ai-header{display:grid!important;grid-template-columns:108px minmax(0,1fr)!important;gap:16px!important;align-items:start!important;margin-bottom:34px!important}
  .ai-logo-stage{min-height:0!important;height:auto!important;padding:20px 0 0!important;justify-content:flex-start!important;align-items:flex-start!important}
  .ai-logo{width:104px!important;height:104px!important;min-width:104px!important;min-height:104px!important;max-width:104px!important;max-height:104px!important;object-fit:contain!important}
  .ai-copy h2{font-size:clamp(29px,8vw,36px)!important;line-height:.98!important;margin-bottom:14px!important}
  .ai-copy p{font-size:11.5px!important;line-height:1.55!important}
  .ai-tags{gap:5px!important;margin-top:16px!important}.ai-tags span{font-size:7px!important;padding:7px 8px!important}

  /* Six Expressions: simple 2x3 grid, no sideways scrolling. */
  .group-section{padding-top:64px!important;padding-bottom:50px!important}
  .group-strip{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;overflow:visible!important;margin:0!important;padding:0!important;border:0!important}
  .group-card{min-width:0!important;min-height:0!important;height:auto!important;padding:15px 13px 14px!important;border:1px solid #20201f!important;border-radius:18px!important;background:linear-gradient(145deg,rgba(16,16,16,.88),rgba(8,8,8,.78))!important}
  .brand-stage{height:86px!important;min-height:86px!important;margin:0 0 8px!important}
  .brand-logo-frame,.brand-logo-frame img{width:78px!important;height:78px!important;min-width:78px!important;min-height:78px!important;max-width:78px!important;max-height:78px!important}
  .group-meta{display:block!important}
  .group-meta h3{display:none!important}
  .group-meta p{height:auto!important;min-height:0!important;font-size:9.5px!important;line-height:1.42!important;color:#898984!important;text-align:center!important}

  /* Founder: smaller portrait beside the copy. */
  .founder-section{padding-top:34px!important;padding-bottom:64px!important}
  .founder-layout{display:grid!important;grid-template-columns:34% minmax(0,66%)!important;gap:16px!important;align-items:start!important;padding-top:0!important}
  .founder-photo{grid-column:1!important;grid-row:1!important;order:-1!important;max-width:none!important;margin:27px 0 0!important;border-radius:14px!important;overflow:hidden!important}
  .founder-photo img{aspect-ratio:4/5!important}
  .founder-copy{grid-column:2!important;grid-row:1!important;min-width:0!important}
  .founder-copy .section-kicker{font-size:8px!important;margin-bottom:10px!important}
  .founder-copy h2{font-size:clamp(21px,5.9vw,27px)!important;line-height:1.02!important;margin-bottom:14px!important}
  .founder-copy .lead{font-size:11.5px!important;line-height:1.48!important;margin-bottom:11px!important}
  .founder-copy p:not(.lead){font-size:10.5px!important;line-height:1.48!important}
  .founder-role{margin-top:15px!important;padding-top:12px!important;font-size:11px!important}.founder-role span{font-size:7px!important;margin-top:4px!important}

  /* Contact stays strong without becoming another long screen. */
  .contact-inner{min-height:390px!important;padding-top:66px!important;padding-bottom:66px!important}
}


/* ======================================================================
   MOBILE FINAL V2 — PHONE PORTRAIT + PHONE LANDSCAPE ONLY
   DESKTOP REMAINS UNCHANGED
   ====================================================================== */
@media (max-width:760px), (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none){

  /* Hero mark: centered above the headline, modest size. */
  .hero-grid{
    grid-template-columns:1fr!important;
    gap:0!important;
    align-items:start!important;
  }
  .hero-logo-panel{
    width:100%!important;
    padding:0 0 20px!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
  .hero-logo-panel img{
    width:118px!important;
    height:auto!important;
    margin:0 auto!important;
    object-position:center!important;
  }
  .hero-copy{
    width:100%!important;
    text-align:left!important;
  }
}

/* Extra compaction for actual phone landscape. */
@media (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none){
  .site-header{height:58px!important}
  .hero{padding-top:76px!important;padding-bottom:32px!important}
  .hero-logo-panel{padding-bottom:12px!important}
  .hero-logo-panel img{width:92px!important}
  .hero-copy .eyebrow{margin-bottom:8px!important}
  .hero h1{
    font-size:clamp(30px,6.3vw,45px)!important;
    line-height:.92!important;
    margin-bottom:12px!important;
    max-width:760px!important;
  }
  .hero-copy>p{font-size:11.5px!important;line-height:1.45!important;max-width:760px!important}
  .hero-actions{margin-top:14px!important}
  .stats{margin-top:22px!important;padding-top:14px!important}
  .stat strong{font-size:26px!important}

  .services,.work-section,.group-section,.founder-section,.impact{padding-top:48px!important;padding-bottom:48px!important}
  .services-v2{padding-top:48px!important}
  .services-intro{margin-bottom:20px!important}
  .capability-grid,.capability-card{height:150px!important}
  .capability-card{padding:15px 18px 17px!important}
  .cap-top{margin-bottom:14px!important}
  .capability-card h3{font-size:21px!important}
  .capability-card p{font-size:10.5px!important;line-height:1.42!important}
  .mobile-cap-dots{margin-top:9px!important}

  .video-grid,.ai-videos{gap:13px 8px!important}
  .video-meta{padding-top:6px!important}
  .view-pill{padding:6px 7px!important}
  .view-stat strong{font-size:15px!important}

  .ai-inner{padding-top:48px!important;padding-bottom:48px!important}
  .ai-header{grid-template-columns:86px minmax(0,1fr)!important;gap:14px!important;margin-bottom:26px!important}
  .ai-logo-stage{padding-top:14px!important}
  .ai-logo{width:82px!important;height:82px!important;min-width:82px!important;min-height:82px!important;max-width:82px!important;max-height:82px!important}
  .ai-copy h2{font-size:27px!important;margin-bottom:10px!important}
  .ai-copy p{font-size:10.5px!important}
  .ai-tags{margin-top:10px!important}

  .group-section{padding-top:48px!important;padding-bottom:36px!important}
  .group-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .group-card{padding:11px 10px 12px!important;border-radius:15px!important}
  .brand-stage{height:68px!important;min-height:68px!important}
  .brand-logo-frame,.brand-logo-frame img{
    width:62px!important;height:62px!important;min-width:62px!important;min-height:62px!important;max-width:62px!important;max-height:62px!important
  }
  .group-meta p{font-size:8.6px!important;line-height:1.35!important}

  .founder-section{padding-top:28px!important;padding-bottom:48px!important}
  .founder-layout{grid-template-columns:28% minmax(0,72%)!important;gap:14px!important}
  .founder-photo{margin-top:20px!important}
  .founder-copy h2{font-size:23px!important;margin-bottom:10px!important}
  .founder-copy .lead{font-size:10.5px!important;margin-bottom:8px!important}
  .founder-copy p:not(.lead){font-size:9.6px!important}
  .founder-role{margin-top:10px!important;padding-top:9px!important}

  .contact-inner{min-height:300px!important;padding-top:48px!important;padding-bottom:48px!important}

  .site-footer{
    min-height:auto!important;
    grid-template-columns:auto 1fr!important;
    gap:18px!important;
    padding-top:24px!important;
    padding-bottom:24px!important;
  }
  .site-footer div:nth-child(2){text-align:right!important}
}


/* ======================================================================
   MOBILE HERO V6 — PHONE ONLY
   Desktop/tablet layout above remains untouched.
   Goal:
   1) First viewport = complete Hero through 10M+ / 6B+ / 2015 stats.
   2) What We Do begins only after the first scroll and owns the second screen.
   ====================================================================== */

@media (max-width:760px){

  /* First screen: Hero fills the phone viewport exactly. */
  .hero{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding-top:76px!important;
    padding-bottom:16px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    overflow:hidden!important;
  }

  .hero-grid{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:0!important;
  }

  .hero-logo-panel{
    flex:0 0 auto!important;
    min-height:0!important;
    width:100%!important;
    padding:0 0 12px!important;
    margin:0!important;
    border:0!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
  }

  .hero-logo-panel img{
    width:96px!important;
    height:auto!important;
    margin:0 auto!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center!important;
  }

  .hero-copy{
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
  }

  .hero-copy .eyebrow{
    font-size:7px!important;
    letter-spacing:.15em!important;
    margin-bottom:8px!important;
  }

  .hero h1{
    font-size:clamp(30px,8.6vw,39px)!important;
    line-height:.92!important;
    letter-spacing:-.047em!important;
    margin:0 0 12px!important;
  }

  .hero-copy>p{
    font-size:11.5px!important;
    line-height:1.45!important;
    max-width:350px!important;
    margin:0!important;
  }

  .hero-actions{
    margin-top:14px!important;
    gap:7px!important;
    flex-wrap:nowrap!important;
  }

  .hero-actions .btn{
    min-height:35px!important;
    padding:0 11px!important;
    font-size:7.5px!important;
    letter-spacing:.09em!important;
    white-space:nowrap!important;
  }

  .stats{
    flex:0 0 auto!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    margin-top:12px!important;
    padding-top:12px!important;
    border-top:1px solid var(--line)!important;
  }

  .stat{
    min-width:0!important;
    border:0!important;
    border-right:1px solid var(--line)!important;
    margin:0!important;
    padding:0 8px!important;
    display:block!important;
  }

  .stat:first-child{padding-left:0!important}
  .stat:last-child{padding-right:0!important;border-right:0!important}

  .stat strong{
    display:block!important;
    font-size:clamp(23px,6.4vw,31px)!important;
    line-height:1!important;
  }

  .stat span{
    display:block!important;
    font-size:6.8px!important;
    line-height:1.15!important;
    margin-top:5px!important;
    letter-spacing:.08em!important;
  }

  /* Second screen: What We Do is a complete, self-contained mobile page. */
  .services-v2{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding-top:78px!important;
    padding-bottom:18px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
  }

  .services-intro{
    flex:0 0 auto!important;
    display:block!important;
    margin-bottom:16px!important;
  }

  .services-intro-copy .section-kicker{
    font-size:7px!important;
    letter-spacing:.16em!important;
  }

  .services-intro h2{
    font-size:clamp(28px,7.9vw,36px)!important;
    line-height:.96!important;
    margin:8px 0 0!important;
  }

  .services-note{
    max-width:none!important;
    justify-self:auto!important;
    margin-top:11px!important;
    padding-top:9px!important;
  }

  .services-note span{
    font-size:6.8px!important;
    margin-bottom:5px!important;
  }

  .services-note p{
    font-size:9.5px!important;
    line-height:1.35!important;
    max-width:340px!important;
    margin:0!important;
  }

  /* All six capabilities visible at once: clean 2 × 3 grid, no slideshow. */
  .capability-grid{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:visible!important;
    position:relative!important;
  }

  .capability-card,
  .capability-card.mobile-active{
    position:relative!important;
    inset:auto!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    min-height:0!important;
    height:auto!important;
    padding:11px 11px 12px!important;
    border:1px solid #222220!important;
    border-radius:14px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
    transition:border-color .25s ease,background .25s ease!important;
    background:linear-gradient(145deg,rgba(17,17,17,.94),rgba(9,9,9,.88))!important;
  }

  .capability-card:active{
    border-color:#4a2429!important;
    background:#111!important;
  }

  .cap-top{
    margin:0 0 auto!important;
    min-height:20px!important;
  }

  .cap-top span{
    width:21px!important;
    height:21px!important;
    font-size:6px!important;
  }

  .capability-card h3{
    font-size:14.5px!important;
    line-height:1.04!important;
    margin:0 0 5px!important;
    letter-spacing:-.025em!important;
  }

  .capability-card p{
    font-size:8.2px!important;
    line-height:1.3!important;
    margin:0!important;
    max-width:none!important;
    color:#84847f!important;
  }

  /* Old rotating-carousel indicators are intentionally gone. */
  .mobile-cap-dots{display:none!important}

  /* Selected Work starts only after the second full mobile screen. */
  .work-section{
    margin-top:0!important;
  }
}

/* Phone landscape: still keep Hero + What We Do as separate full screens,
   but use the wider canvas more efficiently. */
@media (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none){

  .hero{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding-top:60px!important;
    padding-bottom:10px!important;
  }

  .hero-grid{
    display:grid!important;
    grid-template-columns:86px minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
  }

  .hero-logo-panel{
    padding:0!important;
    align-self:center!important;
  }

  .hero-logo-panel img{width:72px!important}

  .hero-copy .eyebrow{font-size:6px!important;margin-bottom:5px!important}
  .hero h1{font-size:clamp(25px,5.4vw,38px)!important;margin-bottom:7px!important}
  .hero-copy>p{font-size:9px!important;line-height:1.3!important;max-width:640px!important}
  .hero-actions{margin-top:8px!important}
  .hero-actions .btn{min-height:29px!important;font-size:6.5px!important;padding:0 9px!important}

  .stats{margin-top:7px!important;padding-top:7px!important}
  .stat strong{font-size:20px!important}
  .stat span{font-size:5.8px!important;margin-top:3px!important}

  .services-v2{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding-top:58px!important;
    padding-bottom:10px!important;
  }

  .services-intro{
    display:grid!important;
    grid-template-columns:1.35fr .65fr!important;
    gap:18px!important;
    align-items:end!important;
    margin-bottom:9px!important;
  }

  .services-intro h2{font-size:25px!important;margin-top:5px!important}
  .services-note{margin-top:0!important;padding-top:7px!important}
  .services-note p{font-size:7.6px!important;line-height:1.25!important}
  .services-note span{font-size:5.8px!important;margin-bottom:4px!important}

  .capability-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .capability-card,
  .capability-card.mobile-active{
    padding:8px 9px 9px!important;
    border-radius:11px!important;
  }

  .capability-card h3{font-size:12.5px!important;margin-bottom:3px!important}
  .capability-card p{font-size:6.9px!important;line-height:1.2!important}
  .cap-top span{width:18px!important;height:18px!important;font-size:5.5px!important}
}


/* ======================================================================
   REPLAY MOBILE V7 — MOBILE-ONLY POLISH
   Desktop is intentionally unchanged.
   - Full first viewport: Hero + stats, visually filled and balanced.
   - Second viewport: What We Do, six elegant rectangular cards.
   - Exact supplied Replay mark is used as favicon/bookmark/social icon.
   ====================================================================== */

@media (max-width:760px){

  /* --- HERO: one complete first screen --- */
  .hero{
    position:relative!important;
    isolation:isolate!important;
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding-top:78px!important;
    padding-bottom:14px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    overflow:hidden!important;
  }

  .hero::before{
    content:""!important;
    position:absolute!important;
    z-index:-1!important;
    width:88vw!important;
    height:88vw!important;
    max-width:440px!important;
    max-height:440px!important;
    left:50%!important;
    top:42%!important;
    transform:translate(-50%,-50%)!important;
    border-radius:50%!important;
    background:radial-gradient(circle,rgba(207,31,50,.11) 0%,rgba(207,31,50,.045) 37%,transparent 70%)!important;
    pointer-events:none!important;
  }

  .hero-grid{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    text-align:center!important;
  }

  .hero-logo-panel{
    flex:0 0 auto!important;
    min-height:0!important;
    width:100%!important;
    margin:0!important;
    padding:0 0 clamp(10px,1.8vh,16px)!important;
    border:0!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
  }

  .hero-logo-panel img{
    width:clamp(126px,35vw,154px)!important;
    height:auto!important;
    max-height:none!important;
    margin:0 auto!important;
    object-fit:contain!important;
    object-position:center!important;
    filter:drop-shadow(0 12px 34px rgba(0,0,0,.24))!important;
  }

  .hero-copy{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
  }

  .hero-copy .eyebrow{
    margin:0 0 9px!important;
    font-size:7.5px!important;
    line-height:1!important;
    letter-spacing:.19em!important;
    color:#73736f!important;
  }

  .hero h1{
    width:100%!important;
    max-width:390px!important;
    margin:0 auto 12px!important;
    font-size:clamp(35px,10.6vw,45px)!important;
    line-height:.92!important;
    letter-spacing:-.052em!important;
    font-weight:620!important;
    text-wrap:balance!important;
  }

  .hero-copy>p{
    max-width:342px!important;
    margin:0 auto!important;
    font-size:11.4px!important;
    line-height:1.48!important;
    color:#999994!important;
    text-wrap:balance!important;
  }

  .hero-actions{
    width:100%!important;
    margin-top:14px!important;
    gap:8px!important;
    display:flex!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
  }

  .hero-actions .btn{
    min-height:36px!important;
    padding:0 12px!important;
    font-size:7.5px!important;
    letter-spacing:.095em!important;
    white-space:nowrap!important;
    border-radius:999px!important;
  }

  /* A vertical stat stack fills the lower part of the first screen
     more naturally than three tiny columns. */
  .stats{
    flex:0 0 auto!important;
    width:100%!important;
    margin-top:10px!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    border-top:1px solid var(--line)!important;
  }

  .stat{
    min-height:46px!important;
    margin:0!important;
    padding:7px 2px!important;
    border:0!important;
    border-bottom:1px solid var(--line-soft)!important;
    display:grid!important;
    grid-template-columns:minmax(92px,.42fr) 1fr!important;
    align-items:center!important;
    gap:14px!important;
    text-align:left!important;
  }

  .stat:last-child{
    border-bottom:0!important;
  }

  .stat strong{
    display:block!important;
    font-size:clamp(25px,7.8vw,32px)!important;
    line-height:.94!important;
    letter-spacing:-.055em!important;
  }

  .stat span{
    display:block!important;
    margin:0!important;
    font-size:8.4px!important;
    line-height:1.15!important;
    letter-spacing:.115em!important;
    text-transform:uppercase!important;
    color:#8e8e89!important;
  }

  /* --- WHAT WE DO: full second screen, premium rectangles --- */
  .services-v2{
    position:relative!important;
    isolation:isolate!important;
    min-height:100svh!important;
    height:100svh!important;
    max-height:100svh!important;
    padding-top:78px!important;
    padding-bottom:16px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .services-v2::before{
    width:86vw!important;
    height:86vw!important;
    right:-37vw!important;
    top:20%!important;
    opacity:.72!important;
  }

  .services-intro{
    flex:0 0 auto!important;
    display:block!important;
    margin:0 0 15px!important;
  }

  .services-intro-copy .section-kicker{
    font-size:7px!important;
    letter-spacing:.18em!important;
  }

  .services-intro h2{
    max-width:355px!important;
    margin:8px 0 0!important;
    font-size:clamp(27px,7.7vw,34px)!important;
    line-height:.96!important;
    letter-spacing:-.045em!important;
  }

  .services-note{
    max-width:none!important;
    margin-top:10px!important;
    padding-top:8px!important;
  }

  .services-note::before{
    width:42px!important;
  }

  .services-note span{
    margin-bottom:4px!important;
    font-size:6.4px!important;
    letter-spacing:.17em!important;
  }

  .services-note p{
    max-width:338px!important;
    margin:0!important;
    font-size:8.8px!important;
    line-height:1.32!important;
  }

  .capability-grid{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    border:0!important;
    overflow:visible!important;
    position:relative!important;
  }

  .capability-card,
  .capability-card.mobile-active{
    position:relative!important;
    inset:auto!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:12px 11px 11px!important;
    border:1px solid #232321!important;
    border-radius:16px!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    background:
      linear-gradient(145deg,rgba(18,18,18,.98),rgba(9,9,9,.95))!important;
    box-shadow:0 10px 30px rgba(0,0,0,.14)!important;
    opacity:0!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:
      opacity .58s cubic-bezier(.2,.75,.2,1),
      transform .58s cubic-bezier(.2,.75,.2,1),
      border-color .25s ease,
      background .25s ease!important;
  }

  .capability-card:nth-child(odd){transform:translate3d(-14px,10px,0)!important}
  .capability-card:nth-child(even){transform:translate3d(14px,10px,0)!important}
  .capability-card.in{
    opacity:1!important;
    transform:translate3d(0,0,0)!important;
  }

  .capability-card:nth-child(2){transition-delay:.05s!important}
  .capability-card:nth-child(3){transition-delay:.08s!important}
  .capability-card:nth-child(4){transition-delay:.11s!important}
  .capability-card:nth-child(5){transition-delay:.14s!important}
  .capability-card:nth-child(6){transition-delay:.17s!important}

  .capability-card::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:14px!important;
    bottom:14px!important;
    width:2px!important;
    border-radius:3px!important;
    background:linear-gradient(to bottom,transparent,var(--red),transparent)!important;
    opacity:.52!important;
  }

  .capability-card::after{
    content:""!important;
    position:absolute!important;
    inset:-40% -70%!important;
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.055) 50%,transparent 58%)!important;
    transform:translateX(-34%)!important;
    transition:transform .95s cubic-bezier(.2,.7,.2,1)!important;
    pointer-events:none!important;
  }

  .capability-card.in::after{
    transform:translateX(34%)!important;
  }

  .capability-card:active{
    border-color:#4b262a!important;
    background:linear-gradient(145deg,#151515,#0d0d0d)!important;
    transform:scale(.985)!important;
  }

  /* No icon-like circles. Keep only a quiet service number. */
  .cap-top{
    position:absolute!important;
    top:10px!important;
    right:10px!important;
    min-height:0!important;
    margin:0!important;
  }

  .cap-top i{
    display:none!important;
  }

  .cap-top span{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    border:0!important;
    border-radius:0!important;
    padding:0!important;
    background:transparent!important;
    font-size:6.4px!important;
    line-height:1!important;
    letter-spacing:.14em!important;
    color:#595955!important;
  }

  .capability-card h3{
    max-width:92%!important;
    margin:0 0 5px!important;
    font-size:clamp(13px,3.7vw,15px)!important;
    line-height:1.05!important;
    letter-spacing:-.027em!important;
    font-weight:560!important;
  }

  .capability-card p{
    max-width:none!important;
    margin:0!important;
    font-size:7.8px!important;
    line-height:1.32!important;
    color:#7e7e79!important;
  }

  .mobile-cap-dots{display:none!important}

  .work-section{
    margin-top:0!important;
  }
}

/* Shorter phones: preserve the "one screen" promise without clipping. */
@media (max-width:760px) and (max-height:720px){
  .hero{padding-top:72px!important;padding-bottom:9px!important}
  .hero-logo-panel{padding-bottom:7px!important}
  .hero-logo-panel img{width:112px!important}
  .hero-copy .eyebrow{margin-bottom:6px!important;font-size:6.6px!important}
  .hero h1{font-size:clamp(31px,9.7vw,38px)!important;margin-bottom:8px!important}
  .hero-copy>p{font-size:10px!important;line-height:1.36!important;max-width:330px!important}
  .hero-actions{margin-top:9px!important}
  .hero-actions .btn{min-height:31px!important;font-size:6.7px!important}
  .stats{margin-top:7px!important}
  .stat{min-height:38px!important;padding:5px 2px!important}
  .stat strong{font-size:24px!important}
  .stat span{font-size:7.2px!important}

  .services-v2{padding-top:70px!important;padding-bottom:10px!important}
  .services-intro{margin-bottom:10px!important}
  .services-intro h2{font-size:25px!important;margin-top:6px!important}
  .services-note{margin-top:6px!important;padding-top:6px!important}
  .services-note p{font-size:7.8px!important}
  .capability-grid{gap:6px!important}
  .capability-card,.capability-card.mobile-active{padding:9px 9px 8px!important;border-radius:13px!important}
  .capability-card h3{font-size:12.6px!important;margin-bottom:3px!important}
  .capability-card p{font-size:6.9px!important;line-height:1.22!important}
}

/* Mobile landscape: compact but still polished; desktop remains untouched. */
@media (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none){
  .hero{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding-top:60px!important;
    padding-bottom:8px!important;
  }

  .hero-grid{
    display:grid!important;
    grid-template-columns:128px minmax(0,1fr)!important;
    gap:18px!important;
    text-align:left!important;
    align-items:center!important;
  }

  .hero-logo-panel{padding:0!important}
  .hero-logo-panel img{width:104px!important}
  .hero-copy{align-items:flex-start!important}
  .hero-copy .eyebrow{font-size:6px!important;margin-bottom:5px!important}
  .hero h1{max-width:650px!important;font-size:clamp(26px,5.5vw,39px)!important;margin:0 0 6px!important}
  .hero-copy>p{font-size:8.5px!important;line-height:1.27!important;max-width:650px!important;margin:0!important}
  .hero-actions{justify-content:flex-start!important;margin-top:8px!important}
  .hero-actions .btn{min-height:28px!important;font-size:6.2px!important;padding:0 9px!important}

  .stats{
    grid-template-columns:repeat(3,1fr)!important;
    border-top:1px solid var(--line)!important;
  }
  .stat{
    min-height:0!important;
    padding:6px 8px!important;
    grid-template-columns:1fr!important;
    gap:2px!important;
    border-right:1px solid var(--line)!important;
    border-bottom:0!important;
    text-align:center!important;
  }
  .stat:last-child{border-right:0!important}
  .stat strong{font-size:20px!important}
  .stat span{font-size:5.7px!important}

  .services-v2{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding-top:58px!important;
    padding-bottom:8px!important;
  }
  .services-intro{
    display:grid!important;
    grid-template-columns:1.3fr .7fr!important;
    gap:18px!important;
    align-items:end!important;
    margin-bottom:8px!important;
  }
  .services-intro h2{font-size:24px!important;margin-top:4px!important}
  .services-note{margin-top:0!important;padding-top:6px!important}
  .services-note p{font-size:7px!important}
  .services-note span{font-size:5.5px!important}
  .capability-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .capability-card,.capability-card.mobile-active{padding:8px 9px 8px!important;border-radius:12px!important}
  .capability-card h3{font-size:11.8px!important;margin-bottom:3px!important}
  .capability-card p{font-size:6.5px!important;line-height:1.2!important}
}


/* ======================================================================
   V8 — LANDSCAPE PHONE ONLY / WHAT WE DO ONLY
   No desktop changes. No portrait-mobile changes.
   ====================================================================== */
@media (orientation:landscape) and (max-width:950px) and (max-height:600px) and (hover:none){

  /* Make the full second screen feel filled and structured like desktop. */
  .services-v2{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding-top:60px!important;
    padding-bottom:10px!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .services-intro{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:1.25fr .75fr!important;
    gap:22px!important;
    align-items:end!important;
    margin:0 0 10px!important;
  }

  .services-intro-copy .section-kicker{
    font-size:6px!important;
    letter-spacing:.18em!important;
  }

  .services-intro h2{
    max-width:none!important;
    margin:5px 0 0!important;
    font-size:25px!important;
    line-height:.94!important;
    letter-spacing:-.045em!important;
  }

  .services-note{
    max-width:none!important;
    margin:0!important;
    padding-top:7px!important;
  }

  .services-note::before{
    width:40px!important;
  }

  .services-note span{
    margin-bottom:4px!important;
    font-size:5.6px!important;
  }

  .services-note p{
    max-width:380px!important;
    margin:0!important;
    font-size:7.2px!important;
    line-height:1.25!important;
  }

  /* Desktop-like 3 × 2 rectangle grid, all six visible immediately. */
  .capability-grid{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    border:0!important;
    overflow:visible!important;
  }

  .capability-card,
  .capability-card.mobile-active,
  .capability-card.in{
    position:relative!important;
    inset:auto!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:11px 13px 10px!important;
    border:1px solid #292927!important;
    border-radius:7px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    background:rgba(11,11,11,.90)!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    transition:
      border-color .24s ease,
      background .24s ease,
      transform .24s ease!important;
  }

  /* Remove the portrait-only decorative side bar / shimmer. */
  .capability-card::before{
    display:none!important;
  }

  .capability-card::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    height:2px!important;
    background:var(--red)!important;
    transform:scaleX(.16)!important;
    transform-origin:left!important;
    opacity:.72!important;
    transition:transform .28s ease,opacity .28s ease!important;
  }

  .capability-card:active{
    transform:translateY(-1px)!important;
    border-color:#473034!important;
    background:#101010!important;
  }

  .capability-card:active::after{
    transform:scaleX(1)!important;
    opacity:1!important;
  }

  /* Restore the elegant desktop-style number + rule inside each rectangle. */
  .cap-top{
    position:static!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    min-height:0!important;
    margin:0 0 10px!important;
  }

  .cap-top i{
    display:block!important;
    height:1px!important;
    flex:1!important;
    background:#292927!important;
  }

  .cap-top span{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    font-size:6.4px!important;
    line-height:1!important;
    letter-spacing:.16em!important;
    color:#686864!important;
  }

  .capability-card h3{
    max-width:100%!important;
    margin:0 0 5px!important;
    font-size:16px!important;
    line-height:1.02!important;
    letter-spacing:-.03em!important;
    font-weight:540!important;
  }

  .capability-card p{
    max-width:100%!important;
    margin:0!important;
    font-size:7.8px!important;
    line-height:1.28!important;
    color:#858580!important;
  }

  .mobile-cap-dots{
    display:none!important;
  }
}


/* ======================================================================
   V10 — PORTRAIT MOBILE ONLY / WHAT WE DO ONLY
   Desktop unchanged.
   Mobile landscape unchanged.
   Every other section unchanged.
   ====================================================================== */
@media (max-width:760px) and (orientation:portrait){

  /* Keep the second screen structure, but make the service elements
     compact horizontal rectangles sized around their actual text. */
  .services-v2{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding-top:76px!important;
    padding-bottom:14px!important;
    overflow:hidden!important;
  }

  .services-intro{
    margin-bottom:12px!important;
  }

  .services-intro h2{
    margin-top:7px!important;
  }

  .services-note{
    margin-top:8px!important;
    padding-top:7px!important;
  }

  /* Replace the old 2×3 square/button feel with six slim text rectangles. */
  .capability-grid{
    flex:0 0 auto!important;
    height:auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    overflow:visible!important;
    border:0!important;
  }

  .capability-card,
  .capability-card.mobile-active,
  .capability-card.in{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:9px 12px 9px 10px!important;
    border:1px solid #252523!important;
    border-radius:12px!important;
    overflow:hidden!important;

    display:grid!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    row-gap:2px!important;
    align-items:center!important;

    background:
      linear-gradient(100deg,rgba(17,17,17,.98),rgba(10,10,10,.94))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.018),
      0 7px 18px rgba(0,0,0,.10)!important;

    opacity:0!important;
    visibility:visible!important;
    pointer-events:auto!important;

    transition:
      opacity .48s cubic-bezier(.2,.75,.2,1),
      transform .48s cubic-bezier(.2,.75,.2,1),
      border-color .22s ease,
      background .22s ease!important;
  }

  /* Elegant alternating scroll entrance, without looking like buttons. */
  .capability-card:nth-child(odd),
  .capability-card:nth-child(even){
    transform:translate3d(0,10px,0)!important;
  }

  .capability-card:nth-child(odd){
    transform:translate3d(-10px,10px,0)!important;
  }

  .capability-card:nth-child(even){
    transform:translate3d(10px,10px,0)!important;
  }

  .capability-card.in{
    opacity:1!important;
    transform:translate3d(0,0,0)!important;
  }

  /* Thin accent grows in when each card arrives. */
  .capability-card::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:9px!important;
    bottom:9px!important;
    width:2px!important;
    border-radius:3px!important;
    background:var(--red)!important;
    opacity:.68!important;
    transform:scaleY(.26)!important;
    transform-origin:center!important;
    transition:transform .5s cubic-bezier(.2,.75,.2,1),opacity .3s ease!important;
  }

  .capability-card.in::before{
    transform:scaleY(1)!important;
    opacity:.95!important;
  }

  /* Remove the old sweeping empty-box shimmer. */
  .capability-card::after{
    content:none!important;
    display:none!important;
  }

  .capability-card:active{
    transform:scale(.992)!important;
    border-color:#49282c!important;
    background:linear-gradient(100deg,#151515,#0d0d0d)!important;
  }

  /* Quiet service number at the left, not an icon/button. */
  .cap-top{
    position:static!important;
    grid-column:1!important;
    grid-row:1 / span 2!important;
    width:30px!important;
    min-width:30px!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .cap-top i{
    display:none!important;
  }

  .cap-top span{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    font-size:7px!important;
    line-height:1!important;
    letter-spacing:.14em!important;
    color:#6f6f6a!important;
  }

  .capability-card h3{
    grid-column:2!important;
    grid-row:1!important;
    max-width:none!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.05!important;
    letter-spacing:-.02em!important;
    font-weight:570!important;
  }

  .capability-card p{
    grid-column:2!important;
    grid-row:2!important;
    max-width:none!important;
    margin:0!important;
    font-size:8px!important;
    line-height:1.28!important;
    color:#81817c!important;
  }

  .mobile-cap-dots{
    display:none!important;
  }
}

/* Extra compact portrait phones: same design, slightly tighter only. */
@media (max-width:760px) and (orientation:portrait) and (max-height:720px){
  .services-v2{
    padding-top:68px!important;
    padding-bottom:9px!important;
  }

  .services-intro{
    margin-bottom:8px!important;
  }

  .services-note{
    margin-top:5px!important;
    padding-top:5px!important;
  }

  .capability-grid{
    gap:5px!important;
  }

  .capability-card,
  .capability-card.mobile-active,
  .capability-card.in{
    padding:7px 10px 7px 9px!important;
    grid-template-columns:27px minmax(0,1fr)!important;
    column-gap:8px!important;
    border-radius:10px!important;
  }

  .cap-top{
    width:27px!important;
    min-width:27px!important;
  }

  .capability-card h3{
    font-size:12.4px!important;
  }

  .capability-card p{
    font-size:6.9px!important;
    line-height:1.2!important;
  }
}


/* ======================================================================
   V11 — PORTRAIT MOBILE ONLY / WHAT WE DO FULL-SCREEN FILL
   Keeps V10 visual style, but distributes the section vertically so the
   second mobile screen is fully occupied with no dead black area below.
   Desktop unchanged. Landscape unchanged. Other sections unchanged.
   ====================================================================== */
@media (max-width:760px) and (orientation:portrait){

  .services-v2{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    padding-top:72px!important;
    padding-bottom:14px!important;
    overflow:hidden!important;
  }

  .services-intro{
    flex:0 0 auto!important;
    margin-bottom:12px!important;
  }

  .services-intro h2{
    margin-top:7px!important;
  }

  .services-note{
    margin-top:8px!important;
    padding-top:7px!important;
  }

  /* Fill all remaining vertical space with the six service rectangles. */
  .capability-grid{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(6,minmax(0,1fr))!important;
    gap:7px!important;
    align-content:stretch!important;
    overflow:visible!important;
  }

  .capability-card,
  .capability-card.mobile-active,
  .capability-card.in{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:8px 12px 8px 10px!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-content:center!important;
    align-items:center!important;
    column-gap:10px!important;
    row-gap:2px!important;
    border-radius:12px!important;
  }

  .cap-top{
    align-self:center!important;
  }

  .capability-card h3{
    align-self:end!important;
    font-size:13.6px!important;
    line-height:1.02!important;
  }

  .capability-card p{
    align-self:start!important;
    font-size:7.8px!important;
    line-height:1.24!important;
  }
}

/* Smaller portrait phones: preserve the same full-screen rhythm while
   tightening the intro a little so all six cards still fill the page. */
@media (max-width:760px) and (orientation:portrait) and (max-height:720px){

  .services-v2{
    padding-top:62px!important;
    padding-bottom:9px!important;
  }

  .services-intro{
    margin-bottom:7px!important;
  }

  .services-intro h2{
    margin-top:5px!important;
  }

  .services-note{
    margin-top:4px!important;
    padding-top:4px!important;
  }

  .capability-grid{
    gap:5px!important;
  }

  .capability-card,
  .capability-card.mobile-active,
  .capability-card.in{
    padding:6px 10px 6px 9px!important;
    grid-template-columns:27px minmax(0,1fr)!important;
    column-gap:8px!important;
    border-radius:10px!important;
  }

  .capability-card h3{
    font-size:12px!important;
  }

  .capability-card p{
    font-size:6.7px!important;
    line-height:1.17!important;
  }
}