/* ==========================================================================
   Hull repair sub-pages — shared template styles.
   Used by the six pages linked from hull-repairs.html's card grid:
   hull-crack-repair, impact-collision-damage, soft-spots-delamination,
   keel-bottom-repair, hull-blister-osmosis-repair, structural-hull-rebuilds.
   They share one comp (the hull crack repair design), so they share one sheet.
   Loads after styles.css and reuses its tokens, buttons, eyebrows, card grid,
   header, footer and contact form. Everything here is prefixed .hs-.
   ========================================================================== */

/* The comp runs its bands at the card grid's width (.fg-grid), wider than
   .container. */
.hs-wide{
  max-width:1760px;
  margin-inline:auto;
  padding-inline:clamp(18px,2.6vw,44px);
}
.hs-eyebrow{
  color:var(--icon-blue);
  font-size:0.7188rem;
  letter-spacing:2.2px;
  margin-bottom:10px;
}
.hs-eyebrow i{background:var(--icon-blue);width:32px;}
h2.hs-eyebrow{font-weight:700;line-height:1.3;}
.hs-accent{color:var(--icon-blue);}

/* ---------- Hero ----------
   The photo covers the right of the band and feathers left into navy, so the
   copy always sits on a solid colour whatever the viewport. */
.hs-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#001A36 0%,var(--navy-2) 38%,#0B3A66 100%);
}
.hs-hero-img{
  position:absolute;top:0;right:0;
  width:62%;height:100%;
  object-fit:cover;
  object-position:var(--hero-pos,70% center);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
}
.hs-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,22,46,.7) 0%,rgba(0,22,46,.45) 38%,rgba(0,22,46,0) 55%),
    linear-gradient(0deg,rgba(0,22,46,.55) 0%,rgba(0,22,46,0) 30%);
}
.hs-hero-inner{
  position:relative;z-index:2;
  padding-top:clamp(34px,3.4vw,58px);
  padding-bottom:clamp(24px,2.2vw,36px);
}
.hs-hero-content{max-width:600px;}
.hs-hero .eyebrow{font-size:0.7188rem;letter-spacing:2.4px;color:var(--accent);margin-bottom:12px;gap:10px;}
.hs-hero .eyebrow b{font-weight:700;opacity:.8;}
.hs-hero h1{
  font-size:clamp(2rem,3.05vw,3.125rem);
  letter-spacing:-1.2px;
  line-height:1.06;
  color:#fff;
  margin-bottom:16px;
}
.hs-hero h1 .accent{color:var(--accent);}
.hs-hero-sub{
  color:rgba(255,255,255,.9);
  font-size:clamp(0.9375rem,1.02vw,1.0313rem);
  line-height:1.5;
  max-width:540px;
  margin-bottom:22px;
}
.hs-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hs-trust{
  display:flex;flex-wrap:wrap;
  gap:14px clamp(20px,2.4vw,40px);
  margin-top:clamp(22px,2vw,30px);
  max-width:760px;
}
.hs-trust li{display:flex;align-items:center;gap:10px;color:#fff;}
.hs-trust-icon{
  flex:none;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1.5px solid rgba(94,205,250,.7);
  color:var(--accent);
}
.hs-trust strong{display:block;font-family:var(--font-head);font-size:0.8125rem;font-weight:700;line-height:1.25;}
.hs-trust small{display:block;font-size:0.7813rem;color:var(--accent);line-height:1.3;}

/* ---------- Intro: copy | annotated diagram ---------- */
.hs-intro{
  background:linear-gradient(180deg,#fff 0%,var(--light-bg) 100%);
  overflow:hidden;
}
.hs-intro-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  align-items:center;
  gap:clamp(24px,3vw,56px);
  padding-block:clamp(28px,2.6vw,40px) clamp(20px,2vw,30px);
}
.hs-intro-copy{padding-left:clamp(0px,2.4vw,42px);}
.hs-intro h2{
  max-width:640px;
  font-size:clamp(1.625rem,2.1vw,2.125rem);
  letter-spacing:-.8px;
  line-height:1.14;
  margin-bottom:16px;
}
.hs-intro p{font-size:clamp(0.9375rem,1vw,1rem);line-height:1.62;color:var(--gray-text);max-width:640px;}
.hs-diagram{position:relative;}
.hs-diagram > img{
  width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 10%);
}
/* Pages without a baked diagram lay HTML annotations over a plain photo:
   numbered dots on the damage (--x/--y in % of the photo) and matching cards
   pinned to the photo's corners, so labels never land on each other. */
