/* ==========================================================================
   Full Boat Restoration — page-specific styles (a sub-page of Oxidation &
   Fading Restoration, linked from its Full Boat Restoration card).
   Loads after styles.css and reuses its tokens, buttons, eyebrows, header,
   footer and contact form. Everything here is prefixed .fbr- 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).
   Started from blended-gelcoat-repair.css, whose comp shares the process,
   results and why/FAQ bands. The comp is drawn at 1024px; sizes below are
   its measurements x1.5, the 1536px design width, expressed as vw.
   ========================================================================== */

.fbr-eyebrow{
  color:var(--icon-blue);
  font-size:clamp(0.6875rem,.76vw,0.7188rem);
  letter-spacing:2px;
  gap:18px;
  margin-bottom:8px;
}
.fbr-eyebrow i{background:var(--icon-blue);}
/* Container-aligned left edge, but the right edge runs almost to the
   viewport: the comp's diagram labels and related cards sit ~20px from it.
   Percentages here resolve against the full-width section. */
.fbr-wide-right{
  --wide-pad:clamp(16px,1.4vw,21.5px);
  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 ----------
   fbr-hero.jpg is the comp's photo right of the copy, split down the bow
   (before | after baked in). Its box keeps the photo's own aspect ratio and
   takes the hero's height, so the painted-out chip spots stay under the
   chips drawn here at every width. Its left edge feathers into the navy. */
.fbr-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#001A36 0%,var(--navy-2) 40%,#0B3A66 100%);
}
.fbr-hero-photo{
  position:absolute;top:0;right:0;
  height:100%;
  aspect-ratio:569/295;
  container-type:size;
}
.fbr-hero-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 9%,#000 20%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 9%,#000 20%);
}
/* Darkens the water behind the trust strip, as the comp does. */
.fbr-hero-photo::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,22,46,.7) 0%,rgba(0,22,46,0) 20%);
  pointer-events:none;
}
.fbr-hero-tag{
  position:absolute;
  z-index:1;
  top:65.1cqh;
  height:13.6cqh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:1.1cqw;
  color:#fff;
  text-align:center;
  white-space:nowrap;
}
.fbr-hero-tag strong{
  font-family:var(--font-head);
  font-weight:700;
  font-size:max(0.625rem,1.8cqw);
  letter-spacing:.02em;
  line-height:1.1;
  text-transform:uppercase;
}
.fbr-hero-tag small{font-size:max(0.5rem,1.42cqw);line-height:1.3;margin-top:.2cqw;}
.fbr-hero-tag-before{left:19.6cqw;width:23.4cqw;background:rgba(40,40,42,.92);}
.fbr-hero-tag-after{left:71.9cqw;width:22.3cqw;background:#168BF0;}

/* The comp indents the hero copy past the page edge and hangs the eyebrow
   rule out to its left. */
.fbr-hero-inner{
  --hero-indent:clamp(0px,2.5vw,38.5px);
  position:relative;z-index:2;
  padding-left:calc(var(--pad) + var(--hero-indent));
  padding-top:clamp(24px,1.65vw,25.3px);
  padding-bottom:clamp(8px,.6vw,9px);
}
.fbr-hero-content{max-width:640px;}
.fbr-hero-eyebrow{
  font-size:clamp(0.6875rem,.8vw,0.7625rem);
  letter-spacing:2.2px;
  gap:18px;
  margin-bottom:9px;
  margin-left:calc(-40px - 18px);
}
.fbr-hero h1{
  font-size:clamp(2rem,3.07vw,2.9375rem);
  letter-spacing:-1px;
  line-height:1.1;
  color:#fff;
  margin-bottom:clamp(10px,.9vw,13.8px);
}
.fbr-hero h1 .accent{color:var(--accent);}
.fbr-hero-sub{
  color:rgba(255,255,255,.92);
  font-size:clamp(0.9375rem,1.075vw,1.0313rem);
  line-height:1.5;
  max-width:32.6em;
  margin-bottom:clamp(18px,1.45vw,22.2px);
}
.fbr-hero-actions{display:flex;gap:14px clamp(14px,1.05vw,16px);flex-wrap:wrap;}
.fbr-hero-actions .btn{padding:16px 30px;font-size:0.9688rem;}
.fbr-trust{
  display:grid;
  grid-template-columns:minmax(0,188fr) minmax(0,234fr) minmax(0,261fr) minmax(0,165fr);
  gap:18px 16px;
  max-width:1272px;
  margin-top:clamp(20px,1.55vw,23.8px);
}
.fbr-trust li{display:flex;align-items:center;gap:14px;color:#fff;}
.fbr-trust-icon{color:var(--accent);display:flex;flex:none;}
.fbr-trust-icon svg{width:auto;height:34px;}
.fbr-trust strong{display:block;font-family:var(--font-head);font-size:0.9063rem;line-height:1.35;margin-bottom:2px;white-space:nowrap;}
.fbr-trust small{display:block;font-size:0.7813rem;color:rgba(255,255,255,.8);white-space:nowrap;}

/* ---------- Icon row (intro features) ----------
   Centred columns, a pale-blue icon circle, hairline dividers between. */
.fbr-icons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.fbr-icons li{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-inline:clamp(6px,.8vw,12.2px);
}
.fbr-icons li + li{border-left:1px solid #DCE8F3;}
.fbr-icon{
  width:clamp(50px,4.8vw,73.5px);height:clamp(50px,4.8vw,73.5px);
  border-radius:50%;
  background:#E3F2FD;
  color:var(--icon-blue);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:clamp(8px,.78vw,12px);
}
.fbr-icon svg{width:52%;height:52%;}
.fbr-icons strong{
  font-family:var(--font-head);
  font-size:clamp(0.8438rem,.98vw,0.9375rem);
  line-height:1.2;
  color:var(--navy);
  margin-bottom:5px;
}
.fbr-icons small{font-size:clamp(0.7813rem,.86vw,0.825rem);line-height:1.36;color:var(--gray-text);max-width:10.6em;}

/* ---------- Intro: copy + features | callout diagram ---------- */
.fbr-intro{background:var(--light-bg);}
.fbr-intro-inner{
  display:grid;
  grid-template-columns:minmax(0,434fr) minmax(0,536fr);
  align-items:center;
  padding-block:clamp(22px,1.95vw,30px) clamp(8px,.5vw,7.5px);
}
.fbr-intro-copy{position:relative;z-index:1;}   /* its feature row runs over the diagram's empty margin */
.fbr-intro-copy h2{
  font-size:clamp(1.75rem,2.65vw,2.5313rem);
  letter-spacing:-.9px;
  line-height:1.04;
  margin-bottom:10px;
}
.fbr-intro-copy > p{
  font-size:clamp(0.9375rem,1.33vw,1.275rem);
  line-height:1.4;
  color:var(--gray-text);
  max-width:30.3em;
  margin-bottom:clamp(18px,1.6vw,24.5px);
}
/* Desktop only: the comp runs this row a little past the copy column (into
   the diagram's empty left margin) so every title holds its line. */
@media (min-width:1241px){
  .fbr-intro-features{margin-right:-2.2vw;}
}

.fbr-diagram{position:relative;container-type:inline-size;}
.fbr-diagram-art{position:relative;aspect-ratio:536/312;}
.fbr-diagram-art > img{position:absolute;inset:0;width:100%;height:100%;}
.fbr-diagram-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.fbr-diagram-lines polyline{fill:none;stroke:#4FA8F2;stroke-width:1.3px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;}
.fbr-diagram-lines circle{fill:#1E8CF0;}
.fbr-dot{
  position:absolute;left:var(--x);top:var(--y);
  width:1.9cqw;height:1.9cqw;
  margin:-.95cqw 0 0 -.95cqw;
  border-radius:50%;
  background:#1E8CF0;
  box-shadow:0 0 0 .38cqw #fff, 0 0 0 .62cqw rgba(30,140,240,.28);
  font-size:0;
}
.fbr-callouts{position:absolute;inset:0;list-style:none;}
.fbr-callout{position:absolute;left:var(--x);top:var(--y);white-space:nowrap;}
.fbr-callout strong{
  display:block;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.98cqw;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--navy);
}
.fbr-callout span{
  display:block;
  margin-top:.55cqw;
  font-size:1.67cqw;
  line-height:1.33;
  color:var(--gray-text);
}

/* ---------- 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), less the comp's narrower gutter. */
.fbr-process{
  display:grid;
  grid-template-columns:clamp(260px,35vw,672px) 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,2.6vw,40px), calc((100% - var(--container)) / 2 + clamp(18px,2.6vw,40px)));
}
.fbr-process-photo{
  position:relative;
  min-height:300px;
  clip-path:polygon(0 0, 89% 0, 100% 50%, 88% 100%, 0 100%);
}
.fbr-process-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:left center;   /* keeps the shirt logo in frame */
}
.fbr-process-body{
  padding-left:clamp(16px,1.3vw,20px);
  padding-block:clamp(20px,1.5vw,23px) clamp(12px,.8vw,12.2px);
}
.fbr-process-copy{padding-left:clamp(0px,1.3vw,19.5px);}
.fbr-process-eyebrow{
  font-size:clamp(0.6875rem,.8vw,0.7625rem);
  letter-spacing:2.4px;
  gap:18px;
  margin-bottom:8px;
  margin-left:calc(-40px - 18px);
}
.fbr-process-copy h2{
  color:#fff;
  font-size:clamp(1.625rem,2.45vw,2.3438rem);
  letter-spacing:-.8px;
  line-height:1.1;
  margin-bottom:8px;
}
.fbr-process-copy h2 .accent{color:var(--accent);}
.fbr-process-copy p{
  color:rgba(255,255,255,.88);
  font-size:clamp(0.875rem,1.08vw,1.0313rem);
  line-height:1.36;
  max-width:40em;
  margin-bottom:clamp(12px,1vw,15.3px);
}
.fbr-steps{
  --step-gap:clamp(24px,2.1vw,32px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--step-gap);
  list-style:none;
}
.fbr-step{
  position:relative;
  padding:clamp(10px,.8vw,12.2px) clamp(6px,.46vw,7px) clamp(10px,.8vw,12.2px) clamp(12px,1.5vw,23px);
  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. */
.fbr-step + .fbr-step::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--step-gap) / 2 - 9px);
  top:46%;
  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;
}
.fbr-step-top{
  display:flex;align-items:center;gap:clamp(14px,1.3vw,19.9px);
  color:#E8F6FE;
  margin-bottom:clamp(10px,.95vw,14.5px);
}
.fbr-step-top svg{flex:none;width:clamp(24px,2.05vw,31.5px);height:clamp(24px,2.05vw,31.5px);}
.fbr-step-num{
  flex:none;
  width:clamp(34px,2.9vw,44.5px);height:clamp(34px,2.9vw,44.5px);
  border-radius:50%;
  background:#168BF0;
  color:#fff;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(0.9375rem,1.1vw,1.0625rem);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.55);
}
.fbr-step h3{color:#fff;font-size:clamp(0.9063rem,1.05vw,1rem);letter-spacing:-.2px;margin-bottom:3px;}
.fbr-step p{color:rgba(255,255,255,.82);font-size:clamp(0.8125rem,.86vw,0.825rem);line-height:1.24;}

/* ---------- Before & after ---------- */
.fbr-results{background:var(--light-bg);}
.fbr-results .container{padding-block:clamp(18px,1.3vw,20px) clamp(14px,.75vw,11.5px);}
.fbr-results-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px 32px;
  margin-bottom:clamp(12px,.95vw,14.5px);
}
.fbr-results-head h2{
  font-size:clamp(1.5625rem,2.15vw,2.0625rem);
  letter-spacing:-.8px;
  line-height:1.1;
  margin-bottom:5px;
}
.fbr-results-head p{font-size:clamp(0.875rem,1.02vw,0.975rem);line-height:1.45;color:var(--gray-text);}
.fbr-results-head .btn{margin-top:clamp(4px,.2vw,3px);font-size:0.875rem;padding:13px 28px;}
.fbr-ba-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.5vw,23px);
}
.fbr-ba-item h3{font-size:clamp(0.9063rem,1.02vw,0.975rem);letter-spacing:-.2px;margin-top:clamp(10px,.95vw,14.5px);}
.fbr-ba-item p{font-size:clamp(0.8125rem,.9vw,0.8625rem);line-height:1.4;color:var(--gray-text);margin-top:2px;}

