/* ==========================================================================
   Prime Pro Innovations Inc. — pp-2026.css
   Single stylesheet. Replaces bootstrap.min.css, vendors.css, swiper.css,
   swiper-custom-1.css, scheme-01.css, style.css, prime.css, theme-2026.css.
   No build step. No framework. No icon fonts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — navy */
  --navy-950:#0C0A26;
  --navy-900:#141140;
  --navy-800:#191547;
  --navy-700:#221C4E;
  --navy-600:#2A2158;
  --navy-500:#3A3070;

  /* Brand — red */
  --red:#E11B30;
  --red-700:#B81626;
  --red-600:#C4162A;
  --red-300:#FF6B79;

  /* Neutrals */
  --paper:#FFFFFF;
  --paper-2:#F7F7FB;
  --paper-3:#EEEEF5;
  --line:#E3E3EC;
  --line-strong:#D2D2DE;
  --ink:#131330;
  --body:#474759;
  --muted:#6C6C86;

  /* On-dark */
  --on-dark:#FFFFFF;
  --on-dark-body:rgba(255,255,255,.78);
  --on-dark-muted:rgba(255,255,255,.60);
  --on-dark-line:rgba(255,255,255,.14);

  /* Typography */
  --font:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fs-display:clamp(2.25rem,1.35rem + 3.4vw,4rem);
  --fs-h1:clamp(2rem,1.35rem + 2.5vw,3.25rem);
  --fs-h2:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
  --fs-h3:clamp(1.3rem,1.1rem + .8vw,1.75rem);
  --fs-h4:clamp(1.05rem,.98rem + .35vw,1.25rem);
  --fs-lead:clamp(1.02rem,.97rem + .3vw,1.2rem);
  --fs-base:1rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --fs-eyebrow:.75rem;

  --lh-tight:1.08;
  --lh-snug:1.25;
  --lh-body:1.65;
  --tracking-tight:-.022em;
  --tracking-eyebrow:.16em;

  /* Spacing (4px base) */
  --sp-1:.25rem;  --sp-2:.5rem;   --sp-3:.75rem;  --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem;  --sp-8:2rem;    --sp-10:2.5rem;
  --sp-12:3rem;   --sp-16:4rem;   --sp-20:5rem;   --sp-24:6rem;
  --section-y:clamp(3.5rem,2rem + 5vw,7rem);

  /* Shape */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(19,19,48,.06), 0 2px 8px rgba(19,19,48,.05);
  --shadow-md:0 4px 12px rgba(19,19,48,.07), 0 12px 32px rgba(19,19,48,.07);
  --shadow-lg:0 8px 24px rgba(19,19,48,.10), 0 24px 56px rgba(19,19,48,.10);

  /* Layout */
  --container:1216px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --header-h:78px;
  --utility-h:40px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:220ms;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

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

/* Author `display` on a class beats the UA sheet's [hidden] rule, so any
   component with its own display value would stay on screen when toggled
   with el.hidden. Make the attribute win. */
[hidden]{display:none !important}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-weight:800;
  line-height:var(--lh-snug);
  letter-spacing:var(--tracking-tight);
  color:var(--ink);
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4);font-weight:700}
h5{font-size:var(--fs-base);font-weight:700}
p{margin:0}
p + p{margin-top:var(--sp-4)}
ul{margin:0;padding:0;list-style:none}

a{color:var(--red-600);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--red)}

:focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--red);color:#fff}

.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:var(--sp-4);top:-100px;z-index:2000;
  background:var(--red);color:#fff;padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-sm);font-weight:700;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:var(--sp-4);color:#fff}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--wide{max-width:1400px}

.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.5rem,1.5rem + 3vw,4.5rem)}

/* Dark section — used deliberately, not alternating.
   Carries a soft brand-hue wash rather than reading as a flat navy slab. */
.section--dark{
  position:relative;
  background:var(--navy-800);
  background-image:
    radial-gradient(900px 520px at 88% 0%, rgba(225,27,48,.11), transparent 62%),
    radial-gradient(760px 460px at 4% 100%, rgba(58,48,112,.42), transparent 60%);
  color:var(--on-dark-body);
}
.section--dark h1,.section--dark h2,.section--dark h3,
.section--dark h4,.section--dark h5{color:var(--on-dark)}

.section--tint{background:var(--paper-2)}

