:root {
  --site-pad: clamp(20px, 3.2vw, 64px);
  --navy: #17233a;
  --blue: #2f5f96;
  --focus: #83acff;
}

/* The header is position:fixed (not sticky) so it never scrolls away and
   never disappears at the end of a short page. Fixed elements are removed
   from document flow, so every page needs this padding to keep the first
   section from starting underneath the header; without it, content would be
   hidden behind the header on load and on every anchor jump.
   The header's real rendered height is clamp(68px,6vw,84px) — set below by
   the `nav { height: ... !important }` rule, which overrides each page's
   inline height:96px. This padding must track that same clamp, not the
   inline value, or content sits either hidden under the header or with an
   extra gap above it. */
main {
  padding-top: clamp(68px, 6vw, 84px);
}
  /* Offset anchor/skip-link jumps so targets are not hidden under the sticky header */
  scroll-padding-top: calc(clamp(68px, 6vw, 84px) + 16px);
}

/* Global site font — overrides inline styles, page-level styles, and any
   remaining component font declarations (Playfair Display, DM Sans, Lora, etc.) */
html,
body,
body *,
::placeholder,
input,
select,
textarea,
button {
  font-family: "Times New Roman", Times, serif !important;
}

body {
  overflow-x: hidden;
  /* `clip` prevents horizontal scrolling WITHOUT creating a scroll container,
     which keeps position: sticky working (hidden is kept above as a fallback) */
  overflow-x: clip;
}

/* The page wrapper's inline overflow-x:hidden creates a scroll container that
   cancels the nav's position:sticky. `clip` clips overflow without doing so. */
div:has(> nav[aria-label="Main navigation"]) {
  overflow-x: clip !important;
}

img,
video {
  max-width: 100%;
}

main p,
main blockquote {
  font-family: "Times New Roman", Times, serif;
}

main > section {
  max-width: 100%;
  padding-left: var(--site-pad) !important;
  padding-right: var(--site-pad) !important;
}

.split,
.split > *,
.g3 > *,
.g4 > * {
  min-width: 0;
}

.split > *,
.g3 > *,
.g4 > * {
  max-width: 100%;
}

.split > :not(figure),
.g3 > *,
.g4 > * {
  height: auto !important;
}

main figure,
main figure img {
  max-width: 100%;
}

main figure img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 18px;
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-weight: 800;
  box-shadow: 0 8px 30px rgba(23, 35, 58, 0.2);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

summary {
  min-height: 44px;
}

summary::-webkit-details-marker {
  display: none;
}

nav {
  height: clamp(68px, 6vw, 84px) !important;
  padding-left: clamp(24px, 4vw, 80px) !important;
  padding-right: clamp(24px, 4vw, 80px) !important;
  font-family: "Times New Roman", Times, serif;
}

nav > a img {
  height: clamp(48px, 4.8vw, 70px) !important;
  background: transparent;
}

.arlo-foot {
  text-align: left;
}

.arlo-foot > div {
  min-width: 0;
}

.arlo-foot img {
  width: clamp(82px, 10vw, 104px) !important;
}

.arlo-foot h4 {
  font-size: clamp(12px, 1.2vw, 14px) !important;
  text-transform: none !important;
}

.arlo-foot a,
.arlo-foot > div:first-child p {
  font-size: clamp(13px, 1.1vw, 15px) !important;
}

.arlo-foot a[href^="tel:"],
.arlo-foot a[href^="mailto:"],
.arlo-foot a[href*="maps"] {
  grid-template-columns: 30px minmax(0, 1fr) !important;
  align-items: start !important;
}

.arlo-foot a[href^="tel:"] span:last-child,
.arlo-foot a[href^="mailto:"] span:last-child,
.arlo-foot a[href*="maps"] span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal !important;
  line-height: 1.45;
}

footer {
  padding-left: var(--site-pad) !important;
  padding-right: var(--site-pad) !important;
}

section img[style*="inset"],
section[style*="url("] {
  background-color: #0d1728 !important;
}

button:not([data-dot]):not([data-nav]),
[role="button"] {
  min-height: 44px;
}

button[data-dot] {
  position: relative;
}

.section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  margin-bottom: 16px;
  padding: 7px 16px;
  border: 1px solid;
  border-radius: 999px;
  font-family: "Times New Roman", Times, serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-label::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
  flex: 0 0 auto;
}

.section-label--light {
  border-color: #d4e4f4;
  background: #eef6fd;
  color: var(--blue);
}

.section-label--light::before {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(47, 95, 150, 0.1);
}

.section-label--dark {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  color: #eef6fd;
}

.section-label--dark::before {
  background: #9dd4f5;
  box-shadow: 0 0 0 4px rgba(157, 212, 245, 0.12);
}

button[data-dot]::before {
  content: "";
  position: absolute;
  inset: -17px;
  clip-path: inset(0 12px);
}

main a[href^="tel:"],
main a[href^="mailto:"] {
  min-height: 32px;
}

