/* Section 03 — 1672 × 941 approved “Inside the gate, a resort.” artwork.
   The photographs, watercolor washes and icon medallions live in a clean
   artwork plate; every word and the CTA are selectable HTML/CSS.

   Desktop geometry:
   - the source card row (x 81..1593) maps to the shared hero rails;
   - the inner stage is the same 1900 × 900 footprint as Coastal living;
   - this section owns 150px of top and bottom padding;
   - independent x/y units retain the approved composition while honoring the
     site rail and section-height systems. */

@font-face{font-family:"G7 Grotesk";src:url("../fonts/library/neue-haas-grotesk-text/neue-haas-grotesk-text-400.woff2") format("woff2");font-weight:400;font-display:swap}

.g5{
  --frame:1900px;
  --rail:170px;
  --paper:#faf6ef;
  --navy:#073b57;
  --sand:#917658;
  --ux:calc((min(100cqw, var(--frame)) - 2 * var(--rail)) / 1512);
  --uy:calc(min(100cqw, var(--frame)) * 900 / 1900 / 941);
  --s:calc(min(100cqw, var(--frame)) / 1900);
  position:relative;
  display:block;
  width:100%;
  margin:0;
  padding:150px 0;
  overflow:hidden;
  container-type:inline-size;
  background:var(--paper);
  color:var(--navy);
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}

.g5 img{max-width:none}
.g5 :where(h2,h3,p,ul){margin:0;padding:0;font:inherit;list-style:none}

.g5__stage{
  position:relative;
  width:min(100%,var(--frame));
  height:calc(900 * var(--s));
  margin:0 auto;
}

.g5__canvas{
  position:absolute;
  left:calc(var(--rail) - 81 * var(--ux));
  top:0;
  width:calc(1672 * var(--ux));
  height:calc(941 * var(--uy));
}

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

/* The watercolor paper dissolves into the exact section cream on every edge,
   preventing a rectangular image boundary or transition line. */
.g5__canvas::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(to right,var(--paper) 0,rgba(250,246,239,.84) 1.4%,rgba(250,246,239,0) 5.5%),
    linear-gradient(to left,var(--paper) 0,rgba(250,246,239,.84) 1.4%,rgba(250,246,239,0) 5.5%),
    linear-gradient(to bottom,var(--paper) 0,rgba(250,246,239,.68) 1.2%,rgba(250,246,239,0) 4.5%),
    linear-gradient(to top,var(--paper) 0,rgba(250,246,239,.9) 1.7%,rgba(250,246,239,0) 6%);
}

/* Keep the decorative aqua wash at the outer edge instead of letting its
   denser inner strokes sit behind the CTA.  The soft elliptical paper veil
   follows the wash itself, so there is no rectangular mask or visible seam. */
.g5__canvas::before{
  content:"";
  position:absolute;
  z-index:1;
  left:calc(1115 * var(--ux));
  top:calc(428 * var(--uy));
  width:calc(420 * var(--ux));
  height:calc(170 * var(--uy));
  pointer-events:none;
  background:radial-gradient(
    ellipse at 34% 50%,
    var(--paper) 0%,
    rgba(250,246,239,.995) 40%,
    rgba(250,246,239,.94) 57%,
    rgba(250,246,239,.58) 73%,
    rgba(250,246,239,.16) 88%,
    rgba(250,246,239,0) 100%
  );
}

/* ---------- live right-side copy ---------- */
.g5__copy{
  position:absolute;
  z-index:2;
  left:calc(1110 * var(--ux));
  top:calc(96 * var(--uy));
  width:calc(484 * var(--ux));
  color:var(--navy);
  user-select:text;
  -webkit-user-select:text;
}

.g5 .g5__k{
  display:grid;
  grid-template-columns:calc(57.3 * var(--s)) max-content calc(57.3 * var(--s));
  align-items:center;
  justify-content:center;
  gap:calc(19.8 * var(--s));
  width:100%;
  color:#9c8268;
  font:400 calc(14.258 * var(--s))/1 "Univers Next",Arial,sans-serif;
  letter-spacing:calc(5.611 * var(--s));
  -webkit-text-stroke:calc(.308 * var(--s)) currentColor;
  text-transform:uppercase;
  white-space:nowrap;
}

