/* =================================================================
   Secret Haven Caribbean Travel Blog — site stylesheet (2026 redesign)
   One file for the whole site. Mobile-first. Tokens in :root.
   Identity: the original Secret Haven logos — the spaced "SECRET (palm)
   HAVEN VILLA" wordmark and the gold double-swoosh "SECRET HAVEN" mark —
   in a hidden cove: shady palms over a sheltered, turquoise harbour.
   Palette: deep lagoon teal, shallow aqua, palm green and the logo's gold
   on warm sand. Type: Cinzel (classical spaced capitals, like the logo
   lettering) for headings, Montserrat (tracked caps) for labels, menu
   and buttons, Plus Jakarta Sans for text.
   Motifs: a palm-leaf fringe (--fringe: a row of hanging leaflets) under
   the header and over the footer, as if looking out from under a palm;
   big palm fronds (--frond) casting faint shade across the heroes and
   the lagoon bands; the logo's gold double swoosh (--arc) above section
   titles, in kickers and under the current menu item; photos framed with
   a fine gold line inset from the edge.
   Photos are the site's own beach, reef and boat pictures from the old
   site (owner's request) — never villa photos.
   Deliberately different from the other network sites (oceansidebistro.net
   waves, asianrestaurantvi.com lacquer frames, baznotik.com sail slants,
   bowlingvi.com retro marquee, chenaybay.com cabana stripes, chinchillasskb.com
   volcano domes, greenervi.com leaf cuts, istanbulturkishrestaurant.com
   Iznik tiles, lapausemartinique.com lanterns, laoboutique.com gold rings,
   laplacesxm.com enamel street signs, mokpropertiespr.com site-plan grid,
   nohayliga.com checkered flags, northsidebistro.com veranda railings,
   paradiserentalspr.com bike lanes, sanjuanwatertours.com signal flags,
   racersclubpr.com runway markings, saffronhouseexuma.com Exuma shallows,
   seaplanesinparadise.com travel-poster flight paths).
   ================================================================= */

