/* ==========================================================================
   Site-wide sizing and responsive layer (loaded after pages.css).
   - Headings use the shared --text-hero / --text-section tokens (tokens.css) instead of their own large sizes.
   - Cards get average padding, icon tiles and gaps.
   - Tablets keep multi-column layouts; phones get compact grids and swipe rows (pages.css swipe rules + main.js).
   ========================================================================== */

/* ---- Headings ---- */
.home-hero__copy .display, .svc-h-xl, .ab-hero__title, .cs-hero__title { font-size: var(--text-hero); }
.ha h2, .services-showcase__head h2, .ab-offer__copy h2, .cx-perks__head h2, .cx-head h2 { font-size: var(--text-section); }
.cs-group__title, .faq-group__head h2 { font-size: clamp(1.4rem, 2vw, 1.85rem); }
.stat__value { font-size: clamp(1.75rem, 1.6vw + 1.1rem, 2.35rem); }
.form-panel h2 { font-size: clamp(1.25rem, 0.8vw + 1rem, 1.55rem); }
.lead { font-size: 1rem; }

/* ---- Cards: average padding ---- */
.service-card__body { padding: clamp(1rem, 1.4vw, 1.25rem); margin-top: -3rem; }
.service-card__media { border-width: 8px; }
.service-card__media img, .service-card__media .img-fallback { border-radius: calc(var(--radius-lg) - 8px); }
.case-card__body, .stat, .value, .industry-card, .cs-card, .cs-glance, .form-panel, .benefit {
  padding: clamp(1.15rem, 1.8vw, 1.6rem);
}
.service-row a { padding: clamp(0.9rem, 1.4vw, 1.2rem) clamp(1.1rem, 1.8vw, 1.5rem); }
.job-row a { padding: clamp(1rem, 1.6vw, 1.3rem) clamp(1.1rem, 2vw, 1.6rem); }
.testimonial { padding: clamp(1.4rem, 3vw, 2.2rem); }
.cta-band__box { padding: clamp(1.5rem, 3vw, 2.4rem); }
.industry-card { min-height: 0; }
.faq-page .accordion summary { padding: 15px 18px; }

