:root { --navy: #041f30; --ink: #011424; --mineral: #f3ede7; --paper: #f6f2eb; --coral: #c93b30; --muted: #59636b; --line: rgba(1,20,36,.18); --white: #fffaf5; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--mineral); color: var(--ink); font-family: Inter, system-ui, sans-serif; line-height: 1.55; }
a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; background: var(--coral); color: white; padding: .7rem 1rem; }
.skip-link:focus { top: 1rem; }
.rail { position: fixed; z-index: 5; inset: 0 auto 0 0; width: 72px; background: var(--navy); color: white; padding: 1.25rem .8rem; display: flex; flex-direction: column; justify-content: space-between; writing-mode: vertical-rl; }
.rail__brand, .rail__marker, .rail__bottom { transform: rotate(180deg); letter-spacing: .08em; font-size: .66rem; font-weight: 700; text-decoration: none; }
.rail__marker { color: #aebcc2; font-size: .58rem; }
.rail__bottom { color: #ffb0a7; }
main { margin-left: 72px; }
.prototype-banner { background: var(--ink); color: #fff; text-align: center; padding: .5rem 1rem; font-size: .7rem; letter-spacing: .12em; font-weight: 700; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem clamp(1.25rem, 4vw, 4.5rem); border-bottom: 1px solid var(--line); }
.topbar__brand { font-size: .8rem; font-weight: 800; letter-spacing: .1em; }.topbar__context { color: var(--muted); font-size: .8rem; }
.section-pad { padding: clamp(3.5rem, 8vw, 8rem) clamp(1.25rem, 7vw, 8rem); }.section-pad--paper { background: var(--paper); }.section-pad--navy { background: var(--navy); color: white; }.section-pad--coral { background: var(--coral); color: white; }
.eyebrow { margin: 0 0 1.2rem; color: var(--coral); font-size: .7rem; font-weight: 800; letter-spacing: .16em; }.eyebrow--light { color: #ffb0a7; }
h1, h2, h3 { margin: 0 0 1rem; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; line-height: .94; font-weight: 600; letter-spacing: -.02em; } h1 { max-width: 800px; font-size: clamp(3.8rem, 8vw, 8.6rem); } h2 { max-width: 840px; font-size: clamp(2.8rem, 5vw, 5.8rem); } h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.hero { min-height: min(820px, calc(100vh - 96px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); align-items: center; gap: clamp(2rem, 7vw, 8rem); }.hero__lead { max-width: 570px; margin: 2rem 0; font-size: clamp(1.1rem, 1.7vw, 1.45rem); color: var(--muted); }.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }.microcopy { color: var(--muted); font-size: .76rem; margin-top: 1.2rem; }.button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; background: var(--coral); color: white; border: 0; padding: .95rem 1.25rem; font: 600 .88rem Inter, sans-serif; text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease; }.button:hover, .button:focus-visible { transform: translateY(-2px); background: #a92e26; }.button--small { padding: .7rem .9rem; font-size: .73rem; }.button--light { background: var(--white); color: var(--coral); }.button--dark { background: var(--ink); }.text-link { color: var(--ink); text-underline-offset: .35em; font-size: .83rem; font-weight: 600; }.section-pad--navy .text-link, .section-pad--coral .text-link { color: white; }
.planning-board { position: relative; min-height: 530px; overflow: hidden; background: #ded4cb; box-shadow: 20px 20px 0 rgba(4,31,48,.08); transform: rotate(2deg); }.planning-board::before { content: ''; position: absolute; inset: 12% -5% 15%; background: #b9a99e; transform: rotate(-12deg); }.planning-board__label { position: absolute; left: 1.2rem; top: 1rem; z-index: 1; color: var(--navy); font-size: .62rem; font-weight: 800; letter-spacing: .1em; }.planning-board__sheet, .planning-board__tablet { position: absolute; z-index: 2; }.planning-board__sheet { width: 54%; aspect-ratio: 3/4; background: #fbf7f0; padding: 1.1rem; box-shadow: 8px 10px 0 rgba(1,20,36,.16); }.planning-board__sheet--back { left: 8%; top: 22%; transform: rotate(10deg); background: #c9bdb4; }.planning-board__sheet--front { left: 27%; top: 15%; transform: rotate(-7deg); display: flex; flex-direction: column; gap: 1rem; color: var(--navy); }.planning-board__sheet--front span { font-size: .55rem; letter-spacing: .1em; font-weight: 800; }.planning-board__sheet--front strong { font-family: 'Barlow Condensed', sans-serif; font-size: 2.3rem; line-height: .9; }.planning-board__sheet--front i { display: block; height: 1px; background: var(--navy); width: 75%; }.planning-board__tablet { right: 8%; bottom: 12%; width: 34%; aspect-ratio: 4/5; padding: 1rem; background: var(--navy); color: white; transform: rotate(14deg); box-shadow: 7px 8px 0 rgba(1,20,36,.2); }.planning-board__tablet span { font-size: .5rem; letter-spacing: .1em; color: #ffb0a7; }.planning-board__tablet b { display: block; margin-top: 2rem; font-family: 'Barlow Condensed'; font-size: 1.8rem; line-height: .9; }.planning-board__caption { position: absolute; z-index: 3; bottom: 1rem; left: 1rem; color: var(--navy); font-size: .68rem; font-weight: 600; }
.process__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 3rem; }.process__item { padding: 1.5rem 1.5rem 0 0; border-right: 1px solid var(--line); margin-right: 1.5rem; }.process__item:last-child { border: 0; }.process__item span, .benefit__id { color: var(--coral); font-size: .67rem; letter-spacing: .12em; font-weight: 800; }.process__item p { color: var(--muted); max-width: 280px; }
.situation, .collaboration { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 10vw, 11rem); align-items: start; }.situation__copy, .collaboration p { max-width: 500px; color: var(--muted); font-size: 1.08rem; }.situation__copy p + p { margin-top: 1.4rem; }.situation__copy .text-link { display: inline-block; margin-top: 1.5rem; }
.benefits h2 { max-width: 900px; }.benefits__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 4rem; background: rgba(255,255,255,.24); }.benefit { padding: 1.5rem 1.5rem 2rem 0; background: var(--navy); }.benefit + .benefit { padding-left: 1.5rem; }.benefit p { color: #d7e0e2; }.benefit small { display: block; color: #aebcc2; font-size: .7rem; }
.audience__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 3rem 0 1.5rem; }.audience-card { min-height: 190px; text-align: left; padding: 1.1rem; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }.audience-card:hover, .audience-card:focus-visible, .audience-card.is-selected { background: var(--ink); color: white; }.audience-card strong { font: 2rem/.9 'Barlow Condensed', sans-serif; }.audience-card span { color: var(--muted); font-size: .72rem; }.audience-card.is-selected span, .audience-card:hover span { color: #ffb0a7; }.audience__response { color: var(--muted); font-size: .85rem; }
.video { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }.video__box { min-height: 270px; background: var(--navy); color: white; display: grid; place-items: center; padding: 2rem; }.video__trigger { border: 0; background: transparent; color: white; cursor: pointer; display: grid; gap: .9rem; justify-items: center; font: 600 1rem Inter, sans-serif; }.video__play { display: grid; place-items: center; border: 1px solid #ffb0a7; width: 72px; height: 72px; border-radius: 50%; color: #ffb0a7; }.video__transcript { max-width: 480px; color: #e9eeee; }
.collaboration__quote { padding-top: 1rem; }.quote-mark { color: var(--coral); font: 7rem/.5 'Barlow Condensed'; }.collaboration__quote p { color: var(--ink); font: 2.5rem/.95 'Barlow Condensed', sans-serif; }.quote-signature { color: var(--muted); font-size: .75rem; }
.booking { display: grid; grid-template-columns: 1fr minmax(280px, .65fr); gap: 5rem; }.booking p { max-width: 520px; }.contact-form { background: var(--white); color: var(--ink); padding: 2rem; }.contact-form h3 { font-size: 2.5rem; }.contact-form fieldset{border:0;padding:0;margin:0}.contact-form fieldset:disabled{opacity:.68}.contact-form label { display: block; margin-top: 1rem; font-size: .72rem; font-weight: 700; }.contact-form label span { color: var(--coral); font-size: .6rem; letter-spacing: .1em; }.contact-form input, .contact-form textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: .7rem 0; font: .9rem Inter, sans-serif; }.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--coral); outline-offset: 3px; }.contact-form .button { margin-top: 1.5rem; }.booking__status, .form__status { font-size: .78rem; }.booking__status { color: #fff; }.form__status { color: var(--coral); }
.closing { text-align: center; }.closing h2 { margin-left: auto; margin-right: auto; }.closing .microcopy { margin-top: 2rem; }.footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem clamp(1.25rem, 7vw, 8rem); background: var(--ink); color: #d7e0e2; font-size: .65rem; letter-spacing: .08em; }.footer a{color:#fff;text-underline-offset:.18em}.footer__button{border:0;background:transparent;color:#fff;text-decoration:underline;text-underline-offset:.18em;cursor:pointer;font:inherit;padding:0}.button--ghost{background:transparent;color:var(--ink);border:1px solid currentColor}.consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:20;max-width:680px;margin:auto;background:var(--white);border:1px solid var(--line);box-shadow:0 18px 55px rgba(1,20,36,.18);padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.consent[hidden]{display:none}.consent p{margin:0;font-size:.78rem}.consent div{display:flex;gap:.5rem;flex-wrap:wrap}
@media (max-width: 900px) { .hero, .situation, .collaboration, .video, .booking { grid-template-columns: 1fr; }.hero { min-height: auto; }.planning-board { min-height: 420px; max-width: 600px; }.benefits__list { grid-template-columns: 1fr; }.benefit, .benefit + .benefit { padding: 1.5rem 0 2rem; border-bottom: 1px solid rgba(255,255,255,.24); }.audience__grid { grid-template-columns: repeat(2, 1fr); }.booking { gap: 2rem; } }
@media (max-width: 620px) { .rail { position: static; width: 100%; height: auto; writing-mode: horizontal-tb; flex-direction: row; align-items: center; padding: .9rem 1rem; }.rail__brand, .rail__marker, .rail__bottom { transform: none; font-size: .6rem; }.rail__marker { display: none; }.rail__bottom { margin-left: auto; }.topbar { flex-wrap: wrap; }.topbar__context { order: 3; flex-basis: 100%; }.topbar .button { display: none; } main { margin-left: 0; }.section-pad { padding: 3.5rem 1.25rem; } h1 { font-size: clamp(3.25rem, 16vw, 5.4rem); } h2 { font-size: clamp(2.8rem, 13vw, 4.5rem); }.hero__actions { align-items: flex-start; flex-direction: column; }.planning-board { min-height: 360px; }.process__grid { grid-template-columns: 1fr; }.process__item { border-right: 0; border-bottom: 1px solid var(--line); padding: 1.4rem 0; margin: 0; }.audience__grid { grid-template-columns: 1fr 1fr; }.audience-card { min-height: 150px; }.audience-card strong { font-size: 1.7rem; }.footer { flex-direction: column; } }