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

/* Shared wide frame: the comp runs these bands at the card grid's width
   (.fg-grid), wider than .container. */
.cr-wide{
  --wide-pad:clamp(18px,2.6vw,44px);
  max-width:1760px;
  margin-inline:auto;
  padding-inline:var(--wide-pad);
}
.cr-eyebrow{
  color:var(--icon-blue);
  font-size:0.7188rem;
  letter-spacing:1.8px;
  margin-bottom:10px;
}
.cr-eyebrow i{background:var(--icon-blue);width:32px;}
.cr-services h2 .accent{color:var(--icon-blue);}

/* ---------- Hero ----------
   crack-hero.jpg is the bow only (the comp's left third is copy over dark
   water), with "Same Boats. New Beginnings." baked in at its right edge. It
   covers the right of the band and feathers left into the navy. */
.cr-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#001A36 0%,var(--navy-2) 40%,#0B3A66 100%);
}
.cr-hero-img{
  position:absolute;top:0;right:0;
  width:70%;height:100%;
  object-fit:cover;
  /* Right-anchored: the tagline is at the source's right edge, so the crop
     comes off the left (water) side, which the mask fades out anyway. */
  object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 26%);
}
.cr-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,22,46,.88) 0%,
      rgba(0,22,46,.66) 32%,
      rgba(0,22,46,.18) 46%,
      rgba(0,22,46,0) 56%),
    linear-gradient(0deg, rgba(0,22,46,.72) 0%, rgba(0,22,46,0) 28%);
}
.cr-hero-inner{
  position:relative;z-index:2;
  padding-top:clamp(34px,3.2vw,56px);
  padding-bottom:clamp(24px,2vw,34px);
}
.cr-hero-content{max-width:620px;}
.cr-hero-eyebrow{margin-bottom:14px;font-size:0.75rem;letter-spacing:2px;}
.cr-hero h1{
  font-size:clamp(2rem,3.2vw,3.25rem);
  letter-spacing:-1.2px;
  line-height:1.04;
  color:#fff;
  margin-bottom:16px;
}
.cr-hero h1 .accent{color:var(--accent);}
.cr-hero-sub{
  color:rgba(255,255,255,.9);
  font-size:clamp(0.9375rem,1.05vw,1.0625rem);
  line-height:1.5;
  max-width:560px;
  margin-bottom:22px;
}
.cr-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

.cr-trust{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(18px,2.4vw,40px);
  margin-top:clamp(20px,1.8vw,28px);
}
.cr-trust li{display:flex;align-items:center;gap:10px;color:#fff;}
.cr-trust-icon{
  width:40px;height:40px;
  border-radius:50%;
  background:rgba(28,148,220,.28);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.cr-trust strong{display:block;font-family:var(--font-head);font-size:0.8125rem;line-height:1.25;}
.cr-trust small{display:block;font-size:0.75rem;color:rgba(255,255,255,.78);}

/* ---------- Services ----------
   Reuses .fg-grid / .fg-card, five-up. The comp's cards have no overlapping
   icon badge. .cr-grid has the same specificity as .fg-grid and loads later,
   so every column change below is restated here rather than inherited. */
.cr-services{background:var(--light-bg);overflow:hidden;}
.cr-services-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,500px);
  align-items:end;
  column-gap:clamp(24px,3vw,56px);
  padding-top:clamp(28px,2.4vw,40px);
  padding-bottom:clamp(16px,1.4vw,22px);
}
.cr-services-head > div{padding-left:clamp(0px,1.4vw,28px);}
.cr-services-head h2{
  font-size:clamp(1.4375rem,1.85vw,2.125rem);
  letter-spacing:-.7px;
  line-height:1.15;
}
.cr-services-head > p{font-size:0.8438rem;line-height:1.55;color:var(--gray-text);}