/* ---- Icon tiles and gaps ---- */
.cs-step-head__num { width: 44px; height: 44px; border-radius: 13px; font-size: 0.95rem; }
.cs-card__icon, .faq-group__icon, .faq-help__icon { width: 42px; height: 42px; border-radius: 12px; }
.cards { gap: clamp(1rem, 2vw, 1.5rem); }
.service-cards { gap: clamp(1rem, 2vw, 1.5rem); }
.team-grid { gap: clamp(1.25rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.25rem); }
.stats { gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.cs-cards { gap: clamp(0.85rem, 1.6vw, 1.25rem); }

/* ---- Tablets (640–899px): two columns instead of one tall column ---- */
@media (min-width: 640px) and (max-width: 899px) {
  .cards, .cards--4, .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Side-by-side layouts start earlier where they fit */
@media (min-width: 900px) and (max-width: 999px) {
  .cs-hero__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* ---- Phones: compact grids ---- */
@media (max-width: 767px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 1rem 0.75rem; }
  .stat__value { font-size: clamp(1.5rem, 6vw, 1.9rem); }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-card h3 { font-size: 1rem; }
}
@media (max-width: 599px) {
  .page-hero, .case-hero, .article-header { padding-block: 2rem 2.5rem; }
  .breadcrumb ol { flex-wrap: wrap; row-gap: 2px; }
  .cs-hero__chips { margin-bottom: var(--space-4); }
  .section-head { margin-bottom: 1.5rem; }
  .cta-band__box { text-align: center; }
}

/* ---- Overflow guard: grid children with sideways scrollers inside never widen the page ---- */
.detail-layout > *, .story > *, .grid > *, .cs-hero__layout > *, .cx-perks__layout > *, .cx-job-hero__layout > * { min-width: 0; }

/* ==========================================================================
   Home "What we do" carousel below 900px: a centred swipe slider with a peek, dots, arrows and auto-advance
   (static/js/main.js, "Services carousel"). Desktop keeps the continuous drift.
   ========================================================================== */
.service-marquee .service-card { flex-basis: clamp(230px, 21vw, 280px); }
@media (max-width: 899px) {
  .service-marquee {
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-mask-image: none; mask-image: none;
    margin-inline: calc(-1 * var(--gutter)); padding-block: var(--space-2) var(--space-6); margin-bottom: 0;
  }
  .service-marquee::-webkit-scrollbar { display: none; }
  .service-marquee__track {
    animation: none; gap: 14px;
    padding-inline: max(var(--gutter), calc(50vw - min(39vw, 155px)));  /* first and last card can sit centred */
  }
  .service-marquee .service-card { flex: 0 0 min(78vw, 310px); scroll-snap-align: center; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s ease; }
  .service-marquee .service-card[aria-hidden="true"] { display: none; }
  .service-marquee.is-slider .service-card:not(.is-active) { transform: scale(.93); opacity: .55; }
}
.carousel-ui { display: none; }
@media (max-width: 899px) {
  .carousel-ui { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: var(--space-2); }
  .carousel-ui__btn {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28); color: #FFFFFF; background: rgba(255, 255, 255, 0.06);
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
  }
  .carousel-ui__btn:hover, .carousel-ui__btn:focus-visible { background: #FFFFFF; border-color: #FFFFFF; color: var(--blue-700); }
  .carousel-ui .swipe-nav { margin: 0; color: #FFFFFF; }
}
@media (prefers-reduced-motion: reduce) { .service-marquee .service-card { transition: none; } }

/* ==========================================================================
   Contact page below 1100px: a compact form card with the two illustrations standing beside it, overlapping its
   lower edges a little (the same arrangement as desktop, pages.css). The details sit above in one column.
   ========================================================================== */
@media (max-width: 1099px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .contact-details { gap: var(--space-4); }
  .contact-details li { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px 14px; overflow-wrap: anywhere; }
  .contact-details li .icon-wrap { width: 44px; height: 44px; border-radius: 12px; }

  /* Compact card and fields */
  .contact-stage .form-panel { padding: clamp(0.9rem, 2.4vw, 1.25rem); border-radius: 18px; }
  .contact-stage .form-panel h2 { font-size: 1.15rem; margin-bottom: 2px; }
  .contact-stage .form-panel > p.muted { margin-bottom: 12px !important; font-size: 0.85rem; line-height: 1.5; }
  .contact-stage .form, .contact-stage .form-row { gap: 10px; }
  .contact-stage .field { gap: 4px; }
  .contact-stage .field label, .contact-stage .field .label { font-size: 0.78rem; }
  .contact-stage .field .optional { font-size: 0.72rem; }
  .contact-stage .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .contact-stage .field select {
    min-height: 40px; padding: 0.45rem 0.9rem; font-size: 0.9rem;
  }
  .contact-stage .field textarea { min-height: 84px; padding: 0.55rem 0.9rem; font-size: 0.9rem; border-radius: 14px; }
  .contact-stage .field--check input { width: 18px; height: 18px; }
  .contact-stage .field--check label { font-size: 0.8rem; line-height: 1.45; }
  .contact-stage .form .btn { min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.72rem; }

  /* Illustrations beside the card */
  .contact-stage:is(.has-left, .has-right) { --art-w: clamp(120px, 17vw, 170px); --art-lap: 45px; }
  .contact-stage.has-left { margin-left: calc(var(--art-w) - var(--art-lap)); }
  .contact-stage.has-right { margin-right: calc(var(--art-w) - var(--art-lap)); }
  .contact-art {
    display: block; opacity: 1; position: absolute; z-index: 2; bottom: -6px; width: var(--art-w); margin: 0; pointer-events: none;
    transform-origin: 50% 100%; filter: drop-shadow(0 12px 14px rgba(10, 40, 110, 0.16));
  }
  .contact-art img, .contact-art .img-fallback { display: block; width: 100%; height: auto; }
  .contact-art--left { left: calc(var(--art-lap) - var(--art-w)); rotate: -4deg; animation: contact-sway 7s ease-in-out infinite; }
  .contact-art--right { right: calc(var(--art-lap) - var(--art-w)); rotate: 4deg; animation: contact-sway 7s ease-in-out -3.5s infinite; }
}
/* Tablets: the contact tiles and the office card sit side by side instead of stacking */
@media (min-width: 600px) and (max-width: 1099px) {
  .contact-details ul { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .office-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); column-gap: var(--space-6); align-items: start; }
  .office-card > :not(.map-link) { grid-column: 1; }
  .office-card .map-link { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .office-card .map-link img { aspect-ratio: 16 / 10; }
}
/* Phones: smaller figures so the card keeps a usable width between them */
@media (max-width: 599px) {
  .contact-stage:is(.has-left, .has-right) { --art-w: clamp(64px, 19vw, 86px); --art-lap: 26px; }
  .office-card .map-link img { aspect-ratio: 2 / 1; }
  /* Mobile-sized form: short fields with small text */
  .contact-stage .form-panel { padding: 0.85rem; }
  .contact-stage .form-panel h2 { font-size: 1.05rem; }
  .contact-stage .form-panel > p.muted { font-size: 0.8rem; margin-bottom: 8px !important; }
  .contact-stage .form, .contact-stage .form-row { gap: 8px; }
  .contact-stage .field { gap: 3px; }
  .contact-stage .field label, .contact-stage .field .label { font-size: 0.74rem; }
  .contact-stage .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .contact-stage .field select {
    min-height: 36px; height: 36px; padding: 0.3rem 0.85rem; line-height: 1.2; font-size: 0.875rem;
  }
  .contact-stage .field select { padding-right: 2.2rem; background-position: right 0.8rem center; }
  .contact-stage .field textarea { min-height: 70px; height: 70px; padding: 0.45rem 0.85rem; font-size: 0.875rem; }
  .contact-stage .field--check input { width: 16px; height: 16px; }
  .contact-stage .field--check label { font-size: 0.75rem; }
  .contact-stage .form .btn { min-height: 36px; padding: 0.4rem 1rem; }
}