/* Responsive layer — ported from the design project's own responsive.css.
   Four steps, exactly as the design defines them:
     1279  small laptop  · gutter 48
     1023  tablet        · gutter 32, grids collapse, decorations re-anchor
      767  phone         · gutter 20, one column everywhere
      389  narrow phone  · gutter 16

   The design file targets inline styles (`[style*="font-size: 40px"]`); this
   theme renders classes instead, so the same steps are expressed as grouped
   selector lists. Sizes and breakpoints are unchanged. */

/* ═══════════════════════════════ 1279 — small laptop ═══════════════════════ */
@media (max-width: 1279px) {
  .me-shell { padding-inline: 48px; }

  .site-footer__grid { gap: 56px; }
  .site-footer__cols { gap: 32px; }

  /* four- and five-column grids are not holdable at this width */
  .home-clients__grid,
  .home-process__grid,
  .err-exits__grid,
  .svc-coop__steps,
  .usl-coop__steps,
  .usl-facts--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }

  .usl-coop__rail { display: none; }

  /* The desktop row uses a negative margin so the rule sits in the 32px gap.
     In two columns that overlap makes the tracks unequal, so the split is
     padding + a centred rule instead. */
  .usl-facts--4 { column-gap: 0; row-gap: 0; }

  .usl-facts--4 .usl-fact + .usl-fact {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
  }

  .usl-facts--4 .usl-fact:nth-child(odd) {
    padding-right: 32px;
    border-right: 1px solid var(--rule-light);
  }

  .usl-facts--4 .usl-fact:nth-child(even) { padding-left: 32px; }

  .usl-facts--4 .usl-fact:nth-child(n + 3) { border-top: 1px solid var(--rule-light); }

  /* fixed-width side columns become fluid */
  .home-hero__inner,
  .svc-hero__inner,
  .usl-hero__inner,
  .cas-hero__inner,
  .rea-hero__inner,
  .wie-hero__inner,
  .abo-hero__inner,
  .err-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }

  .svc-jump,
  .rea-proof,
  .wie-hero__feature,
  .home-hero__art,
  .usl-hero__art,
  .cas-hero__art,
  .abo-hero__art { width: 100%; }

  .home-hero__portrait { height: auto; width: 100%; max-width: 420px; }

  /* Portrait card + 620px form only fit the 1240 desktop shell. Below that
     the tracks share leftover space and the photo/copy row plus the submit
     label wrap against each other. Stack so both keep their desktop shape. */
  .prj-contact__inner {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .prj-card,
  .prj-channels { max-width: none; }

  /* type — first real step down */
  .home-hero__title,
  .svc-hero__title,
  .rea-hero__title,
  .wie-hero__title,
  .err-hero__title { font-size: 42px; }
  .wyc-hero__title { font-size: 44px; }
  .usl-hero__title,
  .abo-hero__title,
  .kon-title { font-size: 42px; }
  .cas-hero__title,
  .pos-hero__title { font-size: 38px; }
  .home-head__title,
  .home-about__title,
  .home-faq__title,
  .home-contact__title,
  .svc-catalog__title,
  .svc-cases__title,
  .svc-coop__title,
  .svc-cost__title,
  .svc-faq__title,
  .svc-contact__title,
  .usl-head__title,
  .rea-list__title,
  .rea-next__title,
  .cas-final__title { font-size: 34px; }
}

/* ══════════════════ 1100 — the desktop bar runs out of room ═══════════════ */
/* The artboard keeps the full bar down to 1023px, where it overflows. The
   socials are the one piece the bar can lose and still read the same. */
@media (max-width: 1100px) {
  .me-socials { display: none; }
  .site-header__inner { gap: 28px; }
}

/* ══════════════════════ 1023 — navigation goes mobile ═════════════════════ */
/* Same step the artboard uses: the bar drops to 64px and the mega menu is
   replaced by the sheet. */
