/* ==========================================================================
   Stress Crack Repair — page-specific styles (a sub-page of Crack Repair,
   linked from its Stress Crack Repair card). Loads after styles.css and
   reuses its tokens, buttons, eyebrows, header, footer and contact form.
   Everything here is prefixed .stc-; the only unprefixed rules are the
   shared .sfr-ba slider styles, which every page that uses the slider
   defines for itself. Started as a copy of edge-rub-rail-repair.css, whose
   comp shares the hero, process, results, why and CTA bands.
   ========================================================================== */

/* The comp runs its bands nearly edge to edge, like the other gelcoat and
   hull sub-pages: a 1760px frame, not .container. */
.stc-wide{
  max-width:1760px;
  margin-inline:auto;
  padding-inline:clamp(18px,2.6vw,44px);
}
.stc-eyebrow{
  color:var(--icon-blue);
  font-size:0.7188rem;
  letter-spacing:2px;
  margin-bottom:10px;
}
.stc-eyebrow i{background:var(--icon-blue);width:32px;}

/* ---------- Hero ----------
   stc-hero.jpg ("Same Boats. New Beginnings." baked in at its top right)
   covers the right of the band, feathered into the navy on its left. It
   stops above the trust strip, which sits on the navy. The copy is indented
   past the eyebrow's rule, as in the comp. */
.stc-hero{
  --stc-indent:50px;                /* eyebrow rule (36px) + its gap (14px) */
  background:linear-gradient(100deg,#001A36 0%,var(--navy-2) 38%,#0B3A66 100%);
}
.stc-hero-main{position:relative;overflow:hidden;}
.stc-hero-img{
  position:absolute;top:0;right:0;
  width:60%;height:100%;
  object-fit:cover;
  object-position:right 30%;        /* keeps the tagline (top right) in frame */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 18%);
}
.stc-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(0,22,46,.74) 0%,
    rgba(0,22,46,.5) 38%,
    rgba(0,22,46,0) 56%);
}
.stc-hero-inner{
  position:relative;z-index:2;
  padding-top:clamp(28px,2.2vw,44px);
  padding-bottom:clamp(14px,.95vw,20px);
}
.stc-hero-content{max-width:760px;padding-left:var(--stc-indent);}
.stc-hero-eyebrow{
  margin-left:calc(-1 * var(--stc-indent));
  margin-bottom:14px;
  font-size:0.75rem;
  letter-spacing:2.2px;
}
.stc-hero-eyebrow i{width:36px;}
.stc-hero h1{
  font-size:clamp(1.875rem,2.72vw,3.125rem);
  letter-spacing:-1.1px;
  line-height:1.04;
  color:#fff;
  margin-bottom:12px;
}
.stc-hero h1 .accent{color:var(--accent);}
.stc-hero-sub{
  color:rgba(255,255,255,.9);
  font-size:clamp(0.9063rem,.98vw,1.0313rem);
  line-height:1.42;
  max-width:490px;
  margin-bottom:18px;
}
.stc-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

