/* Home flow: rhythm, alternating cream/navy, next-step links (round 8) */
:root{--hf-navy:#0f2340;--hf-cream:#faf6ea;--hf-gold:#e8b931;--hf-ink:#1a1a1a}
main section.b-build,main section.b-ideas,main section.b-built,main section.b-kit,main section.b-plans,main section.b-xteaser,main section.b-close,
section.b-build,section.b-ideas,section.b-built,section.b-kit,section.b-plans,section.b-xteaser,section.b-close{padding:4.5rem 1.2rem;margin:0;overflow-x:clip}
section.b-build,section.b-built,section.b-plans,section.b-close{background:var(--hf-navy);color:#fff}
section.b-ideas,section.b-kit,section.b-xteaser{background:var(--hf-cream);color:var(--hf-ink)}
section.b-built>h2,section.b-built>p,section.b-built .b-built-sub,section.b-built h2,
section.b-plans>h2,section.b-plans h2,section.b-plans>.say,section.b-plans .say,
section.b-close h2,section.b-close p,section.b-build h2,section.b-build>p{color:#fff}
section.b-built figcaption,section.b-built .sample-tag{color:#f3ead2}
section.b-plans a.plan,section.b-plans .plan-card{color:var(--hf-ink)}
section.b-plans a.plan *,section.b-plans .plan-card *{color:inherit}
.b-sec-inner,section.b-xteaser>*,section.b-close>*{max-width:1100px;margin-left:auto;margin-right:auto}
section h2{font-size:clamp(1.7rem,4.5vw,2.6rem);line-height:1.15}
section .say,section p{font-size:1.08rem;line-height:1.55}
a.next-link{display:inline-block;margin-top:2rem;font-weight:700;font-size:1.1rem;text-decoration:underline;text-underline-offset:4px;color:var(--hf-navy)}
section.b-build a.next-link,section.b-built a.next-link,section.b-plans a.next-link{color:var(--hf-gold)}
.b-show-quote{margin:2rem auto 0;max-width:760px;background:#fff;color:var(--hf-ink);border-radius:14px;padding:1.4rem 1.5rem}
.b-show-quote *{color:var(--hf-ink)}
.b-show-quote blockquote{margin:0;font-size:1.12rem;line-height:1.55}
.b-show-quote figcaption{margin-top:.7rem;font-weight:700}
.ff-price{margin:.6rem 0}
.ff-price,.ff-price *{color:var(--hf-navy)!important}
.ff-price .price,.ff-price strong,.ff-price .amt{font-size:2.6rem;font-weight:800}
.b-close{text-align:center}
.b-close-tag{font-weight:800;letter-spacing:.04em;color:var(--hf-gold)!important;margin:0 0 .4rem}
.b-close h2{margin:.2rem 0 1.4rem}
.b-close-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.b-close-btn{display:inline-block;min-width:150px;padding:1rem 1.6rem;border-radius:999px;font-weight:800;font-size:1.15rem;text-decoration:none}
.b-close-email{background:var(--hf-gold);color:var(--hf-navy)!important}
.b-close-text{border:2px solid #fff;color:#fff!important}
img,video{max-width:100%;height:auto}
/* v10 fixes */
section.b-build,section.b-built,section.b-plans,section.b-close{background:var(--hf-navy)!important}
section.b-ideas,section.b-kit,section.b-xteaser{background:var(--hf-cream)!important}
section.b-build,section.b-ideas,section.b-built,section.b-kit,section.b-plans,section.b-xteaser,section.b-close{padding:4.5rem 1.2rem!important}
section.b-built .b-h2,section.b-built .b-built-sub,section.b-built>.b-sec-inner>p,section.b-built>.b-sec-inner>h2{color:#fff!important}
section.b-built .b-tile{color:var(--hf-ink)}
section.b-built .b-tile figcaption,section.b-built .b-tile .sample-tag,section.b-built .b-swatches li{color:var(--hf-ink)!important}
section.b-ideas img{object-fit:contain!important;height:auto!important;aspect-ratio:auto!important}
.b-eyebrow,.b-kicker,.sample-tag,section label,section legend,section .fine,section small,.ff-fine,.ff-after,nav a,.nav-dd-btn,footer,footer a{font-size:max(15px,1em)!important}
.b-eyebrow,.b-kicker{font-size:16px!important}
section label,section .fine,.ff-fine,nav a,.nav-dd-btn{font-size:16px!important}
section.b-plans .sep-line{color:#fff!important}
section.b-built .b-store-visit{color:var(--hf-gold)!important;font-weight:700}
.f-small,.b-swatches li,.nav-dd-panel a,.nav-dd-panel li{font-size:16px!important}
section.b-plans .monthly-lead{color:#fff!important;font-size:16px!important}
.ff-title{font-size:16px!important}
.nav-links > li > a,.nav-links li,.nav-dd-btn,.nav-dd{font-size:16px!important}
.nav-cta{font-size:16px!important}
.hero .hero-small{display:block;margin-top:1rem;font-size:16px!important;font-weight:600}
/* r10: Our Work + new alternation (hero cream, work navy, build cream, ideas navy, kit cream, plans navy, extras cream, close navy) */
section.b-build{background:var(--hf-cream)!important;color:var(--hf-ink)!important}
section.b-build h2,section.b-build>p,section.b-build .b-build-inner>p,section.b-build h3,section.b-build label,section.b-build .b-count,section.b-build legend{color:var(--hf-ink)!important}
section.b-build a.next-link{color:var(--hf-navy)!important}
section.b-ideas{background:var(--hf-navy)!important;color:#fff!important}
section.b-ideas .b-h2,section.b-ideas h2,section.b-ideas .b-ideas-sub,section.b-ideas .sample-grid-label,section.b-ideas legend,section.b-ideas a.next-link{color:#fff!important}
section.b-ideas a.next-link{color:var(--hf-gold)!important}
section.b-ideas .chip span{color:var(--hf-ink)!important}
section.b-ideas .chip{background:#fff!important}
.b-work .w-name{color:#fff!important;font-size:clamp(1.3rem,3vw,1.8rem);margin:0 0 .4rem}
.b-work .w-line,.b-work .w-cap{color:#fff!important;margin:.2rem 0 1rem}
.b-work .w-feature,.b-work .w-card,.b-work .w-anim{text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:1.2rem;margin:0 0 1.4rem}
.b-work .w-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.b-work .w-tile{margin:0;background:#0b1a30;border-radius:12px;overflow:hidden}
.b-work .w-tile figcaption{padding:.6rem .75rem;color:#fff!important;font-size:16px}
.b-work .w-vid{display:block;width:100%;height:auto;background:#000}
.b-work .w-grid3 .w-vid{aspect-ratio:4/5;object-fit:cover}
.b-work .w-small .w-vid{aspect-ratio:1/1}
.b-work .w-brandrow{display:grid;grid-template-columns:1fr 1.4fr;gap:1rem;margin-top:1rem;align-items:start}
.b-work .w-colors{background:#fff;border-radius:12px;padding:.9rem}
.b-work .w-colors *{color:var(--hf-ink)!important}
.b-work .w-store{display:block;background:#1b4527;border-radius:12px;overflow:hidden;text-decoration:none}
.b-work .w-store img{display:block;width:100%;height:auto}
.b-work .w-store-cap{display:block;padding:.6rem .8rem;color:var(--hf-gold)!important;font-weight:700}
.b-work .w-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.b-work .w-slab{display:grid;grid-template-columns:2fr 1fr;gap:.6rem;align-items:stretch}
.b-work .w-slab .w-vid{height:100%;object-fit:cover;border-radius:10px}
.b-work .w-card>.w-vid{border-radius:10px}
.b-work .w-ai{display:inline-block;font-size:16px;font-weight:700;color:var(--hf-gold)!important;}
.b-work .w-tagline{font-family:inherit;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;color:var(--hf-gold)!important;margin:1.6rem 0 0}
.b-work .w-cta{color:#fff!important}
.b-work .b-show-quote{margin-top:1.2rem}
@media (max-width:900px){.b-work .w-pair{grid-template-columns:1fr}}
@media (max-width:640px){.b-work .w-grid3{grid-template-columns:1fr}.b-work .w-brandrow{grid-template-columns:1fr}.b-work .w-small{grid-template-columns:1fr 1fr 1fr;gap:.5rem}.b-work .w-small figcaption{font-size:16px;padding:.4rem}}
/* r10 contrast fixes */
.b-work .w-store{color:var(--hf-gold)}
#build .b-form .f-small,#build .b-form .f-small a{color:#3d4a63}
#samples .sample-card{background:#fff;color:#0f1e3a}
/* r11 work rebuild */
.b-work .w-lead{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.b-work .w-hero .w-vid{aspect-ratio:9/14;object-fit:cover;width:100%;display:block}
.b-work .w-stack{display:grid;gap:1rem;align-content:start}
.b-work .w-stack .w-vid{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}
.b-work .w-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:560px}
.b-work .w-grid2 .w-vid{aspect-ratio:4/5;object-fit:cover;width:100%;display:block}
.b-work .w-ov{position:relative;border-radius:10px;overflow:hidden}
.b-work .w-ov .w-vid{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.b-work .w-ovname{position:absolute;left:0;right:0;bottom:0;margin:0;padding:1.2rem 1rem .9rem;font-weight:900;font-size:clamp(28px,5vw,60px);line-height:1.05;color:#fff;background:linear-gradient(transparent,rgba(8,16,30,.85));text-shadow:0 2px 8px rgba(0,0,0,.5)}
.b-work .b-show-quote{background:#fff;color:#0f1e3a;border-radius:12px;padding:1rem}
.b-work .b-show-quote p,.b-work .b-show-quote strong,.b-work .b-show-quote .w-owner{color:#0f1e3a!important}
@media (max-width:640px){.b-work .w-lead{grid-template-columns:1fr}.b-work .w-grid2{grid-template-columns:1fr 1fr;gap:.5rem}}
/* r12 logo tiles */
.b-work .w-logo .w-vid{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.b-work .w-logo .w-name{font-size:clamp(24px,3vw,34px)}
.b-work .w-logo .w-cap{font-size:18px;font-weight:700}
.b-work .w-tile2{margin:0 0 1.4rem}
.b-work .w-tile2 .w-vid{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;border-radius:10px}
.b-work .w-tile2 figcaption{color:#fff!important}
/* r13: readable grandfather note (navy on cream, ~14:1) */
.monthly-lead,section.b-plans .monthly-lead,.monthly-note{background:#faf6ea!important;color:#0f2340!important;border:1px solid #e6dfce;border-radius:10px;padding:.55rem .8rem!important;display:inline-block;font-weight:600}
/* R14: Mama Amina + Slab Kingz avatar row */
.b-work .w-grid2.w-small{grid-template-columns:1fr 1fr 1fr;max-width:840px}
@media (max-width:640px){.b-work .w-grid2.w-small{grid-template-columns:1fr 1fr}.b-work .w-grid2.w-small>.w-tile:first-child{grid-column:1/-1}}
/* r15: four-tile Our Work row */
.b-work .w-grid2.w-small{grid-template-columns:repeat(4,1fr);max-width:1120px}
@media (max-width:900px){.b-work .w-grid2.w-small{grid-template-columns:1fr 1fr}.b-work .w-grid2.w-small>.w-tile:first-child{grid-column:1/-1}.b-work .w-grid2.w-small>.w-paige{grid-column:1/-1}.b-work .w-small .w-paige .w-vid{aspect-ratio:1/1;object-position:center top}}

/* R16: features tick-box block now closes the idea board (cream card on the navy band, right above "Next, get your Branding Kit") */
section.b-ideas .b-feats{margin:2rem auto 0;max-width:900px;background:var(--hf-cream);color:var(--hf-ink);border-radius:16px;padding:1.2rem 1.2rem 1.3rem;text-align:left}
section.b-ideas .b-feats .b-chips{margin-top:0;gap:.6rem}
section.b-ideas .b-feats .b-feats-lead{margin:0 0 .9rem;font-size:1.05rem;color:var(--hf-ink)!important}
section.b-ideas .b-feats .b-feats-lead a{color:#1b3160;font-weight:700;text-decoration:underline}
section.b-ideas .b-feats legend{font-size:1.05rem;color:var(--hf-ink)!important}
section.b-ideas .b-feats .chip{background:transparent!important;border:0!important;padding:0!important}
section.b-built .sample-grid-label{color:var(--hf-gold)!important}
/* R15: hide the 1px dark seam at the Paige video's right edge */
.b-work .w-paige .w-vid{width:calc(100% + 2px);max-width:none;margin-left:-1px;display:block;background:#f4f6fa}

/* R16 swap: Paige leads the faces row, Amara's journey is last. Both span the full width on phone/tablet so there is no hole. */
@media (max-width:900px){.b-work .w-grid2.w-small>.w-last{grid-column:1/-1}}

/* R16 tighten (spacing and oversized tiles only, no content removed) */
section.b-build,section.b-ideas,section.b-built,section.b-kit,section.b-plans,section.b-xteaser,section.b-close{padding:3.25rem 1.2rem!important}
@media (max-width:640px){section.b-build,section.b-ideas,section.b-built,section.b-kit,section.b-plans,section.b-xteaser,section.b-close{padding:2.2rem 1.1rem!important}}
a.next-link{margin-top:1.2rem}
.b-show-quote{margin-top:1.2rem}
section.b-ideas .b-feats{margin-top:1.2rem}
.b-work .w-feature,.b-work .w-card,.b-work .w-anim{padding:1rem;margin-bottom:1rem}
.b-work .w-line,.b-work .w-cap{margin:.2rem 0 .7rem}
.b-work .w-tile2{margin-bottom:.6rem}
.b-work .w-pair{gap:1rem}
.b-work .w-tagline{margin-top:1rem}
.b-work .w-lead{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:.8rem}
@media (max-width:640px){
  .b-work .w-lead{grid-template-columns:1fr;gap:.5rem}
  .b-work .w-stack{grid-template-columns:1fr 1fr;gap:.5rem}
  .b-work .w-pair{grid-template-columns:1fr 1fr;gap:.5rem}
  .b-work .w-pair .w-tile2 figcaption{font-size:16px;padding:.4rem .5rem}
}
/* R16 tighten, desktop: the two logo burn-ins sit side by side, mascot pair + Marrowgate share one row (instead of three full-width 16:9 slabs) */
@media (min-width:901px){
  .b-work .b-built-inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1rem}
  .b-work .b-built-inner>*{grid-column:1/-1}
  .b-work .b-built-inner>.w-logo{grid-column:span 2}
  .b-work .b-built-inner>.w-pair{display:contents}
  .b-work .b-built-inner>.w-pair>.w-tile2{grid-column:span 1}
  .b-work .b-built-inner>.w-build{grid-column:span 2}
  .b-work .w-pair>.w-tile2{margin-bottom:1rem}
}
/* R16 tighten, phone: Amara's journey (now last) shows square so it is not a 437px slab; the title and her face stay in frame */
@media (max-width:900px){.b-work .w-grid2.w-small>.w-last .w-vid{aspect-ratio:1/1;object-position:center 12%}}
/* R16 gate: faces row (Paige first) sits above the IBRAHIM'S card; brand colors card fills its row */
.b-work .w-faces{text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:1rem;margin:0 0 1rem}
@media (max-width:640px){.b-work .w-faces{padding:.7rem}}
@media (min-width:901px){
 .b-work .w-brandrow{align-items:stretch}
 .b-work .w-colors{display:flex;flex-direction:column}
 .b-work .w-colors .b-swatches{flex:1;display:flex;flex-direction:column;justify-content:space-between;margin:.6rem 0 0;padding:0;gap:.5rem}
 .b-work .w-colors .b-swatches li{flex:1}}
/* R16: #kit is a scroll target; keep the card top clear of anything above it */
section#kit{scroll-margin-top:12px}

#samples .sample-ai{display:block;margin-top:2px;font-size:15px;font-weight:700;color:#7a5200}
#samples .sample-ai[hidden]{display:none}
#samples video[data-slot="bluestem"]{object-position:50% 25%}
/* r16 grid: four sample tiles 4-up (>=1280), 2x2 (641-1199), one column (<=640). No flex gaps, no orphan row. */
#samples .sample-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;justify-content:stretch;align-items:stretch}
#samples .sample-grid .sample-card{flex:none;min-width:0;width:auto}
#samples .sample-card video{height:auto;aspect-ratio:472/304}
@media (max-width:1279px){#samples .sample-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){#samples .sample-grid{grid-template-columns:1fr}#samples .sample-card video{height:180px;aspect-ratio:auto}}
/* r16 label slot: every tile has <span class="sample-ai" data-ai="..."> ; empty ones stay hidden until wording is applied */
#samples .sample-ai:empty{display:none}
#samples .sample-grid-inner{max-width:1280px}
@media (min-width:1280px){#samples .sample-card .sample-name{padding:.75rem .7rem}#samples .sample-card .sample-tag{letter-spacing:.03em;padding:.2rem .5rem}}

/* made-by-us wording (2026-10-22): long wording on wide screens, short on narrow so captions never wrap or change card heights */
.b-work .ai-s{display:none}
@media(max-width:640px){.b-work .ai-l{display:none}.b-work .ai-s{display:inline}}

/* 2026-10-23 Idea Board: two big tiles under the IBRAHIM'S highlight (replaces the #samples idea board and the Slab Kingz / Heartland Our Work cards) */
.b-work .w-idea{margin:0 0 1.4rem;text-align:center;position:relative;padding:2.2rem 1rem 1.2rem;border:2px solid var(--hf-gold);border-radius:20px;background:linear-gradient(180deg,rgba(201,162,39,.16),rgba(201,162,39,.05));box-shadow:0 0 0 4px rgba(201,162,39,.12),0 10px 30px rgba(0,0,0,.25);margin-top:2.2rem}
.b-work .w-idea-h{font-family:'Zilla Slab',serif!important;font-size:clamp(1.9rem,4.5vw,2.6rem);line-height:1.1;color:var(--hf-gold)!important;margin:.2rem 0 .5rem;text-align:center}
.b-work .w-idea-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:640px){.b-work .w-idea-grid{grid-template-columns:1fr}}
.b-work .idea-tile{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:16px;overflow:hidden;min-width:0}
.b-work .idea-vid{display:block;width:100%;height:auto;aspect-ratio:944/620;object-fit:cover;background:#000}
.b-work .idea-cap{padding:.8rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.b-work .idea-link{color:#fff!important;text-decoration:none;display:flex;flex-direction:column;gap:.15rem}
.b-work .idea-link::after{content:"";position:absolute;inset:0;z-index:1}
.b-work .idea-link:focus-visible{outline:3px solid var(--hf-gold);outline-offset:-3px}
.b-work .idea-name{font-family:'Zilla Slab',serif;font-weight:700;font-size:clamp(1.3rem,3vw,1.7rem);color:#fff}
.b-work .idea-hint{font-size:16px;font-weight:700;color:var(--hf-gold);text-decoration:underline;text-underline-offset:3px}
.b-work .idea-ai{align-self:flex-start}
.b-work .idea-play{position:absolute;z-index:2;top:.7rem;left:.7rem;min-height:44px;padding:.5rem 1.1rem;border:0;border-radius:999px;background:var(--hf-gold);color:#0f1e3a;font:800 16px/1.2 inherit;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.b-work .idea-play[hidden]{display:none}
section.b-features{padding-top:2.2rem!important}

/* Idea Board panel (2026-10-23 round 2): highlighted panel, ribbon, centered heading and lead */
.b-work .w-idea-ribbon{position:absolute;top:0;left:50%;transform:translate(-50%,-55%);background:var(--hf-gold);color:#0f1e3a;font:800 16px/1 'Zilla Slab',serif;letter-spacing:.14em;text-transform:uppercase;padding:.7rem 1.5rem;border-radius:999px;box-shadow:0 3px 12px rgba(0,0,0,.4);white-space:nowrap}
.b-work .w-idea-sub{font-size:1.15rem;line-height:1.4;color:#fff;margin:0 auto 1.3rem;max-width:34rem;text-align:center}
.b-work .idea-tile{text-align:left}
.b-work .w-idea{scroll-margin-top:4.2rem}