/* Sixth April — home */
.hero { position: relative; color: #fff; background-color: var(--night); min-height: max(660px, calc(100svh - var(--head) - 120px)); display: flex; }
.hero-ph { position: absolute; inset: 0; }
.hero-ph::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.45) 36%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.4) 100%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 30%, transparent 60%, rgba(0,0,0,.55) 100%); }
.hero-ph::after { z-index: 2; }
.hero .cols { z-index: 2; }
.hero-in { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; padding-top: 22px; padding-bottom: clamp(28px, 4vw, 48px); gap: 48px; }
.hero-spec { display: flex; justify-content: space-between; gap: 16px; color: #E8E8E8; }
.hero-grid { align-items: end; row-gap: 40px; }
.hero-copy { grid-column: 1 / span 7; }
.hero-copy h1 { margin-bottom: 26px; max-width: 5.6em; }
.hero-copy h1 .tone { display: block; }
.hero-copy .tone { color: #9A9A9A; }
.hero-copy .lead { color: #EDEDED; margin-bottom: 30px; max-width: 27em; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.hero .btn-line { background: rgba(0,0,0,.55); }
.clock { grid-column: 9 / -1; }
.clock-k { display: flex; justify-content: space-between; border-top: 1px solid #fff; padding-top: 10px; color: #fff; }
.clock-n { font-size: clamp(9rem, min(21vw, 36vh), 22rem); color: var(--signal); margin: 0 0 0 -0.04em; line-height: 1; letter-spacing: -.035em; }
.clock-hms { font: 400 15px var(--mono); font-variant-numeric: tabular-nums; margin-top: 16px; color: #fff; }
.clock-what { margin: 6px 0 16px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.clock .seg { color: #fff; background: rgba(0,0,0,.35); }
@media (max-width: 1100px) { .hero-copy { grid-column: 1 / span 8; } .clock { grid-column: 9 / -1; } }
@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero-copy, .clock { grid-column: 1 / -1; }
  .hero-spec span:nth-child(1), .hero-spec span:nth-child(3) { display: none; }
  .hero-copy .tone { color: #C4C4C4; }
  .hero-copy h1 { max-width: none; }
  .clock-n { font-size: clamp(8rem, 44vw, 13rem); }
  .hero-ph::before { background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.66) 50%, rgba(0,0,0,.88) 72%, rgba(0,0,0,.9) 100%); }
}
@media (max-width: 420px) { .clock .seg button { padding: 0 11px; } }

.idx-note { margin-top: 16px; }

/* who we help */
.who { padding-top: clamp(64px, 9vw, 128px); }
.who-top h2 { margin-bottom: 40px; max-width: 12em; }
.who-ph { height: clamp(300px, 58vh, 620px); margin-top: 0; }
.who-body { padding-block: 36px clamp(64px, 8vw, 112px); row-gap: 36px; }
.who-h { grid-column: 1 / span 5; }
.who-h .cap { padding: 0 0 20px; }
.who-h h3 { margin-bottom: 18px; }
.who-h p:not(.cap) { color: #D0D0D0; margin-bottom: 18px; max-width: 32em; }
.who-l { grid-column: span 3; }
.who-l:first-of-type { grid-column: 7 / span 3; }
.who-l h4 { margin-bottom: 8px; color: #A8A8A8; font-weight: 400; }
.who .link { color: #fff; }
@media (max-width: 860px) { .who-h { grid-column: 1 / -1; } .who-l, .who-l:first-of-type { grid-column: span 6; } }
@media (max-width: 600px) { .who-l, .who-l:first-of-type { grid-column: 1 / -1; } }

/* tax year ruler */
.year-h { align-items: end; margin-bottom: 48px; row-gap: 16px; }
.year-h h2 { grid-column: 1 / span 8; }
.year-meta { grid-column: 9 / -1; text-align: right; color: var(--grey); }
.ruler { position: relative; height: 96px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.ruler-m { display: grid; grid-template-columns: repeat(12, 1fr); height: 100%; }
.ruler-m span { border-left: 1px solid var(--hair); padding: 8px 0 0 8px; font: 400 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.ruler-ticks i { position: absolute; bottom: 0; width: 1px; height: 46px; background: var(--ink); }
.ruler-ticks i.big { width: 3px; height: 62px; }
.ruler-today { position: absolute; top: -2px; bottom: -14px; width: 3px; background: var(--signal); left: 0; }
.ruler-today span { position: absolute; bottom: -22px; left: 6px; white-space: nowrap; color: var(--ink); }
.ruler-today.flip span { left: auto; right: 8px; }
.next { margin-top: 56px; border-top: 1px solid var(--ink); }
.next li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 5fr) auto; gap: var(--gap); align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.next .num { font-size: clamp(4rem, 8vw, 7.5rem); }
.next .num small { font: 400 13px var(--mono); letter-spacing: .04em; margin-left: 10px; text-transform: uppercase; }
.next li:first-child .num { color: var(--signal); }
.next li:first-child .num small { color: var(--ink); }
.next .when { font: 500 14px var(--mono); }
.next h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); margin-bottom: 6px; }
.next p { color: var(--grey); font-size: 15px; max-width: 36em; }
.next button { min-height: 40px; padding: 0 12px; border: 1px solid var(--ink); background: none; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.next button:hover { background: var(--ink); color: #fff; }
.year-btns { margin-top: 36px; }
@media (max-width: 860px) {
  .year-h h2, .year-meta { grid-column: 1 / -1; text-align: left; }
  .ruler-m span:nth-child(even) { font-size: 0; }
  .next li { grid-template-columns: auto minmax(0, 1fr); }
  .next .when { grid-column: 2; grid-row: 1; text-align: right; }
  .next .txt { grid-column: 1 / -1; }
  .next button { grid-column: 1 / -1; justify-self: start; }
}

/* price table */
.price-tbl .pr td .num { font-size: clamp(3rem, 5vw, 4.6rem); display: block; padding-top: 6px; }
.price-tbl .pr th { font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--grey); vertical-align: bottom; }
.price-tbl td:nth-child(4) { background: rgba(255, 59, 31, .0); }
.price-btns { margin-top: 28px; align-items: center; gap: 20px; }
@media (max-width: 600px) { .price-tbl { font-size: 14px; } .price-tbl th, .price-tbl td { padding-right: 8px; } }

/* switching over photo */
.switch-band { position: relative; color: #fff; background-color: var(--night); }
.sw-ph { position: absolute; inset: 0; }
.sw-ph::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.82) 100%); }
.sw-ph::after { z-index: 2; }
.sw-in { position: relative; z-index: 3; padding-block: clamp(80px, 12vw, 180px) clamp(40px, 5vw, 72px); }
.sw-in h2 { max-width: 13em; margin-bottom: clamp(120px, 18vw, 260px); }
.sw-in .tone { color: #B5B5B5; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); border-top: 1px solid #fff; }
.steps li { padding-top: 18px; }
.steps .num { display: block; font-size: clamp(3.4rem, 5vw, 4.8rem); color: #fff; }
.steps li:first-child .num { color: var(--signal); }
.steps .mono { display: block; margin: 14px 0 8px; color: #D6D6D6; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: #DCDCDC; font-size: 15px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 32px; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* quotes */
.quotes { align-items: end; row-gap: 48px; }
.q1 { grid-column: 1 / span 8; margin: 0; }
.q1 blockquote { margin: 0 0 20px; font-weight: 650; }
.q2 { grid-column: 10 / -1; margin: 0; }
.q2 blockquote { margin: 0 0 16px; font-size: 1.15rem; line-height: 1.4; font-weight: 500; }
.quotes figcaption { color: var(--grey); }
@media (max-width: 860px) { .q1, .q2 { grid-column: 1 / -1; } }

/* team names */
.names { border-top: 1px solid var(--ink); margin-bottom: 28px; }
.names li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.names .nm { font-size: clamp(2.6rem, 5.6vw, 5rem); font-weight: 780; letter-spacing: -.05em; line-height: 1; }
.names .mono { color: var(--grey); }
.band-st { margin-top: 18px; }