@media (max-width: 1023px) {
  :root { --header-h: 64px; }
  .me-nav { display: none; }
  .me-mega { display: none; }
  .me-navtoggle { display: inline-flex; }
  .me-socials { display: none; }
  .site-header__inner { gap: 16px; }
}

/* ══════════════════════════════════ 1023 — tablet ══════════════════════════ */
@media (max-width: 1023px) {
  .me-shell { padding-inline: 32px; }

  .usl-month { padding: 28px 24px 24px; gap: 22px; }
  .usl-month__label { font-size: 13px; }

  /* ---- hero decoration ------------------------------------------------- */
  /* Grid panels, arrows and the target mark collide with the text column. */
  .svc-hero__grid,
  .home-hero__grid,
  .home-hero__arrows,
  .home-hero__target,
  .usl-hero__ring { display: none; }

  /* The mint wash stays on every page, re-anchored to the bottom edge. */
  .home-hero__wash,
  .svc-hero__wash,
  .usl-hero__wash {
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 140%;
    max-width: none;
    height: 420px;
  }

  /* The homepage rings come back underneath the portrait, scaled down. */
  .home-hero__ring {
    display: block;
    top: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    max-width: none;
  }

  .home-hero__ring--1 { width: 300px; height: 300px; bottom: 46px; }
  .home-hero__ring--2 { width: 222px; height: 222px; bottom: 85px; }
  .home-hero__ring--3 { width: 144px; height: 144px; bottom: 124px; }
  .home-hero__ring--4 { width: 72px;  height: 72px;  bottom: 160px; }

  .home-hero__art { justify-self: center; margin-bottom: 0; }
  .home-hero__inner { padding-bottom: 0; }
  .home-hero__portrait { height: 420px; width: auto; max-width: none; margin: 0 auto; }

  .home-hero__card {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 8px;
    white-space: nowrap;
  }

  /* ---- sections stop forcing height ------------------------------------ */
  .home-hero__inner,
  .svc-hero__inner,
  .usl-hero__inner,
  .cas-hero__inner,
  .rea-hero__inner,
  .wie-hero__inner,
  .abo-hero,
  .abo-hero__inner,
  .wyc-hero { min-height: 0; }

  /* breadcrumbs sit absolutely at 28px, so the grid needs room below them */
  .svc-hero__inner,
  .usl-hero__inner,
  .cas-hero__inner,
  .rea-hero__inner,
  .wie-hero__inner { padding-top: 80px; }

  .svc-hero__crumbs,
  .usl-hero__crumbs { right: 20px; }

  .me-crumbs { flex-wrap: wrap; row-gap: 8px; }
  .me-crumbs > * { flex-shrink: 0; white-space: nowrap; }
  .me-crumbs > *:last-child { flex-shrink: 1; min-width: 0; white-space: normal; }

  /* ---- sticky asides release ------------------------------------------- */
  .home-faq__aside,
  .svc-faq__aside,
  .usl-faq__aside { position: static; }

  /* ---- "narrow + wide" grids collapse ---------------------------------- */
  .home-hero__inner,
  .home-head,
  .home-about__inner,
  .home-faq__inner,
  .home-contact__inner,
  .svc-hero__inner,
  .svc-cost__inner,
  .svc-faq__inner,
  .svc-contact__inner,
  .prj-contact__inner,
  .svc-group,
  .usl-hero__inner,
  .usl-scope__split,
  .usl-explain,
  .usl-explain--table,
  .usl-explain--card,
  .usl-summary,
  .usl-split,
  .cas-split,
  .usl-measure,
  .usl-case__inner,
  .usl-cases__featured,
  .usl-faq__inner,
  .usl-next__inner,
  .usl-loc__inner,
  .usl-coop__panel,
  .cas-hero__inner,
  .cas-evidence,
  .rea-hero__inner,
  .wie-hero__inner,
  .abo-hero__inner,
  .err-hero__inner,
  .err-sought__inner,
  .abo-split,
  .abo-head,
  .abo-skills__head,
  .abo-contact__inner,
  .abo-approach__item,
  .abo-tl,
  .kon-main__inner,
  .kon-faq__inner { grid-template-columns: minmax(0, 1fr) !important; gap: 32px; }

  .usl-explain .cas-figure { max-width: none; justify-self: stretch; }

  .usl-cases__head { min-height: 0; gap: 24px; flex-wrap: wrap; }
  .usl-cases__shot { height: 280px; }
  .usl-cases__name { font-size: 24px; }
  .usl-cases__featured { height: auto; }

  /* ---- three equal columns: an orphan row looks broken, so go to one ---- */
  .home-proof__grid,
  .svc-coop__cards,
  .kon-steps__grid,
  .kon-facts__grid,
  .usl-next__cards,
  .abo-grid,
  .cas-related__grid,
  .pos-related__grid,
  /* trust strips read better stacked once their dividers turn horizontal */
  .home-hero__points,
  .rea-hero__points,
  .wie-hero__points,
  .abo-hero__stats,
  .cas-facts { grid-template-columns: minmax(0, 1fr) !important; }

  /* …lists that keep growing stay in two */
  .svc-cases__grid,
  .usl-items--3,
  .cas-metrics,
  .rea-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }

  /* ---- column dividers turn horizontal --------------------------------- */
  .home-hero__point + .home-hero__point,
  .rea-hero__point + .rea-hero__point,
  .wie-hero__point + .wie-hero__point,
  .abo-stat + .abo-stat,
  .cas-fact + .cas-fact {
    border-left: 0;
    border-top: 1px solid var(--rule-light);
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
  }

  .home-proof__item {
    border-right: 0;
    border-bottom: 1px solid var(--rule-light);
  }

  .home-proof__grid > .home-proof__item:last-child { border-bottom: 0; }
  .home-groups > .home-group:nth-child(even) { border-left: 0; }

  /* asymmetric column padding squares up once the grid has broken */
  .home-hero__point,
  .rea-hero__point,
  .wie-hero__point,
  .abo-stat { padding: 16px 0 !important; }

  .home-proof__item,
  .home-group,
  .home-groups > .home-group:nth-child(even) { padding: 28px 0 !important; }

  /* ---- rails only make sense across columns ---------------------------- */
  .home-process__rail,
  .svc-coop__rail,
  .usl-coop__rail,
  .abo-timeline__rail,
  .home-about__rail,
  .svc-person__rail { display: none; }

  .abo-timeline { padding-left: 0; }
  .abo-tl__dot { position: static; margin-bottom: 12px; }

  /* ---- component specifics --------------------------------------------- */
  .home-clients__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 30px 24px; }
  /* the artboard stacks the whole footer at this step: the brand column and
     then each link group, one per row */
  .site-footer__grid,
  .site-footer__cols { grid-template-columns: minmax(0, 1fr) !important; gap: 32px; }

  .home-about__art { justify-self: center; width: fit-content; max-width: 100%; }
  .home-about__photo,
  .abo-hero__art img { width: 100%; max-width: 340px; height: auto; aspect-ratio: 420 / 525; }

  /* every capped measure releases once the column is full width */
  .home-contact__points,
  .home-contact__lead,
  .home-contact__title,
  .home-hero__lead,
  .home-hero__points,
  .home-about__text,
  .home-about__points,
  .home-about__title,
  .svc-cost__text,
  .svc-cost__title,
  .svc-contact__title,
  .kon-block,
  .kon-title,
  .kon-lead,
  .svc-person,
  .abo-contact__text,
  .abo-hero__lead,
  .abo-hero__stats,
  .abo-text,
  .usl-hero__lead,
  .usl-hero__kicker,
  .usl-hero__usps,
  .usl-head,
  .cas-hero__lead,
  .cas-hero__tags,
  .cas-head,
  .rea-hero__lead,
  .rea-hero__points,
  .wie-hero__points,
  .rea-next__inner,
  .cas-final__inner { max-width: 100%; }

  .svc-jump,
  .rea-proof,
  .wie-hero__feature { align-self: start; }

  /* ---- rows that refuse to shrink wrap instead ------------------------- */
  .home-banner,
  .home-clients__head,
  .rea-list__head,
  .wie-help__inner,
  .wyc-back__inner,
  .svc-jump__head,
  .rea-proof__head,
  .site-footer__bottom { flex-wrap: wrap; }

  .svc-card__badge,
  .home-group__highlight-badge { white-space: normal; }

  /* rows pinned with flex-shrink:0 stop forcing their intrinsic width */
  .home-banner__ctas,
  .svc-cost__ctas,
  .rea-proof__count,
  .svc-jump__total,
  .wie-help__ctas {
    flex-shrink: 1;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }

  /* ---- type — the real tablet step ------------------------------------- */
  .home-hero__title,
  .svc-hero__title,
  .rea-hero__title,
  .wie-hero__title { font-size: 42px; }
  .wyc-hero__title,
  .usl-hero__title,
  .abo-hero__title,
  .kon-title { font-size: 38px; }
  .cas-hero__title,
  .pos-hero__title { font-size: 34px; }
  .home-head__title,
  .home-about__title,
  .home-faq__title,
  .home-contact__title,
  .svc-catalog__title,
  .svc-cases__title,
  .svc-coop__title,
  .svc-cost__title,
  .svc-faq__title,
  .svc-contact__title,
  .usl-head__title,
  .rea-list__title,
  .rea-next__title,
  .cas-final__title { font-size: 32px; }
  .abo-title,
  .abo-head__title,
  .abo-approach__title,
  .abo-contact__title { font-size: 29px; }
  .usl-faq__title,
  .cas-head__title,
  .kon-faq__title { font-size: 28px; }
  .abo-skills__head h2,
  .kon-steps__title { font-size: 26px; }
  .usl-next__title,
  .usl-case__title { font-size: 24px; }
  .svc-group__title,
  .wie-list__title,
  .pos-related__title { font-size: 22px; }
  /* Big numbers and the headings between a section title and a card title take
     this step too. The design ramps every size from 26px up at 1023px; these
     were the ones still rendering at their full desktop value. */
  .home-proof__stat { font-size: 34px; }
  .usl-step__num { font-size: 30px; }
  .cas-metric__value { font-size: 28px; }
  .home-feature__title { font-size: 24px; }
  .rea-card__value,
  .rea-proof__value { font-size: 24px; }
  .usl-explain .cas-sub { font-size: 22px; }

  /* ---- layout hygiene --------------------------------------------------- */
  /* Grid and flex children default to min-content width, which lets a fixed
     column (the contact form, a card grid) push past the viewport. */
  .me-shell > *,
  [class*="__inner"] > *,
  [class*="__grid"] > *,
  [class*="__cards"] > *,
  [class*="__links"] > *,
  [class*="__split"] > *,
  [class*="__steps"] > *,
  .home-head > *,
  .abo-head > *,
  .svc-group > *,
  .usl-items > *,
  .usl-cards > *,
  .usl-points > *,
  .cas-metrics > *,
  .cas-evidence > *,
  .rea-grid > *,
  .abo-grid > *,
  .wie-grid > *,
  .home-groups > *,
  .home-proof__grid > * { min-width: 0; }

  /* the flow strip's boxes are flex:1, so they need the same release */
  .usl-flow > * { min-width: 0; }

  .home-form,
  .svc-jump,
  .rea-proof,
  .wie-hero__feature { width: 100%; max-width: 100%; }

  h1, h2, h3, h4, p, a, span, li, dd, dt { overflow-wrap: break-word; }
  table { display: block; overflow-x: auto; }

  /* Tap targets stay 48px even if a page sheet reasserts a 2/3-col grid. */
  .usl-next__inner,
  .usl-next__cards,
  .home-form__grid { grid-template-columns: minmax(0, 1fr) !important; }
  .usl-next__cards { gap: 20px; }
  .home-form__grid { gap: 22px; }
  .usl-next__card,
  .home-link,
  .me-foot-svc,
  .me-foot-link { min-height: 48px; }
  input.me-field__control,
  select.me-field__control {
    height: 48px;
    min-height: 48px;
  }
}