.cr-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
.cr-grid .fg-card{border:1px solid #E6EFF7;}
.cr-grid .fg-card-media img{aspect-ratio:267/74;}
.cr-grid .fg-card-body{padding:14px 18px 16px;}
.cr-grid .fg-card-body h3{font-size:0.9688rem;margin-bottom:6px;}
.cr-grid .fg-card-body p{font-size:0.8125rem;line-height:1.5;margin-bottom:12px;}
.cr-grid .fg-card-link{font-size:0.8125rem;}

/* ---------- Why repair cracks ----------
   copy | five benefits | photo bleeding to the viewport's right edge (see the
   recipe's why band: padding-left reproduces the frame's content edge). */
.cr-why{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(94,205,250,.14), transparent 60%),
    linear-gradient(180deg,#fff 0%,var(--light-bg) 100%);
  border-top:1px solid #E6EFF7;
}
.cr-why-inner{
  --why-pad:clamp(24px,2.2vw,38px);
  display:grid;
  grid-template-columns:minmax(300px,24%) minmax(0,1fr) clamp(220px,26%,500px);
  align-items:center;
  column-gap:clamp(18px,2vw,34px);
  padding-block:var(--why-pad);
  padding-left:max(clamp(18px,2.6vw,44px), calc((100% - 1760px) / 2 + clamp(18px,2.6vw,44px)));
  padding-right:0;
}
.cr-why-copy{padding-left:clamp(0px,1.4vw,28px);}
.cr-why-copy h2{
  font-size:clamp(1.4375rem,1.75vw,2rem);
  letter-spacing:-.7px;
  line-height:1.1;
  margin-bottom:12px;
}
.cr-why-copy p{font-size:0.8438rem;line-height:1.6;color:var(--gray-text);}
.cr-benefits{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.cr-benefits li{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-inline:clamp(6px,.8vw,14px);
}
.cr-benefits li + li{border-left:1px solid #DCE8F3;}
.cr-benefit-icon{
  width:48px;height:48px;
  border-radius:50%;
  background:var(--icon-bg);
  color:var(--icon-blue);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.cr-benefits strong{font-family:var(--font-head);font-size:0.8438rem;line-height:1.25;color:var(--navy);margin-bottom:6px;}
.cr-benefits small{font-size:0.75rem;line-height:1.45;color:var(--gray-text);max-width:160px;}
.cr-why-photo{
  align-self:stretch;
  position:relative;
  margin-block:calc(-1 * var(--why-pad));
  min-height:200px;
  /* The comp's chevron notch on the leading edge. */
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 12% 50%);
}
.cr-why-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:60% center;
}

/* ---------- Process band ---------- */
.cr-process{
  background:
    radial-gradient(ellipse at 80% 0%, rgba(28,148,220,.18), transparent 60%),
    linear-gradient(100deg,var(--navy-2) 0%,var(--navy) 62%,#003463 100%);
}
.cr-process-inner{
  display:grid;
  grid-template-columns:minmax(280px,26%) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(24px,2.6vw,48px);
  padding-block:clamp(30px,2.6vw,44px);
}
.cr-process-copy{padding-left:clamp(0px,1.4vw,28px);}
.cr-process-copy .eyebrow{margin-bottom:10px;font-size:0.7188rem;letter-spacing:1.8px;}
.cr-process-copy h2{
  color:#fff;
  /* 36px needs 423px for one line; the copy column is ~408px. */
  font-size:clamp(1.5rem,1.8vw,2rem);
  letter-spacing:-.8px;
  margin-bottom:12px;
}
.cr-process-copy h2 .accent{color:var(--accent);}
.cr-process-copy p{color:rgba(255,255,255,.82);font-size:0.875rem;line-height:1.6;max-width:380px;}
.cr-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(26px,2.8vw,48px);
}
.cr-step{position:relative;}
/* Chevron between steps, sitting in the column gap beside the photo. */
.cr-step + .cr-step::before{
  content:"";
  position:absolute;
  left:calc(-1 * clamp(26px,2.8vw,48px) / 2 - 6px);
  top:clamp(22px,1.9vw,34px);
  width:12px;height:28px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 28' fill='none'%3E%3Cpath d='M2 2l8 12-8 12' stroke='%235ECDFA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.cr-step-media{position:relative;margin-bottom:12px;}
.cr-step-media img{
  width:100%;
  aspect-ratio:195/52;
  object-fit:cover;
  border-radius:8px;
  display:block;
}
.cr-step-num{
  position:absolute;top:-12px;left:-12px;
  width:34px;height:34px;
  border-radius:50%;
  background:#1C9BEA;
  color:#fff;
  border:2px solid #fff;
  font-family:var(--font-head);
  font-weight:800;
  font-size:0.9375rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.55);
}
.cr-step h3{color:#fff;font-size:0.9375rem;letter-spacing:-.2px;margin-bottom:5px;}
.cr-step p{color:rgba(255,255,255,.78);font-size:0.8125rem;line-height:1.5;}

/* ---------- Before & after ---------- */
.cr-results{background:#fff;}
.cr-results-inner{
  display:grid;
  grid-template-columns:minmax(300px,26%) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(20px,2.4vw,44px);
  padding-block:clamp(26px,2.2vw,38px);
}
.cr-results-copy{padding-left:clamp(0px,1.4vw,28px);}
.cr-results-copy h2{
  font-size:clamp(1.375rem,1.55vw,1.75rem);
  letter-spacing:-.6px;
  line-height:1.12;
  margin-bottom:10px;
}
.cr-results-copy p{font-size:0.8438rem;line-height:1.55;color:var(--gray-text);margin-bottom:16px;max-width:420px;}
.cr-results-copy .btn{font-size:0.8125rem;padding:10px 20px;}
.cr-ba-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,24px);
}

.sfr-ba{
  position:relative;
  aspect-ratio:313/92;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 12px 26px -18px 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,.35);
  pointer-events:none;
}
.sfr-ba-handle{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:34px;height:34px;
  border-radius:50%;
  background:#fff;
  color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  pointer-events:none;
}
.sfr-ba-tag{
  position:absolute;bottom:8px;
  font-family:var(--font-head);
  font-weight:800;
  font-size:0.6875rem;
  letter-spacing:.06em;
  line-height:1;
  padding:6px 18px;
  border-radius:5px;
  pointer-events:none;
}
.sfr-ba-tag-before{left:10px;background:#0B2240;color:#fff;}
.sfr-ba-tag-after{right:10px;background:#1C9BEA;color:#fff;padding-inline:22px;}

/* ---------- Why choose + CTA ----------
   copy | four features | photo with the CTA card over it, bleeding to the
   viewport's right edge like the why band. */
.cr-choose{background:var(--light-bg);border-top:1px solid #E6EFF7;overflow:hidden;}
.cr-choose-inner{
  display:grid;
  grid-template-columns:minmax(260px,20%) minmax(0,1fr) clamp(400px,34%,640px);
  align-items:center;
  column-gap:clamp(16px,1.8vw,32px);
  padding-left:max(clamp(18px,2.6vw,44px), calc((100% - 1760px) / 2 + clamp(18px,2.6vw,44px)));
  padding-right:0;
}
.cr-choose-copy{padding-left:clamp(0px,1.4vw,28px);padding-block:clamp(22px,2vw,32px);}
.cr-choose-copy .eyebrow{margin-bottom:8px;}
@media (min-width:1025px){
  .cr-choose-copy .eyebrow{font-size:0.6563rem;letter-spacing:1.3px;}
  .cr-choose-copy .eyebrow i{width:22px;}
  .cr-choose-copy .eyebrow span{white-space:nowrap;}
}
.cr-choose-copy h2{
  font-size:clamp(1.3125rem,1.6vw,1.8125rem);
  letter-spacing:-.6px;
  line-height:1.1;
}
.cr-features{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding-block:clamp(18px,1.6vw,26px);
}
.cr-features li{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-inline:clamp(6px,.8vw,14px);
}
.cr-features li + li{border-left:1px solid #DCE8F3;}
.cr-feature-icon{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--icon-bg);
  color:var(--icon-blue);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:9px;
}
.cr-features strong{font-family:var(--font-head);font-size:0.8125rem;line-height:1.25;color:var(--navy);margin-bottom:4px;}
.cr-features small{font-size:0.7188rem;line-height:1.4;color:var(--gray-text);max-width:170px;}

.cr-cta{
  align-self:stretch;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,1vw,18px) clamp(16px,2vw,40px) clamp(12px,1vw,18px) clamp(40px,4vw,80px);
  clip-path:polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}
.cr-cta-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 72%;
}
.cr-cta-card{
  position:relative;
  background:#fff;
  border-radius:12px;
  padding:clamp(14px,1.2vw,20px) clamp(16px,1.6vw,26px);
  text-align:center;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.7);
}
.cr-cta-card h2{font-size:clamp(1.125rem,1.3vw,1.375rem);letter-spacing:-.4px;margin-bottom:4px;}
.cr-cta-card p{font-size:0.8125rem;color:var(--gray-text);margin-bottom:12px;}
.cr-cta-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.cr-cta-actions .btn{font-size:0.8438rem;padding:11px 20px;}

/* ==========================================================================
   Responsive — widest first (see the recipe: equal specificity, later wins)
   ========================================================================== */

@media (max-width:1500px){
  /* Why band: copy moves above the benefits so they keep a usable width. */
  .cr-why-inner{grid-template-columns:minmax(0,1fr) clamp(220px,30%,460px);row-gap:22px;}
  .cr-why-copy{grid-column:1;grid-row:1;}
  .cr-benefits{grid-column:1;grid-row:2;}
  .cr-why-photo{grid-column:2;grid-row:1 / span 2;}
  /* Choose band: copy above the features, CTA photo spans both rows. */
  .cr-choose-inner{grid-template-columns:minmax(0,1fr) clamp(380px,40%,560px);}
  .cr-choose-copy{grid-column:1;grid-row:1;padding-bottom:0;}
  .cr-features{grid-column:1;grid-row:2;padding-top:14px;}
  .cr-cta{grid-column:2;grid-row:1 / span 2;}
}

@media (max-width:1240px){
  .cr-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .cr-services-head{grid-template-columns:minmax(0,1fr);row-gap:10px;}
  .cr-services-head > div{padding-left:0;}
  .cr-process-inner{grid-template-columns:minmax(0,1fr);row-gap:28px;}
  .cr-process-copy{padding-left:0;}
  .cr-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px;}
  .cr-step:nth-child(3)::before{display:none;}
  .cr-results-inner{grid-template-columns:minmax(0,1fr);row-gap:22px;}
  .cr-results-copy{padding-left:0;}
}

