/* ==========================================================================
   El Gibor Power Consultancy — stylesheet
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   2b. Preloader
   3.  Layout primitives
   4.  Typography helpers (kicker, section title)
   5.  Buttons & links
   6.  Top bar
   7.  Header & navigation
   8.  Hero (home)
   9.  Page hero (inner pages)
   10. Feature grid
   11. Split / about blocks
   12. Service cards
   13. Process steps
   14. Stats counters
   15. Team
   16. Testimonials
   17. CTA bands & newsletter
   18. Insights / articles
   19. Accordion (FAQ)
   20. Contact & forms
   21. Footer
   22. Floating controls
   23. Motion / reveal
   24. Responsive
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* brand */
  --red:        #ED1C24;
  --red-600:    #D0151C;
  --red-700:    #B01118;
  --red-tint:   #FDECED;

  --ink:        #24262A;   /* headings, and the dark section/button backgrounds */
  --ink-2:      #35383D;
  /* Body and secondary copy are black rather than grey. --ink-3 is the main
     body colour, --muted the secondary copy that used to be mid-grey. */
  --ink-3:      #000000;
  --muted:      #000000;

  --line:       #E5E8EC;
  --line-soft:  #EFF1F4;

  --bg:         #FFFFFF;
  --bg-soft:    #F6F7F9;
  --bg-dark:    #22242A;

  /* type */
  /* Poppins has no CJK glyphs, so the translated Chinese view falls through to
     these before the generic sans-serif. */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto,
          'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB',
          Arial, sans-serif;

  /* rhythm */
  --wrap:       1240px;
  --wrap-narrow: 860px;
  --gutter:     24px;
  /* Vertical rhythm. This one value drives the padding of nearly every
     section, so raise it to open the layout up or lower it to tighten. */
  --sec-y:      clamp(40px, 4.6vw, 72px);

  /* shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* shadow */
  --sh-1: 0 2px 10px rgba(29, 32, 38, .05);
  --sh-2: 0 12px 32px -10px rgba(29, 32, 38, .14);
  --sh-3: 0 26px 60px -18px rgba(29, 32, 38, .24);

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .35s;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  /* Every font size in this sheet is in rem, so this one value sets the overall
     type scale. A percentage (rather than a px value) keeps the site responsive
     to a visitor who has changed their browser's default font size. */
  font-size: 93.75%;          /* 15px when the browser default is 16px */
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;           /* paragraphs are light; UI elements set their own */
  font-size: 1rem;
  line-height: 1.66;
  color: var(--ink-3);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.015em;
}

p { margin: 0 0 .9em; }
p:last-child { margin-bottom: 0; }

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

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

/* Emphasis carries on weight alone and inherits its colour, so <strong> is never
   lighter than the black body text around it, and stays white on dark panels. */
strong, b { font-weight: 600; }

/* Light weight reads well at paragraph sizes but goes spindly on the small
   support text, so those hold at regular. */
.topbar,
.crumbs,
.post-card__meta,
.article__meta,
.form-note,
.field__error,
.float-card span,
.footer-bottom,
.quote-item__role,
.member__mail,
.side-contact,
.svc-card__list,
.stat__label,
.footer-blurb,
.cinfo__value { font-weight: 400; }

/* .alert and friends set display, which would otherwise beat the UA [hidden] rule. */
[hidden] { display: none !important; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

button { font: inherit; color: inherit; }

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--red);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.icn { flex: none; vertical-align: middle; }

/* ==========================================================================
   2b. Preloader
   --------------------------------------------------------------------------
   The loading screen. Three rules matter more than the styling:

   1. It is hidden by default and only shown on `html.js`, so a visitor with
      JavaScript disabled never sees an overlay nothing can remove.
   2. `.is-done` fades it out; `.is-gone` takes it out of the layout entirely
      so it cannot swallow clicks afterwards.
   3. Under prefers-reduced-motion nothing spins and the fade is near-instant.
   ========================================================================== */
.preloader { display: none; }

html.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  /* Side padding matters: without it the caption below is wider than a phone
     screen, and a flex column that overflows stops centring its own contents —
     the whole overlay ends up pushed off to one side. */
  padding: 0 24px;
  text-align: center;
  background: #fff;
  /* A whisper of brand colour, so it does not read as a blank white flash. */
  background-image: radial-gradient(120% 90% at 50% 0%, #FFF6F6 0%, #FFFFFF 62%);
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}

/* Already shown once this session — suppressed before it can paint. */
html.js.pl-seen .preloader { display: none; }

/* Stop the page behind from scrolling while the overlay is up. */
html.js body.is-loading { overflow: hidden; }

.preloader__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
}

/* Rotating arc. A conic gradient masked to a ring — one element, no SVG. */
.preloader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(237, 28, 36, 0) 0deg,
                             rgba(237, 28, 36, .15) 210deg, var(--red) 350deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: pl-spin 1.1s linear infinite;
}

.preloader__mark {
  display: grid;
  place-items: center;
  animation: pl-breathe 2.2s var(--ease) infinite;
}
.preloader__mark .logo-img,
.preloader__mark .logo-svg { width: auto; height: 46px; max-width: 88px; object-fit: contain; }

/* Progress bar. JS drives the width; the CSS only supplies the transition, so
   a stalled script leaves a static bar rather than a fake animated one. */
.preloader__track {
  position: relative;
  width: clamp(140px, 26vw, 220px);
  height: 2px;
  border-radius: 2px;
  background: rgba(36, 38, 42, .1);
  overflow: hidden;
}
.preloader__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--red-700), var(--red));
  transition: width .35s var(--ease);
}

.preloader__caption {
  max-width: 100%;
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.9;
  color: rgba(36, 38, 42, .45);
  /* The tagline is three items separated by middots; on a narrow screen it has
     to be allowed to wrap rather than force the overlay wider than the phone. */
  text-wrap: balance;
}
@media (max-width: 480px) {
  .preloader__caption { font-size: .66rem; letter-spacing: .1em; }
  html.js .preloader   { gap: 20px; }
}

/* Leaving: the overlay lifts slightly as it fades, which reads as the page
   arriving rather than as a layer being deleted. */
