/* ==========================================================
   ht-acc / layout.css
   Layer 3 composition: the frame, the section wrappers and
   their grids, and the three breakpoint bands.

   The band conditions are the only literal values in this
   file, and the only ones anywhere outside tokens.css that
   are not a placeholder or a generated asset. CSS does not
   permit a custom property inside a media feature and there
   is no build step to substitute one, so 760 and 1100 are
   literal by necessity. Everything the bands then reassign
   is a named token.
   ========================================================== */

/* ═ frame ════════════════════════════════════════════════ */

.ds-shell {
  inline-size: 100%;
  max-inline-size: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The header is a shell that runs wider than the content column,
   so the brand and the call to action sit closer to the screen
   edges than the sections below them. It has to be declared here
   rather than with the component: .site-header__inner carries
   .ds-shell too, and at equal specificity the later file wins. */
.site-header__inner { max-inline-size: var(--header-max); padding-inline: var(--header-gutter); }

main { background: var(--bg-page); }

/* ═ 2 hero ═══════════════════════════════════════════════ */

/* isolation, not a negative layer. The field paints behind the
   headline, and a negative z-index would put it behind every
   non-positioned ancestor background rather than behind the
   text, so it would vanish under the page. */
.hero-wrap { position: relative; isolation: isolate; z-index: var(--z-base); }

.hero {
  position: relative;
  z-index: var(--z-raise);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-block-size: var(--hero-min-h);
  padding-block: var(--hero-pad-block-start) var(--hero-pad-block-end);
}

/* The inner pages take the same hero without its field. */
.hero--page { min-block-size: 0; align-items: flex-start; }
.hero--page .hero__copy { gap: var(--sp-20); }

/* ═ 3 dark sloped panel ══════════════════════════════════ */

.stats { position: relative; z-index: var(--z-raise); }

/* A diagonal slope with filleted ends. The edge holds high for
   the first --step-w of the width, eases down --step-h across
   --slope-run, then runs flat to the right edge. Both
   junctions are sampled off an arc so neither reads as a
   point. */
.stats__body {
  position: relative;
  background: var(--bg-panel);
  color: var(--text-inverse);
  border-radius: var(--stats-radius);
  clip-path: polygon(
    0 0,
    calc(var(--step-w) - (var(--slope-run) * 0.143)) 0,
    calc(var(--step-w) - (var(--slope-run) * 0.071)) calc(var(--step-h) * 0.011),
    calc(var(--step-w) - (var(--slope-run) * 0.004)) calc(var(--step-h) * 0.046),
    calc(var(--step-w) + (var(--slope-run) * 0.064)) calc(var(--step-h) * 0.102),
    calc(var(--step-w) + (var(--slope-run) * 0.129)) calc(var(--step-h) * 0.182),
    calc(var(--step-w) + (var(--slope-run) * 0.582)) calc(var(--step-h) * 0.818),
    calc(var(--step-w) + (var(--slope-run) * 0.650)) calc(var(--step-h) * 0.898),
    calc(var(--step-w) + (var(--slope-run) * 0.718)) calc(var(--step-h) * 0.954),
    calc(var(--step-w) + (var(--slope-run) * 0.786)) calc(var(--step-h) * 0.989),
    calc(var(--step-w) + (var(--slope-run) * 0.857)) var(--step-h),
    100% var(--step-h),
    100% 100%,
    0 100%
  );
  overflow: hidden;
}

.stats__inner {
  position: relative;
  z-index: var(--z-raise);
  padding-block: calc(var(--step-h) + var(--stats-pad-block-start)) var(--stats-pad-block-end);
  display: flex;
  flex-direction: column;
}

/* ═ 4 heading row ════════════════════════════════════════ */

.headrow {
  display: grid;
  grid-template-columns: var(--headrow-cols);
  gap: var(--sp-26);
  align-items: var(--headrow-align);
  padding-block: var(--headrow-pad-start) var(--sp-52);
}

/* ═ 5 data bento ═════════════════════════════════════════ */

.bento {
  display: grid;
  grid-template-columns: var(--bento-cols);
  gap: var(--tiles-gap);
  align-items: stretch;
  padding-block-end: var(--section-gap);
}

/* ═ 6 services tiles ═════════════════════════════════════ */

.ledger { padding-block-end: var(--section-gap); }

.tiles {
  display: grid;
  grid-template-columns: var(--tiles-cols);
  grid-template-rows: var(--tiles-rows);
  gap: var(--tiles-gap);
}

/* ═ 7 split with steps ═══════════════════════════════════ */

.split {
  display: grid;
  grid-template-columns: var(--split-cols);
  gap: var(--split-gap);
  align-items: start;
  padding-block: var(--split-pad-start) var(--split-pad-end);
}

/* ═ 8 audience carousel ══════════════════════════════════ */

.serve { padding-block-end: var(--section-gap); }

.serve__head {
  display: grid;
  grid-template-columns: var(--serve-head-cols);
  gap: var(--sp-38) var(--gutter);
  align-items: end;
  padding-block: var(--sp-24) var(--sp-52);
}

/* ═ 9 testimonials ═══════════════════════════════════════ */

.band { background: var(--bg-card); padding-block: var(--band-pad-block); }

.band__head {
  display: grid;
  grid-template-columns: var(--band-head-cols);
  gap: var(--sp-32);
  align-items: end;
  padding-block-end: var(--sp-76);
}

.band__grid {
  display: grid;
  grid-template-columns: var(--band-cols);
  gap: var(--band-gap);
  align-items: stretch;
}

/* ═ 10 closing cta ═══════════════════════════════════════ */

.cta-wrap { padding-block: var(--section-gap); }

/* ═ 12 footer ════════════════════════════════════════════ */

.footer {
  background: var(--bg-panel);
  color: var(--text-inverse);
  border-start-start-radius: var(--radius);
  border-start-end-radius: var(--radius);
  padding-block: var(--footer-pad-block) var(--sp-38);
}

.footer__lead {
  display: grid;
  grid-template-columns: var(--footer-lead-cols);
  gap: var(--sp-52) var(--gutter);
  align-items: start;
  padding-block-end: var(--footer-row-gap);
}

.footer__meta { display: grid; grid-template-columns: var(--footer-meta-cols); gap: var(--sp-52) var(--gutter); }

.footer__cols {
  display: grid;
  grid-template-columns: var(--footer-cols);
  gap: var(--sp-38) var(--gutter);
  align-items: start;
  padding-block: var(--footer-row-gap);
}

.footer__bottom {
  display: grid;
  grid-template-columns: var(--footer-bottom-cols);
  gap: var(--sp-20) var(--gutter);
  align-items: center;
  padding-block-start: var(--sp-38);
  font-size: var(--footer-bottom-size);
  color: var(--text-inverse-soft);
}

/* ═ inner page composition ═══════════════════════════════ */

.page-hero { padding-block: var(--sp-64) var(--sp-52); }
.page-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-20); }

