/* ==========================================================================
   Boat Hull Repairs — page-specific styles.
   Loads after styles.css and reuses its tokens, buttons, eyebrows, header,
   footer and .fg-card grid. Everything here is prefixed .hr- so no other page
   is touched. (.sfr-ba slider rules are repeated below because structural.css
   belongs to the structural page; script.js binds to the .sfr-ba class.)

   Sizing: the comp is 1024px wide and represents a 1536px desktop. --u is one
   comp pixel, so "calc(17 * var(--u))" reads as "17px in the mockup". It
   scales with the viewport between 1025 and ~1840px, then holds. Body copy
   uses max(floor, …) so it never drops below a readable size.
   ========================================================================== */

:root{
  --u:clamp(1px, calc(100vw / 1024), 1.8px);
  /* The comp's saturated link/heading blue on light backgrounds. It is deeper
     than --icon-blue and only exists on this page. */
  --hr-blue:#0B6CD4;
  --hr-blue-deep:#0A3F8C;
  --hr-line:#DCE7F2;
}

.hr-wrap{
  width:100%;
  max-width:calc(1024 * var(--u));
  margin-inline:auto;
  padding-inline:calc(35 * var(--u));
}
.hr-blue{color:var(--hr-blue);}
.hr-blue-deep{color:var(--hr-blue-deep);}

/* Small blue section label used on the light bands. */
.hr-eyebrow{
  font-size:max(0.6563rem, calc(6.4 * var(--u)));
  letter-spacing:.24em;
  gap:calc(6 * var(--u));
  margin-bottom:calc(5 * var(--u));
  color:var(--hr-blue);
}
.hr-eyebrow i{width:calc(17 * var(--u));background:var(--hr-blue);}
.hr-eyebrow-bare{letter-spacing:.2em;}

