/* Park Details — “Inside the gate”.
   The plate is the supplied design (1672 × 941) with the words cleared.
   Words are live HTML, placed on the plate’s type boxes, in the mockup’s faces:
   ITC Bodoni Seventytwo, Olagre (script) and Neue Haas Grotesk Text.
   Alignment: the photo’s left edge (plate x 150) sits on the hero’s left rail (170/1900)
   and the stats card’s right edge (plate x 1601) on the right rail (1730/1900).
   Top: 150px (at 1900) from the tab pill’s bottom to the top of the content (plate y 165). */
@font-face{font-family:"IG Bodoni";src:url("../fonts/library/itc-bodoni-seventytwo/itc-bodoni-seventytwo-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IG Script";src:url("../fonts/library/olagre/olagre-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IG Grotesk";src:url("../fonts/library/neue-haas-grotesk-text/neue-haas-grotesk-text-400.woff2") format("woff2");font-weight:400;font-display:swap}

.ig{
  --ink:#0c364a;
  --gold:#bb9661;
  --body:#4d5f68;
  --label:#6f7b80;
  --paper:#fefcf5;
  /* pill hangs 42.5 below the hero; +150 gap; −7.5 because the stage starts at plate y 158, content at 165 */
  --ig-pad:calc(185 * 100vw / 1900);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  container-type:inline-size;
  background:var(--paper);
  color:var(--ink);
  padding:var(--ig-pad) 0 0;
}
.ig::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  height:42px;
  background:linear-gradient(to bottom, rgba(242,234,223,0), #f2eadf);
  pointer-events:none;
}
.ig__frame{
  /* Stage = plate x 102 → 1612 at k = 1560/1451: left 170 − 48k, right 1730 + 11k (frame px of 1900). */
  box-sizing:border-box;
  width:100%;
  margin-inline:auto;
  padding-left:calc(118.394 * 100cqw / 1900);
  padding-right:calc(158.174 * 100cqw / 1900);
}
.ig__stage{
  /* Comp content box: mat left 102 → card right 1612, top 158 → art bottom 941. */
  position:relative;
  container-type:inline-size;
  aspect-ratio:1510 / 783;
}
.ig__art{
  position:absolute;
  z-index:0;
  left:calc(-102 / 1510 * 100%);
  top:0;
  width:calc(1672 / 1510 * 100%);
  max-width:none;
  height:auto;
  transform:translateY(calc(-158 / 941 * 100%));
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.ig__palms,
.ig__wash,
.ig__photo{display:none}
/* Painted fronds only, in their own image. Lengths are stage-widths (cqw) so the
   leaves keep the plate's scale. The top reaches the section edge and fades out. */
.ig__fronds{
  --ig-leaf-top:calc((21 - 158) / 1510 * 100cqw);
  --ig-bottom:calc((687 - 158) / 1510 * 100cqw);
  --ig-over:calc(-1 * var(--ig-pad) - min(var(--ig-leaf-top), -1 * var(--ig-pad)));
  display:block;
  position:absolute;
  z-index:1;
  left:calc(-165 / 1510 * 100cqw);
  top:min(var(--ig-leaf-top), calc(-1 * var(--ig-pad)));
  width:calc(600 / 1510 * 100cqw);
  height:calc(var(--ig-bottom) - min(var(--ig-leaf-top), -1 * var(--ig-pad)));
  max-width:none;
  object-fit:fill;
  opacity:.55; /* matches the mockup's pale fronds over the plate's own */
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent max(0px, var(--ig-over)), rgba(0,0,0,.45) calc(max(0px, var(--ig-over)) + 36px), #000 calc(max(0px, var(--ig-over)) + 110px), #000 100%);
  mask-image:linear-gradient(180deg, transparent 0, transparent max(0px, var(--ig-over)), rgba(0,0,0,.45) calc(max(0px, var(--ig-over)) + 36px), #000 calc(max(0px, var(--ig-over)) + 110px), #000 100%);
}
.ig__copy{position:static}
.ig__copy,.ig__copy *{-webkit-user-select:text;user-select:text}
.ig :where(h2,p,ul){margin:0;padding:0}
.ig__k{
  position:absolute;
  z-index:2;
  left:54.04%;
  top:0.958%;
  display:flex;
  align-items:center;
  gap:calc(16 / 1510 * 100cqw);
  margin:0;
  color:#2f5a6c;
  font:400 calc(13.5 / 1510 * 100cqw)/1 "IG Grotesk",Arial,sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
}
.ig__k i{
  display:block;
  width:calc(47 / 1510 * 100cqw);
  height:max(1px, calc(1.6 / 1510 * 100cqw));
  background:#c7a36c;
  flex:none;
}
.ig__title{
  position:absolute;
  z-index:2;
  inset:0;
  margin:0;
  color:var(--ink);
  font-family:"IG Bodoni",Georgia,serif;
  font-weight:400;
  letter-spacing:.028em;
  pointer-events:none;
}
.ig__title span,
.ig__title em{pointer-events:auto}
.ig__l1,
.ig__with,
.ig__l2 .ig__script,
.ig__l3{
  position:absolute;
  margin:0;
  white-space:nowrap;
  line-height:1;
}
.ig__l1{
  left:54.238%;
  top:5.875%;
  font-size:calc(84 / 1510 * 100cqw);
}
.ig__l2{display:contents}
.ig__with{
  left:54.238%;
  top:15.837%;
  font-size:calc(84 / 1510 * 100cqw);
}
.ig .ig__script{
  color:var(--gold);
  font-family:"IG Script",cursive;
  font-style:normal;
  font-weight:400;
  letter-spacing:0;
  -webkit-text-stroke:calc(1.5 / 1510 * 100cqw) var(--gold);
}
.ig__l2 .ig__script{
  left:65.43%;
  top:15.709%;
  font-size:calc(102 / 1510 * 100cqw);
  letter-spacing:-.09em;
}
.ig__l3{
  left:54.636%;
  top:25.798%;
  font-size:calc(128 / 1510 * 100cqw);
  letter-spacing:-.125em;
}
.ig__lead{
  position:absolute;
  z-index:2;
  left:54.172%;
  top:41.379%;
  width:calc(660 / 1510 * 100cqw);
  margin:0;
  color:var(--body);
  font:400 calc(17.9 / 1510 * 100cqw)/calc(32 / 1510 * 100cqw) "IG Grotesk",Arial,sans-serif;
  letter-spacing:.022em;
}
/* Stats: the card and its dividers are painted in the plate (x 916 → 1601, y 614 → 809; dividers 1076, 1258, 1440). */
.ig__stats{
  position:absolute;
  z-index:2;
  left:53.907%;
  top:58.238%;
  width:45.364%;
  height:24.904%;
  display:grid;
  grid-template-columns:160fr 182fr 182fr 161fr;
  align-items:start;
  margin:0;
  padding:0;
  list-style:none;
  background:transparent;
}
.ig__stats li{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  min-height:0;
  padding:calc(32 / 1510 * 100cqw) 0 0 calc(51 / 1510 * 100cqw);
}
.ig__stats li:nth-child(2){padding-left:calc(34 / 1510 * 100cqw)}
.ig__stats li:nth-child(3){padding-left:calc(34 / 1510 * 100cqw)}
.ig__stats li:nth-child(4){padding-left:calc(44 / 1510 * 100cqw);padding-top:calc(29 / 1510 * 100cqw)}
.ig__stats li + li::before{content:none}
.ig__stats .ig__fig{display:flex;flex-direction:column;align-items:flex-start;text-transform:none;margin:0}
.ig__stats b{
  color:var(--ink);
  font-family:"IG Bodoni",Georgia,serif;
  font-weight:400;
  font-size:calc(50 / 1510 * 100cqw);
  line-height:1;
  letter-spacing:-.01em;
}
.ig__stats small{
  margin-left:.2em;
  font-size:1em;
  font-weight:400;
  letter-spacing:0;
}
.ig__unit{
  display:block;
  margin-top:calc(-4 / 1510 * 100cqw);
  font-size:calc(50 / 1510 * 100cqw) !important;
  line-height:1;
  font-weight:400;
  text-transform:none;
}
.ig__stats span{
  display:block;
  margin-top:calc(10 / 1510 * 100cqw);
  color:var(--label);
  font:400 calc(12.2 / 1510 * 100cqw)/calc(20.5 / 1510 * 100cqw) "IG Grotesk",Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.ig__stats .ig__fig + span{margin-top:calc(4 / 1510 * 100cqw)}

@media(max-width:1100px){
  .ig{padding-top:100px}
  .ig__frame{padding-inline:clamp(20px, 5vw, 56px)}
  .ig__fronds{
    --ig-pad:100px;
    --ig-edge:max(0px, calc(165 / 1510 * 100cqw - clamp(20px, 5vw, 56px)));
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0, transparent max(0px, var(--ig-over)), rgba(0,0,0,.45) calc(max(0px, var(--ig-over)) + 28px), #000 calc(max(0px, var(--ig-over)) + 96px), #000 100%),
      linear-gradient(90deg, transparent 0, transparent var(--ig-edge), #000 calc(var(--ig-edge) + 36px), #000 100%);
    mask-image:
      linear-gradient(180deg, transparent 0, transparent max(0px, var(--ig-over)), rgba(0,0,0,.45) calc(max(0px, var(--ig-over)) + 28px), #000 calc(max(0px, var(--ig-over)) + 96px), #000 100%),
      linear-gradient(90deg, transparent 0, transparent var(--ig-edge), #000 calc(var(--ig-edge) + 36px), #000 100%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
  }
}
@media(max-width:860px){
  .ig{padding-bottom:28px}
  .ig__stage{
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .ig__art{display:none}
  .ig__fronds{display:none}
  .ig__palms{
    display:block;
    position:absolute;
    z-index:1;
    left:-28px;
    top:-36px;
    width:min(340px, 78vw);
    height:auto;
    pointer-events:none;
    user-select:none;
  }
  .ig__wash{
    display:block;
    position:absolute;
    z-index:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:200px;
    max-width:none;
    object-fit:cover;
    object-position:center bottom;
    pointer-events:none;
    user-select:none;
  }
  .ig__photo{
    display:block;
    position:relative;
    z-index:2;
    left:auto;
    top:auto;
    align-self:center;
    width:min(100%, 560px);
    height:auto;
    background:#f4e6cf;
    padding:12px 12px 14px;
    border-radius:26px;
    box-shadow:0 12px 28px rgba(90,60,20,.08);
  }
  .ig__photo img{
    display:block;
    width:100%;
    height:auto;
    border-radius:16px;
  }
  .ig__copy{position:relative;z-index:2}
  .ig__title{
    position:static;
    inset:auto;
    pointer-events:auto;
  }
  .ig__k,
  .ig__l1,
  .ig__with,
  .ig__l2 .ig__script,
  .ig__l3,
  .ig__lead{
    position:static;
    left:auto;
    top:auto;
    width:auto;
    white-space:normal;
  }
  .ig__l2{
    display:flex;
    align-items:flex-end;
    gap:10px;
  }
  .ig__k{gap:10px;margin-bottom:12px;font-size:12px;letter-spacing:.18em}
  .ig__k i{width:28px;height:2px}
  .ig__l1{display:block;font-size:clamp(36px, 9vw, 56px);line-height:.96}
  .ig__with{font-size:clamp(32px, 8vw, 48px);line-height:.9}
  .ig__l2 .ig__script{font-size:clamp(46px, 12vw, 76px);line-height:.7}
  .ig__l3{display:block;font-size:clamp(52px, 14vw, 88px);line-height:.78;margin-top:2px}
  .ig__lead{margin-top:14px;font-size:16px;line-height:1.55}
  .ig__stats{
    position:relative;
    left:auto;
    top:auto;
    z-index:2;
    width:auto;
    height:auto;
    padding:18px 6px 16px;
    border-radius:18px;
    background:#fbf8f2;
  }
  .ig__stats li + li::before{
    content:"";
    position:absolute;
    left:0;
    top:16%;
    bottom:16%;
    width:1px;
    background:rgba(150,158,160,.5);
  }
  .ig__stats b{font-size:clamp(28px, 7vw, 40px)}
  .ig__unit{font-size:clamp(16px, 4.2vw, 22px) !important}
  .ig__stats li,
  .ig__stats li:nth-child(n){padding:0 8px 0 16px}
  .ig__stats span{margin-top:6px;font-size:10px;line-height:1.45;letter-spacing:.1em}
  .ig__stats .ig__fig + span{margin-top:6px}
  .ig__unit{margin-top:0}
  .ig__k{font-size:12px}
  .ig__l2 .ig__script,
  .ig__l3{letter-spacing:-.06em;padding-left:.12em}
}
@media(max-width:700px){
  .ig__stats{grid-template-columns:1fr 1fr;row-gap:16px}
  .ig__stats li:nth-child(3)::before{display:none}
}

.ig + .page-section{padding-top:clamp(48px, 6vw, 88px)}