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

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

.bh-btn-outline{
  background:#fff;
  color:var(--navy);
  border:1.5px solid var(--navy);
  font-size:0.875rem;
  padding:11px 20px;
}
.bh-btn-blue{
  background:var(--icon-blue);
  color:#fff;
  font-size:0.875rem;
  padding:11px 20px;
}

/* ---------- Hero ----------
   bulkhead-hero.jpg is only the right-hand part of the comp photo (the left
   part sits under the headline), so it hugs the right edge and a mask feathers
   its left edge into the navy. The "Same Boats. New Beginnings." script is
   baked into the photo, so object-position is pinned right to keep it. */
.bh-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#001A36 0%,var(--navy-2) 40%,#0B3A66 100%);
}
.bh-hero-img{
  position:absolute;top:0;bottom:0;right:0;
  left:34%;
  width:66%;height:100%;
  object-fit:cover;
  object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 22%);
}
.bh-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,22,46,.98) 0%,
      rgba(0,22,46,.9) 34%,
      rgba(0,22,46,.45) 46%,
      rgba(0,22,46,0) 62%),
    linear-gradient(180deg, rgba(0,22,46,.25) 0%, rgba(0,22,46,0) 40%);
}
.bh-hero-inner{
  position:relative;z-index:2;
  padding-top:clamp(40px,4.4vw,72px);
  padding-bottom:clamp(40px,4.4vw,72px);
}
.bh-hero-content{max-width:640px;}
.bh-hero-eyebrow{margin-bottom:14px;font-size:0.7813rem;letter-spacing:2px;}
.bh-hero h1{
  font-size:clamp(1.875rem,3.3vw,3.125rem);
  letter-spacing:-1.1px;
  line-height:1.06;
  color:#fff;
  margin-bottom:18px;
}
.bh-hero h1 .accent{color:var(--accent);}
.bh-hero-sub{
  color:rgba(255,255,255,.88);
  font-size:1.0313rem;
  line-height:1.55;
  max-width:560px;
  margin-bottom:26px;
}
.bh-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.bh-hero-loc{
  display:flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.85);
  font-size:0.875rem;
}
.bh-hero-loc svg{color:var(--accent);flex:none;}

/* ---------- Why bulkheads matter ----------
   photo | copy | diagram card with the script caption. */
.bh-matter{background:var(--light-bg);}
.bh-matter-inner{
  display:grid;
  grid-template-columns:minmax(0,.36fr) minmax(0,.31fr) minmax(0,.33fr);
  align-items:center;
  column-gap:clamp(18px,1.6vw,30px);
  padding-block:clamp(22px,1.8vw,32px);
}
.bh-matter-photo img{
  width:100%;
  aspect-ratio:409/127;
  object-fit:cover;
  border-radius:4px;
  display:block;
}
.bh-matter-copy h2{
  font-size:clamp(1.375rem,1.7vw,1.875rem);
  letter-spacing:-.6px;
  line-height:1.12;
  margin-bottom:12px;
}
.bh-matter-copy p{
  font-size:0.875rem;
  line-height:1.6;
  color:var(--gray-text);
}
.bh-diagram{
  position:relative;
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  align-items:center;
  column-gap:8px;
}
.bh-diagram img{
  width:100%;
  aspect-ratio:295/125;
  object-fit:cover;
  border-radius:10px;
  display:block;
  box-shadow:0 14px 30px -22px rgba(0,38,75,.5);
}
.bh-diagram-script{
  font-family:var(--font-script);
  font-weight:700;
  font-size:clamp(1.0625rem,1.35vw,1.5rem);
  line-height:1.12;
  color:#1666A8;
  transform:rotate(-7deg);
}

/* ---------- Services grid ----------
   Reuses .fg-grid / .fg-card. The comp's photos are short letterbox crops,
   and each card's text sits beside the overlapping icon badge rather than
   under it — desktop only; the shared stacked layout takes over below. */