/* 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:301/96;
  border-radius:7px;
  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:51.5%;left:50%;
  transform:translate(-50%,-50%);
  width:max(28px,9.4cqw);height:max(28px,9.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:.4cqw;
  height:8cqw;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);
  font-weight:700;
  font-size:max(0.5625rem,3.05cqw);
  letter-spacing:.04em;
  border-radius:1.3cqw;
  pointer-events:none;
}
.sfr-ba-tag-before{left:2cqw;width:23.7cqw;background:rgba(32,34,38,.94);color:#fff;}
.sfr-ba-tag-after{right:2.3cqw;width:26.1cqw;background:#168BF0;color:#fff;}

/* ---------- What's included | other finish services ---------- */
.fbr-included{background:var(--light-bg);}
.fbr-included-inner{
  display:grid;
  grid-template-columns:minmax(0,518fr) minmax(0,427fr);
  align-items:center;
  column-gap:clamp(20px,2.3vw,35px);
  padding-block:clamp(16px,1.2vw,18.4px) clamp(16px,1.1vw,17px);
}
.fbr-included-copy h2{
  font-size:clamp(1.4375rem,1.95vw,1.875rem);
  letter-spacing:-.7px;
  line-height:1.12;
  margin-bottom:4px;
}
.fbr-included-copy > p,
.fbr-related > p{font-size:clamp(0.875rem,1.02vw,0.975rem);line-height:1.4;color:var(--gray-text);}
.fbr-included-copy > p{margin-bottom:clamp(12px,1.05vw,16px);}
.fbr-checks{display:grid;gap:clamp(4px,.33vw,5px);}
.fbr-checks li{
  display:flex;align-items:center;gap:14px;
  font-size:clamp(0.8438rem,1.02vw,0.975rem);
  line-height:1.3;
  color:var(--gray-text);
}
.fbr-checks li::before{
  content:"";flex:none;
  width:clamp(20px,1.45vw,22px);height:clamp(20px,1.45vw,22px);
  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%;
}
.fbr-included-list{
  grid-template-rows:repeat(5,auto);
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,283fr) minmax(0,235fr);
  column-gap:clamp(16px,1.5vw,24px);
  row-gap:clamp(5px,.5vw,7.5px);
}
.fbr-related{
  align-self:stretch;
  border-left:1px solid #DCE8F3;
  padding-left:clamp(18px,1.7vw,26px);
  display:flex;flex-direction:column;justify-content:center;
}
.fbr-related h2{
  display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);
  font-size:clamp(1.25rem,1.62vw,1.55rem);
  letter-spacing:-.6px;
  line-height:1.15;
  margin-bottom:3px;
}
.fbr-related h2::after{content:"";flex:1;height:1px;background:#DCE8F3;}
.fbr-related > p{margin-bottom:clamp(10px,.85vw,13px);}
.fbr-related-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,.75vw,11.5px);
}
.fbr-rel-card{
  display:flex;flex-direction:column;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 10px 26px -18px rgba(0,38,75,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
.fbr-rel-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(0,38,75,.5);}
.fbr-rel-card:focus-visible{outline:2px solid var(--icon-blue);outline-offset:3px;}
.fbr-rel-card img{width:100%;aspect-ratio:97/51;object-fit:cover;}
.fbr-rel-body{display:block;padding:clamp(8px,.8vw,12px) clamp(10px,1.05vw,16px) clamp(10px,.9vw,13.5px);}
.fbr-rel-body strong{
  display:block;
  font-family:var(--font-head);
  font-size:clamp(0.8125rem,.95vw,0.9063rem);
  line-height:1.25;
  color:var(--navy);
  margin-bottom:clamp(4px,.4vw,6px);
}
.fbr-rel-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(0.75rem,.8vw,0.7625rem);
  color:var(--icon-blue);
}
.fbr-rel-link svg{transition:transform .15s ease;}
.fbr-rel-card:hover .fbr-rel-link svg{transform:translateX(3px);}

