/* ============================================================
   SOD.DEL — website rebuild mockup
   Design system: light, minimal, navy. Same structural language
   as fineris.co, single navy accent instead of green.
   ============================================================ */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* surfaces */
  --bg:            #FFFFFF;
  --bg-alt:        #F7F9FB;
  --bg-tint:       #F1F5FA;
  --surface:       #FFFFFF;

  /* lines */
  --line:          #E4E8EE;
  --line-2:        #D3DAE4;

  /* type */
  --ink:           #0A1A2F;
  --body:          #4B5869;
  --faint:         #667085;   /* WCAG AA on white: 4.95:1 */

  /* navy accent */
  --navy:          #143A6B;
  --navy-deep:     #0B2547;
  --navy-soft:     #ECF1F8;
  --navy-line:     #CEDBEC;

  /* legacy aliases — single accent, kept so stray references resolve */
  --accent:        var(--navy);
  --accent-2:      var(--navy);
  --accent-soft:   var(--navy-soft);

  /* geometry */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --maxw: 1180px;
  --nav-h: 66px;

  --shadow-sm: 0 1px 2px rgba(10,26,47,0.04);
  --shadow:    0 1px 2px rgba(10,26,47,0.04), 0 12px 32px -16px rgba(10,26,47,0.14);
  --shadow-lg: 0 24px 60px -28px rgba(10,26,47,0.22);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
[id] { scroll-margin-top: 92px; }   /* keep anchor targets clear of the sticky nav */

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; position: relative; }
.section--tight { padding: 64px 0; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); letter-spacing: -0.038em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -0.032em; }
h3 { font-size: 1.16rem; }
p  { margin: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.13em; color: var(--faint);
  padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg);
}
.eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--navy); }

.lead { color: var(--body); font-size: 1.055rem; max-width: 62ch; }
.muted { color: var(--body); }
.dim { color: var(--faint); }
.grad { color: var(--navy); }
.mineral { color: var(--navy); }

.sec-head { max-width: 700px; margin-bottom: 52px; }
.sec-head .eyebrow { margin-bottom: 20px; }
.sec-head h2 { margin-bottom: 15px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head--center .lead { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: all 0.22s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; transition: transform 0.22s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary { background: var(--navy-deep); color: #fff; }
.btn--primary:hover { background: var(--navy); }

.btn--ghost { background: var(--bg); border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--sm { padding: 9px 16px; font-size: 0.87rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.89rem; color: var(--navy); }
.textlink:hover { color: var(--navy-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- backdrops (kept deliberately faint) ---------- */
.glow {
  position: absolute; pointer-events: none; border-radius: 50%;
  filter: blur(80px); opacity: 0.5; z-index: 0;
}
.glow--hero {
  width: 900px; height: 520px; top: -300px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(20,58,107,0.10), transparent 70%);
}
.glow--warm { display: none; }
.gridbg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10,26,47,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,26,47,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 10%, transparent 72%);
}
.section > .wrap { position: relative; z-index: 1; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.nav__inner {
  height: 100%; display: flex; align-items: center; gap: 16px;
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
}
.logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.logo img { height: 25px; }
.logo__tag {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--faint); border-left: 1px solid var(--line-2); padding-left: 10px;
}

.nav__links { display: flex; align-items: center; gap: 0; margin-left: 2px; flex-wrap: nowrap; }
.nav__item { position: relative; }
/* Bridges the 9px gap between the nav item and its dropdown. Without this the
   cursor leaves both elements on the way down, the menu closes, and the click
   lands on whatever is behind it. */
.nav__item::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
}
.nav__link {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 0.88rem; font-weight: 500; color: var(--body);
  white-space: nowrap; transition: all 0.16s ease; cursor: pointer;
}
.nav__link:hover, .nav__item:hover > .nav__link { color: var(--ink); background: var(--bg-alt); }
.nav__link--active { color: var(--ink); font-weight: 600; }
.nav__link--active::after {
  content: ''; position: absolute; bottom: -1px; left: 12px; right: 12px; height: 2px;
  background: var(--navy);
}
.caret { width: 12px; height: 12px; opacity: 0.55; }

/* mega menu */
.mega {
  position: absolute; top: calc(100% + 9px); left: -12px;
  min-width: 540px; padding: 18px;
  background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: all 0.2s var(--ease);
}
.nav__item:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__title {
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--faint); margin-bottom: 10px; padding-left: 10px;
}
.mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; }
.mega__grid--3 { grid-template-columns: repeat(3, 1fr); }
.mega__link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-sm);
  font-size: 0.875rem; color: var(--body); transition: all 0.14s ease;
}
.mega__link:hover { background: var(--bg-alt); color: var(--ink); }
.mega__link .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--navy); opacity: 0.5; flex-shrink: 0; }
.mega__foot {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-inline: 10px;
}
.mega__foot span { font-size: 0.8rem; color: var(--faint); }

