/* ============================================================
   Ronanto Interactive — main.css  |  Version 2.0
   Light Theme · Single stylesheet

   Sections:
     1. Variables
     2. Base
     3. Typography
     4. Layout
     5. Components
        5a. Label
        5b. Section Intro
        5c. Buttons
        5d. Navigation
        5e. Hero
        5f. About Preview
        5g. Latest News
        5h. Contact
        5i. Footer
     6. Animations
     7. Responsive
     8. Utilities
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');


/* ============================================================
   1. VARIABLES
   Design tokens — edit here to update the entire site.
   ============================================================ */
:root {
  /* — Backgrounds — */
  --bg:         #F9F8F6;   /* Page: warm off-white */
  --bg-alt:     #F3F2EF;   /* Alternate section tint */
  --surface:    #FFFFFF;   /* Cards, nav on scroll */
  --bg-dark:    #111118;   /* Footer */

  /* — Borders — */
  --border:     #E5E3DC;
  --border-mid: #D4D1C7;

  /* — Text — */
  --text-1:  #111117;   /* Primary */
  --text-2:  #5A5872;   /* Secondary body copy */
  --text-3:  #9898AE;   /* Muted, labels */

  /* — Text on dark (footer) — */
  --text-dark-1: #EEEEF5;

  /* — Accent: single violet — */
  --accent:        #5B4FFF;
  --accent-hover:  #4940E8;
  --accent-bg:     rgba(91, 79, 255, 0.07);
  --accent-border: rgba(91, 79, 255, 0.18);

  /* — Typography — */
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* — Spacing (4 px base) — */
  --s-1:  0.25rem;   /*  4 px */
  --s-2:  0.5rem;    /*  8 px */
  --s-3:  0.75rem;   /* 12 px */
  --s-4:  1rem;      /* 16 px */
  --s-5:  1.25rem;   /* 20 px */
  --s-6:  1.5rem;    /* 24 px */
  --s-8:  2rem;      /* 32 px */
  --s-10: 2.5rem;    /* 40 px */
  --s-12: 3rem;      /* 48 px */
  --s-16: 4rem;      /* 64 px */
  --s-20: 5rem;      /* 80 px */
  --s-24: 6rem;      /* 96 px */

  /* — Border radius — */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-full: 9999px;

  /* — Shadows — */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-nav: 0 1px 0 var(--border), 0 2px 12px rgba(0, 0, 0, 0.06);

  /* — Transitions — */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.15s;
  --t-base: 0.22s;
  --t-slow: 0.4s;

  /* — Layout — */
  --nav-h: 76px;
  --max-w: 1100px;
}


/* ============================================================
   2. BASE
   Reset and sensible element defaults.
   ============================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  line-height: 1.6;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}


/* ============================================================
   3. TYPOGRAPHY
   Reusable type scale classes.
   ============================================================ */

/* — Display: hero heading — */
.t-display {
  font-family: var(--font-sans);
  font-size: clamp(2.6rem, 5.5vw, 4.75rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.032em;
  color: var(--text-1);
}

/* — Section headings — */
.t-h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--text-1);
}

/* — Card / fact headings — */
.t-h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-1);
}

/* — Body copy — */
.t-body {
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--text-2);
}

/* — Small / supporting text — */
.t-small {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-3);
}

/* — Monospace label (Space Mono) — */
.t-mono {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}


/* ============================================================
   4. LAYOUT
   Container, section wrappers.
   ============================================================ */

/* Centered content column */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

/* Standard section vertical padding */
.section {
  padding-block: var(--s-20);
}

/* Alternating section background */
.section--alt {
  background-color: var(--bg-alt);
}


/* ============================================================
   5. COMPONENTS
   Reusable UI components.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   5a. Label
   Small monospace category labels (e.g. "About the Studio")
   ──────────────────────────────────────────────────────────── */
.label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}

/* ────────────────────────────────────────────────────────────
   5b. Section Intro
   Reusable heading + body copy block for section openers.
   ──────────────────────────────────────────────────────────── */
.section-intro {
  margin-bottom: var(--s-12);
}

.section-intro--center {
  text-align: center;
  max-width: 540px;
  margin-inline: auto;
}

.section-intro__title {
  margin-bottom: var(--s-4);
}

.section-intro__body {
  margin-top: var(--s-4);
}

