/* ==========================================================================
   Gelcoat Repair & Color Matching — page-specific styles.
   Loads after styles.css and reuses its tokens, buttons, eyebrows, card grid,
   header and footer. Everything here is prefixed .gc- so no other page moves.
   ========================================================================== */

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

/* ---------- Hero ----------
   Two photos: the boat (gelcoat-hero.jpg) and the buffing panel on the right
   (gelcoat-hero-buff.jpg, "Restore. Protect. Enjoy Again." baked in). The hero
   is taller than the comp's strip, so covering it with the boat would crop the
   boat away; instead the boat keeps its aspect, sits on the bottom edge, and
   its sky feathers up and left into the navy. */
.gc-hero{
  --panel:clamp(250px,21vw,420px);
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#001A36 0%,var(--navy-2) 40%,#0B3A66 100%);
}
.gc-hero-img{
  position:absolute;bottom:0;
  left:24%;
  width:calc(76% - var(--panel) + 70px);
  height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%),linear-gradient(180deg,transparent 0%,#000 32%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0%,#000 22%),linear-gradient(180deg,transparent 0%,#000 32%);
          mask-composite:intersect;
}
.gc-hero-panel{
  position:absolute;top:0;right:0;
  width:var(--panel);height:100%;
  object-fit:cover;
  object-position:right center;
  clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);
}
.gc-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,22,46,.9) 0%,
      rgba(0,22,46,.7) 30%,
      rgba(0,22,46,.2) 44%,
      rgba(0,22,46,0) 54%),
    linear-gradient(0deg, rgba(0,22,46,.7) 0%, rgba(0,22,46,0) 26%);
}
.gc-hero-inner{
  position:relative;z-index:2;
  padding-top:clamp(36px,3.8vw,64px);
  padding-bottom:clamp(28px,2.4vw,40px);
}
.gc-hero-content{max-width:640px;}
.gc-hero-eyebrow{margin-bottom:14px;font-size:0.7813rem;letter-spacing:2px;}
.gc-hero h1{
  font-size:clamp(2rem,3.5vw,3.375rem);
  letter-spacing:-1.2px;
  line-height:1.04;
  color:#fff;
  margin-bottom:16px;
}
.gc-hero h1 .accent{color:var(--accent);}
.gc-hero-lead{
  color:#fff;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(1.0625rem,1.4vw,1.3125rem);
  line-height:1.3;
  margin-bottom:12px;
}
.gc-hero-sub{
  color:rgba(255,255,255,.86);
  font-size:0.9375rem;
  line-height:1.55;
  max-width:560px;
  margin-bottom:24px;
}
.gc-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

.gc-trust{
  position:relative;
  /* Keep the row clear of the buffing panel: panel width minus the part of it
     that already sits in the container's side margin. */
  padding-right:max(0px, calc(var(--panel) - 80px - max(0px, (100vw - var(--container)) / 2) - var(--pad)));
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:clamp(18px,2.6vw,48px);
  margin-top:clamp(18px,1.6vw,26px);
}
.gc-trust li{display:flex;align-items:center;gap:10px;color:#fff;}
.gc-trust-icon{color:var(--accent);display:flex;}
.gc-trust strong{display:block;font-family:var(--font-head);font-size:0.8125rem;line-height:1.25;}
.gc-trust small{display:block;font-size:0.75rem;color:rgba(255,255,255,.78);}

/* ---------- Services ----------
   Reuses .fg-grid / .fg-card six-up. The comp's cards have no overlapping
   icon badge, so the body padding drops back to normal. */
.gc-services{background:var(--light-bg);overflow:hidden;}
.gc-services-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,330px);
  align-items:end;
  column-gap:clamp(24px,3vw,56px);
  padding-top:clamp(30px,2.6vw,44px);
  padding-bottom:clamp(16px,1.4vw,22px);
}
.gc-services-head h2{
  font-size:clamp(1.4375rem,1.85vw,2.125rem);
  letter-spacing:-.7px;
  line-height:1.15;
}
.gc-services-head h2 small{font-size:.66em;letter-spacing:-.3px;}
.gc-dash{font-weight:500;}
.gc-services-head > p{font-size:0.8438rem;line-height:1.55;color:var(--gray-text);}

