/* ============================================================
   Unico Suites — Design Tokens, Reset, Typography, Utilities
   ============================================================ */

:root {
  /* — Brand palette — */
  --navy:           #0D2A48;
  --navy-deep:      #081C33;
  --navy-light:     #153A5E;
  --navy-mid:       #204C74;
  --gold:           #D4AF37;
  --gold-light:     #E8CC6E;
  --gold-pale:      #F5EDD4;
  --gold-text:      #9C7E1F;  /* darker gold for AA contrast on light surfaces */
  --white:          #FFFFFF;
  --silver:         #F1F2F4;
  --off-white:      #F8F6F2;
  --text:           #1A1A1A;
  --text-light:     #5A5A5A;
  --text-mute:      #8A8A8A;
  --line:           rgba(13, 42, 72, 0.10);
  --line-dark:      rgba(255, 255, 255, 0.12);

  /* — Type scale (fluid) — */
  --fs-h1:    clamp(3.25rem, 1.8rem + 5.4vw, 6rem);       /* 52 → 96 */
  --fs-h2:    clamp(2.75rem, 1.9rem + 3.8vw, 4.5rem);     /* 44 → 72 */
  --fs-h3:    clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem);  /* 26 → 36 */
  --fs-h4:    clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); /* 17 → 20 */
  --fs-lead:  clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); /* 17 → 20 */
  --fs-body:  1rem;                                       /* 16 */
  --fs-sm:    0.875rem;                                   /* 14 */
  --fs-xs:    0.8125rem;                                  /* 13 */
  --fs-eyebrow: 0.875rem;                                 /* 14 */

  /* — Spacing scale — */
  --s-1:  0.25rem;   /*  4 */
  --s-2:  0.5rem;    /*  8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  3rem;      /* 48 */
  --s-8:  4rem;      /* 64 */
  --s-9:  6rem;      /* 96 */
  --s-10: 7.5rem;    /* 120 — section padding */

  /* — Container — */
  --container-max: 78rem;        /* 1248 */
  --container-narrow: 56rem;     /*  896 */
  --container-prose:  44rem;     /*  704 */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* — Radii — */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 22px;
  --r-pill: 999px;

  /* — Elevation — */
  --shadow-1: 0 1px 2px rgba(13, 42, 72, 0.04), 0 1px 3px rgba(13, 42, 72, 0.06);
  --shadow-2: 0 6px 16px -8px rgba(13, 42, 72, 0.12), 0 12px 30px -16px rgba(13, 42, 72, 0.16);
  --shadow-3: 0 14px 30px -10px rgba(13, 42, 72, 0.18), 0 24px 60px -20px rgba(13, 42, 72, 0.20);
  --shadow-gold: 0 8px 28px -10px rgba(212, 175, 55, 0.45);

  /* — Motion — */
  --ease-out:   cubic-bezier(0.16, 0.84, 0.34, 1);
  --ease-in:    cubic-bezier(0.6, 0.04, 0.98, 0.34);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:     180ms;
  --t-base:     320ms;
  --t-slow:     560ms;
  --t-reveal:   900ms;

  /* — Z-index — */
  --z-nav:        60;
  --z-overlay:    80;
  --z-banner:     90;
  --z-modal:     100;

  /* — Layout — */
  --nav-h:       6.75rem;         /* 108 — taller bar so the logo mark reads big */
  --section-py:  clamp(4rem, 8vw, 7.5rem);

  color-scheme: light;
}

/* ============================================================
   Modern reset — minimal, opinionated
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--text);
  background: var(--white);
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Universal guard against runaway widths on mobile. Any single element wider
   than the viewport drags the whole page sideways and reveals the body's
   white background underneath dark sections. */
img, svg, video, picture, iframe { max-width: 100%; }
table { max-width: 100%; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: color var(--t-fast) var(--ease-out);
}

hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 0;
}

::selection {
  background: var(--gold);
  color: var(--navy-deep);
}