.nav__cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav__burger {
  display: none; background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 8px 10px; color: var(--ink); cursor: pointer;
}

/* mobile drawer */
.drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
  background: var(--bg); padding: 24px; overflow-y: auto;
  display: none; flex-direction: column; gap: 2px;
}
.drawer.open { display: flex; }
.drawer a {
  padding: 15px 4px; border-bottom: 1px solid var(--line);
  font-size: 1.05rem; font-weight: 500; color: var(--ink);
}
.drawer .btn { margin-top: 22px; justify-content: center; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding: 92px 0 80px; overflow: hidden; text-align: center; }
.hero__inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.hero h1 { margin: 24px 0 20px; }
.hero .lead { margin: 0 auto 32px; font-size: 1.12rem; }
.hero .btn-row { justify-content: center; }

.hero--sub { padding: 68px 0 52px; text-align: left; }
.hero--sub .hero__inner { max-width: none; margin: 0; }
.hero--sub h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.hero--sub .lead { margin-left: 0; }

.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--faint); margin-bottom: 20px; }
.breadcrumb a:hover { color: var(--ink); }

/* stat strip */
.hero__stats {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 48px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg); overflow: hidden;
}
.hero__stat { flex: 1 1 160px; padding: 22px 18px; border-right: 1px solid var(--line); }
.hero__stat:last-child { border-right: 0; }
.hero__stat b { display: block; color: var(--ink); font-size: 1.7rem; font-weight: 600; letter-spacing: -0.03em; }
.hero__stat span { font-size: 0.79rem; color: var(--faint); }

/* ---------- logo marquee ---------- */
.marquee { position: relative; overflow: hidden; padding: 12px 0; }
.marquee::before, .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 130px; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: slide 48s linear infinite; align-items: center; }
.marquee__track img { height: 30px; width: auto; object-fit: contain; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee-label { text-align: center; font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin-bottom: 24px; }

/* on the alt background, fade to the alt colour */
.section--alt .marquee::before { background: linear-gradient(90deg, var(--bg-alt), transparent); }
.section--alt .marquee::after  { background: linear-gradient(270deg, var(--bg-alt), transparent); }

/* ============================================================
   CARDS & GRIDS
   ============================================================ */
.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }

.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px;
  transition: all 0.24s var(--ease);
}
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.card h3 { margin-bottom: 9px; font-size: 1.05rem; }
.card p { font-size: 0.92rem; color: var(--body); }

.card__ico {
  width: 40px; height: 40px; border-radius: var(--r); margin-bottom: 18px;
  display: grid; place-items: center;
  background: var(--navy-soft); border: 1px solid var(--navy-line);
  color: var(--navy);
}
.card__ico svg { width: 19px; height: 19px; }
.card__num { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; color: var(--faint); margin-bottom: 13px; display: block; }

/* industry tile */
.tile {
  display: flex; flex-direction: column; gap: 15px;
  padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); transition: all 0.24s var(--ease);
}
.tile:hover { border-color: var(--navy-line); box-shadow: var(--shadow-sm); }
.tile__img { width: 36px; height: 36px; object-fit: contain; filter: grayscale(1); opacity: 0.55; transition: all 0.24s ease; }
.tile:hover .tile__img { opacity: 0.9; }
.tile h4 { font-size: 0.96rem; font-weight: 600; }
.tile small { font-size: 0.79rem; color: var(--faint); display: block; margin-top: 3px; }
.tile__arrow { margin-top: auto; font-size: 0.79rem; font-weight: 600; color: var(--navy); opacity: 0; transition: opacity 0.22s ease; }
.tile:hover .tile__arrow { opacity: 1; }

