/* Bradford Blog - editorial layer over Elementor.
   Colour and type for post cards is set in the WIDGET SETTINGS, not here: Elementor's
   generated per-element CSS is specificity (0,4,1) and outranks anything class-based.
   This file owns layout, rhythm and the custom components.

   Ink #171717 - Cream #F7F6F3 - Line #E0DDD6 - Muted #6F6A5E (AA-corrected)
   Noto Serif 400 titles - Montserrat everything else - no radii - no shadows */

:root{
  --bfd-ink:#171717;
  --bfd-cream:#FFFFFF;/* the cream token is retired site-wide (client, 2026-09-19); kept as a name so nothing breaks */
  --bfd-line:#E0DDD6;
  --bfd-muted:#6F6A5E;
  --bfd-serif:'Noto Serif',Georgia,serif;
  --bfd-sans:Montserrat,-apple-system,sans-serif;
}

/* ---------- shared ---------- */
.bradford-hero{background-color:#FFFFFF;/* was cream + hatch: beige → white site-wide (client, 2026-09-19); 2026-09-21 */border-bottom:1px solid var(--bfd-line)}
.bradford-link{display:inline-block;font-family:var(--bfd-sans);font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--bfd-ink);text-decoration:none;border-bottom:1.5px solid var(--bfd-ink);padding-bottom:2px;transition:color .2s,border-color .2s}
.bradford-link:hover{color:var(--bfd-muted);border-bottom-color:var(--bfd-muted)}
.bradford-meta__item{display:inline-flex;align-items:center;gap:8px;font-family:var(--bfd-sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bfd-muted)}

/* ---------- post cards (archive + related) ----------
   One consistent grid. No lead-story override: Elementor's card DOM order does not
   survive being reflowed into a side-by-side grid, which is what broke the first card. */