.stc-trust-bar{
  background:linear-gradient(180deg,rgba(0,26,54,.8) 0%,rgba(0,20,42,.94) 100%);
  border-top:1px solid rgba(94,205,250,.14);
}
.stc-trust{
  display:grid;
  grid-template-columns:repeat(4,auto);
  justify-content:space-between;
  gap:14px 24px;
  padding-block:clamp(12px,1vw,18px);
  padding-left:calc(var(--pad) + var(--stc-indent));
}
.stc-trust li{display:flex;align-items:center;gap:12px;color:#fff;}
.stc-trust-icon{flex:none;display:flex;color:var(--accent);}
.stc-trust strong{display:block;font-family:var(--font-head);font-size:0.8438rem;line-height:1.25;}
.stc-trust small{display:block;font-size:0.75rem;line-height:1.3;color:rgba(255,255,255,.75);}

/* ---------- Diagram overlays (shared by the cutaway and the boat) ----------
   Each figure is the painted-out photo plus live markup: an SVG of leader
   lines drawn in the photo's own pixel space (viewBox = the comp crop), and
   pins/labels placed with --x/--y in % of the photo. Labels size with the
   figure through container query units, so the whole diagram scales as one. */
.stc-layers,.stc-boat{
  position:relative;
  container-type:inline-size;
  margin:0;
}
.stc-layers > img,.stc-boat-photo > img{display:block;width:100%;height:auto;}
.stc-boat-photo{position:relative;}
.stc-leaders{
  position:absolute;inset:0;
  width:100%;height:100%;
  overflow:visible;
  pointer-events:none;
}
.stc-leaders path{
  fill:none;
  stroke:var(--icon-blue);
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
}
.stc-pin{
  position:absolute;
  left:var(--x);top:var(--y);
  width:14px;height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  background:var(--navy);
  box-shadow:0 0 0 3px #fff, 0 0 0 7px rgba(28,148,220,.38);
  display:flex;align-items:center;justify-content:center;
}
.stc-pin b{display:none;}

/* ---------- Intro: copy | cutaway illustration ---------- */
.stc-intro{background:var(--light-bg);}
.stc-intro-inner{
  display:grid;
  grid-template-columns:minmax(0,37fr) minmax(0,57fr);
  align-items:center;
  column-gap:clamp(24px,2.6vw,48px);
  padding-block:clamp(10px,.7vw,14px);
}
.stc-intro-copy{padding-left:clamp(0px,1.4vw,28px);}
.stc-intro h2{
  font-size:clamp(1.5rem,2.1vw,2.3125rem);
  letter-spacing:-.8px;
  line-height:1.12;
  margin-bottom:12px;
}
.stc-intro h2 .accent{color:var(--icon-blue);}
.stc-intro-copy > p{
  font-size:clamp(0.9063rem,1vw,1rem);
  line-height:1.5;
  color:var(--gray-text);
  max-width:600px;
  margin-bottom:clamp(18px,1.6vw,26px);
}
/* stc-layers.jpg has a flat #F2F9FE ground (--light-bg to within 2 levels);
   feather its edges so the frame never shows. */
.stc-layers > img{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),
                     linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),
                     linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
          mask-composite:intersect;
}
/* Callout cards sit exactly over the comp's (painted-out) cards: left/top/width
   and min-height in % of the illustration. */
.stc-callout{
  position:absolute;
  background:#fff;
  border-radius:8px;
  box-shadow:0 12px 26px -16px rgba(0,38,75,.4);
  padding:1.3cqw 1.2cqw 1.4cqw 2cqw;
}
.stc-co-gelcoat {left:4.36%;top:7.31%;width:22.8%;min-height:19.6%;}
.stc-co-crack   {left:70.7%;top:7.31%;width:25.8%;min-height:28.8%;}
.stc-co-laminate{left:1.39%;top:66.2%;width:25.4%;min-height:21.5%;}
.stc-callout strong{
  display:block;
  font-family:var(--font-head);
  font-size:clamp(0.6875rem,1.75cqw,1rem);
  line-height:1.25;
  color:var(--navy);
  margin-bottom:.25em;
}
.stc-callout small{
  display:block;
  font-size:clamp(0.625rem,1.5cqw,0.875rem);
  line-height:1.5;
  color:var(--gray-text);
}
@container (max-width:560px){
  /* Too small for the descriptions to fit their cards; the titles stay. */
  .stc-callout{padding:6px 8px;display:flex;align-items:center;}
  .stc-callout small{display:none;}
  .stc-callout strong{margin:0;}
}

/* ---------- Causes | locations | types ----------
   Three panels on a pale band: the outer two are tinted cards, the middle
   one is the open boat diagram. */