.gc-grid .fg-card{border:1px solid #E6EFF7;}
.gc-grid .fg-card-media img{aspect-ratio:193/67;}
.gc-grid .fg-card-body{padding:14px 16px 16px;}
.gc-grid .fg-card-body h3{font-size:0.9375rem;margin-bottom:6px;}
.gc-grid .fg-card-body p{font-size:0.8125rem;line-height:1.5;margin-bottom:12px;}
.gc-grid .fg-card-link{font-size:0.8125rem;}

/* ---------- Why damage gets worse ----------
   copy | four risks | photo bleeding to the viewport's right edge (see the
   recipe's why band: padding-left reproduces .container's content edge). */
.gc-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;
}
.gc-why-inner{
  --why-pad:clamp(26px,2.4vw,40px);
  display:grid;
  grid-template-columns:minmax(300px,28%) minmax(0,1fr) clamp(220px,28%,540px);
  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;
}
.gc-why-copy h2{
  font-size:clamp(1.4375rem,1.85vw,2.125rem);
  letter-spacing:-.7px;
  line-height:1.1;
  margin-bottom:12px;
}
.gc-why-copy p{font-size:0.8438rem;line-height:1.6;color:var(--gray-text);}
@media (min-width:1025px){
  .gc-why-copy .eyebrow span{white-space:nowrap;}
}
.gc-risks{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.gc-risks li{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-inline:clamp(8px,1vw,18px);
}
.gc-risks li + li{border-left:1px solid #DCE8F3;}
.gc-risk-icon{
  width:50px;height:50px;
  border-radius:50%;
  background:var(--icon-bg);
  color:var(--icon-blue);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.gc-risks strong{font-family:var(--font-head);font-size:0.875rem;color:var(--navy);margin-bottom:6px;}
.gc-risks small{font-size:0.7813rem;line-height:1.45;color:var(--gray-text);max-width:170px;}
.gc-why-photo{
  align-self:stretch;
  position:relative;
  margin-block:calc(-1 * var(--why-pad));
  min-height:200px;
  clip-path:polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
.gc-why-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* The tagline is baked into the right half. */
  object-position:right center;
}

/* ---------- Process band ---------- */
.gc-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%);
}
.gc-process-inner{
  display:grid;
  grid-template-columns:minmax(260px,28%) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(24px,2.6vw,48px);
  padding-block:clamp(30px,2.6vw,44px);
}
.gc-process-copy{padding-left:clamp(0px,1.4vw,28px);}
.gc-process-copy .eyebrow{margin-bottom:10px;font-size:0.7188rem;letter-spacing:1.8px;}
.gc-process-copy h2{
  color:#fff;
  font-size:clamp(1.5rem,2vw,2.25rem);
  letter-spacing:-.8px;
  margin-bottom:12px;
}
.gc-process-copy h2 .accent{color:var(--accent);}
.gc-process-copy p{color:rgba(255,255,255,.82);font-size:0.875rem;line-height:1.6;max-width:380px;}
.gc-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(22px,2.4vw,40px);
}
.gc-step{position:relative;}
/* Chevron between steps, sitting in the column gap beside the photo. */
.gc-step + .gc-step::before{
  content:"";
  position:absolute;
  left:calc(-1 * clamp(22px,2.4vw,40px) / 2 - 6px);
  top:clamp(26px,2.2vw,40px);
  width:12px;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22' fill='none'%3E%3Cpath d='M2 2l8 9-8 9' stroke='%235ECDFA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.gc-step-media{position:relative;margin-bottom:12px;}
.gc-step-media img{
  width:100%;
  aspect-ratio:187/60;
  object-fit:cover;
  border-radius:8px;
  display:block;
}
.gc-step-num{
  position:absolute;top:-12px;left:-10px;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--accent-btn);
  color:var(--navy-2);
  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);
}
.gc-step h3{color:#fff;font-size:0.9375rem;letter-spacing:-.2px;margin-bottom:5px;}
.gc-step p{color:rgba(255,255,255,.76);font-size:0.8125rem;line-height:1.5;}

/* ---------- Color matching + before & after ---------- */
.gc-match{background:#fff;}
.gc-match-inner{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(20px,2.4vw,44px);
  padding-block:clamp(26px,2.4vw,40px);
}
.gc-color{
  display:grid;
  grid-template-columns:minmax(260px,.95fr) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(14px,1.4vw,24px);
}
.gc-color-copy{padding-left:clamp(0px,1vw,20px);}
.gc-color-copy h2{
  font-size:clamp(1.375rem,1.7vw,1.9375rem);
  letter-spacing:-.6px;
  line-height:1.12;
  margin-bottom:10px;
}
.gc-color-copy p{font-size:0.8125rem;line-height:1.55;color:var(--gray-text);margin-bottom:16px;}
.gc-color-copy .btn,.gc-results-head .btn{font-size:0.8125rem;padding:9px 18px;}
.gc-color-photo{
  align-self:stretch;
  border-radius:12px;
  overflow:hidden;
  clip-path:polygon(9% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow:0 18px 36px -24px rgba(0,38,75,.6);
}
.gc-color-photo img{width:100%;height:100%;min-height:200px;object-fit:cover;display:block;}

.gc-results-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-bottom:12px;
}
.gc-results-head .eyebrow{margin-bottom:0;}
.gc-ba-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,.9vw,14px);
}
.gc-ba-pair{margin:0;text-align:center;}
.gc-ba-pair img{
  width:100%;
  aspect-ratio:180/88;
  object-fit:cover;
  display:block;
  border-radius:8px;
  box-shadow:0 14px 30px -20px rgba(0,38,75,.6);
}
.gc-ba-pair figcaption{
  margin-top:9px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.8125rem;
  color:var(--navy);
}

