/* ==========================================================================
   Deck Repairs — page-specific styles.
   Loads after styles.css and reuses its tokens, buttons, eyebrows, card grid,
   header and footer. Everything here is prefixed .dr- so no other page moves.
   ========================================================================== */

/* ---------- Hero ----------
   deck-hero.jpg is only the right-hand part of the comp (the left third of
   the comp photo is under the headline), so it sits on the right and the
   scrim blends its left edge into the navy band. The "Same Boats. New
   Beginnings." script is baked into the photo, so object-position is pinned
   right to keep it in frame. */
.dr-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#001A36 0%,var(--navy-2) 40%,#0B3A66 100%);
}
.dr-hero-img{
  position:absolute;top:0;bottom:0;right:0;
  left:36%;
  width:64%;height:100%;
  object-fit:cover;
  object-position:right center;
  /* Feathers the photo's left edge into the navy so there is no seam. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 26%);
}
.dr-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,22,46,1) 0%,
      rgba(0,22,46,.96) 36%,
      rgba(0,22,46,.55) 46%,
      rgba(0,22,46,.12) 60%,
      rgba(0,22,46,0) 72%),
    linear-gradient(180deg, rgba(0,22,46,.3) 0%, rgba(0,22,46,0) 40%);
}
.dr-hero-inner{
  position:relative;z-index:2;
  padding-top:clamp(48px,5vw,80px);
  padding-bottom:clamp(48px,5vw,80px);
}
.dr-hero-content{max-width:660px;}
.dr-hero-eyebrow{margin-bottom:16px;}
.dr-hero h1{
  font-size:clamp(1.9375rem,3.9vw,3.25rem);
  letter-spacing:-1.2px;
  line-height:1.08;
  color:#fff;
  margin-bottom:20px;
}
.dr-hero-sub{
  color:rgba(255,255,255,.87);
  font-size:1.0625rem;
  line-height:1.62;
  max-width:560px;
  margin-bottom:30px;
}
.dr-hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- Section head ---------- */
.dr-section-head{
  text-align:center;
  max-width:1280px;
  margin-inline:auto;
  padding-top:clamp(44px,4.6vw,68px);
  padding-bottom:clamp(24px,2.6vw,36px);
}
.dr-section-head .eyebrow{justify-content:center;margin-bottom:14px;color:var(--icon-blue);}
.dr-section-head .eyebrow i{background:var(--accent);}
.dr-section-head h2{
  font-size:clamp(1.625rem,3.1vw,2.5rem);
  letter-spacing:-.9px;
  margin-bottom:14px;
}
.dr-section-head h2 .accent{color:var(--icon-blue);}
.dr-section-head p{
  font-size:1rem;
  line-height:1.6;
  color:var(--gray-text);
  max-width:900px;
  margin-inline:auto;
}

/* ---------- Services grid ----------
   Reuses .fg-grid / .fg-card. The comp has five cards, not six, and the
   source photos are wider than 16:9, so only the column count and the
   desktop image ratio change. */
.dr-services{background:var(--light-bg);overflow:hidden;}
@media (min-width:1401px){
  .dr-services .fg-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;max-width:1600px;}
  .dr-services .fg-card-media img{aspect-ratio:12/5;}
}

