:root {
  color-scheme: light;
  --ink:#0f1012;
  --paper:#fdfdfd;
  --canvas:#f2f2f4;
  --muted:#5e5e5e;
  --blue:#0071e3;
  --link:#0066cc;
  --edge:rgba(15,16,18,.10);
  --sans:Inter,"Segoe UI Variable",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --measure:1200px;
  --frame:clamp(20px,5.4vw,74px);
  --gap:clamp(68px,8vw,112px);
  --radius:54px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
}
@view-transition { navigation:auto; }
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:350 16px/1.55 var(--sans); letter-spacing:-.02em; }
body:has(dialog[open]) { overflow:hidden; }
a { color:inherit; text-decoration:none; text-underline-offset:4px; }
img { max-width:100%; display:block; }
figure,h1,h2,h3,p { margin:0; }
p { max-width:58ch; }
button,input { font:inherit; color:inherit; }
button,summary { cursor:pointer; }
h1,h2,h3 { font-weight:350; line-height:1.04; letter-spacing:-.062em; }
h1 { font-size:clamp(56px,7.2vw,108px); }
h2 { font-size:clamp(36px,5vw,69px); }
h3 { font-size:clamp(23px,2.7vw,34px); letter-spacing:-.042em; }
i { font-style:normal; }
:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
section[id] { scroll-margin-top:96px; }
.container { width:min(calc(100% - 2 * var(--frame)),var(--measure)); margin-inline:auto; }
.meta { color:var(--muted); font-size:13px; line-height:1.25; letter-spacing:-.01em; }
.lede { font-size:clamp(17px,1.65vw,22px); color:var(--muted); line-height:1.38; max-width:34ch; }
.button,.text-link { display:inline-flex; align-items:center; justify-content:center; gap:12px; width:fit-content; min-height:44px; }
.button { border:1px solid transparent; border-radius:999px; background:#0f101209; color:var(--ink); padding:11px 19px; font-weight:400; line-height:1.25; transition:background .18s var(--ease-out),border-color .18s var(--ease-out),transform .15s var(--ease-out); }
.button:active { transform:scale(.98); }
.button .arrow,.text-link .arrow,.out-arrow { color:var(--link); flex:none; }
.arrow { width:19px; height:19px; line-height:19px; text-align:center; transition:transform .19s var(--ease-out); }
.out-arrow { font-size:19px; }
.text-link { color:var(--link); }
.skip { position:fixed; z-index:20; top:12px; left:12px; background:var(--paper); padding:8px 14px; border-radius:20px; transform:translateY(-160%); }
.skip:focus { transform:none; }

.header { position:sticky; top:13px; z-index:6; height:68px; padding-top:12px; }
.header-inner { position:relative; width:min(calc(100% - 2 * var(--frame)),1030px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; min-height:55px; padding:3px 12px 3px 16px; border:1px solid var(--edge); border-radius:13px; background:rgba(253,253,253,.91); backdrop-filter:blur(15px); }
.wordmark { display:inline-flex; align-items:center; gap:10px; width:fit-content; font-size:20px; letter-spacing:-.055em; font-weight:400; white-space:nowrap; }
.signal-mark { width:19px; height:19px; flex:none; }
.desktop-nav,.footer nav { display:flex; align-items:center; gap:clamp(15px,2.4vw,34px); }
.desktop-nav a,.footer nav a { display:inline-flex; align-items:center; min-height:42px; white-space:nowrap; }
.desktop-nav a[aria-current] { color:var(--link); }
.header-action { justify-self:end; min-height:39px; padding:7px 13px; font-size:14px; background:transparent; border-color:var(--edge); }
.header-action .arrow { width:16px; height:16px; }
.mobile-nav { display:none; }

.hero { position:relative; isolation:isolate; overflow:clip; background:var(--paper); }
.hero-frame { position:relative; display:grid; grid-template-rows:1fr auto; min-height:clamp(615px,83svh,840px); pointer-events:none; }
.hero-copy { align-self:end; position:relative; z-index:2; max-width:660px; padding-top:106px; padding-bottom:clamp(35px,6vh,73px); pointer-events:auto; }
.hero-copy h1 { font-size:clamp(54px,6vw,96px); text-wrap:nowrap; }
.hero .lede { margin-block:24px 22px; }
.hero-copy .button { min-height:51px; border-color:rgba(0,113,227,.38); background:rgba(253,253,253,.76); }
.location-chip { display:inline-flex; align-items:center; min-height:28px; margin-bottom:23px; padding:3px 12px; border:1px solid var(--blue); border-radius:999px; color:var(--link); background:var(--paper); font-size:13px; }
.hero-visual { position:absolute; inset:0 max(0px,calc((100% - 1470px)/2)) 0 8%; pointer-events:none; }
.hero-render { position:absolute; inset:0; transform:translate3d(var(--look-x,0px),var(--look-y,0px),0); transition:transform .65s var(--ease-out); }
.hero-depth { width:100%; height:100%; }
.hero-render img { width:100%; height:100%; object-fit:contain; object-position:right center; mix-blend-mode:multiply; }
.signal-orbit { position:absolute; width:min(42vw,520px); right:6%; top:10%; opacity:.72; }
.orbit-marker { transform-origin:270px 270px; }
.hero-caption { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:59px; padding-block:10px; color:var(--muted); font-size:13px; }
.hero-caption > span { padding:2px 5px; background:var(--paper); }
.scroll-note { display:inline-flex; gap:8px; align-items:center; min-height:36px; pointer-events:auto; }
.scroll-note span { color:var(--link); }
.consultation-strip { background:var(--canvas); }
.consultation-strip .container { display:flex; justify-content:space-between; align-items:center; gap:16px 28px; padding-block:20px; min-height:82px; }
.consultation-strip p { color:var(--muted); }

.directions { display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(34px,8vw,118px); padding-block:var(--gap); }
.direction-list { display:grid; gap:20px; }
.direction { display:grid; grid-template-columns:.7fr 1fr; gap:22px; align-items:baseline; padding-block:20px; border-top:1px solid var(--edge); }
.direction p,.process p,.journal-heading > p,.journal-list p,.about p,.faq-item p,.guide-details p,.guide-note p { color:var(--muted); }

.studio-wrap { margin-bottom:var(--gap); }
.studio-intro { display:grid; grid-template-columns:.28fr 1fr .67fr; align-items:end; gap:22px; margin-bottom:31px; }
.studio-intro .meta { align-self:start; padding-top:6px; }
.studio-intro p:not(.meta) { color:var(--muted); }
.studio { display:grid; grid-template-columns:1.18fr .82fr; align-items:center; gap:clamp(24px,4.5vw,60px); border:1px solid var(--edge); border-radius:var(--radius); background:var(--canvas); padding:clamp(24px,4.4vw,63px); }
.studio-visual { position:relative; color:var(--muted); font-size:13px; min-width:0; }
.studio-visual > span { display:block; margin-top:8px; }
.relief { width:100%; height:auto; display:block; background:var(--paper); border-radius:19px; }
.relief-state { opacity:0; transform:translateY(10px) scaleY(.94); transform-origin:center; transition:opacity .32s var(--ease-out),transform .44s var(--ease-out); }
[data-scene="0"] .relief-state-a,[data-scene="1"] .relief-state-b,[data-scene="2"] .relief-state-c { opacity:1; transform:none; }
.signal-path { stroke-dasharray:820; stroke-dashoffset:820; transition:stroke-dashoffset .65s var(--ease-out); }
[data-scene="0"] .relief-state-a .signal-path,[data-scene="1"] .relief-state-b .signal-path,[data-scene="2"] .relief-state-c .signal-path { stroke-dashoffset:0; }
.studio-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:19px; }
.studio-tabs button,.city-choice span { display:inline-flex; align-items:center; border:1px solid var(--edge); border-radius:999px; background:transparent; color:var(--muted); padding:7px 12px; min-height:42px; font-size:14px; transition:color .18s,border-color .18s,background .18s; }
.studio-tabs button[aria-selected="true"],.city-choice input:checked + span { border-color:var(--blue); color:var(--link); background:var(--paper); }
.studio-panel { min-height:168px; }
.studio-panel p { margin-top:12px; color:var(--muted); }

.process { background:var(--canvas); padding-block:var(--gap); }
.process-copy { display:grid; grid-template-columns:.75fr 1.25fr; column-gap:clamp(30px,7vw,103px); align-items:start; }
.process-copy .steps { grid-column:2; grid-row:1 / span 2; margin:0; }
.process-copy .text-link { grid-column:1; align-self:end; margin-top:16px; }
.steps { list-style:none; counter-reset:step; margin:0; padding:0; }
.steps li { display:grid; grid-template-columns:38px 1fr; gap:5px 13px; align-items:baseline; counter-increment:step; padding:15px 0; border-top:1px solid var(--edge); }
.steps li::before { grid-row:span 2; color:var(--link); content:counter(step,decimal-leading-zero); font-size:13px; }
.steps h3 { font-size:clamp(21px,2.2vw,29px); }
.steps p { grid-column:2; }

.journal { padding-block:var(--gap); }
.journal-heading,.guide-note { display:grid; grid-template-columns:1fr .67fr; gap:26px; align-items:end; }
.journal-grid { margin-top:30px; }
.journal-list { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.journal-list a { display:flex; align-items:flex-start; justify-content:space-between; gap:11px; min-height:205px; border:1px solid var(--edge); border-radius:32px; padding:clamp(20px,3vw,33px); background:var(--paper); transition:background .18s var(--ease-out),border-color .18s var(--ease-out); }
.journal-list h3 { margin-block:14px 9px; font-size:clamp(22px,2.35vw,32px); }
.journal-list .out-arrow { align-self:end; }
.about { padding-block:clamp(43px,6vw,84px); background:var(--canvas); }
.about-grid { display:grid; grid-template-columns:minmax(110px,205px) 1fr; align-items:center; gap:clamp(23px,6.4vw,94px); max-width:900px; }
.profile-photo img { width:100%; aspect-ratio:1; height:auto; object-fit:cover; border-radius:35px; }
.profile-photo figcaption { margin-top:8px; font-size:13px; color:var(--muted); }
.about p { margin-block:15px 5px; }

.faq { display:grid; grid-template-columns:.73fr 1.27fr; gap:clamp(28px,6vw,82px); padding-block:var(--gap); }
.faq-item { border-top:1px solid var(--edge); }
.faq-item:last-child { border-bottom:1px solid var(--edge); }
summary::-webkit-details-marker { display:none; }
.faq-item summary { min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 4px 12px 0; list-style:none; font-size:18px; }
.faq-item summary span { position:relative; width:19px; height:19px; flex:none; color:var(--link); }
.faq-item summary span::before,.faq-item summary span::after { content:""; width:15px; height:1px; position:absolute; top:9px; left:2px; background:currentColor; transition:transform .19s var(--ease-out); }
.faq-item summary span::after { transform:rotate(90deg); }
.faq-item[open] summary span::after { transform:none; }
.faq-item p { padding:0 22px 18px 0; }

.contact { background:var(--ink); color:var(--paper); padding-block:var(--gap); }
.contact-inner { display:grid; grid-template-columns:1fr .75fr; align-items:center; gap:clamp(28px,7vw,96px); }
.contact p { color:#c8c8ce; margin-top:18px; }
.city-links { display:grid; gap:9px; }
.city-link { width:100%; justify-content:space-between; min-height:60px; padding-inline:19px; border-color:#555861; background:transparent; color:var(--paper); font-size:clamp(19px,2.5vw,28px); font-weight:350; }
.contact .arrow,.contact-handle { color:#83bbff; }
.contact-handle { display:inline-flex; align-items:center; gap:8px; min-height:44px; width:fit-content; margin-left:17px; }
.contact :focus-visible,.footer :focus-visible { outline-color:#83bbff; }
.footer { background:var(--ink); color:var(--paper); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:106px; padding-block:22px; border-top:1px solid #ffffff27; }
.footer p { color:#c8c8ce; margin-top:6px; font-size:13px; }
.footer nav a { gap:5px; font-size:14px; }
.footer .out-arrow { color:#83bbff; }

.guide-hero { display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(28px,6vw,78px); align-items:center; min-height:535px; padding-block:clamp(30px,5vw,68px); }
.guide-hero h1 { font-size:clamp(46px,6.1vw,88px); }
.back-link { margin-bottom:16px; }
.guide-hero .lede { margin-block:20px 23px; }
.guide-image { position:relative; display:grid; aspect-ratio:1.25; place-items:center; min-width:0; background:var(--paper); }
.guide-image img { width:100%; height:100%; object-fit:contain; }
.guide-image figcaption { position:absolute; right:2px; bottom:0; color:var(--muted); font-size:13px; }
.guide-index { display:flex; gap:8px 30px; justify-content:center; flex-wrap:wrap; padding-block:10px; border-block:1px solid var(--edge); }
.guide-index a { display:inline-flex; min-height:44px; align-items:center; color:var(--link); }
.guide-details,.guide-question-grid { display:grid; grid-template-columns:.77fr 1.23fr; gap:clamp(28px,6vw,88px); }
.guide-details,.guide-questions,.guide-note { padding-block:var(--gap); }
.guide-details p { margin-top:14px; }
.guide-details .steps p { margin:0; }
.guide-questions { background:var(--canvas); }
.guide-note { align-items:center; }
.guide-note p { margin-bottom:7px; }

.booking-dialog { width:min(515px,calc(100% - 28px)); max-height:calc(100% - 28px); padding:clamp(22px,4vw,40px); border:1px solid var(--edge); border-radius:34px; background:var(--paper); color:var(--ink); }
.booking-dialog:not([open]) { display:none; }
.booking-dialog::backdrop { background:#11121577; }
.booking-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.close { display:grid; place-items:center; min-width:44px; min-height:44px; border:1px solid var(--edge); background:transparent; border-radius:50%; font-size:24px; }
.booking-dialog h2 { font-size:clamp(33px,4.3vw,51px); margin:10px 0 12px; }
.booking-dialog p { color:var(--muted); }
.city-choice { border:0; margin:18px 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.city-choice legend { margin-bottom:8px; font-size:14px; }
.city-choice label { position:relative; cursor:pointer; }
.city-choice input { position:absolute; width:1px; height:1px; opacity:0; }
.city-choice input:focus-visible + span { outline:2px solid var(--blue); outline-offset:2px; }
.booking-dialog .fine { margin-top:9px; font-size:14px; }

@media (hover:hover) and (pointer:fine) {
  .button:hover { background:#0f101211; border-color:#0071e36b; }
  .button:hover .arrow,.text-link:hover .arrow { transform:translateX(3px); }
  .desktop-nav a:hover,.text-link:hover,.footer nav a:hover,.guide-index a:hover,.scroll-note:hover,.contact-handle:hover { text-decoration:underline; }
  .journal-list a:hover { background:var(--canvas); border-color:#0071e36b; }
  .city-link:hover { background:#ffffff10; border-color:#83bbff; }
  .close:hover { background:var(--canvas); }
}
@media (max-width:1000px) {
  .header-inner { gap:14px; }
  .desktop-nav { gap:13px; font-size:14px; }
  .direction { grid-template-columns:1fr; gap:7px; }
  .studio-intro { grid-template-columns:1fr .64fr; }
  .studio-intro .meta { grid-column:1 / -1; }
  .studio { grid-template-columns:1fr .83fr; }
}
@media (max-width:760px) {
  :root { --radius:33px; --gap:66px; }
  .header { top:8px; height:61px; padding-top:8px; }
  .header-inner { grid-template-columns:1fr auto; min-height:51px; padding-inline:12px; }
  .desktop-nav,.header-action { display:none; }
  .mobile-nav { display:block; position:relative; }
  .mobile-nav summary { display:flex; gap:8px; align-items:center; min-height:42px; list-style:none; font-size:14px; }
  .mobile-nav summary span { width:16px; display:grid; gap:4px; }
  .mobile-nav summary i { height:1px; background:currentColor; }
  .mobile-nav nav { position:absolute; right:-7px; top:calc(100% + 6px); width:min(230px,76vw); display:grid; padding:8px 15px; background:var(--paper); border:1px solid var(--edge); border-radius:13px; }
  .mobile-nav nav a { display:flex; align-items:center; min-height:45px; }
  .hero-frame { min-height:0; }
  .hero-copy { padding-top:clamp(236px,60vw,390px); padding-bottom:11px; }
  .hero-copy h1 { font-size:clamp(38px,8.9vw,67px); line-height:1.01; }
  .hero-visual { inset:0 0 auto; height:clamp(270px,68vw,440px); }
  .hero-render img { object-fit:cover; object-position:69% 42%; }
  .signal-orbit { width:53vw; max-width:340px; right:4%; top:12%; }
  .location-chip { margin-bottom:14px; }
  .hero .lede { margin-block:16px 18px; }
  .hero-caption { gap:8px; min-height:54px; }
  .consultation-strip .container { flex-wrap:wrap; gap:4px; padding-block:15px; }
  .directions,.studio-intro,.studio,.process-copy,.journal-heading,.faq,.contact-inner,.guide-hero,.guide-details,.guide-question-grid,.guide-note { grid-template-columns:1fr; }
  .directions,.faq { gap:24px; }
  .studio { gap:21px; padding:21px; }
  .studio-intro { gap:12px; }
  .studio-panel { min-height:125px; }
  .studio-tabs { gap:5px; margin-bottom:15px; }
  .studio-tabs button { font-size:13px; padding-inline:9px; }
  .process-copy .steps,.process-copy .text-link { grid-column:auto; grid-row:auto; }
  .process-copy .steps { margin-top:22px; }
  .journal-list { grid-template-columns:1fr; }
  .journal-list a { min-height:0; padding:22px; }
  .journal-list h3 { margin-block:9px 6px; }
  .about-grid { grid-template-columns:minmax(85px,.46fr) 1fr; gap:19px; align-items:start; }
  .profile-photo img { border-radius:23px; }
  .contact-inner { gap:22px; }
  .footer-inner { flex-direction:column; align-items:flex-start; gap:8px; }
  .footer nav { flex-wrap:wrap; gap:4px 16px; }
  .guide-hero { gap:13px; min-height:0; padding-block:21px 28px; }
  .guide-hero h1 { font-size:clamp(40px,8.5vw,64px); }
  .back-link { margin-bottom:10px; }
  .guide-hero .lede { margin-block:15px 16px; }
  .guide-image { aspect-ratio:1.6; }
  .guide-index { justify-content:flex-start; gap:0 15px; font-size:14px; }
}
@media (max-width:365px) {
  .hero-copy h1 { font-size:35px; }
  .studio-tabs button { padding-inline:7px; }
  .hero-caption { font-size:13px; }
}

@keyframes lift { from { opacity:.35; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes art-in { from { opacity:.12; scale:1.035; } to { opacity:1; scale:1; } }
@keyframes orbit-in { from { opacity:0; rotate:-21deg; } to { opacity:1; rotate:0deg; } }
@keyframes page-out { to { opacity:0; transform:translateY(-7px); } }
@keyframes page-in { from { opacity:.28; transform:translateY(10px); } }
@media (prefers-reduced-motion:no-preference) {
  .hero-copy > *,.guide-hero > div > * { animation:lift .68s var(--ease-out) both; }
  .hero-copy h1,.guide-hero h1 { animation-delay:50ms; }
  .hero-copy .lede,.guide-hero .lede { animation-delay:100ms; }
  .hero-copy .button,.guide-hero .button { animation-delay:150ms; }
  .hero-render img,.guide-image img { animation:art-in 1.1s var(--ease-out) both; }
  .orbit-marker { animation:orbit-in 1.2s .17s var(--ease-out) both; }
  .faq-item[open] p { animation:lift .2s var(--ease-out) both; }
  .booking-dialog { transition:opacity .24s var(--ease-out),transform .24s var(--ease-out),display .24s allow-discrete,overlay .24s allow-discrete; opacity:0; transform:scale(.97); }
  .booking-dialog[open] { opacity:1; transform:scale(1); }
  @starting-style { .booking-dialog[open] { opacity:0; transform:scale(.97); } }
  ::view-transition-old(root) { animation:page-out .18s var(--ease-out) both; }
  ::view-transition-new(root) { animation:page-in .32s var(--ease-out) both; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  ::view-transition-old(root),::view-transition-new(root) { animation:none; }
}

@keyframes follow-page { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes portrait-depth { to { transform:translate3d(0, 34px, 0) scale(1.04); opacity:.86; } }
@supports (animation-timeline:scroll()) {
  @media (prefers-reduced-motion:no-preference) {
    .header-inner::after { content:""; position:absolute; inset:auto 13px -1px; height:1px; background:var(--blue); transform-origin:left; animation:follow-page linear both; animation-timeline:scroll(root block); pointer-events:none; }
    .hero-depth { animation:portrait-depth linear both; animation-timeline:scroll(root block); animation-range:0px 650px; }
  }
}
@media (prefers-reduced-motion:no-preference) {
  .mobile-nav[open] nav { animation:lift .18s var(--ease-out) both; }
}