/* ============================================================
   QIYAM BUSINESS SOLUTIONS — Design System CSS
   Exact match to original design pattern
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  --navy:   #000333;
  --navy-2: #060a4a;
  --white:  #ffffff;
  --ink-70: rgba(0,3,51,0.7);
  --ink-55: rgba(0,3,51,0.55);
  --ink-40: rgba(0,3,51,0.4);
  --paper:  #f4f6fb;
  --line:   rgba(0,3,51,0.1);

  --gold:    #FFD000;
  --orange:  #FB9F50;
  --crimson: #EA3226;
  --red:     #F64008;
  --magenta: #851880;

  --gradient: linear-gradient(95deg, var(--gold) 0%, var(--orange) 26%, var(--crimson) 50%, var(--red) 68%, var(--magenta) 100%);

  --glass-light-bg:     rgba(255,255,255,0.55);
  --glass-light-border: rgba(255,255,255,0.7);
  --glass-dark-bg:      rgba(255,255,255,0.1);
  --glass-dark-border:  rgba(255,255,255,0.22);

  --font-display: 'Inter Tight', 'Segoe UI Semibold', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-body:    'Segoe UI', 'Inter Tight', Tahoma, Geneva, Verdana, sans-serif;

  --container: 1240px;
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;

  --qiyam-hero-bg: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=2200&q=85');
}

/* ---------- RESET ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior: smooth; }
body  {
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img  { display:block; max-width:100%; }
a    { color:inherit; text-decoration:none; }
ul   { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }

/* ---------- LAYOUT ---------- */
.container { max-width: var(--container); margin:0 auto; padding:0 32px; }

