/* ==========================================================================
   About — page-specific styles. Loads after styles.css and reuses its tokens,
   buttons, eyebrows, header, footer and contact form. Everything here is
   prefixed .ab-. Built 1:1 to the "A Family Legacy on the Water" comp
   (1024px, drawn at 1536): 1 comp px = 1.5 page px = 0.0977vw at 1536.
   Font sizes are rem/vw so the site-wide text-size control scales them.
   ========================================================================== */

/* The comp runs its bands nearly edge to edge: a 1760px frame whose content
   edge sits 59px in at 1536 (the comp's 39px). */
.ab-wide{
  max-width:1760px;
  margin-inline:auto;
  padding-inline:clamp(18px,3.84vw,66px);
}
.ab-eyebrow{
  color:var(--icon-blue);
  font-size:clamp(0.6875rem,.78vw,0.8125rem);
  letter-spacing:2.4px;
  margin-bottom:9px;
}
.ab-eyebrow i{display:none;}

/* ---------- Hero ----------
   ab-hero.jpg is the comp's whole band above the trust strip (its copy
   painted out); the copy sits over it. The trust strip is solid navy in the
   comp, so it is its own band below the photo. */
.ab-hero{
  --ab-indent:78px;                 /* eyebrow rule (63px) + its gap (15px) */
  background:#011A34;
}
.ab-hero-main{position:relative;overflow:hidden;background:#02213F;}
.ab-hero-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:72% 30%;
}
.ab-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,22,46,.42) 0%, rgba(0,22,46,.22) 36%, rgba(0,22,46,0) 52%);
}
.ab-hero-inner{
  position:relative;z-index:2;
  padding-top:clamp(28px,2.93vw,45px);
  padding-bottom:clamp(12px,.8vw,12px);
}
.ab-hero-content{max-width:700px;padding-left:var(--ab-indent);}
.ab-hero-eyebrow{
  font-size:clamp(0.6875rem,.85vw,0.875rem);
  letter-spacing:2.4px;
  gap:15px;
  margin-left:calc(-1 * var(--ab-indent));
  margin-bottom:10px;
}
.ab-hero-eyebrow i{width:63px;}
.ab-hero h1{
  font-size:clamp(2rem,4.45vw,4.3125rem);
  line-height:.96;
  letter-spacing:-1.6px;
  color:#fff;
  margin-bottom:clamp(12px,1vw,16px);
}
.ab-hero h1 .accent{color:var(--accent);}
.ab-hero-sub{
  color:rgba(255,255,255,.92);
  font-size:clamp(0.9375rem,1.22vw,1.1875rem);
  line-height:1.39;
  max-width:618px;
  margin-bottom:clamp(16px,1.5vw,23px);
}
.ab-hero-actions{display:flex;gap:clamp(12px,1.17vw,18px);flex-wrap:wrap;}
.ab-hero-actions .btn,.ab-cta-actions .btn{
  padding:clamp(13px,1.04vw,16px) clamp(24px,2vw,32px);
  font-size:clamp(0.9063rem,1.02vw,1.0313rem);
}
.ab-hero-actions .btn-outline-light,.ab-cta-actions .btn-outline-light{
  background:rgba(0,22,46,.5);
  border-color:rgba(255,255,255,.9);
}
.ab-trust-bar{background:linear-gradient(180deg,#02213F 0%,#011A34 100%);}
.ab-trust{
  display:grid;
  grid-template-columns:18.2vw 25.1vw 21.2vw auto;
  align-items:center;
  gap:12px 20px;
  padding-top:clamp(10px,.85vw,13px);
  padding-bottom:clamp(10px,.85vw,13px);
  padding-left:calc(clamp(18px,3.84vw,66px) + var(--ab-indent));
}
.ab-trust li{display:flex;align-items:center;gap:clamp(10px,.85vw,13px);color:#fff;}
.ab-trust-icon{flex:none;display:flex;color:var(--accent);}
.ab-trust-icon svg{width:clamp(28px,2.3vw,36px);height:auto;}
.ab-trust strong{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(0.875rem,1.04vw,1rem);line-height:1.25;}
.ab-trust small{display:block;font-size:clamp(0.8125rem,.98vw,0.9375rem);line-height:1.3;color:rgba(255,255,255,.9);}

/* ---------- Our story: copy | John's Pass photo with the home-port card ---------- */
.ab-story{background:#fff;}
.ab-story-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) min(52.3vw,803px);
  align-items:start;
  column-gap:clamp(16px,1.3vw,20px);
  padding-top:clamp(22px,1.85vw,28px);
  padding-bottom:clamp(22px,1.9vw,30px);
}
.ab-story-copy{max-width:604px;padding-top:2px;}
.ab-story-copy h2,.ab-leader-copy h2,.ab-community h2{
  line-height:.96;
  letter-spacing:-1px;
}
.ab-story-copy h2{font-size:clamp(1.75rem,3.32vw,3.1875rem);margin-bottom:clamp(4px,.3vw,5px);}
.ab-story-copy .ab-eyebrow{margin-bottom:6px;}
.ab-story-copy h2 .accent,.ab-leader-copy h2 .accent{color:var(--icon-blue);}
.ab-story-copy p{
  font-size:clamp(0.9375rem,1.14vw,1.125rem);
  line-height:1.42;
  color:#27456A;
  margin-bottom:clamp(16px,1.56vw,24px);
}
.ab-story-copy p:last-child{margin-bottom:0;}
.ab-story-photo{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 40px -26px rgba(0,38,75,.45);
}
.ab-story-photo img{width:100%;aspect-ratio:1072/482;object-fit:cover;}
.ab-port-card{
  position:absolute;right:2px;bottom:12px;
  display:flex;align-items:center;gap:clamp(10px,.9vw,14px);
  min-width:262px;min-height:126px;
  padding:clamp(14px,1.2vw,18px) clamp(16px,1.4vw,22px);
  background:rgba(255,255,255,.96);
  border-radius:12px;
  box-shadow:0 14px 34px -14px rgba(0,22,46,.55);
}
.ab-port-pin{flex:none;display:flex;color:var(--icon-blue);}
.ab-port-pin svg{width:clamp(26px,2.1vw,32px);height:auto;}
.ab-port-text{display:grid;row-gap:2px;}
.ab-port-text small{font-size:clamp(0.75rem,.85vw,0.8125rem);color:var(--gray-text);}
.ab-port-text strong{font-family:var(--font-head);font-weight:800;font-size:clamp(1.0625rem,1.3vw,1.25rem);color:var(--navy);letter-spacing:-.3px;line-height:1.15;}
.ab-port-text > span{font-size:clamp(0.75rem,.85vw,0.8125rem);line-height:1.3;color:var(--gray-text);}

/* ---------- Meet our leader: photo | copy | credential cards ----------
   The comp sets this band on a wider frame than the others (35px left,
   43px right at 1536). */
.ab-leader{background:var(--light-bg);}
.ab-leader-inner{
  max-width:1760px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:min(27.3vw,420px) minmax(0,1fr) min(27.5vw,423px);
  column-gap:clamp(16px,1.6vw,25px);
  align-items:start;
  padding:clamp(14px,1.17vw,18px) clamp(18px,2.8vw,43px) clamp(16px,1.56vw,24px) clamp(18px,2.3vw,35px);
}
.ab-leader-photo{
  border-radius:12px;overflow:hidden;
  box-shadow:0 18px 40px -26px rgba(0,38,75,.45);
}
.ab-leader-photo img{width:100%;aspect-ratio:560/614;object-fit:cover;}
.ab-leader-copy{padding-top:clamp(8px,1vw,15px);padding-right:clamp(0px,.5vw,8px);}
.ab-leader-copy h2,.ab-community h2{font-size:clamp(1.5rem,2.34vw,2.25rem);}
.ab-leader-copy h2{margin-bottom:clamp(12px,1.17vw,18px);}
.ab-leader-copy p,.ab-community > p{
  font-size:clamp(0.875rem,.93vw,0.9375rem);
  line-height:1.48;
  color:#27456A;
  margin-bottom:clamp(14px,1.24vw,19px);
}
.ab-leader-copy p{max-width:560px;}
.ab-leader-copy p:last-child{margin-bottom:0;}
.ab-cred-list{display:grid;row-gap:clamp(10px,.85vw,13px);padding-top:clamp(0px,.1vw,2px);}
.ab-cred{
  position:relative;
  min-height:clamp(120px,9.25vw,142px);
  padding:clamp(9px,.65vw,10px) 42% clamp(8px,.55vw,8px) clamp(16px,1.3vw,20px);
  background:#fff;
  border:1px solid #E1ECF5;
  border-radius:12px;
  box-shadow:0 12px 30px -22px rgba(0,38,75,.4);
  overflow:hidden;
}
.ab-cred-icon{
  position:absolute;left:clamp(16px,1.3vw,20px);top:clamp(9px,.65vw,10px);
  display:flex;color:var(--navy);
}
.ab-cred-icon svg{width:clamp(26px,2.1vw,32px);height:auto;}
.ab-cred h3{
  font-size:clamp(0.9688rem,1.17vw,1.125rem);
  line-height:1.15;
  letter-spacing:-.3px;
  min-height:clamp(26px,2.1vw,32px);
  padding-left:clamp(36px,2.95vw,45px);
  display:flex;align-items:center;
  margin-bottom:clamp(7px,.6vw,9px);
}
.ab-cred p{
  font-size:clamp(0.8125rem,.91vw,0.875rem);
  line-height:1.22;
  color:var(--gray-text);
  max-width:214px;
}
.ab-cred img{
  position:absolute;right:0;top:0;
  height:100%;width:47%;
  object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
}

/* ---------- Local community: copy | city pins ----------
   The map bleeds to the right edge behind the end of the band. The band is
   at least the map's 340/510 height (its width x 1.5) so the crop never
   cuts off a city. */
.ab-family{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FEFEFE 0%,#F9FBFD 55%,#ECF6FD 100%);
  --ab-map-w:clamp(190px,16.6vw,255px);
}
.ab-family-inner{
  position:relative;
  max-width:1760px;
  margin-inline:auto;
  min-height:calc(var(--ab-map-w) * 1.5);
  display:grid;
  grid-template-columns:min(34vw,520px) minmax(0,1fr);
  column-gap:clamp(32px,4.2vw,72px);
  align-items:center;
  padding:clamp(24px,2.4vw,36px) calc(var(--ab-map-w) + clamp(16px,2vw,32px)) clamp(24px,2.4vw,36px) clamp(18px,3.84vw,66px);
}
.ab-community h2{margin-bottom:clamp(10px,.9vw,14px);}
.ab-community > p{max-width:520px;margin-bottom:0;}
.ab-pins{
  display:grid;
  grid-template-columns:repeat(3,max-content);
  column-gap:clamp(28px,3.6vw,60px);
  row-gap:clamp(12px,1.05vw,16px);
}
.ab-pins li{
  display:flex;align-items:center;gap:clamp(10px,1vw,16px);
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(0.875rem,1.04vw,1rem);
  color:var(--navy);
  line-height:1.3;
}
.ab-pins li::before{
  content:"";flex:none;width:clamp(13px,1vw,16px);height:clamp(17px,1.3vw,20px);
  background:#2B9BF4;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 2 14 20'%3E%3Cpath fill-rule='evenodd' d='M12 22s7-7.4 7-12.6A7 7 0 0 0 5 9.4C5 14.6 12 22 12 22zm0-10.2a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 2 14 20'%3E%3Cpath fill-rule='evenodd' d='M12 22s7-7.4 7-12.6A7 7 0 0 0 5 9.4C5 14.6 12 22 12 22zm0-10.2a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ab-map{
  position:absolute;right:0;top:0;bottom:0;
  height:100%;width:var(--ab-map-w);
  object-fit:cover;object-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 24%);
}

/* ---------- CTA band: the comp's band (boat left, copy painted out) ---------- */
.ab-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(100deg,#0B4D7A 0%,#012145 45%,#00203F 100%);
}
.ab-cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center;}
.ab-cta-inner{
  position:relative;z-index:1;
  max-width:1760px;
  margin-inline:auto;
  min-height:clamp(200px,17.8vw,273px);
  padding-top:clamp(28px,2.6vw,40px);
  padding-bottom:clamp(28px,2.9vw,45px);
  /* The copy starts just past the boat (the comp's x 413 of 1024). */
  padding-left:max(clamp(18px,3.84vw,66px), calc(45.1vw - max(0px, (100vw - 1760px) / 2)));
  padding-right:clamp(18px,3.84vw,66px);
}
.ab-cta-eyebrow{
  font-size:clamp(0.6875rem,.85vw,0.875rem);
  letter-spacing:2.4px;
  gap:25px;
  margin-left:-73px;
  margin-bottom:clamp(3px,.3vw,5px);
}
.ab-cta-eyebrow i{width:48px;}
.ab-cta-eyebrow span{color:#5ECDFA;}
.ab-cta h2{
  color:#fff;
  font-size:clamp(1.5rem,2.48vw,2.375rem);
  line-height:1.1;
  letter-spacing:-1px;
  margin-bottom:clamp(3px,.3vw,5px);
}
.ab-cta p{
  color:rgba(255,255,255,.92);
  font-size:clamp(0.9375rem,1.17vw,1.125rem);
  line-height:1.5;
  max-width:690px;
  margin-bottom:clamp(12px,1vw,15px);
}
.ab-cta-actions{display:flex;gap:clamp(10px,.75vw,12px);flex-wrap:wrap;}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1240px){
  .ab-trust{grid-template-columns:repeat(4,auto);justify-content:space-between;padding-left:clamp(18px,3.84vw,66px);}
  /* Leader: photo | copy on top, the three credentials in a row below. */
  .ab-leader-inner{grid-template-columns:min(32vw,420px) minmax(0,1fr);row-gap:22px;}
  .ab-cred-list{grid-column:1 / -1;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px;}
  .ab-cred{min-height:150px;}
  /* Community: copy over the pins, the map still bleeding right. */
  .ab-family-inner{grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,2vw,24px);align-content:center;}
  .ab-cta-inner{padding-left:clamp(200px,42vw,600px);}
  .ab-cta-eyebrow{margin-left:0;}
}