/* split feature */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.split--rev > *:first-child { order: 2; }
.split__media {
  border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
  background: var(--bg-alt); box-shadow: var(--shadow);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.checklist { display: grid; gap: 13px; margin-top: 26px; padding: 0; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.94rem; color: var(--body); list-style: none; }
.checklist b { color: var(--ink); }
.check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; margin-top: 3px;
  background: var(--navy-soft); border: 1px solid var(--navy-line);
  display: grid; place-items: center; color: var(--navy); font-size: 10px; font-weight: 700;
}

/* brand card */
.brandcard { text-align: left; }

/* Square brand chip. These marks are 400x400 squares, so they get a square
   frame rather than being dropped into a wide letterbox. Every dimension is
   absolute — a percentage max-height on an image inside a grid or flex parent
   does not resolve reliably, which let the logos overflow and sit behind the
   text. Never reintroduce percentage caps here. */
.chip-logo {
  flex: 0 0 auto; width: 56px; height: 56px; padding: 7px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.chip-logo img { max-width: 42px; max-height: 42px; width: auto; height: auto; object-fit: contain; }

.brandcard__head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.brandcard__head > div { min-width: 0; }
.brandcard__head h3 { font-size: 1.02rem; margin: 0 0 2px; }
.brandcard__logo { /* legacy alias — same square chip */
  flex: 0 0 auto; width: 56px; height: 56px; padding: 7px; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.brandcard__logo img { max-width: 42px; max-height: 42px; width: auto; height: auto; object-fit: contain; }
.brandcard__meta { display: block; font-size: 0.76rem; color: var(--faint); margin: 0; }
.card > .brandcard__meta { margin-top: 12px; }

/* stats band */
.statband {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); overflow: hidden;
}
.statband > div { padding: 32px 26px; border-right: 1px solid var(--line); }
.statband > div:last-child { border-right: 0; }
.statband b { display: block; color: var(--ink); font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 600; letter-spacing: -0.04em; }
.statband span { font-size: 0.85rem; color: var(--faint); }

/* team */
.person { text-align: left; }
.person__img {
  aspect-ratio: 1; border-radius: var(--r); overflow: hidden; margin-bottom: 13px;
  border: 1px solid var(--line); filter: grayscale(1); transition: filter 0.3s ease;
}
.person:hover .person__img { filter: none; }
.person__img img { width: 100%; height: 100%; object-fit: cover; }
.person h4 { font-size: 0.93rem; }
.person small { font-size: 0.79rem; color: var(--faint); }

/* timeline */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 7px; bottom: 7px; width: 1px; background: var(--line); }
.tl { position: relative; padding-bottom: 28px; }
.tl::before {
  content: ''; position: absolute; left: -26px; top: 8px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--navy);
}
.tl b { font-size: 0.93rem; color: var(--navy); letter-spacing: 0.02em; }
.tl p { font-size: 0.91rem; color: var(--body); margin-top: 1px; }

/* ---------- product explorer ---------- */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: rgba(255,255,255,0.9); margin-bottom: 20px;
  position: sticky; top: calc(var(--nav-h) + 12px); z-index: 20;
  backdrop-filter: blur(12px);
}
.search {
  flex: 1 1 260px; display: flex; align-items: center; gap: 10px;
  padding: 10px 15px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg);
}
.search input { flex: 1; background: none; border: 0; outline: none; color: var(--ink); font-size: 0.92rem; font-family: inherit; }
.search input::placeholder { color: var(--faint); }
.search svg { width: 15px; height: 15px; color: var(--faint); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 7px 13px; border-radius: 999px; font-size: 0.81rem; font-weight: 500;
  border: 1px solid var(--line); background: var(--bg); color: var(--body);
  cursor: pointer; transition: all 0.16s ease;
}
.chip:hover { border-color: var(--line-2); color: var(--ink); }
.chip.on { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }

.count { font-size: 0.81rem; color: var(--faint); margin-left: auto; padding-right: 6px; }

.plist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.p {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); transition: all 0.24s var(--ease);
}
.p:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.p__img { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); }
.p__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.p:hover .p__img img { transform: scale(1.04); }
.p__body { padding: 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.p__body h4 { font-size: 0.99rem; }
.p__body p { font-size: 0.85rem; color: var(--body); line-height: 1.55; }
.p__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 6px; }
.tag { font-size: 0.69rem; padding: 4px 9px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); color: var(--faint); }
.empty { padding: 60px; text-align: center; color: var(--faint); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }

/* ---------- accordion (FAQ) ---------- */
.acc { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.acc details { border-bottom: 1px solid var(--line); }
.acc details:last-child { border-bottom: 0; }
.acc summary {
  padding: 20px 24px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  color: var(--ink); font-weight: 500; font-size: 0.99rem; transition: background 0.18s ease;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--bg-alt); }
.acc summary::after { content: '+'; font-size: 1.3rem; color: var(--faint); font-weight: 400; line-height: 1; }
.acc details[open] summary::after { content: '\2013'; }
.acc__body { padding: 0 24px 22px; color: var(--body); font-size: 0.93rem; max-width: 80ch; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.81rem; font-weight: 500; color: var(--ink); }
.field label span { color: var(--navy); }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 14px; font-family: inherit; font-size: 0.92rem;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__note { font-size: 0.79rem; color: var(--faint); }

/* location card */
.loc { display: flex; gap: 15px; align-items: flex-start; }
.loc__logo {
  flex-shrink: 0; width: 50px; height: 50px; border-radius: var(--r-sm);
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; padding: 6px; overflow: hidden;
}
.loc__logo img { max-width: 36px; max-height: 36px; width: auto; height: auto; object-fit: contain; }
.loc h4 { font-size: 0.96rem; margin-bottom: 4px; }
.loc p { font-size: 0.86rem; color: var(--body); }
.loc small { display: block; font-size: 0.74rem; color: var(--faint); margin-top: 7px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- CTA (single dark navy block) ---------- */
.cta {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--r-xl); padding: 72px 40px;
  background: var(--navy-deep); color: rgba(255,255,255,0.72);
}
.cta h2 { color: #fff; margin-bottom: 14px; }
.cta .lead { color: rgba(255,255,255,0.72); margin: 0 auto 30px; }
.cta .btn-row { justify-content: center; }
.cta .btn--primary { background: #fff; color: var(--navy-deep); }
.cta .btn--primary:hover { background: rgba(255,255,255,0.88); }
.cta .btn--ghost { background: transparent; border-color: rgba(255,255,255,0.32); color: #fff; }
.cta .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* ---------- FOOTER ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-alt); padding: 60px 0 26px; margin-top: 0; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; }
.footer__brand img { height: 25px; margin-bottom: 18px; }
.footer__brand p { font-size: 0.89rem; color: var(--body); max-width: 36ch; }
.footer__brand address { font-style: normal; font-size: 0.85rem; color: var(--faint); margin-top: 18px; line-height: 1.75; }
.footer h5 { margin: 0 0 15px; color: var(--ink); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer ul a { font-size: 0.88rem; color: var(--body); }
.footer ul a:hover { color: var(--ink); }
.footer__brands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.footer__brands div { width: 46px; height: 46px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; padding: 6px; overflow: hidden; }
.footer__brands img { max-width: 34px; max-height: 34px; width: auto; height: auto; object-fit: contain; }
.footer__bot {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 0.8rem; color: var(--faint);
}
.footer__bot a:hover { color: var(--ink); }

/* mockup banner */
.mockbar {
  background: var(--navy-soft); border-bottom: 1px solid var(--navy-line);
  color: var(--navy); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.03em;
  text-align: center; padding: 7px 16px;
}

/* ---------- reveal on scroll ---------- */
/* Fail-safe reveal. .rv is only hidden after app.js adds .reveal-ready to <html>,
   which happens immediately before the observer starts. If the script is blocked,
   fails to load, or throws anywhere earlier, every .rv element simply stays
   visible. Previously .rv was hidden by default, so a single JS error left whole
   pages showing a header and nothing else. Do not reverse this. */
.rv { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
html.reveal-ready .rv { opacity: 0; transform: translateY(14px); }
html.reveal-ready .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .rv, .rv { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
  .grid--6 { grid-template-columns: repeat(4, 1fr); }
  .plist   { grid-template-columns: repeat(2, 1fr); }
  .split   { grid-template-columns: 1fr; gap: 40px; }
  .split--rev > *:first-child { order: 0; }
  .statband { grid-template-columns: repeat(2, 1fr); }
  .statband > div:nth-child(2) { border-right: 0; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 1120px) { .logo__tag { display: none; } }
@media (max-width: 1040px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__cta .btn--ghost { display: none; }
  .section { padding: 68px 0; }
  .grid--3, .grid--4, .grid--6 { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 60px 0 52px; }
  .cta { padding: 52px 24px; }
}

@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4, .grid--6, .plist { grid-template-columns: 1fr; }
  .statband { grid-template-columns: 1fr; }
  .statband > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .form__row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .toolbar { position: static; }
  .logo__tag { display: none; }
}

/* ============================================================
   ADDITIONS — specialities badge, partner wordmarks,
   insights cards, article layout
   ============================================================ */

/* partner wordmark (for principals with no logo asset yet) */
.wordmark {
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--ink); opacity: 0.42; white-space: nowrap;
  transition: opacity 0.25s ease;
}
.wordmark:hover { opacity: 1; }

/* speciality badge on product cards */
.p__img { position: relative; }
.badge {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  background: var(--navy-deep); color: #fff;
}
.badge--soft { background: var(--navy-soft); color: var(--navy); border: 1px solid var(--navy-line); }

/* two-line mega menu entries */
.mega__link span { display: flex; flex-direction: column; line-height: 1.35; }
.mega__link small { font-size: 0.74rem; color: var(--faint); }

/* mega menu with post previews */
.mega--posts { min-width: 420px; }
.mega__post {
  display: flex; gap: 12px; align-items: center;
  padding: 10px; border-radius: var(--r-sm); transition: background 0.14s ease;
}
.mega__post:hover { background: var(--bg-alt); }
.mega__post img { width: 54px; height: 42px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; }
.mega__post small { display: block; font-size: 0.7rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 2px; }
.mega__post b { font-size: 0.86rem; font-weight: 600; color: var(--ink); line-height: 1.35; }

/* ---------- insights cards ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.post {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); transition: all 0.24s var(--ease);
}
.post:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.post__img { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-alt); }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.post:hover .post__img img { transform: scale(1.04); }
.post__body { padding: 22px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.post__meta { display: flex; align-items: center; gap: 10px; }
.post__meta small { font-size: 0.76rem; color: var(--faint); }
.post__body h3 { font-size: 1.08rem; line-height: 1.3; }
.post__body p { font-size: 0.9rem; color: var(--body); }
.post__body .textlink { margin-top: auto; padding-top: 6px; }

.post--feature { grid-column: span 2; flex-direction: row; }
.post--feature .post__img { aspect-ratio: auto; flex: 0 0 46%; }
.post--feature .post__body { padding: 30px; }
.post--feature .post__body h3 { font-size: 1.5rem; letter-spacing: -0.03em; }

/* ---------- article ---------- */
.article { max-width: 720px; margin: 0 auto; }
.article__hero { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; margin-bottom: 44px; }
.article__hero img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 0.83rem; color: var(--faint); }
.article > p { font-size: 1.03rem; color: var(--body); margin-bottom: 22px; }
.article > p.standfirst { font-size: 1.18rem; line-height: 1.6; color: var(--ink); margin-bottom: 32px; }
.article h2 { font-size: 1.5rem; margin: 44px 0 14px; }
.article h3 { font-size: 1.12rem; margin: 30px 0 10px; }
.article ul, .article ol { padding-left: 22px; margin: 0 0 22px; color: var(--body); }
.article li { margin-bottom: 8px; font-size: 1rem; }
.article__toc {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-alt);
  padding: 20px 24px; margin-bottom: 36px;
}
.article__toc h5 { margin: 0 0 10px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--faint); }
.article__toc ol { margin: 0; padding-left: 18px; }
.article__toc li { font-size: 0.9rem; margin-bottom: 5px; }
.article__toc a:hover { color: var(--navy); }

