/* ==========================================================================
   Waterline Chip Repair — page-specific styles (a sub-page of Gelcoat Chip
   Repair, under Gelcoat Repair). Loads after styles.css and reuses its
   tokens, buttons, eyebrows, fg-card, header and footer. Everything here is
   prefixed .wcr- 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 scratch-gouge-repair.css).

   Built from dock-rash-scuff-repair.css, the closest committed layout. The
   comp is drawn 1024px wide: one comp pixel is ~0.0977vw, so most clamp()
   middles below are "comp px x 0.0977".
   ========================================================================== */

/* Shared frame: the comp runs every band a little wider than .container. */
.wcr-wide{
  --wide-pad:clamp(18px,4.2vw,76px);
  max-width:1920px;
  margin-inline:auto;
  padding-inline:var(--wide-pad);
}
.wcr-eyebrow{
  gap:clamp(10px,1.3vw,20px);
  color:var(--icon-blue);
  font-size:clamp(0.6875rem,.78vw,0.8125rem);
  letter-spacing:1.9px;
  margin-bottom:clamp(8px,.7vw,12px);
}
.wcr-eyebrow i{background:var(--icon-blue);width:clamp(28px,2.44vw,44px);}
/* The hero and process eyebrows hang their rule in the margin so the label
   lines up with the heading (desktop only: on phones it would run off-screen). */
.wcr-hang{
  --rule:clamp(28px,2.44vw,44px);
  --rule-gap:clamp(10px,1.3vw,20px);
  gap:var(--rule-gap);
}
.wcr-hang i{width:var(--rule);}
@media (min-width:1025px){
  .wcr-hang{margin-left:calc(-1 * (var(--rule) + var(--rule-gap)));}
}

/* ---------- Hero ----------
   wcr-hero.jpg covers the right of the band, anchored right so the baked-in
   "Same Boats. New Beginnings." survives the crop; its left edge (blurred
   palms) feathers into the navy and a bottom wash carries the trust row. */