.bradford-cards .elementor-posts-container{gap:32px!important}
.bradford-cards .elementor-post__card{
  background:#fff!important;
  border:1px solid var(--bfd-line)!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden;
  height:100%;
  transition:border-color .25s ease;
}
.bradford-cards .elementor-post__card:hover{border-color:var(--bfd-ink)!important}
.bradford-cards .elementor-post__thumbnail__link{margin:0!important}
.bradford-cards .elementor-post__thumbnail{border-radius:0!important}
.bradford-cards .elementor-post__thumbnail img{transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.bradford-cards .elementor-post__card:hover .elementor-post__thumbnail img{transform:scale(1.04)}
.bradford-cards .elementor-post__text{padding:24px 24px 0!important;margin:0!important}
.bradford-cards .elementor-post__title{margin:0!important}
.bradford-cards .elementor-post__title a{text-decoration:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bradford-cards .elementor-post__excerpt{margin:0!important}
.bradford-cards .elementor-post__excerpt p{margin:0!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bradford-cards .elementor-post__read-more{text-decoration:none!important;border-bottom:1.5px solid currentColor;padding-bottom:2px;display:inline-block}
.bradford-cards .elementor-post__meta-data{padding:0 24px 24px!important;margin:0!important;border:0!important}
.bradford-cards .elementor-post__avatar{display:none!important}
.bradford-cards .elementor-button{border-radius:0!important;padding:16px 40px!important;font-family:var(--bfd-sans);font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* ---------- single: post header ---------- */
.bradford-posthead .elementor-widget-theme-post-featured-image img{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover}

.bradford-author{display:flex;gap:16px;align-items:center;border-top:1px solid var(--bfd-line);padding:20px 0 0;margin:0}
.bradford-author__avatar{flex:none;width:52px;height:52px;object-fit:cover;display:block;filter:grayscale(1)}
.bradford-author__body{display:flex;flex-direction:column;gap:4px}
.bradford-author__name{margin:0;font-family:var(--bfd-sans);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bfd-ink)}
.bradford-author__bio{margin:0;font-family:var(--bfd-sans);font-size:14px;line-height:1.6;color:var(--bfd-muted);max-width:48ch}

/* ---------- single: body ---------- */
.bradford-main .elementor-widget-theme-post-content{font-family:var(--bfd-sans);font-size:18px;line-height:1.8;color:#2a2a2a;max-width:70ch}
.bradford-main .elementor-widget-theme-post-content>p:first-of-type{font-size:21px;line-height:1.65;color:var(--bfd-ink)}
.bradford-main .elementor-widget-theme-post-content h2{font-family:var(--bfd-serif);font-weight:400;font-size:32px;line-height:1.2;color:var(--bfd-ink);margin:56px 0 12px;padding-top:24px;border-top:1px solid var(--bfd-line)}
.bradford-main .elementor-widget-theme-post-content h3{font-family:var(--bfd-serif);font-weight:400;font-size:24px;line-height:1.3;color:var(--bfd-ink);margin:40px 0 8px}
.bradford-main .elementor-widget-theme-post-content p{margin:0 0 24px}

.bradford-keynotes{background:#FFFFFF;/* was var(--bfd-cream): snippet 25731 whitened it at runtime; baked 2026-09-17 */border-left:3px solid var(--bfd-ink);padding:32px 32px 32px 28px}
.bradford-keynotes__title{margin:0 0 16px;font-family:var(--bfd-sans);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bfd-ink)}
.bradford-keynotes__body{font-family:var(--bfd-sans);font-size:17px;line-height:1.7;color:var(--bfd-ink)}
.bradford-keynotes__body ul{margin:0;padding:0;list-style:none}
.bradford-keynotes__body li{position:relative;margin:0 0 12px;padding-left:24px}
.bradford-keynotes__body li::before{content:'';position:absolute;left:0;top:.75em;width:10px;height:1px;background:var(--bfd-ink)}
.bradford-keynotes__body li:last-child{margin-bottom:0}

/* ---------- sidebar + table of contents ----------
   Elementor paints the TOC from kit globals (Secondary = #FFFFFF), which rendered the
   header white on white. These need !important to be visible at all. */
@media (min-width:1025px){.bradford-sidebar{position:sticky;top:24px;align-self:flex-start}}
.bradford-sidebar .elementor-widget-table-of-contents .elementor-widget-container{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.bradford-sidebar .elementor-toc__header{background:transparent!important;border:0!important;border-bottom:1px solid var(--bfd-ink)!important;padding:0 0 12px!important;min-height:0!important}
.bradford-sidebar .elementor-toc__header-title{color:var(--bfd-ink)!important;font-family:var(--bfd-sans)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase!important}
.bradford-sidebar .elementor-toc__toggle-button{color:var(--bfd-ink)!important}
.bradford-sidebar .elementor-toc__body{background:transparent!important;border:0!important;padding:12px 0 0!important;max-height:none!important;overflow:visible!important}
.bradford-sidebar .elementor-toc__list-wrapper{list-style:none!important;margin:0!important;padding:0!important}
.bradford-sidebar .elementor-toc__list-item{list-style:none!important;margin:0!important}
.bradford-sidebar .elementor-toc__list-item::marker{content:''!important}
.bradford-sidebar .elementor-toc__list-item-text{color:var(--bfd-muted)!important;font-family:var(--bfd-sans)!important;font-size:14px!important;line-height:1.5!important;text-decoration:none!important;display:block!important;padding:9px 0 9px 14px!important;border-left:1px solid var(--bfd-line);transition:color .2s,border-color .2s}
.bradford-sidebar .elementor-toc__list-item-text:hover,
.bradford-sidebar .elementor-toc__list-item-text.elementor-item-active{color:var(--bfd-ink)!important;border-left-color:var(--bfd-ink)}
.bradford-sidebar .elementor-toc__list-wrapper .elementor-toc__list-wrapper .elementor-toc__list-item-text{padding-left:26px!important;font-size:13px!important}
.bradford-sidebar .elementor-toc__spinner-container{display:none!important}

/* ---------- promo banner ---------- */
.bradford-promo{display:block;min-height:320px;background-size:cover;background-position:center;text-decoration:none;position:relative;overflow:hidden}
.bradford-promo::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(23,23,23,.85) 0%,rgba(23,23,23,.25) 60%,rgba(23,23,23,.1) 100%);transition:opacity .3s}
.bradford-promo:hover::before{opacity:.85}
.bradford-promo__inner{position:relative;display:flex;flex-direction:column;gap:10px;justify-content:flex-end;height:100%;min-height:320px;padding:24px}
.bradford-promo__eyebrow{font-family:var(--bfd-sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.bradford-promo__title{font-family:var(--bfd-serif);font-weight:400;font-size:24px;line-height:1.2;color:#fff}
.bradford-promo__cta{font-family:var(--bfd-sans);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;border-bottom:1.5px solid rgba(255,255,255,.6);align-self:flex-start;padding-bottom:3px}
.bradford-promo:hover .bradford-promo__cta{border-bottom-color:#fff}

/* ---------- FAQ ----------
   WooCommerce button rules outrank class selectors, so the element is fully reset. */
.bradford-faq{display:block!important;width:100%;border-top:1px solid var(--bfd-line)}
.bradford-faq .bradford-faq__item{display:block;width:100%;border-bottom:1px solid var(--bfd-line);margin:0}
.bradford-faq .bradford-faq__q,
.bradford-faq .bradford-faq__q:hover,
.bradford-faq .bradford-faq__q:focus,
.bradford-faq .bradford-faq__q:active{
  -webkit-appearance:none!important;appearance:none!important;box-sizing:border-box!important;
  display:flex!important;width:100%!important;max-width:none!important;min-height:0!important;
  justify-content:space-between!important;align-items:flex-start!important;gap:32px!important;
  margin:0!important;padding:26px 0!important;
  background:none!important;background-color:transparent!important;background-image:none!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;outline:0;
  text-align:left!important;text-transform:none!important;letter-spacing:0!important;text-decoration:none!important;
  font-family:var(--bfd-sans)!important;font-size:18px!important;font-weight:700!important;line-height:1.45!important;
  color:var(--bfd-ink)!important;cursor:pointer;transition:color .2s ease;
}
.bradford-faq .bradford-faq__q:hover{color:var(--bfd-muted)!important}
.bradford-faq .bradford-faq__q:focus-visible{outline:2px solid var(--bfd-ink)!important;outline-offset:4px}
.bradford-faq .bradford-faq__q>span:first-child{flex:1 1 auto;min-width:0;display:block}
/* 2026-09-24: Hello Elementor's reset gives every <button> white-space:nowrap — the questions ran off the right edge on
   phones and tablets (390: 405 px of text in a 267 px column). */
.bradford-faq .bradford-faq__q,.bradford-faq .bradford-faq__q>span:first-child{white-space:normal!important;overflow-wrap:anywhere}
.bradford-faq .bradford-faq__q::after{content:'+'!important;flex:0 0 auto!important;font-family:var(--bfd-sans)!important;font-size:26px!important;font-weight:300!important;line-height:1!important;color:var(--bfd-muted)!important;transform-origin:center;transition:transform .3s cubic-bezier(.2,.6,.2,1),color .2s ease}
.bradford-faq .bradford-faq__q[aria-expanded="true"]::after{transform:rotate(45deg);color:var(--bfd-ink)!important}
.bradford-faq .bradford-faq__a{display:block;background:transparent!important;border:0!important;padding:0 0 28px!important;margin:0;max-width:66ch;font-family:var(--bfd-sans);font-size:17px;line-height:1.75;color:var(--bfd-muted)}
.bradford-faq .bradford-faq__a[hidden]{display:none!important}

/* ---------- newsletter ---------- */
.elementor-widget-form .elementor-field-group{margin-bottom:0}
.elementor-widget-form .elementor-field{border:0!important;border-bottom:1px solid var(--bfd-line)!important;border-radius:0!important;background:transparent!important;padding:14px 0!important;font-family:var(--bfd-sans);font-size:16px;color:var(--bfd-ink)}
.elementor-widget-form .elementor-field:focus{border-bottom-color:var(--bfd-ink)!important;outline:0;box-shadow:none}
.elementor-widget-form .elementor-button{border-radius:0!important;border:1.5px solid var(--bfd-ink)}
.elementor-widget-form .elementor-button:hover{background:transparent!important;color:var(--bfd-ink)!important}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .bradford-main .elementor-widget-theme-post-content{max-width:none;font-size:17px}
  .bradford-main .elementor-widget-theme-post-content>p:first-of-type{font-size:19px}
  .bradford-main .elementor-widget-theme-post-content h2{font-size:28px;margin-top:44px}
}
@media (max-width:767px){
  .bradford-cards .elementor-posts-container{gap:24px!important}
  .bradford-cards .elementor-post__text{padding:20px 20px 0!important}
  .bradford-cards .elementor-post__meta-data{padding:0 20px 20px!important}
  .bradford-keynotes{padding:24px 24px 24px 20px}
  .bradford-faq .bradford-faq__q{font-size:16px!important;padding:20px 0!important;gap:20px!important}
  .bradford-main .elementor-widget-theme-post-content h2{font-size:26px}
}

/* ==========================================================================
   Final alignment pass (verified against Playwright screenshots)
   ========================================================================== */

/* Elementor's TOC marker rules are element-scoped and beat list-style:none. */
.bradford-sidebar ol.elementor-toc__list-wrapper,
.bradford-sidebar ul.elementor-toc__list-wrapper,
.bradford-sidebar .elementor-toc__list-wrapper li,
.bradford-sidebar li.elementor-toc__list-item{
  list-style:none!important;
  list-style-type:none!important;
  list-style-image:none!important;
  padding-left:0!important;
}
.bradford-sidebar .elementor-toc__list-item::marker{content:none!important;color:transparent!important;font-size:0!important}
.bradford-sidebar .elementor-toc__list-item::before{display:none!important;content:none!important}

/* Cards: give every title the same three-line box so excerpts, Read More and the
   date footer all sit on one baseline across the row. Without this a one-line
   title leaves a dead gap in the middle of the card. */
.bradford-cards .elementor-post__title a{min-height:3.75em}
.bradford-cards .elementor-post__text{padding:24px 24px 24px!important}
.bradford-cards .elementor-post__meta-data{
  margin-top:auto!important;
  border-top:1px solid var(--bfd-line)!important;
  padding:14px 24px!important;
}

/* Author byline: a company, not a person. The 52px showroom photo read as a
   grey smudge, so the block stands on the name and bio. */
.bradford-author{align-items:flex-start}
.bradford-author__body{gap:6px}

@media (max-width:767px){
  .bradford-cards .elementor-post__title a{min-height:0}
  .bradford-cards .elementor-post__text{padding:20px!important}
  .bradford-cards .elementor-post__meta-data{padding:14px 20px!important}
}

/* ==========================================================================
   Audit fixes (verified with Playwright geometry, not assumed)
   ========================================================================== */

/* The featured image widget is a SIBLING of .bradford-posthead, not a descendant,
   so every rule scoped under .bradford-posthead never matched it. It was rendering
   as an 800x800 square with object-fit:fill. It now carries its own class. */
.bradford-featured img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover}
.bradford-featured{display:block;width:100%}

/* Elementor's .e-con sets position:relative at equal specificity and wins on source
   order, so the sidebar was never sticky - top:24px just shoved it down the page. */
.bradford-sidebar{position:sticky!important;top:24px!important;align-self:flex-start!important}
@media (max-width:1024px){.bradford-sidebar{position:static!important;top:auto!important}}

/* elementor-posts__hover-gradient paints a permanent rgba(0,0,0,.35) scrim across the
   bottom of every card image. Off-system for a neutral palette. */
.bradford-cards .elementor-post__card .elementor-post__thumbnail__link::after{content:none!important;background-image:none!important}

/* Inline article imagery */
.bradford-main figure.bradford-figure{margin:40px 0;max-width:none;width:100%}
.bradford-main figure.bradford-figure img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
.bradford-main figure.bradford-figure figcaption{margin:12px 0 0;font-family:var(--bfd-sans);font-size:13px;line-height:1.5;color:var(--bfd-muted);border-left:2px solid var(--bfd-line);padding-left:12px}

@media (max-width:767px){
  .bradford-main figure.bradford-figure{margin:28px 0}
}

/* Editorial links sit inside flex columns, which stretch them to full width and drag
   the 1.5px underline across the whole column. Hug the text instead. */
.bradford-link{width:fit-content;align-self:flex-start}
.bradford-author__body .bradford-link{margin-top:4px}

/* ==========================================================================
   Card image: stable box, no layout shift, correct hover zoom

   Elementor sizes the thumbnail with padding-bottom:72% and then, only AFTER its
   JS adds .elementor-has-item-ratio, absolutely centres the image with
   transform:scale(1.01) translate(-50%,-50%). Two consequences:
     1. Between first paint and JS the card is far too tall, then snaps  = the shift.
     2. A hover rule of transform:scale(1.04) REPLACES the whole transform, dropping
        the translate, so the image collapses to a small off-centre box.
   Owning the geometry outright fixes both and removes the JS dependency.
   ========================================================================== */
.bradford-cards .elementor-post__thumbnail{
  position:relative!important;
  padding-bottom:0!important;
  aspect-ratio:4 / 3;
  overflow:hidden!important;
  display:block!important;
  background:#FFFFFF;/* was var(--bfd-cream): snippet 25731 whitened it at runtime; baked 2026-09-17 */
}
.bradford-cards .elementor-post__thumbnail img{
  position:absolute!important;
  top:0!important;left:0!important;right:0!important;bottom:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  transform:scale(1)!important;
  transform-origin:center center;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1)!important;
}
.bradford-cards .elementor-post__card:hover .elementor-post__thumbnail img{transform:scale(1.07)!important}
@media (prefers-reduced-motion:reduce){
  .bradford-cards .elementor-post__thumbnail img{transition:none!important}
  .bradford-cards .elementor-post__card:hover .elementor-post__thumbnail img{transform:scale(1)!important}
}

/* ==========================================================================
   Newsletter band
   ========================================================================== */
.bradford-newsletter{text-align:center}
.bradford-newsletter .elementor-widget-heading{width:100%}
.bradford-newsletter .bradford-eyebrow .elementor-heading-title{margin:0 0 4px}
.bradford-newsletter .elementor-widget-heading:not(.bradford-eyebrow) .elementor-heading-title{
  font-family:var(--bfd-serif)!important;font-weight:400!important;
  font-size:32px!important;line-height:1.2!important;color:var(--bfd-ink)!important;
  max-width:20ch;margin:0 auto 8px;
}
.bradford-newsletter__form{width:100%;max-width:540px;margin:0 auto}
.bradford-newsletter__form .elementor-form{display:flex!important;flex-wrap:nowrap!important;gap:16px;align-items:flex-end}
.bradford-newsletter__form .elementor-field-group{margin:0!important;padding:0!important;flex:1 1 auto;min-width:0}
.bradford-newsletter__form .elementor-field-label{display:none!important}
.bradford-newsletter__form .elementor-field{
  width:100%!important;text-align:left;
  border:0!important;border-bottom:1px solid var(--bfd-ink)!important;
  background:transparent!important;border-radius:0!important;
  padding:12px 0!important;font-family:var(--bfd-sans);font-size:16px;color:var(--bfd-ink);
}
.bradford-newsletter__form .elementor-field::placeholder{color:var(--bfd-muted);opacity:1}
.bradford-newsletter__form .elementor-field-type-submit{flex:0 0 auto;width:auto!important}
.bradford-newsletter__form .elementor-button{
  background:var(--bfd-ink)!important;color:#fff!important;
  border:1.5px solid var(--bfd-ink)!important;border-radius:0!important;
  padding:13px 32px!important;white-space:nowrap;
  font-family:var(--bfd-sans);font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  transition:background .25s,color .25s;
}
.bradford-newsletter__form .elementor-button:hover{background:transparent!important;color:var(--bfd-ink)!important}
@media (max-width:600px){
  .bradford-newsletter__form .elementor-form{flex-wrap:wrap!important}
  .bradford-newsletter__form .elementor-field-group,
  .bradford-newsletter__form .elementor-field-type-submit{flex:1 1 100%;width:100%!important}
  .bradford-newsletter__form .elementor-button{width:100%}
}

/* ==========================================================================
   Showroom feature: crop the photo to a portrait plate and centre the columns
   against it, instead of a short text block floating beside a tall image.
   ========================================================================== */
.bradford-showroom{align-items:center!important}
.bradford-showroom__img img{
  display:block;width:100%;height:auto;
  aspect-ratio:4 / 5;object-fit:cover;
  max-height:600px;
}
.bradford-showroom .elementor-widget-text-editor{max-width:52ch}
.bradford-showroom .bradford-eyebrow .elementor-heading-title{padding-top:16px;border-top:1px solid var(--bfd-line);display:block}
@media (max-width:1024px){
  .bradford-showroom__img img{aspect-ratio:3 / 2;max-height:420px}
}

/* ==========================================================================
   Newsletter band - take full control of the stack.
   Elementor was laying the three children out inconsistently: eyebrow left,
   headline centred, form stranded at the left edge with a dead void beside it.
   The boxed container renders a .e-con-inner wrapper, so drive that directly.
   ========================================================================== */
.bradford-newsletter > .e-con-inner{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  width:100%;
  max-width:640px!important;
  margin-inline:auto!important;
  text-align:center;
}
.bradford-newsletter > .e-con-inner > *{
  width:100%!important;
  max-width:100%!important;
  flex:0 0 auto!important;
  align-self:center!important;
  text-align:center!important;
}
.bradford-newsletter .elementor-heading-title{text-align:center!important;width:100%}
.bradford-newsletter .bradford-eyebrow .elementor-heading-title{margin:0}
.bradford-newsletter__form{max-width:100%!important;margin:6px auto 0!important}
.bradford-newsletter__form .elementor-form{justify-content:center}

/* Card rhythm: more air between title, excerpt and the Read More link. */
.bradford-cards .elementor-post__title{margin-bottom:20px!important}
.bradford-cards .elementor-post__excerpt{margin-bottom:26px!important}
.bradford-cards .elementor-post__read-more{margin-top:0!important}

/* ==========================================================================
   Newsletter band, rebuilt on ink.
   The previous attempt failed because Elementor's flex container for form fields
   is .elementor-form-fields-wrapper, NOT .elementor-form - so the row rule never
   applied and the input stayed narrow with the button dropped beneath it.
   ========================================================================== */
.bradford-newsletter{background-color:#171717!important}
.bradford-newsletter > .e-con-inner{max-width:680px!important}

/* Phase 4 2026-09-19: values snippet 18785 used to force (band is authored cream, eyebrow ink) */
.bradford-newsletter .bradford-eyebrow .elementor-heading-title{color:#171717!important;letter-spacing:.12em!important;line-height:1.2!important}
.bradford-newsletter .elementor-widget-heading:not(.bradford-eyebrow) .elementor-heading-title{
  color:#171717!important;font-family:var(--bfd-serif)!important;font-weight:400!important;
  font-size:clamp(38px,3.1vw,50px)!important;line-height:1.18!important;max-width:22ch;margin:0 auto 12px;
}

/* the form itself */
.bradford-newsletter__form{width:100%!important;max-width:100%!important;margin:8px auto 0!important}
.bradford-newsletter__form .elementor-form{width:100%}
.bradford-newsletter__form .elementor-form-fields-wrapper{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  gap:0!important;
  width:100%!important;
  margin:0!important;
}
.bradford-newsletter__form .elementor-field-group{
  width:auto!important;max-width:none!important;
  flex:1 1 auto!important;
  padding:0!important;margin:0!important;
}
.bradford-newsletter__form .elementor-field-group.elementor-field-type-submit,
.bradford-newsletter__form .elementor-field-group.e-form__buttons{
  flex:0 0 auto!important;width:auto!important;
}
.bradford-newsletter__form .elementor-field-label{display:none!important}

.bradford-newsletter__form .elementor-field[type="email"],
.bradford-newsletter__form .elementor-field{
  width:100%!important;height:56px!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.45)!important;
  border-radius:0!important;
  padding:0 16px 0 0!important;
  font-family:var(--bfd-sans);font-size:16px;
  color:#FFFFFF!important;
  text-align:left;
  transition:border-color .2s ease;
}
.bradford-newsletter__form .elementor-field::placeholder{color:rgba(255,255,255,.55)!important;opacity:1}
.bradford-newsletter__form .elementor-field:focus{border-bottom-color:#FFFFFF!important;outline:0;box-shadow:none!important}

.bradford-newsletter__form .elementor-button{
  height:56px!important;
  background:#FFFFFF!important;color:#171717!important;
  border:1.5px solid #FFFFFF!important;border-radius:0!important;
  padding:0 36px!important;
  font-family:var(--bfd-sans);font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;
  transition:background .25s ease,color .25s ease;
}
.bradford-newsletter__form .elementor-button:hover{background:transparent!important;color:#FFFFFF!important;border-color:#FFFFFF!important}

@media (max-width:600px){
  .bradford-newsletter__form .elementor-form-fields-wrapper{flex-direction:column!important;gap:20px!important}
  .bradford-newsletter__form .elementor-field-group.elementor-field-type-submit,
  .bradford-newsletter__form .elementor-field-group.e-form__buttons{width:100%!important}
  .bradford-newsletter__form .elementor-button{width:100%!important}
}

/* ==========================================================================
   Newsletter band - failsafe contrast.
   Anything inheriting the kit's Text global (#000000) inside this ink section
   renders black-on-black. Force the whole subtree light, then re-darken only
   the button label, which sits on a white fill.
   ========================================================================== */
.bradford-newsletter,
.bradford-newsletter *,
.bradford-newsletter .elementor-heading-title,
.bradford-newsletter p,
.bradford-newsletter span,
.bradford-newsletter label{color:#FFFFFF!important}

.bradford-newsletter .bradford-eyebrow .elementor-heading-title{color:#171717!important}

.bradford-newsletter .elementor-button,
.bradford-newsletter .elementor-button *,
.bradford-newsletter button[type="submit"],
.bradford-newsletter button[type="submit"] *{color:#171717!important}
.bradford-newsletter .elementor-button:hover,
.bradford-newsletter .elementor-button:hover *,
.bradford-newsletter button[type="submit"]:hover,
.bradford-newsletter button[type="submit"]:hover *{color:#FFFFFF!important}

.bradford-newsletter input.elementor-field{color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important}
.bradford-newsletter input.elementor-field::placeholder{color:rgba(255,255,255,.6)!important;-webkit-text-fill-color:rgba(255,255,255,.6)!important;opacity:1}
.bradford-newsletter .elementor-message,
.bradford-newsletter .elementor-message *{color:#FFFFFF!important}

/* ==========================================================================
   Newsletter band - FINAL, light ground.

   A script on this site injects inline style="...color:#171717 !important" onto
   heading titles at runtime (not present in the served HTML; the page contains
   setProperty(...,'important') calls). Inline !important beats every stylesheet
   rule, so no CSS can make those headings light. A dark band therefore renders
   its own headings invisible - measured contrast 1.0.

   Fix: light ground, so the forced ink is correct instead of hidden.
   Everything below overrides the earlier ink-band block.
   ========================================================================== */
.bradford-newsletter{
  background-color:#FFFFFF!important;/* was cream + hatch: beige → white site-wide (client, 2026-09-19); 2026-09-21 */
  background-image:none!important;
  border-top:1px solid var(--bfd-line);
  border-bottom:1px solid var(--bfd-line);
}

/* undo the inverted copy from the ink attempt */
.bradford-newsletter,
.bradford-newsletter *,
.bradford-newsletter .elementor-heading-title,
.bradford-newsletter p,
.bradford-newsletter span,
.bradford-newsletter label{color:var(--bfd-ink)!important}
/* Phase 4 2026-09-19 (final block): eyebrow ink .12em/1.2, title clamp(38px,3.1vw,50px) — what snippet 18785 rendered */
.bradford-newsletter .bradford-eyebrow .elementor-heading-title{color:var(--bfd-ink)!important;letter-spacing:.12em!important;line-height:1.2!important}

.bradford-newsletter .elementor-widget-heading:not(.bradford-eyebrow) .elementor-heading-title{
  color:var(--bfd-ink)!important;font-family:var(--bfd-serif)!important;font-weight:400!important;
  font-size:clamp(38px,3.1vw,50px)!important;line-height:1.18!important;max-width:22ch;margin:0 auto 12px;
}

/* input on the light ground */
.bradford-newsletter input.elementor-field,
.bradford-newsletter__form .elementor-field{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--bfd-ink)!important;
  color:var(--bfd-ink)!important;
  -webkit-text-fill-color:var(--bfd-ink)!important;
  height:56px!important;
}
.bradford-newsletter input.elementor-field::placeholder,
.bradford-newsletter__form .elementor-field::placeholder{
  color:var(--bfd-muted)!important;-webkit-text-fill-color:var(--bfd-muted)!important;opacity:1;
}

/* ink button, white label - label colour is set by Elementor on the button itself,
   which the injector does not touch (measured 17.93 against its own fill) */
.bradford-newsletter .elementor-button,
.bradford-newsletter button[type="submit"]{
  background:var(--bfd-ink)!important;
  border:1.5px solid var(--bfd-ink)!important;
  border-radius:0!important;
  height:56px!important;padding:0 36px!important;
}
.bradford-newsletter .elementor-button,
.bradford-newsletter .elementor-button *,
.bradford-newsletter button[type="submit"],
.bradford-newsletter button[type="submit"] *{color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important}
.bradford-newsletter .elementor-button:hover,
.bradford-newsletter button[type="submit"]:hover{background:transparent!important}
.bradford-newsletter .elementor-button:hover,
.bradford-newsletter .elementor-button:hover *,
.bradford-newsletter button[type="submit"]:hover,
.bradford-newsletter button[type="submit"]:hover *{color:var(--bfd-ink)!important;-webkit-text-fill-color:var(--bfd-ink)!important}

/* The ink-band attempt left `.bradford-newsletter__form .elementor-field[type="email"]`
   at (0,3,0)!important forcing white text, which beat the (0,2,0) light-ground rule
   above and left the input white-on-cream (measured contrast 1.08). Outrank it. */
.bradford-newsletter .elementor-form .elementor-field-group input.elementor-field,
.bradford-newsletter .elementor-form .elementor-field-group input.elementor-field[type="email"],
.bradford-newsletter__form .elementor-form-fields-wrapper input.elementor-field[type="email"]{
  color:var(--bfd-ink)!important;
  -webkit-text-fill-color:var(--bfd-ink)!important;
  caret-color:var(--bfd-ink)!important;
  background:transparent!important;
  border-bottom:1px solid var(--bfd-ink)!important;
}
.bradford-newsletter .elementor-form .elementor-field-group input.elementor-field::placeholder,
.bradford-newsletter .elementor-form .elementor-field-group input.elementor-field[type="email"]::placeholder,
.bradford-newsletter__form .elementor-form-fields-wrapper input.elementor-field[type="email"]::placeholder{
  color:var(--bfd-muted)!important;
  -webkit-text-fill-color:var(--bfd-muted)!important;
  opacity:1!important;
}

/* ==========================================================================
   Quick Answer box - full-width slot above the two-column body.
   Sits outside .bradford-main deliberately, so its question is not pulled into
   the Table of Contents.
   ========================================================================== */
.bradford-qa{
  display:block;
  background:#fff;
  border:1px solid var(--bfd-line);
  border-top:3px solid var(--bfd-ink);
  border-radius:0;
  padding:36px 44px;
  margin:0;
}
.bradford-qa__label{
  margin:0 0 14px;
  font-family:var(--bfd-sans);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bfd-muted);
}
.bradford-qa__q{
  margin:0 0 14px;
  font-family:var(--bfd-serif);font-weight:400;
  font-size:29px;line-height:1.25;color:var(--bfd-ink);
  max-width:34ch;
}
.bradford-qa__a{
  font-family:var(--bfd-sans);font-size:19px;line-height:1.65;color:var(--bfd-ink);
  max-width:78ch;
}
.bradford-qa__a p{margin:0 0 14px}
.bradford-qa__a p:last-child{margin-bottom:0}
.bradford-qa__a a{color:var(--bfd-ink);text-decoration:none;border-bottom:1.5px solid var(--bfd-ink)}

/* Key Takeaways now lives at the top of the article column and takes its width. */
.bradford-main .bradford-keynotes-slot{margin:0!important}
.bradford-main .bradford-keynotes{width:100%;margin:0}

@media (max-width:1024px){
  .bradford-qa{padding:30px 32px}
  .bradford-qa__q{font-size:25px}
  .bradford-qa__a{font-size:18px}
}
@media (max-width:767px){
  .bradford-qa{padding:24px 22px}
  .bradford-qa__q{font-size:22px;max-width:none}
  .bradford-qa__a{font-size:17px}
}