/* Cohen Lawyers - core: tokens, reset, nav, footer, shared components */
:root { --black: #000000; --white: #FFFFFF; --teal: #263B36; --ink-60: rgba(0, 0, 0, 0.6); --ink-40: rgba(0, 0, 0, 0.4); --ink-08: rgba(0,0,0,0.08); --paper-60: rgba(255, 255, 255, 0.6); --paper-40: rgba(255, 255, 255, 0.4); --paper-20: rgba(255, 255, 255, 0.2); --paper-08: rgba(255, 255, 255, 0.08); --font-display: 'Playfair Display', 'Times New Roman', serif; --font-ui: 'Poppins', system-ui, -apple-system, sans-serif; --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --d-fast: 220ms; --d-mid: 600ms; --d-slow: 1100ms; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { font-family: var(--font-ui); color: var(--black); background: var(--white); -webkit-font-smoothing: antialiased; }
em, i, cite { font-style: normal; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.skip-link { position: absolute; top: -100px; left: 16px; background: var(--black); color: var(--white); padding: 12px 20px; font-size: 14px; z-index: 200; }
.skip-link:focus { top: 16px; }
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 28px 48px; display: flex; justify-content: space-between; align-items: center; transition: background var(--d-mid) var(--ease-out), padding var(--d-mid) var(--ease-out), color 220ms var(--ease-out), opacity 220ms var(--ease-out); color: var(--white); }
.nav__logo-img { height: 28px; width: auto; }
.nav__links { display: flex; gap: 36px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav__link { font-family: var(--font-ui); font-size: 15px; font-weight: 400; letter-spacing: -0.01em; position: relative; padding-bottom: 4px; line-height: normal; }
.nav__link::after { content: ''; position: absolute; bottom: 0; left: 0; right: 100%; height: 1px; background: currentColor; transition: right var(--d-mid) var(--ease-cinematic); }
.nav__link:hover::after { right: 0; }
.nav__link--active::after { right: 0; opacity: 0.5; }
.nav__cta { font-family: var(--font-ui); font-size: 14px; font-weight: 500; padding: 14px 28px; background: var(--white); color: var(--black); border: 1px solid var(--white); border-radius: 4px; transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); line-height: 1.5; }
.nav__cta:hover { background: transparent; color: var(--white); }
.nav__toggle { display: none; background: none; border: none; color: inherit; cursor: pointer; padding: 8px; }
.nav__toggle-box { display: block; position: relative; width: 24px; height: 14px; }
.nav__toggle-bar { position: absolute; left: 0; width: 24px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform var(--d-fast) var(--ease-out), top var(--d-fast) var(--ease-out); }
.nav__toggle-bar:nth-child(1) { top: 3px; }
.nav__toggle-bar:nth-child(2) { top: 11px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { top: 7px; transform: rotate(-45deg); }
.nav--light { color: var(--black); }
.nav--light .nav__logo-img { filter: invert(1); }
.nav--light .nav__cta { background: var(--black); color: var(--white); border-color: var(--black); }
.nav--light .nav__cta:hover { background: transparent; color: var(--black); border-color: var(--black); }
body.drawer-open .nav { z-index: 160; color: var(--white); background: transparent; }
body.drawer-open .nav__logo-img { filter: none !important; }
.nav-drawer { position: fixed; inset: 0; background: var(--black); color: var(--white); z-index: 150; display: flex; flex-direction: column; padding: 104px 28px 36px; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateY(-100%); transition: transform var(--d-slow) var(--ease-cinematic); }
.nav-drawer.is-open { transform: translateY(0); }
.nav-drawer__links { list-style: none; display: flex; flex-direction: column; gap: 0; }
.nav-drawer__links > li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.nav-drawer__link { font-family: var(--font-ui); font-size: 26px; font-weight: 400; letter-spacing: -0.01em; color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 18px 0; background: none; border: none; cursor: pointer; text-align: left; }
.nav-drawer__caret { font-size: 13px; opacity: 0.55; transition: transform var(--d-fast) var(--ease-out); }
.nav-drawer__expand[aria-expanded="true"] .nav-drawer__caret { transform: rotate(180deg); }
.nav-drawer__sub { list-style: none; display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height var(--d-mid) var(--ease-cinematic); }
.nav-drawer__sub.is-open { max-height: 560px; }
.nav-drawer__sub a { display: block; font-family: var(--font-ui); font-weight: 300; font-size: 15px; letter-spacing: 0.01em; line-height: 1.4; color: var(--paper-60); padding: 10px 0 10px 2px; transition: color var(--d-fast) var(--ease-out); }
.nav-drawer__sub a:hover, .nav-drawer__sub a:focus-visible { color: var(--white); }
.nav-drawer__sub li:last-child a { padding-bottom: 20px; }
.nav-drawer__sub-all { font-weight: 500 !important; color: var(--white) !important; font-size: 12px !important; letter-spacing: 0.14em !important; text-transform: uppercase; margin-top: 4px; }
.nav-drawer__contact { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 28px; border-top: 1px solid var(--paper-20); }
.nav-drawer__contact a { font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.12em; color: var(--paper-60); }
.page-transition { position: fixed; inset: 0; z-index: 300; background: var(--black); pointer-events: none; opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; transition: opacity 460ms var(--ease-cinematic), visibility 460ms var(--ease-cinematic); }
.page-transition.is-active { opacity: 1; visibility: visible; }
html.cl-entering { background: var(--black); }
html.cl-entering .page-transition { opacity: 1; visibility: visible; }
.page-transition__mark { width: 58px; height: auto; opacity: 0; transform: scale(0.5) rotate(-90deg); will-change: transform, opacity; }
.page-transition.is-active .page-transition__mark, html.cl-entering .page-transition__mark { animation: ptMarkIn 620ms var(--ease-cinematic) forwards, ptMarkPulse 2600ms var(--ease-out) 660ms infinite; }
body.is-leaving .nav-drawer__links > li, body.is-leaving .nav-drawer__contact { opacity: 0; transform: translateY(-10px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
body.is-leaving .nav-drawer__links > li:nth-child(2) { transition-delay: 45ms; }
body.is-leaving .nav-drawer__links > li:nth-child(3) { transition-delay: 90ms; }
body.is-leaving .nav-drawer__links > li:nth-child(4) { transition-delay: 135ms; }
body.is-leaving .nav-drawer__links > li:nth-child(5) { transition-delay: 180ms; }
body.is-leaving .nav-drawer__contact { transition-delay: 210ms; }
.container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 48px; }
.section { padding-block: 96px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 10px; font-weight: 400; letter-spacing: 0.38em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 20px; }
.eyebrow--light { color: var(--paper-40); }
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; border: 1px solid; cursor: pointer; transition: all var(--d-fast) var(--ease-out); border-radius: 4px; }
.btn--white { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--white:hover { background: transparent; color: var(--white); }
.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 500ms var(--ease-cinematic), transform 500ms var(--ease-cinematic); }
.reveal-up.is-in { opacity: 1; transform: translateY(0); }
.breadcrumb { background: var(--white); border-bottom: 1px solid var(--ink-08); padding: 14px 48px; }
.breadcrumb__list { list-style: none; display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 12px; font-weight: 300; }
.breadcrumb__list a:hover { color: var(--black); }
.breadcrumb__current { color: var(--black); font-weight: 400; }
.cta-section { position: relative; overflow: hidden; background: var(--black); }
.cta__bg { position: absolute; inset: 0; overflow: hidden; }
/* Front row's heads sit flush just under the top edge of the band.
   A PERCENTAGE cannot hold this: object-position percentages are a share of the
   leftover image height, and that leftover grows with viewport width (the band
   keeps a fixed height while the photo scales), so any fixed percentage drifts -
   65% frames it correctly at 1440px but crops the heads off at 1600px and wider.
   A vw offset is exact instead. The photo is scaled to the band's width, so its
   rendered height is always width/1.777; offsetting by a share of the width
   therefore pins the SAME point of the photo to the top edge at every size.
   -17.9vw lands on image y=300 of 941, about 10px above the front row's hairline.
   Valid from 1200px up, where the photo scaled to full width is tall enough to
   still cover the band after the shift. Below that the visible window is most of
   the photo's height and the front row cannot reach the top edge at all, so 40%
   keeps both rows framed instead.
   None of this affects section height: the band is sized by .section padding
   plus its content, never by the image. */
.cta__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: brightness(0.42); }
@media (min-width: 1200px) { .cta__bg-img { object-position: center -17.9vw; } }
.cta__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(38,59,54,0.45) 0%, transparent 70%); pointer-events: none; }
.cta-section .container { text-align: center; position: relative; z-index: 1; }
.cta__h2 { font-family: var(--font-ui); font-weight: 700; font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.03em; color: var(--white); margin-bottom: 40px; }
.cta__h2 em { font-family: var(--font-display); font-weight: 400; }
.cta__actions { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.footer { background: var(--black); color: var(--white); padding: 64px 48px 32px; border-top: 1px solid var(--paper-08); }
.footer__grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 48px; border-bottom: 1px solid var(--paper-08); }
.footer__brand-img { height: 38px; width: auto; display: block; margin-bottom: 2px; }
.footer__brand-img--lockup { height: auto; width: 320px; max-width: 100%; margin-bottom: 0; }
.footer__brand-img--lockup + .footer__tagline { margin-top: 14px; }
.footer__tagline-headline { font-weight: 700; color: var(--white); margin-top: 18px; max-width: 340px; font-size: 16px; line-height: 1.35; letter-spacing: -0.005em; }
.footer__tagline { font-weight: 300; color: var(--paper-60); margin-top: 10px; max-width: 340px; font-size: 13px; line-height: 1.65; }
.footer__heading { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--paper-40); margin-bottom: 20px; }
.footer__list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer__list a { font-size: 14px; color: var(--paper-60); transition: color var(--d-fast) var(--ease-out); }
.footer__list a:hover { color: var(--white); }
.footer__legal { max-width: 1400px; margin: 24px auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--paper-40); }
body.mega-open .nav__cta { background: var(--white); color: var(--black); border-color: var(--white); }
.nav__mega-trigger { background: none; border: none; color: inherit; cursor: pointer; padding: 0 0 4px; display: inline-flex; align-items: center; gap: 8px; }
.nav__mega-caret { font-size: 9px; transition: transform var(--d-fast) var(--ease-out); }
.nav__mega-trigger[aria-expanded="true"] .nav__mega-caret { transform: rotate(180deg); }
.mega-nav-panel { position: fixed; top: 0; left: 0; right: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--white); box-shadow: 0 32px 64px -16px rgba(0,0,0,0.5); z-index: 99; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out), visibility var(--d-fast); max-height: 100vh; overflow-y: auto; }
.mega-nav-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.mega-nav-grid { max-width: 1650px; margin: 0 auto; padding: 112px 48px 56px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 32px 24px; align-items: stretch; }
.mega-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mega-col__head { display: block; font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--white); padding-bottom: 12px; border-bottom: 1px solid var(--paper-08); margin-bottom: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--d-fast) var(--ease-out); }
.mega-col__head:hover { color: var(--paper-60); }
.mega-col__link { display: block; font-family: var(--font-ui); font-size: 13px; font-weight: 300; line-height: 1.55; padding: 3px 0; color: var(--paper-60); transition: color var(--d-fast) var(--ease-out); }
.mega-col__link:hover { color: var(--white); }
.mega-col__desc { font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--paper-40); margin-bottom: 4px; }
.mega-col__view-all { font-size: 13px; font-weight: 600; color: var(--white); margin-top: auto; padding-top: 24px; border-top: 1px solid var(--paper-08); }
.mega-col__view-all:hover { color: var(--paper-60); }
.mega-nav-foot { max-width: 1650px; margin: 0 auto; padding: 0 48px 52px; }
.mega-nav-viewall { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--white); padding: 14px 30px; border: 1px solid var(--paper-40); border-radius: 4px; transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
.mega-nav-viewall:hover { background: var(--white); color: var(--black); border-color: var(--white); }