/* ---------- TYPOGRAPHY UTILITIES ---------- */
h1,h2,h3,h4 { font-family: var(--font-display); letter-spacing:-0.02em; color: var(--navy); }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-display); font-weight:700; font-size:0.76rem;
  letter-spacing:0.16em; text-transform:uppercase; color: var(--magenta);
}
.eyebrow::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background: var(--gradient); flex-shrink:0;
}
.eyebrow.on-dark { color: var(--gold); }

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- BUTTONS ---------- */
.btn {
  font-family: var(--font-display); font-weight:700; font-size:0.92rem;
  padding:16px 30px; border-radius:100px;
  display:inline-flex; align-items:center; gap:10px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--gradient); color: var(--navy);
  box-shadow: 0 14px 30px -14px rgba(234,50,38,0.55);
}
.btn-primary:hover { box-shadow: 0 20px 40px -14px rgba(234,50,38,0.7); }
.btn-light   { background: var(--white); color: var(--navy); }
.btn-outline-dark  { border:1.5px solid rgba(0,3,51,0.18); color: var(--navy); }
.btn-outline-dark:hover  { border-color: var(--navy); }
.btn-outline-light { border:1.5px solid rgba(255,255,255,0.35); color: var(--white); }
.btn-outline-light:hover { border-color:#fff; }
.btn-arrow-circle {
  width:38px; height:38px; border-radius:50%;
  background: var(--navy); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:.3s ease;
}

/* ---------- GLASS ---------- */
.glass-light {
  background: var(--glass-light-bg);
  border:1px solid var(--glass-light-border);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 30px 60px -30px rgba(0,3,51,0.18);
}
.glass-dark {
  background: var(--glass-dark-bg);
  border:1px solid var(--glass-dark-border);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}

/* ---------- SECTION HEAD ---------- */
.section-head { max-width:740px; margin:0 auto 60px; text-align:center; position:relative; z-index:1; }
.section-head .eyebrow { justify-content:center; margin-bottom:18px; }
.section-head h2 { font-size: clamp(2rem,3.6vw,2.9rem); font-weight:700; line-height:1.15; margin-bottom:16px; }
.section-head.on-dark h2 { color:var(--white); }
.section-head p { color: var(--ink-55); font-size:1.02rem; line-height:1.65; }
.section-head.on-dark p { color: rgba(255,255,255,0.65); }

/* ---------- PILL ---------- */
.pill {
  display:flex; align-items:center; gap:8px; padding:9px 18px; border-radius:100px;
  font-family: var(--font-display); font-size:0.82rem; font-weight:600; color: rgba(255,255,255,0.85);
}
.pill .dot { width:6px; height:6px; border-radius:50%; }
.pill:nth-child(1) .dot { background: var(--gold); }
.pill:nth-child(2) .dot { background: var(--crimson); }
.pill:nth-child(3) .dot { background: var(--magenta); }

/* ============================================================
   BRAND LOCKUP
   ============================================================ */
.brand-lockup { display:inline-flex; align-items:center; gap:10px; color:var(--white); }
.brand-mark {
  display:block; width:64px; height:42px;
  flex:0 0 auto;
}
.brand-mark img {
  width:100%; height:100%; object-fit:contain; display:block;
}
.brand-name {
  display:grid; gap:1px; font-family:var(--font-display);
  font-weight:900; font-size:17px; line-height:.9; letter-spacing:0; color:currentColor;
}
header.scrolled .brand-lockup { color:var(--navy); }
.footer-brand .brand-lockup   { color:var(--white); align-items:center; }
.footer-brand .brand-mark     { width:76px; height:auto; }
.footer-brand .brand-name     { font-size:20px; }

/* ============================================================
   NAVIGATION
   ============================================================ */
header {
  position:fixed; top:0; left:0; right:0;
  z-index:200; padding:22px 0;
}
.nav-shell {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:10px 10px 10px 22px; border-radius:100px;
  background: rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: background .3s ease, box-shadow .3s ease;
}
header.scrolled .nav-shell {
  background: rgba(255,255,255,0.92); border-color: rgba(0,3,51,0.08);
  box-shadow: 0 20px 40px -25px rgba(0,3,51,0.35);
}
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-links a {
  font-family: var(--font-display); font-weight:600; font-size:0.88rem;
  color: rgba(255,255,255,0.8); padding:11px 20px; border-radius:100px;
  transition: color .3s ease, background .3s ease;
}
header.scrolled .nav-links a { color: var(--ink-70); }
.nav-links a:hover { background: rgba(255,255,255,0.15); color:#fff; }
header.scrolled .nav-links a:hover { background: rgba(0,3,51,0.06); color:var(--navy); }
.nav-links a.active { background: var(--white); color: var(--navy) !important; }
header.scrolled .nav-links a.active { background: var(--navy); color:var(--white) !important; }

/* Dropdown */
.nav-item { position:relative; }
.nav-item .dropdown {
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
  min-width:220px; background:var(--white); border-radius:var(--r-md);
  box-shadow:0 24px 48px -16px rgba(0,3,51,0.22); border:1px solid var(--line);
  opacity:0; visibility:hidden; transition:.2s ease; padding:8px 0; z-index:300;
}
.nav-item:hover .dropdown { opacity:1; visibility:visible; }
.nav-item .dropdown a {
  display:block; padding:10px 20px; color:var(--navy); font-size:0.88rem;
  font-weight:600; border-radius:0;
}
.nav-item .dropdown a:hover { background:var(--paper); color:var(--navy); }

.menu-toggle {
  display:none; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.15); color:var(--white);
  align-items:center; justify-content:center;
}
header.scrolled .menu-toggle {
  color: var(--navy);
  background: rgba(0,3,51,0.08);
}

/* Mobile nav drawer */
.mobile-nav {
  display:none; position:fixed; inset:0; z-index:190;
  background: rgba(0,3,51,0.97); flex-direction:column;
  align-items:center; justify-content:center; gap:0;
  transition: opacity .3s ease;
}
.mobile-nav.open,
.mobile-nav.is-open { display:flex; }

.mobile-nav-links { display:flex; flex-direction:column; align-items:center; width:100%; }
.mobile-nav-link {
  font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  color:rgba(255,255,255,0.85); padding:18px 32px; text-align:center; width:100%;
  border-bottom:1px solid rgba(255,255,255,0.07); transition:color .2s ease;
}
.mobile-nav-link:hover { color:var(--gold); }
.mobile-nav-cta {
  margin-top:24px; justify-content:center;
}
.mobile-nav-close {
  position:absolute; top:24px; right:24px; width:44px; height:44px;
  border-radius:50%; background:rgba(255,255,255,0.1); color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; transition:background .2s ease;
  z-index:10;
}
.mobile-nav-close:hover { background:rgba(255,255,255,0.2); }

/* Mobile nav backdrop */
.mobile-nav-backdrop {
  display:none; position:fixed; inset:0; z-index:180;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
}
.mobile-nav-backdrop.open,
.mobile-nav-backdrop.is-open { display:block; }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero {
  position:relative; min-height:100vh; display:flex; align-items:center;
  color:var(--white); overflow:hidden; padding:150px 0 80px;
  background-image:
    linear-gradient(90deg, rgba(0,3,51,0.96) 0%, rgba(0,3,51,0.90) 48%, rgba(32,8,77,0.82) 100%),
    var(--qiyam-hero-bg);
  background-size:cover; background-position:center;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 78% 12%, rgba(133,24,128,0.34), transparent 34%),
    linear-gradient(180deg, rgba(0,3,51,0.1), rgba(0,3,51,0.22));
  pointer-events:none; z-index:0;
}
.hero > .container { position:relative; z-index:1; }
.hero h1, .hero h2 { color:var(--white) !important; }
.hero p { color:rgba(255,255,255,0.74) !important; }

.hero-glow { position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none; z-index:0; }
.glow-a { width:520px; height:520px; background:radial-gradient(circle, var(--magenta), transparent 70%); opacity:0.45; top:-140px; right:-120px; }
.glow-b { width:460px; height:460px; background:radial-gradient(circle, var(--gold), transparent 70%); opacity:0.28; bottom:-200px; left:-140px; }

.hero-bg-word {
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:900; font-size:min(28vw,380px);
  color:rgba(255,255,255,0.1); mix-blend-mode:overlay;
  white-space:nowrap; letter-spacing:-0.03em; pointer-events:none; z-index:1; user-select:none;
}
.hero-inner { position:relative; z-index:2; width:100%; }
.hero-top { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px; }
.hero h1 { font-weight:700; font-size:clamp(2.3rem,4.6vw,4.3rem); line-height:1.08; max-width:880px; color:var(--white); }
.hero-cta-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }

.hero-float-card {
  position:absolute; right:0; bottom:-40px; width:340px; padding:28px;
  border-radius:var(--r-lg); z-index:3;
}
.hero-float-card h3  { font-size:1.2rem; font-weight:700; margin:12px 0 8px; color:var(--white); }
.hero-float-card p   { font-size:0.9rem; color:rgba(255,255,255,0.75); line-height:1.55; }
.hero-bottom-row     { position:relative; margin-top:110px; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero, .inner-hero {
  position:relative; padding:160px 0 80px; overflow:hidden;
  background-image:
    linear-gradient(90deg, rgba(0,3,51,0.96) 0%, rgba(0,3,51,0.90) 48%, rgba(32,8,77,0.82) 100%),
    var(--qiyam-hero-bg);
  background-size:cover; background-position:center;
  color:var(--white);
}
.page-hero::before, .inner-hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 78% 12%, rgba(133,24,128,0.34), transparent 34%),
    linear-gradient(180deg, rgba(0,3,51,0.1), rgba(0,3,51,0.22));
  pointer-events:none; z-index:0;
}
.page-hero > .container, .inner-hero > .container { position:relative; z-index:1; }
.page-hero h1, .inner-hero h1, .page-hero h2, .inner-hero h2 { color:var(--white) !important; }
.page-hero p, .inner-hero p { color:rgba(255,255,255,0.74) !important; }

.page-hero-badge {
  display:inline-flex; align-items:center; gap:10px; padding:10px 20px;
  border-radius:100px; margin-bottom:28px;
}
.page-hero-badge .icon {
  width:36px; height:36px; border-radius:10px; background:var(--gradient);
  display:flex; align-items:center; justify-content:center; color:var(--navy);
  flex-shrink:0;
}
.page-hero-badge span { font-family:var(--font-display); font-weight:700; font-size:0.85rem; color:rgba(255,255,255,0.85); }
.page-hero h1 { font-size:clamp(2.2rem,4vw,3.8rem); font-weight:700; line-height:1.08; max-width:820px; margin-bottom:24px; }
.page-hero-lead { font-size:1.1rem; line-height:1.7; max-width:600px; margin-bottom:36px; }

/* Hero Actions Spacing */
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width:576px) {
  .hero-actions { flex-direction:column; gap:12px; }
  .hero-actions .btn { width:100%; justify-content:center; text-align:center; }
}

/* Breadcrumb */
.breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.breadcrumb a { font-size:0.82rem; color:rgba(255,255,255,0.55); font-weight:600; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb span { font-size:0.82rem; color:rgba(255,255,255,0.35); }
.breadcrumb .current { font-size:0.82rem; color:rgba(255,255,255,0.8); font-weight:600; }

/* ============================================================
   INTRO SECTION
   ============================================================ */
.intro { padding:110px 0; background:var(--white); }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.intro-media { position:relative; }
.intro-media img { border-radius:var(--r-xl); width:100%; height:420px; object-fit:cover; }
.intro-media-tag {
  position:absolute; bottom:24px; left:24px; padding:14px 20px; border-radius:var(--r-md);
  display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:0.86rem;
}
.intro-text .eyebrow { margin-bottom:20px; }
.intro-text h2 { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:700; line-height:1.18; margin-bottom:22px; }
.intro-text p  { font-size:1.02rem; color:var(--ink-55); line-height:1.7; margin-bottom:30px; }

/* ============================================================
   STATS
   ============================================================ */
.stats { padding:0 0 110px; background:var(--white); }
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.stat-card {
  border-radius:var(--r-lg); padding:36px 30px; text-align:center;
  background:linear-gradient(160deg, var(--navy), #0a0d4d);
}
.stat-card .num { font-family:var(--font-display); font-weight:800; font-size:2.6rem; letter-spacing:-0.02em; color:var(--white); }
.stat-card .num span { font-size:1.6rem; }
.stat-card .label { margin-top:8px; font-size:0.9rem; color:rgba(255,255,255,0.65); font-weight:500; }

/* ============================================================
   SPOTLIGHT (scroll-scrubbed solutions stack)
   ============================================================ */
.spotlight { padding:110px 0; background:var(--paper); overflow:hidden; }
.spotlight-grid {
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px;
  align-items:center; min-height:min(720px, calc(100vh - 120px));
}
.spotlight-head h2 { font-size:clamp(2rem,3.6vw,2.9rem); font-weight:700; line-height:1.16; margin-bottom:20px; }
.spotlight-head p  { color:var(--ink-55); font-size:1rem; line-height:1.65; max-width:400px; margin-bottom:36px; }

.spot-list {}
.spot-item {
  display:flex; align-items:center; justify-content:space-between; padding:20px 0;
  border-bottom:1px solid var(--line); cursor:pointer; position:relative;
}
.spot-item span.name { font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink-40); transition:.25s ease; }
.spot-item span.idx  { font-family:var(--font-display); font-weight:800; color:var(--ink-40); font-size:0.95rem; transition:.25s ease; }
.spot-item.active span.name, .spot-item.active span.idx { color:var(--navy); }
.spot-item .bar { position:absolute; bottom:-1px; left:0; height:2px; width:0; background:var(--gradient); }

.spot-cards { position:relative; height:clamp(360px,58vh,520px); border-radius:var(--r-xl); perspective:1200px; }
.spot-card {
  display:block; border-radius:var(--r-xl); overflow:hidden; position:absolute; inset:0; height:100%;
  transform-origin:center bottom; will-change:transform,opacity;
  box-shadow:0 34px 70px -34px rgba(0,3,51,0.42);
}
.spot-card.active { z-index:5; }
.spot-card img    { width:100%; height:100%; object-fit:cover; }
.spot-card-overlay {
  position:absolute; left:20px; right:20px; bottom:20px; padding:20px 24px;
  border-radius:var(--r-md); display:flex; align-items:center; justify-content:space-between;
}
.spot-card-overlay .rating { display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:0.9rem; color:var(--white); margin-bottom:6px; }
.spot-card-overlay h4  { color:var(--white); font-size:1.2rem; font-weight:700; }
.spot-card-overlay .loc { color:rgba(255,255,255,0.7); font-size:0.85rem; margin-top:4px; }
.spot-card-overlay .go {
  width:46px; height:46px; border-radius:50%; background:var(--gradient); color:var(--navy);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ============================================================
   PACKAGES
   ============================================================ */
.packages { padding:110px 0; background:var(--navy); color:var(--white); position:relative; overflow:hidden; }
.packages-glow {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, var(--magenta), transparent 70%);
  opacity:0.3; top:-260px; left:50%; transform:translateX(-50%); filter:blur(100px);
}
.package-slider-container {
  position: relative;
  width: 100%;
}
.package-slider-track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  display: block;
  position: relative;
  cursor: grab;
  padding: 10px 0 30px 0; /* extra room for hover translations and box shadows */
}
.package-slider-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.package-slider-track.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
.package-slider-track .package-grid {
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 0;
  position: relative;
  z-index: 1;
}
.package-slider-track .package-card {
  flex: 0 0 calc(25% - 15px); /* Exactly matching 4 cards in grid on large monitors */
  min-width: 270px;
  scroll-snap-align: start;
}
@media (max-width: 1200px) {
  .package-slider-track .package-card {
    flex: 0 0 calc(33.333% - 14px);
  }
}
@media (max-width: 991px) {
  .package-slider-track .package-card {
    flex: 0 0 calc(50% - 10px);
  }
}
@media (max-width: 767px) {
  .package-slider-track .package-card {
    flex: 0 0 85%;
  }
}