.grid{display:grid;gap:var(--sp-6)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media (max-width:900px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .grid--2{grid-template-columns:1fr}
}
@media (max-width:600px){
  .grid--3{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */
.eyebrow{
  display:inline-block;
  font-size:var(--fs-eyebrow);
  font-weight:800;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--red-600);
  margin-bottom:var(--sp-4);
}
.section--dark .eyebrow{color:var(--red-300)}

.lead{
  font-size:var(--fs-lead);
  line-height:1.6;
  color:var(--body);
}
.section--dark .lead{color:var(--on-dark-body)}

.section-head{max-width:60ch;margin-bottom:var(--sp-12)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{margin-top:var(--sp-4);font-size:var(--fs-lead);line-height:1.6}

.text-muted{color:var(--muted)}
.fs-sm{font-size:var(--fs-sm)}
.fs-xs{font-size:var(--fs-xs)}

/* Accent word inside a heading */
.accent{color:var(--red)}
.section--dark .accent{color:var(--red-300)}

/* Short rule used under section heads */
.rule{
  width:52px;height:3px;background:var(--red);
  border:0;margin:var(--sp-5) 0 0;border-radius:2px;
}
.section-head--center .rule{margin-inline:auto}

/* --------------------------------------------------------------------------
   5. ICONS
   -------------------------------------------------------------------------- */
.ico{width:20px;height:20px;flex:none;stroke-width:1.5}
.ico--sm{width:16px;height:16px}
.ico--lg{width:28px;height:28px}
.ico--xl{width:34px;height:34px}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  padding:.875rem 1.5rem;
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
  font-weight:800;
  letter-spacing:.02em;
  text-align:center;
  white-space:nowrap;
  cursor:pointer;
  border:2px solid transparent;
  transition:background-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn .ico{transition:transform var(--dur) var(--ease)}
.btn:hover .ico{transform:translateX(3px)}

.btn--primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn--primary:hover{background:var(--red-700);border-color:var(--red-700);color:#fff;box-shadow:var(--shadow-md)}

.btn--navy{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn--navy:hover{background:var(--navy-600);border-color:var(--navy-600);color:#fff;box-shadow:var(--shadow-md)}

.btn--white{background:#fff;color:var(--navy-800);border-color:#fff}
.btn--white:hover{background:var(--paper-3);border-color:var(--paper-3);color:var(--navy-800)}

/* Outline on dark — contrast-safe: white border + white text */
.btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--outline:hover{background:#fff;border-color:#fff;color:var(--navy-800)}

/* Outline on light */
.btn--outline-ink{background:transparent;color:var(--navy-800);border-color:var(--line-strong)}
.btn--outline-ink:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}

.btn--sm{padding:.625rem 1.125rem;font-size:var(--fs-xs)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* Inline "Learn more" link */
.link-more{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);font-weight:800;
  letter-spacing:.02em;color:var(--red-600);
}
.link-more .ico{width:17px;height:17px;transition:transform var(--dur) var(--ease)}
.link-more:hover{color:var(--red)}
.link-more:hover .ico{transform:translateX(4px)}
.section--dark .link-more{color:var(--red-300)}
.section--dark .link-more:hover{color:#fff}

/* --------------------------------------------------------------------------
   7. UTILITY BAR + HEADER
   -------------------------------------------------------------------------- */
.utility{
  background:var(--navy-950);
  color:var(--on-dark-muted);
  font-size:var(--fs-xs);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.utility__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);min-height:var(--utility-h);
}
.utility__group{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap}
.utility__item{display:inline-flex;align-items:center;gap:var(--sp-2)}
.utility__item .ico{width:15px;height:15px;opacity:.8}
.utility a{color:var(--on-dark-muted)}
.utility a:hover{color:#fff}

.social{display:flex;align-items:center;gap:var(--sp-2)}
.social a{
  display:grid;place-items:center;width:28px;height:28px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.07);
  color:var(--on-dark-muted);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.social a:hover{background:var(--red);color:#fff}
.social .ico{width:14px;height:14px}

@media (max-width:860px){
  .utility__group .utility__item:first-child{display:none}
}
@media (max-width:560px){
  .utility{display:none}
  :root{--utility-h:0px}
}

/* Header */
.header{
  position:sticky;top:0;z-index:900;
  background:var(--navy-900);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.header.is-stuck{box-shadow:0 6px 28px rgba(12,10,38,.36)}

.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-6);min-height:var(--header-h);
}

.brand{display:flex;align-items:center;gap:var(--sp-3)}
.brand img{width:40px;height:40px;flex:none}
.brand__name{
  font-size:.9375rem;font-weight:800;line-height:1.15;
  color:#fff;letter-spacing:-.01em;
}
.brand__tag{
  display:block;font-size:.625rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--on-dark-muted);margin-top:2px;
  white-space:nowrap;
}
@media (max-width:1240px){.brand__tag{display:none}}

/* Primary nav */
.nav{display:flex;align-items:center;gap:var(--sp-1)}
/* A parent item is a real link PLUS a separate caret button. The link must
   always navigate — hijacking it to toggle the dropdown leaves the section
   landing pages unreachable. */
.nav > li{position:relative;display:flex;align-items:center;border-radius:var(--r-sm)}
.nav > li:hover,
.nav > li.is-open{background:rgba(255,255,255,.08)}
.nav > li > a{
  position:relative;
  display:flex;align-items:center;gap:6px;
  padding:.625rem .75rem;border-radius:var(--r-sm);
  font-size:.8125rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
  white-space:nowrap;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.nav > li > a:hover,
.nav > li.is-open > a{color:#fff}
.nav > li.is-current > a{color:#fff}
.nav > li.is-current > a::after{
  content:"";position:absolute;left:.75rem;right:.75rem;bottom:0;
  height:2px;background:var(--red);border-radius:2px;
}

/* Caret is its own control so it can be reached by keyboard without
   stealing the link's job. */
.nav__toggle{
  display:grid;place-items:center;
  width:26px;height:34px;flex:none;
  margin-left:-8px;margin-right:2px;
  border-radius:var(--r-sm);
  color:rgba(255,255,255,.72);
}
.nav__toggle:hover{color:#fff}
.nav__caret{width:11px;height:11px;opacity:.8;transition:transform var(--dur) var(--ease)}
.nav > li.is-open .nav__caret{transform:rotate(180deg)}

.submenu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:266px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:var(--sp-2);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.nav > li.is-open .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{
  display:block;padding:.5625rem .75rem;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:600;color:var(--body);
}
.submenu a:hover{background:var(--paper-2);color:var(--navy-800)}

.header__cta{display:flex;align-items:center;gap:var(--sp-3)}

/* Mobile toggle */
.nav-toggle{
  display:none;width:44px;height:44px;
  border-radius:var(--r-sm);
  color:#fff;place-items:center;
}
.nav-toggle:hover{background:rgba(255,255,255,.08)}
.nav-toggle .ico{width:24px;height:24px}

@media (max-width:1140px){
  .nav > li > a{padding:.625rem .5rem;font-size:.75rem}
  .header__cta .btn{padding:.75rem 1rem}
}
@media (max-width:1100px){
  .nav-toggle{display:grid}
  .header__cta .btn{display:none}

  .nav{
    position:fixed;inset:0 0 0 auto;width:min(360px,86vw);
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-900);
    padding:calc(var(--header-h) + var(--sp-4)) var(--sp-5) var(--sp-8);
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform 280ms var(--ease);
    box-shadow:-12px 0 40px rgba(0,0,0,.4);
  }
  .nav.is-open{transform:translateX(0)}
  .nav > li{
    border-bottom:1px solid rgba(255,255,255,.08);
    border-radius:0;flex-wrap:wrap;
  }
  .nav > li:hover,.nav > li.is-open{background:transparent}
  .nav > li > a{
    flex:1;min-width:0;
    padding:.9375rem .25rem;font-size:.8125rem;
    border-radius:0;
  }
  /* Full-height tap target beside the link, so the caret and the link are
     each comfortably hittable with a thumb. */
  .nav__toggle{
    width:48px;height:48px;margin:0;
    color:rgba(255,255,255,.7);
  }
  .nav > li > .submenu{flex:0 0 100%}
  .nav > li.is-current > a::after{display:none}

  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:0;box-shadow:none;
    padding:0 0 var(--sp-3) var(--sp-3);
    display:none;min-width:0;
  }
  .nav > li.is-open .submenu{display:block}
  .submenu a{color:var(--on-dark-muted);padding:.5rem .25rem}
  .submenu a:hover{background:transparent;color:#fff}
}

.nav-scrim{
  position:fixed;inset:0;z-index:880;
  background:rgba(12,10,38,.6);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease),visibility var(--dur);
}
.nav-scrim.is-open{opacity:1;visibility:visible}
body.nav-locked{overflow:hidden}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  background:var(--navy-900);
  overflow:hidden;
}
.hero__viewport{position:relative}
.hero__slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity 700ms var(--ease),visibility 700ms;
}
.hero__slide.is-active{position:relative;opacity:1;visibility:visible}

/* No-JS / first paint: first slide is visible in flow */
.no-js .hero__slide{position:relative;opacity:1;visibility:visible}
.no-js .hero__slide + .hero__slide{display:none}

.hero__bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transform:scale(1.04);
}
.hero__slide.is-active .hero__bg{
  animation:heroPan 9s var(--ease) forwards;
}
@keyframes heroPan{from{transform:scale(1.08)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .hero__slide.is-active .hero__bg{animation:none;transform:none}
}

/* Scrim: strong enough for AA text over any photo */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(12,10,38,.94) 0%, rgba(12,10,38,.82) 42%, rgba(12,10,38,.42) 78%, rgba(12,10,38,.30) 100%),
    linear-gradient(180deg, rgba(12,10,38,.55) 0%, rgba(12,10,38,.20) 40%, rgba(12,10,38,.70) 100%);
}
@media (max-width:768px){
  .hero__scrim{background:linear-gradient(180deg,rgba(12,10,38,.78) 0%,rgba(12,10,38,.86) 100%)}
}

.hero__inner{
  position:relative;z-index:2;
  display:flex;align-items:center;
  min-height:clamp(480px,68vh,660px);
  padding-block:var(--sp-16);
}
.hero__copy{max-width:64ch}
.hero__copy h1,.hero__copy h2{
  font-size:var(--fs-display);
  line-height:var(--lh-tight);
  color:#fff;
  text-transform:uppercase;
  letter-spacing:-.025em;
  max-width:19ch;
}
.hero__copy .lead{
  color:rgba(255,255,255,.86);
  margin-top:var(--sp-5);
  max-width:52ch;
}
.hero__actions{margin-top:var(--sp-8);display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* Hero controls */
.hero__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.26);
  color:#fff;backdrop-filter:blur(6px);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.hero__nav:hover{background:var(--red);border-color:var(--red)}
.hero__nav--prev{left:var(--sp-4)}
.hero__nav--next{right:var(--sp-4)}
@media (max-width:768px){.hero__nav{display:none}}

.hero__dots{
  position:absolute;left:0;right:0;bottom:var(--sp-4);z-index:3;
  display:flex;justify-content:center;gap:var(--sp-1);
}
/* The visible dot is small, but the hit area is a full 28px square.
   On phones the prev/next arrows are hidden, so these are the only
   slideshow control and have to be reachable with a thumb. */
.hero__dots button{
  position:relative;
  width:28px;height:28px;
  display:grid;place-items:center;
  background:none;border-radius:50%;
}
.hero__dots button::before{
  content:"";display:block;
  width:9px;height:9px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.42);
  transition:background-color var(--dur) var(--ease),width var(--dur) var(--ease);
}
.hero__dots button:hover::before{background:rgba(255,255,255,.75)}
.hero__dots button.is-active::before{background:var(--red);width:26px}

/* --------------------------------------------------------------------------
   9. VALUE STRIP
   -------------------------------------------------------------------------- */
.values{background:var(--navy-800);border-top:1px solid rgba(255,255,255,.07)}
.values__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
}
.value{
  padding:var(--sp-8) var(--sp-5);
  text-align:center;
  border-right:1px solid rgba(255,255,255,.09);
  transition:background-color var(--dur) var(--ease);
}
.value:last-child{border-right:0}
.value:hover{background:rgba(255,255,255,.04)}
.value svg{
  width:30px;height:30px;margin:0 auto var(--sp-4);
  color:var(--red-300);stroke-width:1.3;
}
.value h3{
  font-size:.8125rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
  color:#fff;margin-bottom:var(--sp-3);
}
.value p{font-size:var(--fs-xs);line-height:1.6;color:var(--on-dark-muted)}

@media (max-width:1100px){
  .values__grid{grid-template-columns:repeat(3,1fr)}
  .value:nth-child(3n){border-right:0}
  .value:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.09)}
}
@media (max-width:640px){
  .values__grid{grid-template-columns:repeat(2,1fr)}
  .value{padding:var(--sp-6) var(--sp-4)}
  .value:nth-child(3n){border-right:1px solid rgba(255,255,255,.09)}
  .value:nth-child(2n){border-right:0}
  .value:nth-child(-n+4){border-bottom:1px solid rgba(255,255,255,.09)}
}

/* --------------------------------------------------------------------------
   10. WELCOME / SPLIT
   -------------------------------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
/* Narrow intro column beside a wide content column */
.split--sidebar{grid-template-columns:1fr 2.1fr;align-items:start}
@media (max-width:900px){
  .split,
  .split--sidebar{grid-template-columns:1fr}
}

.welcome__meta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-6);margin-top:var(--sp-8);
}
.badge-state{
  display:flex;align-items:center;gap:var(--sp-3);
  padding-left:var(--sp-5);
  border-left:2px solid var(--line);
}
.badge-state svg{width:26px;height:30px;color:var(--navy-600);stroke-width:1.3}
.badge-state b{
  display:block;font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.06em;color:var(--navy-800);line-height:1.4;
}
.badge-state span{font-size:var(--fs-xs);color:var(--muted);font-weight:600}

