/* ==========================================================================
   Color Restoration — page-specific styles (a sub-page of Oxidation & Fading
   Restoration, under Gelcoat Repair). Loads after styles.css and reuses its
   tokens, buttons, eyebrows, fg-card, header and footer. Everything here is
   prefixed .clr- 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).

   Started as a copy of dock-rash-scuff-repair.css, whose comp shares most of
   the layout. Sizes come from the comp, which 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. */
.clr-wide{
  --wide-pad:clamp(18px,4.2vw,76px);
  max-width:1920px;
  margin-inline:auto;
  padding-inline:var(--wide-pad);
}
.clr-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);
}
.clr-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). */
.clr-hang{
  --rule:clamp(28px,2.44vw,44px);
  --rule-gap:clamp(10px,1.3vw,20px);
  gap:var(--rule-gap);
}
.clr-hang i{width:var(--rule);}
@media (min-width:1025px){
  .clr-hang{margin-left:calc(-1 * (var(--rule) + var(--rule-gap)));}
}

/* ---------- Hero ----------
   The whole photo is the comp's hero with its copy painted out: the left is
   already a navy wash, the right is the bow. clr-hero-before.jpg is also the
   slider's before layer, so the slider (the right 58% of the stage) is
   see-through where it matches the photo underneath. Both slider layers are
   sized to the full stage and pinned to its right edge, so they line up with
   .clr-hero-bg pixel for pixel. --ba-l is the slider's left edge as a
   fraction of the stage. */
.clr-hero{background:var(--navy-2);}
.clr-hero-stage{
  --ba-l:.42;
  position:relative;
  overflow:hidden;
  min-height:21.97vw;           /* the comp's photo band is 225 of 1024px */
  background:#0A2A4B;
}
.clr-hero-bg,
.clr-hero-ba .sfr-ba-img img{
  position:absolute;top:0;right:0;
  height:100%;
  object-fit:cover;
  object-position:right center;
}
.clr-hero-bg{width:100%;}
.clr-hero-ba .sfr-ba-img img{width:calc(100% / (1 - var(--ba-l)));max-width:none;}
.clr-hero-ba.sfr-ba{
  position:absolute;top:0;bottom:0;right:0;
  left:calc(var(--ba-l) * 100%);
  aspect-ratio:auto;
  border-radius:0;
  box-shadow:none;
}
.clr-hero-ba .sfr-ba-img{overflow:hidden;}
/* Dragged all the way left, the after layer would meet the navy end of the
   photo in a hard edge at the slider's left side: fade it in instead. */
.clr-hero-ba .sfr-ba-after{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%);
}
.clr-hero-ba .sfr-ba-line{width:3px;margin-left:-1.5px;}
.clr-hero-ba .sfr-ba-handle{width:clamp(36px,3.1vw,58px);height:clamp(36px,3.1vw,58px);top:47%;}
.clr-hero-ba .sfr-ba-tag{
  bottom:14%;
  display:flex;flex-direction:column;align-items:center;
  font-size:clamp(0.6875rem,.9vw,1rem);
  letter-spacing:.6px;
  padding:.55em 1.6em .6em;
  border-radius:6px;
  line-height:1.2;
}
.clr-hero-ba .sfr-ba-tag small{
  font-family:var(--font-body);
  font-weight:500;
  font-size:.78em;
  letter-spacing:0;
  opacity:.92;
}
.clr-hero-ba .sfr-ba-tag-before{left:17.8%;background:rgba(24,30,38,.82);}
.clr-hero-ba .sfr-ba-tag-after{right:16.7%;background:rgba(22,82,170,.94);}
/* Above the slider so its wash covers the seam at the slider's left edge;
   it never takes clicks. */
