@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf") format("truetype"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500 700; font-display:swap; src:url("https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg.ttf") format("truetype"); }
:root { --ink:#111414; --muted:#646968; --line:#d6d9d8; --paper:#f5f6f3; --white:#fff; --acid:#b7ff60; --gutter:clamp(22px,4vw,64px); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; overflow-x:clip; } body { margin:0; overflow-x:clip; background:var(--paper); color:var(--ink); font-family:Inter,Arial,sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; } a { color:inherit; } img { display:block; width:100%; }
.site-header { position:relative; z-index:10; width:100%; padding:18px var(--gutter); background:var(--paper); font-size:14px; }
.wordmark { font-weight:600; text-decoration:none; }
.section-nav { position:fixed; z-index:30; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translate(-50%,calc(100% + 24px)); display:flex; width:max-content; max-width:calc(100vw - 28px); padding:4px; border:1px solid var(--line); border-radius:999px; background:#fff; box-shadow:0 8px 24px rgba(17,20,20,.1); font-size:13px; font-weight:500; opacity:0; visibility:hidden; pointer-events:none; transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .55s ease,visibility 0s linear .75s; }
.section-nav.is-visible { transform:translate(-50%,0); opacity:1; visibility:visible; pointer-events:auto; transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .55s ease,visibility 0s; }
.section-nav::before { content:""; position:absolute; top:4px; bottom:4px; left:var(--indicator-left,4px); width:var(--indicator-width,0px); border-radius:999px; background:#f5f6f3; transition:left .7s cubic-bezier(.22,1,.36,1),width .7s cubic-bezier(.22,1,.36,1); pointer-events:none; }
.section-nav a { position:relative; z-index:1; flex:none; padding:10px clamp(5px,1.8vw,18px); border-radius:999px; color:#646968; text-align:center; text-decoration:none; white-space:nowrap; }
.section-nav a[aria-current="location"] { color:#101414; }
.section-nav a:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.hero { min-height:calc(92vh - 58px); display:flex; flex-direction:column; justify-content:space-between; padding:clamp(90px,14vh,160px) var(--gutter) 64px; }
.kicker,.chapter-index,figcaption,.mobile-study-note span { font-size:13px; letter-spacing:.03em; text-transform:uppercase; }
h1 { max-width:983px; margin:0 0 clamp(70px,10vh,110px); font-size:clamp(58px,8.4vw,132px); font-weight:500; letter-spacing:-.075em; line-height:.9; }
.hero-summary { max-width:670px; margin:0; font-size:clamp(20px,2vw,30px); line-height:1.25; letter-spacing:-.03em; }
.hero-shot,.product-shot { margin:0; padding:clamp(16px,3vw,42px); } .hero-shot { background:#fff; } .product-shot { background:#181c1d; } .hero-shot img { border:1px solid var(--line); } .product-shot img { border:1px solid #333838; }
figcaption { display:flex; justify-content:space-between; gap:24px; color:#c5c9c7; margin-top:16px; } figcaption span { color:var(--acid); }
.chapter { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,790px) minmax(0,1fr); gap:5vw; padding:clamp(100px,14vw,210px) var(--gutter); }
.chapter-index { color:var(--muted); } .chapter-copy { max-width:790px; } .kicker { margin:0 0 24px; color:var(--muted); }
h2 { margin:0 0 40px; font-size:clamp(40px,5.4vw,82px); font-weight:500; letter-spacing:-.065em; line-height:.98; }
.chapter-copy p { max-width:680px; } .chapter-copy .lead { font-size:clamp(21px,2vw,29px); line-height:1.28; letter-spacing:-.03em; } .chapter-copy p:last-of-type { color:#4e5453; }
.stat-stack { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:56px; } .stat-stack div { padding:24px 0; border-top:1px solid var(--line); } .stat-stack strong { display:block; font-size:clamp(56px,6vw,96px); font-weight:500; letter-spacing:-.07em; line-height:.9; } .stat-stack span { display:block; max-width:190px; margin-top:12px; color:var(--muted); font-size:14px; }
.mobile-study { padding:clamp(80px,8vw,140px) var(--gutter); background:var(--white); }
.mobile-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,30px); align-items:start; }
.mobile-gallery img { width:100%; height:auto; border:1px solid #2c3030; background:#1d2122; }
.mobile-study-note { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,30px); align-items:start; margin-bottom:clamp(32px,4vw,64px); padding-top:20px; border-top:1px solid var(--line); }
.mobile-study-note span { display:block; color:var(--muted); }
.mobile-study-note p { grid-column:2 / 4; max-width:860px; margin:0; font-size:clamp(20px,2.1vw,30px); line-height:1.3; letter-spacing:-.035em; }
.system-label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.visual-system { background:#e9ebe7; }
.system-grid { grid-column:1/-1; justify-self:center; width:min(100%,calc(50% + 395px)); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:34px; background:#cbd0cb; border:1px solid #cbd0cb; }
.system-card { min-width:0; min-height:540px; display:flex; flex-direction:column; padding:22px; background:#f5f6f3; }
.system-card h3 { margin:auto 0 12px; font-size:clamp(24px,2.2vw,34px); font-weight:500; letter-spacing:-.05em; line-height:1.05; }
.system-card p { min-height:124px; margin:0; color:var(--muted); font-size:14px; line-height:1.45; }
.type-sample { display:flex; justify-content:space-between; align-items:baseline; margin:56px 0 42px; font-size:clamp(100px,13vw,190px); font-weight:500; letter-spacing:-.09em; line-height:.8; }
.type-sample span { font-size:.36em; letter-spacing:-.07em; }
.mini-orbit { position:relative; margin:48px 0; aspect-ratio:1.5; }
.mini-orbit i { position:absolute; left:var(--ring-x); top:var(--ring-y); width:10%; aspect-ratio:.68; border:1px solid #7c827d; background:#fff; transform:translate(-50%,-50%); animation:spot-layout 8s ease-in-out infinite; }
.mini-orbit i:nth-child(1) { --ring-x:50%; --ring-y:16%; --grid-x:15%; --grid-y:20%; background:#111414; border-color:#111414; }
.mini-orbit i:nth-child(2) { --ring-x:70%; --ring-y:20%; --grid-x:38%; --grid-y:20%; }
.mini-orbit i:nth-child(3) { --ring-x:85%; --ring-y:30%; --grid-x:62%; --grid-y:20%; }
.mini-orbit i:nth-child(4) { --ring-x:91%; --ring-y:50%; --grid-x:85%; --grid-y:20%; }
.mini-orbit i:nth-child(5) { --ring-x:85%; --ring-y:70%; --grid-x:15%; --grid-y:50%; }
.mini-orbit i:nth-child(6) { --ring-x:70%; --ring-y:80%; --grid-x:38%; --grid-y:50%; }
.mini-orbit i:nth-child(7) { --ring-x:50%; --ring-y:84%; --grid-x:62%; --grid-y:50%; background:#111414; border-color:#111414; }
.mini-orbit i:nth-child(8) { --ring-x:30%; --ring-y:80%; --grid-x:85%; --grid-y:50%; }
.mini-orbit i:nth-child(9) { --ring-x:15%; --ring-y:70%; --grid-x:15%; --grid-y:80%; }
.mini-orbit i:nth-child(10) { --ring-x:9%; --ring-y:50%; --grid-x:38%; --grid-y:80%; }
.mini-orbit i:nth-child(11) { --ring-x:15%; --ring-y:30%; --grid-x:62%; --grid-y:80%; }
.mini-orbit i:nth-child(12) { --ring-x:30%; --ring-y:20%; --grid-x:85%; --grid-y:80%; }
@keyframes spot-layout { 0%,18%,82%,100% { left:var(--ring-x); top:var(--ring-y); } 43%,57% { left:var(--grid-x); top:var(--grid-y); } }
.color-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:48px 0; aspect-ratio:1.5; }
.color-pair i { display:block; border:1px solid #9da49e; background:#fff; }
.color-pair i:last-child { background:#111414; border-color:#111414; }
.product-shot { padding-top:6vw; padding-bottom:4vw; } .decision { background:#e7e9e5; }
.motion-study { background:#fff; }
.motion-study .chapter-copy .lead { color:var(--ink); }
.motion-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:24px; background:var(--line); border:1px solid var(--line); }
.motion-card { min-width:0; margin:0; background:#fff; }
.motion-capture { width:100%; aspect-ratio:1440/740; object-fit:cover; background:#171b1c; }
.motion-card figcaption { display:block; min-height:128px; margin:0; padding:20px; color:var(--ink); background:#fff; border-top:1px solid var(--line); text-transform:none; }
.motion-card figcaption span { display:block; margin-bottom:8px; color:var(--ink); font-size:14px; font-weight:600; text-transform:none; }
.motion-card figcaption p { max-width:520px; margin:0; color:var(--muted); font-size:14px; line-height:1.45; letter-spacing:0; text-transform:none; }
.tradeoff { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:14px; margin-top:clamp(100px,10vw,180px); } .tradeoff div:not(.arrow) { min-height:140px; padding:18px; border:1px solid #afb4b1; display:flex; flex-direction:column; justify-content:space-between; } .tradeoff span { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; } .tradeoff strong { font-size:18px; font-weight:500; line-height:1.15; } .arrow { color:var(--muted); }
.outcome { min-height:85vh; background:var(--ink); color:#f4f5f2; border:0; } .outcome .chapter-index,.outcome .kicker { color:#929896; } .outcome .chapter-copy > .lead,.outcome .outcome-primary { color:#f4f5f2; } .outcome .outcome-secondary { color:#929896; } .inline-link { text-underline-offset:4px; } .visit { display:inline-block; margin-top:56px; padding-bottom:2px; border-bottom:1px solid currentColor; font-size:22px; line-height:1.2; text-decoration:none; }
.outcome-paragraphs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; margin-top:36px; }
.outcome-paragraphs p { max-width:none; margin:0; }
.supporters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:48px; }
.supporter { display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:160px; padding:18px; border:1px solid #464b49; text-decoration:none; }
.supporter-label { color:#929896; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
.supporter-name { display:flex; align-items:center; gap:10px; margin-top:22px; font-size:22px; line-height:1.1; }
.supporter-icon { flex:none; width:26px; height:26px; border-radius:5px; background:#fff; object-fit:contain; }
.supporter-name > span { text-underline-offset:3px; }
.supporter:hover .supporter-name > span,.supporter:focus-visible .supporter-name > span { text-decoration:underline; }
.supporter:focus-visible { outline:2px solid #f4f5f2; outline-offset:2px; }
.supporter strong { margin-top:auto; padding-top:18px; color:#c5c9c7; font-size:14px; font-weight:500; }
footer { display:flex; justify-content:space-between; padding:80px var(--gutter) calc(33px + env(safe-area-inset-bottom)); background:var(--ink); color:#929896; font-size:13px; } footer p { margin:0; } footer a { color:#f4f5f2; text-decoration:none; }
@media(max-width:900px){ .hero{min-height:auto;padding-bottom:80px}.chapter{grid-template-columns:1fr;gap:34px}.chapter-index{padding-bottom:12px}.system-grid{grid-column:auto;width:100%}.tradeoff{margin-top:68px}.system-grid{grid-template-columns:1fr 1fr}.system-card:last-child{grid-column:1/-1}.system-card{min-height:460px}footer{padding:26px var(--gutter) 88px} }
@media(max-width:620px){ .site-header{padding-top:14px;padding-bottom:14px}.section-nav{font-size:clamp(10px,2.8vw,12px)}.hero>*{min-width:0;width:100%;max-width:100%}h1{font-size:clamp(44px,11.5vw,54px);letter-spacing:-.06em}.hero{padding-top:90px}.hero-summary{font-size:18px;overflow-wrap:break-word}.hero-shot,.product-shot{padding:10px}figcaption{padding:4px 2px 10px;font-size:11px}.stat-stack{gap:12px}.stat-stack strong{font-size:clamp(40px,11vw,68px)}.stat-stack span{font-size:12px}.system-grid{grid-template-columns:1fr}.system-card,.system-card:last-child{grid-column:auto;min-height:470px}.motion-grid{grid-template-columns:1fr}.motion-card:last-child{grid-column:auto}.motion-card figcaption{min-height:0}.tradeoff{grid-template-columns:1fr}.tradeoff .arrow{transform:rotate(90deg);width:fit-content;margin:0 auto}.outcome-paragraphs{grid-template-columns:1fr;gap:24px}.supporters{grid-template-columns:1fr}.supporter{min-height:120px}footer{align-items:flex-end;gap:24px} }
@media(max-width:620px){ .mobile-study{padding:70px 0}.mobile-gallery{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 16px;scrollbar-width:thin}.mobile-gallery img{flex:0 0 min(72vw,320px);width:min(72vw,320px);scroll-snap-align:start}.mobile-study-note{display:block;margin:0 var(--gutter) 32px}.mobile-study-note p{margin-top:18px;font-size:20px} }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.section-nav,.section-nav.is-visible,.section-nav::before{transition:none}.mini-orbit i{animation:none}}

/* Tur3D case study additions. The page shares Spots' type scale, chapter grid and galleries. */
.hero { min-height:calc(92vh - 58px); justify-content:flex-end; gap:36px; }
.hero-eyebrow { margin:0; color:var(--muted); font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.hero h1 { max-width:1140px; margin:0; }
.typing-word { position:relative; display:inline-block; padding-right:.09em; white-space:nowrap; vertical-align:baseline; }
.typing-reserve { visibility:hidden; }
.typing-visible { position:absolute; top:0; left:0; white-space:nowrap; }
.typing-cursor { display:inline-block; width:.055em; height:.78em; margin-left:.035em; background:currentColor; vertical-align:-.06em; animation:typing-cursor-blink .6s steps(1,end) infinite; }
@keyframes typing-cursor-blink { 50% { opacity:0; } }
.hero-summary { max-width:850px; margin-top:14px; }
.shot-caption { margin:0; padding:14px 2px 0; color:var(--muted); text-transform:none; }
.shot-caption span { color:var(--ink); }
.shot-caption p { margin:0; }
.journey { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:72px; }
.journey div { min-height:155px; display:flex; flex-direction:column; justify-content:space-between; padding:16px; border:1px solid var(--line); }
.journey span,.prompt-steps span { color:var(--muted); font-size:12px; }
.journey strong { max-width:160px; font-size:18px; font-weight:500; line-height:1.16; letter-spacing:-.03em; }
.functional-study { background:#fff; }
.evidence-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:38px; }
.evidence-grid figure { min-width:0; margin:0; background:#f5f6f3; }
.evidence-grid figure:first-child { grid-column:1/-1; }
.evidence-grid img { border:1px solid var(--line); }
.evidence-grid figcaption,.seo-shot figcaption,.language-panel figcaption { display:block; min-height:100px; margin:0; padding:20px; color:var(--muted); font-size:14px; letter-spacing:0; line-height:1.4; text-transform:none; }
.evidence-grid figcaption span,.seo-shot figcaption span,.language-panel figcaption span { display:block; margin-bottom:6px; color:var(--ink); font-weight:600; text-transform:none; }
.evidence-grid figcaption p,.seo-shot figcaption p,.language-panel figcaption p { margin:0; }
.mobile-gallery { grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }
.mobile-gallery img { border:1px solid var(--line); border-radius:12px; background:#fff; }
.languages-study { background:#e9ebe7; }
.language-panel { grid-column:2; display:grid; grid-template-columns:1fr minmax(180px,250px); gap:24px; width:100%; margin-top:20px; }
.language-list { border-top:1px solid #cbd0cb; }
.language-list div { display:grid; grid-template-columns:110px 1fr; gap:8px 22px; padding:22px 0; border-bottom:1px solid #cbd0cb; }
.language-list span { color:var(--muted); font-size:12px; text-transform:uppercase; }
.language-list strong { font-size:clamp(26px,3vw,44px); font-weight:500; line-height:1; letter-spacing:-.055em; }
.language-list p { grid-column:2; margin:0; color:var(--muted); font-size:14px; }
.language-panel figure { margin:0; background:#fff; }
.language-panel img { width:100%; border:1px solid var(--line); }
.seo-study { background:#fff; }
.seo-shot { grid-column:1/-1; justify-self:center; width:min(100%,1280px); margin:32px 0 0; background:var(--paper); }
.seo-shot img { border:1px solid var(--line); }
.prompt-study { background:#e7e9e5; }
.prompt-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:60px; border:1px solid #cbd0cb; background:#cbd0cb; }
.prompt-steps div { min-height:165px; display:flex; flex-direction:column; padding:20px; background:var(--paper); }
.prompt-steps strong { margin-top:20px; font-size:19px; font-weight:500; letter-spacing:-.035em; }
.prompt-steps p { margin:8px 0 0; color:var(--muted); font-size:14px; }
.prompt-box { margin-top:72px; border:1px solid #b8bdb8; background:#fff; }
.prompt-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:25px 25px 22px; border-bottom:1px solid var(--line); }
.prompt-heading .kicker { margin:0 0 14px; }
.prompt-heading h3 { margin:0; font-size:clamp(24px,3vw,36px); font-weight:500; letter-spacing:-.05em; line-height:1.1; }
#copy-prompt { flex:none; min-width:118px; padding:12px 16px; border:1px solid var(--ink); border-radius:999px; background:var(--ink); color:#fff; font:inherit; font-size:13px; cursor:pointer; }
#copy-prompt:hover,#copy-prompt:focus-visible { background:#37403b; }
#copy-prompt:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.prompt-box pre { margin:0; padding:25px; white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.6 Inter,Arial,sans-serif; }
.prompt-disclaimer { margin:0; padding:18px 25px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.outcome .chapter-copy p:last-of-type { color:#aeb5b0; }
@media(max-width:900px){.language-panel{grid-column:auto}.mobile-gallery{gap:10px}.journey{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.hero{min-height:auto;gap:28px;padding-top:110px;padding-bottom:80px}.hero h1{font-size:clamp(48px,11.4vw,70px)}.hero-summary{margin-top:0}.shot-caption{display:block}.shot-caption p{margin-top:5px}.journey{margin-top:46px}.journey div{min-height:120px}.evidence-grid{grid-template-columns:1fr;gap:12px}.evidence-grid figure:first-child{grid-column:auto}.evidence-grid figcaption{min-height:0}.mobile-gallery{gap:12px}.mobile-gallery img{flex-basis:min(72vw,310px);width:min(72vw,310px);border-radius:12px}.language-panel{grid-template-columns:1fr}.language-panel figure{width:100%}.prompt-steps{grid-template-columns:1fr}.prompt-steps div{min-height:140px}.prompt-heading{display:block;padding:20px}.prompt-heading h3{margin-bottom:22px}.prompt-box pre{padding:20px}.prompt-disclaimer{padding:16px 20px}.section-nav a{padding-left:clamp(5px,1.6vw,10px);padding-right:clamp(5px,1.6vw,10px)}}
@media(prefers-reduced-motion:reduce){.typing-cursor{display:none}}
@media(max-width:620px){
  .section-nav{width:calc(100vw - 28px);max-width:none;gap:2px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;font-size:14px}
  .section-nav::-webkit-scrollbar{display:none}
  .section-nav::before{display:none}
  .section-nav a{padding:11px 16px}
  .section-nav a[aria-current="location"]{background:var(--paper)}
}