/* =============================================
   DESIGN TOKENS
   ============================================= */

:root {
  /* Palette — primary #0000BD (electric blue) + monochromatic scale */
  --navy:           #0000BD;   /* base primary */
  --navy-80:        #0000d4;   /* step +1 lighter */
  --navy-60:        #1a1ae0;   /* step +2 lighter */
  --navy-40:        #3333e8;   /* step +3 lighter */
  --navy-20:        #4d4def;   /* step +4 lighter */
  --teal:           #0da797;
  --teal-soft:      #7fbab4;
  --clay:           #9e7f5e;
  --sand:           #f9deb2;
  --sand-dim:       rgba(249,222,178,0.75);
  --white:          #ffffff;
  --white-10:       rgba(255,255,255,0.10);
  --white-20:       rgba(255,255,255,0.20);
  --white-05:       rgba(255,255,255,0.05);

  /* Tab sheen gradient — monochromatic #0000BD variations */
  --tab-1: linear-gradient(180deg, #0000d4 0%, #0000BD 60%, #00008a 100%);
  --tab-2: linear-gradient(180deg, #1a1ae0 0%, #0000d4 60%, #0000a8 100%);
  --tab-3: linear-gradient(180deg, #3333e8 0%, #1a1ae0 60%, #0000c0 100%);
  --tab-4: linear-gradient(180deg, #4d4def 0%, #3333e8 60%, #1a1ad4 100%);
  --tab-5: linear-gradient(180deg, #6666f5 0%, #4d4def 60%, #3333e0 100%);

  /* Tab sheen overlay */
  --sheen: linear-gradient(135deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.03) 40%,
    rgba(255,255,255,0.06) 70%,
    rgba(255,255,255,0.00) 100%);

  /* Layout */
  --tab-w:          64px;   /* collapsed tab width on desktop */
  --tab-w-open:     420px;  /* open panel content width */
  --header-h:       64px;   /* header height */
  --tab-label-h:    180px;  /* label zone height */

  /* Typography */
  --font-display:   'Google Sans', 'Product Sans', sans-serif;
  --font-body:      'Google Sans', 'Product Sans', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* Motion */
  --ease-panel:     cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-panel:      0.52s;

  /* Text on tabs */
  --tab-text:       rgba(249,222,178,0.90);
  --tab-text-dim:   rgba(249,222,178,0.50);
  --tab-icon:       #0da797;
  --tab-icon-open:  #f9deb2;
}

/* =============================================
   RESET
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--navy);
  color: var(--sand);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--sand); }

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

/* =============================================
   GOOGLE FONTS IMPORT
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');

/* =============================================
   LAYOUT SHELL
   ============================================= */

#sa-shell {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* =============================================
   HEADER
   Seamlessly blends with the first tab colour
   ============================================= */

#sa-header {
  flex-shrink: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px 0 0;
  background: var(--navy);
  position: relative;
  z-index: 200;
  /* subtle bottom border that fades into the tabs */
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Left section — logo lives over the first tab's width */
.sa-header-logo {
  flex-shrink: 0;
  width: var(--tab-w);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tab-1);
  position: relative;
  transition: background var(--dur-panel) var(--ease-panel);
}

/* Match header logo bg to whichever panel is open */
.sa-panel.is-open:nth-child(1) ~ #sa-header .sa-header-logo,
body[data-open="0"] .sa-header-logo { background: var(--tab-1); }
body[data-open="1"] .sa-header-logo { background: var(--tab-2); }
body[data-open="2"] .sa-header-logo { background: var(--tab-3); }
body[data-open="3"] .sa-header-logo { background: var(--tab-4); }
body[data-open="4"] .sa-header-logo { background: var(--tab-5); }

.sa-header-logo .custom-logo,
.sa-header-logo .site-title-logo {
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.sa-header-logo .site-title-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sand);
  line-height: 1.2;
  text-align: center;
  padding: 0 8px;
}

/* Right section — navigation */
.sa-header-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}

.sa-header-nav a {
  color: var(--tab-text-dim);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

.sa-header-nav a:hover,
.sa-header-nav .current-menu-item > a {
  color: var(--sand);
  background: var(--white-10);
}

/* Mobile hamburger */
.sa-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  cursor: pointer;
  padding: 4px;
  margin-left: 12px;
}
.sa-hamburger span {
  display: block;
  height: 1.5px;
  background: var(--sand);
  border-radius: 1px;
  transition: transform 0.3s, opacity 0.3s;
}
.sa-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.sa-hamburger.is-open span:nth-child(2) { opacity: 0; }
.sa-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* =============================================
   ACCORDION STAGE
   ============================================= */

#sa-stage {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
}

/* =============================================
   PANELS
   ============================================= */

.sa-panel {
  position: relative;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  transition: width var(--dur-panel) var(--ease-panel),
              flex var(--dur-panel) var(--ease-panel);
  width: var(--tab-w);
  flex-shrink: 0;
}

/* When open, panel expands */
.sa-panel.is-open {
  flex: 1 1 auto;
  width: auto;
}

/* Only one panel gets flex: 1, others stay at tab-w */
#sa-stage.has-open .sa-panel:not(.is-open) {
  width: var(--tab-w);
  flex: 0 0 var(--tab-w);
}

#sa-stage:not(.has-open) .sa-panel {
  flex: 1;
}

/* =============================================
   TAB STRIP (the visible clickable label)
   ============================================= */

.sa-tab {
  flex-shrink: 0;
  width: var(--tab-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  user-select: none;
  transition: width 0.3s var(--ease-panel);
}

/* Individual tab gradients */
.sa-panel:nth-child(1) .sa-tab { background: var(--tab-1); }
.sa-panel:nth-child(2) .sa-tab { background: var(--tab-2); }
.sa-panel:nth-child(3) .sa-tab { background: var(--tab-3); }
.sa-panel:nth-child(4) .sa-tab { background: var(--tab-4); }
.sa-panel:nth-child(5) .sa-tab { background: var(--tab-5); }

/* Sheen overlay */
.sa-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sheen);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.sa-tab:hover::before { opacity: 1; }
.sa-panel.is-open .sa-tab::before { opacity: 0.6; }

