/* Three Brothers • refined 2026 navigation. Layered after styles.css. */
:root{--nav-header-height:82px;--nav-ease:cubic-bezier(.22,.72,.28,1)}
.site-header--refined{position:sticky;top:0;z-index:90;background:#092734;color:#f5fbfa;border-bottom:1px solid rgba(255,255,255,.08);isolation:isolate;box-shadow:0 5px 22px rgba(4,25,33,.06);transition:background .25s ease,box-shadow .25s ease}
.site-header--refined.scrolled{background:rgba(8,34,46,.97);box-shadow:0 12px 35px rgba(3,25,34,.20);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.nav-utility-bar{background:#061e29;border-bottom:1px solid rgba(255,255,255,.09)}
.nav-utility-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:33px}
.nav-utility-location,.nav-utility-actions{display:flex;align-items:center;gap:13px;margin:0;white-space:nowrap}
.nav-utility-location{color:#b8d0d4;font-size:10px;font-weight:800;letter-spacing:.115em}
.nav-live-dot{display:block;width:6px;height:6px;background:#5cdbb1;box-shadow:0 0 0 3px rgba(92,219,177,.12);border-radius:50%;flex:none}
.nav-utility-divider{height:11px;width:1px;background:rgba(255,255,255,.23)}
.nav-utility-mobile{display:none}
.nav-utility-price{font-size:10px;font-weight:700;letter-spacing:.075em;color:#aac8cc}
.nav-utility-price strong{color:#ffdb79;font-weight:850;margin-left:5px}
.nav-utility-contact{display:inline-flex;align-items:center;gap:7px;color:#e2eeee;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.02em;padding-left:14px;border-left:1px solid rgba(255,255,255,.20);transition:color .2s ease}
.nav-utility-contact svg{height:14px;width:14px;stroke:#70debd}
.nav-utility-contact:hover,.nav-utility-contact:focus-visible{color:#ffce63}
.site-header--refined .navwrap{display:grid;grid-template-columns:minmax(212px,1fr) auto minmax(170px,1fr);align-items:center;gap:20px;min-height:var(--nav-header-height)}
.site-header--refined .brand{display:inline-flex;align-items:center;gap:12px;margin-right:0;width:max-content;max-width:100%;text-decoration:none;color:#fff}
.site-header--refined .brand-symbol{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;flex:none;color:#ffca57;background:rgba(255,201,74,.10);border:1px solid rgba(255,201,74,.27)}
.site-header--refined .brand-symbol__icon{width:31px;height:31px;stroke:currentColor;flex:none}
.site-header--refined .brand-wordmark{display:block;min-width:0}
.site-header--refined .brand strong{display:block;font-size:clamp(1.03rem,1.47vw,1.18rem);line-height:1.08;font-weight:900;letter-spacing:.075em;white-space:nowrap}
.site-header--refined .brand small{display:block;margin-top:5px;color:#b3cbd0;font-size:.61rem;font-weight:800;letter-spacing:.165em;white-space:nowrap}
.site-header--refined .brand small span{color:#ffca57;padding:0 3px}
.site-header--refined .desktop-nav{display:flex;align-items:center;gap:2px;justify-self:center;white-space:nowrap;padding:5px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.045)}
.site-header--refined .desktop-nav a{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:9px 13px;color:#d7e7ea;text-decoration:none;font-size:.845rem;font-weight:700;letter-spacing:.005em;border-radius:999px;transition:color .2s ease,background .2s ease}
.site-header--refined .desktop-nav a:hover{color:#fff;background:rgba(255,255,255,.095)}
.site-header--refined .desktop-nav a[aria-current="page"]{color:#092734;background:#f4f5ee;box-shadow:0 2px 10px rgba(1,17,22,.15);font-weight:850}
.site-header--refined .desktop-nav a[aria-current="page"]:hover{color:#092734;background:#fff}
.site-header--refined .nav-actions{display:flex;align-items:center;justify-self:end;gap:10px}
.site-header--refined .nav-book{display:inline-flex;align-items:center;gap:13px;min-height:51px;padding:8px 9px 8px 20px;color:#092734;font-weight:900;font-size:.865rem;letter-spacing:.015em;white-space:nowrap;background:#ffb653;border:1px solid #ffcb79;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.15);transition:transform .2s var(--nav-ease),background .2s ease,box-shadow .2s ease}
.site-header--refined .nav-book:hover{background:#ffc870;box-shadow:0 9px 18px rgba(0,0,0,.22);transform:translateY(-2px)}
.site-header--refined .nav-book:active{transform:translateY(1px)}
.nav-book__arrow{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#092734;color:#fff;flex:none}
.nav-book__arrow .nav-link-arrow{width:16px;height:16px}
.site-header--refined .mobile-header-book{display:none}
.site-header--refined .menu-toggle{display:none}
.site-header--refined .mobile-nav{display:none}
@media(max-width:1090px){
 .site-header--refined .navwrap{grid-template-columns:minmax(206px,1fr) auto;gap:14px}
 .site-header--refined .desktop-nav{display:none}
 .site-header--refined .nav-book{display:none}
 .site-header--refined .menu-toggle{display:flex;position:relative;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:47px;height:47px;border:1px solid rgba(255,255,255,.24);border-radius:13px;background:rgba(255,255,255,.06);padding:9px;transition:background .2s ease,border-color .2s ease}
 .site-header--refined .menu-toggle:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.45)}
 .site-header--refined .menu-toggle span{width:20px;height:2px;border-radius:3px;background:#fff;display:block;margin:0;transition:transform .22s var(--nav-ease),opacity .15s ease}
 .site-header--refined .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)}
 .site-header--refined .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
 .site-header--refined .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg)}
 .site-header--refined .mobile-header-book{display:inline-flex;align-items:center;justify-content:center;min-height:46px;gap:7px;padding:8px 17px;border-radius:999px;color:#082734;background:#ffbd64;text-decoration:none;font-size:.88rem;font-weight:900;transition:background .2s ease}
 .site-header--refined .mobile-header-book:hover{background:#ffd28b}
 .site-header--refined .mobile-header-book span{font-size:1.05rem}
 .site-header--refined .mobile-nav{display:block;position:absolute;top:100%;left:0;right:0;z-index:91;visibility:hidden;pointer-events:none;opacity:0;transform:translateY(-10px);max-height:0;overflow:hidden;background:#092734;border-top:1px solid rgba(255,255,255,.11);box-shadow:0 22px 35px rgba(2,21,30,.23);transition:opacity .2s ease,transform .2s var(--nav-ease),visibility .2s ease,max-height .25s ease}
 .site-header--refined .mobile-nav.open{display:block;visibility:visible;pointer-events:auto;opacity:1;transform:translateY(0);max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain}
 .site-header--refined .mobile-nav__inner{width:min(560px,calc(100% - 48px));margin:0 auto;padding:26px 0 30px}
 .site-header--refined .mobile-nav__eyebrow{font-size:.65rem;font-weight:900;letter-spacing:.17em;color:#95bfc4;margin:0 0 13px}
 .site-header--refined .mobile-nav__links{display:grid;gap:6px;margin-bottom:21px}
 .site-header--refined .mobile-nav__link{display:flex;align-items:center;justify-content:space-between;min-height:53px;padding:13px 16px;border-radius:10px;text-decoration:none;font-weight:800;font-size:1rem;color:#e6f3f2;background:rgba(255,255,255,.035);border:1px solid transparent;transition:background .16s ease,color .16s ease}
 .site-header--refined .mobile-nav__link:hover{background:rgba(255,255,255,.12)}
 .site-header--refined .mobile-nav__link[aria-current="page"]{background:rgba(255,201,74,.13);border-color:rgba(255,201,74,.28);color:#ffd47a}
 .site-header--refined .mobile-nav__link .nav-link-arrow{height:17px;width:17px;opacity:.68}
 .site-header--refined .mobile-nav__cta{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:76px;padding:14px 18px;background:#ffc16a;border-radius:13px;text-decoration:none;color:#082733}
 .site-header--refined .mobile-nav__cta strong{display:block;font-size:1.03rem;line-height:1.2}
 .site-header--refined .mobile-nav__cta small{display:block;font-size:.73rem;margin-top:6px;font-weight:650}
 .site-header--refined .mobile-nav__cta .nav-link-arrow{height:22px;width:22px;flex:none}
 .site-header--refined .mobile-nav__contact{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:13px;color:#c6dee1;font-size:.83rem;font-weight:700;text-decoration:none}
 .site-header--refined .mobile-nav__contact svg{width:18px;height:18px;stroke:#81e0c1}
 body.navigation-open{overflow:hidden}
}
@media(max-width:700px){
 .site-header--refined{--nav-header-height:70px}
 .nav-utility-inner{min-height:30px}
 .nav-utility-location,.nav-utility-price{font-size:9px;letter-spacing:.075em}
 .nav-utility-desktop,.nav-utility-divider,.nav-utility-contact{display:none}
 .nav-utility-mobile{display:inline}
 .nav-utility-location,.nav-utility-actions{gap:7px}
 .site-header--refined .brand-symbol{width:41px;height:41px;border-radius:11px}
 .site-header--refined .brand-symbol__icon{width:29px;height:29px}
 .site-header--refined .brand{gap:9px}
 .site-header--refined .brand strong{font-size:.95rem}
 .site-header--refined .brand small{font-size:.54rem;letter-spacing:.08em}
 .site-header--refined .navwrap{gap:8px}
 .site-header--refined .nav-actions{gap:8px}
}
@media(max-width:390px){
 .site-header--refined .brand strong{font-size:.835rem;letter-spacing:.04em}
 .site-header--refined .brand small{font-size:.49rem;letter-spacing:.045em}
 .site-header--refined .brand-symbol{width:37px;height:37px}
 .site-header--refined .brand-symbol__icon{width:26px;height:26px}
 .site-header--refined .mobile-header-book{padding:8px 12px;min-height:43px;font-size:.8rem}
 .site-header--refined .menu-toggle{height:43px;width:43px}
}
@media(max-width:345px){
 .site-header--refined .mobile-header-book{display:none}
 .nav-utility-price{letter-spacing:0}
}
@media(prefers-reduced-motion:reduce){
 .site-header--refined *{transition:none!important}
}

/* Small-screen price strip: short text stays on one line at 320–768px. */
@media(max-width:1090px){.site-header--refined .nav-utility-contact{display:none}}
@media(max-width:700px){.site-header--refined .nav-utility-price-label{display:none}.site-header--refined .nav-utility-price strong{margin-left:0}}
@media(max-width:390px){.site-header--refined .nav-utility-mobile{display:none}}

/* --- Horizontal brand logo: balanced centre-aligned navigation --- */
/* Equal side columns keep the logo centred independently of label width.
   The two sets of menu links hug the logo instead of page edges. */
.site-header--refined .navwrap.navwrap--centered{
 display:grid;
 grid-template-columns:minmax(0,1fr) 256px minmax(0,1fr);
 grid-template-areas:"left logo right";
 align-items:center;
 column-gap:18px;
 min-height:101px;
 max-width:1160px;
}
.site-header--refined .navwrap--centered .nav-side{display:flex;align-items:center;min-width:0;gap:14px}
.site-header--refined .navwrap--centered .nav-side--left{grid-area:left;justify-content:flex-end}
.site-header--refined .navwrap--centered .nav-side--right{grid-area:right;justify-content:flex-start}
.site-header--refined .navwrap--centered .desktop-nav{
 display:flex;align-items:center;justify-self:auto;justify-content:inherit;
 gap:7px;padding:0;background:none;border:0;border-radius:0;white-space:nowrap;
}
.site-header--refined .navwrap--centered .desktop-nav a{
 display:inline-flex;position:relative;align-items:center;justify-content:center;
 min-height:48px;padding:11px 13px;border-radius:11px;
 color:#e6efef;font-size:.89rem;font-weight:750;letter-spacing:.005em;
 background:transparent;transition:background .2s ease,color .2s ease;
}
.site-header--refined .navwrap--centered .desktop-nav a:hover{
 color:white;background:rgba(255,255,255,.10);
}
.site-header--refined .navwrap--centered .desktop-nav a[aria-current="page"]{
 color:#ffe19a;background:rgba(255,201,74,.12);box-shadow:none;
}
.site-header--refined .navwrap--centered .desktop-nav a[aria-current="page"]::after{
 content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;
 background:#ffc94a;border-radius:3px;
}
.site-header--refined .navwrap--centered .center-brand{
 grid-area:logo;display:flex;align-items:center;justify-content:center;
 justify-self:center;flex:none;width:256px;height:89px;max-width:none;
 margin:0;padding:3px 0;background:none;border:0;border-radius:0;
 text-decoration:none;transition:transform .2s ease;
}
.site-header--refined .navwrap--centered .center-brand:hover{transform:translateY(-2px)}
.site-header--refined .navwrap--centered .center-brand img{
 display:block;width:100%;height:auto;max-width:100%;max-height:83px;
 object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.24));
}
.site-header--refined .navwrap--centered .nav-book{
 display:inline-flex;align-items:center;gap:10px;flex:none;min-height:50px;
 padding:7px 8px 7px 18px;border-radius:999px;border:1px solid #ffe0a0;
 background:#ffc94a;color:#092734;font-size:.87rem;font-weight:850;
 text-decoration:none;white-space:nowrap;
}
.site-header--refined .navwrap--centered .nav-book:hover{background:#ffda7a}
.site-header--refined .navwrap--centered .mobile-quick-book,
.site-header--refined .navwrap--centered .menu-toggle{display:none}
/* The left-hand nav is itself a grid item; make it hug the logo, not the shell edge. */
.site-header--refined .navwrap--centered .nav-side--left.desktop-nav{
 justify-self:end;justify-content:flex-end;width:max-content;max-width:100%;
}
.site-header--refined .navwrap--centered .nav-side--right{
 justify-self:start;justify-content:flex-start;
}
/* New wide logo in the footer; don't put it into the old square frame. */
.footer-official-logo{
 display:block;width:min(245px,100%);height:auto;aspect-ratio:3 / 1;
 object-fit:contain;margin:0 0 16px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.14));
}
@media (min-width:1091px) and (max-width:1170px){
 .site-header--refined .navwrap.navwrap--centered{grid-template-columns:minmax(0,1fr) 231px minmax(0,1fr);column-gap:14px;min-height:96px}
 .site-header--refined .navwrap--centered .center-brand{width:231px;height:83px}
 .site-header--refined .navwrap--centered .center-brand img{max-height:77px}
 .site-header--refined .navwrap--centered .nav-side{gap:8px}
 .site-header--refined .navwrap--centered .desktop-nav{gap:2px}
 .site-header--refined .navwrap--centered .desktop-nav a{padding:9px 11px;font-size:.84rem}
 .site-header--refined .navwrap--centered .nav-book{font-size:.81rem;padding:7px 7px 7px 13px;gap:7px}
}
/* Mobile uses a deliberately wider mark; the links move into an accessible menu. */
@media (max-width:1090px){
 .site-header--refined .navwrap.navwrap--centered{
  display:grid;grid-template-columns:minmax(0,1fr) 208px minmax(0,1fr);
  grid-template-areas:"left logo right";gap:8px;min-height:91px;
 }
 .site-header--refined .navwrap--centered .nav-side{display:none}
 .site-header--refined .navwrap--centered .center-brand{grid-area:logo;width:208px;height:77px}
 .site-header--refined .navwrap--centered .center-brand img{max-height:70px}
 .site-header--refined .navwrap--centered .mobile-quick-book{
  display:inline-flex;grid-area:left;justify-self:start;align-items:center;justify-content:center;
  min-height:44px;padding:9px 15px;gap:7px;border-radius:999px;
  background:#ffc94a;color:#092734;font-size:.88rem;font-weight:900;text-decoration:none;
 }
 .site-header--refined .navwrap--centered .menu-toggle{
  display:flex;grid-area:right;justify-self:end;
 }
}
@media (max-width:480px){
 .site-header--refined .navwrap.navwrap--centered{
  grid-template-columns:minmax(0,1fr) 166px minmax(0,1fr);min-height:79px;gap:6px;
 }
 .site-header--refined .navwrap--centered .center-brand{width:166px;height:63px}
 .site-header--refined .navwrap--centered .center-brand img{max-height:60px}
 .site-header--refined .navwrap--centered .mobile-quick-book{min-height:42px;padding:7px 11px;font-size:.8rem;gap:4px}
 .site-header--refined .navwrap--centered .menu-toggle{width:44px;height:44px}
}
@media (max-width:375px){
 .site-header--refined .navwrap.navwrap--centered{
  grid-template-columns:minmax(0,1fr) 137px minmax(0,1fr);min-height:73px;gap:5px;
 }
 .site-header--refined .navwrap--centered .center-brand{width:137px;height:55px}
 .site-header--refined .navwrap--centered .center-brand img{max-height:52px}
 .site-header--refined .navwrap--centered .mobile-quick-book{padding:6px 9px;font-size:.78rem;gap:3px}
 .site-header--refined .navwrap--centered .menu-toggle{width:43px;height:43px}
}
@media (prefers-reduced-motion: reduce){
 .site-header--refined .navwrap--centered .center-brand{transition:none}
}


/* 2026/11 — Floating transparent navigation (no upper utility strip).
   The header is an overlay, not a background bar. A separate mobile menu
   remains solid dark for accessible reading when expanded. */
:root{--transparent-nav-height:101px}
.site-header.site-header--refined.site-header--transparent,
.site-header.site-header--refined.site-header--transparent.scrolled{
    position:fixed;
    top:0;left:0;right:0;width:100%;
    z-index:90;
    background:transparent;
    background-color:transparent;
    background-image:none;
    box-shadow:none;
    border:0;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    isolation:auto;
}
.site-header--transparent .navwrap.navwrap--centered{
    background:transparent;
    border:0;
    box-shadow:none;
}
/* No painted desktop navigation rail, active pill or link background. */
.site-header--transparent .navwrap--centered .desktop-nav,
.site-header--transparent .navwrap--centered .desktop-nav a,
.site-header--transparent .navwrap--centered .desktop-nav a:hover,
.site-header--transparent .navwrap--centered .desktop-nav a[aria-current="page"]{
    background:transparent;
    border:0;
    box-shadow:none;
}
.site-header--transparent .navwrap--centered .desktop-nav a{
    color:var(--header-ink,#0b2a38);
    text-shadow:var(--header-text-shadow,0 1px 0 #ffffffa3);
    transition:color .18s ease;
}
.site-header--transparent .navwrap--centered .desktop-nav a:hover,
.site-header--transparent .navwrap--centered .desktop-nav a[aria-current="page"]{
    color:var(--header-accent,#087d79);
}
.site-header--transparent .navwrap--centered .desktop-nav a[aria-current="page"]::after{
    background:var(--header-accent,#087d79);
}
.site-header--transparent.nav-over-dark{
    --header-ink:#fff;
    --header-accent:#ffdd79;
    --header-text-shadow:0 1px 4px #061c2fd1,0 2px 10px #061c2f99;
}
.site-header--transparent.nav-over-light{
    --header-ink:#092734;
    --header-accent:#087b78;
    --header-text-shadow:0 1px 1px #ffffffb0,0 0 7px #ffffff92;
}
.site-header--transparent.nav-over-light .menu-toggle{
    border-color:rgba(11,42,56,.45);
    background:transparent;
}
.site-header--transparent.nav-over-light .menu-toggle span{background:#0b2a38}
.site-header--transparent.nav-over-dark .menu-toggle{
    border-color:rgba(255,255,255,.65);
    background:transparent;
}
.site-header--transparent.nav-over-dark .menu-toggle span{background:#fff}
.site-header--transparent .menu-toggle:hover{background:transparent}
/* Dropdown is deliberately opaque, not part of the transparent toolbar. */
.site-header--transparent .mobile-nav{background:#092734}
/* The fixed overlay is taken out of document flow. Reserve room on inner pages;
   photographic heroes extend behind it so there isn't a blank strip at the top. */
body:not([data-page="index.html"]):not([data-page="gallery.html"]) main{
    padding-top:var(--transparent-nav-height);
}
body:not([data-page="index.html"]):not([data-page="gallery.html"]) .page-intro{
    padding-top:48px;
}
body[data-page="index.html"] .hero{min-height:100svh}
body[data-page="gallery.html"] .premium-gallery-hero__inner{
    padding-top:max(135px,calc(var(--transparent-nav-height) + 28px));
}
html{scroll-padding-top:calc(var(--transparent-nav-height) + 18px)}
@media(max-width:1170px) and (min-width:1091px){:root{--transparent-nav-height:96px}}
@media(max-width:1090px){:root{--transparent-nav-height:91px}}
@media(max-width:480px){:root{--transparent-nav-height:79px}}
@media(max-width:375px){:root{--transparent-nav-height:73px}}