.package-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; z-index:1; }
.package-card { border-radius:var(--r-lg); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.package-card:hover { transform:translateY(-4px); box-shadow:0 40px 70px -30px rgba(0,0,0,0.5); }
.package-media { height:190px; overflow:hidden; }
.package-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.package-card:hover .package-media img { transform:scale(1.08); }
.package-body { padding:22px; }
.package-body h4 { font-size:1.05rem; font-weight:700; color:var(--white); margin-bottom:10px; line-height:1.3; }
.package-body p  { font-size:0.85rem; color:rgba(255,255,255,0.6); line-height:1.55; margin-bottom:18px; min-height:63px; }
.package-foot {
  display:flex; align-items:center; justify-content:space-between; padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.12);
}
.package-foot .price { font-family:var(--font-display); font-weight:700; font-size:0.92rem; color:var(--white); }
.package-foot .price span { text-decoration:underline; text-decoration-color:rgba(255,255,255,0.3); }
.package-foot .rate { display:flex; align-items:center; gap:5px; font-size:0.82rem; color:rgba(255,255,255,0.7); }

/* Slider Navigation Buttons */
.package-slider-nav {
  position: absolute;
  top: calc(50% - 10px);
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(10, 13, 77, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}
.package-slider-nav:hover {
  background: var(--gradient);
  color: var(--navy);
  border-color: transparent;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 0 24px rgba(255, 74, 162, 0.5);
}
.package-slider-nav.prev-btn {
  left: -26px;
}
.package-slider-nav.next-btn {
  right: -26px;
}
@media (max-width: 1280px) {
  .package-slider-nav.prev-btn { left: 10px; }
  .package-slider-nav.next-btn { right: 10px; }
}
@media (max-width: 767px) {
  .package-slider-nav { display: none; }
}

/* Slider Page Indicator Dots */
.package-slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}
.package-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.3s ease;
}
.package-slider-dot.active {
  background: var(--gradient);
  width: 24px;
  border-radius: 4px;
}

/* ============================================================
   SERVICE LIST (alternating)
   ============================================================ */
.service-list-section { padding:110px 0; background:var(--white); }
.svc-row {
  display:grid; grid-template-columns:60px 1fr 1fr; gap:40px;
  align-items:center; padding:46px 0; border-bottom:1px solid var(--line);
}
.svc-row:first-of-type { border-top:1px solid var(--line); }
.svc-num  { font-family:var(--font-display); font-weight:800; font-size:1.3rem; }
.svc-text h3 { font-size:1.35rem; font-weight:700; margin-bottom:12px; }
.svc-text p  { color:var(--ink-55); line-height:1.65; font-size:0.98rem; max-width:460px; }
.svc-media   { border-radius:var(--r-lg); overflow:hidden; height:190px; justify-self:end; width:100%; max-width:420px; }
.svc-media img { width:100%; height:100%; object-fit:cover; }

/* ============================================================
   ENGAGEMENT CARDS (horizontal scroll)
   ============================================================ */