@keyframes ptMarkIn {
  0% { opacity: 0; transform: scale(0.5) rotate(-90deg); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes ptMarkPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.09) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition__mark { display: none; }
  .page-transition { transition: none; }
  body.is-leaving .nav-drawer__links > li, body.is-leaving .nav-drawer__contact { transition: none; }
  .reveal-up { opacity: 1 !important; transform: none !important; }
  .nav { transition: none; }
  .nav::before { transition: none; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer { padding: 48px 24px 24px; }
  .nav { padding: 20px 24px; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; align-items: center; justify-content: center; }
  .mega-nav-panel { display: none !important; }
}

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 1500px) {
  .mega-nav-grid { grid-template-columns: repeat(4, 1fr); row-gap: 48px; padding-top: 112px; }
}

/* Designer credit in the footer legal bar. The bar is space-between, so the
   credit sits between the copyright and the Privacy/Terms links; it is held a
   step quieter than both so it reads as a credit rather than a nav item. */
.footer__credit { color: var(--paper-40); opacity: 0.7; }
/* Centred on the bar itself. The bar is space-between, which only put the credit
   midway between the copyright and the links - and since the copyright is the
   wider of the two, that sat 40-odd px left of true centre. Three columns with
   the outer two sharing the slack centres it properly. Only applied once the bar
   has room for all three at their natural width - the outer columns share the
   slack, so any narrower and the 1fr column would squeeze the copyright onto a
   second line. Below that the bar keeps space-between exactly as before, and on
   a phone the three items stack left-aligned, where centring just the middle one
   would read as a mistake. */