.page-body { padding-block-end: var(--section-gap); }

.contact-grid { display: grid; grid-template-columns: var(--bento-cols); gap: var(--tiles-gap); align-items: start; }

/* ══════════════════════════════════════════════════════════
   BANDS

   Three, closed at both ends except the last, at this
   design's own collapse points rather than the kit's default
   767 / 1023 / 1439.

   The composition changes structure at exactly two widths.
   At 1100 the paired columns go single: the heading row, the
   bento, the split, the carousel head and the footer lead all
   collapse, and the six-column tile grid becomes two. At 760
   the tile grid becomes one, the nav capsule gives way to a
   drawer, the chart labels shorten to initials and the
   testimonial grid goes single. Nothing changes anywhere
   else, and 1440 is a ceiling rather than a boundary: the
   content column stops growing there and only the bleed
   changes, so a band above it would carry no rules.

   kit-layers.md places breakpoints in layer 3, so the
   discipline is the rule and the numbers are this build's.
   Every band is closed except the last, no band boundary is
   anything but a change of structure, and every value either
   band reassigns is a named token in tokens.css. The count is
   three rather than four, and md/README.md carries the
   written reason the kit asks for.

   Each band restates every value that varies rather than
   inheriting from the band above, so one band can be read on
   its own.
   ══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   BAND 3 · 1101 and up · laptop and desktop
   The base contract in tokens.css is this band, so it
   reassigns nothing. Listed for the two structural rules it
   does own.
   ───────────────────────────────────────────────────────── */

@media (min-width: 1101px) {

  .nav-hamburger        { display: none; }
  .nav-drawer           { display: none; }
}