/* ---------- Why boaters choose us + FAQ ---------- */
.fbr-why{background:linear-gradient(180deg,#fff 0%,#F4F9FE 100%);border-top:1px solid #E6EFF7;}
.fbr-why-inner{
  display:grid;
  grid-template-columns:minmax(0,29fr) minmax(0,30fr) minmax(0,37fr);
  align-items:center;
  column-gap:clamp(20px,2.2vw,33.7px);
  padding-block:clamp(14px,1.05vw,16px) clamp(16px,1.15vw,17.5px);
}
.fbr-why-eyebrow{font-size:clamp(0.625rem,.72vw,0.6875rem);letter-spacing:1.6px;}
.fbr-why-copy h2{
  font-size:clamp(1.5rem,1.95vw,1.875rem);
  letter-spacing:-.8px;
  line-height:1.08;
  margin-bottom:6px;
}
.fbr-why-copy p{font-size:clamp(0.8438rem,.98vw,0.9375rem);line-height:1.3;max-width:31.5em;color:var(--gray-text);}
@media (min-width:1025px){
  .fbr-why-copy .eyebrow span{white-space:nowrap;}
}
.fbr-why-checks{gap:clamp(6px,.65vw,10px);}
.fbr-faq{
  align-self:stretch;
  border-left:1px solid #DCE8F3;
  padding-left:clamp(20px,3vw,46px);
  display:grid;
  align-content:center;
  gap:clamp(4px,.4vw,6px);
}
.fbr-faq h2{font-size:clamp(1.1875rem,1.5vw,1.4375rem);letter-spacing:-.5px;margin-bottom:0;}
.fbr-faq details{
  background:#fff;
  border:1px solid #DDE8F4;
  border-radius:6px;
}
.fbr-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(4px,.4vw,6px) clamp(12px,1vw,15.3px);
  font-family:var(--font-head);font-weight:500;font-size:clamp(0.8438rem,.93vw,0.8938rem);
  line-height:1.3;
  color:var(--navy);
  cursor:pointer;list-style:none;
}
.fbr-faq summary::-webkit-details-marker{display:none;}
.fbr-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;
}
.fbr-faq details[open] summary::after{transform:rotate(45deg);}
.fbr-faq summary:focus-visible{outline:2px solid var(--icon-blue);outline-offset:2px;border-radius:6px;}
.fbr-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 ---------- */
.fbr-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;
}
.fbr-cta-boat{
  position:absolute;left:0;top:0;height:100%;width:23%;
  object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 78%,transparent 100%);
}
.fbr-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 (23% of the viewport); the % resolves against the
     full-width section, so take off .container's centring margin. */
  padding-left:max(var(--pad), calc(25.1% - max(0px, (100% - var(--container)) / 2)));
  padding-right:max(var(--pad), calc(7.8% - max(0px, (100% - var(--container)) / 2)));
}
.fbr-cta h2{color:#fff;font-size:clamp(1.4375rem,1.95vw,1.875rem);letter-spacing:-.6px;margin-bottom:6px;}
.fbr-cta p{font-size:clamp(0.875rem,1.02vw,0.975rem);color:rgba(255,255,255,.88);}
.fbr-cta-copy{min-width:0;}
.fbr-cta-actions{display:flex;flex:none;gap:clamp(12px,1.2vw,18px);flex-wrap:wrap;}
.fbr-cta-actions .btn{font-size:0.9688rem;padding:15px 30px;}

/* ==========================================================================
   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. */
  .fbr-why-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:18px;}
  .fbr-why-copy{grid-column:1;grid-row:1;}
  .fbr-why-checks{grid-column:1;grid-row:2;}
  .fbr-faq{grid-column:2;grid-row:1 / span 2;}
  .fbr-process-copy{padding-left:0;}
  .fbr-process-eyebrow{margin-left:0;}
}