/* Active indicator line */
.sa-tab::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: var(--teal);
  border-radius: 1px 0 0 1px;
  opacity: 0;
  transition: opacity 0.3s;
}
.sa-panel.is-open .sa-tab::after { opacity: 1; }

/* Tab inner layout */
.sa-tab-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 0;
  pointer-events: none;
}

/* Rotated label */
.sa-tab-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.sa-tab-icon {
  font-size: 18px;
  color: var(--tab-icon);
  transition: color 0.3s, transform 0.3s;
  line-height: 1;
}
.sa-panel.is-open .sa-tab-icon,
.sa-tab:hover .sa-tab-icon {
  color: var(--tab-icon-open);
  transform: scale(1.1);
}

.sa-tab-text {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tab-text-dim);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  transition: color 0.3s;
  white-space: nowrap;
  line-height: 1;
}
.sa-panel.is-open .sa-tab-text,
.sa-tab:hover .sa-tab-text {
  color: var(--tab-text);
}

/* Expand/collapse chevron */
.sa-tab-chevron {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: opacity 0.3s, transform 0.4s var(--ease-panel);
  margin-top: 4px;
}
.sa-tab-chevron svg {
  width: 10px;
  height: 10px;
  stroke: var(--sand);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sa-panel.is-open .sa-tab-chevron {
  opacity: 0.8;
  transform: rotate(180deg);
}
.sa-tab:hover .sa-tab-chevron { opacity: 0.7; }

/* =============================================
   PANEL CONTENT
   ============================================= */

.sa-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity var(--dur-panel) var(--ease-panel),
              transform var(--dur-panel) var(--ease-panel);
  pointer-events: none;
  min-width: 0;
}

.sa-panel.is-open .sa-content {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  transition-delay: 0.12s;
}

.sa-content-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 48px 52px;
  scrollbar-width: thin;
  scrollbar-color: var(--white-20) transparent;
}

.sa-content-scroll::-webkit-scrollbar { width: 4px; }
.sa-content-scroll::-webkit-scrollbar-thumb {
  background: var(--white-20);
  border-radius: 2px;
}

/* Content separator line */
.sa-content-top-line {
  flex-shrink: 0;
  height: 2px;
  margin: 0 52px;
  background: linear-gradient(90deg, var(--teal) 0%, transparent 100%);
  opacity: 0.6;
}

/* =============================================
   CONTENT TYPOGRAPHY
   ============================================= */

.sa-content h1 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--sand);
  line-height: 1.2;
  margin-bottom: 0.6em;
}

.sa-content h2 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--teal-soft);
  margin-bottom: 0.5em;
  margin-top: 1.8em;
}

.sa-content h3 {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--sand);
  margin-bottom: 0.4em;
  margin-top: 1.4em;
}

.sa-content p {
  font-size: 0.9375rem;
  color: rgba(249,222,178,0.70);
  line-height: 1.8;
  margin-bottom: 1.2em;
  max-width: 64ch;
}

.sa-content a {
  color: var(--teal);
  border-bottom: 1px solid rgba(13,167,151,0.3);
  transition: color 0.2s, border-color 0.2s;
}
.sa-content a:hover {
  color: var(--sand);
  border-color: var(--sand);
}

.sa-content ul, .sa-content ol {
  margin: 0 0 1.2em 1.4em;
  color: rgba(249,222,178,0.70);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.sa-content blockquote {
  border-left: 2px solid var(--teal);
  padding: 0.8em 1.4em;
  margin: 1.4em 0;
  color: rgba(249,222,178,0.6);
  font-style: italic;
  background: rgba(13,167,151,0.05);
}

.sa-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(255,255,255,0.07);
  padding: 0.15em 0.45em;
  border-radius: 3px;
  color: var(--teal-soft);
}

.sa-content pre {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--white-10);
  border-radius: 4px;
  padding: 1.2em 1.4em;
  overflow-x: auto;
  margin-bottom: 1.2em;
}

.sa-content pre code {
  background: none;
  padding: 0;
}

.sa-content img {
  border-radius: 4px;
  margin-bottom: 1.2em;
}

.sa-content hr {
  border: none;
  border-top: 1px solid var(--white-10);
  margin: 2em 0;
}

/* Panel title displayed at top of content */
.sa-panel-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 2rem;
}

.sa-panel-title-icon {
  font-size: 26px;
  color: var(--teal);
  flex-shrink: 0;
}

.sa-panel-title h1 {
  margin: 0;
}

/* =============================================
   NESTED PAGE NAVIGATION (breadcrumb + sub-pages)
   ============================================= */

.sa-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tab-text-dim);
  margin-bottom: 2rem;
}

.sa-breadcrumb a {
  color: var(--teal-soft);
  border: none;
}

.sa-breadcrumb span { opacity: 0.4; }

.sa-sub-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--white-10);
}

.sa-sub-nav a {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tab-text-dim);
  padding: 6px 14px;
  border-radius: 2px;
  border: 1px solid var(--white-10);
  transition: all 0.2s;
  white-space: nowrap;
}

.sa-sub-nav a:hover,
.sa-sub-nav a.current {
  color: var(--sand);
  background: var(--white-10);
  border-color: var(--white-20);
}

/* =============================================
   DIVIDER BETWEEN PANELS (subtle)
   ============================================= */

.sa-panel + .sa-panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.08) 30%,
    rgba(255,255,255,0.08) 70%,
    transparent 100%);
  z-index: 10;
  pointer-events: none;
}

/* =============================================
   BACKGROUND TEXTURE — subtle noise on panels
   ============================================= */

.sa-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* =============================================
   MOBILE NAV OVERLAY
   ============================================= */

#sa-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,140,0.96);
  z-index: 300;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 32px;
  gap: 8px;
  backdrop-filter: blur(8px);
}

#sa-mobile-nav.is-open { display: flex; }

#sa-mobile-nav a {
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--sand-dim);
  padding: 10px 0;
  border-bottom: 1px solid var(--white-10);
  width: 100%;
  transition: color 0.2s;
}

