/*
  RS BENIPAL LTD
  Production stylesheet
  Version: 4.0
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root{
  --ink:#0b0d10;
  --charcoal:#171b20;
  --charcoal-2:#222831;
  --muted:#5f6670;
  --muted-light:#aeb4bd;
  --line:#e5e7eb;
  --line-dark:rgba(255,255,255,.12);
  --paper:#fff;
  --soft:#f5f6f7;
  --soft-gold:#f6f0e4;
  --gold:#c89439;
  --gold-dark:#94691f;
  --gold2:#e5b759;
  --success:#257a4b;
  --danger:#b33a3a;

  --radius-xs:8px;
  --radius-sm:14px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-xl:30px;
  --radius-2xl:36px;
  --radius-pill:999px;

  --shadow-xs:0 5px 18px rgba(11,13,16,.06);
  --shadow-sm:0 10px 30px rgba(11,13,16,.08);
  --shadow:0 24px 70px rgba(11,13,16,.12);
  --shadow-lg:0 35px 100px rgba(0,0,0,.25);
  --shadow-gold:0 16px 40px rgba(200,148,57,.24);

  --max:1240px;
  --header-height:82px;
  --header-height-mobile:72px;

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --duration-fast:.2s;
  --duration:.32s;
  --duration-slow:.7s;

  --z-header:100;
  --z-progress:110;
  --z-floating:80;
  --z-loader:1000;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-height) + 24px);
}

body{
  margin:0;
  min-width:320px;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body.menu-open{
  overflow:hidden;
}

img,
picture,
svg,
video{
  max-width:100%;
  display:block;
}

img{
  height:auto;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  cursor:pointer;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

::selection{
  background:rgba(229,183,89,.38);
  color:var(--ink);
}

:focus-visible{
  outline:3px solid rgba(229,183,89,.78);
  outline-offset:3px;
}

h1,
h2,
h3,
h4{
  margin:0;
  line-height:1.05;
  text-wrap:balance;
}

p{
  margin-top:0;
}

main{
  display:block;
}

.container{
  width:min(var(--max),calc(100% - 40px));
  margin-inline:auto;
}

.skip{
  position:fixed;
  left:16px;
  top:-100px;
  z-index:calc(var(--z-loader) + 1);
  padding:12px 16px;
  border-radius:var(--radius-xs);
  background:#fff;
  color:#111;
  box-shadow:var(--shadow-sm);
  transition:top var(--duration-fast) ease;
}

.skip:focus{
  top:16px;
}

/* =========================================================
   3. LOADER & SCROLL PROGRESS
   ========================================================= */

.loader{
  position:fixed;
  inset:0;
  z-index:var(--z-loader);
  display:grid;
  place-items:center;
  background:#0b0d10;
  color:#fff;
  opacity:1;
  visibility:visible;
  transition:opacity .55s ease,visibility .55s ease;
}

.loader.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loader-mark{
  width:72px;
  height:72px;
  margin-inline:auto;
  border:2px solid rgba(255,255,255,.2);
  border-top-color:var(--gold2);
  border-radius:50%;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

.progress{
  position:fixed;
  top:0;
  left:0;
  z-index:var(--z-progress);
  width:0;
  height:3px;
  transform-origin:left center;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  box-shadow:0 0 16px rgba(229,183,89,.45);
  will-change:width;
}

/* =========================================================
   4. HEADER & PRIMARY NAVIGATION
   ========================================================= */

.header{
  position:fixed;
  inset:0 0 auto;
  z-index:var(--z-header);
  background:rgba(10,12,15,.78);
  border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:
    background var(--duration) ease,
    box-shadow var(--duration) ease,
    transform var(--duration) var(--ease);
}

.header.scrolled{
  background:rgba(10,12,15,.96);
  box-shadow:0 10px 40px rgba(0,0,0,.18);
}

.header.header-hidden{
  transform:translateY(-100%);
}

.navbar{
  position:relative;
  height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:max-content;
  color:#fff;
}

.brand img{
  width:54px;
  height:54px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}

.brand-name{
  display:block;
  font-family:Georgia,serif;
  font-size:22px;
  font-weight:800;
  line-height:1;
  letter-spacing:.04em;
}

.brand-sub{
  display:block;
  margin-top:6px;
  color:#d9b36a;
  font:700 9px/1.3 Arial,sans-serif;
  letter-spacing:.23em;
}

.nav{
  display:flex;
  align-items:center;
  gap:28px;
  color:#fff;
  font-size:14px;
  font-weight:700;
}

.nav > a,
.nav-item > a,
.nav-trigger{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:var(--header-height);
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  font-weight:700;
}

.nav > a::after,
.nav-item > a::after,
.nav-trigger::after{
  content:"";
  position:absolute;
  right:100%;
  bottom:19px;
  left:0;
  height:2px;
  background:var(--gold2);
  transition:right var(--duration-fast) ease;
}

.nav > a:hover::after,
.nav > a.active::after,
.nav-item > a:hover::after,
.nav-item > a.active::after,
.nav-trigger:hover::after,
.nav-trigger[aria-expanded="true"]::after{
  right:0;
}

.nav-trigger svg,
.nav-trigger .chevron{
  width:14px;
  height:14px;
  transition:transform var(--duration-fast) ease;
}

.nav-trigger[aria-expanded="true"] svg,
.nav-trigger[aria-expanded="true"] .chevron{
  transform:rotate(180deg);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================================================
   5. DESKTOP MEGA MENU
   ========================================================= */

.nav-item{
  position:static;
}

.mega-menu{
  position:absolute;
  top:calc(100% - 1px);
  left:50%;
  width:min(1180px,calc(100vw - 40px));
  padding:12px;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(11,13,16,.08);
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
  box-shadow:0 30px 80px rgba(0,0,0,.2);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-10px);
  transition:
    opacity var(--duration-fast) ease,
    visibility var(--duration-fast) ease,
    transform var(--duration) var(--ease-out);
}

.nav-item:hover > .mega-menu,
.nav-item:focus-within > .mega-menu,
.nav-item.open > .mega-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

.mega-menu-inner{
  display:grid;
  grid-template-columns:1.15fr 1fr .78fr;
  gap:12px;
}

.mega-panel{
  padding:28px;
  border-radius:22px;
  background:#fff;
}

.mega-panel + .mega-panel{
  border-left:1px solid var(--line);
}

.mega-title{
  margin-bottom:16px;
  color:var(--gold-dark);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.mega-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 18px;
}

.mega-links a{
  display:block;
  padding:11px 12px;
  border-radius:12px;
  color:var(--ink);
  font-weight:800;
  transition:
    color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}

.mega-links a span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  font-weight:500;
}