.engage { padding:110px 0 130px; background:var(--paper); }
.engage-scroll {
  display:flex; gap:22px; overflow-x:auto; padding:10px 4px 24px;
  scrollbar-width:none;
}
.engage-scroll::-webkit-scrollbar { display:none; }
.engage-card { flex:0 0 300px; border-radius:var(--r-lg); overflow:hidden; position:relative; height:400px; }
.engage-card img { width:100%; height:100%; object-fit:cover; }
.engage-card::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,3,51,0.88) 100%); }
.engage-tag { position:absolute; top:22px; left:22px; z-index:2; font-family:var(--font-display); font-weight:700; font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.7); }
.engage-content { position:absolute; bottom:24px; left:24px; right:24px; z-index:2; }
.engage-content h4 { color:var(--white); font-size:1.2rem; font-weight:700; margin-bottom:8px; }
.engage-content p  { color:rgba(255,255,255,0.75); font-size:0.86rem; line-height:1.55; }

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why { padding:110px 0; background:var(--white); }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.why-left h2 { font-size:clamp(1.9rem,3.2vw,2.7rem); font-weight:700; line-height:1.18; margin-bottom:26px; }
.why-item { display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); }
.why-item:first-child { border-top:1px solid var(--line); }
.why-item .ico {
  width:44px; height:44px; border-radius:12px; background:var(--gradient);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--navy);
}
.why-item h4 { font-size:1.06rem; font-weight:700; margin-bottom:6px; }
.why-item p  { color:var(--ink-55); font-size:0.92rem; line-height:1.6; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery { padding:110px 0; background:var(--navy); }
.gallery-grid { display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:120px; gap:14px; }
.g-item { border-radius:var(--r-md); overflow:hidden; position:relative; cursor:pointer; }
.g-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.g-item:hover img { transform:scale(1.1); }
.g-item::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,3,51,0.75) 100%); }
.g-item span { position:absolute; bottom:10px; left:12px; color:#fff; font-family:var(--font-display); font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; text-shadow:0 2px 8px rgba(0,0,0,0.5); z-index:1; }
.g-item.tall { grid-row:span 2; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials { padding:110px 0; background:var(--paper); }
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.test-card { border-radius:var(--r-lg); padding:32px; background:var(--white); border:1px solid var(--line); transition:box-shadow .3s ease, transform .3s ease; }
.test-card:hover { box-shadow:0 24px 50px -20px rgba(0,3,51,0.14); transform:translateY(-2px); }
.test-quote { font-size:0.95rem; line-height:1.7; color:var(--ink-70); margin-bottom:26px; font-style:italic; }
.test-quote::before { content:'\201C'; font-size:2rem; line-height:0; vertical-align:-0.5em; color:var(--crimson); opacity:0.5; margin-right:4px; }
.test-person  { display:flex; align-items:center; gap:12px; }
.test-avatar  { width:44px; height:44px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:var(--navy); font-family:var(--font-display); font-weight:800; font-size:0.9rem; flex-shrink:0; }
.test-person strong { display:block; font-size:0.92rem; }
.test-person span   { font-size:0.8rem; color:var(--ink-40); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding:110px 0; background:var(--white); }
.faq-grid { display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px; }
.faq-left h2 { font-size:clamp(1.9rem,3.2vw,2.7rem); font-weight:700; line-height:1.2; }
.faq-item { border-bottom:1px solid var(--line); padding:22px 0; }
.faq-item:first-child { border-top:1px solid var(--line); }
.faq-q { display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:20px; }
.faq-q h4 { font-size:1rem; font-weight:600; }
.faq-q .plus {
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .3s ease, background .3s ease; position:relative;
}
.faq-q .plus::before, .faq-q .plus::after {
  content:''; position:absolute; background:var(--navy); transition:.3s ease;
}
.faq-q .plus::before { width:11px; height:1.6px; }
.faq-q .plus::after  { width:1.6px; height:11px; }
.faq-item.open .plus { background:var(--gradient); transform:rotate(45deg); }
.faq-item.open .plus::before, .faq-item.open .plus::after { background:var(--navy); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-a { max-height:300px; }
.faq-a p { color:var(--ink-55); font-size:0.92rem; line-height:1.65; padding-top:16px; max-width:560px; }

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact { position:relative; padding:110px 0; color:var(--white); overflow:hidden; }
.contact-photo {
  position:absolute; inset:0; z-index:0;
  background-image: linear-gradient(180deg, rgba(0,3,51,0.92), rgba(0,3,51,0.96)),
    url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=2000&q=80');
  background-size:cover; background-position:center;
}
.contact-inner { position:relative; z-index:1; display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start; }
.contact-left h2 { color:var(--white); font-size:clamp(2rem,3.4vw,2.9rem); font-weight:700; line-height:1.16; margin-bottom:20px; }
.contact-left p  { color:rgba(255,255,255,0.7); font-size:1rem; line-height:1.7; margin-bottom:30px; max-width:420px; }
.contact-detail  { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.contact-detail .ic { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-detail strong { display:block; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.5); }
.contact-detail span   { font-size:0.95rem; font-weight:600; }

/* Contact form */
.contact-form { border-radius:var(--r-xl); padding:34px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-field label { font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.7); }
.form-field input, .form-field select, .form-field textarea {
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); border-radius:10px;
  padding:13px 14px; color:#fff; font-family:var(--font-body); font-size:0.92rem;
  transition:border-color .2s ease;
}
.form-field select option { color:#000; background:#fff; }
.form-field input::placeholder,
.form-field textarea::placeholder { color:rgba(255,255,255,0.4); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline:2px solid var(--gold); border-color:transparent; }
.contact-form .btn-primary { width:100%; justify-content:center; margin-top:6px; }
.form-success { display:none; margin-top:16px; padding:14px 18px; border-radius:10px; background:rgba(255,208,0,0.15); border:1px solid rgba(255,208,0,0.3); color:var(--gold); font-size:0.88rem; }
.form-success.show { display:block; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  padding:90px 0; background:var(--navy); text-align:center; position:relative; overflow:hidden;
}
.cta-band::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(133,24,128,0.3), transparent 60%);
  pointer-events:none;
}
.cta-band > .container { position:relative; z-index:1; }
.cta-band h2 { font-size:clamp(1.9rem,3.5vw,2.8rem); font-weight:700; color:var(--white); margin-bottom:16px; }
.cta-band p  { color:rgba(255,255,255,0.65); font-size:1rem; margin-bottom:36px; max-width:560px; margin-left:auto; margin-right:auto; }
.cta-band .cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background:var(--navy); color:var(--white); padding:80px 0 30px; }
.footer-top { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:50px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-brand .logo { margin-bottom:20px; }
.footer-brand p { color:rgba(255,255,255,0.6); font-size:0.92rem; line-height:1.65; max-width:300px; margin-bottom:22px; }
.footer-col h5 {
  font-family:var(--font-display); font-size:0.76rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:20px;
}
.footer-col ul li { margin-bottom:12px; }
.footer-col ul li a { color:rgba(255,255,255,0.7); font-size:0.92rem; transition:color .2s ease; }
.footer-col ul li a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:26px; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:0.8rem; color:rgba(255,255,255,0.45); }
.social-row { display:flex; gap:10px; }
.social-row a {
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; transition:.25s ease;
}
.social-row a:hover { background:var(--gradient); }

/* ============================================================
   SERVICES DETAIL PAGE
   ============================================================ */
.service-detail { padding:90px 0; background:var(--white); }
.service-detail-grid { display:grid; grid-template-columns:1fr 0.4fr; gap:60px; align-items:start; }
.package-detail-grid { display:grid; grid-template-columns:1fr 0.42fr; gap:60px; align-items:start; }
.service-detail-body h2 { font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:700; margin-bottom:22px; }
.service-detail-body p  { color:var(--ink-55); line-height:1.75; margin-bottom:20px; font-size:1rem; }
.service-deliverables { margin:36px 0; padding:32px; background:var(--paper); border-radius:var(--r-lg); }
.service-deliverables h4 { font-size:1rem; font-weight:700; margin-bottom:20px; }
.deliverable-list li { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:0.92rem; color:var(--ink-70); }
.deliverable-list li:last-child { border-bottom:none; }
.deliverable-list li::before { content:''; width:18px; height:18px; border-radius:50%; background:var(--gradient); flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; }
.service-sidebar { position:sticky; top:110px; }
.sidebar-card { border-radius:var(--r-lg); padding:28px; border:1px solid var(--line); margin-bottom:20px; }
.sidebar-card h4 { font-size:1rem; font-weight:700; margin-bottom:16px; }
.related-service-link { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-size:0.9rem; font-weight:600; }
.related-service-link:last-child { border-bottom:none; }
.related-service-link:hover { color:var(--crimson); }

/* ============================================================
   WORK / CASE STUDIES
   ============================================================ */
.work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; padding:90px 0; }
.work-card { border-radius:var(--r-xl); overflow:hidden; background:var(--white); border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease; }
.work-card:hover { transform:translateY(-4px); box-shadow:0 30px 60px -20px rgba(0,3,51,0.2); }
.work-card-media { height:240px; overflow:hidden; position:relative; }
.work-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.work-card:hover .work-card-media img { transform:scale(1.06); }
.work-card-tag { position:absolute; top:18px; left:18px; padding:6px 14px; border-radius:100px; font-family:var(--font-display); font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; }
.work-card-body { padding:28px; }
.work-card-body h3 { font-size:1.2rem; font-weight:700; margin-bottom:10px; }
.work-card-body p  { color:var(--ink-55); font-size:0.9rem; line-height:1.6; margin-bottom:20px; }
.work-card-meta { display:flex; gap:20px; flex-wrap:wrap; }
.work-card-meta span { font-size:0.78rem; color:var(--ink-40); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }

/* Work detail */
.work-detail-grid { display:grid; grid-template-columns:1fr 0.4fr; gap:60px; padding:90px 0; }
.work-section { margin-bottom:48px; }
.work-section h3 { font-size:1.3rem; font-weight:700; margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid; border-image:var(--gradient) 1; }
.work-section p  { color:var(--ink-55); line-height:1.75; font-size:0.98rem; }
.result-list li { padding:12px 0; border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:flex-start; color:var(--ink-70); font-size:0.95rem; }
.result-list li .bullet { width:8px; height:8px; border-radius:50%; background:var(--gradient); flex-shrink:0; margin-top:6px; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:90px 0; }
.blog-card { border-radius:var(--r-lg); overflow:hidden; background:var(--white); border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease; }
.blog-card:hover { transform:translateY(-3px); box-shadow:0 24px 50px -18px rgba(0,3,51,0.18); }
.blog-card-media { height:200px; overflow:hidden; }
.blog-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.blog-card:hover .blog-card-media img { transform:scale(1.06); }
.blog-card-body { padding:24px; }
.blog-tag { display:inline-block; padding:4px 12px; border-radius:100px; background:var(--paper); font-family:var(--font-display); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--magenta); margin-bottom:14px; }
.blog-card-body h3 { font-size:1.05rem; font-weight:700; margin-bottom:10px; line-height:1.35; }
.blog-card-body p  { color:var(--ink-55); font-size:0.88rem; line-height:1.6; margin-bottom:18px; }
.blog-meta { display:flex; gap:16px; align-items:center; font-size:0.78rem; color:var(--ink-40); }