@media (min-width: 860px) {
  .footer__legal { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .footer__legal > :last-child { justify-self: end; }
  .footer__credit { justify-self: center; text-align: center; }
}
.footer__credit a { color: inherit; border-bottom: 1px solid transparent; transition: opacity 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.footer__credit a:hover { opacity: 1; border-bottom-color: currentColor; }

/* Social row, sitting under the footer tagline in the brand column. The anchors
   are 40px so the tap target clears the 44px-ish minimum on a phone even though
   the glyph is 19px; the -10px left margin pulls the first glyph's optical edge
   back into line with the tagline text above it. */
.footer__social { list-style: none; display: flex; align-items: center; margin: 18px 0 0 -10px; }
.footer__social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--paper-40); transition: color var(--d-fast) var(--ease-out); }
.footer__social a:hover, .footer__social a:focus-visible { color: var(--white); }
.footer__social svg { width: 19px; height: 19px; fill: currentColor; display: block; }

/* The tagline used to sit between the logo lockup and the social row, so the
   row's 18px top margin was measured from a line of body text. With the tagline
   gone the row sits directly under the lockup and needs a little more air. */
.footer__brand + .footer__social { margin-top: 26px; }

/* ── HEADER SCRIM ──
   The header sits over the page with no background of its own, so over busy or
   pale imagery the logo and links lose their edge against whatever is behind
   them. This lays a dark gradient across the header's own height - strongest at
   the very top, fully transparent by the bottom edge - which anchors the text
   without drawing a visible bar or hiding the artwork underneath.

   It is a pseudo-element at z-index -1 so it paints behind the logo and links
   but still above the page (.nav carries z-index 100 and so forms its own
   stacking context, which keeps the -1 contained). pointer-events: none so it
   never intercepts a click on the nav.

   Hidden while .nav--light is on: that state is toggled per section by the
   scroll controller and flips the nav to black text over a pale section, where a
   dark scrim would work against the contrast rather than for it. Also hidden
   behind the open drawer, which is solid black already. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.58) 0%,
    rgba(0,0,0,0.40) 42%,
    rgba(0,0,0,0.18) 72%,
    rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  transition: opacity 220ms var(--ease-out);
}
/* Both written with two classes so they outrank .nav::before on specificity
   rather than on source order - equal-specificity ordering is fragile here. */
