/* ==========================================================================
   SIMORGH — components.css
   Reusable UI components. Prefixed .sg- so nothing collides with Bootstrap.
   Bootstrap supplies grid utilities and the off-canvas primitive only;
   every visual component below is ours.
   ========================================================================== */


/* ==========================================================================
   1. BUTTONS
   ========================================================================== */

.sg-btn {
  --btn-bg: var(--sg-teal-700);
  --btn-fg: var(--sg-white);
  --btn-bd: var(--sg-teal-700);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sg-s-3);
  padding: 15px var(--sg-s-6);
  min-height: 52px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--sg-r-sm);
  font-family: var(--sg-font-body);
  font-size: var(--sg-fs-sm);
  font-weight: var(--sg-fw-semi);
  letter-spacing: .01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--sg-dur-fast) var(--sg-ease-out),
              border-color var(--sg-dur-fast) var(--sg-ease-out),
              color var(--sg-dur-fast) var(--sg-ease-out),
              transform var(--sg-dur-fast) var(--sg-ease-out);
}

/* The gold sweep. One ornament, one place: it fills from the left edge on
   hover, reading as the same hairline from the eyebrow device growing.   */
.sg-btn::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--sg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--sg-dur-fast) var(--sg-ease-out);
}
.sg-btn:hover::after,
.sg-btn:focus-visible::after { transform: scaleX(1); }
.sg-btn:hover { transform: translateY(-1px); }
.sg-btn:active { transform: translateY(0); }

.sg-btn--primary   { --btn-bg: var(--sg-burg-600); --btn-bd: var(--sg-burg-600); }
.sg-btn--primary:hover { --btn-bg: var(--sg-teal-600); --btn-bd: var(--sg-teal-600); }

.sg-btn--outline   { --btn-bg: transparent; --btn-fg: var(--sg-teal-700); --btn-bd: var(--sg-border-strong); }
.sg-btn--outline:hover { --btn-bd: var(--sg-teal-700); --btn-bg: var(--sg-teal-100); --btn-fg: var(--sg-teal-700); }

.sg-btn--ghost     { --btn-bg: transparent; --btn-fg: var(--sg-teal-700); --btn-bd: transparent; padding-inline: var(--sg-s-3); }
.sg-btn--ghost:hover { --btn-fg: var(--sg-teal-600); }

/* On dark surfaces */
.sg-btn--invert    { --btn-bg: var(--sg-white); --btn-fg: var(--sg-teal-700); --btn-bd: var(--sg-white); }
.sg-btn--invert:hover { --btn-bg: var(--sg-gold-100); --btn-bd: var(--sg-gold-100); }
.sg-btn--outline-invert { --btn-bg: transparent; --btn-fg: var(--sg-white); --btn-bd: rgba(255,255,255,.4); }
.sg-btn--outline-invert:hover { --btn-bd: var(--sg-gold-300); --btn-bg: rgba(255,255,255,.06); --btn-fg: var(--sg-white); }

/* Channel buttons — call and WhatsApp carry an icon slot */
.sg-btn--sm  { min-height: 42px; padding: 10px var(--sg-s-5); font-size: var(--sg-fs-xs); }
.sg-btn--lg  { min-height: 60px; padding: 18px var(--sg-s-7); font-size: var(--sg-fs-body); }
.sg-btn--block { display: flex; width: 100%; }
.sg-btn[aria-disabled="true"], .sg-btn:disabled { opacity: .45; pointer-events: none; }
.sg-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }


/* ==========================================================================
   2. NAVIGATION
   Two states: transparent over the hero canvas, and frosted white once
   scrolled. main.js toggles .is-scrolled at 60px.
   ========================================================================== */