/* Blog detail */
.blog-article { max-width:780px; margin:0 auto; padding:90px 0; }
.blog-article h2 { font-size:1.5rem; font-weight:700; margin:36px 0 16px; }
.blog-article h3 { font-size:1.2rem; font-weight:700; margin:28px 0 12px; }
.blog-article p  { color:var(--ink-55); line-height:1.8; margin-bottom:20px; font-size:1rem; }
.blog-article ul, .blog-article ol { padding-left:24px; margin-bottom:20px; }
.blog-article li { color:var(--ink-55); line-height:1.7; margin-bottom:8px; }
.blog-article blockquote { border-left:4px solid; border-image:var(--gradient) 1; padding:16px 24px; background:var(--paper); border-radius:0 var(--r-md) var(--r-md) 0; margin:28px 0; font-style:italic; color:var(--ink-70); }
.blog-author-card { display:flex; gap:20px; align-items:flex-start; padding:28px; background:var(--paper); border-radius:var(--r-lg); margin-top:60px; }
.blog-author-avatar { width:64px; height:64px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--navy); flex-shrink:0; }
.blog-author-info strong { display:block; font-size:1rem; font-weight:700; margin-bottom:4px; }
.blog-author-info span { font-size:0.85rem; color:var(--ink-55); }

/* ============================================================
   TEAM PAGE
   ============================================================ */
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:90px 0; }
.team-card { border-radius:var(--r-lg); overflow:hidden; background:var(--white); border:1px solid var(--line); text-align:center; transition:transform .3s ease, box-shadow .3s ease; }
.team-card:hover { transform:translateY(-4px); box-shadow:0 28px 56px -20px rgba(0,3,51,0.18); }
.team-card-photo { height:280px; overflow:hidden; }
.team-card-photo img { width:100%; height:100%; object-fit:cover; object-position:top; }
.team-card-photo-placeholder { width:100%; height:100%; background:linear-gradient(160deg, var(--navy), #0a0d4d); display:flex; align-items:center; justify-content:center; }
.team-card-photo-placeholder span { font-family:var(--font-display); font-weight:800; font-size:2.5rem; color:rgba(255,255,255,0.3); }
.team-card-body { padding:24px; }
.team-card-body h3 { font-size:1.05rem; font-weight:700; margin-bottom:4px; }
.team-card-body .role { font-size:0.85rem; color:var(--magenta); font-weight:600; margin-bottom:12px; }
.team-card-body p { font-size:0.85rem; color:var(--ink-55); line-height:1.6; }

/* ============================================================
   CAREERS PAGE
   ============================================================ */
.careers-section { padding:90px 0; background:var(--white); }
.job-card { background: var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 32px; margin-bottom:20px; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; transition:box-shadow .3s ease, transform .3s ease; }
.job-card:hover { box-shadow:0 20px 40px -18px rgba(0,3,51,0.16); transform:translateY(-2px); }
.job-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:8px; }
.job-meta { display:flex; gap:16px; flex-wrap:wrap; }
.job-badge { padding:4px 12px; border-radius:100px; background:var(--paper); font-size:0.75rem; font-weight:700; font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-55); }
.job-badge.type { background:linear-gradient(135deg, rgba(255,208,0,0.15), rgba(133,24,128,0.15)); color:var(--magenta); }
.no-jobs { text-align:center; padding:80px 20px; color:var(--ink-55); }

/* ============================================================
   PRICING PAGE
   ============================================================ */