.nav.nav--light::before { opacity: 0; }
body.drawer-open .nav::before { opacity: 0; }

/* ── HEADER SURFACE ON SCROLL ──
   The header is fixed and transparent, so once the page moves, body copy runs
   straight through it - the nav links land on top of headlines and both become
   unreadable. A gradient cannot fix that: it is not a contrast problem, the two
   sets of text are simply occupying the same pixels. The header needs a real
   surface so content passes behind it.

   Transparent only at rest at the top of the page, where the hero is composed
   around it. From 24px of scroll it takes a surface, tone-matched to the state
   the nav is already in - dark behind white text, light behind black text - so
   it keeps the existing chameleon behaviour instead of fighting it. The slight
   translucency plus blur keeps a hint of what is underneath, so it reads as a
   frosted layer over the page rather than a hard band across it. */
.nav.nav--solid {
  background: rgba(0,0,0,0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.nav.nav--solid.nav--light {
  background: rgba(255,255,255,0.92);
  border-bottom-color: rgba(0,0,0,0.08);
}
/* the scrim is for the transparent state only - over a solid surface it would
   just muddy it, and over the light surface it would be a grey smear */
.nav.nav--solid::before { opacity: 0; }

/* With the drawer open the header sits on the drawer's own solid black panel and
   its logo is forced white, so it has to drop the scrolled surface entirely.
   body.drawer-open .nav already sets background:transparent, but at (0,2,1) it
   loses to .nav.nav--solid.nav--light at (0,3,0) - which left a white logo
   sitting on a pale bar over the black drawer. Restated here carrying all four
   classes so it outranks the solid rules, and clearing the blur and hairline
   too, not just the fill. */
body.drawer-open .nav.nav--solid,
body.drawer-open .nav.nav--solid.nav--light {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* ── MEGA PANEL CLEARANCE UNDER THE SOLID HEADER ──
   The panel is fixed at top:0 and its 112px of top padding was set to clear a
   header with no edge to it. Now that the header carries a surface, the column
   heads land about 5px under a hard line, which reads as cramped. Give them
   room - but only while that edge exists, so the panel keeps its original
   proportions when opened at the top of the page. Two values because the nav is
   107px from 1025px up and about 91px below that; the panel itself is hidden
   under 880px, where the drawer takes over. */
body.nav-solid .mega-nav-grid { padding-top: 156px; }
@media (max-width: 1024px) {
  body.nav-solid .mega-nav-grid { padding-top: 140px; }
}

/* ── HEADER WHILE THE MEGA PANEL IS OPEN ──
   The panel is a full-width dark sheet at z-index 99, just under the nav's 100.
   While the header had no surface the two read as one dark field, which is what
   body.mega-open .nav__cta assumes when it flips the button to white-on-dark.
   With a surface, a header sitting over a pale section stayed white - so the
   white button landed on a white bar and lost its shape entirely, and the header
   and panel read as two disconnected bands.

   So while the panel is open the header takes its dark surface regardless of the
   section behind it: the button override is correct again, and the header and
   panel join back into one surface. Carries enough classes to outrank the
   .nav--solid.nav--light pair. */
body.mega-open .nav.nav--solid,
body.mega-open .nav.nav--solid.nav--light {
  background: rgba(0,0,0,0.86);
  border-bottom-color: rgba(255,255,255,0.10);
  color: var(--white);
}
body.mega-open .nav.nav--solid.nav--light .nav__logo-img { filter: none; }

/* ── ANCHOR TARGETS CLEAR THE HEADER ──
   Nothing set a scroll offset, so every in-page jump put the target at y=0 -
   underneath the fixed header. That includes the "Skip to main content" link on
   every page, which is the one control a keyboard user relies on: it landed them
   with the first 107px of the content hidden. scroll-padding-top on the scroll
   container fixes anchor navigation and scrollIntoView together. Values track
   the nav: about 108px from 1025px up, about 70px below that. */
html { scroll-padding-top: 132px; }
@media (max-width: 1024px) { html { scroll-padding-top: 112px; } }
@media (max-width: 880px)  { html { scroll-padding-top: 94px; } }