/* ==========================================================================
   Tzamal Jacobson — Homepage Redesign
   Design language mirrored from tzamal-medical.co.il/test/
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  --brand:          #d00b4d;
  --brand-dark:     #a80940;
  --brand-tint:     #f7d1de;
  --ink:            #3f444b;
  --ink-soft:       #7a7a7a;
  --ink-faint:      #9aa0a6;
  --surface:        #ffffff;
  --surface-alt:    #f2f2f2;
  --hairline:       #e4e4e6;

  --font: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --container: 1200px;
  --gutter: 24px;

  --header-h: 92px;

  --radius-card: 4px;
  --radius-pill: 50px;

  --shadow-card: 0 2px 10px rgba(0, 0, 0, .05);
  --shadow-card-hover: 0 14px 34px rgba(63, 68, 75, .14);
  --shadow-header: 0 2px 14px rgba(0, 0, 0, .09);

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

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--surface);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 14px 22px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.section { padding: 88px 0; }
.section--alt { background: var(--surface-alt); }

/* Section heading: uppercase slate title + short crimson rule underneath */
.section-head { text-align: center; margin-bottom: 56px; }

.section-head h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  letter-spacing: .01em;
  text-transform: uppercase;
}

.section-head h2::after {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  margin: 18px auto 0;
  background: var(--brand);
}

.section-head p {
  max-width: 720px;
  margin: 18px auto 0;
  font-size: 16px;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  border: 2px solid var(--brand);
  transition: background .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:hover,
.btn:focus-visible {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-2px);
}

.btn--ghost { background: transparent; color: var(--brand); }
.btn--ghost:hover,
.btn--ghost:focus-visible { background: var(--brand); color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background .35s var(--ease), height .35s var(--ease),
              box-shadow .35s var(--ease);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent);
  pointer-events: none;
  transition: opacity .35s var(--ease);
}

.site-header.is-stuck {
  height: 76px;
  background: #fff;
  box-shadow: var(--shadow-header);
}
.site-header.is-stuck::before { opacity: 0; }

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { position: relative; z-index: 2; display: block; flex: none; }
.brand img {
  width: 132px;
  /* Knocked out to solid white while the header floats over the hero
     photography; returns to full colour once the header turns white. */
  filter: brightness(0) invert(1);
  transition: width .35s var(--ease), filter .35s var(--ease);
}
.site-header.is-stuck .brand img { width: 112px; }

.site-header.is-stuck .brand img,
.site-header.is-open .brand img { filter: none; }

/* --- Primary navigation ------------------------------------------------- */
.nav { position: relative; z-index: 2; }

.nav > ul {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a,
.nav .nav-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s var(--ease), background .25s var(--ease);
}

.site-header.is-stuck .nav a,
.site-header.is-stuck .nav .nav-toggle-label { color: var(--ink); }

.nav > ul > li > a:hover,
.nav > ul > li > .nav-toggle-label:hover,
.nav > ul > li:focus-within > a { color: var(--brand); }
.site-header.is-stuck .nav > ul > li > a:hover { color: var(--brand); }

.nav .is-current > a {
  background: var(--brand);
  color: #fff !important;
}
.nav .is-current > a:hover { background: var(--brand-dark); }

.nav .caret {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--ease);
}
.nav .has-sub:hover .caret,
.nav .has-sub:focus-within .caret { transform: translateY(1px) rotate(225deg); }

/* Dropdowns */
.nav .sub {
  position: absolute;
  top: calc(100% + 14px);
  min-width: 264px;
  padding: 10px 0;
  background: #fff;
  border-top: 3px solid var(--brand);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease),
              visibility .25s var(--ease);
}
.nav .has-sub { position: relative; }
.nav .has-sub:hover > .sub,
.nav .has-sub:focus-within > .sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav .sub a {
  display: block;
  padding: 10px 22px;
  border-radius: 0;
  color: var(--ink) !important;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  line-height: 1.45;
}
.nav .sub a:hover { background: var(--surface-alt); color: var(--brand) !important; }

/* Burger */
.burger {
  display: none;
  position: relative;
  z-index: 2;
  width: 44px; height: 44px;
  padding: 10px;
  color: #fff;
}
.site-header.is-stuck .burger,
.site-header.is-open .burger { color: var(--ink); }
.burger span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.site-header.is-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .burger span:nth-child(2) { opacity: 0; }
.site-header.is-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero slider
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  max-height: 900px;
  overflow: hidden;
  background: var(--ink);
}