#sa-mobile-nav a:hover { color: var(--sand); }

/* =============================================
   MOBILE — VERTICAL ACCORDION
   ============================================= */

@media (max-width: 768px) {
  html, body { overflow: auto; height: auto; }

  #sa-shell { height: auto; min-height: 100vh; }

  #sa-header {
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 400;
  }

  .sa-header-logo {
    width: 52px;
    height: var(--header-h);
  }

  .sa-hamburger { display: flex; }

  .sa-header-nav { display: none; }

  #sa-stage {
    flex-direction: column;
    overflow: visible;
    height: auto;
  }

  .sa-panel {
    flex-direction: column;
    width: 100% !important;
    flex: none !important;
    height: auto;
    transition: none;
  }

  .sa-tab {
    width: 100%;
    height: 54px;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 20px;
    gap: 14px;
  }

  .sa-tab-inner {
    flex-direction: row;
    padding: 0;
    gap: 12px;
  }

  .sa-tab-text {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 11px;
  }

  .sa-tab-icon { font-size: 16px; }

  .sa-tab::after {
    right: auto;
    top: auto;
    left: 20%;
    right: 20%;
    bottom: 0;
    top: auto;
    width: auto;
    height: 2px;
    border-radius: 1px 1px 0 0;
  }

  .sa-tab-chevron {
    margin-left: auto;
    margin-top: 0;
  }
  .sa-panel.is-open .sa-tab-chevron { transform: rotate(90deg); }

  .sa-content {
    transform: translateY(-8px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--ease-panel),
                opacity 0.35s var(--ease-panel),
                transform 0.35s var(--ease-panel);
  }

  .sa-panel.is-open .sa-content {
    max-height: 2000px;
    transform: translateY(0);
    transition-delay: 0.05s;
  }

  .sa-content-scroll {
    padding: 28px 20px 36px;
  }

  .sa-content-top-line { margin: 0 20px; }
}

/* =============================================
   SCREEN READER UTILITY
   ============================================= */

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

/* =============================================
   WP ADMIN BAR OFFSET
   ============================================= */

.admin-bar #sa-header { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar #sa-header { top: 46px; }
}

/* =============================================
   WP BLOCK ALIGNMENT
   ============================================= */

.sa-content .aligncenter { margin: 0 auto 1.2em; display: block; }
.sa-content .alignleft   { float: left; margin: 0 1.4em 1em 0; }
.sa-content .alignright  { float: right; margin: 0 0 1em 1.4em; }

/* =============================================
   GUTENBERG BLOCKS IN DARK CONTEXT
   ============================================= */

.sa-content .wp-block-image img { border-radius: 4px; }
.sa-content .wp-block-quote {
  border-left: 2px solid var(--teal);
  padding: 0.8em 1.4em;
  background: rgba(13,167,151,0.05);
}
.sa-content .wp-block-separator {
  border: none;
  border-top: 1px solid var(--white-10);
}
.sa-content .wp-block-button__link {
  background: var(--teal);
  color: var(--navy);
  font-weight: 600;
  border-radius: 3px;
}
.sa-content .wp-block-button__link:hover {
  background: var(--teal-soft);
}

/* =============================================
   COMMENTS & FORMS
   ============================================= */

.sa-content input,
.sa-content textarea,
.sa-content select {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--white-20);
  color: var(--sand);
  padding: 0.6em 0.8em;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  width: 100%;
  margin-bottom: 0.8em;
  transition: border-color 0.2s;
}

.sa-content input:focus,
.sa-content textarea:focus {
  outline: none;
  border-color: var(--teal);
}

.sa-content button,
.sa-content input[type="submit"] {
  background: var(--teal);
  color: var(--navy);
  border: none;
  padding: 0.65em 1.6em;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  width: auto;
  transition: background 0.2s;
}

.sa-content button:hover,
.sa-content input[type="submit"]:hover {
  background: var(--teal-soft);
}

/* =============================================
   RESPONSIVE GRID & LAYOUT UTILITIES
   =============================================
   All classes are scoped inside .sa-content so
   they only apply to panel content areas.

   Breakpoints:
     --bp-sm:  480px   (mobile landscape)
     --bp-md:  768px   (tablet)
     --bp-lg:  1024px  (desktop)
     --bp-xl:  1280px  (wide desktop)

   Usage examples:
     <div class="sa-grid sa-grid--3">...</div>
     <div class="sa-row sa-row--gap-lg">...</div>
     <div class="sa-col sa-col--6">...</div>
     <div class="sa-flex sa-flex--center">...</div>
   ============================================= */

/* ─────────────────────────────────────────────
   SPACING TOKENS
   ───────────────────────────────────────────── */

.sa-content {
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;

  --gap-xs:  0.25rem;
  --gap-sm:  0.5rem;
  --gap-md:  1rem;
  --gap-lg:  1.5rem;
  --gap-xl:  2rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;
}

/* ─────────────────────────────────────────────
   CSS GRID — AUTO COLUMNS
   .sa-grid                  base grid container
   .sa-grid--2 through --6   equal column counts
   .sa-grid--auto-sm/md/lg   auto-fit with min sizes
   ───────────────────────────────────────────── */

.sa-content .sa-grid {
  display: grid;
  gap: var(--gap-md);
  width: 100%;
}

