/* ==========================================================================
   Disruptive Templates - Design System
   Anthropic restraint governing Shopify commerce machinery.
   Light-first. Green is an ACCENT ONLY - never body text, never a fill.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted - no third-party CDN, no GDPR exposure)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand - from brand.json. Do not invent values. */
  --dt-black:       #181716;
  --dt-green:       #009933;
  --dt-green-dark:  #007a29;   /* hover only, derived */
  --dt-green-wash:  #f0faf3;   /* tint background, derived */
  --dt-grey-dark:   #333333;
  --dt-grey-mid:    #737373;
  --dt-grey-light:  #D9D9D9;
  --dt-paper:       #FFFFFF;
  --dt-paper-soft:  #FAFAF9;   /* alternating section ground, derived */

  /* Semantic roles */
  --dt-text:         var(--dt-black);
  --dt-text-2:       var(--dt-grey-dark);
  --dt-text-3:       var(--dt-grey-mid);
  --dt-rule:         var(--dt-grey-light);
  --dt-bg:           var(--dt-paper);
  --dt-bg-alt:       var(--dt-paper-soft);
  --dt-accent:       var(--dt-green);
  --dt-accent-hover: var(--dt-green-dark);

  /* Status */
  --dt-success: #009933;
  --dt-error:   #B3261E;
  --dt-warning: #8A6100;

  /* Type families */
  --dt-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --dt-font-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dt-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale - fluid, clamped */
  --dt-fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --dt-fs-h1:      clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --dt-fs-h2:      clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --dt-fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --dt-fs-h4:      1.125rem;
  --dt-fs-body-lg: 1.125rem;
  --dt-fs-body:    1.0625rem;
  --dt-fs-sm:      0.9375rem;
  --dt-fs-xs:      0.8125rem;

  --dt-lh-tight: 1.15;
  --dt-lh-snug:  1.3;
  --dt-lh-base:  1.65;
  --dt-lh-loose: 1.75;

  /* Spacing - 4px base */
  --dt-1: 4px;   --dt-2: 8px;   --dt-3: 12px;  --dt-4: 16px;
  --dt-5: 20px;  --dt-6: 24px;  --dt-8: 32px;  --dt-10: 40px;
  --dt-12: 48px; --dt-16: 64px; --dt-20: 80px; --dt-24: 96px;

  /* Section rhythm - fluid */
  --dt-section-y: clamp(48px, 6vw, 96px);

  /* Containers */
  --dt-w-wide:  1260px;
  --dt-w-base:  1100px;
  --dt-w-prose: 700px;   /* hard cap on running text */
  --dt-gutter:  clamp(16px, 4vw, 32px);

  /* Radius - Anthropic-leaning. No pills on UI. */
  --dt-r-sm:   4px;
  --dt-r-md:   8px;
  --dt-r-lg:   12px;
  --dt-r-full: 9999px;

  /* Elevation - flat by default, one raised step */
  --dt-shadow-none:    none;
  --dt-shadow-raised:  0 1px 2px rgba(24,23,22,.05), 0 4px 12px rgba(24,23,22,.06);
  --dt-shadow-overlay: 0 8px 32px rgba(24,23,22,.14);

  --dt-border: 1px solid var(--dt-rule);
  --dt-ease: cubic-bezier(.2,.6,.3,1);
  --dt-dur: 160ms;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
.dt *, .dt *::before, .dt *::after { box-sizing: border-box; }

