/* Generated by scripts/site_builder.py from css/. */
/* Do not edit this file — edit the source and rebuild. */

/* source: 00-tokens.css */
/* ── DESIGN TOKENS (Quardica Light Theme) ─────────────────────── */
:root {
  --brand: #FF6B35;
  --brand-light: #FFF0E8;
  --brand-dim: rgba(255,107,53,.08);
  --brand-glow: rgba(255,107,53,.15);
  --navy: #0A192F;
  --navy-light: #172A45;

  --bg-base: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-glass: rgba(255,255,255,.72);
  --bg-glass-hover: rgba(255,255,255,.88);

  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --text-brand: #FF6B35;

  --border-subtle: rgba(0,0,0,.06);
  --border-default: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-brand: rgba(255,107,53,.30);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.08);
  --shadow-brand: 0 4px 20px rgba(255,107,53,.15);
  --shadow-hero: 0 20px 60px rgba(0,0,0,.08);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --maxw: 1200px;
  --serif: 'Plus Jakarta Sans', sans-serif;
  --sans: 'Inter', sans-serif;

  --nav-height: 72px;
}

/* source: 01-base.css */
/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}
::selection { background: var(--brand); color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4,h5 { font-family: var(--serif); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.eyebrow {
  font-family: var(--serif); font-weight: 700; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brand);
}

/* source: 02-buttons.css */
/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-md); font-family: var(--serif); font-weight: 700;
  cursor: pointer; transition: all .2s; border: none; white-space: nowrap;
  height: 50px; padding: 0 28px; font-size: 15px;
}
.btn-primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 2px 12px rgba(255,107,53,.25);
}
.btn-primary:hover {
  background: #E85A25; box-shadow: var(--shadow-brand); transform: translateY(-2px);
}
.btn-secondary {
  background: transparent; border: 1.5px solid var(--border-strong); color: var(--text-primary);
}
.btn-secondary:hover {
  border-color: var(--brand); color: var(--brand); background: var(--brand-dim);
}
.btn-sm { height: 42px; padding: 0 20px; font-size: 14px; }