.bh-services{background:#fff;overflow:hidden;}
.bh-services-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:end;
  column-gap:clamp(24px,4vw,80px);
  padding-top:clamp(30px,2.6vw,44px);
  padding-bottom:clamp(16px,1.4vw,22px);
}
.bh-services-head h2,
.bh-signs-head h2,
.bh-results-head h2{
  font-size:clamp(1.375rem,1.7vw,1.875rem);
  letter-spacing:-.6px;
}
.bh-services-head > p{
  font-size:0.875rem;
  line-height:1.55;
  color:var(--gray-text);
  max-width:560px;
  justify-self:center;
}
.bh-services .fg-grid{padding-bottom:clamp(28px,2.4vw,40px);}
.bh-services .fg-card{border:1px solid #E6EFF7;}
@media (min-width:1241px){
  .bh-services .fg-card-media img{aspect-ratio:190/58;}
  .bh-services .fg-card-icon{left:10px;bottom:auto;top:calc(100% - 14px);width:40px;height:40px;}
  .bh-services .fg-card-body{padding:12px 14px 16px clamp(56px,3.4vw,62px);}
  .bh-services .fg-card-body h3{font-size:0.9375rem;margin-bottom:6px;}
  .bh-services .fg-card-body p{font-size:0.8125rem;line-height:1.5;margin-bottom:10px;}
  .bh-services .fg-card-link{font-size:0.8125rem;}
}

/* ---------- Process band ---------- */
.bh-process{
  position:relative;
  background:linear-gradient(100deg,var(--navy-2) 0%,var(--navy) 62%,#003463 100%);
  display:grid;
  grid-template-columns:minmax(240px,31%) minmax(0,1fr);
  align-items:stretch;
}
.bh-process-photo{
  position:relative;
  min-height:100%;
  clip-path:polygon(0 0, calc(100% - 38px) 0, 100% 50%, calc(100% - 38px) 100%, 0 100%);
}
.bh-process-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* The pull-quote is baked into the bottom-left of the photo. */
  object-position:10% center;
}
.bh-process-body{
  display:grid;
  grid-template-columns:minmax(260px,31%) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(20px,2.4vw,44px);
  padding:clamp(38px,3.2vw,52px) clamp(20px,3vw,56px) clamp(26px,2.4vw,40px) clamp(18px,1.4vw,28px);
}
.bh-process-copy .eyebrow{margin-bottom:12px;font-size:0.75rem;letter-spacing:2px;}
.bh-process-copy .eyebrow i{width:30px;}
.bh-process-copy h2{
  color:#fff;
  font-size:clamp(1.5rem,1.95vw,2.125rem);
  letter-spacing:-.8px;
  white-space:nowrap;
}
.bh-process-copy h2 .accent{color:var(--accent);}
.bh-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:30px;
  margin-top:18px;
}
.bh-step{
  position:relative;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:42px 14px 16px;
}
.bh-step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;right:-23px;
  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='M9 5l7 7-7 7' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity:.85;
}
.bh-step-num{
  position:absolute;top:-14px;left:-10px;
  width:30px;height:30px;
  border-radius:50%;
  background:var(--icon-blue);
  color:#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);
}
.bh-step-icon{
  position:absolute;top:-14px;left:50%;
  margin-left:-18px;
  width:36px;height:36px;
  border-radius:50%;
  background:#0A3563;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.bh-step h3{
  color:#fff;
  font-size:0.875rem;
  letter-spacing:-.2px;
  margin-bottom:6px;
}
.bh-step p{
  color:rgba(255,255,255,.72);
  font-size:0.7813rem;
  line-height:1.5;
}

/* ---------- Warning signs ---------- */
.bh-signs{background:var(--light-bg);}
.bh-signs > .bh-wide{padding-block:clamp(26px,2.4vw,40px);}
.bh-signs-head,
.bh-results-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:end;
  column-gap:clamp(24px,4vw,80px);
  margin-bottom:clamp(14px,1.4vw,22px);
}
.bh-signs-head > p{
  font-size:0.875rem;
  line-height:1.55;
  color:var(--gray-text);
  max-width:420px;
  justify-self:center;
}
.bh-photos-card{
  display:flex;align-items:center;gap:14px;
  background:#E6F3FD;
  border:1px solid #D0E6F7;
  border-radius:10px;
  padding:10px 12px 10px 16px;
}
.bh-photos-icon{flex:none;color:var(--navy);display:flex;}
.bh-photos-text strong{
  display:block;
  font-family:var(--font-head);
  font-size:0.875rem;
  color:var(--navy);
}
.bh-photos-text small{display:block;font-size:0.7813rem;color:var(--gray-text);}
.bh-signs-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
}
.bh-signs-grid li{
  display:flex;align-items:center;gap:12px;
  background:#fff;
  border:1px solid #E3EDF6;
  border-radius:10px;
  padding:14px 14px;
  box-shadow:0 10px 24px -22px rgba(0,38,75,.55);
}
.bh-sign-icon{
  flex:none;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--icon-bg);
  display:flex;align-items:center;justify-content:center;
}
.bh-signs-grid strong{
  display:block;
  font-family:var(--font-head);
  font-size:0.8438rem;
  color:var(--navy);
  margin-bottom:3px;
}
.bh-signs-grid small{display:block;font-size:0.7813rem;line-height:1.45;color:var(--gray-text);}