.pull {
  margin: 34px 0; padding: 26px 30px;
  border-left: 3px solid var(--navy); background: var(--bg-alt);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  font-size: 1.15rem; line-height: 1.5; color: var(--ink); letter-spacing: -0.015em;
}
.author {
  display: flex; gap: 16px; align-items: center; margin-top: 48px;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.author__img { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; filter: grayscale(1); }
.author__img img { width: 100%; height: 100%; object-fit: cover; }
.author b { display: block; color: var(--ink); font-size: 0.94rem; }
.author small { font-size: 0.82rem; color: var(--faint); }

@media (max-width: 1024px) {
  .posts { grid-template-columns: repeat(2, 1fr); }
  .post--feature { grid-column: span 2; flex-direction: column; }
  .post--feature .post__img { aspect-ratio: 16/9; flex: none; }
  .post--feature .post__body { padding: 22px; }
  .post--feature .post__body h3 { font-size: 1.2rem; }
}
@media (max-width: 560px) {
  .posts, .post--feature { grid-template-columns: 1fr; grid-column: span 1; }
}

/* ============================================================
   ADDITIONS — accessibility, filter bar, product cards & detail
   ============================================================ */

/* skip link + visible focus */
.skiplink {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-deep); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) 0; font-size: 0.9rem; font-weight: 600;
}
.skiplink:focus { left: 0; }
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 3px;
}
.btn:focus-visible { outline-offset: 3px; }

