/*
Theme Name: Barrie Furnace Repair
Theme URI: https://www.barriefurnacerepair.com/
Author: Elehost
Description: The home page Barrie Furnace Repair signed off. Carries no copy of its own — every word comes from the Barrie Furnace Repair Content plugin and is editable in wp-admin.
Version: 1.7.0
Requires PHP: 8.0
Requires at least: 6.0
License: GPL-2.0-or-later
Text Domain: barriefurnace
*/

/* Self-hosted. No request leaves the site for a font, and font-display:swap means text
   is readable while they load rather than invisible. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/Barlow-700.woff2') format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/BarlowSemiCondensed-500.woff2') format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/BarlowSemiCondensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/BarlowSemiCondensed-700.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* sampled from barriefurnacerepair.com — logo.png and theme style.css */
  --brand:#007BCB;      /* #title h1 in their theme; the flame in their logo */
  --brand-dk:#005E9C;   /* action colour: buttons and links that must clear AA.
                           Seven rules referred to it as --action, which was never
                           defined: every body link rendered in body grey and the
                           focus rings on the burger and the area accordion resolved
                           to nothing at all. One name, defined once. */
  --navy:#07436C;       /* their nav text-shadow */
  --ink:#0E1B25;        /* deepest ground, in the family of their #001E31 */
  --leaf:#CC0000;       /* RESERVED: the maple leaf and 100% Canadian only */
  --slate:#455773;      /* 11 uses in their theme.css */
  --body:#4A5A69; --muted:#616D79;  /* was #6E7F8D — 4.13:1 on white and 3.77:1 on the tint, below AA. It sets the hero reassurance line and the service qualifiers, two elements the proposal names. Now 5.29:1 and 4.82:1. */ --rule:#DDE3E9; --tint:#F1F5F8; --paper:#fff;
  --wrap:1320px;        /* split archetype: wide, the artefact needs room */
  --wrap-read:840px;    /* a single reading column: the hub, where measure beats width */
  --wrap-text:680px;    /* prose with nothing beside it: a town page is all text */
  --r:4px;
}
html{-webkit-font-smoothing:antialiased}
body{font-family:'Barlow',system-ui,sans-serif;color:var(--body);background:#fff;
     font-size:17px;line-height:1.65}
h1,h2,h3,h4,h5,.cond{font-family:'Barlow Semi Condensed',system-ui,sans-serif;
     color:var(--ink);font-weight:600;line-height:1.12;letter-spacing:-.005em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(100% - 60px, var(--wrap));margin:0 auto}
/* Every reading column on this site starts at the same left edge as the header,
   the footer and the home page: the wrap edge. Centring a narrow column inside a
   wide wrap gave four different left edges across the site — 40px on the home and
   service pages, 280px on the service-area hub, 360px on a town page — and the
   eye reads that as pages built by different hands. Columns are narrow; they are
   not centred. */
/* type scale 1.20: 15 · 18 · 21.6 · 26 · 31 · 37.3 · 44.8 · 53.8 */
.eyebrow{font-family:'Barlow Semi Condensed',sans-serif;font-size:14px;font-weight:600;
     letter-spacing:.19em;text-transform:uppercase;color:var(--brand-dk)}
.eyebrow.on-dark{color:#8FC9F0}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Barlow Semi Condensed',sans-serif;
     font-size:19px;font-weight:600;letter-spacing:.03em;padding:15px 30px;border-radius:var(--r);
     border:2px solid transparent;white-space:nowrap}
