:root{
    --void:#FDF6ED;
    --panel:#DCCFC0;
    --panel-2:#EFE6D8;
    --gold:#778873;
    --pine:#778873;
    --bone:#2B332B;
    --muted:#5C6B58;
    --line: rgba(43,51,43,0.15);
    --ease: cubic-bezier(.22,1,.36,1);
    --overlay-bone:#FDF6ED;
    --overlay-muted:rgba(253,246,237,0.72);
    --overlay-line:rgba(253,246,237,0.3);
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--void);
    color:var(--bone);
    font-family:'Bricolage Grotesque', sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

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

  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}

  ::selection{background:var(--gold); color:#2B332B;}

  :focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }

  .wrap{
    max-width:1360px;
    margin:0 auto;
    padding:0 6vw;
  }

  /* ---------- PAGE BANNER (shared across sub-pages) ---------- */
  .page-banner{
    position:relative;
    padding:min(26vh,240px) 6vw 8vh;
    overflow:hidden;
    --bone:var(--overlay-bone);
    --muted:var(--overlay-muted);
    --line:var(--overlay-line);
  }
  .page-banner-media{
    position:absolute; inset:0;
    z-index:0;
  }
  .page-banner-media img{
    width:100%; height:100%;
    object-fit:cover;
  }
  .page-banner-media::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(20,17,13,0.5), rgba(20,17,13,0.97));
  }
  .page-banner-content{
    position:relative;
    z-index:1;
  }
  .page-eyebrow{
    font-family:'Permanent Marker', cursive;
    color:var(--gold);
    font-size:1.1rem;
    transform:rotate(-2deg);
    display:inline-block;
    margin-bottom:0.8rem;
  }
  .page-title{
    font-size:clamp(2.6rem, 6vw, 4.6rem);
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:1;
    max-width:16ch;
    color:var(--bone);
  }
  .page-sub{
    margin-top:1.2rem;
    color:var(--muted);
    font-size:1.05rem;
    max-width:60ch;
    line-height:1.6;
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    padding:16px 6vw;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(43,51,43,0.82);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    --bone:var(--overlay-bone);
    --muted:var(--overlay-muted);
    --line:var(--overlay-line);
  }
  .logo{
    display:flex;
    align-items:center;
    gap:0.65rem;
    font-size:1.05rem;
    font-weight:700;
    letter-spacing:0.02em;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,0.5));
    color:var(--bone);
  }
  .logo img{
    height:38px;
    width:auto;
    display:block;
  }
  .wordmark-img{
    height:26px;
  }
  .nav-links{
    display:flex;
    gap:2.4rem;
    font-size:0.95rem;
    font-weight:500;
    filter:drop-shadow(0 1px 6px rgba(0,0,0,0.5));
    color:var(--bone);
  }
  .nav-links a{
    opacity:0.85;
    transition:opacity 0.25s var(--ease);
  }
  .nav-links a:hover{opacity:1;}
  .nav-apply{
    display:none;
  }
  .nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:30px;
    height:24px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  }
  .nav-toggle span{
    display:block;
    width:100%;
    height:2px;
    background:var(--bone);
    transition:transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  @media (max-width:760px){
    .nav-links{
      position:fixed;
      top:0; right:0;
      height:100svh;
      width:min(72vw, 300px);
      background:var(--panel);
      flex-direction:column;
      justify-content:center;
      align-items:flex-start;
      gap:2rem;
      padding:0 3rem;
      font-size:1.3rem;
      transform:translateX(100%);
      transition:transform 0.4s var(--ease);
      z-index:99;
      --bone:#2B332B;
      --muted:#5C6B58;
      --line: rgba(43,51,43,0.15);
      filter:none;
    }
    .nav-links.open{transform:translateX(0);}
    .nav-toggle{display:flex; z-index:101;}
    .nav-scrim{
      display:none;
      position:fixed; inset:0;
      background:rgba(0,0,0,0.5);
      z-index:98;
    }
    .nav-scrim.open{display:block;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    height:100svh;
    min-height:640px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    --bone:var(--overlay-bone);
    --muted:var(--overlay-muted);
    --line:var(--overlay-line);
  }
  .hero-media{
    position:absolute;
    inset:0;
    z-index:0;
  }
  .hero-media img, .hero-media video{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.08);
    will-change:transform;
  }
  .hero-media::after{
    content:'';
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, rgba(20,17,13,0.55) 0%, rgba(20,17,13,0.15) 30%, rgba(20,17,13,0.35) 62%, rgba(20,17,13,0.6) 100%);
  }
  .video-play-btn{
    display:none;
    position:absolute;
    z-index:3;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:68px; height:68px;
    border-radius:50%;
    background:rgba(20,17,13,0.55);
    border:1.5px solid rgba(237,231,218,0.6);
    color:var(--bone);
    align-items:center;
    justify-content:center;
    cursor:pointer;
    backdrop-filter:blur(2px);
    transition:transform 0.25s var(--ease), background 0.25s var(--ease);
  }
  .video-play-btn svg{margin-left:3px;}
  .video-play-btn:hover{transform:translate(-50%,-50%) scale(1.06); background:rgba(20,17,13,0.75);}
  .video-play-btn.show{display:flex;}
  .hero-content{
    position:relative;
    z-index:2;
    width:100%;
    padding:0 6vw 7vw;
    display:flex;
    flex-direction:column;
    gap:1.6rem;
  }
  .hero-eyebrow-note{
    font-family:'Permanent Marker', cursive;
    color:var(--gold);
    font-size:1.15rem;
    transform:rotate(-3deg);
    max-width:280px;
    line-height:1.35;
  }
  .hero-title{
    font-size:clamp(2.2rem, 6.4vw, 5.6rem);
    font-weight:800;
    line-height:1.02;
    letter-spacing:-0.02em;
    max-width:20ch;
    color:var(--bone);
  }
  .hero-sub{
    max-width:540px;
    font-size:clamp(1.05rem, 1.6vw, 1.3rem);
    color:var(--bone);
    line-height:1.55;
    font-weight:400;
  }
  .hero-sub b{font-weight:600; color:var(--gold);}
  .hero-scroll{
    position:absolute;
    right:6vw;
    bottom:2.6rem;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.6rem;
    font-size:0.8rem;
    color:var(--muted);
  }
  .hero-scroll span{
    writing-mode:vertical-rl;
    letter-spacing:0.05em;
  }
  .scroll-line{
    width:1px;
    height:52px;
    background:var(--line);
    position:relative;
    overflow:hidden;
  }
  .scroll-line::after{
    content:'';
    position:absolute;
    top:-100%;
    left:0;
    width:100%;
    height:100%;
    background:var(--gold);
    animation:scrollpulse 2.2s ease-in-out infinite;
  }
  @keyframes scrollpulse{
    0%{top:-100%;}
    50%{top:0%;}
    100%{top:100%;}
  }
  @media (max-width:760px){
    .hero-scroll{display:none;}
    .hero-media img, .hero-media video{
      object-position:68% center;
    }
    .hero-content{
      padding-bottom:9vh;
      gap:1.2rem;
    }
    .hero-title{
      max-width:16ch;
    }
  }

  /* ---------- REVEAL UTILS ---------- */
  .reveal{
    opacity:0;
    transform:translateY(36px);
    transition:opacity 0.9s var(--ease), transform 0.9s var(--ease);
  }
  .reveal.in{
    opacity:1;
    transform:translateY(0);
  }
  .reveal-scale{
    opacity:0;
    transform:scale(0.94);
    transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
  }
  .reveal-scale.in{opacity:1; transform:scale(1);}
  .stagger .reveal:nth-child(1){transition-delay:0s;}
  .stagger .reveal:nth-child(2){transition-delay:0.12s;}
  .stagger .reveal:nth-child(3){transition-delay:0.24s;}
  .stagger .reveal:nth-child(4){transition-delay:0.36s;}

  /* ---------- SECTION: QUICK FACTS ---------- */
  .quickfacts{
    padding:8vh 6vw 2vh;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:2.4rem;
    border-top:1px solid var(--line);
    margin-top:2vh;
  }
  .qf-item{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
  }
  .qf-label{
    font-family:'Permanent Marker', cursive;
    color:var(--gold);
    font-size:1rem;
    transform:rotate(-2deg);
    display:inline-block;
  }
  .qf-item p{
    color:var(--muted);
    font-size:0.98rem;
    line-height:1.55;
  }
  @media (max-width:820px){
    .quickfacts{grid-template-columns:repeat(2, 1fr); gap:2rem;}
  }
  @media (max-width:480px){
    .quickfacts{grid-template-columns:1fr;}
  }

  /* ---------- SECTION: STATEMENT ---------- */
  .statement-row{
    padding:12vh 6vw;
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:5vw;
    align-items:center;
  }
  .statement-media{
    aspect-ratio:4/5;
    overflow:hidden;
    border-radius:2px;
  }
  .statement-media img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .statement-row p{
    font-size:clamp(1.4rem, 3vw, 2.4rem);
    font-weight:600;
    line-height:1.32;
    letter-spacing:-0.01em;
  }
  .statement-row .dim{color:var(--muted); font-weight:500;}
  @media (max-width:820px){
    .statement-row{
      grid-template-columns:1fr;
      gap:2rem;
      padding:8vh 6vw;
    }
  }
  .statement-note{
    font-family:'Permanent Marker', cursive;
    color:var(--pine);
    font-size:1.1rem;
    margin-top:2rem;
    display:inline-block;
    transform:rotate(-2deg);
  }

  /* ---------- SECTION: PHOTO SHOWCASE (alternating) ---------- */
  .showcase{
    padding:8vh 0 4vh;
  }
  .feature-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5vw;
    align-items:center;
    padding:9vh 6vw;
    border-top:1px solid var(--line);
  }
  .feature-row:last-child{border-bottom:1px solid var(--line);}
  .feature-row.rev{direction:rtl;}
  .feature-row.rev > *{direction:ltr;}
  .feature-media{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    border-radius:2px;
  }
  .feature-media img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform 1.4s var(--ease);
  }
  .feature-row:hover .feature-media img{transform:scale(1.045);}
  .feature-tag{
    font-family:'Permanent Marker', cursive;
    color:var(--gold);
    font-size:1rem;
    margin-bottom:1rem;
    display:inline-block;
    transform:rotate(-2deg);
  }
  .feature-title{
    font-size:clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight:700;
    line-height:1.1;
    margin-bottom:1.2rem;
    letter-spacing:-0.01em;
  }
  .feature-body{
    color:var(--muted);
    font-size:1.08rem;
    line-height:1.7;
    max-width:44ch;
  }
  @media (max-width:820px){
    .feature-row, .feature-row.rev{
      grid-template-columns:1fr;
      direction:ltr;
      gap:2rem;
      padding:6vh 6vw;
    }
  }

  /* ---------- SECTION: HORIZONTAL SCROLL "THE SUMMER" ---------- */
  .summer-section{
    padding:12vh 0 10vh;
    border-top:1px solid var(--line);
    background:var(--panel-2);
  }
  .summer-heading{
    padding:0 6vw;
    margin-bottom:4vh;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:2rem;
    flex-wrap:wrap;
  }
  .summer-heading h2{
    font-size:clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight:800;
    letter-spacing:-0.01em;
    max-width:14ch;
  }
  .summer-heading p{
    color:var(--muted);
    max-width:36ch;
    font-size:1.02rem;
    line-height:1.6;
  }
  .hscroll-track{
    display:flex;
    gap:1.6rem;
    overflow-x:auto;
    padding:0 6vw 1.6rem;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:var(--gold) transparent;
  }
  .hscroll-track::-webkit-scrollbar{height:5px;}
  .hscroll-track::-webkit-scrollbar-thumb{background:var(--gold); border-radius:10px;}
  .hcard{
    flex:0 0 auto;
    width:min(72vw, 380px);
    scroll-snap-align:start;
  }
  .hcard-media{
    position:relative;
    width:100%;
    aspect-ratio:3/4;
    overflow:hidden;
    border-radius:2px;
    margin-bottom:1.1rem;
  }
  .hcard-media img{width:100%; height:100%; object-fit:cover;}
  .hcard-num{
    position:absolute;
    top:0.9rem; left:0.9rem;
    font-family:'Permanent Marker', cursive;
    font-size:1.4rem;
    color:var(--gold);
    text-shadow:0 2px 10px rgba(0,0,0,0.6);
  }
  .hcard h3{
    font-size:1.35rem;
    font-weight:700;
    margin-bottom:0.4rem;
  }
  .hcard p{
    color:var(--muted);
    font-size:0.98rem;
    line-height:1.55;
    max-width:32ch;
  }

  /* ---------- SECTION: PARALLAX STATS ---------- */
  .stats-section{
    position:relative;
    min-height:80vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    border-top:1px solid var(--line);
    --bone:var(--overlay-bone);
    --muted:var(--overlay-muted);
    --line:var(--overlay-line);
  }
  .stats-media{
    position:absolute; inset:0;
    z-index:0;
  }
  .stats-media img{
    width:100%; height:130%;
    object-fit:cover;
    will-change:transform;
  }
  .stats-media::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(20,17,13,0.55), rgba(20,17,13,0.82));
  }
  .stats-content{
    position:relative;
    z-index:1;
    width:100%;
    padding:10vh 6vw;
  }
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2.4rem;
    max-width:1100px;
  }
  .stat b{
    display:block;
    font-size:clamp(2.2rem,4vw,3.4rem);
    font-weight:800;
    color:var(--gold);
    line-height:1;
    margin-bottom:0.5rem;
  }
  .stat span{
    color:var(--bone);
    font-size:0.98rem;
    display:block;
  }
  @media (max-width:820px){
    .stats-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:420px){
    .stats-grid{grid-template-columns:1fr; gap:1.8rem;}
  }

  /* ---------- SECTION: COMMUNITY ---------- */
  .community{
    padding:14vh 6vw;
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:6vw;
    align-items:center;
    border-top:1px solid var(--line);
  }
  .community-media{
    aspect-ratio:1/1.05;
    overflow:hidden;
    border-radius:2px;
  }
  .community-media img{width:100%;height:100%;object-fit:cover;}
  .community-title{
    font-size:clamp(1.9rem,3.6vw,2.8rem);
    font-weight:700;
    line-height:1.16;
    margin-bottom:1.4rem;
    letter-spacing:-0.01em;
  }
  .community-body{
    color:var(--muted);
    font-size:1.08rem;
    line-height:1.75;
    max-width:48ch;
  }
  .community-body + .community-body{margin-top:1.2rem;}
  @media (max-width:820px){
    .community{grid-template-columns:1fr; gap:2rem;}
  }

  /* ---------- SECTION: TESTIMONIALS SLIDER ---------- */
  .testimonial{
    padding:10vh 6vw;
    text-align:center;
    border-top:1px solid var(--line);
  }
  .testimonial-slider{
    padding:12vh 0;
    text-align:center;
    background:var(--panel);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .ts-inner{
    position:relative;
  }
  .testimonial-note{
    font-family:'Permanent Marker', cursive;
    color:var(--pine);
    font-size:1rem;
    display:inline-block;
    transform:rotate(-2deg);
    margin-bottom:2.5rem;
  }
  .ts-viewport{
    overflow:hidden;
    max-width:720px;
    margin:0 auto;
  }
  .ts-track{
    display:flex;
    transition:transform 0.6s var(--ease);
  }
  .ts-slide{
    flex:0 0 100%;
    padding:0 0.6rem;
    opacity:0.3;
    transform:scale(0.95);
    transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .ts-slide.active{
    opacity:1;
    transform:scale(1);
  }
  .ts-card{
    background:var(--panel-2);
    border-radius:6px;
    padding:2.8rem 2.4rem;
    border:1px solid var(--line);
  }
  .ts-quote-mark{
    display:block;
    font-family:'Permanent Marker', cursive;
    font-size:4rem;
    color:var(--gold);
    line-height:1;
    margin-bottom:-0.5rem;
  }
  .ts-card blockquote{
    font-size:clamp(1.2rem, 2.4vw, 1.6rem);
    font-weight:600;
    line-height:1.4;
    margin:0 auto 1.2rem;
    letter-spacing:-0.01em;
    min-height:7rem;
  }
  .ts-card cite{
    font-style:normal;
    color:var(--muted);
    font-size:0.98rem;
  }
  .ts-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.6rem;
    margin-top:2rem;
  }
  .ts-arrow{
    background:none;
    border:1px solid var(--line);
    border-radius:50%;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--bone);
    cursor:pointer;
    transition:border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
    flex-shrink:0;
  }
  .ts-arrow:hover{
    border-color:var(--gold);
    color:var(--gold);
    transform:scale(1.08);
  }
  .ts-dots{
    display:flex;
    gap:0.6rem;
  }
  .ts-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--line);
    border:none;
    cursor:pointer;
    padding:0;
    transition:background 0.25s var(--ease);
  }
  .ts-dot.active{background:var(--gold);}

  /* ---------- SECTION: CTA / FOOTER ---------- */
  .cta{
    position:relative;
    padding:16vh 6vw 6vh;
    overflow:hidden;
    border-top:1px solid var(--line);
    --bone:var(--overlay-bone);
    --muted:var(--overlay-muted);
    --line:var(--overlay-line);
  }
  .cta.cta-plain{
    background:var(--panel);
    --bone:#2B332B;
    --muted:#5C6B58;
    --line:rgba(43,51,43,0.15);
  }
  .cta-media{
    position:absolute; inset:0;
    z-index:0;
  }
  .cta-media img{width:100%;height:100%;object-fit:cover;}
  .cta-media::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(20,17,13,0.75), rgba(20,17,13,0.97) 70%);
  }
  .cta-content{
    position:relative;
    z-index:1;
  }
  .cta-title{
    font-size:clamp(2.6rem,7vw,5.6rem);
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:0.98;
    max-width:16ch;
    margin-bottom:2rem;
    color:var(--bone);
  }
  .cta-buttons{
    display:flex;
    gap:1.2rem;
    flex-wrap:wrap;
    margin-bottom:10vh;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    padding:1rem 2rem;
    border-radius:2px;
    font-weight:600;
    font-size:1rem;
    transition:transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
  }
  .btn-solid{
    background:var(--gold);
    color:#2B332B;
  }
  .btn-solid:hover{transform:translateY(-3px);}
  .btn-outline{
    border:1px solid var(--line);
    color:var(--bone);
  }
  .btn-outline:hover{
    border-color:var(--gold);
    color:var(--gold);
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:2rem;
    padding-top:4vh;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:0.95rem;
  }
  .footer-grid .logo{
    color:var(--bone);
    margin-bottom:0.8rem;
    font-size:1.1rem;
    filter:none;
    display:flex;
    align-items:center;
    gap:0.7rem;
  }
  .footer-grid .logo .footer-mark{
    height:56px;
    width:auto;
  }
  .footer-grid .logo .footer-wordmark{
    height:38px;
    width:auto;
  }
  .footer-col h4{
    color:var(--bone);
    font-weight:600;
    margin-bottom:0.9rem;
    font-size:0.95rem;
  }
  .footer-col a{
    display:block;
    margin-bottom:0.55rem;
    opacity:0.85;
  }
  .footer-col a:hover{opacity:1; color:var(--gold);}
  .whatsapp-btn{
    display:inline-flex !important;
    align-items:center;
    gap:0.5rem;
    margin-top:0.4rem;
    padding:0.65rem 1.1rem;
    border:1px solid var(--line);
    border-radius:2px;
    color:var(--bone) !important;
    font-weight:600;
    font-size:0.9rem;
    width:fit-content;
    transition:border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
  }
  .whatsapp-btn:hover{
    border-color:var(--gold);
    color:var(--gold) !important;
  }
  .footer-bottom{
    margin-top:5vh;
    color:var(--muted);
    font-size:0.85rem;
  }
  @media (max-width:760px){
    .footer-grid{grid-template-columns:1fr; gap:1.6rem;}
  }