/* Site styles, shared by the website and the wiki.
   Look: warm Aruban sand background, flag blue, flag-yellow sun, the red four-pointed star.
   No external resources: system font stacks only (keeps the CSP strict and pages fast). */
:root {
  --flag: #418FDE;      /* Aruban flag blue, PMS 279 C (AB 1991 no. 101, art. 2): the brand colour */
  --flag-soft: #E8F2FB;
  --flag-edge: #2F6DB4;  /* darker edge under buttons */
  --ink: #081A2C;       /* small text, links, focus ring; 5.2:1 on flag blue */
  --focus: var(--ink);
  --lagoon: #5BC7C0;
  --lagoon-soft: #DDF3F1;
  --sun: #F4C534;
  --star: #E2483D;
  --ochre: #F2A93B;
  --sand: #E8D6B0;
  --leaf: #3E8F5A;
  --leaf-deep: #2E7349;
  --bark: #5A4632;
  --cactus: #4E8A5B;
  --bg: #FAF3E7;        /* warm sand cream */
  --paper: #FFFCF7;     /* warm white */
  --text: #12263A;
  --muted: #4A5D6E;
  --line: #E6DBCB;
  --line-strong: #857766;

  --display: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.7rem;
  --step-3: clamp(1.9rem, 3.4vw, 2.6rem);
  --step-4: clamp(2.6rem, 7vw, 5.4rem);

  --gutter: 16px;
  --max: 1160px;
  --radius-s: 8px;
  --radius-l: 22px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: var(--step-0); line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--flag); text-decoration-thickness: 2px; }
a:hover { color: var(--ink); text-decoration-color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--display); line-height: 1.12; margin: 0 0 .5em; color: var(--flag); text-wrap: balance; }
h2 { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.015em; max-width: 24ch; }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.wrap--narrow { max-width: 820px; }
@media (min-width: 720px) { :root { --gutter: 32px; } }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--sun); color: var(--ink); padding: 8px 14px; z-index: 20; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.section-lead { color: var(--muted); max-width: 62ch; font-size: 1.1rem; }
.note { color: var(--muted); font-size: var(--step--1); max-width: 70ch; }
.more { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 800; color: var(--ink); text-decoration: none; background: linear-gradient(var(--flag), var(--flag)) 0 calc(100% - 8px) / 0 2px no-repeat; transition: background-size .3s ease; }
.more::after { content: "→" / ""; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--flag); color: var(--ink); font-weight: 800; box-shadow: 0 3px 0 var(--flag-edge); }
.more:hover, .more:focus-visible { color: var(--ink); background-size: calc(100% - 46px) 2px; }
@media (prefers-reduced-motion: no-preference) {
  .more::after { transition: transform .2s ease, box-shadow .2s ease; }
  @media (hover: hover) { .more:hover::after { transform: translateX(5px); } }
}

/* Bands: page sections with their own vertical rhythm */
.band { padding-block: clamp(56px, 8vw, 104px); }
.band--paper { background: var(--paper); }
.band--sea { background: var(--flag); color: var(--ink); }
.band--sea h2, .band--sea h3 { color: #fff; }
.band--sea .section-lead { color: var(--ink); }
.band--lagoon { background: var(--lagoon-soft); }
.band--lagoon h2, .band--lagoon h3 { color: var(--ink); }
.band--sun { background: var(--sun); }
.band--sun h2, .band--sun .section-lead { color: var(--ink); }

/* Buttons: flag blue with a darker edge underneath so they feel pressable. They lift a little on
   hover and press down when clicked; the main ones carry an arrow that slides forward. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; background: var(--flag); color: var(--ink); text-decoration: none; font: inherit; font-weight: 800; letter-spacing: -0.005em; padding: 14px 24px; border-radius: 999px; border: 2px solid var(--flag); box-shadow: 0 4px 0 var(--flag-edge); cursor: pointer; }
@media (hover: hover) { .btn:hover { background: #5A9FE6; border-color: #5A9FE6; color: var(--ink); } }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--flag-edge); }
.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--flag); box-shadow: 0 4px 0 #CFE0F5; }
@media (hover: hover) { .btn--ghost:hover { background: var(--flag-soft); border-color: var(--flag); } }
.btn--ghost:active { box-shadow: 0 1px 0 #CFE0F5; }
.btn:not(.btn--ghost):not(.btn--small)::after { content: "→" / ""; font-weight: 700; }
.btn--small { padding: 10px 16px; min-height: 44px; font-size: var(--step--1); box-shadow: 0 3px 0 var(--flag-edge); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease; }
  .btn::after { transition: transform .2s ease; }
  @media (hover: hover) { .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--flag-edge); } }
  @media (hover: hover) { .btn--ghost:hover { box-shadow: 0 6px 0 #CFE0F5; } }
  @media (hover: hover) { .btn:hover::after { transform: translateX(4px); } }
  .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--flag-edge); }
  .btn--ghost:active { box-shadow: 0 1px 0 #CFE0F5; }
}
.btn[disabled] { opacity: .6; cursor: wait; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

/* The red four-pointed star from the Aruban flag, used as a list marker */
.stars { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.stars li { padding-left: 26px; position: relative; }
.stars li::before { content: ""; position: absolute; left: 0; top: .32em; width: 15px; height: 15px; background: var(--star);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }

/* Header */
.top { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; transition: box-shadow .3s ease; }
.top.is-scrolled { box-shadow: 0 6px 20px rgba(8, 26, 44, .08); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 11; background: var(--bg); }
.top__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 68px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--flag); }
.brand img { width: 36px; height: 36px; }
.nav { display: flex; align-items: center; gap: 6px 20px; flex-wrap: wrap; }
.nav a:not(.btn) { text-decoration: none; color: var(--text); font-weight: 600; font-size: .95rem; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--flag); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--star); }
.menu-btn { display: none; }

.lang { position: relative; font-size: .9rem; }
.lang summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-height: 44px; font-weight: 800; color: var(--ink); padding: 8px 15px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: 0 3px 0 var(--line); }
.lang[open] summary { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); background: var(--flag-soft); }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { list-style: none; margin: 6px 0 0; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); position: absolute; right: 0; min-width: 160px; z-index: 12; box-shadow: 0 8px 24px rgba(8, 26, 44, .14); }
.lang a { display: block; padding: 8px 10px; text-decoration: none; color: var(--text); border-radius: 6px; }
.lang a:hover { background: var(--flag-soft); }
.lang a[aria-current="true"] { font-weight: 700; color: var(--ink); }

/* Menu button: flag yellow and pressable like the other buttons, with a three-line icon; it stays
   pressed in while the menu is open */