/* ═══════════════════════════════════ 767 — phone ═══════════════════════════ */
@media (max-width: 767px) {
  .me-shell { padding-inline: 20px; }

  .usl-shot:has(.usl-month) {
    aspect-ratio: auto !important;
    height: auto;
  }
  .usl-month {
    padding: 22px 20px;
    gap: 16px;
  }
  .usl-month__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .usl-month__step {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 8px 0 8px 2px;
  }
  .usl-month__label { max-width: none; }
  .usl-month__step:not(:last-child)::before {
    top: 18px;
    left: 6px;
    width: 2px;
    height: calc(100% - 8px);
    background: rgba(15, 37, 51, 0.22);
  }
  .usl-month__step:nth-last-child(2)::before {
    background: linear-gradient(180deg, rgba(15, 37, 51, 0.22), var(--brand-green));
  }

  /* section rhythm: 80 desktop -> 56 mobile */
  .home-proof,
  .home-services,
  .home-process,
  .home-about,
  .home-faq,
  .home-contact,
  .svc-catalog,
  .svc-cases,
  .svc-coop,
  .svc-cost,
  .svc-faq,
  .svc-contact,
  .usl-section,
  .usl-coop,
  .usl-faq,
  .usl-next,
  .usl-loc,
  .cas-section,
  .cas-final,
  .rea-list,
  .rea-next,
  .abo-section,
  .abo-approach,
  .abo-skills,
  .abo-contact,
  .kon-steps,
  .kon-facts,
  .kon-faq,
  .wie-list,
  .wie-help,
  .err-exits,
  .err-sought,
  .err-help,
  .pos-related,
  .wyc-config { padding-top: 56px !important; padding-bottom: 60px !important; }

  /* Logo belt continues the proof band — keep it compact on small screens. */
  .home-proof { padding-bottom: 24px !important; }
  .home-clients { padding-top: 12px !important; padding-bottom: 32px !important; }

  /* every remaining grid drops to one column */
  .home-feature,
  .home-feature__links,
  .home-groups,
  .home-group__links,
  .home-clients__grid,
  .home-process__grid,
  .home-about__points,
  .home-form__grid,
  .svc-group__cards,
  .svc-cases__grid,
  .svc-coop__steps,
  .usl-items,
  .usl-items--2,
  .usl-items--3,
  .usl-cards,
  .usl-coop__steps,
  .usl-coop__panelcards,
  .cas-metrics,
  .cas-cols,
  .cas-cols--3,
  .usl-legend,
  .usl-facts,
  .usl-sheet__head,
  .cas-media--2,
  .cas-facts,
  .rea-grid,
  .abo-skills__cards,
  .wie-grid,
  .err-exits__grid,
  .err-sought__list,
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 20px; }

  .usl-coop__inner > .cas-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 32px;
  }

  .usl-facts--4 .usl-fact,
  .usl-facts--4 .usl-fact + .usl-fact,
  .usl-facts--4 .usl-fact:nth-child(odd),
  .usl-facts--4 .usl-fact:nth-child(even),
  .usl-facts--4 .usl-fact:nth-child(n + 3) {
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    border-right: 0;
  }

  .usl-facts { gap: 0 !important; }
  .usl-facts .usl-fact + .usl-fact { border-top: 1px solid var(--rule-light); }

  .site-footer__grid,
  .site-footer__cols { grid-template-columns: minmax(0, 1fr) !important; gap: 36px; }
  .site-footer__list + .me-foot-grp { margin-top: 24px; }
  .cas-fact { padding: 16px 0 !important; }

  /* logo + burger is all that fits; the CTA lives in the drawer */
  .site-header__cta { display: none; }
  .site-header__inner { gap: 12px; }
  .site-header__logo img { height: 24px; }

  /* stacked rows go full width instead of holding two buttons side by side */
  .home-banner,
  .wie-help__inner,
  .wyc-back__inner { flex-direction: column; align-items: flex-start; }

  .home-banner__ctas,
  .svc-cost__ctas,
  .wie-help__ctas { width: 100%; }

  /* …except icon + content rows, which stay side by side */
  .svc-jump__row {
    grid-template-columns: auto auto minmax(0, 1fr) !important;
    row-gap: 4px;
  }
  .svc-jump__count { grid-column: 3; }

  /* homepage hero portrait */
  .home-hero__portrait { height: 330px; }
  .home-hero__ring--1 { width: 250px; height: 250px; bottom: 36px; }
  .home-hero__ring--2 { width: 185px; height: 185px; bottom: 69px; }
  .home-hero__ring--3 { width: 120px; height: 120px; bottom: 101px; }
  .home-hero__ring--4 { width: 60px;  height: 60px;  bottom: 131px; }
  .home-hero__wash,
  .svc-hero__wash,
  .usl-hero__wash { height: 330px; }
  .home-hero__card { font-size: 13px; padding: 12px 16px; }

  /* portrait card in the contact aside */
  .svc-person { flex-direction: column; }
  .svc-person__photo { width: 104px; height: 130px; }

  /* CTA rows wrap and fill */
  .home-hero__ctas,
  .home-banner__ctas,
  .svc-hero__ctas,
  .usl-hero__ctas,
  .cas-hero__ctas,
  .rea-hero__ctas,
  .rea-next__ctas,
  .cas-final__ctas,
  .abo-hero__ctas,
  .wyc-hero__ctas,
  .svc-cost__ctas,
  .usl-module__foot { flex-wrap: wrap; }

  .home-hero__ctas .me-btn,
  .home-banner__ctas .me-btn,
  .svc-hero__ctas .me-btn,
  .usl-hero__ctas .me-btn,
  .rea-hero__ctas .me-btn,
  .abo-hero__ctas .me-btn,
  .wyc-hero__ctas .me-btn,
  .home-form__foot .me-btn { width: 100%; white-space: normal; }

  .home-form__foot { flex-direction: column; align-items: stretch; }
  .home-form__note { max-width: none; }

  /* type — phone step */
  .home-hero__title,
  .svc-hero__title,
  .rea-hero__title,
  .wie-hero__title { font-size: 32px; }
  .wyc-hero__title,
  .usl-hero__title,
  .abo-hero__title,
  .kon-title { font-size: 30px; }
  .cas-hero__title,
  .pos-hero__title { font-size: 28px; }
  .home-head__title,
  .home-about__title,
  .home-faq__title,
  .home-contact__title,
  .svc-catalog__title,
  .svc-cases__title,
  .svc-coop__title,
  .svc-cost__title,
  .svc-faq__title,
  .svc-contact__title,
  .usl-head__title,
  .rea-list__title,
  .rea-next__title,
  .cas-final__title { font-size: 27px; }
  .abo-title,
  .abo-head__title,
  .abo-approach__title,
  .abo-contact__title { font-size: 25px; }
  .usl-faq__title,
  .cas-head__title,
  .kon-faq__title { font-size: 24px; }
  .abo-skills__head h2,
  .kon-steps__title { font-size: 23px; }
  .usl-next__title,
  .usl-case__title { font-size: 21px; }
  .svc-group__title,
  .wie-list__title,
  .pos-related__title { font-size: 20px; }
  .usl-card__title,
  .abo-approach__itemtitle,
  .wie-help__title,
  .post-card__title { font-size: 19px; }
  .home-step__title,
  .svc-coop__card h3,
  .case-card__title,
  .svc-cost__panelhead h3,
  .usl-step__title { font-size: 18px; }
  .home-banner__title,
  .svc-card__title,
  .usl-item__title,
  .cas-card__title,
  .abo-skill__title,
  .kon-step__title,
  .rea-card__title,
  .abo-tl__title,
  .usl-loc__title,
  .usl-coop__panel h3 { font-size: 17px; }
  /* Big numbers follow the same ramp as everything else rather than one shared
     value: 44 → 28, 38 → 26, 34 → 24, 28 → 21. Lumping them together made the
     two 28px values grow past their own desktop size. */
  .home-proof__stat { font-size: 28px; }
  .usl-step__num { font-size: 26px; }
  .cas-metric__value { font-size: 24px; }
  .rea-card__value,
  .rea-proof__value { font-size: 21px; }

  /* Headings that had no phone step at all. */
  .home-feature__title { font-size: 21px; }
  .usl-explain .cas-sub { font-size: 20px; }
  .home-group__title,
  .abo-stat__value { font-size: 19px; }
  .me-quote,
  .me-plus,
  .cas-sub,
  .usl-module__close h3,
  .svc-step__title,
  .cas-hero__resulttitle,
  .cas-cardlink__title { font-size: 17px; }

  /* card interiors tighten */
  .svc-group,
  .home-feature,
  .home-form,
  .usl-card,
  .svc-card,
  .home-banner,
  .wie-help__inner { padding: 22px; }

  main, article { max-width: 100%; }
  article img, article figure, article table { max-width: 100%; height: auto; }
}