html.js .preloader.is-done {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5%);
}
html.js .preloader.is-gone { display: none; }

@keyframes pl-spin    { to { transform: rotate(360deg); } }
@keyframes pl-breathe {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(.94);  opacity: .82; }
}

@media (prefers-reduced-motion: reduce) {
  /* The rotation and the pulse go; the progress bar stays. It is the only thing
     on the screen indicating that something is happening, and with a minimum
     hold in place a completely static overlay reads as a frozen page. A bar
     growing along one axis is also not the kind of motion this setting is
     asking us to remove. */
  .preloader__ring,
  .preloader__mark { animation: none; }
  .preloader__ring { background: conic-gradient(from 0deg, var(--red-tint), var(--red)); }
  html.js .preloader { transition-duration: .15s; }
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sec-y); position: relative; }
.section--soft { background: var(--bg-soft); }
.section--tight { padding-block: clamp(30px, 3.2vw, 50px); }
.section--flush-top { padding-top: 0; }

.sec-head { max-width: 720px; margin-bottom: clamp(24px, 2.6vw, 38px); }
.sec-head--centre { margin-inline: auto; text-align: center; }
.sec-head p.lead { font-size: 1.06rem; color: var(--muted); margin-bottom: 0; }

.grid { display: grid; gap: clamp(18px, 2.2vw, 28px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Diagonal edges, the signature move of the reference design. */
.slant-b { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3vw), 0 100%); }
.slant-t { clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%); }
.slant-tb { clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%); }

/* ==========================================================================
   4. Typography helpers
   ========================================================================== */
