@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600&family=Poiret+One&display=swap');

/* ============================================================
   ISLAND GLOW — Coastal Luxury retheme.
   Overrides the Binance token palette to a warm, light,
   Gulf-Coast aesthetic. Loaded AFTER the DS token sheets, so
   these :root values win. Fonts per brand kit:
   Montserrat (headline) · Poiret One (subheading) · Poppins (body).
   ============================================================ */
:root {
  /* fonts */
  --font-display: 'Poiret One', 'Montserrat', sans-serif;
  --font-body:    'Poiret One', 'Poppins', sans-serif;
  --font-number:  'Poiret One', 'Montserrat', sans-serif;
  --font-accent:  'Poiret One', 'Montserrat', sans-serif;

  /* coastal surfaces — reusing the DS var NAMES so every component reflows */
  --canvas-dark:           #F4EDE1;  /* warm sand — page floor */
  --surface-card-dark:     #FFFDF8;  /* sea-salt white — cards & alt bands */
  --surface-elevated-dark: #EBE1CF;  /* dune taupe — inputs, icon chips */

  --surface-soft-light:    #FFFFFF;  /* pure white footer */
  --surface-strong-light:  #ECE3D3;

  --hairline-on-dark:  #E3D8C4;  /* sand hairline */
  --hairline-on-light: #D9CEBA;
  --border-strong:     #CDBFA5;

  /* text — deep coastal navy + slate */
  --ink:          #23343C;
  --body:         #44555C;
  --muted:        #5E6E75;
  --muted-strong: #000000;
  --on-dark:      #22333B;  /* "on-dark" headings now read as coastal ink on light */
  --body-on-light:#23343C;

  /* accent — the warm Island Glow */
  --primary:          #C58A38;  /* brass / sunset glow */
  --primary-active:   #AC742A;
  --primary-disabled: #E4D6BC;
  --on-primary:       #FFFCF4;  /* soft white on brass */

  --sea:  #1F7C73;  /* sea-glass green (secondary coastal accent) */
  --dusk: #33506A;  /* coastal blue */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas-dark);
  color: var(--body);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: var(--primary); }
a:hover { color: var(--primary-active); }
::selection { background: var(--primary); color: var(--on-primary); }

.ig-container { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.ig-section { padding: 88px 0; }

/* eyebrow — Poiret One, the coastal "subheading" voice */
.ig-eyebrow {
  font-family: var(--font-accent); font-size: 15px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase; color: var(--accent-turquoise); margin: 0 0 16px;
}
.ig-anchor { position: relative; top: -76px; visibility: hidden; }
.lucide, svg.lucide { stroke-width: 1.6; }

/* soft luxury card lift */
.ig-card-img { overflow: hidden; }
.ig-card-img img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.ig-svc { transition: transform .3s ease, box-shadow .3s ease; }
.ig-svc:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(35,52,60,0.14); }
.ig-svc:hover .ig-card-img img { transform: scale(1.06); }

.ig-galcell { overflow: hidden; cursor: pointer; position: relative; }
.ig-galcell img { transition: transform .7s cubic-bezier(.2,.7,.2,1); width: 100%; height: 100%; object-fit: cover; }
.ig-galcell:hover img { transform: scale(1.07); }
.ig-galcell:hover .ig-galcell-veil { opacity: 1; }

.ig-navlink { position: relative; }
.ig-navlink::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--primary); transition: width .25s ease;
}
.ig-navlink:hover::after { width: 100%; }
.ig-phonebtn { transition: color .2s ease; }
.ig-phonebtn:hover { color: var(--primary) !important; }

select option { color: var(--ink); background: #fff; }

/* ---- scroll-reveal: the site comes alive on scroll ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none; } }

.ig-burger { display: none; }
@media (max-width: 920px) {
  .ig-desktop-nav { display: none !important; }
  .ig-burger { display: inline-flex !important; }
  .ig-section { padding: 60px 0; }
}

/* Animated hero — slow drift on the photo, sunset sky cycle, lights blooming on */
.ig-hero-kb{animation:igKenBurns 26s ease-in-out infinite alternate;transform-origin:58% 62%}
.ig-hero-sky{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;animation:igSunset 24s ease-in-out infinite}
.ig-hero-bloom{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 46% at 50% 78%,rgba(255,186,92,0.34),rgba(255,150,70,0.1) 46%,transparent 72%);animation:igBloom 12s ease-in-out infinite alternate}
@keyframes igKenBurns{from{transform:scale(1.02)}to{transform:scale(1.11)}}
@keyframes igSunset{0%{background:linear-gradient(180deg,rgba(255,176,96,0.55) 0%,rgba(255,142,84,0.3) 26%,transparent 56%)}34%{background:linear-gradient(180deg,rgba(236,104,110,0.6) 0%,rgba(206,92,132,0.34) 26%,transparent 58%)}64%{background:linear-gradient(180deg,rgba(120,52,132,0.68) 0%,rgba(88,44,120,0.38) 26%,transparent 58%)}100%{background:linear-gradient(180deg,rgba(255,176,96,0.55) 0%,rgba(255,142,84,0.3) 26%,transparent 56%)}}
@keyframes igBloom{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ig-hero-kb,.ig-hero-sky,.ig-hero-bloom{animation:none}}

.ig-eyebrow{font-size:17px!important;font-weight:800!important}
.ig-stat-grid > div:not(:first-child) > div:last-child{color:#000!important;font-weight:500!important}
.ig-feat-stats > div > div:last-child{color:#000!important;font-weight:600!important}

@media (max-width: 700px){
  .ig-logo{width:104px!important;margin-bottom:-28px!important}
  .ig-hero-slogan{letter-spacing:-1px!important}
}
@media (max-width: 420px){ .ig-logo{width:88px!important;margin-bottom:-22px!important} }

@media (max-width: 920px){
  .ig-feat-grid{grid-template-columns:1fr!important;gap:32px!important}
  .ig-area-grid{grid-template-columns:1fr!important;gap:32px!important}
  .ig-stat-grid{grid-template-columns:1fr 1fr!important;gap:32px!important}
}