/* Quiet depth and interaction. Content and native telephone links stay available. */
:root {
  --page-progress: 0;
  --immersive-edge: #b8795266;
  --immersive-shadow: #071c2c14;
}

/* A thin, non-interactive indicator of reading position. */
.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 150;
  background: transparent;
  pointer-events: none;
}
.reading-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #b87952, #e7b58b);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: 100% 50%;
}
.site-header {
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.site-header.is-scrolled {
  background: #071c2cf5;
  box-shadow: 0 7px 22px #071c2c22;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* The existing green emblem remains the focal point of the navy panel. */
.hero-brand-panel {
  border-color: #d0a47d4d;
  background:
    radial-gradient(ellipse at 45% 24%, #b8795216, transparent 66%),
    linear-gradient(145deg, #ffffff06, #ffffff01 65%);
  box-shadow: inset 0 1px 0 #e7b58b12, inset 0 -1px 0 #00000024, 0 20px 38px #00000014;
}
.hero-brand-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid #e7b58b0c;
  border-radius: 12px;
  pointer-events: none;
}
.hero-brand-panel::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 1px;
  background:
    linear-gradient(#e7b58b66, #e7b58b66) right top / 20px 1px no-repeat,
    linear-gradient(#e7b58b66, #e7b58b66) right top / 1px 20px no-repeat,
    linear-gradient(#e7b58b33, #e7b58b33) left bottom / 20px 1px no-repeat,
    linear-gradient(#e7b58b33, #e7b58b33) left bottom / 1px 20px no-repeat;
  pointer-events: none;
}
.hero-brand-panel .brand-orbit {
  border-color: #d2a4783d;
  box-shadow: inset 0 0 0 1px #071c2c33;
}
.hero-brand-panel .brand-orbit::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid #e7b58b0d;
  border-radius: 50%;
  pointer-events: none;
}
.hero-brand-panel .brand-orbit::after { border-color: #d2a47822; }
.hero-brand-panel .emblem { filter: drop-shadow(0 10px 17px #0000002e); }
.hero-brand-panel .brand-caption { text-shadow: 0 2px 14px #00000025; }

/* A local pointer highlight is decorative, never a reveal condition. */
.service-card, .service-path, .scenario-card, .detail-panel {
  position: relative;
  isolation: isolate;
}
.service-card::after, .service-path::after,
.scenario-card::after, .detail-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(230px circle at var(--spot-x, 50%) var(--spot-y, 0%), #dca67512, transparent 75%);
  opacity: 0;
  transition: opacity 160ms ease;
}
.ambient-card:not(.hero-brand-panel)::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 23px;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #b8795240, #b87952);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.ambient-card.is-in-view:not(.hero-brand-panel)::before { opacity: 1; }
.service-card:focus-within, .scenario-card:focus-within, .detail-panel:focus-within {
  border-color: #bb8760;
  box-shadow: 0 8px 22px #071c2c09;
}
.service-path:focus-visible { border-color: #bb8760; }
.service-card:focus-within::after, .service-path:focus-visible::after,
.scenario-card:focus-within::after, .detail-panel:focus-within::after { opacity: 1; }

/* One persistent, immediate telephone action in a branded capsule. */
.floating-contact.immersive-call {
  --call-edge: #c9976d;
  width: 244px;
  min-height: 78px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 10px;
  bottom: 24px;
  left: 24px;
  border: 1px solid #c9976d9e;
  border-radius: 48px;
  color: #f8f0e7;
  background: linear-gradient(145deg, #173247, #071c2c 60%, #0d2536);
  box-shadow: inset 0 1px 0 #e7b58b24, inset 0 -1px 0 #00000042, 0 10px 26px #071c2c26;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
  isolation: isolate;
  text-align: start;
  line-height: 1.6;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.floating-contact.immersive-call::before {
  content: "";
  position: absolute;
  top: -90%;
  bottom: -90%;
  left: -80%;
  width: 42%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, #fff2, transparent);
  transform: translateX(0) rotate(24deg);
  pointer-events: none;
}
.floating-contact.immersive-call::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid #e7b58b14;
  border-radius: inherit;
  pointer-events: none;
}
.floating-contact.immersive-call .call-brand-orbit {
  position: relative;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.floating-contact.immersive-call .call-progress {
  position: absolute;
  inset: 0;
  width: 58px;
  height: 58px;
  max-width: none;
  overflow: visible;
  transform: rotate(-90deg);
  fill: none;
  stroke-width: 1.4;
  pointer-events: none;
}
.floating-contact.immersive-call .call-progress-track { stroke: #d8b18c35; }
.floating-contact.immersive-call .call-progress-value {
  stroke: var(--copper-light, #e7b58b);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--page-progress, 0) * 100);
}
.floating-contact.immersive-call .call-brand-orbit img {
  width: 32px;
  height: 32px;
  display: block;
  max-width: none;
  object-fit: contain;
  filter: none;
}
.floating-contact.immersive-call .call-copy {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  color: #f8f0e7;
}
.floating-contact.immersive-call .call-copy [data-contact-label] {
  display: block;
  color: #f8f0e7;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}
.floating-contact.immersive-call .call-number {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .65px;
  color: #d6b496;
  line-height: 1.6;
  white-space: nowrap;
}
.floating-contact.immersive-call .call-phone-badge {
  width: 36px;
  height: 36px;
  border: 1px solid #f1d0b26b;
  border-radius: 50%;
  background: linear-gradient(145deg, #e7b58b, #bd8057);
  box-shadow: inset 0 1px 0 #fff4, 0 3px 8px #0002;
  color: #071c2c;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  font-size: inherit;
}
.floating-contact.immersive-call .call-phone-badge .floating-phone {
  display: block;
  width: 17px;
  height: 17px;
  margin: 0;
  color: #071c2c;
  stroke: currentColor;
  flex-shrink: 0;
}
.floating-contact.immersive-call:focus-visible {
  outline: 3px solid #b87952;
  outline-offset: 5px;
  border-color: #e7b58b;
}
.floating-contact.immersive-call:active {
  border-color: #f2ca9e;
  box-shadow: inset 0 2px 8px #0005, 0 5px 16px #071c2c22;
}
.floating-contact.immersive-call:active .call-phone-badge { box-shadow: inset 0 2px 3px #071c2c33; }

/* The page compass is supplemental; every section remains reachable normally. */
.section-compass {
  position: fixed;
  top: 50%;
  right: 8px;
  z-index: 22;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  width: 42px;
  padding: 8px 4px;
  border: 1px solid #b879524d;
  border-radius: 28px;
  background: #071c2ced;
  box-shadow: 0 5px 20px #071c2c16;
  transform: translateY(-50%);
}
.section-compass a[data-scroll-target] {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 34px;
  min-width: 0;
  border-radius: 50%;
  color: #e7b58b;
}
.section-compass a[data-scroll-target]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid #e7b58b85;
  background: transparent;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.section-compass a[data-scroll-target] > span { display: none; }
.section-compass a[data-scroll-target][aria-current="location"]::before,
.section-compass a[data-scroll-target].is-active::before {
  background: #e7b58b;
  box-shadow: 0 0 0 4px #e7b58b17;
}
.section-compass a[data-scroll-target]::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  padding: 7px 12px;
  border: 1px solid #b8795266;
  border-radius: 6px;
  background: #071c2c;
  color: #f7f3ec;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  white-space: nowrap;
  transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
.section-compass a[data-scroll-target]:hover::after,
.section-compass a[data-scroll-target]:focus-visible::after { opacity: 1; visibility: visible; }
.section-compass a[data-scroll-target]:hover::before { background: #e7b58b88; }
.section-compass a[data-scroll-target]:focus-visible { outline: 2px solid #e7b58b; outline-offset: 0; }

/* Existing step markers change emphasis without moving any field or button. */
.request-steps li { position: relative; transition: color 180ms ease, border-color 180ms ease; }
.request-steps li::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, #b87952, #e7b58b);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.request-steps li.active::after, .request-steps li[aria-current="step"]::after { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .hero-brand-panel {
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-origin: 50% 50%;
    transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
  }
  .hero-brand-panel:hover {
    border-color: #d0a47d70;
    box-shadow: inset 0 1px 0 #e7b58b19, inset 0 -1px 0 #00000024, 0 23px 40px #0000001c;
  }
  .service-card:hover, .service-path:hover, .scenario-card:hover, .detail-panel:hover {
    border-color: #c08e66;
    box-shadow: 0 9px 24px #071c2c0c, inset 0 1px 0 #e7b58b12;
  }
  .service-card:hover::after, .service-path:hover::after,
  .scenario-card:hover::after, .detail-panel:hover::after { opacity: 1; }
  .floating-contact.immersive-call:hover {
    border-color: #edbb8d;
    box-shadow: inset 0 1px 0 #e7b58b38, 0 12px 29px #071c2c30;
    background: linear-gradient(145deg, #1d3b51, #0a2132 60%, #102b3c);
  }
  .floating-contact.immersive-call:hover::before { animation: shater-call-shimmer 650ms ease-out 1; }
}
@keyframes shater-call-shimmer {
  from { transform: translateX(0) rotate(24deg); }
  to { transform: translateX(540%) rotate(24deg); }
}

@media (max-width: 1050px) {
  .section-compass { display: none; }
}

@media (max-width: 650px) {
  .hero-brand-panel { box-shadow: inset 0 1px 0 #e7b58b12, 0 10px 24px #00000012; }
  .hero-brand-panel::before { inset: 5px; border-radius: 7px; }
  .hero-brand-panel::after { inset: 12px; background-size: 13px 1px, 1px 13px, 13px 1px, 1px 13px; }
  .floating-contact.immersive-call {
    width: 190px;
    min-height: 62px;
    grid-template-columns: 44px minmax(0, 1fr) 30px;
    gap: 8px;
    padding: 8px 10px 8px 8px;
    left: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    border-radius: 38px;
    box-shadow: inset 0 1px 0 #e7b58b22, 0 7px 20px #071c2c26;
  }
  .has-mobile-bar .floating-contact.immersive-call { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  .floating-contact.immersive-call .call-brand-orbit,
  .floating-contact.immersive-call .call-progress { width: 44px; height: 44px; }
  .floating-contact.immersive-call .call-brand-orbit img { width: 26px; height: 26px; }
  .floating-contact.immersive-call .call-copy { gap: 1px; }
  .floating-contact.immersive-call .call-copy [data-contact-label] { font-size: 12px; }
  .floating-contact.immersive-call .call-number { font-size: 11px; letter-spacing: .45px; }
  .floating-contact.immersive-call .call-phone-badge { width: 30px; height: 30px; }
  .floating-contact.immersive-call .call-phone-badge .floating-phone { width: 15px; height: 15px; }
  .floating-contact.immersive-call:focus-visible { outline-offset: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-brand-panel { transform: none !important; }
  .hero-brand-panel, .service-card, .service-path, .scenario-card, .detail-panel,
  .floating-contact.immersive-call, .site-header, .request-steps li,
  .reading-progress > span, .call-progress-value,
  .ambient-card::before, .service-card::after, .service-path::after,
  .scenario-card::after, .detail-panel::after, .request-steps li::after,
  .section-compass a::before, .section-compass a::after {
    animation: none !important;
    transition: none !important;
  }
  .floating-contact.immersive-call::before,
  .floating-contact.immersive-call:hover::before { display: none; animation: none !important; }
}

@media print {
  .reading-progress, .section-compass, .floating-contact.immersive-call { display: none !important; }
  .hero-brand-panel, .service-card, .service-path, .scenario-card, .detail-panel,
  .site-header.is-scrolled { transform: none !important; box-shadow: none; }
  .hero-brand-panel::before, .hero-brand-panel::after,
  .ambient-card::before, .service-card::after, .service-path::after,
  .scenario-card::after, .detail-panel::after { display: none; }
}