.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  font-size: .95rem;
  font-weight: 400;
  color: var(--red);
  letter-spacing: .01em;
}
.kicker__rule {
  width: 46px;
  height: 2px;
  background: var(--red);
  flex: none;
  border-radius: 2px;
}
.kicker--centre { justify-content: center; }
.kicker--centre::after {
  content: '';
  width: 46px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
}
.on-dark .kicker, .kicker--light { color: #fff; }
.on-dark .kicker__rule, .kicker--light .kicker__rule,
.kicker--light.kicker--centre::after { background: rgba(255, 255, 255, .75); }

.sec-title {
  font-size: clamp(2rem, 3.9vw, 3.15rem);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: .55em;
}
.sec-title__accent {
  display: block;
  font-weight: 700;
  color: var(--red);
}
.on-dark .sec-title { color: #fff; }
.on-dark .sec-title__accent { color: #fff; }
.on-dark { color: rgba(255, 255, 255, .82); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

.title-sm { font-size: clamp(1.6rem, 2.4vw, 2.15rem); }

.lead { font-size: 1.08rem; color: var(--muted); }

/* Checked list */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li {
  position: relative;
  padding-left: 38px;
  margin-bottom: .8em;
  color: var(--ink-3);
}
.ticks li .icn {
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--red);
  padding: 3px;
  background: var(--red-tint);
  border-radius: var(--r-pill);
  width: 22px;
  height: 22px;
}
.ticks--2 { columns: 2; column-gap: 44px; }
.ticks--2 li { break-inside: avoid; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--red); }
.btn--primary:hover { --btn-bg: var(--red-700); }

.btn--dark { --btn-bg: var(--ink); }
.btn--dark:hover { --btn-bg: #000; }

.btn--white { --btn-bg: #fff; --btn-fg: var(--red); }
.btn--white:hover { --btn-fg: var(--red-700); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { --btn-fg: var(--red); border-color: var(--red); box-shadow: none; }

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, .55);
}
.btn--ghost-light:hover { --btn-bg: #fff; --btn-fg: var(--red); border-color: #fff; }

.btn--block { width: 100%; }
.btn--sm { padding: 11px 22px; font-size: .88rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Inline text link with arrow */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .93rem;
  color: var(--red);
}
.link-more .icn { transition: transform var(--dur) var(--ease); }
.link-more:hover .icn { transform: translateX(5px); }

/* ==========================================================================
   6. Top bar
   ========================================================================== */
.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
  font-size: .84rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
}
.topbar__right { display: flex; align-items: center; gap: 18px; }

.topbar__meta,
.topbar__social {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar__meta li,
.topbar__social li { display: flex; align-items: center; gap: 8px; margin: 0; }
.topbar__meta .icn { color: var(--red); }
.topbar a { color: rgba(255, 255, 255, .72); }
.topbar a:hover { color: #fff; }
.topbar__social { gap: 16px; }
.topbar__social a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.topbar__social a:hover { background: var(--red); color: #fff; }

/* --------------------------------------------------------------------------
   Language switcher — our own UI in front of the Google Translate widget
   -------------------------------------------------------------------------- */
.lang { position: relative; }

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-pill);
  background: none;
  color: rgba(255, 255, 255, .82);
  font-size: .82rem;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang__btn:hover { color: #fff; border-color: rgba(255, 255, 255, .45); }
.lang__btn .icn:first-child { color: var(--red); }
.lang__caret { opacity: .6; transition: transform var(--dur) var(--ease); }
.lang.is-open .lang__caret { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 210;
  min-width: 172px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility var(--dur);
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__menu li { margin: 0; }
.lang__menu button {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  text-align: left;
  font-size: .9rem;
  font-weight: 400;
  color: var(--ink-3);
  cursor: pointer;
}
.lang__menu button:hover { background: var(--bg-soft); color: var(--red); }
.lang__menu button.is-on { background: var(--red-tint); color: var(--red); font-weight: 600; }

/* The widget's own select is never shown — our menu sets its value. */
#google_translate_element { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Undo the layout damage the injected Google banner does ---------------
   Google adds a fixed banner iframe at the top of <body> and sets an inline
   `top` on <body>, which pushes the page down and leaves the banner sitting over
   our top bar. The class names have changed across versions, so all of the known
   ones are covered, plus any iframe carrying .skiptranslate.

   Deliberately NOT hiding .skiptranslate in general: the widget's own gadget
   markup also carries that class, and hiding it stops translation working. */
.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
iframe.skiptranslate,
body > iframe.skiptranslate,
body > .skiptranslate:not(#google_translate_element) { display: none !important; }

body { top: 0 !important; position: static !important; }

/* Google marks translated runs with these; keep them inheriting our styles. */
font[style], .goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* ==========================================================================
   7. Header & navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 26px -12px rgba(29, 32, 38, .22); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 88px;
}

.brand { display: flex; align-items: center; flex: none; }
.logo-img, .logo-svg { display: block; width: auto; height: 56px; }

/* The supplied logo has a mid-grey wordmark. On the dark footer that is too low
   in contrast, so brighten it — this keeps the red mark red, unlike inverting.
   Superseded automatically if a logo-light file is supplied (see config.php). */
.logo-img--light { filter: brightness(2.15) saturate(1.05); }
.site-header.is-stuck .logo-img,
.site-header.is-stuck .logo-svg { height: 44px; transition: height var(--dur) var(--ease); }

/* --- nav (desktop) --- */
.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__item { position: relative; margin: 0; }

.nav__link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 15px;
  color: var(--ink-2);
  font-size: .97rem;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
}
.nav__link::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  width: 0;
  height: 2px;
  background: var(--red);
  transform: translateY(-50%);
  transition: width var(--dur) var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--red); }
/* The current page is bolder as well as red. Weight is on .is-active only, not
   on :hover, so hovering never nudges the neighbouring items sideways. */
.nav__link.is-active { font-weight: 700; }
.nav__item:hover > .nav__link::before,
.nav__link.is-active::before { width: 14px; }
.nav__item:hover > .nav__link,
.nav__link.is-active { padding-left: 33px; }
.nav__caret { opacity: .55; }

/* --- dropdown --- */
.nav__sub {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 248px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility var(--dur);
  z-index: 10;
}
.nav__sub::before {
  content: '';
  position: absolute;
  inset: -14px 0 auto;
  height: 14px;
}
.nav__item--has-sub:hover > .nav__sub,
.nav__item--has-sub:focus-within > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__sub li { margin: 0; }
.nav__sub a {
  display: block;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: .93rem;
  font-weight: 500;
}
.nav__sub a:hover, .nav__sub a.is-active {
  background: var(--red-tint);
  color: var(--red);
}
/* Matches the top-level treatment: the current service is bolder too. */
.nav__sub a.is-active { font-weight: 700; }

.nav__close, .nav__toggle, .nav__cta { display: none; }

/* --- header actions --- */
.site-header__actions { display: flex; align-items: center; gap: 12px; flex: none; }

.pill-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.pill-phone:hover {
  background: var(--red-700);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}

.burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  place-items: center;
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(20, 22, 26, .5);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.nav-scrim.is-on { opacity: 1; }

/* ==========================================================================
   8. Hero (home)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.4vw), 0 100%);
}
/* All slides occupy the same grid cell, so the hero is exactly as tall as its
   tallest slide and no slide is ever counted twice in normal flow. */
.hero__viewport {
  position: relative;
  display: grid;
  grid-template-areas: 'slide';
}

.hero__slide {
  grid-area: slide;
  position: relative;
  display: grid;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s;
}
.hero__slide.is-on { opacity: 1; visibility: visible; }

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 8s linear;
}
.hero__slide.is-on .hero__bg { transform: scale(1); }
/* A slide that is off resets its slow zoom instantly rather than drifting back
   over 8s, so it is always ready at the same scale when it next appears. */
.hero__slide:not(.is-on) .hero__bg { transition: none; }

/* Gradient fallbacks used when no photograph is present */
.hero__bg.no-photo { background-image: none; }
.hero__slide:nth-child(1) .hero__bg.no-photo {
  background: radial-gradient(120% 120% at 78% 18%, #4A2024 0%, #2A2C33 46%, #1D1F24 100%);
}
.hero__slide:nth-child(2) .hero__bg.no-photo {
  background: radial-gradient(120% 120% at 22% 82%, #3A2A2C 0%, #26282E 48%, #1B1D22 100%);
}
.hero__slide:nth-child(3) .hero__bg.no-photo {
  background: radial-gradient(120% 120% at 50% 12%, #52161B 0%, #2C2E34 52%, #1E2025 100%);
}
/* Keeps the headline legible over any photograph while leaving the subject on
   the right side of the frame visible. */
.hero__bg.has-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(20, 22, 26, .95) 0%,
      rgba(20, 22, 26, .80) 34%,
      rgba(20, 22, 26, .48) 68%,
      rgba(20, 22, 26, .30) 100%);
}

/* Decorative geometry standing in for photography */
.hero__deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__deco span {
  position: absolute;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .07);
}
.hero__deco span:nth-child(1) { width: 620px; height: 620px; right: -160px; top: -190px; }
.hero__deco span:nth-child(2) { width: 420px; height: 420px; right: -40px; top: -90px; border-color: rgba(237, 28, 36, .3); }
.hero__deco span:nth-child(3) { width: 240px; height: 240px; right: 70px; top: 40px; background: rgba(237, 28, 36, .1); border: 0; }
.hero__deco span:nth-child(4) {
  width: 340px; height: 340px; left: -150px; bottom: -180px;
  border-color: rgba(237, 28, 36, .16);
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(68px, 9vw, 132px);
  max-width: 720px;
}
.hero__title {
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  font-weight: 200;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .5em;
}
.hero__title strong {
  display: block;
  font-weight: 700;
  color: #fff;
}
.hero__title em {
  font-style: normal;
  color: var(--red);
  font-weight: 700;
}
.hero__text {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .8);
  max-width: 560px;
  margin-bottom: 2.1em;
}

/* slider controls */
.hero__dots {
  position: absolute;
  right: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  gap: 14px;
}
.hero__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  /* dark ring keeps the dots visible over pale photographs too */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .28);
  transition: all var(--dur) var(--ease);
}
.hero__dot.is-on { background: var(--red); border-color: var(--red); transform: scale(1.35); }