@media (min-width: 1025px) {
  .arlo-foot {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .arlo-foot a[href*="maps"] span:last-child {
    overflow-wrap: normal !important;
    white-space: nowrap !important;
  }
}

/* Mobile: pages end directly at the footer — trim the last section's oversized
   bottom padding and the footer's top padding so no large blank band remains. */
@media (max-width: 600px) {
  main > section:last-of-type {
    padding-bottom: 28px !important;
  }
  main > section:last-child {
    padding-bottom: 28px !important;
  }
  footer {
    padding-top: 44px !important;
  }
}

@media (max-width: 1100px) {
  .nav-links {
    display: none !important;
  }

  .mob-nav {
    display: block !important;
  }

  .mob-nav > summary {
    width: 52px;
    height: 52px;
  }

  .mob-nav > div {
    width: min(320px, calc(100vw - 32px));
    /* Never taller than the space below the sticky header; scroll inside instead */
    max-height: calc(100vh - clamp(68px, 6vw, 84px) - 36px);
    max-height: calc(100dvh - clamp(68px, 6vw, 84px) - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mob-nav details:not([open]) > div {
    display: none !important;
  }

  .mob-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .mob-nav > div > a,
  .mob-nav > div > details > summary {
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  .mob-nav > div > a,
  .mob-nav > div > details > summary,
  .mob-nav > div > details > div > a {
    transition: background-color 160ms ease, color 160ms ease;
  }

  .mob-nav > div > a:hover,
  .mob-nav > div > a:focus-visible,
  .mob-nav > div > details > summary:hover,
  .mob-nav > div > details > summary:focus-visible,
  .mob-nav > div > details > div > a:hover,
  .mob-nav > div > details > div > a:focus-visible {
    background: #f2f7fc;
  }

  .mob-nav > div > details > div {
    margin: 2px 10px 8px 20px;
    padding: 2px 0 2px 12px;
    border-left: 2px solid #d4e4f4;
  }

  .mob-nav > div > details > div > a {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #405a78;
    font-weight: 600;
  }
}

@media (max-width: 1024px) {
  .split {
    grid-template-columns: 1fr !important;
  }

  .arlo-foot {
    grid-template-columns: 1.35fr 0.55fr 0.75fr 1.9fr !important;
    gap: 24px 14px !important;
  }

  .sticky-fig {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .f2 {
    grid-template-columns: 1fr 1fr;
  }

  .arlo-foot h4 {
    font-size: 12px !important;
  }

  .arlo-foot a,
  .arlo-foot a span:last-child {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .arlo-foot > div:first-child p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .foot-bottom span,
  .foot-bottom a {
    font-size: 12px !important;
  }

  main article h3,
  main article h4,
  .g3 > * h3,
  .g3 > * h4,
  .g4 > * h3,
  .g4 > * h4 {
    font-size: 18px !important;
  }

  main article p,
  .g3 > * p,
  .g4 > * p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 700px) {
  main > section:not(.home-hero) {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .arlo-foot {
    grid-template-columns: 0.8fr 1fr 1.75fr !important;
    gap: 32px 16px !important;
  }

  .arlo-foot > div:first-child {
    grid-column: 1 / -1;
  }

  .arlo-foot > div:first-child p {
    max-width: none !important;
    margin-top: 10px !important;
    font-size: clamp(11px, 1.8vw, 12px) !important;
    line-height: 1.45 !important;
  }

  .arlo-foot img {
    width: clamp(58px, 12vw, 78px) !important;
  }

  .arlo-foot h4 {
    margin-bottom: 8px !important;
    font-size: clamp(10px, 2vw, 12px) !important;
  }

  .arlo-foot > div > div {
    gap: 3px !important;
  }

  .arlo-foot a,
  .arlo-foot a span:last-child {
    font-size: clamp(11px, 1.9vw, 13px) !important;
    line-height: 1.35 !important;
  }

  .arlo-foot a[href^="tel:"],
  .arlo-foot a[href^="mailto:"],
  .arlo-foot a[href*="maps"] {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .arlo-foot a[href^="tel:"] span:first-child,
  .arlo-foot a[href^="mailto:"] span:first-child,
  .arlo-foot a[href*="maps"] span:first-child {
    width: 18px !important;
    height: 18px !important;
  }

  .arlo-foot a[href^="tel:"] svg,
  .arlo-foot a[href^="mailto:"] svg,
  .arlo-foot a[href*="maps"] svg {
    width: 12px !important;
    height: 12px !important;
  }

  .foot-bottom {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-top: 28px !important;
    padding-top: 18px !important;
  }

  .foot-bottom span,
  .foot-bottom a {
    font-size: 10px !important;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  footer {
    padding-top: 40px !important;
    padding-bottom: 24px !important;
  }
}

@media (max-width: 640px) {
  .g3,
  .g4,
  .f2 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  main > section img[style*="100vw"] {
    height: 260px !important;
  }
}

@media (max-width: 560px) {
  main > section img[style*="100vw"] {
    height: 200px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}