  :root {
    --chalk:#F2F1EC; --surface:#FBFAF6; --ink:#10292B; --muted:#5B6C69;
    --accent:#2F6D6B; --accent-ink:#FBFAF6; --sand:#BFAE93; --rule:#DAD7CD;
    --shadow:0 1px 2px rgba(16,41,43,.05), 0 18px 40px -28px rgba(16,41,43,.35);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --chalk:#0C1F21; --surface:#12292B; --ink:#E9EAE3; --muted:#9BADA9;
      --accent:#7FBBB2; --accent-ink:#0C1F21; --sand:#A8977C; --rule:#1F3E40;
      --shadow:0 1px 2px rgba(0,0,0,.45), 0 18px 40px -28px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"] {
    --chalk:#0C1F21; --surface:#12292B; --ink:#E9EAE3; --muted:#9BADA9;
    --accent:#7FBBB2; --accent-ink:#0C1F21; --sand:#A8977C; --rule:#1F3E40;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 18px 40px -28px rgba(0,0,0,.8);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
  body {
    margin:0; background:var(--chalk); color:var(--ink);
    font-family:"Alegreya Sans","Avenir Next","Segoe UI",system-ui,sans-serif;
    font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  }
  img { max-width:100%; height:auto; display:block; }
  a { color:var(--accent); }
  a:focus-visible, button:focus-visible, summary:focus-visible {
    outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
  }
  .wrap { width:100%; max-width:64rem; margin:0 auto; padding:0 1.75rem; }
  .label { font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

  /* nav */
  .nav { position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--chalk) 88%, transparent);
         backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); }
  .nav-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:4.25rem; }
  .nav-mark { display:flex; align-items:center; gap:.6rem; font-family:"Bodoni Moda",Didot,"Times New Roman",serif;
              font-size:1.28rem; text-decoration:none; color:var(--ink); white-space:nowrap; }
  .mark-svg { width:1.75em; height:1.75em; flex:none; color:var(--accent); overflow:visible; }
  .nav-links { display:flex; align-items:center; gap:1.5rem; font-size:.8rem; font-weight:700;
               letter-spacing:.12em; text-transform:uppercase; }
  .nav-links a { text-decoration:none; color:var(--muted); transition:color .2s; }
  .nav-links a:hover { color:var(--ink); }
  .nav-links a.cta { color:var(--accent-ink); background:var(--accent); padding:.55rem 1.05rem;
                     border-radius:999px; letter-spacing:.1em; }
  .nav-links a.cta:hover { color:var(--accent-ink); opacity:.88; }
  /* seven links plus the button outgrow a laptop-width nav, so tighten it and
     let the row scroll sideways rather than push the whole page wider */
  @media (max-width:64rem){
    .nav-inner { gap:1rem; }
    .nav-mark { font-size:1.12rem; }
    .nav-mark .mark-svg { width:1.5em; height:1.5em; }
    .nav-links { gap:.9rem; font-size:.72rem; letter-spacing:.08em;
                 min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
                 -webkit-overflow-scrolling:touch; }
    .nav-links::-webkit-scrollbar { display:none; }
    .nav-links a { white-space:nowrap; }
    .nav-links a.cta { padding:.5rem .85rem; }
  }
  @media (max-width:52rem){ .nav-links a:not(.cta){ display:none; } .nav-links { overflow:visible; } }

  /* hero — deliberately one look, light type on a dark photo in both themes */
  .hero { position:relative; min-height:clamp(30rem,82vh,46rem); display:flex; align-items:center;
          background:#0B1C1E; overflow:hidden; }
  .hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; }
  .hero-veil { position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(ellipse 58% 46% at 54% 46%, rgba(9,20,22,.28) 0%, rgba(9,20,22,.10) 55%, rgba(9,20,22,0) 78%),
      linear-gradient(180deg, rgba(9,20,22,.12) 0%, rgba(9,20,22,.04) 42%, rgba(9,20,22,.30) 100%); }
  .hero-inner { position:relative; padding:4rem 0; display:flex; flex-direction:column;
                align-items:center; text-align:center; gap:1.3rem; max-width:52rem; color:#FBFAF6;
                transform:none; }
  .hero-eyebrow { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem; font-size:.73rem;
                  font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#EAF1EE;
                  text-shadow:0 1px 3px rgba(9,20,22,.8), 0 2px 14px rgba(9,20,22,.9); }
  .hero-eyebrow .dot { width:3px; height:3px; border-radius:50%; background:#BFAE93; }
  .hero h1 { margin:0; font-family:"Bodoni Moda",Didot,serif; font-weight:500;
             font-size:clamp(2.8rem,7.8vw,5.15rem); line-height:1.0; letter-spacing:-.014em;
             text-wrap:balance; color:#FFFFFF;
             -webkit-text-stroke:1.4px rgba(4,10,11,.8); paint-order:stroke fill; }
  .hero h1 em { display:block; font-style:italic; font-weight:400; font-size:.33em;
                line-height:1.3; color:#FFFFFF; margin-top:.8rem;
                -webkit-text-stroke:.4px rgba(9,20,22,.5); paint-order:stroke fill;
                text-shadow:0 1px 10px rgba(9,20,22,.7); }
  .hero p { margin:0; max-width:34rem; font-size:1.1rem; color:#FFFFFF; font-weight:500;
            text-shadow:0 1px 2px rgba(9,20,22,.9), 0 2px 10px rgba(9,20,22,.95), 0 0 28px rgba(9,20,22,.75); }
  .hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:.6rem; }
  .btn { display:inline-block; background:var(--accent); color:var(--accent-ink); text-decoration:none;
         font-weight:700; font-size:.83rem; letter-spacing:.12em; text-transform:uppercase;
         padding:.85rem 1.6rem; border-radius:999px; transition:opacity .2s; }
  .btn:hover { opacity:.88; }
  .btn-ghost { background:rgba(9,20,22,.30); color:#FBFAF6; border:1px solid rgba(251,250,246,.7);
               backdrop-filter:blur(2px); }
  .btn-ghost:hover { border-color:#FBFAF6; opacity:1; }
  .hero-credit { position:absolute; right:1rem; bottom:.6rem; font-size:.65rem; letter-spacing:.08em;
                 color:rgba(251,250,246,.55); }

  /* strip */
  .strip { background:var(--surface); border-bottom:1px solid var(--rule); }
  .strip-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
                 gap:1.25rem 2rem; padding:1.15rem 0; }
  .strip .stars { color:var(--accent); letter-spacing:.2em; font-size:.9rem; }
  .strip .n { font-family:"Bodoni Moda",Didot,serif; font-size:1.4rem; font-variant-numeric:tabular-nums; }
  .strip .t { font-size:.9rem; color:var(--muted); }
  .strip-item { display:flex; align-items:baseline; gap:.6rem; }

  /* sections */
  .band { padding:clamp(3.25rem,7.5vw,5.5rem) 0; }
  .band-alt { background:var(--surface); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
  .section-head { display:flex; flex-direction:column; gap:.6rem; max-width:44rem; }
  .section-head h2 { margin:0; font-family:"Bodoni Moda",Didot,serif; font-weight:400;
                     font-size:clamp(1.85rem,4.2vw,2.7rem); line-height:1.12; text-wrap:balance; }
  .section-head p { margin:0; color:var(--muted); font-size:1.02rem; }

  /* every chapter opens with a solid band, so the joins read as cuts, not seams */
  .banner-band { padding-top:0; }
  .section-banner { background:var(--accent); color:var(--accent-ink); }
  .section-banner-inner { display:flex; flex-wrap:wrap; align-items:baseline;
                          justify-content:space-between; gap:.35rem 1.5rem;
                          padding-top:1.15rem; padding-bottom:1.2rem; }
  .banner-k { font-family:"Bodoni Moda",Didot,serif; font-weight:500; line-height:1;
              font-size:clamp(1.65rem,3.6vw,2.25rem); }
  .banner-v { font-size:.76rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
              opacity:.9; }
  .banner-band > .wrap { padding-top:clamp(2.75rem,6vw,4.25rem); }

  /* about */
  .about-body { margin-top:1.75rem; display:grid; grid-template-columns:1fr 1fr; gap:2rem 3rem; max-width:56rem; }
  .about-body p { margin:0; font-size:1.05rem; }
  @media (max-width:46rem){ .about-body{ grid-template-columns:1fr; } }

  /* services */
  .services { margin-top:2.25rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));
              gap:1px; background:var(--rule); border:1px solid var(--rule); }
  .service { background:var(--chalk); padding:1.9rem 1.6rem; display:flex; flex-direction:column; gap:.7rem; }
  .band-alt .service { background:var(--surface); }
  .service .tier { font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sand); }
  .service h3 { margin:0; font-family:"Bodoni Moda",Didot,serif; font-weight:400; font-size:1.5rem; line-height:1.15; }
  .service p { margin:0; font-size:.96rem; color:var(--muted); }

  /* team */
  .team { margin-top:2.25rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:1.6rem 1.4rem; }
  .member { display:flex; flex-direction:column; gap:.7rem; }
  .member img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; background:var(--surface); }
  .member .name { font-family:"Bodoni Moda",Didot,serif; font-size:1.25rem; line-height:1.2; }
  .member .role { font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--sand); }
  .member p { margin:0; font-size:.9rem; color:var(--muted); }
  .member-text { display:flex; flex-direction:column; gap:.45rem; }
  /* two people, so keep the cards at portrait scale instead of letting them fill the row */
  .team.pair { grid-template-columns:repeat(2, minmax(0,15.5rem)); gap:1.75rem; }
  @media (max-width:34rem){ .team.pair { grid-template-columns:minmax(0,1fr); max-width:17rem; } }

  /* gallery */
  .gallery { margin-top:2.25rem; display:grid; grid-template-columns:repeat(12,1fr); gap:.85rem; }
  .shot { position:relative; margin:0; overflow:hidden; background:var(--surface); border-radius:2px; }
  .shot img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
  .shot:hover img { transform:scale(1.035); }
  .shot button { position:absolute; inset:0; width:100%; height:100%; border:0; padding:0;
                 background:transparent; cursor:zoom-in; }
  .shot button[data-video] { cursor:pointer; }
  .shot .play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
                width:4.2rem; height:4.2rem; border-radius:50%; display:grid; place-items:center;
                background:rgba(9,20,22,.5); border:1px solid rgba(251,250,246,.65);
                backdrop-filter:blur(3px); pointer-events:none; transition:background .25s, transform .25s; }
  .shot .play::after { content:""; width:0; height:0; margin-left:.25rem;
                       border-left:1.15rem solid #FBFAF6;
                       border-top:.72rem solid transparent; border-bottom:.72rem solid transparent; }
  .shot button:hover + .play, .shot button:focus-visible + .play { background:rgba(47,109,107,.85);
                                                                   transform:translate(-50%,-50%) scale(1.06); }
  .w6{ grid-column:span 6; } .w4{ grid-column:span 4; } .w8{ grid-column:span 8; }
  .w12{ grid-column:span 12; } .w3{ grid-column:span 3; }
  .r-tall{ aspect-ratio:3/4; } .r-wide{ aspect-ratio:3/2; } .r-pano{ aspect-ratio:2/1; }
  @media (max-width:52rem){
    .w4,.w3{ grid-column:span 6; } .w8{ grid-column:span 12; }
  }
  @media (max-width:34rem){
    .w6,.w4,.w3,.w8{ grid-column:span 12; }
  }

  /* jump cards — the home page hands off to the Services and Design pages */
  .jump, .page-next { display:grid; grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr)); gap:1rem; }
  .jump { margin-top:2.25rem; }
  .page-next { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--rule); }
  .page-next-solo { grid-template-columns:minmax(0,22rem); }
  .jump-card { display:flex; flex-direction:column; gap:.4rem; text-decoration:none;
               background:var(--surface); border:1px solid var(--rule); border-radius:2px;
               padding:1.5rem 1.6rem 1.35rem; color:var(--ink);
               transition:border-color .2s, transform .2s, box-shadow .2s; }
  .band-alt .jump-card { background:var(--chalk); }
  .jump-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
  .jump-k { font-family:"Bodoni Moda",Didot,serif; font-size:1.4rem; line-height:1.2; }
  .jump-sub { font-size:.9rem; color:var(--muted); }
  .jump-arw { margin-top:.35rem; color:var(--accent); font-size:1.1rem; line-height:1; }
  .jump-card:hover .jump-arw { transform:translateX(3px); }
  .jump-arw { transition:transform .2s; }

  /* on the home page the two links sit under the team, set off by a rule */
  #team .jump { margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--rule); }

  /* sub-pages */
  .page-top { padding-top:clamp(2.25rem,5vw,3.5rem); }
  .backlink { display:inline-flex; align-items:center; gap:.45rem; margin-bottom:1.6rem;
              font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
              color:var(--muted); text-decoration:none; transition:color .2s; }
  .backlink:hover { color:var(--accent); }
  .section-head h1 { margin:0; font-family:"Bodoni Moda",Didot,serif; font-weight:400;
                     font-size:clamp(2rem,4.8vw,3rem); line-height:1.1; text-wrap:balance; }
  .nav-links a[aria-current="page"] { color:var(--ink); }
  .nav-links a[aria-current="page"]:not(.cta) { border-bottom:2px solid var(--accent); padding-bottom:.2rem; }

  /* boards */
  .boards { margin-top:2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.25rem; }
  .board figure { margin:0; }
  .board img { border:1px solid var(--rule); border-radius:2px; }
  .board figcaption { margin-top:.7rem; font-size:.82rem; font-weight:700; letter-spacing:.14em;
                      text-transform:uppercase; color:var(--muted); }

  /* reviews */
  .venue-group { margin-top:2.75rem; }
  .venue-group > h3 { margin:0 0 .3rem; font-family:"Bodoni Moda",Didot,serif; font-weight:400; font-size:1.75rem; }
  .venue-group > .vg-note { margin:0 0 .5rem; color:var(--muted); font-size:.95rem; }
  .review { display:grid; grid-template-columns:12rem 1fr; gap:2.25rem;
            padding:clamp(1.75rem,4vw,2.5rem) 0; border-top:1px solid var(--rule); }
  .venue-group .review:last-child { border-bottom:1px solid var(--rule); }
  .rail { display:flex; flex-direction:column; gap:.45rem; align-self:start; }
  .rail .who { font-size:1.28rem; font-weight:500; line-height:1.15; }
  .rail .when { font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums; }
  .rail .when b { font-weight:700; color:var(--sand); text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; display:block; }
  .rail .stars { color:var(--accent); letter-spacing:.2em; font-size:.78rem; }
  .rbody h4 { margin:0 0 1rem; font-family:"Bodoni Moda",Didot,serif; font-weight:500; font-style:italic;
              font-size:1.1rem; color:var(--muted); }
  .pull { margin:0; padding-left:1.15rem; border-left:2px solid var(--accent);
          font-family:"Bodoni Moda",Didot,serif; font-size:clamp(1.2rem,2.4vw,1.5rem);
          line-height:1.34; text-wrap:pretty; }
  details.account { margin-top:1.3rem; }
  details.account > summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.5rem;
    font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); }
  details.account > summary::-webkit-details-marker { display:none; }
  details.account > summary::after { content:"+"; font-size:1rem; line-height:1; }
  details.account[open] > summary::after { content:"\2212"; }
  details.account[open] > summary { margin-bottom:1rem; }
  .account-text { display:flex; flex-direction:column; gap:1rem; max-width:37rem; }
  .account-text p { margin:0; }
  @media (max-width:42rem){ .review{ grid-template-columns:1fr; gap:1.2rem; } }

  /* through-line */
  .theme-grid { margin-top:2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));
                gap:1px; background:var(--rule); border:1px solid var(--rule); }
  .theme { background:var(--surface); padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; }
  .band-alt .theme { background:var(--chalk); }
  .theme h3 { margin:0; font-size:1.05rem; font-weight:700; }
  .theme p { margin:0; font-size:.92rem; color:var(--muted); }
  .theme cite { font-style:italic; font-size:.84rem; color:var(--accent); }

  /* venues */
  .hotels { margin-top:2.25rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.75rem; }
  .hotel { display:flex; flex-direction:column; gap:.75rem; }
  .hotel img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px; }
  .hotel h3 { margin:0; font-family:"Bodoni Moda",Didot,serif; font-weight:400; font-size:1.45rem; line-height:1.15; }
  .hotel .place { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sand); }
  .hotel p { margin:0; font-size:.94rem; color:var(--muted); }
  .hotel .rooms { font-size:.86rem; color:var(--muted); border-top:1px solid var(--rule); padding-top:.6rem; }
  .hotel .hotel-link { display:inline-flex; align-items:center; gap:.35rem; align-self:flex-start;
                       font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
                       color:var(--accent); text-decoration:none; border-bottom:1px solid transparent;
                       transition:border-color .2s; }
  .hotel .hotel-link:hover { border-bottom-color:var(--accent); }
  .hotel .hotel-link .arw { font-size:.9em; }

  /* contact */
  .contact-grid { margin-top:2rem; display:grid; grid-template-columns:1fr 1fr; gap:2.5rem 3rem;
                  max-width:56rem; align-items:start; }
  @media (max-width:46rem){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-lines { display:flex; flex-direction:column; gap:1.4rem; }
  .contact-line { display:flex; flex-direction:column; gap:.15rem; }
  .contact-line .k { font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .contact-line .v { font-family:"Bodoni Moda",Didot,serif; font-size:clamp(1.3rem,3vw,1.72rem);
                     line-height:1.2; text-decoration:none; color:var(--ink); word-break:break-word; }
  .contact-line .v:hover { color:var(--accent); }

  /* footer */
  .foot { border-top:1px solid var(--rule); padding:2.5rem 0 3.25rem; display:flex; flex-wrap:wrap;
          justify-content:space-between; align-items:flex-end; gap:1.75rem; }
  .foot-brand { display:flex; flex-direction:column; gap:.35rem; }
  .foot-brand .mark { display:flex; align-items:center; gap:.6rem;
                      font-family:"Bodoni Moda",Didot,serif; font-size:1.6rem; line-height:1; }
  .foot .sub { font-size:.88rem; color:var(--muted); }
  .reviews-note { margin:2.75rem 0 0; padding-top:1.5rem; border-top:1px solid var(--rule);
                  max-width:44rem; font-size:.82rem; color:var(--muted); line-height:1.6; }

  /* lightbox */
  .lb { position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
        background:rgba(9,20,22,.94); padding:1.5rem; }
  .lb[open], .lb.on { display:flex; }
  .lb img, .lb video { max-width:min(100%,1200px); max-height:88vh; width:auto; height:auto;
            border-radius:2px; box-shadow:0 30px 80px -30px rgba(0,0,0,.9); }
  .lb video { background:#0B1C1E; }
  .lb [hidden] { display:none !important; }
  .lb-close { position:absolute; top:1rem; right:1.15rem; background:none; border:0; cursor:pointer;
              color:#FBFAF6; font-size:2rem; line-height:1; padding:.25rem .6rem; }

  /* motion */
  .reveal { opacity:0; transform:translateY(14px);
            transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
  .reveal.in { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    html { scroll-behavior:auto; }
    .reveal { opacity:1; transform:none; transition:none; }
    .shot:hover img { transform:none; }
  }
