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

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

/* ---------- Hero ----------
   gcc-hero.jpg is the right-hand 62% of the comp's hero (the left third is
   under the copy). It is anchored right, covers the height, and feathers into
   the navy on its left edge. "Same Boats. New Beginnings." is baked in at the
   right, so object-position keeps the right edge. */
.gcc-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#001A36 0%,var(--navy-2) 45%,#0B3A66 100%);
}
.gcc-hero-img{
  position:absolute;top:0;right:0;
  width:66%;height:100%;
  object-fit:cover;
  object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 28%);
}
.gcc-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,22,46,.88) 0%,
      rgba(0,22,46,.72) 30%,
      rgba(0,22,46,.25) 46%,
      rgba(0,22,46,0) 58%),
    linear-gradient(0deg, rgba(0,22,46,.72) 0%, rgba(0,22,46,0) 30%);
}
.gcc-hero-inner{
  position:relative;z-index:2;
  padding-top:clamp(30px,2.6vw,46px);
  padding-bottom:clamp(20px,1.6vw,28px);
}
.gcc-hero-content{max-width:600px;padding-left:clamp(0px,6vw,136px);box-sizing:content-box;}
.gcc-hero-eyebrow{margin-bottom:12px;font-size:0.75rem;letter-spacing:1.8px;}
.gcc-hero h1{
  font-size:clamp(2rem,2.75vw,3.125rem);
  letter-spacing:-1.2px;
  line-height:1.02;
  color:#fff;
  margin-bottom:14px;
}
.gcc-hero h1 .accent{display:block;color:var(--accent);}
.gcc-hero-sub{
  color:rgba(255,255,255,.9);
  font-size:0.9375rem;
  line-height:1.5;
  max-width:560px;
  margin-bottom:20px;
}
.gcc-hero-actions{display:flex;gap:12px;flex-wrap:wrap;}

.gcc-trust{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(16px,2vw,36px);
  margin-top:clamp(18px,1.6vw,26px);
  padding-left:clamp(0px,6vw,136px);
}
.gcc-trust li{display:flex;align-items:center;gap:10px;color:#fff;}
.gcc-trust-icon{
  flex:none;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(94,205,250,.14);
  border:1px solid rgba(94,205,250,.35);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.gcc-trust strong{display:block;font-family:var(--font-head);font-size:0.8125rem;line-height:1.25;}
.gcc-trust small{display:block;font-size:0.7188rem;color:rgba(255,255,255,.78);}

/* ---------- Services ----------
   Reuses .fg-grid / .fg-card, five-up. The comp's cards have no overlapping
   icon badge, so the body padding drops back to normal. */
.gcc-services{background:var(--light-bg);overflow:hidden;}
.gcc-services-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);
  align-items:end;
  column-gap:clamp(24px,4vw,80px);
  padding-top:clamp(26px,2.2vw,38px);
  padding-bottom:clamp(14px,1.2vw,20px);
}
.gcc-services-head > div{padding-left:clamp(0px,2.6vw,44px);}
.gcc-services-head h2{
  font-size:clamp(1.4375rem,1.85vw,2.125rem);
  letter-spacing:-.7px;
  line-height:1.15;
}
.gcc-services-head > p{font-size:0.8438rem;line-height:1.55;color:var(--gray-text);max-width:640px;}

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

/* ---------- Why repair chips ----------
   copy | four benefits | photo bleeding to the viewport's right edge. The
   padding-left expression reproduces the wide frame's content edge (see the
   recipe's why band). */
.gcc-why{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(94,205,250,.12), transparent 60%),
    #fff;
  border-top:1px solid #E6EFF7;
}
.gcc-why-inner{
  --why-pad:clamp(22px,1.8vw,32px);
  display:grid;
  grid-template-columns:minmax(300px,24%) minmax(0,1fr) clamp(240px,32%,620px);
  align-items:center;
  column-gap:clamp(20px,2.2vw,38px);
  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;
}
.gcc-why-copy{padding-left:clamp(0px,.4vw,8px);}
.gcc-why-copy h2{
  font-size:clamp(1.4375rem,1.75vw,2rem);
  letter-spacing:-.7px;
  line-height:1.08;
  margin-bottom:10px;
}
.gcc-why-copy p{font-size:0.8438rem;line-height:1.55;color:var(--gray-text);}
@media (min-width:1025px){
  .gcc-why-copy .eyebrow span{white-space:nowrap;}
}
.gcc-benefits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
}
.gcc-benefits li{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-inline:clamp(8px,1vw,18px);
  border-left:1px solid #DCE8F3;
}
.gcc-benefits li:last-child{border-right:1px solid #DCE8F3;}
.gcc-benefit-icon{
  width:46px;height:46px;
  border-radius:50%;
  background:var(--icon-bg);
  color:var(--icon-blue);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
}
.gcc-benefits strong{font-family:var(--font-head);font-size:0.875rem;line-height:1.2;color:var(--navy);margin-bottom:8px;}
.gcc-benefits small{font-size:0.7813rem;line-height:1.45;color:var(--gray-text);max-width:170px;}
.gcc-why-photo{
  align-self:stretch;
  position:relative;
  margin-block:calc(-1 * var(--why-pad));
  min-height:180px;
  /* The copy side pushes a point into the photo's leading edge. */
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 7% 50%);
}
.gcc-why-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:65% center;
}

