/**
 * Design enhance — lines, surfaces, color, spacing
 * Keeps each concept palette via CSS variables from styles.css
 */

/* —— Hero copy panel: keeps text off faces —— */
.hero-fullscreen .hero-content {
  max-width: none;
}

.hero-copy {
  --hero-panel-bg: color-mix(in srgb, var(--bg, #F8FAFC) 55%, transparent);
  width: min(100%, var(--hero-copy-width, 36rem));
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--hero-panel-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--primary, #0D5C63) 12%, transparent);
  border-radius: var(--radius, 4px);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.1);
}

.hero-copy .master-msg,
.hero-copy h1,
.hero-copy .lead,
.hero-copy .hero-brand,
.hero-copy .badge-label,
.hero-copy .framework-inline,
.hero-copy .btn-group {
  max-width: 100%;
  max-inline-size: none;
}

.hero-copy .lead {
  color: color-mix(in srgb, var(--text, #1E293B) 82%, var(--secondary, #64748B));
}

/* LEFT text — faces/subjects on RIGHT */
.hero.hero-fullscreen.hero-layout-left {
  justify-content: flex-start;
  align-items: center;
}
.hero.hero-fullscreen.hero-layout-left .hero-content {
  align-items: flex-start;
}
.hero.hero-fullscreen.hero-layout-left .hero-copy {
  width: min(100%, 36rem);
}
.hero.hero-fullscreen.hero-layout-left .hero-photo img {
  object-position: 82% center;
}
.hero.hero-fullscreen.hero-layout-left .hero-scrim {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--bg, #F8FAFC) 70%) 0%,
      color-mix(in srgb, var(--bg, #F8FAFC) 35%) 38%,
      transparent 68%) !important;
}

/* RIGHT text — faces/subjects on LEFT */
.hero.hero-fullscreen.hero-layout-right {
  justify-content: flex-end;
  align-items: center;
}
.hero.hero-fullscreen.hero-layout-right .hero-content {
  align-items: flex-end;
}
.hero.hero-fullscreen.hero-layout-right .hero-copy {
  width: min(100%, 34rem);
}
.hero.hero-fullscreen.hero-layout-right .hero-photo img {
  object-position: 15% center;
}
.hero.hero-fullscreen.hero-layout-right .hero-scrim {
  background:
    linear-gradient(270deg,
      color-mix(in srgb, var(--bg, #F8FAFC) 70%) 0%,
      color-mix(in srgb, var(--bg, #F8FAFC) 35%) 38%,
      transparent 68%) !important;
}

/* TOP text — faces in middle band */
.hero.hero-fullscreen.hero-layout-top {
  justify-content: flex-start;
  align-items: flex-start;
}
.hero.hero-fullscreen.hero-layout-top .hero-content {
  align-items: flex-start;
  padding-top: clamp(5.5rem, 12vh, 7rem);
  padding-bottom: 1.5rem;
}
.hero.hero-fullscreen.hero-layout-top .hero-copy {
  width: min(100%, 40rem);
}
.hero.hero-fullscreen.hero-layout-top .hero-photo img {
  object-position: center 85%;
}
.hero.hero-fullscreen.hero-layout-top .hero-scrim {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg, #F8FAFC) 82%) 0%,
      color-mix(in srgb, var(--bg, #F8FAFC) 45%) 36%,
      transparent 70%) !important;
}

/* BOTTOM text — faces upper (busy portraits both sides) */
.hero.hero-fullscreen.hero-layout-bottom {
  justify-content: flex-start;
  align-items: flex-end;
}
.hero.hero-fullscreen.hero-layout-bottom .hero-content {
  align-items: flex-start;
  padding-top: 2rem;
  padding-bottom: clamp(2.5rem, 8vh, 4.5rem);
  width: min(100% - clamp(32px, 5vw, 64px), var(--max, 1200px));
}
.hero.hero-fullscreen.hero-layout-bottom .hero-copy {
  width: min(100%, 42rem);
  --hero-panel-bg: color-mix(in srgb, var(--bg, #F8FAFC) 58%, transparent);
}
.hero.hero-fullscreen.hero-layout-bottom .hero-photo img {
  object-position: center 20%;
}
.hero.hero-fullscreen.hero-layout-bottom .hero-scrim {
  background:
    linear-gradient(180deg,
      transparent 28%,
      color-mix(in srgb, var(--bg, #F8FAFC) 35%) 55%,
      color-mix(in srgb, var(--bg, #F8FAFC) 88%) 100%) !important;
}

/* Panel-left fallback */
.hero.hero-fullscreen.hero-layout-panel-left {
  justify-content: flex-start;
  align-items: center;
}
.hero.hero-fullscreen.hero-layout-panel-left .hero-content {
  align-items: flex-start;
}
.hero.hero-fullscreen.hero-layout-panel-left .hero-copy {
  width: min(100%, 34rem);
  --hero-panel-bg: color-mix(in srgb, var(--bg, #F8FAFC) 58%, transparent);
}
.hero.hero-fullscreen.hero-layout-panel-left .hero-photo img {
  object-position: 70% 40%;
}
.hero.hero-fullscreen.hero-layout-panel-left .hero-scrim {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--bg, #F8FAFC) 78%) 0%,
      color-mix(in srgb, var(--bg, #F8FAFC) 48%) 34%,
      transparent 58%) !important;
}

body.theme-dark .hero-copy {
  --hero-panel-bg: color-mix(in srgb, var(--card, #1A222C) 52%, transparent);
  border-color: color-mix(in srgb, var(--gold, #C9A227) 28%, transparent);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

body.theme-dark .hero.hero-fullscreen.hero-layout-left .hero-scrim {
  background: linear-gradient(90deg, rgba(15,20,25,0.78) 0%, rgba(15,20,25,0.35) 42%, transparent 72%) !important;
}
body.theme-dark .hero.hero-fullscreen.hero-layout-right .hero-scrim {
  background: linear-gradient(270deg, rgba(15,20,25,0.78) 0%, rgba(15,20,25,0.35) 42%, transparent 72%) !important;
}
body.theme-dark .hero.hero-fullscreen.hero-layout-top .hero-scrim {
  background: linear-gradient(180deg, rgba(15,20,25,0.88) 0%, rgba(15,20,25,0.45) 40%, transparent 75%) !important;
}
body.theme-dark .hero.hero-fullscreen.hero-layout-bottom .hero-scrim {
  background: linear-gradient(180deg, transparent 25%, rgba(15,20,25,0.45) 55%, rgba(15,20,25,0.92) 100%) !important;
}
body.theme-dark .hero.hero-fullscreen.hero-layout-panel-left .hero-scrim {
  background: linear-gradient(90deg, rgba(15,20,25,0.88) 0%, rgba(15,20,25,0.5) 38%, transparent 62%) !important;
}

@media (max-width: 1024px) {
  .hero-copy {
    width: min(100%, 32rem);
  }
}

@media (max-width: 768px) {
  /* Mobile: always bottom panel so faces stay in upper photo area */
  .hero.hero-fullscreen {
    align-items: flex-end !important;
  }
  .hero.hero-fullscreen .hero-content {
    align-items: flex-start !important;
    padding-top: 1.5rem;
    padding-bottom: clamp(2rem, 7vh, 3.5rem);
    width: min(100% - 28px, var(--max, 1200px));
  }
  .hero-copy {
    width: 100%;
    padding: 1.35rem 1.25rem;
    --hero-panel-bg: color-mix(in srgb, var(--bg, #F8FAFC) 62%, transparent);
  }
  .hero.hero-fullscreen .hero-photo img {
    object-position: center 18% !important;
  }
  .hero.hero-fullscreen .hero-scrim {
    background: linear-gradient(
      180deg,
      transparent 20%,
      color-mix(in srgb, var(--bg, #F8FAFC) 45%) 48%,
      color-mix(in srgb, var(--bg, #F8FAFC) 94%) 100%
    ) !important;
  }
  body.theme-dark .hero.hero-fullscreen .hero-scrim {
    background: linear-gradient(180deg, transparent 18%, rgba(15,20,25,0.5) 45%, rgba(15,20,25,0.95) 100%) !important;
  }
  body.theme-dark .hero-copy {
    --hero-panel-bg: color-mix(in srgb, var(--card, #1A222C) 58%, transparent);
  }
}

/* =========================================================
   Section design: line / color / surface / space
   ========================================================= */

.section {
  position: relative;
}

.section-head {
  position: relative;
  padding-bottom: 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 1.25rem;
  background: linear-gradient(
    90deg,
    var(--accent, var(--primary, #0D5C63)),
    transparent
  );
}

.badge-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.badge-label::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--accent, var(--primary, #0D5C63));
}

/* Soft band behind alt sections */
.section-alt {
  position: relative;
  overflow: hidden;
}

.section-alt::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(28vw, 220px);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary, #0D5C63) 6%, transparent),
    transparent
  );
  pointer-events: none;
}

body.theme-dark .section-alt::before {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--gold, #C9A227) 10%, transparent),
    transparent
  );
}

/* Steps as designed surfaces */
.steps {
  gap: clamp(1rem, 2vw, 1.5rem);
}

.step {
  position: relative;
  padding: 1.75rem 1.5rem 1.6rem;
  border: 1px solid var(--border, #E2E8F0);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent, #14B8A6) 8%, transparent) 0,
      transparent 42%
    ),
    var(--white, #fff);
  border-radius: var(--radius, 4px);
  overflow: hidden;
}

.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent, var(--primary, #0D5C63));
}

.section-alt .step {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent, #14B8A6) 10%, transparent) 0,
      transparent 42%
    ),
    var(--bg, #F8FAFC);
}

.step-num {
  letter-spacing: 0.12em;
}

/* Flow rail */
.flow-row {
  padding: 1rem 0.25rem;
  gap: 0.75rem 1rem;
  border-block: 1px solid var(--border, #E2E8F0);
  margin-block: 1.25rem 1.5rem;
}

.flow-item {
  border: 1px solid color-mix(in srgb, var(--primary, #0D5C63) 18%, var(--border, #E2E8F0));
  background: color-mix(in srgb, var(--primary, #0D5C63) 5%, var(--white, #fff));
  box-shadow: none;
}

.section-alt .flow-item {
  background: color-mix(in srgb, var(--primary, #0D5C63) 6%, var(--bg, #F8FAFC));
}

.flow-arrow {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #14B8A6) 16%, transparent);
  color: var(--primary, #0D5C63);
  font-size: 0.75rem;
}

/* Panels / modules */
.panel,
.module,
.status-block,
.personality-card,
.name-node {
  position: relative;
  border: 1px solid var(--border, #E2E8F0);
  background: var(--white, #fff);
  border-radius: var(--radius, 4px);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.section-alt .panel,
.section-alt .module,
.section-alt .status-block,
.section-alt .personality-card,
.section-alt .name-node {
  background: color-mix(in srgb, var(--bg, #F8FAFC) 70%, var(--white, #fff));
}

.panel:hover,
.module:hover,
.status-block:hover,
.personality-card:hover {
  border-color: color-mix(in srgb, var(--accent, #14B8A6) 45%, var(--border, #E2E8F0));
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.panel {
  padding: 1.6rem 1.4rem;
}

.module {
  padding: 1.5rem 1rem 1.35rem;
  border-top: 3px solid var(--accent, var(--primary, #0D5C63));
}

.panel h3::after,
.module-name::after {
  content: none;
}

/* Principle list as ruled surfaces */
.principle-item {
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--radius, 4px);
  padding: 1.15rem 1.15rem 1.15rem 1rem;
  margin-bottom: 0.75rem;
  background: color-mix(in srgb, var(--white, #fff) 92%, var(--bg, #F8FAFC));
  box-shadow: none;
}

.principle-item:last-child {
  margin-bottom: 0;
}

.principle-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, #14B8A6) 40%, transparent);
  background: color-mix(in srgb, var(--accent, #14B8A6) 12%, transparent);
}

/* Timeline surface */
.timeline {
  padding: 0.5rem 0 0.5rem 1.75rem;
  border-left: 2px solid color-mix(in srgb, var(--accent, #14B8A6) 55%, var(--border, #E2E8F0));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent, #14B8A6) 6%, transparent),
    transparent 42%
  );
  border-radius: 0 var(--radius, 4px) var(--radius, 4px) 0;
}

/* Name story nodes */
.name-flow {
  gap: 1rem;
}

.name-node {
  padding: 1.75rem 1.25rem;
  border-top: 3px solid var(--primary, #0D5C63);
}

.name-connector {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--border, #E2E8F0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white, #fff);
  color: var(--accent, var(--primary, #0D5C63));
  flex-shrink: 0;
}

/* Long text blocks without images */
.prose-block,
.section > .container > p:not(.badge-label):not(.lead) {
  position: relative;
  max-width: 40rem;
}

.section > .container > p:not(.badge-label):not(.lead):not(.footer-brand) {
  padding: 1.15rem 1.25rem 1.15rem 1.35rem;
  border-left: 3px solid var(--accent, var(--primary, #0D5C63));
  background: color-mix(in srgb, var(--primary, #0D5C63) 4%, var(--bg, #F8FAFC));
  border-radius: 0 var(--radius, 4px) var(--radius, 4px) 0;
}

.section-alt > .container > p:not(.badge-label):not(.lead) {
  background: color-mix(in srgb, var(--primary, #0D5C63) 5%, var(--white, #fff));
}

/* Status surfaces */
.status-block {
  padding: 1.35rem 1.2rem;
  border-top: 3px solid transparent;
}

.status-block:has(.badge-now) {
  border-top-color: var(--now, var(--primary, #0D5C63));
}
.status-block:has(.badge-progress) {
  border-top-color: var(--progress, #0EA5E9);
}
.status-block:has(.badge-next) {
  border-top-color: var(--next, #94A3B8);
}

/* FAQ as ruled cards */
.faq details {
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--radius, 4px);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
  background: color-mix(in srgb, var(--white, #fff) 90%, var(--bg, #F8FAFC));
}

.section-alt .faq details {
  background: var(--bg, #F8FAFC);
}

/* CTA band accent line */
.cta-band {
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, #fff 55%, transparent),
    transparent
  );
}

/* Form surface */
.form {
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--radius, 4px);
  background: color-mix(in srgb, var(--white, #fff) 92%, var(--bg, #F8FAFC));
}

body.theme-dark .form {
  background: var(--card, #1A222C);
  border-color: var(--border, #2A3441);
}

body.theme-dark .panel,
body.theme-dark .module,
body.theme-dark .status-block,
body.theme-dark .personality-card,
body.theme-dark .name-node,
body.theme-dark .step,
body.theme-dark .principle-item,
body.theme-dark .faq details {
  background: var(--card, #1A222C);
  border-color: var(--border, #2A3441);
}

body.theme-dark .section > .container > p:not(.badge-label):not(.lead) {
  background: color-mix(in srgb, var(--gold, #C9A227) 8%, var(--card, #1A222C));
  border-left-color: var(--gold, #C9A227);
}

body.theme-dark .flow-item {
  background: color-mix(in srgb, var(--gold, #C9A227) 8%, var(--card, #1A222C));
  border-color: color-mix(in srgb, var(--gold, #C9A227) 28%, var(--border, #2A3441));
}

body.theme-dark .flow-arrow {
  background: color-mix(in srgb, var(--gold, #C9A227) 18%, transparent);
  color: var(--gold, #C9A227);
}

/* Spacing rhythm boost */
.grid-2,
.grid-3,
.grid-5 {
  gap: clamp(1rem, 2.2vw, 1.5rem);
}

.btn-group {
  margin-top: 1.75rem;
}

@media (max-width: 768px) {
  .section-alt::before {
    width: 100%;
    height: 4px;
    inset: 0 0 auto 0;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--primary, #0D5C63) 35%, transparent),
      transparent
    );
  }

  .name-connector {
    display: none;
  }
}

/* Concept 2 warmth */
.hero-copy {
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--coral, #E8A87C) 28%, transparent);
}
.badge-label::before,
.section-head::after {
  background: linear-gradient(90deg, var(--coral, #E8A87C), transparent);
}
.step::before,
.module {
  border-top-color: var(--coral, #E8A87C);
}
.step::before {
  background: var(--coral, #E8A87C);
}