:root{
    --black:#0a0a0a;
    --black-soft:#0a0a0a;
    --white:#f4f1ea;
    --gold:#d8a94d;
    --gold-soft:#c99b3f;
    --ease:cubic-bezier(.65,0,.35,1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html.intro-lock, html.intro-lock body{overflow:hidden;height:100%;}
  body{
    background:var(--black);
    color:var(--white);
    font-family:'Space Grotesk', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:'Didot', 'Didot LT STD', 'Playfair Display', serif; font-weight:400; letter-spacing:-0.02em;}
  a{color:inherit; text-decoration:none;}
  img,svg{display:block; max-width:100%;}

  /* ---------- INTRO / LOGO SHUTTER ---------- */
  #intro{
    position:fixed; inset:0; z-index:1000;
    background:var(--black);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:pointer; overflow:hidden;
    transition:opacity .9s var(--ease), transform .9s var(--ease);
  }
  #intro.closing-out{ opacity:0; transform:scale(1.08); pointer-events:none; }

  /* ---- film grain overlay ---- */
  .grain{
    position:absolute; inset:-50%; width:200%; height:200%;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity:.05; mix-blend-mode:overlay; pointer-events:none; z-index:2;
    animation: grainMove .9s steps(6) infinite;
  }
  @keyframes grainMove{
    0%{ transform:translate(0,0); }
    20%{ transform:translate(-2%,3%); }
    40%{ transform:translate(3%,-2%); }
    60%{ transform:translate(-3%,-3%); }
    80%{ transform:translate(2%,2%); }
    100%{ transform:translate(0,0); }
  }

  /* ---------- SHARED: pointillism + film grain background for dark sections ---------- */
  .film-bg{ position:relative; overflow:hidden; }
  .film-bg .bg-particles{
    position:absolute; inset:0; z-index:0; pointer-events:none; display:block;
  }
  .film-bg .film-grain{
    position:absolute; inset:-20%; width:140%; height:140%; z-index:0; pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity:.05; mix-blend-mode:overlay;
    animation: grainMove .9s steps(6) infinite;
  }
  .film-bg .film-content{ position:relative; z-index:1; }

  /* ---- Floating eye/shutter emblem, straddling the seam between two sections ----
     Lives OUTSIDE any .film-bg box (as a sibling between <section> elements) so it
     is never clipped by a section's overflow:hidden, and sits with equal space
     above (inside the previous section) and below (inside the next section). ---- */
  .section-divider{
    position:relative; height:0; z-index:5;
    display:flex; justify-content:center;
    pointer-events:none;
  }
  .section-divider svg{
    width:64px; height:64px; opacity:.85; overflow:visible;
    transform:translateY(-32px);
  }
  .section-divider .eye-shape{ fill:rgba(244,241,234,.9); }
  .section-divider .ring-hole{ fill:var(--black); }
  .section-divider .blade path{ fill:var(--gold); }
  .section-divider .blades-group{ animation:bladeIdle 7s ease-in-out infinite; }
  @media (max-width:760px){ .section-divider svg{ width:46px; height:46px; transform:translateY(-23px); } }
  .section-divider--lower svg{ transform:translateY(-8px); }
  @media (max-width:760px){ .section-divider--lower svg{ transform:translateY(-4px); } }

  /* ---- Soft dissolve for the first film-bg section right after a hero:
     fades the particles/grain in from solid black instead of a hard cut ---- */
  .film-bg.fade-in-top::before{
    content:''; position:absolute; top:0; left:0; right:0; height:220px; z-index:1;
    background:linear-gradient(180deg, var(--black) 0%, rgba(10,10,10,.6) 55%, transparent 100%);
    pointer-events:none;
  }

  /* ---- "Be Different / Be You / Be Art" word morph ---- */
  .intro-words{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    pointer-events:none; z-index:1;
  }
  .intro-word{
    position:absolute; opacity:0; filter:blur(10px); white-space:nowrap;
    font-family:'Didot', 'Didot LT STD', 'Playfair Display', serif; font-weight:400;
    font-size:clamp(1.9rem, 7.5vw, 4.8rem);
    text-transform:uppercase; letter-spacing:.015em;
    color:var(--white);
  }
  .intro-word.word-1{
    animation: wordIn .7s var(--ease) forwards 0s,
               wordOut .6s var(--ease) forwards 1.4s;
  }
  .intro-word.word-2{
    animation: wordIn .7s var(--ease) forwards 1.2s,
               wordOut .6s var(--ease) forwards 2.6s;
  }
  .intro-word.word-3{
    animation: wordIn .7s var(--ease) forwards 2.4s,
               wordOut .6s var(--ease) forwards 3.8s;
  }
  @keyframes wordIn{
    0%{ opacity:0; filter:blur(10px); transform:scale(.94); }
    100%{ opacity:1; filter:blur(0); transform:scale(1); }
  }
  @keyframes wordOut{
    0%{ opacity:1; filter:blur(0); transform:scale(1); }
    100%{ opacity:0; filter:blur(10px); transform:scale(1.05); }
  }

  .logo-wrap{
    width:min(46vw, 320px);
    display:flex; flex-direction:column; align-items:center;
    gap:28px;
    opacity:0; filter:blur(6px);
    animation: wordIn .9s var(--ease) forwards 4.35s;
  }

  /* ---- BeArt logo component (real artwork: shell PNG + animated gold blades) ---- */
  .beart-logo{ display:block; position:relative; width:var(--logo-w, 44px); aspect-ratio:645/493; flex-shrink:0; }
  .beart-logo .blade-svg, .beart-logo .shell-img{ position:absolute; inset:0; width:100%; height:100%; }
  .beart-logo .shell-img{ max-width:none; }
  .beart-logo .blade-shape{ fill:var(--gold); }

  #intro .blade-group{ animation: bladeIdle 6s ease-in-out infinite; }

  @keyframes bladeIdle{
    0%,100%{ transform:scale(1) rotate(0deg); }
    50%{ transform:scale(.97) rotate(-4deg); }
  }
  /* Real camera-iris motion: the whole aperture spins down to a near-closed
     point (like an f-stop closing down), then spins back open — matching the
     reference video (intro banner 2.mp4). */
  @keyframes shutterClick{
    0%   { transform:scale(1) rotate(0deg); }
    45%  { transform:scale(.1) rotate(150deg); }
    55%  { transform:scale(.1) rotate(150deg); }
    100% { transform:scale(1) rotate(360deg); }
  }
  .shutter-active #intro .blade-group{
    animation: shutterClick .9s var(--ease) 1;
  }
  .beart-logo--interactive:hover .blade-group{
    animation: shutterClick 1.1s var(--ease) 1;
  }

  .scroll-hint{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-size:11px; letter-spacing:.35em; text-transform:uppercase;
    color:var(--white); opacity:.6;
    animation: hintFloat 2.2s ease-in-out infinite;
    transition:opacity .4s ease;
  }
  .shutter-active .scroll-hint{ opacity:0; }
  @keyframes hintFloat{
    0%,100%{ transform:translateY(0); opacity:.6;}
    50%{ transform:translateY(6px); opacity:.95;}
  }
  .scroll-hint svg{ width:14px; height:14px; }

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:200;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 5vw;
    opacity:0; transform:translateY(-12px);
    transition:opacity .8s var(--ease) .25s, transform .8s var(--ease) .25s;
    mix-blend-mode:normal;
  }
  header.visible{ opacity:1; transform:translateY(0); }
  header .beart-logo{ cursor:pointer; }

  nav ul{ display:flex; gap:38px; list-style:none; }
  nav a{
    font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    position:relative; padding-bottom:4px;
  }
  nav a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:var(--gold); transition:width .35s var(--ease);
  }
  nav a:hover::after{ width:100%; }

  /* ---------- HERO ---------- */
  #hero{
    min-height:100vh; position:relative; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center;
    padding:0 6vw; overflow:hidden;
    background:var(--black);
  }
  /* Photo-based sub-page heroes (no video mosaic) don't need a full 100vh —
     that was leaving a huge dead gap above "What We Provide" on shorter content. */
  #hero.hero-photo{ min-height:62vh; padding-top:120px; padding-bottom:70px; }
  .hero-mosaic{
    position:absolute; inset:0; display:flex; z-index:0;
    --slant: 4.5vw;
  }
  .mosaic-col{
    flex:1 1 0; position:relative; overflow:hidden;
    filter:grayscale(.35) brightness(.5) contrast(1.15) saturate(.9);
    clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  }
  .mosaic-col:not(:first-child){ margin-left: calc(var(--slant) * -1); }
  .mosaic-col:first-child{
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  }
  .mosaic-col:last-child{
    clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
  }
  .mosaic-col video{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  /* Single full-bleed photo hero (used on sub-pages like Real Estate) */
  .hero-photo-bg{ position:absolute; inset:0; z-index:0; }
  .hero-photo-bg img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(.3) brightness(.5) contrast(1.15) saturate(.9);
  }
  .hero-scrim{
    position:absolute; inset:0; z-index:1;
    background:
      radial-gradient(ellipse at 50% 28%, rgba(216,169,77,.10), transparent 60%),
      linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.55) 42%, rgba(10,10,10,.88) 82%, rgba(10,10,10,1) 100%),
      linear-gradient(90deg, rgba(10,10,10,.7), transparent 22%, transparent 78%, rgba(10,10,10,.7));
  }
  #hero .eyebrow, #hero h1, #hero p, #hero .hero-tagline, #hero .hero-cue{ position:relative; z-index:2; }
  @media (max-width:760px){
    .hero-mosaic{ --slant: 7vw; }
    .mosaic-col:nth-child(3), .mosaic-col:nth-child(4){ display:none; }
    .mosaic-col:nth-child(2){
      clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
    }
  }
  .eyebrow{
    font-size:12px; letter-spacing:.4em; text-transform:uppercase;
    color:var(--gold); margin-bottom:22px;
  }
  #hero h1{
    font-size:clamp(2.3rem, 6.5vw, 5.2rem); line-height:1;
    text-transform:uppercase; letter-spacing:-.01em;
    text-shadow:0 4px 30px rgba(0,0,0,.4);
  }
  #hero .hero-tagline{
    margin-top:30px; max-width:760px; font-size:clamp(1.7rem, 4.2vw, 3rem);
    line-height:1.3; letter-spacing:.003em; color:var(--white);
    font-family:'Didot', 'Didot LT STD', 'Playfair Display', serif; font-style:italic; font-weight:400;
  }
  #hero .hero-tagline em{ color:var(--gold); font-style:normal; }
  #hero p{
    margin-top:22px; max-width:480px; font-size:15.5px; letter-spacing:.02em; line-height:1.7;
    color:rgba(244,241,234,.65);
  }
  .hero-cue{
    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
    font-size:11px; letter-spacing:.3em; text-transform:uppercase;
    color:rgba(244,241,234,.5);
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  .hero-cue .line{ width:1px; height:40px; background:rgba(244,241,234,.35); overflow:hidden; }
  .hero-cue .line::after{
    content:''; display:block; width:100%; height:40%; background:var(--gold);
    animation:lineDrop 2s ease-in-out infinite;
  }
  @keyframes lineDrop{
    0%{ transform:translateY(-100%); } 100%{ transform:translateY(250%); }
  }

  /* ---------- SECTION SHARED ---------- */
  section{ padding:108px 6vw; position:relative; }
  .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:64px; flex-wrap:wrap; }
  .section-head .tag{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; display:block; }
  .section-head h2{ font-size:clamp(2rem, 4.5vw, 3.6rem); }
  .section-head p{ max-width:340px; color:rgba(244,241,234,.6); font-size:14px; line-height:1.7; }

  .reveal-up{ opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal-up.visible{ opacity:1; transform:translateY(0); }

  /* ---------- CLIENTS / BROKERS (logo marquee) ---------- */
  #clients{ background:var(--black-soft); }
  #clients .marquee{ margin-top:8px; }
  .marquee{
    width:100%; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .marquee-track{
    display:flex; align-items:center; gap:14px; width:max-content;
    animation: marqueeScroll 34s linear infinite;
  }
  .marquee:hover .marquee-track{ animation-play-state:paused; }
  @keyframes marqueeScroll{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
  }
  .logo-chip{
    width:150px; height:64px; object-fit:contain; flex-shrink:0;
    opacity:.82; transition:opacity .35s var(--ease), transform .35s var(--ease);
  }
  .logo-chip:hover{ opacity:1; transform:scale(1.05); }

  /* ---------- SERVICES ---------- */
  #services{ background:var(--black); }
  .services-title{
    text-align:center; font-size:clamp(2.2rem, 5vw, 4rem);
    margin-bottom:72px;
  }
  .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .service-card{
    display:block;
    background:var(--black-soft); position:relative; cursor:pointer; overflow:hidden;
    border-radius:24px; border:1px solid rgba(244,241,234,.1);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
    transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  }
  .service-card:hover{
    transform:translateY(-8px);
    border-color:rgba(216,169,77,.4);
    box-shadow:0 40px 70px -25px rgba(0,0,0,.7);
  }
  .service-media{ aspect-ratio:4/3; overflow:hidden; }
  .service-media img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(.3) brightness(.75) contrast(1.1) saturate(.95);
    transition:transform .7s var(--ease), filter .7s var(--ease);
  }
  .service-card:hover .service-media img{
    transform:scale(1.07); filter:grayscale(.1) brightness(.8) contrast(1.1) saturate(1);
  }
  .service-body{ padding:36px 34px 66px; position:relative; }
  .service-num{
    display:block; font-size:12px; letter-spacing:.2em; color:var(--gold); margin-bottom:22px;
  }
  .service-card h3{ font-size:1.7rem; margin-bottom:16px; }
  .service-card p{ font-size:14.5px; line-height:1.75; color:rgba(244,241,234,.65); }
  .service-card .dbl-hint{
    position:absolute; right:34px; bottom:66px;
    font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold);
    opacity:0; transition:opacity .4s var(--ease);
  }
  .service-card:hover .dbl-hint{ opacity:1; }
  .service-card .arrow{
    position:absolute; right:34px; bottom:30px;
    width:26px; height:26px; border:1px solid rgba(244,241,234,.4); border-radius:50%;
    display:flex; align-items:center; justify-content:center; transition:.4s var(--ease);
  }
  .service-card:hover .arrow{ background:var(--gold); border-color:var(--gold); transform:rotate(45deg); }
  .service-card:hover .arrow svg{ stroke:#0a0a0a; }
  .service-card .arrow svg{ width:12px; height:12px; stroke:var(--white); }
  @media (max-width:860px){ .services-grid{ grid-template-columns:1fr; } }

  /* ---------- WHY CHOOSE US / TESTIMONIALS ---------- */
  #trust{ background:var(--black-soft); }
  .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-bottom:100px; }
  .why-item{ text-align:center; }
  .why-item .why-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:52px; height:52px; border:1px solid rgba(216,169,77,.4); border-radius:50%;
    font-family:'Didot', 'Didot LT STD', 'Playfair Display', serif; font-size:1.3rem; color:var(--gold);
    margin-bottom:20px;
  }
  .why-item h3{ font-size:1.2rem; }
  @media (max-width:760px){ .why-grid{ grid-template-columns:1fr; gap:36px; margin-bottom:64px; } }

  /* ---------- RE SERVICES GRID (small vertical photo cards, caption overlaid inside) ---------- */
  .re-services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px 24px; justify-items:center; }
  .re-service-card{
    display:block; position:relative; width:75%; aspect-ratio:3/4;
    border-radius:14px; overflow:hidden;
    border:1px solid rgba(244,241,234,.1);
    background:linear-gradient(160deg, rgba(216,169,77,.16), rgba(10,10,10,.4));
  }
  .re-service-media{ position:absolute; inset:0; }
  .re-service-media img,
  .re-service-media video{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(.25) brightness(.7) contrast(1.08) saturate(.95);
    transition:transform .7s var(--ease), filter .7s var(--ease);
  }
  .re-service-card:hover .re-service-media img,
  .re-service-card:hover .re-service-media video{ transform:scale(1.06); filter:grayscale(.05) brightness(.78) contrast(1.08) saturate(1); }
  .re-service-media.icon-tile{ display:flex; align-items:center; justify-content:center; }
  .re-service-media.icon-tile svg{ width:30%; height:30%; stroke:var(--gold); fill:none; stroke-width:1.4; opacity:.85; }
  .re-service-media.contain-media{ display:flex; align-items:center; justify-content:center; }
  .re-service-media.contain-media img{
    width:88%; height:88%; object-fit:contain; filter:none;
  }
  .re-service-card:hover .re-service-media.contain-media img{ transform:none; filter:none; }
  .re-service-media.contain-media.light-pad{ background:rgba(244,241,234,.94); }
  .re-service-media.contain-media.solid-dark{ background:rgb(23,24,26); }
  .re-service-media.hover-reveal img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:grayscale(.1) brightness(.82) contrast(1.06) saturate(.95);
    transform:none !important;
  }
  .re-service-media.hover-reveal .hr-base{ opacity:1; }
  .re-service-media.hover-reveal .hr-reveal{ opacity:0; transition:opacity 1.1s var(--ease); }
  .re-service-card:hover .re-service-media.hover-reveal .hr-reveal{ opacity:1; filter:grayscale(0) brightness(.92) contrast(1.05) saturate(1); }
  .re-service-media.hover-reveal::after{
    content:'Hover to stage'; position:absolute; left:14px; top:12px; z-index:2;
    font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
    opacity:.85; transition:opacity .4s var(--ease); pointer-events:none;
  }
  .re-service-card:hover .re-service-media.hover-reveal::after{ opacity:0; }
  .re-service-media.alt-media{ display:flex; align-items:center; justify-content:center; background:rgba(10,10,10,.6); }
  .re-service-media.alt-media .alt-img{
    position:absolute; inset:0; margin:auto;
    width:86%; height:86%; object-fit:contain; filter:none;
    opacity:0; animation:reAltFade 9s ease-in-out infinite;
  }
  .re-service-media.alt-media .alt-img:nth-child(1){ animation-delay:0s; }
  .re-service-media.alt-media .alt-img:nth-child(2){ animation-delay:4.5s; }
  .re-service-card:hover .re-service-media.alt-media .alt-img{ transform:none; filter:none; }
  @keyframes reAltFade{
    0%   { opacity:1; }
    42%  { opacity:1; }
    50%  { opacity:0; }
    92%  { opacity:0; }
    100% { opacity:1; }
  }
  .re-service-text{
    position:absolute; left:0; right:0; bottom:0; z-index:1;
    padding:16px 16px 17px;
    border-top:1px solid var(--gold);
    background:linear-gradient(0deg, rgba(10,10,10,.92) 60%, rgba(10,10,10,.55) 100%);
  }
  .re-service-text h3{ font-size:1.15rem; line-height:1.3; }
  @media (max-width:860px){ .re-services-grid{ grid-template-columns:repeat(2,1fr); } .re-service-card{ width:85%; } }
  @media (max-width:560px){ .re-services-grid{ grid-template-columns:1fr; } .re-service-card{ width:70%; } }

  /* ---------- HOW IT WORKS (reuses .why-grid look, floating gold line-icons per step) ---------- */
  #how-it-works{ padding-top:86px; }
  .steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
  .steps-grid .why-item p{ margin-top:12px; font-size:13.5px; line-height:1.65; color:rgba(244,241,234,.6); }
  .steps-grid .step-icon{
    width:70px; height:70px; margin:0 auto 22px; color:var(--gold);
    animation:stepFloat 4.5s ease-in-out infinite;
  }
  .steps-grid .step-icon svg{ width:100%; height:100%; overflow:visible; }
  .steps-grid .why-item:nth-child(2) .step-icon{ animation-delay:.5s; }
  .steps-grid .why-item:nth-child(3) .step-icon{ animation-delay:1s; }
  @keyframes stepFloat{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
  }
  @media (max-width:760px){ .steps-grid{ grid-template-columns:1fr; gap:36px; } }

  .testimonial-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(244,241,234,.12); }
  .testimonial-card{
    background:var(--black-soft); padding:34px 28px; display:flex; flex-direction:column; justify-content:space-between; min-height:220px;
  }
  .testimonial-card p{ font-size:14.5px; line-height:1.7; color:rgba(244,241,234,.82); }
  .testimonial-card .who{ margin-top:22px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
  @media (max-width:900px){ .testimonial-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .testimonial-grid{ grid-template-columns:1fr; } }

  /* ---------- REVIEWS (static intro left, auto-scrolling column right, no photos) ---------- */
  .reviews-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
  .reviews-intro{ padding-left:15%; }
  .reviews-score{ display:flex; align-items:baseline; gap:18px; }
  .score-num{ font-family:'Didot', 'Didot LT STD', 'Playfair Display', serif; font-size:4.6rem; color:var(--white); line-height:1; }
  .score-stars{ color:var(--gold); font-size:1.9rem; letter-spacing:.12em; }
  .reviews-count{ margin-top:12px; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
  .reviews-intro > p:last-child{ margin-top:24px; font-size:17.5px; line-height:1.8; color:rgba(244,241,234,.68); max-width:38ch; }

  .reviews-scroll{
    position:relative; height:460px; overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg, transparent, black 12%, black 88%, transparent);
    mask-image:linear-gradient(180deg, transparent, black 12%, black 88%, transparent);
  }
  .reviews-track{
    display:flex; flex-direction:column; gap:18px;
    animation: reviewsScrollY 34s linear infinite;
  }
  .reviews-scroll:hover .reviews-track{ animation-play-state:paused; }
  @keyframes reviewsScrollY{
    0%{ transform:translateY(0); }
    100%{ transform:translateY(-50%); }
  }
  .review-card{
    flex-shrink:0; background:rgba(244,241,234,.03); border:1px solid rgba(244,241,234,.1);
    border-radius:10px; padding:22px 24px;
  }
  .review-card .stars{ color:var(--gold); font-size:12px; letter-spacing:.15em; margin-bottom:10px; }
  .review-card p{ font-size:13.5px; line-height:1.65; color:rgba(244,241,234,.8); }
  .review-card .who{ margin-top:14px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
  .review-card .who .src{ color:rgba(244,241,234,.45); text-transform:none; letter-spacing:0; }
  @media (max-width:900px){
    .reviews-layout{ grid-template-columns:1fr; gap:32px; }
    .reviews-intro{ padding-left:0; }
    .reviews-intro > p:last-child{ max-width:none; }
    .reviews-scroll{ height:380px; }
  }

  /* ---------- REEL ---------- */
  #reel{ background:var(--black); }
  .reel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
  .reel-card{
    position:relative; aspect-ratio:4/5; overflow:hidden; cursor:pointer;
    background:var(--black);
  }
  .reel-card::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 30% 20%, rgba(216,169,77,.18), transparent 55%);
    opacity:0; transition:opacity .6s var(--ease);
  }
  .reel-card:hover::before{ opacity:1; }
  .reel-card:hover img, .reel-card:hover .ph{ transform:scale(1.06); }
  .reel-card .ph{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; transition:transform .8s var(--ease);
    filter:grayscale(.1) brightness(.82) contrast(1.08);
  }
  .reel-meta{
    position:absolute; left:0; right:0; bottom:0; padding:22px;
    display:flex; justify-content:space-between; align-items:flex-end;
    background:linear-gradient(0deg, rgba(0,0,0,.75), transparent 70%);
  }
  .reel-meta .cat{ font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); }
  .reel-meta h3{ font-size:1.15rem; margin-top:6px; }
  .reel-meta .arrow{ width:26px; height:26px; border:1px solid rgba(244,241,234,.4); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.4s var(--ease); flex-shrink:0; }
  .reel-card:hover .arrow{ background:var(--gold); border-color:var(--gold); transform:rotate(45deg); }
  .reel-card:hover .arrow svg{ stroke:#0a0a0a; }
  .reel-meta .arrow svg{ width:12px; height:12px; stroke:var(--white); }

  @media (max-width:900px){ .reel-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .reel-grid{ grid-template-columns:1fr; } }

  /* ---------- PACKAGES (For Properties) ---------- */
  .packages-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch; }
  .package-card{
    position:relative; display:flex; flex-direction:column;
    background:linear-gradient(160deg, rgba(216,169,77,.10), rgba(10,10,10,.5));
    border:1px solid rgba(244,241,234,.1); border-radius:16px; overflow:hidden;
  }
  .package-card.featured{ border-color:rgba(216,169,77,.55); }
  .package-badge{
    position:absolute; top:14px; right:14px; z-index:3;
    background:var(--gold); color:var(--black); font-weight:600;
    font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
    padding:5px 10px; border-radius:20px;
  }
  .package-mosaic{ display:grid; gap:2px; aspect-ratio:16/10; }
  .package-mosaic.tiles-2{ grid-template-columns:1fr 1fr; }
  .package-mosaic.tiles-4{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
  .package-mosaic.tiles-5{ grid-template-columns:repeat(4,1fr); grid-template-rows:1fr 1fr; }
  .package-mosaic.tiles-5 .pkg-tile:nth-child(1),
  .package-mosaic.tiles-5 .pkg-tile:nth-child(4),
  .package-mosaic.tiles-5 .pkg-tile:nth-child(5){ grid-column:span 2; }
  .pkg-tile{ position:relative; overflow:hidden; background:rgba(10,10,10,.5); }
  .pkg-tile img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(.2) brightness(.75) contrast(1.08) saturate(.95);
    transition:transform .6s var(--ease), filter .6s var(--ease);
  }
  .pkg-tile:hover img{ transform:scale(1.08); filter:grayscale(0) brightness(.85) contrast(1.05) saturate(1); }
  .pkg-tile span{
    position:absolute; left:7px; bottom:6px; z-index:1;
    font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
    background:rgba(10,10,10,.6); padding:3px 7px; border-radius:3px;
  }
  .pkg-tile.tile-contain{ background:rgb(23,24,26); display:flex; align-items:center; justify-content:center; }
  .pkg-tile.tile-contain img{ width:80%; height:80%; object-fit:contain; filter:none; }
  .pkg-tile.tile-contain:hover img{ transform:none; filter:none; }
  .package-body{ padding:22px 22px 26px; display:flex; flex-direction:column; flex:1; }
  .package-body h3{ font-size:1.3rem; margin-bottom:4px; }
  .package-sub{ font-size:12.5px; color:rgba(244,241,234,.55); margin-bottom:14px; }
  .package-features{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:8px; flex:1; }
  .package-features li{ position:relative; padding-left:16px; font-size:12.5px; line-height:1.5; color:rgba(244,241,234,.75); }
  .package-features li::before{ content:''; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--gold); }
  .package-cta{
    display:block; text-align:center; padding:12px 0; border:1px solid var(--gold); border-radius:30px;
    color:var(--gold); font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
    transition:background .3s var(--ease), color .3s var(--ease);
  }
  .package-cta:hover{ background:var(--gold); color:var(--black); }
  .package-card.featured .package-cta{ background:var(--gold); color:var(--black); }
  .package-card.featured .package-cta:hover{ background:transparent; color:var(--gold); }
  @media (max-width:900px){ .packages-grid{ grid-template-columns:1fr; max-width:460px; margin:0 auto; } }

  /* ---------- ABOUT ---------- */
  #about{ background:var(--black-soft); }
  .about-grid{ max-width:720px; }
  .about-grid p{ font-size:17px; line-height:1.85; color:rgba(244,241,234,.78); }
  .about-grid p + p{ margin-top:22px; }

  /* ---------- BOOKING FORM ---------- */
  .booking-form{ max-width:820px; margin:0 auto; }
  .bf-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:22px; }
  .bf-field{ display:flex; flex-direction:column; gap:8px; }
  .bf-field.bf-full{ margin-bottom:26px; }
  .bf-field.bf-full + .bf-field.bf-full{ margin-top:14px; }
  .bf-field label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
  .bf-field input, .bf-field select, .bf-field textarea{
    background:rgba(244,241,234,.04); border:1px solid rgba(244,241,234,.18); border-radius:8px;
    padding:13px 15px; color:var(--white); font-family:'Space Grotesk', sans-serif; font-size:14px;
    transition:border-color .3s var(--ease), background .3s var(--ease);
  }
  .bf-field input::placeholder, .bf-field textarea::placeholder{ color:rgba(244,241,234,.35); }
  .bf-field input:focus, .bf-field select:focus, .bf-field textarea:focus{
    outline:none; border-color:var(--gold); background:rgba(244,241,234,.07);
  }
  .bf-field select{ cursor:pointer; }
  .bf-field select option{ background:var(--black); color:var(--white); }
  .bf-field select optgroup{ background:var(--black); color:var(--gold); font-style:normal; }
  .bf-addons{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 20px; }
  .bf-check{
    display:flex; align-items:center; gap:10px; cursor:pointer;
    font-size:13.5px; color:rgba(244,241,234,.75);
  }
  .bf-check input{
    appearance:none; width:17px; height:17px; flex-shrink:0;
    border:1px solid rgba(244,241,234,.35); border-radius:4px; cursor:pointer;
    position:relative; transition:border-color .3s var(--ease), background .3s var(--ease);
  }
  .bf-check input:checked{ background:var(--gold); border-color:var(--gold); }
  .bf-check input:checked::after{
    content:''; position:absolute; left:5px; top:1px; width:5px; height:9px;
    border:solid var(--black); border-width:0 2px 2px 0; transform:rotate(45deg);
  }
  @media (max-width:560px){ .bf-addons{ grid-template-columns:1fr; } }
  .bf-field textarea{ resize:vertical; min-height:96px; font-family:'Space Grotesk', sans-serif; }
  .bf-submit{
    display:block; width:100%; padding:16px 0; margin-top:6px;
    background:var(--gold); color:var(--black); border:none; border-radius:30px;
    font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
    cursor:pointer; transition:background .3s var(--ease), transform .3s var(--ease);
  }
  .bf-submit:hover{ background:var(--white); transform:translateY(-2px); }
  .bf-note{ margin-top:16px; text-align:center; font-size:12px; color:rgba(244,241,234,.45); }
  @media (max-width:700px){ .bf-row{ grid-template-columns:1fr; gap:22px; } }

  /* ---------- ABOUT ---------- */
  .about-layout{ display:grid; grid-template-columns:0.9fr 1.4fr; gap:70px; align-items:center; }
  .about-logo-card{
    display:flex; align-items:center; justify-content:center; padding:10px;
  }
  .about-logo-card img{ width:100%; height:auto; display:block; filter:drop-shadow(0 18px 34px rgba(0,0,0,.45)); }
  .about-copy{ max-width:56ch; margin:0 auto; }
  .about-copy p{
    color:rgba(244,241,234,.78); font-size:18.5px; line-height:1.85;
  }
  .about-copy p + p{ margin-top:22px; }
  .about-copy strong{ color:var(--gold); font-weight:600; }
  @media (max-width:860px){
    .about-layout{ grid-template-columns:1fr; gap:36px; }
    .about-logo-card{ max-width:320px; margin:0 auto; }
    .about-copy{ max-width:none; margin:0; }
  }

  /* ---------- FOOTER ---------- */
  footer{ padding:70px 6vw 40px; border-top:1px solid rgba(244,241,234,.12); }
  footer .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
    padding-bottom:36px; border-bottom:1px solid rgba(244,241,234,.1);
  }
  footer .fw{ display:flex; align-items:center; gap:14px; }
  footer .fw span{ font-family:'Didot', 'Didot LT STD', 'Playfair Display', serif; font-size:1.2rem; letter-spacing:0em; }
  footer .footer-tag{
    margin-top:12px; font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--gold);
  }
  footer .flinks{ display:flex; gap:24px; margin-top:18px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,241,234,.55); }
  footer .flinks a:hover{ color:var(--gold); }
  footer .footer-label{
    display:block; font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); margin-bottom:14px;
  }
  footer .footer-col p{ font-size:13.5px; line-height:1.7; color:rgba(244,241,234,.65); }
  footer .footer-col p + p{ margin-top:10px; }
  footer .footer-col a{ color:rgba(244,241,234,.65); }
  footer .footer-col a:hover{ color:var(--gold); }
  footer .fnote{ width:100%; font-size:11px; color:rgba(244,241,234,.35); margin-top:24px; letter-spacing:.05em; }
  @media (max-width:860px){
    footer .footer-grid{ grid-template-columns:1fr 1fr; gap:32px 24px; }
  }
  @media (max-width:560px){
    footer .footer-grid{ grid-template-columns:1fr; }
  }