.hero-track { position: absolute; inset: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease), visibility 1s var(--ease);
}
.hero-slide.is-active { opacity: 1; visibility: visible; }

.hero-slide__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 7s linear;
}
.hero-slide.is-active .hero-slide__media { transform: scale(1); }

/* Dark scrim so white type always clears contrast on photography */
.hero-slide__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Sized for the lightest photograph in the deck — the headline has to clear
     contrast on a near-white operating-theatre shot, not just a dark one. */
  background: linear-gradient(
    100deg,
    rgba(16, 20, 26, .90) 0%,
    rgba(16, 20, 26, .74) 42%,
    rgba(16, 20, 26, .46) 100%
  );
}

.hero-slide__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Crimson vertical rule + stacked headline, straight from the reference */
.hero-copy {
  max-width: 780px;
  padding-left: 26px;
  border-left: 6px solid var(--brand);
  color: #fff;
  transform: translateY(26px);
  opacity: 0;
  transition: transform .9s var(--ease) .25s, opacity .9s var(--ease) .25s;
}
.hero-slide.is-active .hero-copy { transform: translateY(0); opacity: 1; }

.hero-copy .lead {
  display: block;
  font-size: clamp(24px, 3.6vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
}

.hero-copy .headline {
  display: block;
  margin-top: 2px;
  font-size: clamp(34px, 5.4vw, 76px);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.hero-copy .btn { margin-top: 34px; }

/* Arrows */
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: #fff;
  opacity: .8;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.hero-arrow:hover { opacity: 1; }
.hero-arrow--prev { left: 10px; }
.hero-arrow--next { right: 10px; }
.hero-arrow i {
  width: 16px; height: 16px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.hero-arrow--prev i { transform: rotate(-135deg); }
.hero-arrow--next i { transform: rotate(45deg); }

/* Dots */
.hero-dots {
  position: absolute;
  left: 0; right: 0;
  bottom: 34px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.hero-dots button {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.hero-dots button.is-active {
  background: var(--brand);
  transform: scale(1.25);
}

/* Crimson keyline closing the hero, as on the reference */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: var(--brand);
  z-index: 2;
}

/* ==========================================================================
   Divisions
   ========================================================================== */
.grid-divisions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--brand-tint);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--brand);
  box-shadow: var(--shadow-card-hover);
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-alt);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.06); }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 30px;
  text-align: center;
}

.card__body h3 {
  font-size: 19px;
  line-height: 1.35;
  min-height: 2.7em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__body p {
  margin: 12px 0 24px;
  font-size: 14.5px;
  line-height: 1.75;
  flex: 1;
}

.card__body .btn { align-self: center; }

/* ==========================================================================
   In numbers
   ========================================================================== */
.grid-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.stat { text-align: center; }

.stat__icon {
  width: 68px; height: 68px;
  margin: 0 auto 18px;
  color: var(--brand);
}
.stat__icon svg { width: 100%; height: 100%; }

.stat__value {
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--brand);
}

.stat__label {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.stat__note {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
}

/* ==========================================================================
   Group intro
   ========================================================================== */
.group-intro {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: center;
}

.group-intro__logo img { width: 260px; margin-inline: auto; }

.group-intro__body h2 {
  font-size: clamp(24px, 2.8vw, 30px);
  text-transform: uppercase;
}
.group-intro__body h2::after {
  content: "";
  display: block;
  width: 100px; height: 4px;
  margin: 16px 0 24px;
  background: var(--brand);
}
.group-intro__body p { margin: 0 0 16px; }
.group-intro__body .btn { margin-top: 12px; }

/* ==========================================================================
   Partners marquee
   ========================================================================== */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 26px;
  align-items: stretch;
  animation: marquee 55s linear infinite;
}

/* Several supplier logos are supplied as files with their own white
   background. Seating every logo on an identical white tile keeps the row even
   instead of leaving stray white rectangles on the grey section. */
.marquee__tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 186px;
  height: 96px;
  padding: 16px 20px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Partner logos stay in their own brand colours — greyscale would misrepresent
   the manufacturers' marks. */
