/* Approved final review: image-led hero, open service cards, and a quiet portfolio. */
:root { --brand-teal: #416f6c; }
.home-hero {
  position: relative;
  isolation: isolate;
  background: #081e30 url('assets/hero-development-v8.png') center 110px / 100% auto no-repeat;
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(5, 24, 42, .3);
  pointer-events: none;
}
.home-hero .hero-content > p { color: #fff; }
.statement-band {
  position: relative;
  isolation: isolate;
  background: #102f3b url('assets/agency-development-bg-v7.png') center / cover no-repeat;
}
.statement-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(15, 48, 58, .68);
  pointer-events: none;
}
.statement-band .section-label, .statement-band p { color: #fff; }

/* Full approved wordmark, including the small code symbol, on a light surface. */
.wordmark { display: block; flex-shrink: 0; line-height: 0; }
.brand-logo { display: block; width: 264px; height: auto; }
.footer-brand .brand-logo { width: min(100%, 300px); }
.footer-brand { max-width: 100%; }
.inner-page .site-header { background: #fff; color: var(--navy); border-bottom: 1px solid var(--line); }
.inner-page .site-header:not(.is-scrolled) nav a[aria-current="page"] { color: var(--blue); }
.inner-page .menu-toggle { border-color: var(--line); }
.site-header .header-inner { gap: 24px; }
.home-page .site-header:not(.is-scrolled) .header-inner { padding-block: 8px; }
.site-header nav { gap: 20px; }
.js-ready .home-hero { padding-block-start: 178px; }

/* No decorative browser chrome, footers, or visible slider control row. */
.hero-carousel { --wheel-width: 590px; --wheel-offset: 405px; --wheel-drop: 48px; max-width: 1360px; padding-block: 18px 42px; }
.wheel-stage { height: 457px; }
.wheel-card { height: 410px; border-radius: 24px; }
.wheel-card-content {
  padding: 36px 38px;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  gap: 24px;
}
.wheel-card-content::before { inset-block: 36px; }
.wheel-icon { width: 76px; height: 76px; border-radius: 20px; }
.wheel-icon .service-svg { width: 44px; height: 44px; }
.wheel-card-content h2 { font-size: 30px; line-height: 1.5; }
.wheel-business h2 { font-size: 28px; }
.wheel-description {
  display: block;
  height: auto;
  overflow: visible;
  -webkit-line-clamp: unset;
  font-size: 18px;
  line-height: 1.95;
  margin: 0;
  align-self: center;
}
.wheel-tags { align-self: end; gap: 8px; }
.wheel-tags span { font-size: 12px; padding: 6px 11px; }

.project-body { flex: 0; padding: 24px 28px; }
.project-cta, .work-section .section-button .button { background: var(--brand-teal); color: #fff; }
.project-cta:hover, .work-section .section-button .button:hover { background: #345b59; }
.project-cta-label, .project-cta > p, .project-cta-phone { color: #fff; }
.whatsapp-action { color: var(--brand-teal); justify-content: center; text-align: center; }
.solution-card > a { grid-template-columns: 59px minmax(0, 1fr); }

@media (max-width: 1100px) {
  .brand-logo { width: 238px; }
  .site-header nav { gap: 16px; font-size: 13px; }
  .hero-carousel { --wheel-width: 510px; --wheel-offset: 340px; }
  .wheel-card-content { padding: 32px; gap: 22px; grid-template-columns: 66px minmax(0, 1fr); }
  .wheel-icon { width: 66px; height: 66px; }
  .wheel-card-content h2 { font-size: 27px; }
  .wheel-business h2 { font-size: 25px; }
  .wheel-description { font-size: 17px; }
}
@media (max-width: 850px) {
  .hero-carousel { --wheel-width: 440px; --wheel-offset: 285px; }
  .wheel-card-content { padding: 28px; gap: 20px; grid-template-columns: 58px minmax(0, 1fr); }
  .wheel-icon { width: 58px; height: 58px; border-radius: 16px; }
  .wheel-icon .service-svg { width: 36px; height: 36px; }
  .wheel-card-content h2 { font-size: 25px; }
  .wheel-business h2 { font-size: 23px; }
  .wheel-description { font-size: 16px; }
  .wheel-tags span { font-size: 11px; padding-inline: 9px; }
  .solution-card > a { grid-template-columns: 1fr; }
  .solution-copy { grid-column: 1; }
}
@media (max-width: 700px) {
  .brand-logo { width: 222px; }
  .site-header .header-inner { gap: 12px; }
  .js-ready .home-hero { padding-block-start: 148px; }
  .home-hero { background-position: left 120px; background-size: auto 520px; }
  .home-hero::before { background: rgba(5, 24, 42, .62); }
  .hero-carousel { --wheel-width: 360px; --wheel-offset: 207px; --wheel-drop: 36px; padding-block: 16px 24px; }
  .wheel-stage { height: 421px; }
  .wheel-card { height: 385px; border-radius: 20px; }
  .wheel-card-content { padding: 26px; gap: 18px 14px; grid-template-columns: 50px minmax(0, 1fr); }
  .wheel-icon { width: 50px; height: 50px; border-radius: 14px; }
  .wheel-icon .service-svg { width: 31px; height: 31px; }
  .wheel-card-content h2 { font-size: 22px; }
  .wheel-business h2 { font-size: 20px; }
  .wheel-description { font-size: 15px; line-height: 1.95; }
  .wheel-tags { gap: 6px; }
  .wheel-tags span { font-size: 10px; padding: 5px 8px; }
  .solution-card > a { grid-template-columns: 52px minmax(0, 1fr); }
  .solution-copy { grid-column: auto; grid-row: auto; }
}
@media (max-width: 450px) {
  .brand-logo { width: 204px; }
  .home-page .site-header:not(.is-scrolled) .header-inner { padding-inline: 12px; }
  .hero-carousel { --wheel-width: 78vw; --wheel-offset: 48vw; }
  .wheel-card-content { padding: 24px 20px; gap: 16px 12px; grid-template-columns: 44px minmax(0, 1fr); }
  .wheel-icon { width: 44px; height: 44px; border-radius: 12px; }
  .wheel-card-content h2 { font-size: 20px; }
  .wheel-business h2 { font-size: 18px; }
  .wheel-description { font-size: 14px; }
  .wheel-tags span { font-size: 9px; padding: 5px 7px; }
  .solution-card > a { grid-template-columns: 1fr; }
  .solution-copy { grid-column: 1; grid-row: 2; }
}
@media (max-width: 350px) {
  .brand-logo { width: 180px; }
  .wheel-card-content { padding-inline: 16px; gap: 14px 10px; }
  .wheel-card-content h2 { font-size: 18px; }
  .wheel-business h2 { font-size: 16px; }
  .wheel-description { font-size: 13px; }
  .wheel-tags span { font-size: 8px; }
}