/* ==========================================================================
   SIMORGH — base.css
   Reset, root typography, layout primitives, accessibility defaults.
   Loads after variables.css, before components.css.
   ========================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* NO scroll-behavior: smooth here.

   It looks harmless and it is not. ScrollTrigger reads window.scrollY every
   frame to drive the pinned hero; CSS smooth scrolling means the browser is
   animating that value independently, so the frame sequence either stutters
   or stops responding altogether. GSAP documents this as incompatible.

   Anchor links still scroll smoothly — assets/js/smooth-scroll.js calls
   window.scrollTo({behavior:'smooth'}) per click, which applies smoothing
   only to that one jump and never to ordinary wheel scrolling. */
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- document ---------- */
body {
  background: var(--sg-bg);
  color: var(--sg-text);
  font-family: var(--sg-font-body);
  font-size: var(--sg-fs-body);
  line-height: var(--sg-lh-body);
  font-weight: var(--sg-fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, not hidden.

     overflow-x:hidden on the body makes the browser treat the body as a
     scroll container, which breaks ScrollTrigger's pin (and position:sticky
     with it). overflow:clip prevents the same horizontal overflow without
     creating a scroll container. */
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }   /* set when off-canvas is open */

/* ---------- headings ----------
   Open Sans at 800. Weight does the work that width used to.             */
h1, h2, h3, .sg-h1, .sg-h2, .sg-h3, .sg-display {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-fw-extra);
  line-height: var(--sg-lh-head);
  letter-spacing: var(--sg-ls-head);
  color: var(--sg-teal-700);
  text-wrap: balance;
}
.sg-display {
  font-size: var(--sg-fs-display);
  line-height: var(--sg-lh-display);
  letter-spacing: var(--sg-ls-display);
  text-transform: uppercase;
}
h1, .sg-h1 { font-size: var(--sg-fs-h1); }
h2, .sg-h2 { font-size: var(--sg-fs-h2); }
h3, .sg-h3 { font-size: var(--sg-fs-h3); }
h4, .sg-h4 {
  font-family: var(--sg-font-body);
  font-size: var(--sg-fs-h4);
  font-weight: var(--sg-fw-semi);
  line-height: var(--sg-lh-tight);
  letter-spacing: 0;
}

/* ---------- text ---------- */
p { max-width: var(--sg-container-text); }
p + p { margin-top: var(--sg-s-4); }

.sg-lede {
  font-size: var(--sg-fs-lede);
  line-height: var(--sg-lh-lede);
  color: var( --sg-teal-700);
  max-width: 62ch;
}
.sg-muted { color: var(--sg-text-muted); }
.sg-sm    { font-size: var(--sg-fs-sm); }
.sg-xs    { font-size: var(--sg-fs-xs); }

/* Eyebrow — the section marker device.
   The leading rule is lifted from the logo lockup, where a gold hairline
   flanks the tagline. It is the one ornament the system repeats.        */
.sg-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sg-s-3);
  font-family: var(--sg-font-label);
  font-size: var(--sg-fs-eyebrow);
  font-weight: var(--sg-fw-semi);
  letter-spacing: var(--sg-ls-eyebrow);
  text-transform: uppercase;
  color: var(  --sg-gold-500);
  margin-bottom: var(--sg-s-4);
}
.sg-eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--sg-accent);
  flex: 0 0 auto;
}
.sg-eyebrow--center { justify-content: center; }
.sg-eyebrow--center::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--sg-accent);
  flex: 0 0 auto;
}

/* ---------- links ---------- */
a {
  color: var(--sg-text-brand);
  text-decoration-color: var(--sg-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--sg-dur-fast) var(--sg-ease-out);
}
a:hover { color: var( --sg-white); }

.sg-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-s-2);
  font-weight: var(--sg-fw-semi);
  font-size: var(--sg-fs-sm);
  text-decoration: none;
  color: var(--sg-text-brand);
}
.sg-link-arrow::after {
  content: "";
  width: 18px; height: 1px;
  background: var(--sg-accent);
  transition: width var(--sg-dur-fast) var(--sg-ease-out);
}
.sg-link-arrow:hover::after { width: 30px; }

