/* AMG Lanka Group — UI layer 3: floating glass nav, 3D "key" buttons, hero, logo strip, quick tiles, UX polish.
   Loaded last so it wins over style.css / spa.css. */

/* =================== FLOATING GLASS NAV =================== */
.site-nav{
  inset:14px 0 auto 0;margin:0 auto;width:min(1280px,calc(100% - 28px));
  border-radius:999px;border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(238,243,250,.5));
  -webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(11,30,51,.08),0 26px 46px -20px rgba(11,30,51,.55),0 6px 14px -6px rgba(11,30,51,.22);
}
.site-nav nav{max-width:none;margin:0;padding:8px 10px 8px 22px;gap:10px}
.brand img{height:50px;width:auto;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 4px 6px rgba(11,30,51,.25))}
.nav-links{margin-left:auto;gap:6px;font-size:13.5px;white-space:nowrap}
.nav-links a{
  padding:9px 14px;border-radius:999px;font-weight:700;color:#23405e;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(231,238,247,.7));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(11,30,51,.16),0 8px 12px -8px rgba(11,30,51,.45);
  transition:transform .18s cubic-bezier(.3,.9,.3,1),box-shadow .18s,background .2s,color .2s}
.nav-links a::after{display:none}
.nav-links a:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 5px 0 rgba(11,30,51,.16),0 14px 16px -8px rgba(11,30,51,.45);color:var(--navy-deep)}
.nav-links a:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(11,30,51,.16)}
.nav-links a[aria-current="page"]{
  color:#fff;background:linear-gradient(180deg,#1f4a75,#0B1E33);border-color:#0B1E33;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.12),0 1px 0 #fff;transform:translateY(2px)}
.nav-tools .chip{
  min-height:42px;padding:0 16px;border-radius:999px;font-weight:800;color:#23405e;
  background:linear-gradient(180deg,#fff,#e4ebf4);border:1px solid #fff;
  box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(11,30,51,.18),0 8px 12px -8px rgba(11,30,51,.45)}
.nav-tools .chip:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 5px 0 rgba(11,30,51,.18),0 14px 16px -8px rgba(11,30,51,.45)}
.nav-tools .chip:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(11,30,51,.18)}
.site-nav .nav-cta{
  min-height:44px;display:inline-flex;align-items:center;padding:0 22px;border-radius:999px;color:#1b1500;font-weight:800;
  background:linear-gradient(180deg,#F6E3A0,#E3C05A 45%,#C9A227);border:1px solid #B28B1B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 6px rgba(120,86,0,.25),0 4px 0 #8a6a10,0 12px 18px -6px rgba(138,106,16,.55)}
.site-nav .nav-cta:hover{background:linear-gradient(180deg,#FBEBB4,#EBCB6B 45%,#D4AE2F);color:#1b1500;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 0 #8a6a10,0 18px 24px -8px rgba(138,106,16,.6)}
.site-nav .nav-cta:active{transform:translateY(3px);box-shadow:inset 0 2px 6px rgba(120,86,0,.45),0 1px 0 #8a6a10}
.lang-dropdown{border-radius:18px;border:1px solid #fff;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);top:calc(100% + 14px)}

/* burger + mobile menu */
.burger{width:46px;height:46px;border-radius:50%;margin-left:auto;align-items:center;background:linear-gradient(180deg,#fff,#e4ebf4);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(11,30,51,.2),0 8px 12px -8px rgba(11,30,51,.45)}
.burger span{width:20px}
.burger:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(11,30,51,.2)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{position:absolute;top:calc(100% + 10px);left:0;right:0;border-radius:28px;border:0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);box-shadow:0 30px 60px -24px rgba(11,30,51,.6),inset 0 1px 0 #fff}
.mobile-nav:not(.open){box-shadow:none;background:transparent}
.mobile-nav.open{max-height:82vh;overflow:auto;padding:10px 6px}
.mobile-nav a{margin:6px 8px;padding:14px 18px;border:0;border-radius:16px;font-size:16px;color:#23405e;background:linear-gradient(180deg,#fff,#e9eff7);box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(11,30,51,.15)}
.mobile-nav a[aria-current="page"]{color:#fff;background:linear-gradient(180deg,#1f4a75,#0B1E33);box-shadow:inset 0 2px 5px rgba(0,0,0,.5)}
.mobile-nav a:active{transform:translateY(2px)}
.m-tools .chip{border-radius:999px;background:linear-gradient(180deg,#fff,#e4ebf4);box-shadow:0 3px 0 rgba(11,30,51,.18)}
.m-tools .chip.active{background:linear-gradient(180deg,#F6E3A0,#C9A227);color:#1b1500}
@media (max-width:1120px){
  .nav-links,.nav-tools,.site-nav .nav-cta{display:none}
  .burger,.mobile-nav{display:flex}
  .site-nav nav{padding:8px 10px 8px 18px}
}
@media (max-width:560px){.site-nav{inset:10px 0 auto 0;width:calc(100% - 20px)}.brand img{height:44px}}

/* =================== 3D "KEY" BUTTONS =================== */
.btn{min-height:48px;padding:12px 28px;border-radius:16px;font-weight:800;letter-spacing:.01em;border:1px solid transparent;
  transition:transform .18s cubic-bezier(.3,.9,.3,1),box-shadow .18s,filter .2s}
.btn-gold{color:#1b1500;background:linear-gradient(180deg,#F6E3A0 0%,#E3C05A 45%,#C9A227 100%);border-color:#B28B1B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 6px rgba(120,86,0,.25),0 5px 0 #8a6a10,0 14px 22px -6px rgba(138,106,16,.55)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 6px rgba(120,86,0,.25),0 8px 0 #8a6a10,0 22px 28px -8px rgba(138,106,16,.6)}
.btn-gold:active{transform:translateY(4px);box-shadow:inset 0 2px 6px rgba(120,86,0,.45),0 1px 0 #8a6a10,0 4px 8px -2px rgba(138,106,16,.4)}
.btn-navy{color:#fff;background:linear-gradient(180deg,#22507d 0%,#16324F 45%,#0B1E33 100%);border-color:#071526;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -3px 6px rgba(0,0,0,.35),0 5px 0 #040c16,0 14px 22px -6px rgba(4,12,22,.6)}
.btn-navy:hover{transform:translateY(-3px);background:linear-gradient(180deg,#2a5d90,#1b3d62 45%,#0e2740);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 0 #040c16,0 22px 28px -8px rgba(4,12,22,.65)}
.btn-navy:active{transform:translateY(4px);box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 1px 0 #040c16}
.btn-line{color:var(--navy-deep);background:linear-gradient(180deg,#fff,#e6edf6);border-color:#fff;
  box-shadow:inset 0 1px 0 #fff,0 5px 0 rgba(11,30,51,.2),0 14px 22px -8px rgba(11,30,51,.4)}
.btn-line:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #fff,0 8px 0 rgba(11,30,51,.2),0 22px 28px -10px rgba(11,30,51,.45)}
.btn-line:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(11,30,51,.2)}
.btn-line.on-dark{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08));border-color:rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 5px 0 rgba(0,0,0,.4),0 14px 22px -8px rgba(0,0,0,.5)}
.btn-line.on-dark:hover{background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.14));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 0 rgba(0,0,0,.4),0 22px 28px -10px rgba(0,0,0,.55)}
.btn-line.on-dark:active{box-shadow:0 1px 0 rgba(0,0,0,.4)}
.form .btn{border:1px solid #B28B1B}

/* tabs, options, small controls — same keycap language */
.work-tabs button,.viewer-ui button,.bp-chips button,.opt,.calc-back,.sound-btn,.ring-ctrl button{
  border-radius:14px;transition:transform .18s cubic-bezier(.3,.9,.3,1),box-shadow .18s,background .2s,color .2s}
.work-tabs button{min-height:46px;color:#dbe5f1;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 rgba(0,0,0,.4)}
.work-tabs button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 0 rgba(0,0,0,.4)}
.work-tabs button.active,.viewer-ui button.active{color:#1b1500;background:linear-gradient(180deg,#F6E3A0,#E3C05A 45%,#C9A227);border-color:#B28B1B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 4px 0 #8a6a10,0 12px 18px -6px rgba(138,106,16,.5)}
.work-tabs button:active,.viewer-ui button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.viewer-ui button{min-height:44px;border:1px solid rgba(255,255,255,.35);background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 rgba(0,0,0,.45)}
.opt{min-height:52px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 0 rgba(0,0,0,.35)}
.opt:hover{transform:translateY(-2px);border-color:var(--gold-light)}
.opt.selected{background:linear-gradient(180deg,rgba(232,200,116,.35),rgba(201,162,39,.2));border-color:var(--gold);transform:translateY(2px);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.calc-nav button{min-height:46px;border-radius:14px}
.calc-next{background:linear-gradient(180deg,#F6E3A0,#E3C05A 45%,#C9A227)!important;border:1px solid #B28B1B!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 4px 0 #8a6a10}
.calc-next:active{transform:translateY(3px);box-shadow:0 1px 0 #8a6a10}
.calc-back{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 0 rgba(0,0,0,.35)}
.ring-ctrl button{width:52px;height:52px;border-radius:50%;background:linear-gradient(180deg,#fff,#e4ebf4);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 4px 0 rgba(11,30,51,.22),0 10px 16px -8px rgba(11,30,51,.5)}
.ring-ctrl button:hover{transform:translateY(-2px);background:linear-gradient(180deg,#22507d,#0B1E33);color:var(--gold-light)}
.ring-ctrl button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(11,30,51,.22)}
.bp-chips button{background:linear-gradient(180deg,#fff,#eef2f8);border:1px solid #fff;box-shadow:0 3px 0 rgba(11,30,51,.15)}
.bp-form button{box-shadow:0 3px 0 #8a6a10}
.sound-btn{border:1px solid rgba(255,255,255,.3);background:linear-gradient(180deg,rgba(40,70,105,.85),rgba(11,30,51,.85));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 0 rgba(0,0,0,.45)}
.sound-btn:active{transform:translateY(3px)}
.to-top{background:linear-gradient(180deg,#22507d,#0B1E33);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 0 #040c16,0 12px 20px -6px rgba(0,0,0,.55)}
.modal-close{background:linear-gradient(180deg,#fff,#e4ebf4);box-shadow:0 3px 0 rgba(11,30,51,.2)}
.wa-float{border-radius:999px;background:linear-gradient(180deg,#3fe07f,#1fb455);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 0 #11803a,0 14px 22px -8px rgba(0,0,0,.5)}
.wa-float:active{transform:translateY(3px);box-shadow:0 1px 0 #11803a}

/* =================== HOME HERO: no white haze, white text =================== */
.hero-video{background:#0b1e33}
.hero-video::before{display:none!important}
.hero-video::after{height:62%;background:linear-gradient(to top,rgba(4,12,24,.82) 0%,rgba(4,12,24,.5) 38%,rgba(4,12,24,0) 100%)}
.hero-caption h1{color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.55)}
.hero-caption p{color:rgba(255,255,255,.95);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.scroll-cue{color:rgba(255,255,255,.85)}
.hero-video .sound-btn{top:104px!important}

/* =================== LOGO STRIP =================== */
.trust{background:#fff;padding:30px 0 36px;border-bottom:1px solid rgba(11,30,51,.07)}
.trust p{font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:12px}
.marquee{gap:80px;align-items:center;animation-duration:42s}
.marquee .mq{display:flex;align-items:center;height:88px;opacity:1}
.mq img{height:78px;width:auto;max-width:250px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(11,30,51,.14));transition:transform .3s cubic-bezier(.3,.9,.3,1)}
.mq:hover img{transform:translateY(-5px) scale(1.1)}
.trust:hover .marquee{animation-play-state:paused}

/* =================== QUICK TILES (where to next) =================== */
.quick{padding-bottom:clamp(40px,6vw,80px)}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.qtile{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px 26px 24px;border-radius:22px;background:linear-gradient(160deg,#fff,#f6f1e4);border:1px solid rgba(11,30,51,.09);box-shadow:var(--shadow-3d);color:var(--ink)}
.qtile .qi{width:58px;height:58px;border-radius:16px;background:linear-gradient(180deg,#22507d,#0B1E33);display:grid;place-items:center;transform:translateZ(40px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 0 #040c16,0 16px 24px -8px rgba(11,30,51,.6);margin-bottom:14px}
.qtile .qi svg{width:28px;height:28px}
.qtile b{font-family:var(--font-display);font-size:19px;color:var(--navy-deep);transform:translateZ(24px)}
.qtile>span:not(.qi){color:var(--slate);font-size:14.5px;flex:1}
.qtile i{font-style:normal;font-weight:800;color:var(--navy-deep);font-size:14px;margin-top:6px;border-bottom:2px solid var(--gold);align-self:flex-start;padding-bottom:2px;transition:color .2s}
.qtile:hover i{color:#a8841a}

/* =================== LOGOS ELSEWHERE =================== */
.foot-brand img{height:68px;width:auto;object-fit:contain;background:#fff;border-radius:16px;padding:6px 12px}
.proj .logo-chip{border-radius:14px;padding:5px 10px}
.proj .logo-chip img{height:42px;width:auto;max-width:90px;object-fit:contain}
.ring-card .rc-logo{padding:10px}
.group-visual img{background:#fff;border-radius:28px;padding:18px 24px;max-height:340px;object-fit:contain}

/* =================== USER-FRIENDLY EXTRAS =================== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main:focus{outline:none}
a,button{-webkit-tap-highlight-color:transparent}
.field input,.field textarea{min-height:48px}
.field.invalid input,.field.invalid textarea{border-color:#ff8a7a;background:rgba(255,120,100,.1)}
.field .err{display:none;color:#ffb4a8;font-size:12.5px;font-weight:700;margin-top:6px}
.field.invalid .err{display:block}
.form-msg.ok{color:#9be7a8}
.page-hero{padding-top:clamp(130px,16vw,200px)}
@media (max-width:560px){.btn{width:100%;justify-content:center}.hero-actions{width:100%}.journey-copy .btn{width:auto}}

/* seamless logo loop: 4 identical sets, shift by exactly one set (25%) -> no gap ever */
.marquee{gap:0!important;width:max-content;animation:marq4 56s linear infinite!important}
.marquee .mq{padding:0 46px}
@keyframes marq4{from{transform:translateX(0)}to{transform:translateX(-25%)}}
/* R3F host elements fill their stage */
.r3f-host{position:absolute;inset:0}
.r3f-host canvas{outline:none}


/* =================== SMALL-SCREEN HARDENING =================== */
body{overflow-x:clip}
.proj-grid{grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr))}
.svc-grid{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.team-grid{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.feat-grid,.quick-grid{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.values{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.stats .wrap{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
img,video,canvas,svg,iframe{max-width:100%}
h1,h2,h3{overflow-wrap:break-word}
@media (max-width:980px){
  .ring-wrap{margin:0 -20px}
  /* SL Travel Buddy story: bus on top, compact caption card below */
  .bs-top{padding-top:84px}
  .bs-top img{height:40px;padding:3px 6px;border-radius:12px}
  .bs-top b{font-size:15px}
  .bs-top small{display:none}
  .bs-panel{top:auto!important;bottom:96px!important;left:14px!important;right:14px!important;width:auto!important;padding:14px 16px!important;border-radius:20px!important;max-height:34vh;overflow:hidden;transform:translateY(24px)}
  .bs-panel.active{transform:none}
  .bs-panel .step{font-size:11px;margin-bottom:6px}
  .bs-panel h2{font-size:clamp(18px,5.4vw,24px)!important;margin-bottom:6px!important}
  .bs-panel p{font-size:13.5px!important;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .bs-panel .btn{margin-top:10px;min-height:42px;padding:8px 18px;width:auto}
  .bs-rail{right:8px;top:36%;gap:12px}
  .bs-hint{display:none}
}
@media (max-width:980px) and (max-height:640px){.bs-panel p{-webkit-line-clamp:3}.bs-top{display:none}}
@media (max-width:560px){
  .viewer-box{height:clamp(380px,112vw,500px)}
  .viewer-box .r3f-host{bottom:92px}
  .viewer-ui{gap:6px;bottom:12px}
  .viewer-ui button{padding:8px 12px;font-size:12px;min-height:38px}
  .viewer-name{font-size:16px;top:12px;left:14px}
  .viewer-hint{top:14px;right:12px;font-size:10px}
  .hero-video .sound-btn{top:84px!important;right:14px!important;padding:8px 12px}
  .hero-caption h1{font-size:clamp(22px,7vw,30px)}
  .page-hero h1{font-size:clamp(28px,9vw,40px)}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){body:has(#page-travelbuddy.active) .to-top{display:none}}
@media (max-width:980px) and (max-height:600px){.bs-panel{max-height:none}.bs-panel p{-webkit-line-clamp:2}}
@media (max-width:420px){.viewer-hint{display:none}.viewer-name{font-size:15px}}
@media (max-width:560px){.to-top{right:14px;bottom:104px;width:40px;height:40px}}

/* =================== LOGOS SCALE WITH THE SCREEN =================== */
.site-nav nav{padding:clamp(5px,1.2vw,8px) clamp(6px,1.2vw,10px) clamp(5px,1.2vw,8px) clamp(12px,2vw,22px)}
.brand img{height:clamp(30px,calc(18px + 3.2vw),50px)!important;width:auto}
.burger{width:clamp(38px,10vw,46px);height:clamp(38px,10vw,46px)}
.marquee .mq{height:clamp(52px,calc(34px + 4.6vw),88px);padding:0 clamp(22px,4vw,46px)}
.mq img{height:clamp(40px,calc(26px + 4vw),78px);max-width:clamp(120px,22vw,250px)}
.foot-brand img{height:clamp(44px,calc(30px + 3vw),68px)}
.ring-card .rc-logo{height:clamp(84px,22vw,120px)}
.bs-top img{height:clamp(32px,9vw,40px)}
.proj .logo-chip img{height:clamp(30px,9vw,42px)}
.brand-card .bc-logo{min-height:clamp(170px,48vw,260px);padding:clamp(18px,5vw,38px)}
.brand-card .bc-logo img{max-height:clamp(110px,34vw,200px)}
.group-visual img{max-height:clamp(120px,40vw,340px)}

/* slide-in animations must never widen the page on phones (clip does not break position:sticky) */
.page{overflow-x:clip}
@media (max-width:760px){.rv-l{transform:translateX(-22px)}.rv-r{transform:translateX(22px)}.rv-z{transform:translateY(22px)}}

/* =================== BUDDY BUTTON + CHAT SCALE WITH THE SCREEN =================== */
:root{--buddy-w:clamp(52px,17vw,96px);--buddy-h:calc(var(--buddy-w) * .74)}
.buddy-btn{width:var(--buddy-w)!important;right:clamp(8px,2.4vw,20px)!important;bottom:clamp(10px,2.4vw,18px)!important}
.buddy-panel{bottom:calc(var(--buddy-h) + clamp(22px,4vw,34px))!important;right:clamp(8px,2.4vw,20px)!important;width:min(390px,calc(100vw - 16px))!important;height:min(560px,calc(100svh - var(--buddy-h) - 118px))!important}
.wa-float{left:clamp(8px,2.4vw,22px);bottom:clamp(10px,2.4vw,22px);padding:clamp(8px,2.4vw,12px) clamp(10px,3vw,18px)}
.to-top{bottom:calc(var(--buddy-h) + clamp(24px,4vw,34px))!important;right:clamp(10px,2.8vw,34px)!important;width:clamp(36px,10vw,46px);height:clamp(36px,10vw,46px)}
.bp-head{padding:clamp(10px,3vw,14px) clamp(12px,3.4vw,16px)}
.bp-head img{width:clamp(34px,10vw,48px);height:auto}
@media (max-width:980px){.bs-panel{bottom:calc(var(--buddy-h) + 28px)!important}}
.bp-form{gap:6px;padding:clamp(8px,2.4vw,12px)}
.bp-form input{min-width:0;padding:clamp(9px,2.6vw,11px) clamp(12px,3.4vw,16px)}
.bp-form button{flex:0 0 clamp(38px,11vw,44px);width:clamp(38px,11vw,44px);height:clamp(38px,11vw,44px);border-radius:50%;padding:0}
.bp-chips{gap:6px;padding:0 clamp(10px,3vw,16px) 8px}
.bp-chips button{font-size:clamp(11px,3.3vw,12.5px);padding:6px 10px}
.bp-msgs{padding:clamp(10px,3vw,16px)}
.msg{font-size:clamp(13px,3.7vw,14.5px)}
.bp-head b{font-size:clamp(15px,4.4vw,17px)}
.bp-head small{font-size:clamp(10px,3vw,11.5px)}

/* smaller robot on small windows */
:root{--buddy-w:clamp(40px,8.5vw,92px)}

/* phones: dim the page behind the open chat; tapping the dimmed area minimises it */
.buddy-backdrop{display:none}
@media (max-width:760px){
  .buddy-backdrop{display:block;position:fixed;inset:0;z-index:259;background:rgba(7,20,31,.38);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .35s}
  .buddy-backdrop.on{opacity:1;visibility:visible;transition-delay:0s}
}


/* =================== MOBILE MENU: compact, 2-column, closes on outside tap =================== */
.nav-backdrop{display:none}
@media (max-width:1120px){
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:190;background:rgba(7,20,31,.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s}
  .nav-backdrop.on{opacity:1;visibility:visible;transition-delay:0s}
  .mobile-nav{display:grid;grid-template-columns:1fr 1fr;gap:0;align-content:start;visibility:hidden;transition:max-height .3s,visibility 0s linear .3s}
  .mobile-nav.open{visibility:visible;transition:max-height .3s,visibility 0s;max-height:min(440px,calc(100svh - 96px));padding:8px 6px 6px;overflow-y:auto;overscroll-behavior:contain}
  .mobile-nav a{margin:4px;padding:11px 12px;font-size:14.5px;line-height:1.25;border-radius:14px;text-align:center;box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(11,30,51,.15)}
  .mobile-nav .m-tools{grid-column:1/-1;padding:8px 6px 6px;gap:6px;justify-content:center}
  .m-tools .chip{min-height:36px;padding:0 13px;font-size:12.5px}
}

/* =================== MOBILE: every component scaled down to fit the phone =================== */
@media (max-width:760px){
  .wrap{padding:0 16px}
  .sec{padding:clamp(44px,12vw,60px) 0}
  .sec-head{margin-bottom:26px}
  .sec-head h2{font-size:clamp(23px,6.8vw,30px)}
  .sec-head p{font-size:14.5px;margin-top:10px}
  .kicker{font-size:12px;margin-bottom:8px}
  .teaser-head{margin-bottom:22px;gap:12px}

  /* buttons */
  .btn{min-height:42px;padding:9px 20px;font-size:13.5px;border-radius:14px}
  .btn-gold,.btn-navy,.btn-line{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 0 rgba(11,30,51,.35),0 10px 16px -8px rgba(11,30,51,.45)}
  .work-tabs{gap:8px;margin-bottom:22px}
  .work-tabs button{min-height:38px;padding:7px 14px;font-size:12.5px}

  /* page heroes + home hero */
  .page-hero{padding:104px 0 40px}
  .page-hero h1{font-size:clamp(26px,8vw,34px);margin:8px 0 12px}
  .page-hero p{font-size:14.5px}
  .orb.o1{width:200px;height:200px;right:-70px}
  .orb.o2{width:90px;height:90px}
  .hero-caption h1{font-size:clamp(20px,6vw,26px)}
  .hero-caption p{font-size:13px;line-height:1.5}
  .hero-actions{gap:8px}
  .journey{min-height:420px!important}
  .journey-copy{padding-top:60px!important}
  .journey-copy h2{font-size:clamp(20px,6vw,26px)!important}
  .cta-band{padding:44px 0}
  .cta-band h2{font-size:clamp(22px,6.6vw,30px);margin-bottom:16px}
  .trust{padding:20px 0 24px}
  .cinema-copy h2{font-size:clamp(18px,5.4vw,26px)}
  .cinema-copy p{font-size:13px}
  .cinema-frame{border-radius:18px}

  /* cards */
  .svc-grid,.quick-grid,.feat-grid,.values{gap:14px}
  .svc{padding:22px 20px 20px;border-radius:18px}
  .svc .ico{width:48px;height:48px;border-radius:14px}
  .svc .ico svg{width:23px;height:23px}
  .svc h3{font-size:17px;margin:18px 0 6px}
  .svc p{font-size:13.5px}
  .qtile{padding:20px 18px 18px;border-radius:18px;gap:6px}
  .qtile .qi{width:46px;height:46px;border-radius:13px;margin-bottom:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 0 #040c16,0 12px 18px -8px rgba(11,30,51,.6)}
  .qtile .qi svg{width:22px;height:22px}
  .qtile b{font-size:16.5px}
  .qtile>span:not(.qi){font-size:13.5px}
  .qtile i{font-size:13px}
  .feat{padding:18px;border-radius:16px}
  .feat b{font-size:15.5px;margin-bottom:5px}
  .feat span{font-size:13.5px}
  .link-u{font-size:13.5px}

  /* group / ring */
  .ring-wrap{height:410px}
  .ring-card{padding:16px;gap:8px;border-radius:20px}
  .ring-card h3{font-size:17px}
  .ring-card p{font-size:13px}
  .ring-ctrl button{width:44px;height:44px}
  .group-card{border-radius:20px}
  .group-copy{padding:22px 20px}
  .group-copy h3{font-size:22px;margin-bottom:10px}
  .group-copy p{font-size:14px;margin-bottom:14px}
  .group-copy li{font-size:13.5px}
  .group-visual{padding:22px;min-height:190px}

  /* work */
  .proj-grid{gap:16px}
  .proj{border-radius:18px}
  .proj .body{padding:16px 16px 18px;gap:7px}
  .proj h3{font-size:17.5px}
  .proj p{font-size:13.5px}
  .proj .tag{font-size:11.5px}
  .proj .tech span{font-size:10.5px;padding:3px 8px}
  .proj .view{font-size:13px}
  .pill{font-size:10.5px;padding:4px 10px;top:10px;right:10px}

  /* travels */
  .brand-duo{gap:16px}
  .brand-card{border-radius:20px}
  .brand-card .bc-body{padding:20px 20px 22px}
  .brand-card h3{font-size:21px;margin-bottom:6px}
  .brand-card p{font-size:14px;margin-bottom:12px}
  .viewer-box{border-radius:20px}

  /* about */
  .story-grid{gap:22px}
  .story-grid p{font-size:14.5px;margin-bottom:12px}
  .facts{gap:14px}
  .fact span{font-size:13px}
  .tl{padding:0 0 26px 32px}
  .tl h3{font-size:17px}
  .tl p{font-size:14px}
  .about-stage h1{font-size:clamp(28px,8.4vw,38px);margin:10px 0 14px}
  .about-stage p{font-size:15px}
  .panel-fade{padding:14px 16px;border-radius:14px;font-size:13.5px}

  /* stats */
  .stats{padding:36px 0}
  .stats .wrap{gap:18px}
  .stat b{font-size:clamp(28px,8vw,38px)}
  .stat span{font-size:12.5px}

  /* team */
  .team-grid{gap:14px}
  .member{padding:12px;border-radius:16px}
  .member strong{font-size:15px;margin:12px 0 2px}
  .member span{font-size:12px}
  .org-legend{margin-top:30px;gap:12px 16px;font-size:11px}
  .org-pill{margin-top:28px;padding:10px 18px;font-size:12px}

  /* estimator + FAQ */
  .calc{border-radius:18px;padding:20px 16px}
  .calc h3{font-size:18px;margin-bottom:14px}
  .opt{min-height:46px;padding:11px 14px;font-size:14px}
  .calc-nav button{min-height:42px;padding:9px 18px;font-size:13.5px}
  .faq-q{font-size:15.5px;padding:16px 0}
  .faq-a p{font-size:14px;padding-bottom:16px}

  /* contact */
  .contact h2{font-size:clamp(24px,7vw,32px)}
  .contact .lead{font-size:14.5px;margin-bottom:20px}
  .cd{gap:12px;margin-bottom:14px}
  .cd .ic{width:36px;height:36px;border-radius:10px}
  .cd strong{font-size:13.5px}.cd span,.cd a{font-size:13.5px}
  .map{height:170px;margin-top:18px}
  .form{padding:18px 16px;gap:14px;border-radius:18px}
  .field label{font-size:12.5px}
  .field input,.field textarea{min-height:44px;padding:10px 13px;font-size:15px}

  /* footer */
  footer{padding:40px 0 22px}
  .foot-top{gap:28px;padding-bottom:26px}
  .foot-cols{gap:18px}
  .foot-cols h4{margin-bottom:8px}
  .foot-cols a{font-size:13px;margin-bottom:6px}
  .foot-bottom{font-size:12px}

  /* modal */
  .modal{padding:12px}
  .modal-card{border-radius:18px;padding:22px 18px;max-height:90svh}
  .modal-card h3{font-size:22px}
  .modal-card p{font-size:14px}

  /* floating buttons */
  .wa-float{font-size:13px}
}
@media (max-width:560px){
  /* buttons keep full width only where it helps (hero / forms); others stay compact */
  .btn{width:auto}
  .hero-actions .btn,.form .btn{width:100%}
  .hero-actions{width:100%}
  .foot-cols{grid-template-columns:1fr 1fr}
  .svc-grid,.quick-grid{grid-template-columns:1fr}
}
@media (max-width:380px){
  .mobile-nav a{font-size:13.5px;padding:10px 8px}
  .site-nav{width:calc(100% - 14px)}
  .brand img{height:30px!important}
}


/* =================== MOBILE ROUND 2: About fix + tighter cards =================== */
@media (max-width:980px){
  /* About: the floating "Design / Build" note was stretched over the whole stage (top + bottom both set) */
  .panel-fade{top:auto!important;bottom:calc(var(--buddy-h) + 30px)!important;left:14px!important;right:auto!important;width:min(260px,calc(100% - 100px));max-width:none;
    padding:10px 14px!important;border-radius:14px!important;font-size:12.5px!important;line-height:1.4;height:auto;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .panel-fade b{font-size:13px;margin-bottom:2px}
  .about-stage{align-items:flex-start}
  .about-stage .wrap{padding-top:92px}
  .about-stage .copy{max-width:100%}
  .about-stage h1{font-size:clamp(24px,6.6vw,34px)!important;margin:8px 0 10px!important}
  .about-stage p{font-size:14px!important;max-width:34ch}
}
@media (max-width:760px){
  /* floating buttons smaller so they never cover content */
  .wa-float{padding:9px 11px!important;font-size:12px}
  .wa-float svg{width:18px;height:18px}
  .to-top{width:34px!important;height:34px!important}
  :root{--buddy-w:clamp(40px,11vw,56px)}

  /* Work cards */
  .proj .shot{aspect-ratio:16/8}
  .proj .logo-chip{left:10px;top:10px;padding:3px 6px;border-radius:10px}
  .proj .logo-chip img{height:26px!important;max-width:70px}
  .proj .body{padding:12px 14px 14px;gap:5px}
  .proj h3{font-size:16px}
  .proj p{font-size:12.5px;line-height:1.5}
  .proj .tech{gap:5px}
  .proj .tech span{font-size:10px;padding:2px 7px}
  .proj .view{padding-top:4px;font-size:12.5px}
  .proj-grid{gap:12px}

  /* Travels cards */
  .brand-card .bc-logo{min-height:0!important;padding:14px!important}
  .brand-card .bc-logo img{max-height:84px!important;max-width:60%}
  .brand-card .bc-body{padding:14px 16px 16px}
  .brand-card h3{font-size:18px}
  .brand-card p{font-size:13px;margin-bottom:8px}
  .brand-card .tagline{font-size:12.5px;margin-bottom:4px}
  .feat-grid{gap:10px}.feat{padding:14px}
  .viewer-box{height:clamp(300px,90vw,400px)}

  /* Home / Services / tiles */
  .svc{padding:16px 16px 14px}
  .svc .ico{width:40px;height:40px;border-radius:12px}
  .svc .ico svg{width:20px;height:20px}
  .svc h3{font-size:15.5px;margin:12px 0 4px}
  .svc p{font-size:12.5px}
  .qtile{padding:14px 14px 12px}
  .qtile .qi{width:38px;height:38px;border-radius:11px;margin-bottom:4px}
  .qtile .qi svg{width:19px;height:19px}
  .qtile b{font-size:15px}
  .qtile>span:not(.qi){font-size:12.5px}
  .svc-grid,.quick-grid,.values{gap:10px}
  .ring-wrap{height:370px}
  .group-copy{padding:16px}
  .group-copy h3{font-size:19px}
  .group-visual{min-height:140px;padding:16px}

  /* Contact */
  .form{padding:14px 14px;gap:10px}
  .form .row{gap:10px}
  .field label{margin-bottom:4px;font-size:12px}
  .field input,.field textarea{min-height:40px;padding:8px 12px;font-size:14px}
  .field textarea{min-height:90px}
  .map{height:140px}
  .cd{margin-bottom:10px}
  .cd .ic{width:32px;height:32px}
  .contact .lead{margin-bottom:14px}

  /* About */
  .values .svc,.values article{padding:14px}
  .sec{padding:clamp(34px,10vw,48px) 0}
  .sec-head{margin-bottom:18px}
  .sec-head h2{font-size:clamp(21px,6.2vw,26px)}
  .story-grid h2{font-size:clamp(21px,6.2vw,26px)!important}
  .page-hero{padding:92px 0 30px}
}

/* About (phones/tablets): text on top, 3D logo in its own area underneath so they never overlap */
@media (max-width:980px){
  .about-stage canvas{inset:auto 0 0 0;top:auto;height:58%;width:100%}
  .about-hero.no-webgl .about-stage::before{top:auto;bottom:24%;right:50%;transform:translateX(50%);width:min(40vw,200px)}
}

/* =================== WORK cards on phones: compact list rows (thumbnail left, text right) =================== */
@media (max-width:760px){
  .proj-grid{grid-template-columns:1fr!important;gap:10px}
  .proj{display:grid;grid-template-columns:38% 1fr;align-items:stretch;border-radius:14px;transform:none!important}
  .proj .shot{aspect-ratio:auto;min-height:100%;height:100%}
  .proj .shot img{height:100%;object-fit:cover;object-position:left top}
  .proj .logo-chip{display:none}
  .proj .pill{top:6px;right:auto;left:6px;font-size:9px;padding:2px 7px}
  .proj .body{padding:10px 12px 11px;gap:4px;min-width:0}
  .proj .tag{font-size:10.5px}
  .proj h3{font-size:14.5px;line-height:1.2}
  .proj p{font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .proj .tech{margin-top:2px}
  .proj .tech span:nth-child(n+3){display:none}
  .proj .tech span{font-size:9.5px;padding:2px 6px}
  .proj .view{padding-top:2px;font-size:12px}
}
@media (max-width:380px){
  .proj{grid-template-columns:34% 1fr}
  .proj h3{font-size:13.5px}
}
@media (max-width:760px){
  .proj .shot{display:grid;place-items:center;padding:8px}
  .proj .shot img{height:auto;max-height:100%;width:100%;object-fit:contain;object-position:center;border-radius:6px}
}

/* =================== HOME on phones =================== */
@media (max-width:760px){
  /* scroll-played film: less dead space, frame fills the width */
  .cinema{height:175vh}
  .cinema-frame{width:min(94vw,calc((100svh - 180px) * 1.7778));border-radius:16px}
  .cinema-badge{top:11vh;font-size:11px}
  .cinema-copy{bottom:6vh;padding:0 16px}

  /* group ring: shorter cards, shorter stage */
  .ring-wrap{height:330px}
  .ring{height:300px;margin-top:-150px}
  .ring-card{padding:14px}
  .ring-card .rc-logo{height:84px!important}
  .ring-card h3{font-size:16px}
  .ring-card p{font-size:12.5px;line-height:1.45}
  .ring-card a{font-size:13px}

  /* service + "where to next" tiles: two per row */
  .svc-grid,.quick-grid{grid-template-columns:1fr 1fr!important;gap:10px}
  .svc,.qtile{padding:14px 12px 12px;border-radius:16px}
  .svc .ico,.qtile .qi{width:36px;height:36px;border-radius:10px}
  .svc .ico svg,.qtile .qi svg{width:18px;height:18px}
  .svc h3,.qtile b{font-size:14px;margin:10px 0 4px;line-height:1.2}
  .qtile b{margin:0}
  .svc p,.qtile>span:not(.qi){font-size:12px;line-height:1.45}
  .qtile i{font-size:12px}
  .qtile{gap:4px}

  /* photo band + CTA */
  .journey{min-height:360px!important}
  .journey-copy p{font-size:13px!important;margin-bottom:12px!important}
  .journey-copy .btn{min-height:40px;padding:8px 16px;font-size:12.5px}
  .stats{padding:28px 0}
  .stats .wrap{grid-template-columns:1fr 1fr;gap:14px}
  .stat b{font-size:clamp(24px,7vw,32px)}
  .stat span{font-size:11.5px}
}
@media (max-width:340px){.svc-grid,.quick-grid{grid-template-columns:1fr!important}}
@media (max-width:760px){
  .journey-shade{background:linear-gradient(to bottom,rgba(11,30,51,.92) 0%,rgba(11,30,51,.78) 45%,rgba(11,30,51,.25) 80%,rgba(11,30,51,.2) 100%)!important}
  .cinema .sound-btn{padding:6px 10px;font-size:11px;bottom:10px;right:10px}
}

/* =================== TAP TARGETS (touch screens: at least ~36px to hit) =================== */
@media (max-width:1120px){
  .sound-btn,.cinema .sound-btn{min-height:36px}
  .link-u,.ring-card a,.qtile i{min-height:36px;display:inline-flex;align-items:center}
  .proj .view{min-height:36px;display:inline-flex;align-items:center}
  .cd a,.contact .cd a{display:inline-block;padding:9px 0}
  .foot-cols a{padding:5px 0}
  .faq-q{min-height:48px}
  .modal-close{width:40px;height:40px}
  .bp-head button{width:38px;height:38px}
  .calc-nav button,.opt{min-height:44px}
}

/* odd last card spans the full row (no lonely half-width card) */
@media (max-width:760px){
  .svc-grid>:last-child:nth-child(odd),.quick-grid>:last-child:nth-child(odd){grid-column:1/-1}
  /* floating buttons get out of the way of popups */
  body:has(.modal.open) .wa-float,body:has(.modal.open) .buddy-btn,body:has(.modal.open) .to-top{display:none}
}

/* =================== PHONE LANDSCAPE / very short screens =================== */
@media (max-height:500px) and (orientation:landscape){
  .site-nav{inset:6px 0 auto 0}
  .site-nav nav{padding:4px 8px 4px 14px}
  .brand img{height:30px!important}
  .burger{width:38px;height:38px}
  .hero-video{min-height:340px}
  .hero-video .sound-btn{top:62px!important;right:14px!important;padding:6px 10px;font-size:12px}
  .hero-caption{bottom:62px!important}
  .hero-caption h1{font-size:clamp(18px,3.4vw,24px);max-width:34ch}
  .hero-caption p{display:none}
  .hero-actions{margin-right:0;gap:8px}
  .hero-actions .btn{min-height:36px;padding:6px 16px;font-size:12.5px;width:auto}
  .wa-float span{display:none}
  .wa-float{padding:10px!important}
  .buddy-btn .tip{display:none}
  .page-hero{padding:74px 0 24px}
  .mobile-nav.open{max-height:calc(100svh - 70px)}
  .mobile-nav{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1120px){.sound-btn,.cinema .sound-btn,.hero-video .sound-btn{min-height:36px!important;display:inline-flex;align-items:center}}