/* =========================================================
   Stowe Holdings: shared site navigation (all pages)
   Dark announcement bar + frosted white glass header with a large logo,
   and full-width white glass mega menus.
   Load AFTER the page's own stylesheet.
   ========================================================= */
:root {
  --sn-navy: #102936;
  --sn-navy-950: #0a1d26;
  --sn-gold: #d8b979;
  --sn-gold-deep: #8a6d2f;
  --sn-teal: #75b9b0;
  --sn-teal-deep: #2f6d63;
  --sn-ink: #102936;
  --sn-ink-soft: #54617a;
  --sn-height: 70px;

  /* Site-wide content width. Every section's inner container uses this.
     It is fluid: the content always spans the screen, leaving the same proportional
     margin (--edge) on the left and right, so nothing sits as a narrow column with
     empty space either side. --edge is the visible gap from the screen edge to the
     content; the 64px added back is the 32px padding each container already has. */
  --edge: clamp(32px, calc(4 * var(--vw)), 120px);
  --wrap: min(calc(100 * var(--vw) - 2 * var(--edge) + 64px), 3000px);

  /* ---- Big-screen scaling ----
     The site is designed around a ~1440px laptop. On bigger monitors we don't want a
     1440px strip floating in the middle with acres of empty background either side, so
     we zoom the whole page up (see the html rule below). Think of it as "the browser
     zoom the visitor would have set themselves", done for them.

     Catch: zoom also inflates vw/vh units, so a 100vh landing screen would end up taller
     than the screen. That's what --vw / --vh are for: they're 1vw / 1vh divided back down
     by the zoom. Use calc(N * var(--vh)) instead of Nvh anywhere in the CSS. */
  --ui-scale: 1;
  --vw:  calc(1vw  / var(--ui-scale));
  --vh:  calc(1vh  / var(--ui-scale));
  --svh: calc(1svh / var(--ui-scale));
  --dvh: calc(1dvh / var(--ui-scale));
  --lvh: calc(1lvh / var(--ui-scale));
}

/* Each step keeps the "effective" page width somewhere around 1450-1900px, which is
   the range the layout looks its best in. Want things bigger or smaller on a given
   monitor? Nudge that step's number. Media queries ignore zoom, so these widths are
   the real screen widths. */
@media (min-width: 1600px) { :root { --ui-scale: 1.1;  } } /* 1600-1680 */
@media (min-width: 1900px) { :root { --ui-scale: 1.2;  } }  /* 1920 x 1080: the common one */
@media (min-width: 2200px) { :root { --ui-scale: 1.35; } }
@media (min-width: 2500px) { :root { --ui-scale: 1.5;  } }  /* 2560 x 1440 */
@media (min-width: 3200px) { :root { --ui-scale: 1.8;  } }  /* 3440 ultrawide */
@media (min-width: 3800px) { :root { --ui-scale: 2.1;  } }  /* 4K at 100% */

/* Ultrawides are wide but short. Scaling them by width alone pushes the bottom of the
   landing screen (stats + logos) below the fold, so here height wins: a smaller zoom.
   The fluid --wrap above makes sure the extra width still gets used.
   The numbers were measured, not guessed: 1.1 is the most 3440 x 1440 takes before the
   landing spills past the fold, and the 1080-tall ones were already a squeeze at 1.
   Order matters: the shorter-screen rule comes last so it wins when both match. */
@media (min-width: 3200px) and (max-height: 1700px) { :root { --ui-scale: 1.1; } } /* 3440 x 1440 */
@media (min-width: 2200px) and (max-height: 1250px) { :root { --ui-scale: 1;   } } /* 2560 / 3440 x 1080 */

html {
  zoom: var(--ui-scale);
  scroll-padding-top: calc(var(--sn-height) + 16px);
}

/* ---------- Announcement bar ---------- */

/* ---------- Header: frosted white glass ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  margin-bottom: calc(var(--sn-height) * -1);   /* floats over the hero, so the photo shows through the glass */
  font-family: "Inter", sans-serif; color: var(--sn-ink);
}
/* The frosted background lives on its own layer (not on the header itself),
   so the mega menus inside can blur the page behind them too. */