.dt {
  font-family: var(--dt-font-body);
  font-size: var(--dt-fs-body);
  line-height: var(--dt-lh-base);
  color: var(--dt-text);
  background: var(--dt-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.dt :where(h1, h2, h3, h4) {
  font-family: var(--dt-font-display);
  font-weight: 600;
  line-height: var(--dt-lh-tight);
  letter-spacing: -0.015em;
  color: var(--dt-text);
  margin: 0 0 var(--dt-4);
  text-wrap: balance;
}
.dt :where(h1) { font-size: var(--dt-fs-h1); }
.dt :where(h2) { font-size: var(--dt-fs-h2); line-height: var(--dt-lh-snug); }
.dt :where(h3) { font-size: var(--dt-fs-h3); line-height: var(--dt-lh-snug); letter-spacing: -0.01em; }
.dt :where(h4) { font-size: var(--dt-fs-h4); font-family: var(--dt-font-body); font-weight: 700; letter-spacing: 0; }

.dt :where(p) { margin: 0 0 var(--dt-4); }
.dt :where(p):last-child { margin-bottom: 0; }
.dt strong { font-weight: 700; }

.dt :where(a) {
  color: var(--dt-text); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: var(--dt-grey-light);
  transition: color var(--dt-dur) var(--dt-ease), text-decoration-color var(--dt-dur) var(--dt-ease);
}
.dt :where(a):hover { color: var(--dt-accent); text-decoration-color: currentColor; }
.dt a:focus-visible, .dt button:focus-visible, .dt input:focus-visible,
.dt select:focus-visible, .dt summary:focus-visible {
  outline: 2px solid var(--dt-accent); outline-offset: 2px; border-radius: var(--dt-r-sm);
}

.dt :where(img) { max-width: 100%; height: auto; display: block; }
.dt :where(ul, ol) { margin: 0 0 var(--dt-4); padding-left: 1.25em; }
.dt :where(li) { margin-bottom: var(--dt-2); }
.dt :where(li):last-child { margin-bottom: 0; }

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

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.dt-sec { padding-block: var(--dt-section-y); background: var(--dt-bg); }
.dt-sec--alt  { background: var(--dt-bg-alt); }
.dt-sec--rule { border-top: var(--dt-border); }

.dt-wrap        { width: 100%; max-width: var(--dt-w-base); margin-inline: auto; padding-inline: var(--dt-gutter); }
.dt-wrap--wide  { max-width: var(--dt-w-wide); }
.dt-wrap--prose { max-width: var(--dt-w-prose); }

.dt-prose { max-width: var(--dt-w-prose); }
.dt-prose p, .dt-prose li { line-height: var(--dt-lh-loose); color: var(--dt-text-2); }

.dt-grid { display: grid; gap: var(--dt-6); }
.dt-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.dt-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.dt-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.dt-grid--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.dt-stack > * + * { margin-top: var(--dt-4); }
.dt-cluster { display: flex; flex-wrap: wrap; gap: var(--dt-3); align-items: center; }

/* Section heading block */
.dt-head { margin-bottom: var(--dt-10); max-width: var(--dt-w-prose); }
.dt-head__eyebrow {
  font-family: var(--dt-font-body); font-size: var(--dt-fs-xs); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--dt-accent);
  margin: 0 0 var(--dt-3);
}
.dt-head__sub { color: var(--dt-text-2); font-size: var(--dt-fs-body-lg); margin: 0; }

/* --------------------------------------------------------------------------
   5. Buttons - outlined by default, filled for primary CTA only
   -------------------------------------------------------------------------- */
.dt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dt-2);
  min-height: 48px; padding: 12px 24px;
  font-family: var(--dt-font-body); font-size: var(--dt-fs-body); font-weight: 600;
  line-height: 1.2; text-align: center; text-decoration: none;
  border: 1px solid var(--dt-black); border-radius: var(--dt-r-md);
  background: transparent; color: var(--dt-black); cursor: pointer;
  transition: background var(--dt-dur) var(--dt-ease), color var(--dt-dur) var(--dt-ease),
              border-color var(--dt-dur) var(--dt-ease);
}
.dt-btn:hover { background: var(--dt-black); color: var(--dt-paper); text-decoration: none; }

.dt-btn--primary { background: var(--dt-black); color: var(--dt-paper); border-color: var(--dt-black); }
.dt-btn--primary:hover { background: var(--dt-accent); border-color: var(--dt-accent); color: var(--dt-paper); }

.dt-btn--accent { background: var(--dt-accent); border-color: var(--dt-accent); color: var(--dt-paper); }
.dt-btn--accent:hover { background: var(--dt-accent-hover); border-color: var(--dt-accent-hover); color: var(--dt-paper); }

.dt-btn--ghost { border-color: transparent; padding-inline: var(--dt-2); }
.dt-btn--ghost:hover { background: transparent; color: var(--dt-accent); text-decoration: underline; }