/* ---------- Hero ---------- */
.hr-hero{
  position:relative;
  overflow:hidden;
  background:var(--navy-2);
  min-height:calc(205 * var(--u));
  display:flex;
}
.hr-hero-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:60% center;
}
.hr-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,28,59,.94) 0%,
      rgba(0,28,59,.86) 22%,
      rgba(0,28,59,.5) 38%,
      rgba(0,28,59,.08) 52%,
      rgba(0,28,59,0) 62%),
    linear-gradient(180deg, rgba(0,22,46,.3) 0%, rgba(0,22,46,0) 40%);
}
.hr-hero-inner{
  position:relative;z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  padding:calc(18 * var(--u)) calc(56 * var(--u)) calc(14 * var(--u)) calc(108 * var(--u));
}
.hr-hero-content{max-width:calc(300 * var(--u));min-width:0;}
.hr-hero-eyebrow{
  margin-left:calc(-20 * var(--u));
  font-size:max(0.6563rem, calc(6.6 * var(--u)));
  letter-spacing:.14em;
  gap:calc(6 * var(--u));
  margin-bottom:calc(7 * var(--u));
}
.hr-hero-eyebrow i{width:calc(15 * var(--u));flex:none;}
.hr-hero-eyebrow i:last-child{width:calc(50 * var(--u));}
.hr-hero h1{
  color:#fff;
  font-size:max(1.875rem, calc(26.5 * var(--u)));
  line-height:.95;
  letter-spacing:-.035em;
  margin-bottom:calc(10 * var(--u));
}
.hr-hero-sub{
  color:rgba(255,255,255,.92);
  font-size:max(0.875rem, calc(8.6 * var(--u)));
  line-height:1.3;
  max-width:calc(265 * var(--u));
  margin-bottom:calc(10 * var(--u));
}
.hr-hero-actions{display:flex;flex-wrap:wrap;gap:calc(8 * var(--u));}
.hr-hero-actions .btn,
.hr-cta-actions .btn{
  font-size:max(0.8125rem, calc(7.6 * var(--u)));
  padding:calc(7 * var(--u)) calc(15 * var(--u));
  min-height:max(40px, calc(24 * var(--u)));
  gap:calc(6 * var(--u));
}
.hr-hero-loc{
  display:flex;align-items:center;gap:calc(6 * var(--u));
  margin-top:calc(10 * var(--u));
  color:#fff;
  font-size:max(0.7813rem, calc(7.4 * var(--u)));
  font-weight:500;
}
.hr-hero-loc svg{width:max(13px, calc(8 * var(--u)));height:auto;flex:none;}
.hr-hero-script{
  color:var(--navy);
  font-size:max(1.5rem, calc(19 * var(--u)));
  line-height:1.08;
  text-align:center;
  white-space:nowrap;
  margin-top:calc(26 * var(--u));
  transform:rotate(-10deg);
  text-shadow:0 1px 10px rgba(255,255,255,.55);
}
.hr-hero-script::after{
  width:66%;
  margin-left:auto;
  height:calc(4 * var(--u));
  margin-top:calc(-1 * var(--u));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 10C60 8 130 4 198 2' fill='none' stroke='%2300264B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Trust strip ---------- */
.hr-trust{background:linear-gradient(90deg,#00223F 0%,#01274B 50%,#00223F 100%);border-top:1px solid rgba(94,205,250,.18);}
.hr-trust-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-height:calc(39 * var(--u));
  align-items:center;
}
.hr-trust-list li{
  display:flex;align-items:center;justify-content:center;
  gap:calc(12 * var(--u));
  padding:calc(6 * var(--u)) calc(10 * var(--u));
  color:#fff;
}
.hr-trust-list li + li{border-left:1px solid rgba(255,255,255,.2);}
.hr-trust-list svg{
  width:max(24px, calc(18 * var(--u)));height:auto;flex:none;
  color:var(--accent);
}
.hr-trust-list strong{
  display:block;
  font-family:var(--font-head);
  font-weight:700;
  font-size:max(0.8438rem, calc(9 * var(--u)));
  letter-spacing:-.01em;
  line-height:1.2;
}
.hr-trust-list small{
  display:block;
  font-size:max(0.75rem, calc(7 * var(--u)));
  color:rgba(255,255,255,.72);
  margin-top:calc(1.5 * var(--u));
}

/* ---------- Common hull problems ----------
   The boat is a photo cropped from the comp; the three callout cards are
   real HTML laid exactly over the cards baked into that crop, positioned in
   percentages of the figure so they stay registered at any desktop width. */
.hr-problems{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) calc(684 * var(--u));
  align-items:center;
  min-height:calc(165 * var(--u));
  background:linear-gradient(180deg,#F3F8FD 0%,#F8FAFE 55%,#FFFFFF 100%);
  overflow:hidden;
}
.hr-problems-copy{
  padding:calc(16 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u)) calc(75 * var(--u));
  max-width:calc(350 * var(--u));
  position:relative;z-index:2;
}
.hr-problems-copy .hr-eyebrow{margin-left:calc(-20 * var(--u));}
.hr-problems-copy h2{
  font-size:max(1.625rem, calc(20.5 * var(--u)));
  line-height:.98;
  letter-spacing:-.035em;
  margin-bottom:calc(6 * var(--u));
}
.hr-problems-copy p{
  font-size:max(0.875rem, calc(8.6 * var(--u)));
  line-height:1.3;
  color:var(--gray-text);
  margin-bottom:calc(9 * var(--u));
}
.hr-problems-copy .btn{
  font-size:max(0.8125rem, calc(7.4 * var(--u)));
  padding:calc(7 * var(--u)) calc(15 * var(--u));
  min-height:max(40px, calc(24 * var(--u)));
  gap:calc(6 * var(--u));
}
.hr-problems-figure{
  position:relative;
  align-self:stretch;
  container-type:inline-size;
}
.hr-problems-boat{
  position:absolute;left:0;top:calc(1 * var(--u));
  width:100%;height:auto;
  /* Fades the crop's left edge into the band. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 7%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 7%);
}
.hr-problem-cards{position:absolute;inset:0;}
.hr-problem{
  position:absolute;
  top:2.05cqw;
  min-height:13.9cqw;
  background:#fff;
  border-radius:.9cqw;
  padding:.58cqw .58cqw 1cqw;
  box-shadow:0 1.4cqw 3cqw -1.6cqw rgba(0,38,75,.45), 0 0 0 1px rgba(0,38,75,.05);
}
.hr-problem-1{left:5.75%;width:21.8%;}
.hr-problem-2{left:35.85%;width:23.6%;}
.hr-problem-3{left:69.5%;width:23.6%;}
.hr-problem img{
  width:100%;
  height:7.05cqw;
  object-fit:cover;
  border-radius:.5cqw;
  margin-bottom:1.3cqw;
}
.hr-problem h3{
  font-size:max(0.6875rem, 1.12cqw);
  letter-spacing:-.01em;
  margin:0 .9cqw .35cqw;
}
.hr-problem p{
  font-size:max(0.6563rem, 1.02cqw);
  line-height:1.4;
  color:var(--gray-text);
  margin:0 .9cqw;
}
.hr-pin{
  position:absolute;
  width:1.25cqw;aspect-ratio:1;
  margin:-.62cqw 0 0 -.62cqw;
  border-radius:50%;
  background:var(--hr-blue);
  box-shadow:0 0 0 .3cqw #fff, 0 0 0 .55cqw rgba(11,108,212,.35);
}
.hr-pin::before{
  content:"";
  position:absolute;left:50%;bottom:100%;
  width:1px;height:3.6cqw;
  background:rgba(255,255,255,.9);
  transform-origin:bottom center;
}
.hr-pin-1{left:20.9%;top:80%;}
.hr-pin-2{left:44%;top:82.7%;}
.hr-pin-2::before{height:4.1cqw;}
.hr-pin-3{left:63.7%;top:81.6%;}
.hr-pin-3::before{height:7.6cqw;transform:rotate(45deg);}

/* ---------- Services grid (reuses .fg-grid / .fg-card) ---------- */
.hr-services{background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFE 100%);overflow:hidden;}
.hr-row-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:end;
  column-gap:calc(30 * var(--u));
  padding-top:calc(13 * var(--u));
  padding-bottom:calc(8 * var(--u));
  padding-left:calc(43 * var(--u));
}
.hr-row-head .hr-eyebrow{margin-left:calc(2 * var(--u));}
.hr-row-head h2{
  font-size:max(1.5rem, calc(17.5 * var(--u)));
  letter-spacing:-.03em;
  line-height:1.05;
}
.hr-row-lead{
  justify-self:end;
  font-size:max(0.7813rem, calc(6.7 * var(--u)));
  color:var(--gray-text);
  padding-bottom:calc(3 * var(--u));
}
.hr-text-link{
  display:inline-flex;align-items:center;gap:calc(4 * var(--u));
  font-family:var(--font-head);
  font-weight:700;
  font-size:max(0.8125rem, calc(7.2 * var(--u)));
  color:var(--hr-blue);
  padding-bottom:calc(3 * var(--u));
  white-space:nowrap;
}
.hr-grid{
  max-width:calc(1024 * var(--u));
  padding-inline:calc(39 * var(--u)) calc(38 * var(--u));
  gap:calc(10.5 * var(--u));
  padding-bottom:calc(8 * var(--u));
}
.hr-grid .fg-card{border-radius:calc(5 * var(--u));box-shadow:0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-9 * var(--u)) rgba(0,38,75,.35), 0 0 0 1px rgba(0,38,75,.04);}
.hr-grid .fg-card-media img{aspect-ratio:435/216;}
.hr-grid .fg-card-body{padding:calc(10 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u));}
.hr-grid .fg-card-body h3{
  font-size:max(0.875rem, calc(8.6 * var(--u)));
  letter-spacing:-.02em;
  margin-bottom:calc(5 * var(--u));
}
.hr-grid .fg-card-body p{
  font-size:max(0.8125rem, calc(7.4 * var(--u)));
  line-height:1.4;
  margin-bottom:calc(8 * var(--u));
}
.hr-grid .fg-card-link{
  font-size:max(0.7813rem, calc(7.1 * var(--u)));
  gap:calc(4 * var(--u));
  color:var(--hr-blue);
}