:root{
  --sand:     #FAF6EE;   /* header, heroes */
  --shell:    #F1E7D3;
  --aqua:     #8EDAD3;   /* shallow water */
  --lagoon:   #0D5C63;   /* primary: buttons, bands, footer */
  --lagoon-2: #12808A;
  --deep:     #08383D;
  --palm:     #2F6B3F;
  --gold:     #C9A227;   /* the logo's swooshes */
  --gold-2:   #E2C25A;
  --ink:      #172A2C;
  --muted:    #586B6C;
  --line:     rgba(13,92,99,.15);

  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-label:   'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  --arc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 26'%3E%3Cg fill='%23C9A227'%3E%3Cpath d='M5 12C14 2 46 2 55 12C44 7 16 7 5 12Z'/%3E%3Cpath d='M10 15C20 23 40 23 50 15C40 19 20 19 10 15Z'/%3E%3C/g%3E%3C/svg%3E");
  --fringe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' preserveAspectRatio='none'%3E%3Cg fill='%232F6B3F'%3E%3Cpath d='M0 0C1 6 5 11 9 14C8 9 7.5 4 9 0Z'/%3E%3Cpath d='M10 0C11 6 15 11 19 14C18 9 17.5 4 19 0Z'/%3E%3Cpath d='M20 0C21 6 25 11 29 14C28 9 27.5 4 29 0Z'/%3E%3Cpath d='M30 0C31 6 35 11 39 14C38 9 37.5 4 39 0Z'/%3E%3C/g%3E%3C/svg%3E");
  --frond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-60 -150 620 450'%3E%3Cg fill='none' stroke='%230D5C63' stroke-linecap='round'%3E%3Cpath d='M0 40Q250 0 480 170' stroke-width='7'/%3E%3Cg stroke-width='7'%3E%3Cpath d='M57 34Q80 112 101 183'/%3E%3Cpath d='M57 34Q72 -20 87 -26'/%3E%3Cpath d='M76 33Q100 123 122 205'/%3E%3Cpath d='M76 33Q95 -25 115 -34'/%3E%3Cpath d='M95 32Q118 132 141 224'/%3E%3Cpath d='M95 32Q119 -28 142 -40'/%3E%3Cpath d='M114 33Q136 141 159 241'/%3E%3Cpath d='M114 33Q142 -30 169 -44'/%3E%3Cpath d='M133 34Q154 149 176 256'/%3E%3Cpath d='M133 34Q166 -30 196 -46'/%3E%3Cpath d='M152 35Q170 156 191 270'/%3E%3Cpath d='M152 35Q189 -29 223 -45'/%3E%3Cpath d='M171 37Q186 163 206 281'/%3E%3Cpath d='M171 37Q212 -27 249 -43'/%3E%3Cpath d='M189 40Q202 169 219 290'/%3E%3Cpath d='M189 40Q234 -24 275 -40'/%3E%3Cpath d='M208 44Q217 175 233 298'/%3E%3Cpath d='M208 44Q257 -19 300 -34'/%3E%3Cpath d='M227 48Q233 179 245 303'/%3E%3Cpath d='M227 48Q278 -13 324 -27'/%3E%3Cpath d='M245 52Q248 183 258 307'/%3E%3Cpath d='M245 52Q299 -7 346 -19'/%3E%3Cpath d='M263 58Q263 187 271 309'/%3E%3Cpath d='M263 58Q320 1 368 -9'/%3E%3Cpath d='M282 64Q278 189 283 308'/%3E%3Cpath d='M282 64Q339 9 388 2'/%3E%3Cpath d='M300 70Q293 191 296 306'/%3E%3Cpath d='M300 70Q358 19 406 14'/%3E%3Cpath d='M318 77Q309 192 310 301'/%3E%3Cpath d='M318 77Q376 29 423 27'/%3E%3Cpath d='M337 85Q325 193 324 295'/%3E%3Cpath d='M337 85Q393 40 438 41'/%3E%3Cpath d='M355 94Q341 192 339 286'/%3E%3Cpath d='M355 94Q409 52 451 55'/%3E%3Cpath d='M373 103Q358 191 356 275'/%3E%3Cpath d='M373 103Q423 64 461 71'/%3E%3Cpath d='M391 112Q375 189 373 260'/%3E%3Cpath d='M391 112Q437 78 469 87'/%3E%3Cpath d='M409 123Q393 184 392 241'/%3E%3Cpath d='M409 123Q448 91 473 104'/%3E%3Cpath d='M427 134Q413 176 414 214'/%3E%3Cpath d='M427 134Q456 106 471 122'/%3E%3Cpath d='M444 145Q434 162 439 175'/%3E%3Cpath d='M444 145Q461 122 461 141'/%3E%3Cpath d='M462 157Q451 173 457 187'/%3E%3Cpath d='M462 157Q479 134 479 154'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--lagoon-2); }
a:hover{ color: var(--palm); }
:focus-visible{ outline: 3px solid var(--gold); outline-offset: 3px; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; color: var(--lagoon); letter-spacing: .01em; }
h1 em, h2 em{ font-style: normal; color: var(--gold); }

.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--lagoon); color: #fff; padding: 10px 16px; font-weight: 700; text-decoration: none;
}
.skip-link:focus{ top: 12px; }

.arc{ display: inline-block; width: 30px; height: 13px; margin-right: 10px; vertical-align: 0; background: var(--arc) 0 0 / 100% 100% no-repeat; }

/* ---------- Brand (header + footer): the original wordmark ---------- */
.brand{ display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; text-decoration: none; color: var(--lagoon); }
.brand:hover{ color: var(--lagoon); }
.brand__word{ height: 30px; width: auto; }
.brand__word--light{ display: none; }
.brand__tag{ font: 600 10px/1 var(--font-label); letter-spacing: .13em; text-transform: uppercase; color: var(--gold); padding-left: 2px; white-space: nowrap; }
.site-footer .brand__word--dark{ display: none; }
.site-footer .brand__word--light{ display: block; height: 32px; }
.site-footer .brand__tag{ color: var(--gold-2); }
@media (max-width: 480px){
  .site-header .brand{ flex: 1 1 0; min-width: 0; }
  .site-header .brand__word{ height: auto; width: 100%; max-width: 210px; }
  .site-header .brand__tag{ font-size: 9.5px; letter-spacing: .16em; }
}

/* ---------- Header + shared network menu (.bnet-menu from gandor.tv) ---------- */
.site-header{ position: sticky; top: 0; z-index: 50; background: rgba(250,246,238,.97); backdrop-filter: blur(6px); }
.site-header::after{
  /* palm-leaf fringe hanging along the bottom of the header */
  content: ""; display: block; height: 14px; background: var(--fringe) 0 0 / 40px 14px repeat-x;
  border-top: 2px solid var(--palm);
}
.site-header__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gutter) 12px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nav-toggle{
  margin-left: auto;
  font: 700 13px/1 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: #fff;
  background: var(--lagoon); border: 0; border-radius: 999px; padding: 13px 20px; cursor: pointer;
}
html:not(.js) .nav-toggle{ display: none; }