/* ---------- Process band ---------- */
.dr-process{
  position:relative;
  background:linear-gradient(100deg,var(--navy-2) 0%,var(--navy) 62%,#003463 100%);
  display:grid;
  grid-template-columns:minmax(220px,22%) minmax(0,1fr);
  align-items:stretch;
}
.dr-process-photo{
  position:relative;
  min-height:100%;
  clip-path:polygon(0 0, calc(100% - 38px) 0, 100% 50%, calc(100% - 38px) 100%, 0 100%);
}
.dr-process-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:30% center;
}
.dr-process-body{
  display:grid;
  grid-template-columns:minmax(280px,30%) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(24px,2.8vw,48px);
  padding:clamp(40px,3.8vw,56px) clamp(20px,3.4vw,60px) clamp(30px,3.2vw,48px) clamp(18px,2.2vw,34px);
}
.dr-process-copy .eyebrow{margin-bottom:14px;}
.dr-process-copy h2{
  color:#fff;
  font-size:clamp(1.5rem,2.1vw,2rem);
  letter-spacing:-.8px;
  margin-bottom:14px;
}
.dr-process-copy p{
  color:rgba(255,255,255,.76);
  font-size:0.9375rem;
  line-height:1.62;
  max-width:440px;
}
.dr-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:34px;
  margin-top:18px;
}
.dr-step{
  position:relative;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  padding:40px 16px 20px;
}
/* Arrow in the gutter between steps. */
.dr-step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;right:-25px;
  width:16px;height:16px;
  margin-top:-8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity:.8;
}
.dr-step-num{
  position:absolute;top:-18px;left:14px;
  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;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.55);
}
.dr-step-icon{
  position:absolute;top:-18px;left:60px;
  width:36px;height:36px;
  border-radius:50%;
  background:#062B52;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.dr-step h3{
  color:#fff;
  font-size:0.9375rem;
  letter-spacing:-.2px;
  margin-bottom:7px;
}
.dr-step p{
  color:rgba(255,255,255,.7);
  font-size:0.8438rem;
  line-height:1.5;
}

/* ---------- Under your deck + before & after ----------
   Like the card grid, these two bands run wider than .container (the comp
   packs two sections side by side here), so they share .fg-grid's width. */
.dr-results{background:#fff;}
.dr-wide{
  --wide-pad:clamp(18px,2.6vw,44px);
  max-width:1760px;
  margin-inline:auto;
  padding-inline:var(--wide-pad);
}
.dr-results-inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:center;
  padding-block:clamp(40px,4.2vw,64px);
}
.dr-layers{
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
  align-items:center;
  column-gap:clamp(18px,1.8vw,30px);
  padding-right:clamp(20px,2.4vw,40px);
}
.dr-layers-copy h2{
  font-size:clamp(1.4375rem,1.9vw,1.8125rem);
  letter-spacing:-.7px;
  margin-bottom:12px;
}
.dr-layers-copy p{
  font-size:0.9063rem;
  line-height:1.6;
  color:var(--gray-text);
  margin-bottom:20px;
}
.dr-layers-copy .btn{font-size:0.875rem;padding:12px 20px;gap:8px;}

/* The cutaway photo carries the leader lines; the labels sit where each line
   ends. Their --y values are the line heights in deck-layers.jpg. */
.dr-diagram{
  position:relative;
  margin:0;
  padding-right:44%;
}
.dr-diagram img{width:100%;display:block;}
.dr-diagram-labels li{
  position:absolute;
  left:56%;right:0;
  top:var(--y);
  transform:translateY(-9px);
  padding-left:16px;
  line-height:1.25;
}
.dr-diagram-labels li::before{
  content:"";
  position:absolute;left:0;top:4px;
  width:9px;height:9px;
  border-radius:50%;
  border:2px solid var(--icon-blue);
  background:#fff;
}
.dr-diagram-labels strong{
  display:block;
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.8125rem;
  color:var(--navy);
}
.dr-diagram-labels small{
  display:block;
  font-size:0.7188rem;
  color:var(--gray-text);
}

