:root{
    --bg: #080808;
    --card: #111111;
    --emerald: #0F8B6A;
    --emerald-bright: #14B589;
    --gold: #C8A96A;
    --gold-soft: #C8A96A99;
    --text: #FAFAFA;
    --muted: #C9C9C9;
    --hairline: rgba(250,250,250,0.08);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{
    background-color:#080808;
    color-scheme:dark;
    -webkit-text-size-adjust:100%;
    overflow-x:hidden;
    width:100%;
  }
  html.lenis{ height:auto; }
  body{
    background-color:#080808;
    color:#F2F0EC;
    font-family:'EB Garamond', Georgia, 'Times New Roman', serif;
    font-weight:400;
    font-size:17px;
    overflow-x:hidden;
    width:100%;
    cursor:default;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
  }
  /* utility face — nav, labels, buttons, eyebrows stay in the grotesk, never the serif */
  .eyebrow, nav.links a.nav-link, .btn-viewing, .contact-detail .lbl, .ca-eyebrow, .ca-note,
  footer .f-links a, footer .copy, .cp-count, .g-slide .g-tag, .lb-close, .gnav-btn{
    font-family:'Inter', sans-serif;
  }
  /* anchored sections must clear the fixed header, never sit under it */
  section{ scroll-margin-top:96px; }
  /* every section paints its own floor — nothing relies on inheritance */
  section, footer{ background-color:#080808; }
  #process, #why{ background-color:#111111; }
  ::selection{ background:var(--emerald); color:#fff; }

  h1,h2,h3,h4,.serif{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    letter-spacing:0.01em;
  }

  .eyebrow{
    font-family:'Inter', sans-serif;
    font-size:11px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:500;
  }

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

  .container{ max-width:1440px; margin:0 auto; padding:0 6vw; }

  /* ---------- scrollbar ---------- */
  ::-webkit-scrollbar{ width:6px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:#2a2a2a; }

  /* ---------- preloader ---------- */
  #preloader{
    position:fixed; inset:0; z-index:9999;
    background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    transition:opacity 1.1s ease, visibility 1.1s ease;
  }
  #preloader.hide{ opacity:0; visibility:hidden; }
  #preloader .pre-logo{
    position:relative; z-index:2;
    width:220px; height:auto;
    opacity:0;
    animation: preFade 1.8s ease forwards;
  }
  @keyframes preFade{ 0%{opacity:0; transform:scale(0.92);} 100%{opacity:1; transform:scale(1);} }
  @media (max-width:600px){
    #preloader .pre-logo{ width:170px; }
  }

  /* ---------- nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:500;
    display:flex; align-items:center; justify-content:space-between;
    padding:26px 6vw;
    background:transparent;
    backdrop-filter:blur(0px);
    border-bottom:1px solid transparent;
    transition:background .6s ease, backdrop-filter .6s ease, border-color .6s ease, padding .5s ease;
  }
  header.solid{
    background:rgba(8,8,8,0.82);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-bottom:1px solid var(--hairline);
    padding:16px 6vw;
  }
  .logo{
    font-family:'Cormorant Garamond', serif;
    font-size:24px;
    letter-spacing:0.34em;
    font-weight:500;
    display:flex; align-items:center; gap:14px;
    color:#FFFFFF;
    text-shadow:0 0 22px rgba(200,169,106,0.35);
  }
  .logo .logo-text{ display:flex; flex-direction:column; line-height:1; gap:6px; }
  .logo .logo-sub{
    font-family:'Inter', sans-serif; font-size:11px; letter-spacing:0.42em;
    color:var(--gold); font-weight:500; text-shadow:none;
  }
  .logo img{
    height:60px; width:auto;
    transition:height .5s ease, filter .5s ease, transform .5s ease;
    /* lift the emblem off the black — gold rim-light so it reads instantly */
    filter:
      drop-shadow(0 0 10px rgba(200,169,106,0.65))
      drop-shadow(0 0 26px rgba(200,169,106,0.30))
      brightness(1.22) saturate(1.25) contrast(1.08);
  }
  .logo:hover img{ transform:rotate(-4deg) scale(1.05); }
  header.solid .logo img{ height:46px; }
  footer .logo img{ height:52px; }
  @media (max-width:980px){
    .logo{ font-size:19px; letter-spacing:0.28em; gap:10px; }
    .logo .logo-sub{ font-size:9px; letter-spacing:0.32em; }
    .logo img{ height:46px; }
    header.solid .logo img{ height:40px; }
  }
  nav.links{ display:flex; align-items:center; gap:34px; }
  nav.links a.nav-link{
    font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--muted); position:relative; padding-bottom:4px;
    transition:color .35s ease;
  }
  nav.links a.nav-link::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:var(--gold); transition:width .4s ease;
  }
  nav.links a.nav-link:hover{ color:var(--text); }
  nav.links a.nav-link:hover::after{ width:100%; }

  .btn-viewing{
    font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
    border:1px solid var(--gold-soft);
    padding:12px 26px;
    color:var(--text);
    position:relative; overflow:hidden;
    transition:border-color .4s ease, color .4s ease;
  }
  .btn-viewing span{ position:relative; z-index:2; }
  .btn-viewing::before{
    content:''; position:absolute; inset:0; background:var(--gold);
    transform:translateX(-101%); transition:transform .5s cubic-bezier(.65,0,.35,1);
    z-index:1;
  }
  .btn-viewing:hover{ color:#0a0a0a; border-color:var(--gold); }
  .btn-viewing:hover::before{ transform:translateX(0); }

  .burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:600; }
  .burger span{ width:24px; height:1px; background:var(--text); display:block; transition:.3s; }

  /* ---------- hero ---------- */
  #hero{
    position:relative; height:100svh; min-height:640px;
    display:flex; align-items:flex-end;
    overflow:hidden;
  }
  #hero .bg-wrap{ position:absolute; inset:0; z-index:0; }
  #hero .bg-wrap img{
    width:100%; height:100%; object-fit:cover;
    object-position:center 30%;
    transform:scale(1.04);
    filter:brightness(0.62) saturate(1.15) contrast(1.05);
    animation: emeraldBreathe 9s ease-in-out infinite;
  }
  /* the stone should look alive — colour and light drift slowly, never static */
  @keyframes emeraldBreathe{
    0%   { filter:brightness(0.56) saturate(1.05) contrast(1.02); }
    50%  { filter:brightness(0.78) saturate(1.45) contrast(1.10); }
    100% { filter:brightness(0.56) saturate(1.05) contrast(1.02); }
  }
  /* a slow sheen travelling across the crystal — animates transform (GPU-composited)
     instead of background-position, which forces a full repaint every frame */
  #hero .bg-sheen{
    position:absolute; inset:-10% -30%; z-index:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 35%, rgba(20,181,137,0.16) 48%, rgba(200,169,106,0.10) 54%, transparent 66%);
    animation: sheenDrift 12s ease-in-out infinite;
    mix-blend-mode:screen;
    will-change:transform;
  }
  @keyframes sheenDrift{
    0%   { transform:translateX(-15%); opacity:0.35; }
    50%  { transform:translateX(15%); opacity:0.85; }
    100% { transform:translateX(-15%); opacity:0.35; }
  }
  /* once scrolled past, stop both continuous animations entirely — no ongoing cost */
  #hero.hero-offscreen .bg-wrap img,
  #hero.hero-offscreen .bg-sheen{ animation-play-state:paused; }
  #hero .bg-overlay{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0.15) 30%, rgba(8,8,8,0.35) 62%, rgba(8,8,8,0.96) 100%),
      linear-gradient(90deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0) 40%);
  }
  #particles-canvas{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0.55; }

  /* ---------- ambient particles — drift over the whole page, not just the hero ---------- */
  #ambientParticles{
    position:fixed; inset:0; z-index:40; overflow:hidden; pointer-events:none;
  }
  .amb-p{
    position:absolute; bottom:-12px; border-radius:50%;
    opacity:0; will-change:transform, opacity;
    animation-name:ambFloat; animation-timing-function:linear; animation-iteration-count:infinite;
  }
  @keyframes ambFloat{
    0%   { transform:translate(0,0); opacity:0; }
    8%   { opacity:var(--op, 0.25); }
    92%  { opacity:var(--op, 0.25); }
    100% { transform:translate(var(--drift, 24px), -112vh); opacity:0; }
  }

  /* ---------- spark burst — lives INSIDE the preloader, behind the logo (z-index 1,
     logo is z-index 2), so sparks genuinely fly out from behind the mark rather than
     being hidden behind the preloader's opaque background. ---------- */
  #sparkBurst{
    position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;
  }
  .spark-p{
    position:absolute; left:50%; top:50%; border-radius:50%;
    transform:translate(-50%,-50%) scale(0.3); opacity:0;
    animation-name:sparkFly; animation-timing-function:cubic-bezier(.16,.84,.44,1); animation-fill-mode:forwards;
  }
  @keyframes sparkFly{
    0%   { transform:translate(-50%,-50%) scale(0.2); opacity:1; }
    15%  { opacity:1; }
    100% { transform:translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1); opacity:0; }
  }

  .hero-content{
    position:relative; z-index:2; width:100%;
    padding:0 6vw 15vw;
  }
  .hero-content .eyebrow{ display:block; margin-bottom:22px; opacity:0; }
  .hero-title{
    font-size:clamp(56px, 11vw, 168px);
    line-height:0.92;
    letter-spacing:0.03em;
    font-weight:400;
    color:var(--text);
  }
  .hero-title .r{ display:block; overflow:hidden; }
  .hero-title .r span{ display:block; transform:translateY(110%); }
  .hero-gems-row{ overflow:hidden; margin-top:clamp(10px, 1.6vw, 22px); }
  .hero-gems-row .hero-gems{
    display:flex; align-items:center; gap:18px;
    transform:translateY(110%);
    font-family:'Inter', sans-serif; font-weight:500;
    font-size:clamp(13px, 1.6vw, 20px); letter-spacing:0.5em;
    color:var(--gold);
  }
  .hero-gems .hg-line{ width:34px; height:1px; background:var(--gold); opacity:0.6; flex-shrink:0; }
  .hero-sub{
    margin-top:26px; max-width:560px;
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(18px, 2.1vw, 26px);
    color:var(--muted);
    font-style:italic;
    font-weight:400;
    line-height:1.5;
    opacity:0;
  }
  .hero-bottom-row{
    margin-top:36px; display:flex; align-items:center; gap:32px; flex-wrap:wrap;
    opacity:0;
  }

  /* ---------- section basics ---------- */
  section{ position:relative; }
  .section-pad{ padding:50px 0; }
  .section-pad-sm{ padding:36px 0; }

  .reveal{ opacity:0; transform:translateY(28px); }

  /* ---------- about ---------- */
  #about .grid{
    display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
  }
  #about .text-col{
    display:flex; flex-direction:column; justify-content:center;
    padding:52px 7vw 52px 6vw;
  }
  #about .img-col{ position:relative; height:82vh; min-height:520px; overflow:hidden; }
  #about .img-col img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); }
  #about h2{ font-size:clamp(34px,4vw,54px); margin:20px 0 30px; font-style:italic; font-weight:400; }
  #about p{ color:#D2D2D2; font-size:16px; line-height:1.9; max-width:480px; margin-bottom:18px; font-weight:300; }
  #about .signature-line{ margin-top:34px; font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold); font-size:19px; }

  /* ---------- collection sections ---------- */
  /* ---------- leadership ---------- */
  #leadership{ padding:56px 0 96px; }
  .lead-card{
    display:flex; align-items:center; gap:30px;
    border:1px solid var(--hairline); border-top:1px solid rgba(200,169,106,0.5);
    padding:30px 36px; background:rgba(17,17,17,0.4);
  }
  .lead-photo{
    flex:0 0 auto; width:76px; height:96px; overflow:hidden;
    border:1px solid rgba(200,169,106,0.4); border-radius:2px;
  }
  .lead-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; filter:saturate(1.05) contrast(1.03); }
  .lead-text .eyebrow{ display:block; margin-bottom:8px; }
  .lead-text h3{ font-size:22px; font-style:italic; line-height:1.1; margin-bottom:3px; }
  .lead-role{
    display:block; font-family:'Inter',sans-serif; font-size:10px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--muted); margin-bottom:12px;
  }
  .lead-text p{ color:#DEDEDE; font-size:14px; line-height:1.8; max-width:600px; }
  @media (max-width:980px){
    .lead-card{ gap:18px; padding:24px 20px; }
    .lead-photo{ width:60px; height:76px; }
    .lead-text h3{ font-size:19px; }
  }

  .collection{
    position:relative; min-height:96vh; display:flex; align-items:center;
    overflow:hidden;
  }
  .collection .cbg{ position:absolute; inset:0; z-index:0; }
  .collection .cbg img{ width:100%; height:100%; object-fit:cover; object-position:center center; transform:scale(1.03); }
  /* the sapphire photo has the stone in the upper third with plain background below —
     bias the crop upward so the gem reads clearly instead of empty space */
  #sapphireImg{ object-position:center 6%; }
  .collection .cbg::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.65) 45%, rgba(8,8,8,0.25) 100%);
  }
  .collection.right-align .cbg::after{
    background:linear-gradient(270deg, rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.65) 45%, rgba(8,8,8,0.25) 100%);
  }
  .collection-content{ position:relative; z-index:1; max-width:620px; padding:0 6vw; }
  .collection.right-align .collection-content{ margin-left:auto; text-align:right; }
  .collection-content .eyebrow{ display:block; margin-bottom:18px; }
  .collection-content h3{
    font-size:clamp(46px, 6.2vw, 96px); font-style:italic; line-height:1.02; margin-bottom:26px;
  }
  .collection-content p{ color:#DCDCDC; font-size:17px; line-height:1.9; max-width:460px; }
  .collection.right-align .collection-content p{ margin-left:auto; }

  /* ---------- process / rough to masterpiece ---------- */
  #process{ background:var(--card); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
  #process .grid{ display:grid; grid-template-columns:1fr 1fr; }
  #process .img-side{ position:relative; min-height:640px; overflow:hidden; }
  #process .img-side img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
  #process .timeline-side{ padding:56px 6vw; }
  #process .timeline-side .eyebrow{ display:block; margin-bottom:16px; }
  #process h2{ font-size:clamp(32px,3.6vw,50px); font-style:italic; margin-bottom:64px; max-width:480px; }

  .tl-item{ display:flex; gap:28px; padding:26px 0; border-top:1px solid var(--hairline); position:relative; }
  .tl-item:last-child{ border-bottom:1px solid var(--hairline); }
  .tl-num{ font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--gold); min-width:34px; padding-top:3px; }
  .tl-body h4{ font-size:22px; font-weight:400; margin-bottom:6px; letter-spacing:0.01em; }
  .tl-body p{ color:var(--muted); font-size:14px; line-height:1.7; max-width:380px; font-weight:300; }
  .tl-fill{ position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--emerald-bright); transition:width 1.2s cubic-bezier(.4,0,.2,1); }
  .tl-item.active .tl-fill{ width:100%; }

  /* ---------- gallery (sliding focus carousel) ---------- */
  #gallery{ padding:50px 0; overflow:hidden; }
  .gallery-head{ margin-bottom:24px; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
  .gallery-head h2{ font-size:clamp(34px,4vw,56px); font-style:italic; margin-top:18px; }
  .gallery-nav{ display:flex; gap:14px; }
  .gnav-btn{
    width:52px; height:52px; border:1px solid var(--hairline); border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:var(--text); transition:border-color .35s ease, background .35s ease, transform .35s ease;
    flex-shrink:0;
  }
  .gnav-btn:hover{ border-color:var(--gold); background:rgba(200,169,106,0.08); }
  .gnav-btn:active{ transform:scale(0.92); }
  .gnav-btn svg{ width:16px; height:16px; }

  .carousel-viewport{
    position:relative; width:100%; padding:40px 0 0;
  }
  .carousel-track{
    display:flex; align-items:center; gap:26px;
    will-change:transform;
    cursor:grab; user-select:none;
  }
  .carousel-track:active{ cursor:grabbing; }
  .g-slide{
    position:relative; flex:0 0 auto;
    width:min(52vw, 560px); aspect-ratio:4/5;
    overflow:hidden; background:var(--card);
    transform:scale(0.78); opacity:0.35; filter:brightness(0.6) saturate(0.85);
    transition:transform .75s cubic-bezier(.19,1,.22,1), opacity .75s cubic-bezier(.19,1,.22,1), filter .75s cubic-bezier(.19,1,.22,1);
    cursor:pointer;
  }
  .g-slide.is-active{
    transform:scale(1); opacity:1; filter:brightness(1) saturate(1);
  }
  .g-slide.is-adjacent{
    transform:scale(0.88); opacity:0.6; filter:brightness(0.75) saturate(0.9);
  }
  .g-slide img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform 1.4s cubic-bezier(.19,1,.22,1);
  }
  .g-slide.is-active img{ transform:scale(1.0); }
  .g-slide:not(.is-active) img{ transform:scale(1.1); }
  .g-slide .g-tag{
    position:absolute; left:22px; bottom:22px; font-size:11px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--text); opacity:0; transition:opacity .5s ease .1s;
  }
  .g-slide.is-active .g-tag{ opacity:1; }
  .g-slide .g-tag::before{ content:''; display:inline-block; width:16px; height:1px; background:var(--gold); margin-right:10px; vertical-align:middle; }

  .carousel-progress{
    margin-top:48px; display:flex; align-items:center; gap:18px; justify-content:center;
  }
  .cp-track{ width:180px; height:1px; background:var(--hairline); position:relative; }
  .cp-fill{ position:absolute; left:0; top:0; height:1px; background:var(--gold); width:0; transition:width .5s ease; }
  .cp-count{ font-size:11px; letter-spacing:0.14em; color:var(--muted); font-variant-numeric:tabular-nums; }

  #lightbox{
    position:fixed; inset:0; z-index:2000; background:rgba(6,6,6,0.97);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;
    padding:40px;
  }
  #lightbox.open{ opacity:1; visibility:visible; }
  #lightbox img{ max-height:88vh; max-width:88vw; object-fit:contain; }
  #lightbox .lb-close{
    position:absolute; top:30px; right:40px; font-size:13px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--muted); cursor:pointer;
  }
  #lightbox .lb-close:hover{ color:var(--text); }

  /* ---------- why tanara ---------- */
  #why{ background:var(--card); padding:36px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
  #why .why-head h2{ font-size:clamp(34px,4vw,56px); font-style:italic; margin-top:18px; max-width:640px; }
  .why-grid{ margin-top:20px; display:grid; grid-template-columns:repeat(3, 1fr); }
  .why-card{
    padding:22px 22px; border-top:1px solid var(--hairline); border-left:1px solid var(--hairline);
    display:flex; flex-direction:column; justify-content:flex-start;
    transition:background .5s ease;
  }
  .why-card:nth-child(3n){ border-right:1px solid var(--hairline); }
  .why-card:nth-last-child(-n+3){ border-bottom:1px solid var(--hairline); }
  .why-card:hover{ background:rgba(15,139,106,0.045); }
  .why-card .wc-mark{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold); font-size:15px; }
  .why-card h4{ font-size:23px; font-weight:400; margin:16px 0 8px; }
  .why-card p{ color:var(--muted); font-size:14px; line-height:1.7; font-weight:300; }

  /* ---------- exclusivity ---------- */
  #exclusivity{
    padding:50px 0;
    background:
      radial-gradient(ellipse 800px 500px at 90% 15%, rgba(15,139,106,0.10), transparent 60%),
      var(--bg);
  }
  .exclusivity-grid{
    display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start;
  }
  .ex-lead h2{
    font-size:clamp(34px,4vw,54px); line-height:1.14; margin-top:18px; font-weight:400;
  }
  .ex-lead h2 em{ font-style:italic; color:var(--gold); }
  .ex-copy p{ color:#DEDEDE; font-size:16.5px; line-height:1.95; margin-bottom:24px; max-width:560px; font-weight:300; }
  .ex-copy .signature-line{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold); font-size:21px; margin-top:8px; }

  /* ---------- vision & mission ---------- */
  .vm-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px;
  }
  .vm-card{
    border:1px solid var(--hairline); border-top:1px solid var(--gold-soft);
    background:rgba(17,17,17,0.5);
    padding:48px 44px;
    transition:background .5s ease, border-color .5s ease;
  }
  .vm-card:hover{ background:rgba(15,139,106,0.06); border-top-color:var(--gold); }
  .vm-label{
    font-family:'Cormorant Garamond', serif; font-style:italic;
    font-size:26px; color:var(--gold); display:block; margin-bottom:18px;
  }
  .vm-card p{ color:var(--text); font-size:16px; line-height:1.9; font-weight:300; opacity:0.88; }
  @media (max-width: 980px){ .vm-grid{ grid-template-columns:1fr; margin-top:60px; } }

  /* ---------- clients ---------- */
  #clients{ padding:44px 0; text-align:center; }
  #clients .eyebrow{ display:block; margin-bottom:20px; }
  #clients h2{ font-size:clamp(24px,2.6vw,34px); font-style:italic; max-width:620px; margin:0 auto 40px; line-height:1.3; color:#E6E6E6; font-weight:400; }
  .client-list{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0;
    border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:6px 0;
  }
  .client-list span{
    font-family:'Cormorant Garamond', serif; font-size:17px; color:var(--text);
    padding:12px 24px; letter-spacing:0.02em; position:relative;
  }
  .client-list span:not(:first-child){ border-left:1px solid var(--hairline); }

  /* ---------- contact ---------- */
  #contact{
    position:relative; padding:50px 0 46px; overflow:hidden;
    background:
      radial-gradient(ellipse 900px 500px at 15% 10%, rgba(15,139,106,0.16), transparent 60%),
      radial-gradient(ellipse 700px 500px at 85% 90%, rgba(200,169,106,0.08), transparent 60%),
      var(--bg);
    border-top:1px solid var(--hairline);
  }
  .contact-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:80px; align-items:center; }
  #contact .eyebrow{ display:block; margin-bottom:20px; }
  #contact h2{ font-size:clamp(38px,4.6vw,64px); font-style:italic; margin-bottom:26px; line-height:1.06; }
  #contact .contact-copy{ color:#D6D6D6; font-size:16px; line-height:1.9; max-width:420px; margin-bottom:44px; }
  .contact-detail{ margin-bottom:22px; }
  .contact-detail .lbl{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
  .contact-detail .val{ font-family:'Cormorant Garamond', serif; font-size:20px; color:#FAFAFA; line-height:1.5; }
  .c-link{ border-bottom:1px solid rgba(200,169,106,0.4); transition:border-color .35s ease, color .35s ease; }
  .c-link:hover{ color:var(--gold); border-color:var(--gold); }

  /* ---------- direct line / whatsapp ---------- */
  .contact-action{
    border:1px solid var(--hairline);
    border-top:1px solid rgba(200,169,106,0.55);
    background:linear-gradient(180deg, rgba(17,17,17,0.9) 0%, rgba(10,10,10,0.9) 100%);
    padding:60px 54px;
    text-align:left;
  }
  .ca-eyebrow{
    font-size:11px; letter-spacing:0.32em; text-transform:uppercase; color:var(--gold);
    display:block; margin-bottom:20px;
  }
  .ca-lead{
    font-family:'Cormorant Garamond', serif; font-size:clamp(22px,2.4vw,30px);
    line-height:1.5; color:#FAFAFA; margin-bottom:40px; max-width:420px; font-style:italic;
  }
  .wa-btn{
    display:inline-flex; align-items:center; gap:14px;
    background:var(--gold); color:#0a0a0a;
    padding:19px 40px;
    font-size:12px; letter-spacing:0.18em; text-transform:uppercase; font-weight:600;
    position:relative; overflow:hidden;
    transition:transform .45s cubic-bezier(.19,1,.22,1), box-shadow .45s ease, background .35s ease;
    box-shadow:0 0 0 rgba(200,169,106,0);
  }
  .wa-btn svg{ width:22px; height:22px; flex-shrink:0; }
  .wa-btn:hover{
    background:#e0c188;
    transform:translateY(-3px);
    box-shadow:0 14px 40px rgba(200,169,106,0.28);
  }
  .ca-alt{
    display:block; margin-top:26px;
    font-size:14px; color:var(--muted); letter-spacing:0.04em;
    transition:color .35s ease;
  }
  .ca-alt:hover{ color:var(--gold); }
  .ca-note{
    margin-top:38px; padding-top:24px; border-top:1px solid var(--hairline);
    font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#8C8C8C;
  }
  @media (max-width:980px){ .contact-action{ padding:44px 30px; } }

  /* ---------- footer ---------- */
  footer{ padding:56px 0 40px; border-top:1px solid var(--hairline); }
  .footer-grid{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:30px; }
  footer .logo{ font-size:18px; }
  footer .f-links{ display:flex; flex-wrap:wrap; gap:14px 34px; }
  footer .f-links a{ font-size:12px; color:var(--muted); letter-spacing:0.08em; }
  footer .f-links a:hover{ color:var(--text); }
  footer .copy{ font-size:12px; color:#666; margin-top:26px; }
  footer .admin-link{ color:#555; text-decoration:underline; text-underline-offset:2px; margin-left:4px; transition:color .3s ease; }
  footer .admin-link:hover{ color:var(--gold); }

  /* ---------- responsive ---------- */
  @media (max-width: 980px){
    nav.links{ display:none; }
    .burger{ display:flex; }
    #about .grid{ grid-template-columns:1fr; }
    #about .img-col{ height:56vh; order:-1; }
    #about .text-col{ padding:64px 7vw; }
    #process .grid{ grid-template-columns:1fr; }
    #process .img-side{ min-height:420px; }
    #process .timeline-side{ padding:70px 7vw; }
    .why-grid{ grid-template-columns:1fr; }
    .why-card:nth-child(3n){ border-right:none; }
    .why-card:nth-last-child(-n+3){ border-bottom:none; }
    .why-card{ border-bottom:1px solid var(--hairline) !important; border-right:1px solid var(--hairline) !important; }
    .contact-grid{ grid-template-columns:1fr; gap:60px; }
    .collection-content{ max-width:100%; }
    .client-list{ flex-direction:column; gap:0; }
    .client-list span{ border-left:none !important; border-top:1px solid var(--hairline); width:100%; padding:14px 0; }
    .client-list span:first-child{ border-top:none; }
    .g-slide{ width:78vw; }
    .exclusivity-grid{ grid-template-columns:1fr; gap:50px; }
    .collection{ min-height:72vh; }
    .footer-grid{ flex-direction:column; align-items:flex-start; gap:22px; }
    footer .f-links{ gap:12px 22px; }
  }

  /* ---------- short / landscape viewports (phones rotated, short laptop windows) ----------
     Full-bleed portrait photos in a vh-tall section become an extreme, over-zoomed
     sliver when the viewport is wide but short. Cap the section height in real pixels
     so the crop stays reasonable and the image stays sharp instead of "extending". */
  @media (max-height: 640px) and (orientation: landscape){
    #hero{ height:auto; min-height:100vh; }
    #hero{ align-items:center; }
    .hero-content{ padding:110px 6vw 60px; }
    .hero-title{ font-size:clamp(48px, 9vw, 96px); }
    .hero-sub{ margin-top:16px; }
    .collection{ min-height:0; height:auto; padding:120px 0; }
    .collection .cbg img{ transform:scale(1.02); }
  }

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

  /* mobile nav drawer */
  #mobileNav{
    position:fixed; inset:0; z-index:400; background:var(--bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
    transform:translateY(-100%); opacity:0; visibility:hidden;
    transition:transform .55s cubic-bezier(.65,0,.35,1), opacity .3s ease, visibility .55s;
    overflow-y:auto;
  }
  #mobileNav.open{ transform:translateY(0); opacity:1; visibility:visible; }
  #mobileNav a{ font-family:'Cormorant Garamond',serif; font-size:30px; font-style:italic; color:var(--text); }
  #mobileNav .mn-wa{
    font-family:'Inter',sans-serif; font-style:normal; font-size:12px;
    letter-spacing:0.18em; text-transform:uppercase; font-weight:600;
    background:var(--gold); color:#0a0a0a; padding:16px 34px; margin-top:14px;
  }

/* ============================================================
   MODULAR SITE ADDITIONS — Home intro, collection preview cards,
   CTA banner, Services grid, Work-process grid, nav active state
   ============================================================ */

nav.links a.nav-link.active{ color:var(--text); }
nav.links a.nav-link.active::after{ width:100%; }

.text-link{
  display:inline-block; margin-top:8px; font-size:13px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--gold); border-bottom:1px solid rgba(200,169,106,0.4);
  padding-bottom:3px; transition:border-color .35s ease;
}
.text-link:hover{ border-color:var(--gold); }

.page-lead{
  color:#DEDEDE; font-size:17px; line-height:1.9; max-width:620px; margin-top:22px; font-weight:400;
}

/* ---------- home intro ---------- */
.home-intro{ max-width:720px; }
.hi-text h2{ font-size:clamp(32px,3.6vw,50px); font-style:italic; margin:18px 0 24px; }
.hi-text p{ color:#DEDEDE; font-size:16px; line-height:1.9; margin-bottom:8px; }

/* ---------- home collection preview cards ---------- */
.home-coll-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:44px;
}
.hc-card{
  position:relative; display:block; aspect-ratio:3/4; overflow:hidden; background:var(--card);
}
.hc-card img{
  width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.19,1,.22,1), filter .6s ease;
  filter:brightness(0.72) saturate(1.05);
}
.hc-card:hover img{ transform:scale(1.08); filter:brightness(0.85) saturate(1.15); }
.hc-overlay{
  position:absolute; left:0; right:0; bottom:0; padding:26px 22px;
  background:linear-gradient(180deg, transparent, rgba(8,8,8,0.92));
}
.hc-overlay .eyebrow{ display:block; margin-bottom:8px; }
.hc-overlay h4{ font-size:22px; font-style:italic; font-weight:400; color:var(--text); }

/* ---------- home CTA banner ---------- */
.home-cta-inner{
  text-align:center; padding:70px 6vw; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.home-cta-inner h2{ font-size:clamp(30px,3.6vw,48px); font-style:italic; margin-bottom:34px; line-height:1.25; }
.home-cta-inner h2 em{ color:var(--gold); font-style:italic; }

/* ---------- services grid (process.html) ---------- */
.services-grid{
  margin-top:46px; display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;
  background:var(--hairline); border:1px solid var(--hairline);
}
.svc-card{
  background:var(--bg); padding:44px 40px; transition:background .5s ease;
}
.svc-card:hover{ background:rgba(15,139,106,0.045); }
.svc-num{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold); font-size:20px; }
.svc-card h4{ font-size:24px; font-weight:400; margin:16px 0 12px; }
.svc-card p{ color:#DADADA; font-size:15px; line-height:1.85; font-weight:400; }

/* ---------- work process grid (process.html) ---------- */
.wp-grid{
  margin-top:46px; display:grid; grid-template-columns:repeat(4, 1fr); gap:26px;
}
.wp-step{ border-top:1px solid rgba(200,169,106,0.5); padding-top:22px; }
.wp-num{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold); font-size:26px; }
.wp-step h4{ font-size:18px; font-weight:500; margin:14px 0 10px; letter-spacing:0.01em; }
.wp-step p{ color:#DADADA; font-size:14px; line-height:1.8; font-weight:400; }

@media (max-width:980px){
  .home-coll-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .wp-grid{ grid-template-columns:1fr 1fr; gap:30px 24px; }
}
@media (max-width:600px){
  .wp-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   Single-page rebuild additions: accordion, "beyond three stones"
   ============================================================ */

/* ---------- beyond the core three ---------- */
.beyond-three{
  padding:70px 6vw; text-align:center;
  background:var(--bg); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.beyond-three .eyebrow{ display:block; margin-bottom:18px; }
.beyond-three p{ color:#DEDEDE; font-size:16px; line-height:1.9; max-width:640px; margin:0 auto 20px; }

/* ---------- accordion (services) ---------- */
.accordion{ margin-top:46px; border-top:1px solid var(--hairline); }
.acc-item{ border-bottom:1px solid var(--hairline); }
.acc-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; cursor:pointer; text-align:left;
  padding:28px 4px; color:var(--text);
  font-family:'Cormorant Garamond', serif; font-size:clamp(20px,2.4vw,28px); font-style:italic;
  transition:color .35s ease;
}
.acc-trigger:hover{ color:var(--gold); }
.acc-num{ font-family:'Inter',sans-serif; font-style:normal; font-size:13px; letter-spacing:0.08em; color:var(--gold); margin-right:14px; }
.acc-icon{
  position:relative; width:20px; height:20px; flex-shrink:0;
}
.acc-icon::before, .acc-icon::after{
  content:''; position:absolute; background:var(--gold); transition:transform .4s ease;
}
.acc-icon::before{ left:0; top:9px; width:20px; height:1px; }
.acc-icon::after{ left:9px; top:0; width:1px; height:20px; }
.acc-item.open .acc-icon::after{ transform:rotate(90deg); opacity:0; }
.acc-panel{
  max-height:0; overflow:hidden; transition:max-height .55s cubic-bezier(.4,0,.2,1);
}
.acc-item.open .acc-panel{ max-height:220px; }
.acc-panel p{
  color:#DADADA; font-size:15.5px; line-height:1.9; padding:0 4px 30px; max-width:680px; font-weight:400;
}

@media (max-width:600px){
  .acc-trigger{ font-size:18px; padding:22px 2px; }
}

/* ---------- leadership: simplified (photo + name only) ---------- */
.lead-card-simple{ padding:24px 32px; gap:22px; }
.lead-card-simple .lead-text h3{ margin-bottom:0; }
.lead-card-simple .lead-photo{ width:64px; height:80px; }

/* ---------- GIA certification block (sapphire collection) ---------- */
.gia-block{
  display:inline-flex; align-items:center; gap:16px; margin-top:44px;
  border:1px solid rgba(200,169,106,0.45); padding:12px 16px;
  background:rgba(8,8,8,0.85); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .35s ease, background .35s ease, transform .35s ease;
}
.gia-block:hover{ border-color:var(--gold); background:rgba(8,8,8,0.92); transform:translateX(2px); }
.gia-thumb{ width:52px; height:auto; border:1px solid rgba(255,255,255,0.15); flex-shrink:0; }
.gia-block-text{ display:flex; flex-direction:column; gap:5px; text-align:left; }
.gia-badge-icon{
  width:16px; height:16px; border-radius:50%; background:var(--gold); color:#0a0a0a;
  display:inline-flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0;
  margin-right:6px;
}
.gia-block-title{ font-family:'Inter',sans-serif; font-size:12.5px; letter-spacing:0.03em; color:var(--text); }
.gia-block-sub{ font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.04em; color:var(--gold); padding-left:22px; }
.collection.right-align .gia-block{ margin-left:auto; }
.gia-verify{
  display:block; margin-top:12px; font-family:'Inter',sans-serif; font-size:11px;
  letter-spacing:0.06em; color:var(--muted); text-decoration:underline; text-underline-offset:3px;
  transition:color .35s ease;
}
.gia-verify:hover{ color:var(--gold); }
.collection.right-align .gia-verify{ text-align:right; }

/* ---------- global presence strip ---------- */
.presence-strip{
  display:flex; align-items:center; justify-content:center; gap:22px;
  padding:22px 6vw; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  flex-wrap:wrap; text-align:center;
  margin-bottom:34px;
}
.presence-label{
  font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
}
.presence-cities{ display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.presence-cities span{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:16px; color:var(--text);
  padding:0 16px; position:relative;
}
.presence-cities span:not(:first-child)::before{
  content:''; position:absolute; left:0; top:4px; bottom:4px; width:1px; background:var(--hairline);
}

/* ---------- floating corner tabs: request viewing + view inventory ---------- */
.side-tabs{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; z-index:300;
  box-shadow:-4px 0 24px rgba(0,0,0,0.35);
  transition:opacity .4s ease, visibility .4s ease;
}
.side-tabs.tabs-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.side-tabs a{
  writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg);
  font-family:'Inter',sans-serif; font-size:10px; letter-spacing:0.14em;
  text-transform:uppercase; font-weight:600;
  padding:14px 9px;
  transition:padding .35s ease, background .35s ease;
}
.side-viewing{ background:var(--gold); color:#0a0a0a; }
.side-viewing:hover{ background:#e0c188; padding-right:14px; }
.side-inventory{ background:#161616; color:var(--text); border-bottom:1px solid rgba(200,169,106,0.35); }
.side-inventory:hover{ background:#1e1e1e; padding-right:14px; color:var(--gold); }

.side-viewing .sv-short{ display:none; }

/* on narrow screens the vertical edge-tabs become small corner pills instead */
@media (max-width:980px){
  .side-tabs{
    top:auto; bottom:18px; right:14px; left:14px;
    transform:none; flex-direction:row; justify-content:flex-end; gap:8px;
    box-shadow:none;
  }
  .side-tabs a{
    writing-mode:horizontal-tb; transform:none;
    padding:9px 15px; border-radius:999px;
    font-size:9.5px; letter-spacing:0.08em;
    box-shadow:0 6px 18px rgba(0,0,0,0.4);
  }
  .side-inventory{ border-bottom:none; border:1px solid var(--hairline); }
  .side-viewing .sv-full{ display:none; }
  .side-viewing .sv-short{ display:inline; }
}