/* Focus rings — visible but elegant */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.03em;  font-weight: 600; }
h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -0.02em;  font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: 1.3;  letter-spacing: -0.01em;  font-weight: 600; }

/* Italic emphasis in headings — uses the AA-passing darker gold on light surfaces.
   Override on dark sections via `.is-dark em` further down. */
em { font-style: italic; color: var(--gold-text); }
.h-light em, .is-dark em { color: var(--gold-light); }

p {
  margin: 0;
  line-height: 1.75;
  color: var(--text-light);
}

/* Whenever a list follows a paragraph, leave clear breathing space between them. */
p + ul,
p + ol,
.lead + ul,
.lead + ol {
  margin-block-start: var(--s-5);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--text-light);
  font-weight: 300;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.eyebrow::before {
  content: '';
  width: 2.25rem;
  height: 2px;
  background: var(--gold);
  display: inline-block;
}
.eyebrow--centered { justify-content: center; }
.eyebrow--centered::after {
  content: '';
  width: 2.25rem;
  height: 2px;
  background: var(--gold);
}

/* On dark surfaces */
.is-dark h1, .is-dark h2, .is-dark h3, .is-dark h4, .is-dark h5 { color: var(--white); }
.is-dark p, .is-dark .lead { color: rgba(255, 255, 255, 0.78); }
.is-dark .eyebrow { color: var(--gold-light); }
.is-dark .eyebrow::before, .is-dark .eyebrow::after { background: var(--gold-light); }

/* ============================================================
   Layout helpers
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--prose  { max-width: var(--container-prose); }

.section {
  padding-block: var(--section-py);
  position: relative;
}
.section--tight  { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--silver  { background: var(--silver); }
.section--off-white { background: var(--off-white); }
.section--white   { background: var(--white); }
.section--navy {
  background: var(--navy);
  color: var(--white);
}
.section--navy-deep {
  background: var(--navy-deep);
  color: var(--white);
}

/* Section header (eyebrow + title + intro) */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 56rem;
  margin-bottom: clamp(2rem, 5vw, 4.5rem);
}
.section-head--center {
  text-align: center;
  margin-inline: auto;
  align-items: center;
}
.section-head h2 {
  font-size: clamp(2.5rem, 1.9rem + 3.8vw, 4.5rem);
  line-height: 1.05;
  font-weight: 600;
}

/* Reveal-on-scroll base state — animated by main.js.
   Gated on html.js-ready so that without JS (or in screenshot tools / search
   crawlers), content remains visible. main.js adds .js-ready immediately. */
.js-ready .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
}
.js-ready .reveal--stagger:not(.is-visible) > * {
  opacity: 0;
  transform: translateY(20px);
}
.reveal {
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.reveal--stagger > * {
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
}
.reveal.is-visible, .reveal--stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal--stagger.is-visible > *:nth-child(1) { transition-delay:  60ms; }
.reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 140ms; }
.reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 220ms; }
.reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 380ms; }
.reveal--stagger.is-visible > *:nth-child(6) { transition-delay: 460ms; }

/* ============================================================
   Decorative gold rule
   ============================================================ */
.gold-rule {
  display: block;
  width: 3.75rem;
  height: 2px;
  background: var(--gold);
  border: 0;
  margin: var(--s-4) 0;
  position: relative;
  overflow: hidden;
}
.gold-rule--center { margin-inline: auto; }
.gold-rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer 4.5s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%);  }
}

/* ============================================================
   Skip link (a11y)
   ============================================================ */
.skip-link {
  position: absolute;
  inset-inline-start: var(--s-4);
  top: -3rem;
  z-index: var(--z-modal);
  padding: var(--s-3) var(--s-5);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible {
  top: var(--s-4);
}

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

.no-wrap { white-space: nowrap; }
.text-center { text-align: center; }

.grid { display: grid; gap: var(--s-5); }
.flex { display: flex; gap: var(--s-4); align-items: center; }

/* ============================================================
   prefers-reduced-motion — kill non-essential motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal--stagger > * { opacity: 1 !important; transform: none !important; }
}