.dr-ba{
  border-left:1px solid #E1ECF5;
  padding-left:clamp(20px,2.4vw,40px);
}
.dr-rule-head{
  display:flex;align-items:center;gap:14px;
  font-size:clamp(1.25rem,1.6vw,1.5rem);
  letter-spacing:-.5px;
  margin-bottom:8px;
}
.dr-rule-head i{
  display:block;flex:none;
  width:34px;height:2px;border-radius:2px;
  background:var(--icon-blue);
}
.dr-ba-lead{
  font-size:0.9063rem;
  color:var(--gray-text);
  margin-bottom:18px;
}
.dr-ba-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.2vw,18px);
}
.dr-ba-pair{
  position:relative;
  margin:0;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 14px 30px -20px rgba(0,38,75,.6);
}
.dr-ba-pair img{
  width:100%;
  aspect-ratio:175/80;
  object-fit:cover;
  display:block;
}
.dr-ba-pair::after{
  content:"";
  position:absolute;top:0;bottom:0;left:50%;
  width:2px;margin-left:-1px;
  background:#fff;
}
.dr-ba-tag{
  position:absolute;bottom:8px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.625rem;
  letter-spacing:1.1px;
  padding:4px 10px;
  border-radius:999px;
}
.dr-ba-tag-before{left:8px;background:rgba(0,22,46,.88);color:#fff;}
.dr-ba-tag-after{left:calc(50% + 8px);background:#1C94DC;color:#fff;}

/* ---------- Warning signs + areas ----------
   Three columns: signs | areas copy | map. The map bleeds to the viewport's
   right edge, so the left padding reproduces .container's content edge
   (see BUILDING-SERVICE-PAGES.md, "Why band"). */
.dr-info{
  background:linear-gradient(180deg,#FFFFFF 0%,var(--light-bg) 100%);
  border-top:1px solid #E6EFF7;
  overflow:hidden;
}
.dr-info-inner{
  display:grid;
  --wide-pad:clamp(18px,2.6vw,44px);
  grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) clamp(180px,19%,380px);
  align-items:center;
  padding-left:max(var(--wide-pad), calc((100% - 1760px) / 2 + var(--wide-pad)));
  padding-right:0;
}
.dr-signs{padding-block:clamp(34px,3.4vw,52px);padding-right:clamp(20px,2.4vw,40px);}
.dr-signs-lead{
  font-size:0.9063rem;
  line-height:1.6;
  color:var(--gray-text);
  max-width:640px;
  margin-bottom:22px;
}
.dr-signs-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px 16px;
  align-items:start;
}
.dr-signs-grid > li:not(.dr-signs-note){
  display:flex;align-items:center;gap:10px;
  font-size:0.7813rem;
  line-height:1.45;
  color:var(--navy);
}
.dr-sign-icon{
  flex:none;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--icon-bg);
  color:var(--icon-blue);
  display:flex;align-items:center;justify-content:center;
}
.dr-signs-note{
  grid-column:4;grid-row:2 / span 1;
  display:flex;gap:10px;align-items:flex-start;
  background:#E8F4FD;
  border:1px solid #D2E8F8;
  border-radius:10px;
  padding:14px 14px 12px;
}
.dr-note-icon{flex:none;color:var(--icon-blue);display:flex;}
.dr-signs-note strong{
  display:block;
  font-family:var(--font-head);
  font-size:0.8438rem;
  color:var(--navy);
  margin-bottom:4px;
}
.dr-signs-note p{
  font-size:0.7813rem;
  line-height:1.45;
  color:var(--gray-text);
  margin-bottom:8px;
}
.dr-signs-note .fg-card-link{font-size:0.8125rem;}