/* ────────────────────────────────────────────────────────────
   5c. Buttons
   .btn--primary  filled violet (used in future pages)
   .link          inline text link
   ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.75rem 1.625rem;
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background   var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow   var(--t-base) var(--ease),
    color        var(--t-base) var(--ease),
    transform    var(--t-base) var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(91, 79, 255, 0.20);
}

.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 16px rgba(91, 79, 255, 0.28);
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(91, 79, 255, 0.16);
}

/* Inline link */
.link {
  color: var(--accent);
  font-weight: 500;
  text-underline-offset: 3px;
  transition: opacity var(--t-base);
}

.link:hover {
  opacity: 0.72;
}

/* ────────────────────────────────────────────────────────────
   5d. Navigation
   Fixed top navigation with scroll-triggered glass effect.
   ──────────────────────────────────────────────────────────── */
#site-header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--nav-h);
  z-index: 100;
  /* No background until scrolled — blends into hero */
  transition:
    background  var(--t-base) var(--ease),
    box-shadow  var(--t-base) var(--ease);
}

#site-header.scrolled {
  background: var(--surface);
  box-shadow: var(--shadow-nav);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
  transition: opacity var(--t-fast);
}

.nav__logo:hover {
  opacity: 0.68;
}

/* Official logo image — sized by height, aspect ratio preserved */
.nav__logo-img {
  height: 48px;          /* slightly larger for more visual presence */
  width: auto;           /* preserves native aspect ratio */
  display: block;
  max-width: 100%;       /* scales down from native resolution */
}

/* Desktop links */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.nav__link {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
}

/* Underline indicator */
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: var(--s-3);
  right: var(--s-3);
  height: 2px;
  background: var(--accent);
  border-radius: var(--r-full);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}

.nav__link:hover {
  color: var(--text-1);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

.nav__link.is-active {
  color: var(--text-1);
}

/* Hamburger button (hidden on desktop) */
.nav__hamburger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: var(--s-2);
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}

.nav__hamburger:hover {
  background: var(--bg-alt);
}

.nav__hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-1);
  border-radius: var(--r-full);
  transition:
    transform var(--t-base) var(--ease-out),
    opacity   var(--t-fast),
    width     var(--t-base) var(--ease-out);
}

/* Open state — animates to ✕ */
.nav__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.nav__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu drawer */
#mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--s-3) var(--s-6) var(--s-8);
  display: flex;
  flex-direction: column;
  /* Slide in from above */
  transform: translateY(-108%);
  opacity: 0;
  transition:
    transform var(--t-slow) var(--ease-out),
    opacity   var(--t-base) var(--ease);
  z-index: 99;
  pointer-events: none;
}

#mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Mobile links override desktop styles */
#mobile-menu .nav__link {
  font-size: 1rem;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

#mobile-menu .nav__link::after {
  display: none;
}

/* ────────────────────────────────────────────────────────────
   5e. Hero
   Two-column: text left, logo right.
   ──────────────────────────────────────────────────────────── */
#hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  padding-bottom: var(--s-20);
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/*
 * Hero decorative element — a single large, soft arc.
 * Purely visual. No semantic value. Extremely low opacity
 * so it never competes with the typography.
 */
#hero::before {
  content: '';
  position: absolute;
  /* Positioned to the right side, partially off-screen */
  top: -120px;
  right: -160px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  /* Two concentric rings using box-shadow, no fill */
  background: transparent;
  box-shadow:
    0 0 0 1.5px rgba(91, 79, 255, 0.07),
    0 0 0 60px rgba(91, 79, 255, 0.025),
    0 0 0 120px rgba(91, 79, 255, 0.018),
    0 0 0 200px rgba(91, 79, 255, 0.01);
  pointer-events: none;
  /* Prevent it from adding scroll width */
  transform: translate(0, 0);
}

/* Two-column grid: text | logo */
.hero__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-16);
}

.hero__text {
  min-width: 0; /* prevent text overflow blowing out the grid */
}

.hero__label {
  margin-bottom: var(--s-5);
}

.hero__title {
  margin-bottom: var(--s-5);
}

.hero__tagline {
  max-width: 480px;
  /* No margin-bottom needed — no button below */
}

