/* ==========================================================================
   Hull Step Repair — page-specific styles.
   Loads after styles.css and reuses its tokens, buttons, eyebrows, card grid,
   header, footer and contact form. Everything here is prefixed .hsr- so no
   other page is touched. Layout follows BUILDING-SERVICE-PAGES.md; type is
   in rem (16px base), layout units in px.
   ========================================================================== */

/* ---------- Hero (full-bleed photo) ---------- */
.hsr-hero{
  position:relative;
  overflow:hidden;
  background:var(--navy-2);
}
.hsr-hero-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--hero-pos,60% center);
}
.hsr-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,22,46,.94) 0%,
      rgba(0,22,46,.86) 26%,
      rgba(0,22,46,.5) 50%,
      rgba(0,22,46,.12) 70%,
      rgba(0,22,46,0) 84%),
    linear-gradient(180deg, rgba(0,22,46,.38) 0%, rgba(0,22,46,0) 45%);
}
.hsr-hero-inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:clamp(24px,3vw,56px);
  padding-top:clamp(52px,6vw,96px);
  padding-bottom:clamp(52px,6vw,96px);
}
.hsr-hero-content{max-width:660px;}
.hsr-hero-eyebrow{margin-bottom:16px;}
.hsr-hero h1{
  font-size:clamp(2rem,4.1vw,3.25rem);
  letter-spacing:-1.2px;
  color:#fff;
  margin-bottom:20px;
}
.hsr-hero-sub{
  color:rgba(255,255,255,.88);
  font-size:1.0625rem;
  line-height:1.62;
  max-width:560px;
  margin-bottom:32px;
}
.hsr-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hsr-hero-script{
  color:#fff;
  font-size:clamp(1.625rem,2.4vw,2.375rem);
  line-height:1.12;
  text-align:center;
  transform:rotate(-7deg) translateY(-26%);
  white-space:nowrap;
  text-shadow:0 2px 16px rgba(0,22,46,.8), 0 1px 4px rgba(0,22,46,.65);
}
.hsr-hero-script::after{
  width:86%;
  margin-left:auto;
  height:8px;
  margin-top:-2px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 8c20-10 40 8 60 0s40-8 60 0 40 8 60 0' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Section head (centered{
  text-align:center;
  max-width:860px;
  margin-inline:auto;
  padding-top:clamp(44px,4.6vw,68px);
  padding-bottom:clamp(24px,2.6vw,36px);
}

/* ---------- Split band: copy | panel (white) ---------- */
.hsr-split{background:#fff;overflow:hidden;}

.hsr-split-inner{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center;
  column-gap:clamp(28px,4vw,72px);
  row-gap:28px;
  padding-block:clamp(44px,4.6vw,72px);
}
.hsr-split-inner.hsr-split-even{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}

.hsr-split-copy .eyebrow{margin-bottom:14px;color:var(--icon-blue);}
.hsr-split-copy .eyebrow i{background:var(--icon-blue);}
.hsr-split-copy h2{
  font-size:clamp(1.625rem,2.5vw,2.25rem);
  letter-spacing:-.9px;
  line-height:1.12;
  margin-bottom:14px;
}
.hsr-split-copy h2 .accent{color:var(--icon-blue);}
.hsr-split-copy p{
  font-size:1rem;
  line-height:1.65;
  color:var(--gray-text);
  max-width:560px;
  margin-bottom:14px;
}
.hsr-split-copy p:last-child{margin-bottom:0;}
.hsr-split-copy .btn{margin-top:10px;}

/* Check list (inside split copy or panels) */
.hsr-checks{display:grid;gap:11px;margin-top:6px;}
.hsr-checks li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:0.9375rem;line-height:1.5;color:#2A4560;
}
.hsr-checks li::before{
  content:"";flex:none;
  margin-top:2px;
  width:20px;height:20px;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/12px;
}

/* ---------- Panels (comparison cards) ---------- */
.hsr-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);}

