/* iwave Wavekart — shared luxury system */

html { overflow-x: clip; }
body { overflow-x: hidden; max-width: 100%; }

:root {
  --ivory: #F4F1EC;
  --ivory-2: #EBE6DD;
  --ink: #0E0E0C;
  --ink-2: #1A1A17;
  --warm-grey: #8A857C;
  --warm-grey-2: #C8C2B6;
  --hairline: rgba(14,14,12,.12);
  --hairline-light: rgba(244,241,236,.16);
  --accent-brass: #9B7E4A;
  --accent-bronze: #6E5A3A;
}

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600&family=Cormorant+Garamond:wght@300;400;500&family=JetBrains+Mono:wght@300;400&display=swap');

.font-display { font-family: 'Manrope', system-ui, sans-serif; font-weight: 200; letter-spacing: -0.02em; }
.font-body    { font-family: 'Manrope', system-ui, sans-serif; font-weight: 300; }
.font-serif   { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; }
.font-mono    { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 300; }

.tracked-xl { letter-spacing: 0.42em; text-transform: uppercase; }
.tracked-lg { letter-spacing: 0.32em; text-transform: uppercase; }
.tracked-md { letter-spacing: 0.22em; text-transform: uppercase; }
.tracked-sm { letter-spacing: 0.14em; text-transform: uppercase; }

* { box-sizing: border-box; }

/* Placeholder pattern for any "image goes here" panels */
.iw-placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 18px,
      rgba(0,0,0,0.04) 18px,
      rgba(0,0,0,0.04) 19px
    ),
    linear-gradient(180deg, #e9e3d8, #d8d1c2);
  position: relative;
  overflow: hidden;
}
.iw-placeholder.dark {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 18px,
      rgba(255,255,255,0.04) 18px,
      rgba(255,255,255,0.04) 19px
    ),
    linear-gradient(180deg, #1a1a17, #0e0e0c);
}
.iw-placeholder .iw-placeholder-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14,14,12,.55);
}
.iw-placeholder.dark .iw-placeholder-label { color: rgba(244,241,236,.55); }

/* The "video" hero — animated water lines instead of an actual video */
.iw-water {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.iw-water::before, .iw-water::after {
  content: '';
  position: absolute;
  inset: -20% -10% -10% -10%;
  background:
    radial-gradient(ellipse 60% 40% at 30% 70%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(ellipse 80% 50% at 70% 30%, rgba(155,126,74,.18), transparent 65%),
    linear-gradient(180deg, #0a1620 0%, #08111a 50%, #060c14 100%);
  z-index: -2;
}
.iw-water::after {
  background:
    repeating-linear-gradient(
      100deg,
      transparent 0 8px,
      rgba(255,255,255,.04) 8px 9px,
      transparent 9px 24px
    );
  z-index: -1;
  animation: iw-wave 12s linear infinite;
}
@keyframes iw-wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-40px); }
}

/* The kart silhouette — drawn with CSS, no SVG complexity */
.iw-kart {
  --kart-color: #d9d4c8;
  --kart-shadow: rgba(0,0,0,.4);
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iw-kart-body {
  position: relative;
  width: 62%;
  height: 38%;
  background: var(--kart-color);
  border-radius: 50% 50% 14% 14% / 60% 60% 18% 18%;
  box-shadow:
    inset 0 -8px 20px rgba(0,0,0,.18),
    inset 0 4px 8px rgba(255,255,255,.4),
    0 30px 60px -20px var(--kart-shadow);
  transform: skewX(-3deg);
}
.iw-kart-body::before {
  /* cockpit */
  content: '';
  position: absolute;
  top: 18%;
  left: 30%;
  width: 40%;
  height: 50%;
  background: var(--ink);
  border-radius: 50% 50% 30% 30% / 80% 80% 30% 30%;
  opacity: .85;
}
.iw-kart-body::after {
  /* spray under */
  content: '';
  position: absolute;
  bottom: -22%;
  left: -10%;
  right: -10%;
  height: 26%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.4), transparent 70%);
  filter: blur(3px);
}

/* Smooth scrolling for the inner artboard frames */
.iw-frame {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.18) transparent;
}
.iw-frame::-webkit-scrollbar { width: 6px; }
.iw-frame::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }

/* Hairline rule */
.iw-rule { height: 1px; background: var(--hairline); border: 0; }
.iw-rule.light { background: var(--hairline-light); }

