/* ==========================================================
   ht-law / layout.css
   Layer 3 composition, and the four bands.

   Bands are closed at both ends except the last, per ht-kit.
   The numbers are this composition's own, not the kit defaults,
   because kit-layers.md puts breakpoints in layer 3. Every one
   of them marks a change of structure. See md/README.md and the
   note for CLAUDE.md at the end of that file.

     band 1  ≤ 600            phone
     band 2  601  to  900     large phone · small tablet
     band 3  901  to 1100     tablet · small laptop
     band 4  1101 up          laptop and up

   Each band states every value that varies, so one band can be
   read on its own without tracing a cascade.
   ========================================================== */

/* ==========================================================
   BAND-INDEPENDENT STRUCTURE
   ========================================================== */

/* ─ hero ────────────────────────────────────────────────────
   Content sits at the BOTTOM of a full-viewport field, with the
   top of the screen given over to FX/FACET. margin-top: auto on
   the inner block is the whole layout: everything above the
   headline is background.

   The field is pale, where every other accent surface on this
   site is navy. That is deliberate and it is the one place the
   site inverts. Two things follow, both handled rather than
   inherited: the header floats over it as .site-nav--over in
   ink, and the focus ring reverts to --accent, because base.css
   gives accent-field descendants a white ring and a white ring
   on a white field is no ring at all.
   ────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 1;
  margin-top: auto;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
}

/* The headline and the action share one row, the name hard left
   and the button hard right. align-items: end sits the button on
   the bottom of the headline's box rather than its top, so the
   two read as one line however many lines the name takes. */
.hero__headline {
  display: grid;
  align-items: end;
}

.hero__h1 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  color: var(--ink);
}

/* The baseline row. One lead left, the rating hard right.
   Aligned to the top of each block, so the two line up on their
   first line of text whatever their depth. */
.hero__base {
  display: grid;
  align-items: start;
  border-top: var(--border) solid var(--rule);
}

.hero__lead {
  max-width: var(--measure-sm);
  font-size: var(--step--1);
  font-weight: var(--weight-light);
  line-height: var(--lh-prose);
  color: var(--muted);
}

.hero__proof { text-align: right; }

/* The whole block is one link, so the accessible name is the
   rating and the review line together, which is what a screen
   reader needs to know what is being rated and by whom. No
   aria-label: it would have to repeat the visible text to
   satisfy 2.5.3, and wrapping is simpler than restating. */
.hero__proof-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-6);
}

.hero__proof-figure {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-medium);
  line-height: var(--lh-title);
  letter-spacing: var(--track-heading);
  color: var(--ink);
  transition: color var(--dur-link) var(--ease);
}

.hero__proof-link:hover .hero__proof-figure { color: var(--accent); }

/* Five stars in one SVG, the same path translated, so there is
   one element rather than five and no id to collide with.
   --accent rather than the gold a review badge would use: the
   palette has one hue and a borrowed gold would be the only
   colour on the site that answers to nothing. */
.hero__stars {
  width: var(--sp-80);
  height: auto;
  fill: var(--accent);
}

.hero__proof-note {
  font-size: var(--step--2);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-meta);
  color: var(--muted);
}

.hero__actions {
  display: flex;
  gap: var(--sp-16);
  flex-wrap: wrap;
}

.capabilities__inner,
.approach__inner,
.testimonials__inner,
.service__inner,
.la-provide__inner,
.la-eligibility__inner,
.la-fees__inner,
.la-questions__inner,
.service-index__inner,
.contact-details__inner,
.contact-form-section__inner,
.contact-location__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.approach     { background: var(--paper); }
.capabilities { background: var(--surface); }

.testimonials {
  border-top: var(--border) solid var(--rule);
  background: var(--surface);
}

.closing {
  text-align: center;
  position: relative;
}

.closing__inner {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
}

.capabilities__cta {
  margin-top: var(--sp-96);
  display: flex;
}

.service-index {
  border-bottom: var(--border) solid var(--rule);
  background: var(--surface);
}

.service-index__inner {
  display: grid;
  gap: 0;
}