.pricing-section { padding:90px 0; background:var(--paper); }
.pricing-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.pricing-card { border-radius:var(--r-xl); padding:36px; background:var(--white); border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease; position:relative; overflow:hidden; }
.pricing-card:hover { transform:translateY(-4px); box-shadow:0 30px 60px -20px rgba(0,3,51,0.18); }
.pricing-card.featured { background:linear-gradient(160deg, var(--navy), #0a0d4d); border-color:transparent; }
.pricing-card.featured h3, .pricing-card.featured .price, .pricing-card.featured li { color:var(--white) !important; }
.pricing-card.featured p { color:rgba(255,255,255,0.65) !important; }
.pricing-card.featured .feat-badge { position:absolute; top:20px; right:20px; padding:6px 14px; border-radius:100px; background:var(--gradient); font-family:var(--font-display); font-weight:700; font-size:0.72rem; color:var(--navy); }
.pricing-card h3 { font-size:1.2rem; font-weight:700; margin-bottom:8px; }
.pricing-card p  { font-size:0.9rem; color:var(--ink-55); margin-bottom:24px; line-height:1.55; }
.pricing-card .price { font-family:var(--font-display); font-size:2.2rem; font-weight:800; color:var(--navy); margin-bottom:28px; }
.pricing-card .price small { font-size:0.9rem; font-weight:500; opacity:0.6; }
.pricing-card ul { margin-bottom:32px; }
.pricing-card li { padding:10px 0; border-bottom:1px solid rgba(0,3,51,0.08); display:flex; gap:12px; align-items:flex-start; font-size:0.92rem; color:var(--ink-70); }
.pricing-card.featured li { border-bottom-color:rgba(255,255,255,0.1); }
.pricing-card li::before { content:''; width:16px; height:16px; border-radius:50%; background:var(--gradient); flex-shrink:0; margin-top:2px; }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-content { max-width:800px; margin:0 auto; padding:90px 0; }
.legal-content h2 { font-size:1.4rem; font-weight:700; margin:40px 0 16px; }
.legal-content h3 { font-size:1.1rem; font-weight:700; margin:28px 0 12px; }
.legal-content p  { color:var(--ink-55); line-height:1.8; margin-bottom:16px; }
.legal-content ul { padding-left:24px; margin-bottom:16px; }
.legal-content li { color:var(--ink-55); line-height:1.7; margin-bottom:8px; }

/* ============================================================
   THANK YOU / 404
   ============================================================ */
.thank-you-page { min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:100px 20px; }
.thank-you-icon { width:80px; height:80px; border-radius:50%; background:var(--gradient); margin:0 auto 28px; display:flex; align-items:center; justify-content:center; color:var(--navy); }
.error-page { min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:100px 20px; }
.error-page .error-num { font-family:var(--font-display); font-weight:900; font-size:clamp(6rem,20vw,12rem); line-height:1; margin-bottom:16px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px) {
  .nav-links { display:none; }
  .menu-toggle { display:flex; }
  .intro-grid, .why-grid, .faq-grid, .contact-inner { grid-template-columns:1fr; }
  .spotlight-grid { grid-template-columns:1fr; min-height:auto; }
  .spot-cards { height:420px; }
  .package-grid { grid-template-columns:repeat(2,1fr); }
  .stats-row { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .gallery-grid { grid-template-columns:repeat(3,1fr); }
  .hero-float-card { position:static; width:100%; margin-top:40px; }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .service-detail-grid, .work-detail-grid, .package-detail-grid { grid-template-columns:1fr; }
  .service-sidebar { position:static; }
  .pricing-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .package-grid { grid-template-columns:1fr; }
  .svc-row { grid-template-columns:40px 1fr; }
  .svc-media { display:none; }
  .form-row { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; gap:36px; }
  .footer-brand { grid-column:1 / -1; margin-bottom:12px; }
  .footer-top .footer-col:last-child { grid-column:1 / -1; margin-top:8px; }
  .hero { padding-top:130px; }
  .spotlight { padding:80px 0; }
  .spot-cards { height:340px; }
  .spot-item { padding:16px 0; }
  .test-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .work-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:1fr; }
  .brand-mark { width:52px; height:34px; }
  .brand-name { font-size:14px; }
  .footer-brand .brand-mark { width:64px; height:42px; }
  .footer-brand .brand-name { font-size:18px; }
  .page-hero, .inner-hero { padding:130px 0 60px; }
  .pricing-grid { grid-template-columns:1fr; }
  .job-card { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .nav-shell .btn { display:none !important; }
}

header .menu-toggle.is-active {
  color: var(--white) !important;
  background: rgba(255,255,255,0.15) !important;
  z-index: 220;
}

/* ============================================================
   ACCESSIBILITY & MISC
   ============================================================ */
:focus-visible { outline:2px solid var(--crimson); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* Reveal animation (JS-controlled) */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Alert / notification */
.alert { padding:14px 18px; border-radius:10px; font-size:0.9rem; margin-bottom:16px; }
.alert-success { background:rgba(0,180,80,0.12); border:1px solid rgba(0,180,80,0.3); color:#006830; }
.alert-error   { background:rgba(234,50,38,0.12); border:1px solid rgba(234,50,38,0.3); color:var(--crimson); }

/* ============================================================
   WORK DETAIL PAGE — SUMMARY BAND
   ============================================================ */
.summary-band {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-item strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-55);
}

.summary-item span {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
}

@media (max-width: 768px) {
  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .summary-band {
    padding: 20px 0;
  }
}

@media (max-width: 480px) {
  .summary-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ============================================================
   CAREERS PAGE — VALUES CARDS
   ============================================================ */
.why-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: 0 10px 30px rgba(0, 3, 51, 0.02);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 3, 51, 0.08);
  border-color: rgba(133, 24, 128, 0.15);
}

.why-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 208, 0, 0.12), rgba(133, 24, 128, 0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  margin-bottom: 24px;
  transition: transform 0.3s ease;
}

.why-card:hover .why-icon {
  transform: scale(1.08) rotate(4deg);
}

.why-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: 12px;
}

.why-card p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-55);
}