/* ==========================================================================
   KAVACHA SECURITY SOLUTIONS — shared stylesheet
   A Shield of Trust
   ========================================================================== */

:root{
  --teal:#1B6B7B;
  --teal-dark:#0F4F5C;
  --gold:#C9A84C;
  --gold-deep:#B08F38;
  /* Gold is a decorative accent; at text sizes on white it only reaches 3.1:1,
     so labels use this darker mix, which clears WCAG AA at 4.85:1. */
  --gold-text:#8A6E28;
  --navy:#0A1628;
  --navy-soft:#122135;
  --charcoal:#1A1A1A;
  --ink:#16202E;
  --cream:#F5F1E8;
  --offwhite:#FAF8F4;
  --surface-tint:#F6F3EC;
  --white:#FFFFFF;
  --body:#4C545E;
  --muted:#6B7280;
  --line:#E7E3DA;
  --line-strong:#D8D2C5;
  /* Shadows tinted with the brand navy rather than neutral black — reads as
     considered depth instead of a generic drop shadow. */
  --shadow:0 1px 2px rgba(10,22,40,.04),0 4px 16px rgba(10,22,40,.05);
  --shadow-lg:0 2px 4px rgba(10,22,40,.04),0 22px 48px rgba(10,22,40,.11);
  --maxw:1200px;
  --nav-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --f-head:'Cinzel',Georgia,'Times New Roman',serif;
  --f-body:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --f-accent:'Cormorant Garamond',Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.75;
  color:var(--body);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--teal);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--gold-deep)}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--navy);line-height:1.2;font-weight:600}
.serif-accent{font-family:var(--f-accent);font-style:italic}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section--tight{padding:64px 0}
.bg-off{background:var(--offwhite)}
.bg-cream{background:var(--cream)}
.bg-navy{background:var(--navy);color:#C7D0DC}
.bg-navy h1,.bg-navy h2,.bg-navy h3{color:#fff}

.eyebrow{
  font-family:var(--f-body);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  font-weight:600;
  color:var(--gold-text);
  display:block;
  margin-bottom:14px;
}
.bg-navy .eyebrow{color:var(--gold)}
.section-title{
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  letter-spacing:.02em;
  position:relative;
}
.section-head{margin-bottom:44px;max-width:760px}
.section-head .bar,.bar-top{
  width:44px;height:3px;background:var(--gold);border:0;margin:0 0 18px;
}
.lead{font-size:1.075rem;color:var(--body)}
.bg-navy .lead{color:#C7D0DC}
.center{text-align:center}
/* `.center` has to work both as an ancestor and on the element itself. It was
   originally only written as a descendant selector, so `.section-head.center`
   centred its text but kept its left-aligned block position — which is why the
   careers heading sat left of the card beneath it. */
.center .section-head,.section-head.center{margin-left:auto;margin-right:auto}
.center .bar,.section-head.center .bar{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--f-body);font-weight:600;font-size:.95rem;
  letter-spacing:.04em;text-transform:uppercase;
  padding:15px 34px;border-radius:4px;cursor:pointer;
  border:2px solid transparent;transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
  min-height:44px;
}
.btn--primary{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn--primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--navy);transform:scale(1.02);box-shadow:0 10px 26px rgba(201,168,76,.32)}
.btn--ghost{background:transparent;border-color:currentColor;color:var(--navy)}
.btn--ghost:hover{transform:scale(1.02);color:var(--gold-deep)}
.bg-navy .btn--ghost,.hero .btn--ghost{color:#fff}
.bg-navy .btn--ghost:hover,.hero .btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* ---------- navbar ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}

/* The nav must never carry a transform at rest.
   Two reasons, both of which broke the live mobile menu:
     1. A transform on .nav makes it the containing block for its
        position:fixed descendant .nav-links, so the mobile drawer was being
        clipped to the 76px bar instead of filling the viewport. An identity
        transform is enough to trigger this — animation-fill-mode:both left
        one applied permanently.
     2. With fill-mode:both the bar sits at translateY(-100%) until the
        animation runs, so on any load where animations are paused or
        throttled the whole navbar (logo and hamburger) was off-screen.
   The drop-in is therefore opt-in: JS adds .nav--drop only when animation can
   actually run, and removes it on animationend so the resting state is
   transform:none. No JS, no animation, still a perfectly visible nav. */
.nav--drop{animation:navDrop .5s var(--ease) both}
@keyframes navDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* Hard guard: an open menu gets a nav with NO containing-block-creating
   property, so the fixed drawer measures against the viewport.

   This is deliberately the whole family, not just `transform`. Any of
   transform / filter / backdrop-filter / perspective / contain / will-change
   turns an element into the containing block for its position:fixed
   descendants. Guarding only `transform` is what let the scrolled-nav
   backdrop-filter re-break the drawer: at the top of a page the menu worked,
   but once .nav--scrolled applied its blur, the drawer collapsed from the
   viewport height to the 76px bar. Blur is not missed here — the scrim
   already covers the page behind an open menu. */
.nav-open .nav{
  animation:none !important;
  transform:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  perspective:none !important;
  contain:none !important;
  will-change:auto !important;
  /* Opaque while open, since the blur that softened it is gone. */
  background:#fff !important;
}

@media (prefers-reduced-motion:reduce){
  .nav--drop{animation:none}
}
.nav.nav--scrolled{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  box-shadow:0 6px 24px rgba(10,22,40,.09);
  border-bottom-color:var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:34px;height:42px;flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--f-head);font-weight:700;font-size:1.12rem;letter-spacing:.16em;color:var(--navy)}