/* nav triggers are buttons now */
button.nav__link {
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.nav__item.open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega--wide { min-width: 540px; }

/* ---------- filter bar ---------- */
.filters {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 16px; margin-bottom: 26px;
  display: grid; gap: 14px;
}
.filters__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.filters__row--sep { border-top: 1px solid var(--line); padding-top: 14px; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.select {
  appearance: none; -webkit-appearance: none;
  padding: 10px 38px 10px 14px; font-family: inherit; font-size: 0.9rem;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px;
  min-width: 208px; cursor: pointer;
}
.select:focus { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft); outline: none; }

.chip__n { color: var(--faint); font-weight: 500; font-size: 0.76rem; margin-left: 3px; }
.chip.on .chip__n { color: rgba(255,255,255,0.7); }

#f-clear {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 0.84rem; font-weight: 600; color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px;
}

/* ---------- product cards are links now ---------- */
a.p { color: inherit; text-decoration: none; }
a.p:hover { border-color: var(--navy-line); }
.p__group {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint);
}
.p__more {
  margin-top: auto; padding-top: 8px;
  font-size: 0.84rem; font-weight: 600; color: var(--navy);
  opacity: 0; transform: translateX(-3px); transition: all 0.22s var(--ease);
}
a.p:hover .p__more { opacity: 1; transform: none; }
.p__mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--bg-tint); color: var(--navy);
  font-size: 2.1rem; font-weight: 700; letter-spacing: -0.04em;
}
.p__img { position: relative; }
.empty { grid-column: 1 / -1; }
.empty button.textlink { background: none; border: 0; cursor: pointer; font-family: inherit; }

/* ---------- product detail ---------- */
.pd { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.pd__media {
  border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
  background: var(--bg-alt); position: relative; aspect-ratio: 4/3;
}
.pd__media img { width: 100%; height: 100%; object-fit: cover; }
.pd__mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--bg-tint); color: var(--navy); font-size: 4.5rem; font-weight: 700; letter-spacing: -0.05em;
}
.pd__missing {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
  background: rgba(255,255,255,0.94); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 9px 12px; font-size: 0.78rem; color: var(--faint);
}
.pd h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 16px; }
.pd__lead { font-size: 1.06rem; color: var(--body); margin-bottom: 26px; }

.spec { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 0.92rem; }
.spec th, .spec td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { width: 34%; color: var(--faint); font-weight: 500; }
.spec td { color: var(--ink); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

.taglinks { display: flex; flex-wrap: wrap; gap: 6px; }
.taglinks a {
  font-size: 0.8rem; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--body); background: var(--bg);
  transition: all 0.16s ease;
}
.taglinks a:hover { border-color: var(--navy); color: var(--navy); }

.notice {
  border: 1px solid var(--navy-line); background: var(--navy-soft);
  border-radius: var(--r); padding: 14px 16px; font-size: 0.87rem; color: var(--navy);
  margin: 22px 0;
}

@media (max-width: 1024px) {
  .pd { grid-template-columns: 1fr; gap: 34px; }
  .mega--wide, .mega { min-width: min(92vw, 540px); }
}
@media (max-width: 560px) {
  .select { min-width: 100%; }
  .filters__row { gap: 8px; }
}

/* ============================================================
   PARTNERS — legible logo wall, partner cards, partner pages
   Logos are shown full colour on white tiles at a generous size.
   The old greyed-out scrolling marquee was replaced because the
   marks were not readable.
   ============================================================ */