.dt-btn--sm { min-height: 40px; padding: 8px 16px; font-size: var(--dt-fs-sm); }
.dt-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.dt-card {
  display: flex; flex-direction: column; gap: var(--dt-2);
  padding: var(--dt-6); background: var(--dt-paper);
  border: var(--dt-border); border-radius: var(--dt-r-lg);
  transition: border-color var(--dt-dur) var(--dt-ease), box-shadow var(--dt-dur) var(--dt-ease);
}
.dt-card--link { position: relative; }
.dt-card--link:hover { border-color: var(--dt-accent); box-shadow: var(--dt-shadow-raised); }
.dt-card--link a::after { content: ''; position: absolute; inset: 0; }

.dt-card__title { font-family: var(--dt-font-display); font-size: var(--dt-fs-h4);
                  font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.dt-card__meta  { font-size: var(--dt-fs-xs); color: var(--dt-text-3); margin: 0; }
.dt-card__body  { font-size: var(--dt-fs-sm); color: var(--dt-text-2); margin: 0; }

/* --------------------------------------------------------------------------
   7. Badges
   -------------------------------------------------------------------------- */
.dt-badge {
  display: inline-flex; align-items: center; gap: var(--dt-1);
  padding: 4px 10px; border-radius: var(--dt-r-sm);
  font-size: var(--dt-fs-xs); font-weight: 700; letter-spacing: .02em;
  background: var(--dt-green-wash); color: var(--dt-green-dark);
  border: 1px solid rgba(0,153,51,.22);
}
.dt-badge--neutral { background: var(--dt-bg-alt); color: var(--dt-text-2); border-color: var(--dt-rule); }

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.dt-field {
  width: 100%; min-height: 48px; padding: 12px 16px;
  font-family: var(--dt-font-body); font-size: var(--dt-fs-body); color: var(--dt-text);
  background: var(--dt-paper); border: 1px solid var(--dt-grey-light);
  border-radius: var(--dt-r-md); transition: border-color var(--dt-dur) var(--dt-ease);
}
.dt-field::placeholder { color: var(--dt-text-3); }
.dt-field:focus { border-color: var(--dt-accent); outline: 2px solid rgba(0,153,51,.25); outline-offset: 0; }
.dt-label { display: block; font-size: var(--dt-fs-sm); font-weight: 600; margin-bottom: var(--dt-2); }

/* --------------------------------------------------------------------------
   9. Accordion (FAQ) - native details/summary
   -------------------------------------------------------------------------- */
.dt-faq { border-top: var(--dt-border); }
.dt-faq__item { border-bottom: var(--dt-border); }
.dt-faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dt-4);
  padding: var(--dt-5) 0; cursor: pointer; list-style: none;
  font-family: var(--dt-font-display); font-size: var(--dt-fs-h4); font-weight: 600;
  line-height: var(--dt-lh-snug); color: var(--dt-text);
  transition: color var(--dt-dur) var(--dt-ease);
}
.dt-faq__q::-webkit-details-marker { display: none; }
.dt-faq__q:hover { color: var(--dt-accent); }
.dt-faq__icon {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; position: relative;
  transition: transform 240ms var(--dt-ease);
}
.dt-faq__icon::before, .dt-faq__icon::after {
  content: ''; position: absolute; background: var(--dt-accent); border-radius: 1px;
}
.dt-faq__icon::before { top: 10px; left: 3px; width: 16px; height: 2px; }
.dt-faq__icon::after  { top: 3px; left: 10px; width: 2px; height: 16px;
                        transition: opacity 240ms var(--dt-ease); }
.dt-faq__item[open] .dt-faq__icon { transform: rotate(180deg); }
.dt-faq__item[open] .dt-faq__icon::after { opacity: 0; }
.dt-faq__a { padding: 0 0 var(--dt-5); max-width: var(--dt-w-prose); }
.dt-faq__a p { color: var(--dt-text-2); line-height: var(--dt-lh-loose); }

/* --------------------------------------------------------------------------
   10. Breadcrumb
   -------------------------------------------------------------------------- */
.dt-crumbs { font-size: var(--dt-fs-sm); color: var(--dt-text-3); padding-block: var(--dt-4); }
.dt-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--dt-2); }
.dt-crumbs li { margin: 0; display: flex; align-items: center; gap: var(--dt-2); }
.dt-crumbs li + li::before { content: '/'; color: var(--dt-grey-light); }
.dt-crumbs a { color: var(--dt-text-3); text-decoration: none; }
.dt-crumbs a:hover { color: var(--dt-accent); text-decoration: underline; }