.wcr-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#0B2C4E 0%,#0A2A49 40%,#0F3C66 100%);
}
.wcr-hero-img{
  position:absolute;top:0;right:0;
  width:59%;height:100%;
  object-fit:cover;
  object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 22%);
}
.wcr-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,22,46,.3) 0%,
      rgba(0,22,46,.5) 36%,
      rgba(0,22,46,.16) 50%,
      rgba(0,22,46,0) 60%),
    linear-gradient(0deg, rgba(0,33,66,.96) 0%, rgba(0,33,66,.7) 14%, rgba(0,33,66,0) 30%);
}
.wcr-hero-inner{
  position:relative;z-index:2;
  padding-top:clamp(28px,2.15vw,44px);
  padding-bottom:clamp(18px,1.2vw,26px);
}
.wcr-hero-content,.wcr-trust{margin-inline:clamp(0px,6vw,100px);}
.wcr-hero-content{max-width:680px;}
.wcr-hero-eyebrow{
  font-size:clamp(0.6875rem,.8vw,0.8125rem);
  letter-spacing:2px;
  margin-bottom:clamp(8px,.6vw,12px);
}
.wcr-hero h1{
  font-size:clamp(2rem,3vw,3.625rem);
  letter-spacing:-.02em;
  line-height:.99;
  color:#fff;
  margin-bottom:clamp(12px,.65vw,14px);
}
.wcr-hero h1 .accent{color:var(--accent);}
.wcr-hero-sub{
  color:rgba(255,255,255,.9);
  font-size:clamp(0.9375rem,1.07vw,1.1563rem);
  line-height:1.24;
  max-width:30em;
  margin-bottom:clamp(16px,1.3vw,26px);
}
.wcr-hero-sub strong{color:#fff;font-weight:600;}
.wcr-hero-actions{display:flex;gap:clamp(10px,1.1vw,18px);flex-wrap:wrap;}
.wcr-trust{
  display:grid;
  grid-template-columns:repeat(4,auto);
  justify-content:space-between;
  gap:16px 28px;
  margin-top:clamp(20px,2vw,38px);
}
.wcr-trust li{display:flex;align-items:center;gap:12px;color:#fff;}
.wcr-trust-icon{color:var(--accent);display:flex;flex:none;}
.wcr-trust strong{display:block;font-family:var(--font-head);font-size:clamp(0.8125rem,.9vw,0.9375rem);line-height:1.25;}
.wcr-trust small{display:block;font-size:clamp(0.7188rem,.8vw,0.8125rem);color:rgba(255,255,255,.8);}

/* ---------- Overview ----------
   copy + four benefits | one large before/after slider. */
.wcr-intro{background:linear-gradient(180deg,#F8FBFF 0%,var(--light-bg) 100%);}
.wcr-intro-inner{
  display:grid;
  grid-template-columns:minmax(0,452fr) minmax(0,466fr);
  align-items:center;
  column-gap:clamp(20px,2.15vw,42px);
  padding-block:clamp(22px,1.5vw,32px);
}
.wcr-intro-copy{padding-left:clamp(0px,1.4vw,26px);}
.wcr-intro-copy .wcr-benefits{margin-left:calc(-1 * clamp(0px,1.4vw,26px));}
.wcr-intro h2{
  font-size:clamp(1.625rem,2.4vw,2.875rem);
  letter-spacing:-.02em;
  line-height:1.08;
  margin-bottom:clamp(8px,.9vw,16px);
}
.wcr-intro h2 .accent,.wcr-results h2 .accent{color:var(--icon-blue);}
.wcr-intro-copy > p{
  font-size:clamp(0.9063rem,1vw,1.125rem);
  line-height:1.42;
  color:var(--gray-text);
  max-width:38em;
}
.wcr-benefits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(16px,1.4vw,26px);
}
.wcr-benefits li{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-inline:clamp(6px,.4vw,8px);
}
.wcr-benefits li + li{border-left:1px solid #DCE8F3;}
.wcr-benefit-icon{
  width:clamp(46px,3.3vw,62px);height:clamp(46px,3.3vw,62px);
  border-radius:50%;
  background:var(--icon-bg);
  box-shadow:0 0 0 clamp(4px,.4vw,7px) rgba(220,238,252,.45);
  color:var(--icon-blue);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:clamp(8px,.8vw,15px);
}
.wcr-benefit-icon svg{width:50%;height:auto;}
.wcr-benefits strong{
  font-family:var(--font-head);
  font-size:clamp(0.75rem,.81vw,0.9688rem);
  letter-spacing:-.01em;
  line-height:1.18;
  color:var(--navy);
  margin-bottom:5px;
}
.wcr-benefits small{font-size:clamp(0.7188rem,.83vw,0.875rem);line-height:1.32;color:var(--gray-text);}
/* The comp sets the first three titles on one line and the fourth on two;
   the breaks only exist to hold that at narrow widths. */
@media (min-width:1241px){
  .wcr-benefits li:not(:last-child) strong br{display:none;}
}

/* Doubled class: the generic .sfr-ba rule further down would otherwise win. */
.wcr-ba-lead.sfr-ba{aspect-ratio:466/259;border-radius:12px;}
.wcr-ba-lead .sfr-ba-handle{width:clamp(40px,3.7vw,62px);height:clamp(40px,3.7vw,62px);}
.wcr-ba-lead .sfr-ba-tag{
  bottom:clamp(10px,1.1vw,20px);
  font-size:clamp(0.6875rem,.95vw,1rem);
  padding:.55em 2.1em;
  border-radius:6px;
}
.wcr-ba-lead .sfr-ba-tag-before{left:clamp(10px,1.3vw,22px);}
.wcr-ba-lead .sfr-ba-tag-after{right:clamp(10px,1.3vw,22px);}

/* ---------- Common waterline repairs ----------
   eyebrow + five fg-cards (no icon badge; the photo sits flush on the body). */
.wcr-common{background:var(--light-bg);border-top:1px solid #E6EFF7;}
.wcr-common .wcr-wide{padding-block:clamp(16px,1.3vw,26px) clamp(16px,.95vw,20px);}
.wcr-common-eyebrow{margin-left:clamp(0px,1.4vw,26px);}
.wcr-common-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.4vw,26px);
  margin-top:clamp(4px,.4vw,8px);
}
.wcr-card{border-radius:8px;}
.wcr-card .fg-card-media img{aspect-ratio:173/70;}
.wcr-card .fg-card-body{padding:clamp(14px,.95vw,18px) clamp(14px,1.75vw,32px) clamp(14px,.9vw,18px);}
.wcr-card .fg-card-body h3{font-size:clamp(0.9375rem,1.05vw,1.25rem);letter-spacing:-.3px;margin-bottom:clamp(4px,.3vw,6px);}
.wcr-card .fg-card-body p{font-size:clamp(0.8125rem,.97vw,1.125rem);line-height:1.34;margin-bottom:clamp(10px,.9vw,17px);}
.wcr-card .fg-card-link{font-size:clamp(0.8125rem,.95vw,1.125rem);}

/* ---------- Process band ----------
   Photo with a chevron on its trailing edge | copy + four step cards with
   arrows in the gaps between them. */
.wcr-process{
  display:grid;
  grid-template-columns:minmax(260px,33.9%) minmax(0,1fr);
  background:
    radial-gradient(ellipse at 80% 0%, rgba(28,148,220,.18), transparent 60%),
    linear-gradient(100deg,var(--navy-2) 0%,var(--navy) 62%,#003463 100%);
}
.wcr-process-photo{
  --notch:clamp(26px,3.5vw,64px);
  position:relative;
  min-height:220px;
  clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);
}
.wcr-process-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:left center;   /* keeps the logo on the shirt and the sander */
}
.wcr-process-body{
  padding:clamp(20px,1.95vw,38px) clamp(18px,2.5vw,46px) clamp(12px,.8vw,16px) clamp(12px,2.8vw,52px);
}
.wcr-process-copy{position:relative;z-index:1;}
.wcr-process-copy .eyebrow{font-size:clamp(0.6875rem,.78vw,0.8125rem);letter-spacing:1.9px;margin-bottom:clamp(6px,.6vw,10px);}
.wcr-process h2{
  color:#fff;
  font-size:clamp(1.5rem,2.1vw,2.5rem);
  letter-spacing:-.02em;
  margin-bottom:0;
}
.wcr-process h2 .accent{color:var(--accent);}
.wcr-steps{
  --step-gap:clamp(18px,2.05vw,38px);
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--step-gap);
  margin-top:clamp(12px,.75vw,16px);
}
.wcr-step{
  position:relative;
  padding:clamp(10px,.6vw,12px) clamp(8px,.5vw,10px) clamp(10px,.75vw,14px) clamp(14px,1.45vw,28px);
  border:1px solid rgba(94,205,250,.14);
  border-radius:8px;
  background:rgba(255,255,255,.05);
}
/* Arrow between cards, centred in the column gap. */
.wcr-step + .wcr-step::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--step-gap) / 2 - 11px);
  top:50%;
  width:22px;height:22px;
  margin-top:-11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 12h17M13 5l7 7-7 7' stroke='%23C9D8E6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.wcr-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(32px,2.75vw,50px);height:clamp(32px,2.75vw,50px);
  border-radius:50%;
  background:#1E8BF0;
  color:#fff;
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(0.875rem,1.1vw,1.25rem);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.55);
  vertical-align:middle;
  margin-left:calc(-1 * clamp(0px,.55vw,11px));
}
.wcr-step-icon{
  display:inline-flex;
  vertical-align:middle;
  margin-left:clamp(12px,1.5vw,28px);
  color:#E4EEF7;
}
.wcr-step-icon svg{width:clamp(20px,1.66vw,30px);height:auto;}
.wcr-step h3{color:#fff;font-size:clamp(0.875rem,1.06vw,1.1875rem);letter-spacing:-.2px;margin:clamp(8px,.75vw,14px) 0 4px;}
.wcr-step p{color:rgba(255,255,255,.8);font-size:clamp(0.7813rem,.86vw,0.9688rem);line-height:1.28;}

/* ---------- Before & after ---------- */
.wcr-results{background:var(--light-bg);}
.wcr-results .wcr-wide{padding-block:clamp(20px,1.15vw,24px) clamp(12px,.9vw,18px);}
.wcr-results-head,.wcr-ba-grid{margin-inline:clamp(0px,1.4vw,26px);}
.wcr-results-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px 30px;
  margin-bottom:clamp(10px,.6vw,12px);
}
.wcr-results h2{
  font-size:clamp(1.375rem,1.95vw,2.25rem);
  letter-spacing:-.02em;
  line-height:1.12;
  margin-bottom:4px;
}
.wcr-results-head p{font-size:clamp(0.8125rem,1.03vw,1.125rem);line-height:1.5;color:var(--gray-text);}
.wcr-results-head .btn{align-self:start;}
.wcr-ba-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.56vw,30px);
}

