/* Desktop build — flexes 768–1920+px. Desktop-down responsive within this lane.
   Pull tokens, colors, typography, and spacing from the desktop Figma artboards. */

:root {
  --max-width: 1280px;
  --section-padding-x: clamp(32px, 5vw, 80px);
  --section-padding-y: clamp(64px, 8vw, 96px);

  /* Layout — svh keeps mobile browser chrome from causing overflow.
     Redefine --header-height in a breakpoint and the calc updates automatically. */
  --header-height: 65px;
  --viewport-minus-header: calc(100svh - var(--header-height));
  --section-heading-size: clamp(48px, 5.5vw, 75px);

  /* Brand palette (from Figma "Bold, Immersive, Creative") */
  --leadline-wine: #651c32;
  --leadline-wine-dark: #501628;
  --leadline-black: #101820;
  --leadline-red: #FB471F;
  --leadline-red-dark: #e22d18;
  --leadline-white: #d9d9d6;
  --leadline-cream: #efdbb2;
  --leadline-lilac: #9b7793;
  --leadline-lilac-dk: #7b6469;
  --leadline-blue: #92c1e9;
  --leadline-dk-blue: #1d4289;
  --leadline-dk-blue-hover: #16336b;
}

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

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

main {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  z-index: 100;
}
.skip-link:focus { top: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Header (ported from Astro scoped styles) ===== */
.dt-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-bottom: 1px solid #e5e5e5;
    padding: 0 32px;
  }
  .dt-header__inner {
    height: 64px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
  }
  .dt-header__menu-btn {
    display: none;
    justify-self: start;
    background: transparent;
    border: 0;
    padding: 12px;
    margin: -12px;
    cursor: pointer;
    color: #000;
    align-items: center;
    justify-content: center;
  }
  .dt-header__menu-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
  }
  .dt-header__menu-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .dt-header__nav {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-self: start;
  }
  .dt-header__nav a {
    font: 400 16px/24px var(--font-owners);
    color: var(--leadline-wine);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size .3s ease;
  }
  .dt-header__nav a:hover,
  .dt-header__nav a:focus-visible {
    background-size: 100% 1px;
  }
  /* Active page (and its ancestor, for child pages like the case study) -> Leadline red. */
  .dt-header__nav .current-menu-item > a,
  .dt-header__nav .current-menu-ancestor > a,
  .dt-header__nav .current_page_item > a,
  .dt-header__nav .current_page_ancestor > a,
  .dt-header__nav a[aria-current="page"] {
    color: var(--leadline-red);
    font-weight: 500;
  }
  /* Active item is already marked (red + bold) — don't draw the hover underline
     on it; that affordance is for the other, navigable links. */
  .dt-header__nav .current-menu-item > a:hover,
  .dt-header__nav .current-menu-item > a:focus-visible,
  .dt-header__nav .current-menu-ancestor > a:hover,
  .dt-header__nav .current-menu-ancestor > a:focus-visible,
  .dt-header__nav .current_page_item > a:hover,
  .dt-header__nav .current_page_item > a:focus-visible,
  .dt-header__nav .current_page_ancestor > a:hover,
  .dt-header__nav .current_page_ancestor > a:focus-visible,
  .dt-header__nav a[aria-current="page"]:hover,
  .dt-header__nav a[aria-current="page"]:focus-visible {
    background-size: 0 1px;
  }
  .dt-header__brand {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
  .dt-header__brand img {
    display: block;
    width: 116px;
    height: 34px;
  }
  .dt-header__cta {
    justify-self: end;
    background: var(--leadline-wine);
    color: #fff;
    font: 400 16px/24px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 8px 24px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  /* Lift + soft shadow + darken on hover (matches the home hero buttons). */
  .dt-header__cta:hover,
  .dt-header__cta:focus-visible {
    background: var(--leadline-wine-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }
  /* Press: settle back down. */
  .dt-header__cta:active {
    transform: translateY(0);
    box-shadow: none;
  }

  /* <=1279px: tighten nav so 4 items don't wrap (1024–1279), and keep the CTA
     at its compact size all the way down (nav rules are inert <=1023 where the
     nav is hidden, but the CTA stays visible and should not grow back). */
  @media (max-width: 1280px) {
    .dt-header__inner { gap: 16px; }
    .dt-header__nav { gap: 16px; }
    .dt-header__nav a { font-size: 14px; line-height: 22px; }
    .dt-header__cta {
      font-size: 14px;
      line-height: 22px;
      padding: 6px 18px;
    }
  }

  /* Below 1024px: collapse the inline nav into a hamburger drawer, but keep
     the "Get In Touch" CTA visible (grid places hamburger | logo | CTA). */
  @media (max-width: 1023px) {
    .dt-header__menu-btn { display: inline-flex; }
    .dt-header__nav { display: none; }
  }

  body.dt-drawer-open {
    overflow: hidden;
  }
  .dt-drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--leadline-black);
    color: #fff;
    display: flex;
    flex-direction: column;
  }
  .dt-drawer[hidden] {
    display: none;
  }
  .dt-drawer__topbar {
    height: 64px;
    padding: 0 32px;
    border-bottom: 1px solid #262626;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .dt-drawer__close {
    background: transparent;
    border: 0;
    padding: 12px;
    margin: -12px;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .dt-drawer__close-icon {
    display: inline-block;
    width: 18px;
    height: 24px;
  }
  .dt-drawer__close-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .dt-drawer__brand {
    display: inline-flex;
    align-items: center;
  }
  .dt-drawer__brand img { display: block; width: 116px; height: 34px; }
  .dt-drawer__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 32px 32px;
  }
  .dt-drawer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: 100%;
  }
  .dt-drawer__links a {
    color: #fff;
    font: 400 36px/40px var(--font-owners);
    text-transform: uppercase;
    text-decoration: none;
  }
  /* bold remainder of each label (e.g. "WHO [WE ARE]") — matches the Figma mobile menu */
  .dt-drawer__em { font-family: var(--font-owners-xwide); font-weight: 900; }
  .dt-drawer__links a:hover,
  .dt-drawer__links a:focus-visible {
    text-decoration: underline;
  }
  .dt-drawer__cta {
    border: 2px solid var(--leadline-red);
    color: var(--leadline-red);
    font-family: var(--font-owners-xwide);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    text-decoration: none;
    height: 56px;
    min-width: 235px;
    padding: 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .dt-drawer__cta:hover,
  .dt-drawer__cta:focus-visible {
    background: var(--leadline-red);
    color: #fff;
  }
  .dt-drawer__social {
    padding: 0 32px 40px;
    display: flex;
    justify-content: center;
  }
  .dt-drawer__social .social-links {
    --social-gap: 32px;
  }
  .dt-drawer__social .social-icon svg path {
    fill: #f5f5f5;
  }
  .dt-drawer__social .social-icon { opacity: 0.6; }

/* ===== Footer (ported from Astro scoped styles) ===== */
.dt-footer {
    background: #000;
    border-top: 1px solid #fff;
    /* Fluid side padding: 80px at >=1440, scaling to 24px at 768 so content
       isn't squeezed into a narrow central column at smaller widths. */
    padding: 65px clamp(24px, calc(8.33vw - 40px), 80px) 64px;
  }
  .dt-footer__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 31.5px;
  }
  .dt-footer__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    padding-bottom: 48px;
  }
  .dt-footer__logo {
    display: inline-flex;
    margin-bottom: 16px;
  }
  .dt-footer__logo img {
    display: block;
    width: 173px;
    height: 51px;
  }
  .dt-footer__tagline {
    margin: 0;
    max-width: 448px;
    color: #a3a3a3;
    font-family: var(--font-owners);
    font-weight: 400;
    /* Fluid: 18px at >=1440, scaling to 14px at 768. */
    font-size: clamp(14px, calc(9.4px + 0.6vw), 18px);
    line-height: 1.55;
  }
  .dt-footer__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
  }
  .dt-footer__nav a {
    color: #fff;
    font: 500 16px/24px var(--font-owners-xwide);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size .3s ease;
  }
  /* Hover: grow the underline in the link's own color (white) — no orange flip. */
  .dt-footer__nav a:hover,
  .dt-footer__nav a:focus-visible {
    background-size: 100% 1px;
  }
  .dt-footer__social {
    display: flex;
    justify-content: flex-end;
    --social-gap: 24px;
  }
  .dt-footer__social .social-icon svg path {
    fill: #f5f5f5;
  }
  .dt-footer__legal {
    border-top: 1px solid #262626;
    padding-top: 33px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .dt-footer__copyright {
    margin: 0;
    color: #a3a3a3;
    font: 500 14px/20px var(--font-owners);
  }
  .dt-footer__legal-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
  }
  .dt-footer__legal-links a {
    color: #a3a3a3;
    font: 500 14px/20px var(--font-owners);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size .45s ease;
  }
  .dt-footer__legal-links a:hover,
  .dt-footer__legal-links a:focus-visible {
    background-size: 100% 1px;
  }

/* ===== Hero ===== */
.dt-hero {
    position: relative;
    height: var(--viewport-minus-header);
    overflow: hidden;
    background: #fff;
    color: #fff;
  }
  .dt-hero__bg {
    position: absolute;
    inset: 0;
    background-color: #737373;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* anchor to top so the subject's head isn't cropped under the nav on tall/wide viewports */
  .dt-hero__img { object-position: center top; }
  .dt-hero__bg-placeholder {
    color: #fff;
    font: 400 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    opacity: 0.7;
  }
  .dt-hero__overlay {
    position: absolute;
    inset: 0;
    /* Wine wash on the left (behind the copy) fading to clear over the subject (Figma). */
    background: linear-gradient(to right, rgba(101, 28, 50, 0.4), rgba(255, 255, 255, 0));
  }
  .dt-hero__content {
    position: relative;
    z-index: 1;
    height: 100%;
    /* Full-bleed with Figma's 80px inset — text anchors to the left edge, not centered. */
    padding: clamp(40px, 5.5vw, 80px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 24px;
    text-align: left;
  }
  .dt-hero__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .dt-hero__eyebrow {
    margin: 0;
    font: 500 18px/28px var(--font-mencken);
    color: #fff;
    opacity: 0.6;
  }
  .dt-hero__headline {
    margin: 0;
    max-width: 1000px;
    color: #fff;
    /* "Out Front With" / "AI Thinking" each on their own line (flex column stacks the spans).
       Owners Medium; 120px at the 1440 design width (8.333vw), scaling to a 64px floor at 768. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--font-owners);
    font-weight: 500;
    font-size: clamp(64px, 8.333vw, 120px);
    line-height: 1.1875;
    text-transform: uppercase;
  }
  .dt-hero__headline-emph {
    font-weight: 900;
  }
  .dt-hero__subtitle {
    margin: 0;
    max-width: 800px;
    opacity: 0.6;
    /* Fluid: 20px at the 1440 design, scaling down to a 16px floor as the band narrows. */
    font: 500 clamp(16px, 1.39vw, 20px)/1.5 var(--font-mencken);
    color: #fff;
  }
  /* Break to 4 lines at/below 1024 — same breakpoint as the quote. */
  @media (max-width: 1024px) {
    .dt-hero__subtitle { max-width: 552px; }
  }
  .dt-hero__ctas {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    padding-top: 16px;
  }
  .dt-hero__btn {
    height: 64px;
    padding: 0 32px;
    font: 500 18px/28px var(--font-owners);
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .dt-hero__btn--primary {
    background: var(--leadline-red);
    color: #fff;
  }
  /* Lift + soft shadow + darken on hover. */
  .dt-hero__btn--primary:hover,
  .dt-hero__btn--primary:focus-visible {
    background: var(--leadline-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }
  .dt-hero__btn--ghost {
    border: 2px solid var(--leadline-white);
    color: var(--leadline-white);
  }
  /* Invert to a solid fill (dark text on cream) + lift. */
  .dt-hero__btn--ghost:hover,
  .dt-hero__btn--ghost:focus-visible {
    background: var(--leadline-white);
    color: var(--leadline-black);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }
  /* Press: settle back down. */
  .dt-hero__btn:active {
    transform: translateY(0);
    box-shadow: none;
  }
  .dt-hero__play {
    position: absolute;
    z-index: 1;
    right: 60px;
    bottom: 60px;
    width: 60px;
    height: 60px;
    border-radius: 9999px;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 4px; /* nudge triangle so it appears optically centered */
  }
  .dt-hero__play:hover,
  .dt-hero__play:focus-visible {
    background: rgba(255, 255, 255, 0.1);
  }
  .dt-hero__play-icon {
    display: inline-block;
    width: 13.5px;
    height: 18px;
  }
  .dt-hero__play-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

/* ===== Quote ===== */
.dt-quote {
    position: relative;
    overflow: hidden;
    background: var(--leadline-black);
    color: #fff;
    padding: 79.25px 220px 80px;
  }
  /* Decorative ❝ stripe graphic behind the quote, white on the left at 20%.
     Used on home (vertically centered) and the dk-blue What We Do variant
     (Figma-positioned). Other quote variants leave it hidden. */
  .dt-quote__mark { display: none; }
  .page-home .dt-quote__mark,
  .page-what-we-do .dt-quote__mark,
  .page-case-study .dt-quote__mark,
  .page-contact .dt-quote__mark {
    display: block;
    position: absolute;
    /* Sized to Figma's proportion (66.6% of the section height) with the
       Figma 434:358 aspect ratio, vertically centered. Capped at the Figma
       desktop size (358px tall) so a tall section on narrow screens — where the
       quote wraps to many lines — can't balloon the mark over the whole block. */
    left: 34px;
    top: 50%;
    transform: translateY(-50%);
    height: min(66.6%, 358px);
    aspect-ratio: 434 / 358;
    z-index: 0;
    opacity: 0.2;
    background: url(../images/quote-mark.png) no-repeat center / 100% 100%;
    pointer-events: none;
  }
  .dt-quote__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .dt-quote__text {
    margin: 0;
    font: italic 400 28px/42px var(--font-mencken);
    color: var(--leadline-cream);
    text-align: center;
  }
  /* Curly typographic quotes around the pull-quote (content is stored quote-free). */
  .dt-quote__text::before { content: "\201C"; }
  .dt-quote__text::after  { content: "\201D"; }
  /* All quote sections use the home quote's responsive measure: wider line length that
     steps down with width, and a trimmed side padding so the inner max-width controls
     the line count. (Applied site-wide per design — was previously home-only.) */
  .dt-quote { padding-left: clamp(24px, 5vw, 80px); padding-right: clamp(24px, 5vw, 80px); }
  .dt-quote__inner { max-width: 1100px; }
  @media (max-width: 1280px) {
    .dt-quote__inner { max-width: 916px; }
    .dt-quote__text { font-size: 23px; line-height: 34px; }
  }
  @media (max-width: 1024px) {
    .dt-quote__inner { max-width: 810px; }
  }
  .dt-quote__attribution {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
  }
  .dt-quote__name {
    margin: 0;
    font: 700 18px/28px var(--font-owners-xwide);
    color: #fff;
  }
  .dt-quote__title {
    margin: 0;
    opacity: 0.6;
    font: 400 14px/20px var(--font-owners);
    color: var(--leadline-cream);
  }

  /* Narrower desktop widths: ease the wide horizontal padding so the quote
     doesn't get pinched (Figma px-220 is sized for 1440). */
  @media (max-width: 1100px) {
    .dt-quote {
      padding-left: var(--section-padding-x);
      padding-right: var(--section-padding-x);
    }
  }
  /* Phones: the decorative mark sits behind the now-full-width centered text and
     just muddies it — drop it (it's purely decorative). */
  @media (max-width: 600px) {
    .page-home .dt-quote__mark,
    .page-what-we-do .dt-quote__mark,
    .page-case-study .dt-quote__mark,
    .page-contact .dt-quote__mark { display: none; }
  }

/* ===== WhatWeDo ===== */
.dt-wwd {
    position: relative;
    overflow: hidden;
    /* Muted wine-mauve with a 20% darken, plus a faint texture overlay (::before). */
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #9b7793;
    /* No bottom padding: the 96px view-all band is the section's bottom edge, so the
       "See What We Do" link sits in a tight band flush to the bottom — identical to the
       "See All Articles" band on Our Take. */
    padding: 80px 0 0;
  }
  .dt-wwd__inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .dt-wwd__heading-wrap {
    padding: 0 32px;
  }
  .dt-wwd__heading {
    margin: 0;
    padding-bottom: 8px;
    font-family: var(--font-owners-xwide);
    font-size: var(--section-heading-size);
    line-height: 1;
    color: #fff;
  }
  .dt-wwd__heading-lead { font-weight: 700; }
  .dt-wwd__heading-rest { font-weight: 300; }
  .dt-wwd__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 16px 0 0;
  }
  .dt-wwd__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dt-wwd__col--offset {
    padding-top: 60px;
  }
  .dt-wwd__card {
    position: relative;
    display: block;
    /* Fluid height so cards stay proportional as they narrow (400px at >=1440, 300px floor). */
    height: clamp(300px, 28vw, 400px);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background-color: #737373;
    background-size: cover;
    background-position: center;
  }
  .dt-wwd__card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 400 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    opacity: 0.7;
  }
  .dt-wwd__card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }
  .dt-wwd__card-content {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .dt-wwd__card-title {
    display: block;
    font-family: var(--font-mencken);
    font-weight: 800;
    /* Fluid: 48px at >=1440, scaling to ~26px at 768 (smallest desktop width) so titles stay single-line. */
    font-size: clamp(26px, 3.33vw, 48px);
    line-height: 1.2;
  }
  .dt-wwd__card-title-lead { color: var(--leadline-red); }
  .dt-wwd__card-title-accent { color: var(--leadline-cream); }
  .dt-wwd__card-desc {
    display: block;
    font-family: var(--font-owners);
    font-weight: 400;
    /* Fluid: 16px at >=1440, scaling to 13px at 768. */
    font-size: clamp(13px, calc(9.6px + 0.45vw), 16px);
    line-height: 1.5;
    color: var(--leadline-white);
    max-width: 600px;
    /* Reserve room so the last line clears the bottom-right arrow. */
    padding-right: 40px;
  }
  .dt-wwd__card-arrow {
    position: absolute;
    right: 32px;
    bottom: 32px;
    width: 21px;
    height: 24px;
    color: #fff;
  }
  .dt-wwd__card-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .dt-wwd__card:hover .dt-wwd__card-gradient,
  .dt-wwd__card:focus-visible .dt-wwd__card-gradient {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.1) 100%);
  }
  .dt-wwd__view-all {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 96px;
    padding: 24px 32px;
    /* Cancel the inner flex gap so the 96px band sits flush against the cards above —
       same flush content→band edge as the "See All Articles" band on Our Take. */
    margin-top: -32px;
  }
  .dt-wwd__view-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font: italic 500 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-decoration: none;
  }
  .dt-wwd__view-link:hover,
  .dt-wwd__view-link:focus-visible {
    text-decoration: underline;
  }
  .dt-wwd__view-arrow {
    display: inline-block;
    width: 15.75px;
    height: 18px;
    color: #fff;
  }
  .dt-wwd__view-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  @media (max-width: 1100px) {
    .dt-wwd__card-content {
      left: 24px;
      right: 24px;
      bottom: 24px;
    }
    .dt-wwd__card-arrow {
      right: 24px;
      bottom: 24px;
    }
  }

