/* ==========================================================================
   CB&CS Properties — single-page holding-company site
   Faithful production rebuild of the Calypso Pixels design handoff.
   No border-radius anywhere: square, editorial. Hairline rules as accents.
   ========================================================================== */

:root {
  /* --- Brand palette --- */
  --ink:            #1A1A1A;   /* default body text / default logo */
  --paper:          #FAF9F6;   /* page + header background */
  --deep-teal:      #0F4C5C;   /* hero base, footer, headings */
  --aqua:           #2EC4B6;   /* eyebrows, hairlines, motto */
  --seafoam:        #A8E6CF;   /* secondary accent / glow */
  --driftwood:      #8B5E3C;   /* approach numbers, about underline */
  --sand:           #EDE6DA;   /* approach section background */
  --body-on-paper:  #27343a;   /* About paragraphs */
  --body-on-sand:   #3c4749;   /* Approach card paragraphs */

  /* --- Theming knobs (defaults match the design) --- */
  --accent:      var(--aqua);  /* eyebrows / hairlines / motto */
  --logo-color:  var(--ink);   /* header wordmark fill */

  /* --- Type families --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Libre Baskerville', Georgia, serif;
  --font-label:   'Inter', sans-serif;
  --font-card:    'Cinzel Decorative', serif;

  /* --- Shared layout metrics --- */
  --max-width:  1180px;
  --page-pad:   clamp(22px, 5vw, 72px);
  --section-pad: clamp(80px, 13vh, 156px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; }

::selection { background: rgba(46, 196, 182, .30); }

/* Shared centered content column */
.site-header__inner,
.hero__inner,
.about__inner,
.approach__inner,
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Reusable eyebrow label (Inter, uppercase, wide tracking) */
.eyebrow {
  margin: 0;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ==========================================================================
   HEADER (sticky, translucent blur)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 246, .85);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(15, 76, 92, .10);
}

.site-header__inner {
  padding: 12px var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header__logo { display: block; line-height: 0; }

.site-header__logo svg {
  height: 42px;
  width: auto;
  display: block;
  color: var(--logo-color);
}

.site-header__motto {
  margin: 0;
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--deep-teal);
  color: var(--paper);
  min-height: 88vh;
  display: flex;
  align-items: center;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* keep the palm/shoreline on the right, open water behind the text */
  object-position: 72% 50%;
}

/* Two soft accent glows over the photo */
.hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 95% at 14% 4%,  rgba(46, 196, 182, .16) 0%, rgba(46, 196, 182, 0) 48%),
    radial-gradient(95% 80% at 92% 16%,  rgba(168, 230, 207, .12) 0%, rgba(168, 230, 207, 0) 46%);
}

/* Drifting "water" shimmer (toggle via .hero__shimmer display) */
.hero__shimmer {
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(42% 32% at 28% 30%, rgba(168, 230, 207, .20), transparent 70%),
    radial-gradient(36% 26% at 72% 62%, rgba(46, 196, 182, .20), transparent 70%);
  filter: blur(10px);
  animation: cbcsDrift 24s ease-in-out infinite alternate;
}

.hero__inner {
  position: relative;
  width: 100%;
  padding: clamp(110px, 17vh, 176px) var(--page-pad) clamp(96px, 13vh, 150px);
}

.hero__eyebrow { margin-bottom: 30px; }

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 6.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--paper);
  max-width: 15ch;
  text-wrap: balance;
}

.hero__lede {
  margin: 34px 0 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.8;
  color: rgba(250, 249, 246, .82);
  text-wrap: pretty;
}

.hero__locale {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 48px;
}

.hero__rule {
  width: 46px;
  height: 1px;
  background: var(--accent);
  opacity: .8;
}

.hero__locale-text {
  font-family: var(--font-label);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, .7);
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about { background: var(--paper); }

.about__inner {
  padding: var(--section-pad) var(--page-pad);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 6vw, 104px);
}

.about__head {
  flex: 1 1 260px;
  min-width: 240px;
}

.about__title {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--deep-teal);
}

.about__underline {
  display: block;
  width: 54px;
  height: 2px;
  background: var(--driftwood);
  margin-top: 28px;
  opacity: .7;
}

.about__body {
  flex: 2.4 1 440px;
  min-width: 300px;
  max-width: 680px;
}

.about__body p {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.9;
  color: var(--body-on-paper);
  text-wrap: pretty;
}

.about__body p + p { margin-top: 28px; }

/* ==========================================================================
   APPROACH ("How we hold")
   ========================================================================== */
.approach {
  /* --approach-* vars allow the optional Deep Teal inversion */
  background: var(--approach-bg, var(--sand));
}

.approach__inner {
  padding: clamp(80px, 13vh, 150px) var(--page-pad);
}

.approach__head {
  text-align: center;
  margin-bottom: clamp(48px, 7vh, 84px);
}

.approach__eyebrow {
  margin-bottom: 20px;
  color: var(--approach-eyebrow, var(--driftwood));
}

.approach__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--approach-ink, var(--deep-teal));
}

.approach__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 56px);
}

.principle {
  flex: 1 1 240px;
  min-width: 230px;
}

.principle__num {
  display: block;
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1;
  color: var(--approach-num, var(--driftwood));
  margin-bottom: 18px;
}

.principle__title {
  margin: 0 0 14px;
  font-family: var(--font-card);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .08em;
  color: var(--approach-ink, var(--deep-teal));
}

.principle__rule {
  display: block;
  width: 38px;
  height: 1px;
  background: var(--approach-rule, rgba(15, 76, 92, .22));
  margin-bottom: 18px;
}

.principle__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: var(--approach-sub, var(--body-on-sand));
  text-wrap: pretty;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--deep-teal);
  color: var(--paper);
}

.site-footer__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 50% 120%, rgba(46, 196, 182, .16) 0%, rgba(46, 196, 182, 0) 55%);
}

.site-footer__inner {
  position: relative;
  padding: clamp(64px, 10vh, 108px) var(--page-pad);
  text-align: center;
}

.site-footer__logo {
  height: 34px;
  width: auto;
  margin: 0 auto;
}

.site-footer__motto {
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: .30em;
}

.site-footer__rule {
  display: block;
  width: 60px;
  height: 1px;
  background: rgba(168, 230, 207, .35);
  margin: 36px auto;
}

.site-footer__tagline {
  margin: 0 auto;
  max-width: 50ch;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(250, 249, 246, .74);
  text-wrap: pretty;
}

.site-footer__legal {
  margin: 40px 0 0;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(250, 249, 246, .55);
}

.site-footer__credit {
  margin: 10px 0 0;
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, .34);
}

/* ==========================================================================
   MOTION
   ========================================================================== */
@keyframes cbcsDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.13); }
}

@keyframes cbcsReveal {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Scroll-reveal: hidden until JS marks it shown (see site.js).
   --reveal-delay staggers siblings. */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
}

[data-reveal].is-shown {
  animation: cbcsReveal .9s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: var(--reveal-delay, 0s);
}

/* Respect reduced-motion: no drift, no reveal animation, everything visible. */
@media (prefers-reduced-motion: reduce) {
  .hero__shimmer { animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  [data-reveal].is-shown { animation: none; }
}