/* ==========================================================
   T&M Company — site styles
   Palette from the logo (navy / blue / cyan) plus one warm
   "sunset" accent taken from the brand video.
   ========================================================== */
:root{
  --ink:#061a3f;
  --navy:#05235f;
  --blue:#0a66e0;
  --sky:#1bc0f2;
  --sun:#f6b352;
  --mist:#eef3f9;
  --line:#d8e1ee;
  --muted:#4f5f78;
  --font-display:'Bricolage Grotesque','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --header-h:84px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
body.no-scroll{overflow:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;background:var(--sun);color:#1b1200;padding:10px 16px;border-radius:8px;font-weight:700;z-index:100}
.skip:focus{top:12px}

.wrap{width:min(1180px,100% - 2*clamp(20px,5vw,48px));margin-inline:auto}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em}
h1{font-weight:800;font-size:clamp(2.5rem,6.4vw,5.1rem);line-height:1.02;letter-spacing:-.035em}
h2{font-weight:750;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.08}
h3{font-weight:700;font-size:1.3rem;line-height:1.25}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.6;color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}
.textlink{font-weight:700;color:var(--blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em}
.textlink:hover{color:var(--navy)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.85em 1.6em;border-radius:999px;font:700 .98rem/1.2 var(--font-body);border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.btn:active{transform:translateY(1px)}
.btn-sun{background:var(--sun);color:#1b1200}
.btn-sun:hover{background:#ffc873}
.btn-ghost{border-color:rgba(255,255,255,.75);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--blue)}
.btn-line{border-color:var(--navy);color:var(--navy)}
.btn-line:hover{background:var(--navy);color:#fff}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background-color .3s ease,box-shadow .3s ease}
.site-header .bar{display:flex;align-items:center;gap:28px;height:var(--header-h)}
.brand{position:relative;z-index:3;display:block;line-height:0;background:#fff;border-radius:10px;padding:6px 10px;box-shadow:0 8px 24px -12px rgba(0,0,0,.55)}
.brand img{height:46px;width:auto}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.site-nav a{color:#fff;font-weight:600;font-size:.95rem;padding:9px 15px;border-radius:999px;transition:background-color .2s ease,color .2s ease}
.site-nav a:hover{background:rgba(255,255,255,.16)}
.site-nav a[aria-current="page"]{background:rgba(255,255,255,.22)}
.header-call{position:relative;z-index:3}
.nav-contact{display:none}
.menu-btn{display:none;position:relative;z-index:3;margin-left:auto;align-items:center;gap:10px;background:none;border:0;color:#fff;font:700 .95rem var(--font-body);cursor:pointer;padding:10px 4px}
.menu-btn .bars{width:24px;height:16px;position:relative}
.menu-btn .bars i{position:absolute;left:0;right:0;height:2.5px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease,top .25s ease}
.menu-btn .bars i:nth-child(1){top:0}
.menu-btn .bars i:nth-child(2){top:7px}
.menu-btn .bars i:nth-child(3){top:14px}
.menu-open .menu-btn .bars i:nth-child(1){top:7px;transform:rotate(45deg)}
.menu-open .menu-btn .bars i:nth-child(2){opacity:0}
.menu-open .menu-btn .bars i:nth-child(3){top:7px;transform:rotate(-45deg)}

.site-header.is-solid{background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--line)}
.is-solid .brand{box-shadow:none}
.is-solid .site-nav a{color:var(--ink)}
.is-solid .site-nav a:hover{background:var(--mist)}
.is-solid .site-nav a[aria-current="page"]{background:#e3edfc;color:var(--navy)}
.is-solid .menu-btn{color:var(--navy)}

/* ---------- Hero (video background) ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink) url("assets/hero-poster.jpg") center/cover no-repeat;color:#fff;min-height:max(640px,100svh);display:grid;align-items:center;text-align:center}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse 64% 60% at 50% 50%,rgba(4,18,52,.86) 0%,rgba(4,18,52,.66) 52%,rgba(4,18,52,.16) 100%),
  linear-gradient(180deg,rgba(4,18,52,.62) 0%,rgba(4,18,52,0) 24%,rgba(4,18,52,0) 60%,var(--ink) 100%)}
.hero-inner{padding:calc(var(--header-h) + 36px) 0 clamp(150px,20vh,190px)}
.brandline{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.4em 1em;font-weight:600;font-size:.95rem;color:#dbe8ff;margin-bottom:22px}
.brandline span+span{padding-left:1em;border-left:1.5px solid rgba(255,255,255,.4)}
.hero h1{max-width:none;margin-inline:auto;text-wrap:balance;font-size:clamp(2.4rem,5.6vw,4.6rem)}
.hero h1>span{display:block}
.hero h1>span+span{font-weight:400;color:#e8f1ff}
.hero .lede{color:#dbe6f8;margin:26px auto 0;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}

@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero .brandline,.hero .lede,.hero-actions{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero .brandline{animation-delay:.1s}
.hero .lede{animation-delay:.62s}
.hero-actions{animation-delay:.78s}

/* ---------- Quick-contact lanes (overlap hero) ---------- */
.quick{position:relative;z-index:2;margin-top:-96px}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.quick-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:clamp(26px,3vw,38px);border-radius:26px;box-shadow:0 30px 60px -28px rgba(4,18,52,.55)}
.quick-card--ict{background:var(--navy);color:#fff}
.quick-card--car{background:#fff;color:var(--ink);border:1px solid var(--line)}
.quick-card h2{font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.15}
.quick-card p{max-width:38ch}
.quick-card--ict p{color:#c7d9f7}
.quick-card--car p{color:var(--muted)}
.quick-phone{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3vw,2.15rem);letter-spacing:-.02em;margin-top:8px}
.quick-card--ict .quick-phone{color:var(--sun)}
.quick-card--car .quick-phone{color:var(--blue)}
.quick-card .textlink{margin-top:4px}
.quick-card--ict .textlink{color:#fff}

/* ---------- Sections ---------- */
.block{padding-block:clamp(72px,10vw,132px)}
.block--mist{background:var(--mist)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,7vw,96px);align-items:center}
.split-text{display:grid;gap:20px;justify-items:start}
.split-text .big{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.5;font-weight:500;color:var(--ink);max-width:36ch}
.split-media img{width:100%;height:auto;border-radius:22px;box-shadow:0 30px 60px -30px rgba(5,35,95,.45)}
.section-head{display:grid;gap:14px;margin-bottom:clamp(36px,5vw,64px);max-width:44rem}

/* Two-lane service overview, divided by a dashed road line */
.lanes{display:grid;grid-template-columns:1fr 1fr}
.lane{display:grid;gap:18px;align-content:start;justify-items:start;padding-inline:clamp(0px,4vw,64px)}
.lane:first-child{padding-left:0}
.lane:last-child{padding-right:0;border-left:3px dashed #b9c9df}
.lane h3{font-size:clamp(1.5rem,2.6vw,2rem)}
.tick-list{display:grid;gap:12px}
.tick-list li{position:relative;padding-left:30px;line-height:1.45}
.tick-list li::before{content:"";position:absolute;left:0;top:.18em;width:20px;height:20px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.lane--car .tick-list li::before{background-color:#c98416}

/* Why T&M */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.why>div{border-top:3px solid var(--ink);padding-top:20px;display:grid;gap:10px;align-content:start}
.why p{color:var(--muted)}

/* Mission band */
.mission{position:relative;background:var(--navy);color:#fff;padding-block:clamp(72px,10vw,128px)}
.mission::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:repeating-linear-gradient(90deg,var(--sun) 0 34px,transparent 34px 68px)}
.mission blockquote{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.7rem);line-height:1.22;letter-spacing:-.02em;max-width:26em;text-wrap:balance}
.mission .pillars{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:38px}
.mission .pillars li{padding:8px 18px;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;font-weight:600;font-size:.95rem;color:#e3eeff}

/* CTA */
.cta-band{display:grid;gap:22px;justify-items:start}
.cta-band h2{max-width:16ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Page heads (inner pages) ---------- */
.page-head{position:relative;isolation:isolate;color:#fff;padding:calc(var(--header-h) + clamp(56px,9vw,110px)) 0 clamp(64px,9vw,108px);background:linear-gradient(160deg,#041238 0%,var(--navy) 58%,#0a4fb8 140%)}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:repeating-linear-gradient(90deg,var(--sun) 0 34px,transparent 34px 68px)}
.page-head--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,18,56,.94) 8%,rgba(4,18,56,.62) 62%,rgba(4,18,56,.4) 100%),var(--bg) center/cover no-repeat}
.page-head h1{font-size:clamp(2.3rem,5.4vw,4.3rem);max-width:16ch;text-wrap:balance}
.page-head .lede{color:#cfe0fb;margin-top:22px}
.crumb{display:inline-block;margin-bottom:18px;font-weight:600;font-size:.95rem;color:#cfe0fb}

/* ---------- ICT capability groups ---------- */
.cap-group{display:grid;grid-template-columns:.75fr 1.6fr;gap:clamp(24px,5vw,72px);padding-block:clamp(36px,5vw,56px);border-top:1px solid var(--line)}
.cap-group:last-of-type{border-bottom:1px solid var(--line)}
.cap-group>div:first-child{display:grid;gap:10px;align-content:start}
.cap-group h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.cap-list{display:grid;grid-template-columns:1fr 1fr;gap:30px clamp(24px,4vw,56px)}
.cap-list h3{font-size:1.12rem;margin-bottom:6px}
.cap-list p{color:var(--muted);font-size:.98rem;line-height:1.55}

/* ---------- Services page ---------- */
.flyer{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,88px);align-items:center}
.flyer img{width:min(100%,460px);height:auto;border-radius:16px;box-shadow:0 30px 60px -30px rgba(5,35,95,.5);margin-inline:auto}
.flyer .split-text{gap:18px}

/* ---------- Car hire ---------- */
.hire-list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,6vw,88px)}
.hire-list>div{padding-block:26px;border-top:1px solid var(--line);display:grid;gap:6px}
.hire-list p{color:var(--muted)}
.assure{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:start;background:var(--navy);color:#fff;border-radius:28px;padding:clamp(32px,5vw,64px)}
.assure h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.assure p{color:#c7d9f7;margin-top:14px}
.assure h3{color:var(--sun);margin-bottom:14px;font-size:1.1rem}
.assure .tick-list li::before{background-color:var(--sun);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.6' fill='none' stroke='%23061a3f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- About ---------- */
.about-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,7vw,96px);align-items:start}
.about-top>div{display:grid;gap:16px;justify-items:start}
.about-top .big{font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.5}
.badge-row{display:flex;align-items:center;gap:clamp(24px,5vw,64px);flex-wrap:wrap}
.emblem{width:min(240px,60vw);aspect-ratio:1;border-radius:50%;box-shadow:0 24px 50px -22px rgba(5,35,95,.55)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.values>div{border-top:3px solid var(--blue);padding-top:20px;display:grid;gap:10px;align-content:start}
.values p{color:var(--muted)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,7vw,96px);align-items:start}
.methods{margin-top:32px;border-top:1px solid var(--line)}
.method{display:grid;gap:2px;padding:18px 0;border-bottom:1px solid var(--line);transition:padding-left .2s ease}
.method small{color:var(--muted);font-size:.9rem}
.method strong{font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.015em;color:var(--navy);overflow-wrap:anywhere}
.method:hover{padding-left:8px}
.method:hover strong{color:var(--blue)}
.form{background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(24px,4vw,44px);box-shadow:0 30px 60px -36px rgba(5,35,95,.4);display:grid;gap:18px}
.form h2{font-size:1.7rem}
.field{display:grid;gap:7px}
.field label{font-weight:700;font-size:.92rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid #c5d2e4;border-radius:12px;padding:13px 14px;transition:border-color .2s ease,box-shadow .2s ease}
.field textarea{resize:vertical;min-height:140px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,102,224,.18)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .btn{justify-self:start}
.form-status{font-size:.95rem;color:var(--muted);min-height:1.5em}

/* ---------- Footer ---------- */
.site-footer{background:#041231;color:#b7c8e3;padding-top:clamp(56px,8vw,88px)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:clamp(28px,4vw,56px);padding-bottom:clamp(40px,6vw,64px)}
.footer-brand img{height:56px;width:auto;background:#fff;border-radius:10px;padding:6px 10px}
.footer-brand p{margin-top:16px;max-width:32ch;font-size:.98rem}
.site-footer h4{font-family:var(--font-display);color:#fff;font-size:1rem;margin:0 0 14px}
.site-footer li+li{margin-top:9px}
.site-footer a{font-size:.96rem;color:#c9d8ef}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:.25em}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-block:22px;display:flex;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;font-size:.88rem;color:#93a8c9}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .header-call{display:none}
}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .site-nav{position:fixed;inset:0;z-index:2;margin:0;background:var(--ink);flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:calc(var(--header-h) + 12px) clamp(24px,8vw,56px) 40px;transform:translateY(-102%);visibility:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s linear .4s}
  .menu-open .site-nav{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s}
  .site-nav a,.is-solid .site-nav a{color:#fff;font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,7vw,2.4rem);padding:8px 0;border-radius:0;background:none!important}
  .site-nav a[aria-current="page"],.is-solid .site-nav a[aria-current="page"]{color:var(--sun)}
  .nav-contact{display:grid;gap:4px;margin-top:28px;padding-top:24px;border-top:1px dashed rgba(255,255,255,.3);width:100%}
  .site-nav .nav-contact a,.is-solid .site-nav .nav-contact a{font-family:var(--font-body);font-size:1.05rem;font-weight:600;color:#cfe0fb}
  .menu-open.site-header,.menu-open.site-header.is-solid{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .menu-open .menu-btn,.menu-open.is-solid .menu-btn{color:#fff}
  .split,.about-top,.contact-grid,.flyer,.assure{grid-template-columns:1fr}
  .split-media{order:-1}
  .lanes{grid-template-columns:1fr;gap:48px}
  .lane,.lane:first-child,.lane:last-child{padding-inline:0}
  .lane:last-child{border-left:0;border-top:3px dashed #b9c9df;padding-top:48px}
  .why,.values{grid-template-columns:1fr}
  .cap-group{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:680px){
  .quick-grid{grid-template-columns:1fr}
  .quick{margin-top:-72px}
  .cap-list,.hire-list,.field-row{grid-template-columns:1fr}
  .hero-scrim{background:linear-gradient(180deg,rgba(4,18,52,.7) 0%,rgba(4,18,52,.72) 55%,var(--ink) 100%)}
  .hero-inner{padding-bottom:150px}
    .hero-actions .btn{flex:1 1 100%}
  .brand img{height:40px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ==========================================================
   MOTION LAYER
   Everything here is progressive: without JS or with
   reduced-motion, content simply shows.
   ========================================================== */
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .45s cubic-bezier(.2,.7,.2,1) both}
.site-header{view-transition-name:site-header}
::view-transition-group(site-header){animation-duration:0s}

/* scroll progress bar */
.progress{position:fixed;left:0;top:0;height:4px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--sky),var(--sun))}

/* reveals */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.js .rv.in{opacity:1;transform:none}
.js .rv-wipe{clip-path:inset(0 100% 0 0 round 22px);transform:scale(1.06);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1),transform 1.4s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*120ms)}
.js .rv-wipe.in{clip-path:inset(0 0 0 0 round 22px);transform:none}
.js .rv-left{opacity:0;transform:translateX(-60px)}
.js .rv-left.in{opacity:1;transform:none}

/* hero: slow push-in on the video, content drifts as you scroll */
.hero-video{animation:push 26s ease-in-out infinite alternate}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-inner{will-change:transform,opacity}
.scroll-cue{position:absolute;left:50%;bottom:clamp(104px,15vh,128px);width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.7);border-radius:14px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* buttons: light sweep */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-120%);transition:transform .6s ease}
.btn:hover::after{transform:translateX(120%)}

/* animated road line between the two lanes */
.lane:last-child{border-left:0;position:relative}
.lane:last-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:repeating-linear-gradient(180deg,#b9c9df 0 14px,transparent 14px 28px);background-size:3px 28px;animation:road 1.2s linear infinite}
@keyframes road{to{background-position:0 28px}}

/* tilt cards */
.tilt{transition:transform .25s ease,box-shadow .25s ease;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.tilt:hover{box-shadow:0 40px 70px -28px rgba(4,18,52,.6)}

/* marquee */
.marquee{overflow:hidden;background:var(--ink);color:#fff;padding-block:22px;border-block:1px solid rgba(255,255,255,.1)}
.marquee-track{display:flex;width:max-content;animation:marq 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,3vw,2rem);letter-spacing:-.01em;padding-inline:26px;white-space:nowrap;display:inline-flex;align-items:center;gap:52px}
.marquee-track span::after{content:"";width:34px;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--sun) 0 10px,transparent 10px 16px)}
.marquee-track .alt{color:#8fb8f7}
@keyframes marq{to{transform:translateX(-50%)}}

/* fleet: cars drive in along a moving road */
.fleet{position:relative;background:linear-gradient(180deg,var(--mist) 0%,var(--mist) 62%,#dfe8f4 100%);overflow:hidden}
.fleet-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px) clamp(16px,2.5vw,32px);padding-bottom:64px;position:relative}
.fleet-row::after{content:"";position:absolute;left:-10vw;right:-10vw;bottom:0;height:44px;background:#1b2b4d;border-top:4px solid #2c3f68;-webkit-mask:none}
.fleet-row::before{content:"";position:absolute;left:-10vw;right:-10vw;bottom:19px;height:4px;z-index:1;background:repeating-linear-gradient(90deg,var(--sun) 0 34px,transparent 34px 68px);background-size:68px 4px;animation:roadx 1.4s linear infinite}
@keyframes roadx{to{background-position:-68px 0}}
.car{position:relative;display:grid;gap:6px;justify-items:center;text-align:center;padding-bottom:34px;z-index:2}
.car img{width:100%;max-width:340px;height:auto;filter:drop-shadow(0 18px 14px rgba(4,18,52,.28));transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.car:hover img{transform:translateY(-10px) scale(1.04);filter:drop-shadow(0 30px 18px rgba(4,18,52,.32))}
.car h3{font-size:1.05rem}
.car p{font-size:.92rem;color:var(--muted)}
.js .car.rv-left{transition:transform 1.3s cubic-bezier(.16,.84,.24,1),opacity .5s ease;transition-delay:calc(var(--i,0)*160ms)}
.js .car.rv-left:not(.in) img{filter:blur(6px) drop-shadow(0 18px 14px rgba(4,18,52,.28))}
.js .car.rv-left.in img{animation:settle .9s calc(var(--i,0)*160ms + 1s) ease both}
@keyframes settle{0%{transform:rotate(0)}35%{transform:rotate(-1.4deg) translateY(1px)}70%{transform:rotate(.5deg)}100%{transform:none}}
.fleet-note{margin-top:22px;font-size:.92rem;color:var(--muted)}

/* road trip: BMW drives with your scroll */
.trip{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding-block:clamp(64px,9vw,110px) 0}
.trip h2{max-width:20ch}
.trip-scene{position:relative;height:clamp(200px,30vw,300px);margin-top:20px}
.trip-road{position:absolute;left:0;right:0;bottom:0;height:70px;background:#0d1d42;border-top:3px solid #1b3161}
.trip-road::after{content:"";position:absolute;left:0;right:0;top:32px;height:5px;background:repeating-linear-gradient(90deg,var(--sun) 0 40px,transparent 40px 80px)}
.trip-car{position:absolute;bottom:34px;left:0;width:clamp(200px,32vw,380px);will-change:transform;filter:drop-shadow(0 24px 14px rgba(0,0,0,.55))}
.pin{position:absolute;bottom:clamp(130px,19vw,200px);transform:translateX(-50%) translateY(14px);opacity:0;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1);text-align:center;font-weight:700;font-size:.95rem;background:#fff;color:var(--ink);padding:9px 16px;border-radius:999px;white-space:nowrap}
.pin::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:#fff;transform:translateX(-50%) rotate(45deg)}
.pin.on{opacity:1;transform:translateX(-50%)}
.pin small{display:block;font-weight:500;color:var(--muted);font-size:.8rem}

/* ICT photos */
.cap-media{display:grid;gap:14px;margin-top:8px}
.cap-media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:18px;box-shadow:0 24px 44px -26px rgba(5,35,95,.5);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cap-media figure{overflow:hidden;border-radius:18px;margin:0}
.cap-media figure:hover img{transform:scale(1.06)}
.page-head--fiber::before{background:linear-gradient(90deg,rgba(4,18,56,.92) 10%,rgba(4,18,56,.55) 70%,rgba(4,18,56,.35) 100%),var(--bg) center/cover no-repeat;animation:push 22s ease-in-out infinite alternate}
.page-head{overflow:hidden}

/* home: photo strip */
.strip{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(12px,2vw,22px);margin-top:clamp(34px,5vw,56px)}
.strip figure{position:relative;margin:0;border-radius:22px;overflow:hidden;min-height:clamp(200px,26vw,330px)}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.strip figure:hover img{transform:scale(1.08)}
.strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:38px 18px 16px;color:#fff;font-weight:700;background:linear-gradient(180deg,transparent,rgba(4,18,52,.85));transform:translateY(8px);transition:transform .4s ease}
.strip figure:hover figcaption{transform:none}

@media (max-width:900px){
  .fleet-row{grid-template-columns:1fr 1fr}
  .strip{grid-template-columns:1fr 1fr}
  .strip figure:first-child{grid-column:1/-1}
  .lane:last-child{border-top:0}
  .lane:last-child::before{left:0;right:0;top:0;bottom:auto;width:auto;height:3px;background:repeating-linear-gradient(90deg,#b9c9df 0 14px,transparent 14px 28px);background-size:28px 3px;animation:roadm 1.2s linear infinite}
  @keyframes roadm{to{background-position:28px 0}}
}
@media (max-width:560px){
  .fleet-row{grid-template-columns:1fr}
  .pin{font-size:.8rem;padding:7px 12px}
  .scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-wipe,.js .rv-left{opacity:1!important;transform:none!important;clip-path:none!important}
  .marquee-track{animation:none}
}
.page-head .wrap>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.page-head .wrap>*:nth-child(2){animation-delay:.12s}
.page-head .wrap>*:nth-child(3){animation-delay:.26s}
/* cars stand on the road, captions above */
.fleet-row{padding-bottom:30px}
.car{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:0;gap:4px}
.car h3{order:-2;margin-top:8px}
.car p{order:-1;margin-bottom:12px}
.fleet-row+.fleet-row{margin-top:26px}
.fleet-note{margin-top:34px}
.trip-car{height:auto}
.trip-scene{margin-top:36px}
.trip-scene{height:calc(clamp(200px,32vw,380px)*.535 + 170px)}
.pin{bottom:calc(clamp(200px,32vw,380px)*.535 + 60px)}
@media (min-width:901px){.cap-group{grid-template-columns:1fr 1.5fr}}

/* ==========================================================
   ICT page: scroll-scrubbed PC teardown as fixed background
   ========================================================== */
.ict-page{background:#050a14 url("assets/pc/f-001.webp") center/cover fixed no-repeat;color:#fff}
.pc-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:0;transition:opacity .8s ease}
.pc-canvas.ready{opacity:1}
.pc-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse at 50% 45%,rgba(3,9,24,.05) 0%,rgba(3,9,24,.55) 100%),
  linear-gradient(180deg,rgba(3,9,24,.55) 0%,rgba(3,9,24,0) 30%,rgba(3,9,24,0) 70%,rgba(3,9,24,.6) 100%)}
.ict-page .page-head{background:transparent;min-height:100svh;display:grid;align-items:end;padding-bottom:clamp(90px,14vh,150px)}
.ict-page .page-head::before{display:none}
.ict-page .page-head::after{display:none}
.ict-page .page-head h1{text-shadow:0 4px 30px rgba(0,0,0,.6)}
.ict-page .page-head .lede{color:#e3edff;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.ict-page .block{background:transparent;padding-block:clamp(24px,4vw,48px)}
.ict-page .block--mist{background:transparent}
.ict-page .cap-group,.ict-page .cap-group:last-of-type{border:1px solid rgba(255,255,255,.16);border-radius:28px;background:rgba(4,12,32,.62);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);padding:clamp(24px,4vw,48px);margin-bottom:0}
.ict-page .cap-group h2,.ict-page .cap-list h3{color:#fff}
.ict-page .muted,.ict-page .cap-list p{color:#c3d3ee}
.ict-page .cap-media img{box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.scene{min-height:80svh;display:grid;align-items:center}
.scene p{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,6.5vw,5.4rem);line-height:1.02;letter-spacing:-.035em;max-width:14ch;text-shadow:0 6px 40px rgba(0,0,0,.75)}
.scene p>span{color:var(--sun)}
.scene--right p{margin-left:auto;text-align:right}
.ict-page .cta-band{background:rgba(4,12,32,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);border-radius:28px;padding:clamp(28px,5vw,56px)}
.ict-page .cta-band h2{color:#fff;max-width:18ch}
.ict-page .cta-band .lede{color:#c3d3ee}
.ict-page .btn-navy{background:var(--sun);color:#1b1200}
.ict-page .btn-navy:hover{background:#ffc873}
.ict-page .btn-line{border-color:#fff;color:#fff}
.ict-page .btn-line:hover{background:#fff;color:var(--navy)}
.ict-page .site-footer{background:rgba(4,18,49,.92)}
.scroll-hint{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font-weight:600;color:#cfe0fb}
.scroll-hint::before{content:"";width:22px;height:34px;border:2px solid rgba(255,255,255,.7);border-radius:12px;background:radial-gradient(circle at 50% 30%,#fff 0 2px,transparent 3px)}
@media (max-width:680px){.ict-page .cap-group{border-radius:22px}.scene{min-height:60svh}}
@media (prefers-reduced-motion:reduce){.pc-canvas{transition:none}}

/* ==========================================================
   WhatsApp, forms, FAQ and final polish
   ========================================================== */
::selection{background:var(--sun);color:#1b1200}
html{scroll-padding-top:calc(var(--header-h) + 12px)}
a,button{-webkit-tap-highlight-color:transparent}
.wa-ico{width:1.25em;height:1.25em;flex:none}
.btn-wa{background:#25d366;color:#052e16;gap:.6em}
.btn-wa:hover{background:#3be47c}
.wa-link{display:inline-flex;align-items:center;gap:.5em;font-weight:700;color:#0f8f47;margin-top:2px}
.quick-card--ict .wa-link{color:#7df0a9}
.wa-link:hover{text-decoration:underline;text-underline-offset:.25em}
.wa-float{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:0;height:58px;min-width:58px;padding:0 17px;border-radius:999px;background:#25d366;color:#fff;box-shadow:0 14px 30px -10px rgba(4,60,30,.7);font-weight:700;font-size:.95rem;overflow:visible;transition:gap .3s ease,padding .3s ease,transform .2s ease}
.wa-float .wa-ico{width:26px;height:26px}
.wa-float span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .4s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.wa-float:hover,.wa-float:focus-visible{gap:10px;padding-right:22px}
.wa-float:hover span,.wa-float:focus-visible span{max-width:200px;opacity:1}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #25d366;animation:wapulse 2.6s ease-out infinite;pointer-events:none}
@keyframes wapulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.45);opacity:0}}
.to-top{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 70px);z-index:44;width:46px;height:46px;border-radius:50%;border:0;background:var(--navy);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 26px -10px rgba(4,18,52,.7);opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .3s ease,transform .3s ease,background-color .2s ease}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--blue)}
.to-top svg{width:20px;height:20px}
.send-row{display:flex;flex-wrap:wrap;gap:12px}
.send-row .btn{flex:1 1 200px}
.form-status.bad{color:#b3261e;font-weight:600}
.field [aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 4px rgba(179,38,30,.14)}
.faq{max-width:52rem}
.faq details{border-top:1px solid var(--line);padding:0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-family:var(--font-display);font-weight:700;font-size:1.2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(45deg);transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 0 24px;color:var(--muted);max-width:60ch;animation:faqin .4s ease both}
@keyframes faqin{from{opacity:0;transform:translateY(-6px)}}
.hero-video,.pc-canvas{backface-visibility:hidden}
@media (max-width:680px){
  .wa-float{height:54px;min-width:54px}
  .ict-page .cap-group,.ict-page .cta-band{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(4,12,32,.72)}
}
@media print{.wa-float,.to-top,.site-header,.progress{display:none!important}}

/* ICT: light, transparent blur (no white veil) */
.ict-page{color:#fff}
.ict-page .pc-canvas{filter:blur(2px);transform:scale(1.02)}
.ict-page .cap-group,.ict-page .cap-group:last-of-type,.ict-page .cta-band{background:rgba(4,12,32,.45);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.ict-page .pc-veil{background:radial-gradient(ellipse at 50% 45%,rgba(3,9,24,0) 0%,rgba(3,9,24,.4) 100%),linear-gradient(180deg,rgba(3,9,24,.45) 0%,rgba(3,9,24,0) 28%,rgba(3,9,24,0) 72%,rgba(3,9,24,.5) 100%)}

/* ==========================================================
   PREMIUM MOTION v2
   ========================================================== */
:root{--ease:cubic-bezier(.22,1,.36,1)}
.js .rv{transition-duration:.9s,1.1s;transition-timing-function:var(--ease)}
.js .rv-wipe{transition-timing-function:cubic-bezier(.77,0,.18,1),var(--ease)}

/* page curtain */
.curtain{visibility:hidden;position:fixed;inset:0;z-index:100;background:linear-gradient(160deg,#041238,var(--navy));display:grid;place-items:center;transform:translateY(100%);pointer-events:none;will-change:transform}
.curtain.enter{transform:none;transition:transform .55s cubic-bezier(.7,0,.2,1);pointer-events:auto}
.curtain.cover{transform:none;transition:none}
.curtain.lift{transform:translateY(-100%);transition:transform .8s cubic-bezier(.7,0,.2,1)}
.curtain .mark{display:grid;justify-items:center;gap:22px;opacity:0;transition:opacity .3s ease .2s}
.curtain.enter .mark,.curtain.cover .mark{opacity:1}
.curtain img{width:92px;height:92px;border-radius:50%;box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.curtain i{display:block;width:120px;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--sun) 0 18px,transparent 18px 32px);background-size:32px 4px;animation:roadx 1s linear infinite}

/* split headlines */
.sx .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.sx .w>span{display:inline-block}
.js .sx.ready .w>span{transform:translateY(112%) rotate(4deg);transform-origin:0 100%}
.js .sx.ready.in .w>span{transform:none;transition:transform 1s var(--ease);transition-delay:calc(var(--wi)*55ms + var(--d,0ms))}

/* pointer glow */
.spot{position:relative;overflow:hidden}
.spot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(27,192,242,.16),transparent 60%)}
.spot:hover::before{opacity:1}
.spot>*{position:relative;z-index:1}

/* home: service tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.tile{display:grid;gap:10px;align-content:start;padding:clamp(22px,2.4vw,30px);border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -30px rgba(5,35,95,.5);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s ease}
.tile:hover{transform:translateY(-8px);border-color:#b8d0f2;box-shadow:0 34px 60px -28px rgba(5,35,95,.55)}
.tile .ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(140deg,var(--navy),var(--blue));color:#fff;transition:transform .5s var(--ease)}
.tile:hover .ico{transform:rotate(-8deg) scale(1.1)}
.tile .ico svg{width:26px;height:26px}
.tile h3{font-size:1.15rem;margin-top:6px}
.tile p{color:var(--muted);font-size:.96rem;line-height:1.5}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,56px);counter-reset:s}
.steps li{position:relative;padding-top:74px}
.steps li::before{content:"";position:absolute;left:52px;right:-28px;top:26px;border-top:3px dashed #b9c9df}
.steps li:last-child::before{display:none}
.steps b{position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;background:var(--sun);color:#1b1200;display:grid;place-items:center;font-family:var(--font-display);font-size:1.4rem}
.steps h3{margin-bottom:6px}
.steps p{color:var(--muted)}

/* services: feature cards */
.features{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px)}
.feature{border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -38px rgba(5,35,95,.55);display:flex;flex-direction:column}
.feature-img{position:relative;height:clamp(200px,24vw,290px);background-size:cover;background-position:center;transition:transform 1.2s var(--ease)}
.feature:hover .feature-img{transform:scale(1.05)}
.feature{overflow:hidden}
.feature-img--car{background-position:center 40%}
.feature-img--car::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,18,56,.15),rgba(4,18,56,.55))}
.feature-img--car img{position:absolute;z-index:2;left:50%;bottom:-6px;width:min(68%,380px);height:auto;transform:translateX(-50%);filter:drop-shadow(0 20px 14px rgba(0,0,0,.5))}
.feature-body{display:grid;gap:14px;justify-items:start;padding:clamp(24px,3vw,38px);position:relative;background:#fff;z-index:2}
.feature-body h3{font-size:clamp(1.4rem,2.4vw,1.8rem)}
.feature-body .btn{margin-top:8px}

/* about collage */
.collage{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(14px,2vw,26px)}
.collage figure{position:relative;margin:0;border-radius:24px;overflow:hidden;min-height:clamp(220px,32vw,420px)}
.collage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.collage figure:hover img{transform:scale(1.06)}
.collage figcaption{position:absolute;left:22px;bottom:18px;color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.6rem;text-shadow:0 2px 20px rgba(0,0,0,.6)}

/* ICT: crisp background, chapter label */
.ict-page .pc-canvas{filter:none;transform:none}
.ict-page .pc-veil{background:radial-gradient(ellipse at 50% 45%,rgba(3,9,24,0) 0%,rgba(3,9,24,.34) 100%),linear-gradient(180deg,rgba(3,9,24,.4) 0%,rgba(3,9,24,0) 24%,rgba(3,9,24,0) 76%,rgba(3,9,24,.45) 100%)}
.pc-chapter{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(4,12,32,.6);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:600;font-size:.88rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.pc-chapter.show{opacity:1;transform:none}
.pc-chapter i{width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 0 rgba(246,179,82,.7);animation:blip 2s infinite}
@keyframes blip{70%{box-shadow:0 0 0 10px rgba(246,179,82,0)}100%{box-shadow:0 0 0 0 rgba(246,179,82,0)}}

@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.features,.collage{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.steps li::before{display:none}.steps li{padding-top:0;padding-left:72px}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}.pc-chapter{display:none}}
@media (prefers-reduced-motion:reduce){.curtain{display:none}.js .sx.ready .w>span{transform:none!important}}

.curtain.enter,.curtain.cover,.curtain.lift{visibility:visible}