/* Generated by Frontend Wireframe Engine — Phase 4
   DNA Hash: 0971e0105edb
   Do not edit — regenerate via the engine */

:root {
  /* Typography — geometric-modern-sharp */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --scale-ratio: 1.25;
  --heading-weight: 700;
  --heading-case: normal;
  --heading-letterspacing: -0.015em;
  --heading-line-height: 1.15;
  --body-size: 16px;
  --body-weight: 400;
  --body-line-height: 1.65;
  --body-letterspacing: 0em;
  --max-line-length: 72ch;

  /* Components — bold-geometric */
  --radius: 8px;
  --shadow: 0px 6px 20px 0px rgba(22, 34, 43, 0.16);
  --border-w: 2.5px;
  --card-bg: #ffffff;
  --card-shadow: 0px 6px 20px 0px rgba(22, 34, 43, 0.10);
  --card-padding: 24px;
  --hover-duration: 120ms;
  --hover-easing: cubic-bezier(0, 0, 0.2, 1);

  /* Color — light-airy-minimal, locked to GRS brand */
  --color-bg-base: #ffffff;
  --color-bg-subtle: #f6f8fa;
  --color-bg-card: #ffffff;
  --color-text-primary: #16222b;
  --color-text-secondary: #51626e;
  --color-accent: #275c7c;       /* GRS deep blue */
  --color-accent-deep: #1d4a66;
  --color-gold: #f4aa00;         /* GRS gold — conversion CTAs only */
  --color-ink: #16222b;
  --color-border: #dce4e9;

  /* Spacing — airy */
  --spacing-base: 8px;
  --spacing-section: 96px;
  --spacing-content-desktop: 80px;
  --spacing-content-mobile: 24px;
  --spacing-paragraph: 24px;
  --spacing-component: 32px;

  /* Animation — snappy-responsive */
  --transition-speed: 120ms;
  --transition-easing: cubic-bezier(0, 0, 0.2, 1);
  --entrance-duration: 300ms;
  --entrance-easing: cubic-bezier(0, 0, 0.2, 1);
  --stagger-delay: 60ms;

  /* Layout — split-screen-narrative */
  --layout-max-width: 100vw;
  --layout-whitespace-ratio: 0.38;

  /* Reference keys */
  --texture-type: "flat-clean";
  --nav-type: "transparent-overlay";
  --hero-archetype: "diagonal-divide";
  --hero-height: 90vh;
  --btn-archetype: "notched-corner";
  --btn-notch: 14px;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  color: var(--color-text-primary);
  background: var(--color-bg-base);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-letterspacing);
  line-height: var(--heading-line-height);
  margin: 0;
}
p { max-width: var(--max-line-length); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-ink); color: #fff; padding: 12px 20px;
  font-family: var(--font-heading); font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Logo tinting (white-on-transparent source asset) ----------
   CSS filter chain instead of mask-image: masks are CORS-blocked under file://.
   Chain calibrated visually against a #275C7C swatch in Chrome. */
.logo-tint {
  filter: brightness(0) saturate(100%) invert(32%) sepia(30%) saturate(900%) hue-rotate(160deg) brightness(90%) contrast(88%);
}

