/* ==========================================================================
   Header / nav chrome - dark, editorial, transparent-over-hero on home
   ========================================================================== */
.cfg-header { position: sticky; top: 0; z-index: 100; background: rgba(30,37,44,.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--cfg-line); transition: transform .35s var(--cfg-ease), background .35s var(--cfg-ease), border-color .35s; }
.cfg-header.is-hidden { transform: translateY(-100%); }

/* Front page: float transparently over the immersive hero, solidify on scroll. */
.home .cfg-header { position: absolute; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
/* Contrast guard for the transparent home header. The hero scrim was lightened
   so the photography reads properly, which left white nav text sitting on
   whatever the top of the image happens to be — pale render, bright sky. This
   gradient anchors the nav strip only, and fades out well before the headline,
   so the picture stays bright. Not applied once .is-stuck paints a solid bar. */
.home .cfg-header:not(.is-stuck)::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 190%;
  background: linear-gradient(180deg, rgba(10,16,20,.62) 0%, rgba(10,16,20,.34) 45%, transparent 100%);
  pointer-events: none; z-index: -1;
}
.home .cfg-header.is-stuck { position: fixed; background: rgba(30,37,44,.94); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom-color: var(--cfg-line); }

/* Top bar */
.cfg-topbar { border-bottom: 1px solid rgba(255,255,255,.08); color: var(--cfg-ink-soft); font-size: .76rem; letter-spacing: .04em; }
.cfg-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.cfg-topbar__msg { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; }
.cfg-topbar__phone { display: inline-flex; align-items: center; gap: .45em; color: #fff; font-weight: 600; text-decoration: none; }
.cfg-topbar__phone:hover { color: var(--cfg-accent-dk); }

/* Utility (secondary) nav in the top bar */
.cfg-utility__list { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.cfg-utility__list a { color: var(--cfg-ink-soft); text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 600; transition: color .2s; }
.cfg-utility__list a:hover, .cfg-utility__list .current-menu-item > a { color: #fff; }
@media (max-width: 1040px) { .cfg-utility { display: none; } .cfg-topbar__phone { margin-left: auto; } }

/* Main bar */
.cfg-bar__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--cfg-header-h); }
.cfg-logo { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
/* The brand mark is a wide lockup (~2.6:1) with a small "FRAME AND GLASS"
   strapline, so it needs more height than a square logo would to stay legible —
   50px rendered the strapline unreadable. */
.cfg-logo img { max-height: 64px; width: auto; }
@media (max-width: 640px) { .cfg-logo img { max-height: 48px; } }
.cfg-logo__text { font-family: var(--cfg-font-head); font-size: 1.18rem; color: #fff; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; line-height: 1; }
.cfg-logo__text strong { color: var(--cfg-accent-dk); font-weight: 600; display: block; font-size: .62em; letter-spacing: .24em; margin-top: .25em; }

/* Desktop nav */
.cfg-nav { margin-left: auto; }
.cfg-nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.cfg-nav__item { position: relative; }
.cfg-nav__link { display: inline-flex; align-items: center; gap: .35em; padding: .7em .85em; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.82); text-decoration: none; transition: color .2s; }
.cfg-nav__link:hover { color: #fff; }
.cfg-nav__item:hover > .cfg-nav__link, .cfg-nav__item.is-current > .cfg-nav__link { color: #fff; }
.cfg-nav__item.is-current > .cfg-nav__link { box-shadow: inset 0 -2px 0 var(--cfg-accent-dk); }
.cfg-nav__toggle { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: .2em; }
/* Desktop dropdown chevron: a 6x6 box with two borders, rotated 45 degrees.
   display:inline-block is load-bearing -- width and height do not apply to a
   non-replaced INLINE box, so without it the square collapses to nothing and
   only the border edge paints, which renders as a stray vertical line beside
   the label. It happened to look right on desktop only because the parent
   .cfg-nav__link is inline-flex there, which makes this a flex item. */
.cfg-nav__item.has-children > .cfg-nav__link::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; margin-left: .15em; }

/* Desktop dropdown */
.cfg-subnav { position: absolute; top: calc(100% + 4px); left: 0; min-width: 252px; background: #232b33; border: 1px solid var(--cfg-line); border-radius: var(--cfg-radius-sm); box-shadow: var(--cfg-shadow); padding: .5rem; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s var(--cfg-ease), transform .2s var(--cfg-ease), visibility .2s; }
.cfg-nav__item.has-children:hover > .cfg-subnav,
.cfg-nav__item.has-children:focus-within > .cfg-subnav { opacity: 1; visibility: visible; transform: none; }
.cfg-subnav .cfg-nav__link { display: block; padding: .6em .8em; border-radius: var(--cfg-radius-sm); font-weight: 500; letter-spacing: .08em; color: rgba(255,255,255,.78); }
.cfg-subnav .cfg-nav__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.cfg-subnav .cfg-nav__toggle { display: none; }

/* Actions */
.cfg-bar__actions { display: flex; align-items: center; gap: .9rem; }
.cfg-bar__cta { white-space: nowrap; padding: .9em 1.5em; }

/* Burger */
.cfg-burger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 1px solid rgba(255,255,255,.3); border-radius: var(--cfg-radius-sm); cursor: pointer; }
.cfg-burger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }

/* Mobile drawer */
.cfg-drawer { position: fixed; inset: 0; z-index: 200; display: none; }
.cfg-drawer.is-open { display: block; }
.cfg-drawer__scrim { position: absolute; inset: 0; background: rgba(10,14,18,.6); opacity: 0; transition: opacity .3s; }
.cfg-drawer.is-open .cfg-drawer__scrim { opacity: 1; }
.cfg-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(380px, 86vw); background: #232b33; box-shadow: var(--cfg-shadow); padding: 1.4rem 1.3rem 2rem; overflow-y: auto; transform: translateX(100%); transition: transform .35s var(--cfg-ease); display: flex; flex-direction: column; }
.cfg-drawer.is-open .cfg-drawer__panel { transform: none; }
.cfg-drawer__close { align-self: flex-end; background: none; border: 0; font-size: 2rem; line-height: 1; color: #fff; cursor: pointer; }
.cfg-drawer__list { list-style: none; margin: .5rem 0 1rem; padding: 0; }
.cfg-drawer__list .cfg-nav__item { border-bottom: 1px solid var(--cfg-line); }
.cfg-drawer__list .cfg-nav__link { display: block; padding: .9em .2em; font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.85); text-decoration: none; }
.cfg-drawer__list .has-children { display: grid; grid-template-columns: 1fr auto; align-items: center; }
/* The drawer has a real SVG chevron in .cfg-nav__toggle on the right, so the
   desktop pseudo-element chevron is redundant here as well as broken. */
.cfg-drawer__list .cfg-nav__item.has-children > .cfg-nav__link::after { content: none; }
.cfg-drawer__list .cfg-nav__toggle { display: inline-flex; padding: .6em; color: #fff; transition: transform .25s; }
.cfg-drawer__list .cfg-nav__item.is-expanded > .cfg-nav__toggle { transform: rotate(180deg); }
.cfg-drawer__list .cfg-subnav { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 .6em .6em; grid-column: 1 / -1; display: none; background: transparent; }
.cfg-drawer__list .cfg-nav__item.is-expanded > .cfg-subnav { display: block; }
.cfg-drawer__list .cfg-subnav .cfg-nav__link { text-transform: none; letter-spacing: .02em; font-weight: 500; opacity: .85; }
.cfg-drawer__list--utility { margin-top: .25rem; border-top: 1px solid var(--cfg-line); padding-top: .5rem; }
.cfg-drawer__list--utility li { border-bottom: 1px solid var(--cfg-line); }
.cfg-drawer__list--utility a { display: block; padding: .8em .2em; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--cfg-ink-soft); text-decoration: none; }
.cfg-drawer__list--utility a:hover { color: #fff; }
.cfg-drawer__cta { margin-top: auto; text-align: center; justify-content: center; }
.cfg-drawer__phone { display: block; text-align: center; margin-top: .9rem; font-weight: 600; color: #fff; text-decoration: none; }

/* Breakpoint */
@media (max-width: 1040px) {
  .cfg-nav, .cfg-bar__cta { display: none; }
  .cfg-burger { display: flex; }
  .cfg-bar__actions { margin-left: auto; }
}
@media (min-width: 1041px) {
  .cfg-drawer { display: none !important; }
}