.site-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.68));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 rgba(16, 41, 54, 0.06), 0 12px 28px -20px rgba(16, 41, 54, 0.35);
  transition: background 0.3s ease;
}
/* A little more solid once you scroll, on light pages and while a menu is open */
.site-nav.is-scrolled::before, .site-nav[data-tone="solid"]::before, .site-nav.is-open::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.84));
}
.site-nav.is-open::before { box-shadow: inset 0 1px 0 #fff; }
.site-nav[data-tone="solid"] { margin-bottom: 0; }
.sn-row {
  max-width: var(--wrap); height: var(--sn-height); margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; gap: 28px;
}
/* Big, clearly visible logo */
.sn-logo { display: flex; align-items: center; flex: none; }
.sn-logo img { display: block; height: 46px; width: auto; object-fit: contain; }
.sn-links { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.sn-links > a, .sn-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--sn-ink-soft);
  background: none; border: 0; cursor: pointer; text-decoration: none;
  padding: 9px 13px; border-radius: 999px; white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.sn-links > a:hover, .sn-trigger:hover, .sn-trigger[aria-expanded="true"] { color: var(--sn-navy); background: rgba(255, 255, 255, 0.75); }
.sn-links > a[aria-current="page"], .sn-trigger.is-current { color: var(--sn-teal-deep); }
.sn-trigger.is-current::after, .sn-links > a[aria-current="page"]::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sn-gold); margin-left: 2px;
}
.sn-trigger svg { width: 12px; height: 12px; transition: transform 0.2s ease; }
.sn-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.sn-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.sn-text-link { font-size: 14px; font-weight: 600; color: var(--sn-navy); text-decoration: none; white-space: nowrap; }
.sn-text-link:hover { color: var(--sn-teal-deep); text-decoration: underline; text-underline-offset: 4px; }
.sn-cta {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--sn-navy); padding: 10px 20px; border-radius: 999px;
  box-shadow: 0 8px 18px -10px rgba(16, 41, 54, 0.7);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sn-cta:hover { background: var(--sn-gold); color: var(--sn-navy); transform: translateY(-1px); }
.sn-toggle {
  display: none; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center;
  color: var(--sn-navy); background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(16, 41, 54, 0.12); cursor: pointer;
  box-shadow: inset 0 1px 0 #fff;
}
.sn-toggle svg { width: 18px; height: 18px; }
.site-nav :focus-visible { outline: 2px solid var(--sn-teal-deep); outline-offset: 2px; }