/* The shared slider (script.js binds every .sfr-ba). The comp's pairs are
   wide strips, 294 x 79. */
.sfr-ba{
  position:relative;
  aspect-ratio:294/79;
  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;
  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:clamp(32px,2.75vw,48px);height:clamp(32px,2.75vw,48px);
  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:auto;}
.sfr-ba-tag{
  position:absolute;bottom:clamp(6px,.6vw,12px);
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(0.625rem,.85vw,0.875rem);
  letter-spacing:.6px;
  padding:.55em 2.2em;
  border-radius:4px;
  pointer-events:none;
}
.sfr-ba-tag-before{left:clamp(8px,.9vw,16px);background:rgba(0,22,46,.9);color:#fff;}
.sfr-ba-tag-after{right:clamp(8px,.9vw,16px);background:#1E9BF0;color:#fff;}

/* ---------- Related gelcoat services ----------
   copy | four fg-cards + a "can't find it" card. */
.wcr-related{background:linear-gradient(180deg,#F9FCFF 0%,#fff 100%);border-top:1px solid #E6EFF7;}
.wcr-related-inner{
  display:grid;
  grid-template-columns:minmax(280px,31%) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(20px,2vw,40px);
  padding-block:clamp(18px,1.3vw,28px) clamp(16px,1vw,20px);
}
.wcr-related h2,.wcr-why-copy h2{
  font-size:clamp(1.5rem,1.87vw,2.25rem);
  letter-spacing:-.02em;
  line-height:1.14;
  margin-bottom:clamp(8px,.8vw,14px);
}
.wcr-related-copy p{font-size:clamp(0.8438rem,.92vw,1.0313rem);line-height:1.45;color:var(--gray-text);}
.wcr-related-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.07vw,18px);
}
.wcr-rel-card{border:1px solid #E6EFF7;border-radius:8px;}
.wcr-rel-card .fg-card-media img{aspect-ratio:2.2/1;}
.wcr-rel-card .fg-card-body{padding:clamp(10px,.85vw,16px) clamp(10px,.75vw,14px) clamp(10px,.8vw,15px);}
.wcr-rel-card .fg-card-body h3{font-size:clamp(0.75rem,.8vw,0.9375rem);letter-spacing:-.2px;margin-bottom:4px;}
.wcr-rel-card .fg-card-body p{font-size:clamp(0.7188rem,.71vw,0.8438rem);line-height:1.32;margin-bottom:clamp(8px,.6vw,12px);}
.wcr-rel-card .fg-card-link{font-size:clamp(0.7813rem,.85vw,0.9375rem);}
.wcr-rel-help{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  gap:clamp(2px,.2vw,4px);
  padding:clamp(12px,.75vw,14px) clamp(10px,.75vw,14px);
  border-radius:12px;
  background:#E4F2FD;
}
.wcr-rel-help-icon{
  width:clamp(40px,2.9vw,54px);height:clamp(40px,2.9vw,54px);
  border-radius:50%;
  background:#fff;
  color:#1E8BF0;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:2px;
}
.wcr-rel-help strong{font-family:var(--font-head);font-weight:800;font-size:clamp(0.8125rem,.98vw,1.0625rem);line-height:1.15;color:var(--navy);}
/* The comp's small blue "+" between the title and the copy. */
.wcr-rel-help-plus{
  width:11px;height:11px;flex:none;
  background:
    linear-gradient(var(--icon-blue),var(--icon-blue)) center/11px 2px no-repeat,
    linear-gradient(var(--icon-blue),var(--icon-blue)) center/2px 11px no-repeat;
}
.wcr-rel-help p{font-size:clamp(0.7188rem,.76vw,0.875rem);line-height:1.3;color:var(--gray-text);}
.wcr-rel-help-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(0.7813rem,.85vw,0.9375rem);
  color:var(--icon-blue);
}
.wcr-rel-help-link svg{transition:transform .15s ease;}
.wcr-rel-help-link:hover svg{transform:translateX(3px);}

/* ---------- Why us + FAQ ----------
   copy | checklist | FAQ accordion (native <details>, no JS). */
.wcr-why{
  background:
    radial-gradient(ellipse at 45% 0%, rgba(94,205,250,.1), transparent 60%),
    linear-gradient(180deg,#fff 0%,var(--light-bg) 100%);
  border-top:1px solid #E6EFF7;
}
.wcr-why-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr) minmax(0,1.13fr);
  align-items:center;
  column-gap:clamp(20px,2.4vw,46px);
  padding-block:clamp(18px,1vw,22px);
}
.wcr-why-copy p{font-size:clamp(0.8438rem,.92vw,1.0313rem);line-height:1.36;color:var(--gray-text);}
.wcr-checks{display:grid;gap:clamp(8px,.55vw,11px);}
.wcr-checks li{
  display:flex;align-items:center;gap:clamp(10px,1.1vw,18px);
  font-size:clamp(0.8438rem,.82vw,0.9688rem);
  color:#34506A;
}
.wcr-checks li::before{
  content:"";flex:none;
  width:clamp(20px,1.56vw,27px);height:clamp(20px,1.56vw,27px);
  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.5 7.4-8' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 64%;
}
.wcr-faq{
  align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
  padding-left:clamp(18px,2.1vw,40px);
  border-left:1px solid #DCE8F3;
}
.wcr-faq h2{font-size:clamp(1.1875rem,1.33vw,1.5625rem);letter-spacing:-.02em;margin-bottom:clamp(6px,.6vw,10px);}
.wcr-faq details{
  background:#fff;
  border:1px solid #D9E6F2;
  border-radius:6px;
}
.wcr-faq details + details{margin-top:clamp(4px,.28vw,6px);}
.wcr-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(6px,.3vw,7px) clamp(12px,.9vw,16px);
  font-weight:500;
  font-size:clamp(0.8125rem,.87vw,0.9688rem);
  cursor:pointer;
  list-style:none;
}
.wcr-faq summary::-webkit-details-marker{display:none;}
.wcr-faq summary::after{
  content:"";flex:none;width:13px;height:13px;
  background:
    linear-gradient(var(--icon-blue),var(--icon-blue)) center/13px 2px no-repeat,
    linear-gradient(var(--icon-blue),var(--icon-blue)) center/2px 13px no-repeat;
  transition:transform .2s ease;
}
.wcr-faq details[open] summary::after{transform:rotate(45deg);}
.wcr-faq summary:focus-visible{outline:2px solid var(--icon-blue);outline-offset:2px;border-radius:6px;}
.wcr-faq details p{
  padding:0 clamp(12px,.9vw,16px) 12px;
  font-size:clamp(0.8125rem,.86vw,0.9063rem);
  line-height:1.55;
  color:var(--gray-text);
}
.wcr-faq details a{color:var(--icon-blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

/* ---------- Closing CTA band ----------
   Boat and skyline at the left edge feathering into navy | copy | buttons. */
.wcr-cta{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#0A2C55 0%,var(--navy) 55%,#0B3563 100%);
  color:#fff;
}
.wcr-cta-boat{
  position:absolute;left:0;top:0;
  width:26%;height:100%;
  object-fit:cover;
  object-position:left center;
  -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 72%,transparent 100%);
}
.wcr-cta-inner{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px clamp(20px,2vw,40px);
  flex-wrap:wrap;
  padding-block:clamp(22px,2vw,40px);
  /* Clear the boat (26% of the band) even though this frame is centred:
     % padding resolves against the full-width section. */
  padding-left:max(var(--wide-pad), 27.6% - max(0px, (100% - 1920px) / 2));
  padding-right:calc(var(--wide-pad) + clamp(0px,.4vw,8px));
}
.wcr-cta h2{color:#fff;font-size:clamp(1.375rem,1.87vw,2.25rem);letter-spacing:-.02em;margin-bottom:6px;}
.wcr-cta p{font-size:clamp(0.875rem,1.03vw,1.125rem);color:rgba(255,255,255,.9);}
.wcr-cta-actions{display:flex;gap:clamp(10px,1.4vw,24px);flex-wrap:wrap;}
.wcr-cta-actions .btn{padding:clamp(13px,1.15vw,20px) clamp(24px,2.5vw,46px);}
.wcr-cta-actions .btn-outline-light{background:rgba(0,22,46,.55);}

/* ==========================================================================
   Responsive — widest first (see the recipe: equal specificity, later wins)
   ========================================================================== */

@media (max-width:1500px){
  .wcr-why-inner{grid-template-columns:minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.2fr);}
}

@media (max-width:1400px){
  .wcr-common-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .wcr-related-inner{grid-template-columns:minmax(0,1fr);row-gap:16px;}
  .wcr-related-copy p{max-width:52em;}
  /* Why: copy moves above the checklist and FAQ so neither column squeezes. */
  .wcr-why-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);row-gap:22px;}
  .wcr-why-copy{grid-column:1 / -1;}
  .wcr-why-copy p{max-width:52em;}
  .wcr-why-copy h2 br{display:none;}
  /* CTA: a narrower boat keeps both buttons on the copy's row. */
  .wcr-cta-boat{width:21%;}
  .wcr-cta-inner{padding-left:max(var(--wide-pad), 22%);}
}