.js .menu-btn { align-items: center; gap: 8px; min-height: 44px; background: var(--sun); border: 2px solid var(--sun); border-radius: 999px; padding: 8px 18px 8px 14px; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 #C99A1C; }
.js .menu-btn::before { content: ""; width: 16px; height: 12px; background: linear-gradient(currentColor 0 0) 0 0 / 100% 2.5px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 2.5px no-repeat, linear-gradient(currentColor 0 0) 0 100% / 100% 2.5px no-repeat; }
@media (hover: hover) { .js .menu-btn:hover { background: #F7D158; border-color: #F7D158; } }
.js .menu-btn[aria-expanded="true"] { transform: translateY(3px); box-shadow: 0 1px 0 #C99A1C; }
@media (prefers-reduced-motion: no-preference) {
  .js .menu-btn { transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease; }
  @media (hover: hover) { .js .menu-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #C99A1C; } }
  .js .menu-btn:active, .js .menu-btn[aria-expanded="true"] { transform: translateY(3px); box-shadow: 0 1px 0 #C99A1C; }
}
/* Phones and tablets: the language picker and the Menu button sit side by side in the header; the
   menu opens as a panel that floats over the page (it no longer pushes the page down), with large
   rows, the current page starred, the flag's stripes at the foot and a full-width intake button */
.top__tools { display: none; }
.top__inner { position: relative; }
@media (max-width: 960px) {
  .js .top__tools { display: flex; align-items: center; gap: 10px; }
  .js .top__inner { flex-wrap: nowrap; }
  .brand { min-width: 0; }
  .js .menu-btn { display: inline-flex; }
  .js .nav .lang { display: none; }
  .js .nav { position: absolute; top: calc(100% + 8px); left: var(--gutter); right: var(--gutter); z-index: 12; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0;
    padding: 10px 10px 30px; background: linear-gradient(var(--sun), var(--sun)) left 0 bottom 14px / 100% 3px no-repeat, linear-gradient(var(--sun), var(--sun)) left 0 bottom 6px / 100% 3px no-repeat, var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: 0 6px 0 var(--line), 0 24px 48px rgba(8, 26, 44, .18);
    visibility: hidden; opacity: 0; transform: translateY(-10px) scale(.98); transform-origin: top right; pointer-events: none; }
  .js .nav.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
  .js .nav a:not(.btn) { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; border: 0; border-radius: 14px; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
  .js .nav a:not(.btn) + a:not(.btn) { box-shadow: 0 -1px 0 var(--line); }
  .js .nav a:not(.btn)::after { content: "→" / ""; margin-left: auto; color: var(--flag); font-weight: 800; }
  .js .nav a:not(.btn):hover, .js .nav a:not(.btn):focus-visible { background: var(--flag-soft); box-shadow: none; }
  .js .nav a[aria-current="page"] { background: var(--flag-soft); box-shadow: none; }
  .js .nav a[aria-current="page"]::before { content: ""; flex: none; width: 13px; height: 13px; background: var(--star); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
  .js .nav .btn { margin-top: 10px; width: 100%; min-height: 52px; font-size: 1.02rem; }
  .js .nav .btn::after { content: "→" / ""; font-weight: 800; }
}
@media (max-width: 480px) {
  .brand { font-size: 1.15rem; gap: 8px; }
  .brand img { width: 32px; height: 32px; }
  .js .top__tools { gap: 8px; }
  .js .menu-btn { padding: 8px 14px 8px 12px; }
  .lang summary { padding: 8px 12px; }
}
@media (max-width: 359px) { .js .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .js .menu-btn { padding: 8px 14px; } }
/* .is-ready comes after the first paint, so the panel does not fade out visibly on page load */
@media (prefers-reduced-motion: no-preference) { .js .nav.is-ready { transition: opacity .2s ease, transform .2s ease, visibility .2s; } }

/* Hero */
.hero { padding-block: clamp(36px, 7vw, 88px) clamp(32px, 6vw, 72px); overflow: hidden; }
.hero__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.2fr 1fr; } }
.hero__lang { color: var(--muted); font-size: var(--step--1); max-width: 52ch; margin-bottom: .6em; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.25rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; max-width: 15ch; margin-bottom: .35em; }
.lead { font-size: 1.2rem; max-width: 54ch; }
.hero .stars { margin-top: 28px; max-width: 54ch; color: var(--muted); }
.hero .stars strong { color: var(--text); }

/* The Aruban scene: watapana tree, cunucu house, kadushi cactus, star, sea with flag stripes */
.scene-wrap { margin: 0; }
/* A warm wooden frame around the arch, raised with a darker edge underneath and a soft shadow */
.scene { width: 100%; max-width: 460px; margin: 0 auto; border: clamp(6px, 1.2vw, 8px) solid #7A5236; border-radius: 50% 50% 18px 18px / 50% 50% 18px 18px; box-shadow: 0 9px 0 #5A3B26, 0 22px 34px rgba(90, 59, 38, .22); background: #E8F2FB; }
.scene-wrap figcaption { color: var(--muted); font-size: var(--step--1); max-width: 40ch; margin: 22px auto 0; text-align: center; }
.scene__sky { fill: var(--flag-soft); }
.scene__sea { fill: var(--flag); }
.scene__stripe { stroke: var(--sun); stroke-width: 5; }
.scene__sand { fill: var(--sand); }
.scene__trunk { fill: none; stroke: var(--bark); stroke-width: 14; stroke-linecap: round; }
.scene__trunk--thin { stroke-width: 8; }
.scene__leaf { fill: var(--leaf); }
.scene__leaf--back { fill: var(--leaf-deep); }
.scene__wall { fill: var(--ochre); }
.scene__roof { fill: var(--star); }
.scene__trim { fill: #fff; }
.scene__opening { fill: var(--ink); }
.scene__band { fill: var(--lagoon); }
.scene__cactus { fill: var(--cactus); }
.scene__rib { fill: none; stroke: #7FB58A; stroke-width: 2; }
.scene__star { fill: var(--star); stroke: #fff; stroke-width: 4; stroke-linejoin: round; }
.scene__waves path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .scene__waves--a { animation: waves-a 5s ease-in-out infinite alternate; }
  .scene__waves--b { animation: waves-b 6.5s ease-in-out infinite alternate; }
}
@keyframes waves-a { to { transform: translateX(14px); } }
@keyframes waves-b { to { transform: translateX(-12px); } }
#connect { position: relative; }
#connect::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 28px; pointer-events: none;
  background: url(../img/wave-front.svg?v=8aaec260d4) repeat-x 0 100% / 160px 28px, url(../img/wave-back.svg?v=6b42e91e88) repeat-x 0 0 / 200px 22px; }
@media (prefers-reduced-motion: no-preference) { #connect::before { animation: wave-flow 9s linear infinite; } }
@keyframes wave-flow { to { background-position: -160px 100%, 200px 0; } }

/* Lora (yellow-shouldered amazon) on the branch and wara wara (crested caracara) in the sky */
.scene__lora-body { fill: #46A852; }
.scene__lora-wing { fill: #2F8442; }
.scene__lora-yellow { fill: #F6D447; }
.scene__lora-edge { fill: none; stroke: var(--star); stroke-width: 2.2; stroke-linecap: round; }
.scene__lora-eye { fill: var(--ink); }
.scene__lora-beak { fill: #EBDDC2; }
.scene__lora-feet { fill: none; stroke: #8A8F96; stroke-width: 2; stroke-linecap: round; }
.scene__wara-dark { fill: #3B2B21; }
.scene__wara-pale { fill: #F6EFE0; }
.scene__wara-band { fill: none; stroke: #3B2B21; stroke-width: 2.4; }
.scene__wara-cap { fill: #241A14; }
.scene__wara-face { fill: #E8573A; }
.scene__wara-bill { fill: #BFD0DC; }
.scene__lora-fly, .scene__wara-sit { display: none; }
.scene__wara-legs { fill: none; stroke: #E3B83F; stroke-width: 2.2; stroke-linecap: round; }

/* Flying birds: site.js copies both birds into a fixed layer; they sit in their spot, then take off
   and fly along while the page scrolls. Under the header, never in the way of clicks. */
.flyers { position: fixed; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.flyer { position: absolute; left: 0; top: 0; overflow: visible; will-change: transform; }
.flyer.is-flying .scene__lora { display: none; }
.flyer.is-flying .scene__lora-fly { display: inline; }
.flyer.is-flying .scene__lora-flap { transform-box: fill-box; transform-origin: 50% 100%; animation: lora-flap .28s ease-in-out infinite alternate; }
@keyframes lora-flap { to { transform: scaleY(-.55); } }
.has-flyers .hero .scene__bird { visibility: hidden; }
.flyer.is-away { visibility: hidden; }
.flyer.is-sitting .scene__warawara { display: none; }
.flyer.is-sitting .scene__wara-sit { display: inline; }
/* Perched birds are never quite still: they breathe, look around now and then and flick their
   tails, each on its own rhythm; landing ends in a small hop and squash */
.motion .scene__lora, .motion .scene__wara-perched { transform-box: fill-box; transform-origin: 50% 100%; animation: bird-breathe 3.2s ease-in-out infinite; }
.motion .scene__wara-perched { animation-duration: 3.9s; }
.motion .scene__lora-head { transform-box: fill-box; transform-origin: 25% 85%; animation: bird-look 5.2s ease-in-out infinite; }
.motion .scene__wara-head { transform-box: fill-box; transform-origin: 30% 90%; animation: bird-look 6.6s ease-in-out 1.4s infinite; }
.motion .scene__lora-tail { transform-box: fill-box; transform-origin: 85% 0%; animation: bird-flick 4.4s ease-in-out .7s infinite; }
.motion .scene__wara-tail { transform-box: fill-box; transform-origin: 85% 0%; animation: bird-flick 5.8s ease-in-out 2.1s infinite; }
.flyer.is-sitting .scene__lora, .flyer.is-sitting .scene__wara-perched { animation: bird-settle .55s ease-out, bird-breathe 3.4s ease-in-out .55s infinite; }
@keyframes bird-breathe { 50% { transform: scale(1.015, 1.035); } }
@keyframes bird-look { 0%, 52%, 100% { transform: rotate(0); } 60%, 68% { transform: rotate(-12deg); } 76%, 86% { transform: rotate(8deg); } }
@keyframes bird-flick { 0%, 86%, 100% { transform: rotate(0); } 91% { transform: rotate(-10deg); } 96% { transform: rotate(5deg); } }
@keyframes bird-settle { 0% { transform: translateY(-8px) scale(.95, 1.07); } 45% { transform: translateY(1px) scale(1.07, .93); } 100% { transform: none; } }
/* The branch the birds land on slides in from the side of the last section (--reach from site.js) */
.has-perch { position: relative; overflow: hidden; padding-bottom: calc(clamp(56px, 8vw, 104px) + clamp(96px, 13vw, 140px)); }
.perch { position: absolute; right: 0; bottom: clamp(6px, 1.5vw, 16px); width: clamp(240px, 34vw, 380px); aspect-ratio: 340 / 120; background: url(../img/perch.svg?v=dbdf732046) no-repeat right center / contain; pointer-events: none; transform: translateX(calc((1 - var(--reach, 0)) * 105%)); }
.scene__wind path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 8; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .scene__wind path { animation: wind 3.6s linear infinite; }
  .scene__wind path:nth-child(2) { animation-duration: 4.4s; }
  .scene__wind path:nth-child(3) { animation-duration: 3.1s; }
}
@keyframes wind { to { stroke-dashoffset: -108; } }

/* Built for Aruba: the green iguana (yuwana) basks on a cunucu stone under the seal; it breathes,
   blinks, sways its tail and head-bobs now and then, and bobs and flares its dewlap when tapped.
   The blau blau, Aruba's own whiptail lizard, darts stop-and-go along the bottom of two sections
   when they come into view (site.js) and scurries off when tapped. */
/* The seal in the Aruba page head: centred in its column, larger */
.page-head .split { align-items: center; }
.page-head .emblem { width: min(320px, 72vw); margin: 8px auto 0; }
/* The iguana sits under the section heading and looks towards the list; on wide screens that
   column stays in view while the list scrolls past */
.iguana-spot { margin-top: clamp(20px, 4vw, 44px); }
.iguana { display: block; width: min(340px, 86vw); height: auto; cursor: pointer; touch-action: manipulation; }
@media (min-width: 900px) { .split > div:has(> .iguana-spot) { position: sticky; top: 104px; } }
.iguana__rock { fill: #CDB48C; }
.iguana__rock-top { fill: #DEC9A3; }
.iguana__green { fill: #6BAE4F; }
.iguana__dark { fill: #5A9A45; }
.iguana__band { fill: none; stroke: #3F7A33; stroke-width: 2.4; stroke-linecap: round; }
.iguana__belly { fill: #A3CF77; }
.iguana__crest { fill: #4E8F3D; }
.iguana__leg { fill: none; stroke: #5A9A45; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.iguana__dewlap { fill: #8FC35F; transform-box: fill-box; transform-origin: 50% 0%; }
.iguana__shield { fill: #B3D886; }
.iguana__iris { fill: var(--sun); }
.iguana__pupil { fill: var(--ink); }
.iguana__head, .iguana__eye, .iguana__tail, .iguana__body { transform-box: fill-box; }
.iguana__head { transform-origin: 10% 80%; }
.iguana__eye { transform-origin: center; }
.iguana__tail { transform-origin: 100% 20%; }
.iguana__body { transform-origin: 50% 100%; }
.has-lizard, section:has(> .lizard-run) { position: relative; overflow: clip; }
.lizard-run { position: absolute; left: 0; bottom: clamp(10px, 2vw, 20px); width: 84px; z-index: 1; transform: translateX(6vw); cursor: pointer; }
.blaublau { display: block; width: 100%; height: auto; }
.blaublau__skin { fill: #3BB0BE; }
.blaublau__tail { fill: #2C8FA8; }
.blaublau__leg { fill: none; stroke: #2C8FA8; stroke-width: 2.6; stroke-linecap: round; }
.blaublau__spots circle { fill: #E8F8F5; }
.blaublau__eye { fill: var(--ink); }
.blaublau__leg, .blaublau__tail { transform-box: fill-box; }
.blaublau__leg--a { transform-origin: 50% 0%; }
.blaublau__leg--b { transform-origin: 50% 100%; }
.blaublau__tail { transform-origin: 100% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .iguana__body { animation: iguana-breathe 3.6s ease-in-out infinite; }
  .iguana__head { animation: iguana-bob 9s ease-in-out infinite; }
  .iguana__eye { animation: iguana-blink 5.5s ease-in-out infinite; }
  .iguana__tail { animation: iguana-tail 7s ease-in-out infinite; }
  .iguana.is-displaying .iguana__head { animation: iguana-bob-now 1.4s ease-in-out; }
  .iguana.is-displaying .iguana__dewlap { animation: dewlap 1.4s ease-in-out; }
  .motion .lizard-run { transform: translateX(-110px); }
  .motion .lizard-run.is-running { animation: lizard-dash 6.5s linear forwards; }
  .motion .lizard-run.is-running .blaublau__leg--a { animation: lizard-legs .14s ease-in-out infinite alternate; }
  .motion .lizard-run.is-running .blaublau__leg--b { animation: lizard-legs .14s ease-in-out infinite alternate-reverse; }
  .motion .lizard-run.is-running .blaublau__tail { animation: lizard-tail .3s ease-in-out infinite alternate; }
  .blaublau__flee { transition: transform .9s ease-in; }
  .lizard-run.is-fleeing .blaublau__flee { transform: translateX(110vw); }
}
@keyframes iguana-breathe { 50% { transform: scaleY(1.03); } }
@keyframes iguana-bob { 0%, 82%, 100% { transform: translateY(0); } 85%, 91% { transform: translateY(-5px); } 88%, 94% { transform: translateY(1px); } }
@keyframes iguana-bob-now { 15%, 45%, 75% { transform: translateY(-6px) rotate(-3deg); } 30%, 60%, 90% { transform: translateY(1px); } }
@keyframes dewlap { 20%, 80% { transform: scaleY(1.6); } }
@keyframes iguana-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes iguana-tail { 50% { transform: rotate(-3deg); } }
@keyframes lizard-dash { 0% { transform: translateX(-110px); } 20%, 34% { transform: translateX(26vw); } 54%, 66% { transform: translateX(58vw); } 100% { transform: translateX(calc(100vw + 40px)); } }
@keyframes lizard-legs { to { transform: rotate(28deg); } }
@keyframes lizard-tail { to { transform: rotate(9deg); } }

/* ERP systems: a shark swims beside the page and shows how far down the reader is. A lane of faint
   bubbles along the right edge on wide screens, across the top under the header on narrower ones.
   It faces the way the page scrolls and turns to look at the page when the reader stops (site.js). */
.shark-lane { display: none; }
.motion .shark-lane { display: block; position: fixed; z-index: 8; pointer-events: none; }
.shark { position: absolute; display: block; height: auto; transition: transform .45s cubic-bezier(.3, .7, .3, 1); }
.shark__body { fill: #6F86A0; }
.shark__belly { fill: #EEF2F6; }
.shark__fin { fill: #5D738C; }
.shark__line { fill: none; stroke: #4A5E75; stroke-width: 1.4; stroke-linecap: round; }
.shark__eye { fill: var(--ink); }
.shark__tail { transform-box: fill-box; transform-origin: 100% 50%; }
@media (prefers-reduced-motion: no-preference) { .shark__tail { animation: shark-tail .7s ease-in-out infinite alternate; } }
@keyframes shark-tail { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.motion .shark-lane { left: 8px; right: 8px; top: calc(env(safe-area-inset-top, 0px) + 74px); height: 28px;
  background: radial-gradient(circle, rgba(65, 143, 222, .35) 1.6px, transparent 2.2px) 0 50% / 14px 8px repeat-x; }
.motion .shark-lane .shark { left: 0; top: 0; width: 58px; }
@media (min-width: 1200px) {
  .motion .shark-lane { left: auto; right: 14px; top: 100px; bottom: 30px; width: 44px; height: auto;
    background: radial-gradient(circle, rgba(65, 143, 222, .35) 1.6px, transparent 2.2px) 50% 0 / 8px 14px repeat-y; }
  .motion .shark-lane .shark { left: 50%; width: 74px; }
}

/* Page heads for inner pages */
/* Sea window: inner pages dive below the home page's sea. A rounded flag-blue window with the same
   yellow surface stripes and white wave squiggles, sand, seagrass, bubbles and each page's own
   creatures, in a warm wooden frame like the home illustration. site.js adds the taps. */
.page-head .sea { order: 1; width: min(100%, 560px); margin-top: 24px; }
.page-head > .wrap:has(> .sea) { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .page-head > .wrap:has(> .sea) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); column-gap: 48px; align-items: center; }
  .page-head > .wrap > .sea { grid-column: 2; grid-row: 1 / span 6; width: 100%; margin: 0; }
  .page-head > .wrap:has(> .sea) > :not(.sea) { grid-column: 1; }
}
.sea__svg { display: block; width: 100%; height: auto; border: clamp(5px, 1vw, 7px) solid #7A5236; border-radius: 28px; box-shadow: 0 8px 0 #5A3B26, 0 20px 30px rgba(90, 59, 38, .2); background: var(--flag); touch-action: manipulation; }
.sea__water { fill: var(--flag); }
.sea__ray { fill: #fff; opacity: .07; }
.sea__stripe { stroke: var(--sun); stroke-width: 3; }
.sea__waves path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .8; }
.sea__sand { fill: var(--sand); }
.sea__blade { fill: var(--leaf); }
.sea__blade--b { fill: var(--cactus); }
.sea__bubbles circle, .sea__pop { fill: #fff; opacity: .45; }
.sea__hit { fill: transparent; cursor: pointer; }
.sea__eye-w { fill: #fff; }
.sea__eye { fill: var(--ink); }
.sea__silver { fill: #C6D2DE; }
.sea__dark-back { fill: #9DB0C3; }
.sea__fin { fill: #8197AD; }
.sea__bars { fill: none; stroke: #8197AD; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.sea__line { fill: none; stroke: #6F859B; stroke-width: 1.4; stroke-linecap: round; }
.sea__fish-yellow { fill: var(--sun); }
.sea__fish-tail { fill: var(--ochre); }
.sea__crab-red { fill: var(--star); }
.sea__crab-leg, .sea__crab-nip { fill: none; stroke: #C23B31; stroke-width: 3; stroke-linecap: round; }
.sea__scallop-fan { fill: #F7DE8A; }
.sea__scallop-rib { fill: none; stroke: #FFF3C4; stroke-width: 2; stroke-linecap: round; }
.sea__clam-shell { fill: #F1E3C6; }
.sea__clam-rib { fill: none; stroke: #DCCBA6; stroke-width: 1.6; stroke-linecap: round; }
.sea__pearl { fill: #fff; }
.sea__conch-body { fill: var(--ochre); }
.sea__conch-curl { fill: #F7C878; }
.sea__conch-lip { fill: #F4B8B2; }
.sea__sparkle { fill: #fff; transform-box: fill-box; transform-origin: center; transform: scale(0); }
/* Each page shows its own creatures */
.sea__creature { display: none; }
[data-page="services"] :is(.sea__crab, .sea__scallop, .sea__school),
[data-page="erp-systems"] :is(.sea__barracuda, .sea__conch, .sea__school),
[data-page="how-we-work"] :is(.sea__school, .sea__clam, .sea__scallop),
[data-page="contact"] :is(.sea__conch, .sea__clam, .sea__school),
[data-page="privacy"] .sea__clam,
[data-page="thanks"] :is(.sea__school, .sea__crab),
[data-page="404"] :is(.sea__barracuda, .sea__scallop) { display: inline; }
/* Calm, constant life: waves, bubbles, seagrass, the school and a cruising barracuda */
@media (prefers-reduced-motion: no-preference) {
  .sea__waves--a { animation: waves-a 5s ease-in-out infinite alternate; }
  .sea__waves--b { animation: waves-b 6.5s ease-in-out infinite alternate; }
  .sea__bubbles circle { animation: bubble-rise 7s ease-in infinite; }
  .sea__bubbles circle:nth-child(2) { animation-duration: 8.5s; animation-delay: 2s; }
  .sea__bubbles circle:nth-child(3) { animation-duration: 6.4s; animation-delay: 1s; }
  .sea__bubbles circle:nth-child(4) { animation-duration: 9s; animation-delay: 3.5s; }
  .sea__blade { transform-box: fill-box; transform-origin: 50% 100%; animation: blade-sway 4.6s ease-in-out infinite; }
  .sea__blade--b { animation-duration: 5.8s; animation-delay: -1.5s; }
  .sea__cruise { animation: sea-cruise 18s linear infinite; }
  .sea__school-drift { animation: school-drift 10s ease-in-out infinite; }
  .sea__fish-body { animation: fish-bob 1.8s ease-in-out infinite; }
  .sea__fish:nth-child(2n) .sea__fish-body { animation-delay: -.6s; }
  .sea__fish:nth-child(3n) .sea__fish-body { animation-delay: -1.1s; }
  .sea__crab-walk { animation: crab-walk 8s ease-in-out infinite; }
  .motion .sea:not(.is-live) * { animation-play-state: paused; }
}
@keyframes bubble-rise { from { transform: translateY(0); opacity: .5; } to { transform: translateY(-220px); opacity: 0; } }
@keyframes blade-sway { 50% { transform: rotate(4deg); } }
@keyframes sea-cruise { from { transform: translateX(-90px); } to { transform: translateX(570px); } }
@keyframes school-drift { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(-34px, -8px); } 70% { transform: translate(22px, 7px); } }
@keyframes fish-bob { 50% { transform: translateY(-2px); } }
@keyframes crab-walk { 0%, 18%, 100% { transform: translateX(0); } 30%, 48% { transform: translateX(-46px); } 62%, 80% { transform: translateX(26px); } }
/* Taps (site.js): fish dart away, the crab raises its claws and hops, shells wiggle and sparkle,
   the clam snaps shut, the barracuda bursts ahead, open water releases bubbles */
.sea__fish-dart { transition: transform 1.2s ease; }
.sea__school.is-darting .sea__fish-dart { transform: translate(var(--dx, 0), var(--dy, 0)); transition-duration: .25s; transition-timing-function: ease-out; }
.sea__claw { transform-box: fill-box; transition: transform .3s ease; }
.sea__claw--l { transform-origin: 100% 100%; }
.sea__claw--r { transform-origin: 0% 100%; }
.sea__crab.is-startled .sea__claw--l { transform: rotate(28deg); }
.sea__crab.is-startled .sea__claw--r { transform: rotate(-28deg); }
.sea__crab.is-startled .sea__crab-hop { animation: crab-hop .5s ease-out; }
@keyframes crab-hop { 40% { transform: translateY(-8px); } }
.sea__shell { transform-box: fill-box; transform-origin: 50% 90%; }
.is-sparkle .sea__shell { animation: shell-wiggle .45s ease-in-out; }
.is-sparkle .sea__sparkle { animation: sparkle .55s ease-out; }
@keyframes shell-wiggle { 25% { transform: rotate(-9deg); } 75% { transform: rotate(8deg); } }
@keyframes sparkle { 50% { transform: scale(1); } }
.sea__clam-lid { transform-box: fill-box; transform-origin: 0% 100%; transform: rotate(-26deg); transition: transform .3s ease; }
.sea__clam.is-closed .sea__clam-lid { transform: rotate(0); }
.sea__burst { transition: transform 1.4s ease; }
.sea__barracuda.is-burst .sea__burst { transform: translateX(64px); transition: transform .4s ease-out; }
.sea__pop { animation: bubble-rise 2s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .sea__fish-dart, .sea__claw, .sea__clam-lid, .sea__burst { transition: none; } }

.page-head { padding-block: clamp(40px, 7vw, 80px) clamp(24px, 4vw, 40px); }
.page-head h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); font-weight: 900; letter-spacing: -0.03em; max-width: 20ch; }
.page-head .lead { color: var(--muted); }

/* Connect board: the one interactive moment. The section stays light so the text reads easily;
   the flag blue is the panel. Today: six loose tools. With one ERP: they snap into one block
   under a yellow "One ERP" bar. */
.switch { display: inline-flex; background: var(--flag-soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin: 8px 0 24px; }
.switch__btn { font: inherit; font-weight: 700; border: 0; background: transparent; color: var(--muted); padding: 10px 20px; min-height: 44px; border-radius: 999px; cursor: pointer; }
.switch__btn:hover { color: var(--ink); }
/* Today is the flag yellow; with one ERP turns green with a tick, the "this is good" state */
.switch__btn[aria-pressed="true"] { background: var(--sun); color: var(--ink); box-shadow: 0 1px 3px rgba(8, 26, 44, .25); }
.switch__btn[data-view="after"][aria-pressed="true"] { background: var(--leaf-deep); color: #fff; }
.switch__btn[data-view="after"][aria-pressed="true"]::before { content: ""; display: inline-block; width: 11px; height: 6px; margin: 0 9px 4px 0; vertical-align: middle; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  .switch__btn { transition: background-color .25s ease, color .25s ease; }
  .switch__btn[data-view="after"][aria-pressed="true"] { animation: switch-pop .32s ease; }
}
@keyframes switch-pop { 50% { transform: scale(1.07); } }
html:not(.js) .switch { display: none; }
/* The panel is a small Aruban scene: the flag star at upper left, trade wind and clouds in a sky
   strip, the tiles floating in between, and the flag's two yellow stripes as the sea at the bottom */
.board { --side: clamp(16px, 3.5vw, 36px); position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; border-radius: var(--radius-l); padding: clamp(60px, 7vw, 78px) var(--side) clamp(46px, 5vw, 60px);
  background:
    url(../img/board-star.svg?v=cf9eeb3517) no-repeat left var(--side) top clamp(14px, 1.8vw, 20px) / clamp(28px, 3vw, 36px) auto,
    linear-gradient(var(--sun), var(--sun)) no-repeat left 0 bottom 24px / 100% 3px,
    linear-gradient(var(--sun), var(--sun)) no-repeat left 0 bottom 15px / 100% 3px,
    var(--flag); }
.board__list, .board__hub { position: relative; z-index: 1; }
/* Clouds drift to and fro on their own; the wind blows across in gusts. Both also shift a little
   with scrolling (--p from site.js). */
.board::before, .board::after { content: ""; position: absolute; z-index: 0; pointer-events: none; background: no-repeat center / contain; }
.board::before { top: clamp(4px, 1vw, 10px); right: calc(var(--side) - 8px); width: clamp(150px, 20vw, 250px); aspect-ratio: 240 / 64; background-image: url(../img/board-clouds.svg?v=8fbd64ba2e); transform: translateX(calc(var(--p, 0) * -80px)); }
.board::after { top: clamp(12px, 1.6vw, 18px); left: calc(var(--side) + clamp(44px, 5vw, 60px)); width: clamp(140px, 18vw, 220px); aspect-ratio: 220 / 52; background-image: url(../img/board-wind.svg?v=7c514d7f33); transform: translateX(calc(var(--p, 0) * 48px)); }
@media (prefers-reduced-motion: no-preference) {
  .board::before { animation: cloud-drift 14s ease-in-out infinite alternate; }
  .board::after { animation: wind-gust 5.5s ease-in-out infinite; }
}
@keyframes cloud-drift { to { translate: -56px 5px; } }
@keyframes wind-gust { 0% { translate: -24px 0; opacity: 0; } 25%, 70% { opacity: 1; } 100% { translate: 44px -4px; opacity: 0; } }
.board__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); transition: gap .35s ease; }
@media (min-width: 760px) { .board__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 359px) { .board__list { grid-template-columns: 1fr; } }
.node { background: var(--paper); border-radius: 12px; padding: 16px 18px; display: grid; gap: 4px; align-content: start; min-width: 0; overflow-wrap: anywhere; box-shadow: 0 3px 0 rgba(8, 26, 44, .2); transition: transform .35s ease, border-radius .35s ease, box-shadow .35s ease; }
@media (max-width: 759px) { .node { padding: 14px; } }
.node__name { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: 1.08rem; }
.node__today { color: var(--muted); font-size: .95rem; }
.node__after { color: var(--leaf-deep); font-size: .95rem; display: none; position: relative; padding-left: 22px; }
.node__after::before { content: ""; position: absolute; left: 2px; top: .42em; width: 12px; height: 7px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); }
.board[data-state="today"] .node:nth-child(3n+1) { transform: rotate(-1.2deg); }
.board[data-state="today"] .node:nth-child(3n+2) { transform: rotate(.8deg) translateY(6px); }
.board[data-state="today"] .node:nth-child(3n) { transform: rotate(1.4deg) translateY(-3px); }
.board__hub { display: none; order: -1; background: var(--sun); color: var(--ink); font-family: var(--display); font-weight: 900; font-size: 1.1rem; text-align: center; padding: 10px 16px; border-radius: 12px 12px 0 0; margin-bottom: 3px; }
.board[data-state="after"] .board__hub { display: block; }
.board[data-state="after"] .board__list { gap: 3px; border-radius: 0 0 12px 12px; overflow: hidden; }
.board[data-state="after"] .node { transform: none; border-radius: 0; box-shadow: none; }
.board[data-state="after"] .node__today { display: none; }
.board[data-state="after"] .node__after { display: block; }
.board__status { margin: 14px 0 0; color: var(--muted); font-size: var(--step--1); }
@media (prefers-reduced-motion: reduce) { .node, .board__list { transition: none; } }

/* Generic column grids */
.cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); margin-top: 24px; }
.cols > * { min-width: 0; }
.cols p { color: var(--muted); }
.cols h3 a { text-decoration: none; color: inherit; }
.cols h3 a:hover { text-decoration: underline; }

/* Services */
.services__grid { display: grid; gap: 20px; margin-top: 12px; }
@media (min-width: 860px) {
  .services__grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .service--main { grid-row: span 2; }
  .services__grid > .service:last-child { grid-column: span 2; }
}
.service { background: var(--paper); border-radius: var(--radius-s); padding: 24px; border-top: 4px solid var(--flag); min-width: 0; }
.service p:last-child { margin-bottom: 0; }
.service--main { background: var(--flag); color: var(--ink); border-top-color: var(--sun); border-radius: var(--radius-l); padding: 32px; }
.service--main h3 { color: #fff; font-size: var(--step-2); }
.service--main .ticks li::before { border-color: #fff; }
.ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 3px solid var(--sun); border-bottom: 3px solid var(--sun); transform: rotate(-45deg); }

/* Systems */
.system { display: grid; gap: 8px 40px; padding-block: 36px; border-top: 1px solid var(--line); }
.system:first-of-type { border-top: 3px solid var(--flag); }
@media (min-width: 900px) { .system { grid-template-columns: 280px 1fr; } }
.system__head p { color: var(--muted); }
.system dl { margin: 0; display: grid; gap: 14px; }
.system dt { font-weight: 700; color: var(--ink); }
.system dd { margin: 0; }
.tag { display: inline-block; width: max-content; font-family: var(--body); font-size: .78rem; font-weight: 700; background: var(--sun); color: var(--ink); padding: 2px 10px; border-radius: 999px; vertical-align: middle; }

.table-wrap { overflow-x: auto; background: var(--paper); border-radius: var(--radius-s); border: 1px solid var(--line); margin: 20px 0 14px; }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: .97rem; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.table-wrap thead th { font-size: var(--step--1); color: var(--muted); font-weight: 700; background: var(--bg); }
.table-wrap tbody th { font-family: var(--display); color: var(--ink); font-size: 1.05rem; }
.table-wrap tbody tr:last-child > * { border-bottom: 0; }
.row-lead { background: #FFF8DF; }

/* Process: a real sequence, so numbered */
.steps { list-style: none; counter-reset: step; margin: 28px 0 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 900px) { .steps--row { grid-template-columns: repeat(5, 1fr); gap: 20px; } }
.steps li { counter-increment: step; position: relative; padding-top: 58px; min-width: 0; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--flag); color: #fff; font-family: var(--display); font-weight: 900; font-size: 1.2rem; }
@media (min-width: 900px) { .steps--row li:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 54px; right: -10px; border-top: 3px dotted var(--flag); } }
.steps h3 { font-size: 1.2rem; }
.steps p { color: var(--muted); font-size: .97rem; }
.steps--col li { padding-top: 0; padding-left: 64px; min-height: 44px; }

/* The route: every client's journey in four stops (Start, Build, Learn, Grow). Each stop says how it
   is paid in a chip; the last stop is the monthly plan, the only one that repeats, drawn as the sea
   with the footer's sailboat. Phones: a vertical line through the circles; laptops: one row (home)
   or three stops above a full-width panel (services, .route--full). */
.route { list-style: none; counter-reset: route; margin: 28px 0 0; padding: 0; display: grid; gap: 28px; }
.route__stop { counter-increment: route; position: relative; min-width: 0; padding-left: 64px; }
.route__stop::before { content: counter(route); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--flag); color: #fff; font-family: var(--display); font-weight: 900; font-size: 1.2rem; }
.route__stop:not(.route__stop--loop)::after { content: ""; position: absolute; left: 21px; top: 52px; bottom: -24px; border-left: 3px dotted var(--flag); }
.route__stop h3 { font-size: 1.25rem; margin-bottom: .25em; }
.route__stop p { color: var(--muted); font-size: .97rem; }
.route__pay { margin: 0 0 .5em; }
.route + p { margin-top: 28px; }
.tag--quiet { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.route__stop .ticks { margin-top: 10px; font-size: .95rem; }
.route__stop--loop { padding: 28px 24px 76px; background: var(--flag); color: var(--ink); border-radius: var(--radius-l); overflow: hidden; }
.route__stop--loop::before { position: static; margin-bottom: 14px; background: var(--sun) url(../img/loop.svg?v=1f086d543f) center / 24px no-repeat; content: ""; }
.route__stop--loop h3 { color: #fff; font-size: var(--step-2); }
.route__stop--loop p, .route__stop--loop h4 { color: var(--ink); }
.route__stop--loop .ticks li::before { border-color: #fff; }
.route__stop--loop h4 { font-size: 1rem; margin: 18px 0 0; }
.route__stop--loop a:not(.chip):not(.more) { color: var(--ink); font-weight: 700; text-decoration-color: currentColor; }
.route__stop--loop .ticks + p { margin-top: 16px; }
.route__stop--loop .more::after { background: var(--sun); box-shadow: 0 3px 0 #C99A1C; }
.route__stop--loop .more { background-image: linear-gradient(var(--ink), var(--ink)); }
.route__panel > * { min-width: 0; }
.route__addons { list-style: none; padding: 0; margin: 12px 0 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip.chip--wrap { white-space: normal; text-align: left; }
.chip__plus { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sun); color: var(--ink); font-weight: 900; line-height: 1; }
/* The sea along the foot of the monthly panel: back wave, the sailboat, front wave and flag stripes */
.route__sea { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none; }
.route__sea::before, .route__sea::after { content: ""; position: absolute; left: 0; right: 0; }
.route__sea::before { bottom: 18px; height: 30px; background: url(../img/foot-wave-back.svg?v=64e4afb988) repeat-x 0 0 / 150px 30px; }
.route__sea::after { bottom: 0; height: 40px; background: url(../img/foot-stripes.svg?v=4109a014c3) repeat-x 0 100% / 120px 24px, url(../img/foot-wave-front.svg?v=0f433782ec) repeat-x 0 0 / 120px 30px; background-color: transparent; }
.route__boat { position: absolute; z-index: 1; right: 28px; bottom: 22px; width: 46px; aspect-ratio: 60 / 56; background: url(../img/sailboat.svg?v=1273a207ef) no-repeat center / contain; transform-origin: 50% 90%; }
.route__sea::after { z-index: 2; }
@media (min-width: 900px) {
  .route { grid-template-columns: repeat(3, 1fr) 1.35fr; gap: 20px; }
  .route__stop { padding-left: 0; padding-top: 58px; }
  .route__stop:not(.route__stop--loop)::after { left: 54px; right: -10px; top: 21px; bottom: auto; border-left: 0; border-top: 3px dotted var(--flag); }
  .route__stop--loop { padding: 24px 28px 76px; }
  /* Home row: the panel's sun circle sits on the same line as the numbered circles, and the dotted
     line from Learn runs into the panel */
  .route:not(.route--full) .route__stop--loop { margin-top: -24px; }
  .route:not(.route--full) .route__stop:nth-child(3)::after { right: -20px; }
  .route--full { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .route--full .route__stop--loop { grid-column: 1 / -1; padding: 32px 36px 84px; }
  .route--full .route__panel { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
  /* From Start to Learn in a row, then the line turns down into the monthly panel */
  .route--full .route__stop:nth-child(3)::after { right: 22px; bottom: -28px; border-right: 3px dotted var(--flag); border-top-right-radius: 22px; }
  .route--full .route__stop:nth-child(3) { padding-right: 40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .motion .route__boat { animation: route-bob 3s ease-in-out infinite alternate; }
  .motion .route__stop--loop.is-in::before { animation: route-turn .6s ease-out .2s both; }
}
@keyframes route-bob { from { transform: translateY(2px) rotate(-2deg); } to { transform: translateY(-3px) rotate(2deg); } }
@keyframes route-turn { from { transform: rotate(-360deg); } to { transform: none; } }

/* Aruba */
.split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: .9fr 1.1fr; } }
.split > * { min-width: 0; }
.emblem { display: block; width: min(220px, 60vw); margin: 8px auto 20px; }
.facts { margin: 0; display: grid; border-top: 3px solid var(--flag); }
.facts div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 600px) { .facts div { grid-template-columns: 150px 1fr; gap: 20px; } }
.facts dt { font-family: var(--display); font-weight: 800; color: var(--ink); }
.facts dd { margin: 0; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 36px 18px 0; font-weight: 700; font-size: 1.08rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.6rem; color: var(--flag); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); max-width: 66ch; }

/* CTA */
.cta { display: grid; gap: 20px; align-items: center; }
@media (min-width: 860px) { .cta { grid-template-columns: 1.4fr auto; } }
.cta .actions { margin: 0; }
.band--sun .btn--ghost, .band--sun .btn--ghost:hover { color: var(--ink); border-color: var(--ink); box-shadow: 0 4px 0 rgba(8, 26, 44, .3); }

/* Contact form */
.contact { display: grid; gap: 36px; align-items: start; }
@media (min-width: 960px) { .contact { grid-template-columns: .8fr 1.2fr; } }
.contact > * { min-width: 0; }
.direct { display: grid; gap: 12px; margin-top: 24px; }
.direct__item { background: var(--bg); border-radius: var(--radius-s); padding: 16px 20px; margin: 0; }
.direct__label { display: block; font-size: var(--step--1); color: var(--muted); }
.direct__value { font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--ink); overflow-wrap: anywhere; }
a.direct__value { display: inline-block; padding-block: 11px; margin-block: -8px; }
.form { background: var(--paper); border-radius: var(--radius-l); padding: clamp(20px, 4vw, 36px); display: grid; gap: 18px; border-top: 6px solid var(--sun); }
.form__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field legend { font-weight: 700; color: var(--text); }
.field .hint { font-size: var(--step--1); color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 2px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--flag); }
.field [aria-invalid="true"] { border-color: var(--star); }
.check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: .97rem; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--flag); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin: 0; padding: 12px 16px; border-radius: var(--radius-s); font-weight: 600; }
.form__status:empty { display: none; }
.form__status[data-kind="ok"] { background: var(--lagoon-soft); color: var(--ink); }
.form__status[data-kind="error"] { background: #FDE6E4; color: #8A1F17; }
.form__status[data-kind="busy"] { background: var(--bg); color: var(--muted); }
.form__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.form__foot .note { margin: 0; }

/* Simple content pages */
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--step-2); margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }

/* Footer: the sea. Two waves slide in opposite directions, the flag's two yellow stripes ripple
   below them, and the sailboat sits between the waves. site.js makes it ride the front wave (rise
   and tilt with each crest), drift across as the footer comes into view, and surge ahead when
   tapped. Each layer is a wide strip moved with transforms, so no seams show. */
.foot { position: relative; background: var(--flag); color: var(--ink); padding-block: 76px 28px; font-size: .95rem; }
.foot__sea { position: absolute; left: 0; right: 0; top: -84px; height: 126px; overflow: hidden; pointer-events: none; }
.foot__layer { position: absolute; left: 0; width: calc(100% + 240px); background-repeat: repeat-x; background-position: 0 0; }
.foot__layer--back { top: 54px; height: 40px; background-image: url(../img/foot-wave-back.svg?v=64e4afb988); background-size: 200px 40px; transform: translateX(-200px); }
.foot__layer--front { top: 54px; height: 40px; background-image: url(../img/foot-wave-front.svg?v=0f433782ec); background-size: 160px 40px; }
.foot__layer--stripes { top: 98px; height: 24px; background-image: url(../img/foot-stripes.svg?v=4109a014c3); background-size: 120px 24px; }
.foot__boat { position: absolute; left: 4%; top: 22px; width: 62px; aspect-ratio: 60 / 56; background: url(../img/sailboat.svg?v=1273a207ef) no-repeat center / contain; transform-origin: 50% 86%; pointer-events: auto; cursor: pointer; }
.foot__boat.is-riding { left: 0; top: 0; }
.foot__fin { display: none; position: absolute; left: 0; top: 40px; width: 30px; aspect-ratio: 34 / 30; background: url(../img/shark-fin.svg?v=404e1ecc8a) no-repeat center / contain; }
body:not([data-page="index"]) .foot__fin { display: block; }
.foot__fin.is-riding { top: 0; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .foot__layer--back { animation: wave-right 13s linear infinite; }
  .foot__layer--front { animation: wave-left 11s linear infinite; }
  .foot__layer--stripes { animation: stripes-left 16s linear infinite; }
  .foot__boat:not(.is-riding) { animation: boat-bob 3.4s ease-in-out infinite; }
  .foot__fin { animation: fin-cruise 26s linear infinite, fin-bob 2.8s ease-in-out infinite; }
  .foot__fin.is-riding { animation: fin-cruise 26s linear infinite; }
}
@keyframes wave-left { to { transform: translateX(-160px); } }
@keyframes wave-right { from { transform: translateX(-200px); } to { transform: translateX(0); } }
@keyframes stripes-left { to { transform: translateX(-120px); } }
@keyframes fin-cruise { from { translate: -60px 0; } to { translate: calc(100vw + 60px) 0; } }
@keyframes fin-bob { 50% { transform: translateY(4px); } }
@keyframes boat-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(3px) rotate(3deg); } }
.foot__grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.foot h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--ink); margin-bottom: .8em; }
.foot h2::before { content: ""; flex: none; width: 13px; height: 13px; background: var(--sun); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
/* Footer links: no heavy underline; one glides in on hover and focus */
.foot a:not(.chip) { color: var(--ink); text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .25s ease; }
.foot a:not(.chip):hover, .foot a:not(.chip):focus-visible { background-size: 100% 2px; }
.band--sea a, .service--main a { text-decoration-color: currentColor; }
/* Email and WhatsApp as friendly tappable chips */
.foot__chips { justify-items: start; }
@media (max-width: 699px) { .foot__grid > div:last-child { grid-column: 1 / -1; } }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: 0 3px 0 var(--flag-edge); white-space: nowrap; }
@media (hover: hover) { .chip:hover { background: #fff; color: var(--ink); } }
.chip__icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foot__place { display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .chip { transition: transform .15s ease, box-shadow .15s ease; }
  @media (hover: hover) { .chip:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--flag-edge); } }
}
.foot__brand { display: flex; gap: 14px; align-items: flex-start; }
.foot__brand img { width: 52px; height: 52px; flex: none; }
.foot__brand strong { color: var(--ink); font-family: var(--display); font-size: 1.2rem; display: block; }
.foot__bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(8, 26, 44, .25); font-size: var(--step--1); }
.foot__bottom p { margin: 0; }

/* Scroll effects. site.js adds .motion only when animations are allowed, then .is-in as each
   part comes into view; --p (0 to 1) moves drawn details while scrolling. */
.motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.motion .reveal.is-in { opacity: 1; transform: none; }
.motion .board .node { transition: transform .5s cubic-bezier(.2, .8, .3, 1.15), opacity .45s ease, border-radius .35s ease, box-shadow .35s ease; }
.motion .board.reveal:not(.is-in) .node { opacity: 0; transform: translateY(34px) rotate(-5deg); }
.motion .board .node:nth-child(2) { transition-delay: 70ms; }
.motion .board .node:nth-child(3) { transition-delay: 140ms; }
.motion .board .node:nth-child(4) { transition-delay: 210ms; }
.motion .board .node:nth-child(5) { transition-delay: 280ms; }
.motion .board .node:nth-child(6) { transition-delay: 350ms; }
.motion .hero .scene__star { transform-box: fill-box; transform-origin: center; transform: translateY(calc(var(--p, 0) * -36px)) rotate(calc(var(--p, 0) * 20deg)); }
.motion .hero .scene__wind { transform: translateX(calc(var(--p, 0) * 70px)); }
.motion .scene__wara-hover { animation: wara-hover 4.5s ease-in-out infinite; }
@keyframes wara-hover { 50% { transform: translate(6px, -5px) rotate(-2deg); } }
.motion .hero .scene__leaf { transform-box: fill-box; transform-origin: 40% 100%; transform: rotate(calc(var(--p, 0) * -4deg)); }

/* Touch screens: no grey tap flash and no tap delay; every control presses down the moment a finger
   lands (:active), so tapping feels as good as clicking. Hover lifts only apply where a pointer can
   hover (above), so a tapped button never stays lifted. site.js enables :active on iPhones. */
a, button, summary, [data-act], .iguana, .lizard-run, .foot__boat { -webkit-tap-highlight-color: transparent; }
a, button, summary { touch-action: manipulation; }
.js .menu-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #C99A1C; }
.btn--ghost:active { background: var(--flag-soft); }
.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--flag-edge); }
.more:active::after { transform: translate(3px, 2px); box-shadow: 0 1px 0 var(--flag-edge); }
.lang summary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); background: var(--flag-soft); }
.switch__btn:active { transform: scale(.95); }
.js .nav a:not(.btn):active { background: var(--flag-soft); transform: scale(.985); }
.foot a:not(.chip):active { background-size: 100% 2px; }
.cols h3 a:active, a.direct__value:active { opacity: .75; }
@media (prefers-reduced-motion: no-preference) {
  .lang summary, .switch__btn, .js .nav a:not(.btn) { transition: transform .12s ease, background-color .15s ease, box-shadow .12s ease; }
}

/* Cookie banner: a floating card like the menu panel (paper, flag stripes at the foot). Only on builds
   with a statistics or marketing tool switched on, and as a demo in the local preview. Accept all and
   Reject all look exactly the same; Choose opens switches for each purpose inside the card. */
.consent { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 20px 34px; background: linear-gradient(var(--sun), var(--sun)) left 0 bottom 14px / 100% 3px no-repeat, linear-gradient(var(--sun), var(--sun)) left 0 bottom 6px / 100% 3px no-repeat, var(--paper);
  background-attachment: local; border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: 0 6px 0 var(--line), 0 24px 48px rgba(8, 26, 44, .18); }
/* With the choices open the card may use nearly the whole height, so Save fits without scrolling */
.consent.is-choosing { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px)); }
@media (min-width: 720px) { .consent { left: auto; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: min(440px, 100% - 48px); } }
.consent[hidden], .consent [hidden] { display: none; }
.consent__title { font-size: 1.3rem; color: var(--ink); margin: 0 0 .35em; }
.consent__title:focus { outline: none; }
.consent__text { margin: 0 0 16px; color: var(--muted); font-size: .98rem; }
.consent__text a { color: var(--ink); }
.consent__choices { border: 0; border-bottom: 1px solid var(--line); padding: 0; margin: 0 0 16px; min-width: 0; }
.consent__opt { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.consent__opt > span:first-child { flex: 1; color: var(--muted); font-size: .95rem; }
.consent__opt strong { display: block; color: var(--text); font-size: 1rem; }
.consent__always { flex: none; font-size: .85rem; font-weight: 700; color: var(--muted); }
/* The switches: off is warm grey with the knob left, on is flag blue with the knob right */
.consent__opt input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; }
.consent__opt input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(8, 26, 44, .3); }
.consent__opt input:checked { background: var(--flag); }
.consent__opt input:checked::before { transform: translateX(18px); }
.consent__opt input:disabled { opacity: .55; cursor: default; }
.consent__opt input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.consent__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 10px; }
.consent__wide { grid-column: 1 / -1; }
@media (prefers-reduced-motion: no-preference) {
  .consent { transition: opacity .2s ease, transform .2s ease; }
  .consent:not(.is-in) { opacity: 0; transform: translateY(12px); }
  .consent__opt input, .consent__opt input::before { transition: background-color .15s ease, transform .15s ease; }
}
/* "Cookie settings" in the footer: a button that looks like the footer links */
.linklike { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot__bottom { align-items: center; }
#main:focus { outline: none; }

@media print {
  .consent { display: none; }
  .foot__sea { display: none; }
  .flyers { display: none; }
  .motion .reveal, .motion .board .node { opacity: 1 !important; transform: none !important; }
  .top, .switch, .menu-btn, .lang, .form { display: none; }
  .band--sea, .service--main, .band--sun, .foot { background: none; color: #000; }
}