.site-nav{ flex-basis: 100%; }
.js .site-nav{ display: none; }
.js .site-nav.is-open{ display: block; }

.bnet-menu{ list-style: none; margin: 0; padding: 6px 0 12px; }
.bnet-menu a{
  display: block; padding: 12px 2px;
  font: 600 14.5px/1.3 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--lagoon); text-decoration: none;
  border-top: 1px solid var(--line);
}
.bnet-menu a:hover{ color: var(--palm); }

/* active page: body page-* class + li bnet-* class */
.page-home .bnet-home a,
.page-website-solutions .bnet-website-solutions a,
.page-thrive .bnet-thrive a,
.page-directory .bnet-directory a,
.page-photos .bnet-photos a,
.page-free-stuff .bnet-free-stuff a,
.page-blog-network .bnet-blog-network a{ color: var(--gold); }

@media (min-width: 1280px){
  /* full menu only when logo + menu fit side by side (header can be a little wider than the page content) */
  .site-header__inner{ max-width: 1280px; flex-wrap: nowrap; }
  .site-header .brand{ flex: none; }
  .site-nav, .js .site-nav{ display: block; flex-basis: auto; margin-left: auto; min-width: 0; }
  .nav-toggle{ display: none; }
  .bnet-menu{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; padding: 0; }
  .bnet-menu a{ border-top: 0; padding: 10px 7px 20px; font-size: 12.5px; letter-spacing: .05em; white-space: nowrap; position: relative; }
  /* the current page gets the logo's gold swoosh */
  .page-home .bnet-home a::after,
  .page-website-solutions .bnet-website-solutions a::after,
  .page-thrive .bnet-thrive a::after,
  .page-directory .bnet-directory a::after,
  .page-photos .bnet-photos a::after,
  .page-free-stuff .bnet-free-stuff a::after,
  .page-blog-network .bnet-blog-network a::after{
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 26px; height: 11px; margin-left: -13px;
    background: var(--arc) 0 0 / 100% 100% no-repeat;
  }
  .page-home .bnet-home a,
  .page-website-solutions .bnet-website-solutions a,
  .page-thrive .bnet-thrive a,
  .page-directory .bnet-directory a,
  .page-photos .bnet-photos a,
  .page-free-stuff .bnet-free-stuff a,
  .page-blog-network .bnet-blog-network a{ color: var(--lagoon); }
}