/* ---------- Mega menu (desktop): white glass ---------- */
.sn-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  overflow: hidden; border-radius: 0 0 24px 24px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  box-shadow: 0 40px 80px -40px rgba(16, 41, 54, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.sn-mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.22s ease, transform 0.22s ease; }
/* soft brand light behind the glass */
.sn-mega::before, .sn-mega::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(50px); }
.sn-mega::before { width: 520px; height: 300px; left: 6%; top: 35%; background: rgba(117, 185, 176, 0.22); }
.sn-mega::after { width: 420px; height: 260px; right: 8%; bottom: -80px; background: rgba(216, 185, 121, 0.24); }
.sn-mega-inner {
  position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 28px 32px 34px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(260px, 0.9fr); gap: 32px;
  border-top: 1px solid rgba(16, 41, 54, 0.08);
}
.sn-col .sn-h {
  margin: 0 0 14px; font-family: "Inter", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sn-teal-deep);
}
.sn-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sn-col a {
  display: block; text-decoration: none; color: var(--sn-navy); padding: 8px 10px; margin: 0 -10px; border-radius: 12px;
  transition: background 0.15s ease;
}
.sn-col a:hover { background: rgba(16, 41, 54, 0.05); }
.sn-col a b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.sn-col a small { display: block; font-size: 12.5px; color: var(--sn-ink-soft); margin-top: 2px; }
.sn-col a[aria-current="page"] b { color: var(--sn-teal-deep); }
.sn-col a[aria-current="page"] b::after { content: " ·"; color: var(--sn-gold-deep); }
.sn-feature {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px;
  border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff; padding: 18px;
  background: #1c3d4d;
  box-shadow: 0 18px 36px -22px rgba(16, 41, 54, 0.6);
  transition: transform 0.2s ease;
}
.sn-feature:hover { transform: translateY(-2px); }
.sn-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sn-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 29, 38, 0.05), rgba(10, 29, 38, 0.86)); }
.sn-feature > em, .sn-feature > b, .sn-feature > span { position: relative; z-index: 1; }
.sn-feature em {
  align-self: flex-start; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sn-navy); background: var(--sn-gold); padding: 2px 8px; border-radius: 999px; margin-bottom: 10px;
}
.sn-feature b { font-family: "Archivo", sans-serif; font-size: 20px; line-height: 1.15; }
.sn-feature span { font-size: 13px; color: rgba(255, 255, 255, 0.8); margin-top: 6px; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 1100px) {
  .sn-text-link { display: none; }
  .sn-row { gap: 16px; }
  .sn-links > a, .sn-trigger { padding: 8px 9px; font-size: 13.5px; }
}
@media (max-width: 1040px) {
  .sn-row { padding: 0 16px; }
  .sn-links, .sn-cta { display: none; }
  .sn-actions { margin-left: auto; }
  .sn-toggle { display: inline-flex; }
  .sn-mega { display: none; }
  .sn-logo img { height: 38px; }

}
/* phone sheet: all links in one white glass panel */
.sn-sheet { display: none; }
@media (max-width: 1040px) {
  .sn-sheet {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(calc(100 * var(--vh)) - var(--sn-height)); overflow-y: auto;
    padding: 8px 16px 24px; border-radius: 0 0 24px 24px;
    background: #fff;
    box-shadow: 0 40px 80px -40px rgba(16, 41, 54, 0.55);
    border-top: 1px solid rgba(16, 41, 54, 0.08);
  }
  .site-nav.is-open .sn-sheet { display: block; }
  .sn-sheet .sn-h { margin: 18px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sn-teal-deep); }
  .sn-sheet a {
    display: block; padding: 11px 0; color: var(--sn-navy); text-decoration: none; font-size: 16px; font-weight: 500;
    border-bottom: 1px solid rgba(16, 41, 54, 0.07);
  }
  .sn-sheet a[aria-current="page"] { color: var(--sn-teal-deep); font-weight: 700; }
  .sn-sheet .sn-cta { display: inline-flex; margin-top: 20px; border-bottom: 0; padding: 12px 22px; color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav::before, .sn-mega, .sn-trigger svg, .sn-cta, .sn-feature { transition: none; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sn-col a[target="_blank"] b::after { content: " ↗"; color: var(--sn-ink-soft); font-weight: 500; }

/* Menu column titles are plain text, not headings, so every page's heading outline starts at its h1 */
.sn-h { margin: 0; }
/* "Skip to content" link for keyboard users. Stays hidden until the first Tab press. */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 10000;
  padding: 10px 16px; border-radius: 8px;
  background: #102936; color: #fff;
  font: 600 14px/1 Inter, system-ui, sans-serif; text-decoration: none;
  transform: translateY(-200%); transition: transform 0.2s ease;
}
.skip-link:focus { transform: none; outline: 2px solid #d8b979; outline-offset: 2px; }
main:focus { outline: none; }
/* Pages that aren't built yet get a small "Soon" tag in the menus */
.sn-soon { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(216, 185, 121, 0.22); color: #7d6229; font: 700 9.5px/1.4 Inter, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; font-style: normal; vertical-align: 2px; }

/* Eight menu items is a lot for a small laptop, so the bar tightens in steps.
   "Log a call" is also in the Support menu, so it's safe to hide it here first. */
@media (max-width: 1365px) {
  .sn-text-link { display: none; }
  .sn-row { gap: 20px; }
  .sn-links > a, .sn-trigger { padding: 9px 10px; }
}
@media (max-width: 1220px) {
  .sn-row { gap: 14px; }
  .sn-links > a, .sn-trigger { padding: 8px 7px; font-size: 13.5px; }
  .sn-logo img { height: 40px; }
}