/* ---------- What we repair + trusted ---------- */
.gc-surfaces{background:var(--light-bg);border-top:1px solid #E6EFF7;}
/* The comp sets the repair list and the trust row side by side, but at real
   type sizes neither fits in half the frame, so they are two full-width rows. */
.gc-surfaces-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:24px;
  padding-block:clamp(24px,2.2vw,36px);
}
.gc-repair{
  display:grid;
  grid-template-columns:minmax(260px,400px) minmax(160px,300px) auto;
  justify-content:space-between;
  align-items:center;
  column-gap:clamp(16px,2vw,40px);
  padding-bottom:22px;
  border-bottom:1px solid #DCE8F3;
}
.gc-repair-copy h2,.gc-trusted-copy h2{
  font-size:clamp(1.25rem,1.55vw,1.75rem);
  letter-spacing:-.6px;
  line-height:1.12;
  margin-bottom:8px;
}
.gc-repair-copy p,.gc-trusted-copy p{font-size:0.8125rem;line-height:1.55;color:var(--gray-text);max-width:400px;}
.gc-repair-boat{width:100%;height:auto;mix-blend-mode:multiply;}
.gc-checks{
  display:grid;
  grid-template-columns:repeat(2,auto);
  grid-auto-flow:column;
  grid-template-rows:repeat(5,auto);
  column-gap:clamp(12px,1.2vw,22px);
  row-gap:9px;
}
.gc-checks li{
  position:relative;
  padding-left:24px;
  font-size:0.7813rem;
  color:var(--navy);
}
@media (min-width:1401px){
  .gc-checks li{white-space:nowrap;}
}
.gc-checks li::before{
  content:"";
  position:absolute;left:0;top:50%;
  width:16px;height:16px;margin-top:-8px;
  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'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 11px;
}

