@font-face{font-family:Ioskeley;src:url('assets/fonts/IoskeleyMono-400.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Ioskeley;src:url('assets/fonts/IoskeleyMono-700.woff') format('woff');font-weight:700;font-display:swap}
:root{
  --ink:#2c2d2d;--paper:#dee2e3;--fog:#a6a9aa;--shadow:#6f7172;
  --line:2px solid var(--ink);--grain:url('assets/media/matte-grain.png');
  --ease:cubic-bezier(.22,1,.36,1)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font:400 16px/1.5 Ioskeley,monospace;-webkit-font-smoothing:antialiased}
button,a{font:inherit}button{cursor:pointer}a{color:inherit}img{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.hero :focus-visible,.site-header :focus-visible,.principles :focus-visible,.site-footer :focus-visible{outline-color:var(--paper)}
.wrap{width:min(calc(100% - 72px),1360px);margin-inline:auto}
.header-sentinel{position:absolute;top:80px;left:0;width:1px;height:1px;pointer-events:none}
.skip-link{position:fixed;z-index:40;left:18px;top:-90px;padding:12px 18px;border:var(--line);border-radius:4px;background:var(--paper)}
.skip-link:focus{top:18px}

/* One fixed header, then an inset matte pane. The document never shifts. */
.site-header{position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:18px max(36px,calc((100vw - 1360px)/2));border-bottom:1px solid rgba(222,226,227,.42);color:var(--paper);transition:top .55s var(--ease),left .55s var(--ease),right .55s var(--ease),padding .55s var(--ease),border-radius .55s var(--ease),background-color .55s var(--ease),box-shadow .55s var(--ease)}
.site-header.is-floating{top:16px;left:max(16px,calc((100vw - 1392px)/2));right:max(16px,calc((100vw - 1392px)/2));padding:6px 22px;border:1px solid rgba(245,246,246,.32);border-radius:16px;background-color:rgba(40,43,43,.75);background-image:var(--grain);box-shadow:0 16px 50px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(22px) saturate(.62);backdrop-filter:blur(22px) saturate(.62)}
.brand{display:flex;align-items:center;min-height:44px;width:146px;flex:none}
.brand img{width:100%;height:auto}
.site-header nav{display:flex;align-items:center;gap:34px}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:14px;font-weight:700}
.site-header nav a:hover,.back-top:hover{text-decoration:underline;text-underline-offset:5px}

/* Motion is scenery. The still remains visible when video is paused or unavailable. */
.hero{position:relative;isolation:isolate;min-height:min(900px,100svh);display:flex;align-items:center;overflow:hidden;background:#858a8c}
.hero-media{position:absolute;z-index:-1;inset:0;background:url('assets/media/hero-still.png') center/cover no-repeat}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:center}
.hero::before{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(90deg,rgba(16,19,20,.55) 0%,rgba(16,19,20,.30) 55%,rgba(16,19,20,.20)),linear-gradient(0deg,rgba(16,19,20,.34),transparent 48%);pointer-events:none}
.hero::after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:-1px;height:clamp(170px,27vw,350px);background:linear-gradient(to bottom,transparent,var(--paper));pointer-events:none}
.hero-content{position:relative;z-index:2;padding-block:118px 125px}
.hero-glass{position:relative;width:min(100%,780px);padding:48px 52px 50px;overflow:hidden;border:1px solid rgba(255,255,255,.31);border-radius:14px;color:var(--paper);background-color:rgba(36,39,40,.65);background-image:var(--grain);box-shadow:inset 0 1px rgba(255,255,255,.19),0 24px 84px rgba(0,0,0,.22);-webkit-backdrop-filter:blur(27px) saturate(.58);backdrop-filter:blur(27px) saturate(.58)}
.hero-glass::after{content:"";position:absolute;top:-60%;right:-30%;width:70%;height:100%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.13),transparent 67%);pointer-events:none}
.heading-group{display:block;min-width:0}
.heading-divider{display:block;width:128px;height:6px;margin:16px 0;overflow:hidden;border-radius:999px;background-color:var(--paper);background-image:conic-gradient(var(--ink) 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0);background-size:4px 4px;animation:none}
.kicker{margin:0;font-size:12px;font-weight:400;letter-spacing:.12em;line-height:1.65;text-transform:uppercase}
.hero h1{margin:0;max-width:720px;font-size:clamp(3.25rem,4.65vw,5.6rem);line-height:.98;letter-spacing:-.07em;font-weight:700;text-wrap:balance}
.hero-copy{max-width:550px;margin:30px 0 31px;font-size:clamp(1rem,1.28vw,1.22rem);line-height:1.52;font-weight:400}
.primary-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:11px 18px;border:2px solid var(--ink);border-radius:5px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:14px;font-weight:700;transition:transform .35s var(--ease),background-color .35s var(--ease)}
.primary-link img{width:20px;height:20px;filter:brightness(0) invert(1)}
.primary-link:hover{transform:translateY(-3px);background:#181919}
.primary-link:active{transform:translateY(0)}
.hero-bottom{position:absolute;z-index:2;bottom:92px;left:0;right:0;display:flex;justify-content:flex-end}
.motion-toggle{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(44,45,45,.42);border-radius:6px;padding:0;background:rgba(222,226,227,.67);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.motion-toggle:hover{background:var(--paper)}
.motion-toggle svg{width:16px;height:16px}
.motion-toggle[data-state="pause"] .motion-icon-play,.motion-toggle[data-state="play"] .motion-icon-pause{display:none}
.motion-toggle[hidden]{display:none}

/* An editorial glass sheet crosses the cut between film and still imagery. */
.intro{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);align-items:end;gap:clamp(35px,7vw,130px);margin-top:-30px;padding:clamp(42px,6vw,86px);border:1px solid rgba(255,255,255,.68);border-radius:14px;background-color:rgba(238,241,241,.74);background-image:var(--grain);box-shadow:0 24px 72px rgba(53,59,61,.13),inset 0 1px rgba(255,255,255,.8);-webkit-backdrop-filter:blur(24px) saturate(.72);backdrop-filter:blur(24px) saturate(.72)}
.intro h2,.experience h2,.principles h2,.site-footer h2{margin:0;font-size:clamp(2.8rem,4.6vw,5.6rem);line-height:1.04;letter-spacing:-.065em;text-wrap:balance}
.intro-copy{max-width:440px;margin:0 0 4px;font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.52;text-wrap:pretty}
.lifestyle{position:relative;margin-top:clamp(54px,7vw,112px);margin-bottom:clamp(90px,10vw,150px)}
.lifestyle-image{position:relative;height:clamp(480px,62vw,790px);overflow:hidden;border-radius:14px;background:#858b8d;box-shadow:0 32px 84px rgba(36,42,44,.21)}
.lifestyle-image img{width:100%;height:100%;object-fit:cover;object-position:46% 50%;filter:saturate(.62) contrast(.93);transform:scale(1.08) translate3d(0,var(--parallax-y,0px),0);will-change:transform}
.lifestyle-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 46%,rgba(174,187,193,.16));pointer-events:none}