@media (max-width:1240px){
  /* Hero: below this the photo's BEFORE chip reaches the copy, so the photo
     leaves the copy's side and becomes a banner under it (capped, and
     right-aligned so its dark left edge feathers into the navy). */
  .fbr-hero{display:flex;flex-direction:column;}
  .fbr-hero-inner{--hero-indent:0px;width:100%;padding-bottom:clamp(22px,3vw,30px);}
  .fbr-hero-eyebrow{margin-left:0;}
  .fbr-hero-photo{position:relative;order:2;width:min(100%,900px);height:auto;margin-left:auto;}
  .fbr-hero-photo img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 7%);
            mask-image:linear-gradient(90deg,transparent 0%,#000 7%);
  }
  .fbr-hero-photo::after{background:linear-gradient(180deg,rgba(0,22,46,.55) 0%,rgba(0,22,46,0) 14%);}
  .fbr-intro-inner{grid-template-columns:minmax(0,1fr);row-gap:26px;}
  .fbr-diagram{max-width:860px;width:100%;justify-self:center;}
  .fbr-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px;}
  .fbr-step:nth-child(3)::before{display:none;}
  .fbr-included-inner{grid-template-columns:minmax(0,1fr);row-gap:24px;}
  .fbr-related{border-left:0;padding-left:0;border-top:1px solid #DCE8F3;padding-top:22px;}
}

