/* =========================================================
   COOL POOL PEOPLE — Brand System
   Shared tokens, type, logo, and core components
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* ---- Core palette (cool, water-toned) ---- */
  --ink:      #06243A;   /* deep navy — primary text / dark grounds */
  --ink-2:    #0E3A53;   /* slightly lifted navy */
  --teal:     #1C6E8C;   /* primary brand teal */
  --teal-d:   #155A74;   /* pressed/hover teal */
  --aqua:     #7FD1D9;   /* bright aqua highlight */
  --glow:     #2BB7C9;   /* pool-glow accent (links, focus) */
  --mist:     #C9E7EC;   /* pale aqua tint */

  --paper:    #F4F8F9;   /* cool off-white page bg */
  --paper-2:  #EAF2F4;   /* secondary surface */
  --line:     #D8E5E8;   /* hairline borders */
  --white:    #FFFFFF;

  /* warm whisper for occasional contrast */
  --sand:     #E7DCC7;

  /* ---- Type ---- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:  "Space Grotesk", ui-monospace, monospace;

  /* ---- Rhythm ---- */
  --rad:   14px;
  --rad-l: 24px;
  --maxw:  1240px;
  --shadow-sm: 0 1px 2px rgba(6,36,58,.06), 0 2px 8px rgba(6,36,58,.05);
  --shadow:    0 18px 50px -22px rgba(6,36,58,.40);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---- Eyebrow / label ---- */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--teal);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:currentColor;
  opacity:.5;
}

/* =========================================================
   LOGO — ripple mark + wordmark
   ========================================================= */
.cpp-logo{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--serif);
  font-weight:500;
  color:var(--ink);
  line-height:1;
  white-space:nowrap;
}
.cpp-logo .ripple{ flex:none; }
.cpp-logo .cpp-drop{ flex:none; }
.cpp-logo .wm{ display:flex; flex-direction:column; line-height:1; }
.cpp-logo .wm b{
  font-weight:500;
  font-size:1.18em;
  letter-spacing:-.01em;
}
.cpp-logo .wm small{
  font-family:var(--mono);
  font-weight:500;
  font-size:.46em;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--teal);
  margin-top:.5em;
}
.cpp-logo.solo .wm small{ display:none; }
.cpp-logo.light{ color:var(--white); }
.cpp-logo.light .wm small{ color:var(--aqua); }

/* The Drop — primary mark (CSS teardrop + light glint) */
.cpp-drop{
  display:inline-block;
  position:relative;
  flex:none;
  width:var(--s,28px);
  height:var(--s,28px);
  background:var(--teal);
  border-radius:50% 50% 50% 0;
  transform:rotate(135deg);
  vertical-align:middle;
}
.cpp-drop::after{
  content:"";
  position:absolute;
  left:58%; top:58%;
  width:22%; height:22%;
  border-radius:50%;
  background:rgba(255,255,255,.6);
}
.cpp-drop.aqua{ background:var(--aqua); }
.cpp-drop.ink{ background:var(--ink); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  --bg:var(--teal); --fg:#fff; --bd:var(--teal);
  font-family:var(--sans);
  font-weight:600;
  font-size:.97rem;
  letter-spacing:.01em;
  display:inline-flex;
  align-items:center;
  gap:.55em;
  padding:.86em 1.5em;
  border-radius:999px;
  white-space:nowrap;
  background:var(--bg);
  color:var(--fg);
  border:1.5px solid var(--bd);
  cursor:pointer;
  transition:transform .18s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  box-shadow:0 10px 24px -14px rgba(28,110,140,.9);
}
.btn:hover{ transform:translateY(-2px); background:var(--teal-d); border-color:var(--teal-d); }
.btn:active{ transform:translateY(0); }
.btn .ar{ transition:transform .2s ease; }
.btn:hover .ar{ transform:translateX(3px); }

.btn.ghost{
  --bg:transparent; --fg:var(--ink); --bd:var(--line);
  box-shadow:none;
}
.btn.ghost:hover{ --bg:var(--white); --bd:var(--teal); color:var(--teal); }
.btn.light{
  --bg:#fff; --fg:var(--ink); --bd:#fff;
  box-shadow:0 12px 30px -16px rgba(0,0,0,.6);
}
.btn.light:hover{ --bg:var(--mist); --bd:var(--mist); color:var(--ink); }
.btn.on-dark.ghost{ --fg:#fff; --bd:rgba(255,255,255,.35); }
.btn.on-dark.ghost:hover{ --bg:rgba(255,255,255,.08); --bd:#fff; color:#fff; }

/* =========================================================
   IMAGE PLACEHOLDER (striped, with mono caption)
   ========================================================= */
.ph{
  position:relative;
  background-color:var(--paper-2);
  background-image:repeating-linear-gradient(
    -45deg,
    rgba(28,110,140,.10) 0 12px,
    rgba(28,110,140,.04) 12px 24px
  );
  border:1px solid var(--line);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:var(--teal);
}
.ph::after{
  content:attr(data-label);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.7em .9em;
  background:rgba(244,248,249,.85);
  border-top-right-radius:8px;
  backdrop-filter:blur(2px);
}
.ph.dark{
  background-color:var(--ink-2);
  background-image:repeating-linear-gradient(
    -45deg,
    rgba(127,209,217,.16) 0 12px,
    rgba(127,209,217,.05) 12px 24px
  );
  border-color:rgba(255,255,255,.12);
  color:var(--aqua);
}
.ph.dark::after{ background:rgba(6,36,58,.7); color:var(--aqua); }

/* utility */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }
.u-serif{ font-family:var(--serif); }
.u-mono{ font-family:var(--mono); }