/* Homepage intro. 100% copy of intro-mock.
   Hero content is the 1900 frame with the same side margins as .hv.
   "Coastal" (comp x=91) sits on the left edge of that column.
   The solid artwork ends at comp x=1616, on the right edge (the Menu).
   The plate's cream and the right-edge fade hang past both sides. */

@font-face{font-family:'Newsreader';src:url('../../intro-mock/fonts/newsreader-var.woff2') format('woff2');font-weight:200 800;font-display:block}
@font-face{font-family:'Inter';src:url('../../intro-mock/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-display:block}
@font-face{font-family:'Inter Tight';src:url('../../intro-mock/fonts/inter-tight-var.woff2') format('woff2');font-weight:100 900;font-display:block}
@font-face{font-family:'Lora';src:url('../fonts/hero/lora-var.woff2') format('woff2');font-weight:400 700;font-display:block}

.ix-sec{
  --paper:#FAF6EF;
  --frame:1900px;
  --margin:170px;
  --ink-l:91;
  --ink-r:1616; /* solid artwork; the fade past this hangs outside the hero column */
  --ink-span:1525; /* 1616 - 91 */
  --head:#11405A;--lead:#4A5459;--kicker:#2F5B6B;--more:#1A475C;--num:#0A3A50;--lab:#244F61;--lab1:#7E9BA1;--krule:#708C9A;--uline:#003048;--divider:#DEDBD3;
  position:relative;
  width:100%;
  margin:0;
  background:var(--paper);
  padding:150px 0 68px; /* 68 + the art's own blank rows = 150px to the Inside-the-gate photo */
}
.ix-frame{
  width:min(100%, var(--frame));
  margin:0 auto;
  padding-left:var(--margin);
  padding-right:var(--margin);
  box-sizing:border-box;
}
.ix-slot{
  container-type:inline-size;
  position:relative;
  width:100%;
  aspect-ratio:1525 / 941;
  overflow:visible;
}
.ix{
  position:absolute;
  top:0;
  width:calc(100cqw * 1672 / var(--ink-span));
  height:calc(100cqw * 941 / var(--ink-span));
  left:calc(100cqw * -1 * var(--ink-l) / var(--ink-span));
  --u:calc(100cqw / var(--ink-span));
}
.ix img{max-width:none}
.ix__plate{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  display:block;
}
.ix::before{
  content:"";
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  top:calc(690*var(--u));
  height:calc(48*var(--u));
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(250,246,239,0) 0%,
    rgba(250,246,239,.46) 28%,
    rgba(250,246,239,.94) 50%,
    rgba(250,246,239,.46) 72%,
    rgba(250,246,239,0) 100%);
}
.ix::after{
  content:"";
  position:absolute;
  z-index:4;
  inset:-1px;
  pointer-events:none;
  background:
    linear-gradient(to right,#FAF6EF 0,rgba(250,246,239,.88) calc(14*var(--u)),rgba(250,246,239,0) calc(70*var(--u))),
    linear-gradient(to left,#FAF6EF 0,rgba(250,246,239,.88) calc(14*var(--u)),rgba(250,246,239,0) calc(70*var(--u))),
    linear-gradient(to bottom,#FAF6EF 0,rgba(250,246,239,.88) calc(12*var(--u)),rgba(250,246,239,0) calc(58*var(--u))),
    linear-gradient(to top,#FAF6EF 0,rgba(250,246,239,.88) calc(12*var(--u)),rgba(250,246,239,0) calc(58*var(--u)));
}
.ix > *,.ix .w,.ix .cut,.ix .rule,.ix .more__arrow{position:absolute}
.ix h2,.ix p,.ix ul{margin:0;padding:0;list-style:none;position:static;font-size:inherit}
.ix .ln{display:contents}
.ix .w{white-space:nowrap;line-height:1;transform-origin:0 0;font-kerning:normal}
.ix .cut{height:auto;display:block}
.ix [data-g=kicker]{font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:calc(15.5*var(--u));color:var(--kicker);text-transform:uppercase}
.ix [data-g=h1],.ix [data-g=h2],.ix [data-g=h3]{font-family:'Newsreader',Georgia,serif;font-weight:450;font-size:calc(72.8*var(--u));color:var(--head);font-optical-sizing:auto}
.ix [data-g=b1],.ix [data-g=b2],.ix [data-g=b3]{font-family:'Inter Tight',system-ui,sans-serif;font-weight:350;font-size:calc(22*var(--u));color:var(--lead)}
.ix .history{--copy-u:min(0.9200px,var(--u));position:absolute;left:calc(92*var(--u));top:calc(460*var(--u));width:calc(540*var(--u));font-family:'Lora',Georgia,serif;font-weight:400;color:#123b58;font-size:calc(23*var(--copy-u));line-height:calc(34*var(--copy-u));letter-spacing:calc(-0.05*var(--copy-u))}
.ix [data-g=link]{font-family:'Inter',system-ui,sans-serif;font-weight:550;font-size:calc(21*var(--u));color:var(--more)}
.ix [data-g^=num]{font-family:'Newsreader',Georgia,serif;font-weight:450;font-size:calc(44.3*var(--u));color:var(--num)}
.ix [data-g^=lab]{font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:calc(15.8*var(--u));color:var(--lab);text-transform:uppercase}
.ix [data-g=lab1]{color:var(--lab1)}
.ix .more{top:0;left:0;width:0;height:0;color:var(--more);text-decoration:none;pointer-events:none}
.ix .more::after{content:"";position:absolute;left:calc(90*var(--u));top:calc(620*var(--u));width:calc(200*var(--u));height:calc(44*var(--u));pointer-events:auto}
.ix .more:focus-visible{outline:none}
.ix .more:focus-visible::after{outline:2px solid var(--more);outline-offset:4px}
.ix .more__arrow{display:block;color:var(--more)}
.ix .rule--kicker{background:var(--krule)}
.ix .rule--more{background:linear-gradient(to bottom,rgba(0,48,72,.24) 0 33.3%,rgba(0,48,72,.58) 33.3% 66.6%,rgba(0,48,72,.18) 66.6% 100%);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.45) 6%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 58%,rgba(0,0,0,.63) 61%,rgba(0,0,0,.63) 81%,rgba(0,0,0,.24) 84%,rgba(0,0,0,.24) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.45) 6%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 58%,rgba(0,0,0,.63) 61%,rgba(0,0,0,.63) 81%,rgba(0,0,0,.24) 84%,rgba(0,0,0,.24) 100%)}
.ix .rule--div{background:var(--divider)}
.ix .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Coastal living plate. Same 1525/941 stage as the gate section below.
   Art x=150 and x=1642 meet the hero column. */
.coast{
  position:absolute;
  top:0;
  left:calc(100cqw * -150 / 1492);
  width:calc(100cqw * 1804 / 1492);
  height:calc(100cqw * 872 / 1492);
  --g:calc(100cqw / 1492);
}
.coast__img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.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,.96) calc(12 * var(--g)),
      rgba(250,246,239,.58) calc(34 * var(--g)),
      rgba(250,246,239,0) calc(82 * var(--g))),
    linear-gradient(to left,
      var(--paper) 0,
      rgba(250,246,239,.96) calc(12 * var(--g)),
      rgba(250,246,239,.58) calc(34 * var(--g)),
      rgba(250,246,239,0) calc(82 * var(--g))),
    linear-gradient(to bottom,
      var(--paper) 0,
      rgba(250,246,239,.94) calc(14 * var(--g)),
      rgba(250,246,239,.5) calc(38 * var(--g)),
      rgba(250,246,239,0) calc(86 * var(--g))),
    linear-gradient(to top,
      var(--paper) 0,
      rgba(250,246,239,.96) calc(12 * var(--g)),
      rgba(250,246,239,.62) calc(30 * var(--g)),
      rgba(250,246,239,0) calc(72 * var(--g)));
}
.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(168 * var(--g));
  top:calc(128 * var(--g));
  display:flex;
  align-items:center;
  gap:calc(16 * var(--g));
  color:#8d7356;
  font:500 calc(15 * var(--g))/1 "Gate3 Univers","Univers Next",Arial,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  white-space:nowrap;
}
.coast__kicker i{
  display:block;
  width:calc(42 * var(--g));
  height:1px;
  background:#8d7356;
  font-style:normal;
}
/* heading in the hero's "Classic Resort" type: Bauer Bodoni lines, Snell Roundhand accent word in sand (2026-09-24).
   Same footprint as before (ink x 178..720 at 1900); ink gaps ~25 kicker / 8 / 6 / 42 lead. */
