:root {
  --brush-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath fill='%23D4A15D' d='M8 14C60 8 140 12 210 9s140 1 183-2l-7 11 10 9-7 10 6 10c-65 5-145 2-215 6-60 2-120-2-174 1l7-10-9-9 8-10z'/%3E%3Cpath fill='%23fff' fill-opacity='.22' d='M34 22c110-4 220 1 330-3v2c-110 4-220-1-330 3zM60 40c90-3 190 1 280-2v2c-90 3-190-1-280 2z'/%3E%3C/svg%3E");
}

.b-brush {
  position: relative;
  padding-inline: 0.1em;
  margin-inline: -0.06em;
  background-image: var(--brush-gold);
  background-repeat: no-repeat;
  background-position: right 88%;
  background-size: 100% 62%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[data-brush].b-brush { background-size: 0% 62%; transition: background-size 1100ms var(--ease-lux); transition-delay: var(--brush-delay, 150ms); }
[data-brush].b-brush.is-in { background-size: 100% 62%; }
.p-band--dark .b-brush { color: var(--navy); background-position: right 60%; background-size: 100% 100%; }
.p-band--dark [data-brush].b-brush { background-size: 0% 100%; }
.p-band--dark [data-brush].b-brush.is-in { background-size: 100% 100%; }

.b-hero { position: relative; isolation: isolate; overflow: clip; padding-top: clamp(64px, 8vw, 104px); }
.b-hero .pattern { z-index: -1; opacity: 0.05; background-image: var(--pattern-navy); -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 22%, #000, rgba(0, 0, 0, 0.45) 45%, transparent 76%); mask-image: radial-gradient(ellipse 65% 55% at 50% 22%, #000, rgba(0, 0, 0, 0.45) 45%, transparent 76%); }
.b-hero .glow { display: none; }
.b-hero__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.b-hero__head .p-sub { max-width: 38em; }
.b-hero .p-form { width: 100%; }
.b-hero .p-underline { align-self: center; }
.b-hero .notch { --notch-bg: var(--cream); margin-top: clamp(56px, 7vw, 88px); }
.b-hero .notch > .ph { aspect-ratio: 16 / 8; background: var(--cream-3); }

.b-cards .p-card { position: relative; }
.b-cards .p-card .round-arrow { position: absolute; top: 28px; left: 28px; }
@media (hover: hover) and (pointer: fine) { .b-cards .p-card:hover .round-arrow { transform: rotate(-45deg); } }

.b-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.b-step { display: flex; flex-direction: column; gap: 14px; }
.b-step .bezel { --r: var(--r-card); margin-bottom: 10px; }
.b-step__media { position: relative; aspect-ratio: 16 / 10; }
.b-step__media img { transition: transform 1400ms var(--ease-lux); }
@media (hover: hover) and (pointer: fine) { .b-step:hover .b-step__media img { transform: scale(1.04); } }
.b-step__media .p-tag { position: absolute; top: 18px; right: 18px; z-index: 1; background: var(--white); color: var(--navy); }
.b-step p { color: var(--graphite); max-width: 34em; }

.b-gov { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.b-gov__text { display: flex; flex-direction: column; gap: 22px; }
.b-gov > .bezel { --r: var(--r-card); }
.b-gov .ph { aspect-ratio: 1; }

.b-cta { text-align: center; isolation: isolate; overflow: clip; }
.b-cta .pattern { z-index: -1; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 76%); mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000, transparent 76%); }
.b-cta .p-accent__inner { gap: 28px; }
.b-cta .p-sub { color: var(--on-dark-strong); font-weight: 700; }

@media (max-width: 900px) {
  .b-hero .notch > .ph { aspect-ratio: 4 / 5; }
  .b-steps, .b-gov { grid-template-columns: minmax(0, 1fr); }
  .b-gov > .bezel { order: -1; }
  .b-gov .ph { aspect-ratio: 4 / 3; }
}