.sg-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--sg-z-nav);
  height: var(--sg-nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height var(--sg-dur-fast) var(--sg-ease-out),
              background var(--sg-dur-fast) var(--sg-ease-out),
              box-shadow var(--sg-dur-fast) var(--sg-ease-out),
              border-color var(--sg-dur-fast) var(--sg-ease-out);
}
.sg-nav__inner {
  width: 100%;
  max-width: var(--sg-container-wide);
  margin-inline: auto;
  padding-inline: var(--sg-gutter);
  display: flex;
  align-items: center;
  gap: var(--sg-s-6);
}
.sg-nav__logo { margin-right: auto; display: flex; align-items: center; }
.sg-nav__logo img {
  height: 46px; width: auto;
  transition: height var(--sg-dur-fast) var(--sg-ease-out);
}
/* Two artwork variants, never a recoloured logo: the white knockout sits
   over the hero, the full-colour lockup appears once the bar is white.   */
.sg-nav__logo .is-light { display: block; }
.sg-nav__logo .is-dark  { display: none; }

.sg-nav__menu { display: flex; align-items: center; gap: var(--sg-s-5); }
.sg-nav__link {
  position: relative;
  font-size: var(--sg-fs-sm);
  font-weight: var(--sg-fw-medium);
  color: var(--sg-burg-700);
  text-decoration: none;
  padding-block: var(--sg-s-2);
  white-space: nowrap;
}
.sg-nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--sg-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--sg-dur-fast) var(--sg-ease-out);
}
.sg-nav__link:hover::after,
.sg-nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.sg-nav__link:hover { color: var(--sg-white); }

.sg-nav .sg-btn { min-height: 44px; padding-inline: var(--sg-s-5); }

/* scrolled state */
.sg-nav.is-scrolled {
  height: var(--sg-nav-h-scrolled);
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--sg-border);
  box-shadow: var(--sg-sh-nav);
}
.sg-nav.is-scrolled .sg-nav__logo img { height: 38px; }
.sg-nav.is-scrolled .sg-nav__logo .is-light { display: none; }
.sg-nav.is-scrolled .sg-nav__logo .is-dark  { display: block; }
.sg-nav.is-scrolled .sg-nav__link { color: var(--sg-text); }
.sg-nav.is-scrolled .sg-nav__link:hover { color: var(--sg-teal-700); }

/* Gold hairline under the frosted bar — the brief's "gold accent line" */
.sg-nav.is-scrolled::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--sg-accent) 0%, rgba(192,146,53,0) 70%);
}

/* Inner pages start in the solid state — no hero canvas behind them */
.sg-nav--solid { position: sticky; background: var(--sg-white); border-bottom-color: var(--sg-border); }
.sg-nav--solid .sg-nav__link { color: var(--sg-text); }
.sg-nav--solid .sg-nav__logo .is-light { display: none; }
.sg-nav--solid .sg-nav__logo .is-dark  { display: block; }

/* burger */
.sg-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.sg-burger span {
  display: block; width: 24px; height: 2px; background: currentColor;
  position: relative; transition: background var(--sg-dur-fast);
}
.sg-burger span::before, .sg-burger span::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor;
  transition: transform var(--sg-dur-fast) var(--sg-ease-out);
}
.sg-burger span::before { top: -7px; }
.sg-burger span::after  { top: 7px; }
.sg-burger[aria-expanded="true"] span { background: transparent; }
.sg-burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.sg-burger[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1199px) {
  .sg-nav__menu, .sg-nav__inner > .sg-btn { display: none; }
  .sg-burger { display: flex; color: var(--sg-white); }
  .sg-nav.is-scrolled .sg-burger, .sg-nav--solid .sg-burger { color: var(--sg-text); }
}

/* off-canvas */
.sg-offcanvas {
  position: fixed; inset: 0 0 0 auto;
  width: min(420px, 88vw);
  background: var(--sg-teal-700);
  color: var(--sg-text-invert);
  z-index: var(--sg-z-offcanvas);
  transform: translateX(100%);
  transition: transform var(--sg-dur-base) var(--sg-ease-mask);
  display: flex; flex-direction: column;
  padding: var(--sg-s-7) var(--sg-s-6);
  overflow-y: auto;
}
.sg-offcanvas.is-open { transform: translateX(0); }
.sg-offcanvas__link {
  display: block;
  font-family: var(--sg-font-display);
  font-size: 1.5rem;
  font-weight: var(--sg-fw-semi);
  text-transform: uppercase;
  color: var(--sg-white);
  text-decoration: none;
  padding: var(--sg-s-4) 0;
  border-bottom: 1px solid var(--sg-border-invert);
}
.sg-offcanvas__link:hover { color: var(--sg-gold-200); }
.sg-offcanvas__backdrop {
  position: fixed; inset: 0; z-index: calc(var(--sg-z-offcanvas) - 1);
  background: rgba(0,48,46,.5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--sg-dur-fast);
}
.sg-offcanvas__backdrop.is-open { opacity: 1; pointer-events: auto; }


