/* CoActise shared layout system.
   Use this on every CoActise page after page-local CSS.
   Rule split:
   - hero = larger first-view frame
   - content sections = smaller shared section frame
   - owner message cards = reusable mobile-screen visual, not a sizing rule
*/

:root {
  --coactise-hero-shell: min(1480px, calc(100% - clamp(32px, 5vw, 88px)));
  --coactise-section-shell: min(1320px, calc(100% - clamp(40px, 5vw, 88px)));
  --coactise-section-pad: clamp(12px, 1.6svh, 22px);
  --coactise-grid-gap: clamp(16px, 2.4vw, 38px);
  --coactise-hero-heading: clamp(3.35rem, 4.4vw, 5.1rem);
  --coactise-section-heading: clamp(2.05rem, 2.75vw, 3.35rem);
  --coactise-body: clamp(.94rem, .95vw, 1.02rem);
  --coactise-header-h: 83px;
  --coactise-fit: 1;
}

/* Locked CoActise header: one structure, one style, every page. */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-height: 82px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: rgba(2, 6, 4, .94) !important;
  border-bottom: 1px solid rgba(89, 235, 220, .18) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
}

.site-header .page-shell {
  width: min(1280px, calc(100% - 48px)) !important;
  min-height: 82px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(18px, 3vw, 56px) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  flex: 0 0 auto !important;
  background: rgba(248, 246, 241, .94) !important;
  border: 1px solid rgba(201, 169, 110, .34) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(10px) !important;
  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.site-header .brand:hover,
.site-header .brand:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28) !important;
}

.site-header .brand img {
  display: block !important;
  width: clamp(104px, 6.4vw, 128px) !important;
  height: auto !important;
}

.site-header .nav-links {
  width: auto !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: clamp(10px, 1.3vw, 22px) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.site-header .nav-links a {
  position: relative !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(242, 234, 216, .18) !important;
  background: rgba(7, 24, 15, .34) !important;
  color: rgba(248, 246, 241, .78) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  opacity: .78 !important;
  transition: color 180ms ease, transform 180ms ease, opacity 180ms ease !important;
}

.site-header .nav-links a:hover,
.site-header .nav-links a:focus-visible,
.site-header .nav-links a[aria-current="page"] {
  opacity: 1 !important;
  color: var(--acid, #b2ff34) !important;
  transform: translateY(-1px);
}

.site-header .nav-links a[href="/talk-to-us/"] {
  padding: 12px 16px !important;
  border-color: var(--acid, #b2ff34) !important;
  background: transparent !important;
  color: rgba(248, 246, 241, .92) !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  :root {
    --coactise-header-h: 156px;
  }

  .site-header {
    min-height: var(--coactise-header-h) !important;
  }

  .site-header .page-shell {
    min-height: calc(var(--coactise-header-h) - 1px) !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    padding-block: 12px !important;
  }

  .site-header .nav-links {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    gap: 5px 14px !important;
  }

  .site-header .nav-links a {
    padding: 9px 10px !important;
  }
}

@media (max-width: 360px) {
  :root {
    --coactise-header-h: 192px;
  }
}

/* Functional labels stay readable on high-density screens. */
main .eyebrow,
main .label,
main .page-label,
main .meta,
main .microline,
main .trust-line,
main .nav,
main .nav-links,
main button,
main a.button,
main a.hero-cta {
  font-size: max(calc(12px / var(--coactise-fit)), .72rem) !important;
}

.coactise-site-nav,
.site-header .nav-links,
.coactise-site-nav a,
.site-header .nav-links a {
  font-size: 12px !important;
}

/* Give every bordered section frame a real text inset. */
main > section > .shell,
main > section > .page-shell {
  padding-inline: clamp(12px, 1.5vw, 24px);
}

main p,
main li {
  line-height: 1.45;
}

main > section {
  padding-bottom: max(28px, var(--coactise-section-pad, 54px)) !important;
}

main > section > .shell,
main > section > .page-shell {
  padding-bottom: 12px;
}

main .hero-copy,
main .section-head p,
main .section-note,
main .scan-line span,
main .message-bubble p,
main .proof-card p,
main .copy {
  line-height: 1.45 !important;
}

main small,
main [class*="label"],
main [class*="meta"],
main [class*="eyebrow"],
main [class*="status"],
main [class*="tag"],
main [class*="caption"],
main .object-card span,
main .object-card small,
main .object-result span {
  font-size: max(calc(12px / var(--coactise-fit)), .72rem) !important;
}

/* Stage 0 readable-label floor: page-local art labels may be decorative,
   but visitor-facing text must never render below 12px. */
main .pressure-stack .owner-action span,
main .pressure-ticker-track,
main .pressure-ticker-track span,
main .hero-control-object span,
main .module-button span,
main .output-strip span,
main .message-actions span,
main .hero-system-card span,
main .authority-visual-card span,
main .founder-proof span,
main .phone-channel strong,
main .proof-slab span,
main .story-media figcaption,
main .stat-proof-grid strong {
  font-size: calc(12px / var(--coactise-fit)) !important;
}

@media (max-width: 760px) {
  .coactise-site-nav,
  .site-header .nav-links {
    justify-content: flex-start;
    gap: 6px 14px;
    font-size: 12px;
  }
}

.page-shell,
.shell {
  width: var(--coactise-section-shell) !important;
}

#hero .page-shell,
main > section.hero > .shell,
.hero.shell {
  width: var(--coactise-hero-shell) !important;
}

#hero.hero-pressure {
  padding-top: 0 !important;
}

#hero.hero-pressure::before {
  display: none !important;
}

#hero.hero-pressure .hero-pressure-grid {
  min-height: calc(100svh - var(--coactise-header-h)) !important;
  height: calc(100svh - var(--coactise-header-h)) !important;
  max-height: calc(100svh - var(--coactise-header-h)) !important;
  align-items: start !important;
  padding-top: clamp(34px, 5svh, 56px) !important;
  padding-bottom: clamp(24px, 4svh, 40px) !important;
}

