/* =========================================================
   MENTIX SOFTWARE — Design System
   Editorial-tech art direction. Human-designed.
   Brand palette: Deep Navy + Warm Gold + Soft Ivory.
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* --- Core surfaces --- */
  --ink: #0A1122;          /* deep navy ink — primary dark surface */
  --ink-2: #0E1830;        /* raised navy */
  --ink-3: #14213F;        /* navy panel */
  --navy: #10223F;         /* brand navy (from logo) */
  --navy-deep: #0B1730;
  --ivory: #F6F3EC;        /* warm ivory — primary light surface */
  --ivory-2: #EEEAE0;      /* soft ivory raised */
  --paper: #FBFAF6;        /* near-white paper */

  /* --- Brand accents --- */
  --gold: #C6A15B;         /* brand gold (from logo) */
  --gold-soft: #D8B978;    /* lighter gold for dark bg */
  --gold-deep: #A9822F;    /* deeper bronze-gold */
  --navy-accent: #1D3766;  /* mid navy accent */

  /* --- Legacy accent aliases (remapped to brand) ---
     Kept so existing markup stays valid; now navy/gold-driven. */
  --cobalt: #1D3766;       /* was electric blue → now deep navy-blue accent */
  --cobalt-soft: #C6A15B;  /* was soft blue → now gold (for dark-section eyebrows/emphasis) */
  --deep-blue: #10223F;
  --amber: #C6A15B;
  --sage: #9AA6A0;

  /* --- Neutrals --- */
  --gray: #A7ABB3;
  --gray-ink: #5E6675;     /* muted body text on light */
  --hairline: #E4E0D6;     /* warm hairline on ivory */
  --hairline-2: #DAD5C7;
  --hairline-dark: #24304C; /* navy hairline on dark */

  /* Type */
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", "Space Grotesk", Georgia, serif;
  --font-sans-display: "Space Grotesk", "Manrope", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Spacing scale (8px) */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px; --s9: 180px;

  --radius: 12px;
  --radius-lg: 20px;
  --radius-sm: 8px;
  --maxw: 1300px;
  --gutter: clamp(20px, 5vw, 68px);

  /* Glassmorphism tokens (used selectively, as accents) */
  --glass-light: rgba(255,255,255,0.55);
  --glass-dark: rgba(18,30,54,0.42);
  --glass-border-light: rgba(255,255,255,0.6);
  --glass-border-dark: rgba(214,196,150,0.18);
  --glass-blur: saturate(150%) blur(16px);
  --glass-shadow: 0 24px 60px -34px rgba(10,17,34,0.45);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-2: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
input, textarea, select, button { font: inherit; }

body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.015em; }
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.8rem, 8.5vw, 7rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
}
.h1 { font-size: clamp(2.4rem, 5.5vw, 4.6rem); letter-spacing: -0.02em; line-height: 1.03; }
.h2 { font-size: clamp(1.95rem, 3.8vw, 3.2rem); letter-spacing: -0.018em; line-height: 1.08; }
.h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -0.015em; }
.h4 { font-family: var(--font-sans-display); font-weight: 600; font-size: clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing: -0.01em; }
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; font-style: italic; }
/* Editorial italic display accent */
.accent-em { font-style: italic; font-weight: 400; color: var(--gold-deep); }
.theme-dark .accent-em, .theme-ink2 .accent-em { color: var(--gold-soft); }
.lead { font-size: clamp(1.08rem, 1.55vw, 1.35rem); line-height: 1.58; color: var(--gray-ink); font-weight: 400; letter-spacing: -0.005em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 500;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--gold);
  opacity: 0.9;
}
.eyebrow.plain::before { display: none; }
.theme-dark .eyebrow, .theme-ink2 .eyebrow { color: var(--gold-soft); }
.theme-dark .eyebrow::before, .theme-ink2 .eyebrow::before { background: var(--gold-soft); }
.section-index {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--gray-ink);
  text-transform: uppercase;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 11vw, 160px); position: relative; }
.section.tight { padding-block: clamp(56px, 8vw, 110px); }
.grid { display: grid; gap: var(--s4); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
}