/* ===== Breadcrumbs (case study) ===== */
.dt-breadcrumbs {
    width: 100%;
    /* Translucent warm gray, tight padding (designer update). */
    background: rgba(217, 217, 214, 0.75);
    min-height: unset;
    padding: 8px 32px;
    /* Sticks directly beneath the header. Verified sticky works inside <main>
       here (no overflow/transform ancestor), so no markup relocation needed. */
    position: sticky;
    top: var(--header-height);
    z-index: 40;
  }
.dt-breadcrumbs__list {
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font: 400 14px/20px var(--font-owners);
  }
.dt-breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: 16px;
  }
.dt-breadcrumbs__link {
    color: var(--leadline-wine);
    text-decoration: none;
    transition: opacity 0.15s ease;
  }
.dt-breadcrumbs__link:hover { opacity: 0.7; }
.dt-breadcrumbs__current { color: var(--leadline-wine); }
.dt-breadcrumbs__sep { color: var(--leadline-black, #101820); }

/* ===== Case Study Hero ===== */
/* Page-scoped: the sticky stack here is header + breadcrumb (not just header),
   so the hero fills the viewport minus both. Breadcrumb measured at 52px. */
.page-case-study { --viewport-minus-header-breadcrumb: calc(100svh - var(--header-height) - 36px); }
.dt-case-hero {
    position: relative;
    height: var(--viewport-minus-header-breadcrumb);
    overflow: hidden;
    background-color: #737373;
    background-size: cover;
    background-position: center;
    color: #fff;
  }
  /* Subject sits high in the frame — anchor the image top so her head isn't cropped
     under the sticky nav as the vertical crop deepens on wide (1920px+) viewports; the
     extra crop falls at the bottom instead. Matches the home / What We Do heroes. */
.dt-case-hero .ll-cover-img { object-position: center top; }
.dt-case-hero__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 400 18px/28px var(--font-owners);
  }
.dt-case-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
  }
.dt-case-hero__inner {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 79.25px 80px 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    color: #fff;
  }
.dt-case-hero__title { margin: 0; display: flex; flex-direction: column; }
.dt-case-hero__name {
    display: none;
  }
.dt-case-hero__headline {
    font-family: var(--font-owners-xwide);
    font-weight: 300;
    /* Same responsive sizing as the article hero: 4vw capped at 56px, 40px floor. */
    font-size: clamp(40px, 4vw, 56px);
    line-height: 0.95;
    color: #fff;
    /* Keep the title in the left column, clear of the subject photo on the right
       (the girl/frosted-glass edge sits ~65% across this hero image). */
    max-width: calc(62vw - 80px);
  }
/* Case-study titles break "Service: Descriptor" onto two lines */
.dt-case-hero__headline-lead, .dt-case-hero__headline-rest { display: block; }
.dt-case-hero__headline-lead { font-weight: 700; } /* service line heavier than the light descriptor */
.dt-case-hero__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    opacity: 0.6;
    font: 400 18px/28px var(--font-mencken);
    color: #fff;
  }
.dt-case-hero__meta span:first-child { font-family: var(--font-owners-xwide); }
.dt-case-hero__sep { opacity: 0.8; }

/* ===== Case Study Content ===== */
.dt-casecontent {
    position: relative;
    overflow: hidden;
    background: var(--leadline-white);
    padding: 80px 0;
  }
/* Background graphic only (dotted texture, tiled at 20% per Figma) — the section color
   stays var(--leadline-white); we are NOT switching to Figma's cream. */
.dt-casecontent::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../images/content-texture.png) repeat top left;
    background-size: 585px 470px;
    opacity: 0.2;
    pointer-events: none;
  }
.dt-casecontent__inner {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
    align-items: start;
  }
.dt-casecontent__body {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
.dt-casecontent__para {
    margin: 0;
    color: #404040;
    font: 400 18px/29.25px var(--font-owners);
  }
.dt-casecontent__challenge {
    display: flex;
    flex-direction: column;
    gap: 23.375px;
  }
.dt-casecontent__heading {
    margin: 0;
    font-family: var(--font-owners-xwide);
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    color: var(--leadline-dk-blue);
  }
.dt-casecontent__lead {
    margin: 0;
    color: #404040;
    font: 700 18px/29.25px var(--font-owners);
  }
/* Project Details card — light-blue title plate over a dark-blue panel. */
.dt-casecontent__sidebar { align-self: start; }
.dt-casecontent__card-header {
    background: var(--leadline-blue);
    color: var(--leadline-dk-blue);
    font-family: var(--font-owners-xwide);
    font-weight: 900;
    font-size: 28px;
    line-height: 35px;
    padding: 16px 32px;
    width: 90%;
    margin: 0 auto -1.5rem;
    position: relative;
    z-index: 2;
  }
.dt-casecontent__details {
    margin: 0;
    background: var(--leadline-dk-blue);
    padding: 32px 38px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
.dt-casecontent__detail { display: flex; flex-direction: column; gap: 4px; }
.dt-casecontent__detail dt {
    margin: 0;
    color: var(--leadline-blue);
    font: 500 12px/16px var(--font-owners);
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }
.dt-casecontent__detail dd {
    margin: 0;
    color: #fff;
    font-family: var(--font-playfair);
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
  }
@media (max-width: 1023px) {
  .dt-casecontent__inner { grid-template-columns: 1fr; gap: 32px; }
}
/* --- Case study accordion (Challenge / Approach / Results) --- */
.dt-casecontent__accordion { display: flex; flex-direction: column; gap: 24px; }
.dt-casecontent__section { display: flex; flex-direction: column; gap: 0; }
.dt-casecontent__section-header {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(16, 24, 32, 0.15);
    padding: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    text-align: left;
  }
.dt-casecontent__chevron { display: none; }
/* Panels default open; collapse behavior + chevron only once JS adds .is-enhanced,
   so content is never trapped if JS fails (progressive enhancement). */
.dt-casecontent__panel { display: grid; grid-template-rows: 1fr; }
.dt-casecontent__panel-inner { overflow: hidden; display: flex; flex-direction: column; gap: 23.375px; padding-top: 23.375px; }
.dt-casecontent__accordion.is-enhanced .dt-casecontent__chevron {
    display: inline-flex;
    flex-shrink: 0;
    width: 13px;
    height: 20px;
    color: var(--leadline-dk-blue);
    transform: rotate(90deg);
    transition: transform 0.3s ease;
  }
.dt-casecontent__accordion.is-enhanced .dt-casecontent__chevron svg { width: 100%; height: 100%; display: block; }
.dt-casecontent__accordion.is-enhanced .dt-casecontent__panel { grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.dt-casecontent__accordion.is-enhanced [aria-expanded="true"] + .dt-casecontent__panel { grid-template-rows: 1fr; }
.dt-casecontent__accordion.is-enhanced [aria-expanded="true"] .dt-casecontent__chevron { transform: rotate(-90deg); }
/* Old elaborate Approach (4 cards) / Results (2x2 metrics) sections retired in
   favor of the accordion's text panels. Scoped to beat their base rules' specificity. */
.page-case-study .dt-approach, .page-case-study .dt-results { display: none; }

/* ===== Case Study Approach ===== */
.dt-approach {
    position: relative;
    overflow: hidden;
    background: var(--leadline-lilac-dk); /* TODO: lens + dot-halftone textures — see revisit note */
    padding: 64px clamp(24px, 5.5vw, 80px);
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
.dt-approach__head {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    display: flex;
    gap: 32px;
    align-items: flex-end;
  }
.dt-approach__heading {
    margin: 0;
    flex: 0 0 auto;
    font-family: var(--font-owners-xwide);
    font-weight: 700;
    font-size: clamp(48px, 5.5vw, 80px);
    line-height: 1.06;
    color: var(--leadline-blue);
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  }
.dt-approach__head-text {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
.dt-approach__lead { margin: 0; font: 700 18px/29.25px var(--font-owners); color: var(--leadline-white); }
.dt-approach__intro { margin: 0; font: 400 18px/29.25px var(--font-owners); color: var(--leadline-white); }
.dt-approach__cards {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 16px;
  }
/* Four cards, staggered: row 2 offset one column to the right (per Figma). */
.dt-approach__card { display: flex; min-height: 226px; overflow: hidden; grid-column: span 2; }
.dt-approach__card:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.dt-approach__card:nth-child(2) { grid-column: 3 / span 2; grid-row: 1; }
.dt-approach__card:nth-child(3) { grid-column: 2 / span 2; grid-row: 2; }
.dt-approach__card:nth-child(4) { grid-column: 4 / span 2; grid-row: 2; }
.dt-approach__card-spine { flex: 0 0 30px; background: var(--leadline-dk-blue); }
.dt-approach__card-body {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(23, 23, 23, 0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 32px 16px;
  }
.dt-approach__card-title { margin: 0; font: 400 16px/24px var(--font-mencken); color: var(--leadline-cream); }
.dt-approach__card-text { margin: 0; font: 400 16px/26px var(--font-owners); color: var(--leadline-blue); }
@media (max-width: 1023px) {
  .dt-approach__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .dt-approach__cards { grid-template-columns: 1fr; }
  .dt-approach__card,
  .dt-approach__card:nth-child(1),
  .dt-approach__card:nth-child(2),
  .dt-approach__card:nth-child(3),
  .dt-approach__card:nth-child(4) { grid-column: 1; grid-row: auto; }
}

/* ===== Case Study Results ===== */
.dt-results {
    position: relative;
    overflow: hidden;
    background: var(--leadline-dk-blue); /* TODO: geometric texture overlay — see revisit note */
    padding: 64px clamp(24px, 5.5vw, 80px);
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
.dt-results__top {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    display: flex;
    gap: 23.375px;
    align-items: flex-start;
  }
.dt-results__intro { flex: 0 0 300px; display: flex; gap: 23.375px; align-items: stretch; }
.dt-results__label { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.dt-results__label-text {
    margin: 0;
    /* vertical writing-mode keeps the box a slim column (transform:rotate would still claim the text's full width) */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-family: var(--font-owners-xwide);
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    color: var(--leadline-blue);
  }
.dt-results__intro-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.dt-results__lead { margin: 0; font: 700 18px/29.25px var(--font-owners); color: var(--leadline-white); }
.dt-results__sub { margin: 0; font: 400 18px/29.25px var(--font-owners); color: var(--leadline-white); }
.dt-results__grid {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
.dt-results__card { display: flex; min-height: 226px; overflow: hidden; }
.dt-results__card-body {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(101, 28, 50, 0.65); /* wine @ 65% */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 32px;
  }
.dt-results__metric { margin: 0; font: 400 28px/30px var(--font-mencken); color: var(--leadline-cream); }
.dt-results__text { margin: 0; font: 400 16px/26px var(--font-owners); color: var(--leadline-white); }
.dt-results__footnote {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    width: 100%;
    max-width: 922px;
    font: 400 18px/29.25px var(--font-owners);
    color: var(--leadline-white);
  }
@media (max-width: 1023px) {
  .dt-results__top { flex-direction: column; }
  .dt-results__intro { flex-basis: auto; }
  .dt-results__grid { grid-template-columns: 1fr; }
}

/* ===== Case Study Deliverables ===== */
/* "What Leadline Delivered" deliverables carousel hidden on all case studies (per client). */
.single-case_study .dt-deliv { display: none; }
.dt-deliv {
    position: relative;
    overflow: hidden;
    background: var(--leadline-black); /* TODO: swirl texture overlay — see revisit note */
    padding: 64px 0;
    /* "What Leadline Delivered" hidden per client request — change back to `flex` to restore. */
    display: none;
    flex-direction: column;
    gap: 40px;
  }
.dt-deliv__heading {
    position: relative;
    z-index: 1;
    margin: 0;
    padding-left: clamp(24px, 5.5vw, 80px);
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  }
.dt-deliv__heading-lead {
    display: block;
    font-family: var(--font-owners-xwide);
    font-weight: 700;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1;
    color: var(--leadline-cream);
  }
.dt-deliv__heading-accent {
    display: block;
    margin-left: clamp(80px, 29vw, 419px);
    margin-top: -18px;
    font-family: var(--font-mencken);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(48px, 6.25vw, 90px);
    line-height: 1;
    color: var(--leadline-red);
  }
/* Deliverables carousel: active slide centered + enlarged, neighbors peeking.
   PE-safe — without JS the viewport scrolls; .is-enhanced turns on the carousel. */
/* Full-window viewport (no 1440 cap) so the peeking cards bleed to the screen
   edges instead of clipping at 1440 on wide screens. --card-w is shared by the
   slide width and the arrow positioning so arrows keep flanking the active card. */
.dt-deliv__carousel { --card-w: clamp(280px, calc(100vw - 200px), 1040px); position: relative; z-index: 1; width: 100%; }
.dt-deliv__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; outline: none; }
.dt-deliv__carousel.is-enhanced .dt-deliv__viewport { overflow: hidden; }
.dt-deliv__track { display: flex; gap: 24px; align-items: center; padding: 24px 8px; }
.dt-deliv__carousel.is-enhanced .dt-deliv__track { transition: transform 0.4s ease; }
/* Reserve ~100px of peek each side (calc(100vw - 200px)) so the flanking arrows
   sit in the peek gaps and don't overlap the active card at smaller widths. */
.dt-deliv__col { flex: 0 0 var(--card-w); display: flex; flex-direction: column; }
.dt-deliv__carousel.is-enhanced .dt-deliv__col { opacity: 0.4; transform: scale(0.92); transition: opacity 0.4s ease, transform 0.4s ease; cursor: pointer; }
.dt-deliv__carousel.is-enhanced .dt-deliv__col.is-active { opacity: 1; transform: scale(1); cursor: default; }
.dt-deliv__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 12px;
  }
.dt-deliv__carousel.is-enhanced .dt-deliv__arrow { display: inline-flex; }
.dt-deliv__arrow:hover { opacity: 0.6; }
/* Centered in the VISUAL gap between the active card and the adjacent peeking card.
   The neighbors are scaled to 0.92, so their facing edge pulls in by card-w*0.04;
   visual gap = 24px track gap + card-w*0.04, midpoint = 12px + card-w*0.02 out from
   the active card's edge (50% - card-w/2). */
.dt-deliv__arrow--prev { left: calc(50% - var(--card-w) / 2 - var(--card-w) * 0.02 - 12px); transform: translate(-50%, -50%); }
.dt-deliv__arrow--next { right: calc(50% - var(--card-w) / 2 - var(--card-w) * 0.02 - 12px); transform: translate(50%, -50%); }
.dt-deliv__arrow-icon { display: inline-flex; width: 40px; height: 64px; }
.dt-deliv__arrow-icon svg { width: 100%; height: 100%; display: block; }
/* Bigger but thin: keep the stroke a constant ~2px regardless of icon scale. */
.dt-deliv__arrow-icon svg path { stroke-width: 2px; vector-effect: non-scaling-stroke; }
.dt-deliv__arrow--prev .dt-deliv__arrow-icon { transform: rotate(180deg); }
.dt-deliv__media {
    position: relative;
    overflow: hidden;
    height: 480px;
    background: #a3a3a3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.dt-deliv__media-label { color: #fff; font: 400 14px/20px var(--font-owners); }
.dt-deliv__card {
    height: 140px;
    background: rgba(101, 28, 50, 0.65); /* wine @ 65% */
    backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 32px;
  }
.dt-deliv__card-title {
    margin: 0;
    font-family: var(--font-playfair);
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: var(--leadline-cream);
  }
.dt-deliv__card-body { margin: 0; font: 400 14px/20px var(--font-owners); color: var(--leadline-white); }

/* ===== Article Hero ===== */
.dt-article-hero {
    position: relative;
    height: 700px;
    overflow: hidden;
    background-color: #737373;
    background-size: cover;
    background-position: center;
    color: #fff;
  }
  /* Subject rides high in this fixed-700px hero; on wide (1920px+) viewports the deep
     vertical crop pushes the head toward the sticky nav. Bias the crop just off the top
     (18%) so the head clears it and the extra crop falls at the bottom. */
.dt-article-hero .ll-cover-img { object-position: center 18%; }
.dt-article-hero__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 400 18px/28px var(--font-owners);
  }
.dt-article-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
  }
.dt-article-hero__tag {
    position: absolute;
    left: clamp(24px, 5.5vw, 80px);
    top: 32px;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    font: 400 12px/16px var(--font-owners);
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }
.dt-article-hero__inner {
    position: absolute;
    left: clamp(24px, 5.5vw, 80px);
    right: clamp(24px, 5.5vw, 80px);
    bottom: 0;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
.dt-article-hero__title {
    margin: 0;
    color: #fff;
    font-family: var(--font-owners-xwide);
    font-weight: 700;
    /* 4vw slope capped at 56px so even long headlines fit the fixed-height hero,
       clear the category tag, and ease to a 40px floor on narrow widths. */
    font-size: clamp(40px, 4vw, 56px);
    line-height: 1.1;
    text-wrap: balance; /* even line lengths; avoids orphan words on long titles */
    /* Never cross the frosted-glass edge in the hero photo (~72% across the 16:9 image,
       which lands at a constant ~72vw on wide viewports and further right when narrower).
       Cap the title's right edge at 70vw: max-width = 70vw minus the inner's left inset. */
    max-width: calc(70vw - clamp(24px, 5.5vw, 80px));
  }
/* Below the cover-crop point (~1245px) the photo crops inward, so the frosted-glass edge
   moves rightward (toward ~86% at 768px). Widen the title cap to match — this also stops
   long titles from being squeezed into a narrow column that overflows the fixed-height hero. */
@media (max-width: 1244px) {
  .dt-article-hero__title { max-width: calc(50vw + 250px - clamp(24px, 5.5vw, 80px)); }
}
.dt-article-hero__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    opacity: 0.7;
    color: #fff;
    font: 400 16px/24px var(--font-mencken);
  }
.dt-article-hero__sep { opacity: 0.7; }

/* ===== Article Body (intro) — flat light editorial band, single left-aligned column ===== */
.dt-articlebody {
    position: relative;
    overflow: hidden;
    background: var(--leadline-white); /* warm gray #d9d9d6 reading background */
    padding: 80px 24px 112px;
  }
/* Background graphic on the first two grey reading sections (article body + the first
   subheading — the one right after the wine quote). Same dotted texture as the case-study
   content; section colors unchanged. The second subheading gets its own texture later. */
.dt-articlebody::before,
.dt-articlequote + .dt-articlesub::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../images/content-texture.png) repeat top left;
    background-size: 585px 470px;
    opacity: 0.2;
    pointer-events: none;
  }
/* Second subheading (after the article image) uses the dot-grid texture instead (Figma's
   blue background is ignored — section keeps its grey). */
.dt-articleimg + .dt-articlesub::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../images/dot-grid-texture.png) repeat top left;
    background-size: 600px 595px;
    opacity: 0.2;
    pointer-events: none;
  }
.dt-articlebody__inner {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
.dt-articlebody__col { max-width: 800px; }
.dt-articlebody__col p { margin: 0; color: #262626; font: 400 18px/29.25px var(--font-owners); }

/* ===== Article Block Quote ===== */
.dt-articlequote {
    position: relative;
    overflow: hidden;
    background: var(--leadline-wine);
    /* The quote scales uniformly: padding and font are both vw-driven and both cap at 1920,
       so below 1920 the block shrinks at a constant 3-line wrap (never reflows to a taller
       4 lines), and at/above 1920 it locks (inner caps at the 1380px content width). */
    padding: 60px clamp(40px, 14.06vw, 270px);
  }
/* Vertical-ribbon texture at 20% over the wine (Figma 251x257 tile; reuses brand-ribbon.png). */
.dt-articlequote::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../images/brand-ribbon.png) repeat top left;
    background-size: 251px 257px;
    opacity: 0.2;
    pointer-events: none;
  }
.dt-articlequote__inner {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    margin: 0 auto;
    border-left: 6px solid var(--leadline-blue);
    padding: 24px 0 24px 54px;
  }
.dt-articlequote__inner p {
    margin: 0;
    /* 32px at 1920 (1.667vw), capped there; scales down with the padding below 1920 so the
       wrap stays at 3 lines and the band only ever gets shorter, never taller. */
    font: italic 700 clamp(20px, 1.667vw, 32px)/1.625 var(--font-mencken);
    color: var(--leadline-blue);
  }

/* ===== Article Subheading + body ===== */
.dt-articlesub {
    position: relative;
    overflow: hidden;
    background: var(--leadline-white); /* warm gray #d9d9d6 */
    padding: 0 24px 112px;
  }
.dt-articlesub__inner {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 39.25px;
  }
.dt-articlesub__heading {
    margin: 0;
    max-width: 725px;
    padding-bottom: 8px;
    border-bottom: 4px solid var(--leadline-wine);
    font-family: var(--font-owners-xwide);
    font-weight: 500;
    font-size: 36px;
    line-height: 40px;
    color: var(--leadline-wine);
  }
.dt-articlesub__emphasis { font-weight: 700; color: var(--leadline-dk-blue); }
.dt-articlesub__para {
    margin: 0;
    max-width: 832px;
    color: #262626;
    font: 400 18px/29.25px var(--font-owners);
  }

/* ===== Article native content (CIS-ingested body rendered via the_content) =====
   Reading band that mirrors the .dt-articlebody / .dt-articlesub editorial styling,
   but styles raw HTML produced by the CIS instead of fixed ACF section fields. */
.dt-article-content {
    position: relative;
    overflow: hidden;
    background: var(--leadline-white); /* warm gray #d9d9d6 reading background */
    padding: 80px 24px 112px;
  }
.dt-article-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../images/content-texture.png) repeat top left;
    background-size: 585px 470px;
    opacity: 0.2;
    pointer-events: none;
  }
