/* Volcano Developments — "Direct"
 *
 * A third direction, built to contrast with Field Notes rather than refine it.
 * Field Notes is editorial: serif, hairlines, generous air, the form kept as a
 * destination near the foot of the page. This one is the opposite argument.
 *
 * The people who fill in this form are often mid-foreclosure, mid-probate or
 * mid-divorce. So: one heavy geometric sans, solid blocks of colour instead of
 * rules, high contrast, big touch targets, the phone number never more than a
 * thumb away, and the form on the first screen.
 */

@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/Urbanist-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --sans: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --bg:      #faf7f2;
  --surface: #ffffff;
  --ink:     #201c19;
  --ink-2:   #5f5750;
  --line:    #e5ded4;

  --char:    #23201c;   /* charcoal blocks */
  --char-2:  #16130f;
  --ember:   #b8482a;   /* the one accent */
  --ember-2: #9b3a20;
  --ember-soft: #fdefe9;

  --shell: 1200px;
  --gut: clamp(1.1rem, 4vw, 2.4rem);
  --r: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17140f; --surface: #201c17; --ink: #f1ece4; --ink-2: #a79d92;
    --line: #322c25; --char: #120f0c; --char-2: #0b0908;
    --ember: #d95f3c; --ember-2: #c04d2c; --ember-soft: #2a1a13;
  }
}
:root[data-theme="dark"] {
  --bg: #17140f; --surface: #201c17; --ink: #f1ece4; --ink-2: #a79d92;
  --line: #322c25; --char: #120f0c; --char-2: #0b0908;
  --ember: #d95f3c; --ember-2: #c04d2c; --ember-soft: #2a1a13;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6; font-weight: 450;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.d-shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }

.d-skip { position: absolute; left: -9999px; }
.d-skip:focus { left: 1rem; top: 1rem; z-index: 60; background: var(--ember); color: #fff; padding: .6rem 1rem; }

/* ---------- type ---------- */

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.033em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.1rem + 4.9vw, 4.5rem); }
h2 { font-size: clamp(1.95rem, 1.2rem + 2.3vw, 3rem); }
h3 { font-size: 1.22rem; letter-spacing: -.02em; line-height: 1.2; }

.d-eyebrow {
  font-size: .74rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ember); margin: 0 0 .9rem;
}
.d-lede { font-size: clamp(1.05rem, .98rem + .35vw, 1.2rem); color: var(--ink-2); max-width: 56ch; }

/* ---------- header ---------- */

.d-top { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.d-top-in { display: flex; align-items: center; gap: 1.6rem; min-height: 78px; }
.d-brand { display: block; margin-right: auto; }
.d-brand span {
  display: block; width: 205px; height: 52px; background-color: var(--ink);
  -webkit-mask: url("/assets/logo-long.png") left center / contain no-repeat;
  mask: url("/assets/logo-long.png") left center / contain no-repeat;
}
.d-nav { display: flex; gap: 1.5rem; }
.d-nav a { text-decoration: none; font-weight: 650; font-size: .93rem; }
.d-nav a:hover { color: var(--ember); }
.d-theme {
  background: transparent; border: 1px solid var(--line); border-radius: var(--r);
  width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink-2);
  cursor: pointer; flex: none; padding: 0;
}
.d-theme:hover { border-color: var(--ink); color: var(--ink); }
.d-theme svg { width: 18px; height: 18px; }
.d-theme .d-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .d-theme .d-moon { display: block; }
  :root:not([data-theme="light"]) .d-theme .d-sun { display: none; }
}
:root[data-theme="dark"] .d-theme .d-moon { display: block; }
:root[data-theme="dark"] .d-theme .d-sun { display: none; }
:root[data-theme="light"] .d-theme .d-moon { display: none; }
:root[data-theme="light"] .d-theme .d-sun { display: block; }
@media (max-width: 900px) { .d-nav { display: none; } }

/* ---------- buttons ---------- */