@media (max-width:1024px){
  .cr-hero-img{width:100%;-webkit-mask-image:none;mask-image:none;}
  .cr-hero-scrim{
    background:linear-gradient(90deg, rgba(0,22,46,.95) 0%, rgba(0,22,46,.85) 55%, rgba(0,22,46,.5) 100%);
  }
  .cr-why-inner{grid-template-columns:minmax(0,1fr);padding-inline:var(--pad);}
  .cr-why-copy,.cr-benefits,.cr-why-photo{grid-column:auto;grid-row:auto;}
  .cr-why-copy{padding-left:0;}
  .cr-why-photo{
    clip-path:none;
    aspect-ratio:352/143;min-height:0;
    margin-block:0 calc(-1 * var(--why-pad));
    margin-inline:calc(-1 * var(--pad));
  }
  .cr-benefits{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px;}
  .cr-benefits li:nth-child(4){border-left:0;}
  .cr-ba-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cr-choose-inner{grid-template-columns:minmax(0,1fr);padding-inline:var(--pad);}
  .cr-choose-copy,.cr-features,.cr-cta{grid-column:auto;grid-row:auto;}
  .cr-choose-copy{padding-left:0;}
  .cr-features{padding-bottom:28px;}
  .cr-cta{
    clip-path:none;
    margin-inline:calc(-1 * var(--pad));
    padding:clamp(28px,5vw,44px) var(--pad);
  }
}

