/* Coastal-living reference composition integrated into the 1900px homepage frame.
   The 1659 x 948 text-free plate supplies the watercolor/photo treatment, button ring,
   stat panel, icons, and dividers. All words remain live, selectable HTML. */

.ix-sec{
  --paper:#faf6ef;
  position:relative;
  width:100%;
  margin:0;
  padding:150px 0 42px;
  overflow:hidden;
  background:var(--paper);
}

.ix-frame{
  width:min(100%,1900px);
  margin:0 auto;
  padding:0;
}

.ix-slot{
  position:relative;
  width:100%;
  aspect-ratio:1659/948;
  overflow:hidden;
  container-type:inline-size;
}

.coast{
  --u:calc(100cqw / 1659);
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:#0b2f4e;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}

.coast__img{
  position:absolute;
  z-index:0;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* Feather every outside edge into the page cream so the plate never reveals a seam. */
.coast::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(to right,var(--paper) 0,rgba(250,246,239,.88) calc(10 * var(--u)),rgba(250,246,239,.34) calc(31 * var(--u)),rgba(250,246,239,0) calc(66 * var(--u))),
    linear-gradient(to left,var(--paper) 0,rgba(250,246,239,.88) calc(10 * var(--u)),rgba(250,246,239,.34) calc(31 * var(--u)),rgba(250,246,239,0) calc(66 * var(--u))),
    linear-gradient(to bottom,var(--paper) 0,rgba(250,246,239,.82) calc(13 * var(--u)),rgba(250,246,239,.28) calc(42 * var(--u)),rgba(250,246,239,0) calc(78 * var(--u))),
    linear-gradient(to top,var(--paper) 0,rgba(250,246,239,.72) 24%,rgba(250,246,239,.2) 62%,rgba(250,246,239,0) 100%) left bottom/calc(158 * var(--ux,var(--u))) calc(34 * var(--u)) no-repeat,
    linear-gradient(to top,var(--paper) 0,rgba(250,246,239,.72) 24%,rgba(250,246,239,.2) 62%,rgba(250,246,239,0) 100%) right bottom/calc(158 * var(--ux,var(--u))) calc(34 * var(--u)) no-repeat;
}

.coast__kicker,
.coast__title,
.coast__lead,
.coast__more,
.coast__stats{
  position:absolute;
  z-index:2;
  margin:0;
  user-select:text;
  -webkit-user-select:text;
}

.coast__kicker{
  left:calc(111 * var(--u));
  top:calc(126.5 * var(--u));
  display:flex;
  align-items:center;
  gap:calc(18 * var(--u));
  color:#9c8268;
  font:400 calc(12.959 * var(--u))/1 "Univers Next",Arial,sans-serif;
  letter-spacing:calc(5.1 * var(--u));
  text-transform:uppercase;
  white-space:nowrap;
  -webkit-text-stroke:calc(.28 * var(--u)) currentColor;
}

/* The rule is already painted into the plate; this keeps the exact text seat. */
.coast__kicker i{
  display:block;
  width:calc(50 * var(--u));
  height:1px;
  flex:none;
  opacity:0;
}

/* Same display voices as the hero: Bauer Bodoni for the formal lines,
   Snell Roundhand in sand for the accent word. */
.coast__title{
  left:calc(148.4 * var(--u));
  top:calc(150 * var(--u));
  color:#073b57;
  font:400 calc(78 * var(--u))/.99 "PHA Bauer Bodoni",Georgia,serif;
  letter-spacing:calc(-.78 * var(--u));
}

.coast__title span{
  display:block;
  white-space:nowrap;
}

.coast__title em{
  display:inline-block;
  margin-left:calc(6 * var(--u));
  color:#917658;
  font:400 calc(86 * var(--u))/.72 "PHA Snell Roundhand",Georgia,serif;
  font-style:normal;
  letter-spacing:0;
  vertical-align:calc(-1 * var(--u));
  transform:rotate(-1.5deg);
  transform-origin:left center;
  -webkit-text-stroke:calc(.2 * var(--u)) currentColor;
}

.coast__lead{
  left:calc(148.4 * var(--u));
  top:calc(452 * var(--u));
  width:calc(505 * var(--u));
  max-width:none;
  color:#0f2e52;
  font:400 calc(22 * var(--u))/calc(27 * var(--u)) "PHA Newsreader",Georgia,serif;
  letter-spacing:calc(.12 * var(--u));
}

.coast__more{
  left:calc(111 * var(--u));
  top:calc(577 * var(--u));
  display:flex;
  align-items:center;
  width:calc(243 * var(--u));
  height:calc(56 * var(--u));
  padding:0 calc(42 * var(--u)) 0 calc(34 * var(--u));
  border:0;
  border-radius:999px;
  color:#0a2f55;
  font:400 calc(22.36 * var(--u))/1 "PHA Newsreader",Georgia,serif;
  letter-spacing:calc(-.6 * var(--u));
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .2s ease;
}

.coast__more::after{
  content:"";
  position:absolute;
  right:calc(30 * var(--u));
  top:50%;
  width:calc(8.5 * var(--u));
  height:calc(14 * var(--u));
  border-top:calc(2 * var(--u)) solid currentColor;
  border-right:calc(2 * var(--u)) solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}

.coast__more:hover{background:rgba(10,47,85,.06)}
.coast__more:focus-visible{outline:2px solid #0a2f55;outline-offset:4px}

.coast__stats{
  left:0;
  top:calc(807.5 * var(--u));
  width:100%;
  height:calc(76 * var(--u));
  display:block;
  padding:0;
  list-style:none;
  text-align:center;
}

.coast__stats::before,
.coast__stats li+li::before,
.coast__stat-icon{display:none}

.coast__stats li{
  position:absolute;
  top:0;
  z-index:2;
  display:flex;
  width:calc(300 * var(--u));
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  transform:translateX(-50%);
}

.coast__stats li:nth-child(1){left:calc(342 * var(--u))}
.coast__stats li:nth-child(2){left:calc(654 * var(--u))}
.coast__stats li:nth-child(3){left:calc(992 * var(--u))}
.coast__stats li:nth-child(4){left:calc(1303 * var(--u))}

.coast__stats b{
  display:block;
  color:#0a2f50;
  font:550 calc(40.32 * var(--u))/1 "PHA Newsreader",Georgia,serif;
  letter-spacing:calc(-2.4 * var(--u));
}

.coast__stats small{
  display:block;
  margin-top:calc(8 * var(--u));
  max-width:calc(285 * var(--u));
  color:#85766a;
  font:400 calc(11.55 * var(--u))/1.35 "Univers Next",Arial,sans-serif;
  letter-spacing:calc(1.45 * var(--u));
  text-transform:uppercase;
}

@media (max-width:1100px){
  .ix-sec{padding-bottom:36px}
}

@media (max-width:760px){
  .ix-sec{padding-top:150px;padding-bottom:28px}
}

@media (prefers-reduced-motion:reduce){
  .coast__more{transition:none}
}