.gc-trusted{
  display:grid;
  grid-template-columns:minmax(260px,400px) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(14px,1.6vw,28px);
}
.gc-features{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(8px,1vw,16px);
}
.gc-features li{display:flex;flex-direction:column;align-items:center;text-align:center;}
.gc-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;
}
.gc-features strong{font-family:var(--font-head);font-size:0.8125rem;line-height:1.25;color:var(--navy);margin-bottom:4px;}
.gc-features small{font-size:0.7188rem;line-height:1.4;color:var(--gray-text);}

/* ---------- Areas band ----------
   copy | pins | map (script baked in) | CTA card, over a darkened skyline. */
.gc-areas{position:relative;overflow:hidden;background:var(--navy-2);}
.gc-areas-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 60%;
}
.gc-areas-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,22,46,.92) 0%, rgba(0,38,75,.8) 55%, rgba(0,38,75,.55) 100%);
}
.gc-areas-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) auto auto minmax(360px,.95fr);
  align-items:center;
  column-gap:clamp(18px,2.2vw,40px);
  padding-block:clamp(22px,2vw,32px);
}
.gc-areas-copy{padding-left:clamp(0px,1.4vw,28px);}
.gc-areas-copy .eyebrow{margin-bottom:8px;font-size:0.7188rem;letter-spacing:1.8px;}
.gc-areas-copy h2{
  color:#fff;
  font-size:clamp(1.3125rem,1.6vw,1.8125rem);
  letter-spacing:-.6px;
  margin-bottom:8px;
}
.gc-areas-copy p{color:rgba(255,255,255,.84);font-size:0.8438rem;line-height:1.55;max-width:420px;}
.gc-pins{
  display:grid;
  grid-template-columns:repeat(2,auto);
  justify-content:start;
  column-gap:clamp(16px,2vw,36px);
  row-gap:7px;
}
.gc-pins li{
  position:relative;
  padding-left:20px;
  color:#fff;
  font-size:0.8125rem;
}
.gc-pins li::before{
  content:"";
  position:absolute;left:0;top:50%;
  width:13px;height:13px;margin-top:-7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22s7-7.4 7-12.6A7 7 0 0 0 5 9.4C5 14.6 12 22 12 22z' stroke='%23ffffff' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='9.4' r='2.4' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain;
}
.gc-areas-map{
  width:clamp(130px,11vw,190px);
  height:auto;
  border-radius:10px;
}
.gc-cta-card{
  background:#fff;
  border-radius:12px;
  padding:clamp(16px,1.4vw,22px) clamp(16px,1.6vw,26px);
  text-align:center;
  box-shadow:0 20px 40px -24px rgba(0,0,0,.7);
}
.gc-cta-card h2{font-size:clamp(1.125rem,1.35vw,1.4375rem);letter-spacing:-.4px;margin-bottom:4px;}
.gc-cta-card p{font-size:0.8125rem;color:var(--gray-text);margin-bottom:14px;}
.gc-cta-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.gc-cta-actions .btn{font-size:0.8438rem;padding:11px 20px;}

/* ---------- FAQ ---------- */
.gc-faq{background:var(--light-bg);}
.gc-faq-inner{
  display:grid;
  grid-template-columns:minmax(220px,.7fr) minmax(0,3fr);
  align-items:start;
  column-gap:clamp(20px,2.4vw,44px);
  padding-block:clamp(24px,2.2vw,36px);
}
.gc-faq-head{padding-left:clamp(0px,1.4vw,28px);}
.gc-faq-head h2{font-size:clamp(1.25rem,1.5vw,1.6875rem);letter-spacing:-.6px;line-height:1.12;}
.gc-faq-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-flow:column;
  grid-template-rows:repeat(2,auto);
  column-gap:clamp(12px,1.6vw,28px);
  row-gap:10px;
  align-items:start;
}
.gc-faq details{
  background:#fff;
  border:1px solid #E1ECF6;
  border-radius:6px;
}
.gc-faq summary{
  list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 14px;
  font-size:0.8125rem;
  color:var(--navy);
  cursor:pointer;
}
.gc-faq summary::-webkit-details-marker{display:none;}
.gc-faq summary::after{
  content:"+";
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.0625rem;
  line-height:1;
  color:var(--icon-blue);
  transition:transform .15s ease;
}
.gc-faq details[open] summary::after{transform:rotate(45deg);}
.gc-faq summary:focus-visible{outline:2px solid var(--icon-blue);outline-offset:2px;border-radius:6px;}
.gc-faq details p{padding:0 14px 12px;font-size:0.8125rem;line-height:1.55;color:var(--gray-text);}

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