/* One continuous scroll gesture turns the interface from an oblique object into a readable screen. */
.device-reveal{min-height:100svh;position:relative;background:#d5dadb;isolation:isolate}
.device-reveal.is-active{height:210svh}
.device-reveal::before{content:"";position:absolute;inset:0;background:url('assets/media/matte-grain.png') repeat;opacity:.32;pointer-events:none}
.device-reveal-sticky{height:100svh;min-height:650px;position:sticky;top:0;display:grid;align-items:center;overflow:hidden}
.device-reveal-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(25px,4vw,80px);height:100%;max-height:880px}
.device-reveal-copy{position:relative;z-index:2;transform:translateY(var(--reveal-copy-y,0));opacity:var(--reveal-copy-opacity,1);will-change:transform,opacity}
.device-reveal h2{margin:0;font-size:clamp(4.2rem,7.3vw,8.5rem);line-height:.96;letter-spacing:-.085em;text-wrap:balance}
.device-reveal-copy>p{max-width:420px;margin:34px 0 0;font-size:clamp(1rem,1.3vw,1.22rem);line-height:1.55}
.device-reveal-scene{position:relative;min-height:100%;display:grid;place-items:center;perspective:1100px;perspective-origin:50% 50%}
.device-reveal-scene::before{content:"";position:absolute;width:min(80%,590px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(77,85,87,.19),transparent 69%);filter:blur(18px);transform:translate(7%,21%) scale(1.25);pointer-events:none}
.device-orbit{position:relative;width:clamp(265px,28vw,360px);aspect-ratio:0.595;transform-style:preserve-3d;transform:translate3d(var(--reveal-x,0),var(--reveal-y,0),0) rotateX(var(--reveal-rx,0deg)) rotateY(var(--reveal-ry,0deg)) rotateZ(var(--reveal-rz,0deg)) scale(var(--reveal-scale,1));filter:drop-shadow(25px 38px 20px rgba(25,30,31,.27));will-change:transform}
.device-orbit-front{position:absolute;inset:0;display:flex;flex-direction:column;gap:0;padding:14px 13px 11px;border:2px solid #1f2223;border-radius:25px;background:linear-gradient(135deg,#555a5b 0%,#313536 14%,#202425 55%,#3c4142 100%);box-shadow:inset 0 2px rgba(255,255,255,.28),inset -3px -3px rgba(0,0,0,.3),8px 9px 0 #141718,10px 12px 0 #62686a;backface-visibility:hidden}
.device-orbit-side{position:absolute;z-index:-1;top:2.5%;bottom:2.5%;right:-18px;width:26px;border-radius:0 20px 20px 0;background:linear-gradient(90deg,#111516,#565e60 47%,#202627);transform:translateZ(-13px) rotateY(13deg)}
.device-orbit-screen{flex:1;min-height:0;overflow:hidden;border:2px solid #161a1b;border-radius:10px 10px 5px 5px;background:#f7f8f8;box-shadow:inset 0 0 0 2px #969d9f}
.device-orbit-screen img{width:100%;height:100%;object-fit:contain;filter:none}
.device-orbit-chin{height:42px;display:flex;align-items:flex-end;justify-content:center;gap:30px;padding-bottom:7px}
.device-orbit-chin span{width:25px;height:8px;border:1px solid #15191a;border-radius:999px;background:#4b5152;box-shadow:inset 0 1px rgba(255,255,255,.22)}
.device-reveal-note{position:absolute;right:0;bottom:clamp(38px,7vh,90px);margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.device-reveal-note::before{content:"";display:block;width:88px;height:1px;margin-bottom:12px;background:var(--ink)}

/* Screens remain untouched 1-bit captures inside one continuous frosted shelf. */
.experience{position:relative;isolation:isolate;padding-block:clamp(100px,10vw,158px);overflow:hidden;background:#a6adaf}
.experience::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(222,226,227,.95),rgba(222,226,227,.72)),url('assets/media/mountains-dither.png') center/cover;filter:saturate(.5)}
.experience-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,420px);align-items:center;gap:clamp(35px,5.5vw,100px);padding:clamp(32px,5.5vw,76px);border:1px solid rgba(255,255,255,.75);border-radius:15px;background-color:rgba(231,236,237,.64);background-image:var(--grain);box-shadow:0 25px 80px rgba(40,48,51,.15),inset 0 1px rgba(255,255,255,.9);-webkit-backdrop-filter:blur(28px) saturate(.65);backdrop-filter:blur(28px) saturate(.65)}
.experience-copy{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.experience-copy>.heading-group{margin-bottom:42px}
.experience h2{max-width:610px}
.screen-tabs{max-width:620px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.screen-tabs button{width:100%;min-height:72px;display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid rgba(44,45,45,.48);border-radius:7px;background:rgba(242,245,245,.43);color:var(--ink);text-align:left;font-size:clamp(.94rem,1.35vw,1.18rem);font-weight:700;transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.screen-tabs button img{width:25px;height:25px;flex:none;object-fit:contain}
.screen-tabs button:hover{background:rgba(255,255,255,.75);transform:translateY(-2px)}
.screen-tabs button[aria-selected="true"]{border:2px solid var(--ink);padding:11px 15px;background:rgba(255,255,255,.88);box-shadow:3px 3px 0 var(--ink)}
.screen-description{max-width:580px;min-height:0;margin-top:34px}
.screen-description h3{margin:0 0 9px;font-size:clamp(1.3rem,2vw,2rem);line-height:1.2;letter-spacing:-.035em}
.screen-description p{margin:0;max-width:540px;font-size:16px;line-height:1.5}
.screen-stage{justify-self:center;width:min(100%,385px)}
.screen-display{width:100%;margin:auto;overflow:hidden;border:var(--line);border-radius:2px;background:#fff;box-shadow:4px 4px 0 var(--ink)}
.screen-display img{width:100%;height:auto;aspect-ratio:3/5;object-fit:contain}

/* The travel study anchors the second act. Copy floats on one deep matte pane. */
.principles{position:relative;isolation:isolate;min-height:790px;display:flex;align-items:center;padding-block:110px;overflow:hidden;background:#303536;color:var(--paper)}
.principles-photo{position:absolute;z-index:-2;inset:0}
.principles-photo img{width:100%;height:100%;object-fit:cover;object-position:39% 48%;filter:saturate(.64) brightness(.82);transform:scale(1.08) translate3d(0,var(--parallax-y,0px),0);will-change:transform}
.principles::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(27,31,33,.10),rgba(27,31,33,.65) 72%,rgba(27,31,33,.7));pointer-events:none}
.principles-grid{display:flex;justify-content:flex-end}
.principles-body{width:min(100%,630px);padding:clamp(34px,4vw,64px);border:1px solid rgba(255,255,255,.26);border-radius:13px;background-color:rgba(33,37,38,.72);background-image:var(--grain);box-shadow:inset 0 1px rgba(255,255,255,.1),0 26px 75px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(24px) saturate(.5);backdrop-filter:blur(24px) saturate(.5)}
.principles-body>.heading-group{margin-bottom:39px}
.principles h2{font-size:clamp(2.7rem,4vw,4.65rem)}
.principle-list{border-top:1px solid rgba(222,226,227,.44)}
.principle-list article{padding:20px 0 22px;border-bottom:1px solid rgba(222,226,227,.44)}
.principle-list h3{margin:0 0 7px;font-size:clamp(1.25rem,1.8vw,1.65rem);line-height:1.2;letter-spacing:-.035em}
.principle-list p{margin:0;max-width:460px;font-size:15px;line-height:1.5;color:#d4d9d9}
/* The owner's dithered mountain image has one quiet use behind the final glass plane. */
.site-footer{position:relative;isolation:isolate;padding-block:clamp(70px,8vw,120px);overflow:hidden;background:#242a2b;color:var(--paper)}
.site-footer::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(24,28,29,.72),rgba(24,28,29,.3)),url('assets/media/mountains-dither.png') center/cover;opacity:.75}
.footer-glass{min-height:clamp(500px,47vw,660px);display:flex;flex-direction:column;justify-content:space-between;gap:64px;padding:clamp(42px,6vw,84px);border:1px solid rgba(255,255,255,.27);border-radius:14px;background-color:rgba(30,35,36,.68);background-image:var(--grain);box-shadow:inset 0 1px rgba(255,255,255,.12),0 34px 88px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(25px) saturate(.55);backdrop-filter:blur(25px) saturate(.55)}
.site-footer h2{max-width:990px;font-size:clamp(3.25rem,6.4vw,7.6rem)}
.footer-bottom{display:flex;align-items:end;justify-content:space-between;gap:28px;padding-top:28px;border-top:1px solid rgba(222,226,227,.37)}
.footer-bottom img{width:166px;height:auto}
.back-top{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:13px;letter-spacing:.04em;text-transform:uppercase}

/* Reveal once as photographic material settles into focus. */
.reveal-pending{opacity:0;transform:translateY(22px);filter:blur(5px)}
.reveal-ready{opacity:1;transform:none;filter:none;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .hero-glass{animation:hero-arrive 1.2s var(--ease) both}
  @keyframes hero-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hero-glass,.site-header.is-floating,.principles-body,.footer-glass{background-color:rgba(36,39,40,.96)}
  .intro,.experience-grid{background-color:rgba(235,239,240,.96)}
}
@media (prefers-reduced-transparency:reduce){
  .hero-glass,.site-header.is-floating,.principles-body,.footer-glass{background-color:rgba(36,39,40,.98)}
  .intro,.experience-grid{background-color:rgba(235,239,240,.98)}
  .hero-glass,.site-header.is-floating,.principles-body,.intro,.experience-grid,.footer-glass{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (max-width:1000px){
  .hero h1{font-size:clamp(3.15rem,7vw,5.4rem)}
  .experience-grid{grid-template-columns:minmax(0,1fr) minmax(260px,390px);gap:34px}
  .experience h2{font-size:clamp(2.65rem,5vw,4.5rem)}
}
@media (max-width:760px){
  .wrap{width:min(calc(100% - 36px),560px)}
  .site-header{padding:11px 18px}
  .site-header.is-floating{top:max(10px,env(safe-area-inset-top));left:10px;right:10px;padding:5px 15px}
  .brand{width:112px}
  .site-header nav{gap:16px}
  .site-header nav a{font-size:12px}
  .hero{min-height:780px;min-height:max(740px,100svh);align-items:flex-start}
  .hero-media{background-position:63% center}
  .hero-video{object-position:63% center}
  .hero::before{background:linear-gradient(180deg,rgba(18,20,21,.44),rgba(18,20,21,.24) 65%,transparent)}
  .hero-content{padding-top:132px;padding-bottom:100px}
  .hero-glass{padding:31px 27px 33px;border-radius:11px;background-color:rgba(36,39,40,.77)}
  .hero h1{font-size:clamp(2.9rem,11vw,4.6rem)}
  .hero-copy{margin:24px 0 25px;font-size:16px}
  .hero-bottom{bottom:84px}
  .intro{display:block;margin-top:-36px;padding:35px 29px 39px;border-radius:11px}
  .intro h2,.experience h2{font-size:clamp(2.7rem,10vw,4rem)}
  .intro-copy{margin-top:26px;font-size:17px}
  .lifestyle{margin-top:56px;margin-bottom:86px}
  .lifestyle-image{height:560px;border-radius:9px}
  .lifestyle-image img{object-position:37% center}
  .lifestyle figcaption{text-align:left}
  .device-reveal.is-active{height:185svh}
  .device-reveal-sticky{min-height:0}
  .device-reveal-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:0;align-items:start;padding-top:clamp(105px,14vh,135px);max-height:none}
  .device-reveal h2{font-size:clamp(2.9rem,10.2vw,4.5rem)}
  .device-reveal-copy>p{max-width:390px;margin-top:18px;font-size:15px}
  .device-reveal-scene{min-height:0;height:100%;place-items:center}
  .device-orbit{width:min(58vw,270px)}
  .device-reveal-note{right:0;bottom:20px;font-size:11px}
  .experience{padding-block:70px}
  .experience-grid{display:block;padding:28px 22px 36px;border-radius:11px}
  .experience-copy>.heading-group{margin-bottom:33px}
  .screen-tabs{gap:9px}
  .screen-tabs button{min-height:64px;gap:9px;padding:10px 11px;font-size:14px}
  .screen-tabs button[aria-selected="true"]{padding:9px 10px}
  .screen-tabs button img{width:21px;height:21px}
  .screen-description{margin:30px 0 34px}
  .screen-stage{width:min(calc(100% - 8px),360px);margin:0 auto}
  .principles{display:block;min-height:0;padding:310px 0 50px}
  .principles-photo{bottom:auto;height:510px}
  .principles-photo img{object-position:36% 50%;filter:saturate(.62) brightness(.84)}
  .principles::before{background:linear-gradient(180deg,transparent 0%,#303536 490px)}
  .principles-grid{display:block}
  .principles-body{padding:32px 26px 35px;border-radius:11px}
  .principles h2{font-size:clamp(2.65rem,9vw,4rem)}
  .site-footer{padding-block:65px}
  .footer-glass{min-height:470px;padding:35px 28px;border-radius:11px}
  .site-footer h2{font-size:clamp(2.8rem,10vw,4.9rem)}
  .footer-bottom img{width:132px}
}
@media (max-width:400px){
  .site-header nav{gap:12px}.site-header nav a{font-size:11px}
  .hero h1{font-size:clamp(2.6rem,10.6vw,3.4rem)}
  .hero-content{padding-top:127px}
  .hero-glass{padding:29px 23px 31px}
  .hero-copy{font-size:15px}
  .experience-grid{padding-inline:18px}
  .screen-tabs button{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal-pending{opacity:1;transform:none;filter:none}
  .lifestyle-image img,.principles-photo img{transform:none;will-change:auto}
  .device-reveal.is-active{height:auto}
  .device-reveal-sticky{position:relative;min-height:700px}
  .device-reveal-copy,.device-orbit{transform:none!important;filter:none}
}