.hsr-panel{
  position:relative;
  display:flex;flex-direction:column;
  border-radius:16px;
  padding:clamp(20px,2vw,28px);
  background:linear-gradient(180deg,#F4F9FE 0%,#EAF3FB 100%);
  border:1px solid #DCE9F5;
  box-shadow:0 16px 34px -24px rgba(0,38,75,.35);
}
.hsr-panel-dark{
  background:linear-gradient(160deg,var(--navy) 0%,#0B3A66 100%);
  border-color:rgba(255,255,255,.1);
  color:#fff;
}
.hsr-panel-icon{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:var(--icon-bg);
  color:var(--navy);
  margin-bottom:14px;
}
.hsr-panel-dark .hsr-panel-icon{background:rgba(255,255,255,.1);color:var(--accent);}
.hsr-panel h2,.hsr-panel h3{font-size:1.1875rem;letter-spacing:-.4px;margin-bottom:8px;}
.hsr-panel-dark h2,.hsr-panel-dark h3{color:#fff;}
.hsr-panel > p{font-size:0.9063rem;line-height:1.6;color:var(--gray-text);margin-bottom:12px;}
.hsr-panel-dark > p{color:rgba(255,255,255,.78);}
.hsr-panel .hsr-checks li{font-size:0.875rem;}
.hsr-panel-dark .hsr-checks li{color:rgba(255,255,255,.9);}
.hsr-panel-dark .hsr-checks li::before{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001C3B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");}
.hsr-panel-foot{
  margin-top:auto;
  padding-top:14px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.8438rem;
  color:var(--icon-blue);
}
.hsr-panel-dark .hsr-panel-foot{color:var(--accent);}
.hsr-panel-tag{
  position:absolute;top:16px;right:16px;
  padding:5px 10px;border-radius:999px;
  background:var(--navy);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:0.6875rem;letter-spacing:1px;text-transform:uppercase;
}
.hsr-panel-dark .hsr-panel-tag{background:var(--accent-btn);color:var(--navy-2);}

/* ---------- Process band (dark) ---------- */
.hsr-process{
  position:relative;
  background:linear-gradient(100deg,var(--navy-2) 0%,var(--navy) 62%,#003463 100%);
  display:grid;
  grid-template-columns:minmax(260px,27%) minmax(0,1fr);
  align-items:stretch;
}
.hsr-process-photo{
  position:relative;
  min-height:100%;
  clip-path:polygon(0 0, calc(100% - 38px) 0, 100% 50%, calc(100% - 38px) 100%, 0 100%);
}
.hsr-process-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--worker-pos,30% center);
}
.hsr-process-body{
  display:grid;
  grid-template-columns:minmax(260px,31%) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(24px,2.8vw,48px);
  padding:clamp(34px,3.8vw,56px) clamp(20px,3.4vw,60px) clamp(34px,3.8vw,56px) clamp(18px,2.2vw,34px);
}
.hsr-process-copy .eyebrow{margin-bottom:14px;}
.hsr-process-copy h2{
  color:#fff;
  font-size:clamp(1.5rem,2.2vw,1.9375rem);
  letter-spacing:-.8px;
  margin-bottom:14px;
}
.hsr-process-copy p{
  color:rgba(255,255,255,.72);
  font-size:0.9375rem;
  line-height:1.62;
  max-width:420px;
}
.hsr-steps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.2vw,20px);
  margin-top:16px;
}
.hsr-steps-wide{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:30px;}
.hsr-step{
  position:relative;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.17);
  border-radius:13px;
  padding:34px 16px 20px;
}
.hsr-step-num{
  position:absolute;top:-15px;left:16px;
  width:30px;height:30px;
  border-radius:50%;
  background:var(--accent-btn);
  color:var(--navy-2);
  font-family:var(--font-head);
  font-weight:800;
  font-size:0.875rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.55);
}
.hsr-step-icon{
  position:absolute;top:-14px;left:58px;
  width:30px;height:30px;
  border-radius:9px;
  background:rgba(2,26,52,.75);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.hsr-step h3{
  color:#fff;
  font-size:0.9688rem;
  letter-spacing:-.2px;
  margin-bottom:7px;
}
.hsr-step p{
  color:rgba(255,255,255,.68);
  font-size:0.8438rem;
  line-height:1.5;
}

/* ---------- Case study (photos + story) ---------- */
.hsr-case{background:#fff;overflow:hidden;}
.hsr-case-inner{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  column-gap:clamp(28px,4vw,72px);
  row-gap:28px;
  padding-block:clamp(44px,4.6vw,72px);
}
.hsr-case-copy .eyebrow{margin-bottom:14px;color:var(--icon-blue);}
.hsr-case-copy .eyebrow i{background:var(--icon-blue);}
.hsr-case-copy h2{
  font-size:clamp(1.625rem,2.5vw,2.25rem);
  letter-spacing:-.9px;
  line-height:1.12;
  margin-bottom:14px;
}
.hsr-case-copy p{font-size:1rem;line-height:1.65;color:var(--gray-text);margin-bottom:14px;}
.hsr-case-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:20px;
}
.hsr-case-facts li{
  background:var(--light-bg);
  border-radius:12px;
  padding:12px 14px;
}
.hsr-case-facts strong{display:block;font-family:var(--font-head);font-size:0.6875rem;letter-spacing:1px;text-transform:uppercase;color:var(--icon-blue);margin-bottom:4px;}
.hsr-case-facts span{display:block;font-size:0.875rem;line-height:1.4;color:var(--navy);font-weight:600;}
.hsr-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.hsr-pair-1{grid-template-columns:minmax(0,1fr);}
.hsr-pair figure{
  position:relative;
  margin:0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 44px -28px rgba(0,38,75,.6);
  background:var(--navy);
}
.hsr-pair img{
  width:100%;
  aspect-ratio:var(--photo-ratio,4/3);
  object-fit:cover;
  object-position:var(--photo-pos,center);
}
.hsr-pair figcaption{
  position:absolute;left:10px;bottom:10px;
  padding:5px 11px;
  border-radius:5px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.6563rem;
  letter-spacing:1.3px;
  background:rgba(0,22,46,.86);
  color:#fff;
}
.hsr-pair figure:last-child figcaption{background:var(--accent-btn);color:var(--navy-2);}
.hsr-pair-note{
  grid-column:1 / -1;
  font-size:0.8125rem;
  line-height:1.5;
  color:var(--gray-text);
}

/* ---------- Note / callout strip ---------- */
.hsr-callout{background:var(--light-bg);}
.hsr-callout-inner{padding-block:clamp(26px,2.6vw,40px);}
.hsr-callout-box{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px clamp(18px,2vw,32px);
  background:#fff;
  border:1px solid #DCE9F5;
  border-left:5px solid var(--icon-blue);
  border-radius:14px;
  padding:clamp(18px,1.8vw,26px) clamp(18px,2vw,30px);
  box-shadow:0 16px 34px -24px rgba(0,38,75,.4);
}
.hsr-callout-icon{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--icon-bg);
  color:var(--navy);
}
.hsr-callout-box h2{font-size:1.1875rem;letter-spacing:-.4px;margin-bottom:6px;}
.hsr-callout-box p{font-size:0.9063rem;line-height:1.55;color:var(--gray-text);}
.hsr-callout-box .btn{white-space:normal;text-align:center;justify-content:center;}