.clr-hero-scrim{
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,22,46,.35) 0%,
    rgba(0,22,46,.22) 34%,
    rgba(0,22,46,0) 46%);
}
.clr-hero-inner{
  position:relative;z-index:2;
  pointer-events:none;          /* let drags on the photo reach the slider */
  padding-top:clamp(24px,2.3vw,44px);
  padding-bottom:clamp(18px,1.2vw,26px);
}
.clr-hero-content{
  pointer-events:auto;
  max-width:min(620px,39vw);
  margin-left:clamp(0px,4.9vw,94px);
}
.clr-hero-eyebrow{
  font-size:clamp(0.6875rem,.8vw,0.8125rem);
  letter-spacing:2px;
  margin-bottom:clamp(8px,.6vw,12px);
}
.clr-hero h1{
  font-size:clamp(2rem,2.96vw,3.5rem);
  letter-spacing:-.02em;
  line-height:1.04;
  color:#fff;
  margin-bottom:clamp(10px,.8vw,16px);
}
.clr-hero h1 .accent{color:var(--accent);}
.clr-hero-sub{
  color:rgba(255,255,255,.92);
  font-size:clamp(0.9375rem,1.08vw,1.1875rem);
  line-height:1.42;
  max-width:31em;
  margin-bottom:clamp(14px,1.1vw,22px);
}
.clr-hero-actions{display:flex;gap:clamp(10px,1.1vw,18px);flex-wrap:wrap;}
.clr-hero-actions .btn-outline-light{background:rgba(0,22,46,.35);}