.hs-diagram-photo > img{border-radius:14px;-webkit-mask-image:none;mask-image:none;aspect-ratio:2.1/1;object-fit:cover;box-shadow:0 20px 40px -26px rgba(0,38,75,.55);}
.hs-dot{
  position:absolute;
  left:var(--x);top:var(--y);
  width:24px;height:24px;
  margin:-12px 0 0 -12px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:#1E86F0;
  box-shadow:0 0 0 4px rgba(255,255,255,.85),0 0 0 8px rgba(30,134,240,.3);
  font-family:var(--font-head);font-weight:800;font-size:0.75rem;color:#fff;
}
.hs-callout{
  position:absolute;
  width:clamp(150px,34%,210px);
  padding:9px 12px;
  border-radius:9px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 24px -12px rgba(0,38,75,.55);
  font-size:0.7188rem;line-height:1.35;color:var(--gray-text);
}
.hs-callout strong{display:flex;align-items:center;gap:7px;font-family:var(--font-head);font-size:0.7813rem;color:var(--navy);margin-bottom:2px;}
.hs-callout strong span{
  flex:none;width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#1E86F0;color:#fff;font-size:0.625rem;
}
.hs-pos-tl{left:12px;top:12px;}
.hs-pos-tr{right:12px;top:12px;}
.hs-pos-bl{left:12px;bottom:12px;}
.hs-pos-br{right:12px;bottom:12px;}

/* ---------- Services (card grid) ---------- */
.hs-services{background:var(--light-bg);padding-top:clamp(18px,1.8vw,26px);}
.hs-services-head{margin-bottom:14px;}
.hs-grid .fg-card-body{padding:18px 16px 18px;}
.hs-grid .fg-card-body h3{font-size:1.0313rem;margin-bottom:8px;}
.hs-grid .fg-card-body p{font-size:0.875rem;margin-bottom:14px;}
.hs-grid .fg-card-link{font-size:0.8438rem;}