/* ── GLASS CARD ── */
.glass {
  position: relative; isolation: isolate;
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* source: 03-nav.css */
/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-height); display: flex; align-items: center;
  transition: background .3s, border-color .3s, box-shadow .3s;
  border-bottom: 1px solid transparent;
  background: rgba(248,250,252,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
nav.scrolled {
  background: rgba(248,250,252,.92);
  border-bottom-color: var(--border-default);
  box-shadow: 0 1px 8px rgba(0,0,0,.04);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 32px;
  width: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo img { height: 30px; width: auto; display: block; }
.nav-logo span {
  font-family: var(--serif); font-weight: 800; letter-spacing: .18em; font-size: 18px;
  color: var(--navy);
}
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--text-secondary); transition: color .15s;
}
.nav-links a:hover { color: var(--brand); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.hamburger { display: none; background: none; border: none; color: var(--navy); cursor: pointer; }

/* ── LANGUAGE SELECTOR ──
   A native <details>/<summary> dropdown: plain links inside, so switching
   language works with scripting disabled and each language stays
   independently linkable. No JS is required to open or close it. */
.lang-switch { position: relative; }
.lang-switch-toggle {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  padding: 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: var(--text-secondary); cursor: pointer;
  list-style: none;
  transition: color .15s, background .15s, border-color .15s;
}
.lang-switch-toggle::-webkit-details-marker { display: none; }
.lang-switch-toggle:hover { color: var(--brand); background: var(--brand-dim); }
.lang-switch[open] .lang-switch-toggle {
  color: var(--brand); background: var(--brand-dim); border-color: var(--border-brand);
}
.lang-switch-icon { display: flex; align-items: center; color: inherit; }
.lang-switch-icon svg { width: 16px; height: 16px; }
.lang-switch-current {
  font-family: var(--serif); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.lang-switch-chevron { display: flex; align-items: center; transition: transform .15s; }
.lang-switch-chevron svg { width: 12px; height: 12px; }
.lang-switch[open] .lang-switch-chevron { transform: rotate(180deg); }
.lang-options {
  position: absolute; top: calc(100% + 6px); right: 0;
  display: flex; flex-direction: column; min-width: 140px;
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 4px; z-index: 210;
}
.lang-option {
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 10px; border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.lang-option:hover { color: var(--brand); background: var(--brand-dim); }
.lang-option[aria-current="true"] { color: var(--brand); font-weight: 700; }

/* ── MOBILE MENU ── */
.mobile-menu {
  display: none;
  position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0;
  background: rgba(248,250,252,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 199; padding: 32px;
}
.mobile-menu-in { display: flex; flex-direction: column; gap: 24px; }
.mobile-link {
  font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--navy);
}
.mobile-link:hover { color: var(--brand); }
.mobile-lang {
  margin-top: 8px; padding-top: 24px;
  border-top: 1px solid var(--border-default);
}
.mobile-lang .lang-switch-toggle { padding: 8px 0; }
.mobile-lang .lang-switch-current { font-size: 14px; }
.mobile-lang .lang-options {
  position: static; margin-top: 8px; box-shadow: none;
  border-color: var(--border-default); width: fit-content;
}
.mobile-lang .lang-option { font-size: 15px; padding: 10px 12px; }

/* source: 04-hero.css */
/* ── HERO ── */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  overflow: hidden; padding-top: var(--nav-height);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, #F8FAFC 0%, #EEF2F7 40%, #E8ECF2 100%);
}
.hero-bg img {
  position: absolute; right: -5%; top: 50%; transform: translateY(-50%);
  width: 55%; max-width: 760px; opacity: .18; filter: saturate(0.7);
}
.hero-content {
  position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  width: 100%;
}
.hero-text { max-width: 560px; }
.hero-eyebrow { margin-bottom: 24px; display: block; }
.hero-title {
  font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.05; margin-bottom: 24px;
  color: var(--navy);
}
.hero-title .hl { color: var(--brand); }
.hero-sub {
  font-size: clamp(16px, 1.8vw, 19px); color: var(--text-secondary);
  max-width: 480px; line-height: 1.65; margin-bottom: 36px;
}
.hero-stats { display: flex; gap: 40px; }
.hero-stat-v {
  font-family: var(--serif); font-weight: 800; font-size: 28px; color: var(--navy);
}
.hero-stat-l {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary); margin-top: 4px;
}
.hero-visual {
  position: relative; display: flex; align-items: center; justify-content: center;
}
.hero-image-card {
  width: 100%; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-hero);
  border: 1px solid var(--border-default);
}
.hero-image-card img { width: 100%; height: auto; display: block; }

/* source: 05-sections.css */
/* ── SECTION SCAFFOLD ── */
section.block {
  position: relative; padding: 100px 0;
  border-top: 1px solid var(--border-subtle);
}
.sec-head { max-width: 720px; margin-bottom: 56px; }
.sec-head .eyebrow { margin-bottom: 16px; display: block; }
.sec-head h2 {
  font-size: clamp(26px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.02em;
  color: var(--navy);
}
.sec-head h2 .accent { color: var(--brand); }
.sec-head p {
  margin-top: 16px; font-size: 17px; color: var(--text-secondary);
  max-width: 600px; line-height: 1.65;
}

/* Sections whose backdrop lifts them off the base surface. */
.block-tinted { background: linear-gradient(180deg, #F1F5F9 0%, #F8FAFC 100%); }
/* The closing section runs straight on from the one above it. */
.block-seamless { border-top: none; }

/* ── REVEAL ANIMATION ── */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.in { opacity: 1; transform: none; }

/* source: 06-segments.css.tpl */
/* ── SEGMENT VISIBILITY ──
   Only the selected audience's content is rendered. This display:none applies to
   whole segment regions — a hero message, an offering group, a Why variant, the
   stories section, a nav link. It is NOT applied to an individual .tab-content
   panel, which must stay in layout so every panel keeps one shared box size.

   The rules below are generated from the segments declared in
   offering/manifest.json, so a new audience needs no CSS edit. */
body[data-segment="sb"] .segment-region[data-segment="sme"],
body[data-segment="sb"] .segment-nav-link[data-segment="sme"],
body[data-segment="sme"] .segment-region[data-segment="sb"],
body[data-segment="sme"] .segment-nav-link[data-segment="sb"] { display: none; }

/* ── SEGMENT SWITCH ── */
.segment-switch {
  max-width: 520px; margin-bottom: 34px; padding: 20px 22px;
  background: var(--bg-glass); backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong); border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.segment-switch-label {
  display: block; margin-bottom: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--navy);
}
.segment-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.segment-toggle button {
  flex: 1 1 0; min-width: 158px; cursor: pointer;
  padding: 14px 18px; border-radius: var(--radius-md);
  font-family: var(--serif); font-size: 15px; font-weight: 700;
  color: var(--navy); background: var(--bg-surface);
  border: 2px solid var(--border-strong);
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.segment-toggle button:hover {
  border-color: var(--brand); color: var(--brand); transform: translateY(-1px);
}
.segment-toggle button[aria-pressed="true"],
.segment-toggle button[aria-pressed="true"]:hover {
  background: var(--brand); border-color: var(--brand); color: #FFFFFF;
  box-shadow: var(--shadow-brand);
}
.segment-toggle button:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; }

/* source: 07-overview.css */
/* ── COMPANY OVERVIEW CARDS ── */
.overview-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.overview-card {
  padding: 36px 28px; border-radius: var(--radius-lg);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.overview-card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-brand);
  border-color: var(--border-brand);
}
.overview-icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-dim); border: 1px solid var(--border-brand);
  color: var(--brand); margin-bottom: 22px;
  transition: background .3s, color .3s, box-shadow .3s;
}
.overview-card:hover .overview-icon {
  background: var(--brand); color: #fff; box-shadow: 0 0 22px rgba(255,107,53,.35);
}
.overview-icon svg { width: 24px; height: 24px; }
.overview-card h3 { font-size: 19px; margin-bottom: 10px; color: var(--navy); }
.overview-card p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; }

