/* ══════════════════════════════════════════════════════════════
   PRAXON SECURITY — Figma "Praxon - Desktop" (node 1:2)
   Mobile-first. Design values are exact at ≥1440px viewport.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. FONTS ────────────────────────────────────────────────── */
@font-face{font-family:Gilroy;src:url(fonts/Gilroy-Light.woff2)   format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url(fonts/Gilroy-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url(fonts/Gilroy-Medium.woff2)  format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url(fonts/Gilroy-Bold.woff2)    format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ── 2. TOKENS ───────────────────────────────────────────────── */
:root{
  /* colour — the design uses exactly two brand colours */
  --navy:#344465;
  --gold:#cfac4e;
  --white:#fff;
  --rule:rgba(52,68,101,.4);      /* hairline on light */
  --rule-dark:rgba(255,255,255,.4);/* hairline on navy  */
  --navy-rgb:52,68,101;           /* for the hero scrim's many alpha stops */

  /* fluid ramp: min at 360px, max locked from 1440px up */
  --f:calc((100vw - 360px) / 1080);

  --fs-display-xl:clamp(36px, 36px + 32 * var(--f), 68px);
  --fs-display-l :clamp(32px, 32px + 24 * var(--f), 56px);
  --fs-display-m :clamp(24px, 24px +  8 * var(--f), 32px);
  --fs-stat      :clamp(64px, 64px + 76 * var(--f), 140px);
  --fs-lead      :clamp(22px, 22px +  8 * var(--f), 30px);
  --fs-hero-sub  :clamp(18px, 18px +  6 * var(--f), 24px);
  --fs-card      :clamp(20px, 20px +  4 * var(--f), 24px);
  --fs-body-m    :clamp(16px, 16px +  2 * var(--f), 18px);
  --fs-eyebrow   :clamp(16px, 16px +  2 * var(--f), 18px);
  --fs-body-s    :clamp(15px, 15px +  1 * var(--f), 16px);

  /* line-heights, unitless so they track the fluid size */
  --lh-display-xl:1.044;  /* 71/68  */
  --lh-display-l :1.196;  /* 67/56  */
  --lh-display-m :1.3125; /* 42/32  */
  --lh-lead      :1.2;    /* 36/30  */
  --lh-body      :1.556;  /* 28/18  */
  --lh-eyebrow   :1.389;  /* 25/18  */
  --lh-body-s    :1.625;  /* 26/16  */

  /* layout */
  --container:1800px;
  --gutter:20px;
  --section-y:64px;
  --card-gap:16px;

  /* one control height for every button and input on the page */
  --control-h:49px;
  --control-px:20px;

  --r-sm:4px;   /* buttons  */
  --r-md:6px;   /* chips / carousel buttons */
  --r-lg:8px;   /* cards    */
}
@media (min-width:768px){ :root{ --gutter:40px; --section-y:88px; --card-gap:20px } }
@media (min-width:1240px){ :root{ --gutter:60px; --section-y:120px } }

/* ── 3. RESET / BASE ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  margin:0;
  font-family:Gilroy,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:var(--fs-body-m);
  line-height:var(--lh-body);
  color:var(--navy);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}

:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--gold);color:var(--white)}
.skip-link:focus{left:0}

/* ── 4. LAYOUT PRIMITIVES ────────────────────────────────────── */
.container{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tail{padding-block:0 var(--section-y)}       /* rule does the top edge */
.rule-top{border-top:1px solid var(--rule);padding-top:40px}

/* ── 5. TYPE ─────────────────────────────────────────────────── */
.display-xl{font-weight:300;font-size:var(--fs-display-xl);line-height:var(--lh-display-xl);letter-spacing:-.01em}
.display-l {font-weight:300;font-size:var(--fs-display-l); line-height:var(--lh-display-l)}
.lead      {font-weight:400;font-size:var(--fs-lead);      line-height:var(--lh-lead)}
.body-m    {font-weight:400;font-size:var(--fs-body-m);    line-height:var(--lh-body)}
.accent{color:var(--gold)}

.eyebrow{
  font-weight:700;
  font-size:var(--fs-eyebrow);
  line-height:var(--lh-eyebrow);
  color:var(--gold);
}
.eyebrow--on-dark{color:var(--white)}

/* ── 6. BUTTONS & LINK-CTAS ──────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:var(--control-h);
  padding:0 var(--control-px);
  border-radius:var(--r-sm);
  font-weight:500;font-size:16px;line-height:1.2;
  text-transform:uppercase;
  color:var(--white);
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn--primary{background:var(--gold)}
.btn--primary:hover{background:#bd9a3d}
.btn--ghost{border:2px solid var(--white);background:transparent}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn:active{transform:translateY(1px)}
.btn__icon{flex:none;width:13px;height:10px}

.link-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:16px;line-height:1.625;
  text-transform:uppercase;color:var(--navy);
}
.link-cta__icon{flex:none;width:13px;height:10px;transition:transform .18s ease}
.link-cta:hover .link-cta__icon{transform:translateX(4px)}

/* ── 7. NAV ──────────────────────────────────────────────────── */
.nav{background:var(--navy);border-bottom:1px solid var(--white);position:relative;z-index:50}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:15px}
.nav__logo img{width:140px;height:auto}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a{font-weight:700;font-size:16px;line-height:1;color:var(--white)}
.nav__links a:hover{color:var(--gold)}

.nav__toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-right:-10px;padding:0 10px}
.nav__bar{display:block;height:2px;background:var(--white);transition:transform .22s ease,opacity .22s ease}
.nav__toggle[aria-expanded="true"] .nav__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__bar:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] .nav__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.nav__menu{
  position:absolute;left:0;right:0;top:100%;
  display:grid;gap:8px;
  padding:8px var(--gutter) 28px;
  background:var(--navy);
  border-bottom:1px solid var(--white);
  transform:scaleY(0);transform-origin:top;opacity:0;visibility:hidden;
  transition:transform .24s ease,opacity .18s ease,visibility .24s;
}
.nav__menu.is-open{transform:scaleY(1);opacity:1;visibility:visible}
.nav__links{flex-direction:column;align-items:stretch;gap:0}
.nav__links a{display:block;padding:14px 0;border-bottom:1px solid var(--rule-dark)}
.nav__cta{margin-top:20px}