/* --------------------------------------------------------------------------
   11. Horizontal swipe rail
   -------------------------------------------------------------------------- */
.dt-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr);
  gap: var(--dt-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--dt-4); margin-inline: calc(var(--dt-gutter) * -1);
  padding-inline: var(--dt-gutter); scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.dt-rail > * { scroll-snap-align: start; }
.dt-rail::-webkit-scrollbar { height: 6px; }
.dt-rail::-webkit-scrollbar-thumb { background: var(--dt-grey-light); border-radius: var(--dt-r-full); }

/* --------------------------------------------------------------------------
   12. Utilities
   -------------------------------------------------------------------------- */
.dt-lede   { font-size: var(--dt-fs-body-lg); line-height: var(--dt-lh-loose); color: var(--dt-text-2); }
.dt-answer { font-size: var(--dt-fs-body-lg); line-height: var(--dt-lh-loose); color: var(--dt-text); }
.dt-muted  { color: var(--dt-text-3); }
.dt-mark   { color: var(--dt-accent); }
.dt-center { text-align: center; }
.dt-rule-t { border-top: var(--dt-border); padding-top: var(--dt-8); }
.dt-mt-8   { margin-top: var(--dt-8); }
.dt-mt-10  { margin-top: var(--dt-10); }

/* --------------------------------------------------------------------------
   13. Responsive - 4 -> 2 -> 1
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .dt-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dt-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .dt-grid--2, .dt-grid--3, .dt-grid--4 { grid-template-columns: 1fr; }
  .dt-grid { gap: var(--dt-4); }
  .dt-head { margin-bottom: var(--dt-8); }
  .dt-card { padding: var(--dt-5); }
  .dt-btn { width: 100%; }
  .dt-cluster .dt-btn { width: auto; flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .dt *, .dt *::before, .dt *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .dt-sec { padding-block: var(--dt-6); }
  .dt-btn, .dt-rail { display: none; }
}

/* --------------------------------------------------------------------------
   14. Astra button reset

   Astra paints every <button> with a blue background on hover via
   `button:hover` (0,1,1), which outranks our `.dt-btn` (0,1,0). Neutralise it
   inside our UI, then repaint our own states at matching specificity.
   -------------------------------------------------------------------------- */
.dt button:hover, .dt button:focus, .dt button:active,
.dt-hdr button:hover, .dt-hdr button:focus, .dt-hdr button:active {
  background-color: transparent; border-color: transparent;
  color: inherit; box-shadow: none;
}

.dt button.dt-btn { border-color: var(--dt-black); color: var(--dt-black); }
.dt button.dt-btn:hover, .dt button.dt-btn:focus {
  background-color: var(--dt-black); border-color: var(--dt-black); color: var(--dt-paper);
}
.dt button.dt-btn--primary { background-color: var(--dt-black); border-color: var(--dt-black); color: var(--dt-paper); }
.dt button.dt-btn--primary:hover, .dt button.dt-btn--primary:focus {
  background-color: var(--dt-accent); border-color: var(--dt-accent); color: var(--dt-paper);
}
.dt button.dt-btn--accent { background-color: var(--dt-accent); border-color: var(--dt-accent); color: var(--dt-paper); }
.dt button.dt-btn--accent:hover, .dt button.dt-btn--accent:focus {
  background-color: var(--dt-accent-hover); border-color: var(--dt-accent-hover); color: var(--dt-paper);
}

/* --------------------------------------------------------------------------
   15. Catalogue grids (rendered by shortcodes so Elementor can place them)
   -------------------------------------------------------------------------- */