/* ─────────────────────────────────────────────────────────
   BAND 2 · 761 to 1100 · tablet and small laptop
   ───────────────────────────────────────────────────────── */

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

  :root {
    --band-head-cols:              var(--band-head-cols-tablet);
    --bento-cols:                  var(--bento-cols-tablet);
    --brand-mark:                  var(--brand-mark-tablet);
    --footer-cols:                 var(--footer-cols-tablet);
    --footer-lead-cols:            var(--footer-lead-cols-tablet);
    --footer-title-w:              var(--footer-title-w-tablet);
    --fs-figure:                   var(--fs-figure-tablet);
    --fs-h2:                       var(--fs-h2-tablet);
    --fs-h2-dark:                  var(--fs-h2-dark-tablet);
    --fs-h2-lg:                    var(--fs-h2-lg-tablet);
    --fs-h3:                       var(--fs-h3-tablet);
    --fs-hero:                     var(--fs-hero-tablet);
    --gutter:                      var(--gutter-tablet);
    --header-gutter:               var(--header-gutter-tablet);
    --header-h:                    var(--header-h-tablet);
    --headrow-aside-align:         var(--headrow-aside-align-tablet);
    --headrow-aside-justify:       var(--headrow-aside-justify-tablet);
    --headrow-cols:                var(--headrow-cols-tablet);
    --headrow-pad-start:           var(--headrow-pad-start-tablet);
    --hero-copy-w:                 var(--hero-copy-w-tablet);
    --ledger-w:                    var(--ledger-w-tablet);
    --ledger-hold:                 var(--ledger-hold-tablet);
    --ledger-pitch:                var(--ledger-pitch-tablet);
    --ledger-inset:                var(--ledger-inset-tablet);
    --nav-link-pad:                var(--nav-link-pad-tablet);
    --quote-card-h:                var(--quote-card-h-tablet);
    --section-gap:                 var(--section-gap-tablet);
    --serve-head-cols:             var(--serve-head-cols-tablet);
    --serve-visible:               var(--serve-visible-tablet);
    --slope-run:                   var(--slope-run-tablet);
    --split-cols:                  var(--split-cols-tablet);
    --split-gap:                   var(--split-gap-tablet);
    --split-pad-end:               var(--split-pad-end-tablet);
    --split-pad-start:             var(--split-pad-start-tablet);
    --stats-pad-block-end:         var(--stats-pad-block-end-tablet);
    --step-w:                      var(--step-w-tablet);
    --tile-1-col:                  var(--tile-1-col-tablet);
    --tile-1-row:                  var(--tile-1-row-tablet);
    --tile-2-col:                  var(--tile-2-col-tablet);
    --tile-2-row:                  var(--tile-2-row-tablet);
    --tile-3-col:                  var(--tile-3-col-tablet);
    --tile-3-row:                  var(--tile-3-row-tablet);
    --tile-4-col:                  var(--tile-4-col-tablet);
    --tile-4-row:                  var(--tile-4-row-tablet);
    --tile-5-col:                  var(--tile-5-col-tablet);
    --tile-5-row:                  var(--tile-5-row-tablet);
    --tile-6-col:                  var(--tile-6-col-tablet);
    --tile-6-row:                  var(--tile-6-row-tablet);
    --tile-half-h:                 var(--tile-half-h-tablet);
    --tile-name-size:              var(--tile-name-size-tablet);
    --tile-row-h:                  var(--tile-row-h-tablet);
    --tiles-cols:                  var(--tiles-cols-tablet);
    --tiles-rows:                  var(--tiles-rows-tablet);
  }


  /* The drawer covers this band as well as the phone one, so the
     switch from a row of links to a hamburger happens at 1100
     rather than at 760. Restated here rather than inherited,
     because closed bands do not cascade.

     The call to action goes with the links. Wherever the
     hamburger is the way through, the header is the brand and
     that one control, and Contact is the last item in the drawer
     list. effects.css and noscript.css put the button back when
     there is no script, because then there is no hamburger. */
  .navcap           { display: none; }
  .nav-hamburger    { display: flex; }
  .site-header .btn { display: none; }
}

/* ─────────────────────────────────────────────────────────
   BAND 1 · 760 and below · phone
   ───────────────────────────────────────────────────────── */

