/* ============ TOKENS ============ */
  :root{
    --ink:#15181E;
    --ink-2:#1B1F27;
    --ink-3:#0F1216;
    --ivory:#F5F2EC;
    --ivory-2:#FBFAF6;
    --gold:#C6A668;
    --gold-bright:#DcC089;
    --bronze:#9A7B3A;      /* gold that reads on light bg */
    --steel:#7E94A6;       /* cool diamond accent, sparing */
    --line-d:rgba(245,242,236,.12);
    --line-l:rgba(21,24,30,.13);
    --mut-d:rgba(245,242,236,.60);
    --mut-l:#5C574C;
    --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
    --sans:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    background:var(--ink);color:var(--ivory);
    font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.7;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  section{scroll-margin-top:120px}
  .wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(20px,5vw,52px)}
  a{color:inherit;text-decoration:none}
  img,svg{display:block}

  /* ============ TYPE HELPERS ============ */
  .eyebrow{
    font-family:var(--mono);font-size:.72rem;font-weight:500;
    letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
    display:inline-flex;align-items:center;gap:.85em;margin-bottom:1.4rem;
  }
  .eyebrow::before{content:"";width:30px;height:1px;background:var(--gold);opacity:.7}
  h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.04}
  h2{font-size:clamp(2.3rem,4.6vw,3.55rem)}
  h3{font-size:1.5rem;line-height:1.15}
  .lead{max-width:60ch;color:var(--mut-d);font-size:1.075rem;line-height:1.78}

  /* ============ SECTION SKINS ============ */
  .sec{padding-block:clamp(74px,12vh,130px);position:relative}
  .sec--ivory{background:var(--ivory);color:var(--ink)}
  .sec--ivory .eyebrow{color:var(--bronze)}
  .sec--ivory .eyebrow::before{background:var(--bronze)}
  .sec--ivory .lead{color:var(--mut-l)}

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
    font-family:var(--sans);font-size:.92rem;font-weight:600;letter-spacing:.02em;
    padding:.95em 1.7em;border:1px solid transparent;border-radius:2px;
    transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
  }
  .btn-primary{background:var(--gold);color:var(--ink-3)}
  .btn-primary:hover{background:var(--gold-bright);transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--gold);border-color:rgba(198,168,104,.5)}
  .btn-ghost:hover{border-color:var(--gold);background:rgba(198,168,104,.08);transform:translateY(-2px)}
  .sec--ivory .btn-ghost{color:var(--bronze);border-color:rgba(154,123,58,.45)}
  .sec--ivory .btn-ghost:hover{border-color:var(--bronze);background:rgba(154,123,58,.07)}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

  /* ============ HEADER / NAV ============ */
  header{
    position:sticky;top:0;z-index:60;
    background:rgba(21,24,30,.78);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-d);
  }
  .headbar{position:relative;display:flex;align-items:center;justify-content:center;padding:14px 0 11px}
  .logo{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;color:var(--ivory)}.logo-full{height:40px;width:auto;display:block}.brand-full{height:30px;width:auto;display:block}
  .logo-mark{width:30px;height:30px;color:var(--gold-bright);margin-bottom:1px}
  .logo-name{font-family:var(--serif);font-size:1.55rem;font-weight:500;letter-spacing:.32em;padding-left:.32em;line-height:1}
  .logo-tag{font-family:var(--mono);font-size:.55rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);padding-left:.34em;margin-top:4px}
  .navrow{display:flex;justify-content:center;border-top:1px solid var(--line-d)}
  .navrow .links{padding:13px 0}
  .links{display:flex;align-items:center;gap:2rem;list-style:none}
  .links a:not(.btn){font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-d);transition:color .2s}
  .links a:not(.btn):hover,.links a:not(.btn).active{color:var(--ivory)}
  .links .btn{padding:.5em 1.15em;font-size:.72rem}
  .nav-cta{margin-left:.3rem}
  .brand{display:flex;align-items:center;gap:.6em;font-family:var(--serif)}
  .brand-mark{width:26px;height:26px;color:var(--gold-bright)}
  .brand-name{font-size:1.3rem;font-weight:500;letter-spacing:.22em;color:var(--ivory);padding-left:.22em}
  .burger{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;color:var(--ivory);position:absolute;right:0;top:13px}
  .burger svg{width:24px;height:24px;margin:auto}

  /* ============ HERO ============ */
  .hero{position:relative;background:var(--ink);overflow:hidden;padding-block:clamp(64px,11vh,120px)}
  .hero::before{ /* soft light from upper-right */
    content:"";position:absolute;inset:0;z-index:1;
    background:radial-gradient(70% 60% at 82% 18%,rgba(198,168,104,.16),transparent 60%);
    pointer-events:none;
  }
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center;position:relative;z-index:2}
  .hero h1{font-size:clamp(2.9rem,7vw,5.6rem);font-weight:300;margin:.2em 0 .55em}
  .hero h1 em{font-style:italic;color:var(--gold-bright)}
  .hero .lead{font-size:1.16rem}
  .hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.3rem}
  .hero-art{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center}
  .hero-rotator{position:relative;width:100%;max-width:440px;aspect-ratio:4/5}
  .hero-art .hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:5px;border:1px solid rgba(198,168,104,.32);box-shadow:0 30px 90px rgba(0,0,0,.55);background:#0c0e12;opacity:0;transition:opacity .55s ease;pointer-events:none}
  .hero-art .hero-media.is-active{opacity:1}
  .hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-d);background:rgba(15,18,22,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--ivory);font:400 1.35rem/1 var(--serif);cursor:pointer;display:flex;align-items:center;justify-content:center;padding-bottom:3px;transition:background .2s,border-color .2s,color .2s}
  .hero-nav:hover{background:rgba(15,18,22,.82);border-color:var(--gold);color:var(--gold-bright)}
  .hero-nav.prev{left:10px}
  .hero-nav.next{right:10px}
  .hero-dots{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:3;display:flex;gap:7px}
  .hero-dots .dot{width:7px;height:7px;border-radius:50%;background:rgba(245,242,236,.4);transition:background .25s,width .25s;cursor:pointer}
  .hero-dots .dot.is-on{background:var(--gold-bright);width:18px;border-radius:4px}
  .hero-tag{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory);background:rgba(15,18,22,.6);backdrop-filter:blur(4px);padding:.5em 1em;border:1px solid var(--line-d);border-radius:40px;white-space:nowrap}
  @keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  .stone{color:var(--gold)}

  /* ============ TRUST STRIP ============ */
  .trust{border-top:1px solid var(--line-d);background:var(--ink-2)}
  .trust ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d)}
  .trust li{background:var(--ink-2);padding:1.5rem clamp(16px,3vw,30px);text-align:center}
  .trust b{display:block;font-family:var(--serif);font-size:1.32rem;color:var(--ivory);font-weight:500}
  .trust span{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-d)}

  /* ============ ABOUT ============ */
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:start}
  .about-grid p+p{margin-top:1.1rem}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-l);border:1px solid var(--line-l);margin-top:.4rem}
  .stat{background:var(--ivory-2);padding:1.7rem 1.5rem}
  .stat .n{font-family:var(--serif);font-size:2.7rem;line-height:1;color:var(--ink)}
  .stat .n small{font-size:1.1rem;color:var(--bronze)}
  .stat .l{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-l);margin-top:.7rem}
  .about-media{margin-top:clamp(22px,3vw,30px);display:grid;gap:clamp(12px,1.6vw,16px)}
  .about-media figure{margin:0;border:1px solid var(--line-l);border-radius:5px;overflow:hidden;background:#0c0e12}
  .about-media img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
  .about-media figure.wide img{aspect-ratio:704/263}
  .about-media figure.floor img{aspect-ratio:960/493}
  .about-media figcaption{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-l);padding:.65rem .85rem;border-top:1px solid var(--line-l);background:var(--ivory)}

  /* ============ GENERIC GRID + CARDS ============ */
  .head{max-width:760px;margin-bottom:clamp(34px,5vw,58px)}
  .head .lead{margin-top:1.3rem}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
  .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px)}
  .card{padding:2rem 1.9rem;border:1px solid var(--line-d);border-radius:3px;background:rgba(255,255,255,.02);transition:border-color .3s,transform .3s,background .3s}
  .card:hover{border-color:rgba(198,168,104,.45);transform:translateY(-4px);background:rgba(198,168,104,.04)}
  .card .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;color:var(--gold);margin-bottom:1.1rem}
  .card h3{margin-bottom:.7rem}
  .card p{color:var(--mut-d);font-size:.97rem;line-height:1.65}
  .sec--ivory .card{background:var(--ivory-2);border-color:var(--line-l)}
  .sec--ivory .card:hover{border-color:rgba(154,123,58,.5);background:#fff}
  .sec--ivory .card p{color:var(--mut-l)}
  .sec--ivory .card .k{color:var(--bronze)}

  /* ============ SPECIALTIES ============ */
  .shape-card{padding:0;overflow:hidden}
  .shape-photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#0c0e12}
  .shape-card .txt{padding:1.4rem 1.6rem 1.7rem}
  .shapes-2{margin-top:clamp(16px,2vw,26px)}
  .sec--ivory .stone{color:var(--bronze)}
  .mini-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l);margin-top:clamp(14px,2vw,22px);border-radius:3px;overflow:hidden}
  .mini{background:var(--ivory-2);padding:1.6rem 1.5rem}
  .mini .stone{width:46px;height:54px;margin-bottom:1rem}
  .mini h3{font-size:1.18rem;margin-bottom:.4rem}
  .mini p{color:var(--mut-l);font-size:.9rem;line-height:1.6}

  /* ============ QUALITY / PRECISION ============ */
  .cs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:3px;overflow:hidden;margin-bottom:clamp(20px,3vw,34px)}
  .c{background:var(--ink-2);padding:1.9rem 1.6rem}
  .c .roman{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--steel);margin-bottom:.9rem}
  .c h3{margin-bottom:.55rem}
  .c p{color:var(--mut-d);font-size:.93rem;line-height:1.6}
  .precision{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,30px);align-items:center;
    border:1px solid rgba(198,168,104,.3);border-radius:3px;padding:clamp(26px,4vw,42px);
    background:linear-gradient(180deg,rgba(198,168,104,.06),transparent)}
  .spec .v{font-family:var(--mono);font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--gold-bright);line-height:1}
  .spec .v small{font-size:1rem;color:var(--mut-d)}
  .spec .l{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-d);margin-top:.8rem}
  .proof{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,46px);align-items:center;margin-top:clamp(26px,4vw,42px)}
  .proof-shot{margin:0;border:1px solid var(--line-d);border-radius:4px;overflow:hidden;background:#0c0e12}
  .proof-shot img{display:block;width:100%;height:auto}
  .proof-rotator{position:relative;width:100%;aspect-ratio:840/549}
  .proof-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0c0e12;opacity:0;transition:opacity .55s ease;pointer-events:none}
  .proof-media.is-active{opacity:1}
  .proof-media.contain{object-fit:contain}
  .map-box{margin-top:1.3rem;border:1px solid var(--line-d);border-radius:5px;overflow:hidden;background:#0c0e12}
  .map-box iframe{display:block;width:100%;height:185px;border:0;filter:grayscale(.2)}
  .map-box figcaption{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:.7em .9em;border-top:1px solid var(--line-d)}
  .map-box figcaption a{color:var(--mut-d);transition:color .2s}
  .map-box figcaption a:hover{color:var(--gold-bright)}
  .proof-shot figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-d);padding:.7em 1em;border-top:1px solid var(--line-d)}
  .proof-txt h3{margin-bottom:.7rem}
  .proof-txt p{color:var(--mut-d);line-height:1.7}
  .proof-txt .mono-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--gold-bright);margin-top:1.1rem;border-left:2px solid var(--gold);padding-left:.9em}

  /* ============ FINALE (why + contact) ============ */
  .finale{background:var(--ink-3);position:relative}
  .finale::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 15% 90%,rgba(198,168,104,.12),transparent 60%);pointer-events:none}
  .why{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,20px);position:relative;
    padding-bottom:clamp(50px,7vw,80px);border-bottom:1px solid var(--line-d);margin-bottom:clamp(50px,7vw,80px)}
  .why-item .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--gold);margin-bottom:.7rem}
  .why-item h3{font-size:1.18rem;margin-bottom:.45rem}
  .why-item p{color:var(--mut-d);font-size:.9rem;line-height:1.6}
  .contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,5vw,70px);position:relative;align-items:start}
  .contact-grid .lead{font-size:1.08rem;margin-top:1.3rem}
  .incl{list-style:none;margin-top:1.8rem;display:grid;gap:.7rem}
  .incl li{display:flex;gap:.8em;font-size:.95rem;color:var(--mut-d)}
  .incl li::before{content:"◆";color:var(--gold);font-size:.7em;margin-top:.45em}
  .direct{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

  /* form */
  .form{background:rgba(255,255,255,.03);border:1px solid var(--line-d);border-radius:4px;padding:clamp(24px,3.5vw,38px)}
  .form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .field{margin-bottom:14px}
  .field.full{grid-column:1/-1}
  label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-d);margin-bottom:.5rem}
  input,select,textarea{
    width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line-d);border-radius:2px;
    color:var(--ivory);font-family:var(--sans);font-size:.95rem;padding:.8em .9em;transition:border-color .2s,background .2s;
  }
  input::placeholder,textarea::placeholder{color:rgba(245,242,236,.32)}
  input:focus,select:focus,textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.06);outline:none}
  select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  textarea{resize:vertical;min-height:92px}
  .form .btn-primary{width:100%;justify-content:center;margin-top:.4rem}
  .form-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--mut-d);margin-top:1rem;text-align:center;line-height:1.6}

  /* ============ FOOTER ============ */
  footer{background:var(--ink-3);border-top:1px solid var(--line-d);padding-block:clamp(44px,6vw,66px)}
  .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;align-items:flex-start}
  .foot-brand{max-width:340px}
  .foot-brand .brand{margin-bottom:1rem}
  .foot-brand p{color:var(--mut-d);font-size:.9rem}
  .foot-cols{display:flex;gap:clamp(34px,6vw,72px);flex-wrap:wrap}
  .foot-col h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem;font-weight:500}
  .foot-col a,.foot-col span{display:block;color:var(--mut-d);font-size:.9rem;margin-bottom:.6rem;transition:color .2s}
  .foot-col a:hover{color:var(--ivory)}
  .foot-bottom{margin-top:clamp(34px,5vw,54px);padding-top:1.6rem;border-top:1px solid var(--line-d);
    display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
    font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--mut-d)}

  /* ============ CERTIFICATION BADGES ============ */
  .badges{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,30px)}
  .badge{display:flex;flex-direction:column;align-items:center;text-align:center}
  .seal{width:104px;height:104px;border-radius:50%;border:1.5px solid var(--bronze);
    display:grid;place-items:center;font-family:var(--serif);font-size:1.75rem;font-weight:500;
    color:var(--ink);background:#fff;position:relative;margin-bottom:1.3rem}
  .seal::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(154,123,58,.4)}
  .seal::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:9px;height:9px;background:var(--bronze)}
  .badge-logo{max-width:120px;height:auto;margin-bottom:1.3rem}
  .badge h3{font-size:1.16rem;margin-bottom:.4rem}
  .badge p{color:var(--mut-l);font-size:.88rem;line-height:1.55;max-width:26ch}
  .cert-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:var(--mut-l);
    text-align:center;margin-top:clamp(24px,3.5vw,40px)}
  .cert-cards{margin-top:clamp(28px,4vw,46px)}

  /* ============ LIVE VIDEO CALL ============ */
  .videocall{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,60px);align-items:center;
    border:1px solid rgba(198,168,104,.32);border-radius:4px;padding:clamp(30px,4.5vw,58px);
    background:linear-gradient(110deg,rgba(198,168,104,.09),transparent 72%);
    margin-bottom:clamp(50px,7vw,80px)}
  .vc-live{display:inline-flex;align-items:center;gap:.65em;font-family:var(--mono);font-size:.7rem;
    letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
  .vc-dot{width:9px;height:9px;border-radius:50%;background:#E0563B;animation:pulse 2.2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,86,59,.55)}70%{box-shadow:0 0 0 11px rgba(224,86,59,0)}100%{box-shadow:0 0 0 0 rgba(224,86,59,0)}}
  .videocall h2{font-size:clamp(1.9rem,3.7vw,2.9rem);margin-bottom:.65rem}
  .videocall p{color:var(--mut-d);max-width:54ch;line-height:1.72}
  .vc-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.9rem}
  .vc-art{display:flex;justify-content:center}
  .vc-art svg{width:clamp(130px,16vw,184px)}
  .vc-ring{fill:none;stroke:rgba(198,168,104,.34);stroke-width:1.5}
  .vc-ring2{fill:none;stroke:var(--gold);stroke-width:1}
  .vc-play{fill:var(--gold-bright)}

  /* ============ PHOTO BAND ============ */
  .photoband{position:relative;isolation:isolate;color:var(--ivory);text-align:center;
    padding-block:clamp(88px,16vh,168px);background:var(--ink-3)}
  .photoband::before{content:"";position:absolute;inset:0;z-index:-2;
    background:#000 url('../media/process-photoband.jpg') center/cover no-repeat;opacity:.4}
  .photoband::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(15,18,22,.74),rgba(15,18,22,.88))}
  .photoband .eyebrow{color:var(--gold);justify-content:center}
  .photoband h2{font-size:clamp(2rem,4.3vw,3.3rem);max-width:20ch;margin:0 auto}
  .photoband p{color:var(--mut-d);max-width:58ch;margin:1.2rem auto 0;line-height:1.7}

  /* ============ WORKSHOP GALLERY ============ */
  .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.5vw,16px)}
  .tile{position:relative;aspect-ratio:3/4;border-radius:3px;overflow:hidden;border:1px solid var(--line-l);
    background-color:#1b1f27;background-size:cover;background-position:center;display:flex;align-items:flex-end}
  .tile .ph{position:absolute;inset:0;display:grid;place-items:center;opacity:.14;z-index:1;color:var(--gold)}
  .tile .ph svg{width:50%;max-width:88px}
  .tile figcaption{position:relative;z-index:2;width:100%;padding:.95rem 1.05rem;
    font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory);
    background:linear-gradient(0deg,rgba(10,12,15,.9),transparent)}

  /* ============ REVEAL ============ */
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
  .reveal.in{opacity:1;transform:none}

  /* ============ RESPONSIVE ============ */
  @media(max-width:920px){
    .hero-grid{grid-template-columns:1fr}
    .hero-art{min-height:260px;order:-1}
    .about-grid,.contact-grid{grid-template-columns:1fr;gap:38px}
    .grid-3,.why{grid-template-columns:1fr 1fr}
    .cs{grid-template-columns:1fr 1fr}
    .precision{grid-template-columns:1fr 1fr}
    .videocall{grid-template-columns:1fr}
    .badges{grid-template-columns:1fr 1fr}
    .gallery{grid-template-columns:1fr 1fr}
  }
  @media(max-width:680px){
    body{font-size:16px}
    .navrow{border-top:none}
    .links{
      position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:0;
      background:var(--ink-2);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
      max-height:0;overflow:hidden;transition:max-height .35s ease;
    }
    .links.open{max-height:480px}
    .links li{width:100%;border-top:1px solid var(--line-d)}
    .links li:first-child{border-top:none}
    .links a:not(.btn){display:block;padding:1.1rem clamp(20px,5vw,52px);font-size:.8rem}
    .links .nav-cta{display:none}
    .burger{display:flex}
    .logo-name{font-size:1.3rem;letter-spacing:.24em}.logo-full{height:34px}
    .logo-tag{letter-spacing:.2em;font-size:.52rem;padding-left:.2em}
    .trust ul{grid-template-columns:1fr 1fr}
    .grid-3,.grid-2,.why,.mini-row,.cs,.precision,.proof,.stats{grid-template-columns:1fr}
    .badges{grid-template-columns:1fr 1fr}
    .gallery{grid-template-columns:1fr 1fr}
    .vc-art{display:none}
    .form .row{grid-template-columns:1fr}
    .hero-cta .btn,.direct .btn{flex:1 1 auto;justify-content:center}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important}
    .reveal{opacity:1;transform:none;transition:none}
    html{scroll-behavior:auto}
  }

  /* ================================================================
     v1.5 ADDITIONS — cinematic hero · shape library · i18n · detail
     ================================================================ */

  /* ---------- scroll progress: a thin gold seam under the header ---------- */
  .progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:90;pointer-events:none;
    background:linear-gradient(90deg,var(--gold-bright),var(--gold) 60%,transparent);
    transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear}

  /* ---------- language switcher ---------- */
  .lang{position:absolute;right:0;top:16px;display:flex;align-items:center;gap:0;
    border:1px solid var(--line-d);border-radius:2px;overflow:hidden;background:rgba(15,18,22,.4)}
  .lang a{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--mut-d);padding:.5em .8em;transition:background .2s,color .2s}
  .lang a+a{border-left:1px solid var(--line-d)}
  .lang a:hover{color:var(--ivory)}
  .lang a[aria-current="true"]{background:var(--gold);color:var(--ink-3)}

  /* ---------- HERO: full-bleed cinematic ---------- */
  .hero{position:relative;overflow:clip;background:var(--ink-3);
    min-height:min(92svh,880px);display:flex;align-items:flex-end;padding-block:0}
  .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0a0c0f}
  .hero-bg video,.hero-bg img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 42%;opacity:0;transition:opacity 1.2s ease}
  .hero-bg video.is-active,.hero-bg img.is-active{opacity:1}
  /* the source footage is vertical phone video — a light blur turns it into
     ambient texture on wide screens instead of a stretched, pixelated frame */
  .hero-bg .amb{filter:blur(11px) saturate(1.05) brightness(.72);transform:scale(1.14)}
  /* the light field is drawn in code — always sharp, no footage to license */
  .hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;
    pointer-events:none;mix-blend-mode:screen;opacity:.92}
  .hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(10,12,15,.86) 0%,rgba(10,12,15,.42) 34%,rgba(10,12,15,.80) 72%,var(--ink-3) 100%),
      radial-gradient(85% 65% at 76% 24%,rgba(198,168,104,.20),transparent 62%)}
  .hero-inner{position:relative;z-index:3;width:100%;
    padding-block:clamp(96px,17vh,190px) clamp(52px,8vh,86px)}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:clamp(30px,5vw,72px);align-items:end}
  .hero h1{font-size:clamp(2.7rem,6.6vw,5.3rem);font-weight:300;margin:.16em 0 .5em;
    text-wrap:balance;text-shadow:0 2px 34px rgba(0,0,0,.5)}
  .hero h1 em{font-style:italic;color:var(--gold-bright)}
  .hero .lead{font-size:1.14rem;color:rgba(245,242,236,.82);text-shadow:0 1px 20px rgba(0,0,0,.55)}
  .hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}

  /* crisp foreground frame — keeps the vertical footage at native quality */
  .hero-frame{position:relative;width:100%;max-width:352px;margin-left:auto;
    aspect-ratio:384/678;border-radius:4px;overflow:hidden;
    border:1px solid rgba(198,168,104,.34);box-shadow:0 34px 90px rgba(0,0,0,.62);background:#0c0e12}
  .hero-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .6s ease}
  .hero-frame video.is-active{opacity:1}
  .hero-frame .hero-tag{position:absolute;left:12px;bottom:12px;transform:none;
    font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ivory);background:rgba(10,12,15,.62);backdrop-filter:blur(5px);
    padding:.5em .9em;border:1px solid var(--line-d);border-radius:40px;white-space:nowrap}
  .hero-dots{position:absolute;left:12px;top:12px;transform:none;display:flex;gap:6px;z-index:3}

  /* scroll cue */
  .hero-scroll{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;
    display:flex;flex-direction:column;align-items:center;gap:9px;
    font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
    color:rgba(245,242,236,.5)}
  .hero-scroll i{display:block;width:1px;height:38px;background:linear-gradient(180deg,var(--gold),transparent);
    animation:cue 2.4s ease-in-out infinite}
  @keyframes cue{0%,100%{opacity:.25;transform:scaleY(.55);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

  /* a shade deeper than the body so two dark sections still read as separate */
  .sec--ink{background:var(--ink-3)}
  .sec--ink + .sec{border-top:1px solid var(--line-d)}

  /* ---------- SPECIFICATION BUILDER ---------- */
  .specbuild{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,352px);
    gap:clamp(24px,3vw,44px);align-items:start}
  .spec-form{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px);min-width:0}

  .spec-group{border:0;padding:0;margin:0}
  .spec-group legend{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;width:100%;
    padding:0 0 .7rem;margin-bottom:1rem;border-bottom:1px solid var(--line-d)}
  .spec-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.19em;
    text-transform:uppercase;color:var(--ivory)}
  .spec-hint{font-size:.78rem;color:var(--mut-d);font-style:italic}
  .spec-opts{display:flex;flex-wrap:wrap;gap:8px}

  .chip{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;color:var(--mut-d);
    background:rgba(255,255,255,.03);border:1px solid var(--line-d);border-radius:2px;
    padding:.62em 1em;cursor:pointer;transition:all .2s ease;line-height:1.2}
  .chip:hover{border-color:var(--bronze);color:var(--ivory);background:rgba(198,168,104,.09)}
  .chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink-3);font-weight:600}

  /* shape chips carry their facet diagram */
  .spec-group[data-group="shape"] .spec-opts{gap:10px}
  .chip-shape{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
    width:92px;padding:.9rem .4rem .75rem;text-align:center}
  .chip-shape svg{width:38px;height:38px;color:currentColor;transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .chip-shape:hover svg{transform:scale(1.12)}
  .chip-shape .chip-name{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
  .chip-shape .chip-any{font-family:var(--serif);font-size:1.5rem;line-height:38px;font-style:italic}

  /* colour chips carry the tint they describe */
  .chip-col{display:inline-flex;align-items:center;gap:.5rem;padding:.5em .85em}
  .chip-col i{width:13px;height:13px;border-radius:50%;display:block;
    background:hsl(calc(48 - var(--warm)*4) calc(var(--warm)*62%) calc(99% - var(--warm)*14%));
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
  .spec-scale{display:flex;align-items:center;gap:.8rem;margin-top:.9rem;
    font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-d)}
  .spec-scale i{flex:1;height:1px;background:linear-gradient(90deg,#fff,#f3e6c4 60%,#e0c184)}

  .spec-input{width:100%;max-width:340px;font-family:var(--mono);font-size:.85rem;color:var(--ivory);
    background:rgba(255,255,255,.03);border:1px solid var(--line-d);border-radius:2px;padding:.75em .9em}
  .spec-input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
  .spec-input::placeholder{color:var(--mut-d)}

  /* the running spec sheet */
  .spec-sheet{position:sticky;top:104px;background:rgba(255,255,255,.035);
    border:1px solid var(--line-d);border-radius:3px;padding:clamp(20px,2.4vw,28px)}
  .spec-sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    padding-bottom:.85rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line-d)}
  .spec-sheet-head h3{font-size:1.22rem}
  .spec-ref{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--bronze)}
  .spec-out{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1rem;margin:0 0 1.3rem;
    font-family:var(--mono);font-size:.74rem;line-height:1.5}
  .spec-out dt{color:var(--mut-d);letter-spacing:.12em;text-transform:uppercase;font-size:.62rem;padding-top:.15em}
  .spec-out dd{margin:0;color:var(--ivory);word-break:break-word}
  .spec-out dd.is-any{color:var(--mut-d)}
  .spec-foot{font-size:.74rem;line-height:1.55;color:var(--mut-d);margin-bottom:1rem}
  .spec-sheet .btn{width:100%;justify-content:center}
  .spec-reset{display:block;width:100%;margin-top:.6rem;background:none;border:0;cursor:pointer;
    font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--mut-d);padding:.6em}
  .spec-reset:hover{color:var(--ivory)}

  /* ---------- misc refinement ---------- */
  .trust li{transition:background .3s ease}
  .trust li:hover{background:#232833}
  .btn-primary:focus-visible{outline-offset:4px}
  @media(max-width:1120px){
    .specbuild{grid-template-columns:1fr}
    .spec-sheet{position:static}
  }
  @media(max-width:920px){
    .hero{min-height:auto;align-items:stretch}
    .hero-inner{padding-block:clamp(84px,14vh,130px) clamp(40px,7vh,64px)}
    .hero-grid{grid-template-columns:1fr}
    .hero-frame{max-width:300px;margin:0 auto;order:-1}
    .hero-bg .amb{filter:blur(5px);transform:scale(1.06)}
    .hero-scroll{display:none}
  }
  @media(max-width:680px){
    .lang{top:auto;bottom:-42px;right:auto;left:0}
    .headbar{padding-bottom:20px}
    .hero-bg .amb{filter:blur(4px) saturate(1.12);transform:scale(1.08)}
    .hero-frame{max-width:230px}
    .hero h1{font-size:clamp(2.3rem,9vw,3rem)}
  }

  @media(max-width:680px){
    .chip-shape{width:calc(33.333% - 7px);padding:.8rem .3rem .7rem}
    .chip-shape svg{width:32px;height:32px}
    .chip{font-size:.68rem}
  }

  /* ---------- intro note ---------- */
  .intro{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
    padding:clamp(16px,4vw,40px);opacity:0;transition:opacity .4s ease}
  .intro.is-open{opacity:1}
  .intro[hidden]{display:none}
  .intro-back{position:absolute;inset:0;background:rgba(8,10,13,.78);backdrop-filter:blur(7px)}
  .intro-card{position:relative;max-width:520px;width:100%;background:var(--ink-3);
    border:1px solid var(--line-d);border-top:2px solid var(--gold);border-radius:3px;
    padding:clamp(28px,4.5vw,44px);text-align:left;
    box-shadow:0 40px 110px rgba(0,0,0,.62);
    transform:translateY(14px) scale(.985);transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .intro.is-open .intro-card{transform:none}
  .intro-mark{width:44px;height:44px;color:var(--gold);margin-bottom:1.15rem}
  .intro-card h2{font-size:clamp(1.6rem,3.4vw,2.1rem);margin:.3rem 0 1rem}
  .intro-card p{font-size:.94rem;line-height:1.72;color:var(--mut-d);margin-bottom:1rem}
  .intro-em{padding-top:1rem;border-top:1px solid var(--line-d);color:var(--ivory)!important}
  .intro-em strong{color:var(--gold-bright);font-weight:600}
  .intro-card .btn{margin-top:.6rem;width:100%;justify-content:center}
  @media(max-width:520px){ .intro-card{padding:26px 22px 24px} .intro-mark{width:36px;height:36px} }


/* ==================================================================
   v2.3  ·  typography + mobile hero
   Appended last so it wins over the rules above without editing them.
   ================================================================== */

/* ---- 1 · Type: premium, and actually readable -------------------
   Cormorant Garamond is a high-contrast Garamond. At weight 300 its thin
   strokes disappear against a photograph and on a phone screen. The
   typeface is right for the brand; the weight was not. 400 on desktop and
   500 on mobile keep the elegance and gain legibility. Line-height opens
   up too — 1.04 is far too tight for a serif at display size.
   All weights used here are already in the Google Fonts request, so this
   costs no extra download.                                            */
h1,h2,h3{font-weight:400;line-height:1.1;letter-spacing:-.008em;
         text-rendering:optimizeLegibility}
.hero h1{font-weight:400}
.eyebrow{font-weight:500}
.lead{color:rgba(245,242,236,.88)}

/* ---- 2 · Mobile hero -------------------------------------------- */
@media(max-width:920px){
  body{font-size:17px}
  h1,h2,h3{line-height:1.14}
  .eyebrow{letter-spacing:.2em;font-size:.68rem;margin-bottom:1.05rem}

  /* The footage is 384x678 vertical phone video — already the right shape
     for a phone, so it runs full-bleed and sharp instead of being shrunk
     into a 230px box on a blurred backdrop. */
  .hero{min-height:100svh;align-items:stretch;overflow:clip}
  .hero-inner{z-index:auto;display:flex;align-items:flex-end;
              padding-block:0 clamp(30px,5.5vh,52px)}
  /* .hero-grid is position:relative in the base stylesheet, which made IT the
     containing block for the absolutely-positioned .hero-frame. The video was
     therefore sized to the grid box — bottom-aligned and only as tall as the
     copy — leaving a dead band under the header. Static here so the frame
     resolves against .hero-inner, which spans the whole hero. */
  .hero-grid{grid-template-columns:1fr;gap:0;width:100%;align-items:end;
             position:static}

  .hero-frame{position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:100vw;height:100%;max-width:none;margin:0;order:0;aspect-ratio:auto;
    border:0;border-radius:0;box-shadow:none;background:#0a0c0f;z-index:0}
  .hero-frame video{object-fit:cover;object-position:center 34%}
  .hero-bg{display:none}

  /* light overall scrim — the real work is done by the text plate below */
  .hero::after{background:linear-gradient(180deg,
      rgba(8,10,13,.44) 0%, rgba(8,10,13,.08) 13%,
      rgba(8,10,13,.06) 32%, rgba(8,10,13,.22) 52%, transparent 70%)}

  /* A plate that sits behind the copy and fades up into the footage, so the
     type is legible no matter what the video is doing behind it. It is
     anchored to the text block, so it adapts if the copy length changes. */
  .hero-grid>.reveal{position:relative;z-index:3;isolation:isolate}
  .hero-grid>.reveal::before{content:"";position:absolute;z-index:-1;
    left:-50vw;right:-50vw;top:-78px;bottom:-340px;pointer-events:none;
    background:linear-gradient(180deg, transparent 0%,
      rgba(8,10,13,.40) 15%, rgba(8,10,13,.78) 34%,
      rgba(8,10,13,.93) 50%, var(--ink-3) 70%)}

  /* The eyebrow lands exactly where the footage is brightest — gold on skin
     measured 1.16:1 at worst, effectively invisible. It now sits on a wash
     that is solid behind the words and fades out to the right, so there is no
     hard chip edge and the footage still reads through past the text. The
     slight backdrop blur softens whatever is underneath so the letterforms
     stay crisp instead of fighting the grain of the video. */
  .hero .eyebrow{color:var(--gold-bright);font-size:.7rem;
    background:linear-gradient(90deg, rgba(8,10,13,.90) 0%,
      rgba(8,10,13,.86) 86%, rgba(8,10,13,.44) 95%, rgba(8,10,13,0) 100%);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    padding:.52em 3.4em .56em .9em;margin-left:-.9em;border-radius:2px}
  .hero .eyebrow::before{opacity:.95;width:26px;background:var(--gold-bright)}

  .hero h1{font-size:clamp(2.5rem,9.4vw,3.3rem);font-weight:500;
           letter-spacing:-.004em;margin:.3em 0 .5em;text-shadow:none}
  .hero .lead{font-size:1.02rem;line-height:1.68;max-width:36ch;
              color:rgba(245,242,236,.93);text-shadow:none}
  .hero-cta{gap:.6rem;margin-top:1.85rem}
  .hero-cta .btn{flex:1 1 100%;min-height:54px;display:inline-flex;
                 align-items:center;justify-content:center}

  /* v2.2 bug, fixed: the pill was offset by the header height, but this
     layer already begins below the header — so it landed on the headline.
     Top-right keeps it clear of the left-aligned copy at every size. */
  /* The caption pill is dropped on phones. With the video as the full-bleed
     background the copy block is bottom-aligned, so on a short screen the
     eyebrow rides up into whatever band the pill occupies — there is no
     position that is collision-free at every height. On a phone it was also
     competing with the eyebrow for the same editorial job. The provenance is
     still announced to screen readers via the video's aria-label.
     To bring it back: delete this rule and give it top:14px;right:14px. */
  .hero-frame .hero-tag{display:none}
  .hero-dots{display:none}
  .hero-scroll{display:none}
}

/* ---- 3 · Collapsed mobile menu was painting a bar under the header -
   `.navrow .links{padding:13px 0}` has specificity 0,2,0 and was beating the
   mobile `.links{padding:0}` at 0,1,0. So with `max-height:0` the menu's
   CONTENT collapsed, but its 13px top and bottom padding and its two 1px
   borders survived — leaving a 28px bar of --ink-2 painted over the hero on
   every page load. That was the empty strip under the header.            */
@media(max-width:680px){
  .navrow .links{padding:0}
  .links:not(.open){border-top-width:0;border-bottom-width:0}
}

/* ---- 4 · Language switcher belongs inside the header ------------- */
@media(max-width:680px){
  .lang{position:absolute;left:0;right:auto;top:17px;bottom:auto;z-index:5}
  .lang a{padding:.42em .7em}
  .headbar{padding-bottom:11px}
}

/* ---- 5 · Intro note: the dismiss button must always be reachable -- */
.intro{overflow-y:auto;overscroll-behavior:contain}
.intro-card{max-height:calc(100svh - 2 * clamp(16px,4vw,40px));
            overflow-y:auto;overscroll-behavior:contain}
@media(max-width:680px){
  .intro{padding:14px}
  .intro-card{padding:26px 22px 24px;max-height:calc(100svh - 28px)}
  .intro-card .btn{width:100%;min-height:52px;display:inline-flex;
                   align-items:center;justify-content:center}
}

/* ==================================================================
   v2.9  ·  workshop-photo hero · rotating film moved to the band ·
            intro card: wordmark + corner close
================================================================== */

/* -- 1 · Hero: the cutting-floor photograph is the backdrop -------- */
.hero-bg .hero-photo{opacity:1;filter:brightness(.68) saturate(1.04);
  object-position:center 40%}
/* the frame has moved out — let the copy own the full width */
.hero-grid{grid-template-columns:minmax(0,1fr)}
.hero-grid>.reveal{max-width:800px}

/* -- 2 · Photo band: copy left, the live film right ---------------- */
.photoband{text-align:left}
.photoband-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(34px,5.5vw,80px);align-items:center}
.photoband .eyebrow{justify-content:flex-start}
.photoband h2{margin:0}
.photoband p{margin:1.2rem 0 0}
.photoband .hero-frame{margin-left:auto;max-width:330px}

@media(max-width:920px){
  /* the phone hero used the film as its backdrop; the film now lives in
     the band, so the photo layer must stay visible on phones too */
  .hero .hero-bg{display:block}
  .hero-bg .hero-photo{filter:brightness(.62) saturate(1.05)}

  /* undo the full-bleed phone-hero treatment for the relocated frame */
  .photoband-grid{grid-template-columns:1fr;gap:0}
  .photoband .hero-frame{position:relative;top:auto;left:auto;transform:none;
    width:100%;height:auto;max-width:min(300px,80vw);margin:2.6rem auto 0;
    aspect-ratio:384/678;border:1px solid rgba(198,168,104,.34);border-radius:4px;
    overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.62);background:#0c0e12;z-index:auto}
  .photoband .hero-frame video{object-position:center}
  .photoband .hero-frame .hero-tag{display:block}
  .photoband .hero-dots{display:flex}
}

/* -- 3 · Intro card ------------------------------------------------ */
.intro-logo{display:block;width:clamp(158px,48%,216px);height:auto;
  margin:0 0 1.3rem}
.intro-close{position:absolute;top:13px;right:13px;width:38px;height:38px;
  display:grid;place-items:center;background:rgba(245,242,236,.04);
  border:1px solid var(--line-d);border-radius:50%;color:var(--mut-d);
  cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.intro-close:hover,.intro-close:focus-visible{color:var(--gold-bright);
  border-color:var(--gold);background:rgba(198,168,104,.1);outline:none}
.intro-close svg{width:15px;height:15px;pointer-events:none}
@media(max-width:520px){
  .intro-close{top:10px;right:10px;width:34px;height:34px}
  .intro-logo{width:min(200px,58%)}
}

/* ==================================================================
   v2.10 · multi-page split · dark "Our house"
================================================================== */
.sec--house .stats{background:var(--line-d);border-color:var(--line-d)}
.sec--house .stat{background:var(--ink-2)}
.sec--house .stat .n{color:var(--ivory)}
.sec--house .stat .n small{color:var(--gold)}
.sec--house .stat .l{color:var(--mut-d)}
.sec--house .about-media figure{border-color:var(--line-d)}
.sec--house .about-media figcaption{background:var(--ink-2);border-top-color:var(--line-d);color:var(--mut-d)}
.page-main{background:var(--ink-3)}

/* ==================================================================
   v2.12 · phone header: nav buttons replace the burger ·
           hero photo ceiling cropped out
================================================================== */
@media(max-width:920px){
  .hero .hero-bg .hero-photo{top:-18%;height:124%}
}
@media(max-width:680px){
  .burger{display:none}
  .navrow{display:flex;justify-content:center;border-top:1px solid var(--line-d)}
  .navrow .links{padding:11px 10px}
  .links{position:static;top:auto;left:auto;right:auto;
    flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:.5rem clamp(1rem,4.4vw,1.8rem);
    background:none;border:0;max-height:none;overflow:visible;transition:none}
  .links li{width:auto;border:0}
  .links a:not(.btn){display:inline-block;padding:.3rem 0;font-size:.68rem;letter-spacing:.15em}
  .links .nav-cta{display:block;margin-left:.1rem}
  .links .nav-cta .btn{padding:.55em 1em;font-size:.64rem;letter-spacing:.1em}
}

/* ==================================================================
   v3.1 · cut like a stone — every button carries an emerald-cut
          silhouette; the gold CTAs catch the light on hover
================================================================== */
.btn,.chip,.intro-close{
  --cut:11px;border-radius:0;position:relative;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),
    100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,
    0 calc(100% - var(--cut)),0 var(--cut));
}
.btn{padding:.95em 2.05em}
.links .btn{--cut:8px}
/* ghosts become smoked glass — a 1px ring would lose its bevelled
   corners to the clip, so the outline goes and the glass carries it */
.btn-ghost{border-color:transparent;background:rgba(198,168,104,.1);
  -webkit-backdrop-filter:blur(4px) saturate(1.1);backdrop-filter:blur(4px) saturate(1.1)}
.btn-ghost:hover{border-color:transparent;background:rgba(198,168,104,.19);color:var(--gold-bright)}
.sec--ivory .btn-ghost{background:rgba(154,123,58,.1);-webkit-backdrop-filter:none;backdrop-filter:none}
.sec--ivory .btn-ghost:hover{border-color:transparent;background:rgba(154,123,58,.16)}
/* the light sweeping across a facet */
.btn-primary::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
  transform:translateX(-130%);transition:transform .65s ease}
.btn-primary:hover::after,.btn-primary:focus-visible::after{transform:translateX(130%)}
.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px currentColor}
/* spec chips: bordered pills → faceted tokens (pressed stays solid gold) */
.chip{--cut:8px;border-color:transparent;background:rgba(255,255,255,.05)}
.chip:hover{border-color:transparent;background:rgba(198,168,104,.13)}
.chip-shape{--cut:10px}
.chip:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--gold)}
/* the intro card's close control is a little cut stone too */
.intro-close{--cut:10px;border-color:transparent;background:rgba(198,168,104,.12)}
.intro-close:hover,.intro-close:focus-visible{border-color:transparent;background:rgba(198,168,104,.22)}
@media(max-width:680px){.links .nav-cta .btn{--cut:7px}}
@media(prefers-reduced-motion:reduce){.btn-primary::after{display:none}}