:root{
  --bg:#0d0e11;
  --bg2:#121318;
  --bg3:#17181d;
  --text:#f3f1ef;
  --muted:#a39f9c;
  --muted2:#777478;
  --accent:#bf3939;
  --accent2:#d24b4b;
  --gold:#c7a05a;
  --gold2:#e0bd78;
  --line:rgba(255,255,255,.085);
  --container:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button,input,textarea{font:inherit}
.container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}
.centered{text-align:center}
.section{padding:92px 0;position:relative;overflow:hidden}
.section--services{background:linear-gradient(135deg,#191a1f 0%,#14151a 56%,#101115 100%)}
.section--work{background:linear-gradient(135deg,#0d0e11 0%,#101116 58%,#0b0c0f 100%)}
.section--demo{background:linear-gradient(135deg,#17181d 0%,#131419 55%,#191a1f 100%)}
.section--process{background:linear-gradient(135deg,#0c0d10 0%,#111217 52%,#16171c 100%)}
.section--questions{background:linear-gradient(135deg,#1b1c21 0%,#16171c 58%,#121318 100%)}

/* modern ambient light leaks */
.ambient{position:absolute;pointer-events:none;filter:blur(90px);opacity:.24;border-radius:50%;z-index:0}
.ambient--red{width:380px;height:380px;background:rgba(191,57,57,.42)}
.ambient--white{width:320px;height:320px;background:rgba(255,255,255,.15)}
.ambient--blue{width:360px;height:360px;background:rgba(55,92,140,.23)}
.ambient--left{left:-190px;top:18%}
.ambient--right{right:-190px;top:24%}
.section>.container,.section>.marquee-wrap{position:relative;z-index:1}

/* very small nav */
.site-header{position:fixed;top:7px;left:0;right:0;z-index:100;pointer-events:none}
.topbar{
  width:min(calc(100% - 16px),610px);
  height:32px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:7px;
  padding:2px 4px 2px 6px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:999px;
  background:rgba(10,11,14,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  pointer-events:auto
}
.topbar__logo{width:62px;height:23px;display:flex;align-items:center;overflow:hidden}
.topbar__logo img{width:58px;max-height:20px;object-fit:contain;object-position:left center}
.topbar__links{display:flex;justify-content:center;gap:9px}
.topbar__links a{color:#aaa7a5;font-size:7.8px;font-weight:760;transition:color .2s ease;white-space:nowrap}
.topbar__links a:hover{color:#fff}
.topbar__cta{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  font-size:7px;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 6px 15px rgba(191,57,57,.18)
}

/* hero with optional background video */
.hero-page{
  min-height:100svh;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  padding:72px 20px 46px;
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.05),transparent 23%),
    radial-gradient(circle at 80% 30%,rgba(191,57,57,.13),transparent 24%),
    linear-gradient(135deg,#15161a 0%,#0c0d10 54%,#15161a 100%)
}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.32}
.hero-bg-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,9,11,.50),rgba(8,9,11,.82) 75%,rgba(8,9,11,.96))}
.hero-light{position:absolute;z-index:2;pointer-events:none;filter:blur(95px);border-radius:50%;mix-blend-mode:screen}
.hero-light--one{width:350px;height:350px;left:-130px;top:12%;background:rgba(255,255,255,.09)}
.hero-light--two{width:420px;height:420px;right:-160px;top:20%;background:rgba(191,57,57,.18)}
.hero-light--three{width:280px;height:280px;left:46%;bottom:-140px;background:rgba(60,88,130,.10)}
.hero-card{
  width:min(100%,820px);
  position:relative;
  z-index:3;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center
}
.hero-logo{width:min(44vw,220px);height:auto;margin-bottom:26px;filter:drop-shadow(0 14px 28px rgba(0,0,0,.30))}
.hero-title{margin:0;display:flex;flex-direction:column;font-size:clamp(36px,5vw,62px);line-height:1.04;letter-spacing:-.05em;font-weight:900}
.hero-title span{color:#f4f1ef}
.hero-title strong{color:#c84747;font-weight:900}
.hero-intro{max-width:620px;margin:16px 0 0;color:#aaa6a3;font-size:clamp(14px,1.5vw,17px)}
.hero-services{margin:9px 0 0;color:#706e72;font-size:10px;letter-spacing:.035em}
.hero-actions{width:min(100%,440px);display:grid;gap:8px;margin-top:25px}

/* buttons */
.btn{min-height:46px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid transparent;font-size:10px;font-weight:900;transition:.2s ease}
.btn:hover{transform:translateY(-2px)}
.btn--red{color:#fff;background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:0 11px 30px rgba(191,57,57,.22)}
.btn--ghost{color:#eeeae7;border-color:var(--line);background:rgba(255,255,255,.025)}
.btn--full{width:100%}

/* socials */
.social-icons{display:flex;gap:8px;margin-top:18px}
.social-icons a{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:#bcb8b5;border:1px solid var(--line);background:rgba(255,255,255,.02);transition:.2s ease}
.social-icons a:hover{color:#fff;border-color:rgba(191,57,57,.5);box-shadow:0 0 14px rgba(191,57,57,.12);transform:translateY(-1px)}
.social-icons svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fiverr-icon{display:grid!important;place-items:center!important}
.fiverr-icon span{display:block;line-height:1;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:900;letter-spacing:-.08em;transform:none}

/* titles bug-free */
.section-kicker{margin:0 0 12px;color:#ca4b4b;font-size:8.8px;font-weight:900;letter-spacing:.18em}
.section-kicker::before{content:"";width:5px;height:5px;display:inline-block;margin-right:7px;border-radius:50%;background:#ca4b4b;box-shadow:0 0 10px rgba(191,57,57,.4);vertical-align:1px}
.section-kicker--below{margin-top:24px;margin-bottom:0}
.display-title{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:clamp(31px,4vw,50px);
  line-height:1.11;
  letter-spacing:-.043em;
  font-weight:900;
  overflow:visible
}
.display-title span{display:block;color:#efedeb;padding:0 .04em .06em}
.display-title strong{display:block;color:#c74a4a;font-weight:900;padding:0 .04em .11em}
.single-line-title{
  margin:0;
  font-size:clamp(31px,4vw,50px);
  line-height:1.1;
  letter-spacing:-.043em;
  font-weight:900;
  color:#efedeb
}
.single-line-title strong{color:#c74a4a}
.lead{max-width:780px;margin:18px auto 0;color:#a19d9b;font-size:clamp(13px,1.4vw,16px);line-height:1.7}
.lead--light{color:#9b9895}
.intro-copy{text-align:center;max-width:920px}

/* services no blank stretched area */
.services-layout{margin-top:42px;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:18px;align-items:start}
.services-nav,.services-content{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.022);box-shadow:0 18px 46px rgba(0,0,0,.15)}
.services-nav{padding:10px 25px}
.service-tab{width:100%;display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:center;padding:15px 0;border:0;border-bottom:1px solid rgba(255,255,255,.065);background:transparent;color:#e4e1df;cursor:pointer;text-align:left}
.service-tab:last-child{border-bottom:0}
.service-tab span{color:#747174;font-size:9px;font-weight:900}
.service-tab b{font-size:clamp(14px,1.45vw,19px);font-weight:850}
.service-tab i{font-style:normal;color:#737074;transition:.2s ease}
.service-tab:hover,.service-tab.is-active{color:#d04b4b}
.service-tab:hover i,.service-tab.is-active i{color:#d04b4b;transform:translateX(4px)}
.services-content{display:grid;place-items:start;padding:30px;overflow:hidden}
.service-panel{display:none;width:100%;animation:fadeUp .28s ease both}
.service-panel.is-active{display:block}
.panel-index{margin:0 0 9px;color:#ca4b4b;font-size:8.7px;font-weight:900;letter-spacing:.12em}
.service-panel h2{margin:0 0 11px;font-size:clamp(27px,3vw,40px);line-height:1.05;letter-spacing:-.04em}
.service-panel>p:last-of-type{margin:0;max-width:590px;color:#9d9997;font-size:14px}
.service-preview{display:block;width:min(100%,590px);margin-top:20px;border-radius:15px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line);box-shadow:0 13px 32px rgba(0,0,0,.16)}
.service-preview img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.service-preview:hover img{transform:scale(1.025)}

/* moving work */
.marquee-wrap{margin-top:40px;overflow:hidden}
.marquee-row{overflow:hidden;padding:6px 0}
.marquee-track{width:max-content;display:flex;gap:13px;animation:marquee 34s linear infinite}
.marquee-row--reverse .marquee-track{animation-direction:reverse;animation-duration:38s}
.marquee-row:hover .marquee-track{animation-play-state:paused}
.marquee-card{width:clamp(240px,27vw,390px);aspect-ratio:16/10;flex:0 0 auto;border-radius:15px;overflow:hidden;border:1px solid var(--line);box-shadow:0 15px 38px rgba(0,0,0,.2)}
.marquee-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.marquee-card:hover img{transform:scale(1.03)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6.5px))}}
.more-work{margin-top:45px;text-align:center}
.more-work h3,.more-work h2{margin:0 0 8px;font-size:clamp(25px,3vw,36px);letter-spacing:-.035em}
.more-work p{margin:0 0 19px;color:#96928f;font-size:13px}

/* demo */
.showreel-wrap{margin-top:35px}
.showreel{width:min(100%,940px);margin-inline:auto;border-radius:17px;border:1px solid var(--line);background:#000;box-shadow:0 17px 42px rgba(0,0,0,.22)}
.showreel-copy{max-width:800px;margin:20px auto 0;text-align:center;color:#95918f;font-size:14px}

/* process */
.project-card{max-width:760px;margin-top:36px;padding:20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.022);box-shadow:0 18px 46px rgba(0,0,0,.16)}
.project-step{display:grid;grid-template-columns:48px 1fr;gap:11px;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.065)}
.project-step>span{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:#bf3939;color:#fff;font-size:9px;font-weight:900}
.project-step h3{margin:0 0 3px;font-size:14px}
.project-step p{margin:0;color:#989491;font-size:13px}
.project-card .btn{margin-top:18px}
.project-note{margin:10px 0 0;color:#757276;font-size:10px;text-align:center}

/* questions */
.faq-list{max-width:760px;margin-top:32px}
.faq-item{margin-bottom:5px;border:1px solid rgba(255,255,255,.075);border-radius:8px;background:rgba(255,255,255,.016);overflow:hidden;transition:.2s ease}
.faq-item:hover{border-color:rgba(191,57,57,.50);box-shadow:0 0 16px rgba(191,57,57,.10);transform:translateY(-1px)}
.faq-item summary{position:relative;list-style:none;cursor:pointer;padding:9px 38px 9px 13px;font-size:11px;font-weight:760;color:#e3e0de}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.09);color:#888582}
.faq-item:hover summary::after{color:#d04b4b;border-color:rgba(191,57,57,.42)}
.faq-item[open] summary::after{content:"−";color:#d04b4b}
.faq-item p{margin:0;padding:0 13px 10px;color:#938f8c;font-size:11px}
.faq-contact{margin-top:22px;text-align:center}
.faq-contact h3{margin:0 0 4px;font-size:16px}
.faq-contact a{color:#ce4b4b;font-weight:850}

/* portfolio */
.portfolio-page{padding-top:34px}
.portfolio-hero{padding-bottom:52px}
.portfolio-lead{margin-left:0}
.portfolio-filters{display:flex;flex-wrap:wrap;gap:7px;margin-top:23px}
.filter-btn{padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:#a7a3a0;background:rgba(255,255,255,.018);cursor:pointer;font-size:9px;font-weight:850}
.filter-btn:hover,.filter-btn.is-active{color:#fff;background:#bf3939;border-color:#bf3939}
.portfolio-grid{width:min(calc(100% - 22px),1360px);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.portfolio-card{aspect-ratio:16/10;overflow:hidden;border-radius:15px;border:1px solid var(--line)}
.portfolio-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.portfolio-card:hover img{transform:scale(1.03)}
.portfolio-card.is-hidden{display:none}

/* footer */
.footer{padding:22px 0 25px;background:#090a0c;border-top:1px solid rgba(255,255,255,.055)}
.footer-inner{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;color:#716e72;font-size:10px}
.footer-inner>img{width:138px;height:auto}
.footer-inner>a{color:#a7a3a0}
.footer .social-icons{margin-top:0}
.footer .fiverr-icon{display:grid!important;place-items:center!important}

/* inquiry page */
.inquiry-body{background:#08090b}
.inquiry-page{min-height:100vh;position:relative;overflow:hidden;padding:32px 18px 70px;background:linear-gradient(180deg,#090a0c 0%,#0b0c0f 45%,#08090b 100%)}
.inquiry-glow{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;opacity:.16}
.inquiry-glow--one{width:380px;height:380px;right:-180px;top:14%;background:rgba(199,160,90,.55)}
.inquiry-glow--two{width:320px;height:320px;left:-170px;top:52%;background:rgba(191,57,57,.25)}
.inquiry-back{position:relative;z-index:2;display:inline-flex;margin:0 0 30px 10px;color:#8f8b86;font-size:11px}
.inquiry-back:hover{color:#d8d2c9}
.inquiry-shell{position:relative;z-index:2;width:min(100%,720px);margin:0 auto}
.inquiry-head{text-align:center;margin-bottom:42px}
.mini-36{width:48px;height:48px;margin:0 auto 15px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#17181b,#0d0e10);border:1px solid rgba(199,160,90,.32);color:var(--gold2);font-size:20px;font-weight:950;letter-spacing:-.08em;box-shadow:0 10px 26px rgba(0,0,0,.24)}
.inquiry-brand{margin:0 0 8px;color:#d8d3cc;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.inquiry-head h1{margin:0;color:#f1eee9;font-size:clamp(30px,5vw,46px);line-height:1.08;letter-spacing:-.04em}
.inquiry-head>p:last-child{max-width:620px;margin:16px auto 0;color:#8e8a85;font-size:14px;line-height:1.7}
.inquiry-form{display:grid;gap:34px}
.form-group{margin:0;padding:0;border:0;display:grid;gap:16px}
.form-group legend{margin-bottom:4px;color:#e8e3dc;font-size:17px;font-weight:800}
.field{display:grid;gap:8px}
.field>span,.contact-pref>span{color:#aaa49c;font-size:12px;font-weight:650}
.field input,.field textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.085);
  border-radius:11px;
  background:#111216;
  color:#f0ece7;
  padding:13px 14px;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease
}
.field textarea{resize:vertical;min-height:140px}
.field input::placeholder,.field textarea::placeholder{color:#56534f}
.field input:focus,.field textarea:focus{border-color:rgba(199,160,90,.78);box-shadow:0 0 0 3px rgba(199,160,90,.08);background:#131419}
.field-question{margin:0;color:#c6c0b8;font-size:13px}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.choice-grid--contact{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:9px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{min-height:42px;display:flex;align-items:center;padding:9px 11px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#111216;color:#9e9992;font-size:11px;cursor:pointer;transition:.2s ease}
.choice input:checked+span{color:#f0e8dc;border-color:rgba(199,160,90,.62);background:rgba(199,160,90,.08);box-shadow:inset 0 0 0 1px rgba(199,160,90,.05)}
.choice span:hover{border-color:rgba(199,160,90,.30);color:#d8d0c6}
.contact-pref{display:grid;gap:4px}
.gold-submit{min-height:52px;border:1px solid rgba(255,255,255,.06);border-radius:999px;background:linear-gradient(135deg,#e0bd78,#b98d43);color:#17130e;font-weight:950;font-size:12px;letter-spacing:.04em;cursor:pointer;box-shadow:0 14px 36px rgba(199,160,90,.15);transition:.2s ease}
.gold-submit:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(199,160,90,.21)}
.form-note{margin:-20px 0 0;text-align:center;color:#6f6a64;font-size:10px}

@keyframes fadeUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .marquee-track{animation:none!important}
}
@media(max-width:900px){
  .topbar{width:min(calc(100% - 12px),580px)}
  .topbar__links{gap:7px}
  .services-layout{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .topbar{grid-template-columns:auto 1fr auto;width:calc(100% - 10px)}
  .topbar__links{display:none}
  .topbar__logo{width:56px}
  .topbar__logo img{width:52px}
  .section{padding:68px 0}
  .container{width:min(calc(100% - 26px),var(--container))}
  .hero-logo{width:min(58vw,190px)}
  .hero-title{font-size:clamp(32px,9vw,46px)}
  .service-tab{grid-template-columns:30px 1fr auto;padding:13px 0}
  .service-tab b{font-size:13px}
  .services-content{padding:22px 18px}
  .marquee-card{width:240px}
  .single-line-title{font-size:clamp(30px,9vw,43px)}
  .portfolio-grid{grid-template-columns:1fr;width:calc(100% - 16px)}
  .footer-inner{grid-template-columns:1fr;justify-items:center;text-align:center}
  .footer-inner>img{width:170px}
  .choice-grid,.choice-grid--contact{grid-template-columns:1fr}
  .inquiry-page{padding-top:22px}
  .inquiry-shell{width:min(100%,620px)}
}


/* ===== V7 FIXES ===== */
body{background:radial-gradient(circle at 14% 12%,rgba(255,255,255,.025),transparent 22%),radial-gradient(circle at 84% 26%,rgba(191,57,57,.05),transparent 25%),#0b0c0f}

/* Smaller nav. Logo directly left of Usluge, CTA directly right of Pitanja. */
.topbar{width:min(calc(100% - 14px),540px)!important;height:31px!important;display:flex!important;justify-content:center!important;gap:7px!important;padding:2px 4px 2px 5px!important}
.topbar__logo{flex:0 0 54px!important;width:54px!important;height:22px!important;margin:0!important}
.topbar__logo img{width:51px!important;max-height:19px!important;object-fit:contain!important}
.topbar__links{display:flex!important;align-items:center!important;gap:8px!important;margin:0!important}
.topbar__links a{font-size:7.4px!important;white-space:nowrap!important}
.topbar__cta{min-height:23px!important;padding:0 8px!important;font-size:6.8px!important;margin:0!important}

/* All service categories have exactly the same dimensions: no next-section jump. */
.services-layout{height:470px!important;align-items:stretch!important}
.services-nav,.services-content{height:470px!important;min-height:470px!important}
.services-nav{padding:0 24px!important;display:grid!important;grid-template-rows:repeat(6,1fr)!important}
.service-tab{min-height:0!important;height:auto!important;padding:0!important}
.services-content{position:relative!important;padding:28px!important;display:block!important}
.service-panel{height:100%!important;display:none!important;flex-direction:column!important;margin:0!important}
.service-panel.is-active{display:flex!important}
.service-panel .panel-index{flex:0 0 auto!important}
.service-panel h2{flex:0 0 auto!important}
.service-panel>p:not(.panel-index){flex:0 0 auto!important;margin-bottom:0!important}
.service-preview{margin-top:auto!important;width:100%!important;height:255px!important;aspect-ratio:auto!important;flex:0 0 255px!important}
.service-preview img{width:100%!important;height:100%!important;object-fit:cover!important}

/* Modern ambient leaks / texture without making the page bright. */
.section--services,.section--demo,.section--questions{background-image:radial-gradient(circle at 12% 18%,rgba(255,255,255,.035),transparent 22%),radial-gradient(circle at 88% 30%,rgba(191,57,57,.065),transparent 28%),linear-gradient(135deg,#17181d 0%,#111217 58%,#0e0f13 100%)!important}
.section--work,.section--process{background-image:radial-gradient(circle at 82% 15%,rgba(191,57,57,.055),transparent 24%),radial-gradient(circle at 12% 68%,rgba(55,92,140,.045),transparent 22%),linear-gradient(135deg,#0b0c0f 0%,#0e0f13 58%,#090a0d 100%)!important}

/* Hero logo smaller; optional promo background video remains supported. */
.hero-logo{width:min(38vw,180px)!important}

/* Social icons, including centered Fiverr + Gmail. */
.social-icons{align-items:center!important;justify-content:center!important}
.social-icons a{display:grid!important;place-items:center!important}
.fiverr-icon span{display:block!important;line-height:1!important;transform:none!important}
.gmail-icon svg{width:14px!important;height:14px!important}

/* Footer: no text email. Logo left; icons right. */
.footer-inner{display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important}
.footer-inner>img{justify-self:start!important;width:138px!important}
.footer-inner>p{justify-self:center!important;margin:0!important;color:#666469!important}
.footer .social-icons{justify-self:end!important;margin-top:0!important}

/* Inquiry page uses same site background and logo. */
.inquiry-body{background:radial-gradient(circle at 80% 14%,rgba(191,57,57,.07),transparent 24%),radial-gradient(circle at 18% 45%,rgba(255,255,255,.025),transparent 22%),#0b0c0f!important}
.inquiry-page{background:linear-gradient(180deg,rgba(11,12,15,.96),rgba(9,10,13,.985))!important}
.inquiry-logo{width:min(42vw,190px);margin:0 auto 20px;filter:drop-shadow(0 12px 26px rgba(0,0,0,.28))}
.contact-rule{margin:0;color:#706c67;font-size:10px}
.form-error{margin:0;color:#d86767;font-size:11px}
.form-success,.form-server-error{padding:14px 16px;border-radius:11px;text-align:center;font-size:12px}
.form-success{display:grid;gap:2px;color:#d9d0c4;background:rgba(199,160,90,.08);border:1px solid rgba(199,160,90,.35)}
.form-server-error{color:#ddb0b0;background:rgba(191,57,57,.08);border:1px solid rgba(191,57,57,.3)}
.gold-submit:disabled{opacity:.55;cursor:wait;transform:none}

@media(max-width:900px){
  .services-layout{height:auto!important}
  .services-nav,.services-content{height:auto!important;min-height:0!important}
  .services-nav{grid-template-rows:none!important}
  .service-tab{min-height:52px!important}
  .service-panel{height:auto!important}
  .service-preview{height:auto!important;aspect-ratio:16/9!important;flex:auto!important}
}
@media(max-width:700px){
  .topbar{width:calc(100% - 10px)!important}
  .topbar__links{display:none!important}
  .footer-inner{grid-template-columns:1fr!important;justify-items:center!important;text-align:center!important}
  .footer-inner>img,.footer .social-icons{justify-self:center!important}
}


/* =========================
   V8 FIXES
   ========================= */

/* hidden messages must really stay hidden */
[hidden] {
  display: none !important;
}

/* Even narrower navbar */
.topbar {
  width: min(calc(100% - 12px), 490px) !important;
  height: 30px !important;
  gap: 6px !important;
  padding: 2px 4px 2px 5px !important;
}
.topbar__logo {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 21px !important;
}
.topbar__logo img {
  width: 45px !important;
  max-height: 18px !important;
}
.topbar__links {
  gap: 6px !important;
}
.topbar__links a {
  font-size: 7px !important;
}
.topbar__cta {
  min-height: 22px !important;
  padding: 0 7px !important;
  font-size: 6.3px !important;
}

/* Service area: larger, fixed, and fully populated on both sides */
.services-layout {
  height: 560px !important;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  gap: 20px !important;
}
.services-nav,
.services-content {
  height: 560px !important;
}
.services-nav {
  padding: 0 28px !important;
  grid-template-rows: repeat(6, 1fr) !important;
}
.service-tab {
  grid-template-columns: 34px 1fr auto !important;
  gap: 11px !important;
}
.service-tab__num {
  color: #777478 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
}
.service-tab__label {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.service-tab__label b {
  font-size: clamp(14px, 1.35vw, 18px) !important;
  line-height: 1.05;
}
.service-tab__label small {
  color: #817e7c;
  font-size: 9.5px;
  line-height: 1.35;
  font-weight: 500;
  max-width: 270px;
}
.service-tab:hover .service-tab__label small,
.service-tab.is-active .service-tab__label small {
  color: #aaa5a1;
}
.services-content {
  padding: 30px !important;
}
.service-panel {
  height: 100% !important;
  grid-template-rows: auto 1fr !important;
  gap: 18px !important;
}
.service-panel.is-active {
  display: grid !important;
}
.service-panel > .panel-index,
.service-panel > h2,
.service-panel > p {
  width: 100%;
}
.service-panel .service-preview {
  align-self: end !important;
  width: 100% !important;
  height: 315px !important;
  margin-top: 18px !important;
}
.service-panel h2 {
  font-size: clamp(28px, 2.9vw, 40px) !important;
}
.service-panel > p:not(.panel-index) {
  font-size: 14px !important;
  line-height: 1.6;
}

/* FAQ narrower */
.faq-list {
  max-width: 610px !important;
}

/* Portfolio heading perfectly centered */
.portfolio-heading {
  text-align: center;
}
.portfolio-heading .lead,
.portfolio-heading .portfolio-lead {
  margin-left: auto !important;
  margin-right: auto !important;
}
.portfolio-heading .portfolio-filters {
  justify-content: center;
}

/* File upload */
.file-upload {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}
.file-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.file-upload__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(199,160,90,.35);
  background: rgba(199,160,90,.08);
  color: #d8c19a;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
  transition: .2s ease;
}
.file-upload:hover .file-upload__button {
  border-color: rgba(199,160,90,.7);
  background: rgba(199,160,90,.12);
}
.file-upload__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8c8781;
  font-size: 11px;
}
.upload-note {
  margin: -5px 0 0;
  color: #66615c;
  font-size: 10px;
}

/* Success/error states */
.form-success,
.form-server-error {
  margin-top: 4px;
}
.form-success[hidden],
.form-server-error[hidden],
.form-error[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .topbar {
    width: min(calc(100% - 10px), 470px) !important;
  }
  .services-layout {
    height: auto !important;
    grid-template-columns: 1fr !important;
  }
  .services-nav,
  .services-content {
    height: auto !important;
  }
  .services-nav {
    grid-template-rows: none !important;
  }
  .service-tab {
    min-height: 72px !important;
  }
  .service-panel,
  .service-panel.is-active {
    height: auto !important;
  }
  .service-panel .service-preview {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

@media (max-width: 700px) {
  .topbar {
    width: calc(100% - 8px) !important;
  }
  .file-upload {
    grid-template-columns: 1fr;
  }
}


/* =========================
   V9 REFINEMENTS
   ========================= */

/* Navbar: larger than V8 so labels are comfortably readable, but still compact */
.topbar {
  width: min(calc(100% - 16px), 690px) !important;
  height: 39px !important;
  gap: 9px !important;
  padding: 3px 6px 3px 7px !important;
}
.topbar__logo {
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 28px !important;
}
.topbar__logo img {
  width: 68px !important;
  max-height: 24px !important;
}
.topbar__links {
  gap: 11px !important;
}
.topbar__links a {
  font-size: 8.8px !important;
}
.topbar__cta {
  min-height: 29px !important;
  padding: 0 11px !important;
  font-size: 7.8px !important;
}

/* Services: slightly shorter, less dead space, tighter title/description,
   and a medium thumbnail like the reference */
.services-layout {
  height: 500px !important;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important;
}
.services-nav,
.services-content {
  height: 500px !important;
}
.services-nav {
  padding: 0 26px !important;
}
.service-tab {
  position: relative;
  border-radius: 12px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.service-tab:hover,
.service-tab.is-active {
  background: rgba(191,57,57,.055) !important;
  box-shadow: inset 2px 0 0 rgba(191,57,57,.72) !important;
}
.service-tab:hover,
.service-tab.is-active,
.service-tab:hover i,
.service-tab.is-active i {
  color: #d24b4b !important;
}
.service-tab__label small {
  font-size: 9px !important;
  line-height: 1.28 !important;
  color: #7f7b79 !important;
}
.service-tab:hover .service-tab__label small,
.service-tab.is-active .service-tab__label small {
  color: #999491 !important;
}

/* Remove flashy active-state look from old rules */
.service-tab.is-active {
  border-color: transparent !important;
}
.service-tab,
.service-tab:hover,
.service-tab.is-active {
  filter: none !important;
}

/* Right panel copy stays compact and grouped */
.services-content {
  padding: 28px !important;
}
.service-panel {
  height: 100% !important;
  grid-template-rows: auto 1fr !important;
  gap: 12px !important;
}
.service-panel__copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  min-height: 0 !important;
}
.service-panel__copy .panel-index {
  margin: 0 0 10px !important;
}
.service-panel__copy h2 {
  margin: 0 0 8px !important;
  font-size: clamp(27px, 2.85vw, 39px) !important;
  line-height: 1.04 !important;
}
.service-panel__copy > p:last-child {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #9d9997 !important;
  max-width: 590px !important;
}
.service-preview {
  align-self: end !important;
  height: 245px !important;
  margin-top: 12px !important;
  border-radius: 15px !important;
}

/* Keep following section stable */
#featured-work {
  min-height: auto !important;
}

/* Promo poster label instead of Demo */
.showreel {
  overflow: hidden;
}

/* Inquiry uses the same red accent as the rest of the site */
.inquiry-glow--one {
  background: rgba(191,57,57,.35) !important;
}
.inquiry-logo {
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.28)) !important;
}
.field input:focus,
.field textarea:focus {
  border-color: rgba(191,57,57,.78) !important;
  box-shadow: 0 0 0 3px rgba(191,57,57,.09) !important;
}
.choice input:checked + span {
  color: #f2e7e7 !important;
  border-color: rgba(191,57,57,.62) !important;
  background: rgba(191,57,57,.09) !important;
  box-shadow: inset 0 0 0 1px rgba(191,57,57,.05) !important;
}
.choice span:hover {
  border-color: rgba(191,57,57,.34) !important;
}
.file-upload__button {
  border-color: rgba(191,57,57,.38) !important;
  background: rgba(191,57,57,.08) !important;
  color: #d99a9a !important;
}
.file-upload:hover .file-upload__button {
  border-color: rgba(191,57,57,.72) !important;
  background: rgba(191,57,57,.13) !important;
}
.gold-submit {
  background: linear-gradient(135deg, #d24b4b, #bf3939) !important;
  color: #fff !important;
  box-shadow: 0 14px 36px rgba(191,57,57,.18) !important;
}
.gold-submit:hover {
  box-shadow: 0 18px 44px rgba(191,57,57,.26) !important;
}
.form-success {
  color: #f1dddd !important;
  background: rgba(191,57,57,.08) !important;
  border-color: rgba(191,57,57,.34) !important;
}

/* Portfolio filtered category scroll target */
.portfolio-grid-section,
.portfolio-grid {
  scroll-margin-top: 68px;
}

@media (max-width: 900px) {
  .topbar {
    width: min(calc(100% - 12px), 650px) !important;
  }
  .services-layout {
    height: auto !important;
  }
  .services-nav,
  .services-content {
    height: auto !important;
  }
  .service-preview {
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }
}

@media (max-width: 700px) {
  .topbar {
    width: calc(100% - 10px) !important;
    height: 38px !important;
  }
  .topbar__logo {
    flex-basis: 70px !important;
  }
  .topbar__logo img {
    width: 66px !important;
  }
}


/* ======================================================
   V10 - navbar, service hover, smaller thumbs, mobile pass
   ====================================================== */

/* NAVBAR
   Desktop width follows its content, so there are no empty left/right edges. */
.topbar {
  width: max-content !important;
  max-width: calc(100% - 18px) !important;
  height: 45px !important;
  gap: 11px !important;
  padding: 4px 7px !important;
  justify-content: flex-start !important;
}
.topbar__logo {
  flex: 0 0 86px !important;
  width: 86px !important;
  height: 31px !important;
}
.topbar__logo img {
  width: 82px !important;
  max-height: 28px !important;
}
.topbar__links {
  gap: 15px !important;
}
.topbar__links a {
  font-size: 10px !important;
  font-weight: 780 !important;
}
.topbar__cta {
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 8.8px !important;
}

/* SERVICE BUTTONS
   The complete active/hover row becomes red and glows. */
.service-tab {
  margin: 4px 0 !important;
  padding: 0 13px !important;
  border-bottom-color: rgba(255,255,255,.055) !important;
  border-radius: 13px !important;
  transition:
    background .20s ease,
    box-shadow .20s ease,
    transform .20s ease,
    color .20s ease !important;
}
.service-tab:hover,
.service-tab.is-active {
  background:
    linear-gradient(135deg, rgba(210,75,75,.98), rgba(191,57,57,.96)) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.055),
    0 0 24px rgba(191,57,57,.34),
    0 10px 30px rgba(0,0,0,.18) !important;
  transform: translateX(3px) !important;
}
.service-tab:hover .service-tab__num,
.service-tab.is-active .service-tab__num,
.service-tab:hover .service-tab__label b,
.service-tab.is-active .service-tab__label b,
.service-tab:hover .service-tab__label small,
.service-tab.is-active .service-tab__label small,
.service-tab:hover i,
.service-tab.is-active i {
  color: #fff !important;
}
.service-tab:hover .service-tab__label small,
.service-tab.is-active .service-tab__label small {
  opacity: .78 !important;
}
.service-tab:hover i,
.service-tab.is-active i {
  transform: translateX(4px) !important;
}
.service-tab.is-active {
  border-color: transparent !important;
}

/* Keep the service list roomy enough for six glowing rows. */
.services-nav {
  padding: 10px 20px !important;
}

/* SERVICE RIGHT PANEL
   More compact grouping and smaller thumbnail in every category. */
.services-content {
  padding: 28px 30px !important;
}
.service-panel {
  gap: 8px !important;
}
.service-panel__copy .panel-index {
  margin-bottom: 8px !important;
}
.service-panel__copy h2 {
  margin-bottom: 6px !important;
}
.service-panel__copy > p:last-child {
  line-height: 1.48 !important;
}
.service-preview {
  width: 82% !important;
  height: 190px !important;
  justify-self: start !important;
  align-self: end !important;
  margin-top: 10px !important;
  border-radius: 14px !important;
}

/* Promo text in the section */
#demo .section-kicker {
  letter-spacing: .20em !important;
}

/* PHONE / TABLET OPTIMIZATION */
@media (max-width: 900px) {
  .site-header {
    top: 6px !important;
  }

  .topbar {
    width: max-content !important;
    max-width: calc(100% - 12px) !important;
    height: 42px !important;
    gap: 8px !important;
    padding: 3px 6px !important;
  }

  .topbar__logo {
    flex-basis: 72px !important;
    width: 72px !important;
    height: 29px !important;
  }

  .topbar__logo img {
    width: 69px !important;
    max-height: 26px !important;
  }

  .topbar__links {
    gap: 9px !important;
  }

  .topbar__links a {
    font-size: 8.5px !important;
  }

  .topbar__cta {
    min-height: 31px !important;
    padding: 0 10px !important;
    font-size: 7.8px !important;
  }

  .services-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 14px !important;
  }

  .services-nav,
  .services-content {
    height: auto !important;
  }

  .service-tab {
    min-height: 72px !important;
    margin: 3px 0 !important;
  }

  .service-preview {
    width: min(100%, 520px) !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

@media (max-width: 700px) {
  body {
    overflow-x: hidden !important;
  }

  .site-header {
    top: 5px !important;
  }

  /* Two-row mobile nav: readable instead of hiding the links. */
  .topbar {
    width: calc(100% - 10px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "logo spacer cta"
      "links links links" !important;
    row-gap: 4px !important;
    column-gap: 8px !important;
    padding: 5px 7px 6px !important;
    border-radius: 16px !important;
  }

  .topbar__logo {
    grid-area: logo !important;
    width: 76px !important;
    height: 28px !important;
  }

  .topbar__logo img {
    width: 73px !important;
    max-height: 26px !important;
  }

  .topbar__links {
    grid-area: links !important;
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 7px !important;
    padding: 1px 4px 0 !important;
  }

  .topbar__links a {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .topbar__cta {
    grid-area: cta !important;
    justify-self: end !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 7.6px !important;
  }

  .hero-page {
    padding-top: 104px !important;
    min-height: 100svh !important;
  }

  .hero-logo {
    width: min(52vw, 160px) !important;
    margin-bottom: 18px !important;
  }

  .hero-title {
    font-size: clamp(30px, 9.5vw, 44px) !important;
    line-height: 1.02 !important;
  }

  .hero-intro {
    width: min(100%, 360px) !important;
    font-size: 14px !important;
  }

  .hero-services {
    font-size: 9px !important;
    line-height: 1.55 !important;
    width: min(100%, 340px) !important;
  }

  .hero-actions {
    width: min(100%, 350px) !important;
  }

  .section {
    padding: 76px 0 !important;
  }

  .display-title,
  .single-line-title {
    font-size: clamp(30px, 10vw, 43px) !important;
  }

  .lead {
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  .services-layout {
    margin-top: 34px !important;
  }

  .services-nav {
    padding: 7px 10px !important;
  }

  .service-tab {
    min-height: 68px !important;
    grid-template-columns: 30px 1fr auto !important;
    padding: 0 10px !important;
  }

  .service-tab__label b {
    font-size: 13px !important;
  }

  .service-tab__label small {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  .services-content {
    padding: 22px 18px !important;
  }

  .service-panel__copy h2 {
    font-size: clamp(26px, 8vw, 35px) !important;
  }

  .service-panel__copy > p:last-child {
    font-size: 13px !important;
  }

  .service-preview {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  .marquee-card {
    width: 230px !important;
  }

  .showreel {
    border-radius: 14px !important;
  }

  .project-card {
    padding: 16px !important;
  }

  .project-step {
    grid-template-columns: 42px 1fr !important;
  }

  .faq-list {
    width: min(calc(100% - 14px), 610px) !important;
  }

  .faq-item summary {
    font-size: 11.5px !important;
    padding: 11px 38px 11px 13px !important;
  }

  .portfolio-filters {
    justify-content: center !important;
  }

  .portfolio-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .inquiry-page {
    padding-top: 24px !important;
  }

  .inquiry-shell {
    width: min(100%, 620px) !important;
  }

  .inquiry-logo {
    width: min(54vw, 165px) !important;
  }

  .inquiry-head h1 {
    font-size: clamp(28px, 9vw, 40px) !important;
  }

  .form-group legend {
    font-size: 16px !important;
  }

  .choice-grid {
    grid-template-columns: 1fr !important;
  }

  .choice span {
    min-height: 44px !important;
    font-size: 11.5px !important;
  }

  .field input,
  .field textarea {
    font-size: 16px !important;
  }

  .footer-inner {
    gap: 12px !important;
  }

  .footer-inner > img {
    width: 145px !important;
  }
}


/* ======================================================
   V11 refinements
   ====================================================== */

/* Hero headline slightly smaller */
.hero-title {
  font-size: clamp(32px, 4.4vw, 54px) !important;
}

/* Service boxes larger on desktop */
.services-layout {
  height: 560px !important;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr) !important;
  gap: 22px !important;
}
.services-nav,
.services-content {
  height: 560px !important;
}
.services-nav {
  padding: 12px 22px !important;
}
.services-content {
  padding: 34px 34px !important;
}

/* Keep service thumbnail modest despite larger cards */
.service-preview {
  width: 78% !important;
  height: 195px !important;
}

/* Navbar on mobile keeps the same one-row visual logic as desktop.
   It scrolls horizontally if the viewport is too narrow instead of switching layout. */
@media (max-width: 700px) {
  .site-header {
    top: 6px !important;
  }

  .topbar {
    width: calc(100% - 10px) !important;
    max-width: none !important;
    min-height: 40px !important;
    height: 40px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 3px 5px !important;
    border-radius: 999px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  .topbar::-webkit-scrollbar {
    display: none !important;
  }

  .topbar__logo {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 27px !important;
  }

  .topbar__logo img {
    width: 44px !important;
    max-height: 23px !important;
  }

  .topbar__links {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  .topbar__links a {
    font-size: 8px !important;
    white-space: nowrap !important;
  }

  .topbar__cta {
    flex: 0 0 auto !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    font-size: 7.3px !important;
    white-space: nowrap !important;
  }

  .hero-page {
    padding-top: 88px !important;
  }

  .hero-title {
    font-size: clamp(28px, 8.6vw, 40px) !important;
  }

  .services-layout {
    height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .services-nav,
  .services-content {
    height: auto !important;
  }

  .service-preview {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Make the navbar logo a bit smaller on desktop too */
@media (min-width: 701px) {
  .topbar__logo {
    flex-basis: 70px !important;
    width: 70px !important;
  }
  .topbar__logo img {
    width: 66px !important;
    max-height: 24px !important;
  }
}

/* File chooser: neutral steel/gray instead of red */
.file-upload__button {
  border-color: rgba(180,184,190,.28) !important;
  background: rgba(160,166,175,.08) !important;
  color: #c2c5ca !important;
}
.file-upload:hover .file-upload__button {
  border-color: rgba(195,200,208,.52) !important;
  background: rgba(170,176,186,.12) !important;
  color: #e3e5e8 !important;
}


/* ======================================================
   V12 - service layout, creative hero, hamburger mobile nav
   ====================================================== */

.hero-logo {
  width: min(30vw, 130px) !important;
  margin-bottom: 20px !important;
}

.hero-heading {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #c9c5c2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.hero-title {
  gap: 0 !important;
  line-height: .98 !important;
}
.hero-title__line {
  color: #f5f1ef !important;
  font-weight: 900;
  text-shadow: 0 10px 34px rgba(0,0,0,.22);
}
.hero-title__accent {
  position: relative;
  display: inline-block;
  margin-top: 4px;
  padding: 0 .10em .10em !important;
  color: #e05252 !important;
  font-weight: 950 !important;
  text-shadow: 0 0 30px rgba(191,57,57,.18);
}
.hero-title__accent::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #bf3939 22%, #e15a5a 50%, #bf3939 78%, transparent);
  box-shadow: 0 0 18px rgba(191,57,57,.30);
}
.hero-title-mark {
  display: grid;
  grid-template-columns: 44px auto 44px;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  color: #6f6c70;
}
.hero-title-mark span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16));
}
.hero-title-mark span:last-child {
  background: linear-gradient(90deg, rgba(255,255,255,.16), transparent);
}
.hero-title-mark b {
  color: #7b777b;
  font-size: 9px;
  letter-spacing: .12em;
}

.services-content {
  padding: 30px 32px !important;
}
.service-panel,
.service-panel.is-active {
  height: 100% !important;
}
.service-panel.is-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.service-panel .panel-index {
  margin: 0 0 8px !important;
}
.service-panel h2 {
  margin: 0 0 16px !important;
}
.service-preview {
  order: 3 !important;
  width: min(82%, 440px) !important;
  height: 205px !important;
  margin: 0 0 15px !important;
  align-self: flex-start !important;
}
.service-description {
  order: 4 !important;
  margin: 0 !important;
  max-width: 560px;
  color: #9d9997;
  font-size: 13.5px;
  line-height: 1.6;
}

.nav-toggle,
.mobile-nav {
  display: none;
}

@media (max-width: 700px) {
  .site-header {
    top: 7px !important;
    left: 0;
    right: 0;
  }

  .topbar {
    width: min(calc(100% - 18px), 420px) !important;
    height: 48px !important;
    min-height: 48px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 7px 5px 9px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  .topbar__logo {
    width: 54px !important;
    flex-basis: 54px !important;
    height: 30px !important;
  }

  .topbar__logo img {
    width: 50px !important;
    max-height: 26px !important;
  }

  .topbar__links,
  .topbar__cta {
    display: none !important;
  }

  .nav-toggle {
    grid-column: 3;
    display: grid !important;
    width: 36px;
    height: 36px;
    place-content: center;
    gap: 4px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    width: 16px;
    height: 1.5px;
    border-radius: 999px;
    background: #e8e4e1;
    transition: transform .22s ease, opacity .22s ease;
  }

  .nav-toggle.is-open span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }
  .nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  .mobile-nav {
    position: fixed;
    z-index: 99;
    top: 63px;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 18px), 420px);
    padding: 10px;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 18px;
    background:
      radial-gradient(circle at 85% 10%, rgba(191,57,57,.09), transparent 28%),
      rgba(12,13,16,.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
  }

  .mobile-nav:not([hidden]) {
    display: grid !important;
    gap: 5px;
    animation: mobileMenuIn .18s ease both;
  }

  .mobile-nav a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 13px;
    border-radius: 11px;
    color: #d5d1ce;
    font-size: 12px;
    font-weight: 760;
    transition: background .18s ease, color .18s ease, transform .18s ease;
  }

  .mobile-nav a:hover,
  .mobile-nav a:active {
    background: rgba(191,57,57,.12);
    color: #fff;
    transform: translateX(2px);
  }

  .mobile-nav__cta {
    margin-top: 4px;
    justify-content: center;
    color: #fff !important;
    background: linear-gradient(135deg, #d24b4b, #bf3939) !important;
    box-shadow: 0 12px 26px rgba(191,57,57,.18);
  }

  .hero-page {
    padding-top: 84px !important;
  }

  .hero-logo {
    width: min(34vw, 105px) !important;
    margin-bottom: 16px !important;
  }

  .hero-eyebrow {
    min-height: 27px;
    padding: 0 11px;
    font-size: 8px;
  }

  .hero-title {
    font-size: clamp(27px, 8.4vw, 39px) !important;
  }

  .hero-title-mark {
    grid-template-columns: 30px auto 30px;
  }

  .services-content {
    padding: 22px 18px !important;
  }

  .service-preview {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin-bottom: 13px !important;
  }

  .service-description {
    font-size: 13px !important;
  }
}

@keyframes mobileMenuIn {
  from {
    opacity: 0;
    transform: translate(-50%, -7px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}


/* ======================================================
   V13 - service video previews
   ====================================================== */

/* Right-side service headings: smaller and always one line. */
.service-panel h2 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 12px !important;
  font-size: clamp(14px, 2.05vw, 24px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap !important;
}

/* Media sits directly under the title, followed by the description. */
.service-panel,
.service-panel.is-active {
  height: 100% !important;
}
.service-panel.is-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.service-panel .panel-index {
  flex: 0 0 auto;
  margin-bottom: 8px !important;
}
.service-preview--video {
  flex: 0 0 auto;
  display: block !important;
  width: min(82%, 440px) !important;
  height: 205px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  background: #07080a !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.20) !important;
}
.service-preview-video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: #07080a !important;
}
.service-preview--portrait .service-preview-video {
  object-fit: contain !important;
}
.service-description {
  flex: 0 0 auto;
  width: 100%;
  max-width: 560px !important;
  margin: 0 !important;
  color: #9d9997 !important;
  font-size: 13.5px !important;
  line-height: 1.58 !important;
}
.service-panel--text-only {
  justify-content: flex-start !important;
}
.service-panel--text-only .service-description {
  margin-top: 2px !important;
  max-width: 600px !important;
}

@media (max-width: 700px) {
  .service-panel h2 {
    font-size: clamp(13px, 4vw, 18px) !important;
    white-space: nowrap !important;
  }
  .service-preview--video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin-bottom: 12px !important;
  }
  .service-description {
    font-size: 13px !important;
  }
}


/* ======================================================
   V14 - minimalist hero, larger nav, sharper service media,
   compact AND MORE, 3-row featured works, YouTube portfolio
   ====================================================== */

/* Navbar slightly larger, same visual system */
@media (min-width: 701px) {
  .topbar {
    width: max-content !important;
    min-width: 720px !important;
    max-width: calc(100% - 22px) !important;
    height: 48px !important;
    gap: 15px !important;
    padding: 5px 9px !important;
  }
  .topbar__logo {
    flex-basis: 78px !important;
    width: 78px !important;
    height: 34px !important;
  }
  .topbar__logo img {
    width: 74px !important;
    max-height: 29px !important;
  }
  .topbar__links { gap: 18px !important; }
  .topbar__links a { font-size: 10.5px !important; }
  .topbar__cta {
    min-height: 36px !important;
    padding: 0 15px !important;
    font-size: 9px !important;
  }
}

/* Hero: remove old pill / 36 mark visually and add restrained graphic depth */
.hero-eyebrow,
.hero-title-mark { display: none !important; }
.hero-heading--minimal { gap: 5px !important; }
.hero-title--minimal {
  font-size: clamp(38px, 5.1vw, 64px) !important;
  line-height: .96 !important;
}
.hero-intro strong { color: #ece8e4; font-weight: 800; }
.hero-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .13;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 0 28%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 48%, #000 0 28%, transparent 72%);
  animation: heroGridDrift 20s linear infinite alternate;
}
.hero-minimal-ring {
  position: absolute;
  z-index: 2;
  width: min(58vw, 690px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.055);
  box-shadow:
    0 0 0 70px rgba(255,255,255,.012),
    0 0 0 140px rgba(191,57,57,.012);
  right: -22%;
  top: 16%;
  pointer-events: none;
  animation: heroRingFloat 14s ease-in-out infinite alternate;
}
.hero-minimal-line {
  position: absolute;
  z-index: 2;
  width: 230px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.17), rgba(191,57,57,.24), transparent);
  opacity: .72;
}
.hero-minimal-line--one { left: 4%; top: 27%; transform: rotate(-13deg); }
.hero-minimal-line--two { right: 4%; bottom: 24%; transform: rotate(16deg); }
.hero-title-accent {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.hero-title-accent span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(191,57,57,.72);
  box-shadow: 0 0 10px rgba(191,57,57,.28);
}
.hero-title-accent span:nth-child(2) { opacity: .55; }
.hero-title-accent span:nth-child(3) { opacity: .30; }
@keyframes heroGridDrift { from { transform: translate3d(-8px,-8px,0); } to { transform: translate3d(8px,8px,0); } }
@keyframes heroRingFloat { from { transform: translate3d(0,-8px,0) scale(.98); } to { transform: translate3d(-18px,14px,0) scale(1.03); } }

/* Service media: use aspect ratios instead of a stretched fixed-height box */
.service-preview--video {
  width: min(100%, 560px) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 0 14px !important;
  border-radius: 16px !important;
  background: #07080a !important;
}
.service-preview-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  image-rendering: auto !important;
  transform: translateZ(0);
}
.service-preview--portrait {
  width: min(44%, 220px) !important;
  max-width: 220px !important;
  aspect-ratio: 9 / 16 !important;
  align-self: flex-start !important;
}
.service-preview--portrait .service-preview-video { object-fit: cover !important; }
.service-panel h2 {
  font-size: clamp(13px, 1.75vw, 21px) !important;
  white-space: nowrap !important;
}

/* AND MORE: right-hand card shrinks to the text instead of showing an empty media area */
.services-layout { align-items: start !important; }
.services-content.is-text-only {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  padding: 30px 32px !important;
}
.services-content.is-text-only .service-panel--text-only {
  height: auto !important;
  min-height: 0 !important;
}
.service-panel--text-only h2 { margin-bottom: 10px !important; }

/* Featured works: 3 drifting rows - horizontal / vertical / horizontal */
.featured-showcase {
  margin-top: 44px;
  overflow: hidden;
  display: grid;
  gap: 14px;
}
.featured-row {
  overflow: hidden;
  width: 100%;
  padding: 3px 0;
}
.featured-track {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 14px;
  will-change: transform;
  animation: featuredDriftLeft 30s ease-in-out infinite alternate;
}
.featured-row--two .featured-track { animation: featuredDriftRight 34s ease-in-out infinite alternate; }
.featured-row--three .featured-track { animation-duration: 38s; }
.featured-card {
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: #08090b;
  box-shadow: 0 16px 42px rgba(0,0,0,.22);
}
.featured-card--horizontal {
  width: clamp(270px, 28vw, 420px);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
}
.featured-card--vertical {
  width: clamp(118px, 12vw, 176px);
  aspect-ratio: 9 / 16;
  border-radius: 18px;
}
.featured-preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease, filter .3s ease;
}
.featured-card:hover .featured-preview-video { transform: scale(1.025); filter: brightness(1.04); }
.featured-row:hover .featured-track { animation-play-state: paused; }
@keyframes featuredDriftLeft { from { transform: translateX(1.5vw); } to { transform: translateX(-24vw); } }
@keyframes featuredDriftRight { from { transform: translateX(-16vw); } to { transform: translateX(3vw); } }

/* Small attention pulse for portfolio CTA */
.btn--portfolio-pulse {
  position: relative;
  overflow: hidden;
  animation: portfolioPulse 2.8s ease-in-out infinite;
}
.btn--portfolio-pulse::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -34%;
  width: 24%;
  height: 160%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  animation: portfolioShine 3.1s ease-in-out infinite;
}
@keyframes portfolioPulse {
  0%, 72%, 100% { box-shadow: 0 11px 30px rgba(191,57,57,.20); }
  82% { box-shadow: 0 0 0 4px rgba(191,57,57,.07), 0 0 32px rgba(191,57,57,.38); }
}
@keyframes portfolioShine { 0%, 65% { left: -34%; opacity: 0; } 74% { opacity: 1; } 88%,100% { left: 116%; opacity: 0; } }

/* YouTube music-video cards in Portfolio */
.portfolio-card--youtube {
  aspect-ratio: 16 / 9 !important;
  background: #050607 !important;
}
.portfolio-card--youtube iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 700px) {
  .hero-title--minimal { font-size: clamp(30px, 9.2vw, 43px) !important; }
  .hero-minimal-ring { width: 82vw; right: -48%; top: 18%; opacity: .68; }
  .hero-minimal-line { width: 150px; opacity: .48; }
  .service-preview--video { width: 100% !important; }
  .service-preview--portrait {
    width: min(62%, 210px) !important;
    max-width: 210px !important;
  }
  .services-content.is-text-only { padding: 22px 18px !important; }
  .featured-showcase { gap: 10px; margin-top: 34px; }
  .featured-card--horizontal { width: 250px; }
  .featured-card--vertical { width: 122px; }
  .featured-track { gap: 10px; animation-duration: 24s; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-page::before,
  .hero-minimal-ring,
  .featured-track,
  .btn--portfolio-pulse,
  .btn--portfolio-pulse::after { animation: none !important; }
}


/* ======================================================
   V15 LITE — no video files
   ====================================================== */

/* NAVBAR: content-sized on desktop; no empty field around links */
.topbar {
  width: max-content !important;
  max-width: calc(100% - 18px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.topbar__links { flex: 0 0 auto !important; }

/* SERVICE THUMBNAILS: real still frames, sharper and larger */
.service-preview--image {
  width: min(92%, 520px) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #08090b !important;
}
.service-preview--image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* SHORT FORM: full 9:16 resolution centered in the panel */
.service-preview--portrait {
  width: min(240px, 55%) !important;
  max-width: 240px !important;
  aspect-ratio: 9 / 16 !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #08090b !important;
}
.service-preview--portrait img {
  object-fit: contain !important;
  object-position: center center !important;
}

/* FEATURED WORK: continuous, faster three-row motion */
.featured-showcase {
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.featured-row { overflow: hidden !important; }
.featured-track {
  width: max-content !important;
  display: flex !important;
  animation-name: featuredLoopLeft !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-direction: normal !important;
  will-change: transform;
}
.featured-row--one .featured-track { animation-duration: 18s !important; }
.featured-row--two .featured-track {
  animation-name: featuredLoopRight !important;
  animation-duration: 21s !important;
}
.featured-row--three .featured-track { animation-duration: 16s !important; }
.featured-row:hover .featured-track { animation-play-state: paused !important; }

.featured-preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .30s ease, filter .30s ease;
}
.featured-card:hover .featured-preview-image {
  transform: scale(1.035);
  filter: brightness(1.05);
}
@keyframes featuredLoopLeft {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 6px)); }
}
@keyframes featuredLoopRight {
  from { transform: translateX(calc(-50% - 6px)); }
  to { transform: translateX(0); }
}

/* PORTFOLIO: actual YouTube thumbnails instead of embedded iframes */
.portfolio-card--youtube {
  position: relative !important;
  display: block !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #07080a !important;
}
.portfolio-card--youtube .youtube-thumb {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .32s ease, filter .32s ease !important;
}
.portfolio-card--youtube:hover .youtube-thumb {
  transform: scale(1.035) !important;
  filter: brightness(.90) !important;
}
.youtube-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 35px;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background: rgba(191,57,57,.96);
  box-shadow: 0 10px 30px rgba(0,0,0,.32);
  transition: transform .2s ease, box-shadow .2s ease;
}
.youtube-play::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 9px;
  width: 0;
  height: 0;
  border-top: 8.5px solid transparent;
  border-bottom: 8.5px solid transparent;
  border-left: 13px solid #fff;
}
.portfolio-card--youtube:hover .youtube-play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 10px 34px rgba(191,57,57,.25);
}

@media (max-width: 700px) {
  /* Compact centered hamburger pill: logo + hamburger only, no blank middle cell */
  .topbar {
    width: max-content !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 5px 7px !important;
    border-radius: 17px !important;
    overflow: visible !important;
  }
  .topbar__links,
  .topbar__cta { display: none !important; }
  .topbar__logo {
    grid-column: 1 !important;
    width: 51px !important;
    flex-basis: 51px !important;
    height: 28px !important;
  }
  .topbar__logo img {
    width: 47px !important;
    max-height: 24px !important;
  }
  .nav-toggle {
    grid-column: 2 !important;
    width: 34px !important;
    height: 34px !important;
  }

  .service-preview--image {
    width: 100% !important;
    max-width: 100% !important;
  }
  .service-preview--portrait {
    width: min(220px, 68vw) !important;
    max-width: 220px !important;
    aspect-ratio: 9 / 16 !important;
  }

  .featured-row--one .featured-track { animation-duration: 14s !important; }
  .featured-row--two .featured-track { animation-duration: 17s !important; }
  .featured-row--three .featured-track { animation-duration: 13s !important; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-track { animation: none !important; }
}


/* V15 Lite video placeholders */
.hero-bg-video--placeholder { background: transparent !important; }
.showreel--placeholder { overflow: hidden; aspect-ratio: 16 / 9; }
.showreel--placeholder img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* V16 refinements */
.topbar { display:flex !important; width:max-content !important; max-width:calc(100% - 16px) !important; gap:12px !important; padding-inline:10px !important; }
.topbar__links { flex:0 0 auto !important; gap:18px !important; }
.topbar__logo { flex:0 0 auto !important; overflow:visible !important; }
.topbar__logo img { transition:transform .25s ease,filter .25s ease !important; transform-origin:center; }
.topbar__logo:hover img,.topbar__logo:focus-visible img { transform:scale(1.12); filter:drop-shadow(0 0 9px rgba(191,57,57,.9)); }
.topbar__cta { transition:transform .25s ease,filter .25s ease,box-shadow .25s ease !important; }
.topbar__cta:hover,.topbar__cta:focus-visible { transform:scale(1.06); filter:brightness(1.16); box-shadow:0 0 19px rgba(191,57,57,.55) !important; }
.hero-logo--below { order:10; width:min(32vw,150px) !important; height:auto; margin:20px 0 0 !important; }
.faq-item summary { font-size:clamp(15px,1.45vw,17px) !important; line-height:1.4; padding:15px 42px 15px 18px !important; }
.faq-item p { font-size:clamp(14px,1.3vw,16px) !important; line-height:1.65; padding:0 18px 17px !important; color:#c5c0bd !important; }
.faq-item { margin-bottom:8px !important; }
.service-panel.is-active { scroll-margin-top:72px; }
.featured-row--one .featured-track,.featured-row--two .featured-track,.featured-row--three .featured-track { animation-duration:28s !important; }
.section--trust { background:radial-gradient(circle at 90% 20%,rgba(191,57,57,.09),transparent 28%),#0c0d10; }
.section--trust .lead { color:#aaa6a4; margin-inline:auto; }
.trust-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:42px; }
.trust-card { min-height:205px; padding:22px 19px; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:linear-gradient(145deg,#191a1f,#111216); transition:transform .25s,border-color .25s,box-shadow .25s; }
.trust-card:hover { transform:translateY(-5px); border-color:rgba(191,57,57,.65); box-shadow:0 16px 35px rgba(191,57,57,.09); }
.trust-card span { display:block; color:#d34d4d; font-size:31px; line-height:1; font-weight:900; letter-spacing:-.06em; }
.trust-card h3 { margin:17px 0 8px; font-size:16px; line-height:1.25; }
.trust-card p { margin:0; font-size:13px; color:#a9a5a4; line-height:1.55; }
.trust-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:58px auto 75px; max-width:750px; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.trust-stats>div { padding:29px 18px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.trust-stats>div+div { border-left:1px solid rgba(255,255,255,.1); }
.trust-stats strong { color:#e9e6e4; font-size:clamp(44px,6vw,72px); letter-spacing:-.06em; line-height:1.1; }
.trust-stats span { font-size:11px; font-weight:800; letter-spacing:.14em; color:#bd5555; margin-top:9px; }
.reviews-heading h3 { margin:0; font-size:clamp(29px,3vw,39px); line-height:1.15; }
.reviews-heading p:last-child { color:#aaa6a4; font-size:15px; margin:12px 0 0; }
.review-carousel { position:relative; max-width:980px; margin:32px auto 0; padding:0 48px; }
.review-window { overflow:hidden; }
.review-track { display:flex; gap:16px; align-items:center; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; padding:10px max(10px,calc((100% - 68%) / 2)); }
.review-track::-webkit-scrollbar { display:none; }
.review-slide { flex:0 0 68%; height:360px; border-radius:18px; padding:18px; border:1px solid rgba(255,255,255,.11); background:#191a1f; box-shadow:0 14px 34px rgba(0,0,0,.24); cursor:zoom-in; scroll-snap-align:center; opacity:.50; transform:scale(.95); transition:opacity .3s,transform .3s,border-color .3s; }
.review-slide.is-current { opacity:1; transform:scale(1); border-color:rgba(191,57,57,.6); }
.review-slide img { width:100%; height:100%; object-fit:contain; border-radius:9px; }
.review-arrow { position:absolute; top:50%; z-index:2; transform:translateY(-50%); width:39px; height:39px; border:1px solid rgba(191,57,57,.45); border-radius:50%; background:#1b1b20; color:white; font-size:28px; line-height:1; cursor:pointer; }
.review-arrow:hover { background:#bf3939; }
.review-arrow--prev { left:0; }.review-arrow--next { right:0; }
.review-dots { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:16px; }
.review-dots button { width:8px; height:8px; border:0; border-radius:50%; padding:0; background:#5d585a; cursor:pointer; }
.review-dots button.is-current { background:#bf3939; width:20px; border-radius:8px; }
.review-dialog,.video-dialog { max-width:min(96vw,900px); max-height:92vh; border:1px solid rgba(191,57,57,.6); border-radius:16px; background:#111216; color:white; padding:34px 16px 16px; box-shadow:0 30px 80px #000c; }
.review-dialog::backdrop,.video-dialog::backdrop { background:#000d; }
.review-dialog img { max-height:calc(92vh - 55px); max-width:100%; width:auto; margin:auto; object-fit:contain; }
.review-close,.video-close { position:absolute; right:8px; top:2px; border:0; background:transparent; color:white; font-size:30px; line-height:1; cursor:pointer; }
.process-flow { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; align-items:center; }
.process-flow span { border:1px solid rgba(191,57,57,.36); border-radius:100px; background:rgba(191,57,57,.09); padding:6px 10px; color:#e2c0c0; font-size:10px; font-weight:800; }
.process-flow span:not(:last-child)::after { content:'→'; margin-left:16px; color:#d65a5a; }
.video-dialog { width:min(96vw,900px); }
.video-frame { width:100%; aspect-ratio:16/9; background:#050506; }
.video-frame iframe { width:100%; height:100%; border:0; }
.video-external { display:inline-block; color:#e66d6d; font-size:14px; font-weight:750; margin-top:12px; }
.portfolio-card--youtube.is-previewing iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; z-index:1; }
.portfolio-card--youtube.is-previewing .youtube-play { z-index:2; }
@media(max-width:700px) {
  .topbar { display:grid !important; grid-template-columns:auto auto !important; width:max-content !important; max-width:calc(100% - 12px) !important; gap:7px !important; padding:5px 8px !important; }
  .hero-logo--below { width:min(45vw,150px) !important; margin-top:18px !important; }
  .trust-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .trust-card { min-height:0; padding:17px 13px; }
  .trust-card span { font-size:26px; }.trust-card h3 { font-size:14px; }.trust-card p { font-size:12px; }
  .trust-stats { margin:42px auto 55px; }.trust-stats span { font-size:9px; }
  .review-carousel { padding:0 28px; }.review-track { padding-inline:8%; gap:10px; }.review-slide { flex-basis:84%; height:300px; padding:8px; }
  .review-arrow { width:27px; height:33px; border-radius:8px; }.review-arrow--prev { left:-2px; }.review-arrow--next { right:-2px; }
  .featured-row--one .featured-track,.featured-row--two .featured-track,.featured-row--three .featured-track { animation-duration:28s !important; }
}
@media(max-width:380px) { .trust-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .trust-card,.review-slide,.topbar__logo img,.topbar__cta { transition:none !important; } }

/* V17: resolve inherited navigation sizes and responsive grid placement. */
.topbar { min-width:0 !important; width:max-content !important; height:48px !important; min-height:48px !important; display:flex !important; grid-template-areas:none !important; grid-template-columns:none !important; gap:16px !important; padding:5px 9px !important; overflow:visible !important; }
.topbar>* { grid-area:auto !important; }
.topbar__links { width:auto !important; padding:0 !important; }
.mobile-nav { pointer-events:auto; }
.hero-logo--below { display:block !important; margin:24px 0 0 !important; }
.service-preview { scroll-margin-top:76px; }
.featured-track { position:relative; }
@keyframes featuredLoopLeft { from { transform:translateX(0); } to { transform:translateX(calc(-1 * var(--loop-distance, 50%))); } }
@keyframes featuredLoopRight { from { transform:translateX(calc(-1 * var(--loop-distance, 50%))); } to { transform:translateX(0); } }
.featured-row:focus-within .featured-track { animation-play-state:paused !important; }
.section--trust .single-line-title { white-space:normal !important; font-size:clamp(27px,3.7vw,42px) !important; }
.trust-card>span { color:#bf3939; }
.trust-stats { font-variant-numeric:tabular-nums; }
.review-window { position:relative; overflow:hidden; touch-action:pan-y; padding-block:14px 20px; }
.review-track { position:relative; overflow:visible; padding:0 !important; scroll-snap-type:none; gap:18px; align-items:center; will-change:transform; }
.review-slide { flex:0 0 76%; height:360px; scroll-snap-align:none; user-select:none; }
.review-slide img { pointer-events:none; }
.review-controls { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:14px; color:#938f91; font-size:12px; }
.review-autoplay { color:#b7b1b2; background:none; border:0; cursor:pointer; padding:6px; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.review-dots { gap:0; margin-top:5px; }
.review-dots button { width:24px; height:24px; position:relative; background:transparent; border-radius:0; }
.review-dots button::after { content:''; position:absolute; inset:8px; border-radius:50%; background:#5d585a; }
.review-dots button.is-current { width:24px; background:transparent; }
.review-dots button.is-current::after { background:#bf3939; }
.project-card { max-width:900px; }
.project-step--production>div { min-width:0; }
.production-map { margin-top:24px; }
.production-node { display:flex; gap:14px; align-items:flex-start; padding:19px; background:#14151b; border:1px solid #303037; border-radius:14px; }
.production-node svg { width:30px; height:30px; flex:0 0 30px; fill:none; stroke:#ce5a5a; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.production-node small { display:block; color:#b56b6b; font-size:9px; letter-spacing:.14em; font-weight:800; }
.production-node h4 { color:#f1edeb; font-size:16px; line-height:1.3; margin:2px 0 7px; }
.production-node p { color:#aaa5a6; font-size:13px; line-height:1.6; }
.production-node--accent { border-color:#bf3939; background:linear-gradient(120deg,#291619,#171318); }
.production-branches { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:stretch; }
.production-branches .production-node { flex-direction:column; }
.production-or { align-self:center; color:#b57171; font-size:10px; font-weight:800; }
.production-arrow { color:#bf3939; text-align:center; line-height:1; font-size:26px; padding:9px 0; }
.production-branch-label { text-align:center; color:#948f91; font-size:10px; font-weight:750; letter-spacing:.06em; margin:0 0 13px; }
.project-step .production-source-note { font-size:11px; text-align:center; margin:12px 0 0; color:#8f898b; }
@media(max-width:900px) { .topbar__links { gap:11px !important; } .topbar { gap:11px !important; } }
@media(max-width:700px) {
 .topbar { display:flex !important; grid-template-areas:none !important; grid-template-columns:none !important; gap:8px !important; padding:5px 8px !important; }
 .topbar__links,.topbar__cta { display:none !important; }
 .topbar__logo { width:51px !important; height:28px !important; }
 .nav-toggle { flex:0 0 34px !important; }
 .review-carousel { padding-inline:28px; }
 .review-slide { flex-basis:84%; height:310px; }
 .review-track { gap:12px; }
 .project-step--production { grid-template-columns:1fr; gap:12px; }
 .production-node { padding:15px; }
 .production-branches { grid-template-columns:1fr; gap:9px; }
 .production-branches .production-node { flex-direction:row; }
 .production-or { text-align:center; }
 .trust-card p { font-size:13px; }
 .review-dialog { width:calc(100vw - 18px); padding-inline:7px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto !important; } .review-track { transition:none !important; } }
.portfolio-item { min-width:0; }
.portfolio-item.is-hidden { display:none; }
.portfolio-youtube-link { display:block; text-align:right; font-size:12px; font-weight:700; color:#bcb6b5; padding:10px 5px; }
.portfolio-youtube-link:hover { color:#e26a6a; }
.video-card-caption { position:absolute; bottom:12px; left:12px; border:1px solid #ffffff24; padding:5px 10px; border-radius:20px; background:#09090bd9; color:#eee; font-size:11px; font-weight:750; z-index:3; }
.portfolio-card--youtube iframe,.youtube-hover-preview { position:absolute; inset:0; pointer-events:none; width:100%; height:100%; opacity:0; border:0; }
.portfolio-card--youtube.is-previewing iframe { opacity:1; }
.video-playback-note { font-size:12px; color:#aba5a5; margin:12px 0 0; }
a.btn[href="inquiry.html"]:hover,a.btn[href="inquiry.html"]:focus-visible { transform:scale(1.045); border-color:#bf3939; box-shadow:0 0 26px rgba(191,57,57,.4); }
@media(prefers-reduced-motion:reduce) { .topbar__logo:hover img,.topbar__cta:hover,a.btn[href="inquiry.html"]:hover { transform:none !important; } }

/* V18: calm visual detail, compact process and editorial review cards. */
.process-simple { margin-top:38px; max-width:1080px; }
.process-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid #ffffff15; border-radius:22px; background:linear-gradient(130deg,#ffffff04,transparent); overflow:hidden; }
.process-card { padding:28px; min-width:0; position:relative; }
.process-card+.process-card { border-left:1px solid #ffffff12; }
.process-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; }
.process-number { color:#c44b4b; font-size:13px; letter-spacing:.12em; font-weight:800; }
.process-card svg { width:31px; height:31px; fill:none; stroke:#c7c0be; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.process-card h3 { font-size:15px; letter-spacing:.025em; margin:0 0 12px; }
.process-card p { font-size:14px; color:#aaa5a3; line-height:1.7; margin:0; }
.process-caption { display:block; color:#b36a6a; font-size:11px; line-height:1.7; margin-top:22px; }
.process-action { margin-top:25px; text-align:center; }
.process-action .btn { min-width:220px; }
.process-action p { color:#878184; font-size:11px; margin:12px 0 0; }
.faq-item p a { color:#dd6868; text-decoration:underline; text-underline-offset:3px; }
.main-page>.section::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px); background-size:100px 100px; mask-image:radial-gradient(ellipse at 80% 10%,#000,transparent 70%); }
.main-page>.section::after { content:""; pointer-events:none; position:absolute; z-index:0; right:-240px; top:14%; width:580px; height:580px; border:1px solid #bf393918; border-radius:50%; box-shadow:0 0 0 60px #bf393906,0 0 0 120px #ffffff03; transform:rotate(-24deg) scaleY(.52); animation:ambientArc 24s ease-in-out infinite alternate; }
.main-page>.section:nth-of-type(even)::after { right:auto; left:-290px; top:36%; animation-delay:-12s; }
.main-page>.section>.featured-showcase { position:relative; z-index:1; }
@keyframes ambientArc { to { transform:translateY(28px) rotate(-15deg) scaleY(.56); } }
.hero-glitch { position:absolute; inset:0; z-index:2; opacity:.085; pointer-events:none; overflow:hidden; mask-image:radial-gradient(ellipse at center,#000 15%,transparent 85%); }
.glitch-frame { position:absolute; width:52%; height:70%; object-fit:cover; filter:saturate(.5) contrast(1.05); opacity:0; transform:scale(1.02); animation:quietFrames 24s linear infinite; }
.glitch-frame--1,.glitch-frame--3,.glitch-frame--5 { left:-4%; top:8%; }
.glitch-frame--2,.glitch-frame--4,.glitch-frame--6 { right:-4%; bottom:4%; }
.glitch-frame--2 { animation-delay:-4s; }.glitch-frame--3 { animation-delay:-8s; }.glitch-frame--4 { animation-delay:-12s; }.glitch-frame--5 { animation-delay:-16s; }.glitch-frame--6 { animation-delay:-20s; }
@keyframes quietFrames { 0%,29%,100% { opacity:0; } 3%,23% { opacity:.9; transform:translateX(0) scale(1.02); clip-path:inset(0); } 11% { transform:translateX(3px) scale(1.025); clip-path:inset(20% 0 34%); } 11.5% { transform:translateX(-2px) scale(1.025); clip-path:inset(0); } 12%,22% { transform:translateX(0) scale(1.035); } }
.glitch-scan { position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0,transparent 5px,#ffffff12 6px); opacity:.2; }
.review-carousel { max-width:1060px; margin-top:28px; padding-inline:52px; }
.review-window { padding-block:25px 28px; }
.review-track { align-items:stretch; gap:22px; }
.review-slide { display:flex; flex-direction:column; flex-basis:72%; height:405px; padding:23px; border-radius:26px; border:1px solid #ffffff14; background:linear-gradient(145deg,#1a1b21,#111216); box-shadow:0 14px 35px #0004; transform:scale(.94); opacity:.32; transition:transform .42s ease,opacity .42s ease,border-color .42s ease; color:#ddd8d5; }
.review-slide.is-current { opacity:1; transform:scale(1); border-color:#bf393948; box-shadow:0 20px 45px #0005,0 0 32px #bf393909; }
.review-card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:26px; margin-bottom:18px; text-align:left; }
.review-card-head>span:first-child { font-size:10px; font-weight:800; letter-spacing:.12em; color:#9e999b; }
.review-stars { color:#cb6262; font-size:14px; letter-spacing:2px; }
.review-quote { font-family:Georgia,serif; color:#bf3939; font-size:45px; line-height:.5; transform:translateY(6px); }
.review-media { display:flex; flex:1; min-height:0; align-items:center; justify-content:center; overflow:hidden; }
.review-slide .review-media img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:17px; box-shadow:0 8px 24px #0003; }
.review-card-foot { display:flex; justify-content:space-between; align-items:center; margin-top:18px; border-top:1px solid #ffffff10; padding-top:13px; color:#aaa3a3; font-size:11px; text-align:left; }
.review-card-foot>span { font-size:17px; color:#bc6262; }
.review-arrow { width:40px; height:40px; border-color:#ffffff20; background:#17181d; }
.review-dialog { border-radius:24px; padding:42px 18px 18px; background:#111216; }
.review-dialog img { border-radius:17px; }
.trust-stats span { max-width:260px; }
@media(max-width:800px) {
 .process-card { padding:22px 18px; }.process-card h3 { font-size:13px; }.process-card p { font-size:13px; }
}
@media(max-width:700px) {
 .process-steps { grid-template-columns:1fr; border-radius:18px; }
 .process-card { padding:23px; }.process-card+.process-card { border-left:0; border-top:1px solid #ffffff12; }
 .process-card-top { margin-bottom:13px; }.process-card svg { width:27px; height:27px; }.process-card h3 { font-size:15px; }.process-card p { font-size:14px; }.process-caption { margin-top:13px; }
 .hero-glitch { opacity:.065; }.glitch-frame { width:85%; height:52%; }.glitch-frame--1,.glitch-frame--3,.glitch-frame--5 { left:-20%; top:4%; }.glitch-frame--2,.glitch-frame--4,.glitch-frame--6 { right:-20%; bottom:5%; }
 .main-page>.section::after { opacity:.65; width:380px; height:380px; }
 .review-carousel { padding-inline:20px; }.review-track { gap:12px; }.review-slide { flex-basis:92%; height:365px; padding:15px; border-radius:22px; }
 .review-card-head>span:first-child { font-size:8px; }.review-stars { font-size:11px; letter-spacing:1px; }.review-slide .review-media img { border-radius:12px; }
 .review-arrow { width:29px; height:36px; }.review-arrow--prev { left:-7px; }.review-arrow--next { right:-7px; }
 .review-dialog { padding:38px 8px 10px; }.review-dialog img { border-radius:12px; }
}
@media(prefers-reduced-motion:reduce) { .main-page>.section::after,.glitch-frame { animation:none; }.glitch-frame--1,.glitch-frame--2 { opacity:.6; }.review-slide { transition:none; } }
.local-player-notice { max-width:620px; padding:12px 15px; margin:24px auto 0; border:1px solid #bf393940; border-radius:12px; color:#b7aaaa; font-size:12px; line-height:1.6; }
.video-unavailable { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; text-align:center; padding:25px; color:#bbb4b4; }
.video-unavailable>span { color:#bf3939; font-size:40px; }
.video-external { padding:10px 17px; border:1px solid #bf393955; border-radius:99px; background:#bf393915; }

/* V19: subtle entrance and softer joins between the contrasting sections. */
body { animation:pageEnter .65s ease-out both; }
@keyframes pageEnter { from { opacity:0; } to { opacity:1; } }
.main-page>.section { box-shadow:inset 0 26px 35px -30px #08090b, inset 0 -26px 35px -30px #08090b; }
.main-page>.section::before {
  background-image:linear-gradient(180deg,#0c0d1080,transparent 65px,transparent calc(100% - 65px),#0c0d1080),
    linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);
  background-size:auto,92px 92px,92px 92px;
  mask-image:none;
}
.main-page>.section::after {
  width:min(54vw,610px); height:340px; top:17%; right:-8%; left:auto;
  border:1px solid #ffffff13; border-radius:0; box-shadow:0 0 0 24px #ffffff04,0 0 0 70px #bf393906;
  clip-path:polygon(14% 0,100% 0,100% 72%,75% 100%,0 100%,0 24%);
  background:repeating-linear-gradient(135deg,transparent 0 22px,#ffffff06 23px 24px,transparent 25px 70px);
  transform:translate3d(0,var(--scroll-shift,0px),0) rotate(-14deg) !important;
  animation:none !important; opacity:.7; pointer-events:none;
}
.main-page>.section:nth-of-type(2n)::after { left:-12%; right:auto; top:35%; transform:translate3d(0,var(--scroll-shift,0px),0) rotate(12deg) !important; clip-path:polygon(0 0,82% 0,100% 28%,100% 100%,18% 100%,0 72%); }
.main-page>.section:nth-of-type(3n)::after { width:min(55vw,510px); height:430px; top:24%; right:-3%; transform:translate3d(0,var(--scroll-shift,0px),0) skew(-12deg) !important; clip-path:polygon(0 12%,70% 0,100% 34%,82% 100%,10% 85%); }
.main-page>.section:nth-of-type(4n)::after { width:min(44vw,470px); height:480px; left:-4%; top:14%; transform:translate3d(0,var(--scroll-shift,0px),0) rotate(20deg) !important; clip-path:polygon(24% 0,100% 16%,83% 88%,0 100%); }
.main-page>.section:nth-of-type(5n)::after { width:min(68vw,700px); height:260px; top:38%; right:-14%; transform:translate3d(0,var(--scroll-shift,0px),0) skewY(-13deg) !important; clip-path:polygon(0 20%,100% 0,90% 76%,20% 100%); }
.section--trust .trust-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; max-width:1080px; margin:48px auto 0; }
.section--trust .trust-card { min-height:154px; padding:23px 26px; display:grid; grid-template-columns:55px 1fr; align-content:center; column-gap:13px; background:linear-gradient(125deg,#ffffff08,#ffffff02); }
.section--trust .trust-card>span { grid-row:span 2; align-self:start; color:#bc8d55; font-size:25px; padding-top:2px; }
.section--trust .trust-card h3 { margin:0 0 7px; font-size:16px; }
.section--trust .trust-card p { font-size:13px; line-height:1.55; }
.trust-stats strong { color:#dfbc7c; background:linear-gradient(120deg,#ae8445,#ffe0a0 48%,#be8d4e); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 10px 28px #b98d4325; }
.review-autoplay { width:40px; height:40px; display:grid; place-items:center; border:1px solid #ffffff30; border-radius:50%; background:#18191d; text-decoration:none; color:#e6e2df; }
.review-autoplay:hover,.review-autoplay:focus-visible { border-color:#bf3939; color:#fff; background:#bf393930; }
.review-autoplay svg { width:17px; height:17px; fill:currentColor; }
.hero-loop { opacity:.25; filter:saturate(.8); }
.hero-bg-overlay { z-index:1; }
.services-content:not(.is-text-only)::before { content:""; position:absolute; inset:12px; pointer-events:none; border-radius:14px; background:repeating-linear-gradient(90deg,transparent 0 32px,#ffffff06 33px 34px,transparent 35px 68px); mask-image:linear-gradient(180deg,transparent 15%,#000 65%,transparent 95%); }
.services-content:not(.is-text-only)::after { content:"36 / EDIT • CREATE • DELIVER"; position:absolute; right:28px; bottom:24px; color:#a66b6b; font-size:9px; font-weight:800; letter-spacing:.2em; pointer-events:none; }
#reviews,#questions,#about,#services,#featured-work,#demo,#process { scroll-margin-top:85px; }
@media(max-width:700px) {
  .section--trust .trust-grid { grid-template-columns:1fr; gap:9px; margin-top:28px; }
  .section--trust .trust-card { min-height:0; padding:18px; grid-template-columns:40px 1fr; gap:0 10px; }
  .section--trust .trust-card>span { font-size:22px; }
  .main-page>.section::after { opacity:.35; }
  .services-content:not(.is-text-only)::after { right:18px; bottom:12px; font-size:7px; }
}
@media(prefers-reduced-motion:reduce) { body { animation:none; } .main-page>.section::after { transform:none !important; } }

/* V20: supplied media, gold service icons and a phone-sized short-form preview. */
.hero-loop { opacity:.48; }
.section--services .services-bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.14; pointer-events:none; z-index:0; filter:saturate(.65); }
.section--services>.container { position:relative; z-index:1; }
.showreel { overflow:hidden; aspect-ratio:16/9; }
.showreel video { display:block; width:100%; height:100%; background:#090a0c; object-fit:contain; }
.service-preview--image .service-preview-video { display:block; width:100% !important; height:100% !important; object-fit:cover !important; }
.service-preview--portrait { width:min(175px,45%) !important; max-width:175px !important; height:auto !important; aspect-ratio:9/16 !important; }
.service-preview--portrait .service-preview-video { object-fit:contain !important; }
.services-content.is-short-form { min-height:470px !important; }
.section--trust .trust-card__mark { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.trust-card__mark svg { width:29px; height:29px; fill:none; stroke:#e0bd78; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px #c7a05a40); }
.trust-card__mark em { font-style:normal; font-size:18px; color:#ae8656; }
@media(max-width:700px) {
  .section--services .services-bg-video { opacity:.10; }
  .services-content.is-short-form { height:auto !important; min-height:0 !important; padding-bottom:30px !important; }
  .services-content.is-short-form .service-panel.is-active { height:auto !important; min-height:0 !important; }
  .service-preview--portrait { width:min(145px,46vw) !important; max-width:145px !important; aspect-ratio:9/16 !important; margin-inline:auto !important; align-self:center !important; height:auto !important; flex:none !important; }
  .service-preview--portrait .service-preview-video { object-fit:contain !important; aspect-ratio:9/16 !important; }
  .section--trust .trust-card__mark { gap:8px; }
  .trust-card__mark svg { width:24px; height:24px; }
  .trust-card__mark em { font-size:15px; }
}

/* V21: loop-only landing, video-matched promo poster and restrained gold reviews. */
.hero-page::before { display:none !important; }
.hero-loop { opacity:1 !important; filter:none !important; }
.hero-bg-overlay { background:linear-gradient(180deg,rgba(8,9,11,.26),rgba(8,9,11,.48) 58%,rgba(8,9,11,.76)) !important; }
.hero-card { text-shadow:0 2px 20px rgba(0,0,0,.36); }
.showreel { aspect-ratio:1280/802 !important; }
.section--trust .trust-card__mark { gap:0; }
.section--trust .trust-card__mark svg { width:32px; height:32px; }
.reviews-heading .section-kicker { color:#e0bd78; }
.reviews-heading .section-kicker::before { background:#e0bd78; box-shadow:0 0 11px #e0bd7870; }
.review-slide { border-color:#c7a05a36 !important; }
.review-slide.is-current { border-color:#e0bd78 !important; box-shadow:0 20px 45px #0005,0 0 30px #c7a05a25 !important; }
.review-stars { color:#e0bd78 !important; text-shadow:0 0 9px #c7a05a55; }
.review-quote,.review-card-foot>span { color:#e0bd78; }
.review-arrow,.review-autoplay { border-color:#c7a05a70; }
.review-arrow:hover,.review-autoplay:hover,.review-autoplay:focus-visible { background:#c7a05a; color:#161412; }
.review-dots button.is-current::after { background:#e0bd78; }
.review-dialog { border-color:#c7a05a90; }
@media(max-width:700px) { .section--trust .trust-card__mark svg { width:25px; height:25px; } }


/* V22: requested final fixes — softer landing loop, clean services panel, standard promo frame, single 1000+ stat and full-bleed portrait preview. */
.hero-loop { opacity:.38 !important; filter:saturate(.82) !important; }
.services-content:not(.is-text-only)::after { content:none !important; display:none !important; }
.showreel { aspect-ratio:16/9 !important; }
.showreel video { width:100% !important; height:100% !important; object-fit:contain !important; }
.trust-stats--single { grid-template-columns:1fr !important; max-width:620px !important; }
.trust-stats--single>div { border-left:0 !important; }
.trust-stats--single strong { font-size:clamp(58px,7vw,88px) !important; }
.service-preview--portrait { overflow:hidden !important; background:transparent !important; }
.service-preview--portrait .service-preview-video { width:100% !important; height:100% !important; aspect-ratio:9/16 !important; object-fit:cover !important; background:transparent !important; }
@media(max-width:700px){ .hero-loop{opacity:.34 !important;} .trust-stats--single strong{font-size:clamp(54px,17vw,76px) !important;} }

/* Portrait promo video */
.showreel.showreel--vertical {
  width: min(100%, 390px);
  aspect-ratio: 9 / 16 !important;
}
.showreel.showreel--vertical video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}