/* ══════════════════════════════ 389 — narrow phone ═════════════════════════ */
@media (max-width: 389px) {
  .me-shell { padding-inline: 16px; }

  .home-hero__title,
  .svc-hero__title,
  .rea-hero__title,
  .wie-hero__title { font-size: 29px; }
  .wyc-hero__title,
  .usl-hero__title,
  .abo-hero__title,
  .kon-title { font-size: 27px; }
  .home-head__title,
  .home-about__title,
  .home-faq__title,
  .home-contact__title,
  .svc-catalog__title,
  .svc-cases__title,
  .svc-coop__title,
  .svc-cost__title,
  .svc-faq__title,
  .svc-contact__title,
  .usl-head__title,
  .rea-list__title,
  .rea-next__title,
  .cas-final__title { font-size: 24px; }
  .abo-title,
  .abo-head__title,
  .abo-approach__title,
  .abo-contact__title { font-size: 23px; }

  .home-hero__card { white-space: normal; }

  /* Three boxed steps side by side leave ~70px per box at this width, which
     is narrower than a single word of most step labels. Stack them and turn
     the joining arrows a quarter turn. */
  .usl-flow {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 8px;
  }
  .usl-flow__step { height: auto; min-height: 48px; padding: 10px 12px; }
  .usl-flow__arrow { transform: rotate(90deg); line-height: 1; }

  .offer-floatbar .mobile-pricebar-btn { padding-inline: 8px; font-size: 13px; }
}

