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

/* =============================================================================
   0. SELF-HOSTED FONTS — Instrument Sans + Instrument Serif (WOFF2)
   ============================================================================= */

/* Instrument Sans — Normal (variable 400-700) */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Sans — Italic 400 */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/instrument-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/instrument-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Serif — Normal 400 */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Serif — Italic 400 */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================================
   1. RESET
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { 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; }
address { font-style: normal; }

/* =============================================================================
   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;

  /* Overlays */
  --c-overlay-light: rgba(27, 27, 27, 0.15);
  --c-overlay:       rgba(27, 27, 27, 0.2);
  --c-overlay-dark:  rgba(27, 27, 27, 0.3);

  /* 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);
  overflow-x: hidden;
}

/* =============================================================================
   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; }
.ml-auto    { margin-inline-start: auto; }

/* 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; }

  /* 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; }
@media (min-width: 768px) and (max-width: 1023px) {
  .sky-nav-link { font-size: 14px; }
}
.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); 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; }
/* 480px: los submenús de New Arrivals (7 items) y Fast Delivery (9) superan los 200px originales. */
.sky-mob-sub.open    { max-height: 480px; }
.sky-mob-chevron     { transition: transform 0.3s ease; }
.sky-mob-chevron.open { transform: rotate(180deg); }

/* Hero de Fast Delivery: la foto Dynasty lleva el mobiliario en la banda
   inferior — se baja la ventana visible (dejando horizonte) para que los
   muebles salgan completos. Solo esa plantilla (EN y ES). */
.page-template-tpl-fast-delivery [data-section="hero"] img { object-position: 50% 85%; }