.sa-content .sa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa-content .sa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sa-content .sa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sa-content .sa-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sa-content .sa-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Auto-fit grids — fill available space */
.sa-content .sa-grid--auto-sm  { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.sa-content .sa-grid--auto-md  { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sa-content .sa-grid--auto-lg  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sa-content .sa-grid--auto-xl  { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* Sidebar layouts */
.sa-content .sa-grid--sidebar-left  { grid-template-columns: 260px minmax(0, 1fr); }
.sa-content .sa-grid--sidebar-right { grid-template-columns: minmax(0, 1fr) 260px; }
.sa-content .sa-grid--sidebar-wide-left  { grid-template-columns: 320px minmax(0, 1fr); }
.sa-content .sa-grid--sidebar-wide-right { grid-template-columns: minmax(0, 1fr) 320px; }

/* Gap modifiers */
.sa-content .sa-grid--gap-none { gap: 0; }
.sa-content .sa-grid--gap-xs   { gap: var(--gap-xs); }
.sa-content .sa-grid--gap-sm   { gap: var(--gap-sm); }
.sa-content .sa-grid--gap-md   { gap: var(--gap-md); }
.sa-content .sa-grid--gap-lg   { gap: var(--gap-lg); }
.sa-content .sa-grid--gap-xl   { gap: var(--gap-xl); }

/* Column gap only */
.sa-content .sa-grid--col-gap-sm { column-gap: var(--gap-sm); }
.sa-content .sa-grid--col-gap-md { column-gap: var(--gap-md); }
.sa-content .sa-grid--col-gap-lg { column-gap: var(--gap-lg); }

/* Row gap only */
.sa-content .sa-grid--row-gap-sm { row-gap: var(--gap-sm); }
.sa-content .sa-grid--row-gap-md { row-gap: var(--gap-md); }
.sa-content .sa-grid--row-gap-lg { row-gap: var(--gap-lg); }

/* ─────────────────────────────────────────────
   GRID ITEM SPAN HELPERS
   Use on children of .sa-grid
   ───────────────────────────────────────────── */

.sa-content .sa-col-span-1  { grid-column: span 1; }
.sa-content .sa-col-span-2  { grid-column: span 2; }
.sa-content .sa-col-span-3  { grid-column: span 3; }
.sa-content .sa-col-span-4  { grid-column: span 4; }
.sa-content .sa-col-span-5  { grid-column: span 5; }
.sa-content .sa-col-span-6  { grid-column: span 6; }
.sa-content .sa-col-span-full { grid-column: 1 / -1; }

.sa-content .sa-row-span-1  { grid-row: span 1; }
.sa-content .sa-row-span-2  { grid-row: span 2; }
.sa-content .sa-row-span-3  { grid-row: span 3; }

/* ─────────────────────────────────────────────
   12-COLUMN GRID SYSTEM
   .sa-row + .sa-col--N  (N = 1–12)
   ───────────────────────────────────────────── */

.sa-content .sa-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-md);
  width: 100%;
}

.sa-content .sa-row--gap-none { gap: 0; }
.sa-content .sa-row--gap-xs   { gap: var(--gap-xs); }
.sa-content .sa-row--gap-sm   { gap: var(--gap-sm); }
.sa-content .sa-row--gap-lg   { gap: var(--gap-lg); }
.sa-content .sa-row--gap-xl   { gap: var(--gap-xl); }

.sa-content .sa-col--1  { grid-column: span 1; }
.sa-content .sa-col--2  { grid-column: span 2; }
.sa-content .sa-col--3  { grid-column: span 3; }
.sa-content .sa-col--4  { grid-column: span 4; }
.sa-content .sa-col--5  { grid-column: span 5; }
.sa-content .sa-col--6  { grid-column: span 6; }
.sa-content .sa-col--7  { grid-column: span 7; }
.sa-content .sa-col--8  { grid-column: span 8; }
.sa-content .sa-col--9  { grid-column: span 9; }
.sa-content .sa-col--10 { grid-column: span 10; }
.sa-content .sa-col--11 { grid-column: span 11; }
.sa-content .sa-col--12 { grid-column: span 12; }

/* ─────────────────────────────────────────────
   FLEXBOX UTILITIES
   ───────────────────────────────────────────── */

.sa-content .sa-flex         { display: flex; }
.sa-content .sa-flex--wrap   { flex-wrap: wrap; }
.sa-content .sa-flex--nowrap { flex-wrap: nowrap; }
.sa-content .sa-flex--col    { flex-direction: column; }
.sa-content .sa-flex--row    { flex-direction: row; }

/* Alignment — main axis */
.sa-content .sa-flex--start    { justify-content: flex-start; }
.sa-content .sa-flex--end      { justify-content: flex-end; }
.sa-content .sa-flex--center   { justify-content: center; }
.sa-content .sa-flex--between  { justify-content: space-between; }
.sa-content .sa-flex--around   { justify-content: space-around; }
.sa-content .sa-flex--evenly   { justify-content: space-evenly; }

/* Alignment — cross axis */
.sa-content .sa-flex--top      { align-items: flex-start; }
.sa-content .sa-flex--bottom   { align-items: flex-end; }
.sa-content .sa-flex--middle   { align-items: center; }
.sa-content .sa-flex--stretch  { align-items: stretch; }
.sa-content .sa-flex--baseline { align-items: baseline; }

/* Gap */
.sa-content .sa-flex--gap-xs  { gap: var(--gap-xs); }
.sa-content .sa-flex--gap-sm  { gap: var(--gap-sm); }
.sa-content .sa-flex--gap-md  { gap: var(--gap-md); }
.sa-content .sa-flex--gap-lg  { gap: var(--gap-lg); }
.sa-content .sa-flex--gap-xl  { gap: var(--gap-xl); }

/* Flex item helpers */
.sa-content .sa-flex-1    { flex: 1 1 0%; }
.sa-content .sa-flex-auto { flex: 1 1 auto; }
.sa-content .sa-flex-none { flex: none; }
.sa-content .sa-flex-grow { flex-grow: 1; }

/* ─────────────────────────────────────────────
   CONTAINER / WRAPPER
   ───────────────────────────────────────────── */

.sa-content .sa-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.sa-content .sa-container--sm  { max-width: 480px; }
.sa-content .sa-container--md  { max-width: 640px; }
.sa-content .sa-container--lg  { max-width: 860px; }
.sa-content .sa-container--xl  { max-width: 1100px; }
.sa-content .sa-container--full { max-width: 100%; }

/* ─────────────────────────────────────────────
   SPACING — MARGIN & PADDING UTILITIES
   ───────────────────────────────────────────── */

/* Margin */
.sa-content .sa-m-0   { margin: 0; }
.sa-content .sa-m-xs  { margin: var(--sp-xs); }
.sa-content .sa-m-sm  { margin: var(--sp-sm); }
.sa-content .sa-m-md  { margin: var(--sp-md); }
.sa-content .sa-m-lg  { margin: var(--sp-lg); }
.sa-content .sa-m-xl  { margin: var(--sp-xl); }

.sa-content .sa-mt-0  { margin-top: 0; }
.sa-content .sa-mt-xs { margin-top: var(--sp-xs); }
.sa-content .sa-mt-sm { margin-top: var(--sp-sm); }
.sa-content .sa-mt-md { margin-top: var(--sp-md); }
.sa-content .sa-mt-lg { margin-top: var(--sp-lg); }
.sa-content .sa-mt-xl { margin-top: var(--sp-xl); }
.sa-content .sa-mt-2xl{ margin-top: var(--sp-2xl); }
.sa-content .sa-mt-3xl{ margin-top: var(--sp-3xl); }

.sa-content .sa-mb-0  { margin-bottom: 0; }
.sa-content .sa-mb-xs { margin-bottom: var(--sp-xs); }
.sa-content .sa-mb-sm { margin-bottom: var(--sp-sm); }
.sa-content .sa-mb-md { margin-bottom: var(--sp-md); }
.sa-content .sa-mb-lg { margin-bottom: var(--sp-lg); }
.sa-content .sa-mb-xl { margin-bottom: var(--sp-xl); }
.sa-content .sa-mb-2xl{ margin-bottom: var(--sp-2xl); }

.sa-content .sa-ml-auto { margin-left: auto; }
.sa-content .sa-mr-auto { margin-right: auto; }
.sa-content .sa-mx-auto { margin-left: auto; margin-right: auto; }

/* Padding */
.sa-content .sa-p-0   { padding: 0; }
.sa-content .sa-p-xs  { padding: var(--sp-xs); }
.sa-content .sa-p-sm  { padding: var(--sp-sm); }
.sa-content .sa-p-md  { padding: var(--sp-md); }
.sa-content .sa-p-lg  { padding: var(--sp-lg); }
.sa-content .sa-p-xl  { padding: var(--sp-xl); }
.sa-content .sa-p-2xl { padding: var(--sp-2xl); }

.sa-content .sa-px-sm { padding-left: var(--sp-sm); padding-right: var(--sp-sm); }
.sa-content .sa-px-md { padding-left: var(--sp-md); padding-right: var(--sp-md); }
.sa-content .sa-px-lg { padding-left: var(--sp-lg); padding-right: var(--sp-lg); }
.sa-content .sa-px-xl { padding-left: var(--sp-xl); padding-right: var(--sp-xl); }

.sa-content .sa-py-sm { padding-top: var(--sp-sm); padding-bottom: var(--sp-sm); }
.sa-content .sa-py-md { padding-top: var(--sp-md); padding-bottom: var(--sp-md); }
.sa-content .sa-py-lg { padding-top: var(--sp-lg); padding-bottom: var(--sp-lg); }
.sa-content .sa-py-xl { padding-top: var(--sp-xl); padding-bottom: var(--sp-xl); }
.sa-content .sa-py-2xl{ padding-top: var(--sp-2xl); padding-bottom: var(--sp-2xl); }

/* ─────────────────────────────────────────────
   TYPOGRAPHY UTILITIES
   ───────────────────────────────────────────── */

.sa-content .sa-text-xs   { font-size: 0.75rem; line-height: 1.4; }
.sa-content .sa-text-sm   { font-size: 0.875rem; line-height: 1.5; }
.sa-content .sa-text-base { font-size: 1rem; line-height: 1.7; }
.sa-content .sa-text-lg   { font-size: 1.125rem; line-height: 1.6; }
.sa-content .sa-text-xl   { font-size: 1.25rem; line-height: 1.5; }
.sa-content .sa-text-2xl  { font-size: 1.5rem; line-height: 1.4; }
.sa-content .sa-text-3xl  { font-size: 1.875rem; line-height: 1.3; }
.sa-content .sa-text-4xl  { font-size: 2.25rem; line-height: 1.2; }
.sa-content .sa-text-5xl  { font-size: 3rem; line-height: 1.1; }

.sa-content .sa-text-thin     { font-weight: 300; }
.sa-content .sa-text-normal   { font-weight: 400; }
.sa-content .sa-text-medium   { font-weight: 500; }
.sa-content .sa-text-bold     { font-weight: 700; }

.sa-content .sa-text-left    { text-align: left; }
.sa-content .sa-text-center  { text-align: center; }
.sa-content .sa-text-right   { text-align: right; }

.sa-content .sa-text-upper   { text-transform: uppercase; letter-spacing: 0.08em; }
.sa-content .sa-text-lower   { text-transform: lowercase; }
.sa-content .sa-text-caps    { text-transform: capitalize; }

.sa-content .sa-text-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sa-content .sa-text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sa-content .sa-text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Color utilities */
.sa-content .sa-text-navy     { color: var(--navy); }
.sa-content .sa-text-teal     { color: var(--teal); }
.sa-content .sa-text-teal-soft{ color: var(--teal-soft); }
.sa-content .sa-text-clay     { color: var(--clay); }
.sa-content .sa-text-sand     { color: var(--sand); }
.sa-content .sa-text-dim      { color: var(--sand-dim); }
.sa-content .sa-text-white    { color: #ffffff; }
.sa-content .sa-text-muted    { color: rgba(249,222,178,0.45); }

/* ─────────────────────────────────────────────
   BACKGROUND UTILITIES
   ───────────────────────────────────────────── */

.sa-content .sa-bg-navy       { background-color: var(--navy); }
.sa-content .sa-bg-navy-dark  { background-color: #00008a; }
.sa-content .sa-bg-teal       { background-color: var(--teal); }
.sa-content .sa-bg-teal-soft  { background-color: var(--teal-soft); }
.sa-content .sa-bg-clay       { background-color: var(--clay); }
.sa-content .sa-bg-sand       { background-color: var(--sand); color: var(--navy); }
.sa-content .sa-bg-white      { background-color: #ffffff; color: var(--navy); }
.sa-content .sa-bg-glass      { background-color: rgba(255,255,255,0.06); backdrop-filter: blur(8px); }
.sa-content .sa-bg-glass-dark { background-color: rgba(0,0,0,0.25); backdrop-filter: blur(8px); }
.sa-content .sa-bg-transparent{ background-color: transparent; }

/* ─────────────────────────────────────────────
   BORDER & DIVIDER UTILITIES
   ───────────────────────────────────────────── */

.sa-content .sa-border        { border: 1px solid var(--white-20); }
.sa-content .sa-border-teal   { border: 1px solid var(--teal); }
.sa-content .sa-border-sand   { border: 1px solid rgba(249,222,178,0.25); }
.sa-content .sa-border-top    { border-top: 1px solid var(--white-20); padding-top: var(--sp-md); }
.sa-content .sa-border-bottom { border-bottom: 1px solid var(--white-20); padding-bottom: var(--sp-md); }
.sa-content .sa-border-left   { border-left: 3px solid var(--teal); padding-left: var(--sp-md); }

.sa-content .sa-divider {
  border: none;
  border-top: 1px solid var(--white-20);
  margin: var(--sp-xl) 0;
}

.sa-content .sa-divider--teal {
  border-top-color: var(--teal);
  border-top-width: 2px;
}

/* ─────────────────────────────────────────────
   BORDER RADIUS
   ───────────────────────────────────────────── */

.sa-content .sa-rounded-sm   { border-radius: var(--radius-sm); }
.sa-content .sa-rounded      { border-radius: var(--radius-md); }
.sa-content .sa-rounded-lg   { border-radius: var(--radius-lg); }
.sa-content .sa-rounded-xl   { border-radius: var(--radius-xl); }
.sa-content .sa-rounded-full { border-radius: var(--radius-full); }

/* ─────────────────────────────────────────────
   CARD COMPONENTS
   ───────────────────────────────────────────── */

.sa-content .sa-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--white-20);
  border-radius: var(--radius-md);
  padding: var(--sp-lg);
  transition: border-color 0.2s, background 0.2s;
}

.sa-content .sa-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.3);
}