/* quick-facts strip riding the hero's bottom edge */
.hero-strip { position: relative; z-index: 5; margin-top: -46px; }
.hero-strip__inner {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
}
.hero-strip__item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 30px 32px;
  border-right: 1px solid var(--line-soft);
}
.hero-strip__item:last-child { border-right: 0; }
.hero-strip__item .icn { color: var(--red); margin-top: 4px; }
.hero-strip__item h3 { font-size: 1.06rem; margin-bottom: .2em; font-weight: 600; }
.hero-strip__item p { font-size: .92rem; color: var(--muted); margin: 0; line-height: 1.6; }

/* ==========================================================================
   9. Page hero (inner pages)
   ========================================================================== */
.page-hero {
  position: relative;
  background: var(--bg-dark);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.page-hero__bg.no-photo {
  background: radial-gradient(110% 130% at 80% 10%, #4B2025 0%, #2A2C32 48%, #1E2025 100%);
}
.page-hero__bg.has-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(98deg,
      rgba(20, 22, 26, .94) 0%,
      rgba(20, 22, 26, .80) 40%,
      rgba(20, 22, 26, .52) 100%);
}
.page-hero__deco {
  position: absolute;
  right: -110px;
  top: -120px;
  width: 460px;
  height: 460px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(237, 28, 36, .28);
  pointer-events: none;
}
.page-hero__deco::after {
  content: '';
  position: absolute;
  inset: 70px;
  border-radius: var(--r-pill);
  background: rgba(237, 28, 36, .1);
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(44px, 5.6vw, 84px) clamp(56px, 7vw, 104px);
  max-width: 780px;
}
.page-hero__title {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  font-weight: 200;
  color: #fff;
  letter-spacing: -.025em;
  margin-bottom: .45em;
}
.page-hero__title strong { font-weight: 700; }
.page-hero__text { color: rgba(255, 255, 255, .8); font-size: 1.06rem; max-width: 620px; margin: 0; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  font-size: .88rem;
  color: rgba(255, 255, 255, .55);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: '/'; opacity: .5; }
.crumbs a { color: rgba(255, 255, 255, .8); }
.crumbs a:hover { color: #fff; }

/* ==========================================================================
   10. Feature grid
   ========================================================================== */
.features { display: grid; gap: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 44px); }
.feature { display: flex; gap: 18px; align-items: flex-start; }
.feature__icon {
  flex: none;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--red-tint);
  color: var(--red);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.feature:hover .feature__icon { background: var(--red); color: #fff; transform: translateY(-3px); }
.feature h3 { font-size: 1.16rem; font-weight: 600; margin-bottom: .3em; }
.feature p { font-size: .95rem; color: var(--muted); margin: 0; line-height: 1.68; }

/* ==========================================================================
   11. Split / about blocks
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 3.4vw, 56px);
  align-items: center;
}
.split--wide-l { grid-template-columns: 1.1fr .9fr; }
.split--wide-r { grid-template-columns: .9fr 1.1fr; }
.split__media { position: relative; }

/* Media panel that looks intentional whether or not a photo exists */
.media-panel {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background-size: cover;
  background-position: center;
  box-shadow: var(--sh-2);
}
.media-panel.no-photo {
  background: linear-gradient(150deg, #2C2E34 0%, #3A2126 58%, #ED1C24 190%);
}
.media-panel.no-photo::before {
  content: '';
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  right: -18%;
  top: -18%;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .12);
}
.media-panel.no-photo::after {
  content: '';
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  left: -12%;
  bottom: -14%;
  border-radius: var(--r-pill);
  background: rgba(237, 28, 36, .22);
}
.media-panel__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .1);
  font-size: clamp(6rem, 14vw, 11rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  user-select: none;
}
.media-panel--sm { aspect-ratio: 1 / 1; }

/* floating stat card over a media panel */
.float-card {
  position: absolute;
  right: -18px;
  bottom: -26px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: 22px 26px;
  display: flex;
  gap: 14px;
  align-items: center;
  max-width: 264px;
}
.float-card .icn { color: var(--red); flex: none; }
.float-card strong { display: block; font-size: 1.5rem; color: var(--ink); line-height: 1.1; font-weight: 700; }
.float-card span { font-size: .84rem; color: var(--muted); line-height: 1.45; display: block; }

/* ==========================================================================
   12. Service cards
   -------------------------------------------------------------------------
   Two kinds:
   .svc-tile  the large coloured tiles with illustrated icons, laid out in a
              staggered two-column grid (the reference design's services block)
   .svc-card  the compact bordered card, still used for cross-sell lists
   ========================================================================== */

/* --- staggered coloured tiles ------------------------------------------- */
.svc-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  align-items: start;
}
/* Offset the right-hand column so the tiles interlock, as in the reference. */
.svc-tiles > *:nth-child(even) { margin-top: clamp(18px, 2.6vw, 44px); }

.svc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.svc-tile:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }

.svc-tile__top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: clamp(14px, 1.8vw, 24px);
}
.svc-tile__icon {
  width: clamp(74px, 7vw, 96px);
  height: auto;
  transition: transform var(--dur) var(--ease);
}
.svc-tile:hover .svc-tile__icon { transform: scale(1.06) rotate(-2deg); }
.svc-tile__icon--svg { stroke-width: 1.2; }

.svc-tile__title {
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 300;
  letter-spacing: -.02em;
  margin-bottom: .5em;
}
.svc-tile__title a { color: inherit; }
.svc-tile__title a:hover { color: inherit; opacity: .82; }

.svc-tile__text { font-size: .98rem; line-height: 1.72; margin-bottom: 1.6em; }

.svc-tile__more {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .95rem;
  font-weight: 600;
}
.svc-tile__chev { transform: rotate(-90deg); transition: transform var(--dur) var(--ease); }
.svc-tile__more:hover .svc-tile__chev { transform: rotate(-90deg) translateY(-4px); }

/* tile colour treatments */
.svc-tile--white {
  background: #fff;
  border: 1px solid var(--line);
}
.svc-tile--white .svc-tile__title a { color: var(--ink); }
.svc-tile--white .svc-tile__text { color: var(--muted); }
.svc-tile--white .svc-tile__more { color: var(--red); }

.svc-tile--soft { background: var(--bg-soft); }
.svc-tile--soft .svc-tile__title a { color: var(--ink); }
.svc-tile--soft .svc-tile__text { color: var(--muted); }
.svc-tile--soft .svc-tile__more { color: var(--red); }

