.smf-mobile-menu[hidden] { display: none !important; }
/* Slightly stronger vertical grid, scoped to the hero background only. */
#hero > div[aria-hidden="true"][style*="background-image"] { opacity: .14; }
/* Keep the fixed-nav clearance; remove excess space inside the hero. */
#hero > .container-site { padding-top: 2rem; padding-bottom: 2.5rem; }
/* Keep the outline quotation CTA in the same navy as the primary heading. */
header .header-quote {
  color: #002b4c !important;
  border-color: transparent !important;
  animation: smf-quotation-hatch-flow 2.8s linear infinite;
}
header .header-quote::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  padding: 1px;
  background:
    repeating-linear-gradient(90deg, #002b4c 0 5px, transparent 5px 10px) 0 0 / 14px 1px repeat-x,
    repeating-linear-gradient(180deg, #002b4c 0 5px, transparent 5px 10px) 100% 0 / 1px 14px repeat-y,
    repeating-linear-gradient(270deg, #002b4c 0 5px, transparent 5px 10px) 0 100% / 14px 1px repeat-x,
    repeating-linear-gradient(0deg, #002b4c 0 5px, transparent 5px 10px) 0 0 / 1px 14px repeat-y;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: smf-quotation-dash-flow 1.6s linear infinite;
}
header .header-quote:hover { color: #00b7ee !important; border-color: #00b7ee !important; }
/* The hero emphasis moves through cyan and navy without changing the headline layout. */
#hero .brand-shimmer {
  display: inline-block;
  color: #00b7ee;
  background: linear-gradient(105deg, #00b7ee 0%, #002b4c 28%, #bdf6ff 48%, #00b7ee 64%, #002b4c 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 7px rgba(0, 183, 238, .22));
  animation: smf-continuity-colour 5.8s ease-in-out infinite;
}
@keyframes smf-continuity-colour {
  0%, 100% { background-position: 100% 50%; filter: drop-shadow(0 0 5px rgba(0, 43, 76, .18)); }
  48% { background-position: 0% 50%; filter: drop-shadow(0 0 12px rgba(0, 183, 238, .48)); }
}
/* Primary enquiry actions share the navy used by the quotation CTA. */
#hero a[href="/quotation"],
main form button[type="submit"],
main form input[type="submit"] {
  background: #002b4c !important;
  border-color: #002b4c !important;
  color: #fff !important;
}
#hero a[href="/quotation"]:hover,
main form button[type="submit"]:hover,
main form input[type="submit"]:hover {
  background: #00b7ee !important;
  border-color: #00b7ee !important;
  color: #002b4c !important;
}
/* Fine diagonal cross-lines give the two outlined actions a technical finish. */
header .header-quote,
#hero a[href="/capabilities"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0, 43, 76, .12) 14px 15px) !important;
}
header .header-quote:hover,
#hero a[href="/capabilities"]:hover {
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0, 43, 76, .2) 14px 15px) !important;
}
@keyframes smf-quotation-hatch-flow {
  to { background-position: 20px 0; }
}
@keyframes smf-quotation-dash-flow {
  to { background-position: 14px 0, 100% 14px, -14px 100%, 0 -14px; }
}
@media (prefers-reduced-motion: reduce) {
  #hero .brand-shimmer { animation: none; background-position: 45% 50%; filter: none; }
  header .header-quote, header .header-quote::before { animation: none; }
}

/* Coverage coordinates are factual points; the quiet cyan halo gives each
   documented location a live-system signal without inventing a map outline. */
