/* Direction B: bold and graphic. Poster type in the Assist blue with marigold; one family, Bricolage Grotesque. */
.dir-b {
  --blue: #303989; --blue-2: #3a45a6; --gold: #ffb627; --paper: #f4f1ea; --ink: #14141f; --muted: #55566a;
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: 16px;
  background: var(--paper); color: var(--ink);
}
.dir-b body { font: 400 1rem/1.55 var(--font); font-optical-sizing: auto; }
@media (min-width: 720px) { .dir-b { --gut: 40px; } }

/* Header sits on the blue hero */
.b-top { position: absolute; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 16px var(--gut); color: #fff; }
.b-logo img { width: 100px; }
.b-nav { display: none; gap: 28px; margin-left: auto; font-weight: 600; }
.b-nav a { text-decoration: none; }
.b-nav a:hover { color: var(--gold); }
.b-call { margin-left: auto; padding: 11px 18px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.b-call:hover { background: #fff; }
@media (max-width: 400px) { .b-call-num { display: none; } }
@media (min-width: 880px) { .b-nav { display: flex; } .b-call { margin-left: 8px; } .b-logo img { width: 124px; } }

/* Hero */
.b-hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(100svh, 980px); padding: 120px var(--gut) 40px; background: var(--blue); color: #fff;
}
.b-eyebrow { font-weight: 600; letter-spacing: 0.02em; color: var(--gold); }
.b-h1 { margin-top: 14px; font-weight: 800; font-size: clamp(3.4rem, 17vw, 13.5rem); line-height: 0.86; letter-spacing: -0.045em; }
.b-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.b-line > span { display: inline-block; }
.b-line-accent { color: var(--gold); }
.b-hero-foot { margin-top: 36px; display: grid; gap: 24px; }
.b-lede { max-width: 30rem; font-size: 1.125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.b-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.b-btn { display: inline-block; padding: 16px 24px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 700; text-decoration: none; transition: transform 0.2s, background 0.2s; }
.b-btn:hover { transform: translateY(-2px); background: #fff; }
.b-btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.b-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.b-stamp-wrap { position: absolute; top: 84px; right: -36px; width: 150px; height: 150px; }
.b-stamp { width: 100%; height: 100%; }
.b-stamp-disc { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; }
.b-stamp text { fill: #fff; font: 700 15px/1 var(--font); letter-spacing: 0.06em; }
.b-stamp-star { fill: var(--gold); }
@media (min-width: 880px) {
  .b-hero { padding-top: 140px; padding-bottom: 56px; }
  .b-hero-foot { grid-template-columns: 1fr auto; align-items: end; }
  .b-stamp-wrap { top: auto; bottom: 46%; right: 6%; width: 230px; height: 230px; }
}
@media (prefers-reduced-motion: no-preference) {
  .b-line > span { animation: b-up 1s cubic-bezier(0.2, 0.75, 0.1, 1) both; }
  .b-line:nth-child(2) > span { animation-delay: 0.08s; }
  .b-line:nth-child(3) > span { animation-delay: 0.16s; }
  .b-eyebrow, .b-hero-foot { animation: b-fade 0.9s ease 0.45s both; }
  .b-stamp { animation: b-pop 1s cubic-bezier(0.3, 1.5, 0.5, 1) 0.6s both; }
  .b-stamp-text { animation: b-spin 40s linear infinite; transform-origin: 100px 100px; }
}
@keyframes b-up { from { transform: translateY(105%); } }
@keyframes b-fade { from { opacity: 0; transform: translateY(14px); } }
@keyframes b-pop { from { opacity: 0; transform: scale(0.4) rotate(-60deg); } }
@keyframes b-spin { to { transform: rotate(360deg); } }

/* Marquee: moves on its own; scrolling speeds it up and flips its direction with yours */
.b-marquee { overflow: hidden; background: var(--gold); color: var(--ink); border-block: 2px solid var(--ink); }
.b-track { display: flex; width: max-content; }
.b-track-set { display: flex; align-items: center; gap: 28px; padding: 18px 14px; font-weight: 800; font-size: clamp(1.4rem, 3.2vw, 2.4rem); letter-spacing: -0.02em; white-space: nowrap; }
.b-track-set svg { fill: var(--ink); width: 0.7em; height: 0.7em; }
@media (prefers-reduced-motion: no-preference) {
  .b-track { animation: b-marquee 38s linear infinite; }
}
@keyframes b-marquee { to { transform: translateX(-50%); } }

/* Shared section heading */
.b-h2 { font-weight: 800; font-size: clamp(2.8rem, 9vw, 7.5rem); line-height: 0.9; letter-spacing: -0.04em; }
.b-h2 span { color: var(--blue); }

/* How it works: a line runs down the steps as you scroll */
.b-how { padding: 96px var(--gut) 72px; max-width: 1280px; margin: 0 auto; }
.b-steps { position: relative; margin-top: 56px; }
.b-steps ol { display: grid; gap: 40px; }
.b-steps-line { position: absolute; top: 0; bottom: 0; left: 27px; width: 4px; background: rgba(20, 20, 31, 0.1); border-radius: 4px; }
.b-steps-fill { position: absolute; inset: 0; background: var(--blue); border-radius: 4px; transform-origin: 50% 0; }
.b-step { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 20px; align-items: start; }
.b-step-n {
  position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--ink); font-weight: 800; font-size: 1.1rem; transition: background 0.4s, color 0.4s, border-color 0.4s;
}
.b-step.is-on .b-step-n { background: var(--gold); border-color: var(--gold); }
.b-step-card { padding: 22px 24px; border-radius: 22px; background: #fff; box-shadow: 0 2px 0 rgba(20, 20, 31, 0.08); }
.b-step-card h3 { font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.05; letter-spacing: -0.02em; }
.b-step-card p { margin-top: 10px; color: var(--muted); }
.b-step-card a { font-weight: 700; color: var(--blue); }
@media (min-width: 880px) {
  .b-steps-line { left: 50%; margin-left: -2px; }
  .b-steps ol { gap: 24px; }
  .b-step { grid-template-columns: 1fr 72px 1fr; gap: 32px; align-items: center; }
  .b-step-n { grid-column: 2; grid-row: 1; width: 72px; height: 72px; font-size: 1.3rem; }
  .b-step:nth-child(odd) .b-step-card { grid-column: 1; grid-row: 1; }
  .b-step:nth-child(even) .b-step-card { grid-column: 3; grid-row: 1; }
  .b-step-card { padding: 32px; }
}

/* Services as poster tiles */
.b-svc { padding: 72px var(--gut) 96px; max-width: 1280px; margin: 0 auto; }
.b-svc-head p { margin-top: 16px; max-width: 28rem; font-size: 1.125rem; color: var(--muted); }
.b-tiles { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.b-tile {
  position: relative; display: flex; flex-direction: column; min-height: 190px; padding: 18px; border-radius: 22px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.b-tile-0 { background: var(--blue); color: #fff; }
.b-tile-1 { background: var(--ink); color: #fff; }
.b-tile-2 { background: var(--gold); color: var(--ink); }
.b-tile-n { font-weight: 700; font-size: 0.875rem; opacity: 0.7; }
.b-tile h3 { margin-top: auto; padding-top: 24px; font-weight: 800; font-size: clamp(1.45rem, 3.4vw, 2.6rem); line-height: 0.95; letter-spacing: -0.03em; hyphens: auto; }
.b-tile p { margin-top: 10px; font-size: 0.875rem; line-height: 1.45; opacity: 0.85; }
.b-tile:hover { transform: translateY(-6px) rotate(-1deg); }
/* Small phones: a long word (Retirement) at full size would push its column wider than the screen. */
@media (max-width: 519px) { .b-tile p { display: none; } .b-tile { padding: 14px; } .b-tile h3 { font-size: clamp(1.1rem, 5.6vw, 1.6rem); overflow-wrap: break-word; } }
@media (max-width: 879px) { .b-tile:last-child { grid-column: span 2; min-height: 150px; } }
@media (min-width: 880px) { .b-tiles { grid-template-columns: repeat(3, 1fr); gap: 14px; } .b-tile { min-height: 280px; padding: 26px; } .b-tile p { font-size: 0.9375rem; } }
.b-new { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 18px; border: 2px dashed var(--ink); border-radius: 22px; font-weight: 700; }
.b-new-label { padding: 4px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.b-new-item { font-size: 1.15rem; }
.b-also { margin-top: 28px; color: var(--muted); }
.b-also strong { color: var(--ink); }

/* Footer: the phone number as the poster */
.b-foot { padding: 80px var(--gut) 120px; background: var(--ink); color: #fff; overflow: hidden; }
.b-foot-kicker { font-weight: 700; color: var(--gold); }
.b-bignum { display: block; margin-top: 8px; font-weight: 800; font-size: clamp(2.9rem, 14vw, 11rem); line-height: 0.9; letter-spacing: -0.045em; text-decoration: none; white-space: nowrap; }
.b-bignum:hover { color: var(--gold); }
.b-foot-grid { margin-top: 56px; display: grid; gap: 32px; color: rgba(255, 255, 255, 0.8); }
.b-foot-grid h3 { color: #fff; font-weight: 800; font-size: 1.3rem; margin-bottom: 8px; }
.b-foot-grid address { font-style: normal; }
.b-foot-grid p, .b-foot-grid a[href*="google"] { margin-top: 8px; display: block; }
.b-foot-grid a { color: #fff; font-weight: 600; }
.b-fine { margin-top: 56px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); }
.b-fine .stars { color: var(--gold); }
@media (min-width: 880px) { .b-foot-grid { grid-template-columns: repeat(3, 1fr); } }