.marquee img {
  /* Scale every logo to the same optical size — several source files carry wide
     white margins, so `width: auto` would leave them noticeably smaller. */
  max-width: 100%;
  width: auto;
  height: 52px;
  object-fit: contain;
  transition: transform .3s var(--ease);
}
.marquee img:hover { transform: scale(1.06); }

.partners-cta { margin-top: 52px; text-align: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--surface-alt);
  padding-top: 72px;
  font-size: 14.5px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr .8fr 1.3fr;
  gap: 56px;
  padding-bottom: 56px;
}

.footer-about img { width: 190px; margin-bottom: 22px; }
.footer-about p { margin: 0 0 20px; line-height: 1.75; }

.footer-contact li {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  line-height: 1.6;
}
.footer-contact svg { flex: none; width: 17px; height: 17px; margin-top: 4px; color: var(--brand); }
.footer-contact a:hover { color: var(--brand); }

.footer-col h3 {
  margin-bottom: 22px;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.footer-col h3::after {
  content: "";
  display: block;
  width: 46px; height: 3px;
  margin-top: 12px;
  background: var(--brand);
}

.footer-menu li { margin-bottom: 11px; }
.footer-menu a {
  color: var(--brand);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .04em;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.footer-menu a:hover { color: var(--brand-dark); padding-left: 5px; }

/* Contact form */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-form .full { grid-column: 1 / -1; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 15px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-form textarea { min-height: 104px; resize: vertical; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(208, 11, 77, .12);
}
.contact-form ::placeholder { color: var(--ink-faint); }

.contact-form button {
  width: 100%;
  padding: 13px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  border-radius: 3px;
  transition: background .25s var(--ease);
}
.contact-form button:hover { background: var(--brand-dark); }

.form-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* Footer bottom bar — solid crimson strip, as on the reference */
.footer-bottom {
  background: var(--brand);
  padding: 13px 0;
  color: #fff;
}
.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-bottom a { opacity: .88; transition: opacity .25s var(--ease); }
.footer-bottom a:hover { opacity: 1; text-decoration: underline; }

/* Back to top */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(208, 11, 77, .34);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top i {
  width: 11px; height: 11px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(2px) rotate(-45deg);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Progressive enhancement: the start state is only applied once the inline
   head script has confirmed JS is running, so a scripting failure can never
   leave a section permanently invisible. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .nav a, .nav .nav-toggle-label { padding: 10px 11px; font-size: 13px; }
  .grid-divisions { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-forms { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --header-h: 76px; }

  .burger { display: block; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background: #fff;
    box-shadow: var(--shadow-header);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
  }
  .site-header.is-open { background: #fff; box-shadow: var(--shadow-header); }
  .site-header.is-open::before { opacity: 0; }
  .site-header.is-open .nav { opacity: 1; visibility: visible; transform: none; }

  .nav > ul { display: block; padding: 10px 0 18px; }
  .nav a, .nav .nav-toggle-label {
    color: var(--ink) !important;
    border-radius: 0;
    padding: 13px 24px;
    justify-content: space-between;
  }
  .nav .is-current > a { background: none; color: var(--brand) !important; }

  .nav .sub {
    position: static;
    min-width: 0;
    padding: 0;
    border-top: 0;
    box-shadow: none;
    background: var(--surface-alt);
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav .has-sub.is-open > .sub { display: block; }
  .nav .has-sub.is-open .caret { transform: translateY(1px) rotate(225deg); }
  .nav .sub a { padding-left: 40px; }

  .section { padding: 64px 0; }
  .section-head { margin-bottom: 40px; }

  .hero { height: auto; min-height: 0; max-height: none; }
  .hero-track { position: relative; height: 78vh; min-height: 480px; }
  .hero-arrow { width: 42px; height: 42px; }
  .hero-arrow--prev { left: 2px; }
  .hero-arrow--next { right: 2px; }

  .grid-stats { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; }

  .group-intro { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .group-intro__body h2::after { margin-inline: auto; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }

  .grid-divisions { grid-template-columns: 1fr; }
  .card__body h3 { min-height: 0; }

  .hero-copy { padding-left: 18px; border-left-width: 4px; }
  .hero-dots { bottom: 20px; }

  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-form { grid-template-columns: 1fr; }

  .footer-bottom .container { justify-content: flex-start; }
  .marquee__track { gap: 40px; }
}

/* --- Motion preferences ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero-slide__media { transform: none; }
}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */

/* On inner pages the header is opaque from the first paint — there is no hero
   photograph behind it to knock the logo out against. */
body.is-inner { padding-top: var(--header-h); }
body.is-inner .site-header { background: #fff; box-shadow: var(--shadow-header); }
body.is-inner .site-header::before { opacity: 0; }
body.is-inner .nav a,
body.is-inner .nav .nav-toggle-label { color: var(--ink); }
body.is-inner .brand img { filter: none; }
body.is-inner .burger { color: var(--ink); }

/* --- Page banner -------------------------------------------------------- */
.page-banner {
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 70px 0;
  background: var(--ink) center / cover no-repeat;
  text-align: center;
  overflow: hidden;
}
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 22, 28, .58), rgba(18, 22, 28, .72));
}
.page-banner > .container { position: relative; }

.page-banner h1 {
  color: #fff;
  font-size: clamp(28px, 4.4vw, 50px);
  text-transform: uppercase;
  letter-spacing: .01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .38);
}
.page-banner .eyebrow {
  display: block;
  margin-bottom: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .82;
}
.page-banner p {
  max-width: 760px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, .9);
  font-size: 17px;
}
.page-banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: var(--brand);
}

/* --- Breadcrumb --------------------------------------------------------- */
.breadcrumb {
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: var(--ink-faint); }
.breadcrumb a { transition: color .25s var(--ease); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 500; }

/* --- Prose -------------------------------------------------------------- */
.prose { max-width: 820px; }
.prose h2 {
  margin: 44px 0 16px;
  font-size: clamp(22px, 2.4vw, 28px);
  text-transform: uppercase;
}
.prose h2:first-child { margin-top: 0; }
.prose h2::after {
  content: "";
  display: block;
  width: 84px; height: 4px;
  margin-top: 14px;
  background: var(--brand);
}
.prose h3 { margin: 30px 0 10px; font-size: 19px; }
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 20px; }
.prose ul li { position: relative; padding-left: 24px; margin-bottom: 9px; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
}
.prose a:not(.btn) { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* Pull quote — the reference's grey panel with the oversized quote mark */
.quote-panel {
  max-width: 900px;
  margin: 0 auto;
  padding: 46px 48px 52px;
  background: var(--surface-alt);
  text-align: center;
}
.quote-panel h2 { font-size: clamp(22px, 2.6vw, 28px); }
.quote-panel .mark {
  display: block;
  margin: 14px 0 6px;
  color: var(--brand);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
}
.quote-panel p {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.75;
  color: var(--ink);
}

/* Photo section with an offset white content card */
.feature-band {
  position: relative;
  padding: 84px 0;
  background: var(--ink) center / cover no-repeat;
}
.feature-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 30, 48, .38);
}
.feature-band > .container { position: relative; }
.feature-band__card {
  max-width: 720px;
  margin-left: auto;
  padding: 42px 44px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
}
.feature-band__card h2 { margin-top: 0; }

