/* =============================================================================
   skyline.css — Skyline Design Catalog
   Custom CSS with design tokens. Replaces Tailwind CSS v4.1.12 (shared.css).
   ============================================================================= */

/* =============================================================================
   1. RESET
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -moz-tab-size: 4; tab-size: 4; -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { list-style: none; }
a { color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* =============================================================================
   2. DESIGN TOKENS
   ============================================================================= */
:root {
  /* Colors */
  --c-dark: #1b1b1b;
  --c-cream: #f1efed;
  --c-sand: #e5e3e0;
  --c-navy: #3a5a77;
  --c-sky: #7ea2bf;
  --c-sage: #a9bfa5;
  --c-white: #fff;

  /* Typography */
  --font-sans: 'Instrument Sans', sans-serif;
  --font-serif: 'Instrument Serif', serif;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-normal: 300ms;
  --dur-slow: 500ms;
  --dur-card: 700ms;

  /* ── Fluid Typography ── */
  --text-xs:    clamp(12px, 0.97vw, 14px);
  --text-sm:    clamp(12px, 1.11vw, 16px);
  --text-sm2:   clamp(14px, 1.11vw, 16px);
  --text-base:  clamp(16px, 1.39vw, 20px);
  --text-md:    clamp(18px, 1.39vw, 20px);
  --text-lg:    clamp(18px, 1.67vw, 24px);
  --text-xl:    clamp(20px, 1.67vw, 24px);
  --text-2xl:   clamp(24px, 2.22vw, 32px);
  --text-3xl:   clamp(30px, 3.06vw, 44px);
  --text-4xl:   clamp(40px, 3.33vw, 48px);

  /* ── Fluid Line Heights ── */
  --lh-sm:      clamp(16px, 1.67vw, 24px);
  --lh-md:      clamp(20px, 1.67vw, 24px);
  --lh-xl:      clamp(24px, 2.22vw, 32px);
  --lh-3xl:     clamp(32px, 3.33vw, 48px);
  --lh-4xl:     clamp(40px, 3.33vw, 48px);
  --lh-4xl-alt: clamp(40px, 3.19vw, 46px);

  /* ── Fluid Spacing ── */
  --sp-2xs:     clamp(4px, 0.56vw, 8px);
  --sp-xs:      clamp(8px, 1.11vw, 16px);
  --sp-gutter:  clamp(12px, 1.67vw, 24px);
  --sp-md:      clamp(16px, 1.67vw, 24px);
  --sp-md2:     clamp(16px, 2vw, 28px);
  --sp-md3:     clamp(16px, 2.78vw, 40px);
  --sp-lg:      clamp(24px, 2.78vw, 40px);
  --sp-lg2:     clamp(24px, 3.33vw, 48px);
  --sp-lg3:     clamp(24px, 4.44vw, 64px);
  --sp-xl:      clamp(32px, 3.33vw, 48px);
  --sp-xl2:     clamp(32px, 3.89vw, 56px);
  --sp-2xl:     clamp(40px, 4.44vw, 64px);
  --sp-xl3:     clamp(40px, 3.89vw, 56px);
  --sp-xl4:     clamp(40px, 3.33vw, 48px);
  --sp-3xl:     clamp(48px, 4.44vw, 64px);
  --sp-4xl:     clamp(40px, 5.56vw, 80px);
  --sp-5xl:     clamp(56px, 6.11vw, 88px);
  --sp-6xl:     clamp(64px, 11.11vw, 160px);

  /* ── Component: Product Detail ── */
  --prod-panel-pt: clamp(16px, 5vw, 72px);
  --prod-panel-px: clamp(12px, 3.89vw, 56px);
  --thumb-w:       clamp(24px, 2.78vw, 40px);

  /* ── Component: Mat-slider Mosaic ── */
  --mat-w-1: clamp(216px, 25vw, 360px);
  --mat-w-2: clamp(190px, 22.01vw, 317px);
  --mat-w-3: clamp(167px, 19.38vw, 279px);
  --mat-w-4: clamp(146px, 16.94vw, 244px);

  /* ── Component: Gallery Slides ── */
  --slide-h:      clamp(376px, 52.78vw, 760px);
  --slide-w-port: clamp(300px, 41.67vw, 600px);
  --slide-w-land: clamp(600px, 83.33vw, 1200px);

  /* ── Component: Heroes ── */
  --hero-h:      clamp(432px, 36.67vw, 528px);
  --hero-home-h: clamp(360px, 62.8vw, 904px);
  --cs-h:        clamp(576px, 52.78vw, 760px);

  /* ── Component: Footer ── */
  --footer-gutter: clamp(12px, 3.33vw, 48px);

  /* ── Medium-frequency variants (≥10 occurrences) ── */
  --text-3xl-b:  clamp(30px, 3.33vw, 48px);   /* product h1 variant, 134x */
  --text-3xl-c:  clamp(34px, 3.06vw, 44px);   /* heading variant, 17x */
  --lh-3xl-b:    clamp(36px, 3.33vw, 48px);   /* line-height variant, 31x */
  --lh-3xl-c:    clamp(38px, 3.33vw, 48px);   /* line-height variant, 17x */
  --sp-3xs:      clamp(2px, 0.28vw, 4px);     /* tiny gap, 17x */
  --sp-sm2:      clamp(12px, 2.22vw, 32px);   /* wide-growth spacing, 17x */
  --sp-lg-b:     clamp(20px, 2.22vw, 32px);   /* medium spacing, 20x */
  --sp-lg-c:     clamp(32px, 2.78vw, 40px);   /* spacing variant, 20x */
  --sp-lg-d:     clamp(20px, 2.22vw, 28px);   /* spacing variant, 10x */
  --sp-2xl-b:    clamp(32px, 4.44vw, 64px);   /* section spacing, 11x */
  --sp-3xl-b:    clamp(48px, 6.11vw, 88px);   /* large padding, 15x */
  --sp-3xl-c:    clamp(40px, 6.11vw, 88px);   /* large padding, 13x */
  --section-h-a: clamp(380px, 32.22vw, 464px); /* section height, 26x */
  --section-h-b: clamp(392px, 52.78vw, 760px); /* section height, 14x */
  --section-h-c: clamp(500px, 52.78vw, 760px); /* min-height, 14x */
  --section-mh:  clamp(280px, 25vw, 360px);    /* min-height small, 12x */
  --max-w-xl:    clamp(800px, 80.42vw, 1158px); /* max-width, 17x */
  --max-w-lg:    clamp(351px, 80.42vw, 1158px); /* max-width, 15x */
  --max-w-md:    clamp(351px, 48.06vw, 692px);  /* max-width, 13x */
}