/* ---------- Before & after ---------- */
.bh-results{background:#fff;}
.bh-results > .bh-wide{padding-block:clamp(26px,2.4vw,40px);}
.bh-results-head{grid-template-columns:auto minmax(0,1fr);}
.bh-results-head > p{
  font-size:0.875rem;
  color:var(--gray-text);
  justify-self:end;
  text-align:right;
}
.bh-ba-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.2vw,18px);
}
.bh-ba-pair{
  margin:0;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 14px 30px -20px rgba(0,38,75,.6);
}
.bh-ba-pair img{
  width:100%;
  aspect-ratio:400/73;
  object-fit:cover;
  display:block;
}

/* ---------- Why us + areas ----------
   copy | features | areas panel. The areas panel bleeds to the viewport's
   right edge, so the left padding reproduces .bh-wide's content edge (see
   BUILDING-SERVICE-PAGES.md, "Why band"). */
.bh-why{
  background:linear-gradient(180deg,var(--light-bg) 0%,#fff 100%);
  border-top:1px solid #E6EFF7;
  overflow:hidden;
}
.bh-why-inner{
  --wide-pad:clamp(18px,2.6vw,44px);
  display:grid;
  grid-template-columns:minmax(290px,.9fr) minmax(0,1.3fr) minmax(0,1.1fr);
  align-items:stretch;
  padding-left:max(var(--wide-pad), calc((100% - 1760px) / 2 + var(--wide-pad)));
  padding-right:0;
}
.bh-why-copy{
  padding-block:clamp(22px,1.8vw,32px);
  padding-right:clamp(16px,1.6vw,28px);
  align-self:center;
}
.bh-why-copy h2{
  font-size:clamp(1.3125rem,1.55vw,1.75rem);
  letter-spacing:-.6px;
  margin-bottom:10px;
}
.bh-why-copy p{font-size:0.8125rem;line-height:1.55;color:var(--gray-text);}
.bh-why-features{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  column-gap:clamp(10px,1vw,18px);
  background:#fff;
  border-inline:1px solid #E3EDF6;
  padding:clamp(22px,1.8vw,32px) clamp(12px,1.2vw,22px);
}
.bh-why-features li{text-align:center;display:flex;flex-direction:column;align-items:center;}
.bh-why-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:10px;
}
.bh-why-features strong{
  font-family:var(--font-head);
  font-size:0.8125rem;
  color:var(--navy);
  margin-bottom:4px;
}
.bh-why-features small{font-size:0.75rem;line-height:1.45;color:var(--gray-text);}
.bh-areas{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;
  background:#EEF6FD;
}
.bh-areas-copy{padding:clamp(20px,1.8vw,30px) 0 clamp(20px,1.8vw,30px) clamp(20px,2.4vw,40px);position:relative;z-index:1;}
.bh-areas-copy .eyebrow{color:var(--icon-blue);font-size:0.6563rem;margin-bottom:8px;}
.bh-areas-copy h2{
  font-size:clamp(1.125rem,1.3vw,1.5rem);
  letter-spacing:-.4px;
  line-height:1.2;
  margin-bottom:10px;
}
.bh-areas-copy p{font-size:0.7813rem;line-height:1.5;color:var(--gray-text);}
.bh-areas-map{align-self:stretch;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 26%);
}
.bh-areas-map img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* Largo sits left, Tampa right: 65% keeps both pins in a tall cell. */
  object-position:65% center;
}

/* ---------- CTA band ----------
   Boat photo on the left, palms on the right, copy and buttons between. */
.bh-cta{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,var(--navy-2) 0%,var(--navy) 60%,#0A2F58 100%);
}
.bh-cta-boat,.bh-cta-palms{
  position:absolute;top:0;height:100%;
  object-fit:cover;
}
.bh-cta-boat{
  left:0;width:36%;
  object-position:left center;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 55%,transparent 100%);
}
.bh-cta-palms{
  right:0;width:14%;
  object-position:right center;
  opacity:.8;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 60%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 60%);
}
.bh-cta-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,auto) auto;
  align-items:center;
  justify-content:center;
  column-gap:clamp(24px,3.4vw,60px);
  padding:clamp(26px,2.4vw,40px) 11% clamp(26px,2.4vw,40px) 34%;
}
.bh-cta-copy h2{
  color:#fff;
  font-size:clamp(1.375rem,1.7vw,1.875rem);
  letter-spacing:-.6px;
  margin-bottom:6px;
}
.bh-cta-copy p{color:rgba(255,255,255,.82);font-size:0.9063rem;line-height:1.5;max-width:460px;}
.bh-cta-actions{display:flex;gap:10px;flex-wrap:wrap;}
@media (min-width:1401px){
  .bh-cta-copy h2{white-space:nowrap;}
}

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