.dt-tgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--dt-3); }
.dt-tgrid__item { display: flex; align-items: center; gap: var(--dt-3); padding: var(--dt-4) var(--dt-5); background: var(--dt-paper); border: var(--dt-border); border-radius: var(--dt-r-lg); text-decoration: none; transition: border-color 160ms var(--dt-ease), box-shadow 160ms var(--dt-ease), transform 200ms var(--dt-ease); }
.dt-tgrid__item:hover { border-color: var(--dt-accent); box-shadow: var(--dt-shadow-raised); transform: translateY(-2px); text-decoration: none; }
.dt-tgrid__ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--dt-r-md); background: var(--dt-bg-alt); color: var(--dt-grey-mid); transition: background 160ms var(--dt-ease), color 160ms var(--dt-ease); }
.dt-tgrid__item:hover .dt-tgrid__ico { background: var(--dt-accent); color: var(--dt-paper); }
.dt-tgrid__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dt-tgrid__n { font-weight: 700; font-size: .9375rem; color: var(--dt-black); line-height: 1.3; }
.dt-tgrid__c { font-size: .8125rem; color: var(--dt-text-3); }
.dt-tgrid__arrow { flex: 0 0 auto; color: var(--dt-grey-light); transition: color 160ms var(--dt-ease), transform 200ms var(--dt-ease); }
.dt-tgrid__item:hover .dt-tgrid__arrow { color: var(--dt-accent); transform: translateX(3px); }

.dt-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--dt-4); }
.dt-pgrid__item { padding: var(--dt-5); background: var(--dt-paper); border: var(--dt-border); border-radius: var(--dt-r-lg); transition: border-color 160ms var(--dt-ease), box-shadow 160ms var(--dt-ease); }
.dt-pgrid__item:hover { border-color: var(--dt-accent); box-shadow: var(--dt-shadow-raised); }
.dt-pgrid__t { font-size: var(--dt-fs-h4); margin: 0 0 4px; }
.dt-pgrid__t a { text-decoration: none; }
.dt-pgrid__p { font-weight: 700; color: var(--dt-black); margin: 0 0 6px; }
.dt-pgrid__d { font-size: .875rem; color: var(--dt-text-2); margin: 0; }

@media (max-width: 1023px) { .dt-tgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .dt-tgrid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   16. Role carousel

   Dark ground matching the hero. Cards alternate green and white, so the
   ground stays black and green stays an accent rather than a page fill.
   -------------------------------------------------------------------------- */
.dt-rc {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--dt-black); color: #fff;
}
.dt-rc__glow {
  position: absolute; top: -200px; left: -140px;
  width: 560px; height: 560px; border-radius: 50%;
  background: rgba(0, 153, 51, .15); filter: blur(120px);
  z-index: 0; pointer-events: none;
}
.dt-rc__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(280px, 380px) 1fr;
  gap: clamp(24px, 3vw, 56px); align-items: center;
}

/* Heading */
.dt-rc__h {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.05; margin: 0 0 16px;
  color: #fff; text-transform: none;
}
.dt-rc__sub {
  font-size: .9375rem; line-height: 1.62; color: rgba(255,255,255,.62);
  margin: 0 0 26px; max-width: 40ch;
}

/* Marker highlight on one word */
.dt-rc .dt-hl { position: relative; display: inline-block; white-space: nowrap; }
.dt-rc .dt-hl > span { position: relative; z-index: 1; }
.dt-rc .dt-hl::before {
  content: ''; position: absolute; z-index: 0;
  left: -.08em; right: -.08em; bottom: .04em; height: .42em;
  background: var(--dt-accent); opacity: .55; border-radius: .2em;
  transform: rotate(-1.1deg);
}