@media (max-width:1500px){
  .gc-areas-inner{grid-template-columns:minmax(0,1fr) auto auto;row-gap:22px;}
  .gc-cta-card{grid-column:1 / -1;justify-self:start;min-width:min(100%,460px);}
  /* Why band: copy moves above the risks so they keep a usable width. */
  .gc-why-inner{grid-template-columns:minmax(0,1fr) clamp(220px,32%,480px);row-gap:22px;}
  .gc-why-copy{grid-column:1;grid-row:1;}
  .gc-risks{grid-column:1;grid-row:2;}
  .gc-why-photo{grid-column:2;grid-row:1 / span 2;}
}

@media (max-width:1400px){
  .gc-match-inner{grid-template-columns:minmax(0,1fr);row-gap:28px;}
}

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

@media (max-width:1100px){
  .gc-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .gc-repair{grid-template-columns:minmax(0,1fr) minmax(140px,260px);row-gap:18px;}
  .gc-checks{grid-column:1 / -1;}
  .gc-trusted{grid-template-columns:minmax(0,1fr);row-gap:20px;}
  .gc-faq-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);}
}

@media (max-width:1024px){
  .gc-hero-img{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:55% center;-webkit-mask-image:none;mask-image:none;}
  .gc-hero-panel{display:none;}
  .gc-hero-scrim{
    background:linear-gradient(90deg, rgba(0,22,46,.95) 0%, rgba(0,22,46,.85) 55%, rgba(0,22,46,.5) 100%);
  }
  .gc-trust{justify-content:flex-start;padding-right:0;}
  .gc-why-inner{grid-template-columns:minmax(0,1fr);padding-inline:var(--pad);}
  .gc-why-copy,.gc-risks{grid-column:auto;grid-row:auto;}
  .gc-why-photo{
    grid-column:auto;grid-row:auto;
    clip-path:none;
    aspect-ratio:406/124;min-height:0;
    margin-block:0 calc(-1 * var(--why-pad));
    margin-inline:calc(-1 * var(--pad));
  }
  .gc-risks{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;}
  .gc-risks li:nth-child(3){border-left:0;}
  .gc-areas-inner{grid-template-columns:minmax(0,1fr) auto;}
  .gc-areas-copy{grid-column:1 / -1;padding-left:0;}
  .gc-color{grid-template-columns:minmax(0,1fr);row-gap:18px;}
  .gc-color-photo{clip-path:none;aspect-ratio:338/148;}
}

@media (max-width:820px){
  .gc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gc-features{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px;}
  .gc-faq-list{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-rows:none;}
}

