.glass-shell-header {
  position: fixed;
  z-index: 75;
  top: 12px;
  right: var(--edge, max(24px, 4vw));
  left: var(--edge, max(24px, 4vw));
  min-height: 68px;
  padding: 8px 9px 8px 17px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(249, 246, 238, .82), rgba(227, 220, 207, .66));
  box-shadow: 0 18px 55px rgba(23, 35, 29, .13), inset 0 1px rgba(255, 255, 255, .92);
  transform: none;
  backdrop-filter: blur(28px) saturate(1.28);
  -webkit-backdrop-filter: blur(28px) saturate(1.28);
  transition: background 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}

.glass-shell-header.is-scrolled {
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(249, 246, 238, .94), rgba(227, 220, 207, .84));
  box-shadow: 0 22px 64px rgba(23, 35, 29, .17), inset 0 1px rgba(255, 255, 255, .96);
  transform: translateY(2px);
}

.glass-shell-header .brand {
  color: var(--ink, #17231d);
  font: 700 31px/1 var(--serif, Georgia, serif);
  letter-spacing: -.09em;
  text-decoration: none;
}

.glass-shell-header .brand span {
  color: var(--clay, #c66742);
}

.glass-shell-header .site-nav {
  position: relative;
  justify-self: center;
  min-width: 0;
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: rgba(39, 49, 43, .82);
  box-shadow: 0 8px 28px rgba(23, 35, 29, .15), inset 0 1px rgba(255, 255, 255, .13);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

.glass-shell-header .site-nav a {
  position: relative;
  z-index: 2;
  min-height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(244, 240, 231, .78);
  font: 500 8px/1 var(--mono, monospace);
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 220ms ease, background 220ms ease;
}

.glass-shell-header .site-nav a:hover,
.glass-shell-header .site-nav a:focus-visible {
  color: #fff;
}

.glass-shell-header .site-nav a.is-current,
.glass-shell-header .site-nav a[aria-current="page"] {
  background: var(--clay, #c66742);
  color: #fff;
}

.glass-shell-header .joinery-nav-indicator {
  position: absolute;
  z-index: 1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 999px;
  background: var(--clay, #c66742);
  box-shadow: inset 0 1px rgba(255, 255, 255, .16);
  opacity: 0;
  transition: width 360ms cubic-bezier(.22, 1, .36, 1), transform 360ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
  pointer-events: none;
}

.glass-shell-header .joinery-nav-indicator.is-visible {
  opacity: 1;
}

.glass-shell-header .site-nav:has(.joinery-nav-indicator.is-visible) a.is-current {
  background: transparent;
}

.glass-shell-header .contact-button {
  position: relative;
  min-height: 48px;
  padding: 0 7px 0 18px;
  display: inline-flex;
  gap: 17px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35));
  color: var(--ink, #17231d);
  box-shadow: 0 9px 24px rgba(23, 35, 29, .1), inset 0 1px rgba(255, 255, 255, .9);
  font: 500 9px/1 var(--mono, monospace);
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
  transition: color 320ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1), box-shadow 320ms ease;
}

.glass-shell-header .contact-button::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--ink, #17231d);
  transform: translateX(102%);
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
  content: "";
}

.glass-shell-header .contact-button span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--clay, #c66742);
  color: #fff;
  box-shadow: 0 7px 16px rgba(149, 72, 47, .3), inset 0 1px rgba(255, 255, 255, .25);
  font-size: 14px;
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1), background 320ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .glass-shell-header .contact-button:hover {
    color: #fff;
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 16px 34px rgba(23, 35, 29, .2), inset 0 1px rgba(255, 255, 255, .18);
  }

  .glass-shell-header .contact-button:hover::before {
    transform: translateX(0);
  }

  .glass-shell-header .contact-button:hover span {
    background: #df7d56;
    transform: rotate(45deg);
  }
}

.glass-shell-header .contact-button:focus-visible,
.glass-shell-header .site-nav a:focus-visible,
.glass-shell-header .brand:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ink, #17231d);
}

.glass-shell-header .concept-badge,
.glass-shell-header .preview-badge,
.glass-shell-header .menu-toggle {
  display: none;
}

