:root{
    --cream:#F2ECE1;
    --cream-soft:#E7DECB;
    --terracotta:#B8714A;
    --terracotta-soft:#C98860;
    --sage:#8E9575;
    --petrol:#17434D;
    --petrol-deep:#0E2C33;
    --umber:#3A2E20;
    --nav-h:88px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--cream);
    color:var(--petrol);
    font-family:'Jost',sans-serif;
    font-weight:300;
    overflow-x:hidden;
  }
  img{ max-width:none; }
  ::selection{background:var(--terracotta);color:var(--cream);}

  .eyebrow{
    font-family:'Jost',sans-serif;
    font-size:12px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    font-weight:400;
    color:var(--terracotta);
  }

  :root{
    --beige-accent:#C9A876;
    --beige-accent-dark:#96703F;
  }
  /* ---------- NAV ---------- */
  .nav{
    position:fixed;
    top:0; left:0; right:0;
    height:var(--nav-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 32px;
    z-index:200;
    background:transparent;
    transition:background .5s ease, opacity .5s ease, transform .5s ease;
    opacity:0;
    transform:translateY(-12px);
    pointer-events:none;
  }
  .nav.visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .nav.scrolled{
    background:rgba(255,255,255,0.35);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .nav-logo{ display:flex; align-items:center; }
  .nav-logo img{ height:44px; display:block; }

  .nav-right{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .nav-circle-btn{
    width:42px; height:42px;
    border-radius:50%;
    background:rgba(255,255,255,0.92);
    box-shadow:0 3px 12px rgba(0,0,0,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    cursor:pointer;
    transition:transform .25s ease, background .25s ease;
  }
  .nav-circle-btn:hover{ transform:translateY(-1px); background:#fff; }
  .lang-toggle{
    font-family:'Jost',sans-serif;
    font-size:12px;
    font-weight:500;
    letter-spacing:0.03em;
    color:var(--beige-accent-dark);
  }
  .menu-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
  }
  .menu-btn span{
    display:block;
    width:16px; height:1.6px;
    background:var(--beige-accent-dark);
    transition:transform .35s ease, opacity .25s ease;
  }
  .menu-btn.active span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
  .menu-btn.active span:nth-child(2){ opacity:0; }
  .menu-btn.active span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

  /* ---------- MENU OVERLAY ---------- */
  .menu-overlay{
    position:fixed;
    inset:0;
    z-index:190;
    background:rgba(242,236,225,0.98);
    backdrop-filter:blur(10px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:44px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .4s ease, transform .4s ease, visibility .4s;
  }
  .menu-overlay.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .menu-links{
    list-style:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:22px;
  }
  .menu-links a{
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(28px,4vw,42px);
    color:var(--petrol);
    text-decoration:none;
    font-weight:400;
    transition:color .3s ease;
  }
  .menu-links a:hover{ color:var(--terracotta); }
  .menu-ctas{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
  }

  /* ---------- BUTTONS ---------- */
  .btn{
    font-family:'Jost',sans-serif;
    font-size:13px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    text-decoration:none;
    padding:14px 30px;
    border-radius:3px;
    transition:all .35s ease;
    display:inline-block;
    white-space:nowrap;
    border:1px solid transparent;
  }
  .btn-primary{
    background:var(--cream);
    color:var(--terracotta);
    box-shadow:0 6px 18px rgba(0,0,0,0.18);
  }
  .btn-primary:hover{
    background:var(--cream-soft);
    transform:translateY(-1px);
  }
  .btn-outline{
    border:1px solid var(--petrol);
    color:var(--petrol);
    background:transparent;
  }
  .btn-outline:hover{
    background:var(--petrol);
    color:var(--cream);
  }
  .btn-outline-light{
    border:1px solid rgba(242,236,225,0.85);
    color:var(--cream);
    background:transparent;
  }
  .btn-outline-light:hover{
    background:var(--cream);
    color:var(--umber);
    border-color:var(--cream);
  }
  .btn-pill{
    border-radius:999px;
    padding:20px 46px;
    font-size:15px;
    min-width:260px;
    text-align:center;
  }
  .btn-sm{ padding:9px 20px; font-size:11.5px; }

  /* ---------- HERO PIN WRAPPER ---------- */
  .hero-pin{
    position:relative;
    height:340vh;
  }
  .hero-stage{
    position:sticky;
    top:0;
    height:100vh;
    width:100%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Soft seam between the hero and Who We Are — fades to cream right at the
     handoff point instead of a hard cut, without touching the pinned hero itself. */
  .hero-transition{
    position:absolute;
    left:0; right:0; bottom:0;
    height:26vh;
    max-height:260px;
    background:linear-gradient(to bottom, rgba(242,236,225,0) 0%, var(--cream) 88%);
    z-index:15;
    pointer-events:none;
  }

  /* Ambient breathing background — signature element (logo phase) */
  .hero-bg{
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse 60% 50% at 50% 38%, rgba(184,113,74,0.28), transparent 65%),
      radial-gradient(ellipse 70% 60% at 78% 82%, rgba(142,149,117,0.30), transparent 60%),
      radial-gradient(ellipse 80% 70% at 15% 85%, rgba(23,67,77,0.22), transparent 65%),
      linear-gradient(160deg, #F5F0E6 0%, #ECE3D3 45%, #E4D7C2 100%);
    will-change:opacity;
  }
  /* Wrapper handles scroll-parallax offset via transform only (no layout cost);
     the inner .hero-blob keeps its own drift animation without conflict. */
  .blob-parallax{
    position:absolute;
    inset:0;
    will-change:transform;
  }
  .hero-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:0.55;
    mix-blend-mode:multiply;
    will-change:transform;
  }
  .blob-1{
    width:52vw; height:52vw;
    top:-10%; left:-8%;
    background:radial-gradient(circle at 40% 40%, rgba(184,113,74,0.55), transparent 70%);
    animation:drift1 26s ease-in-out infinite;
  }
  .blob-2{
    width:46vw; height:46vw;
    bottom:-12%; right:-6%;
    background:radial-gradient(circle at 60% 60%, rgba(142,149,117,0.55), transparent 70%);
    animation:drift2 30s ease-in-out infinite;
  }
  .blob-3{
    width:38vw; height:38vw;
    top:35%; left:55%;
    background:radial-gradient(circle at 50% 50%, rgba(23,67,77,0.35), transparent 70%);
    animation:drift3 22s ease-in-out infinite;
  }
  @keyframes drift1{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(4vw,6vh) scale(1.12);} }
  @keyframes drift2{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-5vw,-4vh) scale(1.08);} }
  @keyframes drift3{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-3vw,5vh) scale(0.92);} }

  .hero-grain{
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    opacity:0.5;
    pointer-events:none;
    z-index:2;
  }

  /* ---------- Celestial 3D scene (Three.js) — the signature moment ---------- */
  .hero-canvas-wrap{
    position:absolute; inset:0;
    z-index:3;
    pointer-events:none;
    mix-blend-mode:screen;
    opacity:0;
    transition:opacity 1.6s ease;
  }
  .hero-canvas-wrap.is-ready{ opacity:1; }
  #heroCanvas{ display:block; width:100%; height:100%; }

  .hero-content{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    will-change:transform, opacity;
    pointer-events:none;
  }
  .hero-logo{
    width:min(46vw, 520px);
    will-change:transform;
    filter:drop-shadow(0 12px 30px rgba(23,67,77,0.10));
  }
  .hero-logo img{ width:100%; display:block; }

  /* ---------- Reveal panel: room photo + leaves + portrait + text ---------- */
  .hero-reveal{
    position:absolute;
    inset:0;
    z-index:4;
    opacity:0;
    will-change:opacity, transform;
    overflow:hidden;
  }
  .reveal-room-bg{
    position:absolute; inset:0;
    background-image:url('images/hero-room-bg.webp');
    background-size:cover;
    background-position:center 30%;
  }
  .reveal-room-bg::after{
    content:'';
    position:absolute; inset:0;
    background:
      linear-gradient(100deg, rgba(18,12,8,0.10) 0%, rgba(18,12,8,0.30) 45%, rgba(18,12,8,0.62) 78%, rgba(18,12,8,0.78) 100%),
      linear-gradient(to top, rgba(15,10,7,0.55) 0%, rgba(15,10,7,0) 32%);
  }
  .reveal-scene{
    position:absolute;
    z-index:5;
    left:50%; bottom:0;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:52px;
    max-width:94vw;
  }
  .reveal-portrait{
    position:relative;
    flex:0 0 auto;
    height:min(88vh, 720px);
    will-change:transform, opacity;
  }
  .reveal-portrait img{
    height:100%;
    width:auto;
    display:block;
    filter:drop-shadow(0 30px 40px rgba(0,0,0,0.35));
  }
  .reveal-text{
    position:relative;
    flex:0 1 400px;
    text-align:left;
    will-change:transform, opacity;
  }
  .reveal-text .hero-sub{
    font-family:'Cormorant Garamond', serif;
    font-style:normal;
    font-weight:500;
    font-size:clamp(30px, 2.9vw, 42px);
    color:var(--cream);
    line-height:1.16;
  }
  .reveal-text .hero-tagline-es{
    display:block;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:400;
    font-size:18px;
    letter-spacing:0.01em;
    text-transform:none;
    color:#D9A876;
    margin-top:12px;
  }
  .hero-ctas{
    margin-top:32px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  .hero-scrollcue{
    position:absolute;
    bottom:34px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    z-index:8;
    color:var(--petrol);
    opacity:0.7;
    will-change:opacity;
  }
  .hero-scrollcue span{
    font-size:10px;
    letter-spacing:0.28em;
    text-transform:uppercase;
  }
  .scroll-line{
    width:1px; height:38px;
    background:linear-gradient(to bottom, var(--petrol), transparent);
    position:relative;
    overflow:hidden;
  }
  .scroll-line::after{
    content:'';
    position:absolute;
    top:-100%; left:0;
    width:100%; height:100%;
    background:var(--terracotta);
    animation:scrollmove 1.8s ease-in-out infinite;
  }
  @keyframes scrollmove{ 0%{top:-100%;} 100%{top:100%;} }

  /* Floating WhatsApp button — same quiet, elegant circle language as the nav's
     menu / language buttons, not the WhatsApp brand green */
  .wa-float{
    position:fixed;
    bottom:24px; right:24px;
    width:56px; height:56px;
    border-radius:50%;
    background:rgba(255,255,255,0.92);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:150;
    box-shadow:0 3px 12px rgba(0,0,0,0.14);
    opacity:0;
    transform:scale(0.7) translateY(10px);
    transition:transform .4s cubic-bezier(.2,.9,.3,1.2), background .25s ease, box-shadow .25s ease;
    pointer-events:none;
    text-decoration:none;
  }
  .wa-float.visible{
    opacity:1;
    transform:scale(1) translateY(0);
    pointer-events:auto;
  }
  .wa-float:hover{
    background:#fff;
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,0.16);
  }
  .wa-float svg{ width:24px; height:24px; fill:var(--beige-accent-dark); transition:fill .25s ease; }
  .wa-float:hover svg{ fill:var(--terracotta); }

  /* ---------- WHO WE ARE ---------- */
  .who-section{
    position:relative;
    background:
      radial-gradient(ellipse 55% 45% at 12% 15%, rgba(184,113,74,0.10), transparent 62%),
      radial-gradient(ellipse 65% 55% at 88% 85%, rgba(142,149,117,0.13), transparent 60%),
      linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%);
    padding:150px 24px 140px;
    overflow:hidden;
    content-visibility:auto;
    contain-intrinsic-size:1px 1400px;
  }
  .who-eucalyptus{
    position:absolute;
    pointer-events:none;
    z-index:0;
    opacity:0.6;
    width:230px;
    height:auto;
    display:block;
  }
  /* the photo's cluster naturally leans toward its upper-right — so it sits
     unrotated in that corner, and mirrored (not rotated) for the opposite one */
  .who-eucalyptus.left{ top:-24px; right:-30px; left:auto; transform:rotate(-3deg); }
  .who-eucalyptus.right{ bottom:-30px; left:-40px; right:auto; transform:scaleX(-1) scaleY(-1) rotate(-3deg); }

  .who-intro{
    position:relative;
    z-index:2;
    max-width:640px;
    margin:0 auto 80px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
  }
  .who-intro h2{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    font-size:clamp(34px, 4.4vw, 54px);
    color:var(--petrol);
    line-height:1.15;
  }
  .who-intro p{
    font-size:15.5px;
    line-height:1.9;
    color:var(--umber);
    opacity:0.82;
  }

  /* Reveal wrapper: the whole carousel tilts/fades in once as a unit when scrolled into view */
  .who-reveal{
    position:relative;
    z-index:2;
    transform:rotateX(10deg) translateY(40px) scale(0.96);
    opacity:0;
    transition:transform 1s cubic-bezier(.16,.84,.32,1), opacity 1s ease;
    transform-style:preserve-3d;
  }
  .who-reveal.in-view{
    transform:rotateX(0deg) translateY(0) scale(1);
    opacity:1;
  }

  .who-carousel{
    max-width:1120px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:1400px;
  }
  .who-viewport{
    overflow:hidden;
    width:min(560px, 78vw);
    touch-action:pan-y;
  }
  .who-track{
    display:flex;
    transition:transform .65s cubic-bezier(.16,.84,.32,1);
    will-change:transform;
    cursor:grab;
  }
  .who-track.dragging{
    transition:none;
    cursor:grabbing;
  }
  .who-card{ user-select:none; }
  .who-card img{ pointer-events:none; }
  .who-card{
    flex:0 0 100%;
    width:100%;
    box-sizing:border-box;
    position:relative;
    background:linear-gradient(155deg, var(--petrol) 0%, var(--petrol-deep) 100%);
    border:1px solid rgba(217,168,118,0.25);
    border-radius:20px;
    padding:52px 44px;
    display:flex;
    flex-direction:column;
    gap:16px;
    text-align:left;
    box-shadow:0 30px 60px rgba(14,44,51,0.30), 0 8px 20px rgba(14,44,51,0.18);
  }
  .who-card-eyebrow{
    font-family:'Jost',sans-serif;
    font-size:11px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:#D9A876;
  }
  .who-card h3{
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    font-size:27px;
    color:var(--cream);
  }
  .who-card p{
    font-size:14.5px;
    line-height:1.85;
    color:rgba(242,236,225,0.82);
  }

  .who-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:36px;
  }
  .testi-controls .who-dots{ margin-top:0; }
  .who-dot{
    width:8px; height:8px;
    border-radius:50%;
    background:rgba(58,46,32,0.22);
    border:none;
    padding:0;
    cursor:pointer;
    transition:background .25s ease, transform .25s ease;
  }
  .who-dot.active{ background:var(--terracotta); transform:scale(1.35); }


  /* ---------- SHOP ---------- */
  .products-section{ position:relative; padding:150px 24px; background:var(--cream); overflow:hidden; }
  .products-inner{ max-width:1180px; margin:0 auto; text-align:center; }
  .products-inner h2{ font-family:'Cormorant Garamond', serif; font-weight:400; font-size:clamp(32px,4vw,48px); color:var(--petrol); margin:14px 0 16px; }
  .products-inner > p{ font-size:15px; line-height:1.85; color:var(--umber); opacity:0.78; margin-bottom:60px; }

  .shop-showcase{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:22px;
    max-width:1180px;
    margin:0 auto;
  }
  .shop-card-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:0 0 180px;
    width:180px;
    transition:flex-basis .65s cubic-bezier(0.22,1,0.36,1), width .65s cubic-bezier(0.22,1,0.36,1);
  }
  .shop-showcase.has-active .shop-card-col{ flex-basis:150px; width:150px; }
  .shop-showcase.has-active .shop-card-col.is-active{ flex:1 1 auto; width:auto; }

  .shop-card{
    position:relative;
    width:100%;
    height:480px;
    border-radius:26px;
    background:var(--petrol);
    box-shadow:0 20px 50px rgba(23,67,77,0.22);
    cursor:pointer;
    overflow:hidden;
    display:flex;
    transition:box-shadow .5s ease;
  }
  .shop-card:hover{ box-shadow:0 26px 60px rgba(23,67,77,0.3); }
  .shop-card-col.is-active .shop-card{ cursor:default; box-shadow:0 30px 70px rgba(23,67,77,0.3); }

  .shop-card-visual{
    position:relative;
    flex:1 1 100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:34px 16px 24px;
    background:var(--petrol);
    transition:flex .5s ease, padding .5s ease;
  }
  .shop-card-visual h3{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    color:#fff;
    font-size:22px;
    line-height:1.2;
    text-align:center;
    margin:0 0 22px;
  }
  .shop-card-col.is-active .shop-card-visual h3{ font-size:34px; margin-bottom:30px; }
  .shop-card-visual img{
    max-width:100%;
    max-height:200px;
    width:auto;
    object-fit:contain;
    filter:drop-shadow(0 18px 26px rgba(0,0,0,0.28));
    transition:max-height .5s ease;
  }
  .shop-card-col.is-active .shop-card-visual img{ max-height:320px; }
  .shop-card-col.is-active .shop-card-visual{ flex:0 0 46%; }

  .shop-card-info{
    flex:0 0 0%;
    width:0;
    min-width:0;
    min-height:0;
    opacity:0;
    padding:0;
    overflow:hidden;
    background:var(--cream-soft);
    display:flex;
    flex-direction:column;
    justify-content:center;
    transition:flex-basis .5s ease, opacity .35s ease .1s, padding .5s ease;
  }
  .shop-card-col.is-active .shop-card-info{
    flex:1 1 54%;
    width:auto;
    opacity:1;
    padding:44px 40px;
  }
  .shop-card-info h4{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    font-size:clamp(24px,2.4vw,32px);
    color:var(--petrol);
    text-decoration:underline;
    text-underline-offset:6px;
    margin:0 0 18px;
    white-space:nowrap;
  }
  .shop-card-info p{
    font-size:14.5px;
    line-height:1.85;
    color:var(--umber);
    opacity:0.85;
    margin:0 0 30px;
  }
  .shop-card-info .btn{ align-self:flex-start; }

  .shop-card-caption{
    margin-top:16px;
    font-family:'Cormorant Garamond', serif;
    font-size:20px;
    color:var(--petrol);
    text-align:center;
    opacity:1;
    max-height:40px;
    transition:opacity .35s ease, max-height .35s ease, margin .35s ease;
  }
  .shop-showcase.has-active .shop-card-caption{
    opacity:0;
    max-height:0;
    margin-top:0;
    pointer-events:none;
  }

  /* ---- Neutral / default state (before any product is selected) ----
     Scoped strictly to .shop-showcase:not(.has-active) so the selection
     animation (.has-active / .is-active rules above) is left untouched. */
  .shop-showcase:not(.has-active){
    gap:64px;
  }
  .shop-showcase:not(.has-active) .shop-card-col{
    flex:0 0 250px;
    width:250px;
  }
  .shop-showcase:not(.has-active) .shop-card{
    height:350px;
    border-radius:38px;
    overflow:visible;
    box-shadow:0 40px 70px -25px rgba(23,67,77,0.35), 0 25px 45px -15px rgba(23,67,77,0.18);
  }
  .shop-showcase:not(.has-active) .shop-card:hover{
    box-shadow:0 44px 76px -25px rgba(23,67,77,0.4), 0 28px 48px -15px rgba(23,67,77,0.2);
  }
  .shop-showcase:not(.has-active) .shop-card-visual{
    padding:48px 20px 0;
    overflow:visible;
    border-radius:38px;
  }
  .shop-showcase:not(.has-active) .shop-card-visual h3{
    font-size:50px;
    line-height:0.96;
    margin:0;
  }
  .shop-showcase:not(.has-active) .shop-card-visual img{
    position:absolute;
    left:50%;
    bottom:-65px;
    transform:translateX(-50%);
    max-height:190px;
    z-index:3;
  }
  .shop-showcase:not(.has-active) .shop-card-col[data-product="shapewear"] .shop-card-visual img{
    max-height:222px;
  }
  .shop-showcase:not(.has-active) .shop-card-caption{
    margin-top:100px;
  }

  @media (max-width:900px){
    .shop-showcase:not(.has-active){ gap:36px; }
    .shop-showcase:not(.has-active) .shop-card-col{ flex-basis:200px; width:200px; }
    .shop-showcase:not(.has-active) .shop-card{ height:300px; }
    .shop-showcase:not(.has-active) .shop-card-visual h3{ font-size:44px; }
    .shop-showcase:not(.has-active) .shop-card-visual img{ max-height:150px; bottom:-50px; }
    .shop-showcase:not(.has-active) .shop-card-caption{ margin-top:78px; }
  }

  @media (max-width:900px){
    .shop-showcase{ flex-wrap:wrap; }
    .shop-showcase.has-active .shop-card-col{ flex-basis:110px; width:110px; }
    .shop-card{ height:380px; }
    .shop-card-visual img{ max-height:130px; }
    .shop-card-col.is-active .shop-card-visual img{ max-height:180px; }
  }
  @media (max-width:768px){
    /* ---- Container: 2-column fluid grid. Each product keeps a fixed
           grid-area name; only the *template* (which cells they occupy)
           changes depending on which product (if any) is active. No JS,
           no reordering of the DOM — pure CSS, and the column widths are
           always 1fr (fluid), never a fixed pixel value. ---- */
    .shop-showcase{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:clamp(10px, 3vw, 16px);
      align-items:start;
    }
    .shop-showcase:not(.has-active){ gap:clamp(10px, 3vw, 16px); }
    .shop-showcase:not(.has-active) .shop-card-col{ width:auto; flex-basis:auto; }
    .shop-showcase.has-active .shop-card-col{ width:auto; flex-basis:auto; }
    .shop-showcase.has-active .shop-card-col.is-active{ width:auto; flex-basis:auto; }

    .shop-card-col[data-product="scrub"]{ grid-area:scrub; }
    .shop-card-col[data-product="shapewear"]{ grid-area:shapewear; }
    .shop-card-col[data-product="oil"]{ grid-area:oil; }

    .shop-showcase:not(.has-active){
      grid-template-areas:
        "scrub shapewear"
        "oil .";
    }
    .shop-showcase.has-active:has(.shop-card-col[data-product="scrub"].is-active){
      grid-template-areas:
        "scrub scrub"
        "shapewear oil";
    }
    .shop-showcase.has-active:has(.shop-card-col[data-product="shapewear"].is-active){
      grid-template-areas:
        "shapewear shapewear"
        "scrub oil";
    }
    .shop-showcase.has-active:has(.shop-card-col[data-product="oil"].is-active){
      grid-template-areas:
        "scrub shapewear"
        "oil oil";
    }

    /* ---- Card shape: aspect-ratio instead of a fixed height, so every
           card keeps the exact same visual proportions at any screen
           width — from an iPhone SE up to a tablet in portrait. Border-
           radius, background color and box-shadow are left untouched so
           every card keeps exactly what it already has on desktop. ---- */
    .shop-showcase .shop-card-col .shop-card{
      height:auto;
      overflow:visible;
    }
    .shop-showcase .shop-card-col:not(.is-active) .shop-card{
      flex-direction:column;
      aspect-ratio:0.73;
    }
    .shop-showcase.has-active .shop-card-col.is-active .shop-card{
      flex-direction:row;
      aspect-ratio:1.52;
    }

    /* ---- Visual (navy) panel: same title size, image size and position
           (as a % of the card, not a fixed px) whether the card is
           neutral, collapsed, or the left half of an expanded card — so
           the expanded card reads as a fluid extension of the same card,
           never a different design, at any screen size. ---- */
    .shop-showcase .shop-card-col:not(.is-active) .shop-card-visual,
    .shop-showcase.has-active .shop-card-col.is-active .shop-card-visual{
      padding:clamp(14px, 5.5vw, 26px) clamp(6px, 2vw, 10px) 0;
      overflow:visible;
    }
    .shop-showcase .shop-card-col:not(.is-active) .shop-card-visual h3,
    .shop-showcase.has-active .shop-card-col.is-active .shop-card-visual h3{
      font-size:clamp(17px, 5.4vw, 25px);
      line-height:1.08;
      margin:0;
    }
    .shop-showcase .shop-card-col:not(.is-active) .shop-card-visual img,
    .shop-showcase.has-active .shop-card-col.is-active .shop-card-visual img{
      position:absolute;
      left:50%;
      bottom:-12%;
      transform:translateX(-50%);
      max-height:42%;
      max-width:80%;
      z-index:3;
    }

    /* Shapewear & Body Oil product photos: ~17% larger than Luciana's
       Light (which stays unchanged), matching the reference images. Same
       centering/position as every other image — only the size changes,
       so they still overhang the bottom edge without covering the title.
       Placed after the general image rule above so it wins in both the
       neutral/collapsed state and the expanded state. This also corrects
       the desktop-only Shapewear enlargement (meant for the tall 350px
       desktop neutral card), which would otherwise cover the title on
       the much shorter mobile card. */
    .shop-showcase .shop-card-col:not(.is-active)[data-product="shapewear"] .shop-card-visual img,
    .shop-showcase.has-active .shop-card-col.is-active[data-product="shapewear"] .shop-card-visual img,
    .shop-showcase .shop-card-col:not(.is-active)[data-product="oil"] .shop-card-visual img,
    .shop-showcase.has-active .shop-card-col.is-active[data-product="oil"] .shop-card-visual img{
      max-height:49%;
    }

    /* Corners: overflow:visible (needed so the product image can overhang
       the bottom edge) stops the parent card from clipping its children
       into a rounded shape the way it does on desktop, so the visual/info
       panels need their own matching corners — same 26px radius the card
       already uses whenever a product is selected on desktop. */
    .shop-showcase.has-active .shop-card-col:not(.is-active) .shop-card-visual{
      border-radius:26px;
    }
    .shop-showcase.has-active .shop-card-col.is-active .shop-card-visual{
      border-radius:26px 0 0 26px;
    }
    .shop-showcase.has-active .shop-card-col.is-active .shop-card-info{
      border-radius:0 26px 26px 0;
    }

    .shop-showcase .shop-card-col:not(.is-active) .shop-card-info{
      display:none;
    }
    .shop-showcase .shop-card-col:not(.is-active) .shop-card-caption{
      margin-top:clamp(30px, 11vw, 48px);
      font-size:clamp(12.5px, 3.6vw, 15px);
    }

    /* ---- White info panel of the expanded card: fluid padding, content
           vertically centered (inherits justify-content:center from the
           base rule), button kept left-aligned as on desktop and always
           sized so its label stays fully visible. ---- */
    .shop-showcase.has-active .shop-card-col.is-active .shop-card-info{
      display:flex;
      flex:1 1 58%;
      width:auto;
      height:auto;
      min-height:0;
      opacity:1;
      padding:clamp(16px, 6vw, 30px) clamp(12px, 5vw, 24px);
    }
    .shop-showcase.has-active .shop-card-col.is-active .shop-card-info h4{
      font-size:clamp(14.5px, 4.3vw, 18px);
      white-space:normal;
      margin:0 0 clamp(6px, 2vw, 10px);
    }
    .shop-showcase.has-active .shop-card-col.is-active .shop-card-info p{
      font-size:clamp(10px, 2.8vw, 12.5px);
      line-height:1.5;
      margin:0 0 clamp(8px, 3vw, 14px);
    }
    .shop-showcase.has-active .shop-card-col.is-active .shop-card-info .btn{
      padding:clamp(7px, 2.2vw, 10px) clamp(14px, 4.5vw, 20px);
      font-size:clamp(10.5px, 2.8vw, 12.5px);
      white-space:nowrap;
    }
  }

  
    @media (max-width:760px){
    .who-section{ padding:100px 20px 100px; }
    .who-intro{ margin-bottom:48px; gap:14px; }
    .who-intro p{ font-size:14px; }
    .who-viewport{ width:min(400px, 74vw); }
    .who-card{ padding:36px 28px; }
    .who-card h3{ font-size:22px; }
    .who-eucalyptus.left{ width:150px; top:-14px; right:-20px; }
    .who-eucalyptus.right{ width:165px; bottom:-16px; left:-25px; }
  }

  @media (prefers-reduced-motion: reduce){
    .who-reveal{ transition:opacity .4s ease; transform:none !important; }
    .who-track{ transition:none; }
  }

  /* Soft seam between Who We Are (cream) and Services (now also light) — mirrors the
     hero-transition trick so the handoff fades instead of cutting hard. */
  .who-to-services-seam{
    position:relative;
    height:150px;
    margin-top:-150px;
    z-index:3;
    background:linear-gradient(180deg, rgba(231,222,203,0) 0%, var(--cream-soft) 100%);
    pointer-events:none;
  }

  /* ---------- SERVICES ---------- */
  .services-section{
    position:relative;
    overflow:hidden;
    padding:150px 24px 150px;
    background:linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 50%, var(--cream-soft) 100%);
    color:var(--umber);
    transition:background 1.2s ease, color 1.2s ease;
  }
  .services-section.mode-luxury{
    background:
      radial-gradient(ellipse 65% 45% at 50% 0%, rgba(201,168,118,0.18), transparent 62%),
      linear-gradient(180deg, #0B1F24 0%, #17130D 55%, #0B1F24 100%);
    color:var(--cream);
  }

  /* photo background — soft blurred botanical shadow, dialed down for luxury mode */
  .services-photo-bg{
    position:absolute;
    inset:-30px;
    background:url('images/services-photo-bg.webp') center 38%/cover no-repeat;
    filter:blur(7px) saturate(0.95) brightness(1.05);
    transform:scale(1.06);
    opacity:0.9;
    z-index:0;
    transition:opacity 1s ease;
    pointer-events:none;
  }
  .services-photo-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(242,236,225,0.5) 0%, rgba(242,236,225,0.32) 45%, rgba(242,236,225,0.55) 100%);
    z-index:1;
    transition:opacity 1s ease;
    pointer-events:none;
  }
  .services-section.mode-luxury .services-photo-bg,
  .services-section.mode-luxury .services-photo-overlay{ opacity:0; }


  /* ambient rain layer — plain CSS streaks, GPU-friendly, generated once at load */
  .services-rain{
    position:absolute; inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:1;
    opacity:0.55;
    transition:opacity .9s ease;
  }
  .services-section.mode-luxury .services-rain{ opacity:0; }
  .rain-drop{
    position:absolute;
    top:-12%;
    width:1px;
    height:90px;
    background:linear-gradient(to bottom, transparent, rgba(58,46,32,0.28), transparent);
    animation:rain-fall linear infinite;
  }
  @keyframes rain-fall{
    0%{ transform:translateY(0); opacity:0; }
    12%{ opacity:1; }
    88%{ opacity:1; }
    100%{ transform:translateY(120vh); opacity:0; }
  }

  /* ambient gold-sparkle layer, swaps in for luxury mode */
  .services-sparkle{
    position:absolute; inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:1;
    opacity:0;
    transition:opacity 1.1s ease .2s;
  }
  .services-section.mode-luxury .services-sparkle{ opacity:1; }
  .sparkle-dot{
    position:absolute;
    width:3px; height:3px;
    border-radius:50%;
    background:var(--beige-accent);
    box-shadow:0 0 7px 1px rgba(201,168,118,0.85);
    animation:sparkle-drift ease-in-out infinite;
  }
  @keyframes sparkle-drift{
    0%,100%{ transform:translateY(0) scale(1); opacity:0.15; }
    50%{ transform:translateY(-20px) scale(1.5); opacity:1; }
  }

  .services-grain{
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    opacity:0.4;
    pointer-events:none;
    z-index:1;
  }

  .services-inner{ position:relative; z-index:2; max-width:1180px; margin:0 auto; }

  .services-intro{
    text-align:center;
    max-width:640px;
    margin:0 auto 52px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
  }
  .services-intro .eyebrow{ color:var(--terracotta-soft); transition:color .8s ease; }
  .services-intro h2{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    font-size:clamp(34px, 4.4vw, 54px);
    color:var(--petrol);
    line-height:1.15;
  }
  .services-intro p{
    font-size:15.5px;
    line-height:1.9;
    color:rgba(58,46,32,0.78);
  }
  .services-section.mode-luxury .services-intro .eyebrow{ color:var(--beige-accent); }
  .services-section.mode-luxury .services-intro h2{ color:var(--cream); }
  .services-section.mode-luxury .services-intro p{ color:rgba(242,236,225,0.75); }

  /* category tabs */
  .services-tabs{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:56px;
  }
  .services-tab{
    padding:14px 30px;
    border-radius:999px;
    border:1px solid rgba(58,46,32,0.22);
    background:rgba(58,46,32,0.05);
    color:rgba(58,46,32,0.7);
    font-family:'Jost',sans-serif;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .25s ease;
  }
  .services-tab:hover{ background:rgba(58,46,32,0.09); color:var(--umber); transform:translateY(-1px); }
  .services-tab.active{
    background:#fff;
    border-color:#fff;
    color:var(--beige-accent-dark);
    box-shadow:0 10px 26px rgba(0,0,0,0.22);
  }
  .services-section.mode-luxury .services-tab{ border-color:rgba(201,168,118,0.3); background:rgba(242,236,225,0.06); color:rgba(242,236,225,0.8); }
  .services-section.mode-luxury .services-tab:hover{ background:rgba(242,236,225,0.14); color:var(--cream); }
  .services-section.mode-luxury .services-tab.active{
    background:linear-gradient(135deg, var(--beige-accent), var(--beige-accent-dark));
    border-color:var(--beige-accent);
    color:#1B140C;
    box-shadow:0 10px 30px rgba(201,168,118,0.4);
  }

  /* card grid */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
    gap:26px;
  }
  .service-card{
    display:none;
    background:rgba(255,255,255,0.4);
    border:1px solid rgba(58,46,32,0.12);
    border-radius:18px;
    overflow:hidden;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease, background .6s ease;
  }
  .service-card.is-visible{
    display:flex;
    flex-direction:column;
    opacity:0;
    transform:translateY(18px);
    animation:card-in .65s cubic-bezier(.16,.84,.32,1) forwards;
  }
  @keyframes card-in{ to{ opacity:1; transform:translateY(0); } }
  .service-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(58,46,32,0.18); border-color:rgba(58,46,32,0.22); }

  .service-card-media{
    position:relative;
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(155deg, rgba(58,46,32,0.88), rgba(27,22,16,0.95));
    overflow:hidden;
  }
  .service-card-media img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:1; }
  .service-card-media svg{ width:50px; height:50px; opacity:0.85; z-index:2; position:relative; }
  .service-card-duration{
    position:absolute;
    top:14px; right:14px;
    font-family:'Jost',sans-serif;
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(27,22,16,0.55);
    border:1px solid rgba(242,236,225,0.25);
    color:var(--cream);
    white-space:nowrap;
    z-index:10;
  }
  .service-card-body{
    padding:26px 26px 28px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
  }
  .service-card-title{
    font-family:'Cormorant Garamond', serif;
    font-size:22px;
    font-weight:500;
    color:var(--umber);
  }
  .service-card-desc{
    font-size:13.6px;
    line-height:1.7;
    color:rgba(58,46,32,0.72);
    flex:1;
  }
  .service-card-price{
    font-family:'Jost',sans-serif;
    font-size:15px;
    letter-spacing:0.03em;
    color:var(--terracotta-soft);
  }
  .service-card-actions{
    display:flex;
    gap:10px;
    margin-top:10px;
    flex-wrap:wrap;
  }
  .service-btn{
    flex:1;
    min-width:118px;
    text-align:center;
    padding:11px 14px;
    border-radius:999px;
    font-family:'Jost',sans-serif;
    font-size:12px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
    border:1px solid transparent;
    transition:background .3s ease, color .3s ease, border-color .3s ease;
  }
  .service-btn-book{ background:#fff; color:var(--beige-accent-dark); }
  .service-btn-book:hover{ background:var(--beige-accent-dark); color:#fff; }
  .service-btn-whatsapp{ background:transparent; border-color:rgba(58,46,32,0.28); color:var(--umber); }
  .service-btn-whatsapp:hover{ background:rgba(58,46,32,0.08); }

  /* luxury re-skin for cards */
  .services-section.mode-luxury .service-card{
    background:linear-gradient(160deg, rgba(201,168,118,0.09), rgba(11,31,36,0.4));
    border-color:rgba(201,168,118,0.35);
  }
  .services-section.mode-luxury .service-card:hover{ box-shadow:0 26px 60px rgba(201,168,118,0.2); border-color:var(--beige-accent); }
  .services-section.mode-luxury .service-card-media{ background:linear-gradient(155deg, rgba(201,168,118,0.22), rgba(11,31,36,0.9)); }
  .services-section.mode-luxury .service-card-title{ color:var(--cream); }
  .services-section.mode-luxury .service-card-desc{ color:rgba(242,236,225,0.72); }
  .services-section.mode-luxury .service-card-price{ color:var(--beige-accent); }
  .services-section.mode-luxury .service-btn-book{ background:linear-gradient(135deg, var(--beige-accent), var(--beige-accent-dark)); color:#1B140C; }
  .services-section.mode-luxury .service-btn-book:hover{ background:linear-gradient(135deg, #DBBD8E, #A9814E); }
  .services-section.mode-luxury .service-btn-whatsapp{ border-color:rgba(201,168,118,0.4); color:var(--cream); }

  @media (max-width:760px){
    .services-section{ padding:110px 20px 110px; }
    .services-intro{ margin-bottom:40px; }
    .services-intro p{ font-size:14px; }
    .services-tabs{ gap:10px; margin-bottom:40px; }
    .services-tab{ padding:12px 20px; font-size:11.5px; }
    .services-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
    .service-card-media{ height:96px; }
    .service-card-media svg{ width:32px; height:32px; }
    .service-card-duration{ top:8px; right:8px; padding:4px 8px; font-size:8.5px; }
    .service-card-body{ padding:14px 12px 16px; gap:6px; }
    .service-card-title{ font-size:15px; }
    .service-card-desc{ font-size:11px; line-height:1.55; }
    .service-card-price{ font-size:12px; }
    .service-card-actions{ flex-direction:column; gap:6px; margin-top:6px; }
    .service-btn{ min-width:0; width:100%; padding:9px 8px; font-size:9.5px; letter-spacing:0.02em; }
  }

  @media (max-width:400px){
    .services-grid{ gap:9px; }
    .service-card-media{ height:84px; }
    .service-card-title{ font-size:13.5px; }
    .service-card-desc{ font-size:10.3px; }
  }

  @media (prefers-reduced-motion: reduce){
    .rain-drop, .sparkle-dot{ animation:none !important; opacity:0 !important; }
    .service-card.is-visible{ animation:none; opacity:1; transform:none; }
  }

  /* ---------- BOOKING ---------- */
  .booking-section{
    position:relative;
    padding:130px 24px;
    background:linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%);
    text-align:center;
  }
  .booking-inner{
    max-width:560px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
  }
  .booking-inner h2{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    font-size:clamp(32px, 4vw, 48px);
    color:var(--petrol);
  }
  .booking-inner p{
    font-size:15px;
    line-height:1.8;
    color:var(--umber);
    opacity:0.82;
  }
  .booking-form{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:12px;
  }
  .booking-select{
    width:100%;
    padding:16px 20px;
    border-radius:14px;
    border:1px solid rgba(58,46,32,0.22);
    background:#fff;
    color:var(--petrol);
    font-family:'Jost',sans-serif;
    font-size:14.5px;
    cursor:pointer;
  }
  .booking-selected{
    font-size:13.5px;
    letter-spacing:0.04em;
    color:var(--terracotta);
    min-height:18px;
  }
  .booking-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

  /* ---------- PRELOADER ---------- */
  .preloader{
    position:fixed; inset:0; z-index:9999;
    background:var(--cream);
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:22px;
    transition:opacity .9s ease, visibility .9s ease;
  }
  .preloader-mark{ width:96px; opacity:0; animation:preloaderFade 1.8s ease forwards; }
  .preloader-mark img{ width:100%; display:block; }
  .preloader-line{ width:120px; height:1px; background:rgba(58,46,32,0.15); position:relative; overflow:hidden; }
  .preloader-line::after{
    content:''; position:absolute; left:-40%; top:0; height:100%; width:40%;
    background:var(--terracotta);
    animation:preloaderSweep 1.3s ease-in-out infinite;
  }
  .preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  @keyframes preloaderFade{ 0%{opacity:0; transform:scale(.86);} 60%{opacity:1;} 100%{opacity:1; transform:scale(1);} }
  @keyframes preloaderSweep{ 0%{left:-40%;} 100%{left:100%;} }

  /* ---------- CURSOR GLOW (desktop only, signature ambient touch) ---------- */
  .cursor-glow{
    position:fixed; top:0; left:0; width:24px; height:24px; border-radius:50%;
    pointer-events:none; z-index:9500;
    background:radial-gradient(circle, rgba(184,113,74,0.5), rgba(184,113,74,0) 72%);
    transform:translate(-50%,-50%);
    opacity:0;
    transition:opacity .4s ease, width .35s ease, height .35s ease;
    will-change:transform;
  }
  .cursor-glow.active{ opacity:1; }
  .cursor-glow.big{ width:58px; height:58px; }
  @media (hover:none), (pointer:coarse){ .cursor-glow{ display:none !important; } }

  /* ---------- 3D TILT (shared utility for cards / visuals) ---------- */
  .tilt-3d{ transform-style:preserve-3d; will-change:transform; transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; }

  /* ---------- GALLERY ---------- */
  .gallery-section{ position:relative; padding:150px 24px; background:var(--cream-soft); overflow:hidden; }
  .gallery-inner{ max-width:1180px; margin:0 auto; }
  .gallery-intro{ text-align:center; max-width:620px; margin:0 auto 60px; }
  .gallery-intro h2{
    font-family:'Cormorant Garamond', serif; font-weight:400; font-size:clamp(32px,4vw,46px); color:var(--petrol); margin:14px 0 16px;
  }
  .gallery-intro p{ font-size:15px; line-height:1.85; color:var(--umber); opacity:0.78; }
  .gallery-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; }
  .gallery-card{ perspective:1300px; grid-column:span 2; aspect-ratio:1/1; }
  .gallery-card.g-wide{ grid-column:span 3; }
  .gallery-card.g-tall{ grid-row:span 2; aspect-ratio:1/2.05; }
  .gallery-card-inner{
    position:relative; width:100%; height:100%; border-radius:18px;
    transform-style:preserve-3d; transition:transform .8s cubic-bezier(.22,1,.36,1);
  }
  .gallery-card.flipped .gallery-card-inner{ transform:rotateY(180deg); }
  @media (hover:hover){ .gallery-card:hover .gallery-card-inner{ transform:rotateY(180deg); } }
  .gallery-card.g-flat .gallery-card-inner,
  .gallery-card.g-flat.flipped .gallery-card-inner{ transform:none !important; }
  @media (hover:hover){ .gallery-card.g-flat:hover .gallery-card-inner{ transform:none !important; } }
  .gallery-face{
    position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
    border-radius:18px; overflow:hidden; box-shadow:0 20px 40px rgba(58,46,32,0.16);
  }
  .gallery-face.front img{ width:100%; height:100%; object-fit:cover; display:block; }
  .gallery-face.front.g-pattern{
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
    color:var(--cream); text-align:center; padding:20px;
  }
  .gallery-face.front .g-tag{
    font-family:'Jost',sans-serif; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; opacity:0.85;
  }
  .gallery-face.front .g-tag-title{ font-family:'Cormorant Garamond', serif; font-size:26px; }
  .gallery-face.front::after{
    content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,67,77,0) 45%, rgba(14,28,32,0.65) 100%);
    pointer-events:none;
  }
  .gallery-face.back{
    transform:rotateY(180deg); background:var(--petrol); color:var(--cream);
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:22px;
  }
  .gallery-face.back .eyebrow{ color:var(--beige-accent); font-size:10.5px; }
  .gallery-face.back h4{ font-family:'Cormorant Garamond', serif; font-weight:400; font-size:22px; }
  .gallery-face.back p{ font-size:12.5px; line-height:1.6; color:rgba(242,236,225,0.7); max-width:200px; }
  .gallery-hint{ text-align:center; margin-top:26px; font-size:11.5px; letter-spacing:0.1em; color:var(--umber); opacity:0.55; }

  /* ---- Gallery coverflow carousel (same animation mechanism as Testimonials) ---- */
  .gallery-stage{
    position:relative; max-width:1180px; margin:0 auto; height:400px; perspective:1500px;
  }
  .gallery-track{ position:absolute; inset:0; }
  .gallery-slide{
    position:absolute; top:50%; left:50%; width:300px; height:300px;
    transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .8s ease, filter .8s ease;
  }
  .gallery-slide .gallery-card{ width:100%; height:100%; aspect-ratio:unset; }
  @media (max-width:760px){
    .gallery-stage{ height:320px; }
    .gallery-slide{ width:230px; height:230px; }
  }

  /* ---------- TESTIMONIALS ---------- */
  .testimonials-section{
    position:relative; padding:150px 0 130px;
    background:linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 100%);
    overflow:hidden;
  }
  .testimonials-intro{ text-align:center; max-width:620px; margin:0 auto 56px; padding:0 24px; }
  .testimonials-intro h2{
    font-family:'Cormorant Garamond', serif; font-weight:400; font-size:clamp(32px,4vw,46px); color:var(--petrol); margin:14px 0 16px;
  }
  .testimonials-intro p{ font-size:15px; line-height:1.85; color:var(--umber); opacity:0.78; }
  .testi-stage{
    position:relative; max-width:1180px; margin:0 auto; height:360px; perspective:1500px;
  }
  .testi-track{ position:absolute; inset:0; }
  .testi-card{
    position:absolute; top:50%; left:50%; width:340px; padding:38px 34px;
    background:#fff; border-radius:20px; box-shadow:0 40px 70px rgba(58,46,32,0.18);
    transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .8s ease, filter .8s ease;
  }
  .testi-quote-mark{ font-family:'Cormorant Garamond', serif; font-size:52px; color:var(--terracotta-soft); line-height:0.6; opacity:0.55; display:block; margin-bottom:10px; }
  .testi-quote{ font-size:15px; line-height:1.8; color:var(--umber); min-height:120px; }
  .testi-name{ font-family:'Jost',sans-serif; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--petrol); font-weight:500; margin-top:20px; }
  .testi-role{ font-size:12px; color:var(--terracotta); margin-top:3px; }
  .testi-controls{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:44px; }
  .testi-arrow{
    width:44px; height:44px; border-radius:50%; border:1px solid rgba(58,46,32,0.2); background:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .25s ease, background .25s ease;
  }
  .testi-arrow:hover{ background:var(--terracotta); border-color:var(--terracotta); }
  .testi-arrow:hover svg{ stroke:#fff; }
  .testi-arrow svg{ width:16px; height:16px; stroke:var(--petrol); fill:none; stroke-width:2; transition:stroke .25s ease; }
  .testi-dots{ display:none; }
  .testi-dot{ width:7px; height:7px; border-radius:50%; background:rgba(58,46,32,0.25); border:none; cursor:pointer; transition:background .3s ease, transform .3s ease; padding:0; }
  .testi-dot.active{ background:var(--terracotta); transform:scale(1.4); }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:960px){
    .reveal-scene{ gap:32px; }
    .reveal-portrait{ height:78vh; }
    .reveal-text{ flex-basis:300px; }
  }

  @media (max-width:760px){
    :root{ --nav-h:72px; }
    .nav{ padding:0 20px; }
    .nav-logo img{ height:36px; }
    .hero-logo{ width:70vw; }

    .reveal-room-bg{ background-position:58% center; }

    /* backdrop-filter (frosted glass) is one of the heaviest operations for a phone GPU
       during scroll — replaced with a plain solid background on mobile. */
    .nav.scrolled{
      background:rgba(255,255,255,0.82);
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
    .menu-overlay{
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }

    /* One fewer blurred blob + smaller blur radius = noticeably lighter compositing */
    .hero-blob{ filter:blur(30px); }
    .blob-3{ display:none; }

    .nav-circle-btn{ width:36px; height:36px; }

    /* Poster-style overlay composition: photo anchored to the bottom,
       text sits in the safe gap above her so it never covers her face */
    .reveal-scene{
      display:block;
      position:absolute;
      inset:0;
      max-width:none;
      left:0;
      bottom:0;
      transform:none;
    }
    .reveal-portrait{
      position:absolute;
      bottom:0;
      left:50%;
      transform:translateX(-50%) !important;
      height:56vh;
    }
    .reveal-text{
      position:absolute;
      bottom:calc(56vh + 32px);
      left:50%;
      transform:translateX(-50%) !important;
      width:88%;
      max-width:320px;
      text-align:center;
      flex-basis:auto;
    }
    .reveal-text .hero-sub{
      font-size:clamp(20px, 5.6vw, 26px);
      line-height:1.24;
    }
    .reveal-text .hero-tagline-es{
      font-size:12.5px;
      margin-top:8px;
    }
    .hero-ctas{
      align-items:center;
      width:100%;
      gap:10px;
      margin-top:18px;
    }
    .btn-pill{
      width:100%;
      max-width:220px;
      min-width:0;
      padding:12px 24px;
      font-size:11px;
      text-align:center;
    }
  }

  @media (max-width:420px){
    .reveal-portrait{ height:50vh; }
    .reveal-text{ bottom:calc(50vh + 26px); max-width:280px; }
    .reveal-text .hero-sub{ font-size:clamp(18px, 5.2vw, 22px); }
  }

  @media (max-width:960px){
  }

  @media (max-width:760px){
    .gallery-section{ padding:100px 20px; }
    .testimonials-section{ padding:100px 0 90px; }
    .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
    .gallery-card{ grid-column:span 1; }
    .gallery-card.g-wide{ grid-column:span 2; }
    .gallery-card.g-tall{ grid-row:span 1; aspect-ratio:1/1; }
    .testi-stage{ height:420px; }
    .testi-card{ width:78vw; max-width:320px; padding:30px 26px; }
    .preloader-mark{ width:72px; }
  }

  @media (prefers-reduced-motion: reduce){
    .hero-blob{ animation:none; }
    .scroll-line::after{ animation:none; }
    html{ scroll-behavior:auto; }
    .hero-canvas-wrap{ display:none; }
    .cursor-glow{ display:none; }
  }

  /* ========== LEGAL MODALS ========== */
  .legal-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 300;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(5px);
  }

  .legal-modal.active {
    display: flex;
  }

  .legal-modal-content {
    background: var(--cream);
    border-radius: 8px;
    padding: 40px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  }

  .legal-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    color: var(--petrol);
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .legal-modal-close:hover {
    color: var(--terracotta);
  }

  .legal-modal-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    color: var(--petrol);
    font-weight: 500;
    margin-bottom: 20px;
    margin-top: 10px;
  }

  .legal-modal-content p {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    color: var(--petrol);
    line-height: 1.8;
    font-weight: 300;
  }

  @media (max-width: 768px) {
    .legal-modal-content {
      padding: 30px;
      max-width: 90vw;
    }

    .legal-modal-content h2 {
      font-size: 24px;
    }

    .legal-modal-content p {
      font-size: 14px;
    }
  }

  @media (max-width: 480px) {
    .legal-modal-content {
      padding: 20px;
      max-width: 95vw;
    }

    .legal-modal-close {
      top: 15px;
      right: 15px;
      font-size: 28px;
    }

    .legal-modal-content h2 {
      font-size: 20px;
    }

    .legal-modal-content p {
      font-size: 13px;
    }
  }

  /* ========== FOOTER STYLES ========== */
  .footer {
    background: linear-gradient(135deg, var(--petrol-deep) 0%, var(--petrol) 100%);
    color: var(--cream);
    padding: 60px 32px;
    margin-top: 80px;
  }

  .footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
  }

  /* Map Section */
  .footer-map-section {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    min-height: 400px;
  }

  /* Info Section */
  .footer-info-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .footer-info-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .footer-info-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .footer-info-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 500;
    color: var(--beige-accent);
    text-transform: capitalize;
    letter-spacing: 0.05em;
  }

  .footer-info-text {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--cream);
    line-height: 1.6;
  }

  .footer-info-text a {
    color: var(--beige-accent);
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .footer-info-text a:hover {
    color: var(--cream);
    text-decoration: underline;
  }

  /* Social Links */
  .footer-social {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }

  .footer-social a {
    color: var(--beige-accent);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 16px;
    border: 1px solid var(--beige-accent);
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-block;
  }

  .footer-social a:hover {
    background: var(--beige-accent);
    color: var(--petrol-deep);
  }

  /* Legal Links at Bottom */
  .footer-legal-bottom {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(201, 168, 118, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
  }

  .footer-legal-bottom a {
    color: var(--cream);
    text-decoration: none;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
  }

  .footer-legal-bottom a:hover {
    color: var(--beige-accent);
  }

  .legal-separator {
    color: rgba(201, 168, 118, 0.5);
  }

  /* ========== RESPONSIVE ========== */
  @media (max-width: 1024px) {
    .footer {
      padding: 50px 24px;
    }

    .footer-container {
      gap: 40px;
    }

    .footer-map-section {
      min-height: 350px;
    }

    .footer-info-content {
      gap: 24px;
    }
  }

  @media (max-width: 768px) {
    .footer {
      padding: 40px 20px;
      margin-top: 60px;
    }

    .footer-container {
      grid-template-columns: 1fr;
      gap: 30px;
    }

    .footer-map-section {
      min-height: 300px;
      order: 2;
    }

    .footer-info-section {
      order: 1;
    }

    .footer-info-content {
      gap: 20px;
    }

    .footer-info-title {
      font-size: 16px;
    }

    .footer-info-text {
      font-size: 14px;
    }
  }

  @media (max-width: 480px) {
    .footer {
      padding: 30px 16px;
      margin-top: 40px;
    }

    .footer-container {
      gap: 20px;
    }

    .footer-map-section {
      min-height: 250px;
    }

    .footer-info-content {
      gap: 16px;
    }

    .footer-info-title {
      font-size: 15px;
    }

    .footer-info-text {
      font-size: 13px;
    }

    .footer-social a {
      font-size: 12px;
    }

    .footer-legal-bottom {
      margin-top: 40px;
      padding-top: 20px;
      gap: 16px;
    }

    .footer-legal-bottom a {
      font-size: 12px;
    }
  }

/* ---------- Testimonial modal (moved from inline styles for CSP compliance) ---------- */
.testi-share-wrap{ text-align:center; margin-top:44px; }
.testi-modal-overlay{
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.5); display:none; z-index:500;
  align-items:center; justify-content:center;
}
.testi-modal-box{
  background:var(--cream); padding:40px; border-radius:18px;
  max-width:500px; width:90%; max-height:80vh; overflow-y:auto;
}
.testi-modal-title{
  font-family:'Cormorant Garamond',serif; font-size:28px; color:var(--petrol);
  margin-bottom:24px; font-weight:400;
}
.testi-modal-form{ display:flex; flex-direction:column; gap:16px; }
.testi-modal-input{
  padding:14px; border:1px solid rgba(0,0,0,0.1); border-radius:8px;
  font-family:'Jost',sans-serif; font-size:14px;
}
.testi-modal-textarea{ min-height:120px; resize:vertical; }
.testi-modal-actions{ display:flex; gap:12px; margin-top:20px; }
.testi-modal-btn{ flex:1; cursor:pointer; }

/* ---------- Footer map embed (moved from inline style for CSP compliance) ---------- */
.map-embed-frame{ border:none; border-radius:8px; }