/* Editorial direction: one continuous image, generous type, clear search disciplines. */
:root { --editorial-ink: #071724; --editorial-white: #f6f7f5; --editorial-aqua: #8cddd5; }
:focus-visible { outline: 3px solid #55bdc0; outline-offset: 5px; }
section[id] { scroll-margin-top: 110px; }
.site-header { height: 96px; background: rgba(7,23,36,.85); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px); }
.site-header.is-scrolled { background: rgba(7,23,36,.97); box-shadow: none; }
.header-inner { width: min(1600px, calc(100% - 72px)); gap: 32px; }
.brand, .brand-footer { position: relative; min-width: 130px; width: 130px; height: 82px; padding: 0; overflow: hidden; background: transparent; border-radius: 0; box-shadow: none; }
.brand-logo-crop { position: relative; display: block; width: 130px; height: 82px; overflow: hidden; }
.brand .brand-logo { position: absolute; left: -142px; top: -9px; width: 408px; max-width: none; height: 102px; object-fit: contain; filter: url(#logo-white); }
.global-nav { gap: clamp(14px, 1.25vw, 24px); font-size: 14px; font-weight: 600; }
.global-nav > a:not(.header-cta) { padding: 10px 0; color: #f1f4f5; }
.global-nav > a:not(.header-cta)::after { bottom: 2px; height: 1px; background: var(--editorial-aqua); }
.global-nav > a.nav-estimate, .global-nav > a.nav-contact { padding: 13px 23px; border: 0; border-radius: 999px; color: #fff; box-shadow: none; transition: background .2s, transform .2s; }
.global-nav > a.nav-estimate { background: #247f84; }
.global-nav > a.nav-contact { background: #ca4b08; }
.global-nav > a.nav-estimate:hover { background: #186c72; transform: translateY(-2px); }
.global-nav > a.nav-contact:hover { background: #b23b00; transform: translateY(-2px); }
.global-nav > a.nav-estimate::after, .global-nav > a.nav-contact::after { display: none; }
.menu-button { border: 0; border-radius: 0; }

.hero-editorial { position: relative; isolation: isolate; overflow: hidden; color: var(--editorial-white); background: var(--editorial-ink); }
.editorial-art { position: absolute; z-index: -2; inset: 60px -4% 0 10%; overflow: hidden; }
.editorial-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; transform-origin: 70% 55%; animation: editorial-camera 22s ease-in-out infinite alternate; }
.editorial-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #071724 0%, rgba(7,23,36,.88) 18%, rgba(7,23,36,.30) 42%, transparent 70%), linear-gradient(0deg, #071724 0%, rgba(7,23,36,.86) 14%, transparent 45%, transparent 87%, #071724 100%); }
.editorial-inner { width: min(1450px, calc(100% - 128px)); margin-inline: auto; padding: 151px 0 44px; }
.editorial-copy { width: 65%; max-width: 780px; }
.editorial-copy h1 { margin: 0; font-size: 23px; font-weight: 700; line-height: 1.5; letter-spacing: .025em; }
.editorial-copy h1 small { display: block; margin-top: 5px; color: #bccbd3; font-size: 14px; font-weight: 500; letter-spacing: .035em; }
.editorial-catch { margin: 28px 0 24px; font-size: clamp(48px, 4.65vw, 78px); font-weight: 650; letter-spacing: -.045em; line-height: 1.2; }
.editorial-catch > span { display: block; white-space: nowrap; }
.editorial-catch em { color: var(--editorial-aqua); font-style: normal; }
.editorial-lead { margin: 0; color: #d9e1e5; font-size: 17px; font-weight: 400; line-height: 1.9; letter-spacing: .025em; }
.mobile-break { display: none; }
.editorial-actions { margin-top: 29px; display: flex; align-items: center; gap: 28px; }
.editorial-cta { position: relative; display: inline-flex; justify-content: space-between; align-items: center; gap: 37px; min-height: 62px; overflow: hidden; padding: 9px 10px 9px 27px; color: #071724; background: #f5f5ef; border: 1px solid #f5f5ef; border-radius: 999px; font-size: 17px; font-weight: 700; transition: color .25s, background .25s, box-shadow .25s; }
.editorial-cta:hover { background: #a5e9e1; box-shadow: 0 0 35px rgba(140,221,213,.16); }
.editorial-cta.shine::after { background: linear-gradient(90deg, transparent, rgba(73,152,150,.28), transparent); animation-duration: 7s; }
.cta-circle { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #f7faf9; background: #10313c; font-size: 23px; font-weight: 400; }
.editorial-plan { padding: 10px 0; display: flex; align-items: center; gap: 22px; border-bottom: 1px solid rgba(255,255,255,.5); color: #f2f5f6; font-size: 15px; }
.editorial-plan span { font-size: 20px; transition: transform .2s; }
.editorial-plan:hover span { transform: translate(3px,-3px); }
.editorial-response { margin: 17px 0 0; color: #afc1cb; font-size: 12px; line-height: 1.8; }
.editorial-fields { position: relative; margin-top: 55px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(210,228,230,.3); }
.editorial-fields > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 3px 23px; padding: 25px 35px 0 0; }
.editorial-fields > div + div { padding-left: 34px; }
.field-name { grid-row: 1 / 3; font-family: Arial, sans-serif; font-size: 33px; line-height: 1.5; font-weight: 400; letter-spacing: -.04em; color: #99d7d5; }
.editorial-fields p { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: .015em; }
.field-detail { font-size: 13px; color: #b5c6d0; }
.motion-toggle { position: absolute; top: 123px; right: 35px; z-index: 4; padding: 7px 12px; display: flex; align-items: center; gap: 8px; color: #c4d1d7; background: rgba(7,23,36,.48); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; cursor: pointer; font-size: 12px; }
.motion-toggle:hover { color: #fff; border-color: #8cddd5; }
@keyframes editorial-camera { from { transform: scale(1); } to { transform: scale(1.055); } }
html[data-motion-paused="true"] .editorial-art img, html[data-motion-paused="true"] .shine::after { animation-play-state: paused; }

/* The campaign follows the hero as an open editorial section, rather than a floating card. */
.diagnosis-wrap { margin-top: 0; padding: 62px 0; background: #f3f6f6; }
.diagnosis-card { padding: 34px 0 0; gap: 64px; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.diagnosis-card::after { display: none; }
.diagnosis-badge { top: -20px; left: 0; right: auto; gap: 9px; border-radius: 0; font-size: 14px; }
.diagnosis-badge span, .diagnosis-badge strong, .diagnosis-badge b { padding: 2px 10px; color: #17414b; background: transparent; border-right: 1px solid #acbfc2; }
.diagnosis-badge span { padding-left: 0; }.diagnosis-badge b { border: 0; color: #a94713; }
.diagnosis-copy .section-label { display: none; }
.diagnosis-copy h2 { font-size: clamp(27px, 2.6vw, 39px); font-weight: 700; letter-spacing: -.03em; }
.diagnosis-copy h2 span { color: #195a65; }
.diagnosis-copy li { padding: 3px 14px 3px 0; border: 0; border-radius: 0; color: #4a6570; background: transparent; font-size: 14px; font-weight: 500; }
.diagnosis-action { padding: 0 0 0 35px; border: 0; border-left: 1px solid #c2d1d3; border-radius: 0; background: transparent; }
.diagnosis-action p > strong { color: #153c49; }
.diagnosis-action p > span, .diagnosis-action p > small { font-size: 14px; }
.diagnosis-action .button { color: #fff; background: #143e49; box-shadow: none; border-radius: 999px; }
.diagnosis-action .button b { color: #173b46; background: #eff7f7; }
.site-footer { background: var(--editorial-ink); }
.footer-grid nav a { font-size: 14px; }

@media (min-width: 1481px) {
  .global-nav { position: static; display: flex; flex-direction: row; align-items: center; padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
  .menu-button { display: none; }
}
@media (max-width: 1480px) {
  .site-header { height: 84px; }
  .header-inner { width: calc(100% - 48px); }
  .menu-button { display: block; }
  .global-nav { position: fixed; inset: 84px 20px auto; display: none; flex-direction: column; align-items: stretch; padding: 22px; gap: 4px; background: #0c2634; border: 1px solid #32505d; border-radius: 3px; box-shadow: 0 25px 45px rgba(0,0,0,.2); max-height: calc(100dvh - 104px); overflow-y: auto; }
  .global-nav.is-open { display: flex; }
  .global-nav > a:not(.header-cta) { color: #f4f6f6; padding: 10px 12px; }
  .global-nav > a.nav-estimate, .global-nav > a.nav-contact { padding: 12px 20px; margin-top: 8px; }
  .editorial-inner { width: calc(100% - 80px); padding-top: 135px; }
  .editorial-copy { width: 73%; }
  .editorial-catch { font-size: 5.2vw; }
  .editorial-art { left: 2%; }
  .editorial-fields > div, .editorial-fields > div + div { padding-right: 15px; padding-left: 18px; gap: 3px 13px; }
  .editorial-fields > div:first-child { padding-left: 0; }
  .editorial-fields p { font-size: 17px; }
  .field-name { font-size: 29px; }
  .field-detail { font-size: 12px; }
  .motion-toggle { top: 108px; right: 24px; }
}
@media (max-width: 900px) {
  .editorial-copy { width: 90%; }
  .editorial-art { inset: 150px -35% 115px 0; opacity: .75; }
  .editorial-art::after { background: linear-gradient(90deg, #071724, rgba(7,23,36,.8) 20%, transparent 90%), linear-gradient(0deg,#071724,transparent 35%,transparent 70%,#071724); }
  .editorial-catch { font-size: 6.8vw; }
  .editorial-fields > div { display: block; }
  .editorial-fields p { margin: 5px 0; }
  .field-detail { font-size: 12px; }
  .diagnosis-card { grid-template-columns: 1fr; gap: 30px; }
  .diagnosis-action { padding: 24px 0 0; border-left: 0; border-top: 1px solid #c2d1d3; }
  .diagnosis-action .button { width: auto; min-width: 300px; }
}
@media (max-width: 600px) {
  section[id] { scroll-margin-top: 84px; }
  .site-header { height: 74px; }
  .header-inner { width: calc(100% - 40px); }
  .brand { transform: scale(.83); transform-origin: left center; min-width: 108px; }
  .brand-footer { transform: none; }
  .global-nav { top: 74px; max-height: calc(100dvh - 94px); }
  .editorial-inner { width: calc(100% - 44px); padding: 120px 0 32px; }
  .editorial-copy { width: 100%; }
  .editorial-copy h1 { font-size: 20px; }
  .editorial-copy h1 small { margin-top: 7px; font-size: 12px; letter-spacing: 0; }
  .editorial-catch { margin-top: 30px; font-size: clamp(33px, 8.1vw, 49px); line-height: 1.32; font-weight: 650; letter-spacing: -.035em; }
  .editorial-catch > span:last-child { margin-top: 1px; }
  .editorial-lead { max-width: 380px; font-size: 15px; line-height: 1.9; letter-spacing: 0; }
  .mobile-break { display: inline; }
  .editorial-art { inset: 155px -69% 170px -21%; opacity: .64; }
  .editorial-art img { object-position: 65% 50%; }
  .editorial-art::after { background: linear-gradient(90deg, #071724 6%,rgba(7,23,36,.91) 31%,rgba(7,23,36,.3) 63%,transparent),linear-gradient(0deg,#071724,transparent 30%,transparent 67%,#071724); }
  .editorial-actions { margin-top: 30px; gap: 17px; align-items: flex-start; flex-direction: column; }
  .editorial-cta { min-height: 58px; padding-left: 23px; gap: 24px; font-size: 16px; }
  .cta-circle { width: 38px; height: 38px; }
  .editorial-plan { gap: 35px; padding: 4px 0 9px; font-size: 14px; }
  .editorial-response { max-width: 290px; margin-top: 17px; color: #bfced5; font-size: 12px; }
  .editorial-fields { margin-top: 39px; grid-template-columns: 1fr; }
  .editorial-fields > div, .editorial-fields > div + div { display: grid; grid-template-columns: 84px 1fr; gap: 1px 14px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .editorial-fields > div:last-child { padding-bottom: 0; border-bottom: 0; }
  .field-name { grid-row: 1 / 3; font-size: 30px; align-self: center; }
  .editorial-fields p { margin: 0; font-size: 17px; }
  .field-detail { font-size: 12px; }
  .motion-toggle { top: 87px; right: 20px; padding: 3px 7px; font-size: 12px; border: 0; }
  .diagnosis-wrap { padding: 56px 0 40px; }
  .diagnosis-card { padding-top: 30px; }
  .diagnosis-badge { gap: 3px; font-size: 13px; }
  .diagnosis-copy h2 { font-size: 26px; }
  .diagnosis-copy > p:not(.section-label) { font-size: 16px; }
  .diagnosis-action .button { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .editorial-art img, .shine::after { animation: none !important; }
  .motion-toggle { display: none; }
}