.mega-links a:hover{
  color:var(--gold-dark);
  background:var(--soft-gold);
  transform:translateX(4px);
}

.mega-feature{
  position:relative;
  min-height:260px;
  overflow:hidden;
  padding:28px;
  border-radius:22px;
  background:#111;
  color:#fff;
  isolation:isolate;
}

.mega-feature::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:var(--mega-image,url("../images/night-logistics.webp")) center/cover no-repeat;
  opacity:.48;
  transform:scale(1.04);
  transition:transform .8s var(--ease-out);
}

.mega-feature::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,rgba(8,10,13,.96),rgba(8,10,13,.36));
}

.mega-feature:hover::before{
  transform:scale(1.1);
}

.mega-feature h3{
  max-width:260px;
  font-size:30px;
  letter-spacing:-.035em;
}

.mega-feature p{
  max-width:300px;
  color:#d2d6dc;
}

.mega-feature .btn{
  margin-top:16px;
}

/* =========================================================
   6. BUTTONS
   ========================================================= */

.btn{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 20px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-weight:800;
  line-height:1;
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) ease,
    background var(--duration) ease,
    border-color var(--duration) ease;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.28),transparent 80%);
  transform:translateX(-120%);
  transition:transform .65s var(--ease-out);
}

.btn:hover{
  transform:translateY(-3px);
}

.btn:hover::before{
  transform:translateX(120%);
}

.btn:active{
  transform:translateY(-1px);
}

.btn-gold{
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#111;
  box-shadow:var(--shadow-gold);
}

.btn-gold:hover{
  box-shadow:0 20px 48px rgba(200,148,57,.34);
}

.btn-outline{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);
  color:#fff;
}

.btn-outline:hover{
  border-color:rgba(229,183,89,.68);
  background:rgba(255,255,255,.11);
}

.btn-dark{
  background:var(--ink);
  color:#fff;
  box-shadow:var(--shadow-sm);
}

.btn-light{
  background:#fff;
  color:var(--ink);
  box-shadow:var(--shadow-sm);
}

/* =========================================================
   7. MOBILE MENU
   ========================================================= */

.menu-btn{
  display:none;
  width:46px;
  height:46px;
  padding:0;
  place-items:center;
  border:1px solid rgba(255,255,255,.2);
  border-radius:14px;
  background:transparent;
  color:#fff;
  transition:background var(--duration-fast) ease,border-color var(--duration-fast) ease;
}

.menu-btn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(229,183,89,.55);
}

.menu-btn .menu-icon,
.menu-btn .menu-icon::before,
.menu-btn .menu-icon::after{
  width:21px;
  height:2px;
  display:block;
  background:currentColor;
  border-radius:99px;
  transition:transform var(--duration) ease,opacity var(--duration-fast) ease;
}

.menu-btn .menu-icon{
  position:relative;
}

.menu-btn .menu-icon::before,
.menu-btn .menu-icon::after{
  content:"";
  position:absolute;
  left:0;
}

.menu-btn .menu-icon::before{top:-7px}
.menu-btn .menu-icon::after{top:7px}

.menu-btn[aria-expanded="true"] .menu-icon{
  background:transparent;
}

.menu-btn[aria-expanded="true"] .menu-icon::before{
  top:0;
  transform:rotate(45deg);
}

.menu-btn[aria-expanded="true"] .menu-icon::after{
  top:0;
  transform:rotate(-45deg);
}

.mobile-menu{
  display:block;
  max-height:0;
  overflow:hidden;
  background:#0b0d10;
  border-top:1px solid rgba(255,255,255,.12);
  opacity:0;
  visibility:hidden;
  transition:
    max-height .45s var(--ease),
    opacity var(--duration) ease,
    visibility var(--duration) ease;
}

.mobile-menu.open{
  max-height:calc(100vh - var(--header-height-mobile));
  overflow-y:auto;
  opacity:1;
  visibility:visible;
}

.mobile-menu-inner{
  padding:16px 20px 24px;
}

.mobile-menu > a,
.mobile-menu-inner > a,
.mobile-nav-link,
.mobile-accordion-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 4px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:none;
  color:#fff;
  text-align:left;
  font-weight:800;
}

.mobile-menu > a:hover,
.mobile-menu-inner > a:hover,
.mobile-nav-link:hover{
  color:var(--gold2);
}

.mobile-submenu{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--duration) var(--ease);
}

.mobile-submenu > div{
  overflow:hidden;
}

.mobile-accordion.open .mobile-submenu{
  grid-template-rows:1fr;
}

.mobile-submenu a{
  display:block;
  padding:11px 18px;
  color:#c8cdd4;
  font-size:14px;
  font-weight:700;
}

.mobile-submenu a:hover{
  color:var(--gold2);
}

/* =========================================================
   8. HERO
   ========================================================= */

.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  align-items:center;
  overflow:hidden;
  padding-top:var(--header-height);
  background:#090b0e;
  color:#fff;
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:url("../images/hero-homepage.webp") center/cover no-repeat;
  transform:scale(1.04);
  animation:heroZoom 16s ease-in-out infinite alternate;
  will-change:transform;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(
    90deg,
    rgba(7,9,12,.96) 0%,
    rgba(7,9,12,.78) 44%,
    rgba(7,9,12,.20) 78%,
    rgba(7,9,12,.08) 100%
  );
}

@keyframes heroZoom{
  to{transform:scale(1.1)}
}

