/* Extracted from index.html inline <style> block — splash screen, about-section image rotator, and scroll-reveal animation classes. Moved here so it's cached by the browser across visits instead of being re-downloaded inside the HTML document every time. */
  /* Smooth scrolling handled by custom eased JS */
  html { scroll-behavior: auto; }

  /* ── Scroll animation base classes (slower, silkier) ── */
  .sa-left{opacity:0;transform:translateX(-65px);transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
  .sa-right{opacity:0;transform:translateX(65px);transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
  .sa-up{opacity:0;transform:translateY(55px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
  .sa-zoom{opacity:0;transform:scale(.92);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
  .sa-show{opacity:1!important;transform:none!important}
  .sa-d1{transition-delay:.12s}.sa-d2{transition-delay:.22s}.sa-d3{transition-delay:.34s}
  .sa-d4{transition-delay:.46s}.sa-d5{transition-delay:.58s}.sa-d6{transition-delay:.70s}

  /* Scroll progress bar */
  #sa-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,#b4975a,#d4af37,#f3e5ab);z-index:999998;pointer-events:none;transition:width .1s linear}

  /* About section header */
  .about-section-header{text-align:center;margin-bottom:50px}
  .about-eyebrow{display:inline-block;font-size:11px;letter-spacing:5px;text-transform:uppercase;color:#d4af37;font-weight:700;margin-bottom:12px}
  .about-eyebrow::before,.about-eyebrow::after{content:'';display:inline-block;width:30px;height:1px;background:#d4af37;vertical-align:middle;margin:0 10px;opacity:.6}
  .about-typed-title{font-family:'Cinzel',serif;font-size:46px;color:#111827;line-height:1.2;display:block;min-height:1.3em}
  .about-typed-title::after{content:'';display:none}

  /* About main heading — Cormorant Garamond for an editorial luxury feel */
  .about-main-heading {
    font-family: 'Cormorant Garamond', 'Cinzel', serif !important;
    font-size: 36px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 18px !important;
  }
  @media(max-width:768px){ .about-main-heading { font-size: 28px !important; } }
  @media(max-width:480px){ .about-main-heading { font-size: 23px !important; } }

  /* ── About Image Rotator — Physical Deck of Cards ── */
  /*
     Layout:  The rotator wrapper is RELATIVE positioned with overflow:visible
     so the "peeking" cards behind are actually visible as physical layers.
     Each .air-slide is absolutely positioned stacked at center.
     Cards behind the front are offset + rotated so they peek out like a deck.
  */
  /* ══════════════════════════════════════════
     ABOUT IMAGE ROTATOR — Bottom-to-Top Sequence
     One clipped card at a time. No image overlap.
     All four images rise smoothly one by one.
  ══════════════════════════════════════════ */
  .about-container-split {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr) !important;
    align-items: center;
    gap: 54px;
  }
  .about-media {
    width: 100%;
    min-width: 0;
  }
  .about-container-split .about-content {
    max-width: 680px;
  }
  .about-image-rotator {
    position: relative;
    width: 100%;
    height: 430px;
    overflow: hidden !important;
    isolation: isolate;
    border-radius: 18px;
    margin-bottom: 0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.13);
    background: #0f172a;
  }

  .air-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 110px, 0) scale(0.985);
    transition:
      opacity .85s cubic-bezier(.22,1,.36,1),
      transform 1.55s cubic-bezier(.19,1,.22,1);
    z-index: 1;
    pointer-events: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  .air-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.025);
    transition: transform 2.4s cubic-bezier(.22,1,.36,1);
  }

  .air-slide.deck-2,
  .air-slide.deck-3 {
    opacity: 0;
    transform: translate3d(0, 110px, 0) scale(0.985);
  }

  .air-slide--active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    z-index: 10;
    pointer-events: auto;
  }
  .air-slide--active img {
    transform: scale(1);
  }

  .air-slide--leaving {
    opacity: 0;
    transform: translate3d(0, -76px, 0) scale(0.985);
    z-index: 9;
    pointer-events: none;
    transition:
      opacity .7s cubic-bezier(.4,0,.2,1),
      transform 1.18s cubic-bezier(.4,0,.2,1);
  }

  /* ── Navigation dots ── */
  .air-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 20;
  }
  .air-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: 1.5px solid rgba(255,255,255,0.7);
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
  }
  .air-dot--active {
    background: #d4af37;
    border-color: #d4af37;
    transform: scale(1.4);
  }

  /* Reduced motion */

  /* ═══════════════════════════════
     FIRST-VISIT SPLASH / LOADING SCREEN
  ═══════════════════════════════ */
  #grSplashScreen {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.7s cubic-bezier(.22,1,.36,1), visibility 0.7s;
  }
  #grSplashScreen.gr-splash-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .gr-splash-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
    width: auto;
    margin: 0;
    padding: 0;
    animation: grSplashFadeIn 0.6s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes grSplashFadeIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .gr-splash-logo {
    width: min(72vw, 520px);
    height: auto;
    max-height: 180px;
    object-fit: contain;
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    filter: brightness(1.03);
  }
  .gr-splash-tagline {
    font-family: 'Cinzel', serif;
    font-size: clamp(12px, 2.4vw, 15px);
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #d4af37;
    margin: 2px 0 0;
    opacity: 0.95;
    text-align: center;
  }
  /* Elegant 4-dot spinner */
  .gr-splash-spinner {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 2px;
  }
  .gr-splash-spinner span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d4af37;
    animation: grDotPulse 1.3s ease-in-out infinite;
  }
  .gr-splash-spinner span:nth-child(1) { animation-delay: 0s; }
  .gr-splash-spinner span:nth-child(2) { animation-delay: 0.18s; }
  .gr-splash-spinner span:nth-child(3) { animation-delay: 0.36s; }
  .gr-splash-spinner span:nth-child(4) { animation-delay: 0.54s; }
  @keyframes grDotPulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.35; }
    40%            { transform: scale(1.1); opacity: 1; }
  }

    @media(prefers-reduced-motion:reduce){
    .sa-left,.sa-right,.sa-up,.sa-zoom{opacity:1!important;transform:none!important;transition:none!important}
    .air-slide{transition:none!important}
  }
  /* ═══════════════════════════════════════
     FULLY RESPONSIVE — ALL BREAKPOINTS
  ═══════════════════════════════════════ */

  .about-container:has(.about-content-full) {
    grid-template-columns: minmax(0, 920px) !important;
    justify-content: center;
  }
  .about-content-full {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
  }
  .about-content-full .about-metrics-grid {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  @supports not selector(:has(*)) {
    .about-content-full {
      grid-column: 1 / -1;
      max-width: 920px;
      margin: 0 auto;
      text-align: center;
    }
  }

  /* ── 1024px: compress about grid ── */
  @media(max-width:1024px){
    #about { padding: 60px 4% 35px; }
    .about-container { gap: 32px; }
    .about-content h3 { font-size: 30px; }
    .about-image-rotator { height: 340px; }
    .about-typed-title { font-size: 38px; }
  }

  /* ── 900px: single-column about ── */
  @media(max-width:900px){
    #about { padding: 50px 5% 30px; }
    .about-container {
      grid-template-columns: 1fr !important;
      gap: 36px !important;
    }
    .about-image-rotator { width: 100%; max-width: 540px; height: 350px; margin: 0 auto; }
    .about-metrics-grid { grid-template-columns: repeat(3,1fr); }
    .about-content h3 { font-size: 28px; }
    .er-cards-row { grid-template-columns: 1fr 1fr; gap: 20px; }
  }

  /* ── 768px: tablet portrait ── */
  @media(max-width:768px){
    #about { padding: 40px 5% 28px; }
    .about-section-header { margin-bottom: 30px; }
    .about-typed-title { font-size: 30px; }
    .about-tagline { font-size: 12px; letter-spacing: 3px; }
    .about-content h3 { font-size: 24px; }
    .about-content .accent-lead { font-size: 15px; }
    .about-content p { font-size: 14px; }
    .about-image-rotator { height: 300px; max-width: 100%; border-radius: 14px; }
    .about-metrics-grid { grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; padding-top: 18px; }
    .metric-number { font-size: 20px; }
    .metric-label { font-size: 10px; }
  }

  /* ── 680px: scroll animation soften ── */
  @media(max-width:680px){
    .sa-left { transform: translateX(-30px); }
    .sa-right { transform: translateX(30px); }
    .sa-up { transform: translateY(30px); }
    .about-typed-title { font-size: 26px; }
    .about-section-header { padding: 0 4%; }
  }

  /* ── 640px: explore regions single col ── */
  @media(max-width:640px){
    .er-cards-row { grid-template-columns: 1fr; gap: 16px; }
    .er-card { flex-direction: row; height: auto; min-height: 140px; }
    .er-img-wrap { width: 38%; min-height: 140px; flex-shrink: 0; border-radius: 14px 0 0 14px; }
    .er-content { padding: 14px 16px; }
    .er-name { font-size: 1.1rem; }
    .er-eyebrow { font-size: 0.72rem; }
    .er-desc { font-size: 0.8rem; }
  }

  /* ── 600px: large phone ── */
  @media(max-width:600px){
    #about { padding: 32px 4% 22px; }
    .about-content h3 { font-size: 21px; }
    .about-content .accent-lead { font-size: 14px; }
    .about-content p { font-size: 13.5px; }
    .about-image-rotator { height: 270px; border-radius: 13px; }
    .about-metrics-grid { gap: 8px; }
    .metric-card { padding: 4px 8px; }
    .metric-number { font-size: 18px; }
    .metric-label { font-size: 9.5px; letter-spacing: 0.5px; }
  }

  /* ── 480px: phone ── */
  @media(max-width:480px){
    #about { padding: 28px 4% 18px; }
    .about-typed-title { font-size: 22px; min-height: auto; }
    .about-section-header { margin-bottom: 22px; }
    .about-content h3 { font-size: 19px; line-height: 1.4; }
    .about-image-rotator { height: 240px; margin-bottom: 12px; border-radius: 12px; }
    /* deck cards hidden at all sizes — no overrides needed */
    .about-metrics-grid { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .metric-number { font-size: 16px; }
    .metric-label { font-size: 9px; }
    .air-dots { bottom: -14px; gap: 8px; }
    .air-dot { width: 7px; height: 7px; }
    .er-card { flex-direction: column; height: auto; }
    .er-img-wrap { width: 100%; min-height: 180px; border-radius: 14px 14px 0 0; }
    .er-content { padding: 13px 15px; }
  }

  /* ── 380px: very small phone ── */
  @media(max-width:380px){
    .about-image-rotator { height: 210px; }
    .about-content h3 { font-size: 17px; }
    .about-typed-title { font-size: 19px; }
    .about-metrics-grid { grid-template-columns: 1fr 1fr; }
  }
