/* ============================================================
   Dinsmore Steele - child theme overrides on Atlas
   Matches the live WordPress site: palette, section backgrounds,
   angled section dividers, pill CTAs, header and footer chrome.
   ============================================================ */

:root {
  --ds-orange:      #dd690d;
  --ds-orange-dark: #b85508;
  --ds-brown:       #432919;
  --ds-slate:       #3f475f;
  --ds-navy:        #2c3344;   /* footer + diagonal band */
  --ds-cream:       #fcf5f0;   /* primary section background */
  --ds-cream-lt:    #fdfaf7;   /* alternate section background */
  --ds-tan:         #e4cbba;
  --ds-radius:      20px;
  --ds-shadow:      0 4px 20px rgba(63, 71, 95, .08);
}

/* ---------- HEADER ---------------------------------------- */
/* live site: white, 87px, sticky, soft shadow.
   Shadow goes on .kl-header only - .kl-navbar is a 1240px inner container,
   so shadowing it makes the bar look boxed. */
.kl-header {
  background: #fff !important;
  box-shadow: var(--ds-shadow);
}
.kl-navbar { background: transparent !important; min-height: 87px; }

img.kl-navbar__logo,
.kl-navbar__logo { max-height: 36px !important; width: auto !important; }

/* nav links: slate, medium weight, generous spacing like the WP site */
.kl-navbar__button {
  color: var(--ds-slate) !important;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none !important;
}
.kl-navbar__button:hover { color: var(--ds-orange) !important; }

/* the Atlas demo CTAs - hidden; DS uses a single pill CTA */
.kl-navbar__end { display: none !important; }

/* ---------- PILL CTA WITH CIRCULAR ARROW ------------------- */
/* the live site's signature button: orange pill, white circle + arrow on the left */
.button,
.button_cta a,
button.button {
  border-radius: 999px !important;
  padding: 14px 30px 14px 30px !important;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color .18s ease, transform .18s ease;
}
.button:hover { transform: translateY(-1px); }

/* Live-site anatomy: orange pill, white circle holding the arrow pinned left.
   On hover the circle stretches to fill the pill and the arrow slides right,
   so the text sits on white and turns brown. Reproduced exactly. */
.ds-btn-arrow {
  position: relative; display: inline-block;
  background: var(--ds-orange); color: #fff;
  padding: 12px 20px 12px 60px;
  border-radius: 25px; text-decoration: none;
  font-size: 18px; font-weight: 500; line-height: 1.4;
  transition: all .3s ease;
}
.ds-btn-arrow > span,
.ds-btn-arrow { position: relative; }
.ds-btn-arrow::after {          /* the text needs to sit above the circle */
  content: ""; position: absolute; inset: 0; border-radius: 25px;
}
.ds-btn-arrow::before {
  content: ""; position: absolute; top: 50%; left: 3px;
  transform: translateY(-50%);
  width: 45px; height: 45px; border-radius: 50px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23432919' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
  background-position: center;
  transition: width .3s ease, border-radius .3s ease, background-position .3s ease;
}
.ds-btn-arrow:hover {
  color: var(--ds-brown);
  padding-right: 60px; padding-left: 20px;
}
.ds-btn-arrow:hover::before {
  width: calc(100% - 6px); border-radius: 25px;
  background-position: right 14px center;
}
/* keep the label above the expanding white circle */
.ds-btn-arrow { z-index: 0; }
.ds-btn-arrow::before { z-index: -1; }