@media (max-width:1100px){
  .fbr-trust{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:48px;}
}

@media (max-width:1024px){
  /* Process: the photo becomes a banner above the copy. */
  .fbr-process{grid-template-columns:minmax(0,1fr);padding-right:0;}
  .fbr-process-photo{clip-path:none;min-height:0;aspect-ratio:720/300;}
  .fbr-process-photo img{object-position:left 40%;}
  .fbr-process-body{padding:clamp(26px,4vw,40px) var(--pad);}
  .fbr-why-inner{grid-template-columns:minmax(0,1fr);}
  .fbr-why-copy,.fbr-why-checks,.fbr-faq{grid-column:auto;grid-row:auto;}
  .fbr-faq{border-left:0;padding-left:0;border-top:1px solid #DCE8F3;padding-top:20px;}
  .fbr-cta-boat{display:none;}
  .fbr-cta-inner{padding-inline:var(--pad);flex-wrap:wrap;}
  .fbr-wide-right{padding-inline:var(--pad);}
}

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

@media (max-width:640px){
  .fbr-hero-inner{padding-top:32px;}
  .fbr-hero h1{font-size:clamp(1.75rem,8.4vw,2.25rem);letter-spacing:-.7px;}
  .fbr-hero-sub{font-size:0.9063rem;margin-bottom:22px;}
  .fbr-hero-actions{gap:10px;}
  .fbr-hero-actions .btn,.fbr-cta-actions .btn{flex:1 1 100%;justify-content:center;}
  .fbr-cta-actions{width:100%;}
  /* At phone width the chips' second line would be ~5px: keep only the word. */
  .fbr-hero-tag small{display:none;}
  .fbr-trust{grid-template-columns:minmax(0,1fr);gap:14px;}
  .fbr-trust strong,.fbr-trust small{white-space:normal;}
  .fbr-intro-copy h2 br,.fbr-why-copy h2 br{display:none;}
  /* Diagram: the labels are unreadable at this scale, so they leave the
     photo for a numbered list and the dots take the numbers. */
  .fbr-diagram-lines{display:none;}
  .fbr-dot{
    width:20px;height:20px;margin:-10px 0 0 -10px;
    box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,38,75,.35);
    font:700 11px/20px var(--font-head);
    color:#fff;text-align:center;
  }
  .fbr-callouts{
    position:static;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 18px;
    margin-top:18px;
    counter-reset:fbr-callout;
  }
  .fbr-callout{position:static;white-space:normal;counter-increment:fbr-callout;padding-left:28px;}
  .fbr-callout::before{
    content:counter(fbr-callout);
    position:absolute;margin-left:-28px;
    width:20px;height:20px;border-radius:50%;
    background:#1E8CF0;color:#fff;
    font:700 11px/20px var(--font-head);text-align:center;
  }
  .fbr-callout strong{font-size:0.875rem;}
  .fbr-callout span{font-size:0.8125rem;margin-top:2px;}
  .fbr-callout span br{display:none;}
  .fbr-included-list{grid-template-rows:none;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);}
  .fbr-steps{grid-template-columns:minmax(0,1fr);}
  .fbr-step + .fbr-step::before{display:none;}
  .fbr-results-head .btn{align-self:stretch;justify-content:center;}
  .fbr-faq summary{padding-block:10px;}
}