@media (prefers-reduced-motion: no-preference) {
  .depth-scene svg[aria-label^="Relative positions"] > g:not(:first-child) > circle[fill-opacity] {
    transform-box: fill-box;
    transform-origin: center;
    animation: smf-coverage-pulse 2.8s ease-out infinite;
  }
  .depth-scene svg[aria-label^="Relative positions"] > g:nth-of-type(3) > circle[fill-opacity] { animation-delay: -.35s; }
  .depth-scene svg[aria-label^="Relative positions"] > g:nth-of-type(4) > circle[fill-opacity] { animation-delay: -.7s; }
  .depth-scene svg[aria-label^="Relative positions"] > g:nth-of-type(5) > circle[fill-opacity] { animation-delay: -1.05s; }
  .depth-scene svg[aria-label^="Relative positions"] > g:nth-of-type(6) > circle[fill-opacity] { animation-delay: -1.4s; }
  .depth-scene svg[aria-label^="Relative positions"] > g:nth-of-type(7) > circle[fill-opacity] { animation-delay: -1.75s; }
  .depth-scene svg[aria-label^="Relative positions"] > g:nth-of-type(8) > circle[fill-opacity] { animation-delay: -2.1s; }
  .depth-scene svg[aria-label^="Relative positions"] > g:nth-of-type(9) > circle[fill-opacity] { animation-delay: -2.45s; }
}
@keyframes smf-coverage-pulse {
  0%, 100% { transform: scale(1); opacity: .18; }
  55% { transform: scale(1.8); opacity: .04; }
}
.smf-mobile-menu { position: fixed; z-index: 100; inset: 5rem 0 0; overflow-y: auto; background: var(--background, #f8f4ee); border-top: 1px solid var(--border, #d8cbbd); padding: 1.5rem; }
.smf-mobile-menu nav, .smf-mobile-menu ul { display: flex; flex-direction: column; gap: .5rem; }
.smf-mobile-menu a { display: block; padding: .75rem; }
.smf-form-notice { margin: 1rem 0; padding: 1rem; color: var(--foreground, #002b4c); border: 1px solid var(--primary, #00b7ee); }
@media (min-width: 1024px) { .smf-mobile-menu { display: none !important; } }

/* Browser-side motion for the PHP-hosted copy of the original public design. */
@media (prefers-reduced-motion: no-preference) {
  #hero img[src*="smf-emblem.svg"] {
    animation: smf-emblem-float 5.5s ease-in-out infinite, smf-emblem-signal 4.8s ease-in-out infinite;
    filter: drop-shadow(0 22px 30px rgba(0, 183, 238, .18));
    will-change: transform;
  }
  #hero img[src*="smf-emblem.svg"]:not(:hover) { animation-play-state: running; }
  #hero:has(img[src*="smf-emblem.svg"]) img[src*="smf-emblem.svg"] { transform-origin: center; }
  #hero .smf-emblem-tilt {
    transform: perspective(1000px) rotateX(var(--smf-tilt-x, 0deg)) rotateY(var(--smf-tilt-y, 0deg));
    transition: transform .25s ease-out;
    will-change: transform;
  }
  .capability-art { animation: smf-art-float 6s ease-in-out infinite; }
  .capability-row:nth-child(even) .capability-art { animation-delay: -3s; }
  .smf-reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.75,.2,1); }
  .smf-reveal.smf-in { opacity: 1; transform: translateY(0); }
}
@keyframes smf-emblem-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-22px) rotate(1deg); }
}
@keyframes smf-emblem-signal {
  0%, 100% { filter: drop-shadow(0 22px 30px rgba(15, 157, 196, .12)); }
  48% { filter: drop-shadow(0 18px 28px rgba(15, 157, 196, .42)) drop-shadow(0 0 16px rgba(16, 181, 232, .28)); }
  58% { filter: drop-shadow(0 22px 30px rgba(15, 157, 196, .15)); }
}
@keyframes smf-art-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
/* Flow intro plays once, then the original emblem returns for the calm idle state. */
.smf-hero-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: 0;
  transition: opacity .65s ease;
  pointer-events: none;
}
#hero [data-video-ready="true"] .smf-hero-video { opacity: 1; }
#hero [data-video-ready="true"] img[src*="smf-emblem.svg"] { opacity: 0; }
.smf-hero-video--done { opacity: 0; }

/* The official SVG remains visible while a masked cyan signal travels through it. */
.smf-emblem-live::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .62;
  background: linear-gradient(112deg, transparent 18%, rgba(255,255,255,0) 34%, rgba(236,253,255,.95) 46%, rgba(15,184,235,.86) 51%, rgba(236,253,255,.95) 56%, rgba(255,255,255,0) 68%, transparent 82%);
  background-size: 220% 100%;
  background-position: 140% 0;
  -webkit-mask: url('/brand/smf-emblem.svg') center / contain no-repeat;
  mask: url('/brand/smf-emblem.svg') center / contain no-repeat;
  animation: smf-data-flow 3.8s linear infinite;
}
/* Circuit coordinates come from the official SVG; replace the old surface sweep. */
.smf-emblem-live::after { content: none; }
#hero .smf-emblem-live img[src*="smf-emblem.svg"] {
  animation: smf-emblem-float 5.5s ease-in-out infinite;
  animation-delay: 0s;
}
.smf-circuit-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  animation: smf-emblem-float 5.5s ease-in-out infinite;
  transform-origin: center;
  filter: drop-shadow(0 0 5px #38dfff);
}
@media (prefers-reduced-motion: reduce) {
  .smf-circuit-flow { display: none; animation: none; }
}
@keyframes smf-data-flow {
  from { background-position: 140% 0; }
  to { background-position: -75% 0; }
}

/* The travelling emblem sits beneath the hero copy; buttons stay interactive. */
#hero .smf-hero-copy { position: relative; z-index: 3; }
#hero .smf-intro-running { pointer-events: none; transition: none; transform: none !important; }
#hero .smf-intro-running > img, #hero .smf-intro-pending > img { visibility: hidden; }
#hero .smf-intro-running .smf-circuit-flow { opacity: 0; }
.smf-emblem-fragments { position: absolute; inset: 0; pointer-events: none; }
#hero .smf-emblem-live img.smf-emblem-piece {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  animation: none; filter: drop-shadow(0 8px 12px #009ac522); transition: none;
}
.smf-data-orbit { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .smf-emblem-fragments { display: none; }
  #hero .smf-intro-running > img { visibility: visible; }
}

/* Increase the cyan master logo without changing header height or nav alignment. */
header a[aria-label="SMF Amudcorp home"] img {
  height: 4.4rem !important;
}
@media (min-width: 768px) {
  header a[aria-label="SMF Amudcorp home"] img { height: 5.15rem !important; }
}

/* Capability codes need stronger contrast on the ice-blue index surface. */
#capabilities a[href^="/capabilities#"] > div:first-child > span:first-child {
  color: #087b9f !important;
  font-weight: 700;
}