@media (max-width:1024px){
  .ab-hero{--ab-indent:0px;}
  .ab-hero-img{object-position:78% 20%;}
  .ab-hero-scrim{background:linear-gradient(90deg, rgba(0,22,46,.9) 0%, rgba(0,22,46,.74) 55%, rgba(0,22,46,.35) 100%);}
  .ab-hero-inner{padding-top:40px;padding-bottom:30px;}
  .ab-hero-eyebrow{margin-left:0;}
  .ab-hero-eyebrow i{width:40px;}
  .ab-trust{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:clamp(24px,6vw,64px);}
  .ab-story-inner{grid-template-columns:minmax(0,1fr);row-gap:26px;padding-block:34px 36px;}
  .ab-story-copy{max-width:none;}
  .ab-story-photo img{aspect-ratio:2/1;}
  .ab-leader-inner{grid-template-columns:minmax(0,1fr);padding-inline:clamp(18px,3.84vw,66px);padding-block:32px;}
  .ab-leader-photo{max-width:420px;}
  .ab-leader-copy{padding-top:0;}
  .ab-leader-copy p{max-width:none;}
  /* Community: the map drops below the pins. */
  .ab-family-inner{min-height:0;row-gap:22px;padding:30px clamp(18px,3.84vw,66px) 34px;}
  .ab-community > p{max-width:none;}
  .ab-map{position:static;width:100%;max-width:420px;height:auto;aspect-ratio:340/300;object-position:center 30%;border-radius:12px;-webkit-mask-image:none;mask-image:none;}
  .ab-cta-bg{opacity:.55;object-position:20% center;}
  .ab-cta-inner{padding-left:clamp(18px,3.84vw,66px);}
}