#hero.hero-pressure h1,
main > section.hero h1,
.hero h1 {
  max-width: 13.5ch !important;
  font-size: var(--coactise-hero-heading) !important;
  line-height: .88 !important;
  letter-spacing: -.048em !important;
}

@media (min-width: 901px) {
  /* Universal fit: frames stay forced; content scales down on short screens
     so nothing is clipped. One rule, every section, every fixed-layout page. */
  html { scroll-padding-top: var(--coactise-header-h); }

  body.coactise-layout-fixed main > section > * {
    zoom: var(--coactise-fit);
  }

  body.coactise-layout-fixed #hero,
  body.coactise-layout-fixed main > section.hero,
  body.coactise-layout-fixed .hero.shell {
    min-height: calc(100svh - var(--coactise-header-h)) !important;
    height: calc(100svh - var(--coactise-header-h)) !important;
    max-height: calc(100svh - var(--coactise-header-h)) !important;
    display: grid !important;
    align-items: start !important;
    padding-block: var(--coactise-section-pad) !important;
    overflow: clip !important;
  }

  .hero.shell {
    padding-top: clamp(56px, 5.7svh, 64px) !important;
  }

  body.coactise-layout-fixed main > section:not(#hero):not(.hero) {
    min-height: calc(100svh - var(--coactise-header-h)) !important;
    height: calc(100svh - var(--coactise-header-h)) !important;
    max-height: calc(100svh - var(--coactise-header-h)) !important;
    display: grid !important;
    align-items: center !important;
    padding-block: var(--coactise-section-pad) !important;
    overflow: clip !important;
  }

  body.coactise-layout-fixed .hero .hero-panel,
  body.coactise-layout-fixed .hero.shell .proof-object {
    min-height: clamp(700px, 70svh, 760px) !important;
  }

  body.coactise-layout-fixed .hero .hero-media-card {
    height: clamp(700px, 70svh, 760px) !important;
  }

  body.coactise-layout-natural #hero,
  body.coactise-layout-natural main > section.hero,
  body.coactise-layout-natural .hero.shell,
  body.coactise-layout-natural main > section:not(#hero):not(.hero) {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Talk hero: questions fall in one-by-one without changing the fixed frame. */
.hero-panel .conversation-scan {
  perspective: 900px;
}

.hero-panel .scan-line {
  transform-origin: 50% -24px;
  will-change: transform, opacity, filter;
  animation: coactise-question-fall 7.2s cubic-bezier(.18, .86, .22, 1) infinite both !important;
}

.hero-panel .scan-line:nth-of-type(2) { animation-delay: .15s !important; }
.hero-panel .scan-line:nth-of-type(3) { animation-delay: .85s !important; }
.hero-panel .scan-line:nth-of-type(4) { animation-delay: 1.55s !important; }

@media (prefers-reduced-motion: reduce) {
  .hero-panel .scan-line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

@keyframes coactise-question-fall {
  0%, 7% {
    opacity: 0;
    transform: translate3d(0, -42px, 90px) rotateX(-22deg) scale(.96);
    filter: blur(3px);
  }
  15%, 72% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
    filter: blur(0);
  }
  86%, 100% {
    opacity: .56;
    transform: translate3d(0, 8px, -20px) rotateX(7deg) scale(.985);
    filter: blur(.4px);
  }
}

/* Existing mobile/message visuals: deeper device feel, same footprint. */
.phone-3d,
#delivery-system .delivery-phone {
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateY(-7deg) rotateX(3deg) translateZ(0) !important;
  border-radius: 34px !important;
  box-shadow:
    18px 22px 0 rgba(9, 52, 38, .42),
    0 34px 80px rgba(0, 0, 0, .38) !important;
}

.phone-3d::before,
#delivery-system .delivery-phone::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(7, 16, 11, .16);
  border-radius: 27px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.34), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 42%);
  pointer-events: none;
  transform: translateZ(18px);
}

