/*
 * BFO theme — Homepage (Step 8, v0.20.0). Scoped to the homepage section classes (.bfo-h*).
 * Mobile first (<=767px), tablet follows desktop (>=768px), desktop >=1025px.
 * Font sizes come from theme.json / bfo-shell.css; only display touches here.
 */

.bfo-sec .screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- 1 Hero ---------- */
.bfo-sec.bfo-hhero{ background:#fff; text-align:center; padding:40px 0 44px; }
.bfo-hhero h1{ margin-bottom:18px !important; }
.bfo-hhero p.bfo-lead{ color:var(--bfo-slate); font-weight:400; margin:0 auto 24px; max-width:560px; }
.bfo-hhero .bfo-hhero__media{ min-height:300px; margin:0 0 22px; }
.bfo-hhero p.bfo-hhero__micro{ margin-top:16px; font-size:14px !important; }
@media (max-width:767px){
  .bfo-hhero .wp-block-buttons.bfo-cta{ margin-top:0; }
}
@media (min-width:768px){
  .bfo-hhero br.bfo-br-m{ display:none; }
  .bfo-sec.bfo-hhero{ background:var(--bfo-navy); text-align:left; min-height:620px; display:flex; align-items:center; padding:96px 0 104px; }
  .bfo-hhero .bfo-hhero__inner{ position:static; }
  .bfo-hhero .bfo-hhero__inner > :not(.bfo-hhero__media){ position:relative; z-index:2; }
  .bfo-hhero .bfo-hhero__media{ position:absolute !important; inset:0; z-index:0; min-height:0; margin:0; border-radius:0; align-items:flex-end; justify-content:flex-end;
    background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 13px,rgba(255,255,255,0) 13px 30px),linear-gradient(150deg,#0B4A6C,#244D63); }
  .bfo-hhero .bfo-hhero__media p.bfo-photo__label{ color:rgba(255,255,255,.6); padding:0 5vw 6vh; }
  .bfo-hhero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(90deg,rgba(3,59,90,.92) 0%,rgba(3,59,90,.72) 42%,rgba(3,59,90,.12) 72%,rgba(3,59,90,0) 100%); }
  body .wp-site-blocks .bfo-hhero h1{ color:#fff; max-width:640px; margin-bottom:24px !important; }
  .bfo-hhero p.bfo-lead{ color:#DCE6EF; max-width:560px; margin:0 0 30px; }
  .bfo-hhero p.bfo-hhero__micro{ color:rgba(255,255,255,.78); }
}
@media (min-width:1025px){ .bfo-sec.bfo-hhero{ min-height:680px; } }

/* ---------- Shared split (copy + photo) ---------- */
.bfo-hsplit .bfo-hsplit__photo{ min-height:240px; }
@media (min-width:768px){
  .bfo-hsplit .bfo-hsplit__grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
  .bfo-hsplit .bfo-hsplit__photo{ min-height:340px; }
}
@media (min-width:1025px){
  .bfo-hsplit .bfo-hsplit__grid{ gap:72px; }
  .bfo-hsplit .bfo-hsplit__photo{ min-height:400px; }
}

/* ---------- 2 Why it keeps happening (navy on phones, paper on desktop) ---------- */
.bfo-hwhy p.bfo-hwhy__turn{ margin-top:16px !important; font-weight:700; color:var(--bfo-navy); }
@media (max-width:767px){
  .bfo-sec.bfo-hwhy{ background:var(--bfo-navy); padding-bottom:0; }
  .bfo-hwhy .wp-block-heading{ color:#fff; }
  .bfo-hwhy p{ color:rgba(255,255,255,.82); }
  .bfo-hwhy p.bfo-lead{ color:#fff; font-weight:600; }
  .bfo-hwhy p.bfo-hwhy__turn{ color:#fff; }
  .bfo-hwhy .wp-block-details.bfo-acc{ background:transparent; border-color:rgba(255,255,255,.35); }
  .bfo-hwhy .wp-block-details.bfo-acc > summary{ color:#fff; }
  .bfo-hwhy .wp-block-details.bfo-acc p{ color:rgba(255,255,255,.82); }
  .bfo-hwhy .bfo-hwhy__photo{ margin:40px calc(-1 * var(--bfo-gutter)) 0; border-radius:0; min-height:260px; }
}
@media (min-width:768px){
  .bfo-sec.bfo-hwhy{ background:var(--bfo-paper); padding-bottom:calc(var(--bfo-sec-y) / 2); }
}

/* ---------- 3 The Barefoot approach ---------- */
.bfo-sec.bfo-happr{ background:var(--bfo-mist); }
@media (min-width:768px){
  .bfo-sec.bfo-happr{ background:var(--bfo-paper); padding-top:calc(var(--bfo-sec-y) / 2); }
}

/* ---------- 4 Pull quote band ---------- */
.bfo-sec.bfo-hquote{ background:var(--bfo-navy); padding:0; min-height:480px; display:flex; align-items:flex-end; }
.bfo-hquote .bfo-hquote__media{ position:absolute !important; inset:0; z-index:0; min-height:0; border-radius:0; align-items:flex-start;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 13px,rgba(255,255,255,0) 13px 30px),linear-gradient(150deg,#124C68,#244D63); }
.bfo-hquote .bfo-hquote__media p.bfo-photo__label{ color:rgba(255,255,255,.65); padding-top:120px; }
.bfo-hquote::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(3,59,90,0) 30%,rgba(3,59,90,.9) 100%); }
.bfo-hquote .bfo-wrap{ padding-bottom:40px; }
.bfo-sec p.bfo-hquote__text{ font:900 30px/1.08 var(--bfo-display) !important; letter-spacing:-.03em; color:#fff; text-wrap:balance; max-width:900px; }
@media (min-width:768px){
  .bfo-sec.bfo-hquote{ min-height:440px; align-items:center; }
  .bfo-hquote .bfo-hquote__media{ align-items:flex-end; justify-content:flex-end; }
  .bfo-hquote .bfo-hquote__media p.bfo-photo__label{ padding:0 4vw 4vh; }
  .bfo-hquote::before{ background:linear-gradient(90deg,rgba(3,59,90,.94) 0%,rgba(3,59,90,.78) 50%,rgba(3,59,90,.25) 100%); }
  .bfo-hquote .bfo-wrap{ padding-top:96px; padding-bottom:96px; }
  .bfo-sec p.bfo-hquote__text{ font-size:48px !important; }
}
@media (min-width:1025px){ .bfo-sec p.bfo-hquote__text{ font-size:56px !important; } }

/* ---------- 5 How we think about it ---------- */
.bfo-sec.bfo-hthink{ background:#fff; }
.bfo-hthink p.bfo-lead{ margin-bottom:14px; }
.bfo-hthink .bfo-hthink__copy > p:not([class*="bfo-eyebrow"]):not(.bfo-lead){ margin-top:0; }
@media (min-width:768px){
  .bfo-sec.bfo-hthink{ background:var(--bfo-paper); }
  .bfo-hthink .bfo-hthink__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
}
@media (min-width:1025px){ .bfo-hthink .bfo-hthink__grid{ gap:72px; } }

/* Four lenses (How you move…): photo tiles, label on a navy fade (v0.20.2) */
.bfo-hfour{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bfo-hfour .bfo-hfour__tile{ position:relative; overflow:hidden; min-height:190px; border-radius:var(--bfo-radius); display:flex; align-items:flex-end; }
.bfo-hfour .bfo-hfour__photo{ position:absolute !important; inset:0; z-index:0; min-height:0; border-radius:0; align-items:flex-start; }
.bfo-hfour .bfo-hfour__photo p.bfo-photo__label{ padding-top:22px; }
.bfo-hfour .bfo-hfour__tile::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(3,59,90,0) 35%,rgba(3,59,90,.88) 100%); }
.bfo-sec p.bfo-hfour__label{ position:relative; z-index:2; display:flex; flex-direction:column; gap:10px; padding:0 20px 18px;
  font:800 20px/1.15 var(--bfo-display) !important; letter-spacing:-.02em; color:#fff; }
.bfo-sec p.bfo-hfour__label::before{ content:""; width:30px; height:3px; border-radius:99px; background:var(--bfo-amber); }
@media (min-width:1025px){ .bfo-hfour .bfo-hfour__tile{ min-height:220px; } .bfo-sec p.bfo-hfour__label{ font-size:22px !important; padding:0 24px 22px; } }

/* Icon tiles (Takes 3 minutes…) */
.bfo-htiles{ display:grid; gap:14px; }
.bfo-sec p.bfo-htile{ position:relative; display:flex; align-items:center; gap:14px; padding:22px 20px; background:var(--bfo-mist); border:1px solid #D5E0E6; border-radius:var(--bfo-radius);
  font:700 16px/1.25 var(--bfo-body) !important; color:var(--bfo-navy); min-height:96px; }
.bfo-sec p.bfo-htile::before{ content:""; flex:none; width:30px; height:30px; background:var(--bfo-navy);
  -webkit-mask:var(--bfo-ico) center/contain no-repeat; mask:var(--bfo-ico) center/contain no-repeat; }
.bfo-htiles--quiz{ grid-template-columns:repeat(4,1fr); gap:0; margin:28px 0 4px; }
.bfo-htiles--quiz p.bfo-htile{ flex-direction:column; justify-content:flex-start; text-align:center; gap:10px; padding:4px 14px; min-height:0; background:none; border:0; border-radius:0;
  font-size:14px !important; border-left:1px solid var(--bfo-line); }
.bfo-htiles--quiz p.bfo-htile:first-child{ border-left:0; }
.bfo-htiles--quiz p.bfo-htile::before{ width:26px; height:26px; }
/* (think tiles retired v0.20.1) */
.bfo-htile--move{ --bfo-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13' cy='4' r='2'/%3E%3Cpath d='M7 21l3-6 3 2v5M10 15l1-5 4 3 3 1M11 10l-3 2-1 3'/%3E%3C/svg%3E"); }
.bfo-htile--history, .bfo-htile--time{ --bfo-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.bfo-htile--env{ --bfo-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.bfo-htile--matters{ --bfo-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E"); }
.bfo-htile--person{ --bfo-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M6.5 18.5a6 6 0 0 1 11 0'/%3E%3C/svg%3E"); }
.bfo-htile--answers{ --bfo-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
.bfo-htile--clarity{ --bfo-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E"); }

/* ---------- 6 Dispatch on the homepage: paper, tucked under How we think ---------- */
.bfo-hthink + .bfo-news--dispatch{ background:var(--bfo-paper); padding-top:0; }

/* ---------- 7 The Barefoot Method — homepage (A on phones, locked desktop section on desktop) ---------- */
@media (min-width:768px){
  .bfo-methodA--home .bfo-head{ max-width:780px; margin:0 auto 54px; text-align:center; }
  .bfo-methodA--home .bfo-head p.bfo-eyebrow{ justify-content:center; }
  .bfo-methodA--home .bfo-head p.bfo-lead{ color:var(--bfo-muted); }
}

/* Barefoot Method numerals in amber (homepage, Kyle 2 Oct) */
.bfo-methodA--home p.bfo-numeral{ color:rgba(242,160,31,.42); }
.bfo-methodA--home .bfo-methodA__copy.bfo-num-float > p.bfo-numeral{ font-size:72px !important; }

/* ---------- 8 Find your baseline ---------- */
.bfo-sec.bfo-hquiz{ padding-top:0; }
.bfo-hquiz .bfo-hquiz__card{ background:#fff; border-radius:var(--bfo-radius); padding:30px 22px; box-shadow:0 14px 34px rgba(3,59,90,.06); }
.bfo-hquiz .bfo-hquiz__card > p:not([class]){ margin-top:12px; }
@media (min-width:768px){
  .bfo-hquiz .bfo-hquiz__card{ padding:52px 56px; background:linear-gradient(115deg,#fff 55%,#FBF4E6 100%); }
  .bfo-hquiz .bfo-hquiz__card > *{ max-width:620px; }
  .bfo-hquiz .bfo-hquiz__card > .bfo-htiles{ max-width:640px; }
}

/* ---------- 9 Who we work with ---------- */
.bfo-sec.bfo-hwho{ background:var(--bfo-paper); }
.bfo-hlist{ display:grid; gap:10px; margin-top:6px !important; }
.bfo-sec p.bfo-hlist__row{ background:#fff; border:1px solid #D5E0E6; border-radius:14px; }
.bfo-sec p.bfo-hlist__row a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; text-decoration:none; color:var(--bfo-navy); font-weight:600; font-size:15px; }
.bfo-sec p.bfo-hlist__row a::after{ content:"→"; flex:none; color:var(--bfo-amber); font-weight:700; }
.bfo-sec p.bfo-hlist__row a:hover{ background:var(--bfo-mist); border-radius:14px; }
.bfo-sec p.bfo-hlist__row--plain{ padding:15px 18px; background:transparent; font-weight:600; font-size:15px !important; color:var(--bfo-navy); }
.bfo-hwho p.bfo-hwho__close{ margin-top:20px !important; color:var(--bfo-navy); }
@media (min-width:768px){
  .bfo-hwho .bfo-hsplit__grid{ align-items:stretch; }
  .bfo-hwho .bfo-hsplit__photo{ min-height:100%; }
  .bfo-hlist{ grid-template-columns:1fr 1fr; }
  .bfo-sec p.bfo-hlist__row--plain{ grid-column:1 / -1; }
  .bfo-hlist > p.bfo-hlist__row:last-child:nth-child(odd){ grid-column:1 / -1; } /* v0.21.0: odd row out spans full width */
}

/* ---------- 10 What we're after (photo right) ---------- */
.bfo-sec.bfo-hafter{ background:#fff; }
.bfo-hafter .bfo-hafter__photo{ margin-top:28px; }
@media (max-width:767px){ .bfo-hafter .bfo-hafter__photo{ min-height:240px; } }
@media (min-width:768px){
  .bfo-sec.bfo-hafter{ background:var(--bfo-mist); }
  .bfo-hafter .bfo-hafter__photo{ margin-top:0; }
}

/* ---------- 11 Who we are ---------- */
.bfo-sec.bfo-hwhoare{ background:var(--bfo-navy); }
.bfo-hwhoare .bfo-hwhoare__grid{ display:flex; flex-direction:column; }
.bfo-hwhoare .bfo-hwhoare__a, .bfo-hwhoare .bfo-hwhoare__b{ display:contents; }
.bfo-hwhoare p.bfo-eyebrow{ order:1; }
.bfo-hwhoare h2.wp-block-heading{ order:2; }
.bfo-hwhoare .bfo-hwhoare__photo{ order:3; min-height:220px; margin:8px 0 22px; }
.bfo-hwhoare .bfo-hwhoare__b > p{ order:4; }
.bfo-hwhoare .bfo-hwhoare__btn{ order:5; }
.bfo-hwhoare .bfo-hwhoare__b > .wp-block-details{ order:6; }
.bfo-hwhoare .bfo-photo{ background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 13px,rgba(255,255,255,0) 13px 30px),linear-gradient(150deg,#124C68,#244D63); }
.bfo-hwhoare .bfo-photo p.bfo-photo__label{ color:rgba(255,255,255,.65); }
@media (max-width:767px){
  .bfo-hwhoare .bfo-hwhoare__btn .wp-block-button__link{ background:transparent !important; color:var(--bfo-amber) !important; border:2px solid var(--bfo-amber); }
}
@media (min-width:768px){
  .bfo-hwhoare .bfo-hwhoare__grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:48px; row-gap:40px; align-items:start; }
  .bfo-hwhoare .bfo-hwhoare__a, .bfo-hwhoare .bfo-hwhoare__b{ display:block; }
  .bfo-hwhoare .bfo-hwhoare__photo{ order:0; grid-column:1 / -1; min-height:300px; margin:0; }
  .bfo-hwhoare .bfo-hwhoare__a{ order:1; } .bfo-hwhoare .bfo-hwhoare__b{ order:2; }
  .bfo-hwhoare .bfo-hwhoare__b{ padding-top:44px; }
}
@media (min-width:1025px){ .bfo-hwhoare .bfo-hwhoare__grid{ column-gap:72px; } .bfo-hwhoare .bfo-hwhoare__photo{ min-height:320px; } }

/* ---------- 12 Coming early 2027 (soft panel + frosted arch, as the desktop source) ---------- */
.bfo-sec.bfo-hsoon{ background:var(--bfo-paper); }
@media (min-width:768px){
  .bfo-hsoon .bfo-hsoon__visual{ position:relative; align-self:stretch; display:flex; align-items:center; justify-content:center; min-height:460px; }
  .bfo-hsoon .bfo-hsoon__visual::before{ content:""; position:absolute; top:0; bottom:0; right:8%; left:calc(-1 * var(--bfo-gutter) - 50vw); z-index:0;
    background:linear-gradient(180deg,#F2F6F8,#EAF0F3); border-radius:0 160px 0 0; }
  .bfo-hsoon .bfo-hsoon__arch{ position:relative; z-index:1; width:72%; max-width:320px; min-height:400px; align-items:flex-end; justify-content:flex-start;
    border-radius:999px 999px 26px 26px; border:1px solid rgba(3,59,90,.14);
    background:radial-gradient(circle at 36% 74%,rgba(242,160,31,.24) 0,rgba(242,160,31,0) 34%),radial-gradient(circle at 42% 18%,#fff 0,rgba(255,255,255,0) 46%),linear-gradient(180deg,rgba(255,255,255,.8),rgba(237,243,246,.9));
    box-shadow:0 30px 60px rgba(3,59,90,.08); }
  .bfo-hsoon .bfo-hsoon__arch p.bfo-photo__label{ padding:0 0 14px 4px; font:700 10px/1.4 var(--bfo-label) !important; letter-spacing:.14em; text-transform:uppercase; color:#97A6B1; text-align:left; }
  .bfo-hsoon .bfo-hsoon__arch:has(img){ border:0; }
}
@media (min-width:1025px){ .bfo-hsoon .bfo-hsoon__visual{ min-height:520px; } .bfo-hsoon .bfo-hsoon__arch{ min-height:460px; } }

/* ---------- Launch pass Session B (v0.25.0): break the mist run (Method → 3-minute check) ---------- */
.bfo-sec.bfo-hquiz{ background:#fff; padding-top:var(--bfo-sec-y); }
.bfo-hquiz .bfo-hquiz__card{ background:var(--bfo-mist); box-shadow:none; }
@media (min-width:768px){
  .bfo-hquiz .bfo-hquiz__card{ background:linear-gradient(115deg,var(--bfo-mist) 55%,#FBF4E6 100%); }
}

/* ---------- How we think: staggered icon cards (v0.28.6) ----------
   H2 staggered mist cards + B3 content: faded numeral top-left, centred
   icon, centred label. Each icon is a plain Image block (empty = upload
   slot in the editor, hidden on the live site). Custom icons show as-is. */
.bfo-hthink .bfo-hcards{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; counter-reset:hcard;
  padding-bottom:44px; /* room for the offset column */
}
.bfo-hthink .bfo-hcards > *{ margin:0 !important; }
.bfo-hthink .bfo-hcards .bfo-hcards__card{
  position:relative; counter-increment:hcard; box-sizing:border-box;
  background:var(--bfo-mist); border-radius:var(--bfo-radius);
  min-height:210px; padding:34px 18px 26px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center;
}
.bfo-hthink .bfo-hcards .bfo-hcards__card:nth-child(even){ transform:translateY(44px); }
.bfo-hthink .bfo-hcards .bfo-hcards__card > *{ margin:0 !important; }
.bfo-hthink .bfo-hcards .bfo-hcards__card::after{
  content:counter(hcard, decimal-leading-zero); position:absolute; left:18px; top:12px; pointer-events:none;
  font:800 32px/1 var(--bfo-display); color:rgba(3,59,90,.08); letter-spacing:-.02em;
}
/* icon slot: fixed box so cards stay even, icon never cropped */
.bfo-hthink .bfo-hcards .bfo-hcards__icon{ width:calc(92px * var(--bfo-zoom, 1)); max-width:100%; }
.bfo-hthink .bfo-hcards .bfo-hcards__icon img{
  display:block; width:100% !important; height:calc(92px * var(--bfo-zoom, 1)) !important;
  object-fit:contain; object-position:center; filter:none; transform:none;
}
.bfo-sec.bfo-hthink .bfo-hcards p.bfo-hcards__label{
  color:var(--bfo-navy); text-wrap:balance;
  font-family:var(--bfo-display) !important; font-weight:700 !important;
  font-size:19px !important; line-height:1.15 !important; letter-spacing:-.01em;
}
@media (min-width:1025px){
  .bfo-hthink .bfo-hcards{ gap:18px; }
  .bfo-hthink .bfo-hcards .bfo-hcards__card{ min-height:230px; }
  .bfo-sec.bfo-hthink .bfo-hcards p.bfo-hcards__label{ font-size:21px !important; }
}
/* editor: empty icon slot shows the full Upload / Media Library placeholder */
.bfo-hthink .bfo-hcards .bfo-hcards__icon:not(:has(img)){ width:100%; }

/* ---------- 3-minute check: coastline photo (v0.28.9) ----------
   Restores the 31 Aug mock-up: photo fills the right of the card and fades
   into the copy (desktop). Phone/tablet: photo band across the top. */
.bfo-hquiz .bfo-hquiz__card{ position:relative; overflow:hidden; }
.bfo-hquiz .bfo-hquiz__card > :not(.bfo-hquiz__photo){ position:relative; z-index:1; }
.bfo-hquiz .bfo-hquiz__card > .bfo-hquiz__photo{
  margin:-30px -22px 24px !important; max-width:none; height:210px; min-height:0; border-radius:0; border:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%); mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
}
@media (min-width:768px){
  .bfo-hquiz .bfo-hquiz__card > .bfo-hquiz__photo{ margin:-52px -56px 30px !important; height:300px; }
}
@media (min-width:1025px){
  .bfo-hquiz .bfo-hquiz__card > .bfo-hquiz__photo{
    position:absolute !important; top:0; right:0; bottom:0; width:50%; height:auto; margin:0 !important;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 22%,#000 48%); mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 22%,#000 48%);
  }
  .bfo-hquiz .bfo-hquiz__card > *:not(.bfo-hquiz__photo){ max-width:600px; }
}