/* ---------- Related pages row ---------- */
.hsr-related{background:#fff;}
.hsr-related-inner{padding-block:clamp(36px,3.8vw,60px);}
.hsr-related-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 30px;flex-wrap:wrap;margin-bottom:20px;}
.hsr-related-head .eyebrow{margin-bottom:10px;color:var(--icon-blue);}
.hsr-related-head .eyebrow i{background:var(--icon-blue);}
.hsr-related-head h2{font-size:clamp(1.375rem,2vw,1.75rem);letter-spacing:-.6px;}
.hsr-related-head p{font-size:0.9375rem;color:var(--gray-text);max-width:520px;}
.hsr-related-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px);
}
.hsr-related-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.hsr-related-card{
  display:flex;flex-direction:column;
  min-height:44px;
  padding:clamp(18px,1.8vw,24px);
  border-radius:14px;
  background:var(--light-bg);
  border:1px solid #DCE9F5;
  transition:transform .18s ease, box-shadow .18s ease;
}
.hsr-related-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(0,38,75,.45);}
.hsr-related-card h3{font-size:1rem;letter-spacing:-.3px;margin-bottom:6px;}
.hsr-related-card p{font-size:0.8438rem;line-height:1.5;color:var(--gray-text);margin-bottom:14px;}
.hsr-related-card span{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-weight:700;font-size:0.8438rem;color:var(--icon-blue);
}