@font-face{font-family:"Coast Bauer Bodoni";src:url("../fonts/library/bauer-bodoni/bauer-bodoni-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Coast Snell Roundhand";src:url("../fonts/library/snell-roundhand/snell-roundhand-400.woff2") format("woff2");font-weight:400;font-display:swap}
.coast__title{
  left:calc(148 * var(--g));
  top:calc(150 * var(--g));
  color:#073b57;
  font:400 calc(78 * var(--g))/1.16 "Coast Bauer Bodoni",Georgia,serif;
  letter-spacing:-.01em;
}
.coast__title span{display:block;white-space:nowrap}
.coast__title em{
  display:inline-block;
  margin:0 0 0 calc(4 * var(--g));
  color:#917658;
  font:400 calc(86 * var(--g))/.8 "Coast Snell Roundhand",Georgia,serif;
  font-style:normal;
  letter-spacing:0;
  vertical-align:0;
  transform:rotate(-1.5deg);
  -webkit-text-stroke:calc(.2 * var(--g)) currentColor;
}
.coast__lead{
  left:calc(150 * var(--g));
  top:calc(455 * var(--g));
  width:calc(540 * var(--g));
  margin:35px 0 0 2px;
  max-width:560px;
  color:#0b4b69;
  font:500 24px/1.35 "PHA Newsreader",Georgia,serif;
  letter-spacing:-.012em;
}
@media (max-width:1849px){
  .coast__lead{
    margin:0;
    max-width:none;
    font-size:calc(22.95 * var(--g));
  }
}
.coast__more{
  left:calc(150 * var(--g));
  top:calc(625 * var(--g));
  color:#123e52;
  font:500 calc(22 * var(--g))/1 "Gate3 Newsreader","Gate Newsreader",Georgia,serif;
  text-decoration:none;
  border-bottom:calc(2 * var(--g)) solid rgba(18,62,82,.45);
  padding-bottom:calc(8 * var(--g));
}
.coast__more:focus-visible{outline:2px solid #123e52;outline-offset:4px}
.coast__stats{
  left:calc(150 * var(--g));
  top:calc(738 * var(--g));
  width:calc(1492 * var(--g));
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:0;
  padding:0;
  list-style:none;
  text-align:center;
}
.coast__stats::before{
  content:"";
  position:absolute;
  z-index:0;
  top:calc(-50 * var(--g));
  right:calc(-18 * var(--g));
  bottom:calc(-22 * var(--g));
  left:calc(-18 * var(--g));
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(250,246,239,0),#faf6ef calc(22 * var(--g)),#faf6ef 100%);
}
.coast__stats li{
  position:relative;
  z-index:1;
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}
.coast__stats li+li::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(18 * var(--g));
  width:1px;
  height:calc(52 * var(--g));
  background:rgba(18,62,82,.14);
}
.coast__stat-icon{
  display:block;
  width:calc(48 * var(--g));
  height:calc(40 * var(--g));
  margin:0 auto calc(10 * var(--g));
  flex:none;
  color:#0d6078;
  background:currentColor;
  -webkit-mask:var(--coast-stat-icon) center/contain no-repeat;
  mask:var(--coast-stat-icon) center/contain no-repeat;
}
.coast__stat-icon--rv{--coast-stat-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='34' height='24' rx='3'/%3E%3Cpath d='M12 31v3m20-3v3M38 15h4l2 6v10h-6M9 12h15v9H9zm22 0h3v9h-3'/%3E%3Ccircle cx='12' cy='32' r='4'/%3E%3Ccircle cx='34' cy='32' r='4'/%3E%3C/g%3E%3C/svg%3E")}
.coast__stat-icon--wave{--coast-stat-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 27c8-1 10-7 14-15 5 9 11 11 22 6-2 10-9 16-20 16-7 0-12-2-16-7Z'/%3E%3Cpath d='M3 33c4-3 8-3 12 0s8 3 12 0 8-3 12 0'/%3E%3C/g%3E%3C/svg%3E")}
.coast__stat-icon--social{--coast-stat-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='12' r='5'/%3E%3Ccircle cx='11' cy='16' r='4'/%3E%3Ccircle cx='37' cy='16' r='4'/%3E%3Cpath d='M14 34v-4c0-6 4-9 10-9s10 3 10 9v4H14Zm-11 0v-3c0-5 3-8 8-8 2 0 4 .6 5.5 1.8M45 34v-3c0-5-3-8-8-8-2 0-4 .6-5.5 1.8'/%3E%3C/g%3E%3C/svg%3E")}
.coast__stat-icon--room{--coast-stat-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8v27M43 19v16M5 27h38v8H5zM10 19h12c4 0 7 3 7 8H10z'/%3E%3Crect x='10' y='12' width='10' height='7' rx='2'/%3E%3Cpath d='M9 35v3m30-3v3'/%3E%3C/g%3E%3C/svg%3E")}
.coast__stats b{
  display:block;
  color:#0c4a62;
  font:500 calc(40 * var(--g))/1 "Gate3 Newsreader","Gate Newsreader",Georgia,serif;
  letter-spacing:-.02em;
  font-weight:500;
}
.coast__stats small{
  display:block;
  margin-top:calc(10 * var(--g));
  max-width:calc(250 * var(--g));
  color:#6e8c98;
  font:400 calc(12 * var(--g))/1.2 "Gate3 Univers","Univers Next",Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width:1100px){
  .ix-sec,.gate-art,.ee{--margin:80px}
}
@media (max-width:760px){
  .ix-sec,.gate-art,.ee{--margin:24px}
}