/* L3V3L marketing site — layout classes on top of the token system. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: var(--container-narrow); }
.section { padding: var(--section-y) 0; }
.section--tight { padding: calc(var(--section-y) * 0.55) 0; }
.section--first { padding-top: calc(64px + var(--space-20)); }
.band { background: var(--bg); color: var(--text); }

/* Type */
.display-xl { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); font-variation-settings: "wdth" var(--wdth-display); margin: 0; text-wrap: balance; }
.display { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-variation-settings: "wdth" var(--wdth-display); margin: 0; text-wrap: balance; }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 600; margin: 0; text-wrap: balance; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 600; margin: 0; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 600; margin: 0; text-wrap: balance; }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: 600; margin: 0; }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text-muted); margin: 0; text-wrap: pretty; }
.body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted); margin: 0; text-wrap: pretty; }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-muted); margin: 0; text-wrap: pretty; }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-subtle); margin: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mark { background: var(--accent); color: var(--ink); padding: 0 0.12em; border-radius: 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); font-weight: 600; color: var(--accent-text); text-decoration: none; }
.link .arr { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.link:hover .arr, .l3-card--interactive:hover .link .arr { transform: translateX(4px); }

/* Layout helpers */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.grid { display: grid; gap: var(--grid-gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .nav__links { display: none; } }

/* Motion */
.reveal { opacity: 0; transform: translateY(var(--reveal-y)); filter: blur(6px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out), filter var(--dur-reveal) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal[data-d="1"] { transition-delay: calc(var(--stagger) * 1); }
.reveal[data-d="2"] { transition-delay: calc(var(--stagger) * 2); }
.reveal[data-d="3"] { transition-delay: calc(var(--stagger) * 3); }
.reveal[data-d="4"] { transition-delay: calc(var(--stagger) * 4); }
.reveal[data-d="5"] { transition-delay: calc(var(--stagger) * 5); }
.reveal[data-d="6"] { transition-delay: calc(var(--stagger) * 6); }
.reveal[data-d="7"] { transition-delay: calc(var(--stagger) * 7); }
.reveal[data-d="8"] { transition-delay: calc(var(--stagger) * 8); }
.mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 0.04em 0.1em; margin: 0 -0.04em -0.1em; }
.mask > span { display: inline-block; transform: translateY(110%); animation: l3-mask-up var(--dur-reveal) var(--ease-out) forwards; }
.scale-in { animation: l3-reveal-scale var(--dur-reveal) var(--ease-out) both; }
.float { animation: l3-float 6s var(--ease-in-out) infinite; }
.float--2 { animation-delay: -2s; animation-duration: 7s; }
.float--3 { animation-delay: -4s; animation-duration: 8s; }

/* Nav */
.nav { position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 100; display: flex; align-items: center; border-bottom: 1px solid transparent; transition: background var(--dur-base) var(--ease-snap), border-color var(--dur-base), backdrop-filter var(--dur-base); }
.nav.scrolled { background: var(--glass-bg); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border-color: var(--glass-border); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { font-weight: 700; letter-spacing: -0.04em; font-size: 22px; line-height: 1; color: var(--text); text-decoration: none; }
.wordmark:hover { color: var(--text); }
.nav__links { display: flex; gap: 28px; }
.nav__link { font-size: 14px; font-weight: 500; color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-snap); }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--text); }

/* Photography */
.photo { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--border); }
.photo image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo__placeholder { position:absolute; inset:0; display:grid; place-items:center; padding:24px; color:var(--text-muted); background:var(--photo-placeholder); text-align:center; }
.photo__placeholder span { max-width:28ch; font-size:12px; font-weight:600; letter-spacing:.08em; line-height:1.4; text-transform:uppercase; }
.photo--flush { border: 0; border-radius: 0; }
.chips { position: absolute; inset: 0; pointer-events: none; }
.chip { position: absolute; }

/* Bits */
.service-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; flex: none; }
.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body-sm); line-height: 1.45; color: var(--text-muted); }
.feature-list li svg { flex: none; color: var(--accent-text); margin-top: 2px; }
.feature-list li.off { opacity: 0.4; }
.feature-list li.off svg { color: var(--text-subtle); }
.step-num { font-family: var(--font-mono); font-size: var(--fs-stat); letter-spacing: -0.03em; line-height: 1; color: var(--accent); }
.price { font-family: var(--font-mono); font-size: 56px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hairline { border: 0; border-top: 1px solid var(--border); margin: 0; }
.faq details { border-top: 1px solid var(--border); padding: 22px 0; }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--ls-h4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 22px; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 12px 0 0; color: var(--text-muted); max-width: 64ch; text-wrap: pretty; }
.footer-mark { font-weight: 700; font-size: clamp(96px, 19vw, 300px); letter-spacing: -0.06em; line-height: 0.78; margin: 0 -0.04em; color: var(--text); }
.service-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); align-items: center; padding: var(--space-16) 0; border-top: 1px solid var(--border); }
.service-row:nth-child(even) > .service-row__copy { order: 2; }
@media (max-width: 900px) { .service-row { grid-template-columns: 1fr; gap: var(--space-8); } .service-row:nth-child(even) > .service-row__copy { order: 0; } }
.plan--popular { position: relative; }
.plan--popular .l3-badge { position: absolute; top: 20px; right: 20px; }