/* boe.css (round 14, the Bank of England look): the navy hero band, crumb strip, white text box, hero photo, figure band, the home card row, header underline, focus on navy, forced colours and print. Linked after type.css. Tokens from site.css; the three :root entries below are the only colours of its own. No images, no animation, no imports; the h1 tracking stays with type.css. Caps: 16,384 B raw, 4,096 B gzip. */
:root{--boe-white:#FFFFFF;--boe-scrim:linear-gradient(90deg,rgba(0,13,47,.85) 0%,rgba(0,13,47,.55) 40%,rgba(0,13,47,0) 70%);--boe-veil:rgba(255,255,255,.76)}

/* header: the current section carries a 2 px rule in the one action colour */
.header__nav a[aria-current]{border-bottom:2px solid var(--em-btn)}

/* ---------- hero band: a direct child of main, full-bleed (owner, 2026-11-04 21:10: edge to edge like the Bank of England home, over the cloud margins and the column hairlines; main is the full layout width, so 100% needs no 100vw and adds no sideways scroll); the box, crumb, pill and figures stay on the 1,240 px .wrap grid ---------- */
.boe-hero{position:relative;width:100%;background:var(--navy);color:var(--boe-white);overflow-x:clip;border-bottom:8px solid var(--em-dark)}
.boe-hero__top{background:var(--navy)}
.boe-hero__top .wrap{display:flex;align-items:center;min-height:44px}
.boe-hero__top .crumbs{margin:0;font-size:var(--fs-sm)}
.boe-hero__top .crumbs ol,.boe-hero__top .crumbs a{color:var(--rule)}
.boe-hero__top .crumbs a{min-height:44px}
.boe-hero__top .crumbs [aria-current]{color:var(--boe-white)}
.boe-hero__stage{position:relative;background:var(--navy)}
.boe-hero__stage>.wrap{width:100%;padding-inline:0}
.boe-hero__stage>.wrap.grid{display:flex;flex-direction:column}
.boe-hero .boe-photo{order:-1}
.boe-hero :focus-visible{outline:3px solid var(--em-dark);outline-offset:3px}
.boe-box :focus-visible{outline-color:var(--focus)}

/* the photo: a 220 px block above the box on a phone, never behind text */
.boe-photo{display:block;height:220px;background:var(--navy);overflow:hidden}
.boe-photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 70%}

/* the white box (square corners, the owner's 2026-11-04 choice) */
.boe-box{position:relative;z-index:1;background:var(--page);color:var(--ink);padding:var(--sp-5);border-radius:0}
.boe-hero .hero__copy.boe-box,[data-page-type=home] .boe-under .hero__copy{display:block}
[data-page-type=home] .boe-box>*,[data-page-type=home] .boe-under .hero__copy>*{margin-inline-end:0}
.boe-box>[hidden]+*{margin-top:0}
.boe-box .eyebrow{color:var(--eyebrow)}
.boe-box h1{margin-top:var(--sp-2);font-size:var(--fs-2xl);color:var(--navy);max-width:none}
.boe-box .sub{margin-top:var(--sp-4);color:var(--muted)}
.boe-box .actions{margin-top:var(--sp-5)}
.boe-box .actions .btn{width:100%}
.boe-box .actions .tlink{color:var(--em-text)}
.boe-box .trust,.boe-box .chips{margin-top:var(--sp-5)}

/* the pause pill: its own solid navy row under the box, inside the band, never over the photo */
.boe-hero .hero__pause{order:3;position:relative;z-index:1;margin:0;padding:var(--sp-3) var(--gutter);background:var(--navy)}
.boe-hero .pausepill{background:var(--navy);color:var(--boe-white);border-color:var(--rule)}
.boe-hero .pausepill:hover{color:var(--boe-white);border-color:var(--em-dark)}