/* Site search (header): lupa + panel bajo la barra */
.sky-search-toggle          { background: transparent; border: 0; padding: 0; color: inherit; }
.sky-search-inner           { padding: 24px var(--sp-gutter) 28px; max-width: 720px; }
.sky-search-input           { width: 100%; font-size: 20px; background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid rgba(27, 27, 27, 0.3); padding: 8px 0; }
.sky-search-input:focus-visible { outline: none; border-bottom-color: var(--c-navy); }
.sky-search-count           { font-size: 12px; opacity: 0.6; margin-top: 12px; }
.sky-search-results         { list-style: none; margin: 8px 0 0; padding: 0; max-height: min(60vh, 480px); overflow-y: auto; }
.sky-search-row             { display: flex; align-items: center; gap: 16px; padding: 10px 0; }
.sky-search-thumb           { width: 48px; height: 57px; object-fit: cover; background: #fff; flex-shrink: 0; display: block; }
.sky-search-text            { min-width: 0; }
.sky-search-name            { display: block; font-size: 16px; }
.sky-search-meta            { display: block; font-size: 12px; opacity: 0.6; margin-top: 2px; }
.sky-search-tag             { font-size: 11px; letter-spacing: 0.02em; border: 1px solid rgba(27, 27, 27, 0.25); padding: 2px 8px; margin-left: auto; white-space: nowrap; flex-shrink: 0; }

/* =============================================================================
   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%;
}

/* Product cards: consistent image aspect ratio across all grids */
[data-component="product-card"] > .overflow-hidden {
  aspect-ratio: 4 / 3;
}
[data-component="product-card"] > .overflow-hidden > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Download link now visible — PDF tech sheets linked per product */

/* =============================================================================
   22B. SEMANTIC: Typography combos — replaces high-frequency inline styles
   ============================================================================= */
/* Page-level */
.sky-type-page-title      { font-size: var(--text-4xl); line-height: var(--text-4xl); font-weight: 500; }
.sky-type-section-heading  { font-size: var(--text-3xl); line-height: var(--sp-xl); font-weight: 400; }
.sky-type-section-label    { font-size: var(--text-base); line-height: 24px; font-weight: 500; }
.sky-type-section-intro    { font-size: var(--text-base); line-height: var(--text-xl); font-weight: 500; }

/* Card labels — desktop */
.sky-type-card-title       { font-size: var(--text-xl); line-height: 30px; font-weight: 500; }
.sky-type-card-sub         { font-size: var(--text-xl); line-height: 32px; font-weight: 400; }
.sky-type-card-title-sm    { font-size: var(--text-lg); line-height: 30px; font-weight: 500; }
.sky-type-card-sub-sm      { font-size: var(--text-lg); line-height: 32px; font-weight: 400; }

/* Body text */
.sky-type-body             { font-size: 16px; line-height: 24px; font-weight: 400; }
.sky-type-body-bold        { font-size: 16px; line-height: 24px; font-weight: 500; }
.sky-type-body-sm          { font-size: var(--text-sm2); line-height: 24px; font-weight: 400; }
.sky-type-body-sm-bold     { font-size: var(--text-sm2); line-height: 24px; font-weight: 500; }

/* Footer */
.sky-type-footer-link      { font-size: var(--text-sm); line-height: var(--sp-md); font-weight: 400; }

/* =============================================================================
   22C. SEMANTIC: Overlays — dark gradient backgrounds for hero sections
   ============================================================================= */
.sky-overlay       { background-color: var(--c-overlay); }
.sky-overlay-light { background-color: var(--c-overlay-light); }
.sky-overlay-dark  { background-color: var(--c-overlay-dark); }

/* =============================================================================
   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; }
}

/* =============================================================================
   25b. ACCESSIBILITY — Contrast + Focus visible + skip link
   ============================================================================= */
/* Footer headings: boost sky color for AA contrast on navy bg */
footer[data-component="site-footer"] .text-sky {
  color: #c0d4e5;
}
footer[data-component="site-footer"] .sky-footer-legal {
  color: #c0d4e5;
}
:focus-visible {
  outline: 2px solid var(--c-sky, #7ABFDB);
  outline-offset: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* Sin velo del navegador al tocar/clicar enlaces (tap highlight); el foco de
   teclado queda cubierto por :focus-visible. Selección de texto en color de marca. */
html {
  -webkit-tap-highlight-color: transparent;
}
::selection {
  background-color: var(--c-navy, #1b1b1b);
  color: #fff;
}

/* Skip link */
.sky-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--c-navy, #1b1b1b);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.sky-skip-link:focus {
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  outline: 2px solid var(--c-sky, #87CEEB);
  outline-offset: 2px;
}

/* =============================================================================
   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;
}

/* =============================================================================
   28B. COMPLIANZ BANNER — Override generic blue with Skyline palette
   ============================================================================= */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
  background-color: var(--c-navy);
  border-color: var(--c-navy);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
  background-color: var(--c-sky);
  border-color: var(--c-sky);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message a,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link {
  color: var(--c-navy);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before {
  background-color: var(--c-navy);
}

/* =============================================================================
   29. LEGAL PAGES — Policy, cookies, legal notice
   ============================================================================= */

/* Header — cream band with title + date */
.sky-legal__header {
  background-color: var(--c-cream);
  padding: var(--sp-4xl) var(--sp-gutter) var(--sp-2xl);
}
.sky-legal__header-inner {
  max-width: 800px;
  margin: 0 auto;
}
.sky-legal__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: 400;
  color: var(--c-dark);
  margin: 0;
}
.sky-legal__date {
  font-size: var(--text-sm2);
  line-height: 24px;
  color: var(--c-dark);
  margin-top: var(--sp-xs);
  font-weight: 400;
}

/* Body — content area */
.sky-legal__body {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-gutter) var(--sp-4xl);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 28px;
  color: var(--c-dark);
}

/* Prose typography */
.sky-legal__body h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  font-weight: 500;
  color: var(--c-dark);
  margin: var(--sp-xl) 0 var(--sp-xs) 0;
  letter-spacing: -0.01em;
}
.sky-legal__body h3 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 28px;
  font-weight: 500;
  color: var(--c-dark);
  margin: var(--sp-lg) 0 var(--sp-2xs) 0;
}
.sky-legal__body h4 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 24px;
  font-weight: 500;
  color: var(--c-dark);
  margin: var(--sp-md) 0 var(--sp-2xs) 0;
}
.sky-legal__body p {
  margin: 0 0 var(--sp-xs) 0;
}
.sky-legal__body a {
  color: var(--c-navy);
  text-decoration: underline;
  text-decoration-color: var(--c-sky);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-smooth);
}
.sky-legal__body a:hover {
  color: var(--c-sky);
}
.sky-legal__body ul,
.sky-legal__body ol {
  margin: 0 0 var(--sp-xs) 0;
  padding-left: var(--sp-lg);
}
.sky-legal__body ul {
  list-style: disc;
}
.sky-legal__body ol {
  list-style: decimal;
}
.sky-legal__body li {
  margin-bottom: var(--sp-2xs);
  font-size: 16px;
  line-height: 28px;
}
.sky-legal__body li::marker {
  color: var(--c-sky);
}
.sky-legal__body strong,
.sky-legal__body b {
  font-weight: 500;
}
.sky-legal__body hr {
  border: none;
  border-top: 1px solid var(--c-sand);
  margin: var(--sp-xl) 0;
}
.sky-legal__body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-md) 0 var(--sp-lg);
  font-size: var(--text-sm2);
  line-height: 24px;
}
.sky-legal__body th,
.sky-legal__body td {
  padding: var(--sp-xs) var(--sp-md);
  border-bottom: 1px solid var(--c-sand);
  text-align: left;
  vertical-align: top;
}
.sky-legal__body th {
  font-weight: 500;
  color: var(--c-navy);
  background-color: var(--c-cream);
}
.sky-legal__body blockquote {
  border-left: 3px solid var(--c-sky);
  padding-left: var(--sp-md);
  margin: var(--sp-md) 0;
  color: rgba(27, 27, 27, 0.7);
  font-style: italic;
}