.hero-grid{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.15;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(to right,#000,transparent);
  -webkit-mask-image:linear-gradient(to right,#000,transparent);
}

.hero .container{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.18fr .82fr;
  align-items:center;
  gap:70px;
  padding-top:70px;
  padding-bottom:70px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#f3cf88;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.eyebrow::before{
  content:"";
  width:40px;
  height:1px;
  background:currentColor;
}

.hero h1{
  max-width:900px;
  margin:22px 0;
  font-size:clamp(52px,7vw,96px);
  letter-spacing:-.055em;
}

.hero h1 span{
  color:var(--gold2);
}

.hero-copy{
  max-width:720px;
  color:#d5d9df;
  font-size:19px;
}

.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}

.hero-points{
  max-width:700px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:45px;
}

.hero-point{
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.22);
}

.hero-point strong{
  display:block;
  font-size:17px;
}

.hero-point small{
  color:#aeb4bd;
  text-transform:uppercase;
  letter-spacing:.11em;
}

/* =========================================================
   9. FORMS & GLASS CARDS
   ========================================================= */

.glass-card{
  padding:30px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.92);
  color:#111;
  box-shadow:0 35px 100px rgba(0,0,0,.42);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.glass-card h2{
  font-size:34px;
  letter-spacing:-.04em;
}

.glass-card p{
  color:#666;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.field.full{
  grid-column:1/-1;
}

.field label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.field input,
.field select,
.field textarea{
  width:100%;
  min-height:50px;
  padding:14px 15px;
  border:1px solid #d9dce1;
  border-radius:14px;
  outline:none;
  background:#fff;
  color:var(--ink);
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    background var(--duration-fast) ease;
}

.field textarea{
  min-height:130px;
  resize:vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover{
  border-color:#c5c9cf;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(200,148,57,.13);
}

.field input::placeholder,
.field textarea::placeholder{
  color:#8d939b;
}

.field-error{
  color:var(--danger);
  font-size:13px;
  font-weight:700;
}

.form-status{
  margin-top:16px;
  padding:14px 16px;
  border-radius:14px;
  font-weight:700;
}

.form-status.success{
  background:rgba(37,122,75,.1);
  color:var(--success);
}

.form-status.error{
  background:rgba(179,58,58,.1);
  color:var(--danger);
}

/* =========================================================
   10. SECTIONS & TYPOGRAPHY
   ========================================================= */

.section{
  padding:110px 0;
}

.section-soft{
  background:var(--soft);
}

.section-dark{
  background:#0b0d10;
  color:#fff;
}

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:48px;
}

.section-head h2{
  max-width:760px;
  font-size:clamp(38px,5vw,64px);
  letter-spacing:-.045em;
}

.section-head p{
  max-width:520px;
  color:var(--muted);
}

.section-dark .section-head p{
  color:#adb3bc;
}

/* =========================================================
   11. CARDS
   ========================================================= */

.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.card{
  position:relative;
  overflow:hidden;
  padding:30px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:0 8px 25px rgba(0,0,0,.04);
  isolation:isolate;
  transition:
    transform .35s var(--ease),
    box-shadow .35s ease,
    border-color .35s ease;
}

.card::before{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-80px;
  z-index:-1;
  width:170px;
  height:170px;
  border-radius:50%;
  background:rgba(200,148,57,.09);
  transition:transform .45s var(--ease-out);
}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(145deg,rgba(229,183,89,.07),transparent 45%);
  opacity:0;
  transition:opacity .35s ease;
}

.card:hover{
  transform:translateY(-9px);
  border-color:#d7b46c;
  box-shadow:var(--shadow);
}

.card:hover::before{
  transform:scale(1.45);
}

.card:hover::after{
  opacity:1;
}

.icon-box{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin-bottom:24px;
  border-radius:18px;
  background:#111;
  color:var(--gold2);
  box-shadow:0 12px 26px rgba(0,0,0,.14);
  transition:transform .35s var(--ease);
}

.card:hover .icon-box{
  transform:translateY(-4px) rotate(-2deg);
}

.icon{
  width:29px;
  height:29px;
}

.card h3{
  margin-bottom:13px;
  font-size:25px;
}

.card p{
  color:var(--muted);
}

.card a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  font-weight:900;
}

.card a::after{
  content:"→";
  transition:transform var(--duration-fast) ease;
}

.card a:hover::after{
  transform:translateX(5px);
}

/* =========================================================
   12. MEDIA, SPLIT SECTIONS & STATS
   ========================================================= */

.image-panel{
  position:relative;
  min-height:560px;
  overflow:hidden;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}

.image-panel img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease-out);
}

.image-panel:hover img{
  transform:scale(1.04);
}

.image-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.52),transparent 55%);
  pointer-events:none;
}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:70px;
}

.stat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:32px;
}

.stat{
  padding:23px;
  border-left:3px solid var(--gold);
  border-radius:0 18px 18px 0;
  background:#f5f6f7;
  transition:transform var(--duration) var(--ease),box-shadow var(--duration) ease;
}

.stat:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-xs);
}

.stat strong{
  display:block;
  font-size:28px;
}

.timeline{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.step{
  position:relative;
  overflow:hidden;
  padding:28px 24px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  background:#161a20;
  transition:transform .35s var(--ease),border-color .35s ease,background .35s ease;
}

.step:hover{
  transform:translateY(-7px);
  border-color:rgba(229,183,89,.45);
  background:#1b2027;
}

.step-num{
  color:rgba(229,183,89,.28);
  font-size:50px;
  font-weight:900;
}

.step h3{
  margin:8px 0;
  font-size:22px;
}

.step p{
  color:#aeb4bd;
}

.feature-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
}

.feature{
  padding:28px;
  border-right:1px solid var(--line);
  transition:background var(--duration-fast) ease;
}

.feature:hover{
  background:var(--soft-gold);
}

.feature:last-child{
  border-right:0;
}

.feature strong{
  display:block;
  font-size:18px;
}

.feature span{
  color:var(--muted);
  font-size:14px;
}

.media-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  grid-template-rows:280px 280px;
  gap:16px;
}

.media-item{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:#ddd;
}

.media-item:first-child{
  grid-row:1/3;
}

.media-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease-out),filter .45s ease;
}

.media-item:hover img{
  transform:scale(1.07);
  filter:brightness(.92);
}

.media-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.58),transparent 62%);
}

.media-label{
  position:absolute;
  left:20px;
  bottom:18px;
  z-index:2;
  color:#fff;
  font-weight:900;
  transition:transform var(--duration) var(--ease);
}