@media (min-width:1024px){
  .nav__toggle{display:none}
  .nav__menu{
    position:static;display:flex;align-items:center;gap:26px;
    padding:0;background:none;border:0;
    transform:none;opacity:1;visibility:visible;
  }
  .nav__links{flex-direction:row;align-items:center;gap:26px}
  .nav__links a{padding:0;border:0}
  .nav__cta{margin-top:0}
  .nav__logo img{width:185px}
}

/* ── 8. HERO ─────────────────────────────────────────────────── */
.hero{position:relative;display:flex;align-items:flex-end;min-height:min(86svh,860px);isolation:isolate;overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;border:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
/* Readability ramp behind the copy.
   Two eased layers over a base tint: a vertical weight that pools where the
   text sits, and (on desktop) a horizontal ramp behind the left column. Many
   stops so the falloff reads as light rather than as a band with an edge.
   The open side lands at ~.30, near the Figma's flat scrim. */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,
      rgba(52,68,101,.93) 0%,
      rgba(52,68,101,.91) 12%,
      rgba(52,68,101,.87) 24%,
      rgba(52,68,101,.81) 36%,
      rgba(52,68,101,.73) 48%,
      rgba(52,68,101,.61) 60%,
      rgba(52,68,101,.45) 72%,
      rgba(52,68,101,.27) 84%,
      rgba(52,68,101,.12) 94%,
      rgba(52,68,101,.05) 100%),
    rgba(52,68,101,.28);
}
@media (min-width:1024px){
  .hero__scrim{
    background:
      linear-gradient(to right,
        rgba(52,68,101,.86) 0%,
        rgba(52,68,101,.84) 14%,
        rgba(52,68,101,.81) 26%,
        rgba(52,68,101,.75) 38%,
        rgba(52,68,101,.67) 48%,
        rgba(52,68,101,.56) 57%,
        rgba(52,68,101,.42) 66%,
        rgba(52,68,101,.26) 75%,
        rgba(52,68,101,.13) 84%,
        rgba(52,68,101,.04) 92%,
        rgba(52,68,101,0) 100%),
      linear-gradient(to top,
        rgba(52,68,101,.64) 0%,
        rgba(52,68,101,.60) 14%,
        rgba(52,68,101,.53) 28%,
        rgba(52,68,101,.42) 42%,
        rgba(52,68,101,.28) 56%,
        rgba(52,68,101,.14) 72%,
        rgba(52,68,101,.05) 88%,
        rgba(52,68,101,0) 100%),
      rgba(52,68,101,.28);
  }
}
.hero__inner{display:flex;flex-direction:column;gap:40px;padding-block:56px}
.hero__copy{display:flex;flex-direction:column;gap:20px;max-width:788px;color:var(--white)}
.hero__sub{font-weight:400;font-size:var(--fs-hero-sub);line-height:1.458}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px}

@media (min-width:768px){
  .hero__inner{gap:50px;padding-block:80px}
  .hero__actions{gap:20px}
}

/* ── 9. TRUST BAR ────────────────────────────────────────────── */
.trust{padding-top:40px}
.trust__grid{display:grid;gap:0 25px;grid-template-columns:1fr}
.trust__item{display:flex;flex-direction:column;gap:8px;padding-bottom:32px;border-bottom:1px solid var(--rule)}
.trust__item + .trust__item{padding-top:32px}
.trust__title{font-weight:300;font-size:var(--fs-display-m);line-height:1.2}
.trust__text{font-weight:500;font-size:var(--fs-body-m);line-height:1.4}

@media (min-width:680px){
  .trust__grid{grid-template-columns:repeat(2,1fr);gap:0 40px}
  .trust__item{padding-top:0!important;padding-bottom:32px}
  .trust__item:nth-child(n+3){padding-top:32px!important}
}
@media (min-width:1280px){
  .trust{padding-top:60px}
  .trust__grid{grid-template-columns:repeat(5,1fr);gap:0 25px}
  .trust__item{padding-bottom:40px}
  .trust__item:nth-child(n+3){padding-top:0!important}
}

/* ── 10. SERVICES ────────────────────────────────────────────── */
.services__inner{display:flex;flex-direction:column;gap:32px}
.services__head{display:flex;flex-direction:column;gap:40px}
.services__intro{display:flex;flex-direction:column;gap:20px;flex:none}
.services__intro .link-cta{margin-top:20px}

.services__rail{
  display:flex;gap:var(--card-gap);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* bleed off the right edge of the viewport, exactly as designed */
  margin-right:calc(-1 * var(--gutter));
  padding-right:var(--gutter);
}
.services__rail::-webkit-scrollbar{display:none}

.scard{
  position:relative;flex:0 0 min(85%,523px);
  display:flex;align-items:flex-end;
  height:clamp(360px,52vw,450px);
  padding:20px;border-radius:var(--r-lg);overflow:hidden;
  scroll-snap-align:start;isolation:isolate;
}
.scard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.scard__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(52,68,101,0) 55.769%,var(--navy) 100%)}
.scard__title{font-weight:300;font-size:var(--fs-card);line-height:1.2;color:var(--white)}