.svc-tile--dark { background: var(--ink); }
.svc-tile--dark .svc-tile__title a { color: #fff; }
.svc-tile--dark .svc-tile__text { color: rgba(255, 255, 255, .76); }
.svc-tile--dark .svc-tile__more { color: #fff; }

.svc-tile--red { background: var(--red); }
.svc-tile--red .svc-tile__title a { color: #fff; }
.svc-tile--red .svc-tile__text { color: rgba(255, 255, 255, .9); }
.svc-tile--red .svc-tile__more { color: #fff; }

/* --- compact bordered cards --------------------------------------------- */
.svc-grid { display: grid; gap: clamp(22px, 2.6vw, 32px); }

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 38px 34px 34px;
  background: #fff;
  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), background var(--dur) var(--ease);
}
.svc-card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-3);
  border-color: transparent;
}
.svc-card:hover::after { transform: scaleX(1); }

.svc-card__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--red-tint);
  color: var(--red);
  margin-bottom: 24px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.svc-card:hover .svc-card__icon { background: var(--red); color: #fff; }
.svc-card--ink .svc-card__icon { background: #EEF0F3; color: var(--ink); }
.svc-card--ink:hover .svc-card__icon { background: var(--ink); color: #fff; }
.svc-card--ink::after { background: var(--ink); }

.svc-card h3 { font-size: 1.32rem; font-weight: 600; margin-bottom: .45em; }
.svc-card h3 a { color: inherit; }
.svc-card:hover h3 a { color: var(--red); }
.svc-card--ink:hover h3 a { color: var(--ink); }
.svc-card p { font-size: .96rem; color: var(--muted); line-height: 1.7; }
.svc-card__foot { margin-top: auto; padding-top: 22px; }
.svc-card__n {
  position: absolute;
  top: 24px;
  right: 30px;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--line-soft);
  letter-spacing: -.04em;
  user-select: none;
}

/* mini list inside a card */
.svc-card__list { list-style: none; padding: 0; margin: 4px 0 0; }
.svc-card__list li {
  position: relative;
  padding-left: 20px;
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: .3em;
}
.svc-card__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .72em;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--red);
  border-radius: var(--r-pill);
}

/* ==========================================================================
   13. Process steps
   ========================================================================== */
/* The connector line is positioned to stay centred on the dot: its `top` is
   half the dot's height minus half the line's height. Adjust both together. */
.steps { display: grid; gap: clamp(20px, 2.4vw, 28px); counter-reset: step; }
.step { position: relative; padding-top: 40px; }
.step::before {
  content: '';
  position: absolute;
  top: 9px;              /* (20px dot / 2) - (2px line / 2) */
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--line);
}
.step::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--red);
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px var(--red-tint);
  transition: transform var(--dur) var(--ease);
}
.step:hover::after { transform: scale(1.25); }
.step__n {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.step h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: .35em; }
.step p { font-size: .94rem; color: var(--muted); margin: 0; line-height: 1.68; }

/* ==========================================================================
   14. Stats counters
   ========================================================================== */
.stats-band {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.stats-band::before {
  content: '';
  position: absolute;
  right: -140px;
  top: -140px;
  width: 420px;
  height: 420px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .06);
}
.stats-band::after {
  content: '';
  position: absolute;
  left: -90px;
  bottom: -160px;
  width: 320px;
  height: 320px;
  border-radius: var(--r-pill);
  background: rgba(237, 28, 36, .12);
}
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; z-index: 2; }
.stat { text-align: center; padding: 8px 12px; border-right: 1px solid rgba(255, 255, 255, .1); }
.stat:last-child { border-right: 0; }
.stat__n {
  display: block;
  font-size: clamp(2.3rem, 3vw, 3.3rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  letter-spacing: -.03em;
  margin-bottom: 10px;
}
.stat__n span { color: var(--red); }
.stat__label { font-size: .92rem; color: rgba(255, 255, 255, .66); line-height: 1.5; }

/* ==========================================================================
   15. Team
   ========================================================================== */
.team-grid { display: grid; gap: clamp(24px, 3vw, 34px); }
.member { text-align: left; }
.member__photo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1.14;
  background-size: cover;
  background-position: center top;
  margin-bottom: 20px;
}
.member__photo.no-photo {
  background: linear-gradient(160deg, #33363C 0%, #2A2C32 60%, #452226 100%);
  display: grid;
  place-items: center;
}
.member__initials {
  font-size: 3.1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .04em;
}
.member__photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.member:hover .member__photo::after { transform: scaleX(1); }
.member h3 { font-size: 1.18rem; font-weight: 600; margin-bottom: .15em; }
.member__role { font-size: .88rem; color: var(--red); font-weight: 500; margin-bottom: .7em; }
.member p { font-size: .93rem; color: var(--muted); line-height: 1.65; margin-bottom: .8em; }
/* Email and, where there is one, a direct line. Stacked rather than inline so a
   long address never pushes the number out of the card. */
.member__mail { font-size: .88rem; display: flex; align-items: center; gap: 7px; }
.member__mail + .member__mail { margin-top: 5px; }

/* --- Vacant post -----------------------------------------------------------
   Drawn as an open seat, not as a missing person: a flat outlined panel rather
   than the dark portrait tile, so the eye reads the filled posts first. */
.member--vacant .member__photo,
.member--vacant .member__photo.no-photo {
  background: var(--bg-soft);
  border: 1px dashed #CFD4DA;
  display: grid;
  place-items: center;
}
.member--vacant .member__photo::after { display: none; }
.member--vacant .member__vacancy {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: var(--red);
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
}
.member--vacant h3 { font-weight: 500; color: var(--ink-2); }
.member--vacant .member__mail { font-weight: 500; }

/* ==========================================================================
   15b. Sitemap page
   ========================================================================== */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}