.welcome__media{position:relative}
.welcome__photo{
  aspect-ratio:4/3;
  background-size:cover;background-position:center;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
}
.welcome__card{
  position:absolute;right:calc(var(--sp-6) * -1);bottom:calc(var(--sp-8) * -1);
  background:var(--navy-800);
  color:#fff;
  padding:var(--sp-8);
  border-radius:var(--r-lg);
  max-width:300px;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.10);
}
.welcome__card p{
  font-size:1.0625rem;font-weight:800;line-height:1.5;
  color:#fff;letter-spacing:-.01em;
}
/* The card is a dark island inside a light section, so the accent has to be
   the light red or it drops to 3.55:1 against the navy. */
.welcome__card .accent{color:var(--red-300)}
.welcome__card p + p{margin-top:var(--sp-2)}
.welcome__card hr{
  width:44px;height:2px;background:var(--red);
  border:0;margin:var(--sp-5) 0 0;border-radius:2px;
}
@media (max-width:900px){
  .welcome__card{position:static;max-width:none;margin-top:var(--sp-5)}
}

/* --------------------------------------------------------------------------
   11. STATS
   -------------------------------------------------------------------------- */
.stats{
  background:var(--navy-900);
  background-image:radial-gradient(1000px 400px at 15% -20%, rgba(225,27,48,.16), transparent 70%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* A dark section directly after the stats band shares its edge, so the pair
   reads as two bands rather than one long void. */
.stats + .section--dark{padding-top:clamp(3rem,2rem + 3vw,5rem)}
.stats__grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:var(--sp-6);
}
.stat{
  display:flex;align-items:flex-start;gap:var(--sp-4);
  padding:var(--sp-6) 0;
}
.stat svg{width:30px;height:30px;color:var(--red-300);flex:none;stroke-width:1.4;margin-top:2px}
.stat b{
  display:block;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem);
  font-weight:800;color:#fff;line-height:1.05;letter-spacing:-.03em;
}
.stat > span > span{
  display:block;font-size:var(--fs-sm);font-weight:700;
  color:#fff;margin-top:var(--sp-2);
}
.stat em{
  display:block;font-style:normal;font-size:var(--fs-xs);
  color:var(--on-dark-muted);margin-top:2px;
}
@media (max-width:1100px){.stats__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.stats__grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}}
@media (max-width:420px){.stats__grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   12. SERVICE CARD  — the contrast fix.
   Media on top, copy on a SOLID surface below. Text never sits on photography.
   -------------------------------------------------------------------------- */
.card{
  display:flex;flex-direction:column;height:100%;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:var(--line-strong);
}
.section--dark .card{
  background:var(--navy-700);
  border-color:rgba(255,255,255,.12);
}
.section--dark .card:hover{border-color:rgba(255,255,255,.26)}

.card__media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--paper-3);
}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 500ms var(--ease);
}
.card:hover .card__media img{transform:scale(1.05)}

.card__tag{
  position:absolute;top:var(--sp-4);left:var(--sp-4);
  display:inline-flex;align-items:center;gap:6px;
  padding:.3125rem .625rem;
  border-radius:var(--r-pill);
  background:rgba(12,10,38,.86);
  color:#fff;
  font-size:.6875rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  backdrop-filter:blur(4px);
}
.card__tag .ico{width:13px;height:13px}

.card__body{
  display:flex;flex-direction:column;flex:1;
  padding:var(--sp-6);
}
.card__body h3{
  font-size:1.0625rem;font-weight:800;
  line-height:1.35;margin-bottom:var(--sp-3);
  letter-spacing:-.015em;
}
.section--dark .card__body h3{color:#fff}
.card__body p{
  font-size:var(--fs-sm);line-height:1.6;
  color:var(--body);flex:1;
}
.section--dark .card__body p{color:var(--on-dark-body)}
.card__body .link-more{margin-top:var(--sp-5)}

/* Whole-card click target without nesting interactive elements */
.card__link::after{content:"";position:absolute;inset:0;z-index:1}
.card{position:relative}

/* Service tiles (homepage).
   Three across, not six: at six the column is ~180px and the body copy
   becomes unreadable — the original template's mistake. */
.tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-6);
}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}

.tile{
  position:relative;
  display:flex;flex-direction:column;height:100%;
  border-radius:var(--r-md);overflow:hidden;
  background:var(--navy-700);
  border:1px solid rgba(255,255,255,.10);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.tile:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28)}
.tile__media{position:relative;aspect-ratio:2/1;overflow:hidden}
.tile__media img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease)}
.tile:hover .tile__media img{transform:scale(1.06)}
.tile__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,10,38,.10) 0%,rgba(12,10,38,.72) 55%,rgba(12,10,38,.95) 100%);
}
.tile__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:var(--sp-4);
  display:flex;align-items:flex-end;gap:var(--sp-2);
}
.tile__cap svg{width:20px;height:20px;color:var(--red-300);flex:none;margin-bottom:2px}
.tile__cap h3{
  font-size:.8125rem;font-weight:800;line-height:1.3;
  color:#fff;letter-spacing:-.005em;
}
.tile__body{padding:var(--sp-5);display:flex;flex-direction:column;flex:1}
.tile__body p{font-size:var(--fs-xs);line-height:1.6;color:var(--on-dark-body);flex:1}
.tile__body .link-more{margin-top:var(--sp-4);font-size:var(--fs-xs)}

/* --------------------------------------------------------------------------
   13. CAROUSEL (work, quotes) — CSS scroll-snap, no library
   -------------------------------------------------------------------------- */
.carousel{position:relative}
.carousel__track{
  display:flex;gap:var(--sp-5);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:var(--sp-3);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carousel__track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.carousel__track{scroll-behavior:auto}}

.carousel__item{
  flex:0 0 auto;
  scroll-snap-align:start;
  width:calc((100% - var(--sp-5) * 2) / 3);
}
@media (max-width:900px){.carousel__item{width:calc((100% - var(--sp-5)) / 2)}}
@media (max-width:600px){.carousel__item{width:100%}}

.carousel__controls{
  display:flex;align-items:center;gap:var(--sp-3);
  margin-top:var(--sp-6);
}
.carousel__btn{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line-strong);
  color:var(--navy-800);
  background:var(--paper);
  transition:background-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             opacity var(--dur) var(--ease);
}
.carousel__btn:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.carousel__btn[disabled]{opacity:.35;cursor:default}
.carousel__btn[disabled]:hover{background:var(--paper);color:var(--navy-800);border-color:var(--line-strong)}
.section--dark .carousel__btn{
  background:transparent;border-color:rgba(255,255,255,.28);color:#fff;
}
.section--dark .carousel__btn:hover{background:#fff;border-color:#fff;color:var(--navy-800)}
.section--dark .carousel__btn[disabled]:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}