.sa-content .sa-card--teal {
  background: rgba(13,167,151,0.08);
  border-color: rgba(13,167,151,0.3);
}

.sa-content .sa-card--teal:hover {
  background: rgba(13,167,151,0.14);
  border-color: var(--teal);
}

.sa-content .sa-card--sand {
  background: rgba(249,222,178,0.07);
  border-color: rgba(249,222,178,0.2);
}

.sa-content .sa-card--dark {
  background: rgba(0,0,0,0.25);
  border-color: var(--white-10);
}

.sa-content .sa-card--glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,0.15);
}

.sa-content .sa-card--flat {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Card with accent top border */
.sa-content .sa-card--accent {
  border-top: 3px solid var(--teal);
}

/* ─────────────────────────────────────────────
   STAT / KPI BLOCKS
   ───────────────────────────────────────────── */

.sa-content .sa-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.sa-content .sa-stat__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-soft);
}

.sa-content .sa-stat__value {
  font-size: 2rem;
  font-weight: 300;
  color: var(--sand);
  line-height: 1;
}

.sa-content .sa-stat__note {
  font-size: 0.8rem;
  color: var(--sand-dim);
}

/* ─────────────────────────────────────────────
   BADGE / TAG / PILL
   ───────────────────────────────────────────── */

.sa-content .sa-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.2em 0.7em;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}

