/*
 * Homepage sections: the display hero (with the site header over it), the
 * intro statement, the tab block (expanding cards, photo cards, audience
 * picker, coverage map), and the closing band.
 *
 * Built to the approved October design ("white, designer structure + client
 * feedback", lanes/wordpress/clients/blinktexas/reference/homepage-build/):
 * values are copied from it, not eyeballed. Loaded on the front page and in
 * the block editor only (functions.php), after base.css.
 *
 * Colour roles, as the design sets them:
 *   blue   verified / interactive (key phrases on white, links, selection)
 *   yellow emphasis, and only as text on a dark background
 *   red    action (buttons, the closing band, the tab underline, small labels)
 *   brand blue carries every animation; the light blue is the cursor ring core.
 *
 * Motion: js/fx.js draws the three canvases (hero dot field, the pointer's
 * light over the tab block, the closing band's contour lines); js/tabs.js
 * switches tabs, cards, seats and metros. Everything else is CSS, and all of it
 * stops under prefers-reduced-motion (bottom of this file).
 */

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --df-home-red: #D9191F;
  --df-home-blue: #1490CC;
  --df-home-brand: #3FBBEC;
  --df-home-core: #9FE0F8;
  --df-home-yellow: #F3C639;
  --df-home-max: 1404px;
  --df-home-gutter: clamp(20px, 4vw, 48px);
}

/* The page's surface colours. While the tab block holds the middle of the
   window the whole page is dark, otherwise white. js/fx.js flips .is-dark on
   .df-main at that point, and the colours fade over a short, fixed time: a
   flip on scroll position alone would scrub through a mid grey where neither
   the text nor the page reads, and the whole page changes together, so no
   edge ever runs between a white band and a dark one. Registered, so they can
   be transitioned (unregistered custom properties snap). */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #0B0F13; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #F2F4F6; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #9AA5AE; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #232C34; }