.phone-screen,
#delivery-system .phone-channel,
#delivery-system .message-bubble,
.message-bubble {
  transform: translateZ(28px);
}

.phone-channel,
#delivery-system .phone-channel {
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,249,239,.88)) !important;
  box-shadow: inset 0 0 0 1px rgba(7, 16, 11, .08);
}

.message-bubble,
#delivery-system .message-bubble {
  border-radius: 24px !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

main > section:not(#hero):not(.hero) .page-shell,
main > section:not(#hero):not(.hero) .shell,
main > section:not(#hero):not(.hero) .section-grid,
main > section:not(#hero):not(.hero) .section-media-grid,
main > section:not(#hero):not(.hero) .module-grid,
main > section:not(#hero):not(.hero) .mechanism-grid,
main > section:not(#hero):not(.hero) .service-list,
main > section:not(#hero):not(.hero) .trust-split,
main > section:not(#hero):not(.hero) .truth-list,
main > section:not(#hero):not(.hero) .control-list,
main > section:not(#hero):not(.hero) .action-stack,
main > section:not(#hero):not(.hero) .steps,
main > section:not(#hero):not(.hero) .authority-grid,
main > section:not(#hero):not(.hero) .faq-grid,
main > section:not(#hero):not(.hero) .proof-row,
main > section:not(#hero):not(.hero) .booking-grid {
  gap: var(--coactise-grid-gap) !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

main > section:is(#hero, .hero) h1,
main > section:not(#hero):not(.hero) h2,
main > section:not(#hero):not(.hero) .section-heading-full,
#human-trust h2 {
  max-width: 18ch !important;
  font-size: var(--coactise-section-heading) !important;
  line-height: .9 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

main > section:not(#hero):not(.hero) .lead,
main > section:not(#hero):not(.hero) .copy,
main > section:not(#hero):not(.hero) p,
main > section:not(#hero):not(.hero) li {
  font-size: var(--coactise-body);
}

body.theme-pressure section[aria-labelledby="steps-title"] > .shell > .section-head > p,
body.theme-pressure section[aria-labelledby="proof-title"] > .shell > .section-head > p {
  display: none !important;
}

.proof-card:has(.example) {
  width: min(100%, 430px) !important;
  margin: clamp(16px, 2.4vw, 26px) auto 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(7, 16, 11, .14) !important;
  border-radius: 30px !important;
  background: #f7f1df !important;
  color: #07100b !important;
  box-shadow: 16px 18px 0 rgba(89, 235, 220, .16), 0 30px 70px rgba(0, 0, 0, .30) !important;
  transform-style: preserve-3d;
  animation: phone-float 6.2s ease-in-out infinite;
  overflow: visible !important;
}

.proof-card:has(.example) .label {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 12px;
  border: 0;
  color: #136053 !important;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.proof-card:has(.example) .label::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--acid, #b2ff34);
  box-shadow: 0 0 18px rgba(178, 255, 52, .75);
}

.proof-card:has(.example) .example {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0;
  padding: 16px;
  border-radius: 20px;
  background: #fffdf6 !important;
  color: #07100b !important;
  white-space: pre-line;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(.78rem, .92vw, .94rem);
  font-weight: 780;
  line-height: 1.28;
  box-shadow: inset 0 0 0 1px rgba(7, 16, 11, .10);
}

.proof-card:has(.example) .example::first-line {
  color: #136053;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  :root {
    --coactise-hero-shell: min(100% - 28px, 1480px);
    --coactise-section-shell: min(100% - 28px, 1320px);
    --coactise-section-pad: clamp(48px, 8svh, 72px);
    --coactise-hero-heading: clamp(2.85rem, 12vw, 4.2rem);
    --coactise-section-heading: clamp(2.25rem, 9.4vw, 3.45rem);
  }

  main > section.hero,
  .hero {
    min-height: auto !important;
  }

  .section-grid,
  .section-grid.reverse {
    grid-template-columns: 1fr !important;
  }

  .proof-card:has(.example) {
    width: min(100%, 390px) !important;
  }

  .proof-cream-page .proof-hero {
    grid-template-columns: 1fr !important;
  }
}