/* ============================================================
   SECTION SHELLS — strata, hero, dividers, deep water, footer

   Note on the cascade: every rule here keeps its base declaration
   and its media-query override in this one file and in that order,
   so nothing silently undoes the section padding.
   ============================================================ */

.strata {
  position: relative;
  padding: var(--strata-pad) var(--gutter);
}
@media (min-width: 960px) {
  .strata { padding-left: calc(var(--rail) + clamp(2rem, 5vw, 5.5rem)); }
}

.strata-inner { max-width: 74rem; margin: 0 auto; }

.strata-head {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.strata-head .display { font-size: var(--t-h2); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent);
  flex: none;
}

/* a single chain link, used as a section divider */
.link-rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 var(--gutter);
}
@media (min-width: 960px) {
  .link-rule { margin-left: calc(var(--rail) + clamp(2rem, 5vw, 5.5rem)); }
}
.link-rule::before, .link-rule::after {
  content: "";
  height: 1px;
  background: var(--line-2);
}
.link-rule::before { width: clamp(1rem, 6vw, 5rem); flex: none; }
.link-rule::after { flex: 1; }
.link-rule i {
  display: block;
  width: 11px; height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  flex: none;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 7rem var(--gutter) clamp(2.5rem, 7vh, 5rem);
  /* deliberately no overflow:hidden — the canvas and the fade are
     both inset:0, so clipping here would only ever eat the CTAs on
     a short viewport */
}
@media (min-width: 960px) {
  .hero { padding-left: calc(var(--rail) + clamp(2rem, 5vw, 5.5rem)); }
}

#chain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* the water closes over the chain at the bottom of the hero */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to bottom, transparent, var(--fade-to));
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 74rem;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.4rem);
}

.hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.1rem;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.hero-eyebrow b { color: var(--accent); font-weight: 500; }
.hero-eyebrow s { text-decoration: none; opacity: 0.4; }

.hero h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
  max-width: 15ch;
}
.hero h1 em {
  font-style: normal;
  display: block;
  color: var(--accent);
  text-shadow: 0 0 60px var(--glow);
}

.hero-lede { max-width: 30rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* ============================================================
   DEEP WATER — sections that stay dark in both themes.
   Below the thermocline there is no light either way, so the
   descent survives light mode.
   ============================================================ */

.deep {
  /* buttons and selection derive their foreground from --bg-1, so
     the ground tokens have to come down here too or the type inverts */
  --bg-1: #061318;
  --bg-2: #0A1D24;
  --ink: #E7F0ED;
  --ink-2: #A7BDBB;
  --ink-3: #7B9394;
  --accent: #5CC4AB;
  --metal: #D6A85C;
  --line: rgba(231,240,237,0.16);
  --line-2: rgba(231,240,237,0.08);
  --panel: rgba(231,240,237,0.04);
  --panel-2: rgba(231,240,237,0.07);
  --panel-edge: rgba(231,240,237,0.12);
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(92,196,171,0.09), transparent 62%),
    linear-gradient(180deg, #0A1D24, #061318);
  border-top: 1px solid rgba(92,196,171,0.22);
  border-bottom: 1px solid rgba(92,196,171,0.14);
}

/* ============================================================
   FOOTER
   ============================================================ */

.foot {
  padding: 2.4rem var(--gutter);
  background: #040D11;
  color: #7B9394;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (min-width: 960px) {
  .foot { padding-left: calc(var(--rail) + clamp(2rem, 5vw, 5.5rem)); }
}
.foot a { color: #7B9394; text-decoration: none; }
.foot a:hover { color: #5CC4AB; }