.logogrid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.logotile {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff; transition: all 0.22s var(--ease);
  min-height: 108px; justify-content: center;
}
.logotile:hover { border-color: var(--navy-line); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.logotile__mark {
  height: 40px; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.logotile__mark img {
  max-height: 40px; max-width: 100%; width: auto; object-fit: contain;
}
.logotile__name {
  font-size: 0.74rem; font-weight: 600; color: var(--faint);
  text-align: center; line-height: 1.3; letter-spacing: 0.01em;
}
.logotile:hover .logotile__name { color: var(--ink); }

/* typographic stand-in until the partner supplies a vector logo */
.wordmark {
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--navy); white-space: nowrap; text-align: center;
}
.logotile .wordmark { font-size: 0.86rem; }

/* partner card */
.pt {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); color: inherit; transition: all 0.24s var(--ease);
}
.pt:hover { border-color: var(--navy-line); box-shadow: var(--shadow-sm); }
.pt__mark {
  height: 92px; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden;
  background: #fff; border-bottom: 1px solid var(--line);
}
.pt__mark img { max-height: 46px; max-width: 100%; width: auto; object-fit: contain; }
.pt__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pt__body h3 { font-size: 1.06rem; }
.pt__body p { font-size: 0.875rem; color: var(--body); }

/* partner tag on a product card */
.p__partner {
  font-size: 0.8rem; color: var(--navy); font-weight: 600;
  padding-top: 2px;
}
.p__partner .dim { font-weight: 500; color: var(--faint); }

/* partner detail page */
.ph { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
.ph__mark {
  border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff;
  height: 150px; display: flex; align-items: center; justify-content: center; padding: 28px; overflow: hidden;
}
.ph__mark img { max-height: 72px; max-width: 100%; width: auto; object-fit: contain; }
.ph__mark .wordmark { font-size: 1.15rem; }
.tierpill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
  background: var(--navy-soft); border: 1px solid var(--navy-line); color: var(--navy);
}
.tierpill--exclusive { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }

@media (max-width: 1024px) {
  .logogrid { grid-template-columns: repeat(4, 1fr); }
  .ph { grid-template-columns: 1fr; gap: 28px; }
  .ph__mark { max-width: 260px; }
}
@media (max-width: 560px) {
  .logogrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .logotile { min-height: 92px; padding: 16px 10px 12px; }
  .logotile__mark, .logotile__mark img { height: 32px; max-height: 32px; }
}

/* ============================================================
   HERO MOSAIC — the materials, shown rather than described
   ============================================================ */
.heromosaic {
  position: relative; z-index: 1;
  margin-top: 56px;
  display: grid; gap: 12px;
  grid-template-columns: 1.62fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  height: 380px;
}
.heromosaic figure {
  margin: 0; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--bg-alt);
}
.heromosaic img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.heromosaic figure:hover img { transform: scale(1.04); }
.heromosaic__main { grid-row: 1 / span 2; border-radius: var(--r-xl) !important; }

@media (max-width: 860px) {
  .heromosaic { height: 300px; gap: 8px; margin-top: 40px; }
}
@media (max-width: 560px) {
  .heromosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 170px 110px; height: auto; }
  .heromosaic__main { grid-row: 1; grid-column: 1 / span 2; }
}

/* ============================================================
   PARTNER PAGE — the range grouped per application
   ============================================================ */
.appblock { margin-bottom: 40px; }
.appblock:last-child { margin-bottom: 0; }
.appblock__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.appblock__head h3 { font-size: 1.16rem; }
.appblock__head small { font-size: 0.83rem; color: var(--faint); }
.appblock__head .textlink { white-space: nowrap; }

/* A hidden card must actually disappear: .p sets display:flex, which would
   otherwise win over the [hidden] attribute's display:none. */
.plist .p[hidden] { display: none; }

/* ============================================================
   LANGUAGE TOGGLE
   ============================================================ */
.langtoggle {
  display: flex; align-items: center; gap: 1px; margin-left: auto; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--bg);
}
.langtoggle__opt {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--faint); padding: 5px 8px; border-radius: 999px; line-height: 1;
  transition: all 0.16s ease;
}
.langtoggle__opt:hover { color: var(--ink); background: var(--bg-alt); }
.langtoggle__opt.on { background: var(--navy-deep); color: #fff; cursor: default; }
.nav__cta { margin-left: 10px; }
@media (max-width: 1040px) { .langtoggle { margin-left: auto; } .nav__cta { margin-left: 8px; } }
@media (max-width: 420px) { .langtoggle__opt { padding: 5px 7px; font-size: 0.7rem; } }