/* ==========================================================================
   Blended Gelcoat Repair — page-specific styles (a sub-page of Scratch &
   Gouge Repair, linked from its Blended Repairs card).
   Loads after styles.css and reuses its tokens, buttons, eyebrows, header,
   footer and contact form. Everything here is prefixed .bgr- so no other page
   moves; the only unprefixed rules are the .sfr-ba slider styles, which every
   page that uses the shared slider redefines for itself (see hull/transom).
   The comp is drawn at 1024px; sizes below are its measurements x1.5, the
   1536px design width, expressed as vw so they track it.
   ========================================================================== */

.bgr-eyebrow{
  color:var(--icon-blue);
  font-size:clamp(0.6875rem,.76vw,0.7188rem);
  letter-spacing:2px;
  gap:18px;
  margin-bottom:8px;
}
.bgr-eyebrow i{background:var(--icon-blue);}
.bgr-accent{color:var(--icon-blue);}
/* Container-aligned left edge, but the right edge runs out to the card
   grid's gutter: the comp takes the fit and related bands almost to the
   viewport edge. Percentages here resolve against the full-width section. */
.bgr-wide-right{
  --wide-pad:clamp(18px,2.6vw,39.9px);
  max-width:none;
  padding-left:max(var(--pad), calc((100% - var(--container)) / 2 + var(--pad)));
  padding-right:max(var(--wide-pad), calc((100% - var(--container)) / 2 + var(--wide-pad)));
}

/* ---------- Hero ----------
   One photo (bgr-hero.jpg, "Same Boats. New Beginnings." baked in at its
   right edge). It covers the right of the band and stays anchored right so
   the tagline always survives the crop; its left edge feathers into the navy. */
.bgr-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#001A36 0%,var(--navy-2) 40%,#0B3A66 100%);
}
.bgr-hero-img{
  position:absolute;top:0;right:0;
  width:60%;height:100%;
  object-fit:cover;
  object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 24%);
}
.bgr-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,22,46,.9) 0%,
      rgba(0,22,46,.72) 34%,
      rgba(0,22,46,.2) 50%,
      rgba(0,22,46,0) 62%),
    linear-gradient(0deg, rgba(0,22,46,.72) 0%, rgba(0,22,46,0) 26%);
}
/* The comp indents the hero copy past the page edge and hangs the eyebrow
   rule out to its left. */
