@import "tailwindcss";
:root {
--ink: #171b1d;
--ink-soft: #222a2d;
--paper: #f4efe6;
--paper-light: #fbf7f0;
--muted: #756f67;
--line: #d8cdbd;
--gold: #c99048;
--teal: #2d8077;
--brick: #a44d2b;
--navy: #1d3048;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: Georgia, "Times New Roman", serif;
}
a {
color: inherit;
text-decoration: none;
}
p, h1, h2, h3 {
margin-top: 0;
}
.site-header {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 76px;
padding: 0 5vw;
border-bottom: 1px solid rgba(255, 255, 255, .08);
background: rgba(23, 27, 29, .95);
color: #f9f5ed;
backdrop-filter: blur(14px);
}
.brand {
display: flex;
align-items: center;
gap: 14px;
font-size: 12px;
letter-spacing: .04em;
}
.brand-mark {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid var(--gold);
border-radius: 50%;
color: var(--gold);
font-weight: 700;
}
nav {
display: flex;
align-items: center;
gap: 28px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
nav a:not(.nav-cta) {
color: #c9c5bd;
}
nav a:hover {
color: white;
}
.nav-cta {
padding: 11px 18px;
border: 1px solid var(--gold);
border-radius: 999px;
}
.dark-section {
background: var(--ink);
color: #f8f4ec;
}
.hero {
position: relative;
display: grid;
min-height: calc(100vh - 76px);
grid-template-columns: 1.02fr .98fr;
overflow: hidden;
}
.hero::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: "";
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 90px 6vw 84px;
}
.eyebrow {
margin-bottom: 28px;
color: #bfb9af;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.eyebrow.dark {
color: #776f64;
}
h1 {
max-width: 680px;
margin-bottom: 32px;
font-size: clamp(64px, 8vw, 126px);
font-weight: 700;
letter-spacing: -.055em;
line-height: .82;
}
.hero-lede {
max-width: 580px;
margin-bottom: 42px;
color: #c8c3ba;
font-size: clamp(18px, 1.7vw, 26px);
line-height: 1.45;
}
.hero-actions {
display: flex;
align-items: center;
gap: 30px;
}
.button {
display: inline-flex;
min-height: 52px;
align-items: center;
justify-content: center;
padding: 0 27px;
border-radius: 999px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
transition: transform .2s ease, background .2s ease;
}
.button:hover {
transform: translateY(-2px);
}
.button-gold {
background: var(--gold);
color: #171b1d;
}
.button-gold:hover {
background: #daa55d;
}
.text-link {
border-bottom: 1px solid #565c5e;
color: #d4d0c7;
font-size: 14px;
line-height: 2;
}
.text-link span {
margin-left: 6px;
color: var(--gold);
}
.hero-visual {
position: relative;
min-height: 620px;
border-left: 1px solid #303638;
background:
radial-gradient(circle at 55% 45%, rgba(201, 144, 72, .08), transparent 31%),
linear-gradient(145deg, #171b1d, #1e2528);
}
.hero-number {
position: absolute;
top: 9%;
right: 10%;
color: var(--gold);
font-size: clamp(78px, 9vw, 142px);
line-height: 1;
}
.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(201, 144, 72, .28);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.orbit-one {
width: 430px;
height: 430px;
}
.orbit-two {
width: 600px;
height: 600px;
border-color: rgba(255, 255, 255, .06);
}
.hero-card {
position: absolute;
top: 52%;
left: 50%;
width: min(420px, 70%);
padding: 34px;
border: 1px solid #3b4447;
border-radius: 18px;
background: rgba(35, 43, 46, .92);
box-shadow: 0 30px 80px rgba(0, 0, 0, .2);
transform: translate(-50%, -50%);
}
.hero-card p:last-child {
margin-bottom: 0;
font-size: clamp(20px, 2vw, 30px);
font-weight: 700;
line-height: 1.3;
}
.micro {
margin-bottom: 16px;
color: var(--gold);
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.hero-chip {
position: absolute;
padding: 10px 16px;
border: 1px solid #465053;
border-radius: 999px;
background: #1c2224;
color: #c7c3bb;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.chip-a { top: 31%; left: 12%; }
.chip-b { right: 9%; bottom: 25%; }
.chip-c { bottom: 12%; left: 20%; }
.section-shell {
padding: 120px 6vw;
}
.bridge {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 8vw;
}
h2 {
font-size: clamp(44px, 5vw, 76px);
letter-spacing: -.04em;
line-height: .98;
}
.large-copy {
margin-bottom: 52px;
font-size: clamp(21px, 2vw, 30px);
line-height: 1.5;
}
.three-values {
display: grid;
border-top: 1px solid var(--line);
}
.three-values span {
display: grid;
grid-template-columns: 50px 1fr;
padding: 20px 0;
border-bottom: 1px solid var(--line);
font-size: 19px;
}
.three-values b {
color: var(--gold);
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
letter-spacing: .1em;
}
.muscles {
display: grid;
grid-template-columns: .72fr 1.28fr;
gap: 7vw;
background: var(--paper-light);
}
.section-heading > p:last-child,
.method-intro > p:last-child,
.diagnostic-title > p:last-child {
max-width: 530px;
color: var(--muted);
font-size: 17px;
line-height: 1.6;
}
.muscle-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.muscle-card {
position: relative;
min-height: 150px;
padding: 30px 28px 26px 34px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 16px;
background: #fffaf3;
}
.muscle-card::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 8px;
content: "";
background: var(--tone);
}
.muscle-card.teal { --tone: var(--teal); }
.muscle-card.brick { --tone: var(--brick); }
.muscle-card.gold { --tone: var(--gold); }
.muscle-card.navy { --tone: var(--navy); }
.muscle-card h3 {
margin-bottom: 12px;
font-size: 21px;
}
.muscle-card p {
margin-bottom: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.5;
}
.method {
padding: 0;
}
.method .section-shell {
padding-top: 130px;
padding-bottom: 130px;
}
.method-intro {
display: grid;
grid-template-columns: 1.2fr 1fr;
column-gap: 8vw;
}
.method-intro .eyebrow {
grid-column: 1 / -1;
}
.method-intro > p:last-child {
align-self: end;
color: #aca79e;
}
.process-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
margin-top: 80px;
border: 1px solid #374043;
border-radius: 18px;
overflow: hidden;
}
.process-step {
min-height: 220px;
padding: 26px 24px;
border-right: 1px solid #374043;
background: #1b2022;
}
.process-step:nth-child(even) {
background: #222a2d;
}
.process-step:last-child {
border-right: 0;
}
.process-step span {
display: block;
margin-bottom: 52px;
color: var(--gold);
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
letter-spacing: .12em;
}
.process-step h3 {
margin-bottom: 11px;
font-size: 21px;
}
.process-step p {
margin-bottom: 0;
color: #aaa69e;
font-size: 13px;
line-height: 1.5;
}
.method-note {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8vw;
align-items: end;
margin-top: 70px;
padding-top: 38px;
border-top: 1px solid #394144;
}
.quote {
margin-bottom: 0;
color: var(--gold);
font-size: clamp(27px, 3vw, 44px);
}
.method-note > p:last-child {
max-width: 480px;
margin-bottom: 0;
color: #aaa69e;
line-height: 1.6;
}
.diagnostic {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 8vw;
background: var(--paper);
}
.display-number {
display: block;
margin-bottom: 40px;
color: var(--gold);
font-size: clamp(72px, 9vw, 132px);
line-height: .8;
}
.outcomes {
display: grid;
}
.outcomes article {
display: grid;
grid-template-columns: 56px 1fr;
gap: 16px;
padding: 28px 0;
border-bottom: 1px solid var(--line);
}
.outcomes article:first-child {
border-top: 1px solid var(--line);
}
.outcomes span {
color: var(--gold);
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
}
.outcomes h3 {
margin-bottom: 8px;
font-size: 24px;
}
.outcomes p {
margin-bottom: 0;
color: var(--muted);
line-height: 1.5;
}
.pricing {
background: var(--paper-light);
}
.pricing-heading {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 8vw;
margin-bottom: 70px;
}
.pricing-heading .eyebrow {
grid-column: 1 / -1;
}
.pricing-heading > p:last-child {
align-self: end;
}
.pricing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.price-card {
padding: 36px;
border: 1px solid var(--line);
border-radius: 22px;
background: #fffaf3;
}
.price-card.featured {
border-color: var(--gold);
background: #efe3d0;
}
.price-topline {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 44px;
color: var(--muted);
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
.tag {
padding: 8px 12px;
border-radius: 999px;
background: var(--gold);
color: var(--ink);
}
.tag.subtle {
border: 1px solid var(--line);
background: transparent;
}
.price-card h3 {
margin-bottom: 14px;
font-size: 29px;
}
.price {
margin-bottom: 6px;
font-size: clamp(62px, 7vw, 100px);
letter-spacing: -.06em;
line-height: 1;
}
.price span {
margin-right: 7px;
color: var(--gold);
font-size: .4em;
vertical-align: top;
}
.per {
margin-bottom: 34px;
color: var(--muted);
}
.price-card ul {
display: grid;
gap: 15px;
min-height: 170px;
margin: 0 0 35px;
padding: 28px 0 0;
border-top: 1px solid var(--line);
list-style: none;
}
.price-card li {
position: relative;
padding-left: 25px;
}
.price-card li::before {
position: absolute;
left: 0;
color: var(--teal);
content: "●";
font-size: 9px;
}
.price-card .button {
width: 100%;
}
.button-dark {
background: var(--ink);
color: white;
}
.button-outline {
border: 1px solid var(--ink);
}
.pricing-footnotes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid var(--line);
}
.pricing-footnotes p {
margin-bottom: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.pricing-footnotes b {
color: var(--ink);
}
.final-cta {
position: relative;
display: grid;
grid-template-columns: 90px 1fr .75fr;
gap: 5vw;
align-items: center;
padding: 130px 6vw;
overflow: hidden;
}
.final-cta::before {
position: absolute;
right: -180px;
width: 500px;
height: 500px;
border: 1px solid rgba(201, 144, 72, .18);
border-radius: 50%;
content: "";
}
.cta-number {
align-self: start;
color: var(--gold);
font-size: 68px;
}
.final-cta h2 {
margin-bottom: 0;
}
.cta-card {
position: relative;
z-index: 1;
padding: 36px;
border: 1px solid #3d4547;
border-radius: 18px;
background: var(--ink-soft);
}
.cta-card > p:first-child {
margin-bottom: 28px;
color: #c9c4bb;
font-size: 18px;
line-height: 1.6;
}
.cta-card .small {
margin: 18px 0 0;
color: #8f8c86;
font-size: 12px;
}
footer {
display: flex;
justify-content: space-between;
padding: 28px 6vw;
border-top: 1px solid #343b3d;
background: var(--ink);
color: #8d8a84;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
footer a {
color: var(--gold);
}
@media (max-width: 980px) {
nav a:not(.nav-cta) {
display: none;
}
.hero,
.bridge,
.muscles,
.diagnostic,
.method-intro,
.pricing-heading {
grid-template-columns: 1fr;
}
.hero-visual {
min-height: 620px;
border-top: 1px solid #303638;
border-left: 0;
}
.bridge,
.muscles,
.diagnostic {
gap: 55px;
}
.process-row {
grid-template-columns: 1fr;
}
.process-step {
display: grid;
min-height: auto;
grid-template-columns: 50px 150px 1fr;
align-items: center;
border-right: 0;
border-bottom: 1px solid #374043;
}
.process-step:last-child {
border-bottom: 0;
}
.process-step span,
.process-step h3,
.process-step p {
margin: 0;
}
.pricing-heading > p:last-child {
max-width: 600px;
}
.final-cta {
grid-template-columns: 70px 1fr;
}
.cta-card {
grid-column: 2;
}
}
@media (max-width: 700px) {
.site-header {
min-height: 66px;
}
.brand > span:last-child {
display: none;
}
.hero {
min-height: auto;
}
.hero-copy {
padding-top: 76px;
}
.hero-actions {
align-items: flex-start;
flex-direction: column;
}
.hero-visual {
min-height: 520px;
}
.orbit-one {
width: 300px;
height: 300px;
}
.orbit-two {
width: 430px;
height: 430px;
}
.hero-card {
width: 82%;
padding: 26px;
}
.section-shell {
padding: 84px 6vw;
}
.muscle-grid,
.pricing-grid,
.pricing-footnotes,
.method-note {
grid-template-columns: 1fr;
}
.muscle-card {
min-height: auto;
}
.method .section-shell {
padding-top: 90px;
padding-bottom: 90px;
}
.process-row {
margin-top: 50px;
}
.process-step {
grid-template-columns: 38px 1fr;
gap: 12px;
}
.process-step p {
grid-column: 2;
}
.pricing-grid {
gap: 18px;
}
.pricing-footnotes {
gap: 14px;
}
.final-cta {
grid-template-columns: 1fr;
padding: 90px 6vw;
}
.cta-number {
font-size: 54px;
}
.cta-card {
grid-column: 1;
}
footer {
gap: 20px;
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.button {
transition: none;
}
}