.brand__tag{font-family:var(--f-body);font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-text);margin-top:4px}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  font-family:var(--f-body);font-weight:500;font-size:.86rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--navy);
  padding:10px 14px;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--teal)}
.nav-cta{margin-left:10px;padding:11px 22px !important;font-size:.8rem}

.nav-toggle{
  display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.nav-toggle span{width:24px;height:2px;background:var(--navy);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-scrim{
  position:fixed;inset:0;background:rgba(10,22,40,.5);opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s var(--ease);z-index:98;
}
.nav-open .nav-scrim{opacity:1;visibility:visible}

main{display:block}
.page-top{padding-top:var(--nav-h)}

/* ---------- intro sequence (homepage, first visit only) ----------
   The brand promise is "a shield of trust", so the opening moment is the shield
   being forged and then taking its post — not a generic logo fade. It runs once
   per session, is skippable, and is skipped entirely under reduced motion.
   `hidden` is the default: no JS, no overlay. */
.intro[hidden]{display:none !important}
.intro{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(58% 58% at 50% 46%,#12283C 0%,transparent 70%),
    linear-gradient(160deg,#0A1628 0%,#08121F 100%);
  opacity:1;transition:opacity .5s var(--ease);
}
.intro.is-clearing{opacity:0}
.intro__mark{
  /* Deliberately larger than the shield's resting size in the hero, so the
     hand-off reads as the mark taking its post rather than a nudge. */
  width:min(70vw,520px);
  transform-origin:center center;
  will-change:transform;
}
.intro__mark svg{width:100%;height:auto;display:block;overflow:visible}
.intro__skip{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--f-body);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(245,241,232,.42);
  padding:12px 20px;min-height:44px;
  opacity:0;animation:introSkipIn .4s var(--ease) 1s forwards;
}
.intro__skip:hover,.intro__skip:focus-visible{color:rgba(245,241,232,.85)}
@keyframes introSkipIn{to{opacity:1}}

/* The forging sequence, applied only while the overlay is running. */
.intro__mark .shield-body{
  stroke-dasharray:var(--dash,470);stroke-dashoffset:var(--dash,470);
  animation:shieldDraw 1.25s cubic-bezier(.65,0,.35,1) .12s forwards;
}
.intro__mark .shield-fill{opacity:0;animation:crestIn .8s var(--ease) .78s forwards}
.intro__mark .shield-crest{opacity:0;animation:crestIn .7s var(--ease) 1.0s forwards}
.intro__glow{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(60vw,460px);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(27,107,123,.5),transparent 72%);
  filter:blur(52px);opacity:0;
  animation:crestIn 1s var(--ease) .5s forwards;
}

/* ---------- hero (home) ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  color:#fff;padding:calc(var(--nav-h) + 40px) 0 150px;
  background:var(--navy);overflow:hidden;
}

/* Layered, no-photo hero field. Depth comes from soft light and concentric
   arcs echoing the shield silhouette — not a tiled grid, which reads as
   generic scaffolding rather than brand. */
.hero__field{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__field::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(52% 48% at 74% 30%,rgba(201,168,76,.16),transparent 62%),
    radial-gradient(40% 40% at 88% 8%,rgba(201,168,76,.09),transparent 60%),
    radial-gradient(58% 66% at 4% 98%,rgba(27,107,123,.34),transparent 62%),
    linear-gradient(158deg,var(--navy) 0%,var(--navy-soft) 52%,#08121F 100%);
}
/* Two real columns. The emblem previously sat in absolute coordinates against
   the full-width hero while the copy was constrained by the centred .wrap, so
   between roughly 1024px and 1350px the two collided. As grid tracks with a
   fluid gap, the separation is structural and cannot collapse. */
.hero .wrap{width:100%}
.hero__layout{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(40px,6vw,104px);
  align-items:center;
}
.hero__emblem{
  position:relative;justify-self:center;
  width:min(100%,392px);z-index:1;
  filter:drop-shadow(0 26px 64px rgba(0,0,0,.45));
}
.hero__emblem-glow{
  position:absolute;inset:-24% -14%;z-index:-1;
  background:radial-gradient(closest-side,rgba(27,107,123,.5),transparent 70%);
  filter:blur(46px);
}
.hero__emblem svg{width:100%;height:auto;display:block;position:relative;overflow:visible}

/* --- Logo entrance: the shield draws itself, the crest fades up inside it,
       then a single sheen crosses the face. One orchestrated moment.

       Resting state is the FULLY VISIBLE logo. The animation only engages once
       JS adds .is-animated, so if scripts are blocked, the tab is throttled, or
       animations are disabled, the mark still renders — it never gets stranded
       at opacity 0 waiting for a frame that may not come. --- */
.hero__emblem .shield-body{stroke-dasharray:var(--dash,470);stroke-dashoffset:0}
.hero__emblem .shield-crest,.hero__emblem .shield-fill{opacity:1}

.hero__emblem.is-animated .shield-body{
  stroke-dashoffset:var(--dash,470);
  animation:shieldDraw 1.5s var(--ease) .25s forwards;
}
.hero__emblem.is-animated .shield-crest{opacity:0;animation:crestIn .9s var(--ease) 1.25s forwards}
.hero__emblem.is-animated .shield-fill{opacity:0;animation:crestIn 1.1s var(--ease) .95s forwards}
@keyframes shieldDraw{to{stroke-dashoffset:0}}
@keyframes crestIn{from{opacity:0}to{opacity:1}}

.hero__sheen{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__emblem.is-animated .hero__sheen::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:42%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.16) 45%,rgba(201,168,76,.22) 55%,transparent);
  transform:skewX(-14deg);
  animation:sheenSweep 1.5s cubic-bezier(.4,0,.2,1) 2.05s 1 both;
}
@keyframes sheenSweep{from{left:-60%}to{left:130%}}



.hero__inner{position:relative;z-index:2;max-width:640px}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  text-transform:uppercase;letter-spacing:.26em;font-size:.74rem;font-weight:600;
  color:var(--gold);margin-bottom:22px;
}
.hero__eyebrow::before{content:"";width:38px;height:2px;background:var(--gold)}
.hero h1{
  color:#fff;font-size:clamp(2.1rem,5.4vw,3.75rem);letter-spacing:-0.015em;
  margin-bottom:22px;
}
.hero h1 .word{display:inline-block}
.hero__sub{
  font-size:clamp(1rem,2vw,1.2rem);line-height:1.7;color:#D7DEE7;
  max-width:560px;margin-bottom:34px;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:16px}