.media-item:hover .media-label{
  transform:translateY(-4px);
}

/* =========================================================
   13. TRACKING CTA & CONTACT BANNER
   ========================================================= */

.track-cta{
  position:relative;
  overflow:hidden;
  padding:54px;
  border-radius:34px;
  background:#111;
  color:#fff;
  isolation:isolate;
  box-shadow:var(--shadow);
}

.track-cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:url("../images/night-logistics.webp") center/cover no-repeat;
  opacity:.34;
  transform:scale(1.03);
  transition:transform 1s var(--ease-out);
}

.track-cta:hover::before{
  transform:scale(1.08);
}

.track-cta::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(
    90deg,
    #0b0d10 0%,
    rgba(11,13,16,.84) 55%,
    rgba(11,13,16,.25)
  );
}

.track-cta h2{
  max-width:760px;
  font-size:clamp(38px,5vw,62px);
}

.contact-banner{
  position:relative;
  min-height:520px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(11,13,16,.08);
  border-radius:var(--radius-xl);
  background:#fff;
  box-shadow:var(--shadow);
  isolation:isolate;
}

.contact-banner::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.99) 26%,
      rgba(255,255,255,.92) 38%,
      rgba(255,255,255,.58) 49%,
      rgba(255,255,255,.15) 62%,
      rgba(255,255,255,0) 76%
    ),
    url("../images/contact-banner-clean.webp") right center/cover no-repeat;
}

.contact-banner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 18% 50%,rgba(229,183,89,.08),transparent 38%);
  pointer-events:none;
}

.contact-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:650px;
  padding:55px;
}

.contact-content h2{
  max-width:570px;
  color:var(--ink);
  font-size:clamp(38px,5vw,62px);
  letter-spacing:-.045em;
}

.contact-content .eyebrow{
  color:#8e681f;
}

.contact-list{
  max-width:570px;
  display:grid;
  gap:13px;
  margin:28px 0;
}

.contact-list a,
.contact-list div{
  position:relative;
  width:fit-content;
  max-width:100%;
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:#111;
  font-weight:800;
  transition:color var(--duration-fast) ease,transform var(--duration-fast) ease;
}

.contact-list a:hover{
  color:#9a6b1f;
  transform:translateX(4px);
}

/* =========================================================
   14. PAGE HERO
   ========================================================= */

.page-hero{
  position:relative;
  overflow:hidden;
  padding:180px 0 95px;
  background:#0b0d10;
  color:#fff;
  isolation:isolate;
}

.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(
      90deg,
      #0b0d10 0%,
      rgba(11,13,16,.77) 62%,
      rgba(11,13,16,.18)
    ),
    var(--page-image) center/cover no-repeat;
}

.page-hero .container{
  position:relative;
  z-index:1;
}

.page-hero h1{
  max-width:900px;
  font-size:clamp(50px,7vw,88px);
  letter-spacing:-.05em;
}

.page-hero p{
  max-width:720px;
  margin-top:20px;
  color:#d2d6dc;
  font-size:18px;
}

.breadcrumb{
  margin-bottom:20px;
  color:#e4c47f;
  font-size:13px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* =========================================================
   15. TRACKING, NOTICES & FAQ
   ========================================================= */

.tracking-wrap{
  display:grid;
  grid-template-columns:1fr .8fr;
  align-items:start;
  gap:38px;
}

.tracking-card{
  padding:40px;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:#fff;
  box-shadow:var(--shadow);
}

.track-result{
  display:none;
  margin-top:24px;
  padding:24px;
  border:1px solid #ead5ac;
  border-radius:18px;
  background:#f6f1e7;
}

.track-result.show{
  display:block;
  animation:rise .45s ease;
}

.notice{
  padding:18px 20px;
  border-left:4px solid var(--gold);
  border-radius:0 14px 14px 0;
  background:#f7f7f7;
  color:#555;
}

.faq{
  border-top:1px solid var(--line);
}

.faq-item{
  border-bottom:1px solid var(--line);
}

.faq-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 0;
  border:0;
  background:none;
  color:var(--ink);
  text-align:left;
  font-size:18px;
  font-weight:900;
}

.faq-btn::after{
  content:"+";
  flex:0 0 auto;
  font-size:27px;
  font-weight:400;
  transition:transform var(--duration) ease;
}

.faq-item.open .faq-btn::after{
  transform:rotate(45deg);
}

.faq-panel{
  display:grid;
  grid-template-rows:0fr;
  color:var(--muted);
  transition:grid-template-rows .35s var(--ease);
}

.faq-panel > div,
.faq-panel > p{
  overflow:hidden;
}

.faq-item.open .faq-panel{
  grid-template-rows:1fr;
  padding-bottom:22px;
}

/* Support legacy FAQ markup */
.faq-item.open > .faq-panel:not(:has(> div)):not(:has(> p)){
  display:block;
}

/* =========================================================
   16. FOOTER
   ========================================================= */

.footer{
  padding:75px 0 25px;
  background:#080a0d;
  color:#fff;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr .7fr .9fr;
  gap:42px;
}

.footer h3{
  margin-bottom:17px;
  color:#e7c57d;
  font-size:15px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.footer a{
  width:fit-content;
  display:block;
  margin:9px 0;
  color:#b6bbc2;
  transition:color var(--duration-fast) ease,transform var(--duration-fast) ease;
}

.footer a:hover{
  color:#fff;
  transform:translateX(3px);
}

.footer .brand:hover{
  transform:none;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:50px;
  padding-top:23px;
  border-top:1px solid rgba(255,255,255,.1);
  color:#8f969f;
  font-size:13px;
}

/* =========================================================
   17. REVEAL & MOTION SYSTEM
   ========================================================= */

.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale{
  opacity:0;
  transition:
    opacity var(--duration-slow) ease,
    transform var(--duration-slow) var(--ease-out);
  will-change:opacity,transform;
}

.reveal,
.reveal-up{
  transform:translateY(28px);
}

.reveal-left{
  transform:translateX(-34px);
}

.reveal-right{
  transform:translateX(34px);
}

.reveal-scale{
  transform:scale(.95);
}

.reveal.visible,
.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible{
  opacity:1;
  transform:none;
}

[data-delay="1"]{transition-delay:.08s}
[data-delay="2"]{transition-delay:.16s}
[data-delay="3"]{transition-delay:.24s}
[data-delay="4"]{transition-delay:.32s}
[data-delay="5"]{transition-delay:.4s}
[data-delay="6"]{transition-delay:.48s}

@keyframes rise{
  from{
    opacity:0;
    transform:translateY(12px);
  }
}

@keyframes fadeIn{
  from{opacity:0}
}

@keyframes pulseGold{
  0%,100%{box-shadow:0 0 0 0 rgba(229,183,89,.28)}
  50%{box-shadow:0 0 0 12px rgba(229,183,89,0)}
}

/* =========================================================
   18. FLOATING ACTION
   ========================================================= */

.floating-call{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:var(--z-floating);
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--gold2);
  color:#111;
  box-shadow:0 15px 35px rgba(0,0,0,.22);
  animation:pulseGold 3s ease-in-out infinite;
  transition:transform var(--duration-fast) ease,box-shadow var(--duration-fast) ease;
}