@media (max-width:820px){
  .ab-cred-list{grid-template-columns:minmax(0,1fr);}
  .ab-cred{min-height:130px;}
  .ab-cred p{max-width:none;padding-right:8px;}
}

@media (max-width:640px){
  .ab-hero-inner{padding-top:34px;padding-bottom:26px;}
  .ab-hero-eyebrow{font-size:0.6875rem;letter-spacing:1.6px;gap:10px;}
  .ab-hero-eyebrow i{width:24px;}
  .ab-hero h1{font-size:clamp(1.9375rem,9vw,2.5rem);letter-spacing:-.9px;}
  .ab-hero-sub{font-size:0.9375rem;line-height:1.5;}
  .ab-hero-scrim{background:linear-gradient(180deg, rgba(0,22,46,.88) 0%, rgba(0,22,46,.8) 55%, rgba(0,22,46,.7) 100%);}
  .ab-hero-actions,.ab-cta-actions{width:100%;gap:10px;}
  .ab-hero-actions .btn,.ab-cta-actions .btn{flex:1 1 100%;justify-content:center;}
  .ab-trust{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;}
  .ab-story-copy h2{font-size:clamp(1.625rem,7.6vw,2rem);}
  .ab-story-photo img{aspect-ratio:3/2;}
  /* Stays over the corner: it hides the spot where the comp's card was painted out. */
  .ab-port-card{right:8px;bottom:8px;min-width:0;min-height:0;padding:10px 14px;gap:10px;}
  .ab-port-pin svg{width:22px;}
  .ab-leader-copy h2,.ab-community h2{font-size:clamp(1.4375rem,6.6vw,1.75rem);}
  .ab-cred{padding-right:46%;}
  .ab-pins{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ab-pins-last{grid-column:2;}
  .ab-map{max-width:none;aspect-ratio:340/320;}
  .ab-cta-inner{padding-block:30px;}
  .ab-cta h2{font-size:clamp(1.4375rem,6.6vw,1.75rem);}
  .ab-cta p{font-size:0.9375rem;}
}

@media (max-width:400px){
  .ab-trust{grid-template-columns:minmax(0,1fr);}
  .ab-pins{grid-template-columns:minmax(0,1fr);}
  .ab-pins-last{grid-column:auto;}
  .ab-cred{padding-right:40%;}
}