.services__nav{display:flex;justify-content:flex-end;gap:20px}
.cbtn{display:grid;place-items:center;width:35px;height:35px;border-radius:var(--r-md);transition:opacity .18s ease}
.cbtn:hover{opacity:.8}
/* the design draws both states of this control — solid gold live, 50% at the end of the rail */
.cbtn:disabled{opacity:.5;cursor:default}
.cbtn img{width:35px;height:35px}
.cbtn[data-dir="1"] img{transform:rotate(180deg)}

/* side-by-side only once the rail can show a whole 523px card */
@media (min-width:1400px){
  .services__inner{gap:40px}
  .services__head{flex-direction:row;align-items:flex-start;gap:70px}
  .services__intro{flex:0 0 575px;gap:20px}
  .services__rail{flex:1 1 auto;min-width:0}
  .scard{flex:0 0 523px;height:450px}
}

/* ── 11. TRACK RECORD ────────────────────────────────────────── */
.record__head{display:flex;flex-direction:column;gap:32px}
.record__intro{display:flex;flex-direction:column;gap:20px;max-width:528px}
.record__aside{display:flex;flex-direction:column;gap:20px;max-width:463px}

.stats{display:grid;grid-template-columns:1fr;gap:32px;margin-top:56px}
.stat{border-left:1px solid var(--rule);padding-left:24px}
.stat__num{font-weight:300;font-size:var(--fs-stat);line-height:1;color:var(--gold)}
.stat__label{font-weight:400;font-size:var(--fs-hero-sub);line-height:1.417}

@media (min-width:900px){
  .record__head{flex-direction:row;align-items:center;justify-content:space-between;gap:60px}
  .stats{grid-template-columns:repeat(3,1fr);gap:40px;margin-top:80px}
  .stat{padding-left:40px}
}

/* ── 12. TESTIMONIAL ─────────────────────────────────────────── */
.quote{display:grid;grid-template-columns:1fr}
.quote__panel{background:var(--navy);display:flex;align-items:center}
.quote__inner{display:flex;flex-direction:column;gap:40px;width:100%;
  max-width:calc(784px + var(--gutter) * 2);
  margin-inline:0;padding:var(--section-y) var(--gutter)}
.quote__head{display:flex;flex-direction:column;gap:20px}
.quote__title{color:var(--white)}
.quote__figure{display:flex;flex-direction:column;gap:26px}
.quote__logo{width:71px;height:70px}
.quote__text{font-weight:400;font-size:var(--fs-body-m);line-height:var(--lh-body);color:var(--white)}
.quote__by{display:flex;flex-direction:column;gap:3px;font-size:16px;line-height:1.25;color:var(--white)}
.quote__name{font-weight:700}
.quote__role{font-weight:400}
.quote__img{width:100%;height:clamp(260px,60vw,625px);object-fit:cover}

@media (min-width:1024px){
  .quote{grid-template-columns:1fr 1fr;align-items:stretch}
  .quote__inner{padding-block:60px}
  .quote__title{max-width:441px}
  .quote__img{height:100%;min-height:625px}
}

/* ── 13. SERVICE AREAS ───────────────────────────────────────── */
.areas__inner{display:flex;flex-direction:column;gap:40px}
.areas__copy{display:flex;flex-direction:column;align-items:flex-start;gap:40px;max-width:629px}
.areas__head{display:flex;flex-direction:column;gap:20px}

.areas__list{display:flex;flex-wrap:wrap;align-content:center;gap:16px 20px}
.areas__chip{display:flex;align-items:center;gap:10px;
  padding:6px 10px;margin:-6px -10px;border-radius:var(--r-md);
  font-weight:400;font-size:var(--fs-body-m);line-height:1.2;color:var(--navy);
  transition:background-color .2s ease,color .2s ease}
.areas__chip img{flex:none;width:20px;height:25px}
.areas__chip:hover{background:rgba(207,172,78,.16)}
.areas__chip[aria-pressed="true"]{background:var(--gold);color:var(--white)}
.areas__chip[aria-pressed="true"] img{filter:brightness(0) invert(1)}

.areas__map{position:relative;width:100%;aspect-ratio:1171/860}
.areas__dots{position:absolute;left:3.24%;top:4.3%;width:96.76%;height:87.67%;object-fit:contain}

/* ── interactive Ontario map ─────────────────────────────── */
.omap{position:absolute;left:50%;top:0;height:100%;width:74.04%;transform:translateX(-50%);overflow:visible}
.omap__land path{
  fill:var(--navy);stroke:var(--white);stroke-width:.6;cursor:pointer;
  transition:fill .3s ease,opacity .3s ease;
}
/* gold on navy carries the highlight — the rest only steps back a shade */
.omap[data-lit] .omap__land path{fill:#3c4c72}
.omap[data-lit] .omap__land path.is-lit{fill:var(--gold)}

.omap__halo{opacity:0;transition:opacity .35s ease;pointer-events:none}
.omap__halo.is-on{opacity:1}

.omap__pin{cursor:pointer}
.omap__pinInner{transform-box:fill-box;transform-origin:50% 100%;
  transition:transform .3s cubic-bezier(.34,1.4,.5,1)}
.omap__pinShape,.omap__pinDot{fill:none;stroke:var(--gold);stroke-width:1.5;
  transition:fill .3s ease,stroke .3s ease}
.omap__pinHit{fill:transparent;stroke:none}
.omap[data-lit] .omap__pin{opacity:.45;transition:opacity .3s ease}
.omap[data-lit] .omap__pin.is-lit{opacity:1}
.omap__pin.is-lit .omap__pinInner{transform:scale(1.5)}
.omap__pin.is-lit .omap__pinShape{fill:var(--gold)}
.omap__pin.is-lit .omap__pinDot{stroke:var(--white)}

.omap__label{
  position:absolute;z-index:2;transform:translate(-50%,-100%);
  padding:8px 14px;border-radius:var(--r-md);
  background:var(--navy);color:var(--white);
  font-weight:500;font-size:16px;line-height:1.25;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .22s ease;
}
.omap__label::after{content:"";position:absolute;left:50%;top:100%;
  width:0;height:0;margin-left:-5px;border:5px solid transparent;border-top-color:var(--navy)}
.omap__label.is-on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .omap__pinInner{transition:none}
}