/* ==========================================================================
   3. CARDS
   Three variants. They share a shell so a section can swap variant without
   a layout change when real photography arrives.
   ========================================================================== */

.sg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-md);
  overflow: hidden;
  transition: border-color var(--sg-dur-fast) var(--sg-ease-out),
              box-shadow var(--sg-dur-fast) var(--sg-ease-out),
              transform var(--sg-dur-fast) var(--sg-ease-out);
}
.sg-card:hover { border-color: var(--sg-border-strong); box-shadow: var(--sg-sh-3); transform: translateY(-3px); }
.sg-card__media { position: relative; overflow: hidden; background: var(--sg-teal-100); }
.sg-card__media img { transition: transform var(--sg-dur-slow) var(--sg-ease-out); }
.sg-card:hover .sg-card__media img { transform: scale(1.04); }
.sg-card__body { padding: var(--sg-s-5) var(--sg-s-5) var(--sg-s-6); display: flex; flex-direction: column; gap: var(--sg-s-3); flex: 1; }
.sg-card__title { font-size: var(--sg-fs-h4); }
.sg-card__text { font-size: var(--sg-fs-sm); color: var(--sg-text-muted); margin: 0; }
.sg-card__foot { margin-top: auto; padding-top: var(--sg-s-3); }

/* Icon variant — the fallback while full-resolution photography is
   outstanding. Duotone teal panel, gold rule, no stretched thumbnail.    */
.sg-card--icon .sg-card__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--sg-teal-100);
  border-radius: var(--sg-r-sm);
  color: var(--sg-teal-700);
  margin-bottom: var(--sg-s-2);
}
.sg-card--icon .sg-card__icon svg { width: 26px; height: 26px; }

/* Editorial variant — numbered, no media, for process or list content */
.sg-card--editorial { background: transparent; border: 0; border-top: 1px solid var(--sg-border); border-radius: 0; }
.sg-card--editorial:hover { transform: none; box-shadow: none; border-color: var(--sg-accent); }
.sg-card--editorial .sg-card__body { padding: var(--sg-s-5) 0 var(--sg-s-6); }
.sg-card__index {
  font-family: var(--sg-font-mono);
  font-size: var(--sg-fs-xs);
  letter-spacing: .1em;
  color: var(--sg-gold-600);
}

/* Dark card, for the technology showroom */
.sg-card--dark { background: var(--sg-teal-800); border-color: rgba(255,255,255,.1); color: var(--sg-text-invert); }
.sg-card--dark .sg-card__title { color: var(--sg-white); }
.sg-card--dark .sg-card__text  { color: var(--sg-text-invert-muted); }
.sg-card--dark:hover { border-color: var(--sg-gold-300); }


/* ==========================================================================
   4. SERVICE LIST ITEM
   Used by the sticky progressive list (neuro rehabilitation, §18).
   ========================================================================== */

.sg-listitem {
  display: flex;
  gap: var(--sg-s-4);
  align-items: baseline;
  padding: var(--sg-s-4) 0;
  border-bottom: 1px solid var(--sg-border);
}
.sg-listitem__mark { width: 8px; height: 8px; flex: 0 0 auto; background: var(--sg-accent); border-radius: 50%; transform: translateY(-2px); }
.sg-listitem__text { font-size: var(--sg-fs-body); color: var(--sg-text-soft); margin: 0; max-width: none; }
.sg-surface-dark .sg-listitem { border-bottom-color: var(--sg-border-invert); }
.sg-surface-dark .sg-listitem__text { color: var(--sg-text-invert); }


/* ==========================================================================
   5. CHIPS — condition categories, filters
   ========================================================================== */