.sa-content .sa-badge--teal   { background: rgba(13,167,151,0.2);  color: var(--teal); border: 1px solid rgba(13,167,151,0.4); }
.sa-content .sa-badge--sand   { background: rgba(249,222,178,0.15); color: var(--sand); border: 1px solid rgba(249,222,178,0.3); }
.sa-content .sa-badge--clay   { background: rgba(158,127,94,0.2);   color: #c9a87a;     border: 1px solid rgba(158,127,94,0.4); }
.sa-content .sa-badge--navy   { background: var(--navy-40);         color: var(--sand); border: 1px solid var(--navy-20); }
.sa-content .sa-badge--ghost  { background: transparent;            color: var(--sand-dim); border: 1px solid var(--white-20); }

/* ─────────────────────────────────────────────
   BUTTON VARIANTS
   ───────────────────────────────────────────── */

.sa-content .sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.6em 1.4em;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  white-space: nowrap;
  border: 2px solid transparent;
}

.sa-content .sa-btn:active { transform: scale(0.97); }

.sa-content .sa-btn--primary {
  background: var(--teal);
  color: var(--navy);
  border-color: var(--teal);
}
.sa-content .sa-btn--primary:hover {
  background: var(--teal-soft);
  border-color: var(--teal-soft);
  color: var(--navy);
  text-decoration: none;
}

.sa-content .sa-btn--outline {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}
.sa-content .sa-btn--outline:hover {
  background: var(--teal);
  color: var(--navy);
  text-decoration: none;
}

.sa-content .sa-btn--ghost {
  background: transparent;
  color: var(--sand-dim);
  border-color: var(--white-20);
}
.sa-content .sa-btn--ghost:hover {
  color: var(--sand);
  border-color: var(--white-20);
  background: var(--white-10);
  text-decoration: none;
}

.sa-content .sa-btn--sand {
  background: var(--sand);
  color: var(--navy);
  border-color: var(--sand);
}
.sa-content .sa-btn--sand:hover {
  background: #f0cf9e;
  border-color: #f0cf9e;
  color: var(--navy);
  text-decoration: none;
}

.sa-content .sa-btn--sm { padding: 0.4em 0.9em; font-size: 0.75rem; }
.sa-content .sa-btn--lg { padding: 0.8em 2em;   font-size: 1rem; }
.sa-content .sa-btn--full { width: 100%; }

/* ─────────────────────────────────────────────
   LISTS
   ───────────────────────────────────────────── */

/* Clean unstyled list */
.sa-content .sa-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Bordered row list */
.sa-content .sa-list--rows > * {
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--white-10);
}
.sa-content .sa-list--rows > *:first-child { border-top: 1px solid var(--white-10); }

/* Inline list */
.sa-content .sa-list--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

/* Icon list */
.sa-content .sa-list--icon > * {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-xs) 0;
}