/* copy holds its designed 629px; the map takes the rest — exactly 1171px at a 1800 container */
@media (min-width:1240px){
  .areas__inner{flex-direction:row;align-items:center;gap:0}
  .areas__copy{flex:0 1 629px;gap:60px}
  .areas__map{flex:1 1 0;min-width:0;max-width:1171px}
}

/* ── 14. APPROACH ────────────────────────────────────────────── */
.approach__head{display:flex;flex-direction:column;gap:32px}
.approach__intro{display:flex;flex-direction:column;gap:20px;max-width:784px}
.approach__aside{display:flex;flex-direction:column;gap:20px;max-width:739px}

.approach__grid{display:grid;grid-template-columns:1fr;gap:40px var(--card-gap);margin-top:56px}
.acard{display:flex;flex-direction:column;border-left:1px solid var(--rule);padding-left:16px}
.acard__img{width:100%;height:clamp(220px,42vw,300px);object-fit:cover;border-radius:var(--r-lg);margin-bottom:32px}
.acard__num{font-weight:700;font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);color:var(--gold)}
.acard__title{font-weight:300;font-size:var(--fs-display-m);line-height:var(--lh-display-m);margin-top:10px}
.acard__text{font-weight:500;font-size:var(--fs-body-m);line-height:var(--lh-body);margin-top:10px}

@media (min-width:680px){ .approach__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1240px){
  .approach__head{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:60px}
  .approach__grid{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:80px}
  .acard__img{height:300px}
}

/* ── 15. CTA ─────────────────────────────────────────────────── */
.cta{background:var(--navy);border-bottom:1px solid var(--white);padding-block:var(--section-y)}
.cta__inner{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;
  width:100%;max-width:calc(826px + var(--gutter) * 2);
  margin-inline:auto;padding-inline:var(--gutter);color:var(--white)}
.cta__text{font-weight:400;font-size:var(--fs-body-m);line-height:var(--lh-body)}
.cta .btn{margin-top:20px}

/* ── 16. NEWSLETTER ──────────────────────────────────────────── */
.news{background:var(--navy);border-bottom:1px solid var(--white);padding-block:40px;color:var(--white)}
.news__inner{display:flex;flex-direction:column;gap:28px}
.news__copy{display:flex;flex-direction:column;gap:8px;max-width:382px}
.news__title{font-weight:300;font-size:var(--fs-display-m);line-height:var(--lh-display-m)}
.news__text{font-weight:500;font-size:var(--fs-body-m);line-height:var(--lh-body)}

.news__form{display:flex;flex-wrap:wrap;gap:14px}
.news__input{
  flex:1 1 260px;min-width:0;height:var(--control-h);
  padding:0 var(--control-px);
  background:transparent;color:var(--white);
  border:1px solid var(--white);border-radius:var(--r-sm);
  font-size:16px;line-height:1.625;
}
.news__input::placeholder{color:rgba(255,255,255,.7)}
.news__submit{flex:none}

@media (min-width:900px){
  .news{padding-block:60px}
  .news__inner{flex-direction:row;align-items:center;justify-content:space-between;gap:40px}
  .news__form{flex-wrap:nowrap}
  .news__input{flex:0 0 350px;width:350px}
}

/* ── 17. FOOTER ──────────────────────────────────────────────── */
.footer{background:var(--navy);color:var(--white);padding-block:48px}
.footer__inner{display:flex;flex-direction:column;gap:40px}
.footer__brand{display:flex;flex-direction:column;gap:20px;max-width:377px}
.footer__logo{width:185px;height:40px}
.footer__blurb{font-weight:400;font-size:16px;line-height:1.625}
.footer__social{margin-top:20px}
.footer__social img{width:159px;height:25px}

.footer__col{display:flex;flex-direction:column;gap:15px;max-width:382px}
.footer__heading{font-weight:300;font-size:var(--fs-display-m);line-height:var(--lh-display-m)}
.footer__list{display:flex;flex-direction:column;gap:8px}
.footer__list a{font-weight:500;font-size:var(--fs-body-m);line-height:var(--lh-body)}
.footer__list a:hover{color:var(--gold)}

@media (min-width:768px){ .footer__inner{flex-direction:row;flex-wrap:wrap;gap:48px 60px} }
@media (min-width:1240px){ .footer{padding-block:60px} }
/* three across only once 377 + 382 + 382 + two 110px gaps genuinely fits */
@media (min-width:1500px){
  .footer__inner{flex-wrap:nowrap;gap:110px;align-items:flex-start}
  .footer__brand{flex:0 1 377px}
  .footer__col{flex:0 1 382px;min-width:0}
}

/* ── 18. LEGAL BAR ───────────────────────────────────────────── */
.legal{background:var(--navy);border-top:1px solid var(--white);padding-block:25px;color:var(--white)}
.legal__inner{text-align:center;font-weight:500;font-size:var(--fs-body-m);line-height:var(--lh-body)}
.legal a:hover{color:var(--gold)}

/* ════════════════════════════════════════════════════════════════
   19. EXPANSION — services pages, careers, compliance, contact
   Everything below is additive; nothing above was changed.
   ════════════════════════════════════════════════════════════════ */

/* ── 19.1 Nav: services mega-menu ─────────────────────────────── */
.nav__item{position:relative}
.nav__dropbtn{
  position:absolute;right:0;top:0;width:48px;height:100%;
  display:grid;place-items:center;
}
.nav__dropbtn::after{
  content:"";width:9px;height:9px;margin-top:-3px;
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);
  transform:rotate(45deg);transition:transform .22s ease;
}
.nav__dropbtn[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:3px}