/* ═══════════════════ 900 — v1 offer configurator price bar ════════════════ */
/* The v1 sheet switches the configurator to its mobile price bar at 900px.
   Its button columns are implicit `auto` tracks, so they size to the widest
   button („Podsumowanie”) rather than to the bar, and the buttons spill out
   of the white card. */
@media (max-width: 900px) {
  .offer-floatbar .mobile-pricebar-left,
  .offer-floatbar .mobile-pricebar-right { grid-template-columns: minmax(0, 1fr); }
  .offer-floatbar .mobile-pricebar-btn { min-width: 0; }
  .offer-floatbar .mobile-pricebar-summary-label { min-width: 0; overflow-wrap: anywhere; }
}

/* ═══════════════ Case studies — design payload sections ════════════════════ */
/* These rules sit after the breakpoint blocks above on purpose: `.cas-split`
   carries the artboard's column ratio as an inline style, so collapsing it
   needs `!important`. */

@media (max-width: 1023px) {
  /* The 3-column position table stacks instead of scrolling sideways, as the
     artboard does: the header row goes, the row label spans the width, and
     every value carries the column name it lost. Two-column comparison
     tables (landing OnePage) keep their header and stay side by side. */
  .cas-table--positions table,
  .cas-table--positions thead,
  .cas-table--positions tbody,
  .cas-table--positions tr,
  .cas-table--positions th,
  .cas-table--positions td { display: block; }
  .cas-table--positions thead { display: none; }
  .cas-table--positions tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 20px;
    padding: 16px 20px;
  }
  .cas-table--positions tr + tr { border-top: 1px solid var(--rule-light); }
  .cas-table--positions tbody th {
    grid-column: 1 / -1;
    font-weight: 600;
    border: 0;
    padding: 0;
  }
  .cas-table--positions tbody td {
    text-align: left;
    border: 0;
    padding: 0;
  }
  .cas-table--positions tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  .cas-cards--3,
  .cas-metrics--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .cas-meta__row { grid-template-columns: 96px minmax(0, 1fr); }

  .usl-sample__head,
  .usl-sample__row,
  .usl-sample__row--mint {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 20px;
  }

  .usl-split .cas-split__main > .usl-aside-card { max-width: none; }
}