.clr-trust-band{
  background:
    radial-gradient(ellipse at 50% 120%, rgba(28,148,220,.18), transparent 60%),
    linear-gradient(180deg,#0B2E55 0%,#082647 100%);
  border-top:1px solid rgba(94,205,250,.18);
}
.clr-trust{
  display:grid;
  grid-template-columns:repeat(4,auto);
  justify-content:space-between;
  gap:14px 28px;
  padding-block:clamp(12px,1vw,18px);
  padding-left:calc(var(--wide-pad) + clamp(0px,4.9vw,94px));
  padding-right:calc(var(--wide-pad) + clamp(0px,9vw,170px));
}
.clr-trust li{display:flex;align-items:center;gap:12px;color:#fff;}
.clr-trust-icon{color:var(--accent);display:flex;flex:none;}
.clr-trust strong{display:block;font-family:var(--font-head);font-size:clamp(0.8125rem,.9vw,0.9375rem);line-height:1.25;}
.clr-trust small{display:block;font-size:clamp(0.7188rem,.8vw,0.8125rem);color:#9FD3F4;}

/* ---------- What is color restoration ----------
   copy + four benefits | the layered gelcoat diagram. */
/* The comp's own tint, which the diagram's background was painted from. */
.clr-intro{background:linear-gradient(180deg,#F5FBFE 0%,#F1F9FE 100%);}
.clr-intro-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:center;
  padding-block:clamp(22px,2vw,40px) clamp(20px,1.8vw,36px);
}
.clr-intro-copy{padding-right:clamp(20px,2.6vw,50px);}
.clr-intro h2{
  font-size:clamp(1.625rem,2.3vw,2.75rem);
  letter-spacing:-.02em;
  line-height:1.08;
  margin-bottom:clamp(8px,.9vw,16px);
}
.clr-intro h2 .accent,.clr-process-copy h2 .accent{color:var(--icon-blue);}
.clr-intro-copy > p{
  font-size:clamp(0.9063rem,1.12vw,1.1875rem);
  line-height:1.5;
  color:var(--gray-text);
  max-width:37em;
}
.clr-benefits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(16px,1.6vw,32px);
}
.clr-benefits li{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-inline:clamp(6px,.5vw,12px);
}
.clr-benefits li + li{border-left:1px solid #DCE8F3;}
.clr-benefit-icon{
  width:clamp(46px,3.8vw,70px);height:clamp(46px,3.8vw,70px);
  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(10px,1vw,18px);
}
.clr-benefit-icon svg{width:50%;height:auto;}
.clr-benefits strong{
  font-family:var(--font-head);
  font-size:clamp(0.8125rem,.98vw,1.0625rem);
  line-height:1.2;
  color:var(--navy);
  margin-bottom:4px;
}
.clr-benefits small{font-size:clamp(0.7188rem,.83vw,0.875rem);line-height:1.4;color:var(--gray-text);}

/* The diagram: clr-layers.jpg is the comp's figure with the label text and
   the tags painted out; the leader lines and dots stay in the image. Labels
   and tags are placed in % of the image and sized in cqw so they land on the
   painted-out spots at any width (the image is 498x285 comp px). */
.clr-layers{
  padding-left:clamp(18px,2.4vw,46px);
  border-left:1px solid #DCE8F3;
}
.clr-layers h3{
  font-size:clamp(1rem,1.12vw,1.3125rem);
  letter-spacing:-.2px;
  margin-bottom:clamp(4px,.5vw,10px);
  padding-left:.8%;
}
.clr-layers-fig{position:relative;container-type:inline-size;}
.clr-layers-media{position:relative;}
.clr-layers-media img{
  display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 97.5%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 2%,#000 97.5%,transparent 100%);
}
.clr-layers-labels{position:absolute;inset:0;pointer-events:none;}
.clr-lab{position:absolute;left:.8%;width:19.8%;}
.clr-lab-1{top:9.3%;}
.clr-lab-2{top:36.6%;}
.clr-lab-3{top:75.6%;}
.clr-lab dt{
  font-family:var(--font-head);
  font-weight:700;
  font-size:max(0.6875rem,1.7cqw);
  line-height:1.25;
  color:var(--navy);
  margin-bottom:.3em;
}
.clr-lab dd{font-size:max(0.625rem,1.48cqw);line-height:1.55;color:var(--gray-text);}
.clr-layers-tag{
  position:absolute;
  top:83.4%;
  min-height:12.8%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.3em .5em;
  border-radius:max(5px,1.1cqw);
  font-family:var(--font-head);
  font-weight:700;
  font-size:max(0.6563rem,1.75cqw);
  letter-spacing:.04em;
  line-height:1.15;
  color:#fff;
  text-align:center;
}
.clr-layers-tag small{font-family:var(--font-body);font-weight:500;font-size:.76em;letter-spacing:0;}
.clr-layers-tag-before{left:31.1%;width:23.4%;background:#6F7880;}
.clr-layers-tag-after{left:71.6%;width:26%;background:#1E90F0;}

/* ---------- Process band ----------
   Photo with a chevron on its trailing edge | copy + four step cards. */
.clr-process{
  display:grid;
  grid-template-columns:minmax(260px,37.6%) 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%);
}
.clr-process-photo{
  --notch:16%;
  position:relative;
  min-height:220px;
  clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);
}
.clr-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 polisher */
}
.clr-process-body{
  padding:clamp(22px,2.1vw,40px) clamp(18px,2.6vw,48px) clamp(16px,1.4vw,28px) clamp(10px,1.1vw,22px);
}
.clr-process-copy .eyebrow{font-size:clamp(0.6875rem,.78vw,0.8125rem);letter-spacing:1.9px;margin-bottom:clamp(8px,.7vw,12px);}
.clr-process h2{
  color:#fff;
  font-size:clamp(1.5rem,2.15vw,2.5rem);
  letter-spacing:-.02em;
  margin-bottom:clamp(6px,.7vw,12px);
}
.clr-process h2 .accent{color:var(--accent);}
.clr-process-copy p{color:rgba(255,255,255,.88);font-size:clamp(0.8125rem,.93vw,1rem);line-height:1.5;}
.clr-steps{
  --step-gap:clamp(18px,2.44vw,44px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--step-gap);
  margin-top:clamp(14px,1.5vw,28px);
  list-style:none;
}
.clr-step{
  position:relative;
  padding:clamp(48px,4.1vw,76px) clamp(14px,1.37vw,24px) clamp(10px,.75vw,16px);
  border:1px solid rgba(94,205,250,.22);
  border-radius:8px;
  background:rgba(255,255,255,.04);
}
/* Arrow between cards, centred in the column gap. */
.clr-step + .clr-step::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--step-gap) / 2 - 11px);
  top:44%;
  width:22px;height:22px;
  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;
}
.clr-step-num{
  position:absolute;top:clamp(10px,1vw,18px);left:clamp(10px,1vw,18px);
  width:clamp(30px,2.44vw,44px);height:clamp(30px,2.44vw,44px);
  border-radius:50%;
  background:#1E90F0;
  color:#fff;
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(0.875rem,1.05vw,1.1875rem);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.55);
}
.clr-step-icon{
  position:absolute;
  top:clamp(12px,1.15vw,21px);
  left:clamp(52px,4.7vw,86px);
  color:#E4EEF7;
  display:flex;
}
.clr-step-icon svg{width:clamp(22px,1.9vw,34px);height:auto;}
.clr-step h3{color:#fff;font-size:clamp(0.875rem,1.03vw,1.125rem);letter-spacing:-.2px;margin-bottom:6px;}
.clr-step p{color:rgba(255,255,255,.8);font-size:clamp(0.7813rem,.86vw,0.9375rem);line-height:1.4;}

/* ---------- Before & after ---------- */
.clr-results{background:var(--light-bg);}
.clr-results .clr-wide{padding-block:clamp(20px,1.7vw,34px) clamp(18px,1.5vw,30px);}
.clr-results-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px 30px;
  margin-bottom:clamp(10px,1vw,18px);
}
.clr-results h2{
  font-size:clamp(1.375rem,2.05vw,2.375rem);
  letter-spacing:-.02em;
  line-height:1.12;
  margin-bottom:6px;
}
.clr-results-head p{font-size:clamp(0.8125rem,.98vw,1.0313rem);line-height:1.5;color:var(--gray-text);}
.clr-ba-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.56vw,28px);
}
.clr-result figcaption{padding-top:clamp(6px,.6vw,10px);}
.clr-result figcaption strong{
  display:block;
  font-family:var(--font-head);
  font-size:clamp(0.875rem,.98vw,1.0625rem);
  color:var(--navy);
}
.clr-result figcaption span{display:block;font-size:clamp(0.8125rem,.88vw,0.9375rem);color:var(--gray-text);}