/* Large hero logo — right column */
.hero__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.hero__logo-img {
  width: clamp(200px, 28vw, 380px);
  height: auto;
  display: block;
  /* Soft entrance — slightly longer than text so it settles last */
  animation: fadeUp 0.7s var(--ease-out) 0.4s both;
  /* Subtle drop shadow so it lifts off the bg */
  filter: drop-shadow(0 8px 32px rgba(91, 79, 255, 0.08))
          drop-shadow(0 2px 8px rgba(0, 0, 0, 0.06));
}


/* ────────────────────────────────────────────────────────────
   5f. About Preview
   2-column: intro text | three facts
   ──────────────────────────────────────────────────────────── */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}

/* Spacing between paragraphs in the text column */
.about__text p + p {
  margin-top: var(--s-4);
}

.about__text .label {
  margin-bottom: var(--s-6);
}

.about__text .t-h2 {
  margin-bottom: var(--s-5);
}

/* Stacked facts */
.about__facts {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-top: var(--s-4);
}

/* Individual fact item */
.fact {
  padding-left: var(--s-5);
  border-left: 2px solid var(--border);
  transition: border-color var(--t-base);
}

.fact:hover {
  border-left-color: var(--accent);
}

.fact .label {
  margin-bottom: var(--s-2);
}

.fact__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: var(--s-2);
  line-height: 1.4;
}

.fact__body {
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* ────────────────────────────────────────────────────────────
   5g. Latest News
   Single-update layout.
   ──────────────────────────────────────────────────────────── */
.news-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  max-width: 620px;    /* Keeps the single card from sprawling */
  transition:
    border-color var(--t-base),
    box-shadow   var(--t-base),
    transform    var(--t-base) var(--ease);
}

.news-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.news-card__date {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.news-card__tag {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 3px 8px;
  border-radius: var(--r-sm);
}

.news-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.4;
  margin-bottom: var(--s-3);
}

.news-card__body {
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.68;
}

/* Plain supporting note below the card body */
.news-card__note {
  font-size: 0.875rem;
  color: var(--text-3);
  margin-top: var(--s-5);
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────
   5h. Contact
   Centered, minimal.
   ──────────────────────────────────────────────────────────── */
#contact {
  text-align: center;
}

/* Contact body — centers the email block */
.contact__body {
  text-align: center;
}

/* Plain-text email address — not a link */
.contact__email-text {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-4);
  user-select: all;   /* lets visitors copy it easily */
}

/* Response-time note */
.contact__note {
  margin-top: var(--s-3);
  color: var(--text-3);
}

/* ────────────────────────────────────────────────────────────
   5i. Footer
   Dark section. Independent color context.
   ──────────────────────────────────────────────────────────── */
#site-footer {
  background: var(--bg-dark);
  padding-block: var(--s-12) var(--s-8);
}

.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-8);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: var(--s-6);
}

/* Official logo in footer — sized for balanced weight, aspect ratio preserved */
.footer__logo-img {
  height: 56px;          /* increased for visual balance */
  width: auto;
  display: block;
  object-fit: contain;
  max-width: 100%;       /* scales down from native resolution */
}

/* Footer nav links */
.footer__nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.footer__nav a {
  font-size: 0.875rem;
  color: #A4A4B5;   /* raised for better readability against dark bg */
  transition: color var(--t-base);
}

