/* ============================================================
   DTS site skin — literal port of dragonmetrics.com design system
   (styling used by permission of the owner). Component rules lifted
   from dm.min.css and adapted: asset paths → /dts/images/dm/,
   fixed page heights → content-driven, content = DTS (Strike 1).
   Source session: docs/sessions/2026/07-July/2026-07-23_dts-website-strategic-review.md
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Work Sans', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem; line-height: 1.375rem; color: #000; font-weight: 400; background: #fff;
  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-family: inherit; margin: 0; color: #000; font-weight: 600; }
h1 { font-size: 2rem; line-height: 2.375rem; margin-bottom: .5em; }
h2 { font-size: 1.625rem; line-height: 2rem; margin-bottom: .2em; }
h3 { font-size: 1.375rem; line-height: 1.75rem; margin-bottom: .2em; }
ul { list-style: none; }
a { color: inherit; }
img { max-width: 100%; }

/* ─── container (DM: 728 / 932 / 1080) ─── */
.container { padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; width: 100%; }
@media (min-width: 768px)  { .container { width: 728px; } }
@media (min-width: 992px)  { .container { width: 932px; } }
@media (min-width: 1200px) { .container { width: 1080px; } }
.clear::after { content: ''; display: table; clear: both; }

/* ─── buttons (DM .button system) ─── */
.button {
  font-size: .9375rem; line-height: 1.125rem; text-decoration: none; color: #fff;
  letter-spacing: .25px; padding: 12px 30px; border-radius: 100px; cursor: pointer;
  display: inline-block; border: 0; transition: all 150ms ease-out;
}
.button.is-filled {
  background-image: linear-gradient(-179deg, #FBDA5C 0%, #F4BB3B 52%, #EDAC1C 100%);
  box-shadow: 4px 4px 12px rgba(0,0,0,.1);
  padding-top: 14px; padding-bottom: 14px; font-weight: 600; color: #fff;
}
.button.is-filled:hover { color: #fff; filter: brightness(1.05); }
.button.is-bordered { border: 2px solid #fff; color: #fff; padding-top: 12px; padding-bottom: 12px; }
.button.is-bordered:hover { color: #fff; background: rgba(255,255,255,.12); }
.button.is-in-nav { font-size: .9375rem; line-height: 1.125rem; font-weight: 600; padding: 12px 24px; }
.uppercase { text-transform: uppercase; }
.font-600 { font-weight: 600; }
.mar-right-20 { margin-right: 20px; }

/* ─── main nav (DM white/scroll-active variant — the overview-page nav) ─── */
.main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #fff; box-shadow: 4px 4px 12px rgba(0,0,0,.1); height: 76px;
}
.main-nav .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.main-nav .logo img { height: 60px; width: auto; display: block; }
.main-nav .wrap { display: flex; align-items: center; gap: 34px; }
.main-nav .wrap .main-nav-item a { color: #4d4e58; text-decoration: none; font-size: .9375rem; font-weight: 500; transition: all 150ms ease-out; }
.main-nav .wrap .main-nav-item a:hover { color: #409ac3; }
/* Ag'merica's nav inherited DTS's blue hover — green on a green site. */
.main-nav.ag .wrap .main-nav-item a:hover { color: #2F7A1C; }
.main-nav .wrap .main-nav-item a.button.is-filled { color: #fff; }
.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; }
.hamburger span { display: block; width: 24px; height: 2px; background: #4d4e58; }

/* ─── hero background (DM .hero-background + .svg-bg, height content-driven) ─── */
.hero-background { position: relative; padding-top: 76px; overflow: hidden; }
.svg-bg {
  position: absolute; top: -1px; left: 0; right: 0; bottom: 0; z-index: -1;
  background-color: #0a5bab; /* fallback so white hero text is never on white */
  background-image: url(/dts/images/dm/320p.svg), linear-gradient(-79deg, #1BB8EB 0%, #004899 98%);
  background-size: cover; background-repeat: no-repeat; background-position: 50% 0;
  width: 100%; height: 100%;
}
@media (min-width: 768px)  { .svg-bg { background-image: url(/dts/images/dm/768p.svg), linear-gradient(-79deg, #1BB8EB 0%, #004899 98%); } }
@media (min-width: 992px)  { .svg-bg { background-image: url(/dts/images/dm/992p.svg), linear-gradient(-79deg, #1BB8EB 0%, #004899 98%); } }
@media (min-width: 1200px) { .svg-bg { background-image: url(/dts/images/dm/1200p.svg), linear-gradient(-79deg, #1BB8EB 0%, #004899 98%); } }

/* ─── hero (DM .hero.home / .slogan / .hero-title / .hero-subtitle / .mock) ─── */
.hero.home { padding: 70px 0 110px; overflow: hidden; }
.hero.home .container { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.hero.home .slogan { min-width: 414px; max-width: 424px; }
.hero-title { font-size: 3rem; line-height: 3.5rem; color: #fff; margin-bottom: 22px; }
.hero-title span:first-child { font-weight: 300; }
.hero-title span:last-child { font-weight: 700; }
.hero-subtitle { font-size: 1.25rem; line-height: 1.875rem; color: #fff; font-weight: 400; margin-bottom: 40px; }
.hero.home .button { min-width: 180px; padding: 14px 29px; text-align: center; }
.hero.home .mock { position: relative; }
.hero.home .mock .card {
  background: #fff; border-radius: 20px; box-shadow: 4px 2px 18px rgba(0,0,0,.2);
  padding: 34px 36px; max-width: 430px;
}
.mock-chip {
  display: inline-block; background-image: linear-gradient(-49deg, #67EAE5 -40%, #00AEC3 10%, #002960 100%);
  border-radius: 10px; padding: 12px 18px; margin-bottom: 18px;
}
.mock-chip img { height: 30px; width: auto; display: block; }
.mock-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: #002960; margin-bottom: 6px; }
.mock-sub { font-size: 1rem; line-height: 1.5rem; color: #4d4e58; font-weight: 400; margin-bottom: 14px; }
.mock-meta { font-size: .8125rem; line-height: 1.25rem; color: #8e96a3; }
.cov-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 14px 0 12px; }
.cov-list li { font-size: .875rem; line-height: 1.45rem; color: #464d57; font-weight: 500; white-space: nowrap; }
.cov-list li::before { content: '\2713  '; color: #00AEC3; font-weight: 700; }
.cov-more { font-size: .8125rem; color: #8e96a3; margin-bottom: 14px; }
.cov-tool { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.cov-select { padding: 9px 12px; border: 1px solid #d6e1ea; border-radius: 8px; font-family: inherit; font-size: .875rem; color: #1c2733; background: #fff; }
.cov-select:disabled { opacity: .5; }
.cov-select:focus { outline: none; border-color: #0072bc; }
.cov-result { border-top: 1px solid #e5ecf1; margin-top: 4px; padding-top: 12px; margin-bottom: 12px; }
.cov-verdict { font-weight: 700; color: #002960; font-size: 1rem; margin-bottom: 6px; }
.cov-verdict.yes { color: #15803d; }
.cov-plats { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.cov-plats img { height: 15px; width: auto; }
.cov-line { font-size: .8125rem; color: #4d4e58; margin: 3px 0; line-height: 1.45; }
.cov-ctas { display: flex; gap: 10px; margin-top: 12px; }
.cov-ctas .button { padding: 9px 18px; font-size: .8125rem; }
.cov-viezu { display: flex; align-items: center; gap: 12px; border-top: 1px solid #e5ecf1; padding-top: 14px; }
.cov-viezu img { height: 22px; width: auto; }
.cov-viezu span { font-size: .8125rem; font-weight: 600; color: #002960; }
/* The ag tally sits under the Viezu credential in the lookup card: same row
   shape, a numeral in place of the logo. Both chips are held to ONE width so the
   two sentences start on the same left edge — at natural width they were 80px
   and 63px, and the text ran ragged between the rows (Josh, 2026-07-28). */
.cov-viezu .mock-chip, .cov-tally .tally-chip {
  flex: 0 0 80px; width: 80px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
}
.cov-tally { margin-top: 8px; padding-top: 8px; }
.tally-chip {
  border-radius: 10px; padding: 8px 6px;
  background-image: linear-gradient(-49deg, #8ED94F -40%, #3E8B1E 30%, #0E2A12 100%);
  color: #fff !important; font-size: .9375rem !important; font-weight: 700; letter-spacing: .01em;
}
/* the card had grown tall enough to crowd the fold — the slack comes out of the
   spacing around the credential rows, not out of what they say */
.cov-viezu { padding-top: 10px; }
.cov-viezu span:last-child { font-size: .75rem; line-height: 1.5; }
.cov-result[hidden] { display: none; }
.cov-more { margin-bottom: 10px; }

/* ─── platform bar (DM .company) ─── */
.company { padding: 34px 0 26px; background: #fff; }
.company-label {
  text-align: center; font-size: .75rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #8e96a3; margin-bottom: 18px;
}
.company-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.company-wrap span { font-size: 1.0625rem; font-weight: 600; color: #4d4e58; opacity: .45; transition: opacity 150ms ease-out; }
.company-wrap span:hover { opacity: 1; }
.company-wrap a img { display: block; width: auto; opacity: .8; transition: opacity 150ms ease-out; }
.company-wrap a:hover img { opacity: 1; }
.tool-badge img { display: block; margin: 0 auto; width: auto; max-width: 100%; }

.divider { width: 100%; height: 1px; background: #e5ecf1; }
.flex-center { display: flex; justify-content: center; }

/* ─── icon feature grid (DM .feature; badges = CSS port of DM's circular gradient icons) ─── */
.feature { padding: 40px 0 25px; background: #fff; }
.feature .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.feature .cell { text-align: center; padding: 25px 10px; }
/* The six icons are now doorways into the page (Josh, 2026-07-27: "each of
   these ... icons should link to the relevant info on the site"). They must
   read as clickable without turning into six blue links. */
a.cell { display: block; text-decoration: none; color: inherit; border-radius: 14px;
         transition: transform 160ms ease-out, background-color 160ms ease-out; }
a.cell:hover, a.cell:focus-visible { background: rgba(0, 40, 90, .05); transform: translateY(-3px); }
a.cell:focus-visible { outline: 2px solid #0072bc; outline-offset: 2px; }
a.cell .feature-badge { transition: box-shadow 160ms ease-out; }
a.cell:hover .feature-badge { box-shadow: 0 8px 20px rgba(0, 20, 60, .22); }
.feature-badge {
  width: 120px; height: 120px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 4px 2px 18px rgba(0,0,0,.18);
}
.feature-badge svg { width: 52px; height: 52px; }
.feature-badge.b1 { background-image: linear-gradient(-30deg, #FBDA5C, #EDAC1C); }
.feature-badge.b2 { background-image: linear-gradient(-30deg, #E24BA9, #6D2881); }
.feature-badge.b3 { background-image: linear-gradient(-30deg, #67EAE5, #00AEC3); }
.feature-badge.b4 { background-image: linear-gradient(-30deg, #71BCFE, #0964BD); }
.feature-badge.b5 { background-image: linear-gradient(-30deg, #FFC06B, #C13E77); }
.feature-badge.b6 { background-image: linear-gradient(-30deg, #8bdaff, #002960); }
.feature-title { font-size: 1.125rem; line-height: 1.3125rem; color: #4d4e58; margin-top: 25px; font-weight: 600; }

/* ─── feature bands (DM .hero-feature + variants) ─── */
.hero-feature { padding: 90px 0; overflow: hidden; position: relative; }
.hero-feature::before {
  display: block; content: ' '; position: absolute; left: 0; top: 0; right: 0;
  background-repeat: no-repeat; background-size: cover; background-position: 50%;
  width: 100%; height: 100%;
}
.hero-feature .band-inner { position: relative; }
.hero-feature .title { font-size: 2.25rem; line-height: 1.2; font-weight: 600; margin-bottom: 0; }
.hero-feature .band-label { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; opacity: .85; }
.left-divider { width: 40px; height: 3px; background: #00c3fb; margin: 20px 0 40px; }
.hero-feature.icon-left { color: #fff; }
.hero-feature.icon-left .title { color: #fff; }
.hero-feature.icon-right { background: #fff; }
.hero-feature.icon-right .title { color: #464d57; }
.hero-feature.icon-right .band-label { color: #8e96a3; }

/* A right-icon band sitting on a COLOUR. The DragonMetrics port assumed those
   bands were always on white, so `.icon-right` hard-codes dark type (line 167).
   The moment Ag'merica's BlueOptimize band went blue and the power-under-load
   band went lime, both kept charcoal headings on a saturated background. Any
   right-icon band carrying a colour class now reads light, same as a left one. */
.hero-feature.icon-right.bo-band,
.hero-feature.icon-right.ag-band,
.hero-feature.icon-right.ag-leaf,
.hero-feature.icon-right.ag-field,
.hero-feature.icon-right.ag-harvest,
.hero-feature.icon-right.rank-tracking,
.hero-feature.icon-right.reporting { color: #fff; }
.hero-feature.icon-right.bo-band .title,
.hero-feature.icon-right.ag-band .title,
.hero-feature.icon-right.ag-leaf .title,
.hero-feature.icon-right.ag-field .title,
.hero-feature.icon-right.ag-harvest .title,
.hero-feature.icon-right.rank-tracking .title,
.hero-feature.icon-right.reporting .title { color: #fff; }
.hero-feature.icon-right.bo-band .band-label,
.hero-feature.icon-right.ag-band .band-label,
.hero-feature.icon-right.ag-leaf .band-label,
.hero-feature.icon-right.ag-field .band-label,
.hero-feature.icon-right.ag-harvest .band-label,
.hero-feature.icon-right.rank-tracking .band-label,
.hero-feature.icon-right.reporting .band-label { color: rgba(255,255,255,.74); }
.hero-feature.icon-right.bo-band .hero-feature-title,
.hero-feature.icon-right.ag-band .hero-feature-title,
.hero-feature.icon-right.ag-leaf .hero-feature-title,
.hero-feature.icon-right.ag-field .hero-feature-title,
.hero-feature.icon-right.ag-harvest .hero-feature-title,
.hero-feature.icon-right.rank-tracking .hero-feature-title,
.hero-feature.icon-right.reporting .hero-feature-title { color: #fff; }
.hero-feature.icon-right.bo-band .lead,
.hero-feature.icon-right.ag-band .lead,
.hero-feature.icon-right.ag-leaf .lead,
.hero-feature.icon-right.ag-field .lead,
.hero-feature.icon-right.ag-harvest .lead,
.hero-feature.icon-right.rank-tracking .lead,
.hero-feature.icon-right.reporting .lead { color: #fff; }
.hero-feature.icon-right.bo-band .bo-src,
.hero-feature.icon-right.ag-field .bo-src { color: rgba(255,255,255,.82); }
.hero-feature.icon-right.bo-band .hero-feature-description,
.hero-feature.icon-right.ag-band .hero-feature-description,
.hero-feature.icon-right.ag-leaf .hero-feature-description,
.hero-feature.icon-right.ag-field .hero-feature-description,
.hero-feature.icon-right.ag-harvest .hero-feature-description,
.hero-feature.icon-right.rank-tracking .hero-feature-description,
.hero-feature.icon-right.reporting .hero-feature-description { color: rgba(255,255,255,.9); }

/* ag-field runs light-to-dark diagonally, which is right for a band whose copy
   sits on the left. On the power-under-load band the photo is on the left and
   the words are on the RIGHT, so the ramp is turned to run across the frame:
   light behind the picture, dark behind the type. Mirroring it diagonally was
   not enough — the lead paragraph still landed on the mid-tone. */
.hero-feature.icon-right.ag-field {
  background-image: linear-gradient(100deg, #E9F5D0 0%, #A3D65C 18%, #2F7A1C 46%, #10361A 82%);
}


.hero-feature.rank-tracking { background-image: linear-gradient(-49deg, #D6FFEB 0%, #67EAE5 21%, #00AEC3 44%, #002960 100%); }
.hero-feature.rank-tracking::before { background-image: url(/dts/images/dm/bg-1200-2.svg); }
.hero-feature.rank-tracking .left-divider { background: #39f0df; }
.hero-feature.rank-tracking .hero-feature-description { color: #effffc; }

.hero-feature.reporting { background-image: linear-gradient(230deg, #CFCBFB 0%, #71BCFE 24%, #0964BD 60%, #173B87 100%); }
.hero-feature.reporting::before { background-image: url(/dts/images/dm/bg-1200-5.svg); }
.hero-feature.reporting .left-divider { background: #8bdaff; }
.hero-feature.reporting .hero-feature-description { color: #eef3ff; }

.hero-feature.backlinks-band { background-image: linear-gradient(-50deg, #FBE9E9 -10%, #E24BA9 30%, #6D2881 61%, #020474 100%); }
.hero-feature.backlinks-band .left-divider { background: #da5efe; }
.hero-feature.backlinks-band .hero-feature-description { color: #fbe9fc; }

.hero-feature.analytics-integration { background-image: linear-gradient(-49deg, #FFFED8 0%, #FFC06B 27%, #C13E77 69%, #3D013B 100%); }
.hero-feature.analytics-integration::before { background-image: url(/dts/images/dm/bg-1200-12.svg); }
.hero-feature.analytics-integration .left-divider { background: #e38470; }
.hero-feature.analytics-integration .hero-feature-description { color: #fbe9fc; }

.hero-feature .cols { display: grid; grid-template-columns: 5fr 6fr; gap: 60px; align-items: center; }
.hero-feature .lead { font-size: 1.125rem; line-height: 1.625rem; font-weight: 300; }
.hero-feature.icon-left .lead { color: inherit; opacity: .95; }
.hero-feature.icon-right .lead { color: #656d78; }

.hero-feature-rows { display: grid; grid-template-columns: 1fr; gap: 26px; }
.hero-feature-row { display: flex; align-items: flex-start; }
.hero-feature-icon { margin-right: 20px; flex-shrink: 0; }
.hero-feature-icon .badge {
  width: 60px; height: 60px; border-radius: 60px; display: flex; align-items: center; justify-content: center;
  box-shadow: 4px 2px 18px rgba(0,0,0,.2); background: #fff;
}
.hero-feature-icon .badge svg { width: 28px; height: 28px; }
.hero-feature.icon-right .hero-feature-icon .badge { box-shadow: 4px 2px 6px rgba(0,0,0,.1); }
.hero-feature-title { font-size: 1.125rem; line-height: 1.375rem; font-weight: 600; display: inline-block; }
.hero-feature.icon-left .hero-feature-title { color: #fff; }
.hero-feature.icon-right .hero-feature-title { color: #464d57; }
.hero-feature-description { font-size: 1.0625rem; line-height: 1.5625rem; font-weight: 300; display: inline-block; }
.hero-feature.icon-right .hero-feature-description { color: #656d78; }

/* ─── stats (DM typography on white) ─── */
.stats-section { background: #fff; padding: 70px 0; border-top: 1px solid #e5ecf1; }
.stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stat-item h3 { font-size: 2.75rem; font-weight: 700; color: #002960; letter-spacing: -.02em; line-height: 1; margin: 0; }
.stat-item p { font-size: .875rem; color: #8e96a3; margin-top: .5rem; font-weight: 500; }

/* ─── CTA band (DM .cta) ─── */
.cta { background-image: linear-gradient(-160deg, #86f2fd, #1bb6df 36%, #0072bc 79%, #005b8d); padding: 60px 0; }
.cta .container { display: flex; flex-flow: row; justify-content: space-between; align-items: center; gap: 24px; }
.cta-title { color: #fff; font-size: 1.75rem; line-height: 2.125rem; font-weight: 500; display: inline-block; margin-bottom: 0; }
.cta-title a { color: #fff; text-decoration: none; font-weight: 700; }
.cta-buttons { display: flex; gap: 20px; align-items: center; flex-shrink: 0; }

/* ─── footer (DM .footer) ─── */
.footer { background: #00417a; color: #fff; padding: 60px 0 35px; }
.footer-logo { margin-bottom: 30px; font-size: 1.125rem; font-weight: 700; letter-spacing: .04em; }
.footer-logo span { color: #FBDA5C; }
.footer-links-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; }
.footer-links-wrap .col { min-width: 182px; }
.footer-title { display: inline-block; text-transform: uppercase; font-weight: 600; margin-bottom: 5px; font-size: .875rem; }
.footer-links-wrap a { font-size: .875rem; line-height: 1.625rem; text-decoration: none; color: #fff; font-weight: 300; transition: all 150ms ease-out; }
.footer-links-wrap a:hover { color: #c4d6e4; }
.footer-links-wrap li { font-size: .875rem; line-height: 1.625rem; font-weight: 300; }
.footer-divider { width: 100%; height: 2px; background: rgba(228,228,228,.25); margin: 40px 0 25px; }
.footer-copyright { font-size: .75rem; line-height: 1.25rem; color: #fff; opacity: .8; }

/* ─── page hero for subpages (shorter DM hero) ─── */
.hero.page { padding: 60px 0 90px; text-align: center; }
.hero.page .hero-title { font-size: 2.25rem; line-height: 2.75rem; }
.hero.page .hero-subtitle { margin-bottom: 0; max-width: 620px; margin-left: auto; margin-right: auto; }

/* ─── content pages (about/contact shared) ─── */
.content-section { padding: 60px 0; }
.content-section h2 { font-size: 1.625rem; margin: 2.2rem 0 .8rem; color: #002960; }
.content-section h2:first-child { margin-top: 0; }
.content-section p { color: #4d4e58; margin-bottom: 1.1rem; line-height: 1.75; font-size: 1.0625rem; }
.content-section strong { color: #002960; }
.content-section a { color: #0072bc; }

/* ─── display-art panels (DM's screenshot-in-band pattern) ─── */
.art-frame {
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 4px 2px 18px rgba(0,0,0,.25);
}
.art-frame .frame-bar { display: flex; gap: 6px; padding: 11px 14px; background: #f4f7fa; border-bottom: 1px solid #e5ecf1; }
.art-frame .frame-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.art-frame .frame-bar i:nth-child(1) { background: #ef4444; }
.art-frame .frame-bar i:nth-child(2) { background: #f59e0b; }
.art-frame .frame-bar i:nth-child(3) { background: #22c55e; }
.art-frame svg { display: block; width: 100%; height: auto; }
.art-naked svg { display: block; width: 100%; height: auto; filter: drop-shadow(6px 8px 22px rgba(0,10,40,.35)); }
.hero-art img {
  display: block; width: 100%; max-width: 500px; height: auto;
  border-radius: 14px; box-shadow: 0 18px 50px rgba(0,10,40,.45);
}
.art-tile video,
.art-tile img {
  display: block; width: 100%; height: auto; border-radius: 14px;
  box-shadow: 4px 8px 28px rgba(0,10,40,.22);
}

/* ─── DM card (lifted from .testimonials-home .testimonial-home) ─── */
.dm-card {
  position: relative; background: #fff;
  box-shadow: 2px 2px 8px rgba(151,176,185,.15), 4px 4px 20px rgba(151,176,185,.1);
  border-radius: 10px; padding: 40px; text-align: left;
}
.dm-card + .dm-card { margin-top: 30px; }
.dm-card .card-head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.dm-card .card-head .badge, .contact-item .badge { margin: 0; }
.dm-card .card-head .badge {
  width: 60px; height: 60px; border-radius: 60px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 4px 2px 6px rgba(0,0,0,.1);
}
.dm-card .card-head .badge svg { width: 28px; height: 28px; }
.dm-card h2 { font-size: 1.375rem; color: #464d57; margin: 0; }
.dm-card p { color: #656d78; line-height: 1.7; margin-bottom: 14px; }
.service-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; }
.service-list li { color: #656d78; font-size: .9375rem; padding: 4px 0; font-weight: 400; }
.service-list li::before { content: '\2192  '; color: #0072bc; font-weight: 600; }
.hero-feature.icon-left .service-list li { color: rgba(255,255,255,.93); }
.hero-feature.icon-left .service-list li::before { color: #FBDA5C; }

/* ─── forms (DM idiom) ─── */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: .8125rem; font-weight: 600; color: #464d57; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.form-group input, .form-group textarea {
  width: 100%; padding: 12px 16px; border-radius: 8px; border: 1px solid #e5ecf1;
  background: #fff; color: #000; font-size: .9375rem; font-family: inherit;
  transition: border-color 150ms ease-out; outline: none;
}
.form-group input:focus, .form-group textarea:focus { border-color: #0072bc; }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-error { display: none; background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.2); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; color: #dc2626; font-size: .9rem; }
.form-success { display: none; text-align: center; padding: 2rem; }
.form-success h3 { color: #00AEC3; margin-bottom: .5rem; }
.form-success p { color: #656d78; }
.button.is-submit { width: 100%; text-align: center; }
.button.is-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ─── contact info rows ─── */
.contact-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
.contact-item .badge { width: 48px; height: 48px; border-radius: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 4px 2px 6px rgba(0,0,0,.1); }
.contact-item .badge svg { width: 22px; height: 22px; }
.contact-item h3 { font-size: 1.0625rem; color: #464d57; margin-bottom: 2px; }
.contact-item p { color: #656d78; font-size: .9375rem; line-height: 1.55; margin: 0; }
.contact-item a { color: #0072bc; text-decoration: none; font-weight: 600; }
.contact-item a:hover { text-decoration: underline; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: start; }

/* ─── tool chips (about) ─── */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 20px 0; }
.tool-badge { background: #fff; box-shadow: 2px 2px 8px rgba(151,176,185,.15), 4px 4px 20px rgba(151,176,185,.1); border-radius: 10px; padding: 16px 10px; text-align: center; font-weight: 600; font-size: .9375rem; color: #464d57; }

/* ─── viezu band (about page; DM band tokens) ─── */
.viezu-band {
  background-image: linear-gradient(-49deg, #67EAE5 -30%, #00AEC3 15%, #002960 100%);
  border-radius: 10px; padding: 32px; margin: 30px 0;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; color: #fff;
}
.viezu-band img { height: 38px; width: auto; }
.viezu-band p { color: #fff !important; margin: 0 !important; flex: 1; min-width: 240px; line-height: 1.65; }
.viezu-band strong { color: #FBDA5C !important; }

/* WAS `scroll-margin-top: 90px` — an anchor offset from before the scroller
   carried `scroll-padding-top: var(--nav-h)`. The two double-counted, and
   scroll-margin shifts SNAP positions as well as anchor jumps, so every band
   with an id (Ag'merica's five in-page links) snapped exactly 90px short and
   left a strip of the previous frame showing. scroll-padding on the scroller
   already clears the nav for both jobs. */
.company-wrap a { text-decoration: none; }

/* ─── prominent media bands (video panes) ─── */
.cols.media-xl { grid-template-columns: 2fr 3fr; gap: 50px; }
.cols.media-xl .art-tile video, .cols.media-xl .art-tile img { width: 100%; }
@media (min-width: 1200px) {
  /* bleed up to 150px, but never past the viewport edge (30px gutter floor);
     applied to the whole media column so the logo centers over the video */
  .hero-feature.icon-left .cols.media-xl .media-col { margin-right: calc(-1 * min(150px, (100vw - 1140px) / 2)); }
  .hero-feature.icon-right .cols.media-xl .media-col { margin-left: calc(-1 * min(150px, (100vw - 1140px) / 2)); }
}

.media-col .media-title { text-align: center; margin-bottom: 18px; }
.media-logo { height: 54px; width: auto; display: inline-block; vertical-align: middle; }
.media-logo[src*="mms"] { height: 66px; }
.media-title.stacked { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0; }
.media-logo.hpt-brand { height: auto; width: 215px; }
.media-logo.hpt-mpvi4 { height: auto; width: 215px; border-left: 2px solid rgba(255,255,255,.45); padding-left: 26px; margin-left: 26px; box-sizing: content-box; transform: translateY(5px); }
@media (max-width: 767px) {
  .media-logo.hpt-brand { width: 150px; }
  .media-logo.hpt-mpvi4 { width: 150px; padding-left: 16px; margin-left: 16px; }
}
.band-logo { height: 44px; width: auto; display: block; margin-bottom: 4px; }
.band-logo[src*="efilive"] { height: 60px; }
.band-logo[src*="dimsport"] { height: 38px; }
@media (max-width: 767px) {
  .media-logo { height: 40px; }
  .band-logo { height: 36px; }
}
.cols.media-xl .media-col { min-width: 0; }

/* ─── ADDITIVE 2026-07-24 (ag-tuning-guide re-skin) — light section + stage cards + derate ladder ─── */
.light-band { background: #f4f8fb; padding: 80px 0; }
.section-head { text-align: center; max-width: 780px; margin: 0 auto 44px; }
.section-head .band-label { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8e96a3; margin-bottom: 10px; }
.section-head h2 { font-size: 2.25rem; line-height: 1.2; color: #464d57; margin-bottom: 0; }
.section-head p { color: #656d78; font-size: 1.0625rem; line-height: 1.75; margin-top: 16px; }
.section-head .left-divider { margin: 20px auto 0; }

.chain-frame {
  background: #fff; border-radius: 12px; padding: 24px 22px 12px; margin-bottom: 34px;
  box-shadow: 2px 2px 8px rgba(151,176,185,.15), 4px 4px 20px rgba(151,176,185,.1);
}
.chain-frame svg { display: block; width: 100%; height: auto; }
/* narrow screens: a 6-stage diagram scaled to ~320px has unreadable labels — let it keep
   a legible scale and scroll inside its own frame (the page body never scrolls sideways) */
.chain-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  .chain-scroll svg { min-width: 560px; }
  .chain-frame { padding: 18px 14px 8px; }
}

.stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stage-card {
  background: #fff; border-radius: 10px; padding: 24px; border-top: 3px solid #0072bc;
  box-shadow: 2px 2px 8px rgba(151,176,185,.15), 4px 4px 20px rgba(151,176,185,.1);
}
.stage-card .tag { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.stage-card h3 { font-size: 1.0625rem; line-height: 1.4; color: #464d57; margin: 6px 0 8px; }
.stage-card p { color: #656d78; font-size: .9375rem; line-height: 1.65; margin: 0; }

.derate-ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
/* dark translucent fill: the band's overlay art brightens unpredictably behind the cards,
   and a white-on-white wash killed legibility of the last step at wide viewports */
.derate-step {
  background: rgba(28,10,42,.34); border: 1px solid rgba(255,255,255,.32);
  border-radius: 10px; padding: 22px 20px; color: #fff;
}
.derate-step .pct { font-size: 2rem; line-height: 1; font-weight: 700; }
.derate-step .lbl { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 10px 0 12px; opacity: .9; }
.derate-step p { font-size: .875rem; line-height: 1.6; margin: 0; opacity: .93; }

@media (max-width: 991px) {
  .light-band { padding: 56px 0; }
  .section-head h2 { font-size: 1.875rem; }
  .stage-grid { grid-template-columns: repeat(2, 1fr); }
  .derate-ladder { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .stage-grid { grid-template-columns: 1fr; }
  .derate-ladder { grid-template-columns: 1fr; }
  .section-head h2 { font-size: 1.75rem; }
}

/* ════════════════════════════════════════════════════════════════
   AG THEME — additive 2026-07-24 (ag-tuning-guide only).
   The DM band system reinterpreted in an agricultural palette:
   leaf green #7DC942 / field green #2F7A1C / deep field #14532A /
   soil #0E2A12, harvest gold (DM's own filled-button gradient) and
   soil brown for the warning band. Overlay geometry is DM's, recolored
   into /dts/images/dm/*-ag.svg. No existing rule is modified.
   Palette source: Ag'merica marketing imagery (public/media/Agmerica_logo*).
   ════════════════════════════════════════════════════════════════ */
.hero-background.ag .svg-bg {
  background-color: #17532a;
  background-image: url(/dts/images/dm/320p-ag.svg), linear-gradient(-79deg, #7FD44A 0%, #123D18 98%);
}
@media (min-width: 768px)  { .hero-background.ag .svg-bg { background-image: url(/dts/images/dm/768p-ag.svg), linear-gradient(-79deg, #7FD44A 0%, #123D18 98%); } }
@media (min-width: 992px)  { .hero-background.ag .svg-bg { background-image: url(/dts/images/dm/992p-ag.svg), linear-gradient(-79deg, #7FD44A 0%, #123D18 98%); } }
@media (min-width: 1200px) { .hero-background.ag .svg-bg { background-image: url(/dts/images/dm/1200p-ag.svg), linear-gradient(-79deg, #7FD44A 0%, #123D18 98%); } }

.hero-feature.ag-leaf { background-image: linear-gradient(-49deg, #DDF7C8 0%, #8ED94F 21%, #3E8B1E 44%, #0E2A12 100%); }
.hero-feature.ag-leaf::before { background-image: url(/dts/images/dm/bg-1200-2-ag.svg); }
.hero-feature.ag-leaf .left-divider { background: #B6EE8E; }
.hero-feature.ag-leaf .hero-feature-description { color: #eefbe4; }

.hero-feature.ag-field { background-image: linear-gradient(230deg, #E9F5D0 0%, #A3D65C 24%, #2F7A1C 60%, #10361A 100%); }
.hero-feature.ag-field::before { background-image: url(/dts/images/dm/bg-1200-5-ag.svg); }
.hero-feature.ag-field .left-divider { background: #CDEF9C; }
.hero-feature.ag-field .hero-feature-description { color: #f0f9e2; }

.hero-feature.ag-harvest { background-image: linear-gradient(-49deg, #FFF6D0 0%, #F0C24A 27%, #A4571B 69%, #2A1608 100%); }
.hero-feature.ag-harvest::before { background-image: url(/dts/images/dm/bg-1200-12-ag.svg); }
.hero-feature.ag-harvest .left-divider { background: #FBDA5C; }

.light-band.ag { background: #f2f8ec; }
.cta.ag { background-image: linear-gradient(-160deg, #B6EE8E, #6EBE33 36%, #2F7A1C 79%, #17532a); }
.footer.ag { background: #0E2A12; }
.footer.ag .footer-logo span { color: #8ED94F; }
.strip-ag { background: linear-gradient(135deg, #0E2A12, #2F7A1C); padding: 1.1rem 2rem; }
.strip-ag .inner { max-width: 1050px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; text-align: center; }
.strip-ag p { color: #fff; font-size: .9375rem; font-weight: 600; margin: 0; }
.strip-ag .hl { color: #C7F09B; }
.feature-badge.ag1 { background-image: linear-gradient(-30deg, #B6EE8E, #4E9E22); }
.feature-badge.ag2 { background-image: linear-gradient(-30deg, #FBDA5C, #C98A0E); }
.feature-badge.ag3 { background-image: linear-gradient(-30deg, #8ED94F, #1F6B2A); }
.feature-badge.ag4 { background-image: linear-gradient(-30deg, #7FD4C0, #0E8F73); }
.feature-badge.ag5 { background-image: linear-gradient(-30deg, #E9C88A, #8A5A1E); }
.feature-badge.ag6 { background-image: linear-gradient(-30deg, #A7DE74, #14532A); }
/* .content-section strong is navy by default — beat it on the ag page */
.ag-accent, .content-section strong.ag-accent { color: #2F7A1C; }
.light-band.ag .service-list li::before { color: #4E9E22; }
/* narrow viewports stack the bands tall, which drags white text onto the light
   end of these gradients — steepen them below 992px so contrast always holds */
@media (max-width: 991px) {
  .hero-feature.ag-leaf { background-image: linear-gradient(-40deg, #6EC12F 0%, #2F7A1C 40%, #0E2A12 100%); }
  .hero-feature.ag-field { background-image: linear-gradient(200deg, #6BAF35 0%, #2F7A1C 45%, #10361A 100%); }
  .hero-feature.ag-harvest { background-image: linear-gradient(-40deg, #E0A93A 0%, #A4571B 45%, #2A1608 100%); }
}
.section-head.on-dark .band-label { color: rgba(255,255,255,.85); }
.section-head.on-dark h2 { color: #fff; }
.section-head.on-dark p { color: rgba(255,255,255,.95); }

/* ─── Ag'merica sister-brand blocks ─── */
/* Ag'merica wordmark in the nav (4.4:1 aspect — 60px tall would run 262px wide) */
.main-nav .logo img.agm { height: 40px; }
@media (max-width: 767px) { .main-nav .logo img.agm { height: 32px; } }

.ag-chip {
  display: inline-flex; align-items: center; gap: 16px; background: #fff;
  border-radius: 12px; padding: 12px 20px; box-shadow: 4px 2px 18px rgba(0,20,0,.22); margin-bottom: 24px;
}
.ag-chip img { height: 34px; width: auto; display: block; }
.ag-chip span { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #14532A; }
.ag-two-col { display: grid; grid-template-columns: 5fr 6fr; gap: 50px; align-items: center; }
@media (max-width: 991px) { .ag-two-col { grid-template-columns: 1fr; gap: 30px; } }
.ag-brand-card { background: #fff; border-radius: 14px; padding: 34px 30px; text-align: center; box-shadow: 4px 8px 28px rgba(0,20,0,.22); }
.ag-brand-card img { width: 100%; max-width: 420px; height: auto; margin: 0 auto 18px; display: block; }
.ag-brand-card .tagline { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #4E9E22; }

/* hero eyebrow — where a brand strapline belongs (the positioning brief bars
   slogan grammar from the H1/sub, which must be category + named platforms) */
@media (min-width: 1200px) {
  /* the ag headline names three machine types; DM's 424px slogan column broke it
     across four lines. Card is 430px, container 1080 → 560px is safe here. */
  .hero.home.ag-hero .slogan { max-width: 560px; }
}

.hero .hero-eyebrow {
  font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.9); margin-bottom: 16px;
}

.strip-ag.wide .inner { max-width: 1240px; gap: 1rem 1.6rem; }

/* sister-company mark in the credential banner — deliberately understated:
   Josh, 2026-07-25: "dont put the dts link front and center like that. put it
   on the banner somewhere." */
.strip-ag .strip-sub {
  width: 100%; display: flex; justify-content: center; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18);
}
.strip-ag .sister-mark {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
}
.strip-ag .sister-mark img { height: 26px; width: auto; display: block; background: #fff; border-radius: 5px; padding: 3px 5px; }
.strip-ag .sister-mark span { font-size: .6875rem; line-height: 1.35; color: rgba(255,255,255,.8); text-align: left; letter-spacing: .02em; }
.strip-ag .sister-mark b { font-size: .8125rem; font-weight: 600; color: #fff; }
.strip-ag .sister-mark:hover span, .strip-ag .sister-mark:hover b { color: #C7F09B; }
@media (max-width: 767px) {
  .strip-ag .sister-mark { flex-direction: column; gap: 6px; }
  .strip-ag .sister-mark span { text-align: center; }
}


/* ─── interactive exhaust path ─── */
.ip-stage { cursor: pointer; }
.ip-stage .ring { opacity: 0; transition: opacity 180ms ease-out; }
.ip-stage .box { transition: fill-opacity 180ms ease-out; }
.ip-stage .tap { transition: opacity 180ms ease-out; }
.ip-stage.is-active .ring { opacity: .5; }
.ip-stage.is-active .box { fill-opacity: .3; }
.ip-stage.is-active .tap { opacity: 0; }
/* display, not opacity: the pulse dot carries a SMIL opacity animation that
   overrides a CSS opacity rule, which leaked the dot onto every inactive stage */
.ip-stage .pulse { display: none; }
.ip-stage.is-active .pulse { display: block; }
.ip-detail {
  margin-top: 18px; background: #fff; border-radius: 12px; border-top: 3px solid #2F7A1C;
  box-shadow: 2px 2px 8px rgba(151,176,185,.15), 4px 4px 20px rgba(151,176,185,.1);
  padding: 24px 26px; display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap;
}
.ip-detail .body { flex: 1 1 300px; min-width: 260px; }
.ip-detail h3 { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; margin-bottom: 8px; }
.ip-detail h3 i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.ip-detail p { color: #656d78; font-size: .9375rem; line-height: 1.7; margin: 0; }
.ip-gauge { flex: 0 0 auto; text-align: center; }
.ip-gauge .msg { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; margin-top: -4px; }
.soot-btns { display: flex; gap: 5px; justify-content: center; margin-top: 8px; }
.soot-btn {
  padding: 4px 10px; border-radius: 6px; font-size: .6875rem; font-weight: 600; font-family: inherit;
  background: transparent; color: #8e96a3; border: 1px solid #e5ecf1; cursor: pointer; transition: all 150ms ease-out;
}
.soot-btn.on { border-color: currentColor; }

/* ─── gauges (270° arc, dash-offset driven) ─── */
.gauge svg { display: block; margin: 0 auto; }
.gauge .g-val { transition: stroke-dashoffset 700ms ease-out, stroke 250ms ease-out; }
.gauge .lbl { font-size: .6875rem; color: #8e96a3; margin-top: -4px; }

/* ─── derate widget ─── */
.dr-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.dr-tab {
  min-width: 92px; padding: 12px 14px; border-radius: 10px; text-align: center; cursor: pointer;
  font-family: inherit; background: rgba(22,11,4,.26); border: 1.5px solid rgba(255,255,255,.34);
  color: #fff; transition: all 180ms ease-out;
}
.dr-tab:hover { background: rgba(22,11,4,.4); }
.dr-tab .pct { font-size: 1.375rem; font-weight: 700; line-height: 1; display: block; }
.dr-tab .lbl { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.dr-tab.on { background: rgba(20,10,4,.42); border-color: #fff; }
.dr-panel { background: rgba(20,10,4,.34); border: 1px solid rgba(255,255,255,.28); border-radius: 12px; padding: 28px 24px; }
.dr-gauges { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.dr-gauges .lbl { color: rgba(255,255,255,.85); }
.dr-note { margin-top: 20px; color: #fff; font-size: .9375rem; line-height: 1.6; text-align: center; opacity: .95; }
@media (max-width: 767px) {
  .dr-tab { min-width: 0; flex: 1 1 44%; }
  .dr-gauges { gap: 14px; }
  .ip-detail { padding: 20px; }
  .ag-brand-card { padding: 26px 20px; }
}

/* ════════════════════════════════════════════════════════════════
   CREDENTIAL BADGING — Viezu + BlueOptimize™ (additive 2026-07-24)
   Badge art is Viezu's own, self-hosted at /dts/images/blueoptimize-badge.png.
   Figure tiles carry Viezu's PUBLISHED BlueOptimize numbers, attributed —
   never a DTS promise for a specific machine. See session doc
   2026-07-24_dts-blueoptimize-badging.md for the sourcing table.
   ════════════════════════════════════════════════════════════════ */
.bo-chip {
  background: #fff; border-radius: 10px; padding: 8px 14px; display: inline-flex; align-items: center;
  box-shadow: 2px 2px 10px rgba(0,0,0,.18);
}
.bo-chip img { height: 32px; width: auto; display: block; }
.bo-chip.lg img { height: 54px; }
.bo-chip.xl img { height: 74px; }

/* Viezu wants dealers promoting and linking the programme (Josh, 2026-07-24) —
   so every badge is a live outbound link to viezu.com, with descriptive anchor text. */
a.bo-card, a.bo-chip { text-decoration: none; display: inline-block; transition: all 180ms ease-out; }
a.bo-card { display: block; }
a.bo-card:hover { transform: translateY(-2px); box-shadow: 4px 12px 34px rgba(0,20,40,.22); }
a.bo-chip:hover { transform: translateY(-1px); box-shadow: 2px 4px 14px rgba(0,0,0,.24); }
.bo-more {
  display: inline-block; margin-top: 14px; font-size: .8125rem; font-weight: 600;
  color: #0072bc; text-decoration: none; border-bottom: 1px solid rgba(0,114,188,.35);
}
.bo-more:hover { border-bottom-color: #0072bc; }
.hero-feature .lead a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.section-head p a { color: #0072bc; }
.cred-link { display: inline-flex; align-items: center; text-decoration: none; }

.bo-card {
  background: #fff; border-radius: 14px; padding: 34px 30px; text-align: center;
  box-shadow: 4px 8px 28px rgba(0,20,40,.16);
}
.bo-card img { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto 18px; }
.bo-card .cap { font-size: .8125rem; line-height: 1.5; color: #656d78; }
.bo-card .sub {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #e8eef3;
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8e96a3;
}
.bo-card .sub strong { color: #2F7A1C; }

.bo-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.bo-fig {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px; padding: 16px 14px; text-align: center; color: #fff;
}
.bo-fig b { display: block; font-size: 1.5rem; line-height: 1.1; font-weight: 700; }
.bo-fig span { font-size: .75rem; letter-spacing: .04em; opacity: .92; }
.bo-fig.on-light {
  background: #fff; border-color: #e8eef3; color: #656d78;
  box-shadow: 2px 2px 8px rgba(151,176,185,.15), 4px 4px 20px rgba(151,176,185,.1);
}
.bo-fig.on-light b { color: #0072bc; }
.bo-fig.on-ag b { color: #2F7A1C; }
.bo-src { font-size: .75rem; line-height: 1.5; margin-top: 14px; opacity: .85; }
.bo-src.on-light { color: #8e96a3; opacity: 1; }
@media (max-width: 767px) {
  .bo-figs { grid-template-columns: 1fr; }
  .bo-chip.lg img { height: 42px; }
  .bo-chip.xl img { height: 54px; }
}

/* ─── mobile ─── */
@media (max-width: 991px) {
  .contact-layout { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .dm-card { padding: 26px; }
  .hero.home .container { flex-direction: column; align-items: flex-start; }
  .hero.home .slogan { min-width: 0; max-width: 100%; }
  .hero-title { font-size: 2.25rem; line-height: 2.75rem; }
  .hero-feature .cols { grid-template-columns: 1fr; gap: 40px; }
  .feature .grid { grid-template-columns: repeat(2, 1fr); }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .cta .container { flex-flow: column; text-align: center; }
  .cta-title { margin-bottom: 10px; }
}
@media (max-width: 767px) {
  .main-nav { height: 68px; }
  .main-nav .logo img { height: 52px; }
  .hero-background { padding-top: 68px; }
  .main-nav .wrap { display: none; }
  .main-nav .wrap.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
    position: absolute; top: 68px; left: 0; right: 0; background: #fff;
    padding: 20px 24px; box-shadow: 4px 4px 12px rgba(0,0,0,.1);
  }
  .hamburger { display: flex; }
  .hero.home { padding: 46px 0 80px; }
  .hero-feature { padding: 50px 0; }
  .hero.home .mock .card { padding: 24px; }
  .feature .grid { grid-template-columns: 1fr 1fr; }
  .feature-badge { width: 96px; height: 96px; }
  .feature-badge svg { width: 42px; height: 42px; }
  .hero-feature .title { font-size: 1.75rem; }
  .company-wrap { justify-content: center; }
}

/* ─── Junior in-card chat (2026-07-24) — ADDITIVE ONLY ───────────────────────
   The verdict card grows an invitation; tapping it unfolds the conversation
   INSIDE the same card. No popup, no page change, no takeover. Nothing here
   is referenced by any other page or component. */
.jr-invite {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin-top: 12px; padding: 11px 13px;
  background: #f2f8fd; border: 1px solid #d6e1ea; border-radius: 10px;
  font-family: inherit; font-size: .8125rem; font-weight: 600; color: #0072bc;
  text-align: left; cursor: pointer; transition: background 150ms ease-out, border-color 150ms ease-out;
}
.jr-invite:hover { background: #eaf3fb; border-color: #0072bc; }
.jr-invite .jr-dot {
  flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: #15803d; box-shadow: 0 0 0 3px rgba(21,128,61,.15);
}
.jr-invite .jr-arrow { margin-left: auto; color: #8e96a3; font-weight: 400; }

.jr-chat { margin-top: 12px; border-top: 1px solid #e5ecf1; padding-top: 12px; }
.jr-head {
  display: flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 600; color: #8e96a3;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px;
}
.jr-head .jr-dot { width: 7px; height: 7px; border-radius: 50%; background: #15803d; }
.jr-close { margin-left: auto; background: none; border: 0; color: #8e96a3; font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 2px; text-transform: none; }
.jr-close:hover { color: #4d4e58; }

.jr-log {
  max-height: 268px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 8px; padding-right: 2px;
}
.jr-msg {
  max-width: 88%; padding: 8px 11px; border-radius: 13px;
  font-size: .8125rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
}
.jr-msg.jr-jr { align-self: flex-start; background: #f4f7fa; color: #1c2733; border-bottom-left-radius: 4px; }
.jr-msg.jr-me { align-self: flex-end; background: #0072bc; color: #fff; border-bottom-right-radius: 4px; }
.jr-msg a { color: inherit; text-decoration: underline; }
.jr-msg.jr-jr a { color: #0072bc; }
.jr-note { align-self: center; font-size: .75rem; color: #8e96a3; text-align: center; padding: 2px 4px; }
.jr-typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 12px; }
.jr-typing i { width: 5px; height: 5px; border-radius: 50%; background: #b9c2cc; animation: jrbounce 1.15s infinite ease-in-out; }
.jr-typing i:nth-child(2) { animation-delay: .16s; }
.jr-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes jrbounce { 0%, 70%, 100% { transform: translateY(0); opacity: .5; } 35% { transform: translateY(-4px); opacity: 1; } }

.jr-form { display: flex; gap: 7px; margin-top: 10px; }
.jr-input {
  flex: 1 1 auto; min-width: 0; padding: 9px 12px;
  border: 1px solid #d6e1ea; border-radius: 20px;
  font-family: inherit; font-size: .8125rem; color: #1c2733; background: #fff;
}
.jr-input:focus { outline: none; border-color: #0072bc; }
.jr-send {
  flex: 0 0 auto; padding: 9px 15px; border: 0; border-radius: 20px;
  background: #0072bc; color: #fff; font-family: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.jr-send:disabled { opacity: .45; cursor: default; }
.jr-legal { font-size: .6875rem; color: #a7aeb8; margin-top: 8px; text-align: center; }

@media (max-width: 560px) { .jr-log { max-height: 220px; } }
.jr-invite-text { display: block; }
.jr-invite-sub { display: block; margin-top: 2px; font-weight: 500; font-size: .6875rem; color: #7d8794; }

/* ─── AG + BLUEOPTIMIZE bands on the homepage — 2026-07-25, ADDITIVE ─────────
   Josh: the ag section must open on GREEN (the agmerica.farm register) and
   BlueOptimize gets its own BLUE band. Before this the two were exactly
   backwards — ag sat on the blue `.reporting` gradient and BlueOptimize on the
   magenta `.backlinks-band`. The green reuses the ratified ag palette from the
   ag-tuning-guide re-skin (leaf #7DC942 / field #2F7A1C / soil #0E2A12) so the
   homepage, the guide and Ag'merica read as one family. */
/* Matched to agmerica.farm's hero by MEASUREMENT, not by copying the gradient
   (Josh, 2026-07-27: "i like the green background in the top frame of
   agmerica.farm which is lighter"). Sampling both renders: the Ag'merica hero
   averages #5D9C43 (brightness 105), this band averaged #4A803A (87) — the same
   gradient reads darker here because the band is shorter, so the dark end of a
   -79° ramp covers far more of it. The dark stop is lifted and the ramp ends
   before the corner, which brings the rendered average onto Ag'merica's. */
.hero-feature.ag-band { background-image: linear-gradient(-79deg, #8CDD55 0%, #57A72C 55%, #2E7030 100%); }
.hero-feature.ag-band::before { background-image: url(/dts/images/dm/bg-1200-5-ag.svg); opacity: .55; }
.hero-feature.ag-band .left-divider { background: #CDEF9C; }
.hero-feature.ag-band .hero-feature-description { color: #f0f9e2; }

/* BlueOptimize: cool programme blue, deliberately distinct from the DTS navy
   credential strip above it and from the ag green beside it. */
.hero-feature.bo-band { background-image: linear-gradient(-49deg, #DDF4FF 0%, #67C8F5 22%, #0964BD 55%, #041F4B 100%); }
.hero-feature.bo-band::before { background-image: url(/dts/images/dm/bg-1200-2.svg); }
.hero-feature.bo-band .left-divider { background: #8bdaff; }
.hero-feature.bo-band .hero-feature-description { color: #eef7ff; }

/* Ag'merica identity inside the green band */
/* The Ag'merica card is now the whole link (Josh, 2026-07-27: "it also should
   link to the page"). The logo PNG has a BAKED-IN WHITE BACKGROUND — no alpha —
   so dropping it straight onto the green read as a cropped white box. It now
   sits on a deliberate white chip with real padding, which is what that artwork
   wants. */
.ag-brand { display: flex; align-items: center; gap: 14px; margin-top: 24px;
            padding: 12px 14px; background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.24); border-radius: 12px;
            text-decoration: none; color: inherit;
            transition: background 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out; }
.ag-brand:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45); transform: translateY(-1px); }
.ag-brand-mark { flex: 0 0 auto; background: #fff; border-radius: 8px; padding: 8px 12px; display: block; }
.ag-brand-mark img { height: 34px; width: auto; display: block; }
.ag-brand .t { font-size: .875rem; line-height: 1.45; }
.ag-brand .t b { display: block; font-size: .9375rem; margin-bottom: 2px; }
.ag-go { display: inline-block; color: #EAFBD8; font-weight: 600; text-decoration: underline; }
.ag-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.ag-machines { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ag-machines span { font-size: .75rem; font-weight: 600; letter-spacing: .02em;
                    padding: 5px 11px; border-radius: 20px;
                    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }
@media (max-width: 700px) { .ag-brand { flex-direction: column; align-items: flex-start; } }

/* ─── ONE SECTION = ONE FRAME (Josh, 2026-07-25) ─────────────────────────────
   "at 100% zoom, each section should fit into one frame, so that the top of the
   colour line is aligned with the top of the frame and the bottom without
   bleeding into the next frame."

   Two things cause the bleed, and each needs its own fix:
     1. Bands SHORTER than the window leave room for the next colour to show
        underneath → every band gets a min-height of one frame.
     2. The nav is FIXED (76px desktop / 68px below 992px), so a band scrolled
        to y=0 hides its own top edge behind it → scroll-padding-top offsets the
        snap by exactly the nav height, and the frame height subtracts it.

   Snap is PROXIMITY, not mandatory: content taller than the window still exists
   (mobile bands run 900–1300px) and mandatory snapping would fight the user
   trying to read the bottom of one. Tall bands still align their TOP to the
   frame — which is the part Josh asked for — and simply scroll on. */
:root { --nav-h: 76px; }
@media (max-width: 991px) { :root { --nav-h: 68px; } }

html {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--nav-h);
  /* NO scroll-behavior:smooth — Josh, 2026-07-26 ("you froze the banner?").
     Animating every scroll on top of snapping makes the page feel like it is
     grabbing the wheel, which reads as frozen. It was never asked for; the
     frame alignment does not need it. The nav being FIXED is not mine — it has
     been `position: fixed` since the DragonMetrics port (line 52). */
}

.hero-background.homepage,
.hero-background.ag,
.hero-feature {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
/* The band's child must still CENTER once the band is a flex container.
   `.container` sets its own responsive width (728/932/1080px) + auto margins —
   forcing width:100% here overrode that and threw every band's content flush to
   the left edge. Caught by rendering it (the measurements were all green). So:
   grow to fill the cross axis, keep the container's own width rules, and let
   `margin: auto` do the centering it always did. */
.hero-background.homepage > .hero,
.hero-background.ag > .hero,
.hero-feature > .container,
.hero-feature > .band-inner { flex: 0 1 auto; min-width: 0; }

/* Short viewports (laptops at 100% zoom with a browser chrome) — a 1300px-tall
   band cannot fit a 700px frame, so stop pretending: below this the frame rule
   relaxes to natural height and only the top-alignment survives. */
@media (max-height: 620px) {
  .hero-background.homepage, .hero-background.ag, .hero-feature { min-height: 0; }
}

/* Josh, 2026-07-27: "you added white space to the bottom when you should have
   eliminated it." The closing stack — stats bar, CTA, footer — is about 420px
   of content. Forcing it to fill a 940px window left ~500px of nothing, and
   centring it put half that white above and half below. Growing the footer to
   swallow the slack only recoloured the hole navy; splitting it only spread the
   hole in two. None of that is elimination.

   A footer is not a slide. This group comes out of the full-height frame system
   and takes its natural height, so the page simply ends after the copyright
   line with no empty band at all. It still snaps, so the scroll still lands on
   it cleanly. */
.frame-group.frame-group--close { min-height: 0; }

/* The warranty answer (Josh, 2026-07-28: "our 2nd most common question for ag
   after can you tune it"). It was a white card on a white page near the bottom
   and read as a footnote. Now it is a band in its own right: a gold ground so
   it stops the scroll, with the notice kept on white so it still reads as a
   document rather than marketing. */
.frame-group--warranty {
  background-image: linear-gradient(-49deg, #FFF6D0 0%, #F0C24A 27%, #A4571B 69%, #2A1608 100%);
  position: relative;
}
.frame-group--warranty > .content-section { background: transparent; }
.frame-group--warranty .dm-card {
  max-width: 940px; padding: 40px 44px;
  box-shadow: 0 18px 48px rgba(40, 20, 0, .34);
}
.frame-group--warranty .dm-card h2 { font-size: 1.875rem; line-height: 1.22; }
.frame-group--warranty .dm-card p { font-size: 1.0625rem; line-height: 1.75; }
.frame-group--warranty .card-head { margin-bottom: 18px; }   /* double class so source order cannot flip it back */

/* Grouped frames — small furniture (credential strip, platform bar, icon grid,
   stats/CTA/footer) was left loose by the first pass and stacked three sections
   into one window, which is exactly the bleed Josh photographed. Grouping keeps
   ONE idea per screen without inflating an 83px strip to full height. */
.frame-group {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}
@media (max-height: 620px) { .frame-group { min-height: 0; } }

/* A group that OPENS on a colour band must start it flush under the nav —
   Josh's rule is that the top of the colour line aligns with the top of the
   frame. Centring the group (correct for the closing group) floated the navy
   credential strip into the middle with white above it. */
.frame-group--top { justify-content: flex-start; }

/* The HERO is the one frame with no scroll offset above it: at document top the
   fixed nav overlays its first 76px, so a `100vh - nav` hero left exactly one
   nav-height of the NEXT frame showing at the bottom. It needs the whole window
   height, with the nav's worth of padding so its content still centres in the
   part you can actually see. */
.hero-background.homepage,
.hero-background.ag {
  min-height: 100vh;
  padding-top: var(--nav-h);
}

/* The hero was double-padded (Josh, 2026-07-26: "empty space at the top of the
   frame and lack of it at the bottom"). `.hero.home` carries its own 70px-top /
   110px-bottom padding from the DM port; the frame rules then added the nav
   height on top and centred the whole padded box — so the gap under the nav and
   the gap above the fold stopped matching, and on a shorter window the lookup
   card crowded the bottom edge. Zero the child's vertical padding inside the
   frame and let the centring produce equal space above and below at ANY height. */
.hero-background.homepage > .hero.home,
.hero-background.ag > .hero.home { padding-top: 0; padding-bottom: 0; }

/* ─── Frames on SHORT windows (Josh, 2026-07-27) ─────────────────────────────
   The frame audit (scripts/audit_frames.js) found what a screenshot of one
   section never would: at 1280×720 and 1919×820 the ag band, the BlueOptimize
   band, the opening group and the closing group all pushed content below the
   fold. Their heights are driven by two fixed costs — the band's 90px top and
   bottom padding, and art tiles sized purely by width — neither of which knows
   how tall the window is.

   So both learn. Padding steps down as the window shortens, and art is capped
   against the frame height rather than the column width. Nothing is hidden and
   no text shrinks; the air around it gives way first, which is what a person
   would do by hand. */
@media (max-height: 900px) {
  .hero-feature { padding: 64px 0; }
  .hero-feature .cols { gap: 44px; }
}
@media (max-height: 820px) {
  .hero-feature { padding: 46px 0; }
  .hero-feature .cols { gap: 34px; }
  .ag-machines { margin-top: 12px; }
  .ag-brand { margin-top: 16px; padding: 10px 13px; }
  .ag-ctas { margin-top: 16px; }
}
@media (max-height: 760px) {
  .hero-feature { padding: 34px 0; }
  .hero-feature .cols { gap: 26px; }
  .hero-feature .title { font-size: 1.875rem; }
  .left-divider { margin: 14px 0 22px; }
}
/* Art tiles must never be the reason a frame overflows: cap them against the
   frame, leaving room for the heading and copy beside them. */
.hero-feature .art-tile img,
.hero-feature .art-tile video {
  max-height: calc(100vh - var(--nav-h) - 190px);
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* The closing group WAS released from the frame rule here because its footer
   overflowed. With its internal padding trimmed it now measures 626px against a
   744px frame, so releasing it made it SHORTER than the frame — which is the
   bleed it was meant to avoid. Rule withdrawn; it fills its frame like the rest.
   (Kept as a note because "release the constraint" was the obvious fix and the
   wrong one.) */

/* Below 730px of window the ag band still lost ~12px off the bottom — and
   `.hero-feature { overflow: hidden }` means that is genuinely CUT, not merely
   below the fold. One more step of air comes out rather than losing a line. */
@media (max-height: 730px) {
  .hero-feature { padding: 24px 0; }
  .hero-feature .cols { gap: 20px; }
  .ag-machines { margin-top: 10px; gap: 6px; }
  .ag-machines span { padding: 4px 9px; }
  .ag-brand { margin-top: 12px; }
  .ag-ctas { margin-top: 12px; }
  .bo-figs { margin-top: 12px; }
}

/* ─── STICKY FRAMES (Josh, 2026-07-27: "the view should lock the frame in") ──
   Mandatory snapping, so a page-down lands ON a frame instead of between two.
   It is only safe where every frame actually fits — mandatory snapping over
   content taller than the window makes the overflow unreachable. So it engages
   from 820px of window height up (where the audit is clean at every width) and
   falls back to the gentler proximity snap below that. */
/* (the earlier mandatory rule lived here; superseded by the proximity lock
   below after the wheel test showed mandatory froze the page) */

/* The ag band is the tallest frame on the page and the first to overflow when
   text renders larger than it does in a test browser (Josh's own window wrapped
   its two buttons onto separate lines where a headless render kept them on one,
   and the second button fell off the bottom). Keep those two on one line and
   hold the whole column tighter, so the frame has slack instead of fitting by
   a hair. */
.ag-ctas { flex-wrap: nowrap; }
.ag-ctas .button { white-space: nowrap; padding-left: 18px; padding-right: 18px; }
@media (max-width: 620px) { .ag-ctas { flex-wrap: wrap; } }

/* Two grouped frames were fitting by a hair (13px and 6px of clearance) — the
   exact condition that cut a button on Josh's screen while passing here. Give
   them room: the platform bar and the stats/CTA/footer stack lose some of their
   own padding inside a frame, which costs nothing visually and buys slack. */
.frame-group .company { padding-top: 20px; padding-bottom: 14px; }
.frame-group .feature { padding-top: 10px; padding-bottom: 10px; }
.frame-group .stats-section { padding-top: 22px; padding-bottom: 22px; }
/* Ag'merica's own furniture, grouped the same way: the credential strip, the
   "who we are" paragraph and the icon row are three small bands that belong on
   one screen, and at full padding they ran 37px past it. */
.frame-group > .content-section { padding-top: 14px; padding-bottom: 14px; }
.frame-group > .strip-ag { padding-top: .7rem; padding-bottom: .7rem; }
/* the guide band carries uneven vertical padding of its own; inside a frame the
   centring has to start from an even box or the frame reads 24px top-heavy */
.frame-group > .light-band { padding-top: 10px; padding-bottom: 10px; }
/* The sister-company band is the tallest of the grouped light-bands and on a
   1280x720 window it filled its frame to within 2px. Its own furniture gives
   the room back: less air under the heading block, a slightly smaller logo
   card. Only Ag'merica has light-bands inside frames, so DTS is untouched. */
.frame-group > .light-band .section-head { margin-bottom: 22px; }
.frame-group > .light-band .bo-card { padding-top: 18px; padding-bottom: 18px; }
.frame-group > .light-band .bo-card img { margin-bottom: 12px; }
/* The Tier 4 diagram frame cleared by only 3px at 1366x768 — a size my matrix
   had skipped. The saving comes from the air around the diagram and the detail
   panel, not from either of them: 34px + 18px of margin between the three
   blocks, and the panel's own 24px top/bottom padding. */
.frame-group > .light-band .chain-frame { margin-bottom: 16px; padding-top: 14px; padding-bottom: 8px; }
.frame-group > .light-band .ip-detail { margin-top: 10px; padding-top: 16px; padding-bottom: 16px; }
.frame-group > .light-band .section-head { margin-bottom: 16px; }
/* On a 720px window the diagram frame still cleared by only 6px. The drawing is
   the largest thing in it, so below 800px of viewport it gives back a tenth of
   its own width — it stays legible and the frame gets its margin. */
@media (max-height: 800px) {
  .frame-group > .light-band .chain-scroll svg { max-width: 90%; margin: 0 auto; }
  .frame-group > .light-band .chain-frame { margin-bottom: 10px; padding-top: 10px; }
  .frame-group > .light-band .ip-detail { margin-top: 8px; padding-top: 12px; padding-bottom: 12px; }
  .frame-group > .light-band .section-head { margin-bottom: 12px; }
}
/* Three bands on one screen is a tight fit at 1440; the icon row gives up some
   of its own air so the group clears, and its top margin comes off so the stack
   centres evenly. Scoped to this group so the DTS platform frame is untouched. */
/* The opening paragraph and the icon row, both set 15% smaller (Josh,
   2026-07-28). The layout is the original — one centred column of prose above a
   3 x 2 icon grid — only the type and the badges are scaled. Everything here is
   the base value x 0.85. */
/* Pure white next to the saturated bands was reading harsh (Josh, 2026-07-28:
   "the white background is a little intense - mellow it"). A whisper of the ag
   green takes the glare off without becoming a colour of its own; it stays
   lighter than the #f2f8ec light-bands so those still read as distinct. */
body.ag { background: #f7faf3; }
body.ag .feature { background: transparent; }
body.ag .content-section { background: transparent; }

.content-section p.intro-prose {   /* beats `.content-section p`, which sets 1.0625rem */
  max-width: 820px; margin: 0 auto; color: #656d78;
  font-size: .9rem; line-height: 1.8;
  /* Centred body copy gives every line a different left edge, which reads as
     alternating indents (Josh, 2026-07-28). One flush edge, ragged right. */
  text-align: left;
}

.frame-group--ag-intro .feature { padding-top: 0; padding-bottom: 0; }
.frame-group--ag-intro .feature .cell { padding: 21px 8px; }
.frame-group--ag-intro .feature-badge { width: 102px; height: 102px; }
.frame-group--ag-intro .feature-badge svg { width: 44px; height: 44px; }
.frame-group--ag-intro .feature-title { font-size: .9563rem; line-height: 1.169rem; margin-top: 21px; }
.frame-group .cta { padding-top: 22px; padding-bottom: 22px; }
@media (max-height: 900px) {
  .frame-group .company { padding-top: 12px; padding-bottom: 8px; }
  .frame-group .feature .grid { row-gap: 22px; }
}

/* At 720px of window the closing frame still fits by only 9px. Below 780 the
   footer's own generosity comes down a step — links and address unchanged, just
   less air around them. */
@media (max-height: 780px) {
  .frame-group .stats-section { padding-top: 14px; padding-bottom: 14px; }
  .frame-group .cta { padding-top: 14px; padding-bottom: 14px; }
  .frame-group footer, .frame-group .footer { padding-top: 22px; padding-bottom: 18px; }
}

/* ─── WHY "STICKY" DID NOTHING (found 2026-07-27) ────────────────────────────
   `body { overflow-x: hidden }` (line 14, from the DM port) makes BODY the
   scrolling box. `scroll-snap-type` was declared on `html`, which is then not
   the scroll container — so the browser ignored it entirely. Every measurement
   I took said "y mandatory" because it read the DECLARED value, not whether it
   was in effect. Josh: "its not sticky."

   `overflow-x: clip` still prevents sideways scrolling but does NOT create a
   scroll container, so the snap stays on the root. Declared on both elements so
   it holds whichever one the browser ends up scrolling. */
body { overflow-x: clip; }
/* MANDATORY, not proximity (Josh, 2026-07-27: "sometimes the frame snaps
   cleanly and sometimes there's a little left at the bottom why is that").
   That IS proximity: it only tidies up if you happen to stop near a frame
   edge, otherwise it leaves you wherever the wheel stopped — measured 6 clean
   landings out of 12 varied scrolls, misses up to 461px, which is the strip of
   the next frame he photographed. Mandatory: 12 of 12, every frame landing at
   exactly 76px, flush under the nav.

   Mandatory was tried before and reported as "frozen". Re-measured today: a
   gentle scroll fails to leave a frame under BOTH modes (8 of 8 nudges move
   nothing in proximity too) — the freeze was the scroll-container bug below,
   not the snap strength. Reaching the foot of the page still takes 9 scrolls
   and lands on the copyright line with nothing stranded. */
html, body { scroll-snap-type: y mandatory; scroll-padding-top: var(--nav-h); }
/* MANDATORY was wrong and the wheel proved it: three 400px nudges moved the
   page ZERO pixels — each partial scroll fell nearer the frame it started on
   and snapped straight back, so the page felt dead in the hand. Proximity locks
   onto a frame as soon as you come to rest near one, which is the behaviour
   Josh asked for, without fighting the scroll on the way there.
   (A hard one-frame-per-gesture deck is possible, but it is JavaScript
   intercepting the wheel — not CSS — and is his call, not mine to assume.) */

/* ─── HERO FRAME now holds the credential strip (Josh, 2026-07-27) ───────────
   He asked what I count as the start of a frame, and he was right to: I had the
   Viezu strip opening a frame that also carried the platform bar AND the
   six-icon grid — three things that cannot fit one screen. The strip is the
   hero's proof, so it lives at the BOTTOM of the hero frame; the next frame is
   platforms + what-we-do only. */
.hero-background.homepage, .hero-background.ag { flex-direction: column; justify-content: center; }
.hero-background.homepage > .hero { flex: 1 1 auto; display: flex; align-items: center; width: 100%; }
/* The credential strip is GONE (Josh, 2026-07-27: "it doesnt work there either.
   can you suggest another spot for it to live or if not jsut remove it").
   Both halves already had better homes — the Viezu dealer credential sits in
   the hero's lookup card, and BlueOptimize has a full band of its own. The one
   fact only the strip carried, "one of only 30 in North America", moved into
   the hero card line. Rule kept as a tombstone so nobody re-adds the element
   expecting styling to exist. */

/* ─── BANDS SCALE WITH THE WINDOW ────────────────────────────────────────────
   Fixed pixel type and padding is why frames kept overflowing on Josh's machine
   while fitting on mine — his text renders larger and there was no give. Type
   and spacing are now bounded by viewport height, so a band shrinks to its
   frame instead of spilling out of it, whatever the browser's metrics. */
.hero-feature { padding: clamp(20px, 4.5vh, 64px) 0; }
.hero-feature .title { font-size: clamp(1.5rem, 3.4vh, 2.25rem); }
.hero-feature .lead { font-size: clamp(.9375rem, 1.95vh, 1.125rem); line-height: 1.5; }
.hero-feature .band-label { font-size: clamp(.6875rem, 1.2vh, .75rem); }
.hero-feature .left-divider { margin: clamp(8px, 1.6vh, 20px) 0 clamp(12px, 2.6vh, 40px); }
.hero-feature .cols { gap: clamp(18px, 3.5vh, 60px); }
.bo-figs { gap: clamp(8px, 1.4vh, 14px); margin-top: clamp(10px, 2vh, 20px); }
.bo-fig b { font-size: clamp(1.05rem, 2.4vh, 1.5rem); }
.bo-src { font-size: clamp(.6875rem, 1.25vh, .8125rem); margin-top: clamp(8px, 1.5vh, 14px); }
.ag-machines { gap: clamp(5px, .9vh, 8px); margin-top: clamp(8px, 1.6vh, 18px); }
.ag-brand { margin-top: clamp(10px, 1.8vh, 24px); padding: clamp(8px, 1.4vh, 13px) 15px; }
.ag-ctas { margin-top: clamp(10px, 1.8vh, 24px); }

/* Bigger artwork in the ag band (Josh, 2026-07-27: "make the image larger in
   the frame"). Two moves, neither of which may cost the frame its fit: the art
   column takes more of the grid, and on wide screens the tile bleeds toward the
   right edge the way `.cols.media-xl` already does elsewhere — bounded by the
   real gutter so it can never push the page sideways. The height cap stays,
   just looser, because art was one of the two things that used to overflow. */
.ag-band .cols { grid-template-columns: 5fr 7fr; }
@media (min-width: 1200px) {
  .ag-band .art-tile { margin-right: calc(-1 * min(150px, (100vw - 1080px) / 2 - 24px)); }
}
.ag-band .art-tile img { max-height: calc(100vh - var(--nav-h) - 150px); }