.g5__k::before,.g5__k::after{
  content:"";
  display:block;
  width:100%;
  height:max(1px,calc(1.3 * var(--s)));
  background:#b0977f;
}

/* Exact heading voice and computed scale used by Coastal living. */
.g5 h2{
  margin-top:calc(21.5 * var(--s));
  color:var(--navy);
  font:400 calc(85.819 * var(--s))/calc(84.961 * var(--s)) "PHA Bauer Bodoni",Georgia,serif;
  letter-spacing:calc(-.858 * var(--s));
}

.g5__h{display:block;white-space:nowrap}

.g5__s{
  display:inline-block;
  margin-left:calc(6.6 * var(--s));
  color:var(--sand);
  font:400 calc(94.621 * var(--s))/.72 "PHA Snell Roundhand",Georgia,serif;
  font-style:normal;
  letter-spacing:0;
  vertical-align:calc(-1.1 * var(--s));
  -webkit-text-stroke:calc(.22 * var(--s)) currentColor;
  transform:rotate(-1.5deg);
  transform-origin:left center;
}

.g5 .g5__l{
  width:100%;
  max-width:calc(560 * var(--s));
  margin:calc(30 * var(--s)) 0 0 calc(2 * var(--s));
  color:#0b4b69;
  font:500 calc(24 * var(--s))/1.35 "CSF News",Georgia,serif;
  letter-spacing:-.012em;
}

.g5__cta{display:flex;align-items:center;margin-top:calc(26 * var(--s))}
.g5__wave{display:none}

/* Exact material, dimensions and typography of the preceding About the
   resort control. */
.g5__btn{
  position:relative;
  display:flex;
  align-items:center;
  flex:none;
  width:calc(278.3 * var(--s));
  height:calc(61.6 * var(--s));
  padding:calc(9 * var(--s)) calc(57.3 * var(--s)) 0 calc(37.8 * var(--s));
  box-sizing:border-box;
  border:calc(1.485 * var(--s)) solid #dcc6ad;
  border-radius:999px;
  background:#fcf8f0;
  box-shadow:inset 0 calc(1.1 * var(--s)) 0 rgba(255,255,255,.75),0 calc(2.2 * var(--s)) calc(7.7 * var(--s)) rgba(150,112,72,.12);
  color:#0a2f55;
  font:400 calc(24.6 * var(--s))/1 "CSF News",Georgia,serif;
  letter-spacing:calc(-.66 * var(--s));
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .2s ease;
}