/* ---------- Our approach ---------- */
.hr-approach{
  position:relative;
  display:grid;
  grid-template-columns:calc(442 * var(--u)) minmax(0,1fr);
  background:linear-gradient(90deg,#03284D 0%,#012449 45%,#021C40 100%);
  min-height:calc(193 * var(--u));
  margin-top:calc(3 * var(--u));
}
.hr-approach-photo{
  position:relative;
  /* The comp's curved trailing edge. */
  clip-path:polygon(0 0,100% 0,98.5% 12%,96% 30%,94% 48%,93.4% 66%,93.6% 84%,94.3% 100%,0 100%);
}
.hr-approach-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:left center;
}
.hr-approach-body{
  position:relative;z-index:2;
  padding:calc(14 * var(--u)) calc(28 * var(--u)) calc(8 * var(--u)) calc(60 * var(--u));
  display:flex;flex-direction:column;justify-content:center;
}
.hr-eyebrow-sm{
  font-size:max(0.6563rem, calc(6.6 * var(--u)));
  letter-spacing:.2em;
  gap:calc(8 * var(--u));
  margin-bottom:calc(6 * var(--u));
  margin-left:calc(-24 * var(--u));
}
.hr-eyebrow-sm i{width:calc(16 * var(--u));}
.hr-eyebrow-sm i:last-child{width:calc(32 * var(--u));}
.hr-approach-body h2{
  color:#fff;
  font-size:max(1.5rem, calc(17.6 * var(--u)));
  line-height:1.06;
  letter-spacing:-.03em;
  margin-bottom:calc(9 * var(--u));
}
.hr-approach-body > p{
  color:rgba(255,255,255,.86);
  font-size:max(0.8125rem, calc(7.3 * var(--u)));
  line-height:1.45;
  max-width:calc(365 * var(--u));
  margin-bottom:calc(14 * var(--u));
}
.hr-approach-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(6 * var(--u));
  margin-left:calc(-80 * var(--u));
}
.hr-approach-steps li{
  display:grid;
  grid-template-columns:calc(20 * var(--u)) minmax(0,1fr);
  column-gap:calc(8 * var(--u));
  align-content:start;
  padding:calc(11 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  border-radius:calc(6 * var(--u));
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.1);
}
.hr-approach-num{
  grid-row:1 / span 2;
  width:max(26px, calc(17 * var(--u)));aspect-ratio:1;
  border-radius:50%;
  background:var(--hr-blue);
  color:#fff;
  font-family:var(--font-head);
  font-weight:800;
  font-size:max(0.75rem, calc(8 * var(--u)));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 calc(2.5 * var(--u)) rgba(11,108,212,.28);
}
.hr-approach-steps h3{
  color:#fff;
  font-size:max(0.8125rem, calc(7.4 * var(--u)));
  line-height:1.25;
  letter-spacing:-.01em;
  margin:calc(2 * var(--u)) 0 calc(6 * var(--u));
}
.hr-approach-steps p{
  color:rgba(255,255,255,.74);
  font-size:max(0.75rem, calc(6.6 * var(--u)));
  line-height:1.42;
}