.dt-article-content__inner {
    position: relative;
    z-index: 1;
    max-width: 832px;
    margin: 0 auto;
  }
.dt-article-content__inner > * { margin: 0 0 28px; }
.dt-article-content__inner > *:last-child { margin-bottom: 0; }
.dt-article-content p,
.dt-article-content li { color: #262626; font: 400 18px/29.25px var(--font-owners); }
.dt-article-content h2 {
    max-width: 725px;
    margin-top: 48px;
    padding-bottom: 8px;
    border-bottom: 4px solid var(--leadline-wine);
    font: 500 36px/40px var(--font-owners-xwide);
    color: var(--leadline-wine);
  }
.dt-article-content h3 {
    margin-top: 40px;
    font: 500 26px/32px var(--font-owners-xwide);
    color: var(--leadline-dk-blue);
  }
.dt-article-content > .dt-article-content__inner > h2:first-child,
.dt-article-content > .dt-article-content__inner > h3:first-child { margin-top: 0; }
.dt-article-content a { color: var(--leadline-dk-blue); text-decoration: underline; }
.dt-article-content a:hover { color: var(--leadline-dk-blue-hover); }
.dt-article-content strong { font-weight: 700; }
.dt-article-content em { font-style: italic; }
.dt-article-content ul,
.dt-article-content ol { padding-left: 1.5em; }
.dt-article-content li { margin-bottom: 12px; }
.dt-article-content blockquote {
    margin: 36px 0;
    padding: 8px 0 8px 32px;
    border-left: 6px solid var(--leadline-blue);
    font: italic 400 22px/32px var(--font-mencken);
    color: var(--leadline-wine);
  }
.dt-article-content blockquote p { margin: 0; font: inherit; color: inherit; }
.dt-article-content img { display: block; max-width: 100%; height: auto; }
.dt-article-content figure { margin: 36px 0; }
.dt-article-content figcaption {
    margin-top: 8px;
    font: 400 14px/20px var(--font-owners);
    color: #737373;
  }

/* ===== Article Image ===== */
.dt-articleimg { margin: 0; }
.dt-articleimg__media {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1440 / 600;
    background-color: #737373;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.dt-articleimg__placeholder { color: #fff; font: 400 18px/28px var(--font-owners); }
.dt-articleimg__caption {
    max-width: 1000px;
    margin: 12px auto 0;
    padding: 0 24px;
    color: #737373;
    font: 400 14px/20px var(--font-owners);
  }

/* ===== Article Callout (light-blue) ===== */
.dt-articlecallout {
    position: relative;
    overflow: hidden;
    background: var(--leadline-blue); /* TODO: dot textures — see revisit note */
    padding: 80px 24px;
  }
.dt-articlecallout__inner {
    position: relative;
    z-index: 1;
    max-width: 1136px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 31.1px;
  }
.dt-articlecallout__heading {
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 4px solid var(--leadline-wine);
    color: var(--leadline-wine);
    font-family: var(--font-owners-xwide);
    font-size: 36px;
    line-height: 40px;
  }
.dt-articlecallout__heading-1 { display: block; font-weight: 900; }
.dt-articlecallout__heading-2 { display: block; font-weight: 500; }
.dt-articlecallout__cols { display: flex; gap: 32px; }
.dt-articlecallout__col {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    color: var(--leadline-wine);
    font: 400 18px/29.25px var(--font-owners);
  }
.dt-articlecallout__box {
    background: rgba(101, 28, 50, 0.65); /* wine @ 65% */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
.dt-articlecallout__box p { margin: 0; color: #fff; opacity: 0.8; font: 400 18px/29.25px var(--font-owners); }
@media (max-width: 1023px) {
  .dt-articlecallout__cols { flex-direction: column; gap: 24px; }
}

/* ===== Article Tags ===== */
.dt-articletags { width: 100%; background: #222; padding: 20px clamp(24px, 5.5vw, 80px); }
.dt-articletags__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.dt-articletags__tag {
    color: #fff;
    font: 500 14px/20px var(--font-owners-xwide);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 2px solid #fff;
  }

/* ===== Article Author ===== */
.dt-articleauthor { width: 100%; background: #000; padding: 80px clamp(24px, 5.5vw, 80px); }
.dt-articleauthor__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.dt-articleauthor__copy { display: flex; flex-direction: column; gap: 16px; }
.dt-articleauthor__name {
    margin: 0;
    color: #fff;
    font-family: var(--font-owners-xwide);
    font-weight: 700;
    font-size: clamp(40px, 4.17vw, 60px);
    line-height: 1;
  }
.dt-articleauthor__role {
    margin: 0;
    color: #a3a3a3;
    font: 400 14px/20px var(--font-owners);
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }
.dt-articleauthor__socials { display: flex; gap: 24px; flex-shrink: 0; }
.dt-articleauthor__social { display: inline-flex; align-items: center; color: #fff; transition: opacity 0.15s ease; }
.dt-articleauthor__social:hover { opacity: 0.7; }
/* Size by height (width auto) so icons with different aspect ratios — e.g. the wide
   email envelope vs the square LinkedIn glyph — render at the same visual height. */
.dt-articleauthor__social svg { height: 20px; width: auto; display: block; }

/* ===== Article "More From Our Take" — flat lilac band, 3 equal cards (mirrors .dt-morework) ===== */
.dt-moretake { background: var(--leadline-lilac); padding: 80px 0; }
.dt-moretake__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5.5vw, 80px);
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
.dt-moretake__head {
    margin: 0;
    text-align: right;
    font-family: var(--font-owners-xwide);
    font-weight: 700;
    font-size: clamp(32px, 3.47vw, 50px);
    line-height: 1.2;
  }
.dt-moretake__head-1 { color: var(--leadline-white); }
.dt-moretake__head-2 { color: var(--leadline-wine); }
.dt-moretake__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 8px; }
.dt-moretake__card { position: relative; overflow: hidden; background: #a3a3a3; }
.dt-moretake__card:nth-child(n+4) { display: none; } /* desktop shows 3; mobile masonry uses the 4th */
.dt-moretake__link { display: block; width: 100%; height: 100%; position: relative; color: #fff; text-decoration: none; }
.dt-moretake__media { position: absolute; inset: 0; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.dt-moretake__placeholder { color: #fff; font: 400 18px/28px var(--font-owners); }
.dt-moretake__gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%); pointer-events: none; }
.dt-moretake__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.dt-moretake__tag { opacity: 0.8; font-family: var(--font-owners-xwide); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; }
.dt-moretake__title { font-family: var(--font-playfair); font-weight: 600; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.25; color: #fff; text-wrap: balance; }
.dt-moretake__date { opacity: 0.5; font: 400 12px/16px var(--font-owners); color: #fff; }
.dt-moretake__viewall { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; color: var(--leadline-white); text-decoration: none; font: italic 400 18px/28px var(--font-owners); }
.dt-moretake__viewall:hover, .dt-moretake__viewall:focus-visible { opacity: 0.7; }
.dt-moretake__viewall:hover span:not(.dt-moretake__arrow),
.dt-moretake__viewall:focus-visible span:not(.dt-moretake__arrow) { text-decoration: underline; }
.dt-moretake__arrow { font-style: normal; }
@media (max-width: 1023px) {
  .dt-moretake__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .dt-moretake__card { min-height: 300px; }
}

/* ===== Case Study "More From Our Work" — flat wine band, 3 equal cards ===== */
.dt-morework { background: var(--leadline-wine); padding: 80px 0; }
.dt-morework__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5.5vw, 80px);
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
.dt-morework__head {
    margin: 0;
    text-align: right;
    font-family: var(--font-owners-xwide);
    font-weight: 700;
    font-size: clamp(32px, 3.47vw, 50px);
    line-height: 1.2;
  }
.dt-morework__head-1 { color: var(--leadline-white); }
.dt-morework__head-2 { color: var(--leadline-blue); }
.dt-morework__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 8px; }
.dt-morework__card { position: relative; overflow: hidden; background: #a3a3a3; }
/* The 4th card exists for the mobile 2-col masonry; desktop is a 3-up grid. */
.dt-morework__card:nth-child(n+4) { display: none; }
.dt-morework__link { display: block; width: 100%; height: 100%; position: relative; color: #fff; text-decoration: none; }
.dt-morework__media { position: absolute; inset: 0; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.dt-morework__placeholder { color: #fff; font: 400 18px/28px var(--font-owners); }
.dt-morework__gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%); pointer-events: none; }
.dt-morework__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.dt-morework__tag { opacity: 0.8; font-family: var(--font-owners-xwide); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; }
.dt-morework__title { font-family: var(--font-playfair); font-weight: 600; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.25; color: #fff; text-wrap: balance; }
.dt-morework__date { opacity: 0.5; font: 400 12px/16px var(--font-owners); color: #fff; }
.dt-morework__viewall { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; color: var(--leadline-blue); text-decoration: none; font: italic 400 18px/28px var(--font-owners); }
.dt-morework__viewall:hover, .dt-morework__viewall:focus-visible { opacity: 0.7; }
.dt-morework__viewall:hover span:not(.dt-morework__arrow),
.dt-morework__viewall:focus-visible span:not(.dt-morework__arrow) { text-decoration: underline; }
.dt-morework__arrow { font-style: normal; }
@media (max-width: 1023px) {
  .dt-morework__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .dt-morework__card { min-height: 300px; }
}

/* ===== StatBar ===== */
.dt-statbar {
    background: var(--leadline-white);
    padding: 8px 0;
  }
  .dt-statbar__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Column count follows the number of stats (set per-instance via --statbar-cols). */
    grid-template-columns: repeat(var(--statbar-cols, 4), minmax(0, 1fr));
    gap: 8px;
  }
  .dt-statbar__cell {
    background: #000;
    color: #fff;
    height: 188px;
    /* Fluid horizontal padding: ~50px on large screens, easing down to ~16px as
       the tiles narrow — scales smoothly instead of snapping at a breakpoint, so
       labels gain room gradually and the tile contents don't jump. */
    padding: 24px clamp(16px, -31px + 5.6vw, 50px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }
  .dt-statbar__value {
    margin: 0;
    /* Fluid size: 60px on large screens down to 44px at ~1024 — no breakpoint step. */
    font: 900 clamp(44px, 4.3vw, 60px)/1 var(--font-owners);
    color: #fff;
  }
  /* Per-stat accent colors, cycling in the Figma order. */
  .dt-statbar__cell:nth-child(4n + 1) .dt-statbar__value { color: var(--leadline-red); }
  .dt-statbar__cell:nth-child(4n + 2) .dt-statbar__value { color: var(--leadline-blue); }
  .dt-statbar__cell:nth-child(4n + 3) .dt-statbar__value { color: var(--leadline-lilac); }
  .dt-statbar__cell:nth-child(4n + 4) .dt-statbar__value { color: var(--leadline-cream); }
  /* Case study stat bar: wine cells + cream values (overrides the per-cell accent
     colors). Scoped so the home stat bar keeps its black cells / multicolor values. */
  .page-case-study .dt-statbar__cell { background: var(--leadline-wine); }
  .page-case-study .dt-statbar__value { color: var(--leadline-cream) !important; font-size: clamp(34px, 3.47vw, 50px); }
  .dt-statbar__label {
    margin: 0;
    font: 400 14px/20px var(--font-owners);
    color: #d4d4d4;
    /* Natural height so the value + label block stays truly vertically centered.
       balance keeps a two-line label (narrow widths) evenly split. */
    text-wrap: balance;
  }

/* ===== OurWork ===== */
.dt-ourwork {
    position: relative;
    overflow: hidden;
    background: var(--leadline-blue);
    /* No bottom padding: the 96px view-all band is the section's bottom edge, so the
       "View All Work" link sits in a tight band flush to the bottom — identical to the
       "See All Articles" band on Our Take (which has no section padding). */
    padding: 80px 0 0;
  }
  .dt-ourwork__inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dt-ourwork__heading-wrap {
    padding: 0 32px;
  }
  .dt-ourwork__heading {
    margin: 0;
    padding-bottom: 8px;
    font-family: var(--font-owners-xwide);
    font-size: var(--section-heading-size);
    line-height: 1;
    color: var(--leadline-dk-blue);
  }
  .dt-ourwork__heading-lead { font-weight: 300; }
  .dt-ourwork__heading-rest { font-weight: 700; }
  .dt-ourwork__row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
    padding-top: 40px;
  }
  .dt-ourwork__pair {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  /* 6 project-category cards, 3 across × 2 rows. Styled as a callback to the
     Leadership Team cards: tall image tiles with a vertical label reading up the
     left edge in the Owners XWide name font. */
  .dt-ourwork__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 40px;
  }
  .dt-ourwork__card--grid { height: 480px; }
  .dt-ourwork__card--grid .dt-ourwork__card-title {
    left: 48px;
    bottom: 40px;
    transform-origin: left bottom;
    transform: rotate(-90deg);
    white-space: nowrap;
    font-family: var(--font-owners-xwide);
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
  }
  @media (max-width: 1024px) { .dt-ourwork__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px)  {
    .dt-ourwork__grid { grid-template-columns: 1fr; }
    .dt-ourwork__card--large { grid-column: 1; grid-row: auto; height: 360px; }
    .dt-ourwork__card--small { grid-column: 1; }
  }
  .dt-ourwork__card {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background-color: #737373;
    background-size: cover;
    background-position: center;
  }
  .dt-ourwork__card--large {
    grid-column: 1;
    grid-row: 1 / 3; /* spans both small rows on the left */
  }
  .dt-ourwork__card--small {
    grid-column: 2;
    height: 292px;
  }
  .dt-ourwork__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 400 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    opacity: 0.7;
  }
  .dt-ourwork__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }
  .dt-ourwork__card-title {
    position: absolute;
    color: var(--leadline-white);
    font-family: var(--font-mencken);
    font-weight: 400;
  }
  /* Large cards: vertical label reading bottom-to-top up the left edge.
     writing-mode sizes the text as a proper vertical column; rotate(180deg) flips
     it to read upward. top+bottom bound the height so a long title wraps into a
     second column (toward the card interior) instead of running off the top. */
  .dt-ourwork__card--large .dt-ourwork__card-title {
    left: 32px;
    top: 32px;
    bottom: 32px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: clamp(26px, 2.5vw, 30px);
    line-height: 1.12;
  }
  /* Small cards: horizontal label, bottom-left. */
  .dt-ourwork__card--small .dt-ourwork__card-title {
    left: 24px;
    bottom: 24px;
    font-size: 24px;
    line-height: 32px;
  }
  .dt-ourwork__card:hover .dt-ourwork__gradient,
  .dt-ourwork__card:focus-visible .dt-ourwork__gradient {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.1) 100%);
  }
  .dt-ourwork__view-all {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 96px;
    padding: 24px 32px;
    /* Cancel the inner flex gap so the 96px band sits flush against the cards above —
       same flush content→band edge as the "See All Articles" band on Our Take. */
    margin-top: -8px;
  }
  .dt-ourwork__view-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--leadline-dk-blue);
    font: italic 400 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-decoration: none;
  }
  .dt-ourwork__view-link:hover,
  .dt-ourwork__view-link:focus-visible {
    text-decoration: underline;
  }
  .dt-ourwork__view-arrow {
    display: inline-block;
    width: 15.75px;
    height: 18px;
    color: var(--leadline-dk-blue);
  }
  .dt-ourwork__view-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
  }

/* ===== OurTake ===== */
.dt-ourtake {
    background: var(--leadline-lilac);
    /* Definite height so the inner/hero height:100% chain resolves (percentages don't
       resolve against max-height). Featured hero = one screen tall. */
    height: var(--viewport-minus-header);
    overflow: hidden;
  }
  .dt-ourtake__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .dt-ourtake__hero {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background-color: #737373;
    background-size: cover;
    background-position: center;
  }
  .dt-ourtake__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 400 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    opacity: 0.7;
  }
  .dt-ourtake__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(32deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }
  .dt-ourtake__hero-container {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    height: 100%;
    padding: 0 32px;
  }
  .dt-ourtake__hero-inner {
    max-width: 720px;
    height: 100%;
    /* Ease the extra left inset down on smaller screens (48px at >=1440 -> ~12px at 768)
       so the heading + article don't sit too far right as the viewport narrows. */
    padding: 60px 0 60px clamp(12px, calc(-29px + 5.36vw), 48px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .dt-ourtake__heading-wrap {
    display: flex;
    align-items: flex-start;
  }
  .dt-ourtake__heading {
    margin: 0;
    font-family: var(--font-owners-xwide);
    font-size: var(--section-heading-size);
    line-height: 1;
    color: var(--leadline-cream);
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  }
  .dt-ourtake__heading-lead { font-weight: 700; }
  .dt-ourtake__heading-rest { font-weight: 300; }
  .dt-ourtake__article {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
  }
  .dt-ourtake__meta {
    margin: 0;
    opacity: 0.6;
    font: 400 14px/20px var(--font-owners);
    color: #fff;
  }
  .dt-ourtake__title {
    margin: 0;
    font-size: clamp(32px, 3.3vw, 48px);
    line-height: 1.25;
    color: var(--leadline-white);
  }
  .dt-ourtake__title-lead {
    display: block;
    font-family: var(--font-owners-xwide);
    font-weight: 500;
  }
  .dt-ourtake__title-body {
    display: block;
    font-family: var(--font-mencken);
    font-weight: 500;
    font-style: italic;
    white-space: pre-line;
  }
  /* On large screens the title overflows the 720px column (Figma sizes it ~1036px),
     so the sans lead stays on a single line. */
  @media (min-width: 1440px) {
    .dt-ourtake__title-lead { white-space: nowrap; }
  }
  .dt-ourtake__read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    color: #fff;
    font: 500 18px/28px var(--font-owners-xwide);
  }
  .dt-ourtake__read-arrow {
    display: inline-block;
    width: 15.75px;
    height: 18px;
    color: #fff;
  }
  .dt-ourtake__read-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .dt-ourtake__hero:hover .dt-ourtake__read-more,
  .dt-ourtake__hero:focus-visible .dt-ourtake__read-more {
    text-decoration: underline;
  }
  .dt-ourtake__view-all {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 96px;
    padding: 24px 32px;
    background: var(--leadline-lilac-dk); /* darker band so the light link clears AA contrast (lilac is mid-tone) */
  }
  .dt-ourtake__view-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font: italic 400 18px/28px var(--font-owners);
    text-decoration: none;
  }
  .dt-ourtake__view-link:hover,
  .dt-ourtake__view-link:focus-visible {
    text-decoration: underline;
  }
  .dt-ourtake__view-arrow {
    display: inline-block;
    width: 15.75px;
    height: 18px;
    color: var(--leadline-cream);
  }
  .dt-ourtake__view-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
  }

/* ===== SubFooterCta ===== */
.dt-subcta {
    position: relative;
    min-height: 178px;
    overflow: hidden;
    background-color: var(--leadline-black);
    background-size: cover;
    background-position: center;
  }
  /* Halftone-dot texture (Figma node 919:2922): the asset is black dots, composited at
     20% opacity over the black band (NOT inverted to white), anchored top-right where the
     dots are densest. Behind the content. */
  .dt-subcta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../images/patterns/halftone-dots.png) top right / cover no-repeat;
    opacity: 0.2;
    pointer-events: none;
    /* Above the cover <img> (z-index:0), below the content (z-index:2). */
    z-index: 1;
  }
  .dt-subcta__inner { z-index: 2; }
  .dt-subcta__inner {
    position: relative;
    z-index: 2;
    min-height: 178px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
  }
  .dt-subcta__heading {
    margin: 0;
    white-space: nowrap;
    font-family: var(--font-owners-xwide);
    font-weight: 700;
    font-size: clamp(40px, 4vw, 64px);
    line-height: 1;
    text-transform: uppercase;
  }
  .dt-subcta__heading-base { color: #fff; }
  .dt-subcta__heading-accent { color: var(--leadline-red); }
  /* Heading + optional body stack on the left; the button stays on the right. */
  .dt-subcta__text { display: flex; flex-direction: column; gap: 28px; }
  .dt-subcta__body { margin: 0; max-width: 640px; color: var(--leadline-white); font: 400 18px/28px var(--font-owners); }
  /* With a body, top-align the heading and the button (so they line up), and give
     the blurb room to breathe below. */
  .dt-subcta--has-body .dt-subcta__inner { align-items: flex-start; padding-top: 56px; padding-bottom: 80px; }
  /* Every sub-footer CTA uses the longer "Ready to Grow?" + "Start Your Project" copy,
     so the heading scales fluidly (clamp above). The button scales with it AND its box
     height is pinned to the same clamp as the heading text — so the button stays exactly
     as tall as "READY TO GROW" at every viewport (no vertical padding; height drives it). */
  .dt-subcta__cta {
    flex-shrink: 0;
    background: var(--leadline-red);
    color: #fff;
    font-family: var(--font-owners);
    font-weight: 700;
    font-size: clamp(16px, 1.5vw, 24px);
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    height: clamp(40px, 4vw, 64px);
    padding: 0 clamp(24px, 2vw, 32px);
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 0.8vw, 16px);
  }
  .dt-subcta__cta:hover,
  .dt-subcta__cta:focus-visible {
    background: var(--leadline-red-dark);
  }
  .dt-subcta__cta-arrow { font-style: normal; line-height: 1; display: inline-block; transition: transform 0.2s ease; }
  /* Nudge the arrow right on hover. */
  .dt-subcta__cta:hover .dt-subcta__cta-arrow,
  .dt-subcta__cta:focus-visible .dt-subcta__cta-arrow { transform: translateX(4px); }

  /* Forward-link arrows ("View All", "Read More", card + CTA arrows): same right-nudge
     on hover as the LET'S TALK CTA, for a consistent micro-interaction. Excludes carousel
     prev/next, back-to-top, dropdown chevrons, and the contact map rows. */
  .dt-moretake__arrow, .dt-morework__arrow, .dt-wwd__view-arrow, .dt-wwd__card-arrow,
  .dt-ourwork__view-arrow, .dt-ourtake__read-arrow, .dt-ourtake__view-arrow,
  .dt-ourstory__cta-arrow, .dt-team__arrow, .dt-featured__more-arrow, .dt-cform__next-arrow,
  .dt-service__cta-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
  }
  .dt-moretake__viewall:hover .dt-moretake__arrow, .dt-moretake__viewall:focus-visible .dt-moretake__arrow,
  .dt-morework__viewall:hover .dt-morework__arrow, .dt-morework__viewall:focus-visible .dt-morework__arrow,
  .dt-wwd__view-link:hover .dt-wwd__view-arrow, .dt-wwd__view-link:focus-visible .dt-wwd__view-arrow,
  .dt-wwd__card:hover .dt-wwd__card-arrow, .dt-wwd__card:focus-visible .dt-wwd__card-arrow,
  .dt-ourwork__view-link:hover .dt-ourwork__view-arrow, .dt-ourwork__view-link:focus-visible .dt-ourwork__view-arrow,
  .dt-ourtake__hero:hover .dt-ourtake__read-arrow, .dt-ourtake__hero:focus-visible .dt-ourtake__read-arrow,
  .dt-ourtake__view-link:hover .dt-ourtake__view-arrow, .dt-ourtake__view-link:focus-visible .dt-ourtake__view-arrow,
  .dt-ourstory__cta-link:hover .dt-ourstory__cta-arrow, .dt-ourstory__cta-link:focus-visible .dt-ourstory__cta-arrow,
  .dt-team__linkedin:hover .dt-team__arrow, .dt-team__linkedin:focus-visible .dt-team__arrow,
  .dt-featured:hover .dt-featured__more-arrow, .dt-featured:focus-visible .dt-featured__more-arrow,
  .dt-cform__next:hover .dt-cform__next-arrow, .dt-cform__next:focus-visible .dt-cform__next-arrow,
  .dt-service__cta:hover .dt-service__cta-arrow, .dt-service__cta:focus-visible .dt-service__cta-arrow {
    transform: translateX(4px);
  }

  @media (max-width: 1023px) {
    .dt-subcta__inner {
      flex-direction: column;
      justify-content: center;
      gap: 24px;
      padding: 40px 32px;
    }
    .dt-subcta__heading { white-space: normal; text-align: center; }
    /* When stacked, a body-CTA centers everything too (heading is already centered above). */
    .dt-subcta--has-body .dt-subcta__inner { align-items: center; }
    .dt-subcta--has-body .dt-subcta__body { text-align: center; }
    /* Stacked layout: heading sits above the button, so drop the equal-height pin and
       revert to padding-based sizing. */
    .dt-subcta__cta { height: auto; font-size: 18px; line-height: 22px; padding: 12px 28px; }
  }