.d-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: 1rem; font-weight: 750; text-decoration: none;
  padding: 1rem 1.6rem; border-radius: var(--r); border: 2px solid transparent;
  background: var(--ember); color: #fff; cursor: pointer; line-height: 1.1;
  transition: background .15s, transform .06s;
}
.d-btn:hover { background: var(--ember-2); }
.d-btn:active { transform: translateY(1px); }
.d-btn-lg { font-size: 1.08rem; padding: 1.15rem 2rem; width: 100%; }
.d-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.d-btn-ghost:hover { background: transparent; border-color: var(--ink); }
.d-btn-white { background: #fff; color: var(--char); }
.d-btn-white:hover { background: #f0ebe4; }
.d-btn:disabled { opacity: .6; cursor: default; }

/* ---------- hero ---------- */

.d-hero { position: relative; background: var(--char); color: #fff; overflow: hidden; }
.d-hero-img { position: absolute; inset: 0; }
.d-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.d-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(92deg, rgba(24,20,16,.93) 0%, rgba(24,20,16,.78) 46%, rgba(24,20,16,.44) 100%);
}
.d-hero-in {
  position: relative; display: grid; grid-template-columns: 1fr minmax(380px, 40%);
  gap: clamp(1.8rem, 4vw, 4rem); align-items: center;
  padding-top: clamp(2.6rem, 5vw, 4.4rem); padding-bottom: clamp(2.6rem, 5vw, 4.4rem);
}
.d-hero h1 { color: #fff; max-width: 15ch; }
.d-hero .d-eyebrow { color: #f0a888; }
.d-hero-lede { color: rgba(255,255,255,.85); font-size: 1.14rem; max-width: 46ch; margin: 1.2rem 0 0; }
.d-hero-pts { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.d-hero-pts li { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; color: rgba(255,255,255,.94); }
.d-hero-pts svg { flex: none; width: 20px; height: 20px; color: #f0a888; margin-top: .12rem; }
@media (max-width: 940px) { .d-hero-in { grid-template-columns: 1fr; } }

/* ---------- form card ---------- */

.d-card {
  background: var(--surface); color: var(--ink); border-radius: 10px;
  padding: clamp(1.3rem, 3vw, 1.9rem); box-shadow: 0 22px 50px -18px rgba(20,14,10,.5);
}
.d-card h2 { font-size: 1.5rem; }
.d-card-note { color: var(--ink-2); font-size: .95rem; margin: .4rem 0 1.2rem; }
.d-form { display: grid; gap: .8rem; }
.d-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.d-field { display: grid; gap: .3rem; }
.d-field label { font-size: .78rem; font-weight: 750; color: var(--ink-2); }
.d-field input, .d-field select {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: var(--r); padding: .82rem .9rem; width: 100%;
}
.d-field input:focus, .d-field select:focus {
  outline: none; border-color: var(--ember); background: var(--surface);
}
.d-fine { font-size: .8rem; color: var(--ink-2); margin: 0; text-align: center; }
.d-hp { position: absolute; left: -9999px; }
.d-lookup { font-size: .89rem; background: var(--ember-soft); border-radius: var(--r); padding: .75rem .9rem; }
.d-result:empty { display: none; }
.d-result { font-size: .92rem; padding: .75rem .9rem; border-radius: var(--r); background: var(--ember-soft); }
.d-result.vd-err { background: var(--ember-soft); color: var(--ember-2); font-weight: 600; }

/* ---------- trust strip ---------- */

.d-trust { background: var(--char-2); color: #fff; }
.d-trust-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; padding: 1.5rem 0; }
.d-trust div { display: grid; gap: .18rem; }
.d-trust strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.d-trust span { font-size: .82rem; color: rgba(255,255,255,.62); font-weight: 600; }
@media (max-width: 760px) { .d-trust-in { grid-template-columns: repeat(2, 1fr); } }

/* ---------- sections ---------- */

.d-sec { padding: clamp(3rem, 6vw, 5rem) 0; }
.d-sec-alt { background: var(--surface); }
.d-sec-dark { background: var(--char); color: #fff; }
.d-sec-dark .d-lede { color: rgba(255,255,255,.76); }
.d-sec-head { margin-bottom: 2.2rem; max-width: 62ch; }
.d-sec-head .d-lede { margin: .9rem 0 0; }

/* two big panels */
.d-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.d-panel {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px;
  padding: clamp(1.4rem, 3vw, 2.1rem); text-decoration: none; display: grid; gap: .6rem;
  align-content: start; transition: border-color .15s, transform .15s;
}
.d-panel:hover { border-color: var(--ember); transform: translateY(-2px); }
.d-panel p { margin: 0; color: var(--ink-2); }
.d-panel-go { font-weight: 750; color: var(--ember); margin-top: .3rem; }
@media (max-width: 800px) { .d-panels { grid-template-columns: 1fr; } }

/* process: solid numbered blocks */
.d-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.d-step { background: var(--surface); border-radius: 10px; padding: clamp(1.3rem, 3vw, 1.9rem); }
.d-sec-dark .d-step { background: rgba(255,255,255,.06); }
.d-step-n {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--ember); color: #fff; font-weight: 800; font-size: 1.05rem; margin-bottom: .9rem;
}
.d-step p { margin: .45rem 0 0; color: var(--ink-2); }
.d-sec-dark .d-step p { color: rgba(255,255,255,.74); }
@media (max-width: 860px) { .d-steps { grid-template-columns: 1fr; } }

/* comparison */
.d-cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .97rem; }
.d-cmp th, .d-cmp td { padding: 1rem 1.1rem; text-align: left; vertical-align: top; }
.d-cmp thead th { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.d-cmp thead th.d-us { color: var(--ember); }
.d-cmp tbody tr > * { border-top: 1px solid var(--line); }
.d-cmp tbody th { font-weight: 750; width: 22%; }
.d-cmp .d-us { background: var(--ember-soft); font-weight: 600; }
.d-cmp tbody tr:first-child .d-us { border-radius: 8px 8px 0 0; }
.d-cmp tbody tr:last-child .d-us { border-radius: 0 0 8px 8px; }
.d-cmp .d-them { color: var(--ink-2); }
@media (max-width: 760px) {
  .d-cmp, .d-cmp tbody, .d-cmp tr, .d-cmp td, .d-cmp tbody th { display: block; width: auto; }
  .d-cmp thead { display: none; }
  .d-cmp tbody tr { border-top: 1px solid var(--line); padding: .9rem 0; }
  .d-cmp tbody tr > * { border-top: 0; }
  .d-cmp .d-them::before { content: "Agent: "; font-weight: 700; }
}

/* situation chips */
.d-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.d-chip {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
  padding: .6rem 1.05rem; font-weight: 650; font-size: .95rem;
}
.d-sec-dark .d-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }

/* coverage links */
.d-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.d-links a {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r);
  padding: .55rem .9rem; text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap;
}
.d-links a:hover { border-color: var(--ember); color: var(--ember); }

/* prose */
.d-prose { max-width: 68ch; }
.d-prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 2.2rem 0 .7rem; }
.d-prose h3 { margin: 1.7rem 0 .5rem; }
.d-prose h2:first-child { margin-top: 0; }
.d-prose p { margin: 0 0 1.1rem; }
.d-prose ul { margin: 0 0 1.2rem; padding-left: 1.15rem; }
.d-prose li { margin-bottom: .45rem; }

/* faq */
.d-faq { display: grid; gap: .7rem; }
.d-faq details {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem;
}
.d-faq details[open] { border-color: var(--ember); }
.d-faq summary { font-weight: 750; cursor: pointer; list-style: none; }
.d-faq summary::-webkit-details-marker { display: none; }
.d-faq summary::after { content: "+"; float: right; color: var(--ember); font-weight: 800; }
.d-faq details[open] summary::after { content: "–"; }
.d-faq p { margin: .7rem 0 0; color: var(--ink-2); }

/* big closing cta */
.d-cta { background: var(--ember); color: #fff; }
.d-cta-in { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.d-cta h2 { color: #fff; max-width: 20ch; }
.d-cta p { margin: .7rem 0 0; color: rgba(255,255,255,.88); max-width: 50ch; }
.d-cta-act { display: flex; gap: .7rem; flex-wrap: wrap; }
@media (max-width: 800px) { .d-cta-in { grid-template-columns: 1fr; } }

/* posts */
.d-posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.d-posts a {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 1.4rem; text-decoration: none; display: grid; gap: .4rem; align-content: start;
}
.d-posts a:hover { border-color: var(--ember); }
.d-posts time { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.d-posts p { margin: 0; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 800px) { .d-posts { grid-template-columns: 1fr; } }

/* footer + sticky mobile call bar */
.d-foot { background: var(--char-2); color: #fff; padding: clamp(2.4rem, 5vw, 3.4rem) 0 1.4rem; }
.d-foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.d-foot p { color: rgba(255,255,255,.66); font-size: .93rem; max-width: 42ch; }
.d-foot-brand span {
  display: block; width: 190px; height: 48px; background-color: #fff; margin-bottom: .9rem;
  -webkit-mask: url("/assets/logo-long.png") left center / contain no-repeat;
  mask: url("/assets/logo-long.png") left center / contain no-repeat;
}
.d-foot h3 { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .7rem; }
.d-foot a { text-decoration: none; color: rgba(255,255,255,.86); display: block; padding: .16rem 0; }
.d-foot a:hover { color: #fff; }
.d-foot-fine { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); }
.d-foot-fine p { font-size: .8rem; margin: 0; }
@media (max-width: 780px) { .d-foot-in { grid-template-columns: 1fr; } }

.d-callbar { display: none; }
@media (max-width: 720px) {
  .d-callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    position: sticky; bottom: 0; z-index: 45; padding: .6rem var(--gut);
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .d-callbar .d-btn { padding: .85rem 1rem; font-size: .97rem; }
  body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* On a narrow screen the masthead ran logo + phone button + toggle, which
   pushed the toggle 18px past the viewport. The sticky call bar already
   carries "Call now" at this width, so the header button is redundant. */
@media (max-width: 720px) {
  .d-top-in > .d-btn { display: none; }
  .d-top-in { gap: 1rem; }
  .d-brand span { width: 168px; height: 43px; }
}

/* Carrot copy contains bare URLs and long agency names that will not break.
   One of them pushed an article page 41px wide at 360px. Long words wrap
   rather than forcing the whole document to scroll sideways. */
.d-prose, .d-prose p, .d-prose li, .d-faq p, .d-lede { overflow-wrap: anywhere; }

/* ==================================================================
   MOTION
   Scoped entirely under [data-motion="on"], which is set by a pre-paint
   snippet only when JS is running and the visitor has not asked for
   reduced motion. If that snippet never runs, or motion.js fails to
   report ready, the attribute is removed and none of this applies, so
   the page is plain static HTML rather than a blank screen.
   ================================================================== */

[data-motion="on"] main > * {
  opacity: 0;
  transform: translateY(15px);
}
[data-motion="on"] main > *.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .62s ease, transform .62s cubic-bezier(.22,.68,.3,1);
}

/* Children of a grid arrive in sequence rather than as one slab. */
[data-motion="on"] main > *.is-in .is-stagger {
  animation: vd-rise .58s cubic-bezier(.22,.68,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 65ms + 90ms);
}
@keyframes vd-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Header gains weight once the page has moved under it. */
.is-stuck { box-shadow: 0 6px 22px -14px rgba(0,0,0,.45); }

/* Nothing above is allowed past this. */
@media (prefers-reduced-motion: reduce) {
  [data-motion="on"] main > *,
  [data-motion="on"] main > *.is-in { opacity: 1; transform: none; transition: none; }
  [data-motion="on"] main > *.is-in .is-stagger { animation: none; }
}