@media (max-width:640px){
  .gc-hero-inner{padding-top:34px;padding-bottom:30px;}
  .gc-hero h1{font-size:clamp(1.75rem,8vw,2.25rem);letter-spacing:-.7px;}
  .gc-hero h1 br,.gc-hero-lead br{display:none;}
  .gc-hero-lead{font-size:1.0313rem;}
  .gc-hero-sub{font-size:0.9063rem;margin-bottom:22px;}
  .gc-hero-actions{gap:10px;}
  .gc-hero-actions .btn,.gc-cta-actions .btn{flex:1 1 100%;justify-content:center;}
  .gc-hero-scrim{
    background:linear-gradient(180deg, rgba(0,22,46,.9) 0%, rgba(0,22,46,.82) 55%, rgba(0,22,46,.7) 100%);
  }
  .gc-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .gc-services-head h2 small{display:block;margin-top:4px;}
  .gc-dash{display:none;}
  .gc-why-copy h2 br,.gc-color-copy h2 br,.gc-repair-copy h2 br,.gc-trusted-copy h2 br{display:none;}
  .gc-grid .fg-card-body{padding:12px 12px 14px;}
  .gc-grid .fg-card-body h3{font-size:0.875rem;}
  .gc-steps{grid-template-columns:minmax(0,1fr);}
  .gc-step + .gc-step::before{display:none;}
  .gc-step-num{left:8px;}
  .gc-ba-grid{grid-template-columns:minmax(0,1fr);max-width:440px;}
  .gc-results-head{flex-wrap:wrap;}
  .gc-repair{grid-template-columns:minmax(0,1fr);}
  .gc-repair-boat{max-width:260px;}
  .gc-checks{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-rows:none;}
  .gc-areas-inner{grid-template-columns:minmax(0,1fr);}
  .gc-areas-map{display:none;}
  .gc-cta-card{min-width:0;justify-self:stretch;}
}

@media (max-width:400px){
  .gc-grid{grid-template-columns:minmax(0,1fr);}
  .gc-pins{grid-template-columns:minmax(0,1fr);}
  .gc-risks{grid-template-columns:minmax(0,1fr);}
  .gc-risks li + li{border-left:0;}
  .gc-trust{grid-template-columns:minmax(0,1fr);}
}


/* ---------- Why gelcoat matching is an art (merged from the legacy site) ----------
   Navy band between the white color-matching band and the light surfaces
   band: copy on the left, four numbered factor cards on the right. */
.gc-art{
  background:linear-gradient(100deg,var(--navy-2) 0%,var(--navy) 60%,#0A2F58 100%);
  color:#fff;
}
.gc-art-inner{
  display:grid;
  grid-template-columns:minmax(300px,38%) minmax(0,1fr);
  column-gap:clamp(24px,3vw,56px);
  align-items:center;
  padding-block:clamp(32px,3vw,52px);
}
.gc-art-copy{padding-left:clamp(0px,1vw,20px);}
.gc-art-copy h2{
  color:#fff;
  font-size:clamp(1.5rem,2vw,1.9375rem);
  letter-spacing:-.7px;
  line-height:1.12;
  margin-bottom:12px;
}
.gc-art-copy h2 .accent{color:var(--accent);}
.gc-art-copy p{font-size:0.9375rem;line-height:1.6;color:rgba(255,255,255,.82);}
.gc-art-note{
  margin-top:16px;
  padding:14px 16px;
  border-left:3px solid var(--accent);
  background:rgba(255,255,255,.05);
  font-size:0.875rem;
}
.gc-art-factors{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.gc-art-factors li{
  position:relative;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:18px 18px 18px 66px;
}
.gc-art-num{
  position:absolute;left:18px;top:18px;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--accent-btn);
  color:var(--navy-2);
  font-family:var(--font-head);
  font-weight:800;
  font-size:0.9375rem;
  display:flex;align-items:center;justify-content:center;
}
.gc-art-factors strong{display:block;font-family:var(--font-head);font-size:0.9688rem;line-height:1.25;color:#fff;margin-bottom:6px;}
.gc-art-factors small{display:block;font-size:0.8438rem;line-height:1.5;color:rgba(255,255,255,.78);}

@media (max-width:1240px){
  .gc-art-inner{grid-template-columns:minmax(0,1fr);row-gap:26px;}
}
@media (max-width:1024px){
  .gc-art-copy{padding-left:0;}
}
@media (max-width:640px){
  .gc-art-inner{padding-block:30px;}
  .gc-art-copy h2{font-size:1.5rem;}
  .gc-art-copy h2 br{display:none;}
  .gc-art-factors{grid-template-columns:minmax(0,1fr);gap:10px;}
}