/* ============================================================
   WHO WE ARE — Page Hero / Our Story / Core Values / CTA Band / Leadership Team
   Ported from src/components/desktop/{PageHero,OurStory,CoreValues,CtaBand,LeadershipTeam}.astro
   ============================================================ */

/* --- Page Hero --- */
.dt-pagehero { position: relative; height: 75svh; overflow: hidden; background: #fff; color: #fff; }
/* background-position Y ramps CONTINUOUSLY with width (no breakpoint, so the subject never
   "jumps"): it's 0 (center top) at ≤1440, then shifts the image up as the viewport widens
   past 1440 — counteracting the extra vertical crop that otherwise sinks the subject.
   At 1920 the offset is ~96px (≈ the old "center 35%"). */
.dt-pagehero__bg { position: absolute; inset: 0; background-color: #737373; display: flex; align-items: center; justify-content: center; }
/* object-position Y ramps continuously with width (see note above): 0 at <=1440, shifting
   the subject up past 1440 so it isn't over-cropped low. ~96px at 1920. */
.dt-pagehero__img { object-position: center min(0px, (1440px - 100vw) * 0.2); }
.dt-pagehero__placeholder { color: #fff; font: 400 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif; opacity: 0.7; }
.dt-pagehero__overlay { position: absolute; inset: 0; background: transparent; /* overlay removed — full-brightness hero image */ }
.dt-pagehero__content { position: relative; z-index: 1; height: 100%; padding: clamp(40px, 5.5vw, 80px); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 24px; text-align: left; }
/* Headline sized to match the home hero (120px at the 1440 design width) across all page heroes. */
.dt-pagehero__headline { margin: 0; max-width: none; white-space: nowrap; color: #fff; font-family: var(--font-owners-xwide); font-weight: 500; font-size: clamp(64px, 8.333vw, 120px); line-height: 1.1875; text-transform: uppercase; }
/* What We Do hero uses the standard Owners cut (not XWide) per Figma. */
.page-what-we-do .dt-pagehero__headline { font-family: var(--font-owners); }
/* This hero's subject sits HIGH in the frame, so the global upward Y-ramp pushes her
   head under the sticky nav at wide viewports. Pin to top (no ramp) so her head stays
   put and the crop falls at the bottom instead. */
.page-what-we-do .dt-pagehero__img { object-position: center top; }
/* Light-blue wash on the left (behind the copy) fading to clear over the subject (Figma). */
.page-what-we-do .dt-pagehero__overlay { background: linear-gradient(to right, rgba(146, 193, 233, 0.4), rgba(101, 28, 50, 0)); }
/* Who We Are hero: Owners XWide (base), broken onto two lines "WHO WE" / "ARE"
   (ARE in XWide Black) per Figma. */
.page-who-we-are .dt-pagehero__headline { white-space: normal; }
.page-who-we-are .dt-pagehero__headline-emph { display: block; }
/* Red wash on the left (behind the copy) fading to clear over the subject (Figma). */
.page-who-we-are .dt-pagehero__overlay { background: linear-gradient(to right, rgba(251, 71, 31, 0.4), rgba(101, 28, 50, 0)); }
/* Our Work hero uses the standard Owners cut (lead medium, "WORK" black) per Figma. */
.page-our-work .dt-pagehero__headline { font-family: var(--font-owners); }
/* Dark-blue wash on the left (behind the copy) fading to clear over the subject (Figma). */
.page-our-work .dt-pagehero__overlay { background: linear-gradient(to right, rgba(29, 66, 137, 0.4), rgba(251, 71, 31, 0)); }
.page-our-work .dt-pagehero__subtitle { max-width: 53%; }
/* Our Take hero uses the standard Owners cut per Figma. */
.page-our-take .dt-pagehero__headline { font-family: var(--font-owners); }
/* Red wash on the left (behind the copy) fading to clear over the subject (Figma). */
.page-our-take .dt-pagehero__overlay { background: linear-gradient(to right, rgba(251, 71, 31, 0.4), rgba(16, 24, 32, 0)); }
/* Contact hero uses the standard Owners cut per Figma. */
.page-contact .dt-pagehero__headline { font-family: var(--font-owners); }
.page-contact .dt-pagehero__subtitle { max-width: 720px; }
/* Subtle dark-blue wash on the left, fading to clear over the subject (Figma). */
.page-contact .dt-pagehero__overlay { background: linear-gradient(to right, rgba(29, 66, 137, 0.2), rgba(29, 66, 137, 0)); }
.dt-pagehero__headline-emph { font-weight: 900; }
/* Fluid: 20px at the 1440 design, scaling down to a 16px floor on smaller viewports. */
.dt-pagehero__subtitle { margin: 0; max-width: 100%; opacity: 0.6; font: 500 clamp(16px, 1.39vw, 20px)/1.5 var(--font-mencken); color: #fff; }
.dt-pagehero__ctas { display: flex; align-items: center; justify-content: flex-start; padding-top: 16px; }
.dt-pagehero__btn { background: #fff; color: #000; font: 500 18px/28px var(--font-owners); padding: 16px 32px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
/* Lift + soft shadow on hover (matches the home hero buttons). */
.dt-pagehero__btn:hover, .dt-pagehero__btn:focus-visible { background: #f5f5f5; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.dt-pagehero__btn:active { transform: translateY(0); box-shadow: none; }

/* --- Our Story --- */
.dt-ourstory { background: var(--leadline-black); color: #fff; }
.dt-ourstory__top { position: relative; max-width: 1440px; margin: 0 auto; padding: 80px; display: flex; gap: 32px; align-items: flex-start; }
.dt-ourstory__heading-wrap { position: relative; z-index: 1; flex-shrink: 0; padding-bottom: 48px; }
.dt-ourstory__heading { margin: 0; white-space: nowrap; font-family: var(--font-owners-xwide); font-weight: 700; font-size: var(--section-heading-size); line-height: 1; text-shadow: 0 0 15px rgba(0, 0, 0, 0.5); }
.dt-ourstory__heading-lead { color: var(--leadline-cream); }
.dt-ourstory__heading-rest { color: var(--leadline-red); }
.dt-ourstory__body { position: relative; z-index: 1; flex: 1; min-width: 0; max-width: 1280px; display: flex; flex-direction: column; gap: 16px; }
.dt-ourstory__para { margin: 0; opacity: 0.9; font: 400 16px/26px var(--font-owners); color: var(--leadline-white); }
.dt-ourstory__cta-row { padding-top: 48px; display: flex; justify-content: flex-end; }
.dt-ourstory__cta-link { display: inline-flex; align-items: center; gap: 8px; color: var(--leadline-cream); font: italic 400 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: none; }
.dt-ourstory__cta-link:hover, .dt-ourstory__cta-link:focus-visible { text-decoration: underline; }
.dt-ourstory__cta-arrow { display: inline-block; width: 15.75px; height: 18px; color: var(--leadline-cream); }
.dt-ourstory__cta-arrow svg { width: 100%; height: 100%; display: block; }
.dt-ourstory__image { position: relative; overflow: hidden; height: 75svh; background-color: #737373; display: flex; align-items: center; justify-content: center; }
.dt-ourstory__image-placeholder { color: #fff; font: 400 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif; opacity: 0.7; }
/* Stack at the same breakpoint the header nav collapses into the hamburger (1023). */
@media (max-width: 1023px) {
  .dt-ourstory__top { flex-direction: column; gap: 0; padding: 48px 32px; }
  .dt-ourstory__heading { white-space: normal; }
}

/* --- Core Values --- */
.dt-corevalues { background: var(--leadline-wine); padding-top: 80px; display: flex; flex-direction: column; gap: 1rem; }
.dt-corevalues__heading-wrap { display: flex; justify-content: center; padding: 0 80px; }
/* Wherever the filter tabs are visible (>=1024), redistribute the space above/below
   the heading so "Core Values" holds a consistent position between the section top and
   the tab words (no jump as the tabs shrink). Below 1024 the tabs hide and the default
   80px top spacing applies. */
@media (min-width: 1024px) {
  .dt-corevalues { padding-top: 48px; }
  .dt-corevalues__heading-wrap { margin-bottom: 32px; }
}
/* Figma sizes this at 96px at the 1440 design width (6.667vw), larger than the shared
   --section-heading-size; scales down to a 48px floor. */
.dt-corevalues__heading { margin: 0; font-family: var(--font-owners-xwide); font-weight: 700; font-size: clamp(48px, 6.667vw, 96px); line-height: 1; color: var(--leadline-cream); text-align: center; }
.dt-corevalues__tabs { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; padding: 0 32px; }
.dt-corevalues__tab { background: transparent; border: 0; border-bottom: 3px solid transparent; padding-bottom: 8px; cursor: pointer; font: 700 18px/28px var(--font-mencken); color: var(--leadline-cream); opacity: 0.75; transition: opacity .2s ease, border-color .2s ease; } /* 0.75 keeps inactive tabs above AA contrast (active = 1) */
.dt-corevalues__tab[aria-selected="true"] { opacity: 1; border-bottom-color: var(--leadline-cream); }
.dt-corevalues__tab:hover, .dt-corevalues__tab:focus-visible { opacity: 1; }
.dt-corevalues__stage { position: relative; height: 708px; }
/* Panels are stacked and crossfade between each other (no display:none, so the
   opacity transition can run). The active panel sits on top; inactive panels are
   faded out and pulled from the a11y tree via visibility:hidden. */
.dt-corevalues__panel { position: absolute; top: 8px; left: 0; right: 0; height: 700px; background-color: #a3a3a3; background-size: cover; background-position: center; color: #fff; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility 0s linear .55s; }
.dt-corevalues__panel.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .55s ease, visibility 0s; }
.dt-corevalues__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 400 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif; opacity: 0.7; }
.dt-corevalues__gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.dt-corevalues__panel-content { position: absolute; bottom: 0; left: 0; max-width: 936px; padding: 0 0 80px 60px; display: flex; flex-direction: column; gap: 15.125px; transform: translateY(18px); transition: transform .6s ease; }
.dt-corevalues__panel.is-active .dt-corevalues__panel-content { transform: translateY(0); transition-delay: .08s; }
.dt-corevalues__title { margin: 0; font-size: clamp(40px, 5vw, 72px); line-height: 1.25; text-shadow: 0 0 7.5px rgba(0, 0, 0, 0.5); white-space: nowrap; }
.dt-corevalues__title-lead { display: block; font-family: var(--font-owners); font-weight: 500; font-size: clamp(14px, 1.5vw, 32px); text-transform: uppercase; color: var(--leadline-cream); }
.dt-corevalues__title-accent { display: block; font-family: var(--font-owners-xwide); font-weight: 700; font-size: clamp(42px, 3.5vw, 60px); color: var(--leadline-red); }
.dt-corevalues__desc { margin: 0; font: 400 18px/29.25px var(--font-owners); color: var(--leadline-white); text-transform: uppercase; }
.dt-corevalues__body { margin: 0; max-width: 876px; font: 400 18px/29.25px var(--font-owners); color: #fff; opacity: 0.6; white-space: normal; }
.dt-corevalues__nav { position: absolute; right: 32px; bottom: 32px; display: flex; gap: 16px; z-index: 2; }
.dt-corevalues__nav-btn { width: 48px; height: 48px; background: var(--leadline-cream); border: 1px solid #000; color: #000; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.dt-corevalues__nav-btn:hover, .dt-corevalues__nav-btn:focus-visible { background: #000; color: var(--leadline-cream); }
.dt-corevalues__nav-arrow { display: inline-block; width: 16px; height: 20px; color: currentColor; }
.dt-corevalues__nav-arrow svg { width: 100%; height: 100%; display: block; }
.dt-corevalues__nav-arrow--prev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .dt-corevalues__panel { transition: opacity 0s, visibility 0s; }
  .dt-corevalues__panel.is-active { transition: opacity 0s, visibility 0s; }
  .dt-corevalues__panel-content { transform: none; transition: none; }
}
/* Hide the carousel tabs at/below 1280px (the prev/next arrows stay and become the nav).
   Tabs use visibility:hidden + nowrap so their row reserves exactly the large-screen
   single-line height (without it the row wraps and the section grows); overflow:hidden
   clips the off-screen tabs. */
/* 1024–1280: keep the filter tabs visible, just smaller (font + gap shrink with
   the viewport) so all five fit on one line. */
@media (max-width: 1280px) {
  .dt-corevalues__tabs { flex-wrap: nowrap; gap: clamp(14px, 2vw, 40px); padding: 0 24px; }
  .dt-corevalues__tab { flex-shrink: 0; white-space: nowrap; font-size: clamp(11px, 1.2vw, 17px); }
}
/* Below the nav-collapse breakpoint the tabs hide (the prev/next arrows navigate). */
@media (max-width: 1023px) {
  .dt-corevalues__tabs { visibility: hidden; overflow: hidden; }
}

/* The value title breaks onto two lines before the ampersand (e.g.
   "Work Creatively" / "& Critically"); the <br> is hidden on large screens. */
.dt-corevalues__title-break { display: none; }
/* At/below 1024px: force that two-line break at the breakpoint (not only when
   the text overflows), let other titles wrap, and keep the body clear of the
   bottom-right prev/next arrows. */
@media (max-width: 1024px) {
  .dt-corevalues__title { white-space: normal; }
  .dt-corevalues__title-break { display: block; }
  .dt-corevalues__body { padding-right: 150px; }
}

/* --- CTA Band --- */
.dt-ctaband { position: relative; overflow: hidden; background: var(--leadline-blue); padding: 80px 0; }
/* Decorative halftone dot cloud behind the band (Figma: white dots at 20% over the
   light-blue). Used on the Who We Are and Case Study CTA bands (same component image). */
.dt-ctaband__texture { display: none; }
.page-who-we-are .dt-ctaband__texture,
.page-case-study .dt-ctaband__texture {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../images/ctaband-dots.png) no-repeat center / cover;
  opacity: 0.2;
  pointer-events: none;
}
.dt-ctaband__inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 80px; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.dt-ctaband__heading { margin: 0 auto; max-width: 850px; font-family: var(--font-owners-xwide); font-weight: 700; font-size: clamp(16px, 1.5vw, 40px); line-height: 1.75; color: var(--leadline-dk-blue); white-space: normal; }
.dt-ctaband__cta { background: var(--leadline-dk-blue); color: #fff; font: 400 18px/28px var(--font-owners); padding: 16px 40px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.dt-ctaband__cta:hover, .dt-ctaband__cta:focus-visible { background: var(--leadline-dk-blue-hover); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.dt-ctaband__cta:active { transform: translateY(0); box-shadow: none; }
/* Case study CTA band uses the Mencken serif heading per Figma (5:1054). Scoped so the
   shared component on other pages keeps its current Owners XWide cut until we reconcile globally.
   Figma sizes the quote at 40px / 75px line-height at the 1440 design width; make it fluid
   (2.78vw hits 40px at 1440) so it scales down toward the 768 floor. */
.page-case-study .dt-ctaband__heading {
    font-family: var(--font-mencken);
    font-size: clamp(24px, 2.78vw, 40px);
    line-height: 1.875;
    max-width: 950px;
  }
/* Who We Are CTA band: match the home pull-quote's responsive behavior — a fixed
   heading size (instead of the fluid clamp that reflowed the lines continuously)
   so the line layout holds steady from 1440 down to 1024, then a measure that
   steps narrower below 1024 with eased side padding. */
/* Who We Are CTA: heading holds the Figma 40px (scales down toward the 768 floor,
   never grows past 40px). At/below the 1440 design width it keeps the Figma 5-line
   layout (explicit breaks). */
.page-who-we-are .dt-ctaband__heading { font-size: clamp(24px, 2.78vw, 40px); line-height: 1.875; max-width: none; }
.page-who-we-are .dt-ctaband__inner { max-width: none; }
/* Above 1440 the text size stays 40px but the heading reflows into wider lines
   (forced breaks dropped) so the content fills the wider band, up to a 1920 cap. */
@media (min-width: 1441px) {
  /* Lock the reflowed heading to the ~1336px measure it has at 1496px so this exact
     3-line format holds from there all the way up (no further reflow on wider screens). */
  .page-who-we-are .dt-ctaband__heading { white-space: normal; max-width: 1336px; }
  .page-who-we-are .dt-ctaband__inner { max-width: 1920px; }
}
@media (max-width: 1024px) {
  .page-who-we-are .dt-ctaband__inner {
    padding-left: clamp(24px, 5vw, 80px);
    padding-right: clamp(24px, 5vw, 80px);
  }
}

/* --- Leadership Team --- */
.dt-team { position: relative; overflow: hidden; background-color: var(--leadline-dk-blue); padding: 80px 0; }
/* NOTE: Leadership left dot band removed for now (pending designer conversation).
   To restore: re-add the ::before below. Asset baked at assets/images/patterns/llm-patterns-leadership-dots.png.
   .dt-team::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: url('../images/patterns/llm-patterns-leadership-dots.png'); background-repeat: no-repeat; background-position: left bottom; background-size: auto 88%; opacity: 0.2; pointer-events: none; } */
/* Figma sizes this at 126px at the 1440 design width (8.75vw); scales to a 56px floor. */
.dt-team__heading { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto 40px; padding: 0 45px; text-align: center; color: #fff; font-size: clamp(56px, 8.75vw, 126px); line-height: 0.95; text-shadow: 0 0 15px rgba(0, 0, 0, 0.5); }
.dt-team__heading-lead { font-family: var(--font-owners); font-weight: 400; }
.dt-team__heading-rest { font-family: var(--font-owners); font-weight: 700; }
.dt-team__grid { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 45px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: stretch; }
.dt-team__cell { display: block; text-decoration: none; }
.dt-team__portrait { position: relative; height: 290px; overflow: hidden; background-color: #a3a3a3; background-size: cover; background-position: center; }
.dt-team__portrait-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 400 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; opacity: 0.7; }
.dt-team__gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
/* Name + role rotated to read bottom-to-top, overlaid at the portrait's bottom-left.
   Origin left-bottom + rotate(-90deg) pins the text to the bottom; `left` is offset
   by the two-line stack height so the rotated strip clears the left edge. */
.dt-team__meta { position: absolute; left: 56px; bottom: 16px; transform-origin: left bottom; transform: rotate(-90deg); display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.dt-team__name { font: 500 16px/24px var(--font-owners-xwide); text-transform: uppercase; color: #fff; }
.dt-team__role { font: 400 12px/20px var(--font-owners); color: #fff; }
/* Responsiveness: minimal fallback only — full pass deferred (see responsiveness-pass). */
@media (max-width: 1100px) { .dt-team__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .dt-team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .dt-team__grid { grid-template-columns: 1fr; } }

/* ===== Service Section (What We Do: Strategy / Brand / Digital / Performance) ===== */
.dt-service { position: relative; overflow: hidden; }
.dt-service__inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 80px; }
.dt-service__intro { margin: 0; font: 400 18px/29.25px var(--font-owners); }
.dt-service__cta { font: italic 400 16px/24px var(--font-owners); text-decoration: none; }
/* Pin the arrow glyph to one font so all four "Discuss X" CTA arrows match — some
   sections override the CTA font to Helvetica Neue, which renders → differently. */
.dt-service__cta-arrow { font-family: var(--font-owners); }
.dt-service__cta:hover, .dt-service__cta:focus-visible { text-decoration: underline; }

/* themes */
.dt-service--dark { background: var(--leadline-black); color: #fff; }
.dt-service--dark .dt-service__intro { color: #fff; opacity: 0.6; }
.dt-service--dark .dt-service__cta { color: var(--leadline-cream); }

/* --- checklist style (Strategy & Intelligence) --- */
.dt-service--checklist .dt-service__inner { min-height: 700px; text-align: center; }
/* decorative dot halftone — anchored to the 1440 content box (not the full-viewport section),
   sized 102.47% x 100% and pushed off the right edge per Figma so only the left arc shows. */
.dt-service--checklist .dt-service__heading { position: relative; display: inline-block; margin: 0; transform: translateX(-42px); }
.dt-service--checklist .dt-service__heading-lead { display: inline-block; font-family: var(--font-owners-xwide); font-weight: 700; font-size: clamp(48px, 6.7vw, 96px); line-height: 1; color: var(--leadline-cream); }
/* Intelligence hugs the right edge of "Strategy &", reading top-to-bottom, extending down beside the body. */
.dt-service--checklist .dt-service__heading-accent { position: absolute; left: 100%; top: 0.13em; margin-left: 12px; writing-mode: vertical-rl; font-family: var(--font-owners); font-weight: 500; font-size: clamp(48px, 6.7vw, 96px); line-height: 1; color: var(--leadline-red); }
.dt-service--checklist .dt-service__body { max-width: 727px; margin: 48px auto 0; transform: translateX(-86px); display: flex; flex-direction: column; gap: 48px; text-align: left; }
.dt-service--checklist .dt-service__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.dt-service--checklist .dt-service__check-item { display: flex; gap: 16px; align-items: center; padding-bottom: 17px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.dt-service--checklist .dt-service__check-box { flex-shrink: 0; width: 16px; height: 16px; background: #fff; }
.dt-service--checklist .dt-service__check-label { font: 400 18px/28px var(--font-mencken); color: var(--leadline-blue); }
.dt-service--checklist .dt-service__cta-row { display: flex; justify-content: flex-end; margin-top: 48px; }
/* Strategy responsive: the translateX offsets + vertical accent are Figma 1440
   positioning. As the container narrows the vertical "Intelligence" converges
   on the body (gap ~53px at 1440 -> overlaps below ~1160), and the body offset
   eventually clips the left edge. Below 1280px, drop the offsets, ease the
   padding, and un-rotate "Intelligence" into a normal stacked second line. */
@media (max-width: 1280px) {
  .dt-service--checklist .dt-service__inner { padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 80px); }
  .dt-service--checklist .dt-service__heading { transform: none; }
  .dt-service--checklist .dt-service__heading-accent {
    position: static;
    writing-mode: horizontal-tb;
    margin-left: 0;
    display: block;
  }
  .dt-service--checklist .dt-service__body { transform: none; }
}
/* At 1024 and below, scale the checklist down (narrower block + smaller text)
   instead of holding the 727px width until the screen edge clips it. */
@media (max-width: 1024px) {
  .dt-service--checklist .dt-service__body { max-width: 600px; }
  .dt-service--checklist .dt-service__intro { font-size: 16px; line-height: 26px; }
  .dt-service--checklist .dt-service__check-label { font-size: 16px; line-height: 24px; }
}

/* theme: wine */
.dt-service--wine { background: var(--leadline-wine); color: #fff; }

/* --- icon_grid style (Brand & Creative) --- */
.dt-service--icon_grid { padding: 80px 0; display: flex; flex-direction: column; gap: 40px; }
/* Wine ribbon (vertical stripe) texture behind the section, lighten-blended at 20%.
   Stuck to the right edge: each copy is half the section height, tiled vertically
   (top-right + bottom-right) so it doesn't tile across the whole section. */
.dt-service--icon_grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(../images/brand-ribbon.png) repeat-y right top;
  background-size: 494px 50%;
  mix-blend-mode: lighten;
  opacity: 0.2;
  pointer-events: none;
}
.dt-service--icon_grid > * { position: relative; z-index: 1; }
.dt-service--icon_grid .dt-service__top { max-width: 1440px; margin: 0 auto 40px; padding: 0 80px; width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; } /* space-between: columns anchor to both margins (fill the width, no empty left third); +40px bottom so the intro sits vertically centered in the wine band above the image (matches the 80px section top padding) */
/* The overlapping lockup scales as a single unit: font-size drives the heading,
   and the accent's size + offsets + the heading height are all em-relative, so
   "Results" keeps the same overlap/position as the heading scales (no drift).
   em values derived from the 1440 design (Business 116.6px, left 139, top 88,
   height 176, Results 79.2px) so 1440 is unchanged. */
.dt-service--icon_grid .dt-service__intro { width: 478px; flex-shrink: 0; margin: 0; font: 400 16px/26px var(--font-owners); color: var(--leadline-white); }
.dt-service__image { max-width: 1440px; margin: 0 auto; }
/* Scale with the viewport on the image's own 1440:400 ratio so the wordmark is
   never cropped on narrower screens (matches the 400px height at the 1440 design). */
.dt-service--icon_grid .dt-service__image { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1440 / 400; background-color: #14181f; background-image: url(../images/brand-image-placeholder.png); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
/* The shared `image` field is used for the MOBILE service shot; on desktop the brand slot
   keeps its designed placeholder (above), so hide the cover img here. Remove this when a
   real desktop Brand & Creative banner asset replaces the placeholder. */
.dt-service--icon_grid .dt-service__image .ll-cover-img { display: none; }
/* Caption text hidden for launch — the brand-image-placeholder.png wordmark stands on its own
   until the final Brand & Creative banner asset lands (set sections_2_image to restore real art). */
.dt-service--icon_grid .dt-service__image-placeholder { display: none; }
.dt-service--icon_grid .dt-service__bottom { max-width: 1440px; margin: 0 auto; padding: 0 80px; width: 100%; display: flex; flex-direction: column; gap: 20px; }
.dt-service__cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dt-service__cap { display: flex; gap: 12px; align-items: center; height: 75px; padding: 24px; background: rgba(155, 119, 147, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dt-service__cap-icon { flex-shrink: 0; width: 18px; height: 18px; --fill-0: var(--leadline-cream); color: var(--leadline-cream); }
.dt-service__cap-icon svg { width: 100%; height: 100%; display: block; }
.dt-service__cap-label { font: 400 18px/28px var(--font-mencken); color: var(--leadline-cream); white-space: nowrap; }
.dt-service--icon_grid .dt-service__cta-row { display: flex; justify-content: flex-end; }
.dt-service--icon_grid .dt-service__cta { color: var(--leadline-blue); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
/* Business Results responsive: the top row's fixed-width (478px) intro clips
   right, and the 3-col cap grid with nowrap labels forces itself wider than the
   container. Below 1280px, stack heading + intro full-width, ease the padding,
   drop to a 2-col cap grid, and let cap labels wrap. */
@media (max-width: 1280px) {
  /* stack heading + intro and center them, keeping the original overlapping lockup */
  .dt-service--icon_grid .dt-service__top { flex-direction: column; align-items: center; gap: 24px; padding: 0 clamp(24px, 5vw, 80px); }
  .dt-service--icon_grid .dt-service__intro { width: auto; max-width: 727px; text-align: center; }
  .dt-service--icon_grid .dt-service__bottom { padding: 0 clamp(24px, 5vw, 80px); }
  .dt-service--icon_grid .dt-service__cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-service--icon_grid .dt-service__cap { height: auto; min-height: 75px; }
  .dt-service--icon_grid .dt-service__cap-label { white-space: normal; }
}
/* Match the Strategy blurb: step the intro measure narrower at 1024. */
@media (max-width: 1024px) {
  .dt-service--icon_grid .dt-service__intro { max-width: 600px; }
}

/* theme: cream */
.dt-service--cream { background: var(--leadline-cream); color: var(--leadline-wine); }

/* --- image_cards style (Digital & Web) --- */
.dt-service--image_cards { padding: 80px 0; }
/* Faint circular bar texture behind the section (Figma: single large image at 20%,
   offset left, over the cream). Clipped by .dt-service overflow:hidden. */
.dt-service--image_cards::before {
  content: "";
  position: absolute;
  width: 85.72%;
  height: 114.1%;
  left: -42.89%;
  top: 18.63%;
  background: url(../images/digital-texture.png) no-repeat;
  background-size: 100% 100%;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}
.dt-service--image_cards > * { position: relative; z-index: 1; }
/* vertical-bars texture overlay (Figma: w86% h114% left -43% top 19%, 20%) */
.dt-service--image_cards .dt-service__inner--center { max-width: 1440px; margin: 0 auto; padding: 0 80px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.dt-service--image_cards .dt-service__head-block { display: flex; flex-direction: column; align-items: center; max-width: 888px; }
.dt-service--image_cards .dt-service__heading { margin: 0 0 32px; text-align: center; font-family: var(--font-owners-xwide); font-weight: 500; font-size: var(--section-heading-size); line-height: 1; color: var(--leadline-wine); }
.dt-service--image_cards .dt-service__amp { font-family: var(--font-mencken); font-weight: 800; font-style: italic; }
.dt-service--image_cards .dt-service__subtitle { margin: 0; max-width: 888px; text-align: center; font: 500 20px/28px var(--font-owners-xwide); color: var(--leadline-wine); }
.dt-service--image_cards .dt-service__intro { max-width: 800px; text-align: center; opacity: 0.5; font: 400 18px/29.25px var(--font-owners); color: #000; }
.dt-service--image_cards .dt-service__card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 1200px; }
.dt-service__icard { display: flex; flex-direction: column; }
.dt-service__icard-img { position: relative; overflow: hidden; height: 222px; background-color: #737373; display: flex; align-items: center; justify-content: center; }
.dt-service__icard-ph { color: #fff; font: 400 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; }
/* Bar grows with the label (which can wrap to 2-3 lines on narrow cards); the
   icon stretches to match instead of clipping/spilling out of a fixed 60px. */
.dt-service__icard-bar { display: flex; min-height: 60px; flex-grow: 1; }
.dt-service__icard-icon { flex-shrink: 0; width: 60px; align-self: stretch; background: var(--leadline-wine); display: flex; align-items: center; justify-content: center; --fill-0: #fff; color: #fff; }
.dt-service__icard-icon svg { height: 14px; width: auto; display: block; }
.dt-service__icard-label { flex: 1; min-width: 0; display: flex; align-items: center; padding: 8px 16px; background: var(--leadline-lilac-dk); font: 400 16px/24px var(--font-mencken); color: #fff; }
.dt-service--image_cards .dt-service__cta-row { display: flex; justify-content: flex-end; width: 100%; max-width: 1200px; }
.dt-service--image_cards .dt-service__cta { color: var(--leadline-wine); }
/* Digital & Web text: same treatment as the other service sections — ease the
   heavy side padding, and step the intro blurb narrower + smaller at 1024
   (heading + subtitle are already centered/fluid). */
@media (max-width: 1280px) {
  .dt-service--image_cards .dt-service__inner--center { padding: 0 clamp(24px, 5vw, 80px); }
}
@media (max-width: 1024px) {
  .dt-service--image_cards .dt-service__subtitle { max-width: 600px; font-size: 18px; line-height: 26px; }
  .dt-service--image_cards .dt-service__intro { max-width: 600px; font-size: 16px; line-height: 26px; }
  .dt-service--image_cards .dt-service__card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* theme: black */
.dt-service--black { background: #000; color: #fff; }

/* --- performance style (Performance Marketing) --- */
.dt-service--performance { padding: 40px 0 80px; display: flex; flex-direction: column; gap: 40px; }
/* Faint waveform-bar texture behind the section (Figma: 258px wide, 20% over black),
   stuck to the right edge. Each copy is half the section height and tiled vertically,
   so it reads as one at top-right + one at bottom-right (fills full height, less stretch). */
.dt-service--performance::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/performance-texture.png) repeat-y right top;
  background-size: 258px 50%;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}
.dt-service--performance > * { position: relative; z-index: 1; }
.dt-service--performance .dt-service__pm-head { max-width: 1440px; margin: 0 auto; padding: 0 80px; width: 100%; display: flex; flex-direction: column; gap: 31.25px; }
/* Lockup scales as one unit: font-size drives it, accent size + offsets + height
   are em-relative so "Marketing" keeps its position as the heading scales (no
   drift). em values derived from the 1440 design (lead 75px, accent 64.8px,
   left 300, top 71, height 152) so 1440 is unchanged. */
.dt-service--performance .dt-service__heading { position: relative; margin: 0 auto; font-size: var(--section-heading-size); height: 2.03em; }
.dt-service--performance .dt-service__heading-lead { display: block; font-family: var(--font-owners-xwide); font-weight: 700; font-size: 1em; line-height: 1.65; color: var(--leadline-cream); }
.dt-service--performance .dt-service__heading-accent { position: absolute; left: 4.63em; top: 1.096em; font-family: var(--font-mencken); font-weight: 700; font-style: italic; font-size: 0.864em; line-height: 1; color: var(--leadline-red); }
.dt-service--performance .dt-service__intro { max-width: 768px; margin: 0 auto; opacity: 0.6; font: 400 18px/29.25px var(--font-owners); color: #fff; text-align: center; }
/* category cards */
/* Three cards stay in one row (shrinking to fit, capped at 352px) down to 1024;
   they stack to one column below (see media query). */
.dt-service--performance .dt-service__pm-cards { display: flex; justify-content: center; gap: 32px; padding: 10px 80px; flex-wrap: nowrap; }
/* container-type lets the card text scale to the card's own width (cqw), so it
   shrinks as the 3-in-row cards narrow and is full-size in the 1-col 352px cards. */
.dt-service__pm-card { position: relative; flex: 1 1 0; min-width: 0; max-width: 352px; padding-top: 72px; container-type: inline-size; }
.dt-service__pm-card-head { position: absolute; top: 0; left: 13px; right: 12px; height: 112px; background: var(--leadline-wine); display: flex; align-items: center; justify-content: center; padding: 16px 32px; z-index: 1; }
.dt-service__pm-card-head h3 { margin: 0; font-family: var(--font-mencken); font-weight: 800; font-size: clamp(20px, 7.95cqw, 28px); line-height: 1.25; color: var(--leadline-cream); text-align: center; }
.dt-service__pm-card-body { min-height: 269px; padding: 64px 32px 56px; background: rgba(101, 28, 50, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; }
.dt-service__pm-card-body p { margin: 0; font-family: var(--font-owners); font-weight: 500; font-size: clamp(14px, 5.1cqw, 18px); line-height: 1.2; color: var(--leadline-white); text-align: center; }
/* filmstrip (full-bleed row of 4) */
.dt-service--performance .dt-service__pm-strip { display: flex; gap: 8px; width: 100%; }
.dt-service__pm-frame { position: relative; overflow: hidden; flex: 1; min-width: 0; height: 250px; background-color: #737373; display: flex; align-items: center; justify-content: center; }
.dt-service__pm-frame span { color: #fff; font: 400 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; }
/* detail grid 2x3 */
.dt-service--performance .dt-service__pm-bottom { max-width: 1440px; margin: 0 auto; padding: 0 80px; width: 100%; display: flex; flex-direction: column; gap: 40px; }
.dt-service__pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dt-service__pm-item { display: flex; height: 60px; overflow: hidden; }
.dt-service__pm-icon { flex-shrink: 0; width: 60px; height: 60px; background: #262626; display: flex; align-items: center; justify-content: center; --fill-0: var(--leadline-red); color: var(--leadline-red); }
.dt-service__pm-icon svg { height: 14px; width: auto; display: block; }
.dt-service__pm-label { flex: 1; min-width: 0; display: flex; align-items: center; padding-left: 16px; background: rgba(16, 24, 32, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 400 16px/24px var(--font-mencken); color: var(--leadline-cream); }
.dt-service--performance .dt-service__cta-row { display: flex; justify-content: flex-end; }
.dt-service--performance .dt-service__cta { color: #fff; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
/* Performance responsive: ease the heavy side padding, and step the intro blurb
   narrower + smaller at 1024 (heading lockup + category cards/filmstrip/grid
   already handle narrow widths via the em lockup + flex-wrap + 2-col grid). */
@media (max-width: 1280px) {
  .dt-service--performance .dt-service__pm-head { padding: 0 clamp(24px, 5vw, 80px); }
  .dt-service--performance .dt-service__pm-cards { padding: 10px clamp(24px, 5vw, 80px); }
  .dt-service--performance .dt-service__pm-bottom { padding: 0 clamp(24px, 5vw, 80px); }
}
@media (max-width: 1024px) {
  .dt-service--performance .dt-service__intro { max-width: 600px; font-size: 16px; line-height: 26px; }
  /* Stack to one column at full content width; each card goes horizontal —
     wine title panel on the left, the three items on the right. */
  .dt-service--performance .dt-service__pm-cards { flex-direction: column; align-items: stretch; gap: 24px; }
  .dt-service--performance .dt-service__pm-card { display: flex; flex-direction: row; width: 100%; max-width: none; padding-top: 0; }
  .dt-service--performance .dt-service__pm-card-head { position: static; inset: auto; height: auto; flex: 0 0 30%; }
  .dt-service--performance .dt-service__pm-card-head h3 { font-size: 28px; line-height: 1.25; }
  .dt-service--performance .dt-service__pm-card-body { flex: 1; min-height: 0; padding: 32px; }
  .dt-service--performance .dt-service__pm-card-body p { font-size: 18px; line-height: 1.2; }
}

/* --- What We Do floating nav (scroll-spy) + back-to-top --- */
.dt-pagenav { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 16px; padding: 25px; transition: opacity 0.3s ease; }
/* Fade the whole nav out once the sub-footer CTA rises to meet it. */
.dt-pagenav--hidden { opacity: 0; pointer-events: none; }
/* Vertical bars stacked on the right rail. The active section's bar brightens to full
   strength and grows taller (scroll-spy); the section name appears only on hover, as an
   inverting chip to its left. Adaptive color: cream over dark sections, wine over light. */
.dt-pagenav__link { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0; text-decoration: none; color: var(--leadline-cream); transition: color 0.25s ease; }
.dt-pagenav__label { font: 500 12px/1 var(--font-owners); letter-spacing: 1px; text-transform: uppercase; text-align: right; white-space: nowrap; padding: 7px 9px; border-radius: 3px; background: var(--leadline-cream); color: var(--leadline-black); opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.dt-pagenav__bar { flex: none; width: 3px; height: 24px; background: currentColor; opacity: 0.4; transition: height 0.2s ease, opacity 0.2s ease; }
/* Hover: reveal the name + brighten the hovered bar for feedback. */
.dt-pagenav__link:hover .dt-pagenav__label { opacity: 1; transform: none; }
.dt-pagenav__link:hover .dt-pagenav__bar { opacity: 1; }
/* Active section: its bar goes full strength (cream / wine) and grows taller. */
.dt-pagenav__link.is-active .dt-pagenav__bar { height: 40px; opacity: 1; }
/* Light section: bars + hover chip switch to wine. */
.dt-pagenav--on-light .dt-pagenav__link { color: var(--leadline-wine); }
.dt-pagenav--on-light .dt-pagenav__label { background: var(--leadline-wine); color: var(--leadline-cream); }
/* Scroll-spy side nav only at 1024px and up. */
@media (max-width: 1023px) { .dt-pagenav { display: none; } }
/* Back-to-top: static, anchored to the bottom-right corner of the page (in the footer), not sticky. */
body.page-what-we-do { position: relative; }
.dt-backtotop { position: absolute; bottom: 0; right: 0; z-index: 40; width: 63px; height: 63px; padding: 25px; background: #000; border: 0; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; }
.dt-backtotop svg { width: 13.5px; height: 18px; display: block; }

/* --- Our Process (What We Do) --- */
.dt-process { position: relative; overflow: hidden; background: var(--leadline-dk-blue); color: #fff; padding: 64px 0 40px; }
/* Horizontal-dash data texture, tiled from top-left per Figma (each tile
   855.6×687.2 of the 1440 frame = 59.42% wide, aspect-locked; 20% over dk-blue).
   Tiling puts a dash cluster on the left (behind the lockup) and right. */
.dt-process::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/process-dashes.png) repeat top left;
  background-size: 59.42% auto;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}
.dt-process__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 64px; }
/* Lockup scales as one unit: font-size drives it, accent offsets + heading
   height are em-relative so "Our"/"Process" keep their overlap and the box
   doesn't leave dead space as the text shrinks. em from the 1440 design
   (75px font, left 82, top 37, height 165). */
/* Tight height (no dead space below the lockup) + side inset so the lockup is
   centered in the band (with the equal 64px top padding / inner gap) and never
   touches the left edge when the heading would otherwise span full width. */
.dt-process__heading { position: relative; width: 1280px; max-width: calc(100% - clamp(48px, 10vw, 160px)); font-size: var(--section-heading-size); height: 1.5em; margin: 0; }
.dt-process__heading-lead { position: absolute; left: 0; top: 0; z-index: 2; font-family: var(--font-mencken); font-weight: 700; font-style: italic; font-size: 1em; line-height: 1; color: var(--leadline-cream); text-shadow: 0 0 7.5px rgba(0, 0, 0, 0.25); }
.dt-process__heading-accent { position: absolute; left: 1.093em; top: 0.493em; font-family: var(--font-owners-xwide); font-weight: 900; font-size: 1em; line-height: 1; color: var(--leadline-blue); text-shadow: 0 0 7.5px rgba(0, 0, 0, 0.25); }
.dt-process__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 85%; max-width: 1440px; margin: 0 auto; align-items: start; }
.dt-process__col { display: flex; flex-direction: column; }
.dt-process__img { position: relative; overflow: hidden; height: 85px; background-color: var(--leadline-wine); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
/* Big step number overlaid at the top of the (maroon or photo) image cell. */
/* Owners XWide XBlack, centered, natural spacing. Sized so the widest number
   ("04") fits the cell; narrow numbers like "01" sit a little tighter. */
.dt-process__num { position: absolute; top: 0px; left: 50%; transform: translateX(-50%); margin: 0; font-family: var(--font-owners-xwide-xblack); font-weight: 900; font-size: 118px; line-height: 0.9; color: var(--leadline-cream); white-space: nowrap; rotate: 5deg; }
.dt-process__img-ph { color: #fff; font: 400 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.dt-process__card { height: 260px; background: #000; padding: 32px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.dt-process__title { margin: 0 0 8px; font: 400 18px/28px var(--font-mencken); color: #fff; }
.dt-process__desc { margin: 0; opacity: 0.6; font: 400 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #fff; }
/* In-card number (shown only in the stacked <1280 layout, above the title). */
.dt-process__card-num { display: none; }
/* Below 1280 the 5-col timeline columns get too narrow to hold the descriptions
   in the fixed-height cards (text overflows), so stack to one step per row, each
   laid out horizontally: image on the left (constrained width), the
   number/title/description on the right. Even columns are reversed so the image
   stays on the left. Card + image flex to a shared row height. */
@media (max-width: 1280px) {
  .dt-process__grid { grid-template-columns: 1fr; gap: 24px; }
  .dt-process__col { flex-direction: row; align-items: stretch; }
  .dt-process__col:nth-child(even) { flex-direction: row-reverse; }
  /* No images in this section anymore — the wine box becomes a narrow number tile. */
  .dt-process__img { flex: 0 0 168px; height: auto; min-height: 220px; }
  .dt-process__card { flex: 1; min-width: 0; height: auto; }
  /* Big rotated cream number centered (contained) in the wine tile, keeping the
     desktop 5° tilt — replaces the small number that used to sit inside the card. */
  .dt-process__num { display: block; position: static; transform: none; margin: 0; font-size: 68px; }
  .dt-process__card-num { display: none; }
}

/* What We Do quote variant: dk-blue field, white quote, light-blue name (Figma 470:1659). */
.page-what-we-do .dt-quote,
.page-case-study .dt-quote { background: var(--leadline-dk-blue); }
.page-what-we-do .dt-quote__text,
.page-case-study .dt-quote__text { color: #fff; font-weight: 700; }
.page-what-we-do .dt-quote__name,
.page-case-study .dt-quote__name { color: var(--leadline-blue); }
.page-what-we-do .dt-quote__title,
.page-case-study .dt-quote__title { color: #fff; }

/* --- Our Take: article content grid (large + small cards) --- */
.dt-take { background: var(--leadline-lilac); }
.dt-take__grid { max-width: 1440px; margin: 0 auto; padding: 48px 80px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; grid-auto-flow: dense; gap: 8px; }
.dt-take__card { position: relative; overflow: hidden; min-height: 300px; background-color: #a3a3a3; background-size: cover; background-position: center; display: flex; text-decoration: none; }
.dt-take__card--large { grid-column: span 2; }
.dt-take__card--small { grid-column: span 1; }
/* Every other large card sits in the right two columns (small backfills the left)
   so the mosaic zigzags instead of stacking all large cards on the left. */
.dt-take__card--large-alt { grid-column: 2 / span 2; }
.dt-take__card[hidden] { display: none; }
/* A lone card left on the final row (odd total) spans the full width instead of
   leaving an empty gap beside it. */
.dt-take__grid > .dt-take__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dt-take__grid--filtered { grid-template-columns: repeat(2, 1fr); }
.dt-take__grid--filtered .dt-take__card { grid-column: span 1; }
.dt-take__card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 400 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.dt-take__card-pill { position: absolute; top: 24px; right: 24px; z-index: 2; background: var(--leadline-wine); color: #fff; font: 500 12px/1 var(--font-owners-xwide); letter-spacing: 1px; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; }
.dt-take__card-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 50%); pointer-events: none; }
.dt-take__card-content { position: relative; z-index: 1; margin-top: auto; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.dt-take__card-cat { font: 500 12px/16px var(--font-owners-xwide); letter-spacing: 1.2px; text-transform: uppercase; color: #fff; opacity: 0.8; }
.dt-take__card-title { margin: 0; font-family: var(--font-playfair); font-weight: 600; color: #fff; text-wrap: balance; }
.dt-take__card--large .dt-take__card-title { font-size: 28px; line-height: 35px; }
.dt-take__card--small .dt-take__card-title { font-size: 20px; line-height: 25px; }
.dt-take__card-date { font: 400 12px/16px var(--font-owners); color: #fff; opacity: 0.5; }
.dt-take__more { display: flex; justify-content: center; padding: 0 80px 80px; }
/* `display:flex` above otherwise overrides the [hidden] attribute the JS toggles, so the
   Load More button would stay visible even when a filter has no (or no further) articles. */
.dt-take__more[hidden] { display: none; }
.dt-take__more-btn { background: var(--leadline-wine); border: 0; cursor: pointer; padding: 16px 48px; font: 400 16px/24px var(--font-owners); color: var(--leadline-cream); transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.dt-take__more-btn:hover, .dt-take__more-btn:focus-visible { background: var(--leadline-wine-dark); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.dt-take__more-btn:active { transform: translateY(0); box-shadow: none; }

/* --- Contact map + office info + CTA bars --- */
.dt-map { background: var(--leadline-dk-blue); color: #fff; }
.dt-map__inner { max-width: 1000px; margin: 0 auto; padding: 64px 32px; display: flex; flex-direction: column; gap: 88px; }
.dt-map__top { display: flex; flex-direction: column; gap: 48px; }
.dt-map__embed { height: 400px; background: #d4d4d4; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dt-map__embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.dt-map__placeholder { color: #525252; font: 400 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.dt-map__info { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.dt-map__info-col { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.dt-map__info-heading { margin: 0; font: 500 18px/28px var(--font-owners-xwide); color: var(--leadline-cream); }
.dt-map__info-lines { margin: 0; font: 400 14px/20px var(--font-owners); color: var(--leadline-white); }
.dt-map__bars { display: flex; flex-direction: column; }
.dt-map__bar { display: block; text-decoration: none; padding: 32px 0 33px; border-bottom: 1px solid var(--leadline-blue); }
.dt-map__bar-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-bottom: 28px; }
.dt-map__bar-title { flex-shrink: 0; font: 500 20px/28px var(--font-owners-xwide); color: var(--leadline-cream); }
.dt-map__bar-short { flex: 1; padding: 0 32px; font: 400 16px/24px var(--font-owners); color: var(--leadline-white); }
.dt-map__bar-arrow { flex-shrink: 0; width: 14px; height: 16px; color: #fff; }
.dt-map__bar-arrow svg { width: 100%; height: 100%; display: block; }
.dt-map__bar-body { margin: 0; font: 400 20px/32.5px var(--font-owners); color: var(--leadline-white); }

/* --- Contact multi-step form --- */
/* Two bands: statement on warm gray (#d9d9d6), form steps on wine (red/light treatment). */
.dt-cform__statement-band { background: var(--leadline-white); }
/* center the whole statement block as a unit (heading shrink-wraps to content) */
.dt-cform__statement { max-width: 1000px; margin: 0 auto; padding: 80px 32px 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.dt-cform__heading { margin: 0; }
.dt-cform__line { display: block; line-height: 0.94; }
.dt-cform__line--1 { white-space: nowrap; margin-left: -41px; font-family: var(--font-mencken); font-style: italic; font-weight: 700; font-size: clamp(48px, 6.7vw, 96px); color: var(--leadline-wine); }
/* lines 2-3 (Owners XWide) left-aligned, indented right relative to line 1: "starts with a" / "conversation." */
.dt-cform__line--2 { text-align: left; margin-left: 240px; white-space: nowrap; font-family: var(--font-owners-xwide); font-weight: 700; font-size: clamp(48px, 6.7vw, 96px); color: var(--leadline-wine); }
.dt-cform__accent { color: var(--leadline-red); }
.dt-cform__rule { display: block; align-self: flex-start; width: 80px; height: 4px; background: var(--leadline-red); }
.dt-cform__form-band { background: var(--leadline-wine); }
.dt-cform__form { max-width: 1000px; margin: 0 auto; padding: 56px 32px 80px; display: flex; flex-direction: column; gap: 48px; }
.dt-cform__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.dt-cform__progress { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
.dt-cform__bar { width: 20px; height: 4px; background: var(--leadline-white); opacity: 0.25; transition: opacity 0.25s ease; }
.dt-cform__bar.is-current { opacity: 1; }
.dt-cform__bar.is-done { opacity: 0.6; }
.dt-cform__steps { display: flex; flex-direction: column; gap: 32px; }
.dt-cform__step { display: flex; flex-direction: column; gap: 32px; }
.dt-cform__step[hidden] { display: none; }
.dt-cform__field { display: flex; flex-direction: column; gap: 32px; }
.dt-cform__q { font-family: var(--font-mencken); font-style: italic; font-weight: 700; font-size: clamp(32px, 3.3vw, 48px); line-height: 1.25; color: var(--leadline-red); }
.dt-cform__q-mark { color: var(--leadline-white); }
.dt-cform__input-wrap { display: flex; align-items: baseline; gap: 8px; border-bottom: 4px solid var(--leadline-red); padding: 2px 0 22px; }
.dt-cform__prefix { color: var(--leadline-white); font: 400 20px/1 var(--font-owners); flex-shrink: 0; }
.dt-cform__input { appearance: none; background: transparent; border: 0; border-bottom: 4px solid var(--leadline-red); padding: 2px 0 22px; color: var(--leadline-white); font: 400 20px/1.2 var(--font-owners); width: 100%; }
.dt-cform__input-wrap .dt-cform__input { border-bottom: 0; padding: 0; }
.dt-cform__textarea { resize: none; overflow: hidden; line-height: 28px; padding: 4px 0 12px; }
.dt-cform__input::placeholder { color: var(--leadline-white); opacity: 0.6; }
.dt-cform__input:focus { outline: none; }
.dt-cform__actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dt-cform__back { appearance: none; background: transparent; border: 0; padding: 8px 4px; color: var(--leadline-white); opacity: 0.7; font: 400 18px/28px var(--font-owners); cursor: pointer; }
.dt-cform__back:hover { opacity: 1; }
.dt-cform__next, .dt-cform__submit { margin-left: auto; appearance: none; background: var(--leadline-white); border: 0; color: var(--leadline-wine); padding: 16px 32px; font: 400 18px/28px var(--font-owners); cursor: pointer; }
.dt-cform__next:hover, .dt-cform__submit:hover { background: #fff; }
/* Below ~1024 the nowrap "Every great partnership" gets wider than the column and runs off
   the left; shrink the heading there (matches the 6.7vw size at 1024, smaller toward 768) and
   scale the staggered offsets down so the lockup stays balanced as it narrows. The rule keeps
   its left (flex-start) position. */
@media (max-width: 1024px) {
  .dt-cform__line--1, .dt-cform__line--2 { font-size: clamp(40px, calc(-30px + 9.6vw), 68px); }
  .dt-cform__line--1 { margin-left: 0; }
  .dt-cform__line--2 { margin-left: clamp(40px, calc(-560px + 78vw), 240px); }
}

/* --- Newsletter signup band --- */
/* TEMP (Dale's request): hide the "Stay In The Loop" newsletter until the signup is
   wired to a backend. Remove this one line to bring it back. */
.dt-newsletter { display: none; }
.dt-newsletter { background: var(--leadline-dk-blue); color: #fff; }
.dt-newsletter__inner { max-width: 1440px; margin: 0 auto; padding: clamp(40px, 5.6vw, 80px); display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.dt-newsletter__top { display: flex; align-items: center; justify-content: space-between; gap: 64px; }
/* Heading font-size lives on the h2 so the lockup offsets/height can use em and scale. */
.dt-newsletter__heading { position: relative; flex: 1; min-width: 0; font-size: clamp(48px, 5.5vw, 80px); height: 1.25em; margin: 0; }
.dt-newsletter__heading-lead { position: absolute; left: 0; top: 0; font-family: var(--font-owners-xwide); font-weight: 700; font-size: 1em; line-height: 1; text-transform: uppercase; color: var(--leadline-blue); text-shadow: 0 0 15px rgba(0, 0, 0, 0.25); }
.dt-newsletter__heading-accent { position: absolute; left: 2.41em; top: 0.5em; font-family: var(--font-mencken); font-weight: 400; font-style: italic; font-size: 1em; line-height: 1; color: var(--leadline-white); text-shadow: 0 0 15px rgba(0, 0, 0, 0.25); }
.dt-newsletter__form { flex: 1; min-width: 0; display: flex; gap: 16px; align-items: stretch; }
.dt-newsletter__input { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 3px solid var(--leadline-blue); padding: 24px 0 8px; font: 400 20px/1.2 var(--font-owners); color: #fff; }
.dt-newsletter__input::placeholder { color: var(--leadline-white); opacity: 1; }
.dt-newsletter__btn { flex-shrink: 0; background: var(--leadline-blue); border: 0; cursor: pointer; padding: 16px 40px; font: 500 16px/24px var(--font-owners-xwide); color: var(--leadline-dk-blue); }
.dt-newsletter__btn:hover { opacity: 0.9; }
.dt-newsletter__body { margin: 0; font: 400 18px/29.25px var(--font-owners); color: var(--leadline-white); }
/* Below 1024 the heading + form get cramped side-by-side (the input collapses), so stack
   them — heading on top, form full width. */
@media (max-width: 1023px) {
  .dt-newsletter__top { flex-direction: column; align-items: stretch; gap: 32px; }
  .dt-newsletter__heading { flex: none; }
}

/* --- Our Take: featured post banner --- */
.dt-featured { position: relative; display: block; height: 700px; overflow: hidden; background-color: #737373; background-size: cover; background-position: center; text-decoration: none; color: #fff; }
.dt-featured__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 400 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.dt-featured__gradient { position: absolute; inset: 0; background: linear-gradient(25.92deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.dt-featured__content { position: relative; z-index: 1; max-width: 920px; height: 100%; padding: 80px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14.9px; }
.dt-featured__category { font: 500 14px/20px var(--font-owners-xwide); letter-spacing: 1.4px; text-transform: uppercase; color: #fff; opacity: 0.8; }
.dt-featured__heading { margin: 0; }
.dt-featured__heading-lead { display: block; white-space: pre-line; font-family: var(--font-owners-xwide); font-weight: 700; font-size: 54px; line-height: 59.4px; color: #fff; }
.dt-featured__heading-accent { display: block; font-family: var(--font-playfair); font-weight: 600; font-style: italic; font-size: 54px; line-height: 59.4px; color: #fff; }
.dt-featured__meta { display: flex; align-items: center; gap: 16px; opacity: 0.7; font: 300 16px/24px var(--font-owners); color: #fff; }
.dt-featured__more { font: 500 18px/28px var(--font-owners-xwide); color: #fff; }

/* --- Our Work: filter bar + masonry grid + load more --- */
.dt-work { background: var(--leadline-blue); }
.dt-work__filters { background: var(--leadline-dk-blue); min-height: 76px; padding: 0 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dt-work__filter-list { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
/* Ease the heavy side padding as the bar narrows. */
@media (max-width: 1280px) {
  .dt-work__filters { padding: 0 clamp(24px, 5vw, 80px); }
}
/* Keep Sort By on the right, top-aligned: when the filter labels wrap to a second
   line it stays anchored at the top-right (beside the first filter row) instead of
   floating mid-right or dropping to its own orphaned line. Drop the fixed-height
   cram and use vertical padding so a single row still reads centered. */
@media (max-width: 1024px) {
  .dt-work__filters { align-items: flex-start; min-height: 0; padding-top: 16px; padding-bottom: 16px; }
}
/* Keep the filters + Sort By on one line as the page narrows by scaling the
   type/gaps down with the viewport instead of wrapping (Our Work + Our Take share
   this filter bar). */
.dt-work__filters { align-items: center; flex-wrap: nowrap; gap: clamp(10px, 1.4vw, 24px); }
.dt-work__filter-list { flex-wrap: nowrap; gap: clamp(10px, 1.4vw, 24px); }
/* Parent selectors raise specificity above the base .dt-work__filter / __sort-btn
   rules (which are defined later in the file) so these win regardless of order. */
.dt-work__filter-list .dt-work__filter,
.dt-work__sort .dt-work__sort-btn { font-size: clamp(9px, 1.45vw, 14px); letter-spacing: clamp(0.6px, 0.09vw, 1.4px); white-space: nowrap; }
/* Balance the underline's bottom padding with equal top padding so the filter
   words sit vertically centered (matching SORT BY, which has no underline). */
.dt-work__filter-list .dt-work__filter { padding: 8px 0; }
/* SORT BY is an inline button in a block wrapper, which adds line-box baseline
   space below it (it read ~2px low). Flex the wrapper to center it cleanly. */
.dt-work__sort { display: flex; align-items: center; }
.dt-work__filter { position: relative; background: none; border: 0; padding: 0 0 8px; cursor: pointer; font: 500 14px/20px var(--font-owners); letter-spacing: 1.4px; text-transform: uppercase; color: #fff; opacity: 0.65; transition: opacity 0.2s ease; } /* 0.65 keeps inactive filters above AA contrast (active = 1) */
.dt-work__filter:hover, .dt-work__filter.is-active { opacity: 1; }
.dt-work__filter.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #fff; }
.dt-work__sort { position: relative; flex-shrink: 0; }
.dt-work__sort-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; font: 500 14px/20px var(--font-owners); letter-spacing: 1.4px; text-transform: uppercase; color: #fff; }
.dt-work__sort-chevron { display: inline-flex; width: 12px; height: 12px; }
.dt-work__sort-chevron svg { width: 100%; height: 100%; display: block; transform: rotate(90deg); }
.dt-work__sort-btn[aria-expanded="true"] .dt-work__sort-chevron svg { transform: rotate(-90deg); }
.dt-work__sort-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; margin: 0; padding: 8px 0; list-style: none; min-width: 160px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.dt-work__sort-menu[hidden] { display: none; }
.dt-work__sort-opt { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 8px 16px; font: 400 14px/20px var(--font-owners); color: var(--leadline-black); }
.dt-work__sort-opt:hover { background: #f0f0f0; }
.dt-work__sort-opt.is-active { font-weight: 700; }
/* Keyboard focus — the default outline is low-contrast on these colored backgrounds. */
.dt-work__filter:focus-visible,
.dt-work__sort-btn:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 3px; }
.dt-work__sort-opt:focus-visible { background: #f0f0f0; outline: 2px solid var(--leadline-dk-blue); outline-offset: -2px; }
.dt-work__card:focus-visible,
.dt-take__card:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
/* Empty state shown when a category filter matches no cards (Our Work + Our Take). */
.dt-listing-empty { margin: 0; padding: 48px 80px 96px; text-align: center; color: #fff; font: 400 clamp(16px, 1.4vw, 20px)/1.5 var(--font-owners); }
.dt-listing-empty[hidden] { display: none; }
.dt-work__grid { max-width: 1440px; margin: 0 auto; padding: 48px 80px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 350px; grid-auto-flow: dense; gap: 8px; }
.dt-work__card { position: relative; overflow: hidden; min-height: 350px; background-color: #a3a3a3; background-size: cover; background-position: center; display: flex; text-decoration: none; color: inherit; }
/* Large/small mosaic mirrors Our Take: large cards span 2 cols, every other large
   sits in the right two columns so the grid zigzags; a lone last card spans full width. */
.dt-work__card--large { grid-column: span 2; }
.dt-work__card--small { grid-column: span 1; }
.dt-work__card--large-alt { grid-column: 2 / span 2; }
.dt-work__card[hidden] { display: none; }
.dt-work__grid > .dt-work__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* when a category filter or non-Featured sort is active, collapse to a uniform 2-col grid */
.dt-work__grid--filtered { grid-template-columns: repeat(2, 1fr); }
.dt-work__grid--filtered .dt-work__card { grid-column: span 1; grid-row: auto; }
.dt-work__card-ph { position: absolute; top: 24px; right: 24px; color: #fff; font: 400 18px/28px 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.dt-work__card-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 50%); pointer-events: none; }
/* gap handled per-child so the collapsed description reveal adds no stray space */
.dt-work__card-content { position: relative; z-index: 1; margin-top: auto; padding: 24px; display: flex; flex-direction: column; }
.dt-work__card-cat { font: 500 12px/16px var(--font-owners-xwide); letter-spacing: 1.2px; text-transform: uppercase; color: #fff; opacity: 0.8; margin-bottom: 16px; }
.dt-work__card-title { margin: 0; font: 700 20px/28px var(--font-mencken); color: #fff; }
.dt-work__card-desc { margin: 0; font: 400 16px/26px var(--font-owners); color: var(--leadline-white); }
.dt-work__card-desc-wrap { display: none; }
/* >=1280px: smooth grid-rows reveal of the case-study blurb on hover/focus. The
   wrapper animates 0fr -> 1fr (to the real content height) and the text fades in.
   The title->blurb gap lives in the desc padding (inside the collapsing wrapper),
   so the collapsed card looks identical to having no blurb. Disabled below 1280px. */
@media (min-width: 1280px) {
  .dt-work__card-desc-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.22,.61,.36,1); }
  .dt-work__card-desc { min-height: 0; overflow: hidden; opacity: 0; padding-top: 16px; transition: opacity .4s ease .1s; }
  .dt-work__card:hover .dt-work__card-desc-wrap,
  .dt-work__card:focus-within .dt-work__card-desc-wrap { grid-template-rows: 1fr; }
  .dt-work__card:hover .dt-work__card-desc,
  .dt-work__card:focus-within .dt-work__card-desc { opacity: 1; }
}
.dt-work__more { display: flex; justify-content: center; padding: 0 80px 80px; }
/* `display:flex` above overrides the [hidden] attribute the JS toggles, so the Load More
   button still showed when empty/exhausted (e.g. the empty Performance filter). Restore it. */
.dt-work__more[hidden] { display: none; }
.dt-work__more-btn { background: var(--leadline-dk-blue); border: 0; cursor: pointer; padding: 16px 48px; font: 400 16px/24px var(--font-owners); color: #fff; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.dt-work__more-btn:hover, .dt-work__more-btn:focus-visible { background: var(--leadline-dk-blue-hover); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.dt-work__more-btn:active { transform: translateY(0); box-shadow: none; }

/* ===== Contact form — Gravity Forms restyled to the conversational design =====
   GF's own CSS is disabled (gform_disable_css); these rules map GF's markup to the
   wine multi-step look (big italic question, underlined input, brand buttons). */
.dt-cform__form-band .gform_wrapper { max-width: 1000px; margin: 0 auto; padding: 56px 32px 80px; }
.dt-cform__form-band .gform_wrapper form { margin: 0; }
.dt-cform__form-band .gform_required_legend { display: none; }
/* progress bar (percentage) → slim red bar + subtle step title */
.dt-cform__form-band .gf_progressbar_wrapper { margin: 0 0 48px; }
.dt-cform__form-band .gf_progressbar_title { margin: 0 0 12px; font: 400 14px/20px var(--font-owners); color: var(--leadline-white); opacity: 0.8; } /* 0.8 keeps the step label above AA contrast on the wine band */
.dt-cform__form-band .gf_progressbar { background: rgba(255, 255, 255, 0.15); height: 4px; }
.dt-cform__form-band .gf_progressbar_percentage { background: var(--leadline-red); height: 4px; }
.dt-cform__form-band .gf_progressbar_percentage span { display: none; }
/* one field per page */
.dt-cform__form-band .gform_page_fields { display: flex; flex-direction: column; gap: 32px; }
.dt-cform__form-band .gfield { display: flex; flex-direction: column; gap: 32px; }
.dt-cform__form-band .gfield_label {
  margin: 0;
  font-family: var(--font-mencken); font-style: italic; font-weight: 700;
  font-size: clamp(32px, 3.3vw, 48px); line-height: 1.25; color: var(--leadline-red);
}
.dt-cform__form-band .gfield_required { display: none; }
/* Field description (e.g. the phone "Optional" hint) on the wine band. */
.dt-cform__form-band .gfield_description { color: var(--leadline-white); }
/* underlined transparent inputs */
.dt-cform__form-band .ginput_container input:not([type="radio"]):not([type="checkbox"]),
.dt-cform__form-band .ginput_container textarea {
  appearance: none; background: transparent; border: 0; border-bottom: 4px solid var(--leadline-red);
  border-radius: 0; padding: 2px 0 22px; width: 100%;
  color: var(--leadline-white); font: 400 20px/1.2 var(--font-owners);
}
.dt-cform__form-band .ginput_container textarea { resize: none; overflow: hidden; }
.dt-cform__form-band .ginput_container input::placeholder,
.dt-cform__form-band .ginput_container textarea::placeholder { color: var(--leadline-white); opacity: 0.6; }
.dt-cform__form-band .ginput_container input:focus,
.dt-cform__form-band .ginput_container textarea:focus { outline: none; }
/* $ prefix on the budget field */
.dt-cform__form-band .cf-budget .ginput_container { display: flex; align-items: baseline; gap: 8px; border-bottom: 4px solid var(--leadline-red); padding: 2px 0 22px; }
.dt-cform__form-band .cf-budget .ginput_container::before { content: "$"; flex-shrink: 0; color: var(--leadline-white); font: 400 20px/1 var(--font-owners); }
.dt-cform__form-band .cf-budget .ginput_container input:not([type="radio"]):not([type="checkbox"]) { border-bottom: 0; padding: 0; }
/* footer buttons */
.dt-cform__form-band .gform-page-footer,
.dt-cform__form-band .gform_footer { position: relative; margin-top: 48px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
/* GF injects its AJAX loader into the footer during submit; take it out of the flex
   flow (absolute) so it can't shove the Next button sideways mid-transition. */
.dt-cform__form-band .gform-loader { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); margin: 0; }
/* Reserve a consistent step height and pin the nav to the bottom so the Next
   button doesn't jump vertically between steps of differing content height. */
.dt-cform__form-band .gform_page { display: flex; flex-direction: column; min-height: 320px; }
.dt-cform__form-band .gform-page-footer { margin-top: auto; }
.dt-cform__form-band .gform_next_button,
.dt-cform__form-band .gform_button {
  margin-left: auto; appearance: none; background: var(--leadline-white); border: 0;
  color: var(--leadline-wine); padding: 16px 32px; font: 400 18px/28px var(--font-owners); cursor: pointer;
}
.dt-cform__form-band .gform_next_button:hover, .dt-cform__form-band .gform_button:hover { background: #fff; }
.dt-cform__form-band .gform_previous_button {
  appearance: none; background: transparent; border: 0; padding: 8px 4px; opacity: 0.7;
  color: var(--leadline-white); font: 400 18px/28px var(--font-owners); cursor: pointer;
}
.dt-cform__form-band .gform_previous_button:hover { opacity: 1; }
/* validation + confirmation */
.dt-cform__form-band .gform_validation_errors { margin: 0 0 32px; padding: 16px; background: rgba(0,0,0,0.2); color: var(--leadline-cream); font: 400 16px/24px var(--font-owners); }
.dt-cform__form-band .gform_submission_error { margin: 0; font-weight: 500; font-size: 1em; }
.dt-cform__form-band .gfield_validation_message, .dt-cform__form-band .validation_message { margin-top: 8px; color: var(--leadline-cream); font: 400 20px/1.2 var(--font-owners); }
.dt-cform__form-band .gform_confirmation_message { color: var(--leadline-white); font: italic 400 clamp(24px,2.5vw,36px)/1.4 var(--font-mencken); text-align: center; padding: 40px 0; }
/* Radio (project) — service choices as selectable pill buttons (radio hidden) */
.dt-cform__form-band .gfield_radio,
.dt-cform__form-band .gfield_checkbox { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.dt-cform__form-band .gchoice { display: inline-flex; margin: 0; }
.dt-cform__form-band .gfield-choice-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dt-cform__form-band .gchoice .gform-field-label--type-inline {
  margin: 0; padding: 12px 28px; cursor: pointer;
  border: 2px solid var(--leadline-cream); color: var(--leadline-cream);
  font: 400 18px/1.2 var(--font-owners);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dt-cform__form-band .gchoice .gform-field-label--type-inline:hover { border-color: var(--leadline-red); }
.dt-cform__form-band .gfield-choice-input:checked + label { background: var(--leadline-red); border-color: var(--leadline-red); color: #fff; }
.dt-cform__form-band .gfield-choice-input:focus-visible + label { outline: 2px solid var(--leadline-cream); outline-offset: 2px; }
/* Radio fields render as a <fieldset> with a <legend>; with GF CSS off, reset the default border. */
.dt-cform__form-band fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.dt-cform__form-band legend { padding: 0; }
/* Conditional "please specify" field (id 7): extra breathing room above it when it reveals. */
.dt-cform__form-band .cf-specify { margin-top: 24px; }