.sg-chip {
  display: inline-flex; align-items: center; gap: var(--sg-s-2);
  padding: 8px var(--sg-s-4);
  min-height: 40px;
  border: 1px solid var(--sg-border-strong);
  border-radius: var(--sg-r-pill);
  background: var(--sg-surface);
  color: var(--sg-text-soft);
  font-size: var(--sg-fs-xs);
  font-weight: var(--sg-fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--sg-dur-fast) var(--sg-ease-out);
}
.sg-chip:hover { border-color: var(--sg-teal-700); color: var(--sg-teal-700); }
.sg-chip[aria-pressed="true"], .sg-chip.is-active {
  background: var(--sg-teal-700); border-color: var(--sg-teal-700); color: var(--sg-white);
}


/* ==========================================================================
   6. STATEMENT BLOCK — the differentiator claims (§22)
   Verbatim brochure wording, set large. No paraphrase, no added claims.
   ========================================================================== */

.sg-statement {
  position: relative;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 2px solid var(--sg-accent);
 
}
.sg-statement__text {
  font-family: var(--sg-font-display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
  font-weight: var(--sg-fw-semi);
  line-height: 1.14;
  letter-spacing: var(--sg-ls-head);
  margin: 0;
  max-width: none;
}
.sg-statement__source {
  display: block;
  margin-top: var(--sg-s-4);
  font-family: var(--sg-font-mono);
  font-size: var(--sg-fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sg-text-muted);
}
.sg-surface-dark .sg-statement__source { color: var(--sg-text-invert-muted); }


/* ==========================================================================
   7. INSTITUTE BAR — the one burgundy device
   Mirrors the solid burgundy block in the logo lockup. Used for the
   medical disclaimer strip and nowhere decorative.
   ========================================================================== */

.sg-bar {
  display: inline-block;
  background: var(--sg-burg-700);
  color: var(--sg-white);
  padding: 10px var(--sg-s-5);
  font-family: var(--sg-font-display);
  font-size: var(--sg-fs-xs);
  font-weight: var(--sg-fw-semi);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sg-disclaimer {
  border-left: 3px solid var(--sg-burg-700);
  background: var(--sg-surface);
  padding: var(--sg-s-4) var(--sg-s-5);
  font-size: var(--sg-fs-xs);
  color: var(--sg-text-muted);
  border-radius: 0 var(--sg-r-sm) var(--sg-r-sm) 0;
}
.sg-disclaimer p { max-width: none; }


/* ==========================================================================
   8. FORMS
   ========================================================================== */

.sg-field { display: flex; flex-direction: column; gap: var(--sg-s-2); margin-bottom: var(--sg-s-5); }
.sg-label { font-size: var(--sg-fs-xs); font-weight: var(--sg-fw-semi); letter-spacing: .02em; color: var(--sg-text-soft); }
.sg-label .req { color: var(--sg-burg-700); margin-left: 2px; }

.sg-input, .sg-select, .sg-textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px var(--sg-s-4);
  background: var(--sg-surface);
  border: 1px solid var(--sg-border-strong);
  border-radius: var(--sg-r-sm);
  font-size: var(--sg-fs-sm);
  color: var(--sg-text);
  transition: border-color var(--sg-dur-fast) var(--sg-ease-out),
              box-shadow var(--sg-dur-fast) var(--sg-ease-out);
}
.sg-textarea { min-height: 132px; resize: vertical; padding-top: var(--sg-s-4); line-height: 1.6; }
.sg-input::placeholder, .sg-textarea::placeholder { color: var(--sg-ink-300); }
.sg-input:focus, .sg-select:focus, .sg-textarea:focus {
  outline: none;
  border-color: var(--sg-teal-700);
  box-shadow: 0 0 0 3px rgba(0,89,85,.12);
}
.sg-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sg-teal-700) 50%),
                    linear-gradient(135deg, var(--sg-teal-700) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--sg-s-8);
}

/* Error state — the second and last place burgundy appears */
.sg-field.has-error .sg-input,
.sg-field.has-error .sg-select,
.sg-field.has-error .sg-textarea { border-color: var(--sg-burg-700); background: var(--sg-danger-bg); }
.sg-error {
  display: flex; align-items: center; gap: var(--sg-s-2);
  font-size: var(--sg-fs-xs);
  color: var(--sg-burg-700);
  font-weight: var(--sg-fw-medium);
}
.sg-hint { font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }

.sg-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; }


/* ==========================================================================
   9. BREADCRUMBS
   ========================================================================== */

.sg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-s-2); font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sg-crumbs a { color: inherit; text-decoration: none; color: var(--sg-teal-500);  }
.sg-crumbs a:hover { color: var(--sg-teal-700); }
.sg-crumbs li + li::before { content: "/"; margin-right: var(--sg-s-2); color: var(--sg-gold-500); }
.sg-crumbs li { display: flex; align-items: center; }
.sg-crumbs [aria-current="page"] { color: var(--sg-text); font-weight: var(--sg-fw-medium); }


/* ==========================================================================
   10. STICKY MOBILE CTA (§30)
   ========================================================================== */

.sg-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--sg-z-sticky);
  display: none;
  background: var(--sg-white);
  border-top: 1px solid var(--sg-border);
  box-shadow: 0 -4px 20px rgba(0,64,61,.10);
  padding-bottom: env(safe-area-inset-bottom);
}
.sg-sticky-cta a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 10px 4px;
  min-height: 62px;
  font-size: 11px;
  font-weight: var(--sg-fw-semi);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sg-text-soft);
  border-right: 1px solid var(--sg-border);
}
.sg-sticky-cta a:last-child { border-right: 0; background: var(--sg-teal-700); color: var(--sg-white); }
.sg-sticky-cta svg { width: 20px; height: 20px; }

@media (max-width: 767px) {
  .sg-sticky-cta { display: flex; }
  body { padding-bottom: 62px; }
}


/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.sg-footer { background: var(--sg-teal-900); color: var(--sg-text-invert-muted); padding-top: var(--sg-section); }
.sg-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 64px); }
.sg-footer h4 {
  font-family: var(--sg-font-display);
  font-size: var(--sg-fs-xs);
  font-weight: var(--sg-fw-semi);
  letter-spacing: var(--sg-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sg-gold-200);
  margin-bottom: var(--sg-s-4);
}
.sg-footer a { color: var(--sg-text-invert-muted); text-decoration: none; font-size: var(--sg-fs-sm); }
.sg-footer a:hover { color: var(--sg-white); }
.sg-footer li { padding-block: 5px; }
.sg-footer__logo img { height: 68px; width: auto; margin-bottom: var(--sg-s-4); }
.sg-footer__tag { font-family: var(--sg-font-mono); font-size: var(--sg-fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--sg-gold-200); }
.sg-footer__base {
  margin-top: var(--sg-s-8);
  padding-block: var(--sg-s-5);
  border-top: 1px solid var(--sg-border-invert);
  display: flex; flex-wrap: wrap; gap: var(--sg-s-4); justify-content: space-between;
  font-size: var(--sg-fs-xs);
}
/* Social icons render disabled until official URLs are supplied (§46) */
.sg-social { display: flex; gap: var(--sg-s-3); }
.sg-social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--sg-border-invert); border-radius: var(--sg-r-sm);
}
.sg-social a:hover { border-color: var(--sg-gold-300); }
.sg-social a[aria-disabled="true"] { opacity: .35; pointer-events: none; }

@media (max-width: 991px) { .sg-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .sg-footer__grid { grid-template-columns: 1fr; } }


/* ==========================================================================
   12. CTA BAND — closes every page
   ========================================================================== */

.sg-cta-band { background: var( --sg-gold-600); color: var(--sg-text-invert); padding-block: var(--sg-section); }
.sg-cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sg-s-6); }
.sg-cta-band h2 { color: var(--sg-white); max-width: 20ch; }
.sg-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sg-s-3); }
.sg-cta-band .sg-eyebrow{
  color: var(--sg-white);
}

/* ==========================================================================
   13. DROPDOWN — Services menu
   Hover opens it on pointer devices (CSS, so it is instant); the chevron
   button opens it for keyboard and touch. Both paths set the same state.
   ========================================================================== */

.sg-drop { position: relative; display: flex; align-items: center; gap: 2px; }

