/* =====================================================================================
   DoubleKlick layout contract  v2

   Loaded LAST in <head> on every page, after the page's own <style> block, so it wins ties
   without needing !important. It does not invent a new design: it enforces the tokens that
   already exist in styles.css (--max, --gut) on the pages that bypassed them.

   Why this file exists: the same template was hand-written twice. One family set
   `.vhero .in{padding-top:72px;padding-bottom:56px}` and kept its gutters; the other set
   `.vhero .in{padding:72px 0 56px}` and the shorthand zeroed the horizontal padding, so text
   started at x=0 on /home-new, /services-new, /customers-new, /insights-new. One shorthand.
   Four broken pages. This file makes that class of drift unshippable.

   The three !important declarations below are deliberate and confined to the acceptance
   criteria, because page-level style blocks set these properties with class-specificity
   selectors and a later stylesheet cannot beat that by order. Everything else wins by order.
   ===================================================================================== */

/* 1. One container, one gutter, every page. ------------------------------------------ */
.wrap,
.container,
.shell,
.inner-wrap {
  width: 100%;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

/* longhand, so no shorthand can zero the gutter again */
.vhero .in,
.vsec .in,
.hero .in,
.aihero .in,
.aihero-in,
.sec .in {
  padding-left: var(--gut);
  padding-right: var(--gut);
}

/* content that sits directly inside <main>, outside any wrapper, still obeys the container */
main > p,
main > h1,
main > h2,
main > h3,
main > figure,
main > table,
main > ul,
main > ol,
main > blockquote,
main > .dk-art {
  max-width: calc(var(--max) - (2 * var(--gut)));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

/* 2. One measure. 75 characters is the ceiling, not a suggestion. --------------------- */
main p,
main li,
main blockquote,
.vsec .wrap > p,
.vhero .lede,
.dk-art p {
  column-count: auto;          /* two-column body copy gave every page a different rhythm */
  column-gap: normal;
  max-width: 75ch !important;
}

/* media and tables read as part of the same column, not as a wider band behind it */
main figure,
main .dk-fig,
main .dkfig,
main table,
main .dkmx,
main .dksys {
  max-width: 75ch !important;
  margin-right: auto !important;
}
main figure img,
main .dk-fig img,
main .dkfig img { width: 100%; }

/* 3. One type scale. The h1 ranged 44 to 89.28px across the site. --------------------- */
main h1,
.hero h1,
.vhero h1,
.aihero h1,
.sec h1,
.dkhero h1 {
  font-size: clamp(34px, 4.2vw, 54px) !important;
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 32ch;
}
main h2 { font-size: clamp(26px, 2.9vw, 40px); line-height: 1.12; letter-spacing: -0.015em; }
main h3 { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.25; }

/* 4. Images sit in the column, never beside it. --------------------------------------- */
main img,
main picture,
main figure { max-width: 100%; }
main img { height: auto; float: none; }

/* 5. One button. Pages had three shapes. ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* 6. Nested wrappers collapse to the parent, they do not re-pad. ---------------------- */
.wrap .wrap,
.wrap .in,
.in .wrap {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

@media (max-width: 900px) {
  .btn { width: 100%; white-space: normal; padding: 12px 20px; text-align: center; }
  main p, main li, main blockquote { max-width: none !important; }
  main figure, main .dk-fig, main .dkfig, main table, main .dkmx, main .dksys { max-width: 100% !important; }
}