@media (max-width:1500px){
  .bh-why-inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);padding-right:var(--wide-pad);}
  .bh-areas{grid-column:1 / -1;margin-right:calc(-1 * var(--wide-pad));margin-bottom:0;}
  .bh-why-features{border-right:0;}
  .bh-signs-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (max-width:1400px){
  .bh-matter-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:22px;}
  .bh-diagram{grid-column:1 / -1;max-width:760px;justify-self:center;width:100%;}
  .bh-signs-head{grid-template-columns:minmax(0,1fr) auto;row-gap:12px;}
  .bh-signs-head > p{grid-column:1;grid-row:2;justify-self:start;max-width:620px;}
  .bh-photos-card{grid-column:2;grid-row:1 / span 2;align-self:center;}
  .bh-cta-inner{grid-template-columns:minmax(0,1fr);row-gap:16px;padding-right:var(--pad);}
}

@media (max-width:1240px){
  .bh-services-head{grid-template-columns:minmax(0,1fr) auto;row-gap:10px;}
  .bh-services-head > p{grid-column:1;grid-row:2;justify-self:start;}
  .bh-services-head .btn{grid-column:2;grid-row:1 / span 2;align-self:center;}
  .bh-process{grid-template-columns:minmax(200px,28%) minmax(0,1fr);}
  .bh-process-body{grid-template-columns:minmax(0,1fr);row-gap:26px;}
  .bh-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px;}
  .bh-step:nth-child(2)::after{display:none;}
  .bh-why-inner{grid-template-columns:minmax(0,1fr);}
  .bh-why-copy{padding-right:0;padding-bottom:6px;}
  .bh-why-features{border:1px solid #E3EDF6;border-radius:12px;margin-bottom:clamp(22px,2vw,30px);}
}

@media (max-width:1024px){
  .bh-hero-img{left:0;width:100%;-webkit-mask-image:none;mask-image:none;}
  .bh-hero-scrim{
    background:linear-gradient(90deg, rgba(0,22,46,.95) 0%, rgba(0,22,46,.85) 55%, rgba(0,22,46,.5) 100%);
  }
  .bh-process{grid-template-columns:minmax(0,1fr);}
  .bh-process-photo{clip-path:none;aspect-ratio:394/124;min-height:0;}
  .bh-ba-grid{grid-template-columns:minmax(0,1fr);max-width:720px;}
  .bh-results-head{grid-template-columns:minmax(0,1fr);row-gap:6px;}
  .bh-results-head > p{justify-self:start;text-align:left;}
  .bh-cta-boat{width:100%;opacity:.3;-webkit-mask-image:none;mask-image:none;}
  .bh-cta-palms{display:none;}
  .bh-cta-inner{padding-inline:var(--pad);}
}

@media (max-width:820px){
  .bh-hero-sub{font-size:0.9688rem;}
  .bh-matter-inner{grid-template-columns:minmax(0,1fr);}
  .bh-diagram{grid-column:auto;}
  .bh-signs-head{grid-template-columns:minmax(0,1fr);}
  .bh-signs-head > p{grid-row:auto;}
  .bh-photos-card{grid-column:auto;grid-row:auto;flex-wrap:wrap;}
  .bh-signs-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bh-why-features{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;}
}

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

  .bh-matter-copy h2 br{display:none;}
  .bh-diagram{grid-template-columns:minmax(0,1fr);row-gap:10px;}
  .bh-diagram-script{transform:none;text-align:center;}

  .bh-services-head{grid-template-columns:minmax(0,1fr);}
  .bh-services-head .btn{grid-column:auto;grid-row:auto;justify-self:start;}

  .bh-process-body{padding:32px var(--pad) 28px;}
  .bh-process-copy h2{white-space:normal;font-size:1.5rem;}
  .bh-steps{grid-template-columns:minmax(0,1fr);row-gap:30px;margin-top:8px;}
  .bh-step::after{display:none;}
  .bh-step-num{left:10px;}

  .bh-photos-card .btn{flex:1 1 100%;justify-content:center;}
  .bh-signs-grid{grid-template-columns:minmax(0,1fr);gap:10px;}
  .bh-why-features{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px;}
  .bh-areas{grid-template-columns:minmax(0,1fr);margin-left:calc(-1 * var(--wide-pad));}
  .bh-areas-copy{padding:24px var(--wide-pad);}
  .bh-areas-map{aspect-ratio:212/102;-webkit-mask-image:none;mask-image:none;}
  .bh-areas-copy h2 br{display:none;}

  .bh-cta-actions .btn{flex:1 1 100%;justify-content:center;}
}