.sitemap-h { font-size: 1.3rem; font-weight: 600; margin-bottom: 1em; }
.sitemap-list { display: flex; flex-direction: column; gap: 2px; list-style: none; }
.sitemap-list a {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sitemap-list a:hover { background: var(--bg-soft); color: var(--red); }
.sitemap-arrow { color: var(--red); margin-top: 4px; }
.sitemap-list strong { display: block; font-size: .97rem; font-weight: 500; }
.sitemap-list em {
  display: block;
  margin-top: 2px;
  font-size: .85rem;
  font-style: normal;
  font-weight: 300;
  color: var(--muted);
  opacity: .72;
}
.sitemap-note {
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .88rem;
}

/* ==========================================================================
   15c. Legal pages (privacy notice)
   --------------------------------------------------------------------------
   A long read, so it is set for reading: a narrow measure, clear space above
   each heading, and tables that scroll inside themselves rather than widening
   the page on a phone.
   ========================================================================== */
.legal__updated {
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  margin-bottom: 1.4em;
}
.legal h2 {
  font-size: 1.28rem;
  font-weight: 600;
  margin: 2.1em 0 .7em;
  padding-top: .5em;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p { margin-bottom: 1em; }
.legal .lead { margin-bottom: 1.6em; }

/* Ticks without the two-column layout the marketing pages use. */
.ticks--plain { display: block; margin-bottom: 1.2em; }
.ticks--plain li { margin-bottom: .5em; }

.legal__table { overflow-x: auto; margin: 0 0 1.3em; }
.legal__table table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: .9rem;
}
.legal__table th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  color: var(--ink-2);
  padding: 0 12px 9px 0;
  border-bottom: 1px solid var(--line);
}
.legal__table td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.legal__table tr:last-child td { border-bottom: 0; }

.legal__note {
  font-size: .88rem;
  padding: 14px 16px;
  background: var(--bg-soft);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.legal__foot {
  margin-top: 2.2em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
  font-weight: 500;
}

/* An anchored heading should not land under the sticky header. */
.legal h2[id] { scroll-margin-top: 110px; }

/* ==========================================================================
   16. Testimonials
   ========================================================================== */
.quotes { position: relative; }
.quotes__track { position: relative; min-height: 1px; }
.quote-item {
  display: none;
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}
.quote-item.is-on { display: block; animation: fadeUp .55s var(--ease) both; }
.quote-item__mark { color: var(--red); opacity: .9; margin-bottom: 20px; }
.quote-item blockquote {
  margin: 0 0 26px;
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -.01em;
}
.quote-item__who { font-weight: 600; color: var(--ink); font-size: 1rem; }
.quote-item__role { font-size: .88rem; color: var(--muted); }

.quotes__nav { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.quotes__dot {
  width: 32px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--line);
  cursor: pointer;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.quotes__dot.is-on { background: var(--red); width: 52px; }

/* ==========================================================================
   17. CTA bands & newsletter
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(112deg, #B01118 0%, #ED1C24 58%, #F04B52 100%);
  color: #fff;
  clip-path: polygon(0 2.4vw, 100% 0, 100% 100%, 0 calc(100% - 2.4vw));
  padding-block: clamp(54px, 6.4vw, 92px);
}
.cta-band::before {
  content: '';
  position: absolute;
  left: -120px;
  top: -120px;
  width: 400px;
  height: 400px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .16);
}
.cta-band::after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -140px;
  width: 340px;
  height: 340px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
}
.cta-band__inner { position: relative; z-index: 2; text-align: center; max-width: 760px; margin-inline: auto; }
.cta-band .sec-title { color: #fff; }
.cta-band .sec-title__accent { color: var(--ink); }
.cta-band p { color: rgba(255, 255, 255, .9); font-size: 1.06rem; margin-bottom: 2em; }

/* split CTA (dark, two-column) */
.cta-split {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(34px, 4.4vw, 62px);
  position: relative;
  overflow: hidden;
}
.cta-split::after {
  content: '';
  position: absolute;
  right: -90px;
  top: -90px;
  width: 300px;
  height: 300px;
  border-radius: var(--r-pill);
  background: rgba(237, 28, 36, .16);
}
.cta-split__body { position: relative; z-index: 2; }
.cta-split h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 300; color: #fff; margin-bottom: .4em; }
.cta-split h2 strong { font-weight: 700; }
.cta-split p { color: rgba(255, 255, 255, .72); margin: 0; }
.cta-split__actions { position: relative; z-index: 2; display: grid; gap: 12px; }

/* newsletter */
.newsletter {
  display: flex;
  gap: 12px;
  max-width: 560px;
  margin-inline: auto;
}
.newsletter input {
  flex: 1;
  min-width: 0;
  padding: 16px 26px;
  border: 0;
  border-radius: var(--r-pill);
  background: #fff;
  font: inherit;
  font-size: .96rem;
  color: var(--ink);
}
.newsletter input::placeholder { color: #9AA0A8; }
.newsletter .btn { flex: none; }

/* ==========================================================================
   18. Insights / articles
   ========================================================================== */
.post-grid { display: grid; gap: clamp(18px, 2.2vw, 28px); }

.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  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);
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: transparent; }
.post-card__media {
  position: relative;
  aspect-ratio: 16 / 9.6;
  background-size: cover;
  background-position: center;
}
.post-card__media.no-photo { background: linear-gradient(140deg, #2C2E34, #431F24 75%, #ED1C24 200%); }
.post-card__media .media-panel__mark { font-size: 4.4rem; }
.post-card__tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  background: var(--red);
  color: #fff;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--r-pill);
}
.post-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 12px;
}
.post-card h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.35; margin-bottom: .5em; }
.post-card h3 a { color: inherit; }
.post-card:hover h3 a { color: var(--red); }
.post-card p { font-size: .94rem; color: var(--muted); line-height: 1.68; }
.post-card__foot { margin-top: auto; padding-top: 18px; }

/* long-form article body */
.article { max-width: 780px; }
.article h2 {
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  font-weight: 600;
  margin-top: 1.35em;
  margin-bottom: .45em;
}
.article h2:first-child { margin-top: 0; }
.article p { font-size: 1.04rem; line-height: 1.72; }
.article ul { margin: 0 0 1.1em; padding-left: 0; list-style: none; }
.article ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: .6em;
  font-size: 1.02rem;
}
.article ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: .78em;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--red);
}
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  color: var(--muted);
}
.article__meta span { display: inline-flex; align-items: center; gap: 8px; }
.article__meta .icn { color: var(--red); }