/* ─────────────────────────────────────────────
   TABLE UTILITIES
   ───────────────────────────────────────────── */

.sa-content .sa-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sa-content .sa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.sa-content .sa-table th,
.sa-content .sa-table td {
  padding: 0.65rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--white-10);
}

.sa-content .sa-table th {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-soft);
  background: rgba(255,255,255,0.04);
}

.sa-content .sa-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

.sa-content .sa-table--striped tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.025);
}

.sa-content .sa-table--bordered th,
.sa-content .sa-table--bordered td {
  border: 1px solid var(--white-10);
}

/* ─────────────────────────────────────────────
   DISPLAY & VISIBILITY UTILITIES
   ───────────────────────────────────────────── */

.sa-content .sa-block  { display: block; }
.sa-content .sa-inline { display: inline; }
.sa-content .sa-inline-flex { display: inline-flex; }
.sa-content .sa-inline-block { display: inline-block; }
.sa-content .sa-hidden { display: none; }

.sa-content .sa-overflow-hidden { overflow: hidden; }
.sa-content .sa-overflow-auto   { overflow: auto; }
.sa-content .sa-overflow-scroll { overflow: scroll; }

.sa-content .sa-relative { position: relative; }
.sa-content .sa-absolute { position: absolute; }
.sa-content .sa-sticky   { position: sticky; top: 0; z-index: 10; }

.sa-content .sa-w-full  { width: 100%; }
.sa-content .sa-h-full  { height: 100%; }
.sa-content .sa-w-auto  { width: auto; }
.sa-content .sa-max-full{ max-width: 100%; }

/* ─────────────────────────────────────────────
   ASPECT RATIOS
   ───────────────────────────────────────────── */

.sa-content .sa-aspect-square { aspect-ratio: 1 / 1; }
.sa-content .sa-aspect-video  { aspect-ratio: 16 / 9; }
.sa-content .sa-aspect-4-3    { aspect-ratio: 4 / 3; }
.sa-content .sa-aspect-3-2    { aspect-ratio: 3 / 2; }

.sa-content .sa-aspect-square img,
.sa-content .sa-aspect-video  img,
.sa-content .sa-aspect-4-3    img,
.sa-content .sa-aspect-3-2    img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─────────────────────────────────────────────
   SECTION / HERO BLOCKS
   ───────────────────────────────────────────── */

.sa-content .sa-section {
  padding: var(--sp-2xl) 0;
}

.sa-content .sa-section--sm { padding: var(--sp-lg) 0; }
.sa-content .sa-section--lg { padding: var(--sp-3xl) 0; }

.sa-content .sa-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px;
  padding: var(--sp-2xl);
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-lg);
  border: 1px solid var(--white-10);
  margin-bottom: var(--sp-xl);
}

.sa-content .sa-hero--center {
  align-items: center;
  text-align: center;
}

/* ─────────────────────────────────────────────
   MEDIA OBJECT (icon/image + text)
   ───────────────────────────────────────────── */

.sa-content .sa-media {
  display: flex;
  gap: var(--sp-md);
  align-items: flex-start;
}

.sa-content .sa-media__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--teal);
}

.sa-content .sa-media__icon--lg {
  width: 56px;
  height: 56px;
  font-size: 1.75rem;
}

.sa-content .sa-media__icon--circle {
  border-radius: 50%;
  background: rgba(13,167,151,0.12);
  border: 1px solid rgba(13,167,151,0.25);
}

.sa-content .sa-media__body { flex: 1; min-width: 0; }

/* ─────────────────────────────────────────────
   TIMELINE
   ───────────────────────────────────────────── */

.sa-content .sa-timeline {
  position: relative;
  padding-left: var(--sp-xl);
  list-style: none;
  margin: 0;
}

.sa-content .sa-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--teal) 0%, transparent 100%);
  opacity: 0.4;
}

.sa-content .sa-timeline__item {
  position: relative;
  padding-bottom: var(--sp-lg);
  border: none;
}

.sa-content .sa-timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-xl) + 3px);
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
  border: 2px solid var(--navy);
  box-shadow: 0 0 0 3px rgba(13,167,151,0.2);
}

.sa-content .sa-timeline__date {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-soft);
  margin-bottom: var(--sp-xs);
}

.sa-content .sa-timeline__title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--sand);
  margin-bottom: var(--sp-xs);
}

.sa-content .sa-timeline__body {
  font-size: 0.875rem;
  color: var(--sand-dim);
}

/* ─────────────────────────────────────────────
   ACCORDION / DISCLOSURE (nested within panels)
   ───────────────────────────────────────────── */

.sa-content .sa-disclosure {
  border: 1px solid var(--white-10);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--sp-sm);
}

.sa-content .sa-disclosure__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) var(--sp-lg);
  background: rgba(255,255,255,0.04);
  border: none;
  color: var(--sand);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
  text-transform: none;
  letter-spacing: 0;
}

.sa-content .sa-disclosure__trigger:hover {
  background: rgba(255,255,255,0.08);
}

.sa-content .sa-disclosure__trigger::after {
  content: '+';
  font-size: 1.1rem;
  opacity: 0.5;
  transition: transform 0.25s;
  flex-shrink: 0;
}

.sa-content .sa-disclosure.is-open .sa-disclosure__trigger::after {
  transform: rotate(45deg);
}

.sa-content .sa-disclosure__body {
  display: none;
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
  font-size: 0.9rem;
  color: var(--sand-dim);
  background: rgba(0,0,0,0.1);
  border-top: 1px solid var(--white-10);
}

.sa-content .sa-disclosure.is-open .sa-disclosure__body {
  display: block;
}

/* ─────────────────────────────────────────────
   PROGRESS / METER
   ───────────────────────────────────────────── */

.sa-content .sa-progress {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--sp-sm);
}

.sa-content .sa-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal-soft) 100%);
  border-radius: var(--radius-full);
  transition: width 0.6s var(--ease-panel);
}

.sa-content .sa-progress--sm { height: 3px; }
.sa-content .sa-progress--lg { height: 10px; }