.floating-call:hover{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}

/* =========================================================
   19. PERFORMANCE HELPERS
   ========================================================= */

.lazy-media{
  background:#eceef0;
}

img[loading="lazy"]{
  content-visibility:auto;
}

.content-auto{
  content-visibility:auto;
  contain-intrinsic-size:1px 800px;
}

.offscreen-section{
  content-visibility:auto;
  contain-intrinsic-size:1px 900px;
}

/* =========================================================
   20. UTILITY CLASSES
   ========================================================= */

.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.text-muted{color:var(--muted)}
.text-white{color:#fff}
.text-gold{color:var(--gold-dark)}

.max-520{max-width:520px}
.max-600{max-width:600px}
.max-700{max-width:700px}
.max-760{max-width:760px}
.max-800{max-width:800px}
.mx-auto{margin-inline:auto}

.mt-0{margin-top:0}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.mt-40{margin-top:40px}
.mt-48{margin-top:48px}
.mb-0{margin-bottom:0}
.mb-16{margin-bottom:16px}
.mb-24{margin-bottom:24px}
.mb-32{margin-bottom:32px}
.mb-40{margin-bottom:40px}
.mb-48{margin-bottom:48px}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.round-sm{border-radius:var(--radius-sm)}
.round-md{border-radius:var(--radius-md)}
.round-lg{border-radius:var(--radius-lg)}
.round-xl{border-radius:var(--radius-xl)}
.shadow-sm{box-shadow:var(--shadow-sm)}
.shadow{box-shadow:var(--shadow)}
.overflow-hidden{overflow:hidden}

/* =========================================================
   21. RESPONSIVE — TABLET
   ========================================================= */

@media(max-width:1050px){

  :root{
    --header-height:72px;
  }

  .nav,
  .nav-actions{
    display:none;
  }

  .menu-btn{
    display:grid;
  }

  .hero .container,
  .split,
  .tracking-wrap{
    grid-template-columns:1fr;
  }

  .hero{
    min-height:auto;
  }

  .hero .container{
    padding-top:100px;
  }

  .glass-card{
    max-width:700px;
  }

  .cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .timeline{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .contact-banner{
    min-height:600px;
    grid-template-columns:1fr;
  }

  .contact-banner::after{
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.98) 35%,
        rgba(255,255,255,.72) 56%,
        rgba(255,255,255,.15) 76%,
        rgba(255,255,255,0) 100%
      ),
      url("../images/contact-banner-clean.webp") 70% center/cover no-repeat;
  }

  .contact-content{
    align-self:start;
  }

  .grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* =========================================================
   22. RESPONSIVE — MOBILE
   ========================================================= */

@media(max-width:720px){

  html{
    scroll-padding-top:calc(var(--header-height-mobile) + 18px);
  }

  .container{
    width:min(100% - 28px,var(--max));
  }

  .navbar{
    height:var(--header-height-mobile);
  }

  .brand-name{
    font-size:18px;
  }

  .brand img{
    width:44px;
    height:44px;
  }

  .brand-sub{
    font-size:8px;
    letter-spacing:.18em;
  }

  .hero{
    padding-top:var(--header-height-mobile);
  }

  .hero .container{
    gap:35px;
    padding-top:75px;
    padding-bottom:65px;
  }

  .hero::after{
    background:linear-gradient(90deg,rgba(7,9,12,.96),rgba(7,9,12,.77));
  }

  .hero h1{
    font-size:clamp(46px,14vw,70px);
  }

  .hero-copy{
    font-size:17px;
  }

  .hero-points{
    grid-template-columns:1fr;
  }

  .form-grid,
  .cards,
  .timeline,
  .stat-grid,
  .feature-strip,
  .footer-grid,
  .grid-2,
  .grid-3{
    grid-template-columns:1fr;
  }

  .section{
    padding:78px 0;
  }

  .section-head{
    display:block;
    margin-bottom:36px;
  }

  .section-head p{
    margin-top:18px;
  }

  .card{
    padding:25px;
  }

  .feature{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .feature:last-child{
    border-bottom:0;
  }

  .media-grid{
    grid-template-columns:1fr;
    grid-template-rows:300px 220px 220px;
  }

  .media-item:first-child{
    grid-row:auto;
  }

  .track-cta{
    padding:34px 24px;
    border-radius:26px;
  }

  .contact-banner{
    min-height:700px;
    align-items:start;
  }

  .contact-banner::after{
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,1) 44%,
        rgba(255,255,255,.78) 58%,
        rgba(255,255,255,.16) 78%,
        rgba(255,255,255,0) 100%
      ),
      url("../images/contact-banner-clean.webp") 68% bottom/auto 60% no-repeat;
  }

  .contact-content{
    max-width:100%;
    padding:38px 24px;
  }

  .contact-content h2{
    font-size:clamp(38px,12vw,54px);
  }

  .page-hero{
    padding:145px 0 70px;
  }

  .page-hero h1{
    font-size:clamp(44px,13vw,66px);
  }

  .tracking-card{
    padding:28px 22px;
  }

  .footer-bottom{
    display:block;
  }

  .floating-call{
    right:14px;
    bottom:14px;
    width:54px;
    height:54px;
  }
}