.pull {
  margin: 2.2em 0;
  padding: 26px 30px;
  border-left: 3px solid var(--red);
  background: var(--bg-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 1.08rem;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.65;
}

/* sidebar */
.with-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(34px, 4.6vw, 70px);
  align-items: start;
}
.side-box {
  background: var(--bg-soft);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  margin-bottom: 24px;
}
.side-box--dark { background: var(--ink); color: rgba(255, 255, 255, .78); }
.side-box--dark h3 { color: #fff; }
.side-box h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1em; }
.side-nav { list-style: none; margin: 0; padding: 0; }
.side-nav li { margin: 0 0 6px; }
.side-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink-2);
  font-size: .94rem;
  font-weight: 500;
  transition: all var(--dur) var(--ease);
}
.side-nav a .icn { opacity: .4; transition: transform var(--dur) var(--ease); }
.side-nav a:hover, .side-nav a.is-active { background: var(--red); color: #fff; }
.side-nav a:hover .icn, .side-nav a.is-active .icn { opacity: 1; transform: translateX(3px); }

.side-contact { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.side-contact li { display: flex; gap: 12px; margin-bottom: 14px; }
.side-contact .icn { color: var(--red); flex: none; margin-top: 3px; }
.side-contact a { color: inherit; }
.side-contact a:hover { color: var(--red); }

/* ==========================================================================
   19. Accordion (FAQ)
   ========================================================================== */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.acc__btn:hover { color: var(--red); }
.acc__btn .icn {
  flex: none;
  color: var(--red);
  transition: transform var(--dur) var(--ease);
}
.acc__item.is-open .acc__btn { color: var(--red); }
.acc__item.is-open .acc__btn .icn { transform: rotate(45deg); }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p {
  padding-bottom: 26px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  max-width: 74ch;
}

/* ==========================================================================
   20. Contact & forms
   ========================================================================== */
/* --- icon + label + value blocks (the reference design's contact layout) --- */
.cinfo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 30px) clamp(18px, 2.2vw, 30px);
  padding-top: clamp(18px, 2.2vw, 26px);
  margin-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--line);
}
.cinfo { display: flex; gap: 18px; align-items: flex-start; }
.cinfo__icon { flex: none; color: var(--red); line-height: 0; margin-top: 2px; }
.cinfo__label {
  font-size: 1.24rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: .35em;
}
.cinfo__value { font-size: .96rem; color: var(--muted); line-height: 1.7; }
.cinfo__value a { color: var(--muted); }
.cinfo__value a:hover { color: var(--red); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
}
.contact-grid--4 { grid-template-columns: repeat(4, 1fr); margin-bottom: clamp(30px, 3.4vw, 46px); }

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
.contact-card__icon {
  flex: none;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--red-tint);
  color: var(--red);
}
.contact-card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: .3em; }
.contact-card p, .contact-card a { font-size: .95rem; color: var(--muted); margin: 0; line-height: 1.65; }
.contact-card a:hover { color: var(--red); }

.map-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  line-height: 0;
  background: var(--bg-soft);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
.map-frame--wide iframe { min-height: 460px; }

/* --- form --- */
.form-panel {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: clamp(28px, 3.6vw, 48px);
}
.form-panel--on-dark { background: #fff; }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.field .req { color: var(--red); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  font: inherit;
  font-size: .97rem;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field select { appearance: none; background-image: none; cursor: pointer; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-tint);
}
.field input::placeholder, .field textarea::placeholder { color: #A2A8B0; }

.field--select { position: relative; }
.field--select .icn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  color: var(--muted);
  pointer-events: none;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--red); background: #FFFBFB; }