/* ---------- Process band ---------- */
.hs-process{
  position:relative;
  display:grid;
  grid-template-columns:minmax(240px,27%) minmax(0,1fr);
  background:linear-gradient(100deg,var(--navy) 0%,#062F5A 55%,var(--navy-2) 100%);
  color:#fff;
}
.hs-process-photo{
  position:relative;
  clip-path:polygon(0 0,100% 0,calc(100% - 70px) 100%,0 100%);
}
.hs-process-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--worker-pos,30% center);}
.hs-process-body{padding:clamp(32px,2.8vw,46px) clamp(20px,3vw,56px) clamp(32px,2.8vw,46px) clamp(12px,2vw,36px);}
.hs-process h2{
  color:#fff;
  font-size:clamp(1.75rem,2.35vw,2.375rem);
  letter-spacing:-.8px;
  margin-bottom:clamp(22px,2vw,32px);
}
.hs-process h2 .accent{color:var(--accent);}
.hs-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,34px);
  list-style:none;
}
.hs-step{position:relative;padding-left:clamp(0px,1.2vw,22px);}
.hs-step + .hs-step::before{
  /* The arrow between steps sits in the gap, on the title line. */
  content:"";
  position:absolute;
  left:calc(-1 * clamp(16px,2vw,34px) / 2 - 9px);
  top:62px;
  width:18px;height:18px;
  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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.9;
}
.hs-step-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.hs-step-num{
  flex:none;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:#1E86F0;
  box-shadow:0 0 0 4px rgba(30,134,240,.22);
  font-family:var(--font-head);font-weight:800;font-size:1rem;color:#fff;
}
.hs-step-icon{color:var(--accent);display:flex;}
.hs-step h3{color:#fff;font-size:0.9688rem;letter-spacing:-.2px;margin-bottom:8px;}
.hs-step p{font-size:0.8438rem;line-height:1.55;color:var(--accent);}

/* ---------- Problems (why it matters) ---------- */
.hs-problems{background:linear-gradient(180deg,#F1F7FD 0%,#F7FBFE 100%);}
.hs-problems-inner{
  display:grid;
  grid-template-columns:minmax(300px,31%) minmax(0,1fr);
  gap:clamp(24px,3vw,56px);
  align-items:center;
  padding-block:clamp(26px,2.4vw,38px);
}
.hs-problems h2{font-size:clamp(1.75rem,2.35vw,2.375rem);letter-spacing:-1px;line-height:1.08;margin-bottom:12px;}
.hs-problems-copy p{font-size:0.9375rem;line-height:1.55;color:var(--gray-text);}
.hs-problem-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.hs-problem-list li{padding-inline:clamp(12px,1.5vw,26px);border-left:1px solid #DCE7F1;}
.hs-problem-list li:first-child{border-left:none;}
.hs-problem-icon{display:block;color:#1E86F0;margin-bottom:14px;}
.hs-problem-list strong{display:block;font-family:var(--font-head);font-size:0.9375rem;margin-bottom:6px;}
.hs-problem-list small{display:block;font-size:0.8438rem;line-height:1.5;color:var(--gray-text);}

/* ---------- Results (static before → after pairs) ---------- */
.hs-results{background:#fff;padding-block:clamp(22px,2.2vw,34px) clamp(26px,2.4vw,40px);}
.hs-results-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 30px;flex-wrap:wrap;margin-bottom:18px;}
.hs-results-head p{font-size:0.9375rem;color:var(--gray-text);}
.hs-pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,26px);}
.hs-pair-media{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:3px;
  border-radius:10px;overflow:hidden;
  box-shadow:0 14px 30px -20px rgba(0,38,75,.55);
}
.hs-pair-media img{width:100%;aspect-ratio:1.7/1;object-fit:cover;}
.hs-pair-media::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:28px;height:28px;margin:-14px 0 0 -14px;
  border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E86F0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/16px;
  box-shadow:0 4px 12px -4px rgba(0,38,75,.5);
}
.hs-tag{
  position:absolute;bottom:10px;
  padding:6px 16px;border-radius:5px;
  font-family:var(--font-head);font-weight:800;font-size:0.7188rem;letter-spacing:1.2px;color:#fff;
}
.hs-tag-before{left:10px;background:var(--navy);}
.hs-tag-after{right:10px;background:#1E86F0;}
.hs-pair h3{font-size:1rem;margin:14px 0 4px 10px;}
.hs-pair p{font-size:0.8438rem;color:var(--gray-text);margin-left:10px;}

/* ---------- Details: what's involved | cosmetic vs structural ---------- */
.hs-details{background:linear-gradient(180deg,#F7FBFE 0%,#fff 100%);}
.hs-details-inner{
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1fr);
  padding-block:clamp(28px,2.6vw,42px);
}
.hs-involve{padding-right:clamp(20px,2.6vw,46px);border-right:1px solid #DCE7F1;}
.hs-compare-col{padding-left:clamp(20px,2.6vw,46px);}
.hs-details h2{font-size:clamp(1.375rem,1.72vw,1.75rem);letter-spacing:-.6px;margin-bottom:14px;}
.hs-compare-col h2{font-size:clamp(1.25rem,1.5vw,1.5625rem);}
.hs-involve > p{font-size:0.9063rem;line-height:1.62;color:var(--gray-text);}
.hs-involve > p::after{content:"";display:block;width:140px;height:1px;background:#1E86F0;opacity:.5;margin-top:16px;}
.hs-checks{margin-top:16px;display:grid;gap:12px;}
.hs-checks li{display:flex;align-items:center;gap:14px;font-size:0.9375rem;color:#2A4560;}
.hs-checks li::before{
  content:"";flex:none;
  width:22px;height:22px;border-radius:50%;
  background:#1E86F0 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;
}
.hs-compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.2vw,18px);}
.hs-compare-card{border-radius:12px;padding:16px 18px 18px;}
.hs-compare-card h3{font-size:1.125rem;margin-bottom:10px;}
.hs-compare-card li{position:relative;padding-left:26px;font-size:0.875rem;line-height:1.45;color:#2A4560;margin-bottom:6px;}
.hs-compare-card li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;background:no-repeat center/contain;}
.hs-compare-a{background:linear-gradient(180deg,#E6F1FC 0%,#F2F8FE 100%);}
.hs-compare-a h3{color:#1E86F0;}
.hs-compare-a li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E86F0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-11'/%3E%3C/svg%3E");}
.hs-compare-b{background:linear-gradient(180deg,#FDE9EC 0%,#FEF4F5 100%);}
.hs-compare-b h3{color:#E0303F;}
.hs-compare-b li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0303F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-11'/%3E%3C/svg%3E");}
.hs-note{
  display:flex;align-items:center;gap:14px;
  margin-top:clamp(12px,1.2vw,18px);
  padding:12px 16px;border-radius:10px;
  background:#EAF4FD;
  font-size:0.8125rem;line-height:1.45;color:var(--gray-text);
}
.hs-note strong{display:block;color:var(--navy);font-weight:600;}
.hs-note-icon{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;font-family:var(--font-head);font-weight:800;font-size:0.8125rem;
}

/* ---------- Why choose ---------- */
.hs-why{background:#fff;}
.hs-why-inner{
  display:grid;
  grid-template-columns:minmax(300px,31%) minmax(0,1fr);
  gap:clamp(20px,3vw,50px);
  align-items:center;
  padding-block:clamp(22px,2.2vw,34px) clamp(26px,2.4vw,38px);
}
.hs-why h2{font-size:clamp(1.5rem,1.95vw,2rem);letter-spacing:-.7px;}
.hs-why-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;text-align:center;}
.hs-why-list li{display:flex;flex-direction:column;align-items:center;}
.hs-why-icon{color:#1E86F0;margin-bottom:12px;}
.hs-why-list strong{font-family:var(--font-head);font-size:0.9063rem;margin-bottom:4px;}
.hs-why-list small{font-size:0.8125rem;color:var(--gray-text);}

/* ---------- Service area band ---------- */
.hs-areas{position:relative;overflow:hidden;background:var(--navy);color:#fff;}
.hs-areas-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:.5;}
.hs-areas::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,38,75,.94) 0%,rgba(0,38,75,.82) 55%,rgba(0,38,75,.45) 100%);
}
.hs-areas-map{position:absolute;right:clamp(10px,4vw,90px);top:50%;z-index:1;width:clamp(160px,15vw,250px);height:auto;transform:translateY(-50%);opacity:.22;}
.hs-areas-inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,.75fr);
  align-items:center;
  gap:clamp(20px,3vw,56px);
  padding-block:clamp(26px,2.4vw,38px);
}
.hs-areas .eyebrow{color:var(--accent);font-size:0.7188rem;letter-spacing:2.2px;margin-bottom:10px;}
.hs-areas h2{color:#fff;font-size:clamp(1.375rem,1.72vw,1.75rem);letter-spacing:-.5px;margin-bottom:10px;}
.hs-areas p{font-size:0.875rem;line-height:1.6;color:rgba(255,255,255,.88);max-width:560px;}
.hs-pins{display:grid;grid-template-columns:repeat(2,auto);gap:12px clamp(24px,3vw,56px);}
.hs-pins li{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:600;font-size:0.875rem;}
.hs-pins svg{flex:none;color:#fff;}
.hs-areas .hs-areas-script{
  justify-self:start;
  max-width:none;
  color:#fff;
  padding-left:clamp(20px,3vw,50px);
  border-left:1px solid rgba(255,255,255,.35);
  font-family:var(--font-script);font-weight:700;
  font-size:clamp(1.875rem,2.3vw,2.5rem);line-height:1;
  transform:rotate(-8deg);
  white-space:nowrap;
}

/* ---------- FAQ ---------- */
.hs-faq{background:linear-gradient(180deg,#fff 0%,var(--light-bg) 100%);}
.hs-faq-inner{
  display:grid;
  grid-template-columns:minmax(220px,22%) minmax(0,1fr);
  gap:clamp(20px,3vw,50px);
  padding-block:clamp(26px,2.4vw,40px);
}
.hs-faq h2{font-size:clamp(1.625rem,1.95vw,2rem);letter-spacing:-.7px;line-height:1.1;}
.hs-faq-list{display:grid;grid-template-columns:1fr 1fr;gap:12px clamp(20px,2.6vw,48px);align-items:start;}
.hs-faq details{
  background:#fff;border-radius:8px;
  box-shadow:0 6px 20px -14px rgba(0,38,75,.45);
}
.hs-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 18px;
  font-family:var(--font-head);font-weight:700;font-size:0.875rem;
  cursor:pointer;list-style:none;
}
.hs-faq summary::-webkit-details-marker{display:none;}
.hs-faq summary::after{
  content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(#1E86F0,#1E86F0) center/14px 2px no-repeat,linear-gradient(#1E86F0,#1E86F0) center/2px 14px no-repeat;
  transition:transform .2s ease;
}
.hs-faq details[open] summary::after{transform:rotate(45deg);}
.hs-faq summary:focus-visible{outline:2px solid var(--icon-blue);outline-offset:2px;border-radius:8px;}
.hs-faq details p{padding:0 18px 16px;font-size:0.875rem;line-height:1.6;color:var(--gray-text);}

/* ---------- Closing CTA band ---------- */
.hs-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(100deg,#0B3A66 0%,var(--navy) 45%,var(--navy-2) 100%);
  color:#fff;
}
.hs-cta-boat{
  position:absolute;left:0;top:0;height:100%;width:24%;
  object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 70%,transparent 100%);
}
.hs-cta-inner{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;
  padding-block:clamp(24px,2.2vw,34px);
  padding-left:max(var(--pad),24%);
}
.hs-cta h2{color:#fff;font-size:clamp(1.5rem,1.95vw,2rem);letter-spacing:-.6px;margin-bottom:6px;}
.hs-cta p{font-size:0.9688rem;color:rgba(255,255,255,.88);}
.hs-cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ==========================================================================
   Responsive — widest first (see BUILDING-SERVICE-PAGES.md §7).
   ========================================================================== */
@media (max-width:1400px){
  .hs-areas-inner{grid-template-columns:minmax(0,1fr) auto;}
  .hs-areas .hs-areas-script{display:none;}
  .hs-problem-list li{padding-inline:14px;}
}
@media (max-width:1240px){
  .hs-intro-inner{grid-template-columns:minmax(0,1fr);}
  .hs-intro-copy{padding-left:0;}
  .hs-diagram{max-width:760px;}
  .hs-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;}
  .hs-step:nth-child(3)::before{display:none;}
  .hs-problems-inner,.hs-why-inner{grid-template-columns:minmax(0,1fr);}
  .hs-details-inner{grid-template-columns:minmax(0,1fr);row-gap:30px;}
  .hs-involve{padding-right:0;border-right:none;}
  .hs-compare-col{padding-left:0;}
  .hs-faq-inner{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:1100px){
  .hs-pairs{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:1024px){
  .hs-hero-img{width:100%;-webkit-mask-image:none;mask-image:none;}
  .hs-hero-scrim{background:linear-gradient(90deg,rgba(0,22,46,.9) 0%,rgba(0,22,46,.72) 60%,rgba(0,22,46,.45) 100%);}
  .hs-process{grid-template-columns:minmax(0,1fr);}
  .hs-process-photo{clip-path:none;aspect-ratio:2.4/1;}
  .hs-process-body{padding-inline:var(--pad);}
  .hs-problem-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px;}
  .hs-problem-list li:nth-child(3){border-left:none;}
  .hs-why-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px;}
  .hs-areas-inner{grid-template-columns:minmax(0,1fr);}
  .hs-areas-map{display:none;}
  .hs-cta-boat{display:none;}
  .hs-cta-inner{padding-left:var(--pad);}
}
@media (max-width:820px){
  .hs-compare{grid-template-columns:minmax(0,1fr);}
  .hs-faq-list{grid-template-columns:minmax(0,1fr);}
  /* Too narrow to pin cards on the photo: list them under it instead. */
  .hs-callouts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
  .hs-callout{position:static;width:auto;}
}
@media (max-width:640px){
  .hs-hero-actions .btn,.hs-cta-actions .btn{width:100%;justify-content:center;}
  .hs-hero-actions,.hs-cta-actions{width:100%;}
  .hs-trust{display:grid;grid-template-columns:1fr 1fr;}
  .hs-steps{grid-template-columns:minmax(0,1fr);}
  .hs-step + .hs-step::before{display:none;}
  .hs-step{padding-left:0;}
  .hs-problem-list{grid-template-columns:minmax(0,1fr);}
  .hs-problem-list li{border-left:none;padding-inline:0;}
  .hs-pairs{grid-template-columns:minmax(0,1fr);}
  .hs-why-list{gap:20px 12px;}
  .hs-pins{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;}
  .hs-results-head .btn{width:100%;justify-content:center;}
}
@media (max-width:400px){
  .hs-trust{grid-template-columns:minmax(0,1fr);}
  .hs-pins{grid-template-columns:minmax(0,1fr);}
  .hs-callouts{grid-template-columns:minmax(0,1fr);}
}


/* ---------- Hydrolysis + resin choice (hull-blister-osmosis-repair only; merged from the legacy site) ----------
   Light band between the problems band and the white results band: copy and
   the legacy blistered-bottom photo on the left, three resin cards on the
   right, a barrier-coat note across the bottom. Only that page uses these
   classes; the other five hull sub-pages are untouched. */
.hs-resins{
  background:var(--light-bg);
  border-top:1px solid #DCE7F1;
  border-bottom:1px solid #DCE7F1;
}
.hs-resins-inner{
  display:grid;
  grid-template-columns:minmax(300px,42%) minmax(0,1fr);
  column-gap:clamp(24px,3vw,56px);
  row-gap:clamp(18px,1.8vw,26px);
  align-items:center;
  padding-block:clamp(30px,3vw,48px);
}
.hs-resins-copy{padding-left:clamp(0px,2.4vw,42px);}
.hs-resins-copy h2{
  font-size:clamp(1.5rem,2vw,1.9375rem);
  letter-spacing:-.7px;
  line-height:1.12;
  margin-bottom:12px;
}
.hs-resins-copy p{font-size:0.9375rem;line-height:1.6;color:var(--gray-text);margin-bottom:12px;}
.hs-resins-photo{
  margin:16px 0 0;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  border:1px solid #DCE7F1;
}
.hs-resins-photo img{width:100%;aspect-ratio:450/309;object-fit:cover;}
.hs-resins-photo figcaption{padding:10px 14px;font-size:0.8125rem;line-height:1.45;color:var(--gray-text);}
.hs-resins-list{
  list-style:none;margin:0;padding:0;
  display:grid;
  gap:12px;
}
.hs-resin{
  background:#fff;
  border:1px solid #DCE7F1;
  border-left:4px solid #1E86F0;
  border-radius:12px;
  padding:16px 18px 18px;
}
.hs-resin-tag{
  display:inline-block;
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.6875rem;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#1E86F0;
  margin-bottom:6px;
}
.hs-resin h3{font-size:1.0625rem;letter-spacing:-.3px;margin-bottom:6px;}
.hs-resin p{font-size:0.875rem;line-height:1.55;color:var(--gray-text);}
.hs-resins-after{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;
  border-radius:10px;
  background:#EAF4FD;
  font-size:0.8438rem;
  line-height:1.45;
  color:var(--gray-text);
}
.hs-resins-after strong{display:block;color:var(--navy);font-weight:600;}

@media (max-width:1240px){
  .hs-resins-inner{grid-template-columns:minmax(0,1fr);}
  .hs-resins-copy{padding-left:0;}
  .hs-resins-photo{max-width:560px;}
}
@media (max-width:640px){
  .hs-resins-inner{padding-block:30px;}
  .hs-resins-copy h2{font-size:1.5rem;}
  .hs-resins-copy h2 br{display:none;}
}