/* Work card */
.work-card{
  position:relative;display:block;
  border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:16/10;
}
.work-card img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease)}
.work-card:hover img{transform:scale(1.06)}
.work-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,10,38,0) 30%,rgba(12,10,38,.62) 62%,rgba(12,10,38,.95) 100%);
}
.work-card__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:var(--sp-5);
}
.work-card__cap b{
  display:block;font-size:var(--fs-base);font-weight:800;
  color:#fff;letter-spacing:-.01em;line-height:1.35;
}
.work-card__cap span{
  display:block;font-size:var(--fs-xs);
  color:rgba(255,255,255,.72);margin-top:2px;
}

/* --------------------------------------------------------------------------
   14. SECTORS
   -------------------------------------------------------------------------- */
.sectors__grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-4);
}
@media (max-width:1000px){.sectors__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.sectors__grid{grid-template-columns:repeat(2,1fr)}}

.sector{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  text-align:center;
  padding:var(--sp-6) var(--sp-4);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.sector:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.sector svg{width:28px;height:28px;color:var(--navy-600)}
.sector span{
  font-size:var(--fs-xs);font-weight:800;line-height:1.45;
  color:var(--navy-800);letter-spacing:.01em;
}

/* --------------------------------------------------------------------------
   15. QUOTES
   -------------------------------------------------------------------------- */
.quote{
  height:100%;
  display:flex;flex-direction:column;
  padding:var(--sp-8);
  background:var(--navy-700);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);
}
.quote__mark{width:30px;height:30px;color:var(--red-300);margin-bottom:var(--sp-5)}
.quote p{
  font-size:var(--fs-base);line-height:1.7;
  color:rgba(255,255,255,.90);flex:1;
}
.quote__by{
  display:flex;align-items:center;gap:var(--sp-3);
  margin-top:var(--sp-6);padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.12);
}
.quote__by svg{width:44px;height:44px;border-radius:50%;flex:none}
.quote__by b{display:block;font-size:var(--fs-sm);font-weight:800;color:#fff}
.quote__by span span{display:block;font-size:var(--fs-xs);color:var(--on-dark-muted);margin-top:1px}

/* --------------------------------------------------------------------------
   16. CTA BAND
   -------------------------------------------------------------------------- */
.cta{
  background:var(--navy-900);
  background-image:linear-gradient(115deg,var(--navy-900) 0%,var(--navy-700) 52%,var(--red-700) 190%);
  color:#fff;
}
.cta__inner{
  display:flex;align-items:center;gap:var(--sp-8);
  flex-wrap:wrap;
  padding-block:clamp(2.5rem,1.5rem + 3vw,4rem);
}
.cta__icon{
  display:grid;place-items:center;
  width:62px;height:62px;flex:none;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
}
.cta__icon .ico{width:26px;height:26px}
.cta__text{flex:1;min-width:260px}
.cta__text h2{font-size:var(--fs-h3);color:#fff;margin-bottom:var(--sp-2)}
.cta__text p{color:rgba(255,255,255,.80)}
.cta .btn-row{margin-left:auto}
@media (max-width:768px){
  .cta__icon{display:none}
  .cta .btn-row{margin-left:0;width:100%}
  .cta .btn{flex:1;min-width:160px}
}

/* --------------------------------------------------------------------------
   17. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */
.page-head{
  position:relative;
  background:var(--navy-900);
  background-image:radial-gradient(900px 420px at 88% -10%, rgba(225,27,48,.22), transparent 68%);
  color:var(--on-dark-body);
  padding-block:clamp(3rem,2rem + 4vw,5.5rem);
  border-bottom:2px solid var(--red);
}
.page-head__inner{
  display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:end;
}
@media (max-width:900px){.page-head__inner{grid-template-columns:1fr}}

.breadcrumb{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-xs);color:var(--on-dark-muted);
  margin-bottom:var(--sp-5);
}
.breadcrumb a{color:var(--on-dark-muted)}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{opacity:.5}

.page-head h1{
  font-size:var(--fs-h1);color:#fff;
  text-transform:uppercase;letter-spacing:-.025em;
}
.page-head .lead{color:rgba(255,255,255,.82);margin-top:var(--sp-5);max-width:64ch}

/* Right-hand key figures — fills the dead space in the old header band */
.page-head__facts{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-5);
}
.fact{
  padding:var(--sp-5);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.04);
}
.fact b{
  display:block;font-size:1.5rem;font-weight:800;color:#fff;
  line-height:1.1;letter-spacing:-.03em;
}
.fact span{
  display:block;font-size:var(--fs-xs);color:var(--on-dark-muted);
  margin-top:var(--sp-2);line-height:1.45;
}

/* Group heading inside a listing */
.group-head{
  display:flex;align-items:baseline;gap:var(--sp-4);
  margin-bottom:var(--sp-8);
  padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--line);
}
.group-head h2{font-size:var(--fs-h4);text-transform:uppercase;letter-spacing:.06em}
.group-head span{font-size:var(--fs-xs);color:var(--muted);font-weight:700;margin-left:auto}
.group + .group{margin-top:var(--sp-20)}

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.footer{
  background:var(--navy-950);
  color:var(--on-dark-body);
  padding-top:var(--section-y);
}
.footer__grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.3fr 1.3fr;
  gap:var(--sp-8);
}
@media (max-width:1100px){.footer__grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:700px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer__grid{grid-template-columns:1fr}}

.footer h3{
  font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:var(--sp-5);
}
.footer p{font-size:var(--fs-sm);line-height:1.7;color:var(--on-dark-muted)}
.footer a{color:var(--on-dark-muted);font-size:var(--fs-sm)}
.footer a:hover{color:#fff}
.footer li + li{margin-top:var(--sp-3)}

.footer__brand{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.footer__brand img{width:40px;height:40px}
.footer__brand b{display:block;font-size:var(--fs-sm);font-weight:800;color:#fff;line-height:1.2}
.footer__brand span{
  display:block;font-size:.6875rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-dark-muted);margin-top:3px;
}
.footer .social{margin-top:var(--sp-5)}

.footer__contact li{display:flex;gap:var(--sp-3);font-size:var(--fs-sm);line-height:1.6}
.footer__contact .ico{width:16px;height:16px;color:var(--red-300);flex:none;margin-top:4px}
.footer__contact span{color:var(--on-dark-muted)}

.newsletter{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4)}
.newsletter input{
  width:100%;padding:.75rem var(--sp-4);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-sm);
  color:#fff;font-size:var(--fs-sm);
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.newsletter input::placeholder{color:rgba(255,255,255,.45)}
.newsletter input:focus{
  outline:none;border-color:var(--red);
  background:rgba(255,255,255,.09);
}
.newsletter button{
  padding:.75rem var(--sp-4);
  background:var(--red);color:#fff;
  border-radius:var(--r-sm);
  font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  transition:background-color var(--dur) var(--ease);
}
.newsletter button:hover{background:var(--red-700)}

.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--sp-5);
  margin-top:var(--section-y);
  padding-block:var(--sp-6);
  border-top:1px solid rgba(255,255,255,.10);
  font-size:var(--fs-xs);
  color:var(--on-dark-muted);
}
.footer__legal{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.footer__legal a{font-size:var(--fs-xs)}
.footer__legal i{font-style:normal;opacity:.35}

.credit{
  display:inline-flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-5);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill);
  transition:border-color var(--dur) var(--ease);
}
.credit:hover{border-color:rgba(255,255,255,.32)}
.credit span{
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-muted);white-space:nowrap;
}
.credit img{width:112px;height:auto}

/* --------------------------------------------------------------------------
   19. FLOATING ACTIONS
   -------------------------------------------------------------------------- */
:root{--float-inset:clamp(1rem,2vw,1.5rem)}