/* Credentials sit under the CTAs as a quiet proof row, rather than as a
   tracked-caps chip stacked above the headline. */
.hero__creds{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:34px;
  padding-top:22px;border-top:1px solid rgba(245,241,232,.14);max-width:560px;
}
.hero__creds li{
  display:flex;align-items:center;gap:9px;
  font-size:.82rem;letter-spacing:.01em;color:#C5CEDA;
}
.hero__creds li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;
}

@media (max-width:1024px){
  .hero__layout{gap:clamp(28px,4vw,56px)}
  .hero__emblem{width:min(100%,272px);opacity:.85}
}
@media (max-width:860px){
  /* Single column: the emblem stops being a sibling of the copy and becomes a
     low-contrast watermark behind it, so the headline keeps the full measure. */
  .hero__layout{grid-template-columns:1fr;gap:0}
  .hero__emblem{
    position:absolute;top:auto;bottom:-4%;right:-14%;
    width:64vw;max-width:340px;opacity:.2;justify-self:end;pointer-events:none;
  }
}

.hero__stats{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:rgba(9,19,33,.82);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid rgba(201,168,76,.34);
}
.hero__stats .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:22px;padding-bottom:22px;
}
.stat{text-align:center;padding:4px 8px;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:rgba(255,255,255,.14)}
.stat__num{font-family:var(--f-head);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.15rem);color:var(--gold);line-height:1}
.stat__label{
  display:block;margin-top:9px;font-size:.75rem;letter-spacing:.13em;
  text-transform:uppercase;color:#C2CBD6;line-height:1.45;
}