/* =========================================================
   23. RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

  .container{
    width:min(100% - 22px,var(--max));
  }

  .brand{
    gap:9px;
  }

  .brand img{
    width:40px;
    height:40px;
  }

  .brand-name{
    font-size:16px;
  }

  .brand-sub{
    letter-spacing:.13em;
  }

  .menu-btn{
    width:42px;
    height:42px;
  }

  .hero-buttons,
  .error-actions{
    display:grid;
  }

  .hero-buttons .btn,
  .error-actions .btn{
    width:100%;
  }

  .glass-card{
    padding:24px 20px;
  }

  .contact-content{
    padding:34px 20px;
  }
}

/* =========================================================
   24. ACCESSIBILITY & USER PREFERENCES
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto!important;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }

  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale{
    opacity:1!important;
    transform:none!important;
  }
}

@media(prefers-contrast:more){

  :root{
    --muted:#42474e;
    --line:#c8cbd0;
  }

  .btn-outline{
    border-color:#fff;
  }

  .card,
  .tracking-card,
  .contact-banner{
    border-width:2px;
  }
}

@media print{

  .header,
  .loader,
  .progress,
  .floating-call,
  .mobile-menu,
  .hero-grid{
    display:none!important;
  }

  body{
    color:#000;
    background:#fff;
  }

  main{
    padding-top:0;
  }

  .section,
  .page-hero{
    padding:30px 0;
  }

  .page-hero{
    color:#000;
    background:#fff;
  }

  a{
    color:#000;
  }
}

/* =========================================================
   25. V3 PREMIUM EXPERIENCE UPGRADE
   ========================================================= */

:root{
  --surface-raised:rgba(255,255,255,.92);
  --surface-dark:#101318;
  --gold-glow:rgba(229,183,89,.32);
  --border-premium:rgba(200,148,57,.22);
  --shadow-premium:0 30px 90px rgba(9,12,16,.14);
}

body{
  background:
    radial-gradient(circle at 8% 12%,rgba(229,183,89,.035),transparent 24rem),
    var(--paper);
}

.header::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(229,183,89,.42),transparent);
  opacity:.42;
  pointer-events:none;
}

.nav > a{
  letter-spacing:.01em;
}

.nav > a.active{
  color:#f5d590;
}

.page-hero{
  min-height:560px;
  display:flex;
  align-items:flex-end;
  padding-bottom:105px;
}

.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 78% 34%,rgba(229,183,89,.16),transparent 28%),
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:auto,72px 72px,72px 72px;
  mask-image:linear-gradient(90deg,#000,transparent 82%);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 82%);
  pointer-events:none;
}

.page-hero .breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.page-hero .breadcrumb::before{
  content:"";
  width:34px;
  height:1px;
  background:currentColor;
}

.page-hero h1{
  text-shadow:0 16px 50px rgba(0,0,0,.34);
}

.section-anchor-nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.section-anchor-nav a{
  min-height:47px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 19px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(255,255,255,.075);
  color:#fff;
  font-size:14px;
  font-weight:850;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:.28s var(--ease);
}

.section-anchor-nav a:hover,
.section-anchor-nav a.is-current{
  transform:translateY(-3px);
  border-color:var(--gold2);
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#111;
  box-shadow:0 14px 34px rgba(200,148,57,.24);
}

.section-head{
  position:relative;
}

.section-head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-22px;
  width:86px;
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--gold),transparent);
}

.eyebrow{
  text-shadow:0 0 22px rgba(229,183,89,.16);
}

.card,
.tracking-card,
.glass-card{
  backdrop-filter:saturate(115%);
  -webkit-backdrop-filter:saturate(115%);
}

.card:hover,
.industry-card:hover,
.service-card-pro:hover{
  box-shadow:var(--shadow-premium);
}

/* Service page */

.services-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px 26px;
  margin-top:30px;
  color:#d2d7de;
  font-size:14px;
  font-weight:750;
}

.services-hero-meta span{
  display:inline-flex;
  align-items:center;
  gap:9px;
}

.services-hero-meta span::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold2);
  box-shadow:0 0 0 5px rgba(229,183,89,.11);
}

.service-intro{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:center;
}

.service-intro-copy h2{
  margin:18px 0 22px;
  font-size:clamp(42px,5vw,68px);
  letter-spacing:-.052em;
}

.service-intro-copy p{
  color:var(--muted);
  font-size:18px;
}

.service-intro-visual{
  position:relative;
  min-height:560px;
  overflow:hidden;
  border-radius:32px;
  box-shadow:var(--shadow-premium);
}

.service-intro-visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease-out);
}

.service-intro-visual:hover img{
  transform:scale(1.045);
}

.service-intro-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(7,9,12,.72),transparent 62%);
}

.service-intro-panel{
  position:absolute;
  right:24px;
  bottom:24px;
  left:24px;
  z-index:2;
  padding:23px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  background:rgba(9,12,16,.68);
  color:#fff;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.service-intro-panel strong{
  display:block;
  font-size:23px;
}

.service-intro-panel span{
  color:#d3d8df;
}

.service-cards-six{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.service-card-pro{
  position:relative;
  min-height:430px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  background:#111;
  color:#fff;
  box-shadow:var(--shadow);
  isolation:isolate;
  transition:transform .38s var(--ease),box-shadow .38s ease,border-color .38s ease;
}

.service-card-pro:hover{
  transform:translateY(-10px);
  border-color:rgba(229,183,89,.5);
}

.service-card-pro img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .75s var(--ease-out),filter .5s ease;
}

.service-card-pro::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(to top,rgba(5,7,10,.98),rgba(5,7,10,.62) 50%,rgba(5,7,10,.05)),
    linear-gradient(135deg,rgba(229,183,89,.1),transparent 42%);
}

.service-card-pro:hover img{
  transform:scale(1.075);
  filter:saturate(1.05) contrast(1.02);
}

.service-card-index{
  position:absolute;
  top:22px;
  left:22px;
  z-index:2;
  min-width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(9,12,16,.58);
  color:#f0ca79;
  font-size:12px;
  font-weight:900;
  backdrop-filter:blur(10px);
}