.stc-guide{
  background:#F5FAFE;
  border-top:1px solid #E6EFF7;
}
.stc-guide-inner{
  display:grid;
  grid-template-columns:minmax(0,292fr) minmax(0,400fr) minmax(0,295fr);
  gap:clamp(6px,.5vw,10px);
  padding-block:clamp(4px,.3vw,6px) clamp(10px,1vw,18px);
}
.stc-panel{border-radius:10px;padding:clamp(18px,1.4vw,24px) clamp(18px,1.4vw,26px) clamp(20px,1.6vw,28px);}
.stc-panel h2{
  font-size:clamp(1.25rem,1.62vw,1.6875rem);
  letter-spacing:-.6px;
  line-height:1.12;
  margin-bottom:clamp(14px,1.2vw,20px);
}
.stc-panel h2 .accent{color:var(--icon-blue);}
.stc-causes,.stc-types{
  background:#ECF7FE;
  /* Spread the lists over the panel height the boat diagram sets, as in the
     comp, rather than leaving a gap under them. */
  display:flex;flex-direction:column;
}
.stc-cause-list,.stc-type-list{flex:1;}
.stc-locations{padding-bottom:0;}

.stc-cause-list{display:grid;align-content:space-between;gap:clamp(12px,1.1vw,18px);}
.stc-cause-list li{display:flex;align-items:center;gap:14px;}
.stc-cause-icon{
  flex:none;
  width:clamp(44px,3.3vw,56px);height:clamp(44px,3.3vw,56px);
  border-radius:50%;
  background:#fff;
  color:var(--icon-blue);
  box-shadow:0 6px 16px -10px rgba(0,38,75,.35);
  display:flex;align-items:center;justify-content:center;
}
.stc-cause-list strong{display:block;font-family:var(--font-head);font-size:clamp(0.875rem,1vw,0.9688rem);line-height:1.25;color:var(--navy);margin-bottom:3px;}
.stc-cause-list small{display:block;font-size:clamp(0.7813rem,.85vw,0.8438rem);line-height:1.4;color:var(--gray-text);}

/* stc-boat.jpg's ground is the band's #F5FAFE; feather its edges (and let the
   water fade out at the bottom) so the frame never shows. */
.stc-boat-photo > img{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),
                     linear-gradient(180deg,transparent,#000 4%,#000 90%,transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),
                     linear-gradient(180deg,transparent,#000 4%,#000 90%,transparent);
          mask-composite:intersect;
}
/* Boat diagram. The Deck Surfaces label rides up beside the heading (negative
   --y), and the two bottom labels hang below the photo, so the figure keeps
   room for them underneath. */
.stc-boat{margin-top:-4px;margin-bottom:clamp(52px,4vw,64px);}
.stc-boat .stc-pin{
  background:var(--icon-blue);
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(28,148,220,.3);
}
.stc-spots{list-style:none;margin:0;padding:0;}
.stc-spot{
  --fs:clamp(11.5px,2.4cqw,15px);   /* title size; the dot centres on its first line */
  position:absolute;
  left:var(--x);top:var(--y);
  width:25%;
  display:grid;
  grid-template-columns:10px minmax(0,1fr);
  column-gap:clamp(6px,.6vw,9px);
  align-items:start;
  /* put the 10px dot's centre on (--x, --y) */
  transform:translate(-5px,calc(-.625 * var(--fs)));
}
.stc-spot-dot{
  grid-row:1 / span 2;
  width:10px;height:10px;
  margin-top:calc(.625 * var(--fs) - 5px);
  border-radius:50%;
  background:var(--icon-blue);
  box-shadow:0 0 0 2px #fff;
  font-size:0;
}
.stc-spot strong{
  font-family:var(--font-head);
  font-size:var(--fs);
  line-height:1.25;
  color:var(--navy);
  white-space:nowrap;
}
.stc-spot small{
  grid-column:2;
  font-size:clamp(0.6563rem,2.05cqw,0.8125rem);
  line-height:1.4;
  color:var(--gray-text);
}

.stc-type-list{display:grid;grid-auto-rows:1fr;gap:clamp(8px,.7vw,12px);}
.stc-type{
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,70fr) minmax(0,160fr) auto;
  align-items:center;
  column-gap:clamp(12px,1vw,16px);
  padding-right:clamp(10px,.8vw,14px);
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 8px 20px -16px rgba(0,38,75,.45);
  transition:transform .2s ease, box-shadow .2s ease;
}
.stc-type:hover{transform:translateY(-2px);box-shadow:0 14px 26px -16px rgba(0,38,75,.5);}
.stc-type:focus-visible{outline:2px solid var(--icon-blue);outline-offset:3px;}
.stc-type img{width:100%;height:100%;min-height:100%;aspect-ratio:83/54;object-fit:cover;}
.stc-type-body{padding-block:10px;}
.stc-type strong{display:block;font-family:var(--font-head);font-size:clamp(0.8125rem,.88vw,0.9063rem);line-height:1.25;color:var(--navy);margin-bottom:3px;}
.stc-type small{display:block;font-size:clamp(0.7188rem,.8vw,0.7813rem);line-height:1.4;color:var(--gray-text);}
.stc-type-chev{color:var(--icon-blue);transition:transform .15s ease;}
.stc-type:hover .stc-type-chev{transform:translateX(3px);}