/* ─────────────────────────────────────────────
   CALLOUT / ALERT BOXES
   ───────────────────────────────────────────── */

.sa-content .sa-callout {
  display: flex;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--teal);
  background: rgba(13,167,151,0.08);
  margin-bottom: var(--sp-md);
  font-size: 0.9rem;
}

.sa-content .sa-callout--warning {
  border-left-color: #e6a817;
  background: rgba(230,168,23,0.08);
}

.sa-content .sa-callout--info {
  border-left-color: var(--navy-20);
  background: rgba(77,77,239,0.08);
}

.sa-content .sa-callout--sand {
  border-left-color: var(--sand);
  background: rgba(249,222,178,0.07);
}

.sa-content .sa-callout__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  margin-top: 2px;
}

.sa-content .sa-callout__body { flex: 1; }

/* ─────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
   All grid/column rules collapse gracefully.
   ─────────────────────────────────────────────

   Breakpoints (matching the accordion panel widths):
     xs: < 480px
     sm: 480px – 767px
     md: 768px – 1023px
     lg: 1024px+
   ───────────────────────────────────────────── */

/* ── sm (480px) ── */
@media (max-width: 480px) {
  .sa-content .sa-grid--2,
  .sa-content .sa-grid--3,
  .sa-content .sa-grid--4,
  .sa-content .sa-grid--5,
  .sa-content .sa-grid--6 { grid-template-columns: 1fr; }

  .sa-content .sa-grid--sidebar-left,
  .sa-content .sa-grid--sidebar-right,
  .sa-content .sa-grid--sidebar-wide-left,
  .sa-content .sa-grid--sidebar-wide-right { grid-template-columns: 1fr; }

  .sa-content .sa-col--1,  .sa-content .sa-col--2,
  .sa-content .sa-col--3,  .sa-content .sa-col--4,
  .sa-content .sa-col--5,  .sa-content .sa-col--6,
  .sa-content .sa-col--7,  .sa-content .sa-col--8,
  .sa-content .sa-col--9,  .sa-content .sa-col--10,
  .sa-content .sa-col--11, .sa-content .sa-col--12 { grid-column: span 12; }

  .sa-content .sa-row { grid-template-columns: 1fr; }

  .sa-content .sa-flex--row-sm-col { flex-direction: column; }
  .sa-content .sa-hidden--xs { display: none; }
  .sa-content .sa-show--xs   { display: block; }

  .sa-content .sa-text-5xl { font-size: 2rem; }
  .sa-content .sa-text-4xl { font-size: 1.6rem; }
  .sa-content .sa-text-3xl { font-size: 1.35rem; }

  .sa-content .sa-hero { min-height: 180px; padding: var(--sp-lg); }
  .sa-content .sa-stat__value { font-size: 1.6rem; }
}

/* ── sm–md (481px–767px) ── */
@media (min-width: 481px) and (max-width: 767px) {
  .sa-content .sa-grid--3,
  .sa-content .sa-grid--4,
  .sa-content .sa-grid--5,
  .sa-content .sa-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sa-content .sa-grid--sidebar-left,
  .sa-content .sa-grid--sidebar-right { grid-template-columns: 1fr; }

  .sa-content .sa-col--1,
  .sa-content .sa-col--2,
  .sa-content .sa-col--3  { grid-column: span 6; }
  .sa-content .sa-col--4,
  .sa-content .sa-col--5,
  .sa-content .sa-col--6  { grid-column: span 6; }
  .sa-content .sa-col--7,
  .sa-content .sa-col--8  { grid-column: span 8; }
  .sa-content .sa-col--9,
  .sa-content .sa-col--10,
  .sa-content .sa-col--11,
  .sa-content .sa-col--12 { grid-column: span 12; }

  .sa-content .sa-hidden--sm { display: none; }
  .sa-content .sa-show--sm   { display: block; }
}

/* ── md (768px–1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .sa-content .sa-grid--4,
  .sa-content .sa-grid--5,
  .sa-content .sa-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .sa-content .sa-hidden--md { display: none; }
  .sa-content .sa-show--md   { display: block; }
}

/* ── lg+ (1024px+) ── */
@media (min-width: 1024px) {
  .sa-content .sa-hidden--lg { display: none; }
  .sa-content .sa-show--lg   { display: block; }
}

/* ─────────────────────────────────────────────
   PANEL-WIDTH AWARE BREAKPOINTS
   The accordion panel is narrower than the full
   viewport so we add tighter grid collapse rules
   when the panel content area is constrained.
   Uses container queries where supported,
   falls back to the above media queries.
   ───────────────────────────────────────────── */

@supports (container-type: inline-size) {
  .sa-content {
    container-type: inline-size;
    container-name: panel;
  }

  @container panel (max-width: 480px) {
    .sa-grid--2, .sa-grid--3,
    .sa-grid--4, .sa-grid--5, .sa-grid--6 {
      grid-template-columns: 1fr;
    }
    .sa-grid--sidebar-left,
    .sa-grid--sidebar-right,
    .sa-grid--sidebar-wide-left,
    .sa-grid--sidebar-wide-right {
      grid-template-columns: 1fr;
    }
    .sa-row { grid-template-columns: 1fr; }
    .sa-col--1, .sa-col--2, .sa-col--3, .sa-col--4,
    .sa-col--5, .sa-col--6, .sa-col--7, .sa-col--8,
    .sa-col--9, .sa-col--10,.sa-col--11,.sa-col--12 {
      grid-column: span 12;
    }
  }

  @container panel (min-width: 481px) and (max-width: 700px) {
    .sa-grid--3, .sa-grid--4,
    .sa-grid--5, .sa-grid--6 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sa-grid--sidebar-left,
    .sa-grid--sidebar-right {
      grid-template-columns: 1fr;
    }
  }

  @container panel (min-width: 701px) and (max-width: 960px) {
    .sa-grid--5, .sa-grid--6 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

/* ─────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────── */

@media print {
  .sa-content .sa-hidden--print { display: none; }
  .sa-content .sa-card,
  .sa-content .sa-callout {
    border: 1px solid #ccc;
    background: transparent;
  }
}