@media (max-width: 767px) {
  .cas-split,
  .usl-explain,
  .prj-contact__inner {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }

  .usl-coop__inner > .cas-cols {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px;
  }

  .usl-sample__head { padding: 24px 20px; gap: 20px; }
  .usl-sample__body { padding: 4px 20px 24px; }
  .usl-sample__row--mint { padding: 18px 16px; }

  .usl-report__head,
  .usl-report__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 18px 20px;
  }

  .usl-aside-card,
  .usl-cost-card { padding: 24px 20px; }
  .usl-split .cas-split__main > .usl-aside-card { max-width: none; }

  .cas-split__aside { margin-top: 8px; }

  /* label above value instead of beside it */
  .cas-meta__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  .cas-cards,
  .cas-cards--2,
  .cas-cards--3,
  .cas-cols--4,
  .cas-metrics--2,
  .cas-metrics--4 { grid-template-columns: minmax(0, 1fr) !important; }

  .cas-step { grid-template-columns: 26px minmax(0, 1fr); }

  .prj-card { flex-direction: column; align-items: flex-start; gap: 18px; }
  .prj-card__media,
  .prj-card__media img,
  .prj-card--lead .prj-card__media,
  .prj-card--lead .prj-card__media img { width: 120px; }
  .prj-card__rail { left: -10px; }

  .cas-figure__img,
  .cas-figure .usl-slot,
  .cas-figure .usl-shot { border-radius: 16px; }

  .prj-contact { padding: 56px 0 60px; }
  .prj-contact__title { font-size: 28px; }

  /* Landing comparison card: keep the Potrzeba / kierunek header and stack
     each row's two cells, the same way the artboard collapses 1fr 1fr. */
  .usl-explain--table .cas-table table,
  .usl-explain--table .cas-table thead,
  .usl-explain--table .cas-table tbody,
  .usl-explain--table .cas-table tr,
  .usl-explain--table .cas-table th,
  .usl-explain--table .cas-table td {
    display: block;
    width: 100% !important;
  }

  .usl-explain--table .cas-table thead tr {
    padding: 14px 20px;
    background: var(--surface-soft);
  }

  .usl-explain--table .cas-table thead th {
    padding: 0;
    background: none;
    border: 0;
  }

  .usl-explain--table .cas-table thead th + th { margin-top: 8px; }

  .usl-explain--table .cas-table tbody tr { padding: 18px 20px; }

  .usl-explain--table .cas-table tbody th,
  .usl-explain--table .cas-table tbody td {
    padding: 0;
    border: 0;
  }

  .usl-explain--table .cas-table tbody td { margin-top: 20px; }

  .usl-explain--table .cas-table tbody tr + tr {
    border-top: 1px solid var(--rule-light);
  }
}

@media (max-width: 389px) {
  .cas-table--positions tr { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .prj-channel { padding: 14px 16px; gap: 12px; }
  .prj-contact__title { font-size: 24px; }
}