/* Main portal only. Desktop styles and service pages remain independent. */
.mobile-company-link,
.mobile-services-heading,
.mobile-contact-bar,
.portal-heading .portal-blueprint-title { display: none; }

@font-face {
  font-family: "KMC Mobile";
  src: url("/fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@media (max-width: 680px) {
  html { color-scheme: light; background: #f8fafc; scroll-padding-bottom: 120px; }
  body { min-width: 0; background: #f8fafc; color: #082d4c; font-family: "KMC Mobile", "Apple SD Gothic Neo", sans-serif; padding-bottom: calc(114px + env(safe-area-inset-bottom)); }
  a:focus-visible { outline: 3px solid #008bc5; outline-offset: 3px; }
  .site-header { padding: 8px 16px 0; min-height: 0; gap: 8px 8px; background: #fff; border: 0; backdrop-filter: none; }
  .brand { flex: 1 1 0; min-width: 0; gap: 8px; }
  .brand-emblem { width: 40px; height: 40px; filter: none; }
  .brand-copy strong { max-width: none; color: #092c51; font-size: clamp(14px, 4.1vw, 20px); font-weight: 800; line-height: 1.3; letter-spacing: -.055em; }
  .brand-copy small { color: #264564; font-size: clamp(6.5px, 1.85vw, 9px); letter-spacing: 0; line-height: 1.25; }
  .mobile-company-link { flex: 0 0 auto; min-height: 44px; display: flex; align-items: center; gap: 8px; color: #092c51; font-size: 14px; font-weight: 750; white-space: nowrap; }
  .mobile-company-link span { font-size: 28px; font-weight: 400; line-height: 1; }
  .header-links { width: calc(100% + 32px); flex: 0 0 calc(100% + 32px); margin: 0 -16px; padding: 8px 16px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; background: #07314f; color: #fff; }
  .header-links a:first-child { display: none; }
  .header-links .header-phone { min-width: 0; padding: 0 12px 0 32px !important; min-height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; border-right: 1px solid #7290a6; }
  .header-phone::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: #93d9f7; mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24c1.1.36 2.27.55 3.47.55A1.13 1.13 0 0 1 21 16.64v3.23A1.13 1.13 0 0 1 19.87 21C10.55 21 3 13.45 3 4.13A1.13 1.13 0 0 1 4.13 3h3.23a1.13 1.13 0 0 1 1.13 1.13c0 1.2.19 2.37.55 3.47a1 1 0 0 1-.24 1z"/%3E%3C/svg%3E') center / contain no-repeat; }
  .header-phone span { display: block; color: #c2d5e3; font-size: 12px; letter-spacing: 0; line-height: 1.25; }
  .header-phone strong { color: #fff; font-size: clamp(19px, 5.1vw, 27px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; white-space: nowrap; }
  .header-links .header-quote { padding: 10px 8px !important; justify-content: center; border: 0; border-radius: 6px; background: #00a9e1; color: #fff; font-size: clamp(12px, 3.4vw, 17px); font-weight: 750; white-space: nowrap; }
  .header-links a::after { display: none; }
  .portal-main { padding: 0 16px 24px; }
  .portal-heading { min-height: clamp(185px, 50vw, 250px); height: auto; margin: 0 -16px; padding: 24px 18px; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; text-align: left; overflow: hidden; isolation: isolate; background: #173a53 url("/hero-grok-cooling-orbit-v136-poster.webp") center / cover no-repeat; }
  .background-media { display: none; }
  .portal-heading .background-media { display: block; position: absolute; z-index: -1; inset: 0; background: #173a53 url('/hero-grok-cooling-orbit-v136-poster.webp') center / cover no-repeat; }
  .background-video { width: 100%; height: 100%; left: 0; object-fit: cover; object-position: center; will-change: auto; }
  .background-overlay { background: linear-gradient(90deg, rgba(2,23,43,.84) 0%, rgba(2,28,51,.68) 32%, rgba(2,28,51,.18) 65%, rgba(2,28,51,.04) 100%); }
  /* Live type and an open structural frame over the existing two-video hero. */
  .portal-heading .portal-desktop-title, .portal-heading > span { display: none; }
  .portal-heading .portal-blueprint-title {
    display: block; position: relative; align-self: flex-start; width: clamp(132px, 36vw, 178px); max-width: 52%;
    margin: 0; padding: 10px 9px 11px; color: #fbfcfd;
    opacity: 1; transform: none; animation: none; text-align: left;
    font-family: "KMC Mobile", "Apple SD Gothic Neo", sans-serif;
    line-height: 1.04; letter-spacing: -.035em; font-style: normal;
  }
  .blueprint-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .blueprint-frame path { fill: none; stroke: #8fd8e8; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .portal-blueprint-title .blueprint-line { display: block; position: relative; white-space: nowrap; }
  .portal-blueprint-title .blueprint-inspect, .portal-blueprint-title .blueprint-build {
    color: #a3e5f2; font-size: clamp(18px, 5.15vw, 24px); font-weight: 300;
    line-height: 1.16; letter-spacing: -.045em;
  }
  .portal-blueprint-title .blueprint-inspect { padding: 0; text-align: left; }
  .portal-blueprint-title .blueprint-build { text-align: left; padding: 0; margin-top: 2px; }
  .portal-blueprint-title .blueprint-result { margin-top: 5px; font-size: clamp(24px, 6.8vw, 33px); font-weight: 800; }
  .portal-blueprint-title .blueprint-proof { margin-top: 2px; font-size: clamp(22px, 6.2vw, 30px); font-weight: 800; }
  .intro-headline, .background-video-toggle { display: none !important; }
  .mobile-services-heading { display: block; margin: 16px 0 10px; color: #082d4c; font-size: 22px; line-height: 1.2; letter-spacing: -.025em; font-weight: 700; }
  .mobile-services-heading::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 9px; background: #00addf; }
  .business-grid { height: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: auto; gap: 12px; }
  .business-card { width: 100%; aspect-ratio: 1.04; min-height: 160px; border: 0; border-radius: 8px; box-shadow: none; opacity: 1; }
  .intro-settled .business-card { animation: none; }
  .business-card::after { background: linear-gradient(180deg, rgba(3,28,48,0) 25%, rgba(3,28,48,.70) 64%, #041e33 100%); }
  .card-link { padding: 14px 12px 12px; -webkit-tap-highlight-color: transparent; }
  .card-copy { width: 100%; }
  .card-copy h2 { font-size: clamp(20px, 5.2vw, 25px); font-weight: 700; line-height: 1.2; letter-spacing: -.05em; white-space: normal; overflow: visible; }
  .card-copy p { min-height: 0; margin: 6px 0 4px; color: #f5f8fb; font-size: 14px; font-weight: 450; line-height: 1.5; letter-spacing: -.025em; white-space: normal; word-break: keep-all; overflow: visible; }
  .card-action { position: relative; width: fit-content; min-height: 34px; padding: 0 0 2px; justify-content: flex-start; gap: 12px; border: 0; border-radius: 0; background: transparent; font-size: 14px; line-height: 20px; font-weight: 450; }
  .card-action::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: #a3e5f2; pointer-events: none; }
  .business-card:hover .card-action, .business-card:focus-within .card-action { background: transparent; }
  .card-action i { width: 7px; }
  .card-action i::before { display: none; }
  .business-card:hover .card-copy, .business-card:focus-within .card-copy { transform: none; }
  .business-card:hover, .business-card:focus-within { box-shadow: none; }
  .business-card:hover .card-frame, .business-card:focus-within .card-frame { transform: none; }
  .business-card:has(.card-link:focus-visible) { outline: 3px solid #008bc5; outline-offset: 3px; }
  .card-frame { will-change: auto; }
  .hero-contact { display: none; }
  .site-footer { color: #556b7d; background: #f8fafc; padding: 16px 16px 24px; }
  .company-info { border-color: #dce5ec; }
  .company-info-brand strong { color: #163a55; }
  .company-info-brand span, .company-info-details, .company-info-details a, .company-info-details small { color: #556b7d; }
  .mobile-contact-bar { position: fixed; z-index: 20; inset: auto 0 0; min-height: calc(82px + env(safe-area-inset-bottom)); padding: 8px 6px calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: 0; border-top: 1px solid #cdd9e3; background: #fff; box-shadow: 0 -3px 14px #052c490a; }
  .mobile-contact-bar > a { min-width: 0; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 0; color: #0b3567; font-size: clamp(11px, 3.05vw, 15px); font-weight: 750; line-height: 1.4; white-space: nowrap; }
  .mobile-contact-bar > a > svg { width: 26px; height: 26px; }
  .mobile-contact-bar > .portal-quote-action { position: relative; justify-self: center; width: clamp(56px, 18vw, 82px); height: clamp(56px, 18vw, 82px); min-height: 0; margin-top: -25px; border-radius: 50%; }
  .portal-quote-disc { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 50%; border: 3px solid #b8ddff; color: #fff; background: linear-gradient(145deg, #1389f5, #0061da); box-shadow: 0 4px 12px #075fac26; }
  .portal-quote-disc svg { width: clamp(25px, 7.7vw, 31px); height: clamp(25px, 7.7vw, 31px); }
  .portal-quote-disc > span { font-size: clamp(11px, 3.3vw, 14px); font-weight: 850; line-height: 1.3; letter-spacing: -.05em; }

}

@media (max-width: 360px) {
  .site-header { padding-inline: 12px; }
  .brand { gap: 5px; }
  .brand-emblem { width: 34px; height: 34px; }
  .brand-copy strong { font-size: 14px; }
  .mobile-company-link { gap: 4px; }
  .header-links { width: calc(100% + 24px); flex-basis: calc(100% + 24px); margin-inline: -12px; padding-inline: 12px; gap: 10px; }
  .header-links .header-phone { padding-left: 25px !important; padding-right: 6px !important; }
  .header-phone::before { width: 20px; height: 20px; }
  .header-phone strong { font-size: 19px; }
  .header-links .header-quote { font-size: 12px; padding-inline: 4px !important; }
  .portal-heading { padding-inline: 16px; }
  .business-grid { gap: 10px; }
  .business-card { min-height: 166px; }
  .card-link { padding-inline: 10px; }
  .card-copy p { font-size: 14px; min-height: 42px; }
}

/* One entrance per page load. Removing the class leaves the final layout intact. */
@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
  .portal-blueprint-title.is-entering .blueprint-frame path { animation: blueprint-frame-draw 400ms ease-out both; }
  .portal-blueprint-title.is-entering .blueprint-inspect { animation: blueprint-intro-reveal 340ms ease-out 280ms both; }
  .portal-blueprint-title.is-entering .blueprint-build { animation: blueprint-intro-reveal 340ms ease-out 340ms both; }
  .portal-blueprint-title.is-entering .blueprint-result { animation: blueprint-result-reveal 400ms cubic-bezier(.22,.61,.36,1) 560ms both; }
  .portal-blueprint-title.is-entering .blueprint-proof { animation: blueprint-result-reveal 400ms cubic-bezier(.22,.61,.36,1) 650ms both; }
}
@keyframes blueprint-frame-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes blueprint-intro-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes blueprint-result-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }