/* =========================================================================
   Local Fractional — "Dusk to Dawn" experience layer
   -------------------------------------------------------------------------
   Opt-in: only applies to pages whose <body> carries class "d2d".
   Loaded AFTER styles.css. Pairs with /assets/js/dusk.js.

   RULES THIS FILE KEEPS:
   - It never hides content. Anything hidden-then-revealed is hidden only by
     a class dusk.js adds (.d2d-rv), so no-JS visitors and crawlers always
     see the full page.
   - It restyles the shared nav/footer by selector only. Their HTML is
     re-stamped from index.html by sync-header-footer.py every 3 hours, so
     nothing here depends on markup the bot does not already produce.
   - Motion respects prefers-reduced-motion.
   ========================================================================= */

body.d2d {
  --night: #06080c;
  --navy: #0E1B2E;
  --navy-2: #13243d;
  --gold: #BD9542;
  --gold-hi: #E9CC83;
  --gold-lo: #8A6B2C;
  --ivory: #F7F3EC;
  --paper: #FBF8F2;
  --parch: #E8DCC4;
  --chalk: #F3EEE4;
  --ink: #0E1B2E;
  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.4,.44,1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --chalk-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.2'/%3E%3C/filter%3E%3Cg filter='url(%23r)' fill='none' stroke='%23BD9542' stroke-linecap='round'%3E%3Cpath d='M4 9 C 50 3, 96 13, 150 7 S 222 6, 236 9' stroke-width='3.2'/%3E%3Cpath d='M18 13 C 80 9, 150 15, 226 11' stroke-width='1.3' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  --chalk-stroke-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.2'/%3E%3C/filter%3E%3Cg filter='url(%23r)' fill='none' stroke='%23F3EEE4' stroke-linecap='round'%3E%3Cpath d='M4 9 C 50 3, 96 13, 150 7 S 222 6, 236 9' stroke-width='3.2'/%3E%3Cpath d='M18 13 C 80 9, 150 15, 226 11' stroke-width='1.3' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--paper) !important;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Film grain over everything: the tactile, printed-paper feel ---- */
body.d2d::before {
  content: '';
  position: fixed; inset: 0;
  background-image: var(--grain);
  opacity: .2; mix-blend-mode: multiply;   /* multiply: texture on paper, blacks stay black */
  pointer-events: none;
  z-index: 45;
}

/* ---- Scroll progress: a single gold thread ---- */
.d2d-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  pointer-events: none;
}

/* =============================== TYPE =================================== */
body.d2d main :is(h1, h2, h3).font-heading { text-wrap: balance; }
body.d2d main h1.font-heading {
  font-weight: 600; letter-spacing: -.022em; line-height: 1.04;
  font-size: clamp(2.5rem, 5.2vw, 4.6rem);
}
body.d2d main h2.font-heading:is(.text-3xl, .text-4xl) {
  font-weight: 600; letter-spacing: -.018em; line-height: 1.1;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
}
body.d2d main h3.font-heading { letter-spacing: -.008em; }
body.d2d main p { text-wrap: pretty; }

/* Chalk marks under a FEW headings (dusk.js picks them and rotates three
   different strokes, so it reads as a hand and not a stamp). */
body.d2d main h2[class*="d2d-chalk-"]::after {
  content: ''; display: block; width: min(210px, 50%); height: 16px; margin-top: .45rem;
  background-color: var(--gold);
  -webkit-mask: var(--stroke) center / 100% 100% no-repeat; mask: var(--stroke) center / 100% 100% no-repeat;
  clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease) .25s;
}
body.d2d main h2.d2d-chalk-a { --stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.2'/%3E%3C/filter%3E%3Cg filter='url(%23r)' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='M4 9 C 50 3, 96 13, 150 7 S 222 6, 236 9' stroke-width='3.2'/%3E%3Cpath d='M18 13 C 80 9, 150 15, 226 11' stroke-width='1.3' opacity='.55'/%3E%3C/g%3E%3C/svg%3E"); }
body.d2d main h2.d2d-chalk-b { --stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.6'/%3E%3C/filter%3E%3Cg filter='url(%23r)' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='M6 6 L 232 4' stroke-width='2.6'/%3E%3Cpath d='M30 13 L 204 11' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"); }
body.d2d main h2.d2d-chalk-b::after { transform: rotate(-1.2deg); width: min(160px, 40%); }
body.d2d main h2.d2d-chalk-c { --stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' seed='23'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' d='M4 11 C 40 2, 60 16, 92 8 S 140 3, 150 10 S 132 15, 128 9 S 180 4, 236 8'/%3E%3C/svg%3E"); }
body.d2d main .text-center h2[class*="d2d-chalk-"]::after, body.d2d main h2.text-center[class*="d2d-chalk-"]::after { margin-inline: auto; }
body.d2d main :is(.bg-navy, .d2d-night) h2[class*="d2d-chalk-"]::after { background-color: var(--chalk); }
body.d2d main h2[class*="d2d-chalk-"].d2d-rv:not(.d2d-in)::after { clip-path: inset(0 100% 0 0); }

/* ============================ SECTIONS ================================== */
body.d2d main > section, body.d2d main section { position: relative; }
body.d2d main section.bg-white,
body.d2d main section:not([class*="bg-"]) { background-color: var(--paper) !important; }
body.d2d main section.bg-light {
  background-color: var(--ivory) !important;
  background-image:
    radial-gradient(1200px 500px at 85% -10%, rgba(189,149,66,.09), transparent 60%),
    radial-gradient(900px 420px at 0% 110%, rgba(14,27,46,.045), transparent 60%);
}
body.d2d main section[class*="border-"] { border-color: rgba(189,149,66,.22) !important; }

/* ---- Night sections (dark): depth, glow, starlight ---- */
body.d2d main section.bg-navy,
body.d2d main .d2d-night {
  background-color: var(--night) !important;
  background-image:
    radial-gradient(900px 520px at var(--gx, 78%) var(--gy, 0%), rgba(189,149,66,.22), transparent 62%),
    linear-gradient(180deg, #050608 0%, #0b111c 100%);
  color: #EDE7DA;
  overflow: hidden;
  isolation: isolate;
}
body.d2d main section.bg-navy :is(.text-gray-300, .text-gray-200, .text-gray-400) { color: rgba(237,231,218,.78) !important; }

/* ---- Below the hero (home): the night continues behind the three router
   cards and ends on a single line of gold light. No gradient sky. ---- */
body.d2d-home main > section.d2d-horizon {
  background-color: #0b111c !important;
  background-image:
    radial-gradient(60% 150px at 50% 100%, rgba(233,204,131,.5), rgba(189,149,66,.12) 55%, transparent 75%),
    linear-gradient(180deg, #0b111c, #080b12) !important;
  border: 0 !important; border-bottom: 1px solid var(--gold) !important;
  padding-top: 4.5rem; padding-bottom: 5.5rem;
}
body.d2d-home main > section.d2d-horizon > div > p:first-child { color: var(--gold-hi) !important; letter-spacing: .2em; }
body.d2d-home main > section.d2d-horizon a.group.bg-white.rounded-2xl {
  background-color: rgba(255,255,255,.06) !important;
  background-image:
    radial-gradient(340px circle at var(--mx, -400px) var(--my, -400px), rgba(233,204,131,.22), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 45%, rgba(255,255,255,.07)) !important;
  border: 1px solid rgba(233,204,131,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 30px 60px -28px rgba(0,0,0,.8) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
body.d2d-home main > section.d2d-horizon a.group.bg-white.rounded-2xl:hover { border-color: var(--gold-hi) !important; }
body.d2d-home main > section.d2d-horizon a.group p.font-heading { color: #fff !important; }
body.d2d-home main > section.d2d-horizon a.group p.text-secondary { color: rgba(240,234,222,.86) !important; }
body.d2d-home main > section.d2d-horizon a.group span { color: var(--gold-hi) !important; }

/* ---- Finale: quiet paper, large headline. (The sunrise disc and rays
   were removed at Taber's request, 2026-11-13.) ---- */
body.d2d main section.d2d-finale {
  background-color: var(--ivory) !important;
  background-image: radial-gradient(900px 420px at 50% 0%, rgba(189,149,66,.10), transparent 65%) !important;
  padding-block: clamp(5rem, 10vw, 8rem);
}
body.d2d main section.d2d-finale h2.font-heading { font-size: clamp(2.6rem, 6.2vw, 5.2rem); letter-spacing: -.03em; }

/* ============================== CARDS =================================== */
body.d2d main :is(.tier-card, .bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg.p-6, .bg-light.rounded-xl, a.block.rounded-xl.border) {
  position: relative;
  border-radius: 12px !important;
  border: 1px solid rgba(14,27,46,.09) !important;
  background-color: rgba(255,255,255,.78) !important;
  background-image:
    radial-gradient(380px circle at var(--mx, -400px) var(--my, -400px), rgba(189,149,66,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 1px rgba(14,27,46,.04),
    0 10px 30px -14px rgba(14,27,46,.18);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
  transform: translateY(var(--lift, 0));
}
body.d2d main a:is(.tier-card, .bg-white.rounded-xl, .bg-white.rounded-2xl, .block.rounded-xl.border):hover {
  --lift: -5px;
  border-color: rgba(189,149,66,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 2px rgba(14,27,46,.04),
    0 26px 48px -20px rgba(14,27,46,.30),
    0 0 0 4px rgba(189,149,66,.08);
}
body.d2d main .border-l-4.border-brand-blue { border-left: 3px solid var(--gold) !important; }

/* Liquid Glass panels inside night sections */
body.d2d main :is(.bg-white\/10, .bg-white\/5, .d2d-glass) {
  position: relative;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background-color: rgba(255,255,255,.055) !important;
  background-image:
    radial-gradient(340px circle at var(--mx, -400px) var(--my, -400px), rgba(233,204,131,.20), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 42%, rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.25), 0 24px 50px -24px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  transition: border-color .3s;
}
body.d2d main :is(.bg-white\/10, .bg-white\/5):hover { border-color: rgba(233,204,131,.45) !important; }

/* Icon tiles: engraved gold instead of pastel circles */
body.d2d main div:is(.bg-blue-50, .bg-green-50, .bg-brand-blue\/10, .bg-brand-green\/10):is(.w-8, .w-10, .w-12, .w-14, .w-16) {
  background: linear-gradient(145deg, #fff, var(--parch)) !important;
  box-shadow: inset 0 0 0 1px rgba(189,149,66,.45), 0 6px 14px -8px rgba(138,107,44,.5);
}
body.d2d main div:is(.bg-blue-50, .bg-green-50) svg { color: var(--gold-lo) !important; }
body.d2d main table :is(.bg-green-50, .bg-blue-50) { background-color: rgba(189,149,66,.12) !important; }
body.d2d main table thead :is(.bg-green-50, .bg-blue-50) { background-color: rgba(189,149,66,.26) !important; box-shadow: inset 0 2px 0 var(--gold); }

/* Step numerals: struck-coin gold */
body.d2d main .rounded-full.bg-brand-blue,
body.d2d main .rounded-full.bg-brand-green {
  background: radial-gradient(circle at 32% 26%, var(--gold-hi), var(--gold) 55%, var(--gold-lo)) !important;
  color: #1a1206 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 3px rgba(0,0,0,.25), 0 8px 18px -8px rgba(138,107,44,.8);
}

/* ============================= BUTTONS ================================== */
body.d2d a.bg-brand-green, body.d2d button.bg-brand-green,
body.d2d .lf-mobile-cta .lf-cta-book {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 46%, #a8823a 100%) !important;
  color: #140e03 !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.2), 0 10px 26px -10px rgba(189,149,66,.75);
  transition: transform .35s var(--spring), box-shadow .3s, filter .3s !important;
  transform: translate(var(--bx, 0), var(--by, 0));
  letter-spacing: .005em;
}
body.d2d a.bg-brand-green::after, body.d2d button.bg-brand-green::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%);
  transform: translateX(-120%);
}
body.d2d a.bg-brand-green:hover::after, body.d2d button.bg-brand-green:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }
body.d2d a.bg-brand-green:hover { filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 16px 34px -10px rgba(189,149,66,.9); }
body.d2d a.bg-brand-green:active { transform: translate(var(--bx,0), var(--by,0)) scale(.975); }
body.d2d main a.border-2.border-white {
  border: 1px solid rgba(255,255,255,.35) !important; border-radius: 10px !important;
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
body.d2d main a.border-2.border-white:hover { background: rgba(255,255,255,.92) !important; }
body.d2d main a.text-brand-blue, body.d2d main span.text-brand-blue, body.d2d main span.text-brand-green, body.d2d main p.text-brand-blue, body.d2d main p.text-brand-green { color: #6f5520 !important; }
body.d2d main :is(.bg-navy, .d2d-night) :is(a.text-brand-blue, span.text-brand-blue) { color: var(--gold-hi) !important; }
body.d2d :is(a, button, summary, input, textarea, select):focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
body.d2d :is(.bg-navy, .d2d-night, #hero-section, .d2d-hero, .d2d-hero-photo, footer) :is(a, button):focus-visible { outline-color: #fff; }

/* =============================== NAV ==================================== */
/* Liquid Glass on wide screens that support it; solid ivory otherwise
   (phones and Safari low-power skip backdrop-filter — see overlay-v2). */
@media (min-width: 1024px) {
  @supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
    body.d2d #main-nav {
      top: 10px; left: 14px; right: 14px;
      border-radius: 16px;
      background: rgba(247,243,236,.74) !important;
      -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
      border: 1px solid rgba(255,255,255,.55) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 12px 34px -18px rgba(6,8,12,.55);
      transition: background .4s, box-shadow .4s, top .4s var(--ease);
    }
    body.d2d #main-nav.nav-scrolled { background: rgba(247,243,236,.9) !important; top: 6px; }
    body.d2d #main-nav > div > div { height: 4.25rem; }
  }
}
body.d2d .dropdown-menu {
  border-radius: 12px; border: 1px solid rgba(14,27,46,.08);
  box-shadow: 0 24px 50px -20px rgba(6,8,12,.45);
  background: rgba(251,248,242,.97);
}
body.d2d .dropdown-menu a:hover { background: rgba(189,149,66,.12); color: var(--gold-lo); }

/* ============================== TABLES ================================== */
body.d2d main table { border-collapse: separate; border-spacing: 0; }
body.d2d main table :is(th, td) { border-color: rgba(14,27,46,.08) !important; }
body.d2d main table tbody tr { transition: background .25s; }
body.d2d main table tbody tr:hover { background: rgba(189,149,66,.08); }

/* =============================== FAQ ==================================== */
body.d2d .faq-item { border-bottom: 1px solid rgba(189,149,66,.28); }
body.d2d .faq-question { padding: 1.4rem 0; font-size: 1.06rem; transition: color .2s, padding-left .35s var(--ease); }
body.d2d .faq-question:hover { color: var(--gold-lo); padding-left: .5rem; }
body.d2d .faq-arrow { color: var(--gold); }

/* ============================== FORMS =================================== */
body.d2d main :is(input, textarea, select).border-gray-300 {
  background: rgba(255,255,255,.85); border-color: rgba(14,27,46,.18) !important; border-radius: 10px !important;
  transition: box-shadow .25s, border-color .25s;
}
body.d2d main :is(input, textarea, select):focus { border-color: var(--gold) !important; box-shadow: 0 0 0 4px rgba(189,149,66,.18) !important; }

/* ============================= FOOTER =================================== */
body.d2d > footer.bg-navy, body.d2d footer.bg-navy {
  background: linear-gradient(180deg, var(--navy) 0%, #05070b 100%) !important;
  border-top: 1px solid rgba(189,149,66,.4);
}

/* ========================== SCROLL REVEALS ============================== */
.d2d-rv { opacity: 0; transform: translateY(22px); }
.d2d-rv.d2d-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms);
}
/* ============================ PAGE HEROES =============================== */
/* Inner pages: the first dark section gets the dusk sky and a pointer light */
body.d2d main > section.d2d-hero { border-bottom: 1px solid var(--gold); padding-top: clamp(8rem, 14vw, 11rem); padding-bottom: clamp(4.5rem, 8vw, 7rem); }
body.d2d main > section.d2d-hero::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 46%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 150px at 50% 100%, rgba(233,204,131,.45), rgba(189,149,66,.1) 55%, transparent 75%);
}
body.d2d main > section.d2d-hero h1 {
  background: linear-gradient(180deg, #fff 30%, #e8d9b4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.d2d-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
body.d2d main > section.d2d-hero > .d2d-hero-canvas { z-index: -1; }

/* ============================ HOME HERO ================================= */
body.d2d-home main > section.hero-video-container { background: #050608 !important; }
/* Phones keep the content-sized hero from styles.css (72vh, grows to fit). */
@media (min-width: 768px) {
  body.d2d-home .hero-video-container { height: 88svh; min-height: 620px; }
  body.d2d-home .hero-video-sticky { height: 100%; }
  body.d2d-home .hero-overlay { padding-top: 6rem; }
}
body.d2d-home .hero-video-sticky img.hero-poster {
  filter: grayscale(1) sepia(.35) brightness(.62) contrast(1.15); opacity: .5;   /* skyline visible, toned to the gold palette */
  transform: translate(-50%, calc(-50% + var(--par, 0px))) scale(1.12);
  will-change: transform;
}
body.d2d-home .hero-overlay {
  background:
    radial-gradient(70% 60% at 78% 40%, rgba(189,149,66,.16), transparent 70%),
    linear-gradient(180deg, rgba(5,6,8,.62) 0%, rgba(6,8,13,.38) 50%, rgba(8,11,18,.8) 86%, #0b111c 100%);
  z-index: 3;
}
body.d2d-home .hero-overlay h1 {
  background: linear-gradient(180deg, #fff 35%, #ead9b0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  /* The H1 is the LCP element: it moves into place but is never transparent,
     so it paints on the first frame even if animations are throttled. */
  animation: d2d-settle 1.1s var(--ease) both;
}
@keyframes d2d-settle { from { transform: translateY(18px); } to { transform: none; } }
body.d2d-home .hero-overlay > p { color: rgba(237,231,218,.86) !important; animation: d2d-settle 1.1s var(--ease) .1s both; }
body.d2d-home .hero-overlay > div { animation: d2d-settle 1.1s var(--ease) .2s both; }
@keyframes d2d-rise { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

@media (min-width: 1100px) {
  body.d2d-home .hero-overlay {
    align-items: flex-start; text-align: left;
    padding-left: max(2.5rem, calc((100vw - 1240px) / 2));
    padding-right: 50%;
  }
  body.d2d-home .hero-overlay h1 { font-size: clamp(2.6rem, 4.1vw, 4.1rem); }
  body.d2d-home .hero-overlay > p { margin-inline: 0; }
}

/* The instrument: a Liquid Glass panel showing an illustrative forecast */
.d2d-instrument-wrap {
  position: absolute; z-index: 4; right: max(2.5rem, calc((100vw - 1240px) / 2)); top: 53%;
  width: min(600px, 44vw); transform: translateY(-50%);
  perspective: 1200px; display: none;
}
@media (min-width: 1100px) { .d2d-instrument-wrap { display: block; } }
.d2d-instrument {
  position: relative; padding: 1.35rem 1.4rem 1.2rem; border-radius: 22px; color: #EDE7DA;
  background:
    radial-gradient(420px circle at var(--mx, 70%) var(--my, 0%), rgba(233,204,131,.22), transparent 60%),
    linear-gradient(140deg, rgba(255,255,255,.17), rgba(255,255,255,.035) 40%, rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.3), 0 50px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  transform: rotateX(var(--rx, 4deg)) rotateY(var(--ry, -9deg));
  transform-style: preserve-3d; transition: transform .6s var(--ease);
  animation: d2d-panel-in 1s var(--ease) .15s both;
  font-family: var(--font-sans);
}
@keyframes d2d-panel-in { from { opacity: 0; transform: rotateX(14deg) rotateY(-22deg) translateY(40px) scale(.94); } }
.d2d-inst-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .7rem; }
.d2d-inst-head b { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; color: #fff; }
.d2d-inst-head i { font-style: normal; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); white-space: nowrap; }
.d2d-chart { display: block; width: 100%; height: auto; overflow: visible; cursor: crosshair; }
.d2d-chart .grid { stroke: rgba(255,255,255,.09); stroke-width: 1; }
.d2d-chart .area { fill: url(#d2dArea); opacity: 0; animation: d2d-fade .8s ease 1.2s forwards; }
.d2d-chart .line { fill: none; stroke: url(#d2dLine); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 900); stroke-dashoffset: var(--len, 900); animation: d2d-draw 1.1s var(--ease) .5s forwards; }
.d2d-chart .dot { fill: var(--night); stroke: var(--gold-hi); stroke-width: 1.6; opacity: 0; animation: d2d-fade .5s ease forwards; }
.d2d-chart .cursor { stroke: rgba(233,204,131,.6); stroke-dasharray: 3 4; opacity: 0; transition: opacity .2s; }
.d2d-chart .wk { fill: rgba(237,231,218,.78); font-size: 10.5px; letter-spacing: .05em; }
.d2d-chart .chalk { fill: none; stroke: var(--chalk); stroke-width: 1.8; stroke-linecap: round; filter: url(#d2dRough);
  stroke-dasharray: 220; stroke-dashoffset: 220; animation: d2d-draw .6s var(--ease) 1.5s forwards; }
@keyframes d2d-draw { to { stroke-dashoffset: 0; } }
@keyframes d2d-fade { to { opacity: 1; } }
.d2d-note {
  position: absolute; font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; color: var(--chalk);
  font-size: 1.4rem; line-height: 1.05; transform: rotate(-4deg); opacity: 0; animation: d2d-fade .5s ease 1.8s forwards;
  text-shadow: 0 0 1px rgba(243,238,228,.5); pointer-events: none; white-space: nowrap;
}
.d2d-recon {
  display: grid; grid-template-columns: auto 1fr 1fr 1fr 1fr; gap: .2rem .7rem; align-items: baseline;
  margin-top: .55rem; padding: .6rem .75rem; border-radius: 12px; font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); font-size: .82rem;
}
.d2d-recon span { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,231,218,.55); }
.d2d-recon strong { font-weight: 600; color: #fff; }
.d2d-recon .wkno { font-family: var(--font-serif); font-size: 1.05rem; color: var(--gold-hi); align-self: center; }
.d2d-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: .6rem; }
.d2d-kpi { padding: .6rem .7rem; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transform: translateZ(26px); }
.d2d-kpi span { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,231,218,.6); }
.d2d-kpi strong { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.d2d-kpi em { font-style: normal; font-size: .7rem; color: var(--gold-hi); margin-left: .25rem; }
.d2d-inst-foot { margin-top: .65rem; font-size: .78rem; color: rgba(237,231,218,.78); }
.d2d-scrollcue {
  position: absolute; z-index: 5; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  width: 1px; height: 46px; background: linear-gradient(180deg, transparent, var(--gold-hi)); opacity: .7;
  animation: d2d-cue 2.2s var(--ease) infinite;
}
@keyframes d2d-cue { 0% { transform: translateX(-50%) scaleY(0); transform-origin: top; } 50% { transform: translateX(-50%) scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: translateX(-50%) scaleY(0); transform-origin: bottom; } }

/* ============================ STEP RAILS ================================ */
/* "How we work" and onboarding: a gold rail that fills as the steps arrive */
body.d2d main .d2d-rail { position: relative; }
body.d2d main .d2d-rail::before {
  content: ''; position: absolute; left: 8%; right: 8%; top: var(--rail-y, 28px); height: 2px;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi), var(--gold-lo));
  transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); transition: transform 1.6s var(--ease) .2s;
  border-radius: 2px; opacity: .85;
}
@media (max-width: 1023px) { body.d2d main .d2d-rail::before { display: none; } }
body.d2d main .d2d-rail > * { position: relative; }

/* Hand-chalked margin notes (decorative, aria-hidden, added by dusk.js) */
.d2d-margin-note {
  position: absolute; z-index: 3; font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  font-size: 1.5rem; line-height: 1; color: var(--gold-lo); transform: rotate(var(--rot, -5deg));
  pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity .8s ease .6s;
}
.d2d-margin-note.d2d-in { opacity: .95; }
.d2d-margin-note svg { display: block; width: 64px; height: 40px; margin: .1rem 0 0 1.2rem; overflow: visible; }
.d2d-margin-note path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1s var(--ease) .9s; }
.d2d-margin-note.d2d-in path { stroke-dashoffset: 0; }
body.d2d main :is(.bg-navy, .d2d-night) .d2d-margin-note { color: var(--chalk); }
@media (max-width: 1023px) { .d2d-margin-note { display: none; } }

/* ============================ SOUND TOGGLE ============================== */
.d2d-sound {
  position: fixed; left: 18px; bottom: 18px; z-index: 95;
  display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 .85rem 0 .7rem;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.5); cursor: pointer;
  background: rgba(247,243,236,.78); color: var(--ink); font: 600 .72rem/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 26px -12px rgba(6,8,12,.5);
  transition: transform .3s var(--spring), background .3s;
}
.d2d-sound:hover { transform: translateY(-2px); }
.d2d-sound .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.d2d-sound .bars i { width: 2px; height: 4px; background: var(--gold-lo); border-radius: 1px; }
.d2d-sound[aria-pressed="true"] .bars i { animation: d2d-eq 1s ease-in-out infinite; }
.d2d-sound[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: -.3s; }
.d2d-sound[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: -.6s; }
.d2d-sound[aria-pressed="true"] .bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes d2d-eq { 0%, 100% { height: 3px; } 50% { height: 14px; } }
@media (max-width: 1023px) { .d2d-sound { display: none; } }
.d2d-sound { opacity: .72; height: 34px; } .d2d-sound:hover, .d2d-sound:focus-visible, .d2d-sound[aria-pressed="true"] { opacity: 1; }

/* Mobile sticky CTA: glass */
body.d2d .lf-mobile-cta { background: rgba(247,243,236,.94); border-top: 1px solid rgba(189,149,66,.35); }

/* ========================= REDUCED MOTION =============================== */
@media (prefers-reduced-motion: reduce) {
  .d2d-rv { opacity: 1 !important; transform: none !important; filter: none !important; }
  body.d2d *, body.d2d *::before, body.d2d *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  body.d2d main h2.font-heading::after { clip-path: none !important; }
  .d2d-scrollcue { display: none; }
}

/* Hero text sits above the particle canvas that dusk.js inserts */
body.d2d-home .hero-overlay > *:not(canvas) { position: relative; z-index: 1; }
body.d2d-home .hero-overlay > canvas { z-index: 0; }

/* Comparison tables: the column we recommend, in gold not green */
body.d2d main table [class*="bg-brand-green/"] { background-color: rgba(189,149,66,.12) !important; }
body.d2d main table thead [class*="bg-brand-green/"] { background-color: rgba(189,149,66,.28) !important; box-shadow: inset 0 3px 0 var(--gold); color: #5c4718 !important; }
body.d2d main table .text-brand-green { color: #6f5520 !important; }

/* Photo heroes (image + navy scrim): deepen to dusk, keep the photo as depth */
body.d2d main > section.d2d-hero-photo { overflow: hidden; isolation: isolate; }
body.d2d main > section.d2d-hero-photo img { filter: saturate(.6) brightness(.7); transform: scale(1.06); }
body.d2d main > section.d2d-hero-photo [class*="bg-navy/"] {
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(189,149,66,.42), rgba(189,149,66,.06) 50%, transparent 68%),
    linear-gradient(180deg, rgba(6,8,12,.9), rgba(10,18,32,.72) 55%, rgba(14,27,46,.86)) !important;
}
body.d2d main > section.d2d-hero-photo h1 {
  background: linear-gradient(180deg, #fff 30%, #e8d9b4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

/* Callout blocks that were pastel blue/green: parchment with a gold edge */
body.d2d main :is(div, aside, p):is(.bg-blue-50, .bg-green-50):not(.w-8):not(.w-10):not(.w-12):not(.w-14):not(.w-16) {
  background: linear-gradient(180deg, rgba(232,220,196,.55), rgba(232,220,196,.28)) !important;
  border-color: var(--gold) !important;
}

/* ===================== REVISION 2 (after the judge pass) ================= */

/* A card that holds a booking widget, a form or an input never moves and
   never gets a filter: the Zoom scheduler sat skewed under the cursor. */
body.d2d main :is(.tier-card, .bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg.p-6, .bg-light.rounded-xl):has(iframe, form, input, textarea, select) {
  transform: none !important; background-image: none !important; background-color: #fff !important;
}

/* Phones: lighter grain, no canvas-heavy extras */
@media (max-width: 1023px) { body.d2d::before { opacity: .05; mix-blend-mode: normal; } }

/* ---- Adaptive nav: dark Liquid Glass over a night hero, ivory once the
   page has lightened. Desktop + backdrop-filter only. ---- */
@media (min-width: 1024px) {
  @supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
    body.d2d.d2d-nav-dark #main-nav {
      background: rgba(8,12,20,.42) !important; border-color: rgba(255,255,255,.16) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 40px -22px rgba(0,0,0,.8);
    }
    body.d2d.d2d-nav-dark #main-nav > div > div > a:first-child img { content: url('/assets/images/logo/LF-Inverted-Horizontal-720.webp'); }
    body.d2d.d2d-nav-dark #main-nav .lf-mark::after { color: var(--gold-hi); }
    body.d2d.d2d-nav-dark #main-nav :is(.text-secondary, .text-body, .text-navy):not(.dropdown-menu *) { color: rgba(240,234,222,.9) !important; }
    body.d2d.d2d-nav-dark #main-nav :is(input, [class*="search"]):not(.dropdown-menu *) { background-color: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.2) !important; color: #fff !important; }
    body.d2d.d2d-nav-dark #main-nav a.bg-navy { background: rgba(255,255,255,.1) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
    body.d2d #main-nav, body.d2d #main-nav * { transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); }
  }
}

/* ---- Services as a bento (home, desktop): the CFO card is the anchor ---- */
@media (min-width: 1024px) {
  body.d2d-home main .grid:has(> a.tier-card[href="/fractional-cfo-services"]) { grid-auto-rows: minmax(230px, auto); }
  body.d2d-home main a.tier-card[href="/fractional-cfo-services"] {
    grid-column: span 2; grid-row: span 2; padding: 2.75rem !important; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-start;
    background-color: var(--night) !important; color: #EDE7DA;
    background-image:
      radial-gradient(520px circle at var(--mx, 82%) var(--my, 8%), rgba(233,204,131,.22), transparent 60%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 240' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23E9CC83' stop-opacity='.34'/%3E%3Cstop offset='1' stop-color='%23E9CC83' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 150 C 70 150, 110 176, 170 182 S 280 214, 330 206 S 430 128, 480 96 S 560 52, 600 34 L600 240 L0 240Z' fill='url(%23a)'/%3E%3Cpath d='M0 150 C 70 150, 110 176, 170 182 S 280 214, 330 206 S 430 128, 480 96 S 560 52, 600 34' fill='none' stroke='%23E9CC83' stroke-width='2.5'/%3E%3C/svg%3E"),
      linear-gradient(160deg, #0b1322 0%, var(--navy) 100%) !important;
    background-size: auto, 100% 52%, auto !important; background-position: 0 0, 0 100%, 0 0 !important; background-repeat: no-repeat !important;
    border-color: rgba(233,204,131,.35) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 40px 70px -34px rgba(6,8,12,.75) !important;
  }
  body.d2d-home main a.tier-card[href="/fractional-cfo-services"] img { display: none; }
  body.d2d-home main a.tier-card[href="/fractional-cfo-services"] h3 { color: #fff !important; font-size: clamp(2rem, 3vw, 2.9rem) !important; font-weight: 600; letter-spacing: -.02em; margin-bottom: 1rem; }
  body.d2d-home main a.tier-card[href="/fractional-cfo-services"] p { color: rgba(237,231,218,.86) !important; font-size: 1.12rem !important; max-width: 34ch; line-height: 1.55; }
  body.d2d-home main a.tier-card[href="/fractional-cfo-services"] span { color: var(--gold-hi) !important; font-size: 1rem !important; }
}

/* ---- Comparison table: the fractional column is a raised slab ---- */
@media (min-width: 768px) {
  body.d2d main table:has(thead [class*="bg-brand-green/"]) { margin-block: 1.5rem; }
  body.d2d main table:has(thead [class*="bg-brand-green/"]) :is(th, td):nth-child(2) {
    position: relative; background: #fff !important; border-inline: 1px solid rgba(189,149,66,.55) !important;
    box-shadow: 18px 0 30px -22px rgba(14,27,46,.35), -18px 0 30px -22px rgba(14,27,46,.35);
    font-size: 1.02rem; color: #3d2f0c !important;
  }
  body.d2d main table:has(thead [class*="bg-brand-green/"]) thead th:nth-child(2) {
    background: linear-gradient(180deg, var(--gold-hi), var(--gold)) !important; color: #1a1206 !important;
    border-radius: 12px 12px 0 0; box-shadow: 0 -14px 0 0 var(--gold-hi), 0 -14px 30px -8px rgba(189,149,66,.6);
  }
  body.d2d main table:has(thead [class*="bg-brand-green/"]) tbody tr:last-child td:nth-child(2) {
    border-radius: 0 0 12px 12px; box-shadow: 0 14px 0 0 #fff, 0 15px 0 0 rgba(189,149,66,.55), 0 34px 40px -18px rgba(14,27,46,.4);
  }
}
.d2d-chalk-ring { position: absolute; inset: -4px 14%; width: 72%; height: calc(100% + 8px); pointer-events: none; overflow: visible; }
.d2d-chalk-ring path { fill: none; stroke: var(--gold-lo); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.1s var(--ease) .5s; }
.d2d-chalk-ring.d2d-in path { stroke-dashoffset: 0; }

/* ---- Hero ledger paper: a fine engraved grid behind the chart line, so the
   dots resolve onto something that reads as a ledger, not a night sky. ---- */
body.d2d-home .hero-video-sticky::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    linear-gradient(rgba(233,204,131,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,204,131,.16) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px;   /* major lines only: a fine minor grid read as grey haze */
  -webkit-mask: radial-gradient(120% 95% at 70% 60%, #000 20%, transparent 78%); mask: radial-gradient(120% 95% at 70% 60%, #000 20%, transparent 78%);
}
body.d2d-home main > section.hero-video-container { background: #050608 !important; }
/* Inner-page dark heroes get the same ledger paper (no particle canvas) */
body.d2d main > section:is(.d2d-hero, .d2d-hero-photo)::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(233,204,131,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(233,204,131,.07) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask: radial-gradient(110% 90% at 50% 100%, #000 10%, transparent 75%); mask: radial-gradient(110% 90% at 50% 100%, #000 10%, transparent 75%);
}
body.d2d main > section.d2d-hero-photo::after { z-index: 1; }

/* ---- Onboarding as a night feature: the path from intro call to embedded
   partner, on black, with a gold rail that fills as the steps arrive. The
   section carries class d2d-night in the HTML (class only; copy untouched). ---- */
body.d2d main section.d2d-night { padding-block: clamp(4.5rem, 8vw, 7rem); }
body.d2d main section.d2d-night :is(h2, h3, .text-navy) { color: #fff !important; }
body.d2d main section.d2d-night .text-secondary { color: rgba(237,231,218,.82) !important; }
body.d2d main section.d2d-night .grid > .text-center > p.text-xs {
  display: inline-block; margin-top: 1rem; padding: .3rem .75rem; border-radius: 999px;
  border: 1px solid rgba(233,204,131,.5); color: var(--gold-hi) !important; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(233,204,131,.08);
}
body.d2d main section.d2d-night .rounded-full.bg-navy {
  background: radial-gradient(circle at 32% 26%, #fff, var(--parch) 60%, #cdbb96) !important; color: #1a1206 !important;
}
body.d2d main .d2d-line {
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi) 50%, #fff3cf) !important; height: 2px !important;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 2.2s var(--ease) .3s;
  box-shadow: 0 0 14px rgba(233,204,131,.6);
}
body.d2d main .d2d-line.d2d-in { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { body.d2d main .d2d-line { transform: none; } }

/* ---- Value props (home): three ledger columns divided by gold rules ---- */
@media (min-width: 768px) {
  body.d2d-home #services .grid > .text-center.p-8 + .text-center.p-8 { border-left: 1px solid rgba(189,149,66,.4); }
  body.d2d-home #services .grid { gap: 0; }
  body.d2d-home #services .grid > .text-center.p-8 { padding: 1rem 2.75rem 1.5rem; }
}
body.d2d-home #services .grid > .text-center.p-8 h3 { font-size: 1.55rem; font-weight: 600; letter-spacing: -.012em; }
body.d2d-home #services .grid > .text-center.p-8 p { font-size: 1.05rem; line-height: 1.6; }
body.d2d-home #services .grid > .text-center.p-8 > div:first-child { width: 4.75rem; height: 4.75rem; }
body.d2d-home #services .grid > .text-center.p-8 > div:first-child svg { width: 2.25rem; height: 2.25rem; }

/* ---- Industry tiles: engraved corner marks, lift on hover ---- */
body.d2d main #industries a.bg-white.rounded-xl { overflow: hidden; }
body.d2d main #industries a.bg-white.rounded-xl::before {
  content: ''; position: absolute; top: 10px; left: 10px; width: 14px; height: 14px;
  border-top: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold); opacity: .55; transition: all .35s var(--ease);
}
body.d2d main #industries a.bg-white.rounded-xl:hover::before { width: calc(100% - 20px); height: calc(100% - 20px); opacity: 1; }
body.d2d main #industries a.bg-white.rounded-xl h3 { font-size: 1.02rem; }
body.d2d main section.d2d-night.bg-white {
  background-color: #050608 !important;
  background-image:
    radial-gradient(900px 520px at var(--gx, 78%) var(--gy, 0%), rgba(189,149,66,.2), transparent 62%),
    linear-gradient(180deg, #050608 0%, #0b111c 100%) !important;
  color: #EDE7DA; overflow: hidden; isolation: isolate;
  border-block: 1px solid var(--gold);
}

/* A dark hero that carries its own photo (Exit Planning): tone the photo to
   the gold palette and keep it behind the headline, like the home skyline. */
body.d2d main > section.d2d-hero > img.absolute {
  filter: grayscale(1) sepia(.35) brightness(.5) contrast(1.15); opacity: .55 !important;
  -webkit-mask: linear-gradient(180deg, rgba(0,0,0,.55) 0%, #000 45%, rgba(0,0,0,.35) 100%); mask: linear-gradient(180deg, rgba(0,0,0,.55) 0%, #000 45%, rgba(0,0,0,.35) 100%);
}