.bgr-hero-inner{
  --hero-indent:clamp(0px,4.2vw,64.5px);
  position:relative;z-index:2;
  padding-left:calc(var(--pad) + var(--hero-indent));
  padding-top:clamp(26px,1.9vw,29px);
  padding-bottom:clamp(14px,1vw,15.3px);
}
.bgr-hero-content{max-width:640px;}
.bgr-hero-eyebrow{
  font-size:clamp(0.6875rem,.8vw,0.7625rem);
  letter-spacing:2.2px;
  gap:18px;
  margin-bottom:9px;
  margin-left:calc(-40px - 18px);
}
.bgr-hero h1{
  font-size:clamp(2rem,3.07vw,2.9375rem);
  letter-spacing:-1px;
  line-height:1;
  color:#fff;
  margin-bottom:10px;
}
.bgr-hero h1 .accent{color:var(--accent);}
.bgr-hero-sub{
  color:rgba(255,255,255,.92);
  font-size:clamp(0.9375rem,1.055vw,1rem);
  line-height:1.39;
  max-width:30.9em;
  margin-bottom:clamp(18px,1.45vw,22.2px);
}
.bgr-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.bgr-hero-actions .btn{padding:14px 28px;}
.bgr-trust{
  display:grid;
  grid-template-columns:repeat(4,auto);
  justify-content:space-between;
  gap:18px clamp(20px,3vw,46px);
  max-width:1210px;
  margin-top:clamp(22px,1.8vw,27.5px);
}
.bgr-trust li{display:flex;align-items:center;gap:14px;color:#fff;}
.bgr-trust-icon{color:var(--accent);display:flex;flex:none;}
.bgr-trust-icon svg{width:auto;height:34px;}
.bgr-trust strong{display:block;font-family:var(--font-head);font-size:0.9063rem;line-height:1.35;margin-bottom:2px;}
.bgr-trust small{display:block;font-size:0.7813rem;color:rgba(255,255,255,.8);}

/* ---------- Icon rows (intro features + "right solution" features) ----------
   Centred columns, a pale-blue icon circle, hairline dividers between. */
.bgr-icons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.bgr-icons li{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-inline:clamp(6px,.8vw,12.2px);
}
.bgr-icons li + li{border-left:1px solid #DCE8F3;}
.bgr-icon{
  width:clamp(50px,4.6vw,70.5px);height:clamp(50px,4.6vw,70.5px);
  border-radius:50%;
  background:#E3F2FD;
  color:var(--icon-blue);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:clamp(6px,.5vw,7.5px);
}
.bgr-icon svg{width:54%;height:54%;}
.bgr-icons strong{
  font-family:var(--font-head);
  font-size:clamp(0.8438rem,.94vw,0.9rem);
  line-height:1.25;
  color:var(--navy);
  margin-bottom:4px;
}
.bgr-icons small{font-size:clamp(0.7813rem,.88vw,0.8438rem);line-height:1.36;color:var(--gray-text);}

/* ---------- Intro: copy + features | big before/after ---------- */
.bgr-intro{background:var(--light-bg);}
.bgr-intro-inner{
  display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,48fr);
  align-items:center;
  column-gap:clamp(28px,7.1vw,109px);
  padding-block:clamp(20px,1.5vw,23px) clamp(20px,1.45vw,22.2px);
}
.bgr-intro-copy h2{
  font-size:clamp(1.75rem,2.6vw,2.4937rem);
  letter-spacing:-.9px;
  line-height:1.07;
  margin-bottom:10px;
}
.bgr-intro-copy > p{
  font-size:clamp(0.9375rem,1.2vw,1.15rem);
  line-height:1.3;
  color:var(--gray-text);
  margin-bottom:clamp(18px,1.4vw,21.5px);
}
/* Desktop only: the comp runs this row a little wider than the copy (into the
   column gap) so every title holds one line. */
@media (min-width:1241px){
  .bgr-intro-features{margin-inline:-14px -34px;}
  .bgr-intro-features li{padding-inline:4px;}
}
.bgr-intro-features strong{font-size:clamp(0.8438rem,.91vw,0.8688rem);}
.bgr-intro-features small{max-width:150px;}

/* ---------- Process band ----------
   Photo bleeding off the left edge with a chevron point on its right, then
   copy + four step cards. The section's right padding reproduces .container's
   content edge (the recipe's why-band trick), so the cards stop where every
   other band's content does. */
.bgr-process{
  display:grid;
  grid-template-columns:clamp(260px,34.7vw,660px) minmax(0,1fr);
  background:
    radial-gradient(ellipse at 80% 0%, rgba(28,148,220,.16), transparent 60%),
    linear-gradient(100deg,var(--navy-2) 0%,var(--navy) 60%,#003463 100%);
  padding-right:max(clamp(18px,2vw,30.5px), calc((100% - var(--container)) / 2 + clamp(18px,2vw,30.5px)));
}
.bgr-process-photo{
  position:relative;
  min-height:300px;
  clip-path:polygon(0 0, calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 0 100%);
}
.bgr-process-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:left center;   /* keeps the shirt logo in frame */
}
.bgr-process-body{
  padding-left:clamp(16px,1.8vw,27.5px);
  padding-block:clamp(20px,1.65vw,25.3px) clamp(10px,.7vw,10.7px);
}
.bgr-process-copy{padding-left:calc(40px + 18px);}
.bgr-process-eyebrow{
  font-size:clamp(0.6875rem,.8vw,0.7625rem);
  letter-spacing:2.4px;
  gap:18px;
  margin-bottom:8px;
  margin-left:calc(-40px - 18px);
}
.bgr-process-copy h2{
  color:#fff;
  font-size:clamp(1.625rem,2.27vw,2.175rem);
  letter-spacing:-.8px;
  line-height:1.1;
  margin-bottom:8px;
}
.bgr-process-copy h2 .accent{color:var(--accent);}
.bgr-process-copy p{
  color:rgba(255,255,255,.88);
  font-size:clamp(0.8438rem,.9vw,0.8625rem);
  line-height:1.3;
  max-width:31.5em;
  margin-bottom:clamp(10px,.75vw,11.5px);
}
.bgr-steps{
  --step-gap:clamp(24px,1.95vw,29.9px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--step-gap);
  list-style:none;
}
.bgr-step{
  position:relative;
  padding:clamp(10px,.8vw,12.2px) clamp(12px,1.08vw,16.5px) clamp(10px,.8vw,12.2px);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(94,205,250,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
/* Arrow between cards, centred in the column gap. */
.bgr-step + .bgr-step::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--step-gap) / 2 - 9px);
  top:50%;
  width:18px;height:22px;
  margin-top:-11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22' fill='none'%3E%3Cpath d='M1 11h15M8 2.5l8 8.5-8 8.5' stroke='%23C9E6F7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.bgr-step-top{
  display:flex;align-items:center;gap:clamp(14px,1.3vw,19.9px);
  color:#E8F6FE;
  margin-bottom:clamp(8px,.75vw,11.5px);
}
.bgr-step-top svg{flex:none;width:clamp(24px,2vw,30.5px);height:clamp(24px,2vw,30.5px);}
.bgr-step-num{
  flex:none;
  width:clamp(34px,2.75vw,42px);height:clamp(34px,2.75vw,42px);
  border-radius:50%;
  background:var(--icon-blue);
  color:#fff;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(0.9375rem,1.2vw,1.15rem);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.55);
}
.bgr-step h3{color:#fff;font-size:clamp(0.9063rem,1.05vw,1rem);letter-spacing:-.2px;margin-bottom:5px;}
.bgr-step p{color:rgba(255,255,255,.82);font-size:clamp(0.8125rem,.94vw,0.9rem);line-height:1.25;}

/* ---------- Before & after ---------- */
.bgr-results{background:var(--light-bg);}
.bgr-results .container{padding-block:clamp(16px,1.2vw,18.4px) clamp(20px,1.55vw,23.8px);}
.bgr-results-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px 32px;
  margin-bottom:clamp(12px,.9vw,13.8px);
}
.bgr-results-head h2{
  font-size:clamp(1.5625rem,2.26vw,2.1563rem);
  letter-spacing:-.8px;
  line-height:1.1;
  margin-bottom:6px;
}
.bgr-results-head p{font-size:clamp(0.875rem,1.08vw,1.0313rem);line-height:1.45;color:var(--gray-text);}
.bgr-results-head .btn{margin-top:clamp(4px,.6vw,9px);font-size:0.875rem;padding:13px 26px;}
.bgr-ba-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.1vw,16.8px);
}