/* --- Complianz document overrides inside legal pages --- */
.sky-legal__body #cmplz-document {
  max-width: none;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
}
.sky-legal__body #cmplz-document h2,
.sky-legal__body #cmplz-document h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  font-weight: 500;
  color: var(--c-dark);
  margin: var(--sp-xl) 0 var(--sp-xs) 0;
  padding-bottom: 0;
  border-bottom: none;
  text-transform: none;
}
.sky-legal__body #cmplz-document h3 {
  font-size: var(--text-lg);
  margin-top: var(--sp-lg);
}
.sky-legal__body #cmplz-document h4 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--c-dark);
  margin: var(--sp-md) 0 var(--sp-2xs) 0;
  text-transform: none;
}
.sky-legal__body #cmplz-document h5 {
  font-family: var(--font-sans);
  font-size: var(--text-sm2);
  font-weight: 500;
  margin: var(--sp-xs) 0 var(--sp-2xs) 0;
  text-transform: none;
}
.sky-legal__body #cmplz-document p,
.sky-legal__body #cmplz-document li,
.sky-legal__body #cmplz-document td {
  font-size: 16px;
  line-height: 28px;
}
.sky-legal__body #cmplz-document a {
  color: var(--c-navy);
  text-decoration: underline;
  text-decoration-color: var(--c-sky);
  text-underline-offset: 3px;
}
.sky-legal__body #cmplz-document a:hover {
  color: var(--c-sky);
}
.sky-legal__body #cmplz-document a:focus {
  border: none;
  padding: 0;
  outline: 2px solid var(--c-sky);
  outline-offset: 2px;
}
.sky-legal__body #cmplz-document a[target=_blank]::after {
  display: none;
}
.sky-legal__body #cmplz-document ul {
  list-style: disc;
  margin-left: var(--sp-lg);
  margin-bottom: var(--sp-xs);
}