.service-section     { border-top: var(--border) solid var(--rule); }
.service-section--alt { background: var(--surface); }

.la-provide      { border-top: var(--border) solid var(--rule); }
.la-eligibility  { background: var(--surface); }
.la-questions    { background: var(--surface); }

.contact-details { border-top: var(--border) solid var(--rule); }

/* A section whose predecessor already closed itself with a rule drew a
   second line hard against the first, so 1px meeting 1px at a zero gap
   read as a single 2px rule. Only the leading edge keeps its border.
   Both of these sit at a section boundary rather than inside one, which
   is why the fix is on the pair and not on either class. */
.service-index + .service-section { border-top: none; }
.page-hero + .contact-details     { border-top: none; }

.contact-form-section {
  background: var(--surface);
  border-top: var(--border) solid var(--rule);
}

.contact-location { border-top: var(--border) solid var(--rule); }

.contact-location__address {
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  line-height: var(--lh-address);
  color: var(--ink);
  margin-bottom: var(--sp-48);
}

.contact-location__desc {
  font-size: var(--step-0);
  font-weight: var(--weight-light);
  line-height: var(--lh-body);
  color: var(--muted);
  margin-bottom: var(--sp-24);
}

.contact-location__heading {
  font-size: var(--step-3);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-display);
  line-height: var(--lh-heading);
  color: var(--ink);
  margin: 0;
}

.contact-location__cta { margin-top: var(--sp-56); }

.page-content { padding-bottom: var(--sp-120); }

.sticky-call {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: var(--sp-12) var(--sp-24) calc(var(--sp-12) + env(safe-area-inset-bottom));
  background: var(--accent);
  border-top: var(--border) solid var(--accent-rule);
}

/* ==========================================================
   BAND 4 · 1101 up · laptop and above
   ========================================================== */

