/* Spin Sprint product layer — compact, capable, aqua-led. */
@font-face {
  font-family: "Mona Sans VF";
  src: url("assets/fonts/MonaSansVF.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --spin-aqua: #03b2d1;
  --deep-aqua: #087c91;
  --ocean-ink: #0d1f26;
  --aqua-mist: #e8f8fa;
  --cloud-white: #fff;
  --waterline: #d0dfe2;
  --fresh-green: #1f9d77;
  --muted: #596d75;
  --page: #fff;
  --mona: "Mona Sans VF", "Arial", sans-serif;
  --grid-line: rgba(208, 223, 226, .65);
  --shadow: 0 12px 30px rgba(13, 31, 38, .08), 0 2px 6px rgba(13, 31, 38, .06);
  --shadow-hover: 0 20px 48px rgba(13, 31, 38, .16), 0 4px 10px rgba(13, 31, 38, .08);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { background: var(--page); }
body {
  color: var(--ocean-ink);
  background: var(--page);
  font-family: var(--mona);
  font-optical-sizing: auto;
  font-feature-settings: "ss03" on, "ss05" on;
  animation: none;
}

::selection { color: #06262d; background: #98f0f5; }
h1, h2, h3, .wordmark, .button, .header-cta, .eyebrow, .service-number,
.service-card a, .pickup-topline, .availability, .hero-footer, .site-footer > span {
  font-family: var(--mona);
}

.site-header {
  width: min(1280px, calc(100% - 48px));
  height: 76px;
  position: relative;
  gap: 24px;
  border-bottom: 1px solid var(--grid-line);
}
.site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(3,178,209,.85), transparent);
  content: "";
  opacity: .55;
}
.wordmark {
  color: var(--spin-aqua);
  font-size: 25px;
  font-weight: 760;
  letter-spacing: -.09em;
  font-variation-settings: "wght" 760, "wdth" 96, "opsz" 30;
}
.desktop-nav { gap: 27px; }
.desktop-nav a {
  padding: 8px 0;
  color: #455c65;
  font-size: 13px;
  font-weight: 580;
  letter-spacing: -.01em;
}
.desktop-nav a::after { bottom: 1px; height: 1.5px; border-radius: 999px; background: var(--spin-aqua); }
.desktop-nav a:hover { color: var(--ocean-ink); }
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border: 1px solid #078ba5;
  border-radius: 7px;
  color: #fff;
  background: #087c91;
  box-shadow: 0 1px 1px rgba(13,31,38,.08);
  font-size: 13px;
  font-weight: 680;
  letter-spacing: -.01em;
  transition: transform .2s var(--ease-out), background .2s ease, box-shadow .2s ease;
}
.header-cta span { transition: transform .2s var(--ease-out); }
.header-cta:hover { background: #066d80; box-shadow: 0 6px 16px rgba(8,124,145,.22); transform: translateY(-2px); }
.header-cta:hover span { transform: translateX(3px); }

.hero {
  width: min(1280px, calc(100% - 48px));
  min-height: 630px;
  isolation: isolate;
  overflow: hidden;
  display: block;
  margin: 26px auto 0;
  padding: clamp(58px, 7.3vw, 108px) clamp(30px, 7vw, 104px) 82px;
  border: 1px solid #15333c;
  border-radius: 14px;
  background: #0d1f26;
  box-shadow: var(--shadow);
}
.hero::before {
  z-index: -1;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(13,31,38,.99) 0%, rgba(13,31,38,.96) 40%, rgba(13,31,38,.66) 57%, rgba(13,31,38,.14) 100%),
    linear-gradient(180deg, rgba(3,178,209,.16), transparent 38%);
}
.hero::after {
  position: absolute;
  z-index: -1;
  top: -15%;
  right: 8%;
  width: min(46vw, 580px);
  height: min(46vw, 580px);
  border: 1px solid rgba(138,242,247,.20);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(3,178,209,.22) 0%, rgba(3,178,209,.06) 38%, transparent 70%);
  box-shadow: 0 0 0 74px rgba(3,178,209,.035), 0 0 0 148px rgba(3,178,209,.025);
  content: "";
  transform: none;
}
.hero-orbit, .hero-glow { display: none; }
.hero-photo {
  z-index: -2;
  inset: 0 0 0 auto;
  width: min(53%, 680px);
  height: 100%;
  opacity: .85;
  object-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 100%);
  animation: product-image-arrive 1s .12s var(--ease-out) both;
}
.hero-content { max-width: 650px; }
.eyebrow, .hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 17px;
  color: #53dce9;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .035em;
  line-height: 1;
  text-transform: none;
}
.hero-kicker::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #65e5bb;
  box-shadow: 0 0 0 4px rgba(101,229,187,.12);
  content: "";
}
.hero h1 {
  max-width: 680px;
  margin-bottom: 24px;
  color: #fff;
  font-size: clamp(58px, 7.2vw, 97px);
  font-weight: 730;
  letter-spacing: -.077em;
  line-height: .9;
  font-variation-settings: "wght" 730, "wdth" 108, "opsz" 72;
}
.hero h1 span { color: #65e5ef; font-style: normal; }
.hero-copy {
  max-width: 455px;
  color: #b8d3d7;
  font-size: 17px;
  font-weight: 470;
  line-height: 1.55;
}
.hero-actions { gap: 20px; margin-top: 30px; }
.button {
  min-height: 48px;
  padding: 11px 15px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 690;
  letter-spacing: -.01em;
  transition: transform .2s var(--ease-out), background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.button span { transition: transform .2s var(--ease-out); }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(3,178,209,.24); }
.button:hover span { transform: translateX(4px); }
.button-deep { color: #06252c; background: #7ce5ed; border-color: #a5f4f7; }
.button-deep:hover { background: #b5f8fa; }
.text-link { color: #c2f6f8; border-bottom: 1px solid rgba(124,229,237,.55); font-size: 14px; font-weight: 620; }
.text-link:hover { color: #fff; border-color: #fff; }
.text-link span { transition: transform .2s var(--ease-out); }
.text-link:hover span { transform: translateY(3px); }
.pickup-card {
  right: clamp(28px, 4vw, 66px);
  bottom: 66px;
  width: 260px;
  padding: 18px;
  border: 1px solid rgba(186,242,245,.26);
  border-radius: 10px;
  color: #dffeff;
  background: rgba(7,37,45,.75);
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}
.pickup-topline { color: #7ce5ed; font-size: 11px; font-weight: 630; letter-spacing: .02em; text-transform: none; }
.pulse { width: 7px; height: 7px; background: #64e4b4; box-shadow: 0 0 0 4px rgba(100,228,180,.13); }
.pickup-card strong { margin-top: 15px; color: #fff; font-size: 18px; font-weight: 650; letter-spacing: -.04em; line-height: 1.15; }
.pickup-card p { margin: 9px 0 15px; color: #b3d4d7; font-size: 12px; line-height: 1.45; }
.availability { padding-top: 12px; border-top-color: rgba(182,235,237,.2); color: #d6f6f7; font-size: 11px; font-weight: 580; }
.availability i { background: #64e4b4; }
.hero-footer {
  right: clamp(30px, 6vw, 104px);
  bottom: 27px;
  left: clamp(30px, 6vw, 104px);
  color: #92b5b9;
  font-size: 11px;
  font-weight: 560;
  letter-spacing: .01em;
}
.hero-footer-rule { background: rgba(163,225,228,.24); }

.trust-strip {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--grid-line);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: #fff;
  box-shadow: 0 2px 3px rgba(13,31,38,.02);
}
.trust-item { min-height: 108px; padding: 25px 25px; border: 0; border-right: 1px solid var(--grid-line); border-radius: 0; box-shadow: none; }
.trust-item:last-child { border-right: 0; }
.trust-item > span { color: var(--spin-aqua); font-size: 12px; font-weight: 700; letter-spacing: -.01em; }
.trust-item b { color: #172e35; font-size: 14px; font-weight: 680; letter-spacing: -.025em; }
.trust-item p { color: var(--muted); font-size: 13px; }

.section-wrap { width: min(1180px, calc(100% - 48px)); }
.services { padding: 116px 0 0; }
.section-intro { max-width: none; }
.section-heading-row { grid-template-columns: minmax(0, 1fr) 330px; gap: 80px; align-items: end; }
.section-intro .eyebrow { color: var(--deep-aqua); }
.section-heading-row h2, .story-copy h2, .process h2, .pickup-content h2 {
  color: #0d1f26;
  font-size: clamp(39px, 5.2vw, 66px);
  font-weight: 710;
  letter-spacing: -.068em;
  line-height: .93;
  font-variation-settings: "wght" 710, "wdth" 105, "opsz" 54;
}
.section-heading-row > p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 342px; gap: 15px; margin-top: 48px; }
.service-card, .service-card:nth-child(n) {
  grid-column: auto;
  position: relative;
  min-height: 0;
  padding: 22px;
  border: 1px solid #cfdce0;
  border-radius: 12px;
  color: #fff;
  background: #10262e;
  box-shadow: none;
  isolation: isolate;
  transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out), border-color .34s ease;
}
.service-card:nth-child(1) { grid-column: span 2; }
.service-card:nth-child(2) { background: #087c91; }
.service-card:nth-child(5) { background: #e8f8fa; color: #10262e; }
.service-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--pointer-x, 50%) var(--pointer-y, 100%), rgba(126,236,241,.34), transparent 45%);
  content: "";
  opacity: 0;
  transition: opacity .3s ease;
}
.service-card:hover, .service-card:focus-within { z-index: 2; border-color: #77dfe5; box-shadow: var(--shadow-hover); transform: translateY(-5px); }
.service-card:hover::before, .service-card:focus-within::before { opacity: 1; }
.service-card > img { z-index: -3; opacity: .37; filter: saturate(.8) contrast(1.05); transform: scale(1.02); transition: transform .7s var(--ease-out), opacity .45s ease, filter .45s ease; }
.service-card:hover > img { opacity: .49; filter: saturate(1) contrast(1.04); transform: scale(1.08); }
.service-card::after { z-index: -2; border-radius: inherit; background: linear-gradient(180deg, rgba(5,28,35,.10), rgba(5,28,35,.88) 80%); }
.service-card:nth-child(2)::after { background: linear-gradient(180deg, rgba(5,90,108,.18), rgba(3,58,70,.84)); }
.service-card:nth-child(5)::after { background: linear-gradient(180deg, rgba(232,248,250,.25), rgba(232,248,250,.93) 84%); }
.service-card-top { align-items: center; }
.service-number { color: #aef4f6; font-size: 11px; font-weight: 670; letter-spacing: .04em; }
.service-icon { width: 38px; height: 38px; border: 1px solid rgba(207,247,248,.38); border-radius: 8px; color: #aef4f6; background: rgba(7,36,44,.22); }
.service-card:nth-child(5) .service-number { color: #087c91; }.service-card:nth-child(5) .service-icon { color: #087c91; border-color: rgba(8,124,145,.32); background: rgba(255,255,255,.7); }
.service-card .card-kicker { color: #bff7f8; font-size: 11px; font-weight: 590; }.service-card:nth-child(5) .card-kicker { color: var(--deep-aqua); }
.service-card h3 { max-width: 270px; margin-bottom: 10px; color: currentColor; font-family: var(--mona); font-size: clamp(30px, 3vw, 43px); font-weight: 700; letter-spacing: -.06em; line-height: .88; font-variation-settings: "wght" 700, "wdth" 102, "opsz" 40; }
.service-card p { max-width: 260px; margin-bottom: 16px; color: #cce5e7; font-size: 13px; line-height: 1.45; }.service-card:nth-child(5) p { color: #4f6a72; }
.service-card a { display: inline-flex; align-items: center; gap: 7px; color: #aef4f6; font-size: 12px; font-weight: 660; letter-spacing: -.01em; text-transform: none; }
.service-card:nth-child(5) a { color: #087c91; }.service-card a span { transition: transform .23s var(--ease-out); }.service-card:hover a span { transform: translateX(4px); }
.service-card.is-opening { transform: scale(.985); opacity: .7; transition: transform .25s var(--ease-out), opacity .25s ease; }

.editorial-reel { display: none; }
.care-story { width: min(1180px, calc(100% - 48px)); grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 8vw, 112px); align-items: center; margin: 126px auto; }
.story-visual { min-height: 500px; overflow: hidden; border: 1px solid #bcd9dc; border-radius: 12px; background: #0d1f26; box-shadow: var(--shadow); }
.story-visual::before { background: linear-gradient(180deg, transparent 20%, rgba(8,31,38,.83)); }.story-visual::after { display: none; }
.story-photo { animation: none; transition: transform .8s var(--ease-out); }.story-visual:hover .story-photo { transform: scale(1.04); }
.story-visual span { top: auto; right: 25px; bottom: 24px; left: 25px; color: #fff; font-family: var(--mona); font-size: 42px; font-weight: 700; letter-spacing: -.065em; line-height: .88; }
.story-copy .eyebrow, .process .eyebrow { color: var(--deep-aqua); }.story-copy h2 { margin-bottom: 22px; }
.story-copy p { color: var(--muted); font-size: 16px; line-height: 1.6; }.dark-link { color: var(--deep-aqua); border-color: rgba(8,124,145,.45); }
.process { width: min(1180px, calc(100% - 48px)); padding-bottom: 116px; }
.process .section-intro { display: grid; grid-template-columns: 1fr 360px; gap: 80px; align-items: end; }.process .section-intro > h2 { margin-bottom: 0; }.process .section-intro::after { color: var(--muted); content: "Three predictable moments. No chasing updates, no guessing the next step."; font-size: 16px; line-height: 1.55; }
.process-grid { gap: 0; margin-top: 42px; border: 1px solid #cfdce0; border-radius: 12px; overflow: hidden; }
.process-step { min-height: 230px; padding: 25px; border: 0; border-right: 1px solid #cfdce0; border-radius: 0; background: #fff; box-shadow: none; transition: background .25s ease, color .25s ease; }
.process-step:last-child { border-right: 0; }.process-step::after { display: none; }
.process-step > span { color: var(--spin-aqua); font-size: 12px; font-weight: 700; }.process-step h3 { margin: 56px 0 9px; color: #0d1f26; font-size: 25px; font-weight: 680; letter-spacing: -.05em; }.process-step p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.process-step:hover { color: #fff; background: #0d1f26; }.process-step:hover h3 { color: #fff; }.process-step:hover p { color: #b6d0d4; }

.pickup-section { min-height: 500px; padding: 96px 24px; background: #0d1f26; }.pickup-section::before, .pickup-section::after { border-color: rgba(115,231,236,.20); animation: none; }.pickup-section::before { top: -280px; right: -80px; }.pickup-section::after { top: -120px; right: 210px; }
.pickup-content { width: min(1180px, 100%); }.pickup-content .eyebrow { color: #65e5ef; }.pickup-content h2 { color: #fff; }.pickup-content p:not(.eyebrow) { color: #b8d3d7; font-size: 16px; }.button-light { color: #06252c; background: #7ce5ed; border-color: #a5f4f7; }.button-light:hover { color: #06252c; background: #b5f8fa; }
.site-footer { width: min(1180px, calc(100% - 48px)); padding: 34px 0; }.site-footer p, .site-footer > span { color: var(--muted); font-family: var(--mona); }.footer-mark { color: var(--spin-aqua); }

.reveal { transform: translateY(16px); transition: opacity .62s var(--ease-out), transform .62s var(--ease-out); }
@keyframes product-image-arrive { from { opacity: 0; transform: scale(1.06); } to { opacity: .85; transform: scale(1); } }

@media (max-width: 850px) {
  .site-header, .hero, .trust-strip { width: calc(100% - 32px); }.site-header { height: 70px; }.hero { min-height: 655px; padding: 70px 36px 96px; }.hero-photo { width: 62%; opacity: .57; }.pickup-card { right: 30px; bottom: 69px; }.hero-footer { right: 36px; left: 36px; }.section-wrap, .care-story, .process, .site-footer { width: calc(100% - 48px); }.section-heading-row { gap: 42px; }.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 330px; }.service-card:nth-child(1) { grid-column: span 1; }.care-story { grid-template-columns: 1fr; gap: 48px; }.process .section-intro { grid-template-columns: 1fr 260px; gap: 42px; }.process-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 590px) {
  .site-header { width: calc(100% - 28px); height: 68px; }.wordmark { font-size: 23px; }.header-cta { padding: 9px 10px; font-size: 12px; }.hero { width: calc(100% - 28px); min-height: 710px; margin-top: 14px; padding: 62px 24px 132px; border-radius: 12px; }.hero::before { background: linear-gradient(180deg, rgba(13,31,38,.97) 0%, rgba(13,31,38,.9) 52%, rgba(13,31,38,.54) 100%); }.hero-photo { top: auto; width: 100%; height: 50%; opacity: .48; -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%); mask-image: linear-gradient(180deg, transparent, #000 34%); }.hero h1 { font-size: clamp(53px, 15vw, 72px); }.hero-copy { max-width: 340px; font-size: 15px; }.hero-actions { gap: 16px; margin-top: 25px; }.pickup-card { right: 24px; bottom: 70px; width: min(264px, calc(100% - 48px)); padding: 15px; }.pickup-card strong { font-size: 16px; }.hero-footer { right: 24px; bottom: 24px; left: 24px; justify-content: flex-start; gap: 8px; font-size: 9px; }.hero-footer-rule { width: 20px; }.trust-strip { width: calc(100% - 28px); grid-template-columns: 1fr; border-radius: 0 0 12px 12px; }.trust-item { min-height: auto; padding: 18px; border-right: 0; border-bottom: 1px solid var(--grid-line); }.trust-item:last-child { border-bottom: 0; }.section-wrap, .care-story, .process, .site-footer { width: calc(100% - 32px); }.services { padding-top: 80px; }.section-heading-row { display: block; }.section-heading-row h2 { margin-bottom: 22px; }.section-heading-row > p { font-size: 15px; }.service-grid { grid-template-columns: 1fr; grid-auto-rows: 300px; gap: 10px; margin-top: 34px; }.service-card, .service-card:nth-child(n) { grid-column: auto; padding: 19px; }.service-card h3 { font-size: 37px; }.care-story { margin: 88px auto; }.story-visual { min-height: 390px; }.story-visual span { font-size: 34px; }.process { padding-bottom: 82px; }.process .section-intro { display: block; }.process .section-intro::after { display: block; margin-top: 19px; font-size: 15px; }.process-grid { grid-template-columns: 1fr; margin-top: 30px; }.process-step { min-height: 178px; padding: 21px; border-right: 0; border-bottom: 1px solid #cfdce0; }.process-step:last-child { border-bottom: 0; }.process-step h3 { margin-top: 35px; }.pickup-section { min-height: 410px; padding: 74px 24px; }.site-footer { grid-template-columns: 1fr auto; padding: 28px 0; }
}

@media (prefers-reduced-motion: reduce) { .hero-photo, .story-photo { animation: none; transform: none; } }