:root{
    --ocean:#0091D1;
    --ocean-deep:#0079AD;
    --sky:#5BC2EE;
    --sky-light:#CFEFFC;
    --cream:#FAF6EF;
    --cream-2:#F3EEE3;
    --navy:#123653;
    --navy-deep:#0B2436;
    --ink:#16344D;
    --white:#FFFFFF;
    --radius:14px;
    --radius-sm:8px;
    --maxw:1240px;
    --ease:cubic-bezier(.22,1,.36,1);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Montserrat',sans-serif;
    color:var(--navy);
    background:var(--cream);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Poppins',sans-serif;
    margin:0;
    letter-spacing:-0.01em;
  }
  p{line-height:1.7;margin:0 0 1em;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  ul{margin:0;padding:0;list-style:none;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;}
  .wrap{max-width:var(--maxw);margin:0 inline auto;padding-inline:24px;margin-inline:auto;}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  }

  /* ---------- Header ---------- */
  header.site{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(250,246,239,.0);
    transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
  }
  header.site.solid{
    background:rgba(250,246,239,.92);
    backdrop-filter:blur(10px);
    box-shadow:0 1px 0 rgba(18,54,83,.08);
  }
  .topbar{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:14px 24px;max-width:var(--maxw);margin:0 auto;
  }
  .brand{display:flex;align-items:center;gap:10px;}
  .brand svg{height:42px;width:auto;display:block;}
  .brand .logo-light path{fill:var(--white);}
  .brand .logo-dark path{fill:var(--ocean);}
  .brand-name{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.15rem;color:inherit;}
  nav.main{display:flex;align-items:center;gap:28px;}
  nav.main a{
    font-size:.92rem;font-weight:600;letter-spacing:.01em;position:relative;padding:6px 0;
    color:inherit;opacity:.92;
  }
  nav.main a::after{
    content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:currentColor;
    transition:width .3s var(--ease);
  }
  .mobile-only-link{display:none;}
  .nav-home-only{display:none;}
  nav.main a:hover::after, nav.main a.active::after{width:100%;}
  /* Header not yet solid: every page has a dark banner or scene directly
     under it (home's cinematic scenes, or .page-header's navy gradient on
     the other pages), so force the desktop nav items white to read against
     it. Scoped to desktop width only so it can never outrank
     nav.main.mobileOpen a's navy text below. */
  @media (min-width:981px){
    header.site:not(.solid) nav.main a{color:var(--white);}
  }
  .util{display:flex;align-items:center;gap:14px;}
  .lang-switch{
    display:flex;align-items:center;gap:2px;font-size:.76rem;font-weight:700;
    background:rgba(18,54,83,.07);border-radius:999px;padding:3px;
  }
  header.site:not(.solid) .lang-switch{background:rgba(255,255,255,.18);}
  .lang-switch span{
    opacity:.65;cursor:pointer;padding:6px 10px;border-radius:999px;
    transition:background .25s var(--ease), opacity .25s var(--ease), color .25s var(--ease);
  }
  .lang-switch span:hover{opacity:1;}
  .lang-switch span.active{opacity:1;background:var(--ocean);color:var(--white);}
  header.site:not(.solid) .lang-switch span.active{background:var(--white);color:var(--ocean);}
  .lang-switch span.sep{display:none;}
  .quick-contact{display:flex;align-items:center;gap:10px;}
  .icon-btn{
    width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(18,54,83,.06);transition:background .25s var(--ease), transform .25s var(--ease);
  }
  header.site:not(.solid) .icon-btn{background:rgba(255,255,255,.15);}
  .icon-btn:hover{transform:translateY(-2px);}
  .icon-btn.whatsapp{background:#25D366;}
  .icon-btn svg{width:16px;height:16px;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:12px 22px;border-radius:999px;font-weight:700;font-size:.88rem;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  }
  .btn-primary{background:var(--ocean);color:var(--white);box-shadow:0 8px 20px rgba(0,145,209,.28);}
  .btn-primary:hover{transform:translateY(-2px);background:var(--ocean-deep);box-shadow:0 12px 26px rgba(0,145,209,.36);}
  .btn-ghost{border:1.5px solid currentColor;}
  .btn-ghost:hover{background:rgba(0,0,0,.04);}
  .btn-light{background:var(--white);color:var(--ocean);}
  .btn-light:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.18);}
  .hamburger{display:none;}

  /* ---------- Pages ---------- */
  .page{display:none;}
  .page.active{display:block;}

  /* ---------- Shared layout ---------- */
  .hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

  section{padding:120px 0;}
  .section-cream{background:var(--cream);}
  /* Used only for the stats section right after the scroll story. Its
     content (one row of numbers+labels, no heading) is much shorter than
     neighboring sections' (e.g. Trusted By's eyebrow+h2+p+logo grid), so
     the shared section{padding:120px 0} alone left it rendering far
     thinner than the rest of the page — extra padding gives it comparable
     visual weight without changing the stats themselves.
     Padding is symmetric (top===bottom) so the content sits vertically
     centered rather than top-heavy — an earlier asymmetric version (small
     top/generous bottom) was tried to shorten the scroll delay before the
     numbers appear after the frozen story frame, but js/pages/home.js's
     FADE_LEAD_PX already makes that frame fade out and hide well before
     this section is reached regardless of padding, so the asymmetry was
     an unnecessary trade against visual balance and has been reverted.
     115px 0 keeps the same total height (measured: 70+160 before ==
     115+115 after == 345px) while centering the content; the ::before
     top-edge fade is capped at the same height as the top padding so it
     stays confined to the empty margin above the numbers. */
  .section-navy{
    background:linear-gradient(160deg,var(--navy) 0%, var(--navy-deep) 100%);
    color:var(--white);position:relative;overflow:hidden;
    padding:115px 0;
  }
  .section-navy::before{
    content:'';position:absolute;top:0;left:0;right:0;height:115px;
    background:linear-gradient(to bottom,rgba(0,10,28,.55),transparent);
    pointer-events:none;
  }
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.in{opacity:1;transform:translateY(0);}

  .eyebrow{
    font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.76rem;
    color:var(--ocean);margin-bottom:14px;
  }
  .section-navy .eyebrow{color:var(--sky-light);}
  .section-head{max-width:680px;margin:0 auto 56px;text-align:center;}
  .section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:700;margin-bottom:18px;}
  .section-head p{font-size:1.05rem;color:var(--ink);opacity:.78;}
  .section-navy .section-head p{color:rgba(255,255,255,.78);}

  /* stats */
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center;}
  .stat{padding:8px;}
  .stat .num{font-family:'Poppins';font-weight:800;font-size:clamp(2.2rem,4vw,3.2rem);color:var(--ocean);}
  .stat .lbl{font-size:.85rem;color:rgba(255,255,255,.75);margin-top:6px;font-weight:600;}

  /* trusted by */
  .logo-grid{
    display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center;
  }
  .logo-chip{
    height:84px;border-radius:var(--radius-sm);background:var(--white);border:1px solid rgba(18,54,83,.08);
    display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;
    font-family:'Poppins';font-weight:600;font-size:.82rem;color:var(--navy);opacity:.78;
    transition:opacity .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .logo-chip:hover{opacity:1;transform:translateY(-3px);box-shadow:0 10px 24px rgba(18,54,83,.1);}
  .logo-chip img{max-height:40px;max-width:100%;width:auto;object-fit:contain;}
  .trustnote{text-align:center;margin-top:18px;font-size:.78rem;color:var(--ink);opacity:.55;}
  .view-all-wrap{text-align:center;margin-top:38px;}

  /* audience fork */
  .fork{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
  .fork-card{
    position:relative;border-radius:20px;overflow:hidden;min-height:340px;
    display:flex;flex-direction:column;justify-content:flex-end;padding:40px;color:var(--white);
    cursor:pointer;transition:transform .4s var(--ease);
  }
  .fork-card:hover{transform:translateY(-6px);}
  .fork-card.business{background:linear-gradient(160deg,#0091D1 0%, #0B2436 120%);}
  .fork-card.shop{background:linear-gradient(160deg,#5BC2EE 0%, #0079AD 120%);}
  .fork-card .tag{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.8;margin-bottom:10px;}
  .fork-card h3{font-size:1.9rem;margin-bottom:10px;}
  .fork-card p{opacity:.85;margin-bottom:22px;max-width:34ch;}
  .fork-card .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;}
  .fork-card .go svg{width:16px;height:16px;transition:transform .3s var(--ease);}
  .fork-card:hover .go svg{transform:translateX(4px);}

  /* ================= GENERIC FUNCTIONAL PAGE ================= */
  .page-header{
    padding:170px 0 70px;background:linear-gradient(160deg,var(--navy) 0%, var(--ocean-deep) 130%);color:var(--white);
  }
  .breadcrumb{font-size:.78rem;opacity:.7;margin-bottom:18px;font-weight:600;}
  .page-header h1{font-size:clamp(2.1rem,4vw,3rem);max-width:18ch;margin-bottom:16px;}
  .page-header p{max-width:56ch;opacity:.85;font-size:1.05rem;}

  .grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
  .card{
    background:var(--white);border-radius:var(--radius);padding:32px 26px;box-shadow:0 10px 30px rgba(18,54,83,.06);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(18,54,83,.1);}
  .card .ico{
    width:46px;height:46px;border-radius:12px;background:var(--sky-light);color:var(--ocean-deep);
    display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  }
  .card h4{font-size:1.05rem;margin-bottom:10px;}
  .card p{font-size:.88rem;color:var(--ink);opacity:.75;margin:0;}

  .proof-strip{display:flex;gap:60px;flex-wrap:wrap;justify-content:center;align-items:center;padding:40px 0;border-top:1px solid rgba(18,54,83,.08);border-bottom:1px solid rgba(18,54,83,.08);}
  .proof-strip .p-stat{text-align:center;}
  .proof-strip .p-stat .num{font-family:'Poppins';font-weight:800;font-size:1.9rem;color:var(--ocean);}
  .proof-strip .p-stat .lbl{font-size:.78rem;opacity:.6;font-weight:600;}

  .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
  .split .visual{
    border-radius:20px;min-height:340px;background:linear-gradient(135deg,var(--sky) 0%, var(--ocean) 100%);
    display:flex;align-items:center;justify-content:center;color:var(--white);font-family:'Poppins';font-weight:600;
    box-shadow:0 20px 50px rgba(0,145,209,.2);
  }
  .checklist{margin-top:22px;}
  .checklist li{display:flex;gap:12px;margin-bottom:14px;font-size:.92rem;align-items:flex-start;}
  .checklist li svg{flex:0 0 18px;margin-top:3px;color:var(--ocean);}

  .cta-banner{
    background:linear-gradient(120deg,var(--ocean) 0%, var(--ocean-deep) 100%);border-radius:24px;
    padding:60px;display:flex;align-items:center;justify-content:space-between;gap:30px;color:var(--white);flex-wrap:wrap;
  }
  .cta-banner h3{font-size:1.7rem;max-width:22ch;margin-bottom:10px;}
  .cta-banner p{opacity:.85;margin:0;max-width:40ch;}
  .cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

  /* tabs (shop categories) */
  .tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:42px;}
  .tab{
    padding:10px 20px;border-radius:999px;font-weight:700;font-size:.85rem;
    background:var(--white);border:1.5px solid rgba(18,54,83,.12);transition:all .25s var(--ease);
  }
  .tab.active, .tab:hover{background:var(--ocean);color:var(--white);border-color:var(--ocean);}
  .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .product-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 26px rgba(18,54,83,.06);transition:transform .3s var(--ease), opacity .4s var(--ease);}
  .product-card:hover{transform:translateY(-4px);}
  .product-card.card-enter{opacity:0;transform:translateY(16px);}
  .shop-load-more-row{display:flex;justify-content:flex-end;margin-top:28px;}
  .shop-load-more-btn{color:var(--ocean);}
  .product-card .ph{height:160px;background:linear-gradient(135deg,var(--sky-light),var(--cream-2));overflow:hidden;}
  .product-card .ph img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;}
  .product-card .body{padding:18px 18px 22px;}
  .product-card .cat-tag{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ocean);margin-bottom:8px;display:block;}
  .product-card h4{font-size:.98rem;margin-bottom:6px;}
  .product-card .origin{font-size:.78rem;opacity:.55;margin-bottom:14px;}
  .product-card .price-row{display:flex;align-items:center;justify-content:space-between;}
  .product-card .price{font-family:'Poppins';font-weight:700;color:var(--navy);}
  /* Order button -> inline weight selector (reusable across every product card) */
  .order-ctrl{position:relative;display:inline-flex;align-items:center;}
  .order-ctrl .order-btn{
    font-size:.74rem;font-weight:700;color:var(--ocean);padding:0;margin:0;
    transition:opacity .18s var(--ease), transform .18s var(--ease);
  }
  .order-ctrl .order-btn.ws-hide{opacity:0;transform:scale(.85);}
  .weight-selector{
    display:none;align-items:center;gap:6px;
    opacity:0;transform:scale(.85);
    transition:opacity .22s var(--ease), transform .22s var(--ease);
  }
  .weight-selector.ws-show{display:inline-flex;}
  .weight-selector.ws-visible{opacity:1;transform:scale(1);}
  .ws-btn{
    width:22px;height:22px;flex:0 0 22px;border-radius:50%;
    background:var(--sky-light);color:var(--ocean-deep);
    display:flex;align-items:center;justify-content:center;
    font-size:.85rem;font-weight:700;line-height:1;
    transition:background .2s var(--ease), color .2s var(--ease);
  }
  .ws-btn:hover{background:var(--ocean);color:var(--white);}
  .ws-weight{font-family:'Poppins';font-weight:700;font-size:.74rem;color:var(--navy);min-width:36px;text-align:center;}
  .ws-confirm{
    width:24px;height:24px;flex:0 0 24px;border-radius:50%;
    background:var(--ocean);color:var(--white);
    display:flex;align-items:center;justify-content:center;
    transition:background .2s var(--ease), transform .2s var(--ease);
  }
  .ws-confirm:hover{background:var(--ocean-deep);transform:scale(1.08);}
  .ws-confirm svg{width:12px;height:12px;}

  /* ===== Shop cart ===== */
  .cart-fab{
    position:fixed;right:24px;bottom:24px;z-index:95;
    width:56px;height:56px;border-radius:50%;
    background:var(--ocean);color:var(--white);border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(0,145,209,.35);
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .cart-fab:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,145,209,.42);}
  .cart-fab svg{width:24px;height:24px;}
  .cart-badge{
    position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
    border-radius:999px;background:var(--navy-deep);color:var(--white);
    font-size:.7rem;font-weight:700;font-family:'Poppins',sans-serif;
    display:flex;align-items:center;justify-content:center;
    transition:transform .18s var(--ease);
  }
  .cart-badge.bump{transform:scale(1.3);}
  .cart-badge[hidden]{display:none;}

  /* Backdrop uses opacity+pointer-events (not display:none) so it's always
     continuously transitionable — no forced-reflow trick needed, unlike
     the scroll-story fade which specifically has to fade in from
     display:none. Same for the drawer below: transform is transitionable
     regardless of display, so a plain class toggle is enough. */
  .cart-backdrop{
    position:fixed;inset:0;z-index:149;background:rgba(11,36,54,.55);
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
  }
  .cart-backdrop.open{opacity:1;pointer-events:auto;}

  .cart-drawer{
    position:fixed;top:0;right:0;bottom:0;z-index:150;width:min(420px,100vw);
    background:var(--white);box-shadow:-10px 0 30px rgba(18,54,83,.18);
    display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform .35s var(--ease);
  }
  .cart-drawer.open{transform:translateX(0);}
  .cart-drawer-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 22px;border-bottom:1px solid rgba(18,54,83,.08);flex:0 0 auto;
  }
  .cart-drawer-header h3{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.1rem;color:var(--navy);}
  .cart-close-btn{
    width:36px;height:36px;border-radius:50%;border:none;background:var(--cream-2);
    color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .2s var(--ease);
  }
  .cart-close-btn:hover{background:var(--sky-light);}
  .cart-close-btn svg{width:16px;height:16px;}

  .cart-items{flex:1 1 auto;overflow-y:auto;padding:12px 22px;}
  .cart-empty{padding:60px 20px;text-align:center;color:var(--ink);opacity:.6;font-size:.9rem;}

  .cart-item{
    display:flex;align-items:center;gap:12px;padding:14px 0;
    border-bottom:1px solid rgba(18,54,83,.06);
  }
  .cart-item:last-child{border-bottom:none;}
  .cart-item-img{
    width:56px;height:56px;flex:0 0 56px;border-radius:var(--radius-sm);overflow:hidden;
    background:linear-gradient(135deg,var(--sky-light),var(--cream-2));
  }
  .cart-item-img img{width:100%;height:100%;object-fit:cover;display:block;}
  .cart-item-info{flex:1;min-width:0;}
  .cart-item-info h5{font-family:'Poppins',sans-serif;font-weight:700;font-size:.88rem;color:var(--navy);margin-bottom:3px;}
  .cart-item-weight{font-size:.78rem;color:var(--ink);opacity:.6;}
  .cart-item-remove{
    width:32px;height:32px;flex:0 0 32px;border-radius:50%;border:none;background:none;
    color:var(--ink);opacity:.5;display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:opacity .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  }
  .cart-item-remove:hover{opacity:1;background:rgba(214,69,69,.1);color:#B23B3B;}
  .cart-item-remove svg{width:16px;height:16px;}

  .cart-drawer-footer{flex:0 0 auto;padding:18px 22px;border-top:1px solid rgba(18,54,83,.08);}
  .cart-drawer-footer .btn{width:100%;justify-content:center;}

  @media(max-width:980px){
    /* Clears .sticky-cta's own fixed bottom bar (~70px + safe-area) plus a
       16px gap, same safe-area pattern .sticky-cta itself already uses. */
    .cart-fab{bottom:calc(86px + env(safe-area-inset-bottom, 0px));}
  }
  @media(prefers-reduced-motion:reduce){
    .cart-fab, .cart-badge, .cart-backdrop, .cart-drawer, .cart-close-btn, .cart-item-remove{transition:none!important;}
  }

  /* journal */
  /* .tabs/.article-grid both set an explicit `display`, which otherwise beats
     the browser's default [hidden]{display:none} rule (author styles always
     win over user-agent styles at equal specificity) — these two id-scoped
     overrides are what actually let showArticle()/backToJournal() hide them. */
  #journalTabs[hidden], #articleGrid[hidden]{display:none;}
  .article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .article-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 26px rgba(18,54,83,.06);transition:transform .3s var(--ease);}
  .article-card:hover{transform:translateY(-4px);}
  .article-card .ph{height:160px;background:linear-gradient(135deg,var(--sky-light),var(--cream-2));overflow:hidden;}
  .article-card .ph img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;}
  .article-card .body{padding:18px 18px 22px;}
  .article-card .cat-tag{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ocean);margin-bottom:8px;display:block;}
  .article-card h4{font-size:.98rem;margin-bottom:6px;}
  .article-card .origin{font-size:.78rem;opacity:.55;margin-bottom:14px;}
  .article-card .readmore{font-size:.74rem;font-weight:700;color:var(--ocean);}
  @media (max-width:980px){
    .article-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:768px){
    .article-grid{grid-template-columns:1fr;}
  }
  /* journal — full article view */
  .article-detail-wrap{max-width:760px;margin:0 auto;}
  .back-journal{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--ocean);margin-bottom:22px;}
  .back-journal:hover{color:var(--ocean-deep);}
  .article-detail .detail-hero{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,var(--sky-light),var(--cream-2));margin-bottom:22px;}
  .article-detail .detail-hero img{width:100%;height:100%;object-fit:cover;object-position:center;}
  .article-detail .cat-tag{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ocean);margin-bottom:10px;display:block;}
  .article-detail h1{font-size:clamp(1.6rem,3.2vw,2.3rem);max-width:24ch;margin-bottom:12px;}
  .article-detail .origin{font-size:.82rem;opacity:.6;margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid rgba(18,54,83,.1);}
  .article-body h2{font-size:1.32rem;margin:34px 0 14px;}
  .article-body h3{font-size:1.08rem;margin:26px 0 12px;color:var(--ocean-deep);}
  .article-body p{font-size:1rem;opacity:.88;}
  .article-body blockquote{margin:26px 0;padding:20px 24px;background:var(--cream-2);border-left:3px solid var(--ocean);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;font-size:.96rem;line-height:1.7;}
  .article-body a{color:var(--ocean);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
  .article-body a:hover{color:var(--ocean-deep);}
  @media (max-width:768px){
    .article-detail .detail-hero{aspect-ratio:4/3;}
  }

  /* careers — job cards reuse .article-card as-is (no .ph image block,
     job postings have no photos) and the detail view reuses
     .article-detail/.back-journal/.article-body wholesale; only the
     genuinely new pieces get their own rules below. Uniform-height sizing
     is scoped to #jobGrid specifically so it doesn't leak onto journal's
     own .article-card grid, which keeps its original (image-card, natural
     height) layout — only the whole-card-clickable cursor below is now
     shared between the two, since js/pages/journal.js's delegated click
     listener matches careers.js's pattern exactly. */
  #jobGrid[hidden]{display:none;}
  #jobGrid{align-items:stretch;}
  #jobGrid .article-card{display:flex;flex-direction:column;height:100%;cursor:pointer;}
  #jobGrid .article-card .body{display:flex;flex-direction:column;flex:1;}
  #jobGrid .article-card .readmore{margin-top:auto;padding-top:4px;}
  #articleGrid .article-card{cursor:pointer;}
  .job-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.78rem;opacity:.65;margin-bottom:10px;}
  .job-type-badge{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--sky-light);color:var(--ocean-deep);font-size:.68rem;font-weight:700;opacity:1;}
  .job-teaser{font-size:.84rem;opacity:.75;line-height:1.5;margin-bottom:14px;}
  .job-copy-link{color:var(--ocean);font-weight:700;font-size:inherit;text-decoration:underline;text-underline-offset:2px;background:none;border:none;padding:0;cursor:pointer;}
  .job-copy-link:hover{color:var(--ocean-deep);}
  .job-apply{margin-top:40px;padding-top:30px;border-top:1px solid rgba(18,54,83,.1);max-width:520px;}
  .job-apply h2{font-size:1.32rem;margin:0 0 18px;}

  /* contact page */
  .quickcontact{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin:-90px auto 70px;position:relative;z-index:3;max-width:var(--maxw);padding:0 24px;}
  .qc-card{background:var(--white);border-radius:var(--radius);padding:26px;box-shadow:0 16px 40px rgba(18,54,83,.12);display:flex;align-items:center;gap:16px;transition:transform .3s var(--ease);}
  .qc-card:hover{transform:translateY(-4px);}
  .qc-card.whatsapp .ico{background:#25D366;color:var(--white);}
  .qc-card .ico{width:48px;height:48px;border-radius:50%;background:var(--sky-light);color:var(--ocean-deep);display:flex;align-items:center;justify-content:center;flex:0 0 48px;}
  .qc-card h5{font-size:.95rem;margin-bottom:3px;}
  .qc-card span{font-size:.84rem;opacity:.65;}

  .store-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:70px;}
  .store-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 28px rgba(18,54,83,.06);}
  .store-map{height:200px;background:
      linear-gradient(rgba(0,145,209,.18),rgba(0,145,209,.18)),
      repeating-linear-gradient(45deg, var(--sky-light) 0 18px, var(--cream-2) 18px 36px);
    position:relative;display:flex;align-items:center;justify-content:center;}
  .store-map .pin{width:34px;height:34px;border-radius:50% 50% 50% 0;background:var(--ocean);transform:rotate(-45deg);box-shadow:0 6px 16px rgba(0,145,209,.4);}
  .store-body{padding:24px 26px;}
  .store-body h4{font-size:1.05rem;margin-bottom:6px;}
  .store-body .addr{font-weight:600;color:var(--ocean);margin-bottom:10px;display:inline-block;}
  .store-body .hours{font-size:.84rem;opacity:.65;margin-bottom:18px;}
  .social-row{display:flex;gap:14px;justify-content:center;margin-top:10px;}
  .social-row .icon-btn{width:44px;height:44px;background:var(--sky-light);color:var(--ocean-deep);}
  .social-row .icon-btn:hover{background:var(--ocean);color:var(--white);}

  /* form */
  .form-wrap{display:grid;grid-template-columns:1.3fr .9fr;gap:50px;align-items:flex-start;}
  .field{margin-bottom:18px;}
  .field label{display:block;font-size:.8rem;font-weight:700;margin-bottom:7px;color:var(--navy);}
  .field input, .field select, .field textarea{
    width:100%;padding:13px 16px;border-radius:10px;border:1.5px solid rgba(18,54,83,.15);
    font-family:'Montserrat';font-size:.92rem;background:var(--white);transition:border-color .25s;
  }
  .field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--ocean);}
  .response-note{display:flex;gap:10px;align-items:center;background:var(--sky-light);color:var(--ocean-deep);padding:12px 16px;border-radius:10px;font-size:.82rem;font-weight:600;margin-bottom:24px;}
  /* Inline post-submit feedback for the partner/contact form. Empty by
     default so it takes up no space until handlePartnerFormSubmit() fills it. */
  .form-status{margin-top:14px;padding:12px 16px;border-radius:10px;font-size:.82rem;font-weight:600;display:none;}
  .form-status:empty{display:none;}
  .form-status.success, .form-status.error{display:block;}
  .form-status.success{background:var(--sky-light);color:var(--ocean-deep);}
  .form-status.error{background:rgba(214,69,69,.12);color:#B23B3B;}
  .btn:disabled{opacity:.6;cursor:not-allowed;}
  .trust-aside{background:var(--navy);color:var(--white);border-radius:var(--radius);padding:30px;}
  .trust-aside .quote{font-style:normal;font-size:1.05rem;line-height:1.6;margin-bottom:18px;}
  .trust-aside .who{font-size:.82rem;opacity:.7;font-weight:600;}

  /* footer */
  footer.site{background:var(--navy-deep);color:rgba(255,255,255,.85);padding:clamp(50px,8vw,80px) 0 30px;}
  /* One grid: the brand block and all 5 link-column groups (Business,
     Shop, Company, Contact, Legal) are direct items of THIS grid, not
     two nested grids — .foot-links below is display:contents, so its
     children count as .foot-grid's own items for layout purposes even
     though they're still nested one level in markup.
     Column width is capped at 150px (not left at max-content) on
     purpose, confirmed by direct measurement, not assumption: with 6
     real columns of real footer text, letting each track size to its own
     max-content made the row need MORE than the available width, so the
     grid compressed every track back down toward the minimum anyway —
     net result, the row still filled 100% of .wrap with zero space left
     for justify-content to center anything. Capping the max at 150px
     forces a bit of extra text wrapping (worth it) and reliably leaves
     real slack, which justify-content:center then distributes evenly on
     both sides. auto-fit still reflows the column count down as the
     viewport narrows (same mechanism this footer already used for its 4
     link columns, just now covering the brand block too) — below 980px,
     the general mobile breakpoint still forces a single stacked column
     regardless, unchanged from before. */
  .foot-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(140px, 150px));
    justify-content:center;
    gap:clamp(28px,4vw,36px);
    align-items:start;
    margin-bottom:clamp(36px,6vw,60px);
  }
  .foot-brand .brand{margin-bottom:16px;}
  .foot-brand p{font-size:.85rem;opacity:.6;}
  .foot-links{display:contents;}
  footer h6{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--sky-light);margin-bottom:18px;}
  footer ul li{margin-bottom:10px;font-size:.86rem;opacity:.78;}
  footer ul li a:hover{opacity:1;text-decoration:underline;}
  /* Article 5.3 (Azerbaijan E-Commerce Law) company disclosure — its own
     row above .foot-bottom, not folded into it, so it reads as a distinct
     legal notice rather than blending into the copyright line. */
  .foot-legal-info{font-size:.74rem;opacity:.5;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:16px;font-size:.78rem;opacity:.55;}
  .foot-social{display:flex;flex-wrap:wrap;gap:10px;}
  .foot-social .icon-btn{background:rgba(255,255,255,.08);width:36px;height:36px;flex:0 0 36px;}
  .foot-social .icon-btn:hover{background:var(--ocean);}

  /* ---------- Legal page ---------- */
  /* 4-item document index — a plain link list, not .article-grid's image
     cards, since legal documents have no photo to show. */
  .legal-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
  .legal-index-item{
    display:block;background:var(--white);border-radius:var(--radius);padding:22px 24px;
    box-shadow:0 4px 16px rgba(18,54,83,.06);transition:transform .2s,box-shadow .2s;
  }
  .legal-index-item:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(18,54,83,.12);}
  .legal-index-item h3{font-size:1.02rem;margin-bottom:6px;color:var(--navy);}
  .legal-index-item span{font-size:.84rem;opacity:.65;}
  /* Detail view reuses .article-detail/.back-journal/.article-body
     wholesale (same reuse precedent as careers' job detail view) — legal
     documents just have no hero image/cat-tag/byline, so only the h1
     spacing (tuned for a byline block below it elsewhere) needs its own
     override here. */
  .legal-detail h1{margin-bottom:24px;}

  /* ---------- Cookie consent banner ---------- */
  /* Compact bottom-right toast/card, not the earlier full-width bar.
     First element in <body> so it's reached before the rest of the page
     for keyboard/screen-reader users. z-index above the cart drawer
     (150) so it's never hidden behind it.
     [hidden] is restated explicitly: a plain `display:flex` rule on this
     class would otherwise outrank the browser's default [hidden]{display:
     none} (author styles beat the UA stylesheet even at equal
     specificity) — this is what silently broke Accept/Reject in an
     earlier version (banner.hidden was being set correctly in JS, it
     just had no visible effect).
     Entry/exit is a translateY slide, driven by js/features/cookie-
     consent.js toggling the .show class (see hideCookieBanner() and the
     show-on-load block there) — [hidden] only gets set to true after the
     slide-down transition actually finishes (transitionend), so the
     animation is never cut off partway. Resting position is bottom:24px,
     so the hidden transform is translateY(100% + 24px), not a bare 100%
     — 100% alone would only move it down by its own height, leaving a
     24px sliver still inside the viewport at the bottom edge. */
  .cookie-banner{
    position:fixed;right:24px;bottom:24px;z-index:160;
    width:340px;max-width:calc(100vw - 32px);
    background:var(--white);color:var(--navy);border-radius:var(--radius);
    padding:16px 18px;box-shadow:0 12px 34px rgba(18,54,83,.18);
    display:flex;flex-direction:column;gap:12px;
    font-size:.8rem;
    transform:translateY(calc(100% + 24px));
    transition:transform .35s ease;
  }
  .cookie-banner.show{transform:translateY(0);}
  .cookie-banner[hidden]{display:none;}
  .cookie-banner p{margin:0;opacity:.8;line-height:1.45;}
  .cookie-banner a{color:var(--ocean);text-decoration:underline;text-underline-offset:2px;}
  .cookie-banner-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;}
  /* Deliberately asymmetric by explicit business decision (see the
     conversation that changed this from the earlier equal-weight
     version): Accept is sized/weighted as the primary action, Reject is
     a small, muted secondary — Reject is still a real, fully functional,
     single-click <button> (no submenu, no removed functionality), only
     its visual prominence changed. */
  .cookie-btn-accept{
    padding:11px 28px;font-size:.88rem;border-radius:999px;font-weight:700;
    background:var(--ocean);color:var(--white);box-shadow:0 8px 20px rgba(0,145,209,.28);
  }
  .cookie-btn-accept:hover{transform:translateY(-2px);background:var(--ocean-deep);box-shadow:0 12px 26px rgba(0,145,209,.36);}
  .cookie-btn-reject{
    padding:4px 10px;font-size:.68rem;font-weight:600;
    background:none;color:var(--navy);opacity:.55;
  }
  .cookie-btn-reject:hover{opacity:.85;}
  @media (prefers-reduced-motion: reduce){
    .cookie-banner{transition:none;}
  }

  /* sticky mobile conversion bar */
  .sticky-cta{
    display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;background:var(--white);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));box-shadow:0 -6px 24px rgba(18,54,83,.15);gap:10px;
  }

  @media (max-width:980px){
    nav.main{display:none;}
    .hamburger{display:flex;width:38px;height:38px;align-items:center;justify-content:center;}
    .quick-contact .icon-btn:not(.whatsapp){display:none;}
    .util .btn-primary{display:none;}
    .util{gap:8px;}
    .lang-switch{font-size:.7rem;}
    .lang-switch span{padding:5px 7px;}
    .brand svg{height:36px;}
    nav.main.mobileOpen{
      display:flex;flex-direction:column;position:fixed;top:64px;left:16px;right:16px;
      background:var(--white);border-radius:14px;padding:10px;box-shadow:0 16px 40px rgba(18,54,83,.18);
      gap:0;z-index:99;
    }
    nav.main.mobileOpen a{padding:14px 12px;border-radius:8px;color:var(--navy);}
    nav.main.mobileOpen a:hover{background:var(--cream-2);}
    nav.main.mobileOpen a::after{display:none;}
    nav.main.mobileOpen a.mobile-only-link{display:block;}
    nav.main.mobileOpen a.nav-home-only{display:block;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .logo-grid{grid-template-columns:repeat(3,1fr);}
    .grid-5{grid-template-columns:1fr;}
    .fork{grid-template-columns:1fr;}
    .split{grid-template-columns:1fr;gap:30px;}
    .product-grid{grid-template-columns:1fr;}
    .quickcontact{grid-template-columns:1fr;margin-top:-40px;}
    .store-grid{grid-template-columns:1fr;}
    .form-wrap{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr;}
    .cta-banner{flex-direction:column;text-align:center;padding:40px 26px;}
    section{padding:80px 0;}
    .section-navy{padding:110px 0;}
    .sticky-cta{display:flex;}
    body{padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px));}
    .map-cards{grid-template-columns:1fr;}
  }
  @media (max-width:480px){
    .lang-switch{display:flex;}
    .quick-contact .icon-btn.whatsapp{display:none;}
  }
  /* ===== ORDER CHANNELS ===== */
  .order-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:52px;}
  @media (max-width:980px){
    .order-channels{grid-template-columns:1fr;}
  }
  .oc-card{background:var(--white);border-radius:var(--radius);box-shadow:0 8px 24px rgba(18,54,83,.07);overflow:hidden;transition:box-shadow .3s var(--ease);}
  .oc-card:hover{box-shadow:0 14px 36px rgba(18,54,83,.12);}
  .oc-trigger{width:100%;background:none;border:none;display:flex;align-items:center;gap:14px;padding:22px 20px;cursor:pointer;text-align:left;font-family:inherit;}
  .oc-ico{width:44px;height:44px;border-radius:50%;background:var(--sky-light);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:0 0 44px;}
  .oc-ico-wa{background:#25D366;}
  .oc-label{flex:1;display:flex;flex-direction:column;gap:3px;}
  .oc-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:.96rem;color:var(--navy);}
  .oc-sub{font-size:.78rem;color:var(--ink);opacity:.6;}
  .oc-arrow{width:18px;height:18px;color:var(--ocean);flex:0 0 18px;transition:transform .3s var(--ease);}
  .oc-arrow-ext{color:var(--ocean);}
  .oc-card.open .oc-arrow:not(.oc-arrow-ext){transform:rotate(180deg);}
  .oc-panel{max-height:0;overflow:hidden;transition:max-height .45s var(--ease), padding .3s var(--ease);}
  .oc-card.open .oc-panel{max-height:900px;}
  .oc-hint{font-size:.8rem;font-weight:700;color:var(--ink);opacity:.65;padding:0 20px 10px;margin:0;}
  .oc-branches{display:flex;flex-direction:column;gap:10px;padding:0 20px 20px;}
  .oc-branch-btn{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:10px;background:var(--sky-light);color:var(--ocean-deep);font-weight:700;font-size:.88rem;transition:background .25s var(--ease), transform .25s var(--ease);}
  .oc-branch-btn:hover{background:var(--ocean);color:var(--white);transform:translateX(4px);}
  .oc-branch-btn svg{width:16px;height:16px;flex:0 0 16px;}
  /* Map cards */
  .map-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 16px 18px;}
  .map-card{border-radius:10px;overflow:hidden;border:1px solid rgba(18,54,83,.08);display:flex;flex-direction:column;}
  .map-card-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:4px;background:var(--white);flex:1;}
  .map-card-body strong{font-family:'Poppins';font-weight:700;font-size:.88rem;color:var(--navy);}
  .map-card-body span{font-size:.78rem;color:var(--ink);opacity:.6;}
  .oc-maps-btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:8px;background:var(--ocean);color:var(--white);font-weight:700;font-size:.78rem;transition:background .25s var(--ease), transform .25s var(--ease);}
  .oc-maps-btn:hover{background:var(--ocean-deep);transform:translateY(-2px);}
  /* WhatsApp card */
  .oc-card-wa .oc-trigger{padding:22px 20px;}
  .oc-wa-link{text-decoration:none;}
  .oc-wa-link:hover .oc-title{color:var(--ocean);}
  /* Map fallback */
  .map-fallback{
    height:180px;background:linear-gradient(135deg, var(--sky-light) 0%, var(--cream-2) 100%);
    border-radius:10px 10px 0 0;align-items:center;justify-content:center;
  }
  .map-fb-inner{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ocean-deep);opacity:.65;}
  .map-fb-inner span{font-size:.8rem;font-weight:700;}

  /* ===== SCROLL STORY — CINEMATIC ===== */
  /* navy-deep fallback lives here now (no-JS / reduced-motion / pre-canvas-load
     state) — .story-scene itself is transparent so the single fixed
     .story-frame-canvas (js/pages/home.js) shows through it. */
  #scrollStory{position:relative;background:var(--navy-deep);}
  .story-scene{
    position:relative;height:100vh;min-height:560px;overflow:hidden;
    display:flex;align-items:center;justify-content:flex-start;
    padding-block:0;
    background:transparent;
    transform:translateZ(0);
    z-index:2;
  }
  /* Scene8 only: its background is simply the frozen last frame (nothing
     scrubs here). app.js's shared, untouched exit-trigger fires at
     'center 15%' of the scene's OWN box — measured live, that formula
     means the frozen tail after text-exit is always ~270px longer than
     the text-visible window before it (tail = height/2+135, textVisible =
     height/2-135, at a 900px viewport), regardless of height. So height
     alone can't fully close that gap; this value gives the text a
     noticeably longer comfortable-reading window than the previous 65vh
     did, while js/pages/home.js's fade-out (below) is what actually makes
     the remaining tail read as an intentional dissolve into the stats
     section rather than dead space. */
  #scene8{height:80vh;min-height:640px;}
  /* Single continuous background canvas spanning the whole scroll story —
     fixed to the viewport (not pinned per scene) so there is no pin/unpin
     boundary between scenes, i.e. no seam. Sits behind every .story-scene
     (z-index:2, transparent background above) and below the fixed header
     nav (z-index:100) / progress bar (z-index:200). Shown/hidden (and
     cross-faded — see the opacity transition below) by js/pages/home.js
     as the user scrolls through #scrollStory. */
  .story-frame-canvas{
    position:fixed;top:0;left:0;width:100vw;height:100vh;
    z-index:1;pointer-events:none;display:none;
    opacity:1;transition:opacity .5s ease;
  }
  /* Mobile's equivalent of .story-frame-canvas above — same single fixed
     element behind the whole story, same shown/hidden handling, just a
     pre-encoded <video> (js/pages/home.js) instead of a canvas drawing an
     on-demand JPEG sequence. object-fit:cover replaces what drawCover()
     does by hand for the canvas case. */
  .story-frame-video{
    position:fixed;top:0;left:0;width:100vw;height:100vh;
    z-index:1;pointer-events:none;display:none;
    opacity:1;transition:opacity .5s ease;
    object-fit:cover;object-position:center;
  }
  .story-scene + .story-scene{margin-top:-1px;}
  .story-right .scene-content{margin-left:auto;}
  .story-center .scene-content{margin:0 auto;text-align:center;}
  .story-center .scene-title{max-width:18ch;}
  .scene-bg{
    position:absolute;top:calc(-22% - 2px);right:0;bottom:0;left:0;
    background-size:cover;background-position:center;
    will-change:transform;filter:brightness(.92) saturate(1.08);
    transform:scale(1.08);
    backface-visibility:hidden;
  }
  /* One continuous tint + vignette spanning the whole story (replaces 8
     separate per-scene .scene-overlay divs AND the per-scene
     .story-scene::after vignette — both were independently computed per
     100vh scene box in normal document flow, so each pair of adjacent
     scenes' boundaries produced a visible seam: two independently-darkened
     edges meeting, even though the canvas background beneath is seamless.
     Fixed to the viewport instead, same layering approach as
     .story-frame-canvas, so the vignette frames the actual viewport rather
     than each abstract scene, and there is nothing left to seam. The linear
     tint uses the darkest/most representative of the old per-scene values
     (scene8's) as the single unified look; the radial vignette is the same
     values the old .story-scene::after used. Layered as two backgrounds —
     first-listed paints on top, matching the old overlay-above-vignette
     stacking. */
  .story-overlay{
    position:fixed;top:0;left:0;width:100vw;height:100vh;
    z-index:2;pointer-events:none;
    opacity:1;transition:opacity .5s ease;
    background:
      radial-gradient(ellipse at 50% 50%,transparent 38%,rgba(0,0,0,.46) 100%),
      linear-gradient(140deg,rgba(0,10,28,.59) 0%,rgba(0,40,80,.41) 100%);
  }
  .scene-grain{
    position:absolute;inset:0;opacity:.18;pointer-events:none;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  }
  .scene-content{
    position:relative;z-index:2;max-width:560px;padding:0 60px;color:var(--white);
    /* filter is included because GSAP animates a blur-to-sharp reveal on this
       element — without the hint the browser only discovers it needs a
       filter-capable layer once the animation starts, causing a hitch right
       as a scene enters. */
    will-change:opacity,transform,filter;
    opacity:0;transform:translateY(36px);
    transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  }
  .scene-left{margin-left:0;text-align:left;}
  .scene-right{margin-left:auto;margin-right:0;text-align:left;}
  .scene-center{margin:0 auto;text-align:center;}
  .scene-title{
    font-family:'Poppins',sans-serif;font-weight:700;
    font-size:clamp(1.9rem,4.5vw,3.2rem);line-height:1.1;
    max-width:14ch;margin-bottom:18px;text-shadow:0 2px 30px rgba(0,0,0,.45);color:var(--white);
  }
  .scene-title em{font-style:normal;color:#7DD3F8;}
  .scene-text{
    font-size:clamp(1rem,1.4vw,1.15rem);max-width:46ch;
    line-height:1.7;color:rgba(255,255,255,.88);font-weight:300;margin:0 0 28px;
  }
  .scene-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
  .scene-scroll-hint{
    position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:3;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    color:rgba(255,255,255,.7);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  }
  .sh-line{width:1px;height:36px;background:rgba(255,255,255,.4);position:relative;overflow:hidden;}
  .sh-line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--white);animation:scrolldown 1.8s ease-in-out infinite;}
  @keyframes scrolldown{0%{top:-100%}65%{top:100%}100%{top:100%}}
  .gsap-ready{opacity:0;transform:translateY(50px);filter:blur(6px);}
  /* Progress bar */
  #storyProgress{
    position:fixed;top:0;left:0;height:3px;background:var(--ocean);z-index:200;
    width:0%;transition:width .1s linear;pointer-events:none;
  }
  @media(prefers-reduced-motion:reduce){
    .scene-bg{transform:none!important;}
    .gsap-ready{opacity:1!important;transform:none!important;filter:none!important;}
    .scene-content{opacity:1!important;transform:none!important;}
  }
  @media(max-width:768px){
    .story-right .scene-content,.story-center .scene-content{margin-left:0;text-align:left;}
    .scene-content{padding:0 22px;max-width:100%;}
    .scene-right{margin-left:0;}
    .story-scene{align-items:flex-end;padding-bottom:80px;}
  }

  /* ===== Scene background images ===== */
  /* scenebg1-8's own background-image rules were removed here: those source
     files no longer exist, and all 8 scenes now render their background via
     a single continuous element (js/pages/home.js) fixed behind
     #scrollStory — .story-frame-canvas on desktop, .story-frame-video on
     mobile (scenes 1-7 scrub through it live; scene8 sees it frozen on
     scene6-to-7's last frame, on both). */