@media (min-width: 1101px) {

  .site-nav              { padding: var(--sp-24) var(--gutter-wide); }
  .site-nav.is-scrolled  { padding: var(--sp-16) var(--gutter-wide); }
  .nav-hamburger         { display: none; }

  .hero                  { padding: var(--sp-120) var(--gutter-wide) var(--sp-64); }
  .hero__headline        { grid-template-columns: minmax(0, 1fr) auto;
                           gap: var(--sp-48); margin-bottom: var(--sp-48); }
  .hero__base            { grid-template-columns: minmax(0, 1fr) auto;
                           gap: var(--sp-40); padding-top: var(--sp-32); }

  .capabilities          { padding: var(--section-y) var(--gutter-wide); }
  .section-head--wide    { grid-template-columns: 1fr 2fr; margin-bottom: var(--sp-144); }
  .cap-row               { grid-template-columns: var(--sp-120) 1fr 1fr; gap: var(--sp-48); }
  .cap-row--offset       { margin-left: var(--cap-offset); }
  .capabilities__cta     { justify-content: center; }

  .approach              { padding: var(--section-y) var(--gutter-wide); }
  .section-head--tall    { grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-144); }
  .approach__grid        { display: grid; grid-template-columns: repeat(4, 1fr);
                           gap: var(--sp-32); }

  .testimonials          { padding: var(--sp-120) var(--gutter); }
  .section-head--short   { grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-80); }
  .testimonials__grid    { gap: var(--sp-48); }

  .closing               { padding: var(--sp-120) var(--gutter-wide); }

  .site-footer           { padding: var(--sp-120) var(--gutter-wide) var(--sp-48); }
  .footer__top           { grid-template-columns: 1fr 1fr; gap: var(--sp-96);
                           padding-bottom: var(--sp-80); }
  .footer__facts         { grid-template-columns: 1fr 1fr;
                           gap: var(--sp-64) var(--sp-48); }
  .footer__grid          { grid-template-columns: repeat(4, 1fr); gap: var(--sp-48);
                           padding: var(--sp-80) 0; }
  .footer__col--wide     { grid-column: span 2; }
  .footer__base          { flex-direction: row; gap: var(--sp-24);
                           padding-top: var(--sp-40); }

  .sticky-call           { display: none; }

  .page-hero             { padding: var(--sp-180) var(--gutter) var(--sp-120); }
  .page-hero__inner--split { grid-template-columns: 1fr 1fr; gap: var(--sp-64);
                             align-items: end; }
  .page-hero__aside      { text-align: right; }
  .page-hero__h1         { font-size: var(--step-4); }

  .service-index         { padding: var(--sp-80) var(--gutter); }
  .service-index__inner  { grid-template-columns: repeat(4, 1fr); }
  .service-section       { padding: var(--sp-120) var(--gutter); }
  .service__body         { grid-template-columns: 1fr 1.6fr; gap: var(--sp-96); }
  .service__title        { position: sticky; top: var(--sticky-top); }

  .la-provide            { padding: var(--sp-120) var(--gutter); }
  .section-head          { grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-96); }
  .la-types              { grid-template-columns: repeat(2, 1fr); }
  .la-type:nth-child(even) { padding-left: var(--sp-48);
                             border-left: var(--border) solid var(--rule); }
  .la-eligibility,
  .la-fees,
  .la-questions          { padding: var(--sp-120) var(--gutter); }
  .la-eligibility__body  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-96);
                           align-items: start; }
  .la-fees__body         { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--sp-96);
                           align-items: start; }
  .qa-row                { grid-template-columns: 1fr 1.6fr; gap: var(--sp-64);
                           padding: var(--sp-48) 0; }

  .contact-details       { padding: 0 var(--gutter); }
  .contact-details__inner { display: grid; grid-template-columns: repeat(3, 1fr); }
  .contact-card          { padding: var(--sp-80) 0; }
  .contact-card + .contact-card { padding-left: var(--sp-64);
                                  border-left: var(--border) solid var(--rule); }
  .contact-card--phone .contact-card__value { font-size: var(--step-4); }

  .contact-form-section  { padding: var(--sp-120) var(--gutter); }
  .contact-form-section__inner { display: grid; grid-template-columns: 1fr 1.6fr;
                                 gap: var(--sp-96); align-items: start; }
  .form-row              { grid-template-columns: 1fr 1fr; }

  .contact-location      { padding: var(--sp-120) var(--gutter); }
  .contact-location__inner { display: grid; grid-template-columns: 1fr 1.6fr;
                             gap: var(--sp-96); align-items: start; }
  .contact-location__heading { position: sticky; top: var(--sp-120); }

  .page-content          { padding: var(--sp-180) var(--gutter) var(--sp-120); }
}

/* ==========================================================
   BAND 3 · 901 to 1100 · tablet and small laptop

   Two structural changes from band 4: the principle grid drops
   to three columns and the service index to two.
   ========================================================== */