@media (max-width:400px){
  /* Icon row and related cards stay two-up: one column doubles their height
     for no gain in legibility. */
  .fbr-icons li{padding-inline:4px;}
  .fbr-rel-body{padding-inline:10px;}
  .fbr-callouts{grid-template-columns:minmax(0,1fr);}
}


/* ---------- Classic fiberglass restoration (merged from the legacy site) ----------
   White band between the results band and the included band: copy and
   Captain Dave's quote on the left, the legacy yard photo and three scope
   tiles on the right. */
.fbr-classic{background:#fff;border-top:1px solid #E6EFF7;}
.fbr-classic-inner{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  column-gap:clamp(24px,3vw,56px);
  align-items:center;
  padding-block:clamp(30px,3vw,48px);
}
.fbr-classic-copy h2{
  font-size:clamp(1.4375rem,1.95vw,1.875rem);
  letter-spacing:-.7px;
  line-height:1.12;
  margin-bottom:12px;
}
.fbr-classic-copy > p{font-size:clamp(0.875rem,1.02vw,0.975rem);line-height:1.55;color:var(--gray-text);margin-bottom:14px;}
.fbr-classic-quote{
  margin:0 0 16px;
  padding:14px 18px;
  border-left:4px solid var(--icon-blue);
  background:var(--light-bg);
  border-radius:0 12px 12px 0;
}
.fbr-classic-quote p{
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(1rem,1.15vw,1.125rem);
  line-height:1.4;
  color:var(--navy);
  margin-bottom:6px;
}
.fbr-classic-quote cite{font-style:normal;font-size:0.8125rem;color:var(--icon-blue);font-weight:600;}
.fbr-classic-side{display:grid;gap:14px;}
.fbr-classic-photo{
  margin:0;
  border-radius:12px;
  overflow:hidden;
  background:var(--light-bg);
  border:1px solid #DCE8F3;
}
.fbr-classic-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.fbr-classic-photo figcaption{padding:10px 14px;font-size:0.8125rem;line-height:1.45;color:var(--gray-text);}
.fbr-classic-scope{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.fbr-classic-scope li{
  background:var(--light-bg);
  border:1px solid #DCE8F3;
  border-radius:10px;
  padding:12px 14px;
}
.fbr-classic-scope strong{display:block;font-family:var(--font-head);font-size:0.875rem;color:var(--navy);margin-bottom:4px;}
.fbr-classic-scope small{display:block;font-size:0.7813rem;line-height:1.45;color:var(--gray-text);}

@media (max-width:1240px){
  .fbr-classic-inner{grid-template-columns:minmax(0,1fr);row-gap:24px;}
  .fbr-classic-side{max-width:640px;}
}
@media (max-width:640px){
  .fbr-classic-inner{padding-block:30px;}
  .fbr-classic-copy h2 br{display:none;}
  .fbr-classic-scope{grid-template-columns:minmax(0,1fr);}
}