/* Dark / light section themes */
.theme-dark { background: var(--ink); color: var(--ivory); }
.theme-dark .lead { color: #B9C0CE; }
.theme-dark .section-index { color: #7C8598; }
.theme-ink2 { background: var(--ink-2); color: var(--ivory); }
.theme-ink2 .lead { color: #B9C0CE; }
.theme-navy { background: var(--navy); color: var(--ivory); }
.theme-navy .lead { color: #C3CAD8; }
/* subtle warm section for rhythm on light backgrounds */
.theme-paper { background: var(--paper); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  font-family: var(--font-sans-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform .4s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .4s var(--ease);
  will-change: transform;
}
.btn svg { width: 17px; height: 17px; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Accessible keyboard focus */
.btn:focus-visible, .ulink:focus-visible, .nav-links a:focus-visible, .chip:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px;
}
/* Primary = navy on light, becomes gold-accented on dark for contrast */
.btn-primary { background: var(--navy); color: var(--ivory); box-shadow: 0 14px 30px -18px rgba(16,34,63,0.7); }
.btn-primary:hover { background: var(--ink); box-shadow: 0 18px 40px -18px rgba(16,34,63,0.85); }
.theme-dark .btn-primary, .theme-ink2 .btn-primary, .theme-navy .btn-primary { background: var(--gold); color: var(--navy-deep); box-shadow: 0 16px 34px -18px rgba(198,161,91,0.55); }
.theme-dark .btn-primary:hover, .theme-ink2 .btn-primary:hover, .theme-navy .btn-primary:hover { background: var(--gold-soft); }
/* Gold button variant */
.btn-gold { background: var(--gold); color: var(--navy-deep); box-shadow: 0 16px 34px -18px rgba(198,161,91,0.55); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-outline { border-color: currentColor; color: inherit; opacity: 0.92; }
.btn-outline:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); opacity: 1; }
.theme-dark .btn-outline, .theme-ink2 .btn-outline, .theme-navy .btn-outline { border-color: rgba(246,243,236,0.28); }
.theme-dark .btn-outline:hover, .theme-ink2 .btn-outline:hover, .theme-navy .btn-outline:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn-ghost { padding-inline: 0; border-radius: 0; }
.btn-lg { padding: 17px 32px; font-size: 0.98rem; }

/* Animated underline link */
.ulink { position: relative; display: inline-block; font-weight: 600; font-family: var(--font-sans-display); }
.ulink::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.ulink:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s4);
  background: rgba(255,255,255,0.45);
  transition: transform .5s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.theme-dark .card, .theme-ink2 .card { border-color: var(--hairline-dark); background: rgba(255,255,255,0.02); }
.card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 26px 60px -34px rgba(10,17,34,.4); }
.theme-dark .card:hover, .theme-ink2 .card:hover { border-color: var(--gold); }

/* ---------- Glassmorphism (selective accent) ---------- */
.glass {
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-light);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
}
.glass-dark {
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-dark);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.7);
}

/* Pills / tags */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--hairline);
  font-size: 0.86rem; font-weight: 500; letter-spacing: -0.005em;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.pill:hover { transform: translateY(-2px); border-color: var(--gold); }