/* ---------- Step by step ---------- */
.hr-process{background:#F9FCFE;padding:calc(8 * var(--u)) 0 calc(5 * var(--u));}
.hr-process .hr-wrap{padding-left:calc(36 * var(--u));}
.hr-process-head .hr-eyebrow{
  margin-left:calc(26 * var(--u));
  margin-bottom:calc(2 * var(--u));
  font-size:max(0.625rem, calc(6 * var(--u)));
}
.hr-process-head h2{
  display:flex;align-items:center;gap:calc(8 * var(--u));
  font-size:max(1.3125rem, calc(14.2 * var(--u)));
  letter-spacing:-.03em;
  color:var(--hr-blue-deep);
  margin-bottom:calc(6 * var(--u));
}
.hr-process-head h2 i{
  display:block;flex:none;
  width:calc(17 * var(--u));height:2px;border-radius:2px;
  background:var(--hr-blue-deep);
}
.hr-steps,
.hr-approach-steps{list-style:none;}
.hr-steps{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:calc(14.5 * var(--u));
  row-gap:calc(16 * var(--u));
}
.hr-step-media{
  position:relative;
  container-type:inline-size;
  margin-bottom:calc(5 * var(--u));
}
.hr-step-media img{
  width:100%;
  aspect-ratio:432/201;
  object-fit:cover;
  border-radius:calc(4 * var(--u));
  box-shadow:0 calc(4 * var(--u)) calc(10 * var(--u)) calc(-6 * var(--u)) rgba(0,38,75,.4);
}
/* Registered over the badge baked into each crop, so it must stay in % of
   the image and the image must keep the crop's exact aspect ratio. */
.hr-step-num{
  position:absolute;
  left:7.9%;top:13.6%;
  width:10.4cqw;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#0B478C;
  border:.9cqw solid #fff;
  box-sizing:content-box;
  color:#fff;
  font-family:var(--font-head);
  font-weight:800;
  font-size:6.2cqw;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1cqw 2cqw rgba(0,0,0,.25);
}
.hr-step h3,
.hr-step p{
  border-left:1px solid var(--hr-line);
  padding-left:calc(8 * var(--u));
}
.hr-step h3{
  font-size:max(0.8125rem, calc(7.6 * var(--u)));
  letter-spacing:-.01em;
  padding-top:calc(2 * var(--u));
}
.hr-step p{
  font-size:max(0.75rem, calc(7 * var(--u)));
  line-height:1.3;
  color:var(--gray-text);
  padding-bottom:calc(2 * var(--u));
}

/* ---------- Real results ---------- */
.hr-results{
  background:linear-gradient(180deg,#FAFCFE 0%,#F4F8FD 100%);
  padding:calc(7 * var(--u)) 0 calc(6 * var(--u));
}
.hr-results-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:calc(6 * var(--u));
}
.hr-results-head .hr-eyebrow{margin-bottom:calc(2 * var(--u));}
.hr-results-head h2{
  font-size:max(1.375rem, calc(16 * var(--u)));
  letter-spacing:-.03em;
}
.hr-results-head .btn{
  font-size:max(0.7813rem, calc(6.8 * var(--u)));
  padding:calc(5 * var(--u)) calc(13 * var(--u));
  min-height:max(38px, calc(20 * var(--u)));
  gap:calc(6 * var(--u));
}
.hr-ba-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(10 * var(--u));
  margin-bottom:calc(10 * var(--u));
}
.sfr-ba{
  position:relative;
  aspect-ratio:312/80;
  border-radius:calc(5 * var(--u));
  overflow:hidden;
  box-shadow:0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-10 * var(--u)) rgba(0,38,75,.55);
  cursor:ew-resize;
  touch-action:none;
  user-select:none;
}
.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,.35);
  pointer-events:none;
}
.sfr-ba-handle{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:max(30px, calc(19 * var(--u)));aspect-ratio:1;
  border-radius:50%;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  pointer-events:none;
}
.sfr-ba-handle svg{display:block;width:45%;height:auto;}
.sfr-ba-tag{
  position:absolute;bottom:calc(5 * var(--u));
  font-family:var(--font-head);
  font-weight:800;
  font-size:max(0.625rem, calc(5.8 * var(--u)));
  letter-spacing:.08em;
  line-height:1;
  padding:calc(3.6 * var(--u)) calc(9 * var(--u));
  border-radius:calc(3.5 * var(--u));
  pointer-events:none;
}
.sfr-ba-tag-before{left:calc(11 * var(--u));background:#00112C;color:#fff;border:1px solid rgba(255,255,255,.25);}
.sfr-ba-tag-after{right:calc(12 * var(--u));background:#0066CA;color:#fff;padding-inline:calc(14 * var(--u));}

.hr-case{
  display:grid;
  grid-template-columns:calc(334 * var(--u)) minmax(0,1fr) calc(205 * var(--u));
  column-gap:calc(19 * var(--u));
  align-items:center;
}
.hr-case-photo{
  width:100%;
  aspect-ratio:999/261;
  object-fit:cover;
  border-radius:calc(4 * var(--u));
  box-shadow:0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-10 * var(--u)) rgba(0,38,75,.55);
}
.hr-case-copy{padding-right:calc(38 * var(--u));}
.hr-case-copy .hr-eyebrow{margin-bottom:calc(4 * var(--u));}
.hr-case-copy h3{
  font-size:max(1.1875rem, calc(14.6 * var(--u)));
  letter-spacing:-.03em;
  margin-bottom:calc(4 * var(--u));
}
.hr-case-copy p{
  font-size:max(0.8438rem, calc(8.5 * var(--u)));
  line-height:1.5;
  color:var(--gray-text);
}
.hr-case-note{
  display:flex;gap:calc(10 * var(--u));
  background:#fff;
  border-radius:calc(6 * var(--u));
  padding:calc(12 * var(--u)) calc(12 * var(--u)) calc(13 * var(--u));
  box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) calc(-12 * var(--u)) rgba(0,38,75,.3), 0 0 0 1px rgba(0,38,75,.04);
}
.hr-case-icon{
  flex:none;
  align-self:flex-start;
  width:max(38px, calc(24 * var(--u)));aspect-ratio:1;
  border-radius:50%;
  background:#016ECB;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.hr-case-icon svg{width:52%;height:auto;}
.hr-case-note h3{
  font-size:max(0.8125rem, calc(8 * var(--u)));
  line-height:1.2;
  color:var(--hr-blue-deep);
  margin-bottom:calc(6 * var(--u));
}
.hr-case-note p{
  font-size:max(0.75rem, calc(7 * var(--u)));
  line-height:1.45;
  color:var(--gray-text);
}

/* ---------- Inspect / areas / FAQ ---------- */
.hr-info{background:#fff;padding:calc(8 * var(--u)) 0 calc(8 * var(--u));}
.hr-info-inner{
  display:grid;
  grid-template-columns:332fr 350fr 236fr;
  column-gap:calc(10 * var(--u));
}
.hr-info-col + .hr-info-col{
  border-left:1px solid var(--hr-line);
  padding-left:calc(10 * var(--u));
}
.hr-info .hr-eyebrow{margin-bottom:calc(6 * var(--u));font-size:max(0.625rem, calc(6 * var(--u)));}
.hr-inspect-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(7 * var(--u));
  margin-bottom:calc(7 * var(--u));
}
.hr-inspect-grid li{
  background:#F2F7FC;
  border-radius:calc(4 * var(--u));
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,38,75,.05);
}
.hr-inspect-grid img{
  width:100%;
  aspect-ratio:213/138;
  object-fit:cover;
}
.hr-inspect-grid span{
  display:block;
  padding:calc(5 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  font-size:max(0.7188rem, calc(6.3 * var(--u)));
  line-height:1.55;
  font-weight:500;
  color:var(--navy);
}
.hr-photo-tip{
  display:flex;align-items:center;gap:calc(10 * var(--u));
  background:#F2F7FC;
  border-radius:calc(5 * var(--u));
  padding:calc(6 * var(--u)) calc(7 * var(--u)) calc(6 * var(--u)) calc(9 * var(--u));
  font-size:max(0.75rem, calc(6.5 * var(--u)));
  line-height:1.45;
  color:var(--navy);
}
.hr-photo-tip > span:nth-child(2){flex:1;}
.hr-photo-tip-icon{
  flex:none;
  width:max(28px, calc(18 * var(--u)));aspect-ratio:1;
  border-radius:calc(4 * var(--u));
  background:var(--hr-blue);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.hr-photo-tip-icon svg{width:66%;height:auto;}
.hr-photo-tip-go{
  flex:none;
  width:max(32px, calc(18 * var(--u)));aspect-ratio:1;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease;
}
.hr-photo-tip:hover .hr-photo-tip-go{transform:translateX(2px);}
.hr-photo-tip-go svg{width:50%;height:auto;}

.hr-areas{
  display:grid;
  grid-template-columns:minmax(0,1fr) calc(116 * var(--u));
  column-gap:calc(6 * var(--u));
  padding-left:calc(18 * var(--u)) !important;
}
.hr-areas-copy h2{
  font-size:max(1.125rem, calc(12.6 * var(--u)));
  letter-spacing:-.025em;
  margin-bottom:calc(3 * var(--u));
}
.hr-areas-copy > p{
  font-size:max(0.7813rem, calc(7 * var(--u)));
  line-height:1.4;
  color:var(--gray-text);
  margin-bottom:calc(6 * var(--u));
}
.hr-area-pins{
  display:grid;
  grid-template-columns:repeat(2,auto);
  justify-content:start;
  column-gap:calc(26 * var(--u));
  row-gap:calc(2 * var(--u));
}
.hr-area-pins li{
  position:relative;
  padding-left:calc(12 * var(--u));
  font-size:max(0.7813rem, calc(7.1 * var(--u)));
  line-height:1.5;
  color:var(--gray-text);
  white-space:nowrap;
}
.hr-area-pins li::before{
  content:"";
  position:absolute;left:0;top:50%;
  width:calc(6 * var(--u));min-width:9px;
  aspect-ratio:3/4;
  transform:translateY(-55%);
  background:var(--hr-blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'%3E%3Cpath fill-rule='evenodd' d='M9 24s9-9.4 9-15A9 9 0 0 0 0 9c0 5.6 9 15 9 15zm0-11.6a3.3 3.3 0 1 0 0-6.6 3.3 3.3 0 0 0 0 6.6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'%3E%3Cpath fill-rule='evenodd' d='M9 24s9-9.4 9-15A9 9 0 0 0 0 9c0 5.6 9 15 9 15zm0-11.6a3.3 3.3 0 1 0 0-6.6 3.3 3.3 0 0 0 0 6.6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hr-area-more{grid-column:2;}
.hr-areas-map{
  width:100%;height:auto;
  align-self:center;
  margin-top:calc(-6 * var(--u));
}

.hr-faq details{
  border:1px solid var(--hr-line);
  border-radius:calc(4 * var(--u));
  background:#fff;
  margin-bottom:calc(4 * var(--u));
  box-shadow:0 2px 6px -4px rgba(0,38,75,.25);
}
.hr-faq summary{
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;
  padding:calc(5 * var(--u)) calc(8 * var(--u));
  min-height:max(40px, calc(20 * var(--u)));
  font-size:max(0.7813rem, calc(6.6 * var(--u)));
  font-weight:500;
  line-height:1.3;
  color:var(--navy);
}
.hr-faq summary::-webkit-details-marker{display:none;}
.hr-faq summary::after{
  content:"";
  flex:none;
  width:max(11px, calc(7 * var(--u)));aspect-ratio:1;
  background:
    linear-gradient(var(--hr-blue),var(--hr-blue)) center/100% 2px no-repeat,
    linear-gradient(var(--hr-blue),var(--hr-blue)) center/2px 100% no-repeat;
  transition:transform .2s ease;
}
.hr-faq details[open] summary::after{transform:rotate(45deg);}
.hr-faq summary:focus-visible{outline:2px solid var(--hr-blue);outline-offset:2px;border-radius:4px;}
.hr-faq details p{
  padding:0 calc(8 * var(--u)) calc(7 * var(--u));
  font-size:max(0.7813rem, calc(6.6 * var(--u)));
  line-height:1.5;
  color:var(--gray-text);
}

/* ---------- CTA band ---------- */
.hr-cta{
  position:relative;
  overflow:hidden;
  background:var(--navy-2);
}
.hr-cta-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 62%;
}
.hr-cta-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,28,59,.78) 0%,rgba(0,28,59,.7) 50%,rgba(0,28,59,.78) 100%);
}
.hr-cta-inner{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  gap:calc(20 * var(--u)) calc(30 * var(--u));
  flex-wrap:wrap;
  min-height:calc(56 * var(--u));
  padding-block:calc(9 * var(--u));
  padding-inline:calc(153 * var(--u)) calc(144 * var(--u));
}
.hr-cta h2{
  color:#fff;
  font-size:max(1.3125rem, calc(14.8 * var(--u)));
  letter-spacing:-.025em;
  margin-bottom:calc(3 * var(--u));
}
.hr-cta p{
  color:rgba(255,255,255,.9);
  font-size:max(0.8125rem, calc(7.4 * var(--u)));
}
.hr-cta-actions{display:flex;flex-wrap:wrap;gap:calc(10 * var(--u));}
.hr-cta-actions .btn{min-height:max(42px, calc(25 * var(--u)));padding-inline:calc(17 * var(--u));}