@media (min-width: 901px) and (max-width: 1100px) {

  .site-nav              { padding: var(--sp-24) var(--gutter-wide); }
  .site-nav.is-scrolled  { padding: var(--sp-16) var(--gutter-wide); }
  .nav-hamburger         { display: none; }

  .hero                  { padding: var(--sp-120) var(--gutter-wide) var(--sp-56); }
  .hero__headline        { grid-template-columns: minmax(0, 1fr) auto;
                           gap: var(--sp-32); margin-bottom: var(--sp-40); }
  .hero__base            { grid-template-columns: minmax(0, 1fr) auto;
                           gap: var(--sp-24); padding-top: var(--sp-24); }

  .capabilities          { padding: var(--section-y) var(--gutter-wide); }
  .section-head--wide    { grid-template-columns: 1fr 2fr; margin-bottom: var(--sp-144); }
  .cap-row               { grid-template-columns: var(--sp-120) 1fr 1fr; gap: var(--sp-48); }
  .cap-row--offset       { margin-left: var(--cap-offset); }
  .capabilities__cta     { justify-content: center; }

  .approach              { padding: var(--section-y) var(--gutter-wide); }
  .section-head--tall    { grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-144); }
  .approach__grid        { display: grid; grid-template-columns: repeat(2, 1fr);
                           gap: var(--sp-32); }

  .testimonials          { padding: var(--sp-120) var(--gutter); }
  .section-head--short   { grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-80); }
  .testimonials__grid    { gap: var(--sp-48); }

  .closing               { padding: var(--sp-120) var(--gutter-wide); }

  .site-footer           { padding: var(--sp-100) var(--gutter-wide) var(--sp-48); }
  .footer__top           { grid-template-columns: 1fr 1fr; gap: var(--sp-64);
                           padding-bottom: var(--sp-80); }
  .footer__facts         { grid-template-columns: 1fr 1fr;
                           gap: var(--sp-56) var(--sp-32); }
  .footer__grid          { grid-template-columns: repeat(4, 1fr); gap: var(--sp-32);
                           padding: var(--sp-64) 0; }
  .footer__col--wide     { grid-column: span 2; }
  .footer__base          { flex-direction: row; gap: var(--sp-24);
                           padding-top: var(--sp-32); }

  .sticky-call           { display: none; }

  .page-hero             { padding: var(--sp-180) var(--gutter) var(--sp-120); }
  .page-hero__inner--split { grid-template-columns: 1fr 1fr; gap: var(--sp-64);
                             align-items: end; }
  .page-hero__aside      { text-align: right; }
  .page-hero__h1         { font-size: var(--step-4); }

  .service-index         { padding: var(--sp-80) var(--gutter); }
  .service-index__inner  { grid-template-columns: repeat(2, 1fr); }
  .service-section       { padding: var(--sp-120) var(--gutter); }
  .service__body         { grid-template-columns: 1fr 1.6fr; gap: var(--sp-96); }
  .service__title        { position: sticky; top: var(--sticky-top); }

  .la-provide            { padding: var(--sp-120) var(--gutter); }
  .section-head          { grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-96); }
  .la-types              { grid-template-columns: repeat(2, 1fr); }
  .la-type:nth-child(even) { padding-left: var(--sp-48);
                             border-left: var(--border) solid var(--rule); }
  .la-eligibility,
  .la-fees,
  .la-questions          { padding: var(--sp-120) var(--gutter); }
  .la-eligibility__body  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-96);
                           align-items: start; }
  .la-fees__body         { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--sp-96);
                           align-items: start; }
  .qa-row                { grid-template-columns: 1fr 1.6fr; gap: var(--sp-64);
                           padding: var(--sp-48) 0; }

  .contact-details       { padding: 0 var(--gutter); }
  .contact-details__inner { display: grid; grid-template-columns: repeat(3, 1fr); }
  .contact-card          { padding: var(--sp-80) 0; }
  .contact-card + .contact-card { padding-left: var(--sp-64);
                                  border-left: var(--border) solid var(--rule); }
  .contact-card--phone .contact-card__value { font-size: var(--step-4); }

  .contact-form-section  { padding: var(--sp-120) var(--gutter); }
  .contact-form-section__inner { display: grid; grid-template-columns: 1fr 1.6fr;
                                 gap: var(--sp-96); align-items: start; }
  .form-row              { grid-template-columns: 1fr 1fr; }

  .contact-location      { padding: var(--sp-120) var(--gutter); }
  .contact-location__inner { display: grid; grid-template-columns: 1fr 1.6fr;
                             gap: var(--sp-96); align-items: start; }
  .contact-location__heading { position: sticky; top: var(--sp-120); }

  .page-content          { padding: var(--sp-180) var(--gutter) var(--sp-120); }
}

/* ==========================================================
   BAND 2 · 601 to 900 · large phone and small tablet

   The nav becomes a drawer, the two-column heroes stack, and
   the gutters drop to the phone value.
   ========================================================== */

