/* ==========================================================================
   GENIUS MANPOWER SERVICES — Design System (Light Glamorous)
   Palette:
     --asphalt      #12172B  (deep navy ink — used for TEXT/accents, not bg)
     --gold         #C9A84C  (signature champagne-gold — primary accent)
     --gold-deep    #A8802E  (pressed / deep gold)
     --signal-red   #C8102E  (jewel-red accent, used sparingly for pop)
     --signal-red-2 #9C0D24  (pressed / deep red)
     --plate-amber  #C9A84C  (alias of --gold, kept for existing references)
     --steel-white  #FFFFFF  (bright white page background)
     --steel-ink    #1A1B20  (body text on light)
     --steel-grey   #6B6F7B  (secondary text)
     --line-grey    #EDE3CC  (soft gold-tinted hairlines on light)
   Type:
     Display: 'Oswald' (condensed, all-caps, refined signage energy)
     Body:    'Work Sans'
     Data/mono: 'IBM Plex Mono' (reference numerals)
   Signature: gold hazard-chevron divider strips + ivory number-plate stat chips
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --asphalt:#12172B;
  --asphalt-2:#FFFFFF;
  --asphalt-3:#FFFFFF;
  --signal-red:#C8102E;
  --signal-red-2:#9C0D24;
  --plate-amber:#C9A84C;
  --gold:#C9A84C;
  --gold-deep:#A8802E;
  --gold-light:#F3E7C9;
  --steel-white:#FFFFFF;
  --steel-white-2:#FFFFFF;
  --steel-ink:#1A1B20;
  --steel-grey:#6B6F7B;
  --line-grey:#EDE3CC;
  --line-dark:#EDE3CC;

  --font-display:'Oswald', 'Arial Narrow', sans-serif;
  --font-body:'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --container:1600px;
  --radius:4px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--steel-white);
  color:var(--steel-ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:.01em;line-height:1.08;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:1rem;}

:focus-visible{outline:3px solid var(--plate-amber);outline-offset:2px;}

.container{max-width:var(--container);max-width:min(95%, var(--container));margin:0 auto;padding:0 24px;}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--signal-red);
}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--signal-red);display:inline-block;}
.on-dark .eyebrow,.eyebrow.on-dark{color:var(--plate-amber);}
.on-dark .eyebrow::before,.eyebrow.on-dark::before{background:var(--plate-amber);}

h1{font-size:clamp(2.4rem,5vw,4.4rem);text-transform:uppercase;}
h2{font-size:clamp(1.9rem,3.4vw,3rem);text-transform:uppercase;}
h3{font-size:1.3rem;text-transform:uppercase;}
.section-head{max-width:680px;margin-bottom:44px;}
.section-head p{margin-top:14px;color:var(--steel-grey);font-size:1.06rem;max-width:560px;}
.on-dark .section-head p{color:var(--steel-grey);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;font-family:var(--font-display);font-weight:600;
  font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--radius);border:2px solid transparent;
  transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--steel-ink);}
.btn-primary:hover{background:var(--gold-deep);color:#fff;transform:translateY(-2px);}
.btn-outline{background:transparent;border-color:currentColor;color:var(--steel-ink);}
.btn-outline:hover{background:var(--steel-ink);color:#fff;border-color:var(--steel-ink);transform:translateY(-2px);}
.on-dark .btn-outline{color:var(--steel-ink);}
.on-dark .btn-outline:hover{background:var(--steel-ink);color:#fff;}
.hero .btn-outline,.bg-dark .btn-outline,.page-header .btn-outline{color:var(--steel-ink);}
.hero .btn-outline:hover,.bg-dark .btn-outline:hover,.page-header .btn-outline:hover{background:var(--steel-ink);color:#fff;}
.hero-panel .btn-outline{color:#fff;border-color:rgba(201,168,76,.4);}
.hero-panel .btn-outline:hover{background:var(--gold);color:#171D38;border-color:var(--gold);}
.btn-ghost-amber{background:transparent;border-color:var(--gold-deep);color:var(--gold-deep);}
.btn-ghost-amber:hover{background:var(--gold-deep);color:#fff;transform:translateY(-2px);}
.btn-block{width:100%;}
.btn svg{width:16px;height:16px;flex-shrink:0;}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:200;
  background:rgba(255,253,248,.97);
  border-bottom:1px solid var(--line-grey);
  box-shadow:0 2px 24px rgba(201,168,76,.1);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;max-width:var(--container);max-width:min(95%, var(--container));margin:0 auto;}
.brand{position:relative;flex-shrink:0;height:62px;width:230px;}
.brand-logo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:block;height:62px;width:auto;opacity:0;
  animation:brandLogoFade 5s ease-in-out infinite;
}
.brand-text{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:baseline;gap:.35em;
  white-space:nowrap;font-family:var(--font-display);font-size:1.1rem;
  letter-spacing:.02em;color:var(--steel-ink);opacity:0;
  animation:brandTextFade 5s ease-in-out infinite;
}
.brand-text strong{color:var(--signal-red);}
@keyframes brandLogoFade{
  0%{opacity:0;}
  6%{opacity:1;}
  45%{opacity:1;}
  55%{opacity:0;}
  100%{opacity:0;}
}
@keyframes brandTextFade{
  0%{opacity:0;}
  55%{opacity:0;}
  65%{opacity:1;}
  95%{opacity:1;}
  100%{opacity:0;}
}
.brand-fallback{font-family:var(--font-display);color:var(--steel-ink);font-size:1.3rem;text-transform:uppercase;letter-spacing:.04em;}
.brand-fallback strong{color:var(--signal-red);}

.main-nav{display:flex;align-items:center;gap:0;}
.main-nav a{
  padding:9px 9px;font-family:var(--font-display);font-size:.8rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--steel-ink);border-radius:var(--radius);transition:color .15s,background .15s;
}
.main-nav a:hover,.main-nav a.active{color:var(--gold-deep);background:var(--gold-light);}
.main-nav a.active{color:var(--gold-deep);}

.header-cta{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.header-phone{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);color:var(--steel-ink);font-size:.88rem;transform-origin:left center;animation:headerPhonePulse 2.2s ease-in-out infinite;}
@keyframes headerPhonePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.09);}}
.header-phone svg{width:16px;height:16px;color:var(--gold-deep);}
.header-phone span{display:block;}
.header-phone small{display:block;color:var(--steel-grey);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-body);}

.nav-toggle{display:none;background:none;border:1px solid var(--line-grey);border-radius:4px;width:42px;height:42px;align-items:center;justify-content:center;color:var(--steel-ink);}
.nav-toggle svg{width:20px;height:20px;}
.nav-mobile-cta{display:none;}

/* Mobile-only quick-contact icons (Call / WhatsApp / Email) — replace
   the desktop phone-number block on narrower screens, where there
   isn't room for the full text and a tap-to-call icon is more useful
   than a phone number you can't dial by tapping anyway. Shown across
   both the "compact desktop" and "mobile" tiers below. */