/* ---------- Shared slider (script.js binds every .sfr-ba) ----------
   Each image is one half of the comp's pair plus its mirror, so at rest the
   seam sits on the handle and the frame matches the comp. */
.sfr-ba{
  position:relative;
  aspect-ratio:304/96;
  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(34px,2.6vw,44px);height:clamp(34px,2.6vw,44px);
  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;}
.sfr-ba-tag{
  position:absolute;bottom:clamp(8px,.7vw,12px);
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(0.6875rem,.75vw,0.7813rem);
  letter-spacing:1.1px;
  padding:clamp(5px,.45vw,8px) clamp(18px,1.9vw,34px);
  border-radius:5px;
  pointer-events:none;
}
.sfr-ba-tag-before{left:clamp(8px,.7vw,12px);background:rgba(0,22,46,.9);color:#fff;}
.sfr-ba-tag-after{right:clamp(8px,.7vw,12px);background:var(--icon-blue);color:#fff;}

/* ---------- Process band ----------
   Worker photo bleeding off the left edge with a chevron on its trailing side
   (a thin accent rule follows the chevron), then copy and four step cards.
   The section's right padding reproduces .stc-wide's content edge. */
.stc-process{
  display:grid;
  grid-template-columns:clamp(260px,29%,600px) minmax(0,1fr);
  padding-right:max(clamp(18px,2.6vw,44px), calc((100% - 1760px) / 2 + clamp(18px,2.6vw,44px)));
  background:
    radial-gradient(ellipse at 85% 0%, rgba(28,148,220,.16), transparent 60%),
    linear-gradient(100deg,var(--navy) 0%,#062F5A 55%,var(--navy-2) 100%);
}
.stc-process-photo{
  position:relative;
  background:rgba(94,205,250,.85);
  clip-path:polygon(0 0, calc(100% - 44px) 0, 100% 50%, calc(100% - 44px) 100%, 0 100%);
}
.stc-process-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:30% 35%;
  clip-path:polygon(0 0, calc(100% - 46px) 0, calc(100% - 2px) 50%, calc(100% - 46px) 100%, 0 100%);
}
.stc-process-body{
  padding:clamp(18px,1.4vw,28px) 0 clamp(16px,1.2vw,24px) clamp(24px,2.8vw,54px);
}
.stc-process-eyebrow{
  color:rgba(255,255,255,.88);
  font-size:0.7188rem;
  letter-spacing:2.2px;
  margin-bottom:10px;
}
.stc-process h2{
  color:#fff;
  font-size:clamp(1.375rem,1.85vw,2.0625rem);
  letter-spacing:-.8px;
  margin-bottom:8px;
}
.stc-process h2 .accent{color:var(--accent);}
.stc-process-lead{
  color:rgba(255,255,255,.85);
  font-size:clamp(0.875rem,.98vw,0.9688rem);
  line-height:1.45;
  max-width:560px;
  margin-bottom:clamp(12px,.9vw,16px);
}
.stc-steps{
  --step-gap:clamp(24px,1.9vw,40px);
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px var(--step-gap);
}
.stc-step{
  position:relative;
  padding:clamp(12px,.9vw,16px) clamp(14px,1.1vw,20px) clamp(12px,1vw,18px);
  border:1px solid rgba(94,205,250,.2);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 100%);
}
/* Arrow between cards, centred in the gap. */
.stc-step + .stc-step::before{
  content:"";
  position:absolute;
  left:calc(-.5 * var(--step-gap) - 12px);
  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' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.9;
}
.stc-step-top{display:flex;align-items:center;gap:18px;margin-bottom:10px;}
.stc-step-num{
  flex:none;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--icon-blue);
  box-shadow:0 0 0 4px rgba(28,148,220,.22);
  color:#fff;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.0625rem;
  display:flex;align-items:center;justify-content:center;
}
.stc-step-icon{display:flex;color:#fff;}
.stc-step h3{color:#fff;font-size:clamp(0.875rem,1.02vw,0.9688rem);letter-spacing:-.2px;margin-bottom:4px;}
.stc-step p{color:rgba(255,255,255,.8);font-size:0.8438rem;line-height:1.45;}

/* ---------- Before & after ---------- */
.stc-results{
  background:linear-gradient(180deg,var(--light-bg) 0%,#F8FBFE 100%);
}
.stc-results-inner{padding-block:clamp(12px,.9vw,18px) clamp(12px,.9vw,18px);}
.stc-results-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px 40px;
  flex-wrap:wrap;
  margin-bottom:clamp(10px,.7vw,14px);
  padding-inline:clamp(0px,1.4vw,28px);
}
.stc-results h2{
  font-size:clamp(1.4375rem,1.95vw,2.125rem);
  letter-spacing:-.8px;
  line-height:1.12;
  margin-bottom:4px;
}
.stc-results-copy p{
  font-size:clamp(0.875rem,.98vw,0.9688rem);
  line-height:1.5;
  color:var(--gray-text);
  max-width:840px;
}
.stc-results-head .btn{align-self:flex-start;margin-top:clamp(6px,.6vw,10px);}
.stc-ba-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,28px);
  padding-inline:clamp(0px,1.4vw,28px);
}