/* ---------- Service area band ---------- */
.hsr-areas{
  position:relative;
  overflow:hidden;
  background:var(--navy-2);
}
.hsr-areas-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 72%;
}
.hsr-areas-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(0,22,46,.96) 0%,
    rgba(0,22,46,.9) 42%,
    rgba(0,28,59,.8) 72%,
    rgba(0,28,59,.72) 100%);
}
.hsr-areas-inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto minmax(340px,1fr);
  align-items:center;
  column-gap:clamp(20px,2vw,32px);
  padding-block:clamp(38px,4vw,60px);
}
.hsr-areas-copy .eyebrow{margin-bottom:14px;}
.hsr-areas-copy h2{
  color:#fff;
  font-size:clamp(1.5625rem,2.6vw,2.25rem);
  letter-spacing:-.8px;
  margin-bottom:12px;
}
.hsr-areas-copy p{
  color:rgba(255,255,255,.72);
  font-size:0.9063rem;
  line-height:1.6;
  max-width:400px;
}
.hsr-pins{
  display:grid;
  grid-template-columns:repeat(2,auto);
  column-gap:clamp(20px,2.4vw,44px);
  row-gap:11px;
}
.hsr-pins li{
  display:flex;align-items:center;gap:9px;
  color:rgba(255,255,255,.9);
  font-size:0.875rem;
  white-space:nowrap;
}
.hsr-pins svg{flex:none;color:var(--accent);}
.hsr-areas-script{
  position:relative;
  text-align:center;
  color:#fff;
  font-size:clamp(1.25rem,1.7vw,1.6875rem);
  line-height:1.15;
  transform:rotate(-6deg);
  white-space:nowrap;
  padding-right:14px;
}
.hsr-areas-script::after{
  width:80%;
  margin-left:auto;
  height:7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 8c20-10 40 8 60 0s40-8 60 0 40 8 60 0' fill='none' stroke='%235ECDFA' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.hsr-cta-card{
  background:#fff;
  border-radius:14px;
  padding:clamp(16px,1.5vw,22px) clamp(16px,1.5vw,24px);
  box-shadow:0 26px 50px -26px rgba(0,0,0,.6);
}
.hsr-cta-card h3{
  font-size:clamp(1.125rem,1.5vw,1.4375rem);
  letter-spacing:-.5px;
  margin-bottom:7px;
}
.hsr-cta-card p{
  font-size:0.875rem;
  line-height:1.5;
  color:var(--gray-text);
  margin-bottom:16px;
}
.hsr-cta-actions{display:flex;gap:10px;flex-wrap:wrap;}
.hsr-cta-actions .btn{
  flex:1 1 auto;
  justify-content:center;
  font-size:0.8438rem;
  padding:11px 15px;
  gap:8px;
}

/* ==========================================================================
   Responsive — widest first (BUILDING-SERVICE-PAGES.md §7)
   ========================================================================== */

@media (max-width:1400px){
  .hsr-areas-inner{
    grid-template-columns:minmax(0,1fr) auto minmax(320px,.95fr);
    row-gap:26px;
  }
  .hsr-areas-script{grid-column:2;justify-self:center;}
}

@media (max-width:1240px){
  .hsr-process{grid-template-columns:minmax(220px,32%) minmax(0,1fr);}
  .hsr-process-body{grid-template-columns:minmax(0,1fr);row-gap:24px;}
  .hsr-process-copy p{max-width:none;}
  .hsr-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;}
  .hsr-steps-wide{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hsr-case-inner{grid-template-columns:minmax(0,1fr);}
  .hsr-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hsr-related-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}

}

