:root { --paper:#fbfbfc; --paper-bottom:#c8cbd9; --ink:#222220; --muted:#747471; --guide:#e8e8e4; --blue:#28a8d7; --coral:#f4694c; --vertical-shift:42px; --composition-split:28px; --content-scale:1; --panel-visual-width:560px; --topbar-lift:0px; }
* { box-sizing:border-box; }
html { overscroll-behavior-x:none; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:linear-gradient(180deg,var(--paper) 0%,#f6f6f9 32%,#e3e3ec 66%,var(--paper-bottom) 100%) fixed; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:24px; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--blue); outline-offset:5px; border-radius:2px; }

.fixed-frame { position:fixed; z-index:20; top:0; bottom:0; left:50%; width:min(1024px,calc(100% - 64px)); transform:translateX(-50%); pointer-events:none; }
.fixed-frame::before,.fixed-frame::after { display:none; }
.guide-frame { position:fixed; z-index:1; top:0; bottom:0; left:50%; width:min(1024px,calc(100% - 64px)); transform:translateX(-50%); overflow:visible; pointer-events:none; }
.guide-frame i { position:absolute; top:0; bottom:0; width:0; border-left:1px dotted var(--guide); }
.guide-frame i:nth-child(1) { left:calc(283px - (720px - var(--panel-visual-width))); }
.guide-frame i:nth-child(2) { left:283px; }
.guide-frame i:nth-child(3) { left:calc(283px + var(--panel-visual-width)); }
.guide-frame i:nth-child(4) { left:1003px; }
.side-rail { position:absolute; z-index:30; top:0; bottom:0; left:283px; width:180px; padding:calc(78px + var(--vertical-shift) - var(--composition-split) - var(--topbar-lift)) 0 40px; pointer-events:auto; }
.side-brand { height:20px; display:flex; align-items:center; transform:scale(var(--content-scale)); transform-origin:left center; }
.mark { width:31px; height:20px; display:flex; gap:2px; align-items:center; transform:rotate(-2deg); }
.mark i { width:8px; height:17px; display:block; background:var(--ink); border-radius:52% 48% 44% 56%; transform:rotate(13deg); }
.mark i:nth-child(2) { height:14px; transform:translateY(2px) rotate(-5deg); }
.mark i:nth-child(3) { height:16px; transform:rotate(8deg); }
.inline-nav { position:absolute; z-index:30; top:calc(122px + var(--vertical-shift) - var(--composition-split) - var(--topbar-lift)); left:283px; width:560px; display:flex; align-items:center; justify-content:space-between; pointer-events:auto; }
.nav-links { display:flex; align-items:center; gap:24px; transform:scale(var(--content-scale)); transform-origin:left center; }
.nav-links a { color:#999996; font-size:13px; line-height:20px; transition:color .18s ease; }
.nav-links a:hover { color:#585856; }
.nav-links a[aria-current="location"] { color:var(--ink); }
.nav-opportunity { display:flex; align-items:center; gap:6px; color:#999996; font-size:13px; line-height:20px; transform:scale(var(--content-scale)); transform-origin:right center; }
.nav-opportunity a { color:#5f5f5c; text-decoration:underline; text-underline-offset:3px; }

.horizontal-stage { position:relative; height:calc(var(--panel-count) * 160vh); }
.horizontal-viewport { position:sticky; z-index:2; top:0; width:100%; height:100vh; overflow-x:hidden; overflow-y:hidden; overscroll-behavior-x:none; scrollbar-width:none; touch-action:pan-y; }
.horizontal-viewport::-webkit-scrollbar { display:none; }
.horizontal-track { display:flex; width:max-content; height:100%; padding-inline:calc(50vw - 229px); }
.story-panel { flex:0 0 720px; width:720px; height:100vh; background:transparent; scroll-margin-top:0; }
.panel-inner { z-index:2; width:560px; height:100vh; margin:0; padding:calc(167px + var(--vertical-shift) + var(--composition-split)) 0 40px; display:flex; flex-direction:column; position:relative; opacity:var(--panel-focus,1); transform:scale(var(--content-scale)); transform-origin:top left; transition:opacity .24s ease-out; }
.section-label { margin:0 0 25px; color:#989895; font-size:13px; line-height:20px; }

.panel-about h1 { margin:0; font-size:44px; line-height:44px; font-weight:600; letter-spacing:-.043em; }
.headline-highlight { padding:0 .07em .02em; border-radius:9px 7px; background:linear-gradient(76deg,rgba(116,143,255,.42),rgba(116,143,255,.16) 7%,rgba(116,143,255,.27) 93%,rgba(116,143,255,.48)); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.panel-about h1 em { position:relative; font-style:normal; font-weight:600; white-space:nowrap; }
.panel-about h1 em::after { content:""; position:absolute; left:-2px; right:-3px; bottom:-7px; height:9px; border-top:3px solid var(--coral); border-radius:50%; transform:rotate(-1.2deg); }
.about-copy { width:456px; margin-top:30px; color:#535351; font-size:16px; line-height:24px; }
.about-copy p { margin:0 0 24px; }
.about-status { margin-top:15px; display:flex; align-items:center; justify-content:space-between; }
.availability,.scroll-cue { margin:0; color:#7f7f7c; font-size:13px; line-height:20px; }
.availability { display:flex; align-items:center; gap:9px; }
.availability i { width:7px; height:7px; border-radius:50%; background:#66b685; box-shadow:0 0 0 3px #edf8f0; animation:availability-pulse 1.8s ease-in-out infinite; }
.scroll-cue { color:#a0a09d; }
@keyframes availability-pulse { 0%,100%{opacity:.45;box-shadow:0 0 0 2px rgba(102,182,133,.12)} 50%{opacity:1;box-shadow:0 0 0 5px rgba(102,182,133,.2)} }

.panel-principles .belief-lead { max-width:520px; margin:0; font-size:28px; line-height:36px; letter-spacing:-.025em; }
.belief-list { margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.belief-list p { margin:0; color:var(--muted); font-size:14px; line-height:21px; }
.belief-list span { display:block; margin-bottom:16px; color:var(--ink); font-size:14px; line-height:21px; font-weight:500; }

.project-heading { display:flex; align-items:flex-start; justify-content:space-between; }
.project-heading .section-label { margin-bottom:0; }
.project-field { margin:0; color:#999996; font-size:13px; line-height:20px; }
.panel-project h2 { margin:11px 0 0; font-size:22px; line-height:28px; font-weight:600; letter-spacing:-.025em; }
.case-question { width:500px; margin:28px 0 0; font-size:19px; line-height:28px; letter-spacing:-.015em; }
.project-details { margin-top:22px; display:block; }
.case-copy { width:456px; margin:0; color:#5f5f5c; font-size:14px; line-height:22px; }
.project-details dl { margin:31px 0 0; display:grid; grid-template-columns:190px 1fr; gap:30px; }
.project-details dl div { margin:0; }
.project-details dt { margin:0 0 7px; color:#999996; font-size:13px; line-height:19px; }
.project-details dd { margin:0; color:#555552; font-size:13px; line-height:21px; }

.section-heading h2,.panel-profile h2,.panel-contact h2 { margin:0; font-size:32px; line-height:37px; font-weight:600; letter-spacing:-.035em; }
.section-heading>p { max-width:440px; margin:17px 0 0; color:var(--muted); font-size:14px; line-height:22px; }
.rhythm-list { margin-top:61px; display:grid; gap:35px; }
.rhythm-list article { display:grid; grid-template-columns:42px 1fr; gap:8px; }
.rhythm-list article>span { color:#a2a29f; font-size:12px; line-height:20px; }
.rhythm-list h3 { margin:0 0 7px; font-size:16px; line-height:22px; font-weight:500; }
.rhythm-list p { width:440px; margin:0; color:var(--muted); font-size:14px; line-height:21px; }
blockquote { width:456px; margin:86px 0 0 42px; }
blockquote p { margin:0; font-size:24px; line-height:34px; letter-spacing:-.025em; }
blockquote::before { content:"“"; display:block; height:28px; color:var(--blue); font-size:34px; line-height:28px; }
.panel-process .rhythm-list { margin-top:48px; gap:28px; }
.panel-process blockquote { margin-top:58px; }

.profile-copy { width:456px; margin-top:31px; color:#555552; font-size:16px; line-height:24px; }
.profile-copy p { margin:0 0 24px; }
.notes { margin-top:51px; display:grid; grid-template-columns:1fr 1fr; gap:35px; }
.notes p { margin:0; color:var(--muted); font-size:13px; line-height:21px; }
.notes span { display:block; margin-bottom:9px; color:var(--ink); font-size:13px; line-height:21px; font-weight:500; }

.contact-intro { width:456px; margin:21px 0 0; color:var(--muted); font-size:14px; line-height:22px; }
.email { width:max-content; display:inline-block; margin-top:27px; font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.footer-meta { margin-top:126px; display:flex; justify-content:space-between; color:#a0a09d; font-size:11px; line-height:18px; }
.footer-meta a { color:#6e6e6b; }

@media (max-width:1088px) and (min-width:901px) {
  .horizontal-track { padding-inline:315px; }
}

@media (min-width:1441px) and (max-width:1919px) {
  :root { --content-scale:.9; --topbar-lift:8px; }
  .panel-inner { width:622px; }
}

@media (min-width:1200px) and (max-width:1440px) {
  :root { --content-scale:.8; --topbar-lift:16px; }
  .panel-inner { width:700px; }
}

@media (min-width:901px) and (max-width:1199px) {
  :root { --content-scale:.7; --panel-visual-width:504px; --topbar-lift:24px; }
  .panel-inner { width:720px; }
}

@media (min-width:1920px) and (max-height:1150px) {
  :root { --content-scale:.9; --topbar-lift:8px; }
  .panel-inner { width:622px; }
}

@media (min-width:1680px) and (max-height:900px) {
  :root { --content-scale:.86; --topbar-lift:12px; }
  .panel-inner { width:651px; }
}

@media (min-width:1441px) and (max-width:1679px) and (max-height:760px) {
  :root { --content-scale:.8; --topbar-lift:18px; }
  .panel-inner { width:700px; }
}

@media (min-width:1200px) and (max-width:1440px) and (max-height:760px) {
  :root { --content-scale:.7; --panel-visual-width:504px; --topbar-lift:26px; }
  .panel-inner { width:720px; }
}

@media (min-width:901px) and (max-width:1199px) and (max-height:760px) {
  :root { --content-scale:.62; --panel-visual-width:446px; --topbar-lift:32px; }
  .panel-inner { width:720px; }
}

@media (max-height:900px) and (min-width:901px) {
  :root { --vertical-shift:24px; --composition-split:20px; }
  .panel-process .section-label { margin-bottom:16px; }
  .panel-process .rhythm-list { margin-top:34px; gap:16px; }
  .panel-process blockquote { margin-top:32px; }
  .panel-process blockquote p { font-size:21px; line-height:28px; }
}

@media (max-width:900px) {
  .fixed-frame { top:0; bottom:auto; left:0; width:100%; height:64px; transform:none; border:0; background:rgba(251,251,252,.88); backdrop-filter:blur(14px); }
  .fixed-frame::before,.fixed-frame::after,.guide-frame,.side-rail { display:none; }
  .inline-nav { top:0; left:16px; right:16px; width:auto; height:64px; overflow-x:auto; scrollbar-width:none; }
  .inline-nav::-webkit-scrollbar { display:none; }
  .nav-links { gap:18px; }
  .nav-links a { flex:none; font-size:13px; }
  .nav-opportunity { display:none; }
  .horizontal-stage { height:auto !important; }
  .horizontal-viewport { position:relative; height:auto; overflow:visible; }
  .horizontal-track { display:block; width:auto; height:auto; padding-left:0; transform:none !important; }
  .story-panel { width:auto; height:auto; min-height:100svh; padding:0 28px; border:0; scroll-margin-top:64px; }
  .panel-inner { width:auto; height:auto; min-height:100svh; margin-left:0; padding:104px 0 72px; opacity:1 !important; }
  .section-label { margin-bottom:24px; }
  .panel-about h1 { font-size:39px; line-height:42px; }
  .panel-about h1 em { white-space:normal; }
  .about-copy,.profile-copy { width:auto; margin-top:54px; }
  .about-status { margin-top:45px; align-items:flex-start; gap:20px; flex-direction:column; }
  .panel-principles .belief-lead { font-size:31px; line-height:38px; }
  .belief-list { margin-top:62px; grid-template-columns:1fr; gap:28px; }
  .belief-list span { margin-bottom:5px; }
  .project-heading { gap:30px; }
  .case-question,.case-copy,.rhythm-list p,.contact-intro,blockquote { width:auto; }
  .case-question { margin-top:32px; font-size:31px; line-height:38px; }
  .project-details { margin-top:64px; grid-template-columns:1fr; gap:34px; }
  .project-details dl { grid-template-columns:1fr; gap:24px; }
  .section-heading h2,.panel-profile h2 { font-size:34px; line-height:40px; }
  .rhythm-list { margin-top:52px; grid-template-columns:1fr; gap:28px; }
  blockquote { margin:60px 0 0 36px; }
  blockquote p { font-size:22px; line-height:31px; }
  .notes { margin-top:58px; grid-template-columns:1fr; gap:30px; }
  .panel-contact h2 { font-size:43px; line-height:48px; }
  .footer-meta { margin-top:90px; flex-wrap:wrap; gap:16px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .nav-links a { transition:none; }
  .availability i { animation:none; }
  .panel-inner { opacity:1 !important; transition:none; }
  .guide-frame { display:none; }
  .horizontal-stage { height:auto !important; }
  .horizontal-viewport { position:relative; height:auto; overflow:visible; }
  .horizontal-track { display:block; width:auto; height:auto; transform:none !important; }
  .story-panel { width:auto; height:auto; min-height:100vh; }
}