/* --- Complianz cookie service dropdowns — fluid card layout --- */
.sky-legal__body .cmplz-dropdown {
  background-color: var(--c-cream);
  border-radius: 0;
  margin-bottom: var(--sp-xs);
}
.sky-legal__body .cmplz-dropdown summary {
  background-color: var(--c-cream);
  padding: var(--sp-md) var(--sp-lg);
  margin: 0 0 2px 0;
}
/* Override the Complianz 5-column grid → clean 3-column: name | type | chevron */
.sky-legal__body .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div {
  grid-template: none;
  grid-template-columns: 1fr auto 25px;
  grid-gap: var(--sp-md);
  align-items: center;
}
.sky-legal__body .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div h3 {
  grid-area: auto;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  border-bottom: none;
  padding: 0;
  margin: 0;
}
.sky-legal__body .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p {
  grid-area: auto;
  text-align: right;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm2);
  color: var(--c-sky);
  font-weight: 400;
}
/* Hide the consent label + hidden checkbox — they're for the banner, not the document */
.sky-legal__body .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div label,
.sky-legal__body .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div input {
  display: none;
}
.sky-legal__body .cmplz-dropdown summary div::after {
  content: "";
  width: 18px;
  height: 18px;
  background-size: contain;
  transition: transform var(--dur-normal) var(--ease-smooth);
}
.sky-legal__body .cmplz-dropdown[open] summary div::after {
  transform: rotate(180deg);
}

/* Non-cookiepolicy dropdowns (simpler 2-col) */
.sky-legal__body .cmplz-dropdown:not(.cmplz-dropdown-cookiepolicy) summary div {
  grid-template-columns: 1fr 25px;
}
.sky-legal__body .cmplz-dropdown:not(.cmplz-dropdown-cookiepolicy) summary div h3 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  border-bottom: none;
  padding: 0;
  margin: 0;
}

/* Dropdown inner content */
.sky-legal__body .cmplz-dropdown .cmplz-service-description,
.sky-legal__body .cmplz-dropdown .cmplz-sharing-data {
  width: 100%;
  padding: var(--sp-xs) var(--sp-lg);
}
.sky-legal__body .cmplz-dropdown p,
.sky-legal__body .cmplz-dropdown h4,
.sky-legal__body .cmplz-dropdown ul {
  padding: 0 var(--sp-lg);
}

/* --- Complianz cookie tables — clean Skyline palette --- */
.sky-legal__body .cookies-per-purpose {
  border: 1px solid var(--c-sand);
  background-color: var(--c-sand);
  margin: var(--sp-xs) var(--sp-lg) var(--sp-md);
}
.sky-legal__body .cookies-per-purpose div {
  background-color: var(--c-white);
  padding: var(--sp-xs) var(--sp-md);
}
.sky-legal__body .cookies-per-purpose .name-header,
.sky-legal__body .cookies-per-purpose .retention-header,
.sky-legal__body .cookies-per-purpose .function-header {
  background-color: var(--c-cream);
  font-weight: 500;
  color: var(--c-navy);
}
.sky-legal__body .cookies-per-purpose h5 {
  margin: 0;
  font-size: var(--text-sm2);
}

/* --- Complianz consent categories (7.1 manage settings) --- */
.sky-legal__body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories {
  margin-top: var(--sp-md);
}
.sky-legal__body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
  background-color: var(--c-cream);
}
.sky-legal__body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
  background-color: var(--c-cream);
  padding: var(--sp-xs) var(--sp-md);
}
.sky-legal__body #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header h2 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  text-transform: none;
  margin: 0;
  padding: 0;
  border: none;
}

/* =============================================================================
   COMPONENT: Contact Form — CF7 visual parity
   Overrides CF7 defaults so the form matches the original Skyline design.
   ============================================================================= */

/* Wrapper: fill available flex space */
.sky-cf7-wrap .wpcf7 { width: 100%; }

/* Form: replicate the original flex column + 40px gap */
.sky-cf7-wrap .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* CF7 control wrapper: transparent, block-level */
.sky-cf7-wrap .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  position: relative;
}

/* ── Inputs (text, email, tel) ── */
.sky-cf7-input,
.sky-cf7-wrap .wpcf7-form-control.sky-cf7-input {
  background-color: transparent;
  border: 0;
  border-bottom: 0.75px solid var(--c-sky);
  border-radius: 0;
  outline: none;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--c-dark);
  padding: 0 0 4px;
  -webkit-appearance: none;
  appearance: none;
}

/* ── Textarea ── */
.sky-cf7-textarea,
.sky-cf7-wrap .wpcf7-form-control.sky-cf7-textarea {
  background-color: transparent;
  border: 0;
  border-bottom: 0.75px solid var(--c-sky);
  border-radius: 0;
  outline: none;
  resize: none;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--c-dark);
  min-height: 144px;
  -webkit-appearance: none;
  appearance: none;
}

