/* =========================================================================
   Seaside Labs — Homepage composition
   Page-specific styles only. Tokens and components live in brand.css.
   ========================================================================= */

/* --- HERO ----------------------------------------------------------------- */
.hero { padding-top: var(--s-5); padding-bottom: var(--s-5); text-align: center; }
.hero-wave {
  width: clamp(180px, 24vw, 280px); margin: 0 auto var(--s-5);
  filter: drop-shadow(0 18px 32px rgba(10, 49, 66, 0.18));
}
.hero-wave img { width: 100%; height: auto; display: block; }
.hero .eyebrow { margin-top: var(--s-2); }
.hero-headline { margin: var(--s-3) auto 0; max-width: 14ch; }
.hero-sub { margin: var(--s-3) auto 0; max-width: 46rem; }
.hero-cta { margin: var(--s-4) auto 0; justify-content: center; }

/* --- DIVISIONS ------------------------------------------------------------ */
.divisions-header { text-align: center; margin-bottom: var(--s-4); }
.divisions-header h2 { margin: var(--s-2) auto 0; max-width: 24ch; }
.divisions-header p  { margin: var(--s-2) auto 0; max-width: 40rem; }

#divisions {
  background:
    radial-gradient(ellipse at 85% 15%, rgba(243, 148, 75, 0.08), transparent 45%),
    radial-gradient(ellipse at 15% 85%, rgba(19, 164, 196, 0.08), transparent 45%);
}
#divisions .eyebrow { margin-bottom: var(--s-1); }

/* Sunset-to-ocean tile palette — each tile a subtle gradient for depth */
.div-card.accent-connect    { background: linear-gradient(140deg, #c5e8ef 0%, #4fb8c9 100%); }
.div-card.accent-consulting { background: linear-gradient(140deg, #fae8a6 0%, #e8b933 100%); }
.div-card.accent-gardens    { background: linear-gradient(140deg, #d2e6c2 0%, #a8cf96 100%); }
.div-card.accent-tideclaw   { background: linear-gradient(140deg, #6b88a8 0%, #1a3a5c 100%); color: var(--cream); }
.div-card.accent-tideclaw h3 { color: var(--cream); }
.div-card.accent-tideclaw p  { color: rgba(251, 244, 234, 0.88); }
.div-card.accent-tideclaw .div-tag { background: rgba(251, 244, 234, 0.18); color: var(--cream); }
.div-card.accent-claimclaw  { background: linear-gradient(140deg, #f0a041 0%, #a84f17 100%); color: var(--cream); }
.div-card.accent-claimclaw h3 { color: var(--cream); }
.div-card.accent-claimclaw p  { color: rgba(251, 244, 234, 0.88); }
.div-card.accent-claimclaw .div-tag { background: rgba(251, 244, 234, 0.18); color: var(--cream); }
.div-card.accent-reefpay    { background: linear-gradient(140deg, #ebbcd0 0%, #d495b0 100%); }

.div-card:hover {
  filter: brightness(1.04) saturate(1.08);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.divisions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
@media (max-width: 900px) { .divisions-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .divisions-grid { grid-template-columns: 1fr; } }

/* --- CTA BAND — living gradient over the flat ink base from brand.css ---- */
.cta-band {
  background: linear-gradient(135deg, var(--tide-deep) 0%, var(--ink) 60%, var(--sun-deep) 140%);
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 30%, rgba(45, 212, 191, 0.22), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(243, 148, 75, 0.22), transparent 45%);
}
.cta-band .container-narrow { position: relative; z-index: 1; }