/* ---------- SECTION BACKGROUNDS --------------------------- */
/* apply via a section's "Add CSS class" field in the editor */
.ds-bg-cream      { background-color: var(--ds-cream) !important; }
.ds-bg-cream-lt   { background-color: var(--ds-cream-lt) !important; }
.ds-bg-white      { background-color: #fff !important; }
.ds-bg-navy       { background-color: var(--ds-navy) !important; color: #fff; }
.ds-bg-orange     { background-color: var(--ds-orange) !important; color: #fff; }
.ds-bg-navy  h1, .ds-bg-navy  h2, .ds-bg-navy  h3,
.ds-bg-orange h1, .ds-bg-orange h2, .ds-bg-orange h3 { color: #fff !important; }

/* ---------- SWIPES (the angled section transitions) --------
   The live site does these with full-width PNG shapes, not CSS angles,
   so the curve is identical rather than approximated. Both assets are
   cream-on-transparent, which means they read correctly over any
   neighbouring background.

   HOW MARKETING USES THESE
   In the page editor, open a section, Styles tab, "Add CSS classes":
     ds-bg-cream  ds-swipe-top      cream band, angled entry from above
     ds-bg-cream  ds-swipe-bottom   angled exit below
     ds-bg-cream  ds-swipe-top ds-swipe-bottom   both
   No code needed, and it scales with the viewport.                    */

/* Implemented as background layers inside the section's own top/bottom
   padding, not as overhanging pseudo-elements.

   Overhang was tried first and does not survive HubSpot's markup: a dnd
   section is position:relative, so a pseudo-element that sticks out paints
   over the neighbouring section and slices through its text; pushing it back
   with z-index:-1 then drops it behind the page background and it vanishes.
   The shapes here are the opaque white-to-cream artwork, so the angle is
   drawn entirely within this section and nothing overlaps anything.

   PRECONDITION, and it bit: the adjacent section must be WHITE, because the
   artwork's own leading edge is white. That held until the hero was changed to
   fade to grey - at which point ds-swipe-top under the hero painted a white band
   between the grey hero and the cream section, with nothing above it to match.
   A section directly below the hero should use ds-bg-cream on its own, with no
   ds-swipe-top, so the cream runs straight up to the hero's edge. */

.ds-swipe-top {
  background-image: var(--ds-img-swipe-top-solid) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% auto !important;
  /* CAPPED, and slightly trimmed. Two problems with the bare `18.65vw`:
     (1) it is viewport-relative with no ceiling, so on a 2560px monitor it reserved
         477px of empty space at the top of the section and kept growing;
     (2) even at 1364px it put 254px above the content where WordPress puts ~200,
         because WordPress positions its divider artwork ABSOLUTELY and so pays no
         layout cost for it at all.
     Measured against the live site at the same width: the gap from the card grid to
     the next heading was 406px here versus 353px there. Capping at the artwork's own
     height stops the runaway, and trimming the multiplier closes the rest - the
     content simply sits a little further into the solid-cream part of the shape,
     which is where it can safely go. */
  /* Content OVERLAPS the artwork, as WordPress does it. Its own rule is
       .section-shape-1 .inner-section   { padding: 100px 0 }
       .section-shape-1 .inner-container { margin-top: -15% }
     i.e. the copy is pulled back up into the shape rather than sitting below it,
     which is why WordPress pays almost no vertical cost for the angle. Reserving the
     artwork's full height (the original 18.65vw) put 254px of dead space above every
     cream section - 477px on a 2560px screen, uncapped. ~7.5vw lands the copy over the
     solid part of the shape with the angle still fully visible above it. */
  padding-top: min(7.5vw, 145px) !important;
}
.ds-swipe-bottom {
  background-image: var(--ds-img-swipe-bot-solid) !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: 100% auto !important;
  padding-bottom: min(7vw, 135px) !important;    /* same reasoning as the top */
}
/* both edges: two layers on one element, top listed first */
.ds-swipe-top.ds-swipe-bottom {
  background-image: var(--ds-img-swipe-top-solid), var(--ds-img-swipe-bot-solid) !important;
  background-position: center top, center bottom !important;
  background-size: 100% auto, 100% auto !important;
}

/* Do NOT also set the section's background colour in the editor's Styles tab
   when using a swipe. HubSpot implements section background-color as
   background-image: linear-gradient(colour, colour) in an inline <style>
   block, which beats the stylesheet and erases the shape. Use ds-bg-cream
   for the colour instead - it sets background-color, which layers behind. */

/* small orange accent wedge, bottom-left, as on the homepage hero */
.ds-wedge { position: relative; overflow: hidden; }
.ds-wedge::before {
  content: ""; position: absolute; left: 6%; bottom: 0;
  width: 92px; height: 34px; background: var(--ds-orange);
  clip-path: polygon(0 0, 100% 0, 76% 100%, 24% 100%);
  border-radius: 0 0 8px 8px;
}

/* ---------- TWO-TONE SECTION HEADINGS --------------------- */
/* Every DS section heading is written as a dark first line and an orange
   second line. In WordPress that was <strong> + a hard line break; here the
   generator emits <strong> for the dark half and .ds-accent for the orange,
   which keeps it editable in the rich-text editor. */
h1 strong, h2 strong, h3 strong { color: var(--ds-brown); font-weight: 600; }
/* INLINE, with natural wrapping - which is what WordPress does. Its headings are
   `<strong>dark half</strong>` followed by the orange half as bare text, so the two
   flow together and wrap only when they run out of room. Forcing the accent to block
   broke every heading onto two lines whether it needed it or not: "This is a Review.
   Not a Quote Sheet" sits on one line on the live site and was being split here.
   Modules that genuinely want a stacked heading (the homepage card grids) set
   `display: block` on their own `strong`, so they are unaffected. */
.ds-accent-line { display: inline; margin-left: .28em; }

.ds-accent {
  display: block;
  color: var(--ds-orange);
  font-weight: 300;
}


/* ---------- CHECKLIST -------------------------------------
   The live site's .list-3: 19px orange check, 40px indent, brown text.
   Shared by ds-hero-internal and ds-split, so it belongs here rather than
   inside whichever module was written first. */
.ds-checklist { list-style: none; margin: 8px 0 0; padding: 0; }
.ds-checklist li {
  position: relative;
  margin-top: 20px; padding-left: 40px;
  font-size: 18px; line-height: 1.6;
  color: var(--ds-brown, #432919);
}
.ds-checklist li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 19px; height: 19px;
  background: var(--ds-img-check) no-repeat center / contain;
}

/* ---------- FLOATING CHECK PILLS (hero badges) ------------- */
.ds-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 999px;
  padding: 12px 22px; margin: 0 0 12px;
  box-shadow: 0 6px 22px rgba(63, 71, 95, .12);
  color: var(--ds-slate); font-weight: 600; font-size: 15px;
}
/* The real WordPress tick - img/check-hero.png, 22x22 - rather than the SVG I
   drew by hand. The original has weight and inner detail the drawn one lacked.
   Delivered through a custom property because get_asset_url resolves to a
   theme-relative path inside a .css file; see the note in base.html. */
.ds-pill::before {
  content: ""; flex: 0 0 22px; height: 22px;
  background: var(--ds-img-check-hero) center/22px no-repeat;
}

/* ---------- CARDS ----------------------------------------- */
.kl-card, .card, [class*="card"] > .kl-card__inner {
  border-radius: var(--ds-radius);
}

/* ---------- FOOTER ---------------------------------------- */
/* Restructured 2026-08-10 (Eric's header/footer pass): WP renders the arch
   art as a FULL-WIDTH band sitting ABOVE the navy panel (footer > .image-shape
   > img { width:100% }), on the page background. Our absolutely-positioned
   right-corner version was the "arch weirdly off to the right" miss. */
.ds-footer { color: #cfd4de; font-size: 15px; line-height: 1.7; }
.ds-footer__arch { display: block; line-height: 0; }
.ds-footer__arch img { display: block; width: 100%; height: auto; }
.ds-footer__band {
  position: relative; overflow: hidden;
  background: var(--ds-navy);
  padding: 76px 24px 0;
}
/* retired: the old corner treatment (kept inert for any cached HTML) */
.ds-footer__shape { display: none; }
.ds-footer__inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 56px;
}
.ds-footer__heading {
  /* the live site: 25px / 600 / white. Ours was a 15px uppercase letterspaced label,
     which is a different visual language entirely. */
  color: #fff; font-size: 25px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  margin: 0 0 18px;
}
.ds-footer ul { list-style: none; margin: 0; padding: 0; }
.ds-footer__col--links ul { margin-top: 40px; }
.ds-footer__col--links li { margin-bottom: 14px; }
.ds-footer__col--links a { font-size: 18px; }
.ds-footer a { color: #d0d0d3; text-decoration: none; transition: color .15s ease; }
.ds-footer a:hover { color: var(--ds-orange, #dd690d); }

/* The brand column sits on a faint orange-to-navy gradient panel, which is what gives
   the original footer its centre of gravity. Taken verbatim from the live site's
   `.column-center`. Ours had no panel at all. */
.ds-footer__col--brand {
  background: linear-gradient(0deg, rgba(251, 123, 22, .2) 0%, rgba(42, 49, 66, .2) 100%);
  padding: 0 50px 70px;
  text-align: center;
}
.ds-footer__logo { display: table; margin: 0 auto; }
.ds-footer__logo img { max-height: 46px; width: auto; margin-bottom: 20px; }
.ds-footer__tagline { margin: 0 auto 14px; max-width: 46ch; color: #d0d1d3; }
.ds-footer__tagline--bold { color: #fff; font-weight: 600; }

/* Social: 55px OUTLINED circles, and on hover the orange wipes across from the left
   rather than simply switching colour - `::before` slides from translateX(-100%) to 0.
   Ours were 38px translucent-filled circles. */
.ds-footer__col--brand .ds-footer__heading { margin-top: 80px; }
.ds-footer__social { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.ds-footer__social a {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  width: 55px; height: 55px; border-radius: 50%;
  border: 1px solid #d0d0d3; background: none; color: #d0d0d3;
  transition: border-color .3s ease, color .3s ease;
}
.ds-footer__social a::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--ds-orange, #dd690d);
  transform: translateX(-100%); transition: transform .3s ease;
}
.ds-footer__social a svg { position: relative; z-index: 1; }
.ds-footer__social a:hover { border-color: var(--ds-orange, #dd690d); color: #fff; }
.ds-footer__social a:hover::before { transform: translateX(0); }

/* Contact rows: outlined 55px circle, 25px gap, orange label, grey value */
.ds-footer__contact {
  display: flex; align-items: center; gap: 25px; margin-top: 40px;
}
.ds-footer__cicon {
  flex: 0 0 55px; width: 55px; height: 55px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid #d0d0d3; color: #d0d0d3;
}
.ds-footer__ctext { font-size: 18px; font-weight: 350; color: #acafb6; }
.ds-footer__ctext p { margin: 0; }
.ds-footer__ctext a { color: #acafb6; }
.ds-footer__label {
  display: block;
  color: var(--ds-orange, #dd690d); font-weight: 600; margin: 0;
}

.ds-footer__legal {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 56px auto 0;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-size: 13.5px; color: #9aa3b4;
}
.ds-footer__legal ul { display: flex; gap: 26px; }

@media (max-width: 991px) {
  .ds-footer__inner { grid-template-columns: 1fr; gap: 40px; }
  .ds-footer__col--brand { padding: 0 24px 40px; order: 1; }
  .ds-footer__col--brand .ds-footer__heading { margin-top: 40px; }
  .ds-footer__contact { margin-top: 25px; }
  .ds-footer__shape { width: 70%; opacity: .35; }
  .ds-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ---------- PAGE CANVAS ----------------------------------- */
/* the live site sits on white; Atlas defaults to a tinted body */
body, .body-wrapper { background-color: #fff; }

/* ---------- HOMEPAGE FEATURED WIDE CARD -------------------- 2026-08-10
   WP's .card-featured ("Market position validation") is a compact white card
   in the same container as its three siblings - NOT a full-bleed section.
   Scoped to a row class so the ds-split module itself is untouched. */
.ds-featured-card { padding-left: 24px; padding-right: 24px; }
.ds-featured-card .ds-split {
  max-width: 1192px; margin: 0 auto;
  background: #fff; border: 1px solid #ececec; border-radius: 20px;
  box-shadow: 0 16px 34px rgba(63, 71, 95, .08);
  padding: 28px 34px;
}
/* !important: the sitewide type-scale block would otherwise re-inflate this
   card's heading (Eric 2026-08-10: keep it compact so the text block bottom
   lines up with the photo; slightly larger than WP's 24px is fine). */
.ds-featured-card .ds-split__heading,
.ds-featured-card .ds-split__heading strong {
  font-size: 28px !important; line-height: 1.3 !important;
  color: var(--ds-slate, #3f475f);
}
.ds-featured-card .ds-split__heading strong {
  display: inline; color: inherit; font-weight: 700;
}
.ds-featured-card .ds-split__text { font-size: 17px !important; line-height: 1.6 !important; }
.ds-featured-card .ds-split img { border-radius: 14px; }

/* ---------- BLOG ---------------------------------------------
   Listing and post chrome for the DS blog templates. Lives here rather than in a
   module because the blog templates are coded, not drag-and-drop - see the note
   at the top of blog-index-ds.html for why. */

.ds-blog-hero {
  position: relative;
  background: var(--ds-cream);
  padding: 74px 24px 66px;
  overflow: hidden;
}
.ds-blog-hero::after {           /* the same slate diagonal the inner pages use */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: var(--ds-img-tophero-band) center bottom / 100% auto no-repeat;
  pointer-events: none; z-index: 0;
}
.ds-blog-hero__inner {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto;
}
.ds-blog-hero__eyebrow {
  display: block; margin-bottom: 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ds-orange);
}
.ds-blog-hero__title {
  margin: 0; max-width: 20ch;
  font-size: 54px; line-height: 1.08; font-weight: 700; color: var(--ds-brown);
}
.ds-blog-hero__title strong { color: var(--ds-orange); font-weight: 700; }
.ds-blog-hero__text {
  margin: 18px 0 0; max-width: 60ch;
  font-size: 18px; line-height: 1.7; font-weight: 600; color: var(--ds-brown);
}

.ds-blog-list { padding: 62px 24px 78px; background: #fff; }
.ds-blog-list__inner { max-width: 1240px; margin: 0 auto; }

.ds-blog-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 28px;
  grid-template-columns: repeat(3, 1fr);
}
.ds-blog-card { margin: 0; }
.ds-blog-card__link {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
  background: #fff; border: 1px solid #e7e2dd; border-radius: var(--ds-radius);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.ds-blog-card__media {
  display: block; aspect-ratio: 16 / 9; background: var(--ds-cream-lt);
}
.ds-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-blog-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; }
.ds-blog-card__tag {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ds-orange);
}
.ds-blog-card__title {
  font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--ds-brown);
}
.ds-blog-card__summary {
  font-size: 15px; line-height: 1.65; font-weight: 500; color: var(--ds-slate);
}
.ds-blog-card__meta {
  margin-top: auto; padding-top: 6px;
  font-size: 13px; font-weight: 600; color: #8a8178;
}
/* hover lift only where a pointer exists - same reasoning as the logo wall */
@media (hover: hover) and (pointer: fine) {
  .ds-blog-card__link:hover {
    box-shadow: 0 10px 30px rgba(63, 71, 95, .13);
    transform: translateY(-3px);
    border-color: #dcd4cc;
  }
}
.ds-blog-card__link:focus-visible { outline: 3px solid var(--ds-orange); outline-offset: 3px; }

.ds-blog-pager {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  margin-top: 54px; font-weight: 600; color: var(--ds-brown);
}
.ds-blog-pager a { color: var(--ds-orange); text-decoration: none; }
.ds-blog-pager a:hover { text-decoration: underline; }
.ds-blog-pager__count { font-size: 14px; color: var(--ds-slate); }
.ds-blog-empty { color: var(--ds-slate); font-weight: 600; }

@media screen and (max-width: 1199px) {
  .ds-blog-hero__title { font-size: 42px; }
  .ds-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media screen and (max-width: 767px) {
  .ds-blog-hero { padding: 46px 24px 44px; }
  .ds-blog-hero__title { font-size: 32px; max-width: none; }
  .ds-blog-hero__text { font-size: 16px; }
  .ds-blog-list { padding: 40px 24px 52px; }
  .ds-blog-grid { grid-template-columns: 1fr; gap: 18px; }
  .ds-blog-card__title { font-size: 18px; }
}

/* ---------- TYPOGRAPHY --------------------------------------
   Roboto is the agreed brand typeface (Rodney's call) and it is set in the
   HubSpot brand kit. It was not on the site.

   Two reasons, and neither is obvious:

   1. Brand-kit FONTS have no HubL surface. `brand_settings` exposes colours,
      logos and favicons only - there is no font variable of any kind - and
      HubSpot's own docs say a custom theme must load the font itself. So setting
      Roboto in the brand kit could never have reached this theme.
   2. The inherited Atlas stylesheet declares `font-family: helvetica, sans-serif`
      on body, all six heading levels, buttons, forms and ~20 other selectors,
      and separately @imports Inter. Measured on the live page, every element
      computed to `helvetica, sans-serif`. On a Mac that silently looks fine; on
      Windows, where Helvetica is usually absent, it lands on Arial or whatever
      the generic sans resolves to. Nobody would necessarily notice, which is
      why it survived.

   Eric flagged that the brand kit has Roboto with NO fallback defined. A bare
   `font-family: Roboto` is a real risk: if the webfont fails, is blocked by a
   consent tool, or is unavailable, the browser drops to its default - which is a
   SERIF on most platforms. So the stack below is explicit, ending in the system
   UI fonts and then sans-serif. Roboto is also a system font on Android, so the
   stack degrades sensibly there without a download.

   Selector list mirrors the Atlas declarations above so this wins on
   equal specificity, loading after main.css - no !important needed. */
:root {
  --ds-font: 'Roboto', 'Helvetica Neue', Helvetica, Arial,
             system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body,
button, .button, .button_cta a,
.widget-type-cta,
form, .submitted-message,
form input[type=submit], form .hs-button,
h1, h2, h3, h4, h5, h6,
input, select, textarea, optgroup,
.kl-navbar__button, .kl-navbar-submenu__item a,
.blog-header__preheader, .blog-tags__link, .blog-pagination__link,
.blog-index__post-preheader, .blog-more-posts__post-preheader,
.blog-post__preheader,
.hs-search-results__title, .hs-search-results__pagination a {
  font-family: var(--ds-font);
}

/* The header is position:fixed (see ds-navbar/module.css for why sticky could
   not work inside HubSpot's partial wrapper), so it no longer occupies space.
   This gives it back, using the same custom property the bar itself uses so the
   two can never drift - including the 98px phone value. */
.body-wrapper { padding-top: var(--ds-nav-h, 120px); }

/* and in-page anchors must not land underneath the fixed bar */
[id] { scroll-margin-top: calc(var(--ds-nav-h, 120px) + 14px); }


/* ---------- TIGHTER SECTION RHYTHM ----------
   WordPress separates content sections with one `margin-top: 100px` and no bottom
   margin, so the gap between two sections is 100px. Ours was 80px of dnd row padding
   plus 72px of module padding on BOTH sides of every boundary - 304px - which is
   where the extra page height came from (6642px against WordPress's 5056px on
   /cfos). The builder now zeroes the row padding and this class puts 50px a side on
   the module, giving the 100px gap back.

   Scoped to a class rather than changed on the modules themselves, because the
   homepage deliberately breathes more than the internal pages do. */
.ds-section-tight .ds-split,
.ds-section-tight .ds-boxes,
.ds-section-tight .ds-copy,
.ds-section-tight .ds-banner { padding-top: 50px; padding-bottom: 50px; }

/* the navy band sets its own padding from the copy, so leave it alone */
.ds-section-tight .ds-split--navy { padding-top: 0; padding-bottom: 0; }

@media screen and (max-width: 767px) {
  .ds-section-tight .ds-split,
  .ds-section-tight .ds-boxes,
  .ds-section-tight .ds-copy,
  .ds-section-tight .ds-banner { padding-top: 30px; padding-bottom: 30px; }
}


/* ------------------------------------------------------------------ 2026-08-10
   Atlas ships a global `:focus { outline: #b7580b auto }` and relies on JS
   toggling `.disable-focus-styles` to hide it for mouse users - JS our custom
   base.html never carried. Once the nav script was fixed (2026-08-10) menu
   toggles started retaining focus after a click, which made the orange ring
   appear around menu items. Keep the ring for keyboard users (accessibility),
   suppress it for pointer clicks. */
:focus:not(:focus-visible) { outline: none; }

/* ================================================== 2026-08-10 TYPE SCALE v3
   Measured + verified against the WP stylesheet itself (html 62.5% root):
   .title-N = 5rem (50px) orange light half, strong = 6rem (60px) brown;
   body 20px/32px; card text 20px; icons 84px; banner 50/40; container 1300px.
   !important because module CSS loads after child.css. REVERT: delete block. */
@media screen and (min-width: 1200px) {
  .ds-split__heading, .ds-copy__heading, .ds-boxes__heading,
  .ds-options__heading, .ds-fblog__heading, .ds-logos__heading,
  .ds-stepper__heading, .ds-stats__title {
    font-size: 50px !important; line-height: 1.1 !important;
  }
  .ds-split__heading strong, .ds-copy__heading strong, .ds-boxes__heading strong,
  .ds-options__heading strong, .ds-fblog__heading strong, .ds-logos__heading strong,
  .ds-stepper__heading strong {
    font-size: 60px !important; line-height: 1.1 !important;
  }
  .ds-split__text, .ds-copy__text, .ds-banner__text,
  .ds-boxes__intro, .ds-options__intro, .ds-fblog__intro,
  .ds-ihero__text, .ds-intro__text {
    font-size: 20px !important; line-height: 32px !important;
  }
  .ds-boxes__card-text, .ds-stepper__text { font-size: 20px !important; line-height: 1.6 !important; }
  .ds-fblog__summary { font-size: 17px !important; }
  .ds-checklist li { font-size: 20px !important; }
  .ds-boxes__icon img { width: 84px !important; }
  .ds-stepper__icon img { max-width: 176px !important; height: auto !important; max-height: 150px !important; }
  .ds-banner__heading { font-size: 40px !important; }
  .ds-banner__heading strong { font-size: 50px !important; }
  .ds-split__inner, .ds-copy__inner, .ds-boxes__inner, .ds-options__inner,
  .ds-fblog__inner, .ds-logos__inner, .ds-stepper__inner, .ds-stepper__header,
  .ds-stats__inner, .ds-banner__inner, .ds-casepanel__inner {
    max-width: 1300px !important;
  }
}

/* Eric 2026-08-10: the orange second heading line was indenting a few px in
   several places - a legacy inline-era margin on the accent span colliding
   with the literal space that now separates the halves. Kill the margin. */
.ds-accent-line { margin-left: 0 !important; text-indent: 0 !important; }

/* Eric 2026-08-10: the arrow button on colour bands lost its anatomy - my
   band-variant override reset the 60px left padding that reserves the disc's
   space, so the arrow sat under the text and the orange disc vanished.
   Correct treatment: white pill, brown label, ORANGE disc + white arrow. */
.ds-banner--orange .ds-btn-arrow, .ds-banner--slate .ds-btn-arrow, .ds-banner--navy .ds-btn-arrow {
  background: #fff !important; color: var(--ds-brown, #432919) !important;
  padding: 12px 20px 12px 60px !important; border-radius: 25px !important;
  display: inline-block !important; font-weight: 600;
}
.ds-banner--orange .ds-btn-arrow::before, .ds-banner--slate .ds-btn-arrow::before, .ds-banner--navy .ds-btn-arrow::before {
  background: var(--ds-orange, #dd690d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
}
.ds-banner--orange .ds-btn-arrow:hover::before, .ds-banner--slate .ds-btn-arrow:hover::before, .ds-banner--navy .ds-btn-arrow:hover::before {
  background-position: right 14px center;
}

/* Homepage case-study callout (Eric 2026-08-10): WP sets the whole Case
   Studies region on the cream shape and renders the "Industry:" line as a
   large white heading with the copy in a narrow column. Row class. */
.ds-case-callout .ds-banner__eyebrow {
  font-size: 28px !important; font-weight: 400 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  opacity: 1 !important; margin-bottom: 18px !important;
}
.ds-case-callout .ds-banner__copy { flex: 0 1 40% !important; }
.ds-case-callout .ds-banner__photo { flex: 1 1 55% !important; }

/* Footer tighten (Eric 2026-08-10): arch band + navy read taller than WP.
   Site-wide. Pull the arch into the preceding section's tail (its top is
   transparent), trim the navy padding and legal-bar spacing. */
.ds-footer__arch { margin-bottom: -2px; }
.ds-footer__arch img { margin-top: -3vw; }
.ds-footer__band { padding-top: 44px !important; }
.ds-footer__heading { margin-top: 0 !important; }
.ds-footer__legal { margin-top: 28px !important; padding: 16px 0 20px !important; }

/* Compact square cards - alignment-review "What's included" (WP: 24px titles,
   square corners, tighter padding). Row class. */
.ds-cards-compact .ds-boxes__card { border-radius: 0 !important; padding: 40px 24px !important; }
.ds-cards-compact .ds-boxes__card-title { font-size: 24px !important; }

/* Blog tag filter pills on /blog (restoring WP's category filter as plain
   links - no custom module) */
.ds-tag-pills a {
  display: inline-block; margin: 6px 8px 0 0; padding: 8px 18px;
  border: 1px solid #e5e5e5; border-radius: 22px; text-decoration: none;
  color: var(--ds-slate, #3f475f); font-size: 15px; font-weight: 600;
  transition: all .2s ease;
}
.ds-tag-pills a:hover { background: var(--ds-orange, #dd690d); color: #fff; border-color: var(--ds-orange, #dd690d); }

/* Blog search bar (plain form -> HubSpot's built-in /hs-search-results page;
   the @hubspot/search_input default module refused to render in a coded
   layoutSection, so no module dependency at all) */
.ds-blog-search { display: flex; justify-content: center; gap: 10px; max-width: 560px; margin: 0 auto; }
.ds-blog-search input {
  flex: 1 1 auto; padding: 12px 20px; font-size: 16px;
  border: 1px solid #e5e5e5; border-radius: 25px; outline: none;
}
.ds-blog-search input:focus { border-color: var(--ds-orange, #dd690d); }
.ds-blog-search button {
  padding: 12px 26px; border: 0; border-radius: 25px; cursor: pointer;
  background: var(--ds-orange, #dd690d); color: #fff; font-size: 16px; font-weight: 600;
}
.ds-blog-search button:hover { background: var(--ds-brown, #432919); }

/* Case-study callout height (Eric 2026-08-10): the inset card was cropping
   the photo to a short band; WP runs the card ~390px with the photo filling
   the right edge. */
.ds-case-callout .ds-banner__inner { align-items: stretch; }
.ds-case-callout .ds-banner__photo { align-self: stretch; display: flex; }
.ds-case-callout .ds-banner__photo img {
  height: 100%; min-height: 360px; object-fit: cover;
  border-radius: 14px;
}
.ds-case-callout .ds-banner__copy { padding: 28px 0; }

/* ============================== 2026-08-10 POST-FREEZE QUEUE (Eric: "go") */

/* LAUNCH DECISION (Eric 2026-08-11): the hero->logos transition kept producing
   a wonky white wedge no matter how the cream was placed. Shipping it PLAIN
   WHITE for launch - no cream fill, no swoosh artwork in this zone. Revisit
   post-launch (the WP treatment is a cream swoop with navy/orange horns we
   deliberately don't want). Delete this block to restore the cream attempt. */
.ds-hero {
  background-color: #fff !important;
  background-image: none !important;
}
.ds-hero, .ds-hero__bg, .ds-hero__inner-bg { background-color: #fff !important; }
/* GREY SWOOP under the hero (Eric 2026-08-11, rev 2).
   ONE gradient, used in two places, so the join cannot be seen:
     --ds-swoop  left #f1f2f2 (exactly the hero scrim's colour, which is what
                 the eye reads at the image's left edge) darkening rightwards
                 towards the photo's own cool bottom-right.
   The hero's last 150px dissolve INTO that gradient, and the swoop body IS
   that gradient - so there is no boundary to notice. The swoop then runs the
   full logo band and ends on a curve below it, acting as the divider before
   Strategic oversight (the job the cream swoop did on WordPress). */
:root {
  /* 90deg, NOT an angle: with an angled gradient the colour at a given x
     depends on the element's height, so the hero (150px fade / full-height
     phone block) and the swoop (~556px) disagreed at their shared edge and
     produced a visible step. Horizontal makes the colour a pure function of
     x, identical in every element it is used in. */
  --ds-swoop: linear-gradient(90deg, #f1f2f2 0%, #eef0f3 40%, #e4e9f0 66%, #cfd8e3 100%);
}

/* the photo's bottom 150px fade down into the swoop gradient */
.ds-hero__media { position: relative; }
.ds-hero__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
  background: var(--ds-swoop);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 55%, #000 92%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 55%, #000 92%);
  pointer-events: none;
}

.ds-logos-plain { position: relative; background: transparent !important; }
.ds-logos-plain > * { position: relative; z-index: 2; }
.ds-logos-plain::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0; pointer-events: none;
  background: var(--ds-swoop);
  /* bottom edge cut with the THEME'S OWN sweep artwork (alpha extracted from
     divosory-section-bottom_02.png), so the grey swoop ends on the same shallow
     asymmetric curve as the cream swoops elsewhere on the site. Two mask
     layers: a solid block for the body + the artwork shape at the foot.
     Artwork is 1920x296, i.e. 15.42% of its width. */
  -webkit-mask-image: linear-gradient(#000, #000), var(--ds-img-swoop-mask);
          mask-image: linear-gradient(#000, #000), var(--ds-img-swoop-mask);
  -webkit-mask-position: top center, bottom center;
          mask-position: top center, bottom center;
  -webkit-mask-size: 100% calc(100% - 15.42vw), 100% auto;
          mask-size: 100% calc(100% - 15.42vw), 100% auto;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
}
.ds-logos-plain .ds-logos { background: transparent !important; }

/* home hero H1 measured 100px/600 on WP (ours ran 84/700) */
@media screen and (min-width: 1200px) {
  /* Eric 2026-08-11: WP measures 100px but that reads too heavy here and
     eats the hero - stepped down a notch, fluid so it never dominates. */
  .ds-hero__heading { font-size: clamp(56px, 5.2vw, 78px) !important; font-weight: 600 !important; line-height: 1.08 !important; }
  .ds-stats__value { font-size: 45px !important; }
  .ds-stats__value--text { font-size: 28px !important; }
  .ds-stats__label { font-size: 18px !important; }
  .ds-embed__intro, .ds-embed__footnote { font-size: 20px !important; line-height: 32px !important; }
}

/* home "Economic governance" card titles: WP 30px/800 slate */
.ds-cards-home-gov .ds-boxes__card-title { font-size: 30px !important; font-weight: 800 !important; color: var(--ds-slate, #3f475f) !important; }

/* blog cards: normalize image crop to WP's uniform 418x272 box */
.ds-fblog__media img { width: 100%; aspect-ratio: 418 / 272; object-fit: cover; }

/* notched rows need their white plates even on beige bands */
.ds-split--notched .ds-checklist li { background: #fff !important; }

/* banner photos must never upscale past natural size (scaling: 137% blowup) */
.ds-banner__photo img { max-height: 700px; width: auto; max-width: 100%; margin: 0 auto; }

/* soft swipe variant: gsb's boxes divider uses the _04 artwork, not _02 */
.ds-swipe-top-soft {
  background-image: var(--ds-img-swipe-top) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% auto !important;
  padding-top: min(7.5vw, 145px) !important;
}

/* second tophero band (mid-market "Independent. Data-driven.") */
.ds-band-tophero {
  background-image: var(--ds-img-tophero-band) !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: 100% auto !important;
}

/* case-studies hero photo: WP renders it ~335px tall, ours stretched to 595 */
.ds-ihero__photo img[width="420"] { max-width: 420px; margin-left: auto; }

/* Blog toolbar v2 (Eric's side-by-side 2026-08-10): WP places search + a
   "Filter by category" dropdown together right off the hero - one compact
   row, no dead space, dropdown instead of pill links. */
.ds-blog-toolbar-row .ds-copy { padding: 28px 0 8px !important; }
.ds-blog-toolbar {
  display: flex; justify-content: center; align-items: center;
  gap: 12px; flex-wrap: wrap; max-width: 760px; margin: 0 auto;
}
.ds-blog-toolbar input[type="text"] {
  flex: 1 1 260px; padding: 12px 20px; font-size: 16px;
  border: 1px solid #e5e5e5; border-radius: 25px; outline: none; background: #fff;
}
.ds-blog-toolbar input[type="text"]:focus { border-color: var(--ds-orange, #dd690d); }
.ds-blog-toolbar button {
  padding: 12px 26px; border: 0; border-radius: 25px; cursor: pointer;
  background: var(--ds-orange, #dd690d); color: #fff;
  font-size: 16px; font-weight: 600; white-space: nowrap;
}
.ds-blog-toolbar button:hover { background: var(--ds-brown, #432919); }
.ds-blog-toolbar select {
  flex: 0 1 240px; padding: 12px 20px; font-size: 16px;
  border: 1px solid #e5e5e5; border-radius: 25px; background: #fff;
  color: var(--ds-slate, #3f475f); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233f475f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}

/* Blog top tightened (Eric): toolbar sits snug under the hero, cards snug
   under the toolbar. */
.ds-blog-toolbar-row .ds-copy { padding: 20px 0 4px !important; }
.ds-row-tight-top .ds-fblog { padding-top: 12px !important; }
.ds-row-tight-top .ds-fblog__grid { margin-top: 20px !important; }

/* blog top: the two rows also carry HubSpot's default section padding - zero it */
.ds-blog-toolbar-row { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: -30px !important; }
.ds-row-tight-top { padding-top: 0 !important; }


/* ============================================================================
   SECTION STYLE FROM THE MODULE  (phase 2, 2026-08-11)

   Backgrounds and the angled dividers have to live on the dnd-section row: the
   row is full-bleed, and Atlas gives it `padding: 80px 20px`, so the same
   classes on the module's own <section> would be inset 20px and stop reaching
   the page edges.

   Marketing cannot write a class onto the row - only into a CSS box, which is
   what this phase is removing. So the module writes a marker class on ITSELF
   and the row is styled by :has(). The result is a normal labelled field in the
   editor, with the styling still applied to the full-bleed element.

   Supported everywhere current: Chrome 105+, Safari 15.4+, Firefox 121+. On an
   older browser a cream band renders white; nothing moves or breaks.

   The legacy classes on the row still work exactly as before - both mechanisms
   are live during the migration, and the ten one-off developer classes
   (ds-cards-artmed, ds-case-callout and friends) are untouched by all of this.
   ============================================================================ */

.dnd-section:has(> .row-fluid .ds-sec--cream)      { background-color: var(--ds-cream) !important; }
.dnd-section:has(> .row-fluid .ds-sec--cream-lt)   { background-color: var(--ds-cream-lt) !important; }

.dnd-section:has(> .row-fluid .ds-sec--swipe-top) {
  background-image: var(--ds-img-swipe-top-solid) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% auto !important;
  padding-top: min(7.5vw, 145px) !important;
}
.dnd-section:has(> .row-fluid .ds-sec--swipe-bottom) {
  background-image: var(--ds-img-swipe-bot-solid) !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: 100% auto !important;
  padding-bottom: min(7vw, 135px) !important;
}
.dnd-section:has(> .row-fluid .ds-sec--swipe-top):has(> .row-fluid .ds-sec--swipe-bottom) {
  background-image: var(--ds-img-swipe-top-solid), var(--ds-img-swipe-bot-solid) !important;
  background-position: center top, center bottom !important;
  background-size: 100% auto, 100% auto !important;
}

/* Spacing. The legacy .ds-section-tight is a descendant selector on the row, so
   it needs its own rule when the marker sits on the module instead. */
/* EXACTLY the modules the legacy `.ds-section-tight .x` rule covered - no more.
   Extending it to ds-fblog, ds-stats, ds-logos, ds-leaders and ds-casepanel
   looked tidier but would have SHRUNK their padding (ds-fblog 66/78 -> 50/50,
   ds-stats 72 -> 50), which the old rule never did to them. A migration that
   changes rendering is a failed migration, however small. */
.ds-sec--tight.ds-split,
.ds-sec--tight.ds-boxes,
.ds-sec--tight.ds-copy,
.ds-sec--tight.ds-banner   { padding-top: 50px !important; padding-bottom: 50px !important; }
.ds-sec--tight.ds-split--navy { padding-top: 0 !important; padding-bottom: 0 !important; }
.dnd-section:has(> .row-fluid .ds-sec--flush) { padding-top: 0 !important; padding-bottom: 0 !important; }

@media (max-width: 767px) {
  .ds-sec--tight.ds-split,
  .ds-sec--tight.ds-boxes,
  .ds-sec--tight.ds-copy,
  .ds-sec--tight.ds-banner { padding-top: 30px !important; padding-bottom: 30px !important; }
}

/* Homepage vertical rhythm (Eric 2026-08-11): the Case Studies header and the
   insights->stepper junction were carrying full standard section padding on
   both sides, stacking into large empty bands. */
.ds-row-snug { padding-top: 0 !important; padding-bottom: 0 !important; }
.ds-row-snug .ds-copy { padding: 24px 0 8px !important; }
.ds-row-snug .ds-fblog { padding-top: 12px !important; padding-bottom: 24px !important; }
.ds-row-snug .ds-stepper { padding-top: 24px !important; }
.ds-row-snug .ds-casepanel { padding-top: 8px !important; }

/* Hero photo mask off (Eric 2026-08-11): the diagonal cut existed to hand off
   into the cream swoop. With that zone shipped plain white the mask only carved
   a pointless white triangle at the right, so the photo runs as a clean
   rectangle. Restore by deleting this rule. */
.ds-hero__media {
  -webkit-mask-image: none !important;
          mask-image: none !important;
}

/* Logo-band heading (Eric 2026-08-11): "Major PEOs" matches the weight and
   size of "Independent Across the" - only the colour differs. Matching the
   PARENT too is what fixes the gap: the space between the halves inherits the
   h2's own size, so a 50px/300 parent rendered an outsized space next to
   60px/600 text. SCOPED to .ds-logos__heading - the site-wide two-tone
   heading pattern (light accent + bold lead) is deliberately unchanged. */
.ds-logos__heading,
.ds-logos__heading strong,
.ds-logos__heading .ds-accent-line {
  font-size: 60px !important;
  font-weight: 600 !important;
}
@media screen and (max-width: 1199px) {
  .ds-logos__heading,
  .ds-logos__heading strong,
  .ds-logos__heading .ds-accent-line { font-size: 40px !important; }
}
@media screen and (max-width: 767px) {
  .ds-logos__heading,
  .ds-logos__heading strong,
  .ds-logos__heading .ds-accent-line { font-size: 30px !important; }
}
/* measured: a natural word space in this face at 60px is 15px, but the
   element join rendered 32px (the literal space plus both glyphs' side
   bearings). -17px lands it on a normal word space. */
.ds-logos__heading .ds-accent-line { margin-left: -17px !important; }
@media screen and (max-width: 1199px) { .ds-logos__heading .ds-accent-line { margin-left: -11px !important; } }
@media screen and (max-width: 767px)  { .ds-logos__heading .ds-accent-line { margin-left: -8px !important; } }

/* Logo band content sits higher in the grey (Eric 2026-08-11).
   transform, not padding: it shifts the heading + slider only and leaves the
   row's height - and therefore the swoop geometry - exactly as it was. */
.ds-logos-plain .ds-logos__inner { transform: translateY(-100px); }
@media screen and (max-width: 991px) {
  .ds-logos-plain .ds-logos__inner { transform: translateY(-50px); }
}
@media screen and (max-width: 600px) {
  .ds-logos-plain .ds-logos__inner { transform: none; }
}

/* PHONES: grey gradient instead of the photo (Eric 2026-08-11).
   At phone width the photo read as noise behind the copy. Filling the hero
   with the SAME gradient the swoop uses means the grey now runs unbroken from
   under the header, past the heading, and straight into the logo band's swoop
   - one continuous field rather than a photo, a seam and a tint. The scrim
   goes too: there is no photo left to make legible. */
@media screen and (max-width: 600px) {
  .ds-hero {
    height: auto; min-height: 0;
    background: var(--ds-swoop) !important;
  }
  .ds-hero__media,
  .ds-hero::after,
  .ds-hero__shape { display: none !important; }
  /* the logo band's grey continues the hero's, so no edge between them */
  .ds-logos-plain::before { border-radius: 0 0 60% 60% / 0 0 60px 60px; }
}
}

/* Phone: the logo-band heading wraps to two lines (Eric 2026-08-11).
   The two halves are inline so they read as one sentence on desktop; at phone
   width that overflows, so the orange half drops to its own line. The negative
   margin that tightens the inline join has to go with it, or it would indent
   the second line by 8px. */
@media screen and (max-width: 600px) {
  .ds-logos__heading .ds-accent-line {
    display: block !important;
    margin-left: 0 !important;
  }
  .ds-logos__heading,
  .ds-logos__heading strong,
  .ds-logos__heading .ds-accent-line { font-size: 28px !important; line-height: 1.15 !important; }
  .ds-logos__heading { text-wrap: balance; }
}