.sg-drop__toggle {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  color: inherit;
  border-radius: var(--sg-r-sm);
  transition: transform var(--sg-dur-fast) var(--sg-ease-out);
}
.sg-drop__toggle svg { width: 15px; height: 15px; }
.sg-nav__link + .sg-drop__toggle { opacity: .7; }
.sg-drop:hover .sg-drop__toggle,
.sg-drop.is-open .sg-drop__toggle { opacity: 1; transform: rotate(180deg); }

.sg-drop__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(620px, 78vw);
  background: var(--sg-white);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-md);
  box-shadow: var(--sg-sh-4);
  padding: var(--sg-s-4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--sg-dur-fast) var(--sg-ease-out),
              transform var(--sg-dur-fast) var(--sg-ease-out),
              visibility var(--sg-dur-fast);
  z-index: 5;
}
/* Bridges the gap between the trigger and the panel, so moving the pointer
   down to the panel does not pass through dead space and close it. */
.sg-drop__panel::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.sg-drop__panel::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--sg-accent), transparent 70%);
  border-radius: var(--sg-r-md) var(--sg-r-md) 0 0;
}

.sg-drop:hover .sg-drop__panel,
.sg-drop:focus-within .sg-drop__panel,
.sg-drop.is-open .sg-drop__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.sg-drop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

.sg-drop__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sg-s-3) var(--sg-s-4);
  border-radius: var(--sg-r-sm);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--sg-dur-fast) var(--sg-ease-out),
              border-color var(--sg-dur-fast) var(--sg-ease-out);
}
.sg-drop__item:hover,
.sg-drop__item:focus-visible { background: var(--sg-teal-100); border-left-color: var(--sg-accent); }
.sg-drop__item[aria-current="page"] { background: var(--sg-teal-100); border-left-color: var(--sg-teal-700); }

.sg-drop__name { font-size: var(--sg-fs-sm); font-weight: var(--sg-fw-semi); color: var(--sg-text); }
.sg-drop__note { font-size: var(--sg-fs-xs); color: var(--sg-text-muted); line-height: 1.4; }

.sg-drop__all {
  display: block;
  margin-top: var(--sg-s-3);
  padding-top: var(--sg-s-3);
  border-top: 1px solid var(--sg-border);
  font-size: var(--sg-fs-xs);
  font-weight: var(--sg-fw-semi);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sg-teal-700);
  text-decoration: none;
}
.sg-drop__all:hover { color: var(--sg-gold-600); }

/* The panel is white in both nav states, so its contents keep dark text
   even while the bar itself is transparent over the hero. */
.sg-on-dark .sg-drop__panel .sg-drop__name { color: var(--sg-text); }

@media (max-width: 1199px) { .sg-drop { display: none; } }


/* ==========================================================================
   14. OFF-CANVAS SUBMENU
   ========================================================================== */

.sg-offcanvas__group { border-bottom: 1px solid var(--sg-border-invert); }
.sg-offcanvas__row { display: flex; align-items: center; justify-content: space-between; }
.sg-offcanvas__group .sg-offcanvas__link { border-bottom: 0; flex: 1; }

.sg-offcanvas__toggle {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--sg-gold-200);
  transition: transform var(--sg-dur-fast) var(--sg-ease-out);
}
.sg-offcanvas__toggle svg { width: 20px; height: 20px; }
.sg-offcanvas__toggle[aria-expanded="true"] { transform: rotate(180deg); }

.sg-offcanvas__sub { padding: 0 0 var(--sg-s-4) var(--sg-s-4); display: grid; gap: 2px; }
.sg-offcanvas__sub a {
  display: block;
  padding: var(--sg-s-3) var(--sg-s-3);
  font-size: var(--sg-fs-sm);
  color: var(--sg-text-invert-muted);
  text-decoration: none;
  border-left: 2px solid var(--sg-border-invert);
}
.sg-offcanvas__sub a:hover { color: var(--sg-white); border-left-color: var(--sg-accent); }

.sg-offcanvas__foot { margin-top: auto; padding-top: var(--sg-s-7); display: grid; gap: var(--sg-s-3); }