/* ---------- Heroes: sand under palm shade ---------- */
.hero{ position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sand) 0%, #fff 100%); }
.hero::before{
  /* a palm frond casting faint shade across the top corner */
  content: ""; position: absolute; right: -90px; top: -70px; width: 560px; height: 410px; pointer-events: none; opacity: .07;
  background: var(--frond) center / contain no-repeat; transform: rotate(8deg);
}
.hero__inner{ position: relative; max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 72px; }
.hero__copy{ max-width: 900px; }
.hero__kicker{ margin: 0 0 18px; font: 600 13.5px/1.4 var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--palm); }
.hero__title{
  font-size: clamp(34px, 5.2vw, 64px);
  text-wrap: balance;
}
.hero__lede{ margin: 20px 0 0; max-width: 58ch; font-size: clamp(17.5px, 1.6vw, 20px); color: var(--muted); }
.hero__lede a{ color: var(--lagoon-2); }
.hero__actions{ margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hero--page .hero__title{ font-size: clamp(32px, 4.6vw, 54px); }
.hero--page .hero__inner{ padding-top: 48px; padding-bottom: 62px; }
@media (max-width: 700px){ .hero::before{ width: 360px; height: 260px; right: -120px; top: -60px; } }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 13px 26px; border-radius: 999px;
  font: 700 13.5px/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn--lagoon{ background: var(--lagoon); color: #fff; }
.btn--lagoon:hover{ background: var(--lagoon-2); color: #fff; box-shadow: 0 10px 22px -12px rgba(13,92,99,.8); }
.btn--gold{ background: var(--gold); color: var(--deep); }
.btn--gold:hover{ background: var(--gold-2); color: var(--deep); }
.btn--line{ color: var(--lagoon); box-shadow: inset 0 0 0 1.5px var(--lagoon); }
.btn--line:hover{ background: var(--lagoon); color: #fff; }
.btn--line-light{ color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.btn--line-light:hover{ background: #fff; color: var(--lagoon); }

/* the feature image with a fine gold line inset from its edge (includes/banner.incl.php) */
.banner{ position: relative; margin: 40px 0 0; border-radius: 26px; overflow: hidden; box-shadow: 0 34px 60px -38px rgba(8,56,61,.7); }
.banner::after{ content: ""; position: absolute; inset: 12px; border: 1.5px solid rgba(226,194,90,.9); border-radius: 17px; pointer-events: none; }
.banner img{ width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; }
.hero--page .banner{ margin-top: 34px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 45%; }
@media (max-width: 600px){
  .banner{ border-radius: 18px; }
  .banner::after{ inset: 8px; border-radius: 12px; }
  .hero--page .banner img{ aspect-ratio: 1280 / 500; }
}

/* ---------- Generic sections ---------- */
.section{ padding: 64px 0 80px; }
.section__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section__title{ font-size: clamp(30px, 3.8vw, 44px); margin-bottom: 28px; }
.section__title::before, .about-blog h2::before, .explore h2::before, .outfitters h2::before, .cove h2::before{
  content: ""; display: block; width: 46px; height: 20px; margin-bottom: 12px; background: var(--arc) 0 0 / 100% 100% no-repeat;
}
.embed{ min-height: 320px; }

/* page content runs the full content width, same as "Keep exploring";
   the gandor.tv widgets cap themselves at 920px in their own styles */
.network-embed > div[class^="gtv-"]{ max-width: none; margin-top: 0; margin-bottom: 0; }

/* Third-party embeds paint their own white/cream panels; let the page
   background show through (cards inside keep theirs). !important
   because these widgets inject their CSS after ours. */
.page-home .eapps-facebook-feed-inner,
.page-photos .eapps-instagram-feed-header,
.page-thrive .cc-thrive-widget,
.page-directory .network-embed .ui-tabs,
.page-directory .network-embed .ui-tabs-nav,
.page-directory .network-embed .ui-tabs-panel,
.page-directory .network-embed .directory-card{ background: transparent !important; }

/* ---------- Dive, snorkel and fish from Secret Harbour (home): the two outfitters ---------- */
.outfitters{ position: relative; overflow: hidden; background: linear-gradient(170deg, var(--lagoon) 0%, var(--deep) 100%); color: rgba(255,255,255,.88); padding: 80px 0 88px; }
.outfitters::before{
  content: ""; position: absolute; left: -140px; bottom: -120px; width: 620px; height: 450px; pointer-events: none; opacity: .09;
  background: var(--frond) center / contain no-repeat; transform: scaleX(-1) rotate(-14deg); filter: brightness(4);
}
.outfitters__inner{ position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.outfitters__kicker{ margin: 0 0 6px; font: 600 13px/1.4 var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--aqua); }
.outfitters h2{ color: #fff; font-size: clamp(30px, 3.8vw, 44px); margin-bottom: 12px; }
.outfitters h2 em{ color: var(--gold-2); }
.outfitters__intro{ margin: 0 0 34px; max-width: 60ch; }
.outfitters__grid{ display: grid; gap: 28px; }
.outfitter{ display: flex; flex-direction: column; background: rgba(255,255,255,.07); border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(226,194,90,.35); }
.outfitter__photo{ position: relative; margin: 0; }
.outfitter__photo img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.outfitter__photo::after{ content: ""; position: absolute; inset: 10px; border: 1.5px solid rgba(226,194,90,.85); border-radius: 12px; pointer-events: none; }
.outfitter__body{ display: flex; flex-direction: column; flex: 1; padding: 24px 24px 28px; }
.outfitter__label{ margin: 0 0 8px; font: 600 12px/1.4 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); }
.outfitter h3{ color: #fff; font-size: clamp(22px, 2.4vw, 27px); margin-bottom: 10px; }
.outfitter p{ margin: 0 0 14px; }
.outfitter__list{ list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 6px; font-size: 16.5px; }
.outfitter__list li{ position: relative; padding-left: 22px; }
.outfitter__list li::before{ content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--gold-2); }
.outfitter__actions{ display: flex; flex-wrap: wrap; gap: 10px; margin: auto 0 0 !important; }
@media (min-width: 880px){ .outfitters__grid{ grid-template-columns: 1fr 1fr; } }

/* ---------- From the hill above Secret Harbor (home) ---------- */
.cove{ background: var(--sand); padding: 84px 0; }
.cove__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 40px; align-items: center;
}
.cove__photo{ position: relative; margin: 0; border-radius: 26px; overflow: hidden; box-shadow: 0 34px 60px -38px rgba(8,56,61,.7); }
.cove__photo img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cove__photo::after{ content: ""; position: absolute; inset: 12px; border: 1.5px solid rgba(226,194,90,.9); border-radius: 17px; pointer-events: none; }
.cove__logo{ width: 230px; margin-bottom: 22px; }
.cove h2{ font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 14px; }
.cove p{ margin: 0 0 14px; max-width: 56ch; }
.cove__list{ list-style: none; margin: 8px 0 24px; padding: 0; display: grid; gap: 10px; }
.cove__list li{ padding: 12px 16px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); font-size: 16px; line-height: 1.5; }
.cove__list strong{ display: block; font: 700 12.5px/1.4 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--palm); margin-bottom: 2px; }
@media (min-width: 900px){ .cove__inner{ grid-template-columns: 1fr 1.05fr; gap: 64px; } }

/* ---------- About this blog ---------- */
.about-blog{ background: #fff; padding: 76px 0 72px; border-top: 1px solid var(--line); }
.about-blog__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 20px;
}
.about-blog h2{ font-size: clamp(30px, 3.8vw, 44px); }
.about-blog p{ margin: 0; max-width: 64ch; }
.about-blog .follow-label{ margin-top: 20px; font: 600 13px/1.4 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.follow{ list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.follow a{
  display: inline-block; padding: 10px 22px; border-radius: 999px;
  background: var(--lagoon); color: #fff; text-decoration: none; font: 700 13px/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
}
.follow a:hover{ background: var(--palm); color: #fff; }
@media (min-width: 860px){ .about-blog__inner{ grid-template-columns: 1fr 2fr; gap: 56px; } }

/* ---------- Keep exploring ---------- */
.explore{ padding: 72px 0 32px; background: var(--sand); }
.explore__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.explore h2{ font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 28px; }
.explore__grid{ display: grid; gap: 36px; }
@media (min-width: 760px){ .explore__grid{ grid-template-columns: 1fr 1fr; } }
.tile{ display: block; text-decoration: none; color: var(--ink); }
.tile:hover{ color: var(--ink); }
.tile__img{ position: relative; display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 26px 44px -32px rgba(8,56,61,.7); transition: transform .25s ease; }
.tile__img::after{ content: ""; position: absolute; inset: 9px; border: 1.5px solid rgba(226,194,90,.9); border-radius: 13px; pointer-events: none; }
.tile:hover .tile__img{ transform: translateY(-4px); }
.tile__img img{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.tile__title{ display: block; margin-top: 18px; font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--lagoon); line-height: 1.2; }
.tile:hover .tile__title{ color: var(--palm); }
.tile__text{ display: block; margin-top: 4px; color: var(--muted); }

/* ---------- Share ---------- */
.share{ padding: 32px 0 80px; background: var(--sand); }
.share__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
}
.share__label{ margin: 0; font: 600 13px/1.4 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.share__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.share__list a{
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1.5px var(--line);
  transition: box-shadow .2s ease;
}
.share__list a:hover{ box-shadow: 0 0 0 2px var(--gold); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--deep); color: rgba(255,255,255,.8); font-size: 16px; }
.site-footer::before{
  content: ""; display: block; height: 14px; background: var(--sand) var(--fringe) 0 0 / 40px 14px repeat-x;
  border-bottom: 2px solid var(--palm);
}
.site-footer__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 52px var(--gutter) 64px;
  display: grid; gap: 40px;
}
.site-footer__inner > *{ min-width: 0; }
.site-footer a{ color: #fff; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.site-footer a:hover{ color: var(--gold-2); }
.site-footer__brand .brand{ max-width: 100%; }
.site-footer__brand .brand__word--light{ width: auto; max-width: 100%; height: auto; max-height: 32px; }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer h2{ font: 700 13.5px/1.4 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 14px; }
.site-footer ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__network p{ margin: 0 0 14px; }
.site-footer__network .site-footer__gtv{ margin-bottom: 22px; }
.site-footer__cc{ display: inline-block; background: #fff; border-radius: 12px; padding: 10px 16px; }
.site-footer__cc img{ width: 170px; }
@media (min-width: 900px){
  .site-footer__inner{ grid-template-columns: 1fr 1.4fr 1fr; gap: 56px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn, .tile__img, .share__list a{ transition: none; }
}