.dr-areas{
  align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
  border-left:1px solid #E1ECF5;
  padding:clamp(34px,3.4vw,52px) clamp(10px,1vw,16px) clamp(34px,3.4vw,52px) clamp(20px,2.4vw,40px);
}
.dr-areas > p{
  font-size:0.9063rem;
  line-height:1.6;
  color:var(--gray-text);
  margin-bottom:18px;
}
.dr-pins{
  display:grid;
  grid-template-columns:repeat(2,auto);
  justify-content:start;
  column-gap:clamp(20px,2.4vw,44px);
  row-gap:9px;
}
.dr-pins li{
  display:flex;align-items:center;gap:9px;
  font-size:0.875rem;
  color:var(--navy);
  white-space:nowrap;
}
.dr-pins svg{flex:none;color:var(--icon-blue);}
.dr-map{
  align-self:stretch;
  position:relative;
  /* Fades the map's left edge into the section, as in the comp. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
}
.dr-map img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:left center;
}

/* ---------- CTA band ----------
   Photo bleeds off the left edge; the right padding mirrors .container. */
.dr-cta{
  position:relative;
  display:grid;
  grid-template-columns:clamp(220px,27%,520px) minmax(0,1fr) auto;
  align-items:center;
  column-gap:clamp(20px,2.4vw,44px);
  background:linear-gradient(100deg,var(--navy-2) 0%,var(--navy) 70%,#003463 100%);
  padding-right:max(var(--pad), calc((100% - var(--container)) / 2 + var(--pad)));
  overflow:hidden;
}
.dr-cta-photo{
  align-self:stretch;
  position:relative;
  min-height:170px;
  -webkit-mask-image:linear-gradient(90deg,#000 60%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 60%,transparent 100%);
}
.dr-cta-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:left center;
}
.dr-cta-copy{padding-block:clamp(30px,2.8vw,44px);}
.dr-cta-copy .eyebrow{margin-bottom:10px;}
.dr-cta-copy h2{
  color:#fff;
  font-size:clamp(1.5625rem,2.4vw,2.25rem);
  letter-spacing:-.8px;
  margin-bottom:8px;
}
.dr-cta-copy p{color:rgba(255,255,255,.82);font-size:0.9688rem;line-height:1.55;}
.dr-cta-side{display:flex;flex-direction:column;gap:16px;padding-block:24px;}
.dr-cta-actions{display:flex;gap:14px;flex-wrap:wrap;}
.dr-cta-meta{display:flex;flex-wrap:wrap;gap:6px 0;}
.dr-cta-meta li{
  display:flex;align-items:center;gap:8px;
  font-size:0.8125rem;
  color:rgba(255,255,255,.85);
}
.dr-cta-meta li + li{border-left:1px solid rgba(255,255,255,.3);margin-left:14px;padding-left:14px;}
.dr-cta-meta svg{flex:none;color:var(--accent);}

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

@media (max-width:1500px){
  .dr-info-inner{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);}
  .dr-map{display:none;}
  .dr-areas{padding-right:var(--wide-pad);}
  .dr-signs-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .dr-signs-note{grid-column:2 / span 2;grid-row:auto;}
}

@media (max-width:1400px){
  .dr-results-inner{grid-template-columns:minmax(0,1fr);row-gap:36px;}
  .dr-layers{padding-right:0;}
  .dr-ba{border-left:0;padding-left:0;border-top:1px solid #E1ECF5;padding-top:32px;}
  .dr-cta{grid-template-columns:clamp(200px,26%,400px) minmax(0,1fr);}
  .dr-cta-side{grid-column:2;padding-top:0;padding-bottom:30px;}
  .dr-cta-copy{padding-bottom:0;}
  .dr-cta-photo{grid-row:1 / span 2;}
}

@media (max-width:1240px){
  .dr-process{grid-template-columns:minmax(200px,28%) minmax(0,1fr);}
  .dr-process-body{grid-template-columns:minmax(0,1fr);row-gap:28px;}
  .dr-process-copy p{max-width:none;}
  .dr-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px;}
  .dr-step:nth-child(2)::after{display:none;}
  .dr-info-inner{grid-template-columns:minmax(0,1fr);padding-right:var(--wide-pad);}
  .dr-signs{padding-right:0;padding-bottom:10px;}
  .dr-areas{border-left:0;border-top:1px solid #E1ECF5;padding:28px 0 clamp(34px,3.4vw,52px);}
  .dr-signs-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .dr-signs-note{grid-column:4;grid-row:2;}
}

@media (max-width:1024px){
  .dr-process{grid-template-columns:minmax(0,1fr);}
  .dr-process-photo{clip-path:none;aspect-ratio:250/110;min-height:0;}
  .dr-layers{grid-template-columns:minmax(0,1fr);row-gap:26px;}
  .dr-diagram{max-width:560px;}
  .dr-signs-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dr-signs-note{grid-column:1 / -1;grid-row:auto;}
  .dr-cta{grid-template-columns:minmax(0,1fr);padding-inline:var(--pad);}
  .dr-cta-photo{
    grid-row:auto;
    margin-inline:calc(-1 * var(--pad));
    aspect-ratio:350/110;min-height:0;
    -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
  }
  .dr-cta-side{grid-column:auto;}
  .dr-cta-copy{padding-top:0;}
}

@media (max-width:820px){
  .dr-hero-img{left:0;width:100%;object-position:right center;-webkit-mask-image:none;mask-image:none;}
  .dr-hero-scrim{
    background:linear-gradient(90deg, rgba(0,22,46,.95) 0%, rgba(0,22,46,.85) 55%, rgba(0,22,46,.55) 100%);
  }
  .dr-hero-sub{font-size:1rem;}
  .dr-section-head p{font-size:0.9375rem;}
  .dr-ba-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:640px){
  .dr-hero-inner{padding-top:40px;padding-bottom:40px;}
  .dr-hero h1{font-size:clamp(1.625rem,7.4vw,2.125rem);letter-spacing:-.7px;margin-bottom:14px;}
  .dr-hero h1 br{display:none;}
  .dr-hero-sub{font-size:0.9375rem;line-height:1.55;margin-bottom:22px;}
  .dr-hero-actions{gap:10px;}
  .dr-hero-actions .btn{flex:1 1 100%;justify-content:center;}
  .dr-hero-scrim{
    background:linear-gradient(180deg, rgba(0,22,46,.9) 0%, rgba(0,22,46,.8) 55%, rgba(0,22,46,.65) 100%);
  }

  .dr-section-head{padding-top:32px;padding-bottom:18px;}
  .dr-section-head h2{font-size:clamp(1.375rem,6vw,1.75rem);margin-bottom:10px;}
  .dr-section-head p{font-size:0.9063rem;}

  .dr-process-body{padding:34px var(--pad) 30px;}
  .dr-process-copy h2{font-size:1.4375rem;}
  .dr-process-copy h2 br{display:none;}
  .dr-process-copy p{font-size:0.875rem;}
  .dr-steps{grid-template-columns:minmax(0,1fr);row-gap:32px;margin-top:10px;}
  .dr-step::after{display:none;}
  .dr-step{padding:34px 15px 17px;}

  .dr-results-inner{padding-block:30px;row-gap:28px;}
  .dr-layers-copy h2{font-size:1.4375rem;}
  .dr-layers-copy p{font-size:0.875rem;}
  .dr-layers-copy .btn{width:100%;justify-content:center;white-space:normal;}
  .dr-ba-grid{grid-template-columns:minmax(0,1fr);gap:14px;}
  .dr-rule-head{font-size:1.1875rem;gap:10px;}
  .dr-rule-head i{width:24px;}

  .dr-signs-grid{grid-template-columns:minmax(0,1fr);gap:12px;}
  .dr-signs-lead,.dr-areas > p{font-size:0.875rem;}
  .dr-pins{column-gap:16px;}
  .dr-pins li{font-size:0.8438rem;}

  .dr-cta-copy h2{font-size:1.5rem;}
  .dr-cta-copy p{font-size:0.9063rem;}
  .dr-cta-actions .btn{flex:1 1 100%;justify-content:center;}
  .dr-cta-meta{flex-direction:column;gap:8px;}
  .dr-cta-meta li + li{border-left:0;margin-left:0;padding-left:0;}
}

/* Too narrow to hang labels off the leader lines: list them under the photo. */
@media (max-width:480px){
  .dr-diagram{padding-right:0;}
  .dr-diagram-labels{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 14px;margin-top:14px;
  }
  .dr-diagram-labels li{position:relative;left:auto;top:auto;transform:none;}
}

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