/* =============================================================================
   3. BASE
   ============================================================================= */
html, body {
  min-height: 100vh;
  min-height: 100dvh;
}
body {
  font-family: var(--font-sans);
  color: var(--c-dark);
  background: var(--c-white);
}

/* =============================================================================
   4. LAYOUT UTILITIES
   ============================================================================= */
/* Display */
.flex        { display: flex; }
.grid        { display: grid; }
.hidden      { display: none; }
.block       { display: block; }
.contents    { display: contents; }

/* Flex direction & wrap */
.flex-col    { flex-direction: column; }
.flex-row    { flex-direction: row; }
.flex-wrap   { flex-wrap: wrap; }

/* Flex sizing */
.flex-shrink-0 { flex-shrink: 0; }
.shrink-0      { flex-shrink: 0; }
.flex-1        { flex: 1 1 0%; }

/* Align */
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }
.self-start     { align-self: flex-start; }
.self-end       { align-self: flex-end; }

/* Justify */
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

/* Inset / edges */
.inset-0 { inset: 0; }
.top-0   { top: 0; }
.left-0  { left: 0; }
.top-12  { top: 48px; }

/* Z-index */
.z-0  { z-index: 0; }
.z-10 { z-index: 10; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Width */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.w-2     { width: 8px; }
.w-8     { width: 32px; }
.w-32    { width: 128px; }
.w-48    { width: 192px; }

/* Height */
.h-full  { height: 100%; }
.h-auto  { height: auto; }
.h-2     { height: 8px; }
.h-6     { height: 24px; }
.h-8     { height: 32px; }
.h-12    { height: 48px; }

/* Size shorthand */
.size-full { width: 100%; height: 100%; }

/* Max/Min */
.max-w-none { max-width: none; }
.min-w-0    { min-width: 0; }

/* Order */
.order-1 { order: 1; }
.order-2 { order: 2; }

/* Grid columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Gap */
.gap-0\.5 { gap: 2px; }
.gap-1    { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2    { gap: 8px; }
.gap-3    { gap: 12px; }
.gap-4    { gap: 16px; }
.gap-6    { gap: 24px; }
.gap-8    { gap: 32px; }
.gap-x-1  { column-gap: 4px; }

/* Spacing (margin, padding) */
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.pt-4 { padding-top: 16px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-auto { margin-top: auto; }
.mb-8 { margin-bottom: 32px; }
.mx-1 { margin-left: 4px; margin-right: 4px; }
.ml-2 { margin-left: 8px; }

/* =============================================================================
   5. TYPOGRAPHY UTILITIES
   ============================================================================= */
.font-serif      { font-family: var(--font-serif); }
.text-center     { text-align: center; }
.text-right      { text-align: right; }
.text-left       { text-align: left; }
.tracking-tight  { letter-spacing: -0.02em; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.uppercase       { text-transform: uppercase; }
.italic          { font-style: italic; }
.underline       { text-decoration: underline; }
.no-underline    { text-decoration: none; }
.decoration-solid { text-decoration-style: solid; }

/* =============================================================================
   6. COLOR UTILITIES
   ============================================================================= */
/* Background */
.bg-white  { background-color: var(--c-white); }
.bg-black  { background-color: #000; }
.bg-cream  { background-color: var(--c-cream); }
.bg-dark   { background-color: var(--c-dark); }
.bg-sand   { background-color: var(--c-sand); }
.bg-sage   { background-color: var(--c-sage); }
.bg-sky    { background-color: var(--c-sky); }
.bg-navy   { background-color: var(--c-navy); }

/* Background with opacity */
.bg-overlay-20 { background-color: rgba(0, 0, 0, 0.20); }
.bg-cream-40   { background-color: rgba(241, 239, 237, 0.40); }

/* Text color */
.text-white { color: var(--c-white); }
.text-black { color: #000; }
.text-sky   { color: var(--c-sky); }
.text-navy  { color: var(--c-navy); }

/* Border */
.border-t       { border-top: 1px solid currentColor; }
.border-none    { border: none; }
.border-dark-10 { border-color: rgba(27, 27, 27, 0.10); }

/* =============================================================================
   7. VISUAL UTILITIES
   ============================================================================= */
.object-cover    { object-fit: cover; }
.object-bottom   { object-position: center bottom; }
.object-left-top { object-position: left top; }
.object-pos-68   { object-position: center 58%; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.group           { /* marker for group-hover children */ }
.hero-img-mobile  { /* JS selector hook for product hero mobile image */ }
.hero-img-desktop { /* JS selector hook for product hero desktop image */ }
.grayscale       { filter: grayscale(100%); }
.rounded-full    { border-radius: 9999px; }
.shadow-lg       { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }

/* Opacity */
.opacity-30  { opacity: 0.3; }
.opacity-60  { opacity: 0.6; }
.opacity-70  { opacity: 0.7; }
.opacity-80  { opacity: 0.8; }
.opacity-100 { opacity: 1; }

/* Nav active link (replaces dynamic opacity-60) */
.nav-active  { opacity: 0.6; }

/* =============================================================================
   8. TRANSITION UTILITIES
   ============================================================================= */
.transition-opacity   { transition-property: opacity; transition-timing-function: var(--ease-smooth); transition-duration: var(--dur-fast); }
.transition-colors    { transition-property: color, background-color, border-color; transition-timing-function: var(--ease-smooth); transition-duration: var(--dur-fast); }
.transition-transform { transition-property: transform; transition-timing-function: ease-out; transition-duration: var(--dur-card); }
.transition-all       { transition-property: all; transition-timing-function: var(--ease-smooth); transition-duration: var(--dur-fast); }
.duration-700         { transition-duration: 700ms; }
.ease-out             { transition-timing-function: ease-out; }
.duration-200         { transition-duration: 200ms; }

/* =============================================================================
   9. HOVER UTILITIES
   ============================================================================= */
.hover-dim:hover    { opacity: 0.6; }
.hover-dim-70:hover { opacity: 0.7; }
.hover-dim-80:hover { opacity: 0.8; }
.hover-full:hover   { opacity: 1; }
.hover-text-sky:hover   { color: var(--c-sky); }
.hover-text-white:hover { color: var(--c-white); }

/* Group hover */
.group:hover .group-hover-zoom    { transform: scale(1.02); }
.group:hover .group-hover-color   { filter: grayscale(0); }
.group:hover .group-hover-text-navy { color: var(--c-navy); }

/* =============================================================================
   10. ARBITRARY VALUE UTILITIES
   ============================================================================= */
.ml-\[5vw\]      { margin-left: 5vw; }
.max-h-\[8dvh\]  { max-height: 8dvh; }
.max-w-\[490px\]  { max-width: 490px; }
.max-w-\[351px\]  { max-width: 351px; }
.mr-\[20\%\]      { margin-right: 20%; }
.mt-\[0\.04em\]   { margin-top: 0.04em; }
.top-\[48px\]     { top: 48px; }
.gap-\[4px\]      { gap: 4px; }
.gap-\[8px\]      { gap: 8px; }
.gap-\[16px\]     { gap: 16px; }
.gap-\[24px\]     { gap: 24px; }
.gap-\[40px\]     { gap: 40px; }
.min-h-\[300px\]  { min-height: 300px; }

/* Border color */
.border-0     { border-width: 0; }
.border-b     { border-bottom: 1px solid currentColor; }
.border-sky   { border-color: var(--c-sky); }
.bg-transparent { background-color: transparent; }
.outline-none   { outline: none; }
.resize-none    { resize: none; }

/* =============================================================================
   10B. RESPONSIVE: sm (≥640px)
   ============================================================================= */
@media (min-width: 640px) {
  .sm\:flex-row    { flex-direction: row; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================================
   11. RESPONSIVE: md (≥768px)
   ============================================================================= */
@media (min-width: 768px) {
  /* Display */
  .md\:flex     { display: flex; }
  .md\:grid     { display: grid; }
  .md\:block    { display: block; }
  .md\:hidden   { display: none; }
  .md\:contents { display: contents; }

  /* Flex */
  .md\:flex-row  { flex-direction: row; }
  .md\:flex-wrap { flex-wrap: wrap; }

  /* Align */
  .md\:items-center   { align-items: center; }
  .md\:items-baseline { align-items: baseline; }
  .md\:items-end      { align-items: flex-end; }

  /* Justify */
  .md\:justify-between { justify-content: space-between; }

  /* Text */
  .md\:text-right { text-align: right; }

  /* Width */
  .md\:w-1\/2 { width: 50%; }
  .md\:w-40   { width: 160px; }
  .md\:w-64   { width: 256px; }
  .md\:max-w-none { max-width: none; }

  /* Grid */
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  /* Gap */
  .md\:gap-1   { gap: 4px; }
  .md\:gap-1\.5 { gap: 6px; }
  .md\:gap-2   { gap: 8px; }
  .md\:gap-4   { gap: 16px; }

  /* Order */
  .md\:order-1 { order: 1; }
  .md\:order-2 { order: 2; }

  /* Flex sizing (arbitrary) */
  .md\:flex-1       { flex: 1 1 0%; }
  .md\:flex-\[342\] { flex: 342; }
  .md\:flex-\[458\] { flex: 458; }

  /* Width */
  .md\:w-auto { width: auto; }

  /* Align */
  .md\:items-end { align-items: flex-end; }

  /* Gap (arbitrary) */
  .md\:gap-\[8px\] { gap: 8px; }
  .md\:gap-\[clamp\(40px\,8vw\,125px\)\] { gap: clamp(40px, 8vw, 125px); }
  .md\:gap-y-10 { row-gap: 40px; }

  /* Max/Min width (arbitrary) */
  .md\:max-w-\[342px\] { max-width: 342px; }
  .md\:min-h-0 { min-height: 0; }
}

/* =============================================================================
   12. RESPONSIVE: lg (≥1024px)
   ============================================================================= */
@media (min-width: 1024px) {
  .lg\:flex-row    { flex-direction: row; }
  .lg\:flex-1      { flex: 1 1 0%; }
  .lg\:items-start { align-items: flex-start; }
  .lg\:items-end   { align-items: flex-end; }
  .lg\:ml-auto     { margin-left: auto; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:w-\[312px\] { width: 312px; }
  .lg\:w-\[200px\] { width: 200px; }
}

/* =============================================================================
   13. COMPONENT: Navbar — Desktop dropdown + Mobile submenu
   ============================================================================= */
.sky-nav-link    { font-size: 16px; line-height: 16px; letter-spacing: -0.02em; font-weight: 400; }
.sky-nav-mobile  { font-size: 16px; letter-spacing: -0.02em; font-weight: 400; }
.sky-nav-sub     { font-size: 14px; letter-spacing: -0.02em; font-weight: 400; padding: 6px 0 6px 16px; }
.sky-menu-pad    { padding: 16px 12px; }

.sky-nav-dd          { position: relative; }
.sky-nav-dd-panel    { display: none; position: absolute; top: 100%; left: -16px; min-width: 168px; z-index: 60; }
.sky-nav-dd:hover > .sky-nav-dd-panel { display: flex !important; }
.sky-nav-dd-panel-inner { background: var(--c-cream); box-shadow: 0 4px 12px rgba(0,0,0,.06); padding: 8px 0; width: 100%; }
.sky-nav-dd-panel a  { display: block; padding: 6px 16px; white-space: nowrap; }

.sky-mob-sub         { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.sky-mob-sub.open    { max-height: 200px; }
.sky-mob-chevron     { transition: transform 0.3s ease; }
.sky-mob-chevron.open { transform: rotate(180deg); }

/* =============================================================================
   14. COMPONENT: Links — Global reset + .skyland-link animated underline
   ============================================================================= */
a, a:hover, a:focus, a:active,
button, button:hover,
.filter-btn-proj { text-decoration: none !important; }

a.skyland-link,
.custom-animated-link {
  width: fit-content;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0% 100%;
  padding-bottom: 3px !important;
}
a.skyland-link:hover,
.custom-animated-link:hover {
  animation: skyland-underline-sweep 0.6s var(--ease-smooth) forwards;
}

/* =============================================================================
   15. COMPONENT: Slider Dots (collection slider)
   ============================================================================= */
.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(241, 239, 237, 0.4);
  transition: opacity 0.4s ease;
  cursor: pointer;
}
.slider-dot.active {
  background: var(--c-cream);
}

/* =============================================================================
   16. COMPONENT: Cards — hover zoom on product/collection/project images
   ============================================================================= */
.group .overflow-hidden > img {
  transition-property: transform, scale;
  transition-duration: 700ms;
  transition-timing-function: ease-out;
}

/* Card typography helpers */
.sky-card-mobile { margin-top: 16px; height: 48px; font-size: 16px; line-height: 24px; }

/* =============================================================================
   17. COMPONENT: Footer
   ============================================================================= */
.sky-footer-legal { font-size: 14px; line-height: 24px; font-weight: 400; }

/* =============================================================================
   18. COMPONENT: Product filter bar
   ============================================================================= */
.filter-btn {
  text-decoration: none !important;
  background: none;
  border: none;
}

/* =============================================================================
   19. COMPONENT: Embla — Mobile slide carousel
   ============================================================================= */
/* Drag prevention */
.embla-home,
.embla-gallery,
[data-section="collection-slider"],
[data-section="mat-slider"] {
  -webkit-user-select: none;
  user-select: none;
}
.embla-home img,
.embla-gallery img,
[data-section="collection-slider"] img,
[data-section="mat-slider"] img {
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Mobile Embla sliders */
@media (max-width: 767px) {
  .embla-home { overflow: hidden; }
  .embla-home .embla__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
  }
  .embla-home .embla__slide {
    flex: 0 0 82%;
    min-width: 0;
    padding: 0 6px;
    box-sizing: border-box;
  }
}

/* Collection gallery Embla (all viewports) */
.embla-gallery { overflow: hidden; }
.embla-gallery .embla-gallery__container {
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}
.embla-gallery .embla-gallery__container:active {
  cursor: grabbing;
}

/* =============================================================================
   20. COMPONENT: CTA Marquee — Infinite scroll animation
   ============================================================================= */
.cta-marquee-track {
  animation: cta-marquee 25s linear infinite;
  width: max-content;
}

/* =============================================================================
   21. COMPONENT: Product Hero — Fit-to-viewport layout
   ============================================================================= */
@media (min-width: 768px) {
  section:first-of-type            { height: 100dvh; max-height: 100dvh; }
  section:first-of-type > div      { height: 100%; }
  section:first-of-type > div > div.relative {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
  }
  section:first-of-type > div > div.relative > div[style*="aspect-ratio"] {
    flex: 1; min-height: 0;
  }
  section:first-of-type > div > div.relative > div.flex { flex-shrink: 0; }
  section:first-of-type > div > div.flex.flex-col {
    height: 100%; overflow-y: auto;
  }
}

section:first-of-type > div > div > div[style*="aspect-ratio"] {
  background-color: #fff !important;
}
section:first-of-type > div > div > div[style*="aspect-ratio"] > img {
  object-position: center center !important;
}
section:first-of-type > div > div > div[style*="aspect-ratio"] > img.hero-landscape {
  object-fit: contain !important;
}
section:first-of-type > div > div > div[style*="aspect-ratio"] > img.hero-portrait {
  object-fit: cover !important;
}

/* Mobile: product hero stacked */
@media (max-width: 767px) {
  section:first-of-type > div > div > div[style*="aspect-ratio"] > img.hero-landscape {
    object-fit: cover !important;
  }
  section[data-section="hero"] div[style*="aspect-ratio: 375 / 448"] {
    aspect-ratio: 375 / 300 !important;
    max-height: 56vh;
  }
  section[data-section="hero"] > div {
    height: auto !important;
    min-height: 0 !important;
  }
  section[data-section="hero"] > div > div:first-child {
    flex-shrink: 1;
    min-height: 0;
  }
  section[data-section="hero"] > div > div:last-child {
    height: auto !important;
    overflow: visible !important;
    flex-shrink: 0;
  }
}

/* =============================================================================
   22. COMPONENT: Material grid + Download link hide
   ============================================================================= */
[data-section="content-3"] .overflow-hidden[style*="aspect-ratio"] {
  overflow: hidden !important;
}
[data-section="content-3"] .overflow-hidden[style*="aspect-ratio"] > img {
  max-width: 100%;
}
a[data-wp-field="download-link"] {
  display: none !important;
}

/* =============================================================================
   23. SCROLL REVEAL SYSTEM
   ============================================================================= */
.reveal         { opacity: 0; transition: opacity 0.5s ease-out; }
.reveal.visible { opacity: 1; }
.reveal:not(.visible) { will-change: opacity; }

/* Delays by content type */
.reveal[data-reveal="heading"] { transition-delay: 0s; }
.reveal[data-reveal="text"]    { transition-delay: 0.06s; }
.reveal[data-reveal="link"]    { transition-delay: 0.12s; }
.reveal[data-reveal="image"]   { transition-delay: 0.15s; }

/* Grid stagger via nth-child */
.reveal[data-reveal="grid"] > * {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
  will-change: opacity;
}
.reveal[data-reveal="grid"].visible > * {
  opacity: 1;
  transition-delay: 0s !important;
}
.reveal[data-reveal="grid"] > *:nth-child(1) { transition-delay: 0s; }
.reveal[data-reveal="grid"] > *:nth-child(2) { transition-delay: 0.07s; }
.reveal[data-reveal="grid"] > *:nth-child(3) { transition-delay: 0.14s; }
.reveal[data-reveal="grid"] > *:nth-child(4) { transition-delay: 0.21s; }
.reveal[data-reveal="grid"] > *:nth-child(n+5) { transition-delay: 0.28s; }

/* =============================================================================
   24. HERO WORD-BY-WORD REVEAL
   ============================================================================= */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  animation: hero-word-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-word-1 { animation-delay: 0.2s; }
.hero-word-2 { animation-delay: 0.48s; }
.hero-word-3 { animation-delay: 0.7s; }

/* =============================================================================
   25. KEYFRAMES
   ============================================================================= */
@keyframes cta-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes skyland-underline-sweep {
  0%    { background-size: 100% 1px; background-position: 100% 100%; }
  40%   { background-size: 0% 1px;   background-position: 100% 100%; }
  40.1% { background-size: 0% 1px;   background-position: 0% 100%; }
  100%  { background-size: 100% 1px; background-position: 0% 100%; }
}

@keyframes hero-word-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =============================================================================
   26. VIEW TRANSITIONS — MPA crossfade
   ============================================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-fade-out 0.2s ease-out forwards; }
::view-transition-new(root) { animation: vt-fade-in 0.35s ease-in forwards; }

/* =============================================================================
   27. PROPORTIONAL ZOOM — Screens > 1440px
   ============================================================================= */
@media (min-width: 1441px) {
  html { zoom: calc(100vw / 1440); }
}

/* =============================================================================
   28. STICKY HEADER + PERFORMANCE
   ============================================================================= */
header[data-component="site-header"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  contain: none !important;
  content-visibility: visible !important;
}
.section-block {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}