:root{
    --surface:#FCFBF8;
    --surface-deep:#F5F1E8;
    --panel:#F1ECE1;
    --ink:#3F3931;
    --body:#5A5248;
    --muted:#8B8377;
    --brass:#9C7A44;
    --brass-deep:#856334;
    --accent:#9C7A44;
    --accent-text:#9C7A44;
    --accent-hover:#856334;
    --accent-on-dark:#9C7A44;
    --accent-light:#9C7A44;
    --stone:#8B8377;
    --stone-text:#8B8377;
    --savills-yellow:#9C7A44;
    --line: rgba(156,122,68,0.28);
  }

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

  html{scroll-behavior:smooth;}

  body{
    background:var(--surface);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    padding-top:86px;
  }

  img{display:block;width:100%;height:100%;object-fit:cover;}
  .hero picture{display:block;width:100%;height:100%;}
  .hero img, .arrival img, .featured-media img, .tile img, .cip-media img, .enquiry img{
    filter:saturate(1.08) contrast(1.05) brightness(0.99);
  }

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

  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:400;
    letter-spacing:-0.01em;
    line-height:1.05;
  }

  a{color:inherit;text-decoration:none;}

  /* ---------- NAV ---------- */
  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 5vw;
    background:var(--surface);
    border-top:2px solid var(--brass);
    border-bottom:1px solid var(--line);
    
  }
  .nav-mark{
    font-family:'Fraunces', serif;
    font-size:15px;
    letter-spacing:0.14em;
    color:#3F3931;
    display:flex;
    align-items:center;
    gap:16px;
  }
  .brand-chip{
    display:inline-flex;
    align-items:center;
    border-radius:0;
    padding:7px 12px;
    flex-shrink:0;
  }
  .brand-chip--light{background:rgba(156,122,68,0.28);}
  .brand-chip--yellow{background:var(--savills-yellow);}
  .brand-logo{
    display:block;
    border-radius:0;
    object-fit:contain;
    
  }
  .brand-logo--footer-lg{height:48px; width:48px; border-radius:0;}
  .brand-logo--footer-sm{height:40px; width:40px; border-radius:0;}
  .brand-logo--halcyon-header{height:42px; width:auto; border-radius:0;}
  .brand-logo--halcyon-footer-lg{height:44px; width:auto; border-radius:0;}
  .brand-logo--halcyon-footer-sm{height:38px; width:auto; border-radius:0;}
  .brand-divider{
    width:1px;
    height:24px;
    background:rgba(156,122,68,0.28);
    display:inline-block;
    flex-shrink:0;
  }
  .brand-divider--footer{background:rgba(156,122,68,0.28);}
  .brand-divider--footer-lg{height:52px;}
  .brand-divider--footer-sm{height:40px;}
  .brand-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .presented-by{
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    row-gap:14px;
    padding:36px 0;
    margin-top:8px;
    border-top:1px solid rgba(156,122,68,0.28);
  }
  nav ul{
    list-style:none;
    display:flex;
    gap:42px;
  }
  nav a{
    color:#3F3931;
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-weight:400;
    opacity:0.88;
    transition:opacity .3s ease;
  }
  nav a:hover{opacity:1;}

  .menu-toggle{
    display:none;
    position:fixed;
    top:20px; right:5vw;
    z-index:110;
    background:none;
    border:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    padding:10px;
  }
  .menu-toggle span{
    display:block;
    width:24px; height:1px;
    background:#fff;
    transition:transform .3s ease, opacity .3s ease;
  }
  .menu-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .menu-toggle.open span:nth-child(2){opacity:0;}
  .menu-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  .mobile-nav{
    position:fixed; inset:0;
    background:var(--surface);
    z-index:105;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:38px;
    transform:translateY(-100%);
    opacity:0;
    transition:transform .4s ease, opacity .4s ease;
  }
  .mobile-nav.open{transform:translateY(0); opacity:1;}
  .mobile-nav a{
    color:#3F3931;
    font-family:'Fraunces', serif;
    font-size:24px;
    letter-spacing:0.06em;
  }
  .mobile-nav .btn{
    margin-top:10px;
    white-space:normal;
    text-align:center;
    max-width:80vw;
    letter-spacing:0.1em;
    color:var(--ink);
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    height:100vh;
    min-height:640px;
    overflow:hidden;
  }
  .hero img{
    animation: heroZoom 22s ease-out forwards;
  }
  @keyframes heroZoom{
    from{transform:scale(1.08);}
    to{transform:scale(1);}
  }
  .hero::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.02) 22%, rgba(0,0,0,0.08) 45%, rgba(0,0,0,0.62) 78%, rgba(0,0,0,0.88) 100%);
  }
  .hero-content{
    position:absolute;
    left:5vw; right:5vw; bottom:64px;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
  }
  .hero-content .eyebrow{color:#E4D6BC; margin-bottom:18px; display:block; text-shadow:0 1px 8px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.5);}
  .hero-content h1{
    color:#fff;
    font-size:clamp(38px, 5.4vw, 84px);
    max-width:900px;
    text-shadow:0 4px 24px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.35);
  }
  .hero-cta{
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:14px;
  }
  .btn{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:#fff;
    background:var(--brass);
    padding:14px 30px;
    border:1px solid var(--brass);
    white-space:nowrap;
    
    transition:filter .3s ease, transform .15s ease;
  }
  .btn:hover{filter:brightness(0.94);}
  .btn:active{transform:translateY(1px);}
  .scroll-cue{
    position:absolute;
    right:5vw; top:50%;
    writing-mode:vertical-rl;
    color:rgba(255,255,255,0.75);
    font-size:10px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:14px;
  }
  .scroll-cue::after{
    content:'';
    width:1px; height:60px;
    background:rgba(255,255,255,0.5);
  }

  /* ---------- SECTION SPACING ---------- */
  section{padding:150px 5vw;}
  .tight{padding-top:0;}

  /* ---------- INTRO STATEMENT ---------- */
  .intro{
    display:grid;
    grid-template-columns:1fr 1.6fr;
    gap:80px;
    align-items:start;
  }
  .intro .eyebrow{margin-bottom:24px;}
  .intro h2{
    font-size:clamp(30px, 3vw, 46px);
    font-weight:300;
    color:var(--ink);
  }
  .intro p{
    font-size:15px;
    line-height:1.9;
    color:#5A5248;
    max-width:480px;
  }
  .intro .stat-row{
    display:flex;
    gap:56px;
    margin-top:44px;
    padding-top:36px;
    border-top:1px solid var(--line);
  }
  .stat-row div span{
    display:block;
    font-family:'Fraunces', serif;
    font-size:34px;
    color:#9C7A44;
  }
  .stat-row div small{
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--stone-text);
  }

  /* ---------- FEATURED VILLA ---------- */
  .featured{
    background:var(--panel);
    color:var(--body);
    padding:0;
  }
  .featured-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:100vh;
  }
  .featured-media{position:relative; overflow:hidden;}
  .featured-text{
    padding:110px 6vw;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .featured-text .eyebrow{color:var(--accent-light); margin-bottom:26px;}
  .featured-text h2{
    font-size:clamp(34px, 3.6vw, 58px);
    color:#3F3931;
    margin-bottom:28px;
  }
  .featured-text p{
    font-size:15px;
    line-height:1.9;
    color:#5A5248;
    max-width:420px;
    margin-bottom:44px;
  }
  .featured-text .btn{align-self:flex-start;}

  /* ---------- ARRIVAL / EDITORIAL FULL IMAGE ---------- */
  .arrival{
    position:relative;
    overflow:hidden;
  }
  .arrival img{height:auto; width:100%; object-fit:contain;}
  .arrival::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.0) 46%);
  }
  .arrival-caption{
    position:absolute;
    left:5vw; bottom:56px;
    z-index:2;
    max-width:520px;
  }
  .arrival-caption .eyebrow{color:var(--accent-light); margin-bottom:16px; text-shadow:0 1px 8px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.5);}
  .arrival-caption h2{
    text-shadow:0 4px 20px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.35);
    color:#fff;
    font-size:clamp(28px,3vw,44px);
    font-weight:300;
  }

  /* ---------- EXPLORE GRID ---------- */
  .explore-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:60px;
  }
  .explore-head h2{font-size:clamp(30px,3vw,46px); font-weight:300;}
  .explore-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2px;
  }
  .tile{
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    cursor:pointer;
  }
  .tile img{transition:transform 1s cubic-bezier(.2,.8,.2,1);}
  .tile:hover img{transform:scale(1.06);}
  .tile::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 45%);
  }
  .tile-label{
    position:absolute; left:22px; bottom:22px; z-index:2;
    color:#fff;
  }
  .tile-label small{
    display:block;
    font-size:9px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--accent-light);
    margin-bottom:8px;
  }
  .tile-label span{
    font-family:'Fraunces', serif;
    font-size:19px;
    font-weight:400;
  }

  /* ---------- VILLA SYSTEMS ---------- */
  .systems{
    background:var(--surface-deep);
    color:var(--body);
  }
  .systems .section-head{
    max-width:640px;
    margin-bottom:64px;
  }
  .systems .section-head .eyebrow{color:var(--accent-light); margin-bottom:22px;}
  .systems .section-head h2{
    font-size:clamp(30px,3vw,46px);
    font-weight:300;
    color:#3F3931;
  }
  .systems-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0;
    border-top:1px solid rgba(156,122,68,0.28);
    border-left:1px solid rgba(156,122,68,0.28);
  }
  .systems-item{
    padding:38px 34px;
    border-right:1px solid rgba(156,122,68,0.28);
    border-bottom:1px solid rgba(156,122,68,0.28);
  }
  .systems-item .icon{
    display:block;
    margin-bottom:20px;
  }
  .systems-item .num{
    font-family:'Fraunces', serif;
    font-size:13px;
    color:var(--accent-light);
    margin-bottom:18px;
    display:block;
  }
  .systems-item h3{
    font-family:'Fraunces', serif;
    font-weight:400;
    font-size:19px;
    color:#3F3931;
    margin-bottom:14px;
  }
  .systems-item p{
    font-size:13.5px;
    line-height:1.75;
    color:#5A5248;
  }

  /* ---------- CIP STRIP ---------- */
  .cip{
    background:var(--surface-deep);
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
  }
  .cip-media{position:relative; min-height:520px;}
  .cip-text{
    padding:110px 6vw;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .cip-text .eyebrow{margin-bottom:24px;}
  .cip-text h2{font-size:clamp(28px,2.8vw,42px); font-weight:300; margin-bottom:26px; max-width:480px;}
  .cip-list{list-style:none; margin-top:8px;}
  .cip-list li{
    display:flex;
    gap:18px;
    padding:20px 0;
    border-top:1px solid var(--line);
    font-size:14px;
    line-height:1.6;
    color:#5A5248;
    max-width:460px;
  }
  .cip-list li:last-child{border-bottom:1px solid var(--line);}
  .cip-list li b{
    font-family:'Fraunces', serif;
    font-weight:400;
    color:var(--accent-text);
    font-size:15px;
    flex-shrink:0;
  }
  .enquiry{
    position:relative;
    padding:0;
    height:78vh;
    min-height:500px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .enquiry::after{content:'';position:absolute; inset:0; background:rgba(15,14,12,0.5);}
  .enquiry-content{position:relative; z-index:2; color:#fff;}
  .enquiry-content .eyebrow{color:var(--accent-light); margin-bottom:22px;}
  .enquiry-content h2{
    font-size:clamp(32px, 4.2vw, 64px);
    font-weight:300;
    max-width:760px;
    margin:0 auto 40px;
  }
  .enquiry-form{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    max-width:640px;
    margin:0 auto;
    justify-content:center;
  }
  .enquiry-form input, .enquiry-form textarea{
    flex:1 1 260px;
    padding:14px 18px;
    font-family:'Work Sans', sans-serif;
    font-size:14px;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.35);
    color:#fff;
    border-radius:0;
  }
  .enquiry-form input::placeholder, .enquiry-form textarea::placeholder{color:rgba(255,255,255,0.65);}
  .enquiry-form textarea{flex-basis:100%; min-height:80px; resize:vertical;}
  .enquiry-form .btn{flex-basis:100%; max-width:260px; margin:6px auto 0; cursor:pointer;}
  .enquiry-form-note{font-size:12px; color:rgba(255,255,255,0.6); margin-top:14px;}

  /* ---------- LIGHTBOX ---------- */
  .lightbox{
    position:fixed; inset:0; z-index:200;
    background:rgba(20,18,15,0.94);
    display:none;
    align-items:center; justify-content:center;
    padding:5vw;
    cursor:zoom-out;
  }
  .lightbox.open{display:flex;}
  .lightbox img{
    max-width:100%; max-height:86vh;
    width:auto; height:auto;
    object-fit:contain;
    cursor:default;
  }
  .lightbox-caption{
    position:absolute; left:0; right:0; bottom:26px;
    text-align:center;
    font-family:'Work Sans', sans-serif;
    font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
    color:rgba(255,255,255,0.72);
  }
  .lightbox-close{
    position:absolute; top:22px; right:26px;
    background:none; border:none; cursor:pointer;
    width:34px; height:34px; padding:0;
  }
  .lightbox-close::before, .lightbox-close::after{
    content:''; position:absolute; left:4px; top:16px;
    width:26px; height:1px; background:rgba(255,255,255,0.85);
  }
  .lightbox-close::before{transform:rotate(45deg);}
  .lightbox-close::after{transform:rotate(-45deg);}
  .tile{cursor:zoom-in;}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--panel);
    color:var(--body);
    padding:90px 5vw 40px;
  }
  .footer-top{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:60px;
    padding-bottom:70px;
    border-bottom:1px solid rgba(156,122,68,0.28);
  }
  .footer-mark{
    font-family:'Fraunces', serif;
    font-size:22px;
    letter-spacing:0.06em;
    margin-bottom:20px;
  }
  .footer-mark span{color:#5A5248; font-size:11px; display:block; letter-spacing:0.2em; margin-top:8px; font-family:'Work Sans',sans-serif;}
  .footer-top p{font-size:13px; line-height:1.8; color:#5A5248; max-width:280px;}
  .footer-col small{
    display:block;
    font-size:10px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:#8B8377;
    margin-bottom:20px;
  }
  .footer-col a, .footer-col .footer-line{
    display:block;
    font-size:13px;
    color:#5A5248;
    margin-bottom:12px;
    transition:color .25s ease;
  }
  .footer-col a:hover{color:var(--accent-light);}
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    padding-top:32px;
    font-size:11px;
    color:#8B8377;
    letter-spacing:0.04em;
  }

  @media (max-width: 900px){
    nav ul{display:none;}
    .menu-toggle{display:flex;}
    .nav-savills{display:none;}
    header .btn{display:none;}
    /* whenever the nav collapses to a hamburger, the logo centres */
    header{justify-content:center;}
    .intro, .featured-grid, .cip{grid-template-columns:1fr;}
    .explore-grid{grid-template-columns:repeat(2,1fr);}
    .systems-grid{grid-template-columns:1fr;}
    .footer-top{grid-template-columns:1fr 1fr; row-gap:44px;}
    section{padding:90px 6vw;}
    .featured-text, .cip-text{padding:70px 6vw;}
    .featured-media{min-height:340px;}
    .cip-media{min-height:280px;}
  }

  @media (max-width: 640px){
    /* 16px stops iOS zooming the page when a field is focused */
    .enquiry-form input, .enquiry-form textarea{font-size:16px;}
    /* larger tap targets for thumbs */
    .footer-col a, .footer-col .footer-line{padding:7px 0; margin-bottom:4px;}
    .mobile-nav a{padding:12px 0;}
    .enquiry-form-note{font-size:13px;}
    .enquiry-form-note a{display:inline-block; padding:8px 0;}
  }

  @media (max-width: 640px){
    /* image is short and uncropped here - caption sits beneath it, not over it */
    .arrival{background:var(--surface-deep);}
    .arrival::after{display:none;}
    .arrival-caption{
      position:static;
      max-width:none;
      padding:28px 5vw 34px;
    }
    .arrival-caption .eyebrow{color:var(--brass); text-shadow:none;}
    .arrival-caption h2{color:var(--ink); text-shadow:none; font-size:26px;}
  }

  @media (max-width: 640px){
    body{padding-top:67px;}
    header{padding:15px 5vw; justify-content:center;}
  .nav-mark{gap:8px;}
    .brand-logo--halcyon-header{height:34px; width:auto; }
    .brand-divider{height:18px;}
    .menu-toggle{padding:11px; top:15px;}
    /* header is fixed and body is offset by it - subtract it so the whole hero,
       including the CTA, fits the first screen */
    .hero{min-height:520px; height:calc(100svh - 67px - 46px);}
    .hero-content{
      flex-direction:column;
      align-items:flex-start;
      gap:22px;
      bottom:44px;
    }
    .hero-content .eyebrow{font-size:10px;}
    .hero-content h1{font-size:34px; line-height:1.08; max-width:100%;}
    .hero-cta{align-items:flex-start; width:100%;}
    .hero-cta .btn{width:100%; text-align:center; padding:16px 30px;}
    .scroll-cue{display:none;}
    .intro .stat-row{gap:28px; flex-wrap:wrap;}
    .stat-row div span{font-size:26px;}
    .spec-grid{grid-template-columns:repeat(2,1fr); row-gap:20px;}
    .explore-grid{grid-template-columns:1fr;}
    .footer-top{grid-template-columns:1fr; row-gap:36px;}
    .arrival-caption h2{font-size:25px;}
    .enquiry-content h2{font-size:28px;}
    .enquiry-content .btn{width:100%; text-align:center;}
    .featured-text .btn{width:100%; text-align:center;}
    section{padding:64px 6vw;}
    .featured-text, .cip-text{padding:56px 6vw;}
    footer{padding:64px 6vw 32px;}
    .footer-bottom{flex-direction:column; gap:10px; align-items:flex-start;}
    .brand-row{gap:14px; margin-bottom:20px !important;}
    .brand-logo--footer-lg{height:52px; width:52px;}
    .brand-logo--halcyon-footer-lg{height:52px; width:auto;}
    .brand-divider--footer-lg{height:40px;}
    .presented-by{gap:16px; row-gap:14px; padding:28px 0;}
    .brand-logo--footer-sm{height:46px; width:46px;}
    .brand-logo--halcyon-footer-sm{height:46px; width:auto;}
    .brand-divider--footer-sm{height:32px;}
  }

  @media (max-width: 400px){
    .brand-logo--halcyon-header{height:30px; width:auto;}
    .brand-divider{height:15px;}
  .nav-mark{gap:6px;}
    .brand-row{gap:10px;}
    .brand-logo--footer-lg{height:44px; width:44px;}
    .brand-logo--halcyon-footer-lg{height:44px; width:auto;}
    .brand-divider--footer-lg{height:34px;}
    .presented-by{gap:12px;}
    .brand-logo--footer-sm{height:40px; width:40px;}
    .brand-logo--halcyon-footer-sm{height:40px; width:auto;}
    .brand-divider--footer-sm{height:28px;}
  }

/* Present to search engines and screen readers, invisible on screen */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- HEADER CONTACT ACTIONS ---------- */
.nav-contact{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.contact-btn{
  font-family:'Work Sans', sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--brass);
  border:1px solid var(--line);
  padding:12px 18px;
  white-space:nowrap;
  transition:border-color .25s ease, color .25s ease;
}
.contact-btn:hover{
  border-color:var(--brass);
  color:var(--brass-deep);
}
.contact-btn--primary{
  background:var(--brass);
  color:#fff;
  border:1px solid var(--brass);
  padding:13px 24px;
}
.contact-btn--primary:hover{color:#fff;}

@media (max-width: 1150px){
  .contact-btn{padding:11px 13px; letter-spacing:0.12em;}
  .nav-contact{gap:7px;}
}

/* mobile menu actions: one solid, two outlined, all legible */
.mobile-nav .btn{
  color:#fff;
  background:var(--brass);
  border:1px solid var(--brass);
  width:auto;
  min-width:240px;
  white-space:nowrap;
}
.mobile-nav .btn--ghost{
  background:transparent;
  color:var(--brass);
  border:1px solid var(--line);
}

/* ---------- PERSISTENT CONTACT BAR (phones and tablets) ---------- */
.contact-bar{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:150;
  background:var(--surface);
  border-top:1px solid var(--line);
  box-shadow:0 -1px 0 rgba(156,122,68,0.10);
}
.contact-bar a{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:15px 4px;
  font-family:'Work Sans', sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--brass);
  border-right:1px solid var(--line);
}
.contact-bar a:last-child{border-right:none;}
.contact-bar a:active{background:var(--panel);}

@media (max-width: 900px){
  .contact-bar{display:flex;}
  /* keep the footer clear of the fixed bar */
  body{padding-bottom:54px;}
  .lightbox{padding-bottom:64px;}
}

/* below 900px the sticky bar and the menu handle contact - keep the header clean */
@media (max-width: 900px){
  .nav-contact{display:none;}
}

/* ---------- MOBILE POLISH ---------- */
@media (max-width: 640px){
  /* the two-column desktop gap becomes dead space once stacked */
  .intro{gap:26px;}
  .featured-grid, .cip{gap:0;}

  /* gallery: 4:3 rather than 4:5 - same width, far less scrolling,
     and it suits the landscape source photography better */
  .tile{aspect-ratio:4/3;}
  .tile-label span{font-size:17px;}

  /* tighten the vertical rhythm without crowding */
  section{padding-top:54px; padding-bottom:54px;}
  .systems-grid > div{padding-top:26px; padding-bottom:26px;}
  .explore-head{margin-bottom:22px;}
}

/* the fixed contact bar also takes 46px, so the hero must clear both */
@media (max-width: 900px) and (min-width: 641px){
  .hero{height:calc(100svh - 81px - 46px); min-height:520px;}
}



/* ---------- CONTACT CHOOSER ---------- */
.email-chooser{
  position:fixed; inset:0; z-index:190;
  background:rgba(20,18,15,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.email-chooser[hidden]{display:none;}
.email-chooser-inner{
  position:relative;
  width:min(370px, 100%);
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--brass);
  padding:28px 24px 22px;
  text-align:center;
}
.email-chooser-lead{
  font-family:'Work Sans', sans-serif;
  font-size:13px; color:var(--muted);
  margin:10px 0 18px;
}
.email-chooser-opt{
  display:block; width:100%;
  font-family:'Work Sans', sans-serif;
  font-size:12px; font-weight:600;
  letter-spacing:0.11em; text-transform:uppercase;
  color:var(--brass); background:transparent;
  border:1px solid var(--line);
  padding:14px 10px; margin-bottom:9px;
  cursor:pointer; transition:border-color .2s ease;
}
.email-chooser-opt:hover{border-color:var(--brass);}
.email-chooser-opt--form{background:var(--brass); color:#fff; border-color:var(--brass);}
.email-chooser-divider{
  position:relative; margin:18px 0 14px;
}
.email-chooser-divider::before{
  content:''; position:absolute; top:50%; left:0; right:0;
  height:1px; background:var(--line);
}
.email-chooser-divider span{
  position:relative; background:var(--surface); padding:0 10px;
  font-family:'Work Sans', sans-serif; font-size:11px;
  letter-spacing:0.06em; color:var(--muted); word-break:break-all;
}
.email-chooser-mail{display:flex; flex-wrap:wrap; gap:8px;}
.email-chooser-opt--sm{
  flex:1 1 calc(50% - 4px);
  width:auto; margin-bottom:0;
  font-size:11px; letter-spacing:0.09em; padding:11px 6px;
}
.email-chooser-close{
  position:absolute; top:8px; right:12px;
  background:none; border:none; font-size:22px; line-height:1;
  color:var(--muted); cursor:pointer;
}
/* the bar's email trigger is now a button, so match the links beside it */
.contact-bar button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:15px 4px; background:none; border:none; border-right:none;
  font-family:'Work Sans', sans-serif; font-size:11px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--brass); cursor:pointer;
}