/* ── Submit button ── */
.sky-cf7-submit,
.sky-cf7-wrap .wpcf7-form-control.wpcf7-submit {
  align-self: flex-start;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 32px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  padding: 0;
  color: var(--c-dark);
  width: fit-content;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0% 100%;
  padding-bottom: 3px;
  transition: opacity var(--dur-fast) var(--ease-smooth);
  -webkit-appearance: none;
  appearance: none;
}
.sky-cf7-submit:hover,
.sky-cf7-wrap .wpcf7-form-control.wpcf7-submit:hover {
  opacity: 0.7;
  animation: skyland-underline-sweep 0.6s var(--ease-smooth) forwards;
}

/* ── Labels ── */
.sky-cf7-wrap label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--c-dark);
}

/* ── Acceptance (consentimiento de privacidad) ── */
.sky-cf7-wrap .wpcf7-acceptance input[type='checkbox'] {
  margin-inline-end: 10px;
  accent-color: var(--c-dark);
}

/* ── Select (Actividad de la empresa): chevron del theme (pico abajo) a la derecha ── */
.sky-cf7-wrap select.wpcf7-form-control.sky-cf7-input {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 11 7.28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 0.5L5.5 6.5L10.5 0.5' stroke='%231B1B1B' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 10px 7px;
  padding-inline-end: 24px;
  cursor: pointer;
}

/* ── Fila compacta del select: label a la izquierda + valor alineado a la derecha,
      sobre una misma línea inferior continua (patrón spec-row del producto).
      OJO: wpautop envuelve el contenido en <p> con <br> — el flex vive en ese <p>. ── */
.sky-cf7-wrap .sky-cf7-selectrow > p {
  display: flex;
  align-items: baseline;
  width: 100%;
  margin: 0;
}
.sky-cf7-wrap .sky-cf7-selectrow br {
  display: none;
}
.sky-cf7-wrap .sky-cf7-selectrow label {
  border-bottom: 0.75px solid var(--c-sky);
  padding-bottom: 4px;
  padding-inline-end: 24px;
  white-space: nowrap;
  cursor: pointer;
}
.sky-cf7-wrap .sky-cf7-selectrow .wpcf7-form-control-wrap {
  flex: 1 1 0%;
  min-width: 0;
}
.sky-cf7-wrap .sky-cf7-selectrow select.wpcf7-form-control.sky-cf7-input {
  font-size: 14px;
  text-align: right;
  text-align-last: right;
}

/* ── Honeypot: su <p> de wpautop es un flex item del form (gap 40px) → hueco doble. Ocultarlo (los hidden inputs se envían igual). ── */
.sky-cf7-wrap .wpcf7-form > p:has([class*='honeypot-']) {
  display: none;
}

/* ── Validation: invalid field border ── */
.sky-cf7-wrap .wpcf7-not-valid {
  border-bottom-color: #c45c5c;
}

/* ── Validation: error tip text ── */
.sky-cf7-wrap .wpcf7-not-valid-tip {
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  color: #c45c5c;
  margin-top: 4px;
}

/* ── Response output (success / error message) ── */
.sky-cf7-wrap .wpcf7-response-output {
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
  margin: -16px 0 0;
  padding: 0;
  border: none;
  transition: opacity 0.5s ease;
}
.sky-cf7-wrap .wpcf7-form.sent .wpcf7-response-output {
  color: var(--c-dark);
}
.sky-cf7-wrap .wpcf7-form.invalid .wpcf7-response-output,
.sky-cf7-wrap .wpcf7-form.failed .wpcf7-response-output,
.sky-cf7-wrap .wpcf7-form.aborted .wpcf7-response-output {
  color: #c45c5c;
}

/* ── Spinner: hide CF7 default, submitting state dims button ── */
.sky-cf7-wrap .wpcf7-spinner { display: none; }
.sky-cf7-wrap .wpcf7-form.submitting .wpcf7-submit {
  opacity: 0.4;
  pointer-events: none;
}