.drop{display:none}
.drop.is-open{display:block}
.drop__inner{display:grid;gap:22px;padding-block:8px 20px}
.drop__heading{
  font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.drop__list{display:flex;flex-direction:column;gap:0}
.drop__list a{
  display:block;padding:9px 0;font-weight:500;font-size:15px;line-height:1.35;
  color:var(--white);border-bottom:1px solid rgba(255,255,255,.14);
}
.drop__list a:hover{color:var(--gold)}
.drop__foot{padding-bottom:18px}

@media (min-width:1024px){
  .nav__links{gap:20px}
  .nav__links a{font-size:15px}
  .nav__dropbtn{display:none}
  /* the panel spans the whole header, so it must resolve against .nav —
     a positioned <li> would size it to the width of the word "Services" */
  .nav__item{position:static}
  .nav__item--drop > .nav__droplink::after{
    content:"";display:inline-block;vertical-align:middle;
    width:6px;height:6px;margin:-3px 0 0 7px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);
  }
  /* the panel is full-bleed under the whole header */
  .drop{
    display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--navy);border-top:1px solid rgba(255,255,255,.25);
    border-bottom:1px solid var(--white);
    box-shadow:0 24px 48px rgba(0,0,0,.28);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  .nav__item--drop:hover .drop,
  .nav__item--drop:focus-within .drop,
  .drop.is-open{opacity:1;visibility:visible;transform:none}
  .drop__inner{grid-template-columns:repeat(3,1fr);gap:28px 40px;padding-block:36px 28px}
  .drop__foot{
    padding-bottom:28px;border-top:1px solid rgba(255,255,255,.2);padding-top:20px;
  }
  .drop__list a{border-bottom:0;padding:6px 0;font-size:15px}
}
@media (min-width:1240px){
  .nav__links{gap:26px}
  .nav__links a{font-size:16px}
  .drop__inner{grid-template-columns:repeat(6,1fr);gap:32px}
}

/* ── 19.2 Breadcrumb ──────────────────────────────────────────── */
.crumb{padding-top:20px}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-weight:500;font-size:14px;line-height:1.5;color:rgba(52,68,101,.7)}
.crumb li + li::before{content:"/";margin-right:8px;color:rgba(52,68,101,.4)}
.crumb a:hover{color:var(--gold)}
.crumb [aria-current]{color:var(--navy)}

/* ── 19.3 Page hero (split: navy copy | photograph) ───────────── */
.phero{display:grid;grid-template-columns:1fr;background:var(--navy);color:var(--white)}
.phero__copy{display:flex;align-items:center;order:2}
.phero__copyInner{
  display:flex;flex-direction:column;gap:20px;
  width:100%;padding:40px var(--gutter) 48px;
}
.phero__lede{font-weight:400;font-size:var(--fs-hero-sub);line-height:1.458;max-width:56ch}
.phero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.phero__img{order:1;width:100%;height:clamp(240px,52vw,420px);object-fit:cover}

@media (min-width:900px){
  .phero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .phero__copy{order:1}
  .phero__copyInner{
    max-width:calc((var(--container) / 2) + var(--gutter));
    margin-left:auto;padding:56px 48px 56px var(--gutter);
  }
  .phero__img{order:2;height:100%;min-height:440px}
}
@media (min-width:1240px){
  .phero__copyInner{padding:80px 72px 80px var(--gutter)}
  .phero__img{min-height:540px}
}

/* ── 19.4 Prose block ─────────────────────────────────────────── */
.prose{display:flex;flex-direction:column;gap:24px}
.prose__lead{display:flex;flex-direction:column;gap:12px;flex:none}
.prose__body{display:flex;flex-direction:column;gap:20px;max-width:78ch}
.display-m{font-weight:300;font-size:var(--fs-display-m);line-height:var(--lh-display-m)}
@media (min-width:1024px){
  .prose{flex-direction:row;gap:80px}
  .prose__lead{width:300px}
}

/* ── 19.5 Section heading ─────────────────────────────────────── */
.sechead{display:flex;flex-direction:column;gap:16px;max-width:820px}
.sechead__text{max-width:70ch}

/* ── 19.6 "What's included" grid ──────────────────────────────── */
.incl{display:grid;grid-template-columns:1fr;gap:32px 24px;margin-top:48px}
.incl__item{border-top:1px solid var(--rule);padding-top:20px}
.incl__num{font-weight:700;font-size:14px;line-height:1.4;letter-spacing:.06em;color:var(--gold)}
.incl__title{font-weight:500;font-size:var(--fs-body-m);line-height:1.4;margin-top:10px}
.incl__text{font-weight:400;font-size:var(--fs-body-s);line-height:var(--lh-body-s);
  margin-top:8px;color:rgba(52,68,101,.85)}
@media (min-width:680px){ .incl{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1240px){ .incl{grid-template-columns:repeat(4,1fr);gap:40px 24px} }

/* ── 19.7 "Where we deploy" ───────────────────────────────────── */
.where{background:var(--navy);color:var(--white);padding-block:var(--section-y)}
.where__inner{display:flex;flex-direction:column;gap:40px}
.where__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:600px}
.where__copy .btn{margin-top:12px}
.where__list{display:grid;grid-template-columns:1fr;gap:0;flex:1 1 0;min-width:0}
.where__list li{
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.22);
  font-weight:400;font-size:var(--fs-body-m);line-height:1.4;
}
.where__list li:first-child{border-top:1px solid rgba(255,255,255,.22)}
@media (min-width:680px){
  .where__list{grid-template-columns:repeat(2,1fr);column-gap:40px}
  .where__list li:nth-child(2){border-top:1px solid rgba(255,255,255,.22)}
}
@media (min-width:1024px){
  .where__inner{flex-direction:row;gap:80px;align-items:flex-start}
}