/* ---------- DNA-styled image placeholders (no suitable real asset) ---------- */
.ph-block {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 100%);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  line-height: 1.6; padding: 16px;
}
.ph-block::after {
  content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px;
  background: var(--color-gold); clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* ---------- Buttons — notched-corner archetype ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--btn-notch)), calc(100% - var(--btn-notch)) 100%, 0 100%);
  font-family: var(--font-heading); font-weight: 700; font-size: 14px; line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  padding: 17px 30px; border: none; cursor: pointer;
  transition: clip-path var(--transition-speed) var(--transition-easing),
              background-color var(--transition-speed) var(--transition-easing),
              transform var(--transition-speed) var(--transition-easing);
}
.btn:hover { --btn-notch: 22px; transform: translateY(-2px); }
.btn:active { --btn-notch: 10px; transform: scale(0.98); }
.btn:focus-visible { box-shadow: inset 0 0 0 3px rgba(22, 34, 43, 0.6); outline: none; }
.btn-gold { background: var(--color-gold); color: var(--color-ink); }
.btn-gold:hover { background: #ffb91a; }
.btn-blue { background: var(--color-accent); color: #ffffff; }
.btn-blue:hover { background: var(--color-accent-deep); }
.btn-light { background: #ffffff; color: var(--color-accent); }
.btn-light:hover { background: #eef4f8; }
.btn-light:focus-visible { box-shadow: inset 0 0 0 3px rgba(244, 170, 0, 0.9); }

/* ---------- Header — transparent-overlay ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 80px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92) 30%, rgba(255, 255, 255, 0));
  transition: background-color 200ms var(--transition-easing), box-shadow 200ms var(--transition-easing);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--color-border);
}
.nav-link {
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  letter-spacing: 0.02em; color: var(--color-text-primary); text-decoration: none;
  padding: 8px 2px; border-bottom: 2.5px solid transparent;
  transition: border-color var(--transition-speed) var(--transition-easing),
              color var(--transition-speed) var(--transition-easing);
}
.nav-link:hover, .nav-link:focus-visible { border-bottom-color: var(--color-gold); color: var(--color-accent); }

/* ---------- Mobile menu — full-viewport overlay (HARD RULE 8a) ---------- */
.mobile-menu {
  position: fixed; top: 0; left: 0;
  width: 100vw;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* dynamic viewport */
  z-index: 100;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  background: var(--color-bg-base);
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a.mobile-link {
  font-family: var(--font-heading); font-weight: 700; font-size: 32px;
  color: var(--color-text-primary); text-decoration: none; padding: 14px 0;
  opacity: 0; transform: translateY(8px);
}
.mobile-menu.is-open a.mobile-link {
  animation: menuItemIn 300ms var(--entrance-easing) forwards;
}
.mobile-menu.is-open a.mobile-link:nth-child(2) { animation-delay: 60ms; }
.mobile-menu.is-open a.mobile-link:nth-child(3) { animation-delay: 120ms; }
.mobile-menu.is-open a.mobile-link:nth-child(4) { animation-delay: 180ms; }
.mobile-menu.is-open a.mobile-link:nth-child(5) { animation-delay: 240ms; }
@keyframes menuItemIn { to { opacity: 1; transform: translateY(0); } }
.mobile-menu-close {
  position: absolute; top: 16px; right: 16px;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: var(--color-ink); color: #fff; border: none; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

/* ---------- Hero — diagonal-divide ---------- */
/* Text side sits on a solid white diagonal wedge OVER a full-bleed photo,
   per the archetype's "text side uses a solid background color" rule —
   guarantees headline legibility (Unreadable Hero anti-pattern). */
.hero { position: relative; min-height: 90vh; overflow: hidden; background: var(--color-bg-base); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-panel {
  position: absolute; inset: 0; background: var(--color-bg-base); pointer-events: none;
  clip-path: polygon(0 0, 57% 0, 33% 100%, 0 100%);
}
.hero-edge {
  position: absolute; inset: 0; background: var(--color-gold); pointer-events: none;
  clip-path: polygon(57% 0, 57.8% 0, 33.8% 100%, 33% 100%);
}
.text-outline {
  color: transparent;
  -webkit-text-stroke: 2.5px var(--color-accent);
  paint-order: stroke;
}
@media (max-width: 1023px) {
  .hero { min-height: 0; }
  .hero-media { position: relative; inset: auto; height: 52vh; clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); }
  .hero-panel, .hero-edge { display: none; }
  .text-outline { -webkit-text-stroke-width: 1.5px; }
}

/* Interior page hero — same diagonal system at reduced height */
.hero--short { min-height: 56vh; }
@media (max-width: 1023px) {
  .hero--short .hero-media { height: 34vh; }
}

/* ---------- Season — split-screen-narrative ---------- */
.season-sticky { position: sticky; top: 0; height: 100vh; }
@media (max-width: 1023px) { .season-sticky { position: relative; height: 56vh; } }

.card-geo {
  background: var(--card-bg);
  border: var(--border-w) solid var(--color-ink);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform var(--hover-duration) var(--hover-easing),
              box-shadow var(--hover-duration) var(--hover-easing);
}
.card-geo:hover { transform: translateY(-2px); box-shadow: 0px 10px 28px 0px rgba(22, 34, 43, 0.18); }

/* Ink variant — declared here (not via Tailwind bg-* utility) because un-layered
   component CSS always beats Tailwind v4 @layer utilities in the cascade. */
.card-ink { background: var(--color-ink); color: #ffffff; border-color: var(--color-ink); }

/* grid-break mutation: highlight card crosses the split boundary */
@media (min-width: 1024px) {
  .grid-break-card { margin-left: -160px; position: relative; z-index: 10; }
}

/* ---------- Geometric accents ---------- */
.geo-square { width: 12px; height: 12px; background: var(--color-gold); display: inline-block; flex: none; }
.geo-notch-corner { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mobile-menu.is-open a.mobile-link { animation: none; opacity: 1; transform: none; }
  .btn, .card-geo, .nav-link { transition: none; }
}