/* ---------- focus ----------
   Teal at 8.3:1 on white. Gold was measured and rejected: 2.8:1 fails the
   3:1 non-text contrast minimum.                                        */
:focus-visible {
  outline: 2px solid var(--sg-focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.sg-on-dark :focus-visible { outline-color: var(--sg-focus-invert); }

.sg-skip-link {
  position: absolute;
  left: var(--sg-s-4);
  top: -100px;
  z-index: var(--sg-z-modal);
  background: var(--sg-bg-invert);
  color: var(--sg-text-invert);
  padding: var(--sg-s-3) var(--sg-s-5);
  border-radius: var(--sg-r-sm);
  text-decoration: none;
  transition: top var(--sg-dur-fast) var(--sg-ease-out);
}
.sg-skip-link:focus { top: var(--sg-s-4); color: var(--sg-text-invert); }

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

/* ---------- layout ----------
   Bootstrap 5 supplies .container, .row and the column system. These rules
   only retune it to the brand: container width, gutter, and the column
   recipes for our five recurring grid shapes.

   Column classes are applied here rather than hand-written into 22 template
   loops. Every one of these grids is uniform, so one rule per shape is both
   correct and far less fragile than editing each loop body.               */

.container, .container-xl {
  max-width: calc(var(--sg-container) + var(--sg-gutter) * 2);
  padding-inline: var(--sg-gutter);
}

/* Several sections put .container and .row on the SAME element. Bootstrap's
   row applies negative side margins to cancel a parent container's padding —
   with both on one element those margins pull the content back out past the
   gutter. Neutralising the margins and zeroing the outer columns' padding
   makes such a section align pixel-for-pixel with a plain .container
   section, which is what "consistent alignment" actually requires. */
.container.row, .container-xl.row { margin-inline: auto; }
.container.row > *:first-child, .container-xl.row > *:first-child { padding-left: 0; }
.container.row > *:last-child,  .container-xl.row > *:last-child  { padding-right: 0; }

@media (max-width: 991px) {
  /* Stacked: every child is full width, so no child carries side padding. */
  .container.row > *, .container-xl.row > * { padding-inline: 0; }
}
.container-xl { max-width: calc(var(--sg-container-wide) + var(--sg-gutter) * 2); }
.sg-measure { max-width: calc(var(--sg-container-text) + var(--sg-gutter) * 2); }

/* Column recipes — direct children of a row become columns */
.sg-cols-2 > *      { width: 100%; }
.sg-cols-3 > *      { width: 100%; }
.sg-cols-4 > *      { width: 100%; }
.sg-cols-split > *  { width: 100%; }
.sg-cols-sticky > * { width: 100%; }

@media (min-width: 576px) {
  .sg-cols-3 > *, .sg-cols-4 > * { width: 50%; }
}
@media (min-width: 768px) {
  .sg-cols-2 > * { width: 50%; }
}
@media (min-width: 992px) {
  .sg-cols-3 > *      { width: 33.3333%; }
  .sg-cols-4 > *      { width: 25%; }
  .sg-cols-split > *  { width: 50%; }
  .sg-cols-sticky > *:first-child { width: 41.6667%; }
  .sg-cols-sticky > *:last-child  { width: 58.3333%; }
}

/* Bootstrap rows lay children out with padding, so cards need to fill the
   column rather than the row cell. */
.sg-cols-2 > * > .sg-card,
.sg-cols-3 > * > .sg-card,
.sg-cols-4 > * > .sg-card { height: 100%; }
.row > .sg-card, .row > article, .row > div, .row > a { display: block; }
.sg-cols-3 > .sg-card, .sg-cols-4 > .sg-card, .sg-cols-2 > .sg-card { display: flex; }

.sg-cols-sticky { align-items: start; }
.sg-cols-split  > * { min-width: 0; }
.sg-cols-sticky > * { min-width: 0; }

/* ---------- section rhythm ----------
   ONE padding value for every section on the site. The three-tier scale
   (sm / base / lg) meant neighbouring sections could differ by 60px, which
   read as inconsistent spacing rather than as emphasis.                   */

.sg-section,
.sg-section--sm,
.sg-section--lg,
.sg-section-sm,
.sg-section-lg { padding-block: var(--sg-section); }

/* Anchor targets clear the sticky nav */
[id] { scroll-margin-top: calc(var(--sg-nav-h-scrolled) + var(--sg-s-5)); }

/* Surface variants — a section chooses exactly one */
.sg-surface-light  { background: var(--sg-bg); }
.sg-surface-tint   { background: var(--sg-bg-alt); }
.sg-surface-soft   { background: var(--sg-bg-soft); }
.sg-surface-white  { background: var(--sg-surface); }
.sg-surface-dark   { background: var(--sg-bg-invert); color: var(--sg-text-invert); }
.sg-surface-deep   { background: var(--sg-bg-invert-deep); color: var(--sg-text-invert); }

.sg-surface-dark h1, .sg-surface-dark h2, .sg-surface-dark h3, .sg-surface-dark h4,
.sg-surface-deep h1, .sg-surface-deep h2, .sg-surface-deep h3, .sg-surface-deep h4 {
  color: var(--sg-text-invert);
}
.sg-surface-dark .sg-eyebrow, .sg-surface-deep .sg-eyebrow { color: var(--sg-accent-text); }
.sg-surface-dark .sg-eyebrow::before, .sg-surface-deep .sg-eyebrow::before,
.sg-surface-dark .sg-eyebrow::after,  .sg-surface-deep .sg-eyebrow::after {
  background: var(--sg-accent-invert);
}
.sg-surface-dark .sg-lede, .sg-surface-deep .sg-lede,
.sg-surface-dark .sg-muted, .sg-surface-deep .sg-muted { color: var(--sg-text-invert-muted); }

/* ---------- rules and dividers ---------- */
.sg-rule {
  height: 1px; border: 0;
  background: var(--sg-border);
  margin-block: var(--sg-s-6);
}
.sg-rule-gold {
  width: 56px; height: 2px; border: 0;
  background: var(--sg-accent);
  margin: var(--sg-s-4) 0 0;
}

/* ---------- section header block ---------- */
.sg-head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 72ch; }
.sg-head--center { margin-inline: auto; text-align: center; }
.sg-head h2 { margin-bottom: var(--sg-s-4); }

/* ---------- utilities ---------- */
.sg-stack > * + * { margin-top: var(--sg-s-4); }
.sg-stack-lg > * + * { margin-top: var(--sg-s-6); }
.sg-center { text-align: center; }
.sg-nowrap { white-space: nowrap; }
.sg-cover { width: 100%; height: 100%; object-fit: cover; }

/* Aspect locks — the facility render must never distort (brief §24) */
.sg-ratio { position: relative; overflow: hidden; background: var(--sg-bg-alt); }
.sg-ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-ratio--16x9 { aspect-ratio: 16 / 9; }
.sg-ratio--4x3  { aspect-ratio: 4 / 3; }
.sg-ratio--3x2  { aspect-ratio: 3 / 2; }
.sg-ratio--1x1  { aspect-ratio: 1 / 1; }
.sg-ratio--portrait { aspect-ratio: 3 / 4; }

/* ---------- animation entry states ----------
   Elements marked with data-anim start hidden ONLY when JS is present.
   The .sg-js class is set by main.js on <html> before paint, so a
   no-JS or failed-JS visitor sees fully visible content.                */
.sg-js [data-anim="fade-up"],
.sg-js [data-anim="fade-in"],
.sg-js [data-anim="reveal-text"] { opacity: 0; }
.sg-js [data-anim="fade-up"] { transform: translateY(32px); }