/* source: 08-value.css */
/* ── VALUE PROP / SPLIT BAND ── */
.value-split {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center;
}
.value-copy .eyebrow { display: block; margin-bottom: 16px; }
.value-copy h2 {
  font-size: clamp(26px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.02em;
  color: var(--navy); line-height: 1.12;
}
.value-copy h2 .accent { color: var(--brand); }
.value-copy p {
  margin-top: 20px; font-size: 17px; color: var(--text-secondary);
  line-height: 1.7; max-width: 460px;
}
.value-copy .btn { margin-top: 32px; }
.value-image {
  border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--border-default); box-shadow: var(--shadow-lg);
}
.value-image img { width: 100%; height: auto; }

/* source: 09-offerings.css */
/* ── OFFERINGS TABS & ACCORDION ── */
.offering-tabs-wrapper {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 40px;
  margin-top: 40px;
  align-items: stretch;
}
.offering-tabs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* The list fills the row, so the first tab meets the top edge of the panel and
   the last tab meets its bottom edge. Equal flex basis keeps every tab the
   same height regardless of how long its label is. */
.tab-link {
  flex: 1 1 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 16px 20px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.16,1,.3,1);
  color: var(--navy);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  text-align: left;
}
.tab-link:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand);
}
.tab-link.active {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand);
  box-shadow: var(--shadow-brand);
}

.tab-link-text {
  flex: 1;
}
.tab-link-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-dim);
  border: 1px solid var(--border-brand);
  color: var(--brand);
  margin-left: 12px;
  flex-shrink: 0;
  transition: all 0.25s;
}
.tab-link-icon svg {
  width: 18px;
  height: 18px;
}
.tab-link:hover .tab-link-icon,
.tab-link.active .tab-link-icon {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 107, 53, 0.25);
}

/* The offering panel is ONE component shown seven times, so it must occupy one
   fixed box with one fixed internal geometry. Two rules achieve that without a
   single measured pixel:

   1. Every .tab-content is placed in the same grid cell, and inactive panels
      are hidden with visibility rather than display. They therefore still
      contribute to track sizing, so the box is always as tall as the tallest
      panel and never resizes on switch.
   2. Each panel adopts the parent's tracks with `subgrid`, so the slogan, the
      title, the description and the two detail columns of all seven panels
      share the same five row tracks. Each track sizes itself to the tallest
      occupant across every panel, which maps the blocks onto identical
      baselines automatically — no hand-tuned min-heights to drift.

   The trailing 1fr track absorbs any slack, so the panel's bottom edge stays
   flush with the last tab.

   validate_site.py reads the `.tab-content` rule below and measure_offering_
   panels.py measures the result in a browser. Do not weaken either. */