.g5__btn::after{
  content:"";
  position:absolute;
  right:calc(33.2 * var(--s));
  top:50%;
  width:calc(8.8 * var(--s));
  height:calc(15.4 * var(--s));
  background:currentColor;
  transform:translateY(-50%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.g5__btn:hover{background:#f6efe3}
.g5__btn:focus-visible,.g5 h3 a:focus-visible{outline:2px solid #0a2f55;outline-offset:4px}

/* ---------- live amenity captions ---------- */
.g5__photo,.g5__mphoto,.g5__disc{display:none}
.g5__cards{position:absolute;z-index:2;inset:0}
.g5__card{position:static}

.g5__ctext{
  position:absolute;
  left:calc((var(--cx) - 180) * var(--ux));
  top:calc(807 * var(--uy));
  width:calc(360 * var(--ux));
  text-align:center;
}

.g5 h3{
  width:100%;
  color:#0b4b69;
  font:500 calc(24 * var(--s))/1.35 "PHA Newsreader",Georgia,serif;
  letter-spacing:0;
  white-space:nowrap;
}

.g5 h3 a{color:inherit;text-decoration:none}

.g5__ctext p{
  margin-top:calc(4 * var(--s));
  color:#7f8795;
  font:400 calc(19 * var(--s))/1.35 "CSF News",Georgia,serif;
  letter-spacing:calc(-.18 * var(--s));
}

.g5__ctext::after{
  content:"";
  display:block;
  width:calc(54 * var(--ux));
  height:max(1px,calc(1.2 * var(--uy)));
  margin:calc(6 * var(--uy)) auto 0;
  background:#a67c51;
}

/* Retire the legacy divider-cover patch from section-transition-polish.css. */
.g5 .g5__copy::after{content:none}

@media (max-width:1450px){.g5{--rail:clamp(80px,8.947vw,170px)}}
@media (max-width:1100px){.g5{--rail:80px}}

/* ---------- stacked phone composition ---------- */
@media (max-width:760px){
  .g5{--rail:24px;--s:1px;--ux:1px;--uy:1px;padding:150px 0}
  .g5__stage{width:100%;height:auto;padding:0 var(--rail)}
  .g5__canvas{position:static;display:flex;flex-direction:column;width:auto;height:auto}
  .g5__canvas::before,.g5__canvas::after{content:none}
  .g5__plate{display:none}
  .g5__copy{position:relative;left:auto;top:auto;width:auto;order:1}
  .g5 .g5__k{grid-template-columns:40px max-content 40px;justify-content:start;gap:14px;font-size:12px;letter-spacing:.3em;-webkit-text-stroke:0}
  .g5 h2{margin-top:14px;font-size:clamp(44px,12.4vw,60px);line-height:1;letter-spacing:-.01em}
  .g5__h{white-space:normal}
  .g5__s{margin:.08em 0 0;font-size:1.1em;-webkit-text-stroke-width:.2px}
  .g5 .g5__l{margin:24px 0 0 1px;max-width:none;font-size:18px}
  .g5__cta{margin-top:24px}
  .g5__btn{width:auto;height:56px;padding:4px 50px 0 28px;font-size:19px}
  .g5__btn::after{right:24px;width:8px;height:14px}
  .g5__mphoto{order:2;display:block;width:calc(100% + 2 * var(--rail));margin:36px calc(-1 * var(--rail)) 0;aspect-ratio:var(--pw)/var(--ph);background:url("../img/gate5/plate-1672-live-clean.png?v=1") no-repeat;background-size:calc(1672 / var(--pw) * 100%) auto;background-position:calc(var(--px) / (1672 - var(--pw)) * 100%) calc(var(--py) / (941 - var(--ph)) * 100%)}
  .g5__cards{position:static;order:3;display:grid;grid-template-columns:1fr 1fr;gap:34px 16px;margin-top:30px}
  .g5__card{position:relative;text-align:center}
  .g5__photo{display:block;aspect-ratio:1.88/1;border-radius:12px;background-position:center;background-size:cover;background-repeat:no-repeat}
  .g5__card--1 .g5__photo{background-image:url("../img/pool-900.webp")}
  .g5__card--2 .g5__photo{background-image:url("../img/firepit-900.webp")}
  .g5__card--3 .g5__photo{background-image:url("../img/social-900.webp")}
  .g5__card--4 .g5__photo{background-image:url("../img/airstream-900.webp")}
  .g5__disc{position:relative;display:block;width:56px;height:56px;margin:-30px auto 0;border-radius:50%;background:#faf6ef;box-shadow:0 0 0 1px rgba(176,150,128,.24),0 2px 4px rgba(176,150,128,.2)}
  .g5__disc img{position:absolute;left:50%;top:50%;width:calc(var(--w) * .56px);height:calc(var(--h) * .56px);transform:translate(-50%,-50%)}
  .g5__ctext{position:static;width:auto}
  .g5 h3{margin-top:12px;font-size:22px;white-space:normal}
  .g5__ctext p{margin-top:6px;font-size:14px;line-height:1.45;letter-spacing:0}
  .g5__ctext br{display:none}
  .g5__ctext::after{width:42px;height:1px;margin-top:10px}
}

@media (max-width:380px){.g5__cards{grid-template-columns:1fr}}

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