@media (max-width:820px){
  .cr-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cr-features{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;}
  .cr-features li:nth-child(3){border-left:0;}
  .cr-benefits{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cr-benefits li:nth-child(3),.cr-benefits li:nth-child(5){border-left:0;}
  .cr-benefits li:nth-child(4){border-left:1px solid #DCE8F3;}
}

@media (max-width:640px){
  .cr-hero-inner{padding-top:34px;padding-bottom:30px;}
  .cr-hero h1{font-size:clamp(1.75rem,8vw,2.25rem);letter-spacing:-.7px;}
  .cr-hero h1 br,.cr-why-copy h2 br{display:none;}
  .cr-hero-sub{font-size:0.9063rem;}
  .cr-hero-actions{gap:10px;}
  .cr-hero-actions .btn,.cr-cta-actions .btn{flex:1 1 100%;justify-content:center;}
  .cr-hero-scrim{
    background:linear-gradient(180deg, rgba(0,22,46,.9) 0%, rgba(0,22,46,.82) 55%, rgba(0,22,46,.72) 100%);
  }
  .cr-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .cr-grid .fg-card-body{padding:12px 12px 14px;}
  .cr-grid .fg-card-body h3{font-size:0.875rem;}
  .cr-steps{grid-template-columns:minmax(0,1fr);}
  .cr-step + .cr-step::before{display:none;}
  .cr-step-num{left:8px;}
  .cr-ba-grid{grid-template-columns:minmax(0,1fr);max-width:480px;}
  .sfr-ba{aspect-ratio:2/1;}
  .cr-cta-card{width:100%;}
}

@media (max-width:400px){
  .cr-grid{grid-template-columns:minmax(0,1fr);}
  .cr-trust{grid-template-columns:minmax(0,1fr);}
  .cr-benefits,.cr-features{grid-template-columns:minmax(0,1fr);}
  .cr-benefits li,.cr-features li{border-left:0 !important;}
}