.theme-dark .pill, .theme-ink2 .pill { border-color: var(--hairline-dark); }
.theme-dark .pill:hover, .theme-ink2 .pill:hover { border-color: var(--gold-soft); }
.pill-list { display: flex; flex-wrap: wrap; gap: 12px; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------- Navigation ---------- */
/* The header is NOT a separate boxed bar. It reuses the exact background &
   design of the main hero section directly below it (the deep-navy gradient
   with the same gold/navy glows), so it reads as a natural continuation of
   the page rather than a card sitting on top of it. No border, no boxed
   surface. White text stays fully legible on this dark, blended surface on
   every page and scroll state. On scroll the top glow simply fades so the
   header stays clean once content is behind it. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  /* Same gradient + glow direction as the .hero section, so the header
     blends seamlessly into the section beneath it. */
  background:
    radial-gradient(120% 320% at 85% -120%, rgba(198,161,91,0.10), transparent 55%),
    linear-gradient(180deg, #0B1730 0%, #0A1122 100%);
  border-bottom: none;
  transition: box-shadow .4s var(--ease), padding .4s var(--ease), background .4s var(--ease);
}
.nav.scrolled {
  /* Once scrolled, keep the blended navy but add a whisper of depth so text
     never clashes with scrolling content — still no hard boxed edge. */
  background:
    linear-gradient(180deg, rgba(11,23,48,0.96) 0%, rgba(10,17,34,0.90) 100%);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  box-shadow: 0 18px 40px -30px rgba(0,0,0,0.55);
}
.nav-inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 22px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: padding .4s var(--ease);
}
.nav.scrolled .nav-inner { padding-block: 14px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; letter-spacing: -0.01em; color: #FFFFFF; transition: color .4s var(--ease); }
/* Logo plate keeps the navy letterform legible on dark + light backgrounds */
.brand-plate {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(160deg, #FFFFFF, var(--ivory));
  border: 1px solid var(--hairline);
  box-shadow: 0 6px 18px -10px rgba(10,17,34,0.5), inset 0 0 0 1px rgba(255,255,255,0.6);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.brand:hover .brand-plate { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(198,161,91,0.5); border-color: var(--gold); }
.brand-mark { width: 32px; height: auto; object-fit: contain; display: block; }
.nav.scrolled .brand-plate { width: 42px; height: 42px; }
.footer .brand-plate { width: 50px; height: 50px; border-radius: 13px; }
.footer .brand-mark { width: 36px; }
.brand .brand-sub { display: block; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-top: 2px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  font-family: var(--font-sans-display);
  font-size: 0.86rem; font-weight: 500; padding: 9px 13px; border-radius: 6px;
  color: #FFFFFF; opacity: 0.82; transition: opacity .3s, background .3s, color .4s;
  position: relative;
}
.nav-links a:hover { opacity: 1; }
.nav-links a.active { opacity: 1; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px;
  background: var(--gold); border-radius: 2px;
}
.nav-cta { display: flex; align-items: center; gap: 16px; }
/* Keep the header CTA visible/distinct on the navy header surface
   (mirrors the primary-button treatment already used on dark sections). */
.nav .btn-primary { background: var(--gold); color: var(--navy-deep); box-shadow: 0 16px 34px -18px rgba(198,161,91,0.55); }
.nav .btn-primary:hover { background: var(--gold-soft); }
.nav-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--hairline-dark); border-radius: 8px; align-items: center; justify-content: center; transition: border-color .4s; }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: #FFFFFF; position: relative; transition: .3s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: #FFFFFF; transition: .3s var(--ease); }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
body.menu-open .nav-toggle span { background: transparent; }
body.menu-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 85;
  background: var(--ink); color: var(--ivory);
  padding: 120px var(--gutter) 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateY(-100%); transition: transform .6s var(--ease-2);
  overflow-y: auto;
}
body.menu-open .mobile-menu { transform: translateY(0); }
.mobile-menu a.m-link {
  font-family: var(--font-display); font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 600;
  letter-spacing: -0.03em; padding: 10px 0; display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--hairline-dark); color: var(--ivory);
  opacity: 0; transform: translateY(18px);
}
body.menu-open .mobile-menu a.m-link { animation: mIn .6s var(--ease-2) forwards; }
.mobile-menu a.m-link .idx { font-family: var(--font-mono); font-size: 0.8rem; color: var(--gold-soft); }
.mobile-menu a.m-link:hover { color: var(--gold-soft); }
@keyframes mIn { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1080px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: flex; }
}

/* Scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); width: 0%; z-index: 100; }

/* Custom cursor */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; }
.cursor-dot { width: 6px; height: 6px; background: #fff; transform: translate(-50%,-50%); }
.cursor-ring { width: 38px; height: 38px; border: 1px solid #fff; transform: translate(-50%,-50%); transition: width .3s var(--ease), height .3s var(--ease), background .3s; }
.cursor-ring.hover { width: 60px; height: 60px; background: rgba(255,255,255,0.08); }
@media (hover: none), (max-width: 900px) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-2), transform .9s var(--ease-2); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }

/* line reveal for headlines */
.line-mask { overflow: hidden; display: block; }
.line-mask > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease-2); }
.line-mask.in > span { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .line-mask > span { opacity: 1 !important; transform: none !important; }
}

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--ivory); padding-top: clamp(72px, 10vw, 130px); }
.footer a { color: #B7BCC6; transition: color .3s; font-size: 0.95rem; }
.footer a:hover { color: var(--ivory); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr; gap: 48px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h5 { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; color: #6C7280; margin-bottom: 20px; font-weight: 500; }
.footer ul li { margin-bottom: 12px; }
.footer-bottom { border-top: 1px solid var(--hairline-dark); margin-top: clamp(48px, 8vw, 90px); padding: 28px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 0.85rem; color: #6C7280; }
.social { display: flex; gap: 12px; }
.social a { width: 40px; height: 40px; border: 1px solid var(--hairline-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .3s var(--ease); }
.social a:hover { background: var(--ivory); color: var(--ink); transform: translateY(-3px); }
.social svg { width: 17px; height: 17px; }

/* ---------- Utility ---------- */
.muted { color: var(--gray-ink); }
.theme-dark .muted, .theme-ink2 .muted { color: #99A1B2; }
.accent { color: var(--gold-deep); }
.theme-dark .accent, .theme-ink2 .accent { color: var(--gold-soft); }
.accent-word { color: var(--gold); font-style: italic; }
.center { text-align: center; }
.mono { font-family: var(--font-mono); }
.hairline-top { border-top: 1px solid var(--hairline); }
.theme-dark .hairline-top { border-top-color: var(--hairline-dark); }
.stack-sm > * + * { margin-top: var(--s2); }
.stack > * + * { margin-top: var(--s3); }
.stack-lg > * + * { margin-top: var(--s5); }
.max-60 { max-width: 60ch; } .max-50 { max-width: 50ch; } .max-40 { max-width: 40ch; }

/* Page transitions */
.page-enter { opacity: 0; }
.page-enter-active { opacity: 1; transition: opacity .5s var(--ease); }
.page-exit { opacity: 0; transition: opacity .38s var(--ease); }
@media (prefers-reduced-motion: reduce) { .page-enter { opacity: 1 !important; } }

/* Marquee */
.marquee { overflow: hidden; white-space: nowrap; }

/* ---------- Smooth scroll (Lenis) required styles ----------
   Without these, Lenis takes over the scroll container but the page
   cannot scroll. These are the official Lenis stylesheet rules and
   restore normal, smooth scrolling for wheel, touchpad, keyboard and
   touch. When Lenis is not active (reduced-motion / no JS) the browser
   falls back to native scrolling. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.marquee-track { display: inline-flex; gap: 48px; animation: marquee 32s linear infinite; }
.marquee-track span { font-family: var(--font-display); font-size: clamp(1.6rem,4vw,3rem); font-weight: 600; letter-spacing: -0.02em; opacity: 0.9; display: inline-flex; align-items: center; gap: 48px; }
.marquee-track span::after { content: "◆"; color: var(--gold); font-size: 0.5em; opacity: 0.9; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* =========================================================
   RESPONSIVE HARDENING
   Additive rules only. These do NOT change the desktop
   design — they make every existing page/component adapt
   cleanly to phones, tablets, laptops, desktops, and both
   orientations. No layout structure, content, colour (outside
   the header), or behaviour is altered.
   ========================================================= */

/* Global safety: never allow the page to scroll sideways, and let
   long words / URLs wrap instead of forcing overflow on tiny screens. */
html, body { max-width: 100%; overflow-x: hidden; }
p, li, a, h1, h2, h3, h4, h5, span, blockquote { overflow-wrap: break-word; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* ---- Stack custom inline 2-col grids on tablets & phones ----
   Several pages set grid-template-columns inline on .grid elements
   (e.g. "0.9fr 1.1fr", "1.1fr 0.9fr", "1fr 1fr"). Inline styles beat
   media-query classes, so we override them with equal specificity +
   !important, but ONLY at narrow widths. Desktop layout is untouched. */
@media (max-width: 860px) {
  .grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* header rows like "title + button" (1fr auto) stack and left-align */
  .grid[style*="1fr auto"] { align-items: start !important; }
  .grid[style*="1fr auto"] > .btn,
  .grid[style*="1fr auto"] > a.btn { justify-self: start; align-self: start !important; }
}

/* ---- Fluid section side padding on very small phones ----
   --gutter already uses clamp(20px,5vw,68px); ensure the floor
   is comfortable but not wasteful on <=380px devices. */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
}

/* ---- Buttons: allow wrapping labels, keep tap target comfy ---- */
@media (max-width: 560px) {
  .btn { white-space: normal; }
  .btn-lg { padding: 15px 22px; }
  /* full-width primary actions read better on narrow phones */
  .hero-actions .btn, .cta-band .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- Tables (if any content adds them) scroll instead of overflow ---- */
table { width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Forms never overflow their container ---- */
input, textarea, select { max-width: 100%; }