/* Controls */
.dt-rc__nav { display: flex; gap: 10px; margin-bottom: 22px; }
.dt-rc .dt-rc__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 999px;
  cursor: pointer; background: rgba(255,255,255,.12); color: #fff;
  transition: background 180ms var(--dt-ease), color 180ms var(--dt-ease),
              transform 180ms var(--dt-ease), opacity 180ms var(--dt-ease);
}
/* SVGs collapse to zero width inside flex buttons unless pinned. */
.dt-rc .dt-rc__arrow svg { flex: 0 0 auto; width: 20px; height: 20px; display: block; }
.dt-rc .dt-rc__arrow:hover { background: rgba(255,255,255,.22); color: #fff; }
.dt-rc .dt-rc__arrow--next { background: var(--dt-accent); color: #fff; }
.dt-rc .dt-rc__arrow--next:hover { background: #00b33c; transform: translateX(2px); }
.dt-rc .dt-rc__arrow:disabled { opacity: .3; cursor: default; transform: none; }

.dt-rc .dt-rc__all {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9375rem; font-weight: 700; color: #fff; text-decoration: none;
}
.dt-rc .dt-rc__all svg { flex: 0 0 auto; transition: transform 220ms var(--dt-ease); }
.dt-rc .dt-rc__all:hover { color: #2fc65e; }
.dt-rc .dt-rc__all:hover svg { transform: translateX(4px); }

/* Rail */
.dt-rc__railwrap { min-width: 0; position: relative; z-index: 1; }
.dt-rc__rail {
  display: flex; gap: 16px; list-style: none; margin: 0; padding: 6px 0 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.dt-rc__rail::-webkit-scrollbar { display: none; }
.dt-rc__cell { margin: 0; flex: 0 0 auto; width: 264px; scroll-snap-align: start; }

.dt-rc__card {
  display: flex; flex-direction: column; height: 100%;
  border-radius: 22px; overflow: hidden;
  transition: transform 260ms var(--dt-ease), box-shadow 260ms var(--dt-ease);
}
.dt-rc__cell:hover .dt-rc__card { transform: translateY(-6px); box-shadow: 0 26px 48px -22px rgba(0,0,0,.7); }

.dt-rc__media { aspect-ratio: 1/1; overflow: hidden; background: rgba(255,255,255,.08); }
.dt-rc .dt-rc__img { width: 100%; height: 100%; object-fit: cover; display: block;
                     transition: transform 420ms var(--dt-ease); }
.dt-rc__cell:hover .dt-rc__img { transform: scale(1.05); }

.dt-rc__body { padding: 18px 18px 4px; flex: 1 1 auto; }
.dt-rc__t { font-size: 1.0625rem; line-height: 1.28; margin: 0 0 7px; letter-spacing: -.01em; }
.dt-rc__desc { font-size: .8125rem; line-height: 1.5; margin: 0 0 12px; opacity: .78; }
.dt-rc__price { font-size: .8125rem; font-weight: 600; margin: 0; opacity: .9; }
.dt-rc__price strong { font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; }

/* No underlines anywhere in this section. Beats Astra's .entry-content a. */
.dt-rc .dt-rc__t a,
.dt-rc .dt-rc__t a:hover,
.dt-rc a.dt-rc__cta,
.dt-rc a.dt-rc__cta:hover,
.dt-rc a.dt-rc__all,
.dt-rc a.dt-rc__all:hover { text-decoration: none; }

.dt-rc .dt-rc__t a { color: inherit; }

.dt-rc .dt-rc__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 16px 18px 18px; min-height: 46px; padding: 11px 20px;
  border-radius: 999px; font-size: .875rem; font-weight: 700;
  transition: gap 200ms var(--dt-ease), background 180ms var(--dt-ease), color 180ms var(--dt-ease);
}
.dt-rc .dt-rc__cta svg { flex: 0 0 auto; width: 16px; height: 16px; }
.dt-rc .dt-rc__cta:hover { gap: 11px; }

/* Green card */
.dt-rc__card--green { background: var(--dt-accent); color: #fff; }
.dt-rc__card--green .dt-rc__media { background: rgba(0,0,0,.1); }
.dt-rc .dt-rc__card--green .dt-rc__cta { background: var(--dt-black); color: #fff; }
.dt-rc .dt-rc__card--green .dt-rc__cta:hover { background: #fff; color: var(--dt-black); }

/* White card */
.dt-rc__card--light { background: var(--dt-paper); color: var(--dt-black); }
.dt-rc__card--light .dt-rc__desc { opacity: .68; }
.dt-rc .dt-rc__card--light .dt-rc__cta { background: var(--dt-black); color: #fff; }
.dt-rc .dt-rc__card--light .dt-rc__cta:hover { background: var(--dt-accent); color: #fff; }

@media (max-width: 1023px) {
  .dt-rc__grid { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .dt-rc__sub { max-width: none; }
}
@media (max-width: 640px) {
  .dt-rc { padding-block: 36px; }
  .dt-rc__grid { gap: 16px; }
  .dt-rc__h { font-size: 1.55rem; line-height: 1.1; margin-bottom: 10px; }
  .dt-rc__sub { font-size: .8125rem; line-height: 1.5; margin-bottom: 16px; }
  .dt-rc__nav { gap: 8px; margin-bottom: 14px; }
  .dt-rc .dt-rc__arrow { width: 44px; height: 44px; }
  .dt-rc .dt-rc__arrow svg { width: 18px; height: 18px; }
  .dt-rc .dt-rc__all { font-size: .8125rem; }
  .dt-rc__rail { gap: 12px; padding: 4px 0 8px; }
  .dt-rc__cell { width: 196px; }
  .dt-rc__media { aspect-ratio: 4/3; }
  .dt-rc__body { padding: 13px 14px 2px; }
  .dt-rc__t { font-size: .9375rem; margin-bottom: 5px; }
  .dt-rc__desc { font-size: .75rem; line-height: 1.45; margin-bottom: 8px; }
  .dt-rc__price strong { font-size: 1rem; }
  .dt-rc .dt-rc__cta { margin: 10px 14px 14px; min-height: 42px; padding: 9px 16px; font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-rc__card, .dt-rc__img, .dt-rc__cta, .dt-rc__arrow, .dt-rc__all svg { transition: none !important; }
}

/* Section heading colours, above the base heading rules. */
.dt-rc .dt-rc__h { color: #fff; }
.dt-rc .dt-rc__t { color: inherit; }

/* --------------------------------------------------------------------------
   17. Mobile swipe rails

   A grid becomes a horizontal snap rail below 760px. Each section keeps its own
   desktop layout untouched; only the mobile presentation changes, which is why
   these overrides are !important - they have to beat each section's own mobile
   rules, which live in that section's widget.
   -------------------------------------------------------------------------- */
.dt-swipenav { display: none; }

@media (max-width: 760px) {
  .dt-swipe {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px !important;
    padding: 2px 0;
  }
  .dt-swipe::-webkit-scrollbar { display: none; }

  .dt-swipe > * {
    flex: 0 0 var(--dt-swipe-w, 78%) !important;
    width: auto !important;
    min-width: 0;
    scroll-snap-align: start;
    margin: 0 !important;
  }

  .dt-swipe--2    { --dt-swipe-w: 47%; }
  .dt-swipe--peek { --dt-swipe-w: 84%; }
  .dt-swipe--wide { --dt-swipe-w: 68%; }

  .dt-swipenav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 0;
  }
  .dt-swipenav[hidden] { display: none; }

  .dt-swipenav svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    display: block;
    color: var(--dt-grey-light);
  }

  .dt-swipebar {
    position: relative;
    width: 96px;
    height: 4px;
    border-radius: 999px;
    background: var(--dt-rule);
    overflow: hidden;
  }
  .dt-swipebar i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    border-radius: 999px;
    background: var(--dt-accent);
  }

  .dt-swipenav--dark svg { color: rgba(255, 255, 255, .3); }
  .dt-swipenav--dark .dt-swipebar { background: rgba(255, 255, 255, .16); }
  .dt-swipenav--dark .dt-swipebar i { background: #00e050; }
}
/* --------------------------------------------------------------------------
   Leading gap

   The header is sticky, so the first section on a page sits straight under
   it. A full section's top padding there reads as dead space on laptops, so
   the first section is trimmed. Every section after it keeps the rhythm.
   -------------------------------------------------------------------------- */
:root { --dt-section-lead: clamp(22px, 2.4vw, 38px); }

.site-content .elementor > .elementor-element:first-child .dt-sec,
.site-content .elementor > .elementor-element:first-child .dt-hero2__grid,
.site-content .elementor > .elementor-element:first-child .dt-ah {
  padding-top: var(--dt-section-lead);
}

/* A grid track is minmax(auto, 1fr) by default, so one wide child inside a
   column pushes the whole track past the wrapper and the page scrolls
   sideways. Cap the min-content contribution on the grid wrappers. */
.dt-wrap.dt-ins > *, .dt-wrap > .dt-ins__left, .dt-wrap > .dt-ins__panel { min-width: 0; }

/* The panel section leans sideways by a hair on narrow screens. Clip rather
   than hide: clip does not make a scroll container, so sticky still works. */
@media (max-width: 760px) { .dt-ins-sec { overflow-x: clip; } }