@media (max-width:1100px){
  .hsr-hero-inner{grid-template-columns:minmax(0,1fr);row-gap:26px;}
  .hsr-hero-script{justify-self:start;transform:rotate(-6deg);transform-origin:left center;}
}

@media (max-width:1024px){

  .hsr-split-inner,.hsr-split-inner.hsr-split-even{grid-template-columns:minmax(0,1fr);}

  .hsr-split-copy p{max-width:none;}

  .hsr-process{grid-template-columns:minmax(0,1fr);}
  .hsr-process-photo{
    clip-path:none;
    aspect-ratio:816/260;
  }
  .hsr-process-photo img{object-position:center;}

  .hsr-areas-inner{grid-template-columns:minmax(0,1fr);row-gap:26px;justify-items:start;}
  .hsr-areas-script{grid-column:auto;justify-self:start;transform-origin:left center;}
  .hsr-cta-card{width:100%;max-width:520px;}
  .hsr-callout-box{grid-template-columns:auto minmax(0,1fr);}
  .hsr-callout-box .btn{grid-column:1 / -1;justify-self:start;}
}

@media (max-width:820px){
  .hsr-hero-sub{font-size:1rem;}

  .hsr-panels{grid-template-columns:minmax(0,1fr);}
  .hsr-related-grid,.hsr-related-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}

  .hsr-case-facts{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:640px){
  .hsr-hero-inner{
    padding-top:40px;
    padding-bottom:40px;
  }
  .hsr-hero h1{font-size:clamp(1.6875rem,7.4vw,2.125rem);letter-spacing:-.7px;margin-bottom:14px;}
  .hsr-hero-sub{font-size:0.9375rem;line-height:1.55;margin-bottom:22px;}
  .hsr-hero-actions{gap:10px;}
  .hsr-hero-actions .btn{flex:1 1 100%;justify-content:center;}
  .hsr-hero-script{font-size:1.4375rem;}

  .hsr-hero-scrim{
    background:linear-gradient(180deg, rgba(0,22,46,.9) 0%, rgba(0,22,46,.78) 55%, rgba(0,22,46,.6) 100%);
  }

  .hsr-split-inner,.hsr-case-inner{padding-block:32px;row-gap:22px;}
  .hsr-split-copy h2,.hsr-case-copy h2{font-size:clamp(1.375rem,6vw,1.75rem);letter-spacing:-.6px;}
  .hsr-split-copy p,.hsr-case-copy p{font-size:0.9375rem;}
  .hsr-panel{padding:18px 16px;}
  .hsr-panel-tag{position:static;align-self:flex-start;margin-bottom:10px;}
  .hsr-pair{grid-template-columns:minmax(0,1fr);}

  .hsr-process-photo{aspect-ratio:816/230;}
  .hsr-process-body{padding:28px var(--pad) 30px;}
  .hsr-process-copy h2{font-size:1.4375rem;}
  .hsr-process-copy p{font-size:0.875rem;}
  .hsr-steps,.hsr-steps-wide{grid-template-columns:minmax(0,1fr);row-gap:26px;margin-top:10px;}
  .hsr-step{padding:30px 15px 17px;}

  .hsr-callout-inner{padding-block:24px;}
  .hsr-callout-box{grid-template-columns:minmax(0,1fr);padding:18px 16px;}
  .hsr-callout-box .btn{justify-self:stretch;}

  .hsr-related-inner{padding-block:30px;}
  .hsr-related-grid,.hsr-related-grid-3{grid-template-columns:minmax(0,1fr);}

  .hsr-areas-inner{padding-block:30px;row-gap:20px;}
  .hsr-areas-copy h2{font-size:1.4375rem;}
  .hsr-areas-copy p{font-size:0.875rem;}
  .hsr-pins{column-gap:16px;row-gap:9px;}
  .hsr-pins li{font-size:0.8438rem;}
  .hsr-areas-script{font-size:1.25rem;}
  .hsr-cta-card{max-width:none;}
  .hsr-cta-actions .btn{flex:1 1 100%;justify-content:center;}
}

@media (max-width:400px){
  .hsr-pins{grid-template-columns:auto;}

}