/* Approved photographic hero and illustrated service wheel. */
.home-hero { background-image: url('assets/hero-approved-v10.png'); background-position: center; background-size: cover; }
.home-hero::before { background: rgba(7, 25, 37, .67); }
.hero-content h1 { text-shadow: 0 2px 18px #061b3040; }
.hero-carousel { --wheel-width: 590px; --wheel-offset: 407px; --wheel-drop: 43px; padding-block: 12px 30px; }
.wheel-stage { height: 443px; }
.wheel-card { height: 400px; border: 1px solid #d9e9e4; border-radius: 23px; background: #f8fbfa; }
.wheel-card[data-slot=center] { box-shadow: 0 25px 60px #061d3459; }
.wheel-card:focus-visible { outline: 3px solid #a6ddd0; outline-offset: 6px; }
.service-art { flex: 0 0 148px; height: 148px; background: #163748; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wheel-commerce .service-art, .wheel-business .service-art { background: #174b53; }
.wheel-care .service-art, .wheel-ads .service-art { background: #234e56; }
.service-art svg { display: block; width: 330px; height: 144px; max-width: 92%; fill: none; }
.art-panel { fill: #ffffff08; stroke: #9bcfc4; stroke-width: 1.5; }
.art-glass { fill: #a6ddd01c; stroke: #a6ddd04d; }
.art-mint { fill: #a6ddd0; }
.art-light { fill: #e6f2ef; }
.art-teal { fill: #416f6c; }
.art-line { stroke: #92b3bb; stroke-width: 3; stroke-linecap: round; }
.art-code { stroke: #d2eee7; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.art-darkline { stroke: #416f6c; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.art-tealline { stroke: #416f6c; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.art-mintline { stroke: #a6ddd0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art-stroke { stroke: #d2eee7; stroke-width: 1.5; }
.art-tealstroke { stroke: #416f6c; stroke-width: 2; }
.art-map { stroke: #a6ddd038; stroke-width: 9; }
.wheel-card-content { padding: 24px 30px 26px; grid-template-columns: 48px minmax(0,1fr); grid-template-rows: auto 1fr auto; gap: 14px; align-content: stretch; }
.wheel-card-content::before { display: none; }
.wheel-icon { height: 48px; width: 48px; background: #e5efeb; color: #416f6c; border-radius: 13px; }
.wheel-icon .service-svg { width: 29px; height: 29px; }
.wheel-card-content h2, .wheel-business h2 { font-size: 26px; line-height: 1.5; color: #163748; margin: 0; }
.wheel-description { color: #455e68; font-size: 16px; line-height: 1.9; align-self: start; margin: 0; }
.wheel-tags { gap: 8px 16px; align-self: end; }
.wheel-tags span { color: #345b59; background: none; padding: 0; border-radius: 0; font-size: 11px; line-height: 1.8; display: inline-flex; align-items: center; gap: 6px; }
.wheel-tags span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #648e84; }

/* clip-path keeps a viewport-fixed photograph inside this scrollable window. */
.closing-cta { position: relative; isolation: isolate; clip-path: inset(0); background: #12353e; padding-block: 108px; }
.closing-cta::before { content: ''; position: fixed; inset: 0; z-index: -2; background: #12353e url('assets/contact-code-v10.png') center / cover no-repeat; pointer-events: none; }
.closing-cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(12, 47, 54, .76); pointer-events: none; }
.closing-cta .container { position: relative; }
.closing-cta h2, .closing-cta p { color: #fff; }
.closing-cta .button { color: #275a59; }
@media(max-width:1100px) {
  .hero-carousel { --wheel-width: 520px; --wheel-offset: 350px; }
  .wheel-card-content { padding-inline: 26px; }
  .wheel-card-content h2, .wheel-business h2 { font-size: 24px; }
}
@media(max-width:850px) {
  .hero-carousel { --wheel-width: 440px; --wheel-offset: 285px; }
  .wheel-card-content { padding: 23px; gap: 13px; }
  .wheel-card-content h2, .wheel-business h2 { font-size: 22px; }
  .wheel-description { font-size: 15px; }
}
@media(max-width:700px) {
  .home-hero { background-position: 65% center; }
  .home-hero::before { background: rgba(7, 25, 37, .73); }
  .hero-carousel { --wheel-width: 360px; --wheel-offset: 220px; --wheel-drop: 33px; }
  .wheel-card { height: 456px; }
  .wheel-stage { height: 495px; }
  .service-art { flex-basis: 134px; height: 134px; }
  .service-art svg { height: 128px; }
  .wheel-card-content { padding: 22px; grid-template-columns: 40px minmax(0,1fr); gap: 12px; }
  .wheel-icon { width: 40px; height: 40px; border-radius: 10px; }
  .wheel-icon .service-svg { width: 26px; height: 26px; }
  .wheel-card-content h2, .wheel-business h2 { font-size: 20px; }
  .wheel-description { font-size: 14px; line-height: 1.9; }
  .wheel-tags { gap: 6px 12px; }
  .wheel-tags span { font-size: 10px; }
  .closing-cta { padding-block: 82px; }
}
@media(max-width:450px) {
  .hero-carousel { --wheel-width: 80vw; --wheel-offset: 49vw; }
  .wheel-card-content { padding: 20px 18px; gap: 12px 9px; }
  .wheel-card-content h2, .wheel-business h2 { font-size: 19px; }
  .wheel-description { font-size: 14px; }
  .wheel-tags span { font-size: 9px; }
}
@media(max-width:350px) {
  .wheel-card-content { padding-inline: 15px; grid-template-columns: 34px minmax(0,1fr); }
  .wheel-card-content h2, .wheel-business h2 { font-size: 17px; }
  .wheel-icon { width: 34px; height: 34px; }
  .wheel-description { font-size: 13px; }
  .wheel-tags { gap: 6px 8px; }
}
@media(prefers-reduced-motion:reduce) { .closing-cta::before { position: absolute; } }
@supports not (clip-path: inset(0)) { .closing-cta::before { position: absolute; } }