/* ---------- page banner (interior pages) ---------- */
.banner{
  position:relative;padding:calc(var(--nav-h) + 66px) 0 66px;color:#fff;
  background:var(--navy);overflow:hidden;
}
/* Photos behind these banners vary wildly in brightness (the careers shot is
   mostly pale uniforms and sunlit foliage), so the scrim has to hold contrast
   for the worst case, not the average one. */
.banner--img::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,17,30,.66),rgba(8,17,30,.78)),
    linear-gradient(90deg,rgba(5,12,22,.97) 0%,rgba(5,12,22,.93) 34%,rgba(8,17,30,.72) 72%,rgba(8,17,30,.6) 100%);
}
/* Second scrim anchored to the text column: the careers and services photos are
   bright enough that a single global overlay still leaves the paragraph fighting
   sunlit uniforms behind it. */
.banner--img::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 100% at 0% 50%,rgba(4,10,20,.72),transparent 62%);
}
.banner--img .banner__bg{filter:saturate(.72) contrast(.92) brightness(.85)}
.banner p{color:#DFE5EC}
.crumbs{color:#AAB4C0}
.crumbs a{color:#CBD4DF}
.banner__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.banner .wrap{position:relative;z-index:2}
.banner h1{color:#fff;font-size:clamp(2rem,4.6vw,3.1rem);margin-bottom:12px}
.banner p{color:#D3DAE3;max-width:620px}
.banner .eyebrow{color:var(--gold)}
.crumbs{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#8C97A5;margin-top:20px}
.crumbs a{color:#B9C2CE}

/* ---------- generic grids ---------- */
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

/* ---------- cards ----------
   Icon sits inline beside the heading rather than in a rounded tile stacked
   above it, and there is no accent stripe: both are template tells that flatten
   hierarchy. Emphasis comes from type and a quiet lift on hover instead. */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:30px 28px;box-shadow:var(--shadow);position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.card__head{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.card__icon{
  width:26px;height:26px;flex:none;color:var(--teal);
  display:flex;align-items:center;justify-content:center;
}
.card__icon svg{width:26px;height:26px}
/* A card can host a page-level h2 (the thank-you confirmation). Size it from
   the type scale rather than leaving it on the browser default, so the step
   above body text is deliberate. */
/* .card__head is a left-aligned flex row, so inside a centred card the
   icon-and-heading pair sat left while the text and button below it centred.
   Centre the row rather than stacking it, so the card still reads like every
   other card on the site. */
.card.center .card__head{justify-content:center}
.card h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.6rem);letter-spacing:.01em;margin-bottom:6px}
.card h3{font-size:1.1rem;letter-spacing:.01em;margin:0}
.card__head h3{margin:0}
.card p{font-size:.95rem}
.card__link{
  display:inline-flex;align-items:center;gap:.45em;margin-top:16px;
  font-family:var(--f-body);font-weight:600;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);
}
.card__link::after{content:"→";transition:transform .2s var(--ease)}
.card:hover .card__link::after{transform:translateX(4px)}

/* icon-only chips */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.chip{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--charcoal);font-weight:500}
.chip svg{width:22px;height:22px;color:var(--teal);flex:none}

/* ---------- why-choose list ----------
   Separated by a hairline rule and the checkmark's own alignment, not by a
   thick coloured tab down the side of every item. */
.reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.reason{padding:20px 0;border-bottom:1px solid var(--line)}
.reason h3{
  font-family:var(--f-body);font-weight:600;font-size:1rem;color:var(--navy);
  display:flex;align-items:center;gap:11px;margin-bottom:6px;letter-spacing:.01em;
}
.reason h3 svg{width:17px;height:17px;color:var(--gold-deep);flex:none}
.reason p{font-size:.92rem;line-height:1.65;padding-left:28px}

/* ---------- industries ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ind{
  display:flex;align-items:center;gap:14px;padding:20px 22px;
  background:var(--white);border:1px solid var(--line);border-radius:8px;
  font-family:var(--f-body);font-weight:500;color:var(--navy);font-size:.98rem;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.ind:hover{border-color:var(--gold);transform:translateY(-2px)}
.ind svg{width:24px;height:24px;color:var(--teal);flex:none}

/* ---------- CTA banner ---------- */
.cta-band{
  background:var(--navy);color:#fff;text-align:center;padding:84px 0;position:relative;
}
.cta-band::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,.7) 50%,transparent);
}
.cta-band h2{color:#fff;font-size:clamp(1.5rem,3.4vw,2.3rem);margin-bottom:12px}
.cta-band p{color:#C7D0DC;max-width:560px;margin:0 auto 26px}
.cta-band .serif-accent{color:var(--gold);font-size:1.15em}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split__media img{border-radius:10px;box-shadow:var(--shadow-lg)}
.split--rev .split__media{order:2}
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.pillar{
  background:var(--surface-tint);border:1px solid var(--line);
  border-radius:10px;padding:30px 30px;
}
.bg-cream .pillar,.bg-off .pillar{background:var(--white)}
.pillar h3{display:flex;align-items:center;gap:12px;font-size:1.15rem;margin-bottom:12px}
.pillar h3 .card__icon{width:24px;height:24px;margin:0;color:var(--teal)}
.pillar h3 .card__icon svg{width:24px;height:24px}
.pillar p{font-size:.95rem}

/* ---------- metrics (light-background figure row) ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.metric{padding:4px 0}
.metric__num{
  display:block;font-family:var(--f-head);font-weight:700;font-size:2.1rem;
  color:var(--teal);line-height:1;letter-spacing:-.01em;
}
.metric__label{
  display:block;margin-top:10px;font-size:.9rem;line-height:1.5;color:var(--body);
}

/* ---------- timeline ---------- */
.timeline{position:relative;margin-top:20px;padding-left:4px}
.timeline::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 34px 44px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:3px;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--white);border:3px solid var(--gold);
}
.tl-year{font-family:var(--f-head);font-weight:700;color:var(--teal);font-size:1.05rem;letter-spacing:.06em}
.tl-item h3{font-family:var(--f-body);font-weight:600;font-size:1.02rem;color:var(--navy);margin:2px 0 6px}
.tl-item p{font-size:.93rem}

/* ---------- compliance badges ---------- */
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.badge{
  text-align:center;padding:32px 20px;background:var(--white);
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.badge:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.badge__icon{
  width:52px;height:52px;margin:0 auto 18px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--surface-tint);
  display:flex;align-items:center;justify-content:center;color:var(--teal);
}
.badge__icon svg{width:24px;height:24px}
.badge strong{display:block;font-family:var(--f-head);font-weight:600;color:var(--navy);font-size:1.05rem;letter-spacing:.04em}
.badge span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- leadership ---------- */
.leader{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
.leader--rev{grid-template-columns:1fr 300px}
.leader--rev .leader__media{order:2}
.leader__media img{border-radius:10px;box-shadow:var(--shadow-lg)}
.leader__role{color:var(--gold-text);text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;font-weight:600;margin:4px 0 16px;font-family:var(--f-body)}
.leader h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.leader__tags{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin-top:18px}
.leader__tags li{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;color:var(--charcoal)}
.leader__tags svg{width:16px;height:16px;color:var(--teal);flex:none;margin-top:4px}

/* ---------- steps / process ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{
  background:var(--white);border:1px solid var(--line);
  border-radius:10px;padding:28px 26px;position:relative;box-shadow:var(--shadow);
}
.step__n{
  font-family:var(--f-head);font-weight:700;font-size:.95rem;color:var(--gold-text);
  letter-spacing:.14em;display:block;margin-bottom:14px;
}
.step__n::after{
  content:"";display:block;width:26px;height:2px;background:var(--gold);
  margin-top:10px;opacity:.75;
}
.step h3{font-family:var(--f-body);font-weight:600;font-size:1.02rem;color:var(--navy);margin-bottom:8px}
.step p{font-size:.9rem}

/* ---------- numbered list (training) ---------- */
.numlist{display:grid;gap:10px}
.numlist li{display:flex;align-items:center;gap:14px;font-size:.96rem;color:var(--charcoal)}
.numlist .n{
  flex:none;width:30px;height:30px;border-radius:7px;background:var(--teal);color:#fff;
  font-family:var(--f-head);font-weight:700;font-size:.82rem;
  display:flex;align-items:center;justify-content:center;
}
.iconlist{display:grid;gap:12px}
.iconlist li{display:flex;align-items:center;gap:13px;font-size:.96rem;color:var(--charcoal)}
.iconlist svg{width:20px;height:20px;color:var(--teal);flex:none}

/* ---------- gallery ---------- */
.gal-group{margin-bottom:52px}
.gal-group:last-child{margin-bottom:0}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal-grid figure{
  position:relative;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:4/3;background:var(--cream);
}
.gal-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal-grid figure:hover img{transform:scale(1.05)}
.gal-grid figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;
  font-size:.82rem;color:#fff;letter-spacing:.02em;
  background:linear-gradient(transparent,rgba(10,22,40,.82));
}
.gal-grid figure.tall{aspect-ratio:3/4}

/* ---------- forms ---------- */
.form-card{
  background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:38px;box-shadow:var(--shadow-lg);
}
.field{margin-bottom:20px}
.field label{
  display:block;font-family:var(--f-body);font-weight:600;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--navy);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:.98rem;color:var(--charcoal);
  padding:13px 15px;border:1px solid #D6D3CB;border-radius:6px;background:var(--offwhite);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(27,107,123,.14);background:#fff;
}
.field textarea{min-height:140px;resize:vertical}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-note{font-size:.82rem;color:var(--muted);margin-top:6px}
.form-status{margin-top:16px;padding:14px 16px;border-radius:6px;font-size:.9rem;display:none}
.form-status.is-ok{display:block;background:rgba(27,107,123,.1);color:var(--teal-dark);border:1px solid rgba(27,107,123,.3)}
.form-status.is-err{display:block;background:#fdecec;color:#a12b2b;border:1px solid #f2c2c2}

/* ---------- contact info ---------- */
.info-list{display:grid;gap:22px}
.info-row{display:flex;gap:16px;align-items:flex-start}
.info-row .card__icon{width:22px;height:22px;margin:3px 0 0;flex:none;color:var(--teal)}
.info-row .card__icon svg{width:22px;height:22px}
.info-row h3{font-family:var(--f-body);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:4px}
.info-row p,.info-row a{font-size:1rem;color:var(--charcoal);line-height:1.6}
.map-embed{margin-top:26px;border-radius:10px;overflow:hidden;box-shadow:var(--shadow);line-height:0}
.map-embed iframe{width:100%;height:340px;border:0;filter:grayscale(.2)}

/* ---------- careers extras ---------- */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.benefit{padding:28px 26px;background:var(--white);border:1px solid var(--line);border-radius:10px}
.benefit .card__head{margin-bottom:12px}
.benefit h3{font-family:var(--f-body);font-weight:600;font-size:1.02rem;margin:0}
.benefit p{font-size:.92rem}

/* ---------- footer ---------- */
.footer{background:var(--navy);color:#9aa6b4;padding:64px 0 0;position:relative}
.footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,.55) 50%,transparent);
}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.footer h3{
  font-family:var(--f-body);font-weight:600;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin-bottom:18px;
}
.footer a{color:#9aa6b4;font-size:.92rem;line-height:2}
.footer a:hover{color:var(--gold)}
.footer__brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.footer__brand .brand__mark{width:34px;height:42px}
.footer__brand .brand__name{color:#fff;font-family:var(--f-head);font-weight:700;letter-spacing:.14em;font-size:1.05rem}
.footer__about{font-size:.9rem;line-height:1.7;max-width:320px}
/* Currently unused: the LinkedIn/WhatsApp footer buttons were removed at the
   client's request. Rules kept so restoring them is a markup-only change. */
.footer__social{display:flex;gap:12px;margin-top:18px}
.footer__social a{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:#9aa6b4;
}
.footer__social a:hover{border-color:var(--gold);color:var(--gold)}
.footer__social svg{width:17px;height:17px}
.footer__bar{
  margin-top:48px;border-top:1px solid rgba(255,255,255,.1);padding:20px 0;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:.8rem;letter-spacing:.03em;color:#7f8b99;
}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-in{opacity:1 !important;transform:none !important;transition:none}
  .nav{animation:none}
  *{scroll-behavior:auto !important}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .leader,.leader--rev{grid-template-columns:1fr}
  .leader--rev .leader__media{order:0}
  .leader__media{max-width:340px}
}
@media (max-width:900px){
  .nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed;top:0;right:0;bottom:0;width:min(80vw,320px);z-index:99;
    background:#fff;flex-direction:column;align-items:stretch;gap:0;
    padding:calc(var(--nav-h) + 12px) 22px 30px;
    transform:translateX(100%);transition:transform .34s var(--ease);
    box-shadow:-20px 0 50px rgba(10,22,40,.16);
  }
  .nav-open .nav-links{transform:translateX(0)}
  .nav-links a{padding:15px 6px;border-bottom:1px solid var(--line);font-size:.9rem}
  .nav-links a::after{display:none}
  .nav-links a[aria-current="page"]{color:var(--teal);font-weight:600}
  /* The quote CTA has no room beside the hamburger in the collapsed bar, but
     it is the primary action a mobile visitor wants — so it reappears inside
     the drawer, where there is space for it. */
  .nav-links .nav-cta{
    display:inline-flex;margin-top:24px;border-bottom:0;
    padding:15px 26px !important;font-size:.85rem;justify-content:center;
  }
  .nav-links .nav-cta[aria-current="page"]{color:var(--navy)}
  .split,.split--rev{grid-template-columns:1fr;gap:32px}
  .split--rev .split__media{order:0}
  .grid--3,.grid--4,.steps,.badge-grid,.ind-grid,.benefits,.metrics{grid-template-columns:1fr 1fr}
  .reasons,.mission-grid,.leader__tags,.chips{grid-template-columns:1fr 1fr}
  .gal-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  /* Touch targets: "Learn more" and the tel:/mailto: links are real tap
     destinations (the phone number is the primary conversion action on this
     site), so they get a 44px target on touch layouts rather than sitting at
     their 20px text height. */
  .card__link{padding:11px 0;min-height:44px}
  .info-row p a,.info-row a{display:inline-block;padding:10px 0;min-height:44px;line-height:24px}
  .form-note a{display:inline-block;padding:8px 0;min-height:40px}
}