/* ---------- Why choose us + FAQ ----------
   copy | checklist | FAQ, each set off by a rule. Questions use native
   <details>, so they work without script. */
.stc-why{background:#fff;border-top:1px solid #E6EFF7;}
.stc-why-inner{
  display:grid;
  grid-template-columns:minmax(0,31%) minmax(0,1fr) minmax(0,37%);
  align-items:center;
  padding-block:clamp(12px,.9vw,18px) clamp(14px,1vw,20px);
}
.stc-why-copy{padding-inline:clamp(0px,1.4vw,28px) clamp(20px,2.6vw,48px);}
.stc-why h2{
  font-size:clamp(1.4375rem,1.8vw,1.9375rem);
  letter-spacing:-.7px;
  line-height:1.1;
  margin-bottom:10px;
}
.stc-why-copy p{font-size:0.875rem;line-height:1.55;color:var(--gray-text);}
.stc-checks{
  align-self:stretch;
  display:grid;align-content:center;
  gap:clamp(10px,.9vw,14px);
  padding-inline:clamp(20px,2.6vw,48px);
  border-left:1px solid #DCE7F1;
}
.stc-checks li{display:flex;align-items:center;gap:12px;font-size:clamp(0.875rem,.95vw,0.9688rem);line-height:1.35;color:#2A4560;}
.stc-checks li::before{
  content:"";flex:none;
  width:22px;height: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' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center/13px;
}
.stc-faq{
  align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
  padding-left:clamp(20px,2.6vw,48px);
  padding-right:clamp(0px,1.4vw,28px);
  border-left:1px solid #DCE7F1;
}
.stc-faq h2{font-size:clamp(1.1875rem,1.35vw,1.5rem);letter-spacing:-.4px;margin-bottom:8px;}
.stc-faq-list{display:grid;gap:5px;}
.stc-faq details{background:#fff;border:1px solid #DCE7F1;border-radius:6px;}
.stc-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:6px 14px;
  font-size:0.8438rem;
  font-weight:500;
  color:var(--navy);
  cursor:pointer;
  list-style:none;
}
.stc-faq summary::-webkit-details-marker{display:none;}
.stc-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;
}
.stc-faq details[open] summary::after{transform:rotate(45deg);}
.stc-faq summary:focus-visible{outline:2px solid var(--icon-blue);outline-offset:2px;border-radius:6px;}
.stc-faq details p{padding:0 16px 14px;font-size:0.875rem;line-height:1.6;color:var(--gray-text);}

/* ---------- Closing CTA band ----------
   The comp's boat at the left edge, feathered into the navy; the skyline is
   the faded right end of results-marina.jpg (the comp's sits behind its
   buttons and can't be recovered). Copy | two buttons. */
.stc-cta{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#001A36 0%,var(--navy) 55%,#0B3A66 100%);
}
.stc-cta-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 62%;
  opacity:.3;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 85%);
          mask-image:linear-gradient(90deg,transparent 30%,#000 85%);
}
.stc-cta-boat{
  position:absolute;top:0;bottom:0;left:0;
  width:clamp(200px,21vw,420px);
  -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 72%,transparent 100%);
}
.stc-cta-boat img{width:100%;height:100%;object-fit:cover;object-position:left center;}
.stc-cta-inner{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px clamp(24px,3vw,56px);
  flex-wrap:wrap;
  min-height:clamp(120px,8.8vw,170px);
  padding-block:clamp(20px,1.8vw,32px);
  /* Clear the boat even though this frame is centred: % padding resolves
     against the full-width section. */
  padding-left:max(clamp(18px,2.6vw,44px), clamp(200px,21vw,420px) + 8px - max(0px, (100% - 1760px) / 2));
}
.stc-cta h2{color:#fff;font-size:clamp(1.375rem,1.9vw,2.125rem);letter-spacing:-.6px;line-height:1.15;margin-bottom:6px;}
.stc-cta p{font-size:clamp(0.875rem,.95vw,1.0313rem);color:rgba(255,255,255,.9);}
.stc-cta-actions{display:flex;gap:clamp(10px,1.4vw,24px);flex-wrap:wrap;}
.stc-cta-actions .btn{padding:clamp(13px,1.05vw,18px) clamp(24px,2.2vw,40px);}
.stc-cta-actions .btn-outline-light{background:rgba(0,22,46,.55);}

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

@media (max-width:1500px){
  /* Process: a narrower photo buys the four step cards their width. */
  .stc-process{grid-template-columns:clamp(260px,25%,600px) minmax(0,1fr);}
}

@media (max-width:1240px){
  .stc-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stc-step:nth-child(3)::before{display:none;}
  /* Why: copy | checklist on top, the FAQ full width below. */
  .stc-why-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:24px;}
  .stc-faq{
    grid-column:1 / -1;
    border-left:0;border-top:1px solid #DCE7F1;
    padding:22px clamp(0px,1.4vw,28px) 0;
  }
}