@media (max-width: 760px) {

  :root {
    --accred-gap:                  var(--accred-gap-phone);
    --band-cols:                   var(--band-cols-phone);
    --band-head-cols:              var(--band-head-cols-phone);
    --band-pad-block:              var(--band-pad-block-phone);
    --band-title-w:                var(--band-title-w-phone);
    --bento-cols:                  var(--bento-cols-phone);
    --brand-mark:                  var(--brand-mark-phone);
    --chart-gap:                   var(--chart-gap-phone);
    --chart-h:                     var(--chart-h-phone);
    --chart-label-size:            var(--chart-label-size-phone);
    --cta-line-w:                  var(--cta-line-w-phone);
    --cta-pad-block:               var(--cta-pad-block-phone);
    --cta-pad-inline:              var(--cta-pad-inline-phone);
    --cta-stack-gap:               var(--cta-stack-gap-phone);
    --datacard-pad:                var(--datacard-pad-phone);
    --footer-bottom-cols:          var(--footer-bottom-cols-phone);
    --footer-bottom-end:           var(--footer-bottom-end-phone);
    --footer-bottom-mid:           var(--footer-bottom-mid-phone);
    --footer-cols:                 var(--footer-cols-phone);
    --footer-lead-cols:            var(--footer-lead-cols-phone);
    --footer-meta-cols:            var(--footer-meta-cols-phone);
    --footer-pad-block:            var(--footer-pad-block-phone);
    --footer-row-gap:              var(--footer-row-gap-phone);
    --footer-title-size:           var(--footer-title-size-phone);
    --footer-title-w:              var(--footer-title-w-phone);
    --fs-figure:                   var(--fs-figure-phone);
    --fs-h2:                       var(--fs-h2-phone);
    --fs-h2-dark:                  var(--fs-h2-dark-phone);
    --fs-h2-lg:                    var(--fs-h2-lg-phone);
    --fs-hero:                     var(--fs-hero-phone);
    --gutter:                      var(--gutter-phone);
    --header-gutter:               var(--header-gutter-phone);
    --header-cols:                 var(--header-cols-phone);
    --header-h:                    var(--header-h-phone);
    --headrow-aside-align:         var(--headrow-aside-align-phone);
    --headrow-aside-justify:       var(--headrow-aside-justify-phone);
    --headrow-cols:                var(--headrow-cols-phone);
    --headrow-pad-start:           var(--headrow-pad-start-phone);
    --hero-copy-w:                 var(--hero-copy-w-phone);
    --hero-min-h:                  var(--hero-min-h-phone);
    --hero-pad-block-end:          var(--hero-pad-block-end-phone);
    --hero-pad-block-start:        var(--hero-pad-block-start-phone);
    --hero-share:                  var(--hero-share-phone);
    --nav-link-pad:                var(--nav-link-pad-phone);
    --quote-card-h:                var(--quote-card-h-phone);
    --quote-card-pad:              var(--quote-card-pad-phone);
    --section-gap:                 var(--section-gap-phone);
    --serve-card-h:                var(--serve-card-h-phone);
    --serve-card-pad:              var(--serve-card-pad-phone);
    --serve-head-cols:             var(--serve-head-cols-phone);
    --serve-visible:               var(--serve-visible-phone);
    --slope-run:                   var(--slope-run-phone);
    --split-cols:                  var(--split-cols-phone);
    --split-gap:                   var(--split-gap-phone);
    --split-pad-end:               var(--split-pad-end-phone);
    --split-pad-start:             var(--split-pad-start-phone);
    --stats-pad-block-end:         var(--stats-pad-block-end-phone);
    --stats-pad-block-start:       var(--stats-pad-block-start-phone);
    --stats-row2-pad-block:        var(--stats-row2-pad-block-phone);
    --step-h:                      var(--step-h-phone);
    --step-w:                      var(--step-w-phone);
    --tile-1-col:                  var(--tile-1-col-phone);
    --tile-1-row:                  var(--tile-1-row-phone);
    --tile-2-col:                  var(--tile-2-col-phone);
    --tile-2-row:                  var(--tile-2-row-phone);
    --tile-3-col:                  var(--tile-3-col-phone);
    --tile-3-row:                  var(--tile-3-row-phone);
    --tile-4-col:                  var(--tile-4-col-phone);
    --tile-4-row:                  var(--tile-4-row-phone);
    --tile-5-col:                  var(--tile-5-col-phone);
    --tile-5-row:                  var(--tile-5-row-phone);
    --tile-6-col:                  var(--tile-6-col-phone);
    --tile-6-row:                  var(--tile-6-row-phone);
    --tile-feature-name-size:      var(--tile-feature-name-size-phone);
    --tile-half-h:                 var(--tile-half-h-phone);
    --tile-min-h:                  var(--tile-min-h-phone);
    --tile-pad:                    var(--tile-pad-phone);
    --tile-row-h:                  var(--tile-row-h-phone);
    --tiles-cols:                  var(--tiles-cols-phone);
    --tiles-gap:                   var(--tiles-gap-phone);
    --tiles-rows:                  var(--tiles-rows-phone);
  }

  /* The field goes entirely. At this width the headline takes
     the column and there is no room left for it to fade into,
     so the honest answer is nothing rather than a token
     gesture squeezed behind the type. */
  .hero__deco { display: none; }

  /* Same as the band above: no row of links, a hamburger instead.
     The source hid the capsule here and put nothing in its place,
     which was survivable on one page with in-page anchors and is
     not on a site with more than one. */
  .navcap        { display: none; }
  .nav-hamburger { display: flex; }

  /* Same as the band above, and here it is also a fit problem:
     two controls plus the brand do not go at 375. The wordmark
     was wrapping to three lines and the button was drawn over
     it. */
  .site-header .btn { display: none; }

  /* The call bar, and the room it needs. The padding is the bar's
     own derived height, so the footer clears it rather than
     sitting underneath. */
  .sticky-call { display: block; }
  body { padding-block-end: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px)); }

  .chart__label__full  { display: none; }
  .chart__label__short { display: inline; }

  .tile { min-block-size: var(--tile-min-h); }

  .contact-grid { grid-template-columns: 1fr; }
}