.offering-tab-content-area {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 40px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: 40px;
}
.tab-content {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.tab-content.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* These wrappers only group copy; they must not introduce a formatting
   context, or their children could not reach the shared tracks. */
.offering-tab-content-area .tab-grid,
.offering-tab-content-area .tab-text,
.offering-tab-content-area .tab-details-seq {
  display: contents;
}
.offering-tab-content-area .tab-slogan            { grid-column: 1; grid-row: 1; }
.offering-tab-content-area .tab-text h3           { grid-column: 1; grid-row: 2; }
.offering-tab-content-area .tab-desc              { grid-column: 1; grid-row: 3; }
.offering-tab-content-area .tab-detail-col:nth-child(1) { grid-column: 1; grid-row: 4; margin-bottom: 20px; }
.offering-tab-content-area .tab-detail-col:nth-child(2) { grid-column: 1; grid-row: 5; }
.offering-tab-content-area .tab-graphic           { grid-column: 2; grid-row: 1 / -1; }

/* Subgrid is the mechanism that maps the blocks onto shared baselines. Without
   it the panel still never resizes — all seven remain stacked in one cell —
   but the blocks fall back to natural flow inside each panel. */
@supports not (grid-template-rows: subgrid) {
  .offering-tab-content-area { grid-template-columns: 1fr; grid-template-rows: 1fr; column-gap: 0; }
  .tab-content { grid-template-columns: none; grid-template-rows: none; }
  .offering-tab-content-area .tab-grid {
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; width: 100%;
  }
  .offering-tab-content-area .tab-text {
    display: flex; flex-direction: column; grid-column: 1; grid-row: 1;
  }
  .offering-tab-content-area .tab-details-seq {
    display: flex; flex-direction: column; gap: 20px;
  }
  .offering-tab-content-area .tab-slogan,
  .offering-tab-content-area .tab-text h3,
  .offering-tab-content-area .tab-desc,
  .offering-tab-content-area .tab-detail-col:nth-child(1),
  .offering-tab-content-area .tab-detail-col:nth-child(2) {
    grid-column: auto; grid-row: auto; margin-bottom: 0;
  }
  .offering-tab-content-area .tab-graphic { grid-column: 2; grid-row: 1; }
}

.tab-slogan {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
}
.tab-text h3 {
  font-size: 26px;
  color: var(--navy);
  margin-bottom: 16px;
}
.tab-desc {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}
.tab-details-seq {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tab-detail-col h5 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.tab-detail-col ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.tab-detail-col li {
  font-size: 13.5px;
  color: var(--text-secondary);
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  line-height: 1.5;
}
.tab-detail-col li::before {
  content: "•";
  color: var(--brand);
  position: absolute;
  left: 4px;
  font-weight: bold;
}
.tab-graphic {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
  width: 100%;
  height: 100%;
  min-height: 320px;
}
.tab-graphic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile responsive version (collapsible accordion cards) */
.mobile-accordion {
  display: none;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.accordion-item {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.accordion-item.active {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-md);
}
.accordion-header-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--navy);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  text-align: left;
}
.accordion-header-btn .tab-link-icon {
  margin-left: auto;
  transition: transform 0.3s;
}
.accordion-item.active .accordion-header-btn .tab-link-icon {
  transform: rotate(90deg);
  background: var(--brand);
  color: #fff;
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.accordion-content-inner {
  padding: 0 24px 28px 24px;
}
.accordion-content-inner .tab-graphic {
  margin-top: 24px;
}

@media (max-width: 980px) {
  .offering-tabs-wrapper {
    display: none;
  }
  .mobile-accordion {
    display: flex;
  }
}

/* source: 10-about.css */
/* ── ABOUT US ── */
.about-grid {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center;
}
.about-image {
  border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--border-default); box-shadow: var(--shadow-lg);
}
.about-image img { width: 100%; height: auto; }
.about-copy .eyebrow { display: block; margin-bottom: 16px; }
.about-copy h2 {
  font-size: clamp(26px, 3.6vw, 42px); font-weight: 800;
  letter-spacing: -.02em; color: var(--navy); line-height: 1.12;
}
.about-copy h2 .accent { color: var(--brand); }
.about-copy > p {
  margin-top: 18px; font-size: 16px; color: var(--text-secondary);
  line-height: 1.7; max-width: 520px;
}
.about-features { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.about-copy .about-features { margin-top: 24px; }
.about-feature {
  display: flex; gap: 14px; align-items: flex-start;
}
.about-feature-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-dim); border: 1px solid var(--border-brand); color: var(--brand);
}
.about-feature-icon svg { width: 16px; height: 16px; }
.about-feature h4 { font-size: 15px; color: var(--navy); margin-bottom: 4px; }
.about-feature p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }

/* ── PARTNERS ── */
.partners-strip {
  margin-top: 60px; padding: 40px 0; border-top: 1px solid var(--border-subtle);
}
.partners-label {
  text-align: center; margin-bottom: 28px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.partners-logos {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 40px;
}
.partner-name {
  font-family: var(--serif); font-weight: 700; font-size: 18px;
  color: var(--text-muted); letter-spacing: .02em;
  transition: color .2s;
}
.partner-name:hover { color: var(--navy); }

/* source: 11-stories.css */
/* ── SUCCESS STORIES ── */
.stories-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.story-card {
  padding: 36px 28px; border-radius: var(--radius-lg);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.story-card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-brand);
  border-color: var(--border-brand);
}
.story-num {
  font-family: var(--serif); font-weight: 800; font-size: 42px;
  color: var(--brand-dim); line-height: 1; margin-bottom: 16px;
  letter-spacing: -.02em;
}
.story-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-dim); border: 1px solid var(--border-brand);
  color: var(--brand); margin-bottom: 20px;
}
.story-icon svg { width: 22px; height: 22px; }
.story-card h3 { font-size: 18px; margin-bottom: 14px; color: var(--navy); }
.story-meta { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.story-block h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 4px;
}
.story-block p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.story-pillars {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-subtle);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.pillar-tag {
  font-size: 11px; font-weight: 700; color: var(--brand);
  border: 1px solid var(--border-brand); border-radius: var(--radius-full);
  padding: 3px 10px; background: var(--brand-dim);
}

/* source: 12-contact.css */
/* ── CTA / CONTACT ── */
.cta-band {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  padding: 80px 48px; text-align: center;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-light) 100%);
  border: 1px solid var(--border-default);
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,107,53,.18), transparent 70%);
  pointer-events: none;
}
.cta-band h2 {
  position: relative; font-size: clamp(28px, 4vw, 46px); font-weight: 800;
  letter-spacing: -.02em; color: #fff;
}
.cta-band h2 .accent { color: var(--brand); }
.cta-band > p {
  position: relative; margin: 20px auto 36px; max-width: 520px;
  color: rgba(255,255,255,.65); font-size: 17px;
}
.cta-actions {
  position: relative; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
/* On the dark band the outline button keeps its light border on hover too. */
.cta-actions .btn-secondary,
.cta-actions .btn-secondary:hover {
  border-color: rgba(255,255,255,.25); color: #fff;
}

.contact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 48px; position: relative;
}
.contact-card {
  padding: 28px 24px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  text-align: center;
  transition: background .2s, border-color .2s;
}
.contact-card:hover { background: rgba(255,255,255,.10); border-color: var(--border-brand); }
.contact-card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,107,53,.15); border: 1px solid rgba(255,107,53,.30); color: var(--brand);
}
.contact-card-icon svg { width: 20px; height: 20px; }
.contact-card h4 {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: 8px;
}
.contact-card a, .contact-card p {
  font-size: 15px; color: #fff; font-weight: 500; line-height: 1.5;
}
.contact-card a:hover { color: var(--brand); }

/* source: 13-footer.css */
/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border-subtle); padding: 40px 0;
  text-align: center;
}
.foot-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 12px; }
.foot-brand img { height: 24px; }
.foot-brand span {
  font-family: var(--serif); font-weight: 800; letter-spacing: .18em; font-size: 15px;
  color: var(--navy);
}
.foot-copy { font-size: 13px; color: var(--text-muted); }

/* source: 99-responsive.css */
/* ── RESPONSIVE ── */
@media (max-width: 980px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-text { max-width: 100%; }
  .overview-grid { grid-template-columns: repeat(2, 1fr); }
  .value-split, .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .stories-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .offering-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .nav-links { display: none; }
  .nav-right .lang-switch { display: none; }
  .hamburger { display: flex; }
  section.block { padding: 72px 0; }
  .overview-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(2rem, 9vw, 3rem); }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
  .cta-band { padding: 56px 24px; }
  .stories-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}