@media (max-width:1100px){
  /* Intro stacks so the cutaway keeps room for its callout descriptions. */
  .stc-intro-inner{grid-template-columns:minmax(0,1fr);row-gap:22px;}
  .stc-layers{width:100%;max-width:820px;justify-self:center;}
  /* Guide: the boat diagram takes a full-width row; causes | types below. */
  .stc-guide-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .stc-locations{grid-column:1 / -1;grid-row:1;}
  .stc-boat{max-width:640px;margin-inline:auto;}
  .stc-locations h2{max-width:640px;margin-inline:auto;}
}

@media (max-width:1024px){
  .stc-hero-img{width:100%;object-position:72% center;-webkit-mask-image:none;mask-image:none;}
  .stc-hero-scrim{
    background:linear-gradient(90deg, rgba(0,22,46,.9) 0%, rgba(0,22,46,.74) 60%, rgba(0,22,46,.45) 100%);
  }
  .stc-trust{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:clamp(24px,6vw,64px);}
  .stc-process{grid-template-columns:minmax(0,1fr);padding-right:0;}
  .stc-process-photo{clip-path:none;background:none;aspect-ratio:2.4/1;}
  .stc-process-photo img{clip-path:none;object-position:30% 30%;}
  .stc-process-body{padding-inline:var(--pad);}
  .stc-cta-boat{width:34%;opacity:.5;}
  .stc-cta-inner{padding-left:clamp(18px,2.6vw,44px);}
}