.header-mobile-actions{display:none;gap:8px;flex-shrink:0;}
.header-icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:6px;flex-shrink:0;
  background:none;border:1px solid var(--line-grey);color:var(--steel-ink);
}
.header-icon-btn svg{width:17px;height:17px;}
.header-icon-btn.whatsapp{color:#25D366;border-color:#25D366;}
.header-icon-btn:active{background:var(--line-grey);}

/* ---- Tier 1: "compact desktop" (1301px–1550px) --------------------
   Still plenty of room for the full text nav — just not enough for
   the full "Call Us Now" phone block alongside 10 nav items and the
   CTA button, so the compact call/WhatsApp/email icons stand in for
   it here. Nav itself stays in its default inline/horizontal layout. */
@media (max-width:1550px){
  .header-phone{display:none;}
  .header-mobile-actions{display:flex;}
}

/* ---- Tier 2: "mobile / narrow" (≤1300px) ---------------------------
   Not enough room for 10 nav items as text, so it collapses to the
   hamburger drawer; the header's own "Free Consultation" button is
   dropped too (it's still reachable inside the opened drawer via
   .nav-mobile-cta) purely to keep this bar from overflowing. */
@media (max-width:1300px){
  .main-nav{
    position:fixed;inset:66px 0 0 0;background:#fff;
    flex-direction:column;align-items:stretch;padding:18px;gap:4px;
    transform:translateX(100%);transition:transform .3s var(--ease);
    overflow-y:auto;z-index:199;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{padding:16px 12px;font-size:1rem;border-bottom:1px solid var(--line-grey);border-radius:0;}
  .nav-toggle{display:inline-flex;}
  .nav-mobile-cta{display:flex;gap:10px;margin-top:18px;}
  .header-cta>a.btn.btn-primary{display:none;}
  .brand-text{flex-direction:column;align-items:center;text-align:center;gap:0;}
  .brand-text strong{font-size:1.3em;line-height:1;}
}
@media (max-width:480px){
  .header-inner{padding:14px 16px;gap:10px;}
  .brand{height:54px;width:180px;}
  .brand-logo{height:54px;}
  .brand-text{font-size:1rem;}
  .header-cta{gap:8px;flex-wrap:wrap;justify-content:flex-end;}
  .header-mobile-actions{gap:6px;}
  .header-icon-btn{width:40px;height:40px;}
  .header-icon-btn svg{width:19px;height:19px;}
  .nav-toggle{width:40px;height:40px;}
  .nav-toggle svg{width:22px;height:22px;}
}

/* ==========================================================================
   HAZARD DIVIDER — signature element
   Diagonal red / asphalt chevron strip, echoes the reflective hazard
   marking plates fixed to the rear of Indian cargo trucks.
   ========================================================================== */
.hazard-strip{
  height:14px;width:100%;
  background:repeating-linear-gradient(-45deg,var(--signal-red) 0 18px,var(--gold-deep) 18px 36px);
}
.hazard-strip.amber{background:var(--gold);}
.hazard-strip.thin{height:8px;}

/* ==========================================================================
   HERO PHOTO BANNER — real photos, always covering the full frame (no
   gaps on any screen/browser-chrome combination) using object-fit:cover,
   filling the screen right below the sticky header so the very first
   thing a visitor sees is just the header + a full-bleed photo.
   Crossfade is controlled by js/hero-slideshow.js rather than CSS
   keyframe percentages — z-index isn't a smoothly-interpolated property,
   and different browsers flip it at inconsistent points within a wide
   keyframe percentage gap, which caused images to appear out of turn.
   JS sets exact opacity/z-index states deterministically instead, using
   the same "outgoing stays fully opaque underneath, incoming fades in on
   top" layering so the white background never shows through the blend.
   If JS fails to load, the first photo still displays as a static image
   (graceful fallback) rather than a broken animation.
   ========================================================================== */
.hero-photo-banner{background:#fff;overflow:hidden;}
.hero-photo-slideshow{position:relative;width:100%;height:calc(100vh - 88px);min-height:420px;overflow:hidden;background:#fff;}
.hero-photo-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  opacity:0;z-index:1;
  transition:opacity 1s ease;
}
.hero-photo-slide:first-child{opacity:1;z-index:2;}
.hero-photo-slide.is-active{opacity:1;z-index:2;}
@media (max-width:1080px){
  .hero-photo-slideshow{height:calc(100vh - 61px);min-height:320px;}
}
@media (prefers-reduced-motion:reduce){
  .hero-photo-slide{transition:opacity .3s ease;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;background:#fff;color:var(--steel-ink);overflow:hidden;
  padding:96px 0 80px;
}
.hero::before{
  content:none;
}
.route-line{position:absolute;left:0;right:0;bottom:64px;height:2px;pointer-events:none;opacity:.5;}
.route-line svg{width:100%;height:100%;display:block;}
.route-dash{stroke:var(--gold-deep);stroke-width:2;stroke-dasharray:14 14;animation:dashmove 6s linear infinite;}
@keyframes dashmove{to{stroke-dashoffset:-56;}}

/* Animated truck-scene band — sits below the hero text, in its own
   dedicated space, never overlapped. Aspect-ratio locked so it scales
   cleanly at any viewport width without depending on viewport height
   (an earlier overlay approach broke on short laptop viewports where
   browser chrome eats into 100vh; this doesn't have that failure mode). */
.hero-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
.hero-copy h1{font-size:clamp(2.8rem,6.2vw,5.6rem);line-height:1.02;}
.hero-tagline{
  margin-top:14px;font-family:var(--font-display);font-size:1.3rem;font-weight:500;
  color:var(--gold-deep);letter-spacing:.02em;text-transform:uppercase;
}
.hero-copy p.lead{margin-top:20px;font-size:1.14rem;color:var(--steel-grey);max-width:520px;}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
.hero-strip{display:flex;gap:28px;margin-top:48px;flex-wrap:wrap;}
.hero-strip div{border-left:2px solid var(--gold-deep);padding-left:12px;}
.hero-strip strong{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--steel-ink);}
.hero-strip span{font-size:.78rem;color:var(--steel-grey);text-transform:uppercase;letter-spacing:.06em;}

.hero-panel{
  position:relative;background:linear-gradient(155deg,#171D38 0%,#0F1424 100%);border:1px solid rgba(201,168,76,.25);border-radius:8px;
  padding:30px;box-shadow:0 30px 70px -30px rgba(15,20,36,.55);
}
.hero-panel h3{color:var(--gold);font-size:1.05rem;margin-bottom:18px;letter-spacing:.01em;}
.hero-panel-divider{height:1px;background:rgba(201,168,76,.2);margin:24px 0;}
.quote-form{display:flex;flex-direction:column;gap:12px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#9BA1B8;font-family:var(--font-mono);}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.06);border:1px solid rgba(201,168,76,.22);color:#fff;border-radius:4px;padding:11px 12px;font-size:.94rem;
}
.field input::placeholder,.field textarea::placeholder{color:#767C93;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.09);}
.field select option{background:#171D38;color:#fff;}
/* Radio/checkbox and file inputs need to look like themselves, not like
   a padded text box — override the generic .field input styling above
   for these two types specifically (used by the Careers page's Apply
   Now form: "Ex-Serviceman?" radios and the Resume/ID Proof pickers). */
.field input[type="radio"],.field input[type="checkbox"]{
  background:none;border:none;padding:0;border-radius:0;width:auto;accent-color:var(--gold);
}
.field input[type="file"]{
  padding:9px 10px;font-size:.84rem;color:#C9CBD6;
}
.field input[type="file"]::file-selector-button{
  background:var(--gold);color:#171D38;border:none;border-radius:3px;padding:6px 12px;
  font-weight:600;font-size:.8rem;margin-right:10px;cursor:pointer;
}
/* Honeypot spam-trap field — invisible and unreachable for real visitors
   (off-screen, not tab-focusable), but still present in the DOM/tab order
   enough that simple bots that auto-fill every input still trip it. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden;}

/* Star-rating picker on the review submission form */
.star-picker button{background:none;border:none;cursor:pointer;color:#D8D5CC;padding:0;transition:color .1s;}
.star-picker button.active{color:#C9A84C;}

/* Homepage "Trusted By" client-logo strip — continuously scrolling,
   never stopping (pauses only on hover/focus for accessibility/legibility).
   Deliberately full-bleed (this is NOT inside .container in the HTML —
   see index.html) so it reads as a real ticker banner edge-to-edge,
   rather than a cramped row boxed into the normal content width.
   The track's logo list is rendered several times back-to-back by
   trusted-logos.js (not just once) and the animation moves exactly 50%
   of the track's total width — that's what makes the loop seamless
   with no visible jump or gap when it restarts, and repeating enough
   copies to comfortably fill the screen keeps it looking like a full
   ticker even with only 2–3 logos configured. */
.trusted-marquee{
  overflow:hidden;position:relative;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.trusted-track{display:flex;align-items:flex-start;gap:80px;width:max-content;animation:trustedScroll 32s linear infinite;}
.trusted-track:hover,.trusted-track:focus-within{animation-play-state:paused;}
.trusted-track>a,.trusted-track>span{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;}
.trusted-track img{height:96px;width:auto;max-width:260px;object-fit:contain;transition:transform .2s;}
.trusted-track a:hover img,.trusted-track a:focus img{transform:scale(1.08);}
.trusted-name{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;
  color:var(--steel-grey);text-align:center;white-space:nowrap;
}
@keyframes trustedScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.trusted-track{animation:none;}}
@media (max-width:640px){
  .trusted-track{gap:48px;}
  .trusted-track img{height:64px;max-width:180px;}
  .trusted-name{font-size:.7rem;}
}

/* YouTube video section */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:30px;}
.video-card{cursor:pointer;}
.video-thumb-wrap{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;}
.video-thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.video-play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;
  background:rgba(227,30,36,.92);border:none;display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;transition:transform .15s,background .15s;
}
.video-play-btn svg{width:22px;height:22px;margin-left:3px;}
.video-card:hover .video-play-btn{transform:translate(-50%,-50%) scale(1.08);background:var(--signal-red);}
.video-title{margin-top:12px;font-weight:600;font-size:.94rem;color:var(--steel-ink);}
.video-subscribe-cta{display:inline-flex;align-items:center;gap:8px;}

/* "Follow Us" social section — vertical icon-forward cards matching a
   proper social-proof section: big brand-colored icon square on top,
   platform name + handle, hover lifts the card and tints the border to
   that platform's own brand color. */
.social-follow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-top:6px;}
.social-follow-card{
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 18px;
  background:#fff;border:1px solid var(--line-grey);border-radius:12px;text-decoration:none;
  color:var(--steel-ink);text-align:center;transition:transform .3s,border-color .3s,box-shadow .3s;
}
.social-follow-card:hover{transform:translateY(-7px);box-shadow:0 16px 30px -16px rgba(0,0,0,.2);}
.social-follow-card.fb:hover{border-color:#1877F2;}
.social-follow-card.ig:hover{border-color:#D62976;}
.social-follow-card.li:hover{border-color:#0A66C2;}
.social-follow-card.yt:hover{border-color:#FF0000;}
.social-follow-icon{
  width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  color:#fff;transition:transform .3s;flex-shrink:0;
}
.social-follow-card:hover .social-follow-icon{transform:scale(1.12);}
.social-follow-icon svg{width:28px;height:28px;}
.social-follow-icon.fb-c{background:#1877F2;}
.social-follow-icon.ig-c{background:linear-gradient(135deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5);}
.social-follow-icon.li-c{background:#0A66C2;}
.social-follow-icon.yt-c{background:#FF0000;}
.social-follow-name{font-weight:700;font-size:1rem;}
.social-follow-handle{font-size:.82rem;color:var(--steel-grey);}
.social-follow-cta{font-size:.82rem;font-weight:600;color:var(--signal-red);margin-top:2px;}

@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-panel{order:-1;}
}

/* ==========================================================================
   PLATE STAT — number-plate styled statistic chip
   ========================================================================== */
.plate-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.plate{
  background:var(--plate-amber);border:3px solid var(--asphalt);border-radius:6px;
  padding:18px 16px;text-align:center;position:relative;
}
.plate::before{
  content:attr(data-tag);position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--asphalt);color:var(--plate-amber);font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.12em;padding:2px 10px;border-radius:3px;
}
.plate strong{display:block;font-family:var(--font-display);font-size:2.1rem;color:var(--asphalt);letter-spacing:.02em;}
.plate span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#2b2205;font-weight:600;margin-top:2px;}
@media (max-width:760px){.plate-row{grid-template-columns:repeat(2,1fr);}}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{padding:88px 0;}
.section.tight{padding:64px 0;}
.bg-dark{background:#fff;color:var(--steel-ink);}
.bg-panel{background:var(--steel-white-2);}
.bg-ink{background:#fff;color:var(--steel-ink);border-top:1px solid var(--line-grey);border-bottom:1px solid var(--line-grey);}

/* Service cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

/* Main blog listing specifically: 4x2 (8 per page) — scoped by ID
   so the shared .grid-3 utility class above (used on many other pages)
   isn't affected. */
#blog-list-root{grid-template-columns:repeat(4,1fr) !important;gap:1.3rem !important;}
@media(max-width:1200px){#blog-list-root{grid-template-columns:repeat(3,1fr) !important;}}
@media(max-width:900px){#blog-list-root{grid-template-columns:repeat(2,1fr) !important;}}
@media(max-width:600px){#blog-list-root{grid-template-columns:1fr !important;}}

/* Compact card proportions for the 4-column listing (and Saved
   Articles, same treatment for consistency) — shorter cover, tighter
   padding/type scale than the base .blog-card used elsewhere. */
#blog-list-root .blog-cover, #saved-grid .blog-cover { height: 110px; }
#blog-list-root .blog-body, #saved-grid .blog-body { padding: 14px; }
#blog-list-root .meta, #saved-grid .meta { font-size: .64rem; margin-bottom: 6px; }
#blog-list-root h3, #saved-grid h3 { font-size: .88rem; margin-bottom: 6px; line-height: 1.25; }
#blog-list-root .blog-body p, #saved-grid .blog-body p {
  font-size: .76rem; line-height: 1.45; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#blog-list-root .blog-stats-row, #saved-grid .blog-stats-row { font-size: .64rem; gap: .6rem; margin: .5rem 0 0; padding-top: .5rem; }
#blog-list-root .blog-card-save-btn, #saved-grid .blog-card-save-btn { width: 26px; height: 26px; font-size: .8rem; top: .5rem; right: .5rem; }
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}

/* Service cards carousel — shows 3 cards per view (2 on tablets, 1 on
   phones); if there are more cards than fit in one view, it auto-slides
   one card at a time. With 3 or fewer cards, nothing slides — they just
   sit statically since there's nothing extra to reveal. Same carousel
   shell (.cards-carousel/.cards-track) is reused by workforce cards
   (.job-card) below. */
.cards-carousel{overflow:hidden;}
.cards-track{display:flex;gap:24px;transition:transform .6s var(--ease);}
.cards-track .card-service,.cards-track .job-card,.cards-track .testi-card{flex:0 0 calc((100% - 48px)/3);min-width:0;}
@media (max-width:1080px){
  .cards-track .card-service,.cards-track .job-card,.cards-track .testi-card{flex:0 0 calc((100% - 24px)/2);}
}
@media (max-width:640px){
  .cards-track .card-service,.cards-track .job-card,.cards-track .testi-card{flex:0 0 100%;}
}

.card-service{
  background:#fff;border:1px solid var(--line-grey);border-radius:6px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
  position:relative;overflow:hidden;min-height:400px;display:flex;align-items:flex-end;
}
.card-service::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--signal-red);transform:scaleY(0);transform-origin:bottom;transition:transform .25s var(--ease);z-index:3;}
.card-service .card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform .4s var(--ease);z-index:0;}

/* Overlay + full detail panel: hidden by default, revealed on hover */
.card-service .card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(18,23,43,.05) 0%, rgba(18,23,43,.15) 40%, rgba(18,23,43,.4) 62%, transparent 62%);
  opacity:0;transition:opacity .3s var(--ease);z-index:1;
}
.card-service .card-content{
  position:relative;z-index:2;padding:24px 26px 26px;width:100%;
  background:linear-gradient(180deg, rgba(10,14,28,0) 0%, rgba(10,14,28,.94) 22%, rgba(10,14,28,.97) 100%);
  opacity:0;transform:translateY(14px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  pointer-events:none;
}

/* Compact title badge: the ONLY thing visible by default, bottom-center,
   background sized just to the text so the rest of the photo stays clean. */
.card-service .card-title-badge{
  position:absolute;left:50%;bottom:22px;z-index:2;
  transform:translateX(-50%);
  background:rgba(10,14,28,.72);border-radius:5px;padding:9px 20px;
  white-space:nowrap;transition:opacity .25s var(--ease);
}
.card-service .card-title-badge h3{margin:0;font-size:1.02rem;color:#fff;}

.card-service:hover{transform:translateY(-6px);box-shadow:0 20px 40px -20px rgba(20,21,26,.4);border-color:transparent;}
.card-service:hover::before{transform:scaleY(1);}
.card-service:hover .card-photo{transform:scale(1.08);}
.card-service:hover .card-overlay{opacity:1;background:linear-gradient(180deg, rgba(18,23,43,.15) 0%, rgba(18,23,43,.35) 40%, rgba(18,23,43,.6) 62%, transparent 62%);}
.card-service:hover .card-content{opacity:1;transform:translateY(0);pointer-events:auto;}
.card-service:hover .card-title-badge{opacity:0;}

.card-service .icon{width:52px;height:52px;border-radius:8px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 8px 20px -8px rgba(168,128,46,.5);}
.card-service .icon svg{width:26px;height:26px;color:#fff;}
.card-service h3{font-size:1.18rem;margin-bottom:10px;color:#fff;}
.card-service p{color:#E4E6EE;font-size:.96rem;}
.card-service .tag{display:inline-block;margin-top:16px;font-family:var(--font-mono);font-size:.72rem;color:var(--gold);letter-spacing:.05em;text-transform:uppercase;}
.card-service a.card-link{position:absolute;inset:0;z-index:4;}

/* Touch devices have no hover — keep the full detail panel reachable via focus
   (keyboard) and a tap-to-reveal fallback isn't needed since the card link
   still navigates; but show the content permanently on very small screens
   where hover interaction is unreliable anyway. */
@media (hover:none){
  .card-service .card-overlay{opacity:1;}
  .card-service .card-content{opacity:1;transform:translateY(0);pointer-events:auto;}
  .card-service .card-title-badge{display:none;}
}

/* Why-us icon list */
.trust-zigzag{display:grid;grid-template-columns:1fr 3fr;gap:48px;align-items:center;}
.trust-text p{color:var(--steel-grey);margin-top:14px;}
.trust-zigzag.reverse{grid-template-columns:3fr 1fr;}
.trust-zigzag.reverse .trust-text{order:2;}
.trust-zigzag.reverse .trust-image{order:1;}
.trust-zigzag.reverse .trust-image::before{left:-18px;right:18px;clip-path:polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0 85%);}
.trust-zigzag.reverse .trust-image img{clip-path:polygon(0 0, 100% 0, 100% 100%, 10% 100%, 0 85%);}
.trust-points{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;}
.trust-point{font-size:.86rem;font-weight:600;color:var(--steel-ink);display:flex;align-items:baseline;gap:8px;}
.trust-point span{font-family:var(--font-mono);font-size:.72rem;color:var(--gold-deep);flex-shrink:0;}
.trust-image{position:relative;}
.trust-image::before{
  content:'';position:absolute;top:18px;left:18px;right:-18px;bottom:-18px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  clip-path:polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
  z-index:0;
}
.trust-image img{
  position:relative;z-index:1;width:100%;height:420px;object-fit:cover;object-position:center 20%;
  clip-path:polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
  box-shadow:0 24px 50px -20px rgba(15,20,36,.35);
}
@media (max-width:900px){
  .trust-zigzag,.trust-zigzag.reverse{grid-template-columns:1fr;}
  .trust-image,.trust-zigzag.reverse .trust-image{order:-1;}
  .trust-zigzag.reverse .trust-text{order:0;}
  .trust-image img{height:280px;}
}

/* Process / how it works — genuine sequence, numbering justified */
.process-rail{position:relative;padding-top:10px;}
.process-rail::before{
  content:'';position:absolute;top:36px;left:0;right:0;height:2px;
  background:repeating-linear-gradient(90deg,var(--gold-deep) 0 10px, transparent 10px 20px);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .2s;
}
.process-rail.in::before{transform:scaleX(1);}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;}
.process-step{
  padding:18px 16px 6px;border-radius:10px;
  transition:opacity .6s var(--ease),transform .6s var(--ease),background .25s var(--ease);
}
.process-step:hover{background:var(--steel-white-2);transform:translateY(-5px);}
.process-step:nth-child(1){transition-delay:0s;}
.process-step:nth-child(2){transition-delay:1s;}
.process-step:nth-child(3){transition-delay:2s;}
.process-step:nth-child(4){transition-delay:3s;}
.process-step:nth-child(1) .dot{transition-delay:.1s;}
.process-step:nth-child(2) .dot{transition-delay:1.1s;}
.process-step:nth-child(3) .dot{transition-delay:2.1s;}
.process-step:nth-child(4) .dot{transition-delay:3.1s;}
.process-step .dot{
  width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.15rem;
  margin-bottom:18px;position:relative;z-index:2;border:4px solid var(--steel-white);
  box-shadow:0 8px 20px -8px rgba(168,128,46,.5);
  transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1) .2s;
}
.process-step.in .dot{transform:scale(1);}
.process-step:hover .dot{transform:scale(1.1);box-shadow:0 10px 26px -6px rgba(168,128,46,.65);}
.process-step h4{font-size:1.02rem;margin-bottom:8px;transition:color .2s var(--ease);}
.process-step:hover h4{color:var(--gold-deep);}
.process-step p{color:var(--steel-grey);font-size:.92rem;}

/* Job category cards */
.job-card{background:#fff;border:1px solid var(--line-grey);border-radius:6px;overflow:hidden;box-shadow:0 14px 34px -26px rgba(26,27,32,.25);}
.job-card .job-card-visual{height:150px;background:#fff;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.job-card .job-card-visual svg{width:70%;height:70%;color:var(--signal-red);}
.job-card .job-card-visual img{width:100%;height:100%;object-fit:cover;object-position:center 65%;display:block;}
.job-card .job-card-body{padding:22px 22px 26px;}
.job-card h3{font-size:1.06rem;margin-bottom:8px;color:var(--steel-ink);}
.job-card p{color:var(--steel-grey);font-size:.9rem;margin-bottom:14px;}
.job-card-specs{display:flex;gap:14px;flex-wrap:wrap;}
.job-card-specs span{font-family:var(--font-mono);font-size:.72rem;color:var(--gold-deep);border:1px solid var(--line-grey);padding:4px 9px;border-radius:3px;}

/* Testimonials */
.testi-card{
  background:linear-gradient(155deg,#171D38 0%,#0A0D1A 100%);
  border:1px solid rgba(201,168,76,.3);border-top:3px solid var(--gold);
  border-radius:10px;padding:34px 28px 28px;position:relative;overflow:hidden;
  box-shadow:0 20px 45px -24px rgba(15,20,36,.55);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.testi-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -22px rgba(15,20,36,.65);border-color:var(--gold);}
.testi-card::before{
  content:'\201C';font-family:Georgia,'Times New Roman',serif;font-size:6rem;line-height:1;
  position:absolute;top:-10px;right:16px;color:var(--gold);opacity:.22;pointer-events:none;
}
.testi-card .stars{color:var(--gold);letter-spacing:3px;margin-bottom:16px;font-size:1.05rem;position:relative;}
.testi-card p.quote{font-size:1.05rem;color:#fff;margin-bottom:22px;line-height:1.55;font-weight:500;position:relative;}
.testi-person{display:flex;align-items:center;gap:14px;position:relative;}
.testi-avatar{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#171D38;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:.92rem;letter-spacing:.02em;
  border:2px solid rgba(201,168,76,.4);box-shadow:0 6px 16px -6px rgba(168,128,46,.5);
}
.testi-person strong{display:block;font-size:.95rem;color:#fff;}
.testi-person span{display:block;font-size:.78rem;color:#9BA1B8;margin-top:2px;}

/* Blog cards */
.blog-card{background:#fff;border:1px solid var(--line-grey);border-radius:6px;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -20px rgba(20,21,26,.25);}
.blog-card .blog-cover{height:160px;background:#fff;display:flex;align-items:center;justify-content:center;}
.blog-card .blog-cover svg{width:44px;height:44px;color:var(--signal-red);}
.blog-card .blog-body{padding:22px;}
.blog-card .meta{font-family:var(--font-mono);font-size:.7rem;color:var(--signal-red);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;}
.blog-card h3{font-size:1.04rem;margin-bottom:10px;text-transform:none;}
.blog-card p{color:var(--steel-grey);font-size:.9rem;}
.blog-stats-row{display:flex;gap:1rem;margin:.8rem 0 0;padding-top:.8rem;border-top:1px solid var(--line-grey);font-size:.76rem;color:var(--steel-grey);font-weight:600;}

/* ── Search & Date-Range Filter Bar ── */
.blog-search-bar{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;justify-content:center;margin-bottom:1.6rem;}
.blog-search-input-wrap{position:relative;flex:1 1 340px;max-width:460px;}
.blog-search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:.85rem;opacity:.55;pointer-events:none;}
.blog-search-input{width:100%;padding:.75rem 2.6rem;border-radius:4px;background:#fff;border:1px solid var(--line-grey);color:var(--steel-ink);font-family:var(--font-body);font-size:.88rem;outline:none;transition:border-color .25s,box-shadow .25s;}
.blog-search-input:focus{border-color:var(--signal-red);box-shadow:0 0 0 3px rgba(227,30,36,.12);}
.blog-search-clear{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;border:none;background:var(--line-grey);color:var(--steel-grey);cursor:pointer;font-size:.7rem;display:flex;align-items:center;justify-content:center;}
.blog-search-clear:hover{background:var(--signal-red);color:#fff;}
.blog-search-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;background:#fff;border:1px solid var(--line-grey);border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.15);overflow:hidden;max-height:320px;overflow-y:auto;}
.blog-suggest-item{display:flex;flex-direction:column;gap:2px;padding:.65rem 1rem;cursor:pointer;border-bottom:1px solid var(--line-grey);transition:background .15s;}
.blog-suggest-item:last-child{border-bottom:none;}
.blog-suggest-item:hover,.blog-suggest-item.hl{background:rgba(227,30,36,.06);}
.blog-suggest-title{font-size:.85rem;font-weight:600;color:var(--steel-ink);}
.blog-suggest-meta{font-size:.72rem;color:var(--steel-grey);}
.blog-suggest-empty{padding:.9rem 1rem;font-size:.82rem;color:var(--steel-grey);text-align:center;}
.blog-date-range{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;}
.blog-date-label{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--steel-grey);font-weight:600;}
.blog-date-input{padding:.5rem .7rem;border-radius:4px;background:#fff;border:1px solid var(--line-grey);color:var(--steel-ink);font-family:var(--font-body);font-size:.82rem;outline:none;}
.blog-date-input:focus{border-color:var(--signal-red);}
.blog-filters-clear{padding:.5rem 1rem;border-radius:50px;border:1px solid var(--line-grey);background:transparent;color:var(--steel-grey);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s;}
.blog-filters-clear:hover{border-color:var(--signal-red);color:var(--signal-red);}
@media(max-width:640px){.blog-search-bar{flex-direction:column;align-items:stretch;}.blog-search-input-wrap{max-width:none;flex:none;}.blog-date-range{justify-content:center;}}

/* ── Category Filter Tabs ── */
.blog-filter{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.5rem;}
.blog-filter-btn{padding:.5rem 1.1rem;border-radius:50px;border:1px solid var(--line-grey);background:#fff;color:var(--steel-ink);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;}
.blog-filter-btn:hover,.blog-filter-btn.act{background:var(--signal-red);border-color:var(--signal-red);color:#fff;}

/* ── Bookmark icon on cards ── */
.blog-card{position:relative;}
.blog-card-save-btn{position:absolute;top:.7rem;right:.7rem;z-index:3;width:32px;height:32px;border-radius:50%;background:rgba(20,21,26,.6);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.95rem;transition:all .22s;backdrop-filter:blur(4px);}
.blog-card-save-btn:hover{background:rgba(20,21,26,.85);transform:scale(1.08);}
.blog-card-save-btn.saved{background:var(--signal-red);}

/* ── Pagination ── */
.pd-page-btn{width:34px;height:34px;border-radius:4px;border:1px solid var(--line-grey);background:#fff;color:var(--steel-ink);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;}
.pd-page-btn:hover:not(:disabled){border-color:var(--signal-red);color:var(--signal-red);}
.pd-page-btn.act{background:var(--signal-red);border-color:var(--signal-red);color:#fff;}
.pd-page-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ── Blog Engagement Bar: Like / Save / Share ── */
.blog-engage-bar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem;padding:1rem 1.2rem;background:#fff;border:1px solid var(--line-grey);border-radius:6px;}
.blog-engage-bar[hidden],.save-email-prompt[hidden],.blog-comments-section[hidden]{display:none !important;}
.engage-btn{display:flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border-radius:50px;background:transparent;border:1px solid var(--line-grey);color:var(--steel-ink);font-family:var(--font-body);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .22s;}
.engage-btn:hover{border-color:var(--signal-red);}
.engage-btn.active{background:rgba(227,30,36,.08);border-color:var(--signal-red);color:var(--signal-red);}
.engage-label{white-space:nowrap;}
.engage-share{display:flex;align-items:center;gap:.5rem;margin-left:auto;font-size:.8rem;color:var(--steel-grey);font-weight:600;}
.share-icon-btn{width:34px;height:34px;border-radius:50%;background:transparent;border:1px solid var(--line-grey);cursor:pointer;transition:all .22s;display:flex;align-items:center;justify-content:center;}
.share-icon-btn svg{width:16px;height:16px;fill:var(--steel-grey);transition:fill .22s;}
.share-icon-btn:hover{transform:translateY(-2px);border-color:transparent;}
.share-icon-btn.share-whatsapp:hover{background:#25D366;}.share-icon-btn.share-whatsapp:hover svg{fill:#fff;}
.share-icon-btn.share-facebook:hover{background:#1877F2;}.share-icon-btn.share-facebook:hover svg{fill:#fff;}
.share-icon-btn.share-x:hover{background:#000;}.share-icon-btn.share-x:hover svg{fill:#fff;}
.share-icon-btn.share-linkedin:hover{background:#0A66C2;}.share-icon-btn.share-linkedin:hover svg{fill:#fff;}
.share-icon-btn.share-copy:hover{background:var(--signal-red);}.share-icon-btn.share-copy:hover svg{fill:#fff;}
.save-email-prompt{margin-top:.8rem;padding:1rem 1.2rem;background:rgba(227,30,36,.05);border:1px solid rgba(227,30,36,.2);border-radius:6px;font-size:.85rem;color:var(--steel-ink);}
.save-email-prompt p{margin:0 0 .7rem;}
.save-email-row{display:flex;gap:.6rem;flex-wrap:wrap;}
.save-email-row input{flex:1 1 220px;padding:.6rem .9rem;border-radius:4px;border:1px solid var(--line-grey);background:#fff;color:var(--steel-ink);font-family:var(--font-body);font-size:.85rem;outline:none;}
.save-email-row input:focus{border-color:var(--signal-red);}
.save-email-row button{padding:.6rem 1.4rem;border-radius:4px;border:none;background:var(--signal-red);color:#fff;font-weight:700;font-size:.85rem;cursor:pointer;}

/* ── Comments ── */
.blog-comments-section{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--line-grey);}
.comments-heading{font-family:var(--font-display);font-size:1.3rem;margin-bottom:1.4rem;}
.comments-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:2.2rem;}
.comment-item{padding:1rem 1.2rem;background:#fff;border:1px solid var(--line-grey);border-radius:6px;}
.comment-item-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;}
.comment-av{width:30px;height:30px;border-radius:50%;background:var(--signal-red);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:#fff;flex-shrink:0;}
.comment-name{font-size:.85rem;font-weight:700;color:var(--steel-ink);}
.comment-pending-badge{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:10px;font-size:.65rem;font-weight:700;text-transform:uppercase;background:#fff3cd;color:#7a5c00;vertical-align:middle;}
.comment-item-pending{opacity:.85;}
.comment-date{font-size:.72rem;color:var(--steel-grey);}
.comment-text{font-size:.87rem;color:var(--steel-ink);line-height:1.6;white-space:pre-wrap;}
.comment-quickpost{display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--line-grey);border-radius:50px;padding:.5rem .5rem .5rem 1rem;}
.comment-qp-input{flex:1;border:none;background:transparent;outline:none;color:var(--steel-ink);font-family:var(--font-body);font-size:.88rem;}
.comment-qp-post{padding:.55rem 1.4rem;border-radius:50px;border:none;background:var(--signal-red);color:#fff;font-weight:700;font-size:.85rem;cursor:pointer;flex-shrink:0;}
.comment-qp-post:disabled{opacity:.6;cursor:not-allowed;}
.comment-qp-identity{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.7rem;padding:.9rem 1rem;background:rgba(227,30,36,.05);border:1px solid rgba(227,30,36,.18);border-radius:6px;}
.comment-qp-identity input{flex:1 1 160px;padding:.55rem .8rem;border-radius:4px;border:1px solid var(--line-grey);background:#fff;color:var(--steel-ink);font-family:var(--font-body);font-size:.85rem;outline:none;}
.comment-qp-identity input:focus{border-color:var(--signal-red);}
.comment-qp-identity button{padding:.55rem 1.2rem;border-radius:4px;border:none;background:var(--signal-red);color:#fff;font-weight:700;font-size:.82rem;cursor:pointer;flex-shrink:0;}
.comment-qp-identity button:disabled{opacity:.6;cursor:not-allowed;}
.comment-qp-note{width:100%;margin:.5rem 0 0;font-size:.76rem;color:var(--steel-grey);}
.comment-form-msg{margin-top:1rem;font-size:.82rem;padding:.7rem 1rem;border-radius:4px;}
.comment-form-msg.ok{background:rgba(10,138,63,.1);color:#0a8a3f;}
.comment-form-msg.err{background:rgba(227,30,36,.08);color:var(--signal-red);}
.hp-field{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important;}

@media(max-width:640px){.blog-engage-bar{flex-direction:column;align-items:stretch;}.engage-share{margin-left:0;justify-content:center;}.comment-qp-identity input{flex-basis:100%;}}

/* CTA band */
.cta-band{background:var(--signal-red);color:#fff;padding:56px 0;}
.cta-band-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.cta-band h2{font-size:clamp(1.6rem,3vw,2.3rem);}
.cta-band p{color:#FFD9DA;margin-top:8px;}
.cta-band .btn-outline{border-color:#fff;color:#fff;}
.cta-band .btn-outline:hover{background:#fff;color:var(--signal-red-2);}

/* Footer */
.site-footer{background:linear-gradient(155deg,#12172B 0%,#0A0D1A 100%);color:#9BA1B8;padding-top:64px;border-top:3px solid var(--gold-deep);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:48px;border-bottom:1px solid rgba(201,168,76,.18);}
.footer-grid img{height:44px;margin-bottom:16px;}
.footer-grid p{font-size:.9rem;color:#9BA1B8;max-width:280px;}
.footer-col h4{font-family:var(--font-display);color:#fff;font-size:.86rem;letter-spacing:.06em;margin-bottom:18px;}
.footer-col ul li{margin-bottom:11px;}
.footer-col ul a{font-size:.9rem;color:#9BA1B8;transition:color .15s;}
.footer-col ul a:hover{color:var(--gold);}
.footer-contact li{display:flex;gap:10px;font-size:.9rem;margin-bottom:14px;align-items:flex-start;}
.footer-contact svg{width:16px;height:16px;color:var(--gold);flex-shrink:0;margin-top:3px;}
.social-row{display:flex;gap:10px;margin-top:18px;}
.social-row a{width:36px;height:36px;border:1px solid rgba(201,168,76,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .15s,border-color .15s,color .15s;}
.social-row a:hover{background:var(--gold);border-color:var(--gold);color:#171D38;}
.social-row svg{width:16px;height:16px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:.82rem;color:#767C93;flex-wrap:wrap;gap:10px;}
.footer-bottom a{color:#767C93;}
.footer-bottom a:hover{color:var(--gold);}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap;}
.footer-powered{display:flex;justify-content:center;align-items:center;gap:6px;padding:14px 0 4px;font-size:.78rem;color:#767C93;border-top:1px solid rgba(255,255,255,.06);margin-top:4px;}
.footer-powered a{display:inline-flex;align-items:center;gap:6px;color:#9B9DA8;text-decoration:none;font-weight:600;}
.footer-powered a:hover{color:var(--gold);}
.footer-powered img{height:16px;width:auto;}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   PAGE HEADER (inner pages)
   ========================================================================== */
.page-header{background:#fff;color:var(--steel-ink);padding:56px 0 46px;position:relative;overflow:hidden;}
.page-header::before{content:none;}
.page-header.page-header-photo{padding:70px 0 26px;min-height:420px;display:flex;align-items:flex-end;justify-content:center;color:#fff;}
.page-header-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;z-index:0;}
.page-header-overlay{
  position:absolute;inset:0;z-index:0;
  background:rgba(10,14,28,.25);
}
.page-header.page-header-photo .container{position:relative;z-index:1;display:flex;justify-content:center;}
.page-header-text-panel{
  display:inline-block;max-width:820px;width:100%;text-align:center;
  background:radial-gradient(ellipse at center,rgba(10,14,28,.9) 0%,rgba(10,14,28,.75) 55%,rgba(10,14,28,.25) 85%,rgba(10,14,28,0) 100%);
  border-radius:8px;padding:26px 36px 20px;
}
.page-header.page-header-photo h1{color:#fff;white-space:nowrap;}
@media (max-width:640px){
  .page-header.page-header-photo h1{white-space:normal;}
}
.page-header.page-header-photo p.lead{color:rgba(255,255,255,.85);max-width:none;margin-left:auto;margin-right:auto;}
.breadcrumb{font-family:var(--font-mono);font-size:.78rem;color:var(--steel-grey);margin-bottom:14px;position:relative;}
.breadcrumb a{color:var(--steel-grey);}
.breadcrumb a:hover{color:var(--gold-deep);}
/* Photo-hero variant: pages with extra content (breadcrumb, checklist,
   action buttons) inside the text panel need wider room and colors
   that read on the dark photo overlay instead of a white background. */
.page-header.page-header-photo:has(.service-hero-list,.breadcrumb) .page-header-text-panel{max-width:900px;}
.page-header.page-header-photo .breadcrumb{color:rgba(255,255,255,.65);justify-content:center;display:flex;flex-wrap:wrap;gap:4px;}
.page-header.page-header-photo .breadcrumb a{color:rgba(255,255,255,.9);}
.page-header.page-header-photo .breadcrumb a:hover{color:var(--gold);}
.page-header.page-header-photo .check-item{color:#fff;justify-content:center;}
.page-header.page-header-photo .service-hero-list{justify-content:center;}
.page-header.page-header-photo .hero-actions{justify-content:center;}
.page-header.page-header-photo .btn-outline{color:#fff;border-color:rgba(255,255,255,.6);}
.page-header.page-header-photo .btn-outline:hover{background:#fff;color:var(--steel-ink);border-color:#fff;}
.page-header h1{position:relative;font-size:clamp(2rem,4vw,3rem);}
.page-header p.lead{position:relative;color:var(--steel-grey);margin-top:14px;max-width:560px;}

/* ==========================================================================
   GENERIC CONTENT (about, terms, faq, etc.)
   ========================================================================== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}

.founder-section .two-col{align-items:start;}
.founder-two-col{align-items:stretch;}
.founder-two-col + .founder-two-col{margin-top:64px;padding-top:56px;position:relative;border-top:1px solid var(--line-grey);}
.founder-two-col + .founder-two-col::before{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:90px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
}
.founder-two-col.reverse .founder-photo{order:2;}
.founder-two-col.reverse .founder-copy{order:1;}
.founder-copy{display:flex;flex-direction:column;justify-content:center;}

/* Blog article sidebar (blog-post.html) — spans the full height of the
   two-col grid (article body + engagement bar + comments, all of which
   sit in column 1) so that sticky positioning has room to follow the
   scroll all the way down the page, not just alongside the opening
   paragraph. */
.bp-sidebar{grid-column:2;grid-row:1 / -1;align-self:start;position:sticky;top:96px;}
.stat-inline{display:flex;gap:30px;margin-top:30px;flex-wrap:wrap;}
.stat-inline div strong{display:block;font-family:var(--font-display);font-size:1.8rem;color:var(--signal-red);}
.stat-inline div span{font-size:.78rem;text-transform:uppercase;color:var(--steel-grey);letter-spacing:.04em;}

.value-card{background:#fff;border:1px solid var(--line-grey);border-radius:6px;padding:26px;}
.value-card .icon{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 8px 18px -8px rgba(168,128,46,.5);}
.value-card .icon svg{width:22px;height:22px;color:#fff;}
.value-card h4{font-size:1rem;margin-bottom:8px;}
.value-card p{font-size:.9rem;color:var(--steel-grey);}

.team-card{text-align:center;}
.team-photo{width:100%;aspect-ratio:1;border-radius:6px;background:var(--asphalt-2);display:flex;align-items:center;justify-content:center;margin-bottom:16px;overflow:hidden;}
.team-photo svg{width:48px;height:48px;color:var(--plate-amber);}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}

/* ---- Founder & CEO spotlight (about.html) ---- */
.founder-photo{border-radius:8px;overflow:hidden;background:var(--asphalt-2);height:100%;}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;aspect-ratio:4/5;display:block;}
@media (min-width:769px){
  .founder-photo img{aspect-ratio:auto;min-height:100%;}
}
.founder-signoff{margin-top:18px;}
.founder-signoff strong{display:block;font-family:var(--font-display);font-size:1.1rem;letter-spacing:.02em;}
.founder-signoff span{font-size:.85rem;color:var(--steel-grey);}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;}
.vm-card{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,#fff 0%,var(--gold-light) 160%);
  border:1px solid var(--line-grey);border-radius:10px;padding:30px 28px;
  box-shadow:0 18px 40px -28px rgba(18,23,43,.35);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.vm-card::before{
  content:'';position:absolute;top:0;left:0;width:5px;height:100%;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));
}
.vm-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(18,23,43,.45);}
.vm-card .icon{width:50px;height:50px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 10px 22px -8px rgba(168,128,46,.55);}
.vm-card .icon svg{width:24px;height:24px;color:#fff;}
.vm-card h4{font-size:1.05rem;margin-bottom:10px;letter-spacing:.03em;}
.vm-card p{font-size:.92rem;color:var(--steel-grey);line-height:1.6;}
@media (max-width:640px){
  .vm-grid{grid-template-columns:1fr;}
}
.team-card h4{font-size:1rem;}
.team-card span{font-size:.82rem;color:var(--steel-grey);}

.timeline{position:relative;padding-left:32px;border-left:2px solid var(--line-grey);}
.timeline-item{position:relative;padding-bottom:38px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:'';position:absolute;left:-38px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--signal-red);border:3px solid var(--steel-white);}
.timeline-item strong{font-family:var(--font-mono);color:var(--signal-red);font-size:.82rem;}
.timeline-item h4{margin:6px 0 6px;font-size:1.06rem;}
.timeline-item p{color:var(--steel-grey);font-size:.92rem;}

/* ==========================================================================
   MILESTONE ACHIEVEMENTS — a guard (matched to the list's height) stands
   beside a vertical timeline: ringed dots on a straight spine, each
   connected to a speech-bubble year/title. Each dot+bubble pops in
   (enlarges from nothing) one after another, then a slow "spotlight"
   cycles down the list forever, pulsing one milestone at a time.
   ========================================================================== */
.achieve-panel{
  position:relative;
  padding:60px 48px;
}
.achieve-panel-inner{position:relative;z-index:1;display:flex;align-items:flex-end;gap:16px;}
.achieve-goal{flex-shrink:0;display:flex;align-items:flex-end;justify-content:center;overflow:visible;}
.achieve-goal img{
  height:100%;width:auto;max-width:480px;object-fit:contain;object-position:bottom center;display:block;
  filter:drop-shadow(0 16px 22px rgba(18,23,43,.35));
  animation:achieveGuardBob 3.2s ease-in-out infinite;
}
@keyframes achieveGuardBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.achieve-showcase{position:relative;flex:1 1 570px;min-width:380px;max-width:690px;align-self:stretch;display:none;}
.achieve-showcase-img{
  position:absolute;top:50%;left:50%;width:92%;max-width:630px;
  transform:translate(-50%,-50%) scale(.85);object-fit:contain;display:block;
  opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease);
  filter:drop-shadow(0 14px 20px rgba(18,23,43,.25));
}
.achieve-showcase-img.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
@media (min-width:1100px){
  .achieve-showcase{display:block;}
}
.achieve-list{flex:0 1 620px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:26px;position:relative;z-index:2;padding-left:6px;}
.achieve-list::before{
  content:'';position:absolute;left:36px;top:4px;bottom:4px;width:4px;
  background:var(--line-grey);border-radius:2px;z-index:0;
}
.achieve-item{position:relative;display:flex;align-items:center;gap:0;}
.achieve-icon{
  position:relative;z-index:2;flex-shrink:0;
  width:60px;height:60px;border-radius:50%;
  background:#fff;border:4px solid var(--line-grey);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 18px -10px rgba(18,23,43,.35);
  opacity:0;transform:scale(0);
  transition:opacity .45s var(--ease),transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.achieve-item.in .achieve-icon{opacity:1;transform:scale(1);}
.achieve-icon-fill{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.achieve-icon-fill svg{width:22px;height:22px;}
.achieve-bubble{
  position:relative;flex:0 0 auto;max-width:460px;min-width:0;
  margin-left:16px;padding:14px 24px;border-radius:14px;
  transform-origin:left center;
  opacity:0;transform:scale(0);
  transition:opacity .45s var(--ease) .18s,transform .5s cubic-bezier(.34,1.56,.64,1) .18s;
}
.achieve-item.in .achieve-bubble{opacity:1;transform:scale(1);}
.achieve-bubble-tail{
  position:absolute;left:-7px;top:50%;width:15px;height:15px;
  transform:translateY(-50%) rotate(45deg);border-radius:3px;z-index:-1;
}
.achieve-year{font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85;overflow-wrap:break-word;}
.achieve-title{font-family:var(--font-display);font-size:1.05rem;text-transform:uppercase;letter-spacing:.01em;margin-top:2px;overflow-wrap:break-word;}
.achieve-item.spotlight .achieve-icon{border-color:#3F8EFC;}
.achieve-item.spotlight .achieve-icon::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(63,142,252,.4);
  animation:achieveRingPulse 1.4s ease-out infinite;
  pointer-events:none;
}
@keyframes achieveRingPulse{
  0%{transform:scale(1);opacity:.7;}
  100%{transform:scale(1.35);opacity:0;}
}
@keyframes achieveBubblePulse{0%,100%{transform:scale(1.05);}50%{transform:scale(1.13);}}
.achieve-item.spotlight .achieve-bubble{animation:achieveBubblePulse 1.4s ease-in-out infinite;}

/* ---- Responsive: below this, bubbles must be free to shrink/wrap
   instead of hugging their text at a fixed width, or long titles
   overflow past the edge of narrow screens. ---------------------- */
@media (max-width:900px){
  .achieve-bubble{flex:1 1 auto;max-width:none;}
}
@media (max-width:760px){
  .achieve-panel{padding:44px 24px;}
  .achieve-panel-inner{flex-direction:column;align-items:center;gap:0;}
  .achieve-goal{width:150px;height:220px;margin:0 auto 24px;max-width:100%;}
  .achieve-list{width:100%;max-width:480px;flex:0 1 auto;gap:20px;}
  .achieve-item.spotlight .achieve-bubble{animation:none;transform:scale(1.04);}
}
@media (max-width:640px){
  .achieve-panel{padding:36px 16px;}
  .achieve-icon{width:48px;height:48px;}
  .achieve-icon-fill{width:32px;height:32px;}
  .achieve-icon-fill svg{width:18px;height:18px;}
  .achieve-bubble{padding:10px 16px;margin-left:12px;}
  .achieve-title{font-size:.92rem;}
  .achieve-list::before{left:30px;}
}
@media (max-width:420px){
  .achieve-goal{width:120px;height:180px;}
  .achieve-icon{width:42px;height:42px;}
  .achieve-icon-fill{width:28px;height:28px;}
  .achieve-icon-fill svg{width:16px;height:16px;}
  .achieve-bubble{padding:8px 14px;margin-left:10px;border-radius:10px;}
  .achieve-year{font-size:.68rem;}
  .achieve-title{font-size:.82rem;}
  .achieve-list::before{left:26px;}
  .achieve-list{gap:16px;}
}

/* ==========================================================================
/* Service detail page */
.service-hero-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px;}
.check-item{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;color:var(--steel-ink);}
.check-item svg{width:18px;height:18px;color:var(--plate-amber);flex-shrink:0;margin-top:2px;}

.spec-table{width:100%;border-collapse:collapse;margin-top:10px;}
.spec-table th,.spec-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line-grey);font-size:.92rem;}
.spec-table th{font-family:var(--font-mono);text-transform:uppercase;font-size:.72rem;letter-spacing:.05em;color:var(--steel-grey);}

/* FAQ accordion */
.accordion-item{border-bottom:1px solid var(--line-grey);}
.accordion-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:var(--font-display);font-size:1.02rem;text-transform:none;color:var(--steel-ink);}
.accordion-q svg{width:20px;height:20px;flex-shrink:0;transition:transform .25s var(--ease);color:var(--signal-red);}
.accordion-item.open .accordion-q svg{transform:rotate(45deg);}
.accordion-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.accordion-a p{padding:0 4px 22px;color:var(--steel-grey);font-size:.94rem;max-width:640px;}

.faq-cat-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px;}
.faq-cat-tabs button{padding:10px 18px;border-radius:20px;border:1px solid var(--line-grey);background:#fff;font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--steel-grey);}
.faq-cat-tabs button.active{background:var(--steel-ink);border-color:var(--steel-ink);color:#fff;}

/* Track page */
.track-panel{background:#fff;border:1px solid var(--line-grey);border-radius:8px;padding:40px;box-shadow:0 14px 34px -26px rgba(26,27,32,.2);}
.track-input-row{display:flex;gap:12px;margin-top:20px;}
.track-input-row input{flex:1;background:var(--asphalt);border:1px solid var(--line-dark);color:#fff;padding:15px 16px;border-radius:4px;font-family:var(--font-mono);letter-spacing:.05em;}
.track-result{margin-top:36px;display:none;}
.track-result.show{display:block;}
.track-status-bar{display:flex;justify-content:space-between;position:relative;margin:34px 0 10px;}
.track-status-bar::before{content:'';position:absolute;top:15px;left:0;right:0;height:3px;background:var(--line-dark);}
.track-status-bar .fill{position:absolute;top:15px;left:0;height:3px;background:var(--signal-red);transition:width .6s var(--ease);}
.track-node{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;}
.track-node .dot{width:32px;height:32px;border-radius:50%;background:var(--asphalt);border:3px solid var(--line-dark);display:flex;align-items:center;justify-content:center;}
.track-node.done .dot{background:var(--signal-red);border-color:var(--signal-red);}
.track-node span{font-size:.72rem;text-align:center;color:#9B9DA8;text-transform:uppercase;letter-spacing:.03em;max-width:80px;}
.track-node.done span{color:#fff;}
.track-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;}
.track-meta div{background:var(--asphalt);border:1px solid var(--line-dark);border-radius:6px;padding:16px;}
.track-meta div span{display:block;font-size:.7rem;color:#9B9DA8;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.track-meta div strong{font-family:var(--font-mono);color:#fff;font-size:.98rem;}

/* Contact page */
.contact-info-card{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line-grey);}
.contact-info-card .icon{width:46px;height:46px;border-radius:8px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 18px -8px rgba(168,128,46,.5);}
.contact-info-card .icon svg{width:22px;height:22px;color:#fff;}
.contact-info-card h4{font-size:.98rem;margin-bottom:5px;}
.contact-info-card p{font-size:.92rem;color:var(--steel-grey);}
/* Shared dark navy panel style for standalone lead-capture forms outside
   the homepage hero (Contact page's "Send a Message", Reviews page's
   "Leave a Review") — same look as the homepage's .hero-panel, so every
   lead form on the site reads as one consistent, premium component
   instead of the plain white box these used to be. */
.dark-form-panel{
  background:linear-gradient(155deg,#171D38 0%,#0F1424 100%);border:1px solid rgba(201,168,76,.25);border-radius:8px;
  padding:38px;box-shadow:0 30px 70px -30px rgba(15,20,36,.55);scroll-margin-top:100px;
}
.dark-form-panel h2,.dark-form-panel h3{color:var(--gold);}
.dark-form-panel > p{color:#9BA1B8;}
.dark-form-panel .form-note{color:#9BA1B8;}
.dark-form-panel .star-picker button{color:rgba(255,255,255,.3);}
.dark-form-panel .star-picker button.active{color:var(--gold);}
.map-wrap{border-radius:8px;overflow:hidden;border:1px solid var(--line-grey);height:340px;background:var(--steel-white-2);position:relative;}

/* Reviews page */
.rating-summary{
  display:flex;align-items:center;gap:36px;background:#fff;
  border:1px solid var(--line-grey);border-top:3px solid var(--signal-red);
  border-radius:10px;padding:34px 36px;flex-wrap:wrap;
  box-shadow:0 10px 30px -22px rgba(20,21,26,.18);
}
.rating-big{text-align:center;padding-right:32px;border-right:1px solid var(--line-grey);flex-shrink:0;}
.rating-big strong{font-family:var(--font-display);font-size:3.6rem;line-height:1;color:var(--steel-ink);display:block;}
.rating-big .stars{color:var(--plate-amber);font-size:1.1rem;letter-spacing:3px;margin:10px 0 6px;}
.rating-big span{font-size:.82rem;color:var(--steel-grey);}
.rating-bars{flex:1;min-width:260px;}
.rating-bars-empty{flex:1;min-width:240px;color:var(--steel-grey);font-size:.9rem;}
.rating-bar-row{display:flex;align-items:center;gap:12px;font-size:.84rem;color:var(--steel-ink);font-weight:600;margin-bottom:11px;}
.rating-bar-row:last-child{margin-bottom:0;}
.rating-bar-row .rbr-label{width:48px;flex-shrink:0;}
.rating-bar-row .rbr-pct{width:40px;flex-shrink:0;text-align:right;color:var(--steel-grey);font-weight:400;}
.rating-bar-row .bar{flex:1;height:10px;background:var(--line-grey);border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(20,21,26,.08);}
.rating-bar-row .bar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--signal-red),var(--plate-amber));transition:width 1.1s cubic-bezier(.22,1,.36,1);}

/* Trust pill row under the rating summary (reviews.html) */
.trust-pill-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:24px;}
.trust-pill{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-grey);
  border-radius:30px;padding:10px 20px 10px 12px;font-size:.86rem;font-weight:600;color:var(--steel-ink);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.trust-pill:hover{transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(20,21,26,.25);}
.trust-pill-icon{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.trust-pill-icon svg{width:16px;height:16px;}
.trust-pill-icon.good{background:#0a8a3f;color:#fff;}

/* Utility */
.text-center{text-align:center;margin-left:auto;margin-right:auto;}
.mt-40{margin-top:40px;}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;}
.badge{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:5px 12px;border-radius:20px;border:1px solid var(--line-grey);color:var(--steel-grey);}

/* Simple content pages (terms/privacy) */
.prose h2{font-size:1.4rem;text-transform:none;margin:36px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose p,.prose li{color:var(--steel-grey);font-size:.98rem;margin-bottom:14px;}
.prose ul{padding-left:20px;list-style:disc;}
.prose ul li{margin-bottom:8px;}
.prose strong{color:var(--steel-ink);}
.prose img{max-width:100%;height:auto;border-radius:6px;display:block;margin:0 0 18px;}
.prose blockquote{margin:0 0 18px;padding:4px 0 4px 18px;border-left:3px solid var(--signal-red);color:var(--steel-grey);font-style:italic;}
.prose pre{background:var(--asphalt,#12172B);color:#fff;padding:14px 16px;border-radius:6px;overflow-x:auto;margin:0 0 18px;font-family:var(--font-mono);font-size:.85rem;white-space:pre-wrap;}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* Directional variants — for two-column layouts (hero, zigzag sections)
   where text and image should slide in from their own sides rather
   than both just fading upward. Combine with .reveal for the same
   scroll-triggered "in" class toggle, e.g. class="reveal reveal-left". */
.reveal-left{transform:translateX(-60px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal-left.in{transform:translateX(0);}
.reveal-right{transform:translateX(60px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal-right.in{transform:translateX(0);}
@media (max-width:900px){
  /* Below the breakpoint where two-column layouts stack vertically,
     a left/right slide reads oddly — fall back to the standard
     upward fade so it still feels natural stacked on mobile. */
  .reveal-left,.reveal-right{transform:translateY(24px);}
  .reveal-left.in,.reveal-right.in{transform:translateY(0);}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .grid-3{grid-template-columns:1fr 1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .process-steps{grid-template-columns:1fr 1fr;}
  .process-rail::before{display:none;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}
@media (max-width:760px){
  .section{padding:60px 0;}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;gap:32px;}
  .bp-sidebar{position:static;grid-row:auto;}
  .founder-photo{height:auto;}
  .founder-photo img{aspect-ratio:4/5;min-height:0;}
  .founder-two-col.reverse .founder-photo{order:0;}
  .founder-two-col.reverse .founder-copy{order:0;}
  .founder-two-col + .founder-two-col{margin-top:40px;padding-top:36px;}
  .form-row{grid-template-columns:1fr;}
  .cta-band-inner{flex-direction:column;align-items:flex-start;}
  .plate-row{grid-template-columns:1fr 1fr;}
  .rating-summary{flex-direction:column;align-items:flex-start;}
  .rating-big{border-right:none;border-bottom:1px solid var(--line-grey);padding-right:0;padding-bottom:20px;width:100%;text-align:left;}
  .service-hero-list{grid-template-columns:1fr;}
  .track-meta{grid-template-columns:1fr;}
  .track-node span{max-width:60px;font-size:.62rem;}
}

/* ==========================================================================
   SERVICE DETAIL PANEL — clicking "Explore [Service]" on the Services
   page expands this in place, right below the cards, instead of
   navigating away or opening a popup. Content is injected by
   js/service-detail-panel.js per service. Height-animated via JS
   (max-height alone can't animate to "auto" reliably).
   ========================================================================== */
.svc-detail-panel{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .5s var(--ease),opacity .4s var(--ease);
}
.svc-detail-panel.open{opacity:1;}
.svc-detail-inner{
  position:relative;margin-top:32px;background:#fff;
  border:1px solid var(--line-grey);border-radius:16px;
  padding:40px 44px;box-shadow:0 26px 60px -34px rgba(26,27,32,.28);
}
.svc-detail-close{
  position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;
  background:var(--line-grey);border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--steel-ink);transition:background .2s var(--ease),color .2s var(--ease);z-index:2;
}
.svc-detail-close svg{width:18px;height:18px;}
.svc-detail-close:hover{background:var(--gold);color:#fff;}
.svc-detail-header{display:flex;gap:20px;align-items:flex-start;padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line-grey);}
.svc-detail-icon{width:56px;height:56px;flex-shrink:0;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -8px rgba(168,128,46,.5);}
.svc-detail-icon svg{width:28px;height:28px;color:#fff;}
.svc-detail-eyebrow{font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);}
.svc-detail-title{font-family:var(--font-display);font-size:1.7rem;text-transform:uppercase;letter-spacing:.01em;margin:8px 0 10px;color:var(--steel-ink);}
.svc-detail-tagline{font-size:1.02rem;color:var(--steel-ink);font-weight:600;margin:0;}
.svc-detail-desc{color:var(--steel-grey);line-height:1.7;margin:0 0 28px;max-width:680px;}
.svc-detail-section-label{font-family:var(--font-display);font-size:.92rem;text-transform:uppercase;letter-spacing:.05em;color:var(--steel-ink);margin-bottom:14px;}
.svc-detail-features{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 24px;margin:0 0 28px;list-style:none;padding:0;}
.svc-detail-features .check-item{font-size:.92rem;}
.svc-detail-why{
  background:var(--line-grey);border-radius:10px;padding:16px 20px;
  font-family:var(--font-display);font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;
  color:var(--gold-deep);text-align:center;margin:0 0 28px;line-height:1.6;
}
.svc-detail-actions{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;}
.svc-detail-link{font-size:.88rem;color:var(--steel-grey);text-decoration:underline;text-underline-offset:3px;}
.svc-detail-link:hover{color:var(--steel-ink);}
@media (max-width:760px){
  .svc-detail-inner{padding:32px 24px;}
  .svc-detail-features{grid-template-columns:1fr;}
  .svc-detail-title{font-size:1.4rem;}
  .svc-detail-header{flex-direction:column;}
}

/* ==========================================================================
   IMAGE GALLERY PAGE — sections, each a heading + a two-per-row grid of
   photos with their own captions. Photos fade/rise into place one after
   another as each section scrolls into view, lift slightly on hover,
   and open full-size in a lightbox on click.
   ========================================================================== */
.gallery-section{margin-bottom:64px;}
.gallery-section:last-child{margin-bottom:0;}
.gallery-section-head{max-width:680px;margin-bottom:32px;}
.gallery-section-head .eyebrow{display:flex;align-items:center;gap:10px;}
.gallery-section-head .eyebrow::before{content:'';width:28px;height:2px;background:var(--gold);display:inline-block;}
.gallery-section-head h2{margin:10px 0 8px;}
.gallery-section-head p{color:var(--steel-grey);}
.gallery-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
}
.gallery-tile{
  position:relative;border-radius:12px;overflow:hidden;cursor:pointer;
  background:var(--asphalt-2);box-shadow:0 20px 44px -28px rgba(18,23,43,.4);
  opacity:0;transform:translateY(36px) scale(.96);
  transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .3s var(--ease);
}
.gallery-tile.in{opacity:1;transform:translateY(0) scale(1);}
.gallery-tile:nth-child(odd){transform:translateY(36px) scale(.96) rotate(-.4deg);}
.gallery-tile:nth-child(even){transform:translateY(36px) scale(.96) rotate(.4deg);}
.gallery-tile.in:nth-child(odd),.gallery-tile.in:nth-child(even){transform:translateY(0) scale(1) rotate(0deg);}
.gallery-tile:hover{box-shadow:0 28px 60px -26px rgba(18,23,43,.5);}
.gallery-tile-photo{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;}
.gallery-tile-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease);}
.gallery-tile:hover .gallery-tile-photo img{transform:scale(1.07);}
.gallery-tile-zoom{
  position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
  background:rgba(18,23,43,.55);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;color:#fff;
  opacity:0;transform:scale(.7);transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.gallery-tile-zoom svg{width:17px;height:17px;}
.gallery-tile:hover .gallery-tile-zoom{opacity:1;transform:scale(1);}
.gallery-tile-caption{
  padding:16px 20px;background:#fff;
  font-family:var(--font-display);font-size:1rem;letter-spacing:.01em;color:var(--steel-ink);
  border-top:3px solid var(--gold);
}
.gallery-empty{color:var(--steel-grey);padding:40px 0;text-align:center;}

/* Lightbox */
html.gallery-lightbox-lock,html.gallery-lightbox-lock body{overflow:hidden;}
.gallery-lightbox{
  position:fixed;inset:0;z-index:1000;background:rgba(10,14,28,.95);
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
.gallery-lightbox.open{opacity:1;visibility:visible;transition:opacity .3s var(--ease);}
.gallery-lightbox-figure{
  width:100%;height:100%;max-width:1800px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  transform:scale(.96);transition:transform .3s var(--ease);
}
.gallery-lightbox.open .gallery-lightbox-figure{transform:scale(1);}
.gallery-lightbox-figure img{
  max-width:100%;max-height:calc(100vh - 110px);width:auto;height:auto;object-fit:contain;
  border-radius:6px;box-shadow:0 40px 90px -20px rgba(0,0,0,.6);display:block;margin:0 auto;
}
.gallery-lightbox-caption{color:#fff;font-family:var(--font-display);font-size:1.05rem;margin-top:18px;letter-spacing:.02em;flex-shrink:0;}
.gallery-lightbox-close,.gallery-lightbox-prev,.gallery-lightbox-next{
  position:fixed;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s var(--ease);
}
.gallery-lightbox-close:hover,.gallery-lightbox-prev:hover,.gallery-lightbox-next:hover{background:rgba(255,255,255,.22);}
.gallery-lightbox-close{top:20px;right:20px;width:44px;height:44px;}
.gallery-lightbox-close svg{width:20px;height:20px;}
.gallery-lightbox-prev,.gallery-lightbox-next{top:50%;transform:translateY(-50%);width:52px;height:52px;}
.gallery-lightbox-prev{left:16px;}
.gallery-lightbox-next{right:16px;}
.gallery-lightbox-prev svg,.gallery-lightbox-next svg{width:24px;height:24px;}
@media (max-width:760px){
  .gallery-grid{grid-template-columns:1fr;gap:20px;}
  .gallery-section{margin-bottom:48px;}
  .gallery-lightbox-prev,.gallery-lightbox-next{width:40px;height:40px;}
  .gallery-lightbox-prev{left:6px;}
  .gallery-lightbox-next{right:6px;}
  .gallery-lightbox{padding:8px;}
  .gallery-lightbox-figure img{max-height:calc(100vh - 90px);}
  .gallery-lightbox-caption{font-size:.92rem;margin-top:12px;}
}