/* ==========================================================================
   Responsive — same ladder as structural.css. Below 1025px --u is pinned, so
   the rules here set real sizes for tablet and phone.
   ========================================================================== */

@media (max-width:1400px){
  .hr-grid{gap:16px;}
}

@media (max-width:1240px){
  .hr-row-head{grid-template-columns:minmax(0,1fr) auto;row-gap:8px;}
  .hr-row-lead{grid-column:1 / -1;grid-row:2;justify-self:start;}
  .hr-steps{grid-template-columns:repeat(3,minmax(0,1fr));}
  .hr-case{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:18px;}
  .hr-case-copy{padding-right:0;}
  .hr-case-note{grid-column:1 / -1;}
  .hr-info-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:26px;}
  .hr-faq{grid-column:1 / -1;border-left:0 !important;padding-left:0 !important;}
  .hr-cta-inner{padding-inline:calc(60 * var(--u));}
}

@media (max-width:1100px){
  .hr-hero-inner{grid-template-columns:minmax(0,1fr);}
  .hr-hero-script{justify-self:start;margin-top:22px;transform:rotate(-6deg);transform-origin:left center;color:#fff;text-shadow:0 2px 14px rgba(0,22,46,.8);}
  .hr-hero-script::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 10C60 8 130 4 198 2' fill='none' stroke='%235ECDFA' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");}
}

@media (max-width:1024px){
  :root{--u:1.25px;}
  .hr-wrap{padding-inline:var(--pad);max-width:none;}

  .hr-hero-inner{padding:48px var(--pad) 44px;}
  .hr-hero-content{max-width:560px;}
  .hr-hero-eyebrow{margin-left:0;}
  .hr-hero-eyebrow i:first-child{display:none;}
  .hr-hero h1{font-size:clamp(1.875rem,5.4vw,2.875rem);}
  .hr-hero-sub{max-width:520px;}
  .hr-hero-scrim{
    background:linear-gradient(90deg,rgba(0,28,59,.92) 0%,rgba(0,28,59,.78) 55%,rgba(0,28,59,.45) 100%);
  }

  .hr-trust-list{grid-template-columns:repeat(2,minmax(0,1fr));padding-block:8px;}
  .hr-trust-list li{justify-content:flex-start;padding:12px 14px;}
  .hr-trust-list li + li{border-left:0;}
  .hr-trust-list li:nth-child(even){border-left:1px solid rgba(255,255,255,.2);}

  /* The composited boat only works at desktop proportions; below that the
     callouts become an ordinary card row. */
  .hr-problems{grid-template-columns:minmax(0,1fr);padding:40px 0 44px;}
  .hr-problems-copy{max-width:680px;padding:0 var(--pad) 24px;}
  .hr-problems-copy .hr-eyebrow{margin-left:0;}
  .hr-problems-boat,.hr-pin{display:none;}
  .hr-problems-figure{container-type:normal;padding-inline:var(--pad);}
  .hr-problem-cards{
    position:static;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
  }
  .hr-problem{
    position:static;
    width:auto;min-height:0;
    border-radius:12px;
    padding:8px 8px 16px;
    box-shadow:0 14px 30px -20px rgba(0,38,75,.45), 0 0 0 1px rgba(0,38,75,.05);
  }
  .hr-problem img{height:auto;border-radius:8px;margin-bottom:12px;aspect-ratio:2.4/1;}
  .hr-problem h3{font-size:0.9375rem;margin:0 8px 5px;}
  .hr-problem p{font-size:0.8438rem;margin:0 8px;}

  .hr-row-head{padding-left:var(--pad);padding-top:40px;padding-bottom:22px;}
  .hr-grid{padding-inline:var(--pad);}

  .hr-approach{grid-template-columns:minmax(0,1fr);}
  .hr-approach-photo{clip-path:none;aspect-ratio:884/300;}
  .hr-approach-photo img{object-position:center 40%;}
  .hr-approach-body{padding:32px var(--pad) 36px;}
  .hr-eyebrow-sm{margin-left:0;}
  .hr-eyebrow-sm i:first-child{display:none;}
  .hr-approach-body > p{max-width:none;}
  .hr-approach-steps{margin-left:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .hr-approach-steps li{padding:16px 14px;column-gap:12px;}

  .hr-process{padding:34px 0 30px;}
  .hr-process .hr-wrap{padding-left:var(--pad);}
  .hr-process-head .hr-eyebrow{margin-left:0;}
  .hr-process-head h2 i{display:none;}

  .hr-results{padding:34px 0 30px;}
  .hr-results-head{flex-wrap:wrap;margin-bottom:16px;}
  .hr-ba-grid{grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:22px;}
  .sfr-ba{aspect-ratio:3/1;border-radius:10px;}

  .hr-info{padding:34px 0;}
  .hr-cta-inner{padding:30px var(--pad);}
}

@media (max-width:820px){
  .hr-problem-cards{grid-template-columns:minmax(0,1fr);}
  .hr-problem{display:grid;grid-template-columns:40% minmax(0,1fr);column-gap:14px;align-items:center;padding:8px;}
  .hr-problem img{grid-row:1 / span 2;margin:0;aspect-ratio:3/2;}
  .hr-problem h3{margin:0 0 4px;align-self:end;}
  .hr-problem p{margin:0;align-self:start;}
  .hr-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hr-case{grid-template-columns:minmax(0,1fr);}
  .hr-info-inner{grid-template-columns:minmax(0,1fr);}
  .hr-areas{border-left:0 !important;padding-left:0 !important;}
  .hr-areas{grid-template-columns:minmax(0,1fr) 150px;}
}

@media (max-width:640px){
  .hr-hero-inner{padding:36px var(--pad) 34px;}
  .hr-hero h1{font-size:clamp(1.75rem,8vw,2.25rem);}
  .hr-hero-sub{font-size:0.9375rem;line-height:1.5;}
  .hr-hero-actions .btn{flex:1 1 100%;justify-content:center;}
  .hr-hero-eyebrow{font-size:0.6563rem;letter-spacing:.1em;}
  .hr-hero-eyebrow i:last-child{display:none;}
  .hr-hero-script{font-size:1.5rem;}
  .hr-hero-scrim{background:linear-gradient(180deg,rgba(0,28,59,.9) 0%,rgba(0,28,59,.8) 60%,rgba(0,28,59,.65) 100%);}

  .hr-trust-list{grid-template-columns:minmax(0,1fr);}
  .hr-trust-list li:nth-child(even){border-left:0;}
  .hr-trust-list li + li{border-top:1px solid rgba(255,255,255,.12);}

  .hr-problems{padding:32px 0 34px;}
  .hr-problems-copy h2{font-size:clamp(1.5625rem,7.4vw,1.875rem);}
  .hr-problems-copy .btn{white-space:normal;text-align:left;}

  .hr-row-head{grid-template-columns:minmax(0,1fr);padding-top:32px;}
  .hr-row-lead{grid-row:auto;}
  .hr-row-head h2{font-size:clamp(1.4375rem,6.6vw,1.75rem);}

  .hr-approach-steps{grid-template-columns:minmax(0,1fr);}
  .hr-approach-body h2{font-size:clamp(1.375rem,6.4vw,1.6875rem);}
  .hr-approach-body h2 br{display:none;}

  .hr-steps{grid-template-columns:minmax(0,1fr);row-gap:20px;}
  .hr-process-head h2{font-size:clamp(1.3125rem,6.2vw,1.5625rem);}

  .hr-results-head h2{font-size:clamp(1.3125rem,6.2vw,1.5625rem);}
  .sfr-ba{aspect-ratio:2.2/1;}

  .hr-inspect-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hr-areas{grid-template-columns:minmax(0,1fr);}
  .hr-areas-map{max-width:200px;margin-top:14px;}
  .hr-area-pins{column-gap:18px;}

  .hr-cta-actions{width:100%;}
  .hr-cta-actions .btn{flex:1 1 100%;justify-content:center;}
}

@media (max-width:400px){
  .hr-area-pins{grid-template-columns:auto;}
  .hr-area-more{grid-column:auto;}
  .hr-problem{grid-template-columns:minmax(0,1fr);}
  .hr-problem img{grid-row:auto;margin-bottom:10px;aspect-ratio:2.4/1;}
}