/* ---------- Process band ---------- */
.gcc-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%);
}
.gcc-process-inner{
  display:grid;
  grid-template-columns:minmax(400px,26%) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(24px,2.6vw,48px);
  padding-block:clamp(26px,2.2vw,38px);
}
.gcc-process-copy{padding-left:clamp(0px,1.4vw,24px);}
.gcc-process-copy .eyebrow{margin-bottom:10px;font-size:0.6875rem;letter-spacing:1.6px;}
.gcc-process-copy h2{
  color:#fff;
  font-size:clamp(1.5rem,1.8vw,2.0625rem);
  letter-spacing:-.8px;
  margin-bottom:12px;
}
.gcc-process-copy h2 .accent{color:var(--accent);}
.gcc-process-copy p{color:rgba(255,255,255,.82);font-size:0.8438rem;line-height:1.55;max-width:360px;}
@media (min-width:1025px){
  .gcc-process-copy .eyebrow span,.gcc-process-copy h2{white-space:nowrap;}
}
.gcc-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(28px,3vw,52px);
}
.gcc-step{position:relative;}
/* Chevron between steps, sitting in the column gap beside the photo. */
.gcc-step + .gcc-step::before{
  content:"";
  position:absolute;
  left:calc(-1 * clamp(28px,3vw,52px) / 2 - 6px);
  top:clamp(28px,2.4vw,44px);
  width:12px;height:30px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 30' fill='none'%3E%3Cpath d='M2 2l8 13-8 13' stroke='%231C94DC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.gcc-step-media{position:relative;margin-bottom:12px;}
.gcc-step-media img{
  width:100%;
  aspect-ratio:196/46;
  object-fit:cover;
  border-radius:8px;
  display:block;
}
.gcc-step-num{
  position:absolute;top:-8px;left:-14px;
  width:36px;height:36px;
  border-radius:50%;
  background:#2FA8EE;
  color:#fff;
  border:2px solid #fff;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.0625rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.55);
}
.gcc-step h3{color:#fff;font-size:0.9063rem;letter-spacing:-.2px;margin-bottom:3px;}
.gcc-step p{color:rgba(255,255,255,.8);font-size:0.8125rem;line-height:1.35;}

/* ---------- Before & after ---------- */
.gcc-results{background:#fff;}
.gcc-results-inner{
  display:grid;
  grid-template-columns:minmax(360px,22%) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(20px,2.6vw,48px);
  padding-block:clamp(14px,1.2vw,20px);
}
.gcc-results-copy{padding-left:clamp(0px,.7vw,12px);}
.gcc-results-copy h2{
  font-size:clamp(1.3125rem,1.5vw,1.6875rem);
  letter-spacing:-.6px;
  line-height:1.12;
  margin-bottom:6px;
}
@media (min-width:1025px){
  .gcc-results-copy h2{white-space:nowrap;}
}
.gcc-results-copy p{font-size:0.7813rem;line-height:1.45;color:var(--gray-text);margin-bottom:12px;}
.gcc-results-copy .btn{font-size:0.8125rem;padding:8px 18px;}
.gcc-ba-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,36px);
}
.sfr-ba{
  position:relative;
  aspect-ratio:317/78;
  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-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* The before halves are cropped from the comp with a mirrored copy appended,
   so the damage lands in the slider's left half and dragging right still
   shows surface, not a blank edge. */
.sfr-ba-before{background-position:left center;}
.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:30px;height:30px;
  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;}
.sfr-ba-tag{
  position:absolute;bottom:6px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.625rem;
  letter-spacing:1px;
  line-height:1;
  padding:5px 14px;
  border-radius:4px;
  pointer-events:none;
}
.sfr-ba-tag-before{left:12px;background:#00112C;color:#fff;border:1px solid rgba(255,255,255,.25);}
.sfr-ba-tag-after{right:12px;background:#1C94DC;color:#fff;padding-inline:20px;}

/* ---------- Why choose us + CTA ----------
   copy | four features | marina photo bleeding right with the CTA card on it.
   Same container-edge padding trick as the why band. */
.gcc-choose{
  background:linear-gradient(180deg,#fff 0%,var(--light-bg) 100%);
  border-top:1px solid #E6EFF7;
  overflow:hidden;
}
.gcc-choose-inner{
  --choose-pad:clamp(16px,1.2vw,22px);
  display:grid;
  grid-template-columns:minmax(345px,19%) minmax(0,1fr) clamp(380px,34%,660px);
  align-items:center;
  column-gap:clamp(16px,1.8vw,32px);
  padding-block:var(--choose-pad);
  padding-left:max(clamp(18px,2.6vw,44px), calc((100% - 1760px) / 2 + clamp(18px,2.6vw,44px)));
  padding-right:0;
}
.gcc-choose-copy h2{
  font-size:clamp(1.3125rem,1.5vw,1.6875rem);
  letter-spacing:-.6px;
  line-height:1.08;
}
@media (min-width:1025px){
  .gcc-choose-copy .eyebrow span{white-space:nowrap;}
}
.gcc-features{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
}
.gcc-features li{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-inline:clamp(6px,.9vw,16px);
  border-left:1px solid #DCE8F3;
}
.gcc-feature-icon{
  width:40px;height:40px;
  border-radius:50%;
  background:var(--icon-bg);
  color:var(--icon-blue);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;
}
.gcc-features strong{font-family:var(--font-head);font-size:0.8125rem;line-height:1.25;color:var(--navy);margin-bottom:3px;}
.gcc-features small{font-size:0.7188rem;line-height:1.4;color:var(--gray-text);max-width:180px;}

.gcc-cta{
  align-self:stretch;
  position:relative;
  margin-block:calc(-1 * var(--choose-pad));
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,1.2vw,20px) clamp(18px,2.6vw,44px) clamp(14px,1.2vw,20px) clamp(40px,5vw,90px);
  clip-path:polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}
.gcc-cta-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 62%;
}
.gcc-cta-card{
  position:relative;
  background:#fff;
  border-radius:10px;
  padding:clamp(12px,1vw,16px) clamp(14px,1.4vw,22px);
  text-align:center;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.7);
}
.gcc-cta-card h2{font-size:clamp(1.0625rem,1.2vw,1.3125rem);letter-spacing:-.4px;margin-bottom:3px;}
.gcc-cta-card p{font-size:0.7813rem;color:var(--gray-text);margin-bottom:12px;}
.gcc-cta-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.gcc-cta-actions .btn{font-size:0.8125rem;padding:10px 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. */
  .gcc-why-inner{grid-template-columns:minmax(0,1fr) clamp(240px,34%,520px);row-gap:22px;}
  .gcc-why-copy{grid-column:1;grid-row:1;}
  .gcc-benefits{grid-column:1;grid-row:2;}
  .gcc-why-photo{grid-column:2;grid-row:1 / span 2;}
  /* Choose band: copy moves above the features, CTA photo spans both rows. */
  .gcc-choose-inner{grid-template-columns:minmax(0,1fr) clamp(380px,40%,560px);row-gap:18px;}
  .gcc-choose-copy{grid-column:1;grid-row:1;}
  .gcc-features{grid-column:1;grid-row:2;}
  .gcc-cta{grid-column:2;grid-row:1 / span 2;}
  .gcc-choose-copy h2 br{display:none;}
}

@media (max-width:1400px){
  .gcc-results-inner{grid-template-columns:minmax(0,1fr);row-gap:18px;padding-block:24px;}
  .gcc-results-copy{padding-left:0;}
  .gcc-results-copy p{max-width:520px;}
}

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

@media (max-width:1100px){
  .gcc-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .gcc-hero-content,.gcc-trust{padding-left:0;}
}

@media (max-width:1024px){
  .gcc-hero-img{width:100%;object-position:62% center;-webkit-mask-image:none;mask-image:none;}
  .gcc-hero-scrim{
    background:linear-gradient(90deg, rgba(0,22,46,.95) 0%, rgba(0,22,46,.85) 55%, rgba(0,22,46,.5) 100%);
  }
  .gcc-why-inner,.gcc-choose-inner{grid-template-columns:minmax(0,1fr);padding-inline:var(--pad);}
  .gcc-why-copy,.gcc-benefits,.gcc-choose-copy,.gcc-features{grid-column:auto;grid-row:auto;}
  .gcc-why-photo{
    grid-column:auto;grid-row:auto;
    clip-path:none;
    aspect-ratio:470/139;min-height:0;
    margin-block:0 calc(-1 * var(--why-pad));
    margin-inline:calc(-1 * var(--pad));
  }
  .gcc-benefits{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;}
  .gcc-benefits li:nth-child(2){border-right:1px solid #DCE8F3;}
  .gcc-cta{
    grid-column:auto;grid-row:auto;
    clip-path:none;
    margin-block:0 calc(-1 * var(--choose-pad));
    margin-inline:calc(-1 * var(--pad));
    padding:clamp(28px,5vw,48px) var(--pad);
  }
  .gcc-ba-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:820px){
  .gcc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gcc-features{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px;}
  .gcc-features li:nth-child(2){border-right:1px solid #DCE8F3;}
}

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

@media (max-width:400px){
  .gcc-grid{grid-template-columns:minmax(0,1fr);}
  .gcc-trust{grid-template-columns:minmax(0,1fr);}
  .gcc-benefits,.gcc-features{grid-template-columns:minmax(0,1fr);}
  .gcc-benefits li:nth-child(n),.gcc-features li:nth-child(n){border-left:0;border-right:0;}
}