:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-state: cubic-bezier(.2, .7, .2, 1);
  --motion-press: 100ms;
  --motion-control: 180ms;
  --motion-surface: 320ms;
  --motion-reveal: 520ms;
}
html { scrollbar-gutter: stable; }
[hidden] { display: none !important; }
[tabindex="-1"]:focus { outline: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 5px; }
.contact a:focus-visible, .contact button:focus-visible { outline-color: var(--blue-deep); outline-offset: 5px; }
.button {
  --hover-fill: #085b7e;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translateY(0) scale(1);
  transition: transform var(--motion-press) var(--ease-out), border-color var(--motion-control) var(--ease-state), background-color var(--motion-control) var(--ease-state);
}
.button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: var(--hover-fill);
  opacity: 0;
  transition: opacity 220ms var(--ease-state);
}
.button.secondary, .media-story .button { --hover-fill: #e5f5fa; }
.contact .button { --hover-fill: #085b7e; }
.contact .button.secondary { --hover-fill: #e5f5fa; }
.creator-cta .button, #contact-creator .button {
  background: var(--orange);
  color: var(--orange-text);
  --hover-fill: var(--orange-hover);
}
.button-label { position: relative; display: block; overflow: hidden; pointer-events: none; }
.button-text { display: block; }
.button-arrow { display: block; width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform 240ms var(--ease-out); }
.button:focus-visible::before { opacity: 1; }
.button:active { transform: translateY(0) scale(.99); transition-duration: var(--motion-press); }
.button:active::before { opacity: 1; transition-duration: var(--motion-press); }
.button:disabled, .button[aria-disabled="true"] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.site-header { transition: box-shadow 280ms var(--ease-state), background-color 280ms var(--ease-state), border-color 280ms var(--ease-state); }
.site-header.scrolled { background: #f2fafcf7; border-color: #d9e8ed; box-shadow: 0 4px 20px #12374708; }
.brand { display: inline-block; transition: opacity var(--motion-control) ease, transform var(--motion-control) var(--ease-out); }
.brand:active { transform: scale(.97); }
.desktop-nav > a:not(.button)::after { transition: transform 240ms var(--ease-out); }
.desktop-nav > a[aria-current="location"]:not(.button), .mobile-nav a[aria-current="location"] { color: var(--blue); }
.desktop-nav > a[aria-current="location"]:not(.button)::after, .desktop-nav > a:not(.button):focus-visible::after { transform: scaleX(1); }
.mobile-nav a[aria-current="location"] { background: #def1f7; box-shadow:inset 3px 0 0 var(--blue); }
.desktop-nav>.button[aria-current="location"] { background:var(--blue-deep); box-shadow:0 0 0 3px #c9e5ef; }
.handle, .footer-links a, .contact .other a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 240ms var(--ease-out), color var(--motion-control) ease;
}
.footer-links a, .contact .other a { width: fit-content; }
.handle { border: 0; background-size: 100% 1px; background-image: linear-gradient(#94bbcc, #94bbcc); }
.footer-links a:focus-visible, .contact .other a:focus-visible { background-size: 100% 1px; }
.media-profile { display: block; color: inherit; transition: border-color 220ms ease, box-shadow 260ms ease, transform 260ms var(--ease-out); }
.media-profile:focus-visible { border-color: #90c8db; }
.media-profile:active { transform: translateY(-1px); }
.hero-line { display: block; }
.hero-line > span { display: inline-block; }
.reveal-pending { opacity: 0; translate: 0 8px; }
.reveal-pending.is-revealed {
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--motion-reveal) var(--ease-out), translate var(--motion-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-pending.reveal-instant { opacity: 1; translate: none; transition: none; }
.media-profile.reveal-pending.is-revealed { transition: border-color 220ms ease, box-shadow 260ms ease, transform 260ms var(--ease-out), opacity var(--motion-reveal) var(--ease-out), translate var(--motion-reveal) var(--ease-out); }
.media-profile.reveal-pending.reveal-instant { transition: border-color 220ms ease, box-shadow 260ms ease, transform 260ms var(--ease-out); }
.menu-button { border-radius: 12px; transition: background-color var(--motion-control) ease, transform var(--motion-press) var(--ease-out); }
.menu-button:active { transform: scale(.98); }
.menu-icon { width: 22px; height: 22px; position: relative; display: block; }
.menu-icon > span { position: absolute; left: 2px; right: 2px; top: 10px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 240ms var(--ease-out), opacity 120ms linear; }
.menu-icon > span:nth-child(1) { transform: translateY(-6px); }
.menu-icon > span:nth-child(3) { transform: translateY(6px); }
.menu-button[aria-expanded="true"] .menu-icon > span:nth-child(1) { transform: rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-icon > span:nth-child(2) { transform: scaleX(.2); opacity: 0; }
.menu-button[aria-expanded="true"] .menu-icon > span:nth-child(3) { transform: rotate(-45deg); }
.menu-backdrop { position: fixed; inset: 0; z-index: 45; background: #18333f30; backdrop-filter: blur(3px); touch-action: none; }
@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):not([aria-disabled="true"]):hover .button-arrow { transform: translateX(3px); }
  .button:not(:disabled):not([aria-disabled="true"]):hover::before { opacity: 1; }
  .button:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(0) scale(.99); }
  .brand:hover { opacity: .8; }
  .desktop-nav > a:not(.button):hover::after { transform: scaleX(1); }
  .footer-links a:hover { color: var(--blue); background-size: 100% 1px; }
  .contact .other a:hover { background-size: 100% 1px; }
  .media-profile:hover { border-color: #98c7d9; box-shadow: var(--shadow-hover); transform: translateY(-3px); }
  .media-profile:hover .button-arrow { transform: translate(2px, -2px); }
  .media-profile:hover .handle { color: var(--blue-deep); background-image: linear-gradient(var(--blue-deep), var(--blue-deep)); }
  .media-profile:active { transform: translateY(-1px); }
  .menu-button:hover { background: #dceff6; }
  .mobile-nav a:hover { background: #e2f3f8; color: var(--blue-deep); }
}
@media (max-width: 1024px) {
  .mobile-nav { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - var(--header) - 12px); overflow-y: auto; overscroll-behavior: contain; border-radius: 0 0 24px 24px; padding: 14px 20px 24px; box-shadow: 0 18px 25px #18333f0d; transform-origin: top center; }
  .mobile-nav:not([hidden]) { display: block; }
  .mobile-nav a { padding: 12px 16px; border-radius: 12px; transition: color var(--motion-control) ease, background-color var(--motion-control) ease; }
  .site-header.menu-open { background: #eef9fc; }
  .site-header.menu-open .header-inner { border-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button, .button:hover, .button:active, .brand, .brand:active, .media-profile, .media-profile:hover, .media-profile:active, .button-arrow, .menu-button:active { transform: none !important; }
  .button-text { transform: none !important; opacity: 1 !important; }
  .button::before { transform: none; opacity: 0; }
  .button:hover::before, .button:focus-visible::before, .button:active::before { opacity: 1; }
  .reveal-pending, .reveal-pending.is-revealed { opacity: 1; translate: none; }
}

/* Quiet, consistent feedback for touch and keyboard interactions. */
.directory-routes a:focus-visible { border-color:var(--blue); background:var(--pale); }
.directory-routes .directory-creator:focus-visible { border-color:var(--orange-ink); background:var(--orange-pale); }
.directory-routes a:active { background:var(--pale); border-color:var(--detail); }
.directory-routes .directory-creator:active { background:var(--orange-pale); border-color:#dfbca4; }
.text-link:active,.breadcrumbs a:active,.footer-links a:active,.email-address:active { color:var(--blue-deep); text-decoration:underline; text-underline-offset:4px; }

.mobile-contact:active { background:var(--blue-deep); }
::selection { background:#cbeaf3; color:var(--ink); }

/* Native cross-page transition; unsupported browsers retain normal links. */
@media (prefers-reduced-motion:no-preference) {
  @view-transition { navigation:auto; }
  .site-header { view-transition-name:site-header; }
  ::view-transition { pointer-events:none; }
  ::view-transition-group(site-header) { animation:none; z-index:1; }
  ::view-transition-old(site-header) { display:none; }
  ::view-transition-new(site-header) { animation:none; }
  ::view-transition-old(root) { animation:page-leave 120ms ease-out both; }
  ::view-transition-new(root) { animation:page-enter 180ms ease-out both; }
}
@keyframes page-leave { to { opacity:0; } }
@keyframes page-enter { from { opacity:0; } to { opacity:1; } }

/* Off-screen content must remain readable in print and PDF output. */
@media print {
  .reveal-pending { opacity:1 !important; translate:none !important; transition:none !important; }
}

/* Touch scrolling should never pass through temporarily invisible content. */
@media (max-width:1024px), (pointer:coarse) {
  .reveal-pending { opacity:1; translate:none; transition:none; }
  .mobile-menu-company a { font-size:.8125rem; min-height:44px; }
  .mobile-menu-services a { margin-bottom:4px; border:1px solid transparent; }
  .mobile-menu-services a[aria-current] { border-color:#b4d5e2; }
}