@media (max-width:1240px){
  .wcr-trust{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:56px;}
  .wcr-intro-inner{grid-template-columns:minmax(0,1fr);row-gap:26px;}
  .wcr-intro-copy{padding-left:0;}
  .wcr-common-eyebrow,.wcr-results-head,.wcr-ba-grid{margin-inline:0;}
  .wcr-ba-lead.sfr-ba{max-width:760px;}
  .wcr-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;}
  .wcr-step:nth-child(3)::before{display:none;}
}

@media (max-width:1100px){
  /* The "can't find it" card becomes a strip under the four service cards. */
  .wcr-related-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .wcr-rel-help{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"icon title link" "icon copy link";
    align-items:center;
    column-gap:16px;row-gap:2px;
    text-align:left;
    padding:14px 20px;
  }
  .wcr-rel-help-icon{grid-area:icon;margin:0;}
  .wcr-rel-help strong{grid-area:title;}
  .wcr-rel-help p{grid-area:copy;}
  .wcr-rel-help-plus{display:none;}
  .wcr-rel-help-link{grid-area:link;}
}

@media (max-width:1024px){
  .wcr-hero-img{width:100%;-webkit-mask-image:none;mask-image:none;object-position:72% center;}
  .wcr-hero-scrim{
    background:
      linear-gradient(90deg, rgba(0,22,46,.94) 0%, rgba(0,22,46,.84) 55%, rgba(0,22,46,.5) 100%),
      linear-gradient(0deg, rgba(0,22,46,.7) 0%, rgba(0,22,46,0) 35%);
  }
  .wcr-hero-content,.wcr-trust{margin-inline:0;}
  .wcr-process{grid-template-columns:minmax(0,1fr);}
  /* The photo's right edge has the comp's navy chevron baked in: overscan
     the image so the banner crops it off instead of showing it. */
  .wcr-process-photo{clip-path:none;aspect-ratio:600/356;max-height:420px;width:100%;overflow:hidden;}
  .wcr-process-photo img{width:116%;max-width:none;}
  .wcr-process-body{padding:clamp(28px,5vw,40px) clamp(18px,4.2vw,76px) clamp(30px,5vw,44px);}
  .wcr-cta-boat{display:none;}
  .wcr-cta-inner{padding-left:var(--wide-pad);padding-right:var(--wide-pad);}
}