.btn-primary{background:var(--brand-dk);color:#fff;border-color:var(--brand-dk)}
.btn-outline{border-color:var(--rule);color:var(--navy);background:#fff}
.btn-light{background:#fff;color:var(--navy);border-color:#fff}
.sec{padding:88px 0}                      /* rhythm 88 */
.sec-head{max-width:640px}
.sec-head h2{font-size:37px;margin:14px 0 0}
/* Sibling sections at the same weight. Services, Our Work and Why People Call Back had no
   base rule at all — only a mobile override — so they rendered at the browser default
   while the Brands heading beside them was 37px. Five content sections, two heading sizes,
   for no reason a reader could infer. */
.svc h2,.work h2,.trust h2{font-size:37px;margin:14px 0 0}
.sec-head p{font-size:18px;margin-top:14px;line-height:1.62}
.lift{box-shadow:0 14px 34px rgba(7,67,108,.10),0 2px 6px rgba(7,67,108,.06)}

/* ---------- UTILITY STRIP ---------- */
.util{background:var(--ink);color:rgba(255,255,255,.72);font-size:15px}
.util .wrap{display:flex;align-items:center;height:42px;gap:26px}
.util b{color:#fff;font-weight:500}
.util .sep{width:1px;height:15px;background:rgba(255,255,255,.20)}
.util .leaf{margin-left:auto;display:flex;align-items:center;gap:9px;color:#fff}
.util .leaf svg{width:15px;height:15px;fill:var(--leaf)}

/* ---------- HEADER ---------- */
/* The number follows you down the page. This site exists to produce a phone call, and a
   header that scrolls away takes the number with it — someone standing in a cold house
   should not have to scroll back up to find it. The standing strip above is deliberately
   NOT sticky: it carries context, not an action. */
header.nav{border-bottom:1px solid var(--rule);background:#fff;
  position:sticky;top:0;z-index:50}
/* Only once it is overlapping content, so it sits flat at the top of the page. */
header.nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;
  background:linear-gradient(to bottom,rgba(14,27,37,.07),rgba(14,27,37,0));pointer-events:none}
header.nav .wrap{display:flex;align-items:center;height:112px;gap:48px}
/* flex-shrink:0 because the header is a flex row: with seven menu items the logo was
   the item that gave way, and it collapsed to nothing at all. Whatever else has to
   wrap, the brand stays. */
header.nav img.logo{width:158px;height:auto;align-self:center;flex:0 0 auto}
header.nav a.bfr-logo{flex:0 0 auto;display:flex;align-items:center}
nav.main{min-width:0}
nav.main{display:flex;gap:30px;align-self:stretch;align-items:center}
/* The mockup put anchors straight inside <nav class="main">, so these rules assumed
   direct children. Both wp_nav_menu() and the built-in fallback emit a <ul>, which made
   the whole menu one flex item and rendered it as a vertical bulleted list. Nobody saw
   it because no menu had ever been assigned to the location. */
nav.main ul{display:flex;gap:26px;align-items:center;list-style:none;margin:0;padding:0}
/* Labels break mid-phrase otherwise — "Service / Area" over two lines. */
nav.main a{white-space:nowrap}
nav.main li{margin:0;padding:0;list-style:none}
nav.main a{font-family:'Barlow Semi Condensed',sans-serif;font-size:19px;font-weight:600;
     letter-spacing:.02em;color:var(--navy);position:relative;display:flex;align-items:center}
nav.main a.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
     height:3px;background:var(--brand)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:24px}
.burger{display:none;width:44px;height:44px;flex:0 0 auto;position:relative;background:none;border:0;cursor:pointer;padding:13px 9px}
.burger::before,.burger::after,.burger i{content:"";position:absolute;left:0;right:0;height:2.5px;
     background:var(--navy);border-radius:2px}
.burger::before{top:13px}.burger i{top:21px}.burger::after{bottom:13px}
.burger::before,.burger::after,.burger i{left:9px;right:9px}
.burger:focus-visible{outline:3px solid var(--brand-dk);outline-offset:2px}
.nav-right .hrs{text-align:right;font-size:14.5px;line-height:1.4;color:var(--muted);white-space:nowrap}
.nav-right .hrs b{display:block;font-family:'Barlow Semi Condensed',sans-serif;font-size:17px;
     font-weight:600;color:var(--navy);letter-spacing:.01em}
.telbtn{display:flex;align-items:center;gap:12px;background:var(--brand-dk);color:#fff;
     border-radius:var(--r);padding:11px 22px 12px}
.telbtn svg{width:21px;height:21px;fill:#fff;opacity:.9;flex:0 0 auto}
.telbtn .t{display:block;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;
     font-size:26px;line-height:1.04;letter-spacing:.01em;white-space:nowrap}
.telbtn .s{display:block;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;
     opacity:.82;line-height:1.2;white-space:nowrap}

/* ---------- HERO (split) ---------- */
.hero{background:linear-gradient(180deg,#fff 0%,var(--tint) 100%);border-bottom:1px solid var(--rule)}
.hero > .wrap{display:grid;grid-template-columns:1fr 1.02fr;gap:76px;align-items:center;
     padding:76px 0 80px}
.hero h1{font-size:53px;line-height:1.07;margin:18px 0 0}
.hero h1 em{font-style:normal;color:var(--brand-dk);white-space:nowrap}
.hero p.lead{font-size:19.5px;line-height:1.62;margin-top:22px;max-width:44ch}
.hero .act{display:flex;align-items:center;gap:22px;margin-top:34px}
.hero .act .telbtn{padding:15px 28px 16px}
.hero .act .telbtn .t{font-size:34px}
.hero .note{margin-top:20px;font-size:15.5px;color:var(--muted);display:flex;gap:20px;align-items:center}
.hero .note span{display:flex;align-items:center;gap:8px}
.hero .note i{width:6px;height:6px;border-radius:50%;background:var(--brand);font-style:normal}

/* the artefact: service area panel */
.area{background:#fff;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.area .cap{display:flex;align-items:baseline;justify-content:space-between;
     padding:18px 24px 14px;border-bottom:1px solid var(--rule)}
.area .cap h4{font-size:21px}
.area .cap span{font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
     font-family:'Barlow Semi Condensed',sans-serif;font-weight:600}
.area svg.map{display:block;width:100%;height:auto;background:#F7FAFC}
.area .towns{display:flex;flex-wrap:wrap;gap:8px;padding:20px 24px 22px;border-top:1px solid var(--rule)}
.area .towns a{transition:background .14s ease,color .14s ease,border-color .14s ease}
.area .towns a:hover{background:var(--brand-dk);border-color:var(--brand-dk);color:#fff}
.area .towns a:focus-visible{outline:3px solid var(--brand-dk);outline-offset:2px}
.area .towns b,.area .towns a{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:16.5px;
     letter-spacing:.02em;color:var(--navy);background:var(--tint);border:1px solid var(--rule);
     border-radius:var(--r);padding:5px 13px 6px}

/* ---------- ASSURANCE (proof woven in, no tiles) ---------- */
.assure{border-bottom:1px solid var(--rule);background:#fff}
.assure .wrap{display:flex;align-items:stretch;gap:0;padding:34px 0}
.assure .it{flex:1;display:grid;grid-template-rows:auto 1fr;gap:7px;
  align-content:start;padding-right:26px}
.assure .it + .it{border-left:1px solid var(--rule);padding-left:30px}
.assure .n{font-family:'Barlow Semi Condensed',sans-serif;font-size:34px;font-weight:700;line-height:1;
     color:var(--brand-dk);line-height:1}
.assure .l{font-size:16px;line-height:1.42;color:var(--slate)}

/* ---------- SERVICES (split, artefact right) ---------- */
.svc .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:72px;align-items:start}
.svc ul{list-style:none;margin-top:34px;border-top:1px solid var(--rule)}
/* The qualifier sits UNDER its service, not stranded at the right edge. Pushed right with
   margin-left:auto it left ~200px of void mid-row, so the eye had to jump the gap on every
   line and the block read like a price list with the prices missing. Underneath, each row
   is one thing you can read in a glance — and these are real pages now, so they get a
   link affordance too. */
.svc li{border-bottom:1px solid var(--rule);padding:14px 0 15px 34px;position:relative}
.svc li::before{content:"";position:absolute;left:2px;top:25px;width:15px;height:2px;background:var(--brand)}
.svc li a{display:inline-block;padding:3px 0;font-family:'Barlow Semi Condensed',sans-serif;font-size:24px;font-weight:600;
     color:var(--navy);letter-spacing:.005em;text-decoration:none;
     text-underline-offset:3px;text-decoration-thickness:2px}
.svc li a:hover,.svc li a:focus-visible{text-decoration:underline;text-decoration-color:var(--brand)}
.svc li span{display:block;margin-top:3px;font-family:'Barlow',sans-serif;font-size:15.5px;
     font-weight:400;color:var(--muted);letter-spacing:0}
.svc figure{border-radius:var(--r);overflow:hidden}
.svc figure img{width:100%;height:auto}
.svc figcaption{font-size:14.5px;color:var(--muted);padding:12px 2px 0;text-align:left}

/* ---------- BRANDS ---------- */
.brands{background:var(--tint);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.brands .head{display:flex;align-items:flex-end;justify-content:space-between;gap:60px}
.brands .head p{max-width:50ch;font-size:18px;margin-top:14px}
.wall{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);
     border:1px solid var(--rule);margin-top:40px;border-radius:var(--r);overflow:hidden}
.wall div,.wall a{background:#fff;height:76px;display:flex;align-items:center;justify-content:center;
     font-family:'Barlow Semi Condensed',sans-serif;font-size:22px;font-weight:600;
     color:var(--navy);letter-spacing:.01em;text-align:center;padding:0 12px}
/* Twenty brands fill the five-column grid exactly, which left this alone on a fifth row
   beside four empty cells. Spanning the width makes it the bar that closes the wall. */
.wall div.more,.wall a.more{grid-column:1 / -1;background:var(--navy);color:#fff;
  font-size:18px;letter-spacing:.05em}
/* They are links now, so they say so on hover and answer the keyboard. */
.wall a{transition:background .14s ease,color .14s ease}
.wall a:hover{background:var(--tint);color:var(--brand-dk)}
.wall a.more:hover{background:var(--ink);color:#fff}
.wall a:focus-visible{outline:3px solid var(--brand-dk);outline-offset:-3px;z-index:1}

/* ---------- WORK (split reversed) ---------- */
.work .wrap{display:grid;grid-template-columns:.86fr 1.14fr;gap:72px;align-items:center}
.work .copy p{font-size:18px;margin-top:14px}
.work .quote{margin-top:26px;border-left:3px solid var(--brand);padding:2px 0 2px 20px;
     font-family:'Barlow Semi Condensed',sans-serif;font-size:23px;font-weight:500;
     color:var(--ink);line-height:1.42}
.work .btn{margin-top:30px}
/* Masonry, not a grid. Each photograph keeps its own proportions — object-fit:contain in
   a fixed 4:3 frame pillarboxed the portrait shots into pale fields — and column packing
   removes the ragged bottoms a two-column grid leaves behind.
   These rules live HERE, above the breakpoints, because they were appended below them and
   the base `columns:2` then beat the 640px override: the phone got two unreadable columns. */
.grid4{columns:2;column-gap:20px;display:block}
.grid4 figure{border-radius:var(--r);overflow:hidden;background:#fff;
  display:block;break-inside:avoid;margin:0 0 20px}
.grid4 figure a{display:block;overflow:hidden;background:var(--tint)}
.grid4 figcaption{font-family:'Barlow Semi Condensed',sans-serif;font-size:17px;font-weight:600;
     color:var(--navy);padding:11px 14px 12px;border:1px solid var(--rule);border-top:none;
     border-radius:0 0 var(--r) var(--r)}

/* ---------- TRUST ---------- */
.trust{background:#fff;border-top:1px solid var(--rule)}
.trust .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.promise{list-style:none;margin-top:30px;display:grid;grid-template-columns:1fr 1fr;
     gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.promise li{background:#fff;padding:20px 22px;font-family:'Barlow Semi Condensed',sans-serif;
     font-size:22px;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:12px}
.promise li::before{content:"";width:9px;height:9px;background:var(--brand);border-radius:50%;flex:0 0 auto}
.tcard{border:1px solid var(--rule);border-radius:var(--r);padding:34px 34px 30px;background:#fff}
.tcard .stars{color:var(--brand);letter-spacing:4px;font-size:16px}
.tcard .q{font-size:22px;line-height:1.55;color:var(--ink);margin-top:16px;
     font-family:'Barlow Semi Condensed',sans-serif;font-weight:500}
.tcard .who{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);font-size:15.5px;color:var(--muted)}
.tcard .who b{font-family:'Barlow Semi Condensed',sans-serif;font-size:19px;font-weight:600;
     color:var(--ink);display:block;letter-spacing:.01em}
.tcard .add{margin-top:24px;font-size:15.5px;color:var(--muted);line-height:1.55}

/* ---------- CTA ---------- */
.cta{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.cta .motif{position:absolute;inset:0;pointer-events:none}
.cta .wrap{position:relative;z-index:2;padding:62px 0;display:flex;align-items:center;gap:56px}
.cta h2{color:#fff;font-size:37px;line-height:1.16}
.cta p{color:rgba(255,255,255,.78);margin-top:10px;font-size:18px;max-width:52ch}
.cta .act{margin-left:auto;display:flex;align-items:center;gap:18px;flex:0 0 auto}
.cta .telbtn{background:#fff;color:var(--navy);padding:15px 28px 16px}
.cta .telbtn svg{fill:var(--navy)}
.cta .telbtn .t{font-size:34px}

/* ---------- FOOTER ---------- */
body > footer{background:var(--ink);color:rgba(255,255,255,.66);font-size:16px}
body > footer .wrap{padding:60px 0 0;display:grid;grid-template-columns:1.35fr 1fr 1fr 1.15fr;gap:52px}
body > footer h5{color:#fff;font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
     margin-bottom:18px;font-family:'Barlow Semi Condensed',sans-serif}
body > footer ul{list-style:none}
body > footer li{font-size:16px}
body > footer li > a{display:block;padding:7px 0;min-height:34px}
body > footer .hrs a{display:inline-block;padding:6px 0}
body > footer .bfr-tel--plain{display:inline-block;padding:4px 0}
body > footer li:not(:has(> a)){padding:7px 0}
body > footer .brand img{width:152px;height:auto;align-self:flex-start}
body > footer .brand .footer-logo{display:inline-block;margin-bottom:20px;border-radius:2px}
body > footer .brand .footer-logo:focus-visible{outline:3px solid #8FC9F0;outline-offset:4px}
body > footer .brand p{font-size:15.5px;line-height:1.6;max-width:32ch}
body > footer a.tel{font-family:'Barlow Semi Condensed',sans-serif;font-size:31px;font-weight:700;
     color:#fff;display:block;line-height:1.1;letter-spacing:.01em}
body > footer .hrs{margin-top:14px;font-size:15.5px;line-height:1.6}
body > footer .hrs b{display:block;color:#fff;font-weight:500}
.legal{border-top:1px solid rgba(255,255,255,.10);margin-top:48px}
.legal .wrap{padding:20px 0;display:flex;justify-content:space-between;grid-template-columns:none;
     font-size:15px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1240px){
  .wrap{width:auto;padding:0 30px}
  .cta .wrap{padding:62px 30px}
  body > footer .wrap{padding:60px 30px 0}
  .legal .wrap{padding:20px 30px}
  .hero > .wrap{padding:64px 30px 68px;gap:48px}
  nav.main{gap:22px}
  .nav-right .hrs{display:none}
}
@media (max-width:900px){
  .util .wrap{height:auto;padding:10px 30px;gap:16px;flex-wrap:wrap;font-size:14px}
  header.nav .wrap{height:78px;gap:0}
  header.nav img.logo{height:48px;width:auto}
  header.nav .wrap{position:relative}
  nav.main{display:none}
  /* The panel the burger opens. Below 900px the navigation used to be hidden with no
     way to reach it, which the design brief explicitly forbids: restacked, never
     removed. */
  nav.main.is-open{display:block;position:absolute;top:100%;left:0;right:0;z-index:60;
    background:#fff;border-top:1px solid var(--rule);box-shadow:0 14px 28px rgba(14,27,37,.10)}
  nav.main.is-open ul{display:flex;flex-direction:column;gap:0;padding:6px 22px 14px;list-style:none}
  nav.main.is-open li + li{border-top:1px solid var(--rule)}
  nav.main.is-open a{display:block;padding:15px 0;min-height:44px}
  .burger{display:block}
  .nav-right{margin-left:auto;gap:20px}
  .telbtn{padding:10px 18px 11px}
  .telbtn .t{font-size:23px}
  .hero > .wrap{grid-template-columns:1fr;gap:42px;padding:52px 30px 58px}
  .hero h1{font-size:42px}
  .hero p.lead{font-size:18px;max-width:none}
  .assure .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:26px 30px}
  .assure .it{padding:14px 0}
  .assure .it + .it{border-left:none;padding-left:0}
  .assure .it:nth-child(odd){border-right:1px solid var(--rule);padding-right:22px}
  .assure .it:nth-child(even){padding-left:22px}
  .assure .it:nth-child(n+3){border-top:1px solid var(--rule)}
  .svc .wrap,.work .wrap,.trust .wrap{grid-template-columns:1fr;gap:44px}
  .wall{grid-template-columns:repeat(4,1fr)}
  .cta .wrap{flex-direction:column;align-items:flex-start;gap:28px;padding:52px 30px}
  .cta .act{margin-left:0}
  body > footer .wrap{grid-template-columns:1fr 1fr;gap:40px;padding:52px 30px 0}
}
@media (max-width:640px){
  .sec{padding:56px 0}
  .util .wrap{padding:9px 22px;gap:12px;font-size:13.5px}
  /* The separator is a divider and can go. The "100% Canadian" badge is the client's
     messaging and stays — deck p.14: nothing is hidden from mobile, sections restack.
     The strip already wraps, so it has somewhere to go. */
  .util .sep{display:none}
  .util .leaf{margin-left:0}
  .wrap{padding:0 22px}
  /* At 430px the call button and the logo were laid out on one row and collided — the
     button sat on top of the wordmark. The header wraps instead: logo and menu button on
     the first row, the number full width beneath, which is also what the design brief
     asks for on a handset. */
  header.nav .wrap{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:14px;row-gap:12px}
  header.nav img.logo{height:40px;width:auto}
  .bfr-logo{flex:0 0 auto}
  /* display:contents dissolves .nav-right so its children become direct children of the
     header row and can be ordered independently. Without it the menu button is trapped
     beside the call button on the second row, leaving the space next to the logo empty. */
  .nav-right{display:contents}
  .burger{order:2;margin-left:auto}
  .nav-right .bfr-tel{order:3;width:100%;justify-content:center}
  nav.main.is-open{top:100%}
  .telbtn{padding:9px 15px 10px;gap:9px}
  .telbtn svg{width:18px;height:18px}
  .telbtn .t{font-size:20px}
  .telbtn .s{font-size:11px;letter-spacing:.13em}
  .hero > .wrap{padding:40px 22px 46px;gap:34px}
  .hero h1{font-size:33px;line-height:1.1}
  .hero p.lead{font-size:17px;margin-top:18px}
  .hero .act{flex-direction:column;align-items:stretch;gap:14px;margin-top:28px}
  .hero .act .telbtn{justify-content:center;padding:14px 20px 15px}
  .hero .act .telbtn .t{font-size:29px}
  .hero .act .btn{justify-content:center}
  .hero .note{flex-direction:column;align-items:flex-start;gap:8px;margin-top:18px}
  .area .cap{padding:15px 18px 12px}
  .area .cap h4{font-size:19px}
  .area .cap span{font-size:13px}
  .area .towns{padding:16px 18px 18px;gap:7px}
  .area .towns b,.area .towns a{font-size:15px;padding:4px 11px 5px}
  .assure .wrap{grid-template-columns:1fr 1fr;padding:22px}
  .assure .n{font-size:28px}
  .assure .l{font-size:14.5px}
  .sec-head h2,.brands .head h2,.work h2,.trust h2{font-size:29px}
  .sec-head p,.brands .head p,.work .copy p{font-size:17px}
  .brands .head{flex-direction:column;align-items:flex-start;gap:0}
  .svc li{font-size:20px;padding:13px 0 13px 28px;flex-wrap:wrap;gap:4px}
  .svc li::before{top:21px;width:12px}
  .svc li span{margin-left:0;flex-basis:100%;font-size:14.5px}
  .wall{grid-template-columns:repeat(2,1fr)}
  .wall div,.wall a{height:64px;font-size:19px}
  .grid4,.bfr-archive .grid4{columns:1;column-gap:0}
  .grid4 figure{margin-bottom:16px}
  .work .quote{font-size:21px}
  .promise{grid-template-columns:1fr}
  .promise li{font-size:20px;padding:16px 18px}
  .tcard{padding:26px 24px 24px}
  .tcard .q{font-size:20px}
  .cta .wrap{padding:44px 22px;gap:24px}
  .cta h2{font-size:29px}
  .cta .act{flex-direction:column;align-items:stretch;width:100%;gap:14px}
  .cta .telbtn{justify-content:center}
  .cta .btn{justify-content:center}
  body > footer .wrap{grid-template-columns:1fr;gap:34px;padding:44px 22px 0}
  body > footer .bfr-tel--plain{font-size:28px}
  .legal .wrap{flex-direction:column;gap:8px;padding:18px 22px}
}

/* ---------- THEME ADDITIONS ---------- */
/* The phone link, built by bfr_tel_link(). One rule, one look, four placements. */
.bfr-tel{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.bfr-tel--button{background:var(--brand-dk);color:#fff;border-radius:var(--r);padding:11px 22px 12px}
.bfr-tel--button .bfr-tel-icon{width:21px;height:21px;fill:#fff;opacity:.9;flex:0 0 auto}
.bfr-tel--button .bfr-tel-text{display:block}
.bfr-tel-label{display:block;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.82;line-height:1.2;white-space:nowrap}
.bfr-tel-number{display:block;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:26px;line-height:1.04;letter-spacing:.01em;white-space:nowrap}
.cta .bfr-tel--button{background:#fff;color:var(--navy)}
.cta .bfr-tel--button .bfr-tel-icon{fill:var(--navy)}
.hero .bfr-tel--button{padding:15px 28px 16px}
.hero .bfr-tel--button .bfr-tel-number{font-size:34px}
footer .bfr-tel--plain{font-family:'Barlow Semi Condensed',sans-serif;font-size:31px;font-weight:700;color:#fff;line-height:1.1;letter-spacing:.01em}

.bfr-callblock{display:flex;align-items:center;gap:22px;margin-top:34px;flex-wrap:wrap}

/* Social: inline SVG, so it takes the brand colour and stays sharp at any size. */
.bfr-social{display:flex;gap:12px;margin-top:20px}
.bfr-social-link{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.20);border-radius:var(--r)}
.bfr-social-icon{width:17px;height:17px;fill:rgba(255,255,255,.80)}

.bfr-page{padding:64px 0 88px}
/* A client page is prose with nothing beside it, so it reads in the same centred column
   as a town page instead of hugging the left of a 1320px wrap. */
.bfr-page h1,.bfr-page .bfr-body,.bfr-page .bfr-callblock{max-width:var(--wrap-text)}
.bfr-page h1{font-size:44px;max-width:22ch}
.bfr-body{margin-top:26px;max-width:70ch;font-size:17.5px}
/* The global reset zeroes every margin, and nothing put paragraph spacing back — so every
   service, town and photograph page rendered its body as one unbroken wall of text.
   Spacing paragraph-to-paragraph fixed the case in front of us and left every other
   block unspaced: on /testimonials/ the review card and the three video embeds sit
   between paragraphs, so each one landed flush against the prose above and below it.
   Space every block against the one before it; the rules below adjust from there. */
.bfr-body > * + *{margin-top:1.05em}
.bfr-body ul,.bfr-body ol{margin-left:1.3em}
.bfr-body li+li{margin-top:.4em}
.bfr-body h2,.bfr-body h3{margin-top:1.6em;margin-bottom:.4em;font-size:25px}
.bfr-body a{color:var(--brand-dk);text-decoration:underline;text-underline-offset:2px}

/* Video embeds. The stored iframes carry width="560" height="315" as HTML attributes,
   which no stylesheet was overriding, so a testimonial video ran 130px past the edge of a
   430px phone. The ratio comes from padding rather than aspect-ratio: a browser that does
   not understand the property would collapse the box to nothing, and a video that is not
   there is worse than one that is the wrong shape. */
.bfr-body > .bfr-embed{margin-top:1.7em}
.bfr-embed{position:relative;width:100%;max-width:640px;padding-top:min(56.25%, 360px);
  background:var(--ink);border-radius:4px;overflow:hidden}
.bfr-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- BOOK A SERVICE CALL -------------------------------------------------
   There is no booking system behind this page and the brand's own promise is
   that there isn't one — "no call center", the person who answers is the person
   who comes out. So the number is the hero at display scale and everything under
   it stays quiet. One bold element, not five. */
.bfr-book-hero{background:var(--tint);border-bottom:1px solid var(--rule);padding:64px 0 56px}
.bfr-book-lede{width:min(100%, var(--wrap-read))}
.bfr-book-hero h1{font-size:42px;line-height:1.04;letter-spacing:-.012em}
.bfr-book-strap{margin-top:16px;font-size:20px;line-height:1.45;color:var(--navy);max-width:42ch}
.bfr-book-call{margin-top:32px}
.bfr-book-tel{padding:20px 34px 22px;gap:16px}
.bfr-book-tel .bfr-tel-number{font-size:48px}
.bfr-book-tel .bfr-tel-label{font-size:13.5px}
.bfr-book-tel .bfr-tel-icon{width:28px;height:28px}
.bfr-book-hours{margin-top:18px;font-size:16px;color:var(--muted)}
.bfr-book-hours b{color:var(--ink);font-weight:600}
.bfr-book-hours span{display:block;margin-top:1px}
.bfr-book-email{margin-top:13px;font-size:16px;color:var(--muted)}
.bfr-book-email a{display:inline-block;padding:5px 0;color:var(--brand-dk);text-decoration:underline;text-underline-offset:2px}

.bfr-book-body{width:min(100%, var(--wrap-read));padding:56px 0 88px}
.bfr-book-body > * + *{margin-top:52px}
.bfr-book-body h2{font-size:27px}

/* Numbered because this genuinely is a sequence — you call, he answers, you agree
   a time — and the order is information the reader needs, not decoration. The
   numerals are the condensed face the brand picked because the phone number is
   the loudest thing on the site. */
.bfr-steps{list-style:none;margin-top:22px;counter-reset:bfrstep}
.bfr-steps li{counter-increment:bfrstep;position:relative;padding-left:54px}
.bfr-steps li + li{margin-top:26px}
.bfr-steps li::before{content:counter(bfrstep);position:absolute;left:0;top:-6px;
  font-family:'Barlow Semi Condensed',sans-serif;font-size:32px;font-weight:700;
  line-height:1;color:var(--brand)}
.bfr-steps b{display:block;font-size:18.5px;font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:600;color:var(--ink)}
.bfr-steps span{display:block;margin-top:5px;max-width:58ch}

.bfr-ready{list-style:none;margin-top:20px}
.bfr-ready li{position:relative;padding-left:26px;max-width:60ch}
.bfr-ready li + li{margin-top:12px}
.bfr-ready li::before{content:"";position:absolute;left:1px;top:.66em;width:10px;height:2px;
  background:var(--brand-dk)}

/* Deliberately not the maple red, which this brand reserves for the leaf. The note
   earns its distinction from position and weight instead. */
.bfr-book-safety{border-left:4px solid var(--navy);background:var(--tint);
  padding:20px 24px;border-radius:0 var(--r) var(--r) 0}
.bfr-book-safety h2{font-size:19px;color:var(--navy)}
.bfr-book-safety p{margin-top:7px;font-size:16.5px;max-width:60ch}

.bfr-book-towns{list-style:none;margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.bfr-book-towns a{display:block;border:1px solid var(--rule);border-radius:3px;padding:9px 17px;
  font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:17px;color:var(--navy)}
.bfr-book-towns a:hover{border-color:var(--brand-dk);color:var(--brand-dk);background:var(--tint)}

/* ---- MAKES AND MODELS ----------------------------------------------------
   Tiles in a grid; the open one reveals a panel that spans the full width
   beneath its row. The panel is a sibling of its tile with grid-column 1/-1,
   so auto-placement drops it onto the next row wherever the tile happens to
   sit — no JavaScript decides the layout, only what is open. */
.bfr-makes-head{width:min(100%, var(--wrap-read))}
.bfr-makes-head h1{font-size:44px;margin-top:12px}
.bfr-makes-head .bfr-strap{margin-top:14px;font-size:20px;color:var(--navy);font-weight:500}
.bfr-makes-head .bfr-lede{margin-top:18px}
.bfr-makes-head .bfr-lede p + p{margin-top:1.05em}
.bfr-makes-head .bfr-callblock{margin-top:26px}

.bfr-makes-bar{display:flex;align-items:baseline;gap:24px;margin-top:64px;
  padding-bottom:14px;border-bottom:1px solid var(--rule)}
.bfr-makes-bar h2{font-size:31px}
.bfr-makes-all{margin-left:auto;background:none;border:0;cursor:pointer;padding:9px 4px;
  font-family:'Barlow Semi Condensed',sans-serif;font-size:16px;font-weight:600;
  letter-spacing:.02em;color:var(--brand-dk);text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap}
.bfr-makes-all:focus-visible{outline:3px solid var(--brand-dk);outline-offset:3px;border-radius:2px}
.bfr-makes-note{margin-top:16px;font-size:16px;color:var(--muted);max-width:74ch}

.bfr-makegrid{list-style:none;margin-top:26px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));align-items:start}
/* With no JavaScript every card is open and nothing can close it, so a narrow tile
   sitting above a full-width panel reads as a layout that failed. Stacked, it reads as
   what it is: a list of brands with their details under each one. */
.bfr-makegrid:not(.is-enhanced) .bfr-make-tile{grid-column:1 / -1}
.bfr-makegrid:not(.is-enhanced) .bfr-make-sign{display:none}

/* An empty anchor for a retired brand name. It must not occupy space, but it must still
   be a scroll target, so it is positioned rather than displayed away. */
.bfr-anchor{position:absolute;width:1px;height:1px;overflow:hidden}
/* The header is sticky, so a card scrolled to by its anchor arrived underneath it.
   Both the tile and the retired-name anchors need the offset — the alias is the
   element the browser actually scrolls to for /makes-and-models/#york-diamond. */
.bfr-make-tile,.bfr-anchor{scroll-margin-top:132px}

.bfr-make-tile{position:relative;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);overflow:hidden}
.bfr-make-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--brand);transition:width .16s ease}
.bfr-make-tile h3{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:normal}
.bfr-make-btn{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:15px 40px 16px 20px;font:inherit;color:inherit}
.bfr-make-btn:focus-visible{outline:3px solid var(--brand-dk);outline-offset:-3px}
.bfr-make-name{display:block;font-family:'Barlow Semi Condensed',sans-serif;font-size:21px;
  font-weight:600;color:var(--ink);line-height:1.15}
.bfr-make-line{display:block;margin-top:5px;font-size:15px;line-height:1.45;color:var(--muted)}
.bfr-make-sign{position:absolute;right:16px;top:20px;width:13px;height:13px}
.bfr-make-sign::before,.bfr-make-sign::after{content:"";position:absolute;background:var(--brand-dk);
  border-radius:1px}
.bfr-make-sign::before{left:0;right:0;top:5.5px;height:2px}
.bfr-make-sign::after{top:0;bottom:0;left:5.5px;width:2px;transition:transform .16s ease}
.bfr-make-tile:hover{border-color:#BFCEDA}
.bfr-make-tile:hover::before{width:5px}
/* Open: the vertical stroke of the plus rotates away, leaving a minus. */
.bfr-make-tile:has(> h3 > [aria-expanded="true"]){border-color:#AFC6D6;background:var(--tint)}
.bfr-make-tile:has(> h3 > [aria-expanded="true"])::before{width:6px;background:var(--brand-dk)}
.bfr-make-tile:has(> h3 > [aria-expanded="true"]) .bfr-make-sign::after{transform:scaleY(0)}

.bfr-make-tile--ask{background:var(--tint);border-style:dashed}
.bfr-make-tile--ask::before{background:var(--navy)}

/* display sits on :not([hidden]) so the hidden attribute keeps winning — a bare display
   rule here would beat it and show all twenty panels at once. */
.bfr-make-panel{grid-column:1 / -1;border:1px solid #AFC6D6;border-left:5px solid var(--brand-dk);
  border-radius:var(--r);background:var(--tint);padding:24px 28px}
.bfr-make-panel:not([hidden]){display:block;animation:bfr-make-reveal .18s ease both}
@keyframes bfr-make-reveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .bfr-make-panel:not([hidden]){animation:none}
  .bfr-make-sign::after,.bfr-make-tile::before{transition:none}
}
.bfr-make-q{font-family:'Barlow Semi Condensed',sans-serif;font-size:21px;font-weight:600;
  color:var(--ink);max-width:70ch}
.bfr-make-a{margin-top:8px;max-width:74ch}
.bfr-make-panel .bfr-make-a + .bfr-make-a{margin-top:.9em}
.bfr-make-facts{margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;
  font-size:16px;max-width:86ch}
.bfr-make-facts dt{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;
  color:var(--navy);white-space:nowrap}
.bfr-make-facts dd{color:var(--body)}
.bfr-make-note{margin-top:16px;font-size:16.5px;max-width:78ch}
.bfr-make-note b{color:var(--navy)}
.bfr-make-cta{margin-top:16px;font-family:'Barlow Semi Condensed',sans-serif;font-size:18px;
  font-weight:600;color:var(--navy)}
.bfr-make-cta a{color:var(--brand-dk);text-decoration:underline;text-underline-offset:3px}
.bfr-make-ask-actions{margin-top:20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.bfr-makes-foot{width:min(100%, var(--wrap-read));margin-top:70px}
.bfr-makes-sec + .bfr-makes-sec{margin-top:52px}
.bfr-makes-sec h2{font-size:31px}
.bfr-makes-sec p{margin-top:14px;max-width:74ch}
.bfr-makes-sec .bfr-ready{margin-top:16px}
.bfr-makes-warn{color:var(--navy);font-weight:500}
.bfr-makes-sec .bfr-callblock{margin-top:24px}

@media (max-width:900px){
  .bfr-makes-head h1{font-size:33px}
  .bfr-makes-bar{margin-top:46px}
  .bfr-makes-bar h2,.bfr-makes-sec h2{font-size:26px}
  .bfr-make-panel{padding:20px}
  .bfr-make-facts{grid-template-columns:1fr;gap:2px}
  .bfr-make-facts dd{margin-bottom:8px}
}
@media (max-width:640px){
  .bfr-makegrid{grid-template-columns:1fr}
}

.bfr-no-content{padding:80px 30px;text-align:center;color:var(--body)}

/* FAQs, rendered by bfr-seo from the same records that produce the schema. */
.bfr-faq{margin-top:44px;max-width:70ch}
.bfr-faq-title{font-size:29px;margin-bottom:14px}
.bfr-faq-item{border-top:1px solid var(--rule);padding:14px 0}
.bfr-faq-q{font-family:'Barlow Semi Condensed',sans-serif;font-size:21px;font-weight:600;color:var(--navy);cursor:pointer}
.bfr-faq-a{padding-top:8px;font-size:16.5px}

.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
@media (max-width:640px){
  .bfr-callblock{flex-direction:column;align-items:stretch;gap:14px}
  .bfr-callblock .bfr-tel--button{justify-content:center}
  .bfr-page h1{font-size:31px}
}

/* ---------- SINGLE PAGES ---------- */
.bfr-single{padding:56px 0 88px}
.bfr-pagehead{max-width:70ch}
.bfr-crumbs{font-size:14.5px;color:var(--muted);display:flex;gap:8px;align-items:center}
.bfr-crumbs a{color:var(--muted);display:inline-block;padding:4px 0}
.bfr-single h1{font-size:44px;margin:12px 0 0;max-width:20ch}
.bfr-qualifier{font-family:'Barlow Semi Condensed',sans-serif;font-size:23px;font-weight:500;color:var(--navy);margin-top:20px}

/* Service page: words beside the evidence, the proposal's split archetype applied one
   level down. The photograph carries its own caption because the caption is Darren's —
   his wording, about his own job — and it is what turns an assertion of competence into
   a demonstration of it. */
.bfr-split{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:start;margin-top:8px}
.bfr-split .bfr-body{max-width:60ch}
.bfr-evidence{margin-top:26px;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:#fff}
.bfr-evidence img{width:100%;height:auto;display:block}
.bfr-evidence figcaption{font-family:'Barlow Semi Condensed',sans-serif;font-size:16px;font-weight:600;
  color:var(--navy);padding:13px 16px 15px;border-top:1px solid var(--rule);background:var(--tint)}
/* The closing call line and the run of towns. Both are navigation dressed as prose, so
   they sit quietly under the page rather than competing with the photograph. */
.bfr-close{margin-top:36px;font-family:'Barlow Semi Condensed',sans-serif;font-size:22px;
  font-weight:600;color:var(--navy);max-width:60ch}
.bfr-area{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;font-size:16px}
.bfr-area b{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;color:var(--ink)}
.bfr-area a{display:inline-block;padding:5px 0;color:var(--brand-dk);text-decoration:underline;text-underline-offset:3px}
.bfr-area a:hover,.bfr-area a:focus-visible{text-decoration-thickness:2px}

@media (max-width:900px){
  .bfr-split{grid-template-columns:1fr;gap:34px}
  .bfr-split .bfr-body{max-width:70ch}
}
.bfr-jobshot{margin:36px 0 0;border-radius:var(--r);overflow:hidden;background:#fff}
.bfr-jobshot img{display:block;width:100%;height:auto}
.bfr-jobcaption{font-size:14.5px;color:var(--muted);padding:12px 16px;border:1px solid var(--rule);border-top:none}
/* A town page has no second column, so its content was sitting in the left half of a
   1320px wrap with the rest empty. One centred reading column instead. */
.bfr-single--town .bfr-pagehead,.bfr-single--town .bfr-body,
.bfr-single--town .bfr-townservices-head,.bfr-single--town .bfr-townservices{max-width:var(--wrap-text)}
.bfr-townservices-head{margin-top:44px;font-size:25px}
.bfr-townservices{list-style:none;margin-top:14px;border-top:1px solid var(--rule);max-width:70ch}
.bfr-townservices li{border-bottom:1px solid var(--rule);font-family:'Barlow Semi Condensed',sans-serif;font-size:22px;font-weight:600}
.bfr-townservices li > a{display:block;padding:13px 0}
@media (max-width:640px){ .bfr-single h1{font-size:31px} .bfr-single{padding:40px 0 56px} }

/* ---------- RENDER FIXES FOUND BY LOOKING ---------- */
/* The page footer must not style a <footer> inside an <article>. The review card uses
   one for its attribution — valid HTML5 — and inherited the dark ground, which turned
   "Jerry Smith · 8 December 2014" into a navy box with white text on white. */
.bfr-review-who{background:none;color:var(--muted);padding:0}

/* The mockup used four pre-cropped 4:3 photographs. The real library is mixed portrait
   and landscape, so without a ratio the grid came out ragged with large gaps. */
/* No fixed frame. Each photograph keeps its own proportions, so a portrait shot is not
   pillarboxed into a pale field and a landscape one is not letterboxed. The column packs
   like masonry, which also removes the ragged bottoms a two-column grid left behind. */
/* contain, NOT cover. These photographs carry the technician's own red arrows and notes,
   and page 15 of the deck promises the annotations are left alone. A centred cover crop
   sliced "BEFORE/AFTER" off one tile and reduced another to a blank band — the crop was
   removing the very thing the photograph is for. Letterboxing on a tint is the honest
   trade: the whole frame, every time. */
.grid4 img{width:100%;height:auto;display:block}
.grid4 figcaption{margin-top:0}
.bfr-faqsec{border-top:1px solid var(--rule);padding:64px 0 88px}
.bfr-faqsec .bfr-faq{margin-top:0;max-width:72ch;margin-inline:auto}
/* Archive index pages. These shipped with no rules at all, so /services/,
   /service-area/ and /our-work/ rendered unstyled inside an otherwise designed site. */
.bfr-archive .bfr-pagehead{margin-bottom:40px}
.bfr-arclist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bfr-arclist li{padding:18px 20px;background:#F1F5F8;border-left:3px solid #007BCB}
.bfr-arclist li > a{display:inline-block;padding:4px 0;min-height:32px}
.bfr-arclist li a{font-family:'Barlow Semi Condensed',Arial,sans-serif;font-weight:600;
  font-size:1.25rem;color:#005E9C;text-decoration:none}
.bfr-arclist li a:hover,.bfr-arclist li a:focus{text-decoration:underline}
.bfr-arclist li span{display:block;margin-top:4px;color:#0E1B25;font-size:.95rem}

/* ---------- SERVICE-AREA HUB ---------- */
/* The hub is one column. A fixed measure, because ch resolves per font and the
   blocks here are set in different faces at different sizes. */
.bfr-hub{width:min(100%, var(--wrap-read))}
.bfr-archive--town .bfr-pagehead{max-width:none}
/* Six places, one short line each, the fuller answer behind a labelled control. <details>
   is the same element the FAQ blocks use, so the site has ONE way of revealing more
   rather than two — and it needs no JavaScript to work.
   The open card takes the brand-blue left rule the pull-quotes already use: the reader
   learns that mark once and it means the same thing everywhere. */
.bfr-strap{margin-top:18px;font-family:'Barlow Semi Condensed',sans-serif;font-size:23px;
  font-weight:500;color:var(--navy);max-width:none}
.bfr-lede{margin-top:16px;font-size:17.5px}
.bfr-lede p{max-width:72ch}
.bfr-lede p+p{margin-top:1.05em}

.bfr-areas{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:14px}
.bfr-area-card{position:relative;overflow:hidden;background:#fff;padding:22px 26px 20px;
  border:1px solid var(--rule);border-radius:var(--r);scroll-margin-top:120px}
.bfr-area-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--brand);transition:width .18s ease}
.bfr-area-card:has(.bfr-area-more[open])::before{width:4px}
.bfr-area-card:has(.bfr-area-more[open]){background:var(--tint)}

.bfr-area-name{font-size:27px;margin:0}
.bfr-area-line{margin-top:7px;color:var(--body);max-width:62ch}

.bfr-area-more{margin-top:15px}
.bfr-area-more summary{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:'Barlow Semi Condensed',sans-serif;font-size:17px;font-weight:600;
  color:var(--brand-dk);list-style:none;padding:5px 0;min-height:32px}
.bfr-area-more summary::-webkit-details-marker{display:none}
.bfr-area-more summary::marker{content:""}
.bfr-area-more summary::before{content:"";width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.bfr-area-more[open] summary::before{transform:rotate(-135deg) translate(-2px,-2px)}
.bfr-area-more summary:focus-visible{outline:3px solid var(--brand-dk);outline-offset:3px;border-radius:2px}

.bfr-area-panel{padding-top:6px;max-width:66ch;font-size:16.5px}
.bfr-area-panel h3{font-size:21px;margin-top:22px}
.bfr-area-panel h4{font-family:'Barlow Semi Condensed',sans-serif;font-size:17.5px;
  font-weight:600;color:var(--navy);margin-top:1.5em}
.bfr-area-panel p{margin-top:.85em}
.bfr-area-panel a{color:var(--brand-dk);text-decoration:underline;text-underline-offset:2px}
.bfr-area-panel .bfr-panel-cta strong{color:var(--navy)}

.bfr-area-link{display:inline-block;margin-top:16px;padding:5px 0;font-size:15.5px;color:var(--brand-dk);
  text-decoration:underline;text-underline-offset:3px}

.bfr-area-close{margin-top:56px;padding-top:34px;border-top:1px solid var(--rule)}
.bfr-area-close p{max-width:72ch}
.bfr-area-close h2{font-size:29px}
.bfr-area-close p{margin-top:.9em;font-size:17px}
.bfr-area-close .bfr-callblock{margin-top:24px}

@media (prefers-reduced-motion:reduce){
  .bfr-area-card::before,.bfr-area-more summary::before{transition:none}
}
@media (max-width:640px){
  .bfr-area-card{padding:18px 18px 16px}
  .bfr-area-name{font-size:23px}
  .bfr-areas{gap:12px}
}

.bfr-archive .grid4{margin-top:8px;columns:3;column-gap:18px}
.bfr-archive .grid4 figure{margin-bottom:18px}
.bfr-archive .grid4 figcaption{font-size:15.5px;padding:12px 14px 14px}
.bfr-archive .pagination,.bfr-archive .navigation{margin-top:40px}
.bfr-archive .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bfr-archive .page-numbers{display:inline-block;min-width:44px;min-height:44px;line-height:44px;
  text-align:center;padding:0 12px;background:#F1F5F8;color:#005E9C;text-decoration:none;
  border:1px solid #DDE3E9}
.bfr-archive .page-numbers.current{background:#005E9C;color:#fff;border-color:#005E9C}
.bfr-archive .page-numbers:hover,.bfr-archive .page-numbers:focus{background:#DDE3E9}
@media (max-width:640px){
  .bfr-arclist li{padding:14px 16px}
  .bfr-arclist li a{font-size:1.1rem}
}