/* --- Division layout ---------------------------------------------------- */
.division-layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 56px;
  align-items: start;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-top: 12px;
}

.expertise {
  padding: 28px 28px 30px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius-card);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.expertise:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.expertise h3 { font-size: 17px; margin-bottom: 14px; }
.expertise ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  font-size: 14.5px;
  line-height: 1.65;
}
.expertise ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

/* Contact chips for department / team leads */
.leads { display: grid; gap: 12px; margin: 0 0 8px; }

.lead-chip {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  background: var(--surface-alt);
  border-left: 3px solid var(--brand);
  border-radius: 3px;
}
.lead-chip__avatar {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
}
.lead-chip__role {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lead-chip__name { display: block; font-weight: 600; color: var(--ink); line-height: 1.35; }
.lead-chip__mail { font-size: 13px; word-break: break-all; }
.lead-chip__mail:hover { color: var(--brand); text-decoration: underline; }

.expertise .leads { margin: 0 0 16px; }
.expertise .lead-chip { background: #fbfbfc; padding: 10px 13px; }
.expertise .lead-chip__avatar { width: 32px; height: 32px; font-size: 12px; }

/* Sticky sidebar */
.side-panel {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  display: grid;
  gap: 22px;
}

.side-card {
  padding: 26px 24px 28px;
  background: var(--surface-alt);
  border-radius: var(--radius-card);
}
.side-card h3 {
  margin-bottom: 18px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.side-card h3::after {
  content: "";
  display: block;
  width: 42px; height: 3px;
  margin-top: 10px;
  background: var(--brand);
}

.side-nav li { margin-bottom: 3px; }
.side-nav a {
  display: block;
  padding: 9px 14px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.45;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.side-nav a:hover { background: #fff; color: var(--brand); }
.side-nav .is-active a {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

.side-card--cta { background: var(--brand); color: rgba(255, 255, 255, .92); }
.side-card--cta h3 { color: #fff; }
.side-card--cta h3::after { background: rgba(255, 255, 255, .55); }
.side-card--cta p { margin: 0 0 18px; font-size: 14.5px; }
.side-card--cta .btn {
  background: #fff;
  color: var(--brand);
  border-color: #fff;
  width: 100%;
}
.side-card--cta .btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* --- Division index grid ------------------------------------------------ */
.division-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.division-nav-grid a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  transition: border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.division-nav-grid a:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.division-nav-grid svg { flex: none; width: 26px; height: 26px; color: var(--brand); }

/* --- Team grid ---------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 30px;
}
.team-member { text-align: center; }
.team-member__photo {
  width: 168px; height: 168px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--brand), #7d0a34);
  color: #fff;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: .02em;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(63, 68, 75, .16);
}
.team-member__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-member h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .03em; }
.team-member .role {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.team-member .mail {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--brand);
}
.team-member .mail:hover { text-decoration: underline; }

/* --- Partner wall ------------------------------------------------------- */
.partner-wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.partner-wall div {
  display: grid;
  place-items: center;
  min-height: 130px;
  padding: 22px;
  background: #fff;
  transition: background .25s var(--ease);
}
.partner-wall div:hover { background: #fcfcfd; }
.partner-wall img {
  max-width: 100%;
  max-height: 62px;
  width: auto;
  object-fit: contain;
  transition: transform .3s var(--ease);
}
.partner-wall div:hover img { transform: scale(1.05); }

/* --- News / careers cards ----------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.post {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.post:hover {
  transform: translateY(-5px);
  border-color: var(--brand);
  box-shadow: var(--shadow-card-hover);
}
.post__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-alt); }
.post__media img { width: 100%; height: 100%; object-fit: cover; }
.post__body { flex: 1; display: flex; flex-direction: column; padding: 24px 24px 26px; }
.post__meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
}
.post__body h3 { margin: 10px 0 10px; font-size: 18px; }
.post__body p { margin: 0 0 20px; font-size: 14.5px; flex: 1; }
.post__more { font-weight: 600; color: var(--brand); font-size: 14px; }
.post__more:hover { text-decoration: underline; }

/* Job rows */
.job-list { display: grid; gap: 14px; }
.job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 24px;
  align-items: center;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-card);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.job:hover { transform: translateX(3px); box-shadow: var(--shadow-card); }
.job h3 { font-size: 18px; }
.job__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
.job__tags span { display: flex; align-items: center; gap: 6px; }
.job__tags svg { width: 14px; height: 14px; color: var(--brand); }

/* --- Contact page ------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: start;
}
.contact-details h2 { margin-top: 0; }
.contact-details .footer-contact { margin-top: 26px; }
.contact-details .footer-contact li { margin-bottom: 18px; font-size: 15.5px; }
.contact-details .footer-contact svg { width: 19px; height: 19px; }

.map-embed {
  margin-top: 64px;
  aspect-ratio: 21 / 8;
  min-height: 320px;
  border: 1px solid var(--hairline);
  background: var(--surface-alt);
  overflow: hidden;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.contact-card {
  padding: 36px 36px 40px;
  background: var(--surface-alt);
  border-radius: var(--radius-card);
}
.contact-card h2 { margin: 0 0 24px; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .division-layout { grid-template-columns: 1fr; gap: 44px; }
  .side-panel { position: static; grid-template-columns: 1fr 1fr; }
  .partner-wall { grid-template-columns: repeat(4, 1fr); }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .division-nav-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .page-banner { min-height: 240px; padding: 54px 0; }
  .feature-band__card { margin-left: 0; padding: 32px 28px; }
  .quote-panel { padding: 34px 26px 38px; }
  .expertise-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .map-embed { margin-top: 40px; }
}

@media (max-width: 640px) {
  .side-panel { grid-template-columns: 1fr; }
  .partner-wall { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: 1fr; }
  .division-nav-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .job { grid-template-columns: 1fr; }
  .contact-card { padding: 26px 22px 30px; }
}

/* Left-aligned section heading used inside inner-page columns. */
.block-head { margin: 46px 0 26px; }
.block-head h2 {
  font-size: clamp(20px, 2.2vw, 24px);
  text-transform: uppercase;
  letter-spacing: .01em;
}
.block-head h2::after {
  content: "";
  display: block;
  width: 84px; height: 4px;
  margin-top: 14px;
  background: var(--brand);
}

/* ==========================================================================
   Management — team grid + bio modal
   ========================================================================== */
.team-grid { row-gap: 56px; }

.team-member__photo {
  display: block;
  width: 168px; height: 168px;
  margin: 0 auto 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-alt);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(63, 68, 75, .16);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.team-member__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s var(--ease);
}
.team-member__photo:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(63, 68, 75, .24); }
.team-member__photo:hover img { transform: scale(1.05); }

.team-member h3 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.team-member .role {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  letter-spacing: .1em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.team-member__more {
  margin-top: 14px;
  padding: 4px 2px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.team-member__more:hover { border-bottom-color: var(--brand); }

.team-footnote {
  max-width: 640px;
  margin: 60px auto 0;
  text-align: center;
}
.team-footnote h3::after { margin-inline: auto; }

/* --- Modal -------------------------------------------------------------- */
.bio-modal {
  width: min(880px, calc(100vw - 40px));
  max-height: min(86vh, 780px);
  padding: 0;
  border: 0;
  border-top: 5px solid var(--brand);
  border-radius: var(--radius-card);
  background: #fff;
  color: var(--ink-soft);
  overflow: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .32);
}
.bio-modal::backdrop { background: rgba(16, 20, 26, .68); }

/* Entrance, skipped when the visitor asks for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .bio-modal[open] { animation: bio-in .3s var(--ease); }
  @keyframes bio-in {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
  }
}

.bio-modal__close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
  width: 46px; height: 46px;
  margin: 6px 6px -46px 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.bio-modal__close:hover { background: var(--brand); color: #fff; }

.bio-modal__inner {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 36px;
  padding: 44px 46px 48px;
  align-items: start;
}

.bio-modal__photo {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-alt);
  box-shadow: 0 10px 26px rgba(63, 68, 75, .16);
}
.bio-modal__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.bio-modal__body h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.bio-modal__role {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bio-modal__role::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin-top: 14px;
  background: var(--brand);
}
.bio-modal__mail {
  display: inline-block;
  margin: 14px 0 18px;
  color: var(--brand);
  font-size: 14.5px;
}
.bio-modal__mail:hover { text-decoration: underline; }
.bio-modal__body p { margin: 0 0 15px; font-size: 15px; }
.bio-modal__body p:last-child { margin-bottom: 0; }

/* Without JS a <dialog> never opens, so render every bio as ordinary content
   rather than hiding it from the reader entirely. */
html:not(.js) .bio-modal {
  display: block;
  position: static;
  width: auto;
  max-height: none;
  max-width: var(--container);
  margin: 0 auto 30px;
  box-shadow: var(--shadow-card);
}
html:not(.js) .bio-modal__close,
html:not(.js) .team-member__more { display: none; }

@media (max-width: 700px) {
  .bio-modal__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 34px 24px 36px;
    text-align: center;
  }
  .bio-modal__photo { width: 170px; margin-inline: auto; }
  .bio-modal__role::after { margin-inline: auto; }
  .bio-modal__body p { text-align: left; }
}

/* The statistics row follows however many figures are configured. */
.grid-stats--2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-inline: auto; }
.grid-stats--3 { grid-template-columns: repeat(3, 1fr); max-width: 960px; margin-inline: auto; }
@media (max-width: 640px) {
  .grid-stats--2, .grid-stats--3 { grid-template-columns: 1fr; }
}