.wa-float,.to-top{
  position:fixed;
  right:calc(var(--float-inset) + env(safe-area-inset-right,0px));
  z-index:800;
  display:grid;place-items:center;
  border-radius:50%;
  box-shadow:var(--shadow-md);
  transition:transform 260ms var(--ease),
             background-color var(--dur) var(--ease),
             opacity var(--dur) var(--ease),
             visibility var(--dur);
}
.wa-float{
  bottom:calc(var(--float-inset) + env(safe-area-inset-bottom,0px));
  width:52px;height:52px;
  background:#258F5A;
  color:#fff;
  border:2px solid rgba(255,255,255,.22);
}
.wa-float:hover{background:#1F7A4C;color:#fff;transform:translateY(-3px)}
.wa-float svg{width:26px;height:26px}

/* 52px button + 8px clear gap — two fixed elements must not crowd each other */
.to-top{
  bottom:calc(var(--float-inset) + env(safe-area-inset-bottom,0px) + 60px);
  width:44px;height:44px;
  background:var(--navy-800);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  opacity:0;visibility:hidden;
}
.to-top.is-visible{opacity:1;visibility:visible}
.to-top:hover{background:var(--red);color:#fff;transform:translateY(-3px)}
.to-top .ico{width:20px;height:20px}

/* A fixed corner widget always covers something. While the reader is moving
   down the page it tucks off-screen so it never sits on body copy; it returns
   the instant they scroll up, or stop. Placed after the hover rules so the
   tucked state wins over them. */
.floats-tucked .wa-float,
.floats-tucked .to-top{
  transform:translateX(calc(100% + var(--float-inset) + 10px));
}
@media (prefers-reduced-motion:reduce){
  .floats-tucked .wa-float,
  .floats-tucked .to-top{transform:none}
}

/* --------------------------------------------------------------------------
   20. SCROLL REVEAL
   Only applied when JS is present (html.js). Without JS every element is
   visible in its natural state — content is never hidden behind a script.
   -------------------------------------------------------------------------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.js [data-reveal].is-revealed{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* Print: everything visible, no dark ink */
@media print{
  .header,.utility,.wa-float,.to-top,.hero__nav,.hero__dots,
  .carousel__controls,.newsletter{display:none !important}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  body{background:#fff;color:#000}
  .section--dark,.footer,.cta,.hero{background:#fff !important;color:#000 !important}
  .section--dark h1,.section--dark h2,.section--dark h3,
  .footer h3,.cta__text h2,.hero__copy h1{color:#000 !important}
}

/* --------------------------------------------------------------------------
   21. FORMS  (contact / enquiry)
   -------------------------------------------------------------------------- */
.panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,1rem + 2vw,2.5rem);
  box-shadow:var(--shadow-sm);
}
.panel--flush{padding:0;overflow:hidden}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-5);
}
.form-grid > .span-2{grid-column:1 / -1}
.form-grid > .span-3{grid-column:span 1}
@media (min-width:721px){
  .form-grid--thirds{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .form-grid{grid-template-columns:1fr}
  .form-grid > .span-2{grid-column:auto}
}

.field{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.field > label{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);font-weight:700;color:var(--ink);
}
.field > label .ico{width:15px;height:15px;color:var(--muted)}
.req{color:var(--red-600)}

.input{
  width:100%;
  padding:.75rem var(--sp-4);
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
  color:var(--ink);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.input::placeholder{color:var(--muted);opacity:.85}
.input:hover{border-color:var(--muted)}
.input:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(225,27,48,.16);
}
textarea.input{resize:vertical;min-height:130px;line-height:1.6}
select.input{
  appearance:none;cursor:pointer;padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C6C86' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:16px;
}

.input.is-invalid{border-color:var(--red-600);background:#FFF7F8}
.input.is-invalid:focus{box-shadow:0 0 0 3px rgba(196,22,42,.18)}
.field-error{
  display:flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);font-weight:600;color:var(--red-600);
}
.field-error .ico{width:14px;height:14px}

/* Honeypot — off-screen, never display:none (bots skip hidden fields) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Upload RFP / RFQ ---------------------------------------------------- */
.upload{
  border:2px dashed var(--line-strong);
  border-radius:var(--r-md);
  background:var(--paper-2);
  padding:var(--sp-6);
  text-align:center;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.upload:hover,
.upload.is-dragover{border-color:var(--red);background:#FFF6F7}
.upload.is-dragover{border-style:solid}

.upload__icon{
  width:34px;height:34px;margin:0 auto var(--sp-3);
  color:var(--navy-600);
}
.upload__hint{
  font-size:var(--fs-xs);color:var(--muted);
  margin-top:var(--sp-3);line-height:1.55;
}
/* The real input stays in the DOM and focusable; the button is its label. */
.upload input[type=file]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.upload input[type=file]:focus-visible + .upload__btn{
  outline:3px solid var(--red);outline-offset:3px;
}
.upload__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:.75rem 1.375rem;
  border:2px solid var(--navy-800);
  border-radius:var(--r-sm);
  background:var(--navy-800);color:#fff;
  font-size:var(--fs-sm);font-weight:800;letter-spacing:.02em;
  white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.upload__btn:hover{background:var(--navy-600);border-color:var(--navy-600)}
.upload__btn .ico{width:17px;height:17px}

/* Selected-file chip */
.filechip{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  text-align:left;
}
.filechip .ico{width:20px;height:20px;color:var(--navy-600);flex:none}
.filechip__meta{flex:1;min-width:0}
.filechip__name{
  display:block;font-size:var(--fs-sm);font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.filechip__size{display:block;font-size:var(--fs-xs);color:var(--muted)}
.filechip__remove{
  display:grid;place-items:center;
  width:32px;height:32px;flex:none;
  border-radius:var(--r-sm);
  color:var(--muted);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.filechip__remove:hover{background:#FFF1F3;color:var(--red-600)}
.filechip__remove .ico{width:16px;height:16px;color:inherit}

/* --- Status / success ---------------------------------------------------- */
.form-status{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  margin-top:var(--sp-5);padding:var(--sp-4);
  border-radius:var(--r-sm);font-size:var(--fs-sm);line-height:1.55;
}
.form-status:empty{display:none}
.form-status .ico{width:18px;height:18px;flex:none;margin-top:2px}
.form-status.is-error{background:#FFF1F3;color:#8E1020;border:1px solid #F3C6CD}
.form-status.is-working{background:var(--paper-2);color:var(--body);border:1px solid var(--line)}
.form-status.is-ok{background:#EEF8F1;color:#17603A;border:1px solid #BFE3CC}

.form-summary{
  margin-bottom:var(--sp-5);padding:var(--sp-4);
  background:#FFF1F3;border:1px solid #F3C6CD;border-radius:var(--r-sm);
  color:#8E1020;font-size:var(--fs-sm);
}
.form-summary ul{margin:var(--sp-2) 0 0;padding-left:1.1rem;list-style:disc}
.form-summary a{color:#8E1020;text-decoration:underline}

.form-success{text-align:center;padding:var(--sp-8) var(--sp-4)}
.form-success .ico{width:52px;height:52px;color:#1E9E5A;margin:0 auto var(--sp-5)}
.form-success h2{margin-bottom:var(--sp-4)}
.form-success p{max-width:52ch;margin-inline:auto}

.btn .btn-spinner{
  width:16px;height:16px;flex:none;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;
  display:none;
}
.btn.is-busy .btn-spinner{display:block;animation:spin .7s linear infinite}
.btn.is-busy{pointer-events:none;opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn.is-busy .btn-spinner{animation-duration:1.6s}
}

/* --- Contact detail cards ------------------------------------------------ */
.contact-card{
  display:block;
  padding:var(--sp-5) var(--sp-6);
  background:var(--paper);
  border:1px solid var(--line);
  border-left:3px solid var(--red);
  border-radius:var(--r-md);
  transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.contact-card + .contact-card{margin-top:var(--sp-4)}
.contact-card:hover{box-shadow:var(--shadow-md)}
.contact-card__label{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--sp-2);
}
.contact-card__label .ico{width:15px;height:15px;color:var(--red-600)}
.contact-card__value{
  font-size:1.0625rem;font-weight:800;color:var(--ink);
  letter-spacing:-.01em;line-height:1.45;
}
.contact-card__value a{color:var(--ink)}
.contact-card__value a:hover{color:var(--red-600)}
.contact-card__value a + a{display:block}

/* --- Office cards with map ----------------------------------------------- */
.office{
  display:flex;flex-direction:column;height:100%;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.office__body{padding:var(--sp-6)}
.office__body h3{
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-h4);margin-bottom:var(--sp-3);
}
.office__body h3 img{width:26px;height:auto;border-radius:3px;flex:none}
.office__body p{font-size:var(--fs-sm);line-height:1.65}
.office__body b{display:block;color:var(--ink);margin-bottom:var(--sp-2)}
.office iframe{display:block;width:100%;height:300px;border:0;margin-top:auto}

/* Footer credit — text only, deliberately quiet */
.credit-text{
  font-size:var(--fs-xs);
  color:var(--on-dark-muted);
  letter-spacing:.02em;
}
.credit-text a{
  font-size:inherit;
  color:rgba(255,255,255,.82);
  font-weight:700;
}
.credit-text a:hover{color:#fff}

/* --------------------------------------------------------------------------
   22. WORK ARCHIVE  (our-work)
   Each project is a native <details>. The disclosure works with no JS at all;
   the filter row is the only part that needs it, and without JS every project
   simply stays visible.
   -------------------------------------------------------------------------- */
.filters{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);
  margin-bottom:var(--sp-10);
}
.filter{
  padding:.5rem 1.125rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:var(--paper);
  font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.04em;color:var(--body);
  transition:background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.filter:hover{border-color:var(--navy-600);color:var(--navy-800)}
.filter[aria-pressed="true"]{
  background:var(--navy-800);border-color:var(--navy-800);color:#fff;
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-6);
  align-items:start;
}
@media (max-width:900px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.work-grid{grid-template-columns:1fr}}

.work{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.work:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md)}
.work[open]{border-color:var(--navy-600);box-shadow:var(--shadow-md)}

.work__summary{
  display:block;cursor:pointer;list-style:none;
  position:relative;
}
.work__summary::-webkit-details-marker{display:none}
.work__summary:focus-visible{outline:3px solid var(--red);outline-offset:-3px}

.work__media{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.work__media img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease)}
.work:hover .work__media img{transform:scale(1.05)}

.work__body{padding:var(--sp-5) var(--sp-6);display:flex;align-items:flex-start;gap:var(--sp-4)}
.work__text{flex:1;min-width:0}
.work__scope{
  display:block;font-size:.6875rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--red-600);margin-bottom:var(--sp-2);
}
.work__title{display:block;margin:0;font-size:1.0625rem;font-weight:800;line-height:1.3;letter-spacing:-.015em}
.work__loc{display:block;font-size:var(--fs-sm);color:var(--muted);margin-top:2px}

.work__chev{
  flex:none;display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line-strong);
  color:var(--navy-800);
  transition:transform var(--dur) var(--ease),
             background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.work__chev .ico{width:16px;height:16px}
.work:hover .work__chev{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.work[open] .work__chev{transform:rotate(180deg);background:var(--navy-800);border-color:var(--navy-800);color:#fff}
@media (prefers-reduced-motion:reduce){.work__chev{transition:none}}

.work__panel{
  padding:0 var(--sp-6) var(--sp-6);
  border-top:1px solid var(--line);
  margin-top:0;
}
.work__panel p{
  font-size:var(--fs-sm);line-height:1.7;
  padding-top:var(--sp-5);
}

.work-empty{
  padding:var(--sp-12) var(--sp-4);
  text-align:center;color:var(--muted);
  font-size:var(--fs-sm);
}

/* ==========================================================================
   23. MOTION
   Everything here is additive. Content is never hidden waiting for a script:
   the reveal states live behind `.js`, and every animation is switched off
   under prefers-reduced-motion, which restores the plain rendered state.
   ========================================================================== */

/* --- Scroll progress ------------------------------------------------------ */
.progress{
  position:fixed;top:0;left:0;z-index:1000;
  height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--red-700),var(--red),var(--red-300));
  pointer-events:none;
}

/* --- Staggered group reveal ----------------------------------------------
   Children of a revealed group cascade. --stagger-i is set by the script;
   the cap keeps a 21-card grid from taking three seconds to arrive.        */
.js [data-reveal-group] > *{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease);
  transition-delay:calc(var(--stagger-i,0) * 55ms);
}
.js [data-reveal-group].is-revealed > *{opacity:1;transform:none}

/* --- Stroke icons draw themselves in -------------------------------------
   stroke-dasharray and stroke-dashoffset are inherited SVG properties, so
   setting them on the outer <svg> reaches the <use> shadow content.        */
.js [data-draw] svg{
  stroke-dasharray:260;
  stroke-dashoffset:260;
}
.js [data-draw].is-revealed svg,
.js [data-reveal-group].is-revealed [data-draw] svg{
  animation:dcDraw 1100ms var(--ease) forwards;
  animation-delay:calc(var(--stagger-i,0) * 55ms + 120ms);
}
@keyframes dcDraw{to{stroke-dashoffset:0}}

/* --- The short red rule draws out ---------------------------------------- */
.js [data-reveal] .rule,
.js [data-reveal-group] .rule{width:0;transition:width 620ms var(--ease) 220ms}
.js [data-reveal].is-revealed .rule,
.js [data-reveal-group].is-revealed .rule{width:52px}

/* --- Hero copy arrives in sequence ---------------------------------------
   Pure CSS keyed off .is-active, so the first slide animates even with no
   JavaScript at all.                                                       */
.hero__slide.is-active .hero__copy > *{
  animation:dcHeroIn 760ms var(--ease) backwards;
}
.hero__slide.is-active .hero__copy > *:nth-child(1){animation-delay:120ms}
.hero__slide.is-active .hero__copy > *:nth-child(2){animation-delay:260ms}
.hero__slide.is-active .hero__copy > *:nth-child(3){animation-delay:400ms}
@keyframes dcHeroIn{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

/* The accent word settles a beat after its line */
.hero__slide.is-active .hero__copy .accent{
  animation:dcAccentIn 900ms var(--ease) 340ms backwards;
  display:inline-block;
}
@keyframes dcAccentIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* --- Header brand mark ---------------------------------------------------- */
.brand img{transition:transform 520ms var(--ease)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}

/* --- Stat figures lift as they count ------------------------------------- */
.js .stats__grid.is-revealed .stat{animation:dcStatIn 640ms var(--ease) backwards}
.js .stats__grid.is-revealed .stat:nth-child(1){animation-delay:0ms}
.js .stats__grid.is-revealed .stat:nth-child(2){animation-delay:90ms}
.js .stats__grid.is-revealed .stat:nth-child(3){animation-delay:180ms}
.js .stats__grid.is-revealed .stat:nth-child(4){animation-delay:270ms}
.js .stats__grid.is-revealed .stat:nth-child(5){animation-delay:360ms}
@keyframes dcStatIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* --- Everything off when the viewer asks for less motion ------------------ */
@media (prefers-reduced-motion:reduce){
  .progress{display:none}
  .js [data-reveal-group] > *{opacity:1;transform:none;transition:none}
  .js [data-draw] svg{stroke-dasharray:none;stroke-dashoffset:0}
  .js [data-draw].is-revealed svg,
  .js [data-reveal-group].is-revealed [data-draw] svg{animation:none}
  .js [data-reveal] .rule,
  .js [data-reveal-group] .rule{width:52px;transition:none}
  .hero__slide.is-active .hero__copy > *,
  .hero__slide.is-active .hero__copy .accent,
  .js .stats__grid.is-revealed .stat{animation:none}
  .brand img{transition:none}
  .brand:hover img{transform:none}
}

/* ==========================================================================
   24. INTERIOR PAGE LAYER
   The 23 interior pages were authored against Bootstrap plus the old theme.
   Rather than rebuild 23 pages of hand-written markup (and risk the copy),
   their layout classes are reimplemented here on the new tokens: ~2 KB of
   grid and component rules replacing 156 KB of Bootstrap and 247 KB of
   template CSS. The pages inherit the new type, colour and spacing system.
   ========================================================================== */

/* --- 12-column grid ------------------------------------------------------
   Column rules are written as `.row > .col-x` so they outrank the span-12
   default; a bare `.col-lg-4` would lose to `.row > [class*="col-"]`.     */
.row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--sp-6);
}
.row > [class*="col-"]{grid-column-end:span 12;min-width:0}
.row > .col-6{grid-column-end:span 6}

/* Below 768px a 12-track grid is impossible: eleven 24px gaps need 264px of
   gutter before a single column gets any width, which overflowed a 320px
   screen. Drop to two tracks so .col-6 keeps its pairing and everything
   else goes full width. */
@media (max-width:767.98px){
  .row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
  .row > [class*="col-"]{grid-column-end:span 2}
  .row > .col-6{grid-column-end:span 1}
}
/* On the smallest screens a two-up pair inside an already-padded panel came
   out at ~103px, which is too narrow for labels like "Years of experience". */
@media (max-width:399.98px){
  .row > .col-6{grid-column-end:span 2}
}
@media (min-width:768px){
  .row > .col-md-6{grid-column-end:span 6}
}
/* Spans are written as grid-column-END so an offset can set the START
   without clobbering them. The `grid-column: span N` shorthand also sets
   start, so `offset-lg-2` collapsed col-lg-8 to a single 73px track. */
@media (min-width:992px){
  .row > .col-lg-3{grid-column-end:span 3}
  .row > .col-lg-4{grid-column-end:span 4}
  .row > .col-lg-5{grid-column-end:span 5}
  .row > .col-lg-6{grid-column-end:span 6}
  .row > .col-lg-7{grid-column-end:span 7}
  .row > .col-lg-8{grid-column-end:span 8}
  .row > .col-lg-9{grid-column-end:span 9}
  .row > .col-lg-12{grid-column-end:span 12}
  .row > .offset-lg-2{grid-column-start:3}
}
.g-4{gap:var(--sp-6)}
.gx-5{column-gap:clamp(2rem,4vw,3.5rem)}

/* --- Sections ------------------------------------------------------------
   The old pages were dark end to end. They become light like the rest of
   the rebuilt site; the dark page-head, CTA and footer bookend them.       */
section.section-dark,
section.bg-dark{
  background:var(--paper);
  color:var(--body);
  padding-block:var(--section-y);
}
section.section-dark.no-top{padding-top:0}
section.section-dark h1,section.section-dark h2,
section.section-dark h3,section.section-dark h4,
section.section-dark h5{color:var(--ink)}
section.section-dark.text-light,
section.section-dark .text-light{color:var(--body)}

/* The interior page header keeps the dark treatment */
#subheader{
  background:var(--navy-900);
  background-image:radial-gradient(900px 420px at 88% -10%, rgba(225,27,48,.22), transparent 68%);
  color:var(--on-dark-body);
  padding-block:clamp(3rem,2rem + 4vw,5.5rem) !important;
  border-bottom:2px solid var(--red);
}
#subheader h1{color:#fff;text-transform:uppercase;letter-spacing:-.025em}
#subheader .lead{color:rgba(255,255,255,.82);max-width:64ch}
#subheader nav{font-size:var(--fs-xs);color:var(--on-dark-muted);margin-bottom:var(--sp-5)}
#subheader nav a{color:var(--on-dark-muted)}
#subheader nav a:hover{color:#fff}

/* --- Panels -------------------------------------------------------------- */
.bg-dark-2{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  color:var(--body);
}
a.bg-dark-2{
  display:block;
  transition:border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
a.bg-dark-2:hover{
  border-color:var(--line-strong);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}
a.bg-dark-2 h4{color:var(--ink)}
a.bg-dark-2:hover h4{color:var(--red-600)}

/* --- Eyebrow (was .subtitle, with a decorative icon font) ---------------- */
.subtitle{
  display:block;
  font-size:var(--fs-eyebrow);
  font-weight:800;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--red-600);
}

/* --- Buttons ------------------------------------------------------------- */
.btn-main{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:.875rem 1.5rem;
  border:2px solid var(--red);
  border-radius:var(--r-sm);
  background:var(--red);color:#fff;
  font-size:var(--fs-sm);font-weight:800;letter-spacing:.02em;
  white-space:nowrap;
  transition:background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn-main:hover{background:var(--red-700);border-color:var(--red-700);color:#fff;box-shadow:var(--shadow-md)}
.btn-main.btn-line{background:transparent;color:var(--navy-800);border-color:var(--line-strong)}
.btn-main.btn-line:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.btn-main.btn-white{background:#fff;color:var(--navy-800);border-color:#fff}
.btn-main.btn-small{padding:.625rem 1.125rem;font-size:var(--fs-xs)}
.btn-main.w-100{width:100%}
/* Interior pages carry long labels ("View corporate event management"), which
   at 320px pushed a nowrap button past the viewport. Let them wrap. */
@media (max-width:480px){
  .btn-main{white-space:normal;text-align:center}
}

/* --- Lists --------------------------------------------------------------- */
.ul-check{display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
.ul-check li{
  position:relative;padding-left:var(--sp-8);
  font-size:var(--fs-sm);line-height:1.6;
}
/* Tick drawn in CSS — no icon font */
.ul-check li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:16px;height:9px;
  border-left:2px solid var(--red);
  border-bottom:2px solid var(--red);
  transform:rotate(-45deg);
}
.ul-style-2{display:grid;gap:var(--sp-3)}

.cap-block{margin-top:var(--sp-8)}
.cap-block h4{margin-bottom:var(--sp-3)}
.cap-list{display:grid;gap:var(--sp-2);font-size:var(--fs-sm)}
.cap-list li{padding-left:var(--sp-5);position:relative;line-height:1.6}
.cap-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--red);
}

/* --- Service detail two-column flow --------------------------------------
   The converter wraps the prose in .svc-body so the aside can sit in its own
   grid cell. Spanning it across rows instead invented empty rows and left a
   1,000px hole in the middle of every service page.                        */
.svc-flow{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
@media (min-width:992px){
  .svc-flow{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .svc-body{grid-column:1;grid-row:1}
  .svc-aside{
    grid-column:2;grid-row:1;
    position:sticky;top:calc(var(--header-h) + 24px);
  }
}
.svc-aside h3{font-size:var(--fs-h4);margin-bottom:var(--sp-3)}
.svc-aside p{font-size:var(--fs-sm);margin-bottom:var(--sp-5)}

/* --- Utilities the interior pages rely on -------------------------------- */
.rounded-1{border-radius:var(--r-lg)}
.d-block{display:block}
.text-center{text-align:center}
.w-100{width:100%}
.h-100{height:100%}
.w-80px{width:80px}
.w-40{width:40%}
.w-20{width:20%}
.abs{position:absolute}
.relative{position:relative}
.align-items-start{align-items:start}
.fs-14{font-size:var(--fs-sm)}
.fs-16{font-size:var(--fs-base)}
.fs-30{font-size:var(--fs-h3)}
.fs-60{font-size:clamp(2.5rem,2rem + 2vw,3.5rem)}
.op-2{opacity:.55}
.op-7{color:var(--muted)}
.op-8{color:var(--body)}
.id-color{color:var(--red-600)}
.spacer-single{height:var(--sp-8)}
.border-bottom-white-op-1{border-bottom:1px solid var(--line);padding-bottom:var(--sp-6)}
.border-top-white-op-1{border-top:1px solid var(--line);padding-top:var(--sp-6)}

.p-2{padding:var(--sp-2)}
.p-30{padding:var(--sp-6)}
.p-40{padding:clamp(1.5rem,1rem + 2vw,2.5rem)}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:var(--sp-1)}
.mb-2{margin-bottom:var(--sp-2)}
.mb-3{margin-bottom:var(--sp-4)}
.mb-4{margin-bottom:var(--sp-6)}
.mb-5{margin-bottom:var(--sp-8)}
.mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-4)}
.mt-4{margin-top:var(--sp-6)}
.mt-5{margin-top:var(--sp-8)}
.me-2{margin-right:var(--sp-2)}
.me-4{margin-right:var(--sp-6)}
.ms-2{margin-left:var(--sp-2)}
.pb-4{padding-bottom:var(--sp-6)}
.py-4{padding-block:var(--sp-6)}

/* ==========================================================================
   25. CASE STUDY
   ========================================================================== */

.cs-lede{
  max-width:62ch;
  font-size:var(--fs-lead);
  line-height:1.65;
}

.cs-hero{
  margin-block:var(--sp-10);
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:21/9;
  background:var(--paper-3);
}
.cs-hero img{width:100%;height:100%;object-fit:cover}

/* Two-column body: prose left, sticky fact rail right */
.cs-body{display:grid;grid-template-columns:1fr;gap:var(--sp-10)}
@media (min-width:992px){
  .cs-body{grid-template-columns:minmax(0,1fr) 320px;align-items:start}
  .cs-main{grid-column:1}
  .cs-rail{grid-column:2;position:sticky;top:calc(var(--header-h) + 24px)}
}

.cs-section + .cs-section{margin-top:var(--sp-12)}
.cs-section h2{
  font-size:var(--fs-h3);
  margin-bottom:var(--sp-5);
  letter-spacing:-.02em;
}
.cs-section p{max-width:68ch;line-height:1.75}
.cs-section p + p{margin-top:var(--sp-4)}

/* The constraint — the part that actually differentiates a bid */
.cs-constraint{
  border-left:3px solid var(--red);
  padding:var(--sp-5) 0 var(--sp-5) var(--sp-6);
  margin-top:var(--sp-6);
  background:linear-gradient(90deg,rgba(225,27,48,.04),transparent 60%);
}
.cs-constraint p{font-size:1.0625rem;line-height:1.7;color:var(--ink);max-width:60ch}

/* Scope chips linking to the service pages that did the work */
.cs-scope{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.cs-scope a{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:.5rem 1rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.03em;color:var(--navy-800);
  transition:background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.cs-scope a:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.cs-scope .ico{width:14px;height:14px}

/* Fact rail */
.cs-facts{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
}
.cs-facts dl{display:grid;gap:var(--sp-5);margin:0}
.cs-facts dt{
  font-size:.6875rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--sp-1);
}
.cs-facts dd{
  margin:0;font-size:var(--fs-sm);font-weight:700;
  color:var(--ink);line-height:1.5;
}

/* ---- Placeholders -------------------------------------------------------
   Deliberately loud. This site already shipped with invented testimonials
   presented as real; anything the client still owes has to be impossible to
   miss rather than quietly plausible.                                       */
.todo{
  display:block;
  border:2px dashed #C2860B;
  border-radius:var(--r-md);
  background:repeating-linear-gradient(135deg,#FFFBF0,#FFFBF0 10px,#FEF6E3 10px,#FEF6E3 20px);
  padding:var(--sp-5) var(--sp-6);
  margin-top:var(--sp-5);
  color:#6B4A05;
  max-width:68ch;
}
.todo::before{
  content:"To supply — do not publish with this in place";
  display:block;
  font-size:.6875rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
  color:#A06F09;
  margin-bottom:var(--sp-3);
}
.todo p{font-size:var(--fs-sm);line-height:1.65;color:#6B4A05;max-width:none}
.todo p + p{margin-top:var(--sp-3)}
.todo ul + p{margin-top:var(--sp-4)}
.todo ul{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.todo li{
  font-size:var(--fs-sm);line-height:1.6;
  padding-left:var(--sp-5);position:relative;
}
.todo li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:6px;height:6px;border-radius:50%;background:#C2860B;
}
.todo--inline{display:inline-block;padding:.25rem .625rem;margin:0;border-width:1px}
.todo--inline::before{display:none}

/* Related work at the foot of a case study */
.cs-more{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
@media (max-width:900px){.cs-more{grid-template-columns:1fr}}

/* --- Featured case studies, top of Our Work ------------------------------
   These were only reachable by expanding a project card, which buried the
   three strongest pages on the site. They lead the page now.              */
.featured{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);
  margin-bottom:var(--sp-16);
}
@media (max-width:900px){.featured{grid-template-columns:1fr}}

.feature{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.feature__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.feature__media img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease)}
.feature:hover .feature__media img{transform:scale(1.05)}
.feature__tag{
  position:absolute;top:var(--sp-4);left:var(--sp-4);
  padding:.3125rem .625rem;border-radius:var(--r-pill);
  background:var(--red);color:#fff;
  font-size:.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.feature__body{padding:var(--sp-6);display:flex;flex-direction:column;flex:1}
.feature__body h3{font-size:1.0625rem;font-weight:800;letter-spacing:-.015em;margin-bottom:var(--sp-2)}
.feature__meta{
  display:block;font-size:.6875rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red-600);margin-bottom:var(--sp-3);
}
.feature__body p{font-size:var(--fs-sm);line-height:1.6;color:var(--body);flex:1}
.feature__body .link-more{margin-top:var(--sp-5)}
.feature__link::after{content:"";position:absolute;inset:0;z-index:1}

/* Marker on the project cards that have a case study behind them */
.work__badge{
  display:inline-block;margin-left:var(--sp-2);
  padding:.125rem .5rem;border-radius:var(--r-pill);
  background:#FDECEE;color:var(--red-600);
  font-size:.625rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  vertical-align:2px;
}

/* --- Proof band (replaces the invented testimonials) --------------------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
@media (max-width:1100px){.proof{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.proof{grid-template-columns:1fr}}

.proof__item{
  position:relative;display:flex;flex-direction:column;
  padding:var(--sp-6);
  background:var(--navy-700);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
a.proof__item:hover{border-color:rgba(255,255,255,.30);transform:translateY(-3px)}
.proof__figure{
  display:block;
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);
  font-weight:800;line-height:1.05;letter-spacing:-.03em;
  color:#fff;margin-bottom:var(--sp-3);
}
.proof__label{
  display:block;font-size:var(--fs-sm);font-weight:700;
  color:#fff;margin-bottom:var(--sp-2);
}
.proof__item p{font-size:var(--fs-xs);line-height:1.6;color:var(--on-dark-body);flex:1}
.proof__item .link-more{margin-top:var(--sp-5);font-size:var(--fs-xs)}

/* --- Testimonials --------------------------------------------------------
   Quote cards, not running text. The card carries the quote; the foot of the
   card carries the attribution — an initials monogram, a name, a role and the
   organisation. An unattributed quote is worth nothing here, so the markup
   has no variant without a name: if a client will not be named, drop the card.
   ------------------------------------------------------------------------- */
.tm-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-6);align-items:stretch;
}
@media (max-width:1000px){.tm-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.tm-grid{grid-template-columns:1fr}}

.tm{
  position:relative;display:flex;flex-direction:column;
  margin:0;                          /* figure carries a UA margin */
  padding:var(--sp-8) var(--sp-7,1.75rem) var(--sp-6);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.tm::before{                       /* red hairline across the top edge */
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--red-300));
  transform:scaleX(0);transform-origin:left;
  transition:transform 420ms var(--ease);
}
.tm:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--line-strong);
}
.tm:hover::before{transform:scaleX(1)}

.tm__mark{
  width:34px;height:34px;flex:none;
  color:var(--red);opacity:.22;
  margin-bottom:var(--sp-5);
}

.tm__quote{
  margin:0;flex:1;
  font-size:1.0625rem;line-height:1.7;
  font-weight:500;color:var(--ink);
  letter-spacing:-.005em;
  text-wrap:pretty;
}

.tm__foot{
  display:flex;align-items:center;gap:var(--sp-4);
  margin-top:var(--sp-6);padding-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.tm__monogram{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--navy-800);color:#fff;
  font-size:.875rem;font-weight:800;letter-spacing:.02em;
}
.tm__who{min-width:0}
.tm__name{
  display:block;font-size:var(--fs-sm);font-weight:800;
  color:var(--ink);letter-spacing:-.01em;
}
.tm__role{
  display:block;font-size:var(--fs-xs);line-height:1.5;
  color:var(--muted);margin-top:2px;
}
.tm__org{color:var(--red-600);font-weight:700}

/* Dark surface variant, if the section is ever moved onto navy */
.section--dark .tm{
  background:var(--navy-700);
  border-color:var(--on-dark-line);
  box-shadow:none;
}
.section--dark .tm__quote{color:#fff}
.section--dark .tm__name{color:#fff}
.section--dark .tm__role{color:var(--on-dark-muted)}
.section--dark .tm__org{color:var(--red-300)}
.section--dark .tm__foot{border-top-color:var(--on-dark-line)}
.section--dark .tm__monogram{background:var(--navy-500)}
.section--dark .tm:hover{border-color:rgba(255,255,255,.30)}