/* WiFi Presence page styles, layered over the bundled Bootstrap theme. */
:root { --presence-navy: #141832; --presence-blue: #01558c; }
html { scroll-padding-top: 6rem; }
body { color: #263340; }
h1, h2, h3, h4 { color: var(--presence-navy); }
#mainNav { background: #fff; box-shadow: 0 1px 0 rgba(20,24,50,.08); }
#mainNav .navbar-brand { color: var(--presence-navy); font-size: 1.2rem; }
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link.active { color: var(--presence-blue) !important; text-decoration: underline; text-underline-offset: .3em; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 2000; padding: .75rem 1rem; background: #fff; color: #01558c; }
.skip-link:focus { top: 1rem; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #01558c; outline-offset: 4px; }
header.masthead { padding: 10rem 0 5rem; background: linear-gradient(135deg, #f1f7fb, #fff 75%); color: #344455; text-align: left; }
.hero-copy h1 { font-size: clamp(2.25rem, 4vw, 3.65rem); line-height: 1.14; font-weight: 700; margin-bottom: 1.5rem; letter-spacing: -.035em; }
.eyebrow { color: var(--presence-blue); font-family: Montserrat, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.hero-lead { font-size: 1.25rem; line-height: 1.65; }
.hero-copy > p:not(.eyebrow) { max-width: 39rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.btn-primary { background: #01558c; border-color: #01558c; color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: #003e68; border-color: #003e68; color: #fff; }
.btn-outline-primary { color: #01558c; border-color: #01558c; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: #01558c; border-color: #01558c; color: #fff; }
.product-preview { background: #fff; border: 1px solid #dce5ec; border-radius: 1rem; padding: 1rem; margin: 0; box-shadow: 0 1.5rem 3rem rgba(20,24,50,.10); }
.preview-label { font: 700 .8rem Montserrat, sans-serif; padding: .35rem .25rem 1rem; color: var(--presence-navy); }
.product-preview img { width: 100%; height: auto; border-radius: .5rem; }
.product-preview figcaption { font-size: .8rem; color: #526373; margin-top: 1rem; }
.page-section { padding: 5rem 0; }
.section-intro { max-width: 49rem; margin: 0 auto 3rem; text-align: center; }
.section-intro h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: 1.25rem; }
.section-intro p { line-height: 1.8; }
.steps h3 { font-size: 1.2rem; margin: 1.25rem 0 .75rem; }
.steps p { line-height: 1.8; }
.step-number { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #e7f1f7; color: #01558c; font: 700 1.1rem Montserrat, sans-serif; }
.returning-note { margin-top: 2rem; padding: 1.5rem; background: #eff5f9; border-left: 4px solid #01558c; line-height: 1.8; }
#services { background: #f6f8fa; }
section h3.section-subheading, section p.section-subheading { font-style: normal; line-height: 1.7; margin-bottom: 3rem; }
#portfolio .portfolio-item .portfolio-caption .portfolio-caption-subheading { font-style: normal; font-size: .95rem; line-height: 1.7; }
#portfolio .portfolio-item .portfolio-link > img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
#portfolio .portfolio-item { height: 100%; background: #fff; }
#portfolio .portfolio-item .portfolio-caption-heading { font-size: 1.25rem; }
.faq-container { max-width: 900px; }
details { border-bottom: 1px solid #dce5ec; padding: 1.25rem 0; }
summary { cursor: pointer; color: var(--presence-navy); font-weight: 700; line-height: 1.6; }
details p { margin: 1rem 0 0; line-height: 1.8; }
#team .team-member { margin-top: 2rem; }
#team .team-member p { margin-top: 1rem; }
#contact .section-heading { color: #fff; }
#contact .section-subheading, #contact .form-help { color: #e0e8f0 !important; }
#contact .section-subheading { max-width: 48rem; margin-left: auto; margin-right: auto; }
#contact a { color: #fff; text-underline-offset: .2em; }
.form-help { font-size: .9rem; }
.demo-form { display: block; border: 0; border-radius: .5rem; background: #f4f8fa; margin: 1.5rem 0; }
.portfolio-modal .close-modal { border: 0; padding: 0; background: transparent; }
@media (max-width: 767px) {
  header.masthead { padding-top: 8rem; padding-bottom: 3rem; }
  .page-section { padding: 3.5rem 0; }
  section h2.section-heading { font-size: 1.8rem; }
  .hero-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }
header.masthead .row { --bs-gutter-x: 1.5rem; }
section#contact h2.section-heading { font-size: clamp(1.8rem, 3vw, 2.5rem); }
section#contact h3.section-subheading { font-style: normal; }