.service-card-content{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  padding:30px;
}

.service-card-content h3{
  margin-bottom:12px;
  font-size:28px;
}

.service-card-content p{
  margin:0 0 18px;
  color:#d4d9df;
}

.service-card-content a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#f1cd80;
  font-weight:900;
}

.service-card-content a::after{
  content:"→";
  transition:transform .22s ease;
}

.service-card-content a:hover::after{
  transform:translateX(5px);
}

.service-capability-bar{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:26px;
  background:#fff;
  box-shadow:var(--shadow-xs);
}

.service-capability{
  padding:28px;
  border-right:1px solid var(--line);
}

.service-capability:last-child{
  border-right:0;
}

.service-capability strong{
  display:block;
  margin-bottom:5px;
  font-size:19px;
}

.service-capability span{
  color:var(--muted);
  font-size:14px;
}

.industry-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.industry-card{
  position:relative;
  min-height:285px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:28px;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(circle at 92% 100%,rgba(229,183,89,.13),transparent 38%),
    #fff;
  box-shadow:0 10px 28px rgba(0,0,0,.04);
  transition:.34s var(--ease);
}

.industry-card:hover{
  transform:translateY(-8px);
  border-color:#d7b46c;
}

.industry-card h3{
  margin-bottom:10px;
  font-size:23px;
}

.industry-card p{
  margin:0 0 20px;
  color:var(--muted);
}

.industry-card > a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  color:var(--gold-dark);
  font-weight:900;
}

.services-proof{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:26px;
  background:linear-gradient(135deg,#15191f,#0b0d10);
}

.services-proof div{
  padding:30px;
  border-right:1px solid rgba(255,255,255,.12);
}

.services-proof div:last-child{
  border-right:0;
}

.services-proof strong{
  display:block;
  color:#f2cd7e;
  font-size:21px;
}

.services-proof span{
  color:#b8bec7;
  font-size:14px;
}

.service-quote-panel{
  position:relative;
  overflow:hidden;
  padding:52px;
  border-radius:32px;
  background:
    radial-gradient(circle at 88% 16%,rgba(229,183,89,.2),transparent 25rem),
    linear-gradient(135deg,#14181e,#080a0d);
  color:#fff;
  box-shadow:var(--shadow-premium);
}

.service-quote-panel h2{
  max-width:760px;
  font-size:clamp(40px,5vw,64px);
  letter-spacing:-.05em;
}

.service-quote-panel p{
  max-width:720px;
  color:#c6cbd2;
  font-size:17px;
}

@media(max-width:1050px){
  .service-intro{
    grid-template-columns:1fr;
  }

  .service-cards-six,
  .industry-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .service-capability-bar,
  .services-proof{
    grid-template-columns:1fr 1fr;
  }

  .service-capability:nth-child(2),
  .services-proof div:nth-child(2){
    border-right:0;
  }

  .service-capability:nth-child(-n+2),
  .services-proof div:nth-child(-n+2){
    border-bottom:1px solid var(--line);
  }

  .services-proof div:nth-child(-n+2){
    border-bottom-color:rgba(255,255,255,.12);
  }
}

@media(max-width:720px){
  .page-hero{
    min-height:500px;
    padding-bottom:72px;
  }

  .service-cards-six,
  .industry-grid,
  .service-capability-bar,
  .services-proof{
    grid-template-columns:1fr;
  }

  .service-card-pro{
    min-height:410px;
  }

  .service-intro-visual{
    min-height:430px;
  }

  .service-capability,
  .services-proof div{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .services-proof div{
    border-bottom-color:rgba(255,255,255,.12);
  }

  .service-capability:last-child,
  .services-proof div:last-child{
    border-bottom:0;
  }

  .service-quote-panel{
    padding:36px 24px;
  }
}


/* =========================================================
   30. FINAL PRODUCTION POLISH — VERSION 4.0
   ========================================================= */

:root{
  --polish-shadow:0 28px 80px rgba(11,13,16,.14);
  --polish-shadow-hover:0 34px 90px rgba(11,13,16,.2);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 12%,rgba(229,183,89,.08),transparent 28%),
    radial-gradient(circle at 92% 74%,rgba(200,148,57,.06),transparent 25%);
}

.section{
  position:relative;
}

.section > .container{
  position:relative;
  z-index:1;
}

.section-soft{
  background:
    linear-gradient(180deg,rgba(255,255,255,.7),rgba(245,246,247,.98)),
    radial-gradient(circle at 20% 10%,rgba(229,183,89,.08),transparent 32%);
}

.eyebrow::before{
  transform-origin:left center;
  animation:eyebrowLine 2.4s var(--ease-out) infinite alternate;
}

@keyframes eyebrowLine{
  from{transform:scaleX(.62);opacity:.65}
  to{transform:scaleX(1);opacity:1}
}

.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    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;
  opacity:.14;
  mask-image:linear-gradient(to right,#000,transparent 76%);
  -webkit-mask-image:linear-gradient(to right,#000,transparent 76%);
  animation:gridDrift 18s linear infinite;
}

@keyframes gridDrift{
  to{background-position:72px 72px}
}

.page-hero .container{
  animation:pageHeroEnter .9s var(--ease-out) both;
}

@keyframes pageHeroEnter{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}

.btn{
  transform:translateZ(0);
}

.btn::after{
  content:"";
  position:absolute;
  inset:auto;
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  opacity:0;
  transform:scale(0);
  pointer-events:none;
}

.btn.is-rippling::after{
  animation:buttonRipple .6s ease-out;
}

@keyframes buttonRipple{
  0%{opacity:.75;transform:scale(0)}
  100%{opacity:0;transform:scale(18)}
}

.card,
.home-industry-card,
.home-service-card,
.contact-method,
.contact-support-card,
.tracking-note,
.home-process-card,
.home-stat{
  will-change:transform;
}

.card:hover,
.home-industry-card:hover,
.contact-method:hover{
  box-shadow:var(--polish-shadow-hover);
}

.icon-box{
  position:relative;
  overflow:hidden;
}

.icon-box::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-140%) rotate(18deg);
  transition:transform .7s var(--ease-out);
}

.card:hover .icon-box::after,
.home-industry-card:hover .icon-box::after,
.contact-method:hover .icon-box::after{
  transform:translateX(140%) rotate(18deg);
}

.field{
  position:relative;
}

.field input,
.field select,
.field textarea{
  transition:
    transform var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    background var(--duration-fast) ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  transform:translateY(-1px);
  background:#fffefb;
  box-shadow:
    0 0 0 4px rgba(200,148,57,.13),
    0 12px 28px rgba(11,13,16,.08);
}

.field.is-valid input,
.field.is-valid select,
.field.is-valid textarea{
  border-color:rgba(37,122,75,.55);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{
  border-color:rgba(179,58,58,.7);
  box-shadow:0 0 0 4px rgba(179,58,58,.09);
}

.contact-form-card,
.tracking-panel{
  isolation:isolate;
}

.contact-form-card::after,
.tracking-panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at 92% 10%,rgba(229,183,89,.12),transparent 27%),
    linear-gradient(145deg,rgba(255,255,255,.78),transparent 42%);
}