@media (max-width:820px){
  .stc-guide-inner{grid-template-columns:minmax(0,1fr);}
  .stc-why-inner{grid-template-columns:minmax(0,1fr);}
  .stc-why-copy{padding-inline:0;}
  .stc-checks{border-left:0;padding-inline:0;}
  .stc-ba-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:640px){
  .stc-hero{--stc-indent:0px;}
  .stc-hero-inner{padding-top:34px;padding-bottom:28px;}
  .stc-hero-eyebrow{font-size:0.6875rem;letter-spacing:1.6px;gap:10px;}
  .stc-hero-eyebrow i{width:24px;}
  .stc-hero h1{font-size:clamp(1.75rem,8vw,2.25rem);letter-spacing:-.7px;}
  .stc-hero h1 br{display:none;}
  .stc-hero-sub{font-size:0.9063rem;margin-bottom:22px;}
  .stc-hero-scrim{
    background:linear-gradient(180deg, rgba(0,22,46,.9) 0%, rgba(0,22,46,.82) 55%, rgba(0,22,46,.72) 100%);
  }
  .stc-hero-actions,.stc-cta-actions{width:100%;gap:10px;}
  .stc-hero-actions .btn,.stc-cta-actions .btn{flex:1 1 100%;justify-content:center;}
  .stc-trust{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;}
  .stc-intro h2 br,.stc-why h2 br,.stc-panel h2 br{display:none;}
  .stc-intro-copy{padding-left:0;}
  .stc-intro-copy .btn{width:100%;justify-content:center;}
  .stc-panel{padding-inline:16px;}
  /* Boat: too narrow for labels beside the photo. The pins take numbers and
     the labels become a numbered list under it. */
  .stc-boat{margin-bottom:0;}
  .stc-boat .stc-leaders{display:none;}
  .stc-boat .stc-pin{width:22px;height:22px;margin:-11px 0 0 -11px;}
  .stc-boat .stc-pin b{display:block;font:800 11px/1 var(--font-head);color:#fff;}
  .stc-spots{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 14px;
    margin-top:16px;
  }
  .stc-spot{position:static;width:auto;transform:none;grid-template-columns:22px minmax(0,1fr);}
  .stc-spot-dot{
    width:22px;height:22px;margin-top:-2px;
    display:flex;align-items:center;justify-content:center;
    font:800 11px/1 var(--font-head);color:#fff;
  }
  .stc-spot strong{white-space:normal;}
  .stc-steps{grid-template-columns:minmax(0,1fr);}
  .stc-step + .stc-step::before{display:none;}
  .stc-results-head{padding-inline:0;}
  .stc-results-head .btn{width:100%;justify-content:center;margin-top:0;}
  .stc-ba-grid{grid-template-columns:minmax(0,1fr);padding-inline:0;max-width:520px;}
  .stc-faq{padding-inline:0;}
  .stc-cta-boat{width:60%;opacity:.3;}
}

@media (max-width:400px){
  .stc-trust{grid-template-columns:minmax(0,1fr);}
  .stc-spots{grid-template-columns:minmax(0,1fr);}
}