.footer__nav a:hover {
  color: var(--text-dark-1);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.footer__copy {
  font-size: 0.8125rem;
  color: #8A8A9E;   /* raised for readability against dark bg */
}


/* ============================================================
   6. ANIMATIONS
   Scroll-reveal (.reveal → .is-revealed) and hero entrance.
   ============================================================ */

/* — Scroll reveal base — */
.reveal {
  opacity: 0;
  transform: translateY(16px);   /* reduced from 22px — subtler entrance */
  transition:
    opacity   0.55s var(--ease-out),
    transform 0.55s var(--ease-out);
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay helpers */
.reveal--d1 { transition-delay: 0.08s; }
.reveal--d2 { transition-delay: 0.16s; }
.reveal--d3 { transition-delay: 0.24s; }
.reveal--d4 { transition-delay: 0.32s; }

/* — Hero entrance (plays on page load, not on scroll) — */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__label   { animation: fadeUp 0.55s var(--ease-out) 0.08s both; }
.hero__title   { animation: fadeUp 0.6s  var(--ease-out) 0.18s both; }
.hero__tagline { animation: fadeUp 0.6s  var(--ease-out) 0.3s  both; }


/* ────────────────────────────────────────────────────────────
   5j. Legal Pages (Privacy Policy, Terms of Service)
   Shared header + body layout for /privacy.html, /terms.html
   ──────────────────────────────────────────────────────────── */

/* Page header — similar atmosphere to the hero but shorter */
.legal-header {
  padding-top: calc(var(--nav-h) + var(--s-16));
  padding-bottom: var(--s-12);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* Subtle decorative ring — mirrors the hero aesthetic */
.legal-header::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -120px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 0 1.5px rgba(91, 79, 255, 0.07),
    0 0 0 60px rgba(91, 79, 255, 0.025),
    0 0 0 110px rgba(91, 79, 255, 0.012);
  pointer-events: none;
}

.legal-header .t-display {
  font-size: clamp(2.2rem, 4.5vw, 3.75rem);
  margin-bottom: var(--s-4);
}

.legal-header__meta {
  font-size: 0.9375rem;
  color: var(--text-3);
  margin-top: var(--s-2);
}

/* Body section — white card look on the off-white page */
.legal-body {
  padding-top: 0;
}

/* Prose container — narrowed for comfortable reading */
.legal-content {
  max-width: 720px;
}

/* Intro paragraph */
.legal-content > .t-body:first-child {
  margin-bottom: var(--s-10);
  padding-bottom: var(--s-10);
  border-bottom: 1px solid var(--border);
}

/* Body paragraphs */
.legal-content .t-body {
  margin-bottom: var(--s-4);
}

/* Section headings */
.legal-content__heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
  margin-top: var(--s-10);
  margin-bottom: var(--s-3);
}

/* Bullet lists within legal content */
.legal-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.legal-list li {
  position: relative;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--text-2);
  padding-left: var(--s-5);
}

/* Custom bullet — small accent dot */
.legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
}

/* ────────────────────────────────────────────────────────────
   5k. 404 Error Page
   Centered, full-viewport-height layout.
   ──────────────────────────────────────────────────────────── */
.error-page {
  min-height: calc(100vh - var(--nav-h) - 220px); /* leave room for footer */
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + var(--s-16));
  padding-bottom: var(--s-20);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* Same subtle ring decoration as hero */
.error-page::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -140px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 0 1.5px rgba(91, 79, 255, 0.07),
    0 0 0 60px rgba(91, 79, 255, 0.025),
    0 0 0 120px rgba(91, 79, 255, 0.015);
  pointer-events: none;
}

.error-page__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

/* Large muted "404" code */
.error-page__code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-2);
}

.error-page__title {
  margin-bottom: var(--s-2);
}

.error-page__body {
  max-width: 400px;
  margin-bottom: var(--s-4);
}

.error-page__cta {
  margin-top: var(--s-2);
}


/* ============================================================
   7. RESPONSIVE
   ============================================================ */

/* — Tablet ≤ 1024 px — */
@media (max-width: 1024px) {
  /* Stack about grid to single column */
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--s-12);
  }

  /* Facts column comes below text on tablet */
  .about__facts {
    padding-top: 0;
  }

  /* Collapse hero to single column, logo stacks below text */
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s-10);
  }

  .hero__logo-wrap {
    display: flex;
    justify-content: flex-start;
  }

  .hero__logo-img {
    width: clamp(160px, 50vw, 280px);
  }
}

/* — Mobile ≤ 768 px — */
@media (max-width: 768px) {
  :root {
    --nav-h: 60px;
  }

  .nav__logo-img {
    height: 40px;        /* scaled down for mobile nav height */
  }

  /* Show hamburger, hide desktop links */
  .nav__hamburger { display: flex; }
  .nav__links     { display: none; }

  /* Section padding reduction */
  .section {
    padding-block: var(--s-16);
  }

  .hero__tagline {
    max-width: 100%;
  }

  /* Stack footer top row */
  .footer__top {
    flex-direction: column;
    gap: var(--s-6);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* — Small ≤ 480 px — */
@media (max-width: 480px) {
  .container {
    padding-inline: var(--s-4);
  }

  .footer__nav {
    gap: var(--s-4) var(--s-5);
  }
}


/* ============================================================
   8. UTILITIES
   ============================================================ */

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

/* — Respect reduced motion preference — */
@media (prefers-reduced-motion: reduce) {
  /* Disable all transitions and animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Immediately show all reveal elements */
  .reveal {
    opacity: 1;
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}