/* ── 19.8 Service cards grid ──────────────────────────────────── */
.sgrid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:48px}
@media (min-width:600px){ .sgrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .sgrid{grid-template-columns:repeat(4,1fr)} .sgrid--3{grid-template-columns:repeat(3,1fr)} }

.scard2{display:flex;flex-direction:column;height:100%;
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
  background:var(--white);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.scard2:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 18px 36px rgba(52,68,101,.14)}
.scard2__img{width:100%;height:clamp(170px,26vw,210px);object-fit:cover}
.scard2__body{display:flex;flex-direction:column;gap:10px;padding:22px 20px 24px;flex:1}
.scard2__title{font-weight:500;font-size:var(--fs-body-m);line-height:1.35}
.scard2__text{font-weight:400;font-size:var(--fs-body-s);line-height:var(--lh-body-s);
  color:rgba(52,68,101,.82);flex:1}
.scard2__more{display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-weight:700;font-size:14px;line-height:1;color:var(--gold)}
.scard2__more img{width:13px;height:10px;transition:transform .18s ease}
.scard2:hover .scard2__more img{transform:translateX(4px)}

/* ── 19.9 Licence / fact tiles ────────────────────────────────── */
.lic{display:grid;grid-template-columns:1fr;gap:24px}
.lic__item{border-left:2px solid var(--gold);padding:4px 0 4px 22px}
.lic__label{font-weight:700;font-size:14px;line-height:1.4;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(52,68,101,.7)}
.lic__value{font-weight:300;font-size:clamp(30px,3.4vw,44px);line-height:1.15;
  color:var(--navy);margin-top:10px}
.lic__value--sm{font-size:clamp(19px,1.9vw,24px);line-height:1.35}
.lic__value a:hover{color:var(--gold)}
.lic__note{font-weight:400;font-size:var(--fs-body-s);line-height:var(--lh-body-s);
  color:rgba(52,68,101,.8);margin-top:10px}
@media (min-width:768px){ .lic{grid-template-columns:repeat(3,1fr);gap:40px} }
@media (min-width:768px){ .lic--4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .lic--4{grid-template-columns:repeat(4,1fr)} }

/* ── 19.10 Uniform block ──────────────────────────────────────── */
.uniform{background:var(--navy);color:var(--white);padding-block:var(--section-y)}
.uniform__inner{display:flex;flex-direction:column;gap:40px}
.uniform__copy{display:flex;flex-direction:column;gap:20px;flex:1 1 0;min-width:0}
.uniform__list{display:grid;grid-template-columns:1fr;gap:0;margin-top:12px}
.uniform__list li{padding:13px 0 13px 26px;position:relative;
  border-bottom:1px solid rgba(255,255,255,.22);
  font-weight:400;font-size:var(--fs-body-s);line-height:1.5}
.uniform__list li::before{content:"";position:absolute;left:0;top:19px;
  width:9px;height:5px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg)}
.uniform__img{width:100%;height:clamp(240px,46vw,460px);object-fit:cover;
  border-radius:var(--r-lg);flex:1 1 0;min-width:0}
@media (min-width:680px){ .uniform__list{grid-template-columns:repeat(2,1fr);column-gap:32px} }
@media (min-width:1024px){
  .uniform__inner{flex-direction:row;gap:64px;align-items:center}
  .uniform__img{height:520px}
}

/* ── 19.11 Forms ──────────────────────────────────────────────── */
.formsec{background:#f5f6f8;padding-block:var(--section-y)}
.formsec__inner{display:flex;flex-direction:column;gap:40px}
.formsec__copy{display:flex;flex-direction:column;gap:18px;max-width:520px}
.ilink{color:var(--navy);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gold);text-decoration-thickness:2px}
.ilink:hover{color:var(--gold)}