@media (max-width:640px){
  .section{padding:52px 0}
  .wrap{padding:0 18px}
  .hero{display:block;min-height:auto;padding:calc(var(--nav-h) + 32px) 0 0}
  .hero__inner{margin-bottom:36px}
  .hero__stats{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--navy)}
  .hero__stats .wrap{grid-template-columns:1fr 1fr;gap:22px 10px;padding-top:26px;padding-bottom:26px}
  .stat:nth-child(3)::before,.stat:nth-child(2n+1)::before{display:none}
  .grid--2,.grid--3,.grid--4,.steps,.badge-grid,.ind-grid,.benefits,
  .reasons,.mission-grid,.leader__tags,.chips,.field--row,.gal-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr;gap:26px}
  .footer__grid{grid-template-columns:1fr}
  .form-card{padding:26px 20px}
  .btn{width:100%}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
  .opening{flex-direction:column;align-items:flex-start}
  .footer__bar{flex-direction:column}
}
@media (max-width:380px){
  .brand__tag{display:none}
}

/* ---------- print ---------- */
@media print{
  .nav,.nav-scrim,.hero__stats,.cta-band,.footer__social,.map-embed,.nav-toggle{display:none !important}
  .hero,.banner{min-height:auto;color:#000;background:#fff !important;padding:20px 0}
  .hero::before,.banner::before{display:none}
  .hero h1,.hero__sub,.banner h1,.banner p{color:#000}
  .reveal{opacity:1 !important;transform:none !important}
  *{box-shadow:none !important}
  a{color:#000;text-decoration:underline}
}

/* Honeypot field: removed from view and from the accessibility tree, but still
   submitted. Bots fill it, people never see it, Netlify drops those entries. */
.is-hidden{
  position:absolute !important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}