/* ── MOBILE ─────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Prevent any element from busting out of viewport */
  * { min-width: 0; }
  img, video, iframe { max-width: 100%; }

  /* Feature cards: compact photo and padding on mobile */
  [style*="grid-template-columns:repeat(3,1fr)"] article { padding: 20px !important; min-height: 0 !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] article [style*="aspect-ratio:4/3"] { aspect-ratio: 16/9 !important; margin-bottom: 16px !important; }

  /* FAQ / Q&A */
  .faq-q { padding: 16px 0 !important; }
  .faq-q span[style*="font-size:20px"] { font-size: 15px !important; }
  .faq-a { font-size: 13px !important; line-height: 1.65 !important; }

  /* Nav */
  .iw-nav-logo { height: 24px !important; }

  /* Section horizontal padding — overrides all inline padding:Xpx 60px */
  section { padding-left: 20px !important; padding-right: 20px !important; }

  /* ── Grid overrides via attribute selectors ── */
  /* 3-col → 1-col */
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  /* 4-col → 2-col */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  /* 5-col → 2-col */
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  /* 2-col equal → 1-col */
  [style*="grid-template-columns:1fr 1fr"]       { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 2fr"]       { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:2fr 1fr"]       { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.2fr 1fr"]     { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1.4fr"]     { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1.4fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* Fixed-width sidebar → full width */
  [style*="grid-template-columns:260px 1fr"]     { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:220px 1fr"]     { grid-template-columns: 1fr !important; }
  /* Footer 4-col → 2-col (handled by class) */
  .iw-footer { grid-template-columns: 1fr 1fr !important; gap: 24px !important; padding: 32px 20px 20px !important; }
  .iw-footer-bottom { padding: 12px 20px 28px !important; }

  /* Lifestyle GIFs: 2-col with shorter aspect ratio */
  .iw-lifestyle-grid { grid-template-columns: repeat(2,1fr) !important; }
  .iw-lifestyle-grid [style*="aspect-ratio:4/5"] { aspect-ratio: 4/3 !important; }

  /* Spec strip: wrap cleanly, hide separator dots */
  .iw-spec-strip { flex-wrap: wrap !important; gap: 6px 16px !important; padding: 14px 20px !important; justify-content: center !important; }
  .iw-spec-strip span:nth-child(even) { display: none !important; }

  /* 2-col equal → 1-col (repeat variant) */
  [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }

  /* Large stat numbers → smaller on mobile */
  [style*="font-size:72px"] { font-size: 42px !important; }
  [style*="font-size:80px"] { font-size: 42px !important; }

  /* Section vertical padding — cap tall desktop sections */
  section[style*="padding:120px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  section[style*="padding:100px"] { padding-top: 52px !important; padding-bottom: 52px !important; }

  /* Spec table: 2-col stat cards instead of single-column rows */
  .iw-spec-dl { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .iw-spec-dl > div {
    display: flex !important; flex-direction: column !important; gap: 6px !important;
    padding: 14px 10px !important; border-top: 1px solid var(--hairline) !important;
    border-left: none !important;
  }
  .iw-spec-dl > div:nth-child(even) { border-left: 1px solid var(--hairline) !important; }
  .iw-spec-dl dt { font-size: 10px !important; color: var(--warm-grey) !important; letter-spacing: 0.04em !important; }
  .iw-spec-dl dd { font-size: 13px !important; color: var(--ink) !important; font-weight: 400 !important; margin: 0 !important; }

  /* Compare table: fit full 3-col on screen, no scroll */
  .iw-compare-table { overflow-x: visible !important; }
  .iw-compare-table [style*="grid-template-columns:1.4fr 1fr 1fr"] {
    grid-template-columns: 1fr 1.1fr 1.1fr !important;
    min-width: 0 !important;
    column-gap: 6px !important;
  }
  .iw-compare-table [style*="font-size:14px"] { font-size: 11px !important; padding: 10px 0 !important; }
  .iw-compare-table [style*="font-size:13px"] { font-size: 11px !important; }

  /* ── Collapsed grid border fixes ──────────────────────── */
  /* 4-col → 2-col: remove stray left borders, normalize inline padding */
  [style*="grid-template-columns:repeat(4,1fr)"] > div { border-left: none !important; padding-left: 0 !important; padding-right: 0 !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(even) { border-left: 1px solid var(--hairline) !important; padding-left: 16px !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(n+3) { border-top: 1px solid var(--hairline) !important; }

  /* 5-col → 2-col: same pattern, hairline-light for dark-bg sections */
  [style*="grid-template-columns:repeat(5,1fr)"] > div { border-left: none !important; }
  [style*="grid-template-columns:repeat(5,1fr)"] > div:nth-child(even) { border-left: 1px solid var(--hairline-light) !important; }
  [style*="grid-template-columns:repeat(5,1fr)"] > div:nth-child(n+3) { border-top: 1px solid var(--hairline-light) !important; }
  /* 5-item orphan row: close off item 4 bottom and item 5 right */
  [style*="grid-template-columns:repeat(5,1fr)"] > div:nth-child(4) { border-bottom: 1px solid var(--hairline-light) !important; }
  [style*="grid-template-columns:repeat(5,1fr)"] > div:nth-child(5) { border-right: 1px solid var(--hairline-light) !important; }

  /* 3-col → 1-col: remove left borders, add top separator between stacked items */
  [style*="grid-template-columns:repeat(3,1fr)"] > div { border-left: none !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] > div + div { border-top: 1px solid var(--hairline) !important; }

  /* Product/about by-numbers h2 gap */
  h2[style*="margin:0 0 80px"] { margin-bottom: 36px !important; }

  /* Header inner */
  .iw-header-inner { padding: 10px 16px !important; }
  .iw-nav          { display: none !important; }
  .iw-nav-ig       { display: none !important; }
}

/* Number reveal */
@keyframes iw-fade-up {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.iw-fade-in { animation: iw-fade-up .9s cubic-bezier(.2,.7,.3,1) both; }