@media (max-width:400px){
  .bh-why-features{grid-template-columns:minmax(0,1fr);}
}


/* ---------- Four watertight bulkheads + construction/tabbing (merged from the legacy site) ----------
   .bh-four is a light band between the services grid and the dark process
   band: copy and a "what wears a bulkhead out" card on the left, four numbered
   bulkhead cards on the right. .bh-build is a white band between the process
   band and the signs band: copy and fact tiles on the left, the 1977 Bruno &
   Stillman case study on the right. */
.bh-four{background:var(--light-bg);border-top:1px solid #E6EFF7;}
.bh-four-inner{
  display:grid;
  grid-template-columns:minmax(300px,36%) minmax(0,1fr);
  column-gap:clamp(24px,3vw,56px);
  align-items:start;
  padding-block:clamp(30px,3vw,48px);
}
.bh-four-copy h2,
.bh-build-copy h2{
  font-size:clamp(1.5rem,2vw,1.9375rem);
  letter-spacing:-.7px;
  line-height:1.12;
  margin-bottom:12px;
}
.bh-four-copy > p,
.bh-build-copy > p{font-size:0.9375rem;line-height:1.6;color:var(--gray-text);margin-bottom:16px;}
.bh-four-attack{
  background:#fff;
  border:1px solid #E3EDF6;
  border-radius:12px;
  padding:16px 18px;
}
.bh-four-attack strong{
  display:block;
  font-family:var(--font-head);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--icon-blue);
  margin-bottom:10px;
}
.bh-four-attack li{position:relative;padding-left:18px;font-size:0.875rem;line-height:1.4;color:var(--navy);}
.bh-four-attack li + li{margin-top:7px;}
.bh-four-attack li::before{
  content:"";
  position:absolute;left:0;top:.5em;
  width:8px;height:8px;border-radius:50%;
  background:var(--icon-blue);
}
.bh-four-list{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.bh-four-list li{
  display:flex;align-items:flex-start;gap:14px;
  background:#fff;
  border:1px solid #E3EDF6;
  border-radius:12px;
  padding:18px;
  box-shadow:0 10px 24px -22px rgba(0,38,75,.55);
}
.bh-four-num{
  flex:none;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1rem;
  display:flex;align-items:center;justify-content:center;
}
.bh-four-list h3{font-size:1rem;letter-spacing:-.2px;margin-bottom:2px;}
.bh-four-list small{
  display:block;
  font-family:var(--font-head);
  font-weight:600;
  font-size:0.75rem;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--icon-blue);
  margin-bottom:8px;
}
.bh-four-list p{font-size:0.8438rem;line-height:1.5;color:var(--gray-text);}

.bh-build{background:#fff;}
.bh-build-inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  column-gap:clamp(24px,3vw,56px);
  align-items:center;
  padding-block:clamp(30px,3vw,48px);
}
.bh-build-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:4px;
}
.bh-build-facts li{
  background:var(--light-bg);
  border:1px solid #E3EDF6;
  border-radius:10px;
  padding:12px 14px;
}
.bh-build-facts strong{display:block;font-family:var(--font-head);font-size:0.875rem;color:var(--navy);margin-bottom:2px;}
.bh-build-facts small{display:block;font-size:0.7813rem;line-height:1.4;color:var(--gray-text);}
.bh-build-case{
  margin:0;
  background:var(--navy);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 40px -26px rgba(0,38,75,.6);
}
.bh-build-case img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.bh-build-case figcaption{padding:18px 20px 22px;color:#fff;}
.bh-build-tag{
  display:inline-block;
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.6875rem;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
}
.bh-build-case strong{display:block;font-family:var(--font-head);font-size:1.0625rem;line-height:1.2;margin-bottom:6px;}
.bh-build-case p{font-size:0.8438rem;line-height:1.5;color:rgba(255,255,255,.8);}

@media (max-width:1240px){
  .bh-four-inner,.bh-build-inner{grid-template-columns:minmax(0,1fr);row-gap:24px;}
  .bh-build-case{max-width:640px;}
}
@media (max-width:640px){
  .bh-four-inner,.bh-build-inner{padding-block:30px;}
  .bh-four-copy h2 br,.bh-build-copy h2 br{display:none;}
  .bh-four-list,.bh-build-facts{grid-template-columns:minmax(0,1fr);gap:10px;}
}