@property --card { syntax: "<color>"; inherits: true; initial-value: #12181D; }
@property --key { syntax: "<color>"; inherits: true; initial-value: #F3C639; }
@property --panel { syntax: "<color>"; inherits: true; initial-value: #0F1519; }

.home .df-main,
.editor-styles-wrapper,
.home .df-main.has-theme .df-tabs--dark {
  --bg: #FFFFFF; --fg: #1C1B1A; --muted: #5B6670; --line: #E2E6EA; --card: #FFFFFF; --panel: #F3F9FC; --key: #1490CC;
}
.home .df-main,
.editor-styles-wrapper {
  background: var(--bg);
  color: var(--fg);
}
/* Without the script (or in the editor) the tab block is simply dark. */
.df-tabs--dark,
.home .df-main.has-theme.is-dark,
.home .df-main.has-theme.is-dark .df-tabs--dark {
  --bg: #0B0F13; --fg: #F2F4F6; --muted: #9AA5AE; --line: #232C34; --card: #12181D; --panel: #0F1519; --key: #F3C639;
}
.home .df-main.has-theme,
.home .df-main.has-theme .df-tabs--dark {
  transition: --bg 0.45s ease, --fg 0.45s ease, --muted 0.45s ease, --line 0.45s ease, --card 0.45s ease, --panel 0.45s ease, --key 0.45s ease;
}
/* The intro ("Meet Blink") is deliberately NOT on a scroll timeline. Its
   animation-range completed only once the band was 22% of the way up a
   viewport, so on a phone, where the display hero is taller than the screen
   and the band arrives already filling it, the visitor scrolled into a blank
   white stretch: opacity was still near 0 when the copy was on screen. The
   band now takes the theme's ordinary in-view reveal (js/motion.js adds
   .df-reveal and .is-in on entry), so it is legible the moment it enters, and
   it can never be left hidden by a scroll position. */
@supports (animation-timeline: view()) {
  .home .df-tabs__title,
  .home .df-closing__grid {
    animation: df-home-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
}
@keyframes df-home-rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }

/* ---- Page frame ------------------------------------------------------------ */
.home {
  font-family: Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16.8px;
  line-height: 1.5;
}
.home :is(.df-main, .df-site-header, .df-site-footer) .df-container {
  max-width: var(--df-home-max);
  padding-inline: var(--df-home-gutter);
  box-sizing: content-box;
}
.home :is(a, button):focus-visible { outline: 2px solid var(--df-home-blue); outline-offset: 3px; }
.home .df-mark,
.home .df-mark-alt { color: var(--key); }
.df-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

/* Split button: the label cell, a 1.5px divider, then the arrow cell. */
.home .df-btn--arrow {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  height: 54px;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.home .df-btn--arrow .df-btn__label { display: flex; align-items: center; padding: 0 24px; }
.home .df-btn--arrow .df-btn__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  border-inline-start: 1.5px solid rgba(255,255,255,0.4);
}
.home .df-btn--arrow .df-btn__arrow { transition: transform 0.2s ease; }
.home .df-btn--arrow:hover .df-btn__arrow { transform: translateX(3px); }
.home .df-btn--primary,
.home .df-btn--primary:hover,
.home .df-btn--primary:focus-visible { background: var(--df-home-red); color: #FFFFFF; }
.home .df-btn--ghost,
.home .df-btn--ghost:hover,
.home .df-btn--ghost:focus-visible { background: transparent; color: #FFFFFF; border: 1.5px solid #FFFFFF; }
.home .df-btn--ghost .df-btn__cell { border-inline-start-color: rgba(255,255,255,0.6); }
.home .df-btn--on-brand,
.home .df-btn--on-brand:hover,
.home .df-btn--on-brand:focus-visible { background: #FFFFFF; color: var(--df-home-red); font-weight: 600; }
.home .df-btn--on-brand .df-btn__cell { border-inline-start-color: rgba(217,25,31,0.3); }
/* Inside the tab block the buttons ("Explore all of the services we offer",
   "See how we work with you") are outlines in the text colour, white or dark
   with the page theme: red fill is kept for getting a quote. */
.home .df-tabs .df-btn--primary,
.home .df-tabs .df-btn--primary:is(:hover, :focus-visible) {
  border: 1.5px solid currentColor;
  background: transparent;
  color: var(--fg);
}
.home .df-tabs .df-btn--primary .df-btn__cell { border-inline-start-color: currentColor; }

/* ---- Site header over the hero ------------------------------------------- */
/* header.php adds --over on the front page: the header lies on the hero photo
   with the white logo and white links. Once the hero has scrolled away
   (js/fx.js), it returns as a white bar with the colour logo. */
.df-site-header--over {
  position: absolute;
  inset: 0 0 auto;
  border: 0;
  background: transparent;
  color: #FFFFFF;
}
.df-site-header--over .df-site-header__inner { min-height: 104px; padding-block: 0; gap: 24px; }
.df-site-header--over .df-brand__logo--light { display: none; }
.df-site-header--over.is-solid .df-brand__logo--dark,
.df-site-header--over.is-nav-open .df-brand__logo--dark { display: none; }
.df-site-header--over.is-solid .df-brand__logo--light,
.df-site-header--over.is-nav-open .df-brand__logo--light { display: block; }
.df-site-header--over:not(.is-solid):not(.is-nav-open) :is(.df-site-nav__list, .df-site-actions__list) > li > a,
.df-site-header--over:not(.is-solid):not(.is-nav-open) :is(.df-nav-toggle, .df-search__toggle) { color: #FFFFFF; }
.df-site-header--over :is(.df-site-nav__list, .df-site-actions__list) > li > a { font-size: 15px; font-weight: 500; }
@media (min-width: 75rem) {
  .df-site-header--over .df-site-header__panel { margin-inline-start: auto; gap: 26px; }
  .df-site-header--over .df-site-nav__list { gap: 26px; }
  .df-site-header--over .df-site-nav__list > li > a { padding: 10px 0; background: none; }
  .df-site-header--over:not(.is-solid) .df-site-nav__list > li > a:is(:hover, :focus) { color: var(--df-home-core); }
}
.df-site-header--over .df-search__toggle {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
}
.df-site-header--over.is-solid .df-search__toggle { background: #F1F4F6; }
/* The quote action as the design's split button: the arrow cell is drawn by
   ::after, so the menu item stays plain text. */
.df-site-header--over .df-site-actions__list .df-nav-cta > a {
  display: flex;
  align-items: stretch;
  height: 48px;
  padding: 0 0 0 20px;
  box-sizing: border-box;
  border-radius: 12px;
  overflow: hidden;
  background: var(--df-home-red);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 48px;
}
.df-site-header--over .df-site-actions__list .df-nav-cta > a::after {
  content: "";
  flex: none;
  width: 48px;
  margin-inline-start: 20px;
  border-inline-start: 1.5px solid rgba(255,255,255,0.4);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M1 6h13M9.5 1.5 14 6l-4.5 4.5'/%3E%3C/svg%3E") center / 16px 12px no-repeat;
  transition: background-position 0.2s ease;
}
.df-site-header--over .df-site-actions__list .df-nav-cta > a:hover::after { background-position: calc(50% + 3px) center; }
.df-site-header--over .df-site-actions__list .df-nav-cta > a:is(:hover, :focus) { opacity: 1; color: #FFFFFF; }
/* Over the photo the quote action is a white outline (v2: one filled red
   button per view, and the hero's Get Free Quote is that button). The white
   bar and the open menu keep it red. */
.df-site-header--over:not(.is-solid):not(.is-nav-open) .df-site-actions__list .df-nav-cta > a {
  border: 1.5px solid rgba(255,255,255,0.6);
  background: transparent;
  line-height: 45px;
}
/* The hamburger as the design's square icon button; its word stays the
   accessible name. */
.df-site-header--over .df-nav-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
}
.df-site-header--over:is(.is-solid, .is-nav-open) .df-nav-toggle { border-color: var(--df-color-line); background: #FFFFFF; }
.df-site-header--over .df-nav-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 74.999rem) {
  .df-site-header--over .df-site-header__inner { min-height: 0; padding-block: 30px; }
  .df-site-header--over .df-nav-toggle { margin-inline-start: 0; order: 2; }
  .df-site-header--over .df-search { order: 1; margin-inline-start: auto; }
  .df-site-header--over .df-site-header__panel { order: 3; }
  .df-site-header--over.is-nav-open { background: #FFFFFF; color: var(--df-color-text-default); }
  .df-site-header--over.is-nav-open .df-site-header__inner { padding-block: 16px; }
  .df-site-header--over .df-site-actions__list .df-nav-cta > a { justify-content: space-between; }
}
/* The phone menu's own Contact row (functions.php adds it to the primary list
   on the front page): a plain top-level item like the others, no chevron. The
   desktop nav already carries Contact under Resources. */
.df-menu-mobile-only { display: none; }
@media (max-width: 74.999rem) {
  .df-site-header--over .df-menu-mobile-only { display: list-item; }
}
/* While the menu is open the hamburger becomes a close mark: same box, same
   two-pixel strokes, the middle bar fades and the outer two cross. */
.df-site-header--over .df-nav-toggle__bars::before,
.df-site-header--over .df-nav-toggle__bars::after { transition: transform 0.2s ease, top 0.2s ease; }
.df-site-header--over .df-nav-toggle[aria-expanded="true"] .df-nav-toggle__bars { background: transparent; }
.df-site-header--over .df-nav-toggle[aria-expanded="true"] .df-nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.df-site-header--over .df-nav-toggle[aria-expanded="true"] .df-nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .df-site-header--over .df-nav-toggle__bars::before,
  .df-site-header--over .df-nav-toggle__bars::after { transition: none; }
}
/* Leaving the top of the page does not condense this header (motion.js's
   .is-scrolled): over the photo it stays clear, as designed. */
.df-site-header--over.is-scrolled:not(.is-solid):not(.is-nav-open) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.df-site-header--over.is-scrolled .df-site-header__inner { padding-block: 0; }
@media (max-width: 74.999rem) {
  .df-site-header--over.is-scrolled:not(.is-solid) .df-site-header__inner { padding-block: 30px; }
  .df-site-header--over.is-scrolled.is-nav-open .df-site-header__inner { padding-block: 16px; }
}
/* The white bar the header returns as, once the hero is gone. It slides in
   rather than appearing mid-scroll. */
.df-site-header--over.is-solid {
  position: fixed;
  background: #FFFFFF;
  color: var(--df-color-text-default);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.35);
  animation: df-header-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.df-site-header--over.is-solid .df-site-header__inner { min-height: 76px; padding-block: 0; }
@keyframes df-header-in { from { transform: translateY(-100%); } to { transform: none; } }

/* ---- 1. Hero ------------------------------------------------------------- */
.df-hero--display {
  position: relative;
  min-height: 820px;
  padding: 0;
  overflow: hidden;
  background: #0D131A var(--df-hero-image, none) 32% center / cover no-repeat;
  color: #FFFFFF;
}
/* The photo's treatment is the designer proposal's: the tower framed on the
   right, a dark sweep from the left, and the lower part of the hero fading
   into the white page below (the fade sits over the dot field too, so the
   dots melt away with the photo). */
.df-hero__mask,
.df-hero__lines,
.df-hero__fade { position: absolute; inset: 0; pointer-events: none; }
.df-hero__mask { background: linear-gradient(105deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.42) 48%, rgba(0,0,0,0.22) 100%); }
.df-hero__lines {
  opacity: 0.3;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 4px);
}
.df-hero__fade { inset-block-start: auto; height: 42%; background: linear-gradient(180deg, transparent 0%, var(--bg, #FFFFFF) 100%); }
.df-hero--display > .df-container {
  position: relative;
  z-index: 2;
  padding-block: calc(104px + clamp(56px, 10vw, 150px)) 160px;
}
.df-hero--display .df-hero__content { max-width: 660px; color: #FFFFFF; }
.df-hero--display .df-hero__tagline {
  margin: 0;
  font-size: clamp(38px, 5vw, 70px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  opacity: 1;
  max-width: none;
}
.df-hero--display .df-mark { color: var(--df-home-yellow); }
.df-word { display: inline-block; }
.df-hero--display .df-hero__rule {
  width: 100%;
  max-width: 640px;
  height: 2px;
  margin: 28px 0;
  border: 0;
  border-radius: 1px;
  background: var(--df-home-red);
}
.df-hero--display .df-hero__summary {
  margin: 0 0 28px;
  max-width: 594px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  color: rgba(255,255,255,0.9);
  opacity: 1;
}
.df-hero--display .df-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; max-width: none; opacity: 1; }
/* Explore is an underlined text link beside the one filled button: no border,
   no divider, no arrow (an underline already says "link"). */
.df-hero--display .df-btn--ghost,
.df-hero--display .df-btn--ghost:is(:hover, :focus-visible) { border: 0; }
.df-hero--display .df-btn--ghost .df-btn__cell { display: none; }
.df-hero--display .df-btn--ghost .df-btn__label {
  padding: 0 8px;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.5);
  text-underline-offset: 6px;
}

/* The inspection checks on the right of the photo: pending (a hollow circle)
   until the scan line passes, then filled blue with a white tick, then reset.
   Their 7s loop is the scan line's (js/fx.js), offset per check. */
.df-hero__checks {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  right: 7%;
  width: 260px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.df-hero__check {
  --df-check-delay: calc(1.3s + var(--df-check, 0) * 0.55s);
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(13,19,26,0.55);
  color: rgba(255,255,255,0.75);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  animation: df-check-on 7s linear infinite var(--df-check-delay);
}
.df-hero__check:nth-child(1) { top: 29%; right: 40px; }
.df-hero__check:nth-child(2) { top: 41%; right: 0; }
.df-hero__check:nth-child(3) { top: 53%; right: 70px; }
.df-hero__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.45);
  color: #FFFFFF;
  animation: df-dot-on 7s linear infinite var(--df-check-delay);
}
.df-hero__dot svg { opacity: 0; animation: df-tick-on 7s linear infinite var(--df-check-delay); }
@keyframes df-check-on {
  0% { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.75); background: rgba(13,19,26,0.55); }
  3%, 78% { border-color: #3FBBEC; color: #FFFFFF; background: rgba(20,144,204,0.28); }
  86%, 100% { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.75); background: rgba(13,19,26,0.55); }
}
@keyframes df-dot-on {
  0% { background: transparent; border-color: rgba(255,255,255,0.45); transform: scale(1); }
  3% { background: #3FBBEC; border-color: #3FBBEC; transform: scale(1.25); }
  6%, 78% { background: #3FBBEC; border-color: #3FBBEC; transform: scale(1); }
  86%, 100% { background: transparent; border-color: rgba(255,255,255,0.45); transform: scale(1); }
}
@keyframes df-tick-on { 0% { opacity: 0; } 3%, 78% { opacity: 1; } 86%, 100% { opacity: 0; } }

/* Entrance: the slogan's words rise one by one, the rule draws, the copy and
   buttons fade up. This replaces the generic hero entrance of base.css. */
.df-motion .df-hero--display .df-hero__content > * { animation: none; }
.df-hero--display .df-word { animation: df-word-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.df-hero--display .df-word:nth-child(1) { animation-delay: 0.05s; }
.df-hero--display .df-word:nth-child(2) { animation-delay: 0.16s; }
.df-hero--display .df-word:nth-child(3) { animation-delay: 0.28s; }
.df-hero--display .df-word:nth-child(5) { animation-delay: 0.44s; }
.df-hero--display .df-word:nth-child(6) { animation-delay: 0.56s; }
.df-hero--display .df-word:nth-child(7) { animation-delay: 0.68s; }
.df-hero--display .df-word:nth-child(n+8) { animation-delay: 0.8s; }
.df-motion .df-hero--display .df-hero__rule { transform-origin: left; animation: df-rule-in 1s 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.df-motion .df-hero--display :is(.df-hero__summary, .df-hero__actions) { animation: df-fade-in 0.9s 1s ease both; }
@keyframes df-word-up { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }
@keyframes df-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes df-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  /* The checks drop to a row along the hero's foot; the fade moves below
     them, so they stay on the photo instead of on the white. */
  .df-hero--display > .df-container { padding-block-end: 300px; }
  .df-hero__fade { height: 150px; }
  .df-hero__checks {
    inset: auto auto 170px var(--df-home-gutter);
    width: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .df-hero__check:nth-child(n) { position: relative; inset: auto; }
}
/* Phones: one primary action. Get Free Quote runs full width with its label
   centred, Explore sits under it as the text link, and the checks are plain
   ticked items rather than animated pills. The photo and its overlay are the
   same as on desktop. */
@media (max-width: 640px) {
  .df-hero--display .df-hero__actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .df-hero--display .df-btn--primary { height: 56px; }
  .df-hero--display .df-btn--primary .df-btn__label { flex: 1 1 auto; justify-content: center; }
  .df-hero--display .df-btn--ghost { height: 48px; justify-content: center; }
  .df-hero--display .df-btn--ghost .df-btn__label { padding: 0; }
  .df-hero__checks { column-gap: 18px; row-gap: 10px; }
  .df-hero__check,
  .df-hero__dot,
  .df-hero__dot svg { animation: none; }
  .df-hero__check {
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,0.92);
    font-size: 13.5px;
  }
  .df-hero__dot { width: 16px; height: 16px; border: 0; background: #3FBBEC; }
  .df-hero__dot svg { width: 9px; height: 9px; opacity: 1; }
}

/* ---- 2. Intro ("Meet Blink") ---------------------------------------------- */
.df-intro { background: var(--bg); color: var(--fg); padding: 0; text-align: center; }
/* The page-frame gutter (clamp 20-48px) must not win here: the desktop
   reference pads this band 24px inline and the mobile one 20px, so the rule
   carries .home for equal specificity and a breakpoint for the two values. */
.home .df-intro .df-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(72px, 10vw, 128px) 24px clamp(72px, 9vw, 120px);
}
/* Phones: 48px above and below (PM QA, Oct 13). At 72px the band's padding
   plus the photo fade under the hero and the next section's own top made
   130-145px of empty space at each seam. */
@media (max-width: 40rem) {
  .home .df-intro .df-container { padding: 48px 20px; }
  .df-intro__title { margin-block-end: 28px; }
  .df-intro__body .df-intro__close { margin-block-start: 28px; }
}
.df-intro__title {
  display: flex;
  flex-direction: column;
  margin: 0 0 clamp(40px, 6vw, 72px);
  font-family: inherit;
  font-size: clamp(32px, 3.9vw, 56px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.045em;
  color: var(--fg);
}
.df-intro__kicker { color: var(--df-home-red); }
.df-intro__lead { color: var(--fg); }
.df-intro__sub { color: var(--df-home-blue); }
.df-intro__sub .df-mark { color: inherit; }
.df-intro__dot { color: var(--df-home-red); }
.df-intro__body {
  width: 100%;
  max-width: 820px;
  box-sizing: border-box;
  padding: 20px clamp(20px, 5vw, 56px);
  border-inline: 1px solid var(--line);
}
.df-intro__body p {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}
/* Only the lead paragraph is capped and tracked; the reference leaves the
   closing sentence full width and untracked. */
.df-intro__body > p:first-child {
  margin-inline: auto;
  max-width: 700px;
  letter-spacing: -0.005em;
}
.df-intro__body .df-intro__close { margin-block-start: 36px; font-weight: 500; color: var(--fg); }
/* The blue live line drops to its own line under the sentence (the reference
   breaks it with a <br>) and hugs its own text, centred like the sentence. */
.df-intro__close em {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  align-items: center;
  gap: 8px;
  font-style: normal;
  color: var(--df-home-blue);
}
.df-intro__live {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: var(--df-home-blue);
  animation: df-live 1.6s ease-in-out infinite;
}
@keyframes df-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(20,144,204,0.5); }
  50% { opacity: 0.4; box-shadow: 0 0 0 6px rgba(20,144,204,0); }
}

/* ---- 3. Tab block ("One partner every project team can trust") ---------- */
.df-tabs {
  position: relative;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  scroll-margin-top: var(--df-header-h, 0px);
}
.df-tabs > .df-container:first-of-type { position: relative; z-index: 1; padding-block-start: 24px; }
.df-tabs__title {
  margin: 0 0 40px;
  text-align: center;
  font-family: inherit;
  font-size: clamp(32px, 3.4vw, 50px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--fg);
}
/* The bar sticks to the top of the window (under the white header once the
   header has come back, --df-header-h from js/fx.js). */
.df-tabs__bar {
  position: sticky;
  top: var(--df-header-h, 0px);
  z-index: 6;
  background: var(--bg);
}
.df-tabs__list {
  display: flex;
  gap: 10px;
  padding-block-start: 24px;
  box-sizing: border-box;
}
.df-tabs__tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px 14px;
  border-block-end: 2px solid var(--line);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.df-tabs__tab:hover { color: var(--fg); }
.df-tabs__tab[aria-selected="true"] {
  font-weight: 700;
  color: var(--fg);
  border-block-end: 3px solid var(--df-home-red);
}
.df-tabs__panels {
  position: relative;
  z-index: 1;
  padding-block: clamp(36px, 5vw, 56px) clamp(72px, 9vw, 112px);
}
.df-tabs__panel { display: flex; flex-direction: column; gap: 40px; }
.df-tabs__panel + .df-tabs__panel { margin-block-start: clamp(72px, 9vw, 112px); }
.df-tabs.is-enhanced .df-tabs__panel + .df-tabs__panel { margin-block-start: 0; }
.df-tabs__panel[hidden] { display: none; }
.df-tabs__panel.is-in { animation: df-panel-in 0.38s ease both; }
@keyframes df-panel-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
#audiences.df-tabs__panel { gap: 32px; }
.df-tabs__panel > .df-actions,
.df-tabs__panel > .df-tabs__foot { display: flex; justify-content: center; margin: 0; }

/* Split heading: the headline left, its lead pushed to the right. */
.df-tabs__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 24px 48px;
  align-items: start;
}
.df-tabs__heading {
  margin: 0;
  font-family: inherit;
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.df-tabs__head .df-lead,
.df-coverage__copy .df-lead {
  margin: 0;
  justify-self: end;
  max-width: 34ch;
  font-size: 17px;
  font-weight: 500;
  color: var(--muted);
}
@media (max-width: 760px) {
  .df-tabs__list { overflow-x: auto; scrollbar-width: none; gap: 0; }
  .df-tabs__list::-webkit-scrollbar { display: none; }
  .df-tabs__tab { flex: 0 0 auto; padding: 10px 16px 14px; font-size: 13px; }
}

/* 3a. Expanding cards (Services). One card is open and wide; the others show
   a title, a teaser and "See the comparison". Opening a card sweeps a blue
   line from "Today" to "With Blink", and the With Blink column brightens. */
.df-fold {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
  counter-reset: df-fold;
}
.df-fold__card {
  counter-increment: df-fold;
  flex: 1 1 220px;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #131A20;
  color: #FFFFFF;
  transition: flex-grow 0.35s ease;
}
.df-fold__card.is-open { flex: 2.4 1 480px; }
/* A closed card opens on a click anywhere on it (js/tabs.js). */
.df-fold.is-enhanced .df-fold__card:not(.is-open) { cursor: pointer; }
.df-fold__media { display: none; height: 220px; flex: none; background: #1C2A35; }
.df-fold__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.df-fold__card.is-open .df-fold__media { display: block; }
.df-fold__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
}
.df-fold__meta { display: flex; justify-content: space-between; align-items: center; }
.df-fold__num { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--df-home-yellow); }
.df-fold__num::before { content: counter(df-fold, decimal-leading-zero); }
.df-fold__toggle {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}
.df-fold__icon::before,
.df-fold__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 12px;
  height: 1.6px;
  margin: -0.8px 0 0 -6px;
  background: currentColor;
}
.df-fold__icon::after { transform: rotate(90deg); }
.df-fold__card.is-open .df-fold__icon::after { display: none; }
.df-fold__title {
  margin: 0;
  font-family: inherit;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.df-fold__teaser { margin: 0; font-size: 15px; color: rgba(255,255,255,0.72); max-width: 28ch; }
.df-fold__card.is-open .df-fold__teaser,
.df-fold__detail { display: none; }
.df-fold__card.is-open .df-fold__detail { display: block; }
.df-fold__cols {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 24px;
}
.df-fold__card.is-open .df-fold__cols::after {
  content: "";
  position: absolute;
  inset-block: -6px;
  left: 0;
  width: 2px;
  background: #3FBBEC;
  box-shadow: 0 0 18px 4px rgba(63,187,236,0.6);
  pointer-events: none;
  animation: df-sweep 1.1s cubic-bezier(0.5, 0, 0.3, 1) 0.25s both;
}
@keyframes df-sweep { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.df-fold__col { display: flex; flex-direction: column; gap: 12px; }
.df-fold__col h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-block-end: 8px;
  border-block-end: 1px solid rgba(255,107,111,0.5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #FF7A7E;
}
.df-fold__mark { width: 7px; height: 7px; border-radius: 4px; background: #FF7A7E; }
.df-fold__col p { margin: 0; font-size: 15px; color: rgba(255,255,255,0.72); }
.df-fold__col--accent h4 { border-block-end-color: #3FBBEC; color: #3FBBEC; }
.df-fold__col--accent p { color: #FFFFFF; }
.df-fold__card.is-open .df-fold__col--accent { animation: df-brighten 0.9s 0.8s ease both; }
@keyframes df-brighten { from { opacity: 0.35; } to { opacity: 1; } }
.df-fold__foot { margin-block-start: auto; font-size: 15px; font-weight: 600; }
.df-fold__link { color: #FFFFFF; text-underline-offset: 5px; }
.df-fold__link:hover { color: #FFFFFF; }
.df-fold__hint {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #FFFFFF;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}
.df-fold__card:not(.is-open) .df-fold__link,
.df-fold__card.is-open .df-fold__hint { display: none; }
@media (max-width: 760px) {
  .df-fold__card { min-height: 0; }
}

/* 3b. Photo cards (Why Blink). On hover a blue-to-yellow light runs around the
   border and the card lifts. */
@property --df-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.df-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
  gap: 24px;
  counter-reset: df-feature;
}
.df-feature {
  counter-increment: df-feature;
  position: relative;
  display: grid;
  grid-template-columns: minmax(140px, 38%) 1fr;
  min-height: 248px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--fg);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.df-feature:hover {
  color: var(--fg);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(13,19,26,0.10);
  border-color: #3FBBEC;
}
.df-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--df-ang), transparent 0 62%, #3FBBEC 78%, #F3C639 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.df-feature:is(:hover, :focus-visible)::before { opacity: 1; animation: df-spin 2.8s linear infinite; }
@keyframes df-spin { to { --df-ang: 360deg; } }
.df-feature__media { position: relative; background: #1C2A35; }
.df-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.df-feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 28px;
}
.df-feature__num { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--df-home-red); }
.df-feature__num::before { content: counter(df-feature, decimal-leading-zero); }
.df-feature__title {
  margin: 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.df-feature__body p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.df-feature__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--df-home-blue);
}
.df-feature__more .df-btn__arrow { width: 13px; height: 10px; stroke-width: 1.8; transition: transform 0.2s ease; }
.df-feature:hover .df-feature__more .df-btn__arrow { transform: translateX(3px); }
@media (max-width: 760px) {
  .df-feature { grid-template-columns: 1fr; }
  .df-feature__media { min-height: 150px; }
}

/* 3c. Audience picker (Who We Serve): the seat row over the open seat, beside
   a plan of the table with every seat around it. Both pick the same seat. */
.df-seats {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--card);
}
.df-seats__track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  border-block-end: 1px solid var(--line);
}
.df-seats__stop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px;
  color: var(--fg);
  text-align: left;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.df-seats__stop:hover { color: var(--fg); }
.df-seats__stage { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.df-seats__name { font-size: 19px; font-weight: 700; line-height: 1.2; }
.df-seats__stop[aria-selected="true"] { background: var(--df-home-blue); color: #FFFFFF; }
.df-seats__stop[aria-selected="true"] .df-seats__stage { color: #E6F6FD; }
.df-seats__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  min-height: 420px;
}
.df-seat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: clamp(28px, 4.8vw, 68px);
}
.df-seat[hidden] { display: none; }
.df-seat.is-in { animation: df-panel-in 0.38s ease both; }
.df-seat__title {
  margin: 0;
  font-family: inherit;
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.df-seat__list { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--line); }
.df-seat__list li {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 14px 0;
  border-block-end: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.5;
}
.df-seat p { margin: 0; }
.df-seat .df-btn--arrow { height: 52px; }
.df-seat .df-btn--arrow .df-btn__label { padding: 0 22px; }
.df-seat .df-btn--arrow .df-btn__cell { width: 50px; }
.df-seats__plan {
  min-height: 360px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border-inline-start: 1px solid var(--line);
  background: var(--panel);
}
.df-seats__map {
  display: grid;
  grid-template-columns: auto minmax(160px, 240px) auto;
  grid-template-rows: auto auto auto;
  gap: 14px;
  align-items: center;
  justify-items: center;
}
.df-seats__chair {
  display: flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.df-seats__chair:hover { color: var(--fg); border-color: var(--df-home-blue); }
.df-seats__chair--n { grid-area: 1 / 2; }
.df-seats__chair--w { grid-area: 2 / 1; }
.df-seats__chair--e { grid-area: 2 / 3; }
.df-seats__chair--s { grid-area: 3 / 2; }
.df-seats__chair.is-on,
.df-seats__chair.is-on:hover {
  background: var(--df-home-blue);
  border-color: var(--df-home-blue);
  color: #FFFFFF;
  animation: df-ring 2s ease-out infinite;
}
@keyframes df-ring { 0% { box-shadow: 0 0 0 0 rgba(63,187,236,0.55); } 100% { box-shadow: 0 0 0 14px rgba(63,187,236,0); } }
.df-seats__table {
  grid-area: 2 / 2;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 28px;
  border: 1.5px solid var(--line);
  background: var(--card);
  box-shadow: 0 14px 30px rgba(13,19,26,0.08);
  text-align: center;
}
.df-seats__table-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.df-seats__table-name { font-size: 15px; font-weight: 700; color: var(--fg); }
@media (max-width: 640px) {
  .df-seats__plan { display: none; }
}

/* 3d. Coverage: the copy beside a Texas outline that draws itself on load,
   with pulsing pins; one row per metro under it. */
.df-coverage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 48px 64px;
  align-items: center;
}
.df-coverage__copy { display: flex; flex-direction: column; gap: 22px; }
.df-coverage__copy > * { margin: 0; }
.df-coverage__copy .df-lead { justify-self: start; max-width: 520px; }
.df-coverage__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--df-home-red);
  text-decoration: none;
}
.df-coverage__link:hover { color: var(--df-home-red); }
.df-coverage__link .df-btn__arrow { width: 14px; height: 11px; stroke-width: 1.8; transition: transform 0.2s ease; }
.df-coverage__link:hover .df-btn__arrow { transform: translateX(3px); }
.df-coverage__map {
  min-height: 380px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 28px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--card);
}
.df-coverage__map svg { width: 100%; max-width: 520px; overflow: visible; }
.df-coverage__state {
  fill: var(--panel);
  stroke: var(--fg);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-dasharray: 1600;
  animation: df-draw-state 2.4s ease both;
}
@keyframes df-draw-state { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
.df-coverage__pulse {
  fill: none;
  stroke: #3FBBEC;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: df-pulse 2.6s ease-out infinite calc(var(--df-pulse, 0) * 0.65s);
}
@keyframes df-pulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3); opacity: 0; } }
.df-coverage__dot { r: 5px; fill: var(--df-home-red); stroke: #FFFFFF; stroke-width: 2; transition: r 0.25s ease; }
.df-coverage__label { fill: var(--fg); font-family: Inter, sans-serif; font-size: 15px; font-weight: 500; }
.df-coverage__pin.is-on .df-coverage__dot { r: 8px; fill: var(--df-home-blue); }
.df-coverage__pin.is-on .df-coverage__label { font-weight: 700; }
.df-tabs__panel:has(> .df-coverage) { gap: 48px; }
.df-coverage__metros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.df-coverage__metros li { margin: 0; }
.df-coverage__metro {
  display: block;
  width: 100%;
  padding: 18px 0 0;
  border: 0;
  border-block-start: 3px solid var(--line);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.df-coverage__metro[aria-pressed="true"] { border-block-start-color: var(--df-home-blue); }
.df-coverage__name { display: block; font-size: 15px; font-weight: 700; }
.df-coverage__detail { display: block; margin-block-start: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* 3e. The tab block on a phone ("pick your seat first"). At 640px and under
   the tab bar and panels give way to .df-tabs__mob (blocks.php builds it from
   the same blocks): the seat picker first, then the services and the Why
   Blink cards as swipe rows, and the metros on one line. It takes the
   page theme like everything else in the block. */
.df-tabs__mob { display: none; }
@media (max-width: 640px) {
  .df-tabs__bar,
  .df-tabs__panels { display: none; }
  .df-tabs__title { margin-block-end: 8px; font-size: 28px; }
  .df-tabs__mob {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 44px;
    padding: 8px var(--df-home-gutter) 48px;
  }
}
.df-xm { display: flex; flex-direction: column; }
.df-xm--seats { gap: 16px; }
.df-xm--line { gap: 8px; }
.df-xm__title {
  margin: 0;
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.df-xm__title--lg { margin-block-end: 8px; font-size: 26px; }
.df-xm__lead { margin: 0; font-size: 15.5px; font-weight: 500; color: var(--muted); }
.df-xm__seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Selected is #0A72A3, darker than the desktop seat blue, so the 11px stage
   label on it passes contrast. */
.df-xm__seat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.df-xm__seat[aria-selected="true"] { border-color: #0A72A3; background: #0A72A3; color: #FFFFFF; }
.df-xm__stage { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.df-xm__seat[aria-selected="true"] .df-xm__stage { color: #FFFFFF; }
.df-xm__name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.df-xm__panel {
  padding: 20px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--card);
}
.df-xm__panel[hidden] { display: none; }
.df-xm__panel.is-in { animation: df-panel-in 0.38s ease both; }
.df-xm__list { margin: 0; padding: 0; list-style: none; }
.df-xm__list li {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 10px 0;
  border-block-end: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
}
.df-xm__link { min-height: 44px; margin-block-start: 8px; }
/* Services and Why Blink: a header, then the cards in a row that snaps card
   by card, the next card peeking in from the right, and a dot per card under
   it (js/tabs.js moves the active dot with the swipe). The row runs to the
   screen edges; the header and the button keep the block's 20px gutter.
   12px of margin on top of the block's 44px gap puts 56px between these two
   and the blocks around them. */
.df-xm--swipe { gap: 16px; margin-block-start: 12px; }
.df-xm--swipe + .df-xm:not(.df-xm--swipe) { margin-block-start: 12px; }
.df-xm__kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--df-home-red);
}
.df-xm--swipe .df-xm__title--lg { margin: 0; }
.df-xm__swipe {
  display: flex;
  gap: 12px;
  margin-inline: calc(-1 * var(--df-home-gutter));
  padding: 0 20px;
  scroll-padding: 0 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.df-xm__swipe::-webkit-scrollbar { display: none; }
.df-xm__card {
  flex: 0 0 84%;
  box-sizing: border-box;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  padding: 22px;
}
.df-xm__card-num { font-size: 13px; letter-spacing: 0.08em; }
.df-xm__card p { margin: 0; font-size: 14.5px; }
/* Services: the desktop service card's dark styling, every card showing its
   comparison. */
.df-xm__card--svc {
  gap: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #131A20;
  color: #FFFFFF;
}
.df-xm__card--svc .df-xm__card-num { font-weight: 600; color: var(--df-home-yellow); }
.df-xm__card--svc .df-xm__card-title {
  margin: 0;
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.df-xm__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block-end: 6px;
  border-block-end: 1px solid rgba(255,107,111,0.5);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FF7A7E;
}
.df-xm__label-dot { width: 7px; height: 7px; border-radius: 4px; background: #FF7A7E; }
.df-xm__label--blink { border-block-end-color: #3FBBEC; color: #3FBBEC; }
.df-xm__card--svc p { color: rgba(255,255,255,0.72); }
.df-xm__card--svc .df-xm__blink { color: #FFFFFF; }
.df-xm__card-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-block-start: auto;
  padding-block-start: 4px;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.df-xm__card-link:hover { color: #FFFFFF; }
/* Why Blink: the whole card is the link. */
.df-xm__card--why {
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--fg);
  text-decoration: none;
}
.df-xm__card--why:hover { color: var(--fg); }
.df-xm__card--why .df-xm__card-num { font-weight: 700; color: var(--df-home-red); }
.df-xm__card--why .df-xm__card-title { font-size: 19px; font-weight: 700; line-height: 1.25; }
.df-xm__card-text { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.df-xm__card-more { margin-block-start: auto; padding-block-start: 10px; font-size: 15px; font-weight: 600; color: var(--df-home-blue); }
.df-xm__dots { display: flex; justify-content: center; gap: 8px; }
.df-xm__dots span {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  transition: width 0.2s ease;
}
.df-xm__dots span.is-on { width: 20px; background: #3FBBEC; }
/* "Explore all of the services we offer": full width, outlined, no fill. */
.home .df-xm__more,
.home .df-xm__more:hover,
.home .df-xm__more:focus-visible {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 52px;
  border: 1.5px solid currentColor;
  background: transparent;
  color: var(--fg);
}
.home .df-xm__more .df-btn__label { flex: 1 1 auto; padding: 12px 18px; line-height: 1.3; white-space: normal; }
.home .df-xm__more .df-btn__cell { border-inline-start-color: currentColor; }
.df-xm__metros { margin: 0; font-size: 15px; color: var(--muted); }

/* ---- 4. Closing band ------------------------------------------------------ */
.df-closing {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--df-home-red);
  color: #FFFFFF;
}
.df-closing__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 56px 96px;
  align-items: center;
  padding-block: clamp(72px, 9vw, 104px);
}
.df-closing .df-eyebrow {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.85);
}
.df-closing__title {
  max-width: 14ch;
  margin: 0 0 32px;
  font-family: inherit;
  font-size: clamp(38px, 5vw, 70px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}
.df-closing__title em { font-style: normal; }
.df-closing__main p { margin: 0; }
.df-closing__contact h3 {
  margin: 0;
  font-family: inherit;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.df-closing__contact > p { margin: 10px 0 0; font-size: 15px; color: rgba(255,255,255,0.9); }
.df-closing .df-people { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.df-closing .df-people li { margin: 0; }
.df-closing .df-person {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.12);
  color: #FFFFFF;
  text-decoration: none;
}
.df-closing .df-person:hover { color: #FFFFFF; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.16); }
.df-closing .df-person__photo,
.df-person__icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  box-sizing: border-box;
  border-radius: 26px;
  object-fit: cover;
}
.df-person__icon { display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.6); }
.df-closing .df-person__text { display: flex; flex-direction: column; min-width: 0; }
.df-closing .df-person__name { font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
/* Contact cards on a phone: a person's name is short, but the inbox row's
   "name" is a whole email address. At a flat 20px it is wider than the space
   left between the badge and the arrow, and `overflow-wrap: anywhere` then
   breaks it mid-domain ("contact@blinktexas." / "com"). Size it to the room
   the row actually has: measured 193px of label at 20px against 191px
   available at 375px and 176px at 360px, so scale with the viewport and cap
   at the designed 20px (which is what a desktop still gets). Scoped to the
   photo-less inbox row so the two named people keep their 20px. */
.df-closing .df-person:not(.df-person--photo) .df-person__name { font-size: clamp(13px, 3.8vw, 20px); }
.df-closing :is(.df-person__role, .df-person__go) {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  opacity: 0.85;
}
.df-person__arrow { display: flex; margin-inline-start: auto; }
.df-person__arrow .df-btn__arrow { transition: transform 0.2s ease; }
.df-person:hover .df-person__arrow .df-btn__arrow { transform: translateX(3px); }
/* Phones: the whole row is the link, so the arrow goes, and with its room
   back every name, the email included, fits at 17px down to 360px. */
@media (max-width: 640px) {
  .df-closing__grid { padding-block: 48px; }
  .df-closing .df-person { gap: 14px; padding: 14px 16px; }
  .df-closing .df-person .df-person__arrow { display: none; }
  .df-closing .df-person .df-person__name,
  .df-closing .df-person:not(.df-person--photo) .df-person__name { font-size: 17px; }
}

/* ---- Phone sticky bar ------------------------------------------------------ */
/* Call + Request Free Quote, fixed to the foot of a phone screen. js/fx.js adds
   .is-shown whenever neither the hero's Request Free Quote button nor the
   closing band (which carries the same two actions) is on screen. Hidden, it
   fades and drops away and is visibility:hidden, so it leaves the tab order.
   Never shown above 640px. --df-mbar-h is the bar's height without the
   safe-area inset; the page's last content is padded by it so nothing sits
   under the bar. */
.df-mbar { display: none; }
@media (max-width: 640px) {
  .home { --df-mbar-h: 76px; }
  .df-mbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: flex;
    gap: 10px;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid rgba(255,255,255,0.12);
    background: rgba(11,15,19,0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(12px);
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .df-mbar.is-shown {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
  }
  .df-mbar__call {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 18px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,0.4);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }
  .df-mbar__call:is(:hover, :focus-visible) { color: #FFFFFF; }
  .home .df-mbar .df-mbar__quote { flex: 1 1 auto; min-width: 0; height: 52px; }
  .home .df-mbar .df-mbar__quote .df-btn__label { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 0 16px; white-space: nowrap; }
  /* 360px and under: "Request Free Quote" and its arrow do not fit beside Call
     at the full sizes, so both buttons give up padding (not font size) and the
     label stays on one line. */
  @media (max-width: 380px) {
    .df-mbar { gap: 8px; padding-inline: 12px; }
    .df-mbar__call { gap: 6px; padding: 0 12px; }
    .home .df-mbar .df-mbar__quote .df-btn__label { padding: 0 8px; }
    .home .df-mbar .df-mbar__quote .df-btn__cell { width: 44px; }
  }
  /* The page's last content clears the bar, plus the device's bottom inset. */
  .home .df-site-footer { padding-block-end: calc(var(--df-mbar-h) + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .df-mbar,
  .df-mbar.is-shown { transition: none; transform: none; }
}

/* ---- Footer (front page) ---------------------------------------------------- */
/* The closing band is the page's last word, so the footer drops its own
   closing row here (factory_base_footer) and starts with the columns. */

/* ---- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .df-hero--display .df-word,
  .df-hero__check,
  .df-hero__dot,
  .df-hero__dot svg,
  .df-intro__live,
  .df-tabs__panel.is-in,
  .df-seat.is-in,
  .df-xm__panel.is-in,
  .df-seats__chair.is-on,
  .df-coverage__state,
  .df-coverage__pulse,
  .df-fold__card.is-open .df-fold__col--accent,
  .df-feature::before,
  .df-site-header--over.is-solid,
  .home :is(.df-intro .df-container, .df-tabs__title, .df-closing__grid) {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .home .df-main.has-theme,
  .home .df-main.has-theme .df-tabs--dark { transition: none; }
  .df-fold__card.is-open .df-fold__cols::after { display: none; }
  .df-fold__card,
  .df-feature,
  .df-tabs__tab,
  .df-xm__seat,
  .df-xm__dots span,
  .home .df-btn__arrow { transition: none; }
  .df-feature:hover { transform: none; }
}