@media (max-width: 900px) {
  .glass-shell-header,
  .glass-shell-header.is-scrolled {
    top: 8px;
    right: 10px;
    left: 10px;
    min-height: 106px;
    padding: 7px;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 45px 38px;
    gap: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 22px;
    transform: none;
  }

  .glass-shell-header .brand {
    margin-left: 9px;
    align-self: center;
  }

  .glass-shell-header .contact-button {
    grid-column: 3;
    min-height: 40px;
    padding: 0 4px 0 12px;
    gap: 9px;
    font-size: 8px;
  }

  .glass-shell-header .contact-button span {
    width: 31px;
    height: 31px;
  }

  .glass-shell-header .site-nav {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
    padding: 3px;
    display: flex;
  }

  .glass-shell-header .site-nav a {
    min-width: 0;
    min-height: 32px;
    padding: 0 7px;
    flex: 1 1 0;
    font-size: 7px;
    letter-spacing: .06em;
  }
}

@media (max-width: 430px) {
  .glass-shell-header .brand {
    font-size: 27px;
  }

  .glass-shell-header .contact-button {
    gap: 7px;
    padding: 0 4px 0 9px;
    font-size: 7px;
  }

  .glass-shell-header .site-nav a {
    padding-inline: 4px;
    font-size: 6.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-shell-header,
  .glass-shell-header *,
  .glass-shell-header *::before,
  .glass-shell-header *::after {
    transition: none !important;
  }
}
.glass-shell-header .header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; grid-column:3; grid-row:1; }
.glass-shell-header .instagram-button { padding:0 16px; cursor:default; opacity:.8; }
@media(max-width:760px) {
 .glass-shell-header .header-actions { gap:6px; }
 .glass-shell-header .header-actions .contact-button { min-height:44px; font-size:11px; letter-spacing:0; padding-left:12px; }
 .glass-shell-header .header-actions .instagram-button { padding:0 12px; }
}
/* Refined, consistently sized navigation across both main pages. */
body.seamless-home .glass-shell-header .site-nav { gap:6px; padding:0; }
body.seamless-home .glass-shell-header .site-nav a {
  min-width:0; min-height:44px; padding:0 14px;
  font:400 14px/1.25 var(--sans); letter-spacing:0;
  border:1px solid #f4f0e74d; border-radius:14px;
  background:linear-gradient(180deg,#f4f1e9f5,#e5e4dcf0);
  box-shadow:0 2px 6px #07150f12; text-shadow:none;
}
body.seamless-home .glass-shell-header .site-nav a.is-current,
body.seamless-home .glass-shell-header .site-nav a[aria-current] {
  background:#243b30; border-color:#eee8db70; color:#fff;
  box-shadow:none; text-shadow:none;
}
body.seamless-home .glass-shell-header .header-actions .contact-button,
body.ribbon-projects .glass-shell-header .header-actions .contact-button {
  min-height:44px; padding:0 15px; gap:9px; border-radius:14px;
  font:500 14px/1.25 var(--sans); letter-spacing:0; text-transform:none;
  background:#243b30; color:#f8f5ed; border:1px solid #8f9e91;
  box-shadow:0 2px 6px #07150f12;
}
body .glass-shell-header .header-actions .contact-button::before { display:none; }
body .glass-shell-header .header-actions .contact-button span {
  width:auto; height:auto; background:none; border:0; box-shadow:none; font-size:16px;
}
body.seamless-home .glass-shell-header .header-actions .instagram-button,
body.ribbon-projects .glass-shell-header .header-actions .instagram-button {
  background:#f0eee6; color:#3e4a42; border-color:#bec5bc; font-weight:400; opacity:1;
}
body.ribbon-projects .projects-home-button {
  min-height:44px; padding:0 15px; border-radius:14px; font-size:14px;
}
@media(max-width:1050px) and (min-width:901px) {
 body.seamless-home .glass-shell-header { gap:10px; left:3vw; right:3vw; }
 body.seamless-home .glass-shell-header .site-nav a { padding-inline:10px; }
}
@media(max-width:900px) {
 body.seamless-home .glass-shell-header { grid-template-rows:44px auto; gap:12px; }
 body.seamless-home .glass-shell-header .site-nav { gap:5px; }
 body.seamless-home .glass-shell-header .site-nav a { padding:0 7px; font-size:13px; }
 body.seamless-home .glass-shell-header .header-actions .contact-button,
 body.ribbon-projects .glass-shell-header .header-actions .contact-button { padding:0 11px; font-size:13px; }
}
@media(max-width:430px) {
 body.ribbon-projects .glass-shell-header { flex-wrap:wrap; gap:8px; left:16px; right:16px; }
 body.ribbon-projects .glass-shell-header .header-actions { flex-basis:100%; }
}
/* Mobile uses explicit rows rather than inherited desktop grid/flex placement. */
@media(max-width:900px) {
 body.seamless-home .glass-shell-header,
 body.seamless-home .glass-shell-header.is-scrolled,
 body.ribbon-projects .glass-shell-header,
 body.ribbon-projects .glass-shell-header.is-scrolled {
   display:grid; grid-template-columns:44px minmax(0,1fr);
   grid-template-rows:auto auto; align-items:center; gap:12px 8px;
   top:16px; left:16px; right:16px; min-height:0; padding:0;
 }
 body.seamless-home .glass-shell-header .brand,
 body.ribbon-projects .glass-shell-header .brand {
   grid-column:1; grid-row:1; margin:0; font-size:30px; line-height:44px;
 }
 body.seamless-home .glass-shell-header .header-actions,
 body.ribbon-projects .glass-shell-header .header-actions {
   grid-column:2; grid-row:1; display:flex; gap:6px; min-width:0; width:100%;
   justify-content:flex-end; flex-wrap:nowrap;
 }
 body.seamless-home .glass-shell-header .header-actions .contact-button,
 body.ribbon-projects .glass-shell-header .header-actions .contact-button {
   box-sizing:border-box; min-height:44px; padding:0 10px;
   font-size:13px; gap:5px; border-radius:12px; flex-shrink:0;
 }
 body.seamless-home .glass-shell-header .site-nav {
   grid-column:1 / -1; grid-row:2; display:grid;
   grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px;
   width:100%; margin:0; padding:0; min-width:0; overflow:visible;
 }
 body.seamless-home .glass-shell-header .site-nav a,
 body.seamless-home .glass-shell-header .site-nav a[href="#reviews"] {
   display:flex; align-items:center; justify-content:center;
   box-sizing:border-box; min-width:0; width:100%; min-height:48px; height:auto;
   margin:0; padding:6px 4px; font:400 13px/1.2 var(--sans);
   letter-spacing:0; white-space:normal; text-align:center; border-radius:10px;
 }
 body.ribbon-projects .projects-home-button {
   grid-column:1 / -1; grid-row:2; margin:0; min-height:44px;
   width:100%; box-sizing:border-box; border-radius:10px;
 }
 body.seamless-home .hero { padding-top:190px; }
 body.ribbon-projects .project-ribbon { top:138px; }
}
.mobile-menu-trigger { display:none; }
.mobile-menu-panel { box-sizing:border-box; inset:0 0 0 auto; margin:0; width:min(360px,calc(100vw - 24px)); height:100dvh; max-height:100dvh; max-width:none; padding:24px; border:1px solid #fff8; border-radius:24px 0 0 24px; background:#edf0e9eb; color:#172b23; backdrop-filter:blur(28px) saturate(1.2); -webkit-backdrop-filter:blur(28px) saturate(1.2); box-shadow:-20px 0 70px #07150f30; overflow-y:auto; }
.mobile-menu-panel::backdrop { background:#08180f70; backdrop-filter:blur(4px); }
.mobile-menu-panel[open] { animation:mobile-drawer-enter .28s cubic-bezier(.2,.8,.2,1); }
.mobile-menu-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:28px; }
.mobile-menu-heading h2 { margin:0; font:500 20px/1.3 var(--sans); }
.mobile-menu-close { min-height:44px; padding:0 14px; border:1px solid #172b2330; border-radius:12px; background:#fff7; color:inherit; font:400 14px var(--sans); cursor:pointer; }
.mobile-menu-panel nav { display:grid; gap:8px; }
.mobile-menu-panel nav a { display:flex; justify-content:space-between; align-items:center; min-height:60px; padding:0 16px; border:1px solid #ffffffb0; border-radius:14px; background:#fff6; color:#172b23; text-decoration:none; font:400 18px/1.3 var(--sans); }
.mobile-menu-panel nav a:hover { background:#fff; }
.mobile-menu-panel nav a span { font-size:16px; color:#66776b; }
.mobile-instagram { margin-top:28px; width:100%; padding:16px; display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid #172b2325; border-radius:14px; background:transparent; color:#4c5d50; font:400 14px var(--sans); opacity:1; }
.mobile-instagram small { font-size:12px; }
.mobile-menu-panel a:focus-visible,.mobile-menu-panel button:focus-visible,.mobile-menu-trigger:focus-visible { outline:3px solid #aa603e; outline-offset:3px; }
@keyframes mobile-drawer-enter { from { transform:translateX(100%); } to { transform:translateX(0); } }
@media(max-width:900px) {
 body.seamless-home .glass-shell-header,
 body.seamless-home .glass-shell-header.is-scrolled,
 body.ribbon-projects .glass-shell-header,
 body.ribbon-projects .glass-shell-header.is-scrolled {
   grid-template-columns:44px minmax(0,1fr) auto; grid-template-rows:auto; gap:8px;
 }
 body.seamless-home .glass-shell-header .site-nav,
 body.ribbon-projects .glass-shell-header .projects-home-button,
 body .glass-shell-header .header-actions .instagram-button { display:none; }
 body .glass-shell-header .mobile-menu-trigger { grid-column:3; grid-row:1; display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:0 12px; border:1px solid #ffffff85; border-radius:12px; background:#eceee6e8; color:#20372b; font:500 14px var(--sans); cursor:pointer; }
 body.ribbon-projects .glass-shell-header .mobile-menu-trigger { border-color:#20372b40; }
 body.seamless-home .hero { padding-top:130px; }
 body.ribbon-projects .project-ribbon { top:90px; }
}
@media(prefers-reduced-motion:reduce) { .mobile-menu-panel[open] { animation:none; } }
/* Compact floating glass treatment, adapted from the Linden Tree navigation. */
.mobile-menu-panel {
  inset:74px 16px auto auto; width:min(272px,calc(100vw - 32px));
  height:auto; max-height:calc(100dvh - 94px); padding:12px;
  border-radius:20px; background:linear-gradient(145deg,#fffdf7f5,#e8ebe2ed);
  box-shadow:inset 0 1px 0 #fff,0 20px 48px #17231d30;
}
.mobile-menu-heading { gap:12px; padding:0 4px 10px; border-bottom:1px solid #17231d1a; margin-bottom:6px; }
.mobile-menu-heading h2 { font-size:14px; font-weight:400; }
.mobile-menu-close { min-height:44px; border:0; background:transparent; padding:0 8px; font-size:13px; }
.mobile-menu-panel nav { gap:2px; }
.mobile-menu-panel nav a { min-height:44px; padding:0 12px; background:transparent; border:0; border-radius:12px; font-size:15px; }
.mobile-menu-panel nav a span { font-size:13px; }
.mobile-instagram { margin-top:10px; padding:12px; border-radius:12px; }
.mobile-menu-panel[open] { animation:compact-menu-enter .24s ease-out; }
@keyframes compact-menu-enter { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:none; } }
body.seamless-home .glass-shell-header .header-actions a.contact-button,
body.ribbon-projects .glass-shell-header .header-actions a.contact-button {
  min-height:44px; padding:0 17px; border-radius:999px;
  background:linear-gradient(145deg,#fffdf7f2,#e8ebe2eb);
  color:#263c2f; border:1px solid #ffffffc7;
  box-shadow:inset 0 1px 0 #fff,0 4px 12px #17231d18;
  font:500 14px/1.25 var(--sans); letter-spacing:0;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
body.ribbon-projects .glass-shell-header .header-actions a.contact-button { border-color:#263c2f30; }
body .glass-shell-header .header-actions a.contact-button:hover { background:#fffdf7; transform:translateY(-1px); }
@media(max-width:900px) {
 body .glass-shell-header .mobile-menu-trigger {
   min-width:44px; width:44px; height:44px; padding:0; border-radius:50%;
   font-size:0; gap:0; background:#fffdf7e8;
   box-shadow:inset 0 1px 0 #fff,0 4px 12px #17231d18;
 }
 body .glass-shell-header .mobile-menu-trigger span { font-size:18px; line-height:1; }
 body.seamless-home .glass-shell-header .header-actions a.contact-button,
 body.ribbon-projects .glass-shell-header .header-actions a.contact-button { font-size:13px; padding:0 15px; }
}
@media(prefers-reduced-motion:reduce) { .mobile-menu-panel[open] { animation:none; } }
.mobile-contact-pill { display:none; }
@media(max-width:900px) {
 body.seamless-home .glass-shell-header .header-actions,
 body.ribbon-projects .glass-shell-header .header-actions { display:none; }
 .mobile-contact-pill {
   position:fixed; z-index:70; right:max(18px,env(safe-area-inset-right));
   bottom:calc(20px + env(safe-area-inset-bottom)); display:inline-flex;
   align-items:center; justify-content:center; gap:12px;
   box-sizing:border-box; min-height:52px; padding:0 22px;
   border:1px solid #e9ddc7; border-radius:999px;
   background:linear-gradient(180deg,#395b48,#294434);
   color:#faf6ec; text-decoration:none; white-space:nowrap;
   font:500 14px/1.25 var(--sans,Arial,sans-serif); letter-spacing:0;
   box-shadow:inset 0 1px 0 #ffffff40,0 4px 0 #192e22,0 8px 20px #11231b35;
   transition:transform .18s ease,box-shadow .18s ease;
 }
 .mobile-contact-pill span { color:#dac5a3; font-size:17px; }
 .mobile-contact-pill:active { transform:translateY(2px); box-shadow:inset 0 1px 0 #ffffff40,0 2px 0 #192e22,0 4px 12px #11231b25; }
 .mobile-contact-pill:focus-visible { outline:3px solid #d4ad7d; outline-offset:5px; }
 body.seamless-home,body.ribbon-projects { padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
 body:has(#contact input:focus) .mobile-contact-pill,
 body:has(#contact textarea:focus) .mobile-contact-pill,
 body:has(#contact select:focus) .mobile-contact-pill { visibility:hidden; }
}
@media(prefers-reduced-motion:reduce) { .mobile-contact-pill { transition:none; } }
/* Linden Tree's compact glass menu, with Joinery Business's forest colours. */
.mobile-menu-panel {
  inset:76px 16px auto auto; width:min(248px,calc(100vw - 32px));
  padding:10px; border-radius:20px; overflow:visible;
  background:linear-gradient(145deg,rgba(255,253,247,.96),rgba(232,235,226,.91));
  border:1px solid rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 #fff,0 26px 64px rgba(23,35,29,.3);
  backdrop-filter:blur(28px) saturate(130%);
  -webkit-backdrop-filter:blur(28px) saturate(130%);
  transform-origin:top right;
}
.mobile-menu-panel::backdrop { background:rgba(23,35,29,.38); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.mobile-menu-panel[open] { animation:compact-menu-enter .4s cubic-bezier(.2,.82,.2,1) both; }
.mobile-menu-heading { padding:8px 10px 11px; margin-bottom:6px; }
.mobile-menu-heading h2 { color:#637062; font:500 12px/1.4 var(--mono,monospace); text-transform:uppercase; letter-spacing:.06em; }
.mobile-menu-close { position:absolute; right:-1px; top:-61px; width:46px; height:46px; padding:0; display:grid; place-items:center; border:1px solid #fff9; border-radius:50%; background:#f8f5ec; color:#28382d; font:400 29px/1 Arial,sans-serif; box-shadow:inset 0 1px 0 #fff,0 10px 26px #17231d26; }
.mobile-menu-panel nav { gap:3px; max-height:calc(100dvh - 255px); overflow-y:auto; }
.mobile-menu-panel nav a { min-height:44px; padding:0 11px; font:500 14px/1.35 var(--sans); border-radius:999px; transition:background .25s ease,color .25s ease; }
.mobile-menu-panel nav a[aria-current="page"],
.mobile-menu-panel nav a:focus-visible,
.mobile-menu-panel nav a:hover { background:rgba(255,255,255,.75); color:#466044; }
.mobile-instagram { justify-content:flex-start; flex-wrap:wrap; gap:4px 10px; margin-top:7px; padding:10px 11px 4px; border:0; border-radius:0; color:#667164; font-size:12px; }
.mobile-instagram small { font-size:12px; }
@media all {
 body .glass-shell-header .mobile-menu-trigger {
   display:flex; align-items:center; justify-content:center; font-size:0; cursor:pointer;
   position:relative; box-sizing:border-box; min-width:46px; width:46px; height:46px;
   padding:0; border:1px solid rgba(255,255,255,.5); border-radius:50%;
   background:rgba(23,35,29,.25); color:#fffdf7;
   box-shadow:inset 0 1px 0 #ffffff42,0 10px 26px #14231a33;
   backdrop-filter:blur(16px) saturate(135%); -webkit-backdrop-filter:blur(16px) saturate(135%);
   transition:background .3s ease,transform .3s ease;
 }
 body .glass-shell-header .mobile-menu-trigger span { display:none; }
 body .glass-shell-header .mobile-menu-trigger::before,
 body .glass-shell-header .mobile-menu-trigger::after {
   content:''; position:absolute; left:14px; width:17px; height:2px;
   background:currentColor; border-radius:2px;
 }
 body .glass-shell-header .mobile-menu-trigger::before { top:18px; }
 body .glass-shell-header .mobile-menu-trigger::after { top:26px; }
 body.ribbon-projects .glass-shell-header .mobile-menu-trigger,
 body .glass-shell-header.is-scrolled .mobile-menu-trigger {
   color:#28382d; background:rgba(255,253,247,.88); border-color:#ffffffb8;
 }
 body .glass-shell-header .mobile-menu-trigger:hover { transform:scale(.96); }
 body .glass-shell-header .mobile-menu-trigger[aria-expanded="true"] { visibility:hidden; }
}
@media(prefers-reduced-motion:reduce) {
 .mobile-menu-panel[open] { animation:none; }
 .mobile-menu-panel nav a,body .glass-shell-header .mobile-menu-trigger { transition:none; }
}
body .glass-shell-header .header-actions a.contact-button span { display:none; }
@media(max-height:450px) { .mobile-menu-panel nav { max-height:calc(100dvh - 230px); } }
.mobile-menu-enquire { display:flex; align-items:center; justify-content:center; min-height:46px; margin-top:12px; border:1px solid #3c574633; border-radius:999px; background:#dce5d7; color:#263c2f; font:500 15px/1.3 var(--sans); text-decoration:none; }
.mobile-menu-enquire:hover { background:#cfddc9; }
.mobile-menu-enquire:focus-visible { outline:3px solid #aa603e; outline-offset:3px; }
/* Reference: one translucent desktop capsule, not separate raised buttons. */
@media(max-width:900px) {
 body.ribbon-projects .glass-shell-header .site-nav { display:none; }
}
@media(min-width:901px) {
 body.seamless-home .glass-shell-header,
 body.seamless-home .glass-shell-header.is-scrolled,
 body.ribbon-projects .glass-shell-header,
 body.ribbon-projects .glass-shell-header.is-scrolled {
   display:grid; grid-template-columns:auto auto 1fr; grid-template-rows:auto;
   align-items:center; gap:24px; top:24px; left:32px; right:32px;
   padding:0; min-height:38px;
 }
 body.seamless-home .glass-shell-header .site-nav,
 body.ribbon-projects .glass-shell-header .site-nav {
   grid-column:2; grid-row:1; display:flex; align-items:center; gap:2px;
   width:auto; margin:0; padding:2px; overflow:visible;
   border:1px solid #fff7; border-radius:999px;
   background:rgba(50,58,48,.32); color:#fffdf7;
   box-shadow:inset 0 1px 0 #ffffff26; backdrop-filter:blur(16px);
   -webkit-backdrop-filter:blur(16px);
 }
 body.seamless-home .glass-shell-header .site-nav a,
 body.ribbon-projects .glass-shell-header .site-nav a {
   display:flex; align-items:center; justify-content:center; gap:10px;
   box-sizing:border-box; min-width:0; min-height:32px; padding:0 11px; margin:0;
   border:1px solid transparent; border-radius:999px; background:transparent;
   color:inherit; box-shadow:none; text-shadow:none; text-decoration:none;
   font:600 12px/1.3 var(--sans); letter-spacing:0; text-transform:none;
   white-space:nowrap; transform:none;
   transition:background .18s ease,border-color .18s ease;
 }
 body.seamless-home .glass-shell-header .site-nav a.is-current,
 body.seamless-home .glass-shell-header .site-nav a[aria-current],
 body.ribbon-projects .glass-shell-header .site-nav a[aria-current] {
   background:#ffffff14; border-color:#ffffff6b; color:inherit;
   box-shadow:inset 0 1px 0 #ffffff26; text-shadow:none;
 }
 body .glass-shell-header .site-nav a[aria-current]::after {
   content:''; width:5px; height:5px; flex:0 0 5px; border-radius:50%; background:#dbe5d4;
 }
 body.seamless-home .glass-shell-header .site-nav a:hover,
 body.ribbon-projects .glass-shell-header .site-nav a:hover { background:#ffffff1f; color:inherit; transform:none; }
 body .glass-shell-header .site-nav a:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
 body.ribbon-projects .glass-shell-header .site-nav {
   background:#e8ece399; color:#263c2f; border-color:#263c2f40;
 }
 body.ribbon-projects .glass-shell-header .site-nav a[aria-current] {
   border-color:#263c2f40; background:#ffffff80;
 }
 body.ribbon-projects .glass-shell-header .site-nav a[aria-current]::after { background:#466044; }
 body .glass-shell-header .brand { grid-column:1; grid-row:1; justify-self:start; margin:0; }
 body .glass-shell-header .header-actions {
   grid-column:3; grid-row:1; display:flex; width:auto; margin:0; justify-self:end;
 }
 body .glass-shell-header .mobile-menu-trigger { display:none; }
 body.seamless-home .glass-shell-header .header-actions a.contact-button,
 body.ribbon-projects .glass-shell-header .header-actions a.contact-button {
   box-sizing:border-box; min-height:38px; height:38px; padding:0 16px;
   background:#b5e696; color:#263e29; font-size:12px; gap:5px;
   border:1px solid #ffffff8a; box-shadow:inset 0 1px 0 #ffffff52,0 10px 30px #17100c33;
 }
 body .glass-shell-header .header-actions { gap:10px; }
 body .glass-shell-header .header-actions .header-social {
   box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
   flex:0 0 34px; width:34px; height:34px; padding:7px; opacity:1;
   border:1px solid #ffffff7a; border-radius:50%; background:#ffffff1f;
   color:#fff7e8; box-shadow:none; backdrop-filter:blur(14px);
   -webkit-backdrop-filter:blur(14px); cursor:default;
 }
 .header-social svg { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
 .header-social .social-fill { fill:currentColor; stroke:none; }
 body.ribbon-projects .glass-shell-header .header-actions .header-social { color:#263c2f; border-color:#263c2f55; background:#ffffff55; }
 body .glass-shell-header .header-actions a.contact-button span { display:inline; font:400 15px/1 var(--sans); color:inherit; }
 body .glass-shell-header .header-actions a.contact-button:hover { background:#d7efc5; color:#263e29; }
 .mobile-menu-panel { top:84px; right:32px; }
}
@media(min-width:901px) and (max-width:1100px) {
 body.seamless-home .glass-shell-header,body.ribbon-projects .glass-shell-header { gap:12px; left:24px; right:24px; }
 body.seamless-home .glass-shell-header .site-nav a,body.ribbon-projects .glass-shell-header .site-nav a { padding-inline:10px; }
 body .glass-shell-header .header-actions .instagram-button { display:none; }
}
/* Projects keeps a single, quiet route home on every screen. */
body.ribbon-projects .glass-shell-header,
body.ribbon-projects .glass-shell-header.is-scrolled {
  display:flex; align-items:center; justify-content:space-between;
}
body.ribbon-projects .glass-shell-header .header-actions,
body.ribbon-projects .glass-shell-header .mobile-menu-trigger { display:none; }
body.ribbon-projects .glass-shell-header .site-nav {
  display:flex; width:auto; margin:0; padding:2px;
  border:1px solid #263c2f40; border-radius:999px; background:#e8ece399;
  box-shadow:inset 0 1px 0 #ffffff50; backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
body.ribbon-projects .glass-shell-header .site-nav a {
  display:flex; align-items:center; justify-content:center;
  min-width:0; min-height:38px; padding:0 18px; border:0;
  border-radius:999px; background:transparent; color:#263c2f;
  font:600 14px/1.3 var(--sans); text-decoration:none; box-shadow:none;
}
body.ribbon-projects .glass-shell-header .site-nav a:hover { background:#ffffff80; }

/* Scroll choreography: a photographic line becomes a rotating ring. */
body.ribbon-projects { background:#fafaf8; }
.orbit-journey { height:620svh; position:relative; }
.orbit-stage { position:sticky; top:0; height:100svh; min-height:480px; overflow:hidden; background:#fafaf8; perspective:1200px; }
.orbit-heading { position:absolute; top:17%; left:0; width:100%; text-align:center; color:#28382d; pointer-events:none; }
.orbit-heading p { font:400 11px/1.5 var(--mono,monospace); letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px; }
.orbit-heading h1 { font:400 clamp(26px,3vw,44px)/1.15 var(--serif,Georgia,serif); letter-spacing:-.025em; margin:0; }
.orbit-cards { position:absolute; inset:0; perspective:1200px; transform-style:preserve-3d; }
.orbit-card { position:absolute; left:50%; top:50%; display:block; width:110px; height:146px; margin:-73px 0 0 -55px; padding:0; border:0; border-radius:5px; background:#ddd; transform-origin:center; will-change:transform; text-decoration:none; }
.orbit-card img {
  display:block; width:100%; height:100%; object-fit:cover; border-radius:5px;
  box-shadow:0 var(--orbit-shadow-y,6px) var(--orbit-shadow-blur,15px) #14231a2b;
  transition:box-shadow .2s,filter .2s;
}
.orbit-card:hover img,.orbit-card:focus-visible img { box-shadow:0 12px 28px #14231a40; filter:brightness(1.06); }
.orbit-card:focus-visible { outline:3px solid #8f563b; outline-offset:5px; z-index:100!important; }
.orbit-caption { position:absolute; top:83%; width:100%; text-align:center; color:#35443b; pointer-events:none; }
.orbit-caption span { display:block; font:400 15px/1.4 var(--sans); }
.orbit-caption small { display:block; margin-top:8px; font:400 11px/1.5 var(--sans); color:#757c76; }
.orbit-skip,.orbit-scroll { position:absolute; bottom:32px; font:400 12px/1.4 var(--sans); color:#536055; }
.orbit-skip { left:32px; padding:10px 0; text-underline-offset:5px; z-index:3; }
.orbit-scroll { right:32px; }
.orbit-scroll span { margin-left:12px; }
@media(max-width:700px) {
 .orbit-journey { height:500svh; }
 .orbit-heading { top:20%; }
 .orbit-heading p { font-size:10px; }
 .orbit-caption { top:81%; }
 .orbit-skip,.orbit-scroll { bottom:100px; }
 .orbit-skip { left:20px; }
 .orbit-scroll { right:20px; }
}
@media(prefers-reduced-motion:reduce) {
 .orbit-journey { height:100svh; }
 .orbit-card { will-change:auto; }
 .orbit-card img { transition:none; }
 .orbit-scroll { display:none; }
}