@media (min-width: 601px) and (max-width: 900px) {

  .site-nav,
  .site-nav.is-scrolled  { padding: var(--sp-20) var(--gutter-phone); }
  .nav-hamburger         { display: flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--accent);
    border-top: var(--border) solid var(--accent-rule-soft);
    box-shadow: var(--shadow-drawer);
    padding: var(--sp-8) var(--gutter-phone) var(--sp-28);
  }

  .nav-links.is-open     { display: flex; }
  .nav-links li          { width: 100%; }
  .nav-links a           { display: block; padding: var(--sp-22) 0;
                           font-size: var(--step-0); }
  .nav-links .nav-cta,
  .nav-links .nav-cta.is-active { display: inline-block;
                                  margin: var(--sp-20) 0 var(--sp-4); }

  /* Bottom padding clears the sticky call bar, exactly as the
     footer does. The hero pins its content to its own bottom
     edge, so without this the bar sits on the second lead and
     the 24 hour line. */
  .hero                  { padding: var(--sp-120) var(--gutter-phone)
                                    calc(var(--sp-100) + env(safe-area-inset-bottom)); }
  .hero__headline        { grid-template-columns: 1fr; margin-bottom: var(--sp-48); }
  .hero__base            { grid-template-columns: minmax(0, 1fr) auto;
                           gap: var(--sp-24) var(--sp-32); padding-top: var(--sp-24); }
  /* The sticky call bar runs in this band, so the hero's own
     Call is the same action twice and the bar was covering it.
     The bar is the better one: it is on screen the whole way
     down the page rather than only at the top. */
  .hero__actions         { display: none; }

  .capabilities          { padding: var(--section-y-phone) var(--gutter-phone); }
  .section-head--wide    { grid-template-columns: 1fr; margin-bottom: var(--sp-80); }
  .cap-row               { grid-template-columns: var(--sp-80) 1fr; gap: var(--sp-24); }
  /* Two columns here, so the title and the blurb share one and the
     sweep reaches them together. Measured: the edge crosses that
     column's midpoint at 67ms. */
  .cap-row               { --delay-invert-2: 60ms; --delay-invert-3: 60ms; }
  .cap-row__blurb        { grid-column: 2; max-width: 100%; }
  .cap-row--offset       { margin-left: 0; }
  .capabilities__cta     { justify-content: flex-start; }

  .approach              { padding: var(--section-y-phone) var(--gutter-phone); }
  .section-head--tall    { grid-template-columns: 1fr; margin-bottom: var(--sp-80); }
  .approach__grid        { display: grid; grid-template-columns: repeat(2, 1fr);
                           gap: var(--sp-32); }

  .testimonials          { padding: var(--sp-120) var(--gutter-phone); }
  .section-head--short   { grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-80); }
  .testimonials__grid    { gap: var(--sp-48); }

  .closing               { padding: var(--sp-80) var(--gutter-phone); }

  /* Bottom padding clears the sticky call bar. The source reserved
     --sp-80 against an 82px bar, so the footer legal links sat
     under it and lost part of their tap area. */
  .site-footer           { padding: var(--sp-80) var(--gutter-phone)
                                    calc(var(--sp-100) + env(safe-area-inset-bottom)); }
  .footer__top           { grid-template-columns: 1fr; gap: var(--sp-64);
                           padding-bottom: var(--sp-64); }
  .footer__facts         { grid-template-columns: 1fr 1fr;
                           gap: var(--sp-40) var(--sp-32); }
  .footer__grid          { grid-template-columns: 1fr 1fr; gap: var(--sp-40);
                           padding: var(--sp-64) 0; }
  .footer__col--wide     { grid-column: span 2; }
  .footer__base          { flex-direction: row; gap: var(--sp-24);
                           padding-top: var(--sp-32); }

  .sticky-call           { display: flex; }

  .page-hero             { padding: var(--sp-140) var(--gutter-phone) var(--sp-80); }
  .page-hero__inner--split { grid-template-columns: 1fr; gap: var(--sp-32);
                             align-items: start; }
  .page-hero__aside      { text-align: left; }
  .page-hero__h1         { font-size: var(--step-4); }

  .service-index         { padding: var(--sp-60) var(--gutter-phone); }
  .service-index__inner  { grid-template-columns: repeat(2, 1fr); }
  .service-section       { padding: var(--sp-80) var(--gutter-phone); }
  .service__body         { grid-template-columns: 1fr; gap: var(--sp-48); }
  .service__title        { position: static; }

  .la-provide            { padding: var(--sp-120) var(--gutter-phone); }
  .section-head          { grid-template-columns: 1fr; margin-bottom: var(--sp-64); }
  .la-types              { grid-template-columns: 1fr; }
  .la-type:nth-child(even) { padding-left: 0; border-left: 0; }
  .la-eligibility,
  .la-fees,
  .la-questions          { padding: var(--sp-80) var(--gutter-phone); }
  .la-eligibility__body,
  .la-fees__body         { display: grid; grid-template-columns: 1fr; gap: var(--sp-48);
                           align-items: start; }
  .qa-row                { grid-template-columns: 1fr; gap: var(--sp-24);
                           padding: var(--sp-36) 0; }

  .contact-details       { padding: 0 var(--gutter-phone); }
  .contact-details__inner { display: grid; grid-template-columns: 1fr; }
  .contact-card          { padding: var(--sp-48) 0;
                           border-top: var(--border) solid var(--rule); }
  .contact-card + .contact-card { padding-left: 0; border-left: 0; }
  .contact-card--phone .contact-card__value { font-size: var(--step-contact-phone); }

  .contact-form-section  { padding: var(--sp-80) var(--gutter-phone); }
  .contact-form-section__inner { display: grid; grid-template-columns: 1fr;
                                 gap: var(--sp-56); align-items: start; }
  .form-row              { grid-template-columns: 1fr; }

  .contact-location      { padding: var(--sp-80) var(--gutter-phone); }
  .contact-location__inner { display: grid; grid-template-columns: 1fr;
                             gap: var(--sp-48); align-items: start; }
  .contact-location__heading { position: static; }

  .page-content          { padding: var(--sp-140) var(--gutter-phone) var(--sp-80); }
}

