/* BlackReef Lab / Tidal Signal / prototype v0.1 */
:root {
  --ink: #0c1110;
  --paper: #f5f4e9;
  --mist: #e6e6dc;
  --line: #c9cbc1;
  --muted: #535a56;
  --reef: #007a6f;
  --aqua: #a9ebd4;
  --lime: #d8e650;
  --blue: #315cd4;
  --coral: #e26445;
  --deep-reef: #003c38;
  --display: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius-sm: 10px;
  --radius-md: 16px;
  --shell: min(1240px, calc(100vw - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 16px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: .18em; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 20; left: 1rem; top: -4rem; padding: .75rem 1rem; color: white; background: var(--ink); border-radius: var(--radius-sm); }
.skip-link:focus { top: 1rem; }

.site-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: .2em; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.075em; }
.wordmark-slash { margin: 0 .08em; color: var(--reef); font-weight: 500; }
nav { display: flex; gap: .45rem; margin-left: auto; }
nav a, .header-contact { padding: .46rem .85rem; border-radius: 999px; font-size: .68rem; font-weight: 650; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
nav a { color: var(--ink); background: var(--mist); }
nav a:hover, nav a:focus-visible { background: var(--line); }
.header-contact { color: white; background: var(--ink); }

.hero { min-height: min(760px, calc(100svh - 72px)); padding: clamp(4rem, 9vw, 8rem) 0 4rem; display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: clamp(3rem, 9vw, 9rem); }
.hero-centered { display:grid; grid-template-columns:1.04fr .96fr; min-height:clamp(560px,72vh,760px); padding-bottom:clamp(5rem,10vw,9rem); text-align:left; }.hero-centered .hero-copy { max-width:42rem; }.hero-centered .eyebrow,.hero-centered .hero-actions { justify-content:flex-start; }.hero-centered .hero-lede { max-width:38rem; }.hero-selected-visual { position:relative; min-height:430px; margin:0; overflow:hidden; border-radius:var(--radius-md); background:var(--paper); }.hero-selected-visual img { display:block; width:100%; height:100%; min-height:430px; object-fit:cover; object-position:center; }.hero-selected-visual figcaption { position:absolute; left:1.2rem; bottom:1.05rem; color:var(--paper); font-size:.67rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.25rem; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
.pulse { width: .55rem; height: .55rem; border-radius: 50%; background: var(--reef); box-shadow: 0 0 0 .25rem #c8e8db; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.065em; }
h1 { margin-bottom: 1.75rem; font-size: clamp(3.45rem, 7vw, 6.8rem); font-weight: 650; line-height: .91; letter-spacing: -.065em; }
h1 em { color: var(--reef); font-style: normal; }
h2 em { color: var(--reef); font-style: normal; }
.hero-lede { max-width: 35rem; margin-bottom: 2.1rem; color: #313a36; font-size: clamp(1.04rem, 1.5vw, 1.25rem); line-height: 1.48; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.button { display: inline-flex; gap: 2.8rem; align-items: center; justify-content: space-between; min-height: 3.45rem; padding: .8rem 1.05rem  .8rem 1.25rem; border: 1px solid transparent; border-radius: 999px; font-weight: 700; font-size: .88rem; text-decoration: none; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--ink); }
.button-primary:hover { background: var(--reef); }
.text-link { font-size: .88rem; font-weight: 700; }
.text-link span { margin-left: .3rem; color: var(--reef); }

.hero-image { position:relative; align-self:stretch; min-height:440px; margin:0; overflow:hidden; border-radius:var(--radius-md); background:#e6e2d7; }.hero-image::after { content:""; position:absolute; inset:auto 0 0; height:34%; background:linear-gradient(transparent,rgba(12,17,16,.42)); pointer-events:none; }.hero-image img { width:100%; height:100%; min-height:440px; object-fit:cover; object-position:60% center; display:block; }.hero-image figcaption { position:absolute; z-index:1; left:1.15rem; bottom:1rem; color:white; font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.art-topline, .project-meta { position: relative; z-index: 4; display: flex; justify-content: space-between; gap: 1rem; font-size: .67rem; font-weight: 700; letter-spacing: .1em; }
.art-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(0, 60, 56, .13) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 60, 56, .13) 1px, transparent 1px); background-size: 14.285% 16.666%; }
.node { position: absolute; z-index: 1; width: clamp(28px, 4vw, 52px); aspect-ratio: 1; border: 2px solid var(--deep-reef); border-radius: 50%; background: var(--aqua); }
.node-one { top: 23%; left: 14%; }.node-two { top: 64%; left: 28%; }.node-three { top: 32%; left: 50%; }.node-four { top: 73%; left: 61%; }.node-five { top: 17%; left: 77%; background: var(--blue); border-color: var(--blue); }.node-six { top: 51%; left: 85%; background: var(--coral); border-color: var(--coral); }
.beam { position: absolute; z-index: 0; height: 2px; transform-origin: left; background: var(--deep-reef); }.beam-one { top: 35%; left: 17%; width: 40%; transform: rotate(9deg); }.beam-two { top: 66%; left: 31%; width: 34%; transform: rotate(-12deg); }.beam-three { top: 34%; left: 53%; width: 31%; transform: rotate(21deg); }
.orbit { position: absolute; z-index: 0; width: 42%; aspect-ratio: 1; border: 1px solid var(--deep-reef); border-radius: 50%; opacity: .65; }.orbit-one { left: 30%; top: 17%; }.orbit-two { left: 46%; top: 28%; transform: rotate(43deg) scaleX(.62); }
.art-caption { position: absolute; z-index: 2; right: 1.25rem; bottom: 1.1rem; display: flex; align-items: baseline; gap: .6rem; font-size: clamp(1.4rem, 2.5vw, 2.3rem); letter-spacing: -.065em; }.art-caption span:first-child { color: var(--deep-reef); }.art-caption strong { font-weight: 650; }.art-arrow { color: var(--coral); }

.overview { padding: clamp(5.5rem, 10vw, 9rem) 0; border-top: 1px solid var(--line); }.overview-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: clamp(2.8rem, 5vw, 4.5rem); }.overview-heading p:last-child { max-width: 26rem; margin: 0; color: var(--muted); line-height: 1.5; }.overview-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.overview-item { min-height: 230px; padding: 1.35rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.overview-item-active { background: var(--aqua); }.overview-index { display: block; color: var(--reef); font-size: .7rem; font-weight: 700; letter-spacing: .1em; }.overview-item h3 { margin: 3.4rem 0 .7rem; font-size: 1.7rem; font-weight: 620; line-height: .95; }.overview-item p { max-width: 16rem; margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }

.manifesto { display: grid; grid-template-columns: .35fr 1.35fr 1fr; gap: 3rem; padding: clamp(6rem, 11vw, 10rem) 0; border-top: 1px solid var(--line); }
.section-number { color: var(--reef); font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
h2 { margin-bottom: 0; font-size: clamp(2.5rem, 5vw, 4.75rem); font-weight: 620; line-height: .96; }
.manifesto-copy { align-self: end; margin: 0; max-width: 25rem; color: #3c4541; font-size: 1.05rem; line-height: 1.55; }

.loop-section { padding: clamp(4rem, 8vw, 7rem) 0; color: var(--paper); background: var(--deep-reef); }
.loop-section .eyebrow { color: #b7d5ca; }.loop-section h2 { color: white; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
.growth-loop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.38); }
.growth-loop li { position: relative; min-height: 205px; padding: 1.2rem 1.25rem 1.5rem 0; border-right: 1px solid rgba(255,255,255,.38); }.growth-loop li + li { padding-left: 1.25rem; }.growth-loop li:last-child { border-right: 0; }
.loop-index { display: block; margin-bottom: 2.9rem; color: var(--aqua); font-size: .72rem; font-weight: 700; letter-spacing: .1em; }.growth-loop strong { display: block; margin-bottom: .55rem; font-family: var(--display); font-size: 1.5rem; letter-spacing: -.045em; }.growth-loop p { max-width: 12rem; margin: 0; color: #c7dad3; font-size: .9rem; line-height: 1.45; }

.platform-showcase { padding:clamp(5rem,10vw,9rem) 0; background:#fff; }.showcase-heading { display:flex; align-items:end; justify-content:space-between; gap:3rem; margin-bottom:clamp(3rem,6vw,5.5rem); }.showcase-heading p:last-child { max-width:28rem; margin:0; color:var(--muted); line-height:1.5; }.story-stack { display:grid; gap:1.25rem; }.product-story { display:grid; grid-template-columns:.78fr 1.22fr; align-items:center; gap:clamp(2rem,7vw,7rem); min-height:510px; padding:clamp(1.6rem,4vw,4rem); overflow:hidden; border-radius:var(--radius-md); }.story-copy { position:relative; z-index:2; }.story-copy h3 { margin:0 0 1.25rem; font-size:clamp(2rem,4vw,4rem); font-weight:620; line-height:.94; }.story-copy > p:not(.eyebrow) { max-width:25rem; margin-bottom:1.7rem; color:var(--muted); font-size:1rem; line-height:1.5; }.story-store { background:#c9efe1; }.story-onboarding { color:white; background:var(--deep-reef); }.story-onboarding .eyebrow { color:#b6ddcf; }.story-onboarding .story-copy > p:not(.eyebrow) { color:#c9ddd6; }.story-onboarding .text-link span { color:var(--aqua); }.story-paywall { background:#e2e8fb; }.story-image { min-height:390px; margin:0; overflow:hidden; border-radius:12px; box-shadow:0 24px 48px rgba(0,60,56,.16); }.story-image img { display:block; width:100%; height:100%; min-height:390px; object-fit:cover; }.story-store .story-image img { object-position:62% center; }.story-onboarding .story-image img { object-position:64% center; }.story-paywall .story-image img { object-position:left center; transform:scaleX(-1); }

.levers { padding: clamp(6rem, 10vw, 9rem) 0; }.levers-intro { display:flex; align-items:end; justify-content:space-between; gap:3rem; margin-bottom:clamp(3rem,6vw,5rem); }.levers-intro .section-number { align-self:start; }.levers-intro .eyebrow { margin-bottom:.9rem; }.levers-intro h2 { margin-bottom:0; }.levers-intro > p:last-child { max-width:26rem; margin:0; color: var(--muted); line-height: 1.5; }
.lever-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.lever-card { position:relative; min-height:270px; padding:1.65rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.22); transition:background .2s, transform .2s; }.lever-card:nth-child(2) { background:#e3f0ff; }.lever-card:nth-child(4) { background:#fff0e9; }.lever-card:nth-child(5) { background:#edf8ef; }.lever-card:hover { background:#fff; transform:translateY(-2px); }.lever-index { display:block; color:var(--reef); font-size:.65rem; font-weight:700; letter-spacing:.1em; }.lever-icon { display:grid; place-items:center; width:3.2rem; height:3.2rem; margin:1.3rem 0 1.65rem; color:var(--blue); border-radius:14px; background:#e7edff; font-size:1.6rem; font-weight:500; line-height:1; }.lever-card:nth-child(2) .lever-icon { color:#007a6f; background:#d6f1e5; }.lever-card:nth-child(3) .lever-icon { color:#d45a3c; background:#fde3d9; }.lever-card:nth-child(4) .lever-icon { color:#8a45b5; background:#f1e4fa; }.lever-card:nth-child(5) .lever-icon { color:#3f764d; background:#d8efdd; }.lever-card:nth-child(6) .lever-icon { color:#ab531e; background:#fae6cc; }.lever-card h3 { margin:0 0 .75rem; font-size:1.45rem; font-weight:620; line-height:1.03; }.lever-card p { max-width:19rem; margin-bottom:0; color:var(--muted); font-size:.92rem; line-height:1.46; }

.work-section { padding: clamp(5rem, 9vw, 8rem) 0; background: var(--mist); }.work-header { display: flex; justify-content: space-between; align-items: end; gap: 3rem; margin-bottom: 3rem; }.work-header p:last-child { max-width: 24rem; margin: 0; color: var(--muted); line-height: 1.5; }.work-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 1.1rem; }.project-card { position: relative; min-height: 405px; padding: 1.25rem; border-radius: var(--radius-md); overflow: hidden; }.project-card-featured { display: flex; flex-direction: column; justify-content: space-between; color: white; background: var(--ink); }.project-card-featured h3, .project-card-note h3 { margin-bottom: .45rem; font-size: 1.8rem; font-weight: 620; line-height: .98; }.project-card p { margin-bottom: 0; color: #b7c2bc; font-size: .9rem; }.project-placeholder { position: absolute; inset: 21% 25% 25%; display: grid; place-items: center; transform: rotate(-11deg); border: 1px solid rgba(169,235,212,.8); border-radius: 24%; color: var(--aqua); font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; letter-spacing: -.09em; }.project-placeholder::after { content: ""; position: absolute; width: 65%; height: 65%; border: 1px solid rgba(38,105,202,.9); border-radius: 50%; }.project-placeholder i { position: absolute; left: -28%; bottom: 7%; width: 115%; height: 2px; background: var(--coral); transform: rotate(26deg); }.project-placeholder b { position: absolute; right: 7%; top: -16%; width: 35%; aspect-ratio: 1; border-radius: 50%; background: var(--blue); }.project-card-note { display: flex; flex-direction: column; justify-content: end; color: var(--ink); background: var(--aqua); }.project-card-note > .project-meta { position: absolute; inset: 1.25rem auto auto 1.25rem; }.project-card-note p { color: #28514a; max-width: 19rem; }.card-arrow { position: absolute; top: 1.25rem; right: 1.25rem; color: var(--aqua); font-size: 1.5rem; }.project-card-note .card-arrow { color: var(--ink); }
.project-card-link { text-decoration:none; transition:transform .2s; }.project-card-link:hover { transform:translateY(-3px); }.project-card-featured > div:last-of-type { position:relative; z-index:3; max-width:17rem; }.case-icons { position:absolute; z-index:1; inset:12% 10% 43% 31%; display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; transform:rotate(-7deg); }.case-icons img { width:100%; border-radius:27%; box-shadow:0 12px 22px rgba(0,0,0,.25); }.case-icons img:nth-child(2) { transform:translateY(18%); }.case-icons img:nth-child(3) { transform:translateX(12%); }.case-icons img:nth-child(4) { transform:translate(12%,18%); }

.contact { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(6rem, 11vw, 10rem) 0; }.contact h2 { margin-bottom: 2rem; }.button-light { color: white; background: var(--reef); }.button-light:hover { background: var(--ink); }.contact-note { margin: 1.2rem 0 0; color: var(--muted); font-size: .78rem; }.site-footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 2rem; padding: 2rem 0 2.3rem; border-top: 1px solid var(--line); }.site-footer p { margin: 0; color: var(--muted); font-size: .78rem; }.site-footer p:last-child { text-align: right; }.footer-contact { color: var(--reef); font-weight: 700; text-decoration: none; }.footer-contact:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 780px) {
  :root { --shell: min(100% - 40px, 1240px); }
  .site-header { min-height: 72px; }.header-contact { display: none; }nav { gap: .35rem; }nav a { padding: .4rem .63rem; font-size: .6rem; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 2.5rem; padding-top: 4.6rem; }.hero-centered { grid-template-columns:1fr; text-align:center; }.hero-centered .eyebrow,.hero-centered .hero-actions { justify-content:center; }.hero-centered .hero-lede { margin-inline:auto; }.hero-image,.hero-image img,.hero-selected-visual,.hero-selected-visual img { min-height: 330px; }
  .overview-heading { display: block; }.overview-heading p:last-child { margin-top: 1.4rem; }.overview-strip { grid-template-columns: 1fr; }.overview-item { min-height: 180px; }.overview-item h3 { margin-top: 2rem; }
  .manifesto { grid-template-columns: 1fr; gap: 1.8rem; }.manifesto { padding-block: 5rem; }.manifesto .section-number { margin-bottom: -.5rem; }.manifesto-copy { max-width: 30rem; }
  .section-heading, .work-header { display: block; }.section-heading { margin-bottom: 3rem; }.growth-loop { grid-template-columns: repeat(2, 1fr); }.growth-loop li:nth-child(2) { border-right: 0; }.growth-loop li:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.38); }.growth-loop li:nth-child(3) { padding-left: 0; }.growth-loop li:nth-child(4) { padding-left: 1.25rem; }
  .levers-intro { display:block; }.levers-intro .section-number { display:block; margin-bottom:1.25rem; }.levers-intro > p:last-child { margin-top:1.5rem; }.lever-grid { grid-template-columns:repeat(2,1fr); }.work-header p:last-child { margin-top: 1.4rem; }.work-grid { grid-template-columns: 1fr; }.project-card { min-height: 340px; }.site-footer { grid-template-columns: 1fr 1fr; }.site-footer p:last-child { text-align: left; }
  .showcase-heading { display:block; }.showcase-heading p:last-child { margin-top:1.5rem; }.product-story { grid-template-columns:1fr; gap:2.5rem; min-height:0; }.story-image,.story-image img { min-height:400px; }
}
@media (max-width: 440px) { nav { display: none; }.hero-image,.hero-image img { min-height:285px; }.lever-grid { grid-template-columns: 1fr; }.growth-loop { grid-template-columns: 1fr; }.growth-loop li, .growth-loop li:nth-child(2), .growth-loop li:nth-child(3), .growth-loop li:nth-child(4) { min-height: auto; padding: 1.2rem 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.38); }.growth-loop li:last-child { border-bottom: 0; }.loop-index { margin-bottom: 1.2rem; }.site-footer { grid-template-columns: 1fr; gap: .8rem; }.product-story { padding:1.3rem; }.story-copy h3 { font-size:2.25rem; }.story-image,.story-image img { min-height:300px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.button { transition: none; } }

@media (max-width:440px) { .case-icons { inset:15% 8% 44% 25%; gap:.6rem; }.project-card-featured > div:last-of-type { max-width:15rem; } }