.field__error { display: none; margin: 7px 0 0; font-size: .84rem; color: var(--red); }
.field.has-error .field__error { display: block; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.form-note { font-size: .84rem; color: var(--muted); margin: 16px 0 0; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* alerts */
.alert {
  display: flex;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  margin-bottom: 26px;
  font-size: .95rem;
  line-height: 1.6;
}
.alert .icn { flex: none; margin-top: 3px; }
.alert--ok { background: #EFF9F1; color: #1E6B34; }
.alert--ok .icn { color: #23864B; }
.alert--bad { background: var(--red-tint); color: var(--red-700); }
.alert--bad .icn { color: var(--red); }
.alert strong { display: block; color: inherit; }

/* ==========================================================================
   21. Footer
   ========================================================================== */
.site-footer {
  background: var(--bg-dark);
  color: rgba(255, 255, 255, .62);
  padding-block: clamp(40px, 4.6vw, 64px) 0;
  font-size: .95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: clamp(22px, 2.8vw, 40px);
  padding-bottom: clamp(26px, 3.2vw, 42px);
}
.footer-col .logo-svg, .footer-col .logo-img { height: 52px; margin-bottom: 22px; }
.footer-blurb { color: rgba(255, 255, 255, .58); font-size: .94rem; line-height: 1.75; }

.footer-h {
  font-size: 1.32rem;
  font-weight: 300;
  color: #fff;
  margin-bottom: 1em;
  letter-spacing: -.01em;
}
.footer-links, .footer-contact, .footer-social {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li { margin-bottom: .55em; }
.footer-links a {
  color: rgba(255, 255, 255, .62);
  position: relative;
  display: inline-block;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-links a:hover { color: #fff; transform: translateX(4px); }

.footer-contact li { display: flex; gap: 14px; margin-bottom: 18px; line-height: 1.65; }
.footer-contact .icn { color: var(--red); flex: none; margin-top: 4px; }
.footer-contact a { color: rgba(255, 255, 255, .62); }
.footer-contact a:hover { color: #fff; }

.footer-social { display: flex; gap: 10px; margin-top: 24px; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--red); transform: translateY(-3px); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 26px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  align-items: center;
  justify-content: space-between;
  font-size: .88rem;
}
/* The copyright and credit line. Smaller than the rest of the footer bottom on
   purpose: it is required, not read. */
.footer-legal {
  margin: 0;
  font-size: .74rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .45);
}
.footer-legal .icn { width: 12px; height: 12px; }
.footer-reg { display: inline-block; opacity: .8; }
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0; }
.footer-bottom__links li { margin: 0; }
.footer-bottom__links a { color: rgba(255, 255, 255, .58); }
.footer-bottom__links a:hover { color: #fff; }

/* ==========================================================================
   22. Floating controls
   ========================================================================== */
.float-wa {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 150;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: #25D366;
  color: #fff;
  box-shadow: var(--sh-2);
  transition: transform var(--dur) var(--ease);
}
.float-wa:hover { color: #fff; transform: scale(1.08); }

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 150;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all var(--dur) var(--ease);
  box-shadow: var(--sh-2);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--ink); }

/* ==========================================================================
   23. Motion / reveal
   ========================================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   24. Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .nav__link { padding-inline: 11px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .grid--4, .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-tile { padding: 24px 22px; }
  .stat:nth-child(2) { border-right: 0; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .with-side { grid-template-columns: 1fr; }
  .contact-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hero__dots { right: 18px; }
  .hero-strip__inner { grid-template-columns: 1fr; }
  .hero-strip__item { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .hero-strip__item:last-child { border-bottom: 0; }
  .cta-split { grid-template-columns: 1fr; }

  /* --- mobile navigation --- */
  .burger { display: grid; }
  .pill-phone { display: none; }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    z-index: 195;
    background: #fff;
    padding: 24px 22px 40px;
    overflow-y: auto;
    transform: translateX(102%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--sh-3);
    margin: 0;
  }
  body.nav-open .nav { transform: none; }

  .nav__close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
  }

  .nav__list { display: block; }
  .nav__item { border-bottom: 1px solid var(--line-soft); }
  .nav__link {
    padding: 15px 4px;
    font-size: 1.02rem;
  }
  .nav__link::before { display: none; }
  .nav__item:hover > .nav__link, .nav__link.is-active { padding-left: 4px; }
  .nav__caret { display: none; }

  .nav__toggle {
    display: grid;
    place-items: center;
    position: absolute;
    top: 6px;
    right: 0;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: transform var(--dur) var(--ease);
  }
  .nav__item.is-open > .nav__toggle { transform: rotate(180deg); color: var(--red); }

  .nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0 0 10px 10px;
    min-width: 0;
    display: none;
    border-radius: 0;
  }
  .nav__sub::before { display: none; }
  .nav__item.is-open > .nav__sub { display: block; animation: fadeUp .3s var(--ease) both; }
  .nav__item--has-sub:hover > .nav__sub { opacity: 1; }

  .nav__cta { display: block; margin-top: 26px; }
  .nav__phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 14px;
    font-weight: 600;
    color: var(--ink);
  }
  .nav__phone .icn { color: var(--red); }
}

@media (max-width: 860px) {
  .split, .split--wide-l, .split--wide-r { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .split--media-last .split__media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ticks--2 { columns: 1; }
  /* the interlocking offset stops making sense in one column */
  .svc-tiles { grid-template-columns: 1fr; }
  .svc-tiles > *:nth-child(even) { margin-top: 0; }
  .topbar .hide-md { display: none; }
  .float-card { right: 12px; bottom: -20px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4, .stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { justify-content: flex-start; }
  .stat { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); padding-bottom: 24px; }
  .stat:last-child { border-bottom: 0; padding-bottom: 8px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-grid--4 { grid-template-columns: 1fr; }
  .cinfo-grid { grid-template-columns: 1fr; }
  .topbar__meta li:not(:first-child) { display: none; }
  .newsletter { flex-direction: column; }
  .newsletter .btn { width: 100%; }
  .hero__dots { flex-direction: row; display: flex; top: auto; bottom: 22px; right: 50%; transform: translateX(50%); }
  .steps { gap: 22px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .link-more { width: auto; }
  .float-wa { width: 48px; height: 48px; left: 16px; bottom: 16px; }
  .to-top { right: 16px; bottom: 16px; }
}

@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .logo-img, .logo-svg { height: 42px; }
  .site-header__inner { min-height: 74px; }
  .svc-card { padding: 30px 24px 26px; }
  .form-panel { padding: 24px 20px; }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .topbar, .site-header, .site-footer, .float-wa, .to-top, .cta-band, .nav-scrim { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .page-hero { background: none; color: #000; clip-path: none; }
  .page-hero__title, .page-hero__text { color: #000; }
}

/* --- Team card: expertise tags and qualifications -------------------------
   Added when the real bios arrived from the brochure. Both are team-page only
   (the About teaser passes $detailed = false), so the teaser stays a teaser. */
.member__focus {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0 0 .9em;
  padding: 0;
}
.member__focus li {
  font-size: .74rem;
  font-weight: 400;
  line-height: 1.35;
  padding: 4px 9px;
  border-radius: 100px;
  background: var(--red-tint);
  color: var(--red-700);
  margin: 0;
}
.member__creds {
  font-size: .76rem !important;
  line-height: 1.55;
  color: var(--muted);
  opacity: .62;
  margin-bottom: .9em !important;
}

/* --- Case study: the before/after figure band ----------------------------
   Not the animated .stats counters: those imply a running total, and these are
   three fixed numbers from one engagement that need to be read together. */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.figure {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}
.figure--good { border-color: rgba(237, 28, 36, .28); background: var(--red-tint); }
.figure__n {
  display: block;
  font-size: clamp(1.6rem, 3.4vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink);
}
.figure--good .figure__n { color: var(--red-700); }
.figure__l {
  display: block;
  margin-top: 8px;
  font-size: .84rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
}

/* --- Service page: the "what goes wrong" panel ---------------------------
   Crosses, not ticks. The scope list above it uses ticks for things we do, and
   reusing them here would read as a second list of features. */
.risk-panel {
  margin-top: clamp(42px, 4.6vw, 64px);
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
}
.risk-panel__lead { font-size: .93rem; margin: .8em 0 0; max-width: 66ch; }
.risk-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px 26px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.risk-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.5;
}
.risk-list__x { color: var(--red); margin-top: 4px; flex: none; }