.contact-form-card{
  overflow:hidden;
  box-shadow:var(--polish-shadow);
  transition:transform .45s var(--ease-out),box-shadow .45s ease;
}

.contact-form-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--polish-shadow-hover);
}

.quote-help div{
  position:relative;
  overflow:hidden;
  transition:transform .32s var(--ease),border-color .32s ease,background .32s ease;
}

.quote-help div::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(var(--gold2),var(--gold));
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .32s var(--ease-out);
}

.quote-help div:hover{
  transform:translateY(-4px);
  border-color:#dfbd76;
  background:#fffaf0;
}

.quote-help div:hover::before{
  transform:scaleY(1);
}

.tracking-panel{
  border-radius:28px!important;
  box-shadow:var(--polish-shadow)!important;
  transition:transform .45s var(--ease-out),box-shadow .45s ease;
}

.tracking-panel:hover{
  transform:translateY(-5px);
  box-shadow:var(--polish-shadow-hover)!important;
}

.tracking-panel-intro{
  position:relative;
  min-width:0;
}

.tracking-help-link{
  max-width:100%;
  white-space:normal;
  text-align:left;
  line-height:1.35;
}

.tracking-help-icon{
  flex:0 0 auto;
  transition:transform .35s var(--ease),background .35s ease;
}

.tracking-help-link:hover .tracking-help-icon{
  transform:rotate(12deg) scale(1.1);
  background:var(--gold-dark);
}

.tracking-panel-form{
  position:relative;
  overflow:hidden;
}

.tracking-panel-form::before{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  right:-100px;
  top:-120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(229,183,89,.18),transparent 68%);
  animation:trackingGlow 5s ease-in-out infinite alternate;
}

@keyframes trackingGlow{
  to{transform:translate(-35px,35px) scale(1.18)}
}

.tracking-bar{
  position:relative;
  z-index:1;
}

.tracking-bar input{
  min-width:0;
  transition:box-shadow .25s ease,transform .25s ease;
}

.tracking-bar input:focus{
  transform:translateY(-1px);
  box-shadow:
    inset 0 0 0 2px #c89439,
    0 10px 28px rgba(0,0,0,.18)!important;
}

.tracking-bar button{
  position:relative;
  overflow:hidden;
  transition:transform .28s var(--ease),background .28s ease,box-shadow .28s ease!important;
}

.tracking-bar button::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.32),transparent 80%);
  transform:translateX(-130%);
  transition:transform .65s var(--ease-out);
}

.tracking-bar button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(200,148,57,.32);
}

.tracking-bar button:hover::before{
  transform:translateX(130%);
}

.track-result.show,
.track-result.is-visible{
  display:block!important;
  animation:resultReveal .55s var(--ease-out);
}

@keyframes resultReveal{
  from{opacity:0;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:none}
}

.support-topic button{
  transition:color .25s ease,transform .25s ease;
}

.support-topic button:hover{
  color:var(--gold-dark);
  transform:translateX(4px);
}

.support-answer{
  animation:fadeIn .3s ease;
}

.media-item::before,
.home-gallery-item::before,
.home-service-card::before{
  content:"";
  position:absolute;
  inset:-30%;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16),transparent 65%);
  transform:translateX(-120%) rotate(8deg);
  transition:transform .9s var(--ease-out);
}

.media-item:hover::before,
.home-gallery-item:hover::before,
.home-service-card:hover::before{
  transform:translateX(120%) rotate(8deg);
}

.footer{
  position:relative;
  overflow:hidden;
}

.footer::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-220px;
  top:-260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(229,183,89,.1),transparent 68%);
  pointer-events:none;
}

.floating-call::before{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(229,183,89,.5);
  border-radius:50%;
  animation:floatingRing 2.8s ease-out infinite;
}

@keyframes floatingRing{
  0%{opacity:.8;transform:scale(.8)}
  70%,100%{opacity:0;transform:scale(1.45)}
}

@media(max-width:1050px){
  .tracking-panel{
    grid-template-columns:minmax(250px,34%) minmax(0,1fr)!important;
  }
}

@media(max-width:820px){
  .tracking-panel{
    grid-template-columns:1fr!important;
  }

  .tracking-panel-intro{
    padding:30px 28px!important;
  }

  .tracking-panel-form{
    min-height:130px;
  }
}

@media(max-width:640px){
  .tracking-panel{
    border-radius:22px!important;
  }

  .tracking-panel-intro{
    padding:28px 20px 22px!important;
  }

  .tracking-panel-form{
    padding:20px!important;
  }

  .tracking-bar{
    gap:10px;
  }

  .tracking-bar input,
  .tracking-bar button{
    height:56px!important;
    border-radius:14px!important;
  }

  .contact-form-card{
    border-radius:22px!important;
  }

  .contact-form-card h2{
    font-size:clamp(32px,10vw,42px)!important;
  }

  .quote-help div{
    padding:18px!important;
  }
}

@media(hover:none){
  .card:hover,
  .home-industry-card:hover,
  .contact-method:hover,
  .contact-form-card:hover,
  .tracking-panel:hover{
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .eyebrow::before,
  .page-hero::before,
  .tracking-panel-form::before,
  .floating-call::before{
    animation:none!important;
  }
}