@media (max-width:820px){
  .wcr-benefits{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px;}
  .wcr-benefits li:nth-child(3){border-left:0;}
  .wcr-common-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .wcr-ba-grid{grid-template-columns:minmax(0,1fr);max-width:620px;}
  .wcr-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .wcr-why-inner{grid-template-columns:minmax(0,1fr);}
  .wcr-faq{padding-left:0;border-left:0;padding-top:22px;border-top:1px solid #DCE8F3;}
}

@media (max-width:640px){
  .wcr-hero-inner{padding-top:34px;padding-bottom:28px;}
  .wcr-hero h1{font-size:clamp(1.75rem,8vw,2.25rem);letter-spacing:-.7px;}
  .wcr-hero h1 br{display:none;}
  .wcr-hero-sub{font-size:0.9063rem;}
  .wcr-hero-actions .btn,.wcr-cta-actions .btn{flex:1 1 100%;justify-content:center;}
  /* Show the chipped stripe rather than the tagline, which would sit under the copy. */
  .wcr-hero-img{object-position:30% center;}
  .wcr-hero-scrim{
    background:linear-gradient(180deg, rgba(0,22,46,.9) 0%, rgba(0,22,46,.82) 55%, rgba(0,22,46,.78) 100%);
  }
  .wcr-trust{grid-template-columns:minmax(0,1fr);gap:14px;}
  .wcr-intro h2 br,.wcr-related h2 br{display:none;}
  .wcr-common-grid{grid-template-columns:minmax(0,1fr);}
  .wcr-process h2 .accent{display:block;}
  .wcr-steps{grid-template-columns:minmax(0,1fr);}
  .wcr-step + .wcr-step::before{display:none;}
  .wcr-results-head{grid-template-columns:minmax(0,1fr);}
  .wcr-results-head .btn{justify-self:start;}
  .sfr-ba{aspect-ratio:2.4/1;}
  .wcr-ba-lead.sfr-ba{aspect-ratio:4/3;}
  .wcr-rel-help{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon title" "icon copy" "icon link";}
  .wcr-cta-actions{width:100%;}
}

@media (max-width:400px){
  .wcr-benefits li{padding-inline:4px;}
}