/* The shared slider (script.js binds every .sfr-ba). Each pair is one comp
   half plus its mirror at the comp's strip ratio. */
.sfr-ba{
  position:relative;
  aspect-ratio:296/102;
  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.54vw,46px);height:clamp(32px,2.54vw,46px);
  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:42%;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,.88vw,0.9375rem);
  letter-spacing:.6px;
  color:#fff;
  padding:.45em 1.8em;
  border-radius:5px;
  pointer-events:none;
}
.sfr-ba-tag-before{left:clamp(6px,.98vw,18px);background:rgba(40,46,54,.9);}
.sfr-ba-tag-after{right:clamp(6px,1.2vw,22px);background:#1E90F0;}

/* ---------- Related services ----------
   copy | five fg-cards (whole card is the link) + a "can't find it" card. */
.clr-related{background:linear-gradient(180deg,#F9FCFF 0%,#fff 100%);border-top:1px solid #E6EFF7;}
.clr-related-inner{
  display:grid;
  grid-template-columns:minmax(260px,31%) minmax(0,1fr);
  align-items:start;
  column-gap:clamp(16px,1.4vw,28px);
  padding-block:clamp(18px,1.8vw,34px) clamp(16px,1.4vw,28px);
}
.clr-related-copy{padding-top:clamp(0px,.4vw,8px);}
.clr-related h2,.clr-why-copy h2{
  font-size:clamp(1.375rem,1.9vw,2.25rem);
  letter-spacing:-.02em;
  line-height:1.16;
  margin-bottom:clamp(6px,.6vw,12px);
}
.clr-related h2{font-size:clamp(1.375rem,1.72vw,2.0625rem);}
.clr-related-copy p{font-size:clamp(0.8438rem,.98vw,1.0313rem);line-height:1.5;color:var(--gray-text);max-width:28em;}
.clr-related-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.28fr);
  gap:clamp(8px,1vw,18px);
}
.clr-rel-card{border:1px solid #E6EFF7;display:flex;flex-direction:column;}
.clr-rel-card .fg-card-media img{aspect-ratio:92/49;}
.clr-rel-card .fg-card-body{
  flex:1;
  display:flex;flex-direction:column;
  padding:clamp(10px,1.1vw,18px) clamp(8px,.6vw,12px) clamp(10px,1vw,16px);
}
.clr-rel-card .fg-card-body h3{
  font-size:clamp(0.75rem,.8vw,0.9063rem);
  letter-spacing:-.3px;
  line-height:1.25;
  margin-bottom:5px;
}
.clr-rel-card .fg-card-body p{font-size:clamp(0.7188rem,.72vw,0.8125rem);line-height:1.45;margin-bottom:clamp(10px,1vw,18px);}
.clr-rel-card .fg-card-link{margin-top:auto;font-size:clamp(0.75rem,.8vw,0.875rem);}
.clr-rel-help{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  gap:6px;
  padding:clamp(12px,1.1vw,20px) clamp(10px,.9vw,16px);
  border-radius:12px;
  background:#EAF4FD;
  border:1px solid #DCEBF8;
  transition:transform .18s ease;
}
.clr-rel-help:hover{transform:translateY(-3px);}
.clr-rel-help-icon{color:var(--icon-blue);display:flex;margin-bottom:4px;}
.clr-rel-help-icon svg{width:clamp(28px,2.3vw,42px);height:auto;}
.clr-rel-help strong{font-family:var(--font-head);font-weight:800;font-size:clamp(0.875rem,1.1vw,1.1875rem);line-height:1.22;color:var(--navy);}
.clr-rel-help small{font-size:clamp(0.7188rem,.83vw,0.875rem);line-height:1.45;color:var(--gray-text);}

/* ---------- Why us + FAQ ----------
   copy | checklist | FAQ accordion (native <details>, no JS). */
.clr-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;
}
.clr-why-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.98fr) minmax(0,1.3fr);
  align-items:center;
  column-gap:clamp(20px,2.4vw,46px);
  padding-block:clamp(18px,1.6vw,32px);
}
.clr-why-copy p{font-size:clamp(0.8438rem,.93vw,1rem);line-height:1.5;color:var(--gray-text);}
.clr-checks{display:grid;gap:clamp(9px,1vw,18px);}
.clr-checks li{
  display:flex;align-items:center;gap:clamp(10px,1.1vw,18px);
  font-size:clamp(0.8438rem,.93vw,1rem);
  color:#34506A;
}
.clr-checks li::before{
  content:"";flex:none;
  width:clamp(20px,1.56vw,27px);height:clamp(20px,1.56vw,27px);
  border-radius:50%;
  background:#1E90F0 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%;
}
.clr-faq{
  align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
  padding-left:clamp(18px,2.4vw,46px);
  border-left:1px solid #DCE8F3;
}
.clr-faq h2{font-size:clamp(1.1875rem,1.46vw,1.6875rem);letter-spacing:-.02em;margin-bottom:clamp(6px,.6vw,10px);}
.clr-faq details{
  background:#fff;
  border:1px solid #D9E6F2;
  border-radius:6px;
}
.clr-faq details + details{margin-top:clamp(5px,.45vw,8px);}
.clr-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(7px,.55vw,10px) clamp(12px,1vw,18px);
  font-weight:500;
  font-size:clamp(0.8125rem,.9vw,0.9688rem);
  cursor:pointer;
  list-style:none;
}
.clr-faq summary::-webkit-details-marker{display:none;}
.clr-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;
}
.clr-faq details[open] summary::after{transform:rotate(45deg);}
.clr-faq summary:focus-visible{outline:2px solid var(--icon-blue);outline-offset:2px;border-radius:6px;}
.clr-faq details p{
  padding:0 clamp(12px,1vw,18px) 12px;
  font-size:clamp(0.8125rem,.86vw,0.9063rem);
  line-height:1.55;
  color:var(--gray-text);
}
.clr-faq details a{color:var(--icon-blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

/* ---------- Closing CTA band ----------
   The comp's bow at the left edge; the skyline is the faded right end of
   results-marina.jpg (the comp's own skyline sits behind the copy). */
.clr-cta{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#001A36 0%,var(--navy) 55%,#0B3A66 100%);
  color:#fff;
}
.clr-cta-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 62%;
  opacity:.34;
  -webkit-mask-image:linear-gradient(90deg,transparent 22%,#000 70%);
          mask-image:linear-gradient(90deg,transparent 22%,#000 70%);
}
.clr-cta-boat{
  position:absolute;top:0;bottom:0;left:0;
  width:clamp(200px,23.2vw,445px);
  -webkit-mask-image:linear-gradient(90deg,#000 80%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 80%,transparent 100%);
}
.clr-cta-boat img{width:100%;height:100%;object-fit:cover;object-position:right center;}
.clr-cta-inner{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px clamp(20px,2.6vw,50px);
  flex-wrap:wrap;
  min-height:clamp(120px,10vw,190px);
  padding-block:clamp(22px,2vw,38px);
  /* Clear the boat even though this frame is centred: % padding resolves
     against the full-width section. */
  padding-left:max(var(--wide-pad), calc(clamp(200px,23.2vw,445px) + 12px) - max(0px, (100% - 1920px) / 2));
  padding-right:calc(var(--wide-pad) + clamp(0px,2.4vw,46px));
}
.clr-cta h2{color:#fff;font-size:clamp(1.375rem,1.9vw,2.25rem);letter-spacing:-.02em;margin-bottom:6px;}
.clr-cta p{font-size:clamp(0.875rem,.98vw,1.0625rem);color:rgba(255,255,255,.9);}
.clr-cta-actions{display:flex;gap:clamp(10px,1.4vw,24px);flex-wrap:wrap;}
.clr-cta-actions .btn{padding:clamp(13px,1.05vw,18px) clamp(24px,2.2vw,40px);}
.clr-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){
  .clr-why-inner{grid-template-columns:minmax(0,.9fr) minmax(0,.95fr) minmax(0,1.3fr);}
}

@media (max-width:1400px){
  .clr-related-inner{grid-template-columns:minmax(0,1fr);row-gap:16px;}
  .clr-related h2{font-size:clamp(1.375rem,1.72vw,2.0625rem);}
.clr-related-copy p{max-width:52em;}
  /* Why: copy moves above the checklist and FAQ so neither column squeezes. */
  .clr-why-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);row-gap:22px;}
  .clr-why-copy{grid-column:1 / -1;}
  .clr-why-copy p{max-width:52em;}
  .clr-why-copy h2 br{display:none;}
}

@media (max-width:1240px){
  .clr-hero-stage{--ba-l:.46;}
  .clr-hero-content{max-width:min(560px,43vw);margin-left:0;}
  .clr-trust{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:56px;padding-inline:var(--wide-pad);}
  .clr-intro-inner{grid-template-columns:minmax(0,1fr);row-gap:26px;}
  .clr-intro-copy{padding-right:0;}
  .clr-layers{padding-left:0;border-left:0;max-width:820px;}
  .clr-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;}
  .clr-step:nth-child(3)::before{display:none;}
}

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

@media (max-width:1024px){
  /* The stage stacks: copy on the navy end of the photo, then the slider as
     its own block, framed on the bow. */
  .clr-hero-stage{
    min-height:0;
    display:flex;flex-direction:column;
    background:linear-gradient(170deg,#0D3358 0%,#0A2A4B 55%,#082442 100%);
  }
  .clr-hero-bg,.clr-hero-scrim{display:none;}
  /* width:100% because the frame's auto margins would shrink a flex item. */
  .clr-hero-inner{order:1;width:100%;padding-bottom:clamp(24px,4vw,34px);}
  .clr-hero-content{max-width:640px;}
  .clr-hero-ba.sfr-ba{
    order:2;
    position:relative;left:auto;top:auto;bottom:auto;right:auto;
    aspect-ratio:2/1;
    max-height:520px;
  }
  .clr-hero-ba .sfr-ba-img img{width:100%;object-position:79% center;}
  .clr-hero-ba .sfr-ba-after{-webkit-mask-image:none;mask-image:none;}
  .clr-hero-ba .sfr-ba-tag{bottom:9%;}
  .clr-hero-ba .sfr-ba-tag-before{left:5%;}
  .clr-hero-ba .sfr-ba-tag-after{right:5%;}
  .clr-process{grid-template-columns:minmax(0,1fr);}
  .clr-process-photo{clip-path:none;aspect-ratio:640/380;max-height:420px;width:100%;overflow:hidden;}
  /* 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. */
  .clr-process-photo img{width:118%;max-width:none;}
  .clr-process-body{padding:clamp(28px,5vw,40px) clamp(18px,4.2vw,76px) clamp(30px,5vw,44px);}
  .clr-cta-boat{display:none;}
  .clr-cta-inner{padding-left:var(--wide-pad);padding-right:var(--wide-pad);}
}

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

@media (max-width:700px){
  /* Diagram: the labels drop below the image, which is cropped to the block
     (the left 25.7% held the labels and the lines). Tags are re-placed for
     the crop. */
  .clr-layers-media{overflow:hidden;}
  .clr-layers-media img{width:134.6%;max-width:none;margin-left:-34.6%;-webkit-mask-image:none;mask-image:none;}
  .clr-layers-tag-before{left:7.3%;width:31.5%;}
  .clr-layers-tag-after{left:61.8%;width:35%;}
  .clr-layers-labels{position:static;display:grid;gap:12px;margin-top:14px;pointer-events:auto;}
  .clr-lab{position:static;width:auto;}
  .clr-lab dt{font-size:0.9375rem;display:flex;align-items:center;gap:8px;}
  .clr-lab dt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--icon-blue);flex:none;}
  .clr-lab dd{font-size:0.875rem;padding-left:16px;}
}

@media (max-width:640px){
  .clr-hero-inner{padding-top:34px;padding-bottom:28px;}
  .clr-hero h1{font-size:clamp(1.75rem,8vw,2.25rem);letter-spacing:-.7px;}
  .clr-hero h1 br{display:none;}
  .clr-hero-sub{font-size:0.9063rem;}
  .clr-hero-actions .btn,.clr-cta-actions .btn{flex:1 1 100%;justify-content:center;}
  .clr-hero-ba.sfr-ba{aspect-ratio:4/3;}
  .clr-hero-ba .sfr-ba-img img{object-position:77% center;}
  .clr-trust{grid-template-columns:minmax(0,1fr);gap:14px;padding-block:20px;}
  .clr-intro h2 br,.clr-related h2 br{display:none;}
  .clr-process h2 .accent{display:block;}
  .clr-steps{grid-template-columns:minmax(0,1fr);}
  .clr-step + .clr-step::before{display:none;}
  .clr-results-head{grid-template-columns:minmax(0,1fr);}
  .clr-results-head .btn{justify-self:start;}
  .sfr-ba{aspect-ratio:2.2/1;}
  .clr-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .clr-cta-actions{width:100%;}
}

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