/* The shared slider (script.js binds every .sfr-ba). Each image is the comp's
   half plus a mirror of it at the slider's own aspect (see the markup
   comments), so at rest the slider shows the comp's halves at their drawn
   scale. The comp's chips and handle are burned into those halves and patched
   out; the chips and handle below are sized in cqw (slider widths) so they
   always sit over the patched spots, and the images anchor to the bottom so
   the spots never drift. */
.sfr-ba{
  position:relative;
  container-type:inline-size;
  aspect-ratio:305/100;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 14px 30px -20px rgba(0,38,75,.6);
  cursor:ew-resize;
  touch-action:none;
  user-select:none;
}
.sfr-ba:focus-visible{outline:2px solid var(--icon-blue);outline-offset:3px;}
.sfr-ba-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
}
.sfr-ba-after{clip-path:inset(0 0 0 50%);}
.sfr-ba-line{
  position:absolute;top:0;bottom:0;left:50%;
  width:2px;margin-left:-1px;
  background:#fff;
  box-shadow:0 0 8px rgba(0,0,0,.3);
  pointer-events:none;
}
.sfr-ba-handle{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:max(28px,10.4cqw);height:max(28px,10.4cqw);
  border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  pointer-events:none;
}
.sfr-ba-handle svg{display:block;width:40%;height:40%;}
.sfr-ba-tag{
  position:absolute;
  bottom:1.9cqw;
  height:8cqw;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);
  font-weight:700;
  font-size:max(0.5625rem,3.15cqw);
  letter-spacing:.04em;
  border-radius:1.3cqw;
  pointer-events:none;
}
.sfr-ba-tag-before{left:2.4cqw;width:23.4cqw;background:rgba(0,22,46,.92);color:#fff;}
.sfr-ba-tag-after{right:2.6cqw;width:25.9cqw;background:var(--icon-blue);color:#fff;}

/* The intro's big slider: its own proportions and chip geometry. */
.bgr-intro-ba{aspect-ratio:444/273;border-radius:10px;box-shadow:0 22px 44px -26px rgba(0,38,75,.6);}
.bgr-intro-ba .sfr-ba-handle{width:max(34px,9.2cqw);height:max(34px,9.2cqw);}
.bgr-intro-ba .sfr-ba-tag{bottom:3cqw;height:7.1cqw;font-size:max(0.6875rem,2.85cqw);border-radius:1.2cqw;}
.bgr-intro-ba .sfr-ba-tag-before{left:2.4cqw;width:21.4cqw;}
.bgr-intro-ba .sfr-ba-tag-after{right:2.6cqw;width:21.4cqw;}

/* ---------- When a blended repair is right ---------- */
.bgr-fit{
  background:
    radial-gradient(ellipse at 15% 0%, rgba(94,205,250,.1), transparent 55%),
    var(--light-bg);
  border-top:1px solid #E6EFF7;
}
.bgr-fit-inner{
  display:grid;
  grid-template-columns:minmax(0,453fr) minmax(0,900fr);
  align-items:center;
  column-gap:clamp(24px,4.6vw,70.5px);
  padding-block:clamp(16px,1.2vw,18.4px) clamp(20px,1.6vw,24.5px);
}
.bgr-fit-copy h2,
.bgr-related-copy h2{
  font-size:clamp(1.5625rem,2.15vw,2.0625rem);
  letter-spacing:-.8px;
  line-height:1.06;
  margin-bottom:8px;
}
.bgr-related-copy h2{font-size:clamp(1.5625rem,2.1vw,2.0125rem);}
.bgr-fit-copy p{font-size:clamp(0.875rem,1.06vw,1.0125rem);line-height:1.3;max-width:27.5em;color:var(--gray-text);}
.bgr-fit-features li{border-left:1px solid #DCE8F3;}
.bgr-fit-features li:first-child{border-left:1px solid #DCE8F3;}
.bgr-fit-features small{max-width:12em;}
@media (min-width:1025px){
  .bgr-fit-copy .eyebrow span{white-space:nowrap;}
}

/* ---------- Related services ---------- */
.bgr-related{background:var(--light-bg);}
.bgr-related-inner{
  display:grid;
  grid-template-columns:minmax(0,414fr) minmax(0,1000fr);
  align-items:center;
  column-gap:clamp(16px,1.2vw,18.4px);
  padding-block:clamp(10px,.7vw,10.7px);
}
.bgr-related-copy p{font-size:0.8125rem;line-height:1.55;max-width:31em;color:var(--gray-text);}
.bgr-related-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1.07fr)) minmax(0,1fr);
  gap:clamp(8px,.85vw,13px);
}
.bgr-rel-card{
  display:flex;flex-direction:column;
  background:#fff;
  border-radius:9px;
  overflow:hidden;
  box-shadow:0 10px 26px -18px rgba(0,38,75,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
a.bgr-rel-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(0,38,75,.5);}
a.bgr-rel-card:focus-visible{outline:2px solid var(--icon-blue);outline-offset:3px;}
.bgr-rel-card img{width:100%;aspect-ratio:127/57;object-fit:cover;}
.bgr-rel-body{display:block;padding:clamp(7px,.55vw,8.4px) clamp(12px,.95vw,14.5px) clamp(10px,.8vw,12.2px);}
.bgr-rel-body strong{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--font-head);
  font-size:clamp(0.8438rem,.9vw,0.8625rem);
  line-height:1.25;
  color:var(--navy);
  margin-bottom:5px;
}
.bgr-rel-body strong svg{flex:none;color:var(--icon-blue);transition:transform .15s ease;}
a.bgr-rel-card:hover .bgr-rel-body strong svg{transform:translateX(3px);}
.bgr-rel-body small{display:block;font-size:0.7813rem;line-height:1.35;color:var(--gray-text);}
.bgr-rel-help{
  align-items:center;justify-content:center;text-align:center;
  background:#E6F3FD;
  box-shadow:none;
  padding:clamp(8px,.6vw,9px) clamp(10px,.8vw,12.2px);
}
.bgr-rel-help-icon{
  width:clamp(42px,3.7vw,56px);height:clamp(42px,3.7vw,56px);
  border-radius:50%;
  background:#fff;
  color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:5px;
}
.bgr-rel-help strong{
  font-family:var(--font-head);
  font-size:clamp(0.875rem,.96vw,0.9063rem);
  line-height:1.2;
  color:var(--navy);
  margin-bottom:5px;
}
.bgr-rel-help small{font-size:0.7813rem;line-height:1.35;color:var(--gray-text);}
.bgr-rel-help small a{color:var(--icon-blue);font-weight:600;}

/* ---------- Why boaters choose us + FAQ ---------- */
.bgr-why{background:linear-gradient(180deg,#fff 0%,#F9FCFE 100%);border-top:1px solid #E6EFF7;}
.bgr-why-inner{
  display:grid;
  grid-template-columns:minmax(0,27fr) minmax(0,27fr) minmax(0,36fr);
  align-items:center;
  column-gap:clamp(20px,2.2vw,33.7px);
  padding-block:clamp(12px,.8vw,12.2px) clamp(16px,1.15vw,17.5px);
}
.bgr-why-copy h2{
  font-size:clamp(1.5rem,1.87vw,1.7813rem);
  letter-spacing:-.8px;
  line-height:1.08;
  margin-bottom:10px;
}
.bgr-why-copy p{font-size:clamp(0.8125rem,.885vw,0.8438rem);line-height:1.45;max-width:29.5em;color:var(--gray-text);}
@media (min-width:1025px){
  .bgr-why-copy .eyebrow span{white-space:nowrap;}
}
.bgr-checks{display:grid;gap:clamp(4px,.33vw,5px);}
.bgr-checks li{
  display:flex;align-items:center;gap:14px;
  font-size:clamp(0.8438rem,.96vw,0.9063rem);
  line-height:1.3;
  color:var(--gray-text);
}
.bgr-checks li::before{
  content:"";flex:none;
  width:clamp(20px,1.6vw,24.5px);height:clamp(20px,1.6vw,24.5px);
  border-radius:50%;
  background:var(--icon-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-7.6' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 70%;
}
.bgr-faq{
  align-self:stretch;
  border-left:1px solid #DCE8F3;
  padding-left:clamp(20px,3vw,46px);
  display:grid;
  align-content:center;
  gap:4px;
}
.bgr-faq h2{font-size:clamp(1.1875rem,1.43vw,1.3687rem);letter-spacing:-.5px;margin-bottom:4px;}
.bgr-faq details{
  background:#fff;
  border:1px solid #DDE8F4;
  border-radius:6px;
}
.bgr-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:3px clamp(12px,1vw,15.3px);
  font-family:var(--font-head);font-weight:500;font-size:clamp(0.8438rem,.91vw,0.8688rem);
  line-height:1.3;
  color:var(--navy);
  cursor:pointer;list-style:none;
}
.bgr-faq summary::-webkit-details-marker{display:none;}
.bgr-faq summary::after{
  content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(var(--icon-blue),var(--icon-blue)) center/14px 2px no-repeat,linear-gradient(var(--icon-blue),var(--icon-blue)) center/2px 14px no-repeat;
  transition:transform .2s ease;
}
.bgr-faq details[open] summary::after{transform:rotate(45deg);}
.bgr-faq summary:focus-visible{outline:2px solid var(--icon-blue);outline-offset:2px;border-radius:6px;}
.bgr-faq details p{padding:0 clamp(12px,1vw,15.3px) 12px;font-size:0.875rem;line-height:1.55;color:var(--gray-text);}

/* ---------- Closing CTA band ---------- */
.bgr-cta{
  position:relative;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(94,205,250,0) 55%,rgba(94,205,250,.08) 100%),
    linear-gradient(100deg,#0B3A66 0%,var(--navy) 40%,var(--navy-2) 75%,#0A3560 100%);
  color:#fff;
}
.bgr-cta-boat{
  position:absolute;left:0;top:0;height:100%;width:25%;
  object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 72%,transparent 100%);
}
.bgr-cta-inner{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:18px clamp(20px,1.8vw,27.5px);
  padding-block:clamp(22px,1.75vw,26.8px);
  /* Clear the boat photo (25% of the viewport); the % resolves against the
     full-width section, so take off .container's centring margin. */
  padding-left:max(var(--pad), calc(25.7% - max(0px, (100% - var(--container)) / 2)));
}
.bgr-cta h2{color:#fff;font-size:clamp(1.4375rem,1.9vw,1.8125rem);letter-spacing:-.6px;margin-bottom:6px;}
.bgr-cta p{font-size:clamp(0.875rem,.98vw,0.9375rem);color:rgba(255,255,255,.88);}
.bgr-cta-copy{min-width:0;}
.bgr-cta-actions{display:flex;flex:none;gap:clamp(12px,1.1vw,16.8px);flex-wrap:wrap;}
.bgr-cta-actions .btn{font-size:1rem;padding:15px 29px;}

/* ==========================================================================
   Responsive — widest first (see BUILDING-SERVICE-PAGES.md §7: equal
   specificity, the later block wins).
   ========================================================================== */

@media (max-width:1400px){
  /* Why band: checks move under the copy so the FAQ keeps a usable width. */
  .bgr-why-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:18px;}
  .bgr-why-copy{grid-column:1;grid-row:1;}
  .bgr-checks{grid-column:1;grid-row:2;}
  .bgr-faq{grid-column:2;grid-row:1 / span 2;}
  .bgr-process-copy{padding-left:0;}
  .bgr-process-eyebrow{margin-left:0;}
}

@media (max-width:1240px){
  .bgr-intro-inner{grid-template-columns:minmax(0,1fr);row-gap:26px;}
  .bgr-intro-ba{max-width:720px;width:100%;justify-self:center;}
  .bgr-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px;}
  .bgr-step:nth-child(3)::before{display:none;}
  .bgr-fit-inner{grid-template-columns:minmax(0,1fr);row-gap:22px;}
  .bgr-related-inner{grid-template-columns:minmax(0,1fr);row-gap:18px;}
  .bgr-related-copy p{max-width:620px;}
}

@media (max-width:1100px){
  .bgr-hero-inner{--hero-indent:0px;}
  .bgr-hero-eyebrow{margin-left:0;}
  .bgr-trust{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:48px;}
}

@media (max-width:1024px){
  .bgr-hero-img{width:100%;-webkit-mask-image:none;mask-image:none;object-position:80% center;}
  .bgr-hero-scrim{
    background:linear-gradient(90deg, rgba(0,22,46,.94) 0%, rgba(0,22,46,.84) 55%, rgba(0,22,46,.5) 100%);
  }
  /* Process: the photo becomes a banner above the copy. */
  .bgr-process{grid-template-columns:minmax(0,1fr);padding-right:0;}
  .bgr-process-photo{clip-path:none;min-height:0;aspect-ratio:608/260;}
  .bgr-process-photo img{object-position:left 40%;}
  .bgr-process-body{padding:clamp(26px,4vw,40px) var(--pad);}
  .bgr-why-inner{grid-template-columns:minmax(0,1fr);}
  .bgr-why-copy,.bgr-checks,.bgr-faq{grid-column:auto;grid-row:auto;}
  .bgr-faq{border-left:0;padding-left:0;border-top:1px solid #DCE8F3;padding-top:20px;}
  .bgr-related-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bgr-cta-boat{display:none;}
  .bgr-cta-inner{padding-left:var(--pad);flex-wrap:wrap;}
  .bgr-wide-right{padding-inline:var(--pad);}
}

@media (max-width:820px){
  .bgr-results-head{flex-direction:column;}
  .bgr-results-head .btn{margin-top:0;}
  .bgr-ba-grid{grid-template-columns:minmax(0,1fr);max-width:560px;}
  .bgr-icons{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;}
  .bgr-icons li:nth-child(3){border-left:0;}
  .bgr-fit-features li:first-child{border-left:0;}
  .bgr-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bgr-rel-help{grid-column:1 / -1;}
}

@media (max-width:640px){
  .bgr-hero-inner{padding-top:32px;padding-bottom:28px;}
  .bgr-hero h1{font-size:clamp(1.75rem,8.4vw,2.25rem);letter-spacing:-.7px;}
  .bgr-hero-sub{font-size:0.9063rem;margin-bottom:22px;}
  .bgr-hero-actions{gap:10px;}
  .bgr-hero-actions .btn,.bgr-cta-actions .btn{flex:1 1 100%;justify-content:center;}
  .bgr-cta-actions{width:100%;}
  .bgr-hero-scrim{
    background:linear-gradient(180deg, rgba(0,22,46,.9) 0%, rgba(0,22,46,.82) 55%, rgba(0,22,46,.74) 100%);
  }
  .bgr-trust{grid-template-columns:minmax(0,1fr);gap:14px;}
  .bgr-intro-copy h2 br,.bgr-fit-copy h2 br,.bgr-related-copy h2 br,.bgr-why-copy h2 br{display:none;}
  .bgr-steps{grid-template-columns:minmax(0,1fr);}
  .bgr-step + .bgr-step::before{display:none;}
  .bgr-results-head .btn{align-self:stretch;justify-content:center;}
  .bgr-faq summary{padding-block:10px;}
}

@media (max-width:400px){
  /* Icon rows and related cards stay two-up: one column doubles their height
     for no gain in legibility. */
  .bgr-icons li{padding-inline:4px;}
  .bgr-rel-body{padding-inline:10px;}
}