/* ==========================================================
   BAND 1 · 600 and below · phone

   Everything that was still paired drops to a single column.
   ========================================================== */

@media (max-width: 600px) {

  .site-nav,
  .site-nav.is-scrolled  { padding: var(--sp-20) var(--gutter-phone); }
  .nav-hamburger         { display: flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--accent);
    border-top: var(--border) solid var(--accent-rule-soft);
    box-shadow: var(--shadow-drawer);
    padding: var(--sp-8) var(--gutter-phone) var(--sp-28);
  }

  .nav-links.is-open     { display: flex; }
  .nav-links li          { width: 100%; }
  .nav-links a           { display: block; padding: var(--sp-22) 0;
                           font-size: var(--step-0); }
  .nav-links .nav-cta,
  .nav-links .nav-cta.is-active { display: inline-block;
                                  margin: var(--sp-20) 0 var(--sp-4); }

  /* Bottom padding clears the sticky call bar, exactly as the
     footer does. */
  .hero                  { padding: var(--sp-100) var(--gutter-phone)
                                    calc(var(--sp-100) + env(safe-area-inset-bottom)); }
  .hero__headline        { grid-template-columns: 1fr; margin-bottom: var(--sp-40); }
  .hero__h1              { font-size: var(--step-display-phone); }
  .hero__base            { grid-template-columns: 1fr; gap: var(--sp-20);
                           padding-top: var(--sp-24); }
  .hero__lead            { max-width: none; }
  /* Single column here, so the block reads left. The link is a
     flex column and aligns its own children, so it has to be
     turned round too or the score sits indented above the wider
     review line. */
  .hero__proof           { text-align: left; }
  .hero__proof-link      { align-items: flex-start; }
  /* The sticky call bar runs in this band, so the hero's own
     Call is the same action twice and the bar was covering it.
     The bar is the better one: it is on screen the whole way
     down the page rather than only at the top. */
  .hero__actions         { display: none; }

  .capabilities          { padding: var(--section-y-phone) var(--gutter-phone); }
  .section-head--wide    { grid-template-columns: 1fr; margin-bottom: var(--sp-80); }
  .cap-row               { grid-template-columns: 1fr; gap: var(--sp-16); }
  /* One column, so all three sit across the full width and the edge
     crosses every midpoint at the same 67ms. */
  .cap-row               { --delay-invert-1: 60ms; --delay-invert-2: 60ms;
                           --delay-invert-3: 60ms; }
  .cap-row__blurb        { grid-column: 1; max-width: 100%; }
  .cap-row--offset       { margin-left: 0; }
  .capabilities__cta     { justify-content: flex-start; }

  .approach              { padding: var(--section-y-phone) var(--gutter-phone); }
  .section-head--tall    { grid-template-columns: 1fr; margin-bottom: var(--sp-80); }
  .approach__grid        { display: grid; grid-template-columns: 1fr; gap: var(--sp-32); }

  .testimonials          { padding: var(--sp-120) var(--gutter-phone); }
  .section-head--short   { grid-template-columns: 1fr; margin-bottom: var(--sp-48); }
  .testimonials__grid    { grid-template-columns: 1fr; gap: var(--sp-40); }

  .closing               { padding: var(--sp-80) var(--gutter-phone); }

  /* Bottom padding clears the sticky call bar. The source reserved
     --sp-80 against an 82px bar, so the footer legal links sat
     under it and lost part of their tap area. */
  .site-footer           { padding: var(--sp-80) var(--gutter-phone)
                                    calc(var(--sp-100) + env(safe-area-inset-bottom)); }
  .footer__top           { grid-template-columns: 1fr; gap: var(--sp-56);
                           padding-bottom: var(--sp-56); }
  .footer__facts         { grid-template-columns: 1fr; gap: var(--sp-32); }
  .footer__grid          { grid-template-columns: 1fr; gap: var(--sp-40);
                           padding: var(--sp-56) 0; }
  .footer__col--wide     { grid-column: auto; }
  .footer__base          { flex-direction: column; gap: var(--sp-16);
                           padding-top: var(--sp-32); }
  /* Stacked, so nothing grows and nothing centres itself. */
  .footer__copy,
  .footer__credit,
  .footer__legal         { flex: 0 1 auto; }
  .footer__credit        { text-align: left; }
  .footer__legal         { justify-content: flex-start; }

  .sticky-call           { display: flex; }

  .page-hero             { padding: var(--sp-140) var(--gutter-phone) var(--sp-80); }
  .page-hero__inner--split { grid-template-columns: 1fr; gap: var(--sp-32);
                             align-items: start; }
  .page-hero__aside      { text-align: left; }
  .page-hero__h1         { font-size: var(--step-display-phone); }

  .service-index         { padding: var(--sp-60) var(--gutter-phone); }
  .service-index__inner  { grid-template-columns: 1fr; }
  .service-section       { padding: var(--sp-80) var(--gutter-phone); }
  .service__body         { grid-template-columns: 1fr; gap: var(--sp-48); }
  .service__title        { position: static; }

  .la-provide            { padding: var(--sp-120) var(--gutter-phone); }
  .section-head          { grid-template-columns: 1fr; margin-bottom: var(--sp-64); }
  .la-types              { grid-template-columns: 1fr; }
  .la-type:nth-child(even) { padding-left: 0; border-left: 0; }
  .la-eligibility,
  .la-fees,
  .la-questions          { padding: var(--sp-80) var(--gutter-phone); }
  .la-eligibility__body,
  .la-fees__body         { display: grid; grid-template-columns: 1fr; gap: var(--sp-48);
                           align-items: start; }
  .qa-row                { grid-template-columns: 1fr; gap: var(--sp-24);
                           padding: var(--sp-36) 0; }

  .contact-details       { padding: 0 var(--gutter-phone); }
  .contact-details__inner { display: grid; grid-template-columns: 1fr; }
  .contact-card          { padding: var(--sp-48) 0;
                           border-top: var(--border) solid var(--rule); }
  .contact-card + .contact-card { padding-left: 0; border-left: 0; }
  .contact-card--phone .contact-card__value { font-size: var(--step-contact-phone); }

  .contact-form-section  { padding: var(--sp-80) var(--gutter-phone); }
  .contact-form-section__inner { display: grid; grid-template-columns: 1fr;
                                 gap: var(--sp-56); align-items: start; }
  .form-row              { grid-template-columns: 1fr; }

  .contact-location      { padding: var(--sp-80) var(--gutter-phone); }
  .contact-location__inner { display: grid; grid-template-columns: 1fr;
                             gap: var(--sp-48); align-items: start; }
  .contact-location__heading { position: static; }

  .page-content          { padding: var(--sp-140) var(--gutter-phone) var(--sp-80); }
}