/* ---------- figure band: one variant, the tint band with navy figures ---------- */
.boe-fig{width:100%;background:var(--em-tint);color:var(--navy)}
.boe-fig ul{list-style:none;max-width:1240px;margin:0 auto;padding:var(--sp-2) var(--gutter)}
.boe-fig__item{border-bottom:1px solid var(--rule)}
.boe-fig__item:last-child{border-bottom:0}
.boe-fig__item>a,.boe-fig__item>div{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l n" "c n";align-items:center;column-gap:var(--sp-4);min-height:64px;padding-block:var(--sp-3);color:inherit;text-decoration:none}
.boe-fig__n{grid-area:n;font:600 var(--fs-xl)/1.05 var(--serif);color:var(--navy);text-align:end}
.boe-fig__l{grid-area:l;font:600 var(--fs-base)/1.3 var(--sans);color:var(--em-text)}
.boe-fig__c{grid-area:c;font:400 var(--fs-sm)/1.4 var(--sans);color:var(--muted)}
.boe-fig a:hover .boe-fig__l,.boe-fig a:focus-visible .boe-fig__l{text-decoration:underline;text-decoration-thickness:2px}

/* ---------- home: the facts, body sentence and dm-line left, the tie-out card and the quote right ---------- */
.boe-under{padding-block:var(--sp-8)}
.boe-under .hero__copy>*+*{margin-top:var(--sp-4)}
.boe-under .hero__card{margin-top:var(--sp-8)}

/* ---------- the home #offers strip as the Bank's card row (markup untouched) ---------- */
#offers .offers--strip{display:grid;grid-template-columns:1fr;gap:var(--sp-5);list-style:none}
#offers h2{padding-top:var(--sp-4);border-top:4px solid var(--navy)}
#offers .offers--strip>li{margin:0;height:100%;background:var(--card);border-radius:var(--r-card)}

@media (min-width:560px){
  #offers .offers--strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 1,024 and up: the photo fills the stage, the box sits on its left, the pill row closes the stage on solid navy ---------- */
@media (min-width:1024px){
  .boe-hero__stage{min-height:400px}
  [data-page-type=home] .boe-hero__stage{min-height:600px}
  .boe-hero__stage>.wrap.grid{display:grid;padding:var(--sp-9) var(--gutter) 0;align-items:start}
  .boe-hero .boe-photo{position:absolute;inset:0 0 68px;height:auto;order:0}
  .boe-hero__stage::after{content:"";position:absolute;inset:0 0 68px;background:var(--boe-scrim);pointer-events:none}
  .boe-hero .boe-box{grid-column:1/span 7;padding:var(--sp-7)}
  .boe-hero .boe-box .actions .btn{width:auto}
  .boe-hero .hero__pause{grid-column:1/-1;justify-self:end;margin-top:var(--sp-4);padding:var(--sp-3) 0}
  .boe-fig ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);padding:var(--sp-6) var(--gutter)}
  .boe-fig__item,.boe-fig__item:last-child{border:0;border-top:4px solid var(--em-btn)}
  .boe-fig__item>a,.boe-fig__item>div{display:block;min-height:0;padding:var(--sp-4) 0 0}
  .boe-fig__n{display:block;font-size:var(--fs-3xl);text-align:start}
  .boe-fig__l{display:block;margin-top:var(--sp-2)}
  .boe-fig__c{display:block;margin-top:var(--sp-1)}
  .boe-fig--sm .boe-fig__n{font-size:var(--fs-2xl)}
  .boe-under .hero__copy{grid-column:1/span 7;padding-inline-end:var(--sp-4)}
  .boe-under .hero__card{grid-column:8/span 5;margin-top:0}
  #offers .offers--strip{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (forced-colors:active){
  .boe-hero,.boe-hero__top,.boe-fig,.boe-tile,.boe-box,.boe-cards a{forced-color-adjust:auto}
  .boe-box,.boe-fig__item,.boe-cards a{border:1px solid CanvasText}
  .boe-hero__stage::after{display:none}
  .boe-hero__top,.boe-hero .hero__pause,.boe-hero .pausepill,.boe-fig,.boe-tile{background:Canvas;color:CanvasText}
}
@media print{
  .boe-hero,.boe-hero__top,.boe-fig,.boe-tile{background:none;border:0;min-height:0;color:var(--ink)}
  .boe-photo,.boe-hero__stage::after,.pausepill{display:none}
  .boe-box{border:1px solid var(--rule);padding:var(--sp-4)}
  .boe-hero h1,.boe-fig__n{color:var(--navy)}
}

/* home: a decorative photo fills the left column beside the tall #cc card and the quote, desktop only (owner pick, A-01, 2026-11-05) */
.boe-under__fig{display:none;margin:0}
@media (min-width:1024px){.boe-under .hero__copy>.boe-under__fig{display:block;margin-top:var(--sp-6)}.boe-under__fig img{display:block;width:100%;height:auto}}

/* ---------- step 2, inner pages (main.page): the band sits flush under the header. Option A (process): the photo behind, the box hangs over its lower edge. Option B (.boe-hero--split): the box left, the page's product (.hero__card) or photo right on the navy, no scrim. Under 1,024 px the product or photo sits above the box ---------- */
.page>.boe-hero{margin-top:calc(var(--sp-9)*-1)}
.header__nav a[aria-current]{text-decoration:none}
.boe-fig+.wrap{padding-top:var(--sp-5)}
.boe-hero .hero__card{order:-1;align-self:center;width:100%;max-width:624px;margin:0;padding:var(--sp-2) var(--gutter) var(--sp-4)}
.boe-hero .hero-slide{background:var(--navy)}
.boe-hero figcaption,.boe-hero .ba__labels{color:var(--rule)}
.boe-hero .ba__ctl input{accent-color:var(--em-dark)}
.boe-hero--split .boe-photo img{object-position:50% 35%}
.boe-fig__l:only-child{font:600 var(--fs-lg)/1.25 var(--serif);color:var(--navy)}
@media (max-width:1023.98px){.page .boe-photo{height:min(56vw,320px)}}
@media (max-width:559.98px){.boe-hero .ba__labels{display:none}}
@media (min-width:1024px){
  .page .boe-hero__stage>.wrap.grid{min-height:inherit;padding-bottom:var(--sp-5);align-items:end}
  .boe-hero--split .boe-hero__stage>.wrap.grid{padding-bottom:var(--sp-8);align-items:start}
  .page .boe-hero .boe-photo,.page .boe-hero__stage::after{inset:0}
  .boe-hero--split .boe-hero__stage::after{content:none}
  .boe-hero--split .boe-photo,.boe-hero .hero__card{position:static;grid-column:8/span 5;order:0;padding:0}
  .boe-hero--split .boe-photo{aspect-ratio:4/3}
  .page .boe-fig ul{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
}
/* a chip that is a link (the Fiverr price chips): a 48 px tall target, the chip itself unchanged (DS-17) */
.chip>a{padding-block:var(--sp-3);margin-block:calc(var(--sp-3)*-1)}
@media (forced-colors:active){.boe-fig .boe-fig__item{border-width:4px 0 0}}
@media print{.boe-hero__stage,.boe-hero .hero-slide{background:none}.boe-hero__top .crumbs :is(ol,a,[aria-current]),.boe-hero figcaption,.boe-hero .ba__labels{color:var(--ink)}}