.form{display:flex;flex-direction:column;gap:20px;flex:1 1 0;min-width:0;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:28px 22px}
.form__row{display:grid;grid-template-columns:1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-weight:700;font-size:14px;line-height:1.4;color:var(--navy)}
.field__req{font-weight:500;color:var(--gold);margin-left:6px}
.field__opt{font-weight:400;color:rgba(52,68,101,.6);margin-left:6px}
.field__hint{font-weight:400;font-size:13px;line-height:1.5;color:rgba(52,68,101,.7)}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field select,.field textarea{
  width:100%;min-height:var(--control-h);padding:12px 14px;
  background:var(--white);color:var(--navy);
  border:1px solid rgba(52,68,101,.35);border-radius:var(--r-sm);
  font-size:16px;line-height:1.5;
}
.field textarea{resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.field--file input[type=file]{
  width:100%;padding:12px 14px;font-size:15px;
  background:#f5f6f8;border:1px dashed rgba(52,68,101,.45);border-radius:var(--r-sm);
  cursor:pointer;
}
.field--file input[type=file]::file-selector-button{
  margin-right:12px;padding:8px 14px;border:0;border-radius:var(--r-sm);
  background:var(--navy);color:var(--white);font:inherit;font-weight:700;font-size:14px;
  cursor:pointer;
}
.field--file input[type=file]::file-selector-button:hover{background:#2a3852}
.form__submit{align-self:flex-start;margin-top:4px}
.form__note{font-weight:400;font-size:13px;line-height:1.6;color:rgba(52,68,101,.7)}
.form__error{font-weight:500;font-size:14px;line-height:1.5;color:#a12a2a;
  background:#fbeaea;border-radius:var(--r-sm);padding:12px 14px}
@media (min-width:560px){ .form__row{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){
  .formsec__inner{flex-direction:row;gap:64px;align-items:flex-start}
  .formsec__copy{flex:0 0 400px}
  .form{padding:34px 32px}
}

/* ── 19.12 Contact strip above the footer ─────────────────────── */
.strip{background:var(--navy);border-bottom:1px solid var(--white);
  padding-block:32px;color:var(--white)}
.strip__inner{display:grid;grid-template-columns:1fr;gap:22px}
.strip__item{display:flex;flex-direction:column;gap:6px}
.strip__label{font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold)}
.strip__value{font-weight:400;font-size:var(--fs-body-m);line-height:1.45}
a.strip__item:hover .strip__value{color:var(--gold)}
@media (min-width:680px){ .strip__inner{grid-template-columns:repeat(2,1fr);gap:28px 40px} }
@media (min-width:1100px){ .strip__inner{grid-template-columns:repeat(4,1fr)} }

/* ── 19.13 Buttons: WhatsApp variant + CTA row ────────────────── */
.btn--wa{background:#25d366;color:#0b3d1f;font-weight:700}
.btn--wa:hover{background:#1fb857}
.cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:20px}
.cta__actions .btn{margin-top:0}

/* ── 19.14 Floating WhatsApp button ───────────────────────────── */
.wafab{
  position:fixed;right:16px;bottom:16px;z-index:100;
  display:inline-flex;align-items:center;gap:10px;
  height:52px;padding:0 18px;border-radius:26px;
  background:#25d366;color:#0b3d1f;
  font-weight:700;font-size:15px;line-height:1;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .18s ease,background .18s ease;
}
.wafab:hover{background:#1fb857;transform:translateY(-2px)}
.wafab svg{flex:none}
@media (max-width:479px){ .wafab__text{display:none} .wafab{padding:0;width:52px;justify-content:center} }
@media (prefers-reduced-motion:reduce){ .wafab{transition:none} }

/* ── 19.15 Coming-soon badge ──────────────────────────────────── */
.soon{
  align-self:flex-start;margin-top:8px;
  padding:9px 18px;border-radius:var(--r-md);
  background:var(--gold);color:var(--navy);
  font-weight:700;font-size:14px;line-height:1;letter-spacing:.08em;text-transform:uppercase;
}

/* ── 19.16 Thank-you page ─────────────────────────────────────── */
.thanks{background:var(--navy);color:var(--white);padding-block:clamp(64px,12vw,140px)}
.thanks__inner{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;
  max-width:760px;margin-inline:auto}
.thanks__text{font-weight:400;font-size:var(--fs-body-m);line-height:var(--lh-body)}
.thanks__text a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ── 19.17 Footer additions ───────────────────────────────────── */
.footer__licence{font-weight:400;font-size:14px;line-height:1.65;color:rgba(255,255,255,.78)}
.footer__licence strong{font-weight:700;color:var(--gold)}
.footer__heading--gap{margin-top:28px}
.footer__col--wide{max-width:none}
.footer__list--two{display:grid;grid-template-columns:1fr;gap:8px 32px}
@media (min-width:600px){ .footer__list--two{grid-template-columns:repeat(2,1fr)} }
/* three real columns rather than flex-wrap, which stranded "Company"
   on its own row and left a hole under the brand block */
@media (min-width:1024px){
  .footer__inner{display:grid;flex-direction:row;
    grid-template-columns:280px minmax(0,1fr) 190px 210px;
    gap:44px;align-items:start}
  .footer__brand{max-width:none}
  .footer__col{max-width:none}
}
@media (min-width:1500px){
  .footer__inner{grid-template-columns:340px minmax(0,1fr) 210px 240px;gap:64px}
  .footer__list--two{grid-template-columns:repeat(2,1fr)}
}

/* ── 19.18 Homepage additions: clients + compliance band ──────── */
.clients{padding-block:44px;border-bottom:1px solid var(--rule)}
.clients__head{text-align:center;margin-bottom:28px}
.clients__list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:30px 52px}
.clients__list img{height:clamp(30px,4vw,44px);width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .2s ease,opacity .2s ease}
.clients__list img:hover{filter:none;opacity:1}

.psisa{background:var(--navy);color:var(--white);padding-block:var(--section-y)}
.psisa__inner{display:flex;flex-direction:column;gap:36px}
.psisa__copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:620px}
.psisa__facts{display:grid;grid-template-columns:1fr;gap:24px;flex:1 1 0;min-width:0}
.psisa__fact{border-left:2px solid var(--gold);padding-left:20px}
.psisa__k{font-weight:300;font-size:clamp(26px,3vw,38px);line-height:1.15;color:var(--gold)}
.psisa__v{font-weight:400;font-size:var(--fs-body-s);line-height:var(--lh-body-s);margin-top:8px}
@media (min-width:680px){ .psisa__facts{grid-template-columns:repeat(3,1fr);gap:32px} }
@media (min-width:1100px){ .psisa__inner{flex-direction:row;gap:72px;align-items:center} }

/* Homepage service rail: make the cards real links */
.scard{transition:transform .2s ease}
a.scard:hover{transform:translateY(-4px)}
.scard__more{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;
  margin-top:10px;font-weight:700;font-size:14px;line-height:1;color:var(--gold)}
.scard__more img{width:13px;height:10px}

/* gold link-cta for use on the navy panels */
.link-cta--gold{color:var(--gold)}
.quote__text strong{font-weight:700;color:var(--gold)}
.drop__foot .link-cta{white-space:nowrap}

/* ════════════════════════════════════════════════════════════════
   20. FIXES — map crop, navy-on-navy text, footer accordion
   ════════════════════════════════════════════════════════════════ */

/* ── 20.1 Map ─────────────────────────────────────────────────
   All nine service cities sit inside about 1% of the province, so nine pins
   at rest were a single unreadable gold smudge. The map now shows coverage
   as a region instead: the 69 districts that belong to a named service area
   are shaded gold, the other 36 stay navy. Pins are for the selected city
   only, so there is never more than one on screen at a time. */
.omap:not([data-lit]) .omap__land path:not([data-area="more"]){fill:var(--gold)}
.omap:not([data-lit]) .omap__land path:not([data-area="more"]){stroke:rgba(255,255,255,.85)}
.omap__pin{opacity:0;transition:opacity .3s ease}
.omap[data-lit] .omap__pin{opacity:0}
.omap[data-lit] .omap__pin.is-lit{opacity:1}

/* ── 20.2 Navy-on-navy ────────────────────────────────────────
   .uniform__list is reused inside the navy .quote panel on the homepage,
   where it was inheriting body navy onto a navy background — invisible.
   The panel now sets the colour for everything inside it. */
.quote__panel{color:var(--white)}

/* ── 20.3 Footer accordion ───────────────────────────────────
   25 service links make the footer taller than most of the pages above it
   on a phone. Below 1024 each column collapses behind its heading; from
   1024 up the toggles disappear and everything is open, as before. */
.footer__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:16px 0;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.footer__toggle::after{
  content:"";flex:none;width:10px;height:10px;margin-top:-4px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .22s ease;
}
.footer__toggle[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:4px}
.footer__panel{display:none;padding:18px 0 8px}
.footer__panel.is-open{display:block}

@media (min-width:1024px){
  .footer__toggle{display:block;padding:0;border-bottom:0;cursor:default;pointer-events:none}
  .footer__toggle::after{display:none}
  .footer__panel{display:block;padding:0}
}

/* ── 20.4 Footer length ───────────────────────────────────────
   The Services column lists the six disciplines rather than all 25 pages —
   the mega-menu already carries every service link on every page, so
   repeating them here only made the footer taller than the content. */
.footer__all{color:var(--gold);font-weight:700}
@media (min-width:1024px){
  .footer__list--two{grid-template-columns:repeat(2,1fr);gap:10px 32px}
}

/* ── 20.5 Services carousel ───────────────────────────────────
   .scard was display:flex in row direction, so the "Read more" link sat
   glued to the end of the title instead of under it. */
.scard{flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:28px;gap:0}
.scard__title{max-width:22ch}
.scard__more{margin-top:14px;letter-spacing:.02em}

/* The arrows were a 35px gold tile carrying a baked-in white arrow. Outlined
   circles with a real chevron read as a control rather than a sticker. */
.services__nav{gap:12px;margin-top:8px}
.cbtn{
  width:52px;height:52px;border-radius:50%;
  border:1.5px solid rgba(52,68,101,.32);
  color:var(--navy);background:transparent;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease;
}
.cbtn svg{width:20px;height:20px}
.cbtn[data-dir="1"] svg{transform:none}
.cbtn:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:var(--white);opacity:1}
.cbtn:disabled{opacity:.28;cursor:default}
@media (min-width:768px){ .services__nav{gap:14px} .cbtn{width:56px;height:56px} }

/* ── 20.6 Routes ──────────────────────────────────────────────
   Was three more photo cards. The page already runs a photo grid in the
   services rail and the approach cards, so a fourth one read as filler —
   and every extra guard close-up is another place the generated patches
   have to survive scrutiny. Text-forward rows instead. */
.routes{background:var(--navy);color:var(--white);padding-block:var(--section-y)}
.routes__head{display:flex;flex-direction:column;gap:16px;max-width:760px}
.routes__intro{font-weight:400;font-size:var(--fs-body-m);line-height:var(--lh-body)}
.routes__list{margin-top:44px;border-top:1px solid rgba(255,255,255,.25)}
.route{
  display:grid;grid-template-columns:auto 1fr;gap:6px 22px;
  align-items:start;padding:28px 0;
  border-bottom:1px solid rgba(255,255,255,.25);
}
.route__num{font-weight:700;font-size:14px;line-height:1.6;letter-spacing:.08em;color:var(--gold)}
.route__body{display:flex;flex-direction:column;gap:10px;min-width:0}
.route__title{font-weight:300;font-size:var(--fs-display-m);line-height:1.25}
.route__tag{
  display:inline-block;vertical-align:middle;margin-left:10px;
  padding:5px 11px;border-radius:var(--r-md);
  background:var(--gold);color:var(--navy);
  font-weight:700;font-size:12px;line-height:1;letter-spacing:.07em;text-transform:uppercase;
}
.route__text{font-weight:400;font-size:var(--fs-body-s);line-height:var(--lh-body-s);
  color:rgba(255,255,255,.82);max-width:62ch}
.route__link{
  grid-column:2;display:inline-flex;align-items:center;gap:9px;margin-top:4px;
  font-weight:700;font-size:14px;line-height:1;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold);
}
.route__link img{width:13px;height:10px;transition:transform .18s ease}
.route:hover .route__link img{transform:translateX(4px)}

@media (min-width:900px){
  .route{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 40px;padding:34px 0}
  .route__link{grid-column:3;margin-top:0;white-space:nowrap}
}

/* ── 20.7 Approach banner ─────────────────────────────────────
   Four photo cards here made five photo grids on one page. One wide,
   shallow band carries the section instead, and the four points stay as
   text — fewer images, and none of them big enough to invite a zoom. */
.approach__banner{
  width:100%;height:clamp(150px,18vw,280px);object-fit:cover;
  border-radius:var(--r-lg);margin-top:40px;
}
/* the cards lost their images, so the rule now does the separating */
.approach__grid .acard{padding-top:20px;border-top:1px solid var(--rule);border-left:0;padding-left:0}
@media (min-width:680px){
  .approach__grid .acard{border-left:1px solid var(--rule);padding-left:20px;border-top:0;padding-top:0}
}