:root{
  --porcelain:#edefee; --glaze:#ffffff; --shade:#d4d9d8;
  --walnut:#2a150d; --ink:#15110e; --quiet:#5d5753;
  --on-wood:#f6efe9; --on-wood-quiet:#c9b4a6;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--porcelain); color:var(--ink); font:400 18px/1.55 "Archivo",system-ui,sans-serif; font-variation-settings:"wdth" 100; -webkit-font-smoothing:antialiased}
a{color:inherit}
.wide{font-variation-settings:"wdth" 125}
.hand{font-family:"Homemade Apple",cursive; font-weight:400}
.pad{padding-left:clamp(20px,5vw,72px); padding-right:clamp(20px,5vw,72px)}

/* Hero: the photograph keeps its own colour; nothing on the page borrows it */
.hero{position:relative; min-height:100svh; color:#fff; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; background:#1b1410}
.hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 50%}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,8,6,.30),rgba(10,8,6,0) 24%,rgba(10,8,6,0) 50%,rgba(10,8,6,.70))}
.hero > *:not(img){position:relative; z-index:1}
nav{display:flex; justify-content:space-between; align-items:center; padding-top:22px}
.mark{font-size:19px; font-weight:500; letter-spacing:-.01em; text-decoration:none; font-variation-settings:"wdth" 125; min-height:44px; display:inline-flex; align-items:center}
nav ul{display:flex; gap:clamp(16px,3vw,36px); list-style:none; margin:0; padding:0; font-size:16px}
nav a{text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
nav a:hover{text-decoration:underline; text-underline-offset:5px}
.hero h1{margin:0; font-weight:250; font-size:clamp(44px,7.6vw,128px); line-height:.98; letter-spacing:-.035em; font-variation-settings:"wdth" 125}
.hero .sub{font-size:clamp(17px,1.5vw,20px); margin:22px 0 0; max-width:520px; text-shadow:0 1px 16px rgba(0,0,0,.45)}
.hero-copy{padding-bottom:clamp(36px,7vh,84px)}
.hero .note{position:absolute; right:clamp(24px,14vw,260px); top:29%; font-size:clamp(20px,2vw,28px); transform:rotate(-5deg); text-shadow:0 1px 12px rgba(0,0,0,.35)}

/* Porcelain: the statement */
.statement{padding-top:clamp(96px,14vw,200px); padding-bottom:clamp(96px,14vw,200px); position:relative; overflow:hidden}
.statement p{margin:0; max-width:1180px; font-weight:280; font-size:clamp(30px,4.3vw,66px); line-height:1.08; letter-spacing:-.03em; font-variation-settings:"wdth" 118}
.statement p span{color:var(--quiet)}
.statement .who{font-size:17px; color:var(--quiet); margin-bottom:28px; font-weight:400; letter-spacing:0; font-variation-settings:"wdth" 100}
/* the banister: one long curve sweeping down into the stair */
.banister{position:absolute; right:-6vw; bottom:-2px; width:62vw; height:auto; pointer-events:none}

/* Walnut: the staircase */
.stair{position:relative; background:var(--walnut) url("/assets/house/veneer.jpg") center/cover fixed; color:var(--on-wood)}
.stair::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,9,4,.82) 0%,rgba(20,9,4,.55) 45%,rgba(20,9,4,.25) 100%); pointer-events:none}
html{scroll-snap-type:y proximity}
.snap{position:absolute; left:0; width:1px; height:1px; scroll-snap-align:start}
.stage{position:sticky; top:0; height:100svh; overflow:hidden}
.landing{position:absolute; inset:0}
.info{position:absolute; left:clamp(20px,5vw,72px); top:50%; transform:translateY(-50%); width:min(34vw,480px); opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s}
.landing.on .info{opacity:1; visibility:visible}
.count{font-size:15px; color:var(--on-wood-quiet); margin:0 0 18px; font-variant-numeric:tabular-nums}
.info h2{margin:0 0 18px; font-weight:300; font-size:clamp(44px,5.2vw,84px); line-height:.95; letter-spacing:-.035em; font-variation-settings:"wdth" 125}
.info .line{margin:0 0 14px; font-size:clamp(18px,1.45vw,21px); line-height:1.5}
.info .where{margin:0 0 30px; font-size:15px; color:var(--on-wood-quiet)}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px}
.go{display:inline-flex; align-items:center; min-height:48px; padding:0 26px; border-radius:999px; background:linear-gradient(180deg,#fff,#e9ecec); color:var(--ink); text-decoration:none; font-weight:500; font-size:16px; box-shadow:inset 0 1px 0 #fff,0 10px 24px -10px rgba(0,0,0,.6)}
.go:hover{background:#fff}
.why{min-height:44px; display:inline-flex; align-items:center; font-size:16px; text-decoration:none; border-bottom:1px solid rgba(246,239,233,.35)}
.why:hover{border-color:var(--on-wood)}
.landing .note{position:absolute; font-size:clamp(17px,1.4vw,21px); color:var(--on-wood); transform:rotate(-4deg); opacity:0; transition:opacity .5s}
.landing.on .note{opacity:.92}

/* Porcelain vessels holding the real screens */
.vessel{position:absolute; left:69%; top:50%; width:min(44vw,640px); aspect-ratio:1.18; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 95% at 28% 18%,var(--glaze) 0%,#f3f5f4 40%,#e3e7e6 72%,var(--shade) 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.95),inset 0 -22px 46px rgba(40,30,25,.10),0 50px 90px -34px rgba(0,0,0,.75);
  will-change:transform,opacity; transform:translate(-50%,-50%)}
.v1{border-radius:47% 53% 44% 56% / 56% 46% 54% 44%}
.v2{border-radius:58% 42% 52% 48% / 46% 58% 42% 54%}
.v3{border-radius:42% 58% 50% 50% / 58% 44% 56% 42%}
.v4{border-radius:52% 48% 60% 40% / 44% 52% 48% 56%}
.screen{display:block; box-shadow:0 18px 40px -14px rgba(20,12,6,.45),0 0 0 1px rgba(0,0,0,.06)}
.screen.phone{height:82%; width:auto; border-radius:22px}
.screen.wide{width:78%; height:auto; border-radius:8px}
.screen.photo{width:64%; height:auto; border-radius:46% 54% 48% 52% / 50% 46% 54% 50%}

/* Porcelain: the diary */
.diary{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); padding-top:clamp(96px,12vw,170px); padding-bottom:clamp(96px,12vw,170px); align-items:end}
.diary h2{margin:0; font-weight:280; font-size:clamp(40px,5.4vw,88px); line-height:.98; letter-spacing:-.035em; font-variation-settings:"wdth" 125}
.diary .lede{margin:22px 0 0; color:var(--quiet); max-width:440px}
.post{display:block; text-decoration:none; padding:clamp(28px,3vw,44px); border-radius:44px 44px 44px 120px;
  background:radial-gradient(120% 120% at 20% 0%,#fff 0%,#f4f6f5 55%,#e6eae9 100%);
  box-shadow:inset 0 1px 0 #fff,0 30px 60px -36px rgba(20,14,10,.45); transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.post:hover{transform:translateY(-4px)}
.post small{display:block; font-size:15px; color:var(--quiet); margin-bottom:14px}
.post strong{display:block; font-weight:400; font-size:clamp(26px,2.4vw,36px); line-height:1.12; letter-spacing:-.02em; font-variation-settings:"wdth" 112}
.post span{display:block; margin-top:14px; color:var(--quiet)}
.post em{display:inline-block; margin-top:24px; font-style:normal; font-weight:500}
.diary .more{display:inline-flex; min-height:44px; align-items:center; margin-top:18px}

/* Walnut: the door */
.door{position:relative; background:var(--walnut) url("/assets/house/veneer.jpg") center/cover; color:var(--on-wood); padding-top:clamp(96px,12vw,170px); padding-bottom:32px; overflow:hidden}
.door::before{content:""; position:absolute; inset:0; background:rgba(20,9,4,.62)}
.door > *{position:relative}
.door h2{margin:0; font-weight:250; font-size:clamp(44px,7vw,116px); line-height:.98; letter-spacing:-.035em; font-variation-settings:"wdth" 125; max-width:1100px}
.door p{margin:26px 0 34px; max-width:520px; color:var(--on-wood-quiet)}
.door .sign{display:block; font-size:34px; margin-top:80px; transform:rotate(-3deg); transform-origin:left}
.foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; margin-top:64px; padding-top:18px; border-top:1px solid rgba(246,239,233,.18); font-size:15px; color:var(--on-wood-quiet)}
.foot a{min-height:44px; display:inline-flex; align-items:center; text-decoration:none}

/* Stacked staircase: phones, and anyone who prefers less motion */
.stair.flat .stage{position:static; height:auto; overflow:visible}
.stair.flat .landing{position:relative; inset:auto; padding:72px clamp(20px,5vw,72px) 24px}
.stair.flat .vessel{position:relative; left:auto; top:auto; transform:none!important; opacity:1!important; width:100%; max-width:560px; margin:0 auto 36px}
.stair.flat .info{position:static; transform:none; width:auto; opacity:1; visibility:visible}
.stair.flat .landing .note{display:none}
.stair.flat{background-attachment:scroll; background-size:1400px auto; background-repeat:repeat}
@media (max-width:860px){
  .diary{grid-template-columns:1fr}
  nav li:nth-child(2){display:none}
  .hero .note{top:22%; right:22px}
  .banister{width:120vw; right:-30vw}
}

/* ---------- Page-to-page: the dish grows into the company's room ---------- */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.62s; animation-timing-function:cubic-bezier(.2,.75,.15,1)}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
a.vessel{cursor:zoom-in; text-decoration:none}
.enter{min-height:44px; display:inline-flex; align-items:center; font-size:16px; text-decoration:none; border-bottom:1px solid rgba(246,239,233,.35)}
.enter:hover{border-color:var(--on-wood)}

/* ---------- Statement: the citable facts ---------- */
.statement .facts-line{max-width:880px; margin:40px 0 0; font-size:17px; line-height:1.6; color:var(--quiet); font-weight:400; letter-spacing:0; font-variation-settings:"wdth" 100}
.statement .facts-line a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--shade)}
.statement .facts-line a:hover{border-color:var(--ink)}

/* ---------- Footer directory ---------- */
.directory{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:28px; margin-top:72px; padding-top:28px; border-top:1px solid rgba(246,239,233,.18)}
.directory h3{margin:0 0 8px; font-size:15px; font-weight:500; color:var(--on-wood)}
.directory ul{list-style:none; margin:0; padding:0}
.directory a{display:flex; align-items:center; min-height:44px; font-size:15px; color:var(--on-wood-quiet); text-decoration:none}
.directory a:hover{color:var(--on-wood)}

/* ---------- A company's room ---------- */
.room-top{position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,4vw,64px); align-items:center;
  padding-top:96px; padding-bottom:72px;
  background:radial-gradient(130% 110% at 75% 20%,var(--glaze) 0%,#f2f4f3 45%,#e2e6e5 100%);
  border-radius:0 0 50% 50% / 0 0 64px 64px; box-shadow:0 40px 80px -50px rgba(40,25,15,.45)}
.room-nav{position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding-top:22px}
.room-nav a{min-height:44px; display:inline-flex; align-items:center; text-decoration:none; font-size:16px}
.room-nav .mark{font-size:19px}
.crumbs{font-size:15px; color:var(--quiet); margin:0 0 18px}
.crumbs a{text-decoration:none; border-bottom:1px solid var(--shade); display:inline-flex; align-items:center; min-height:44px}
.room-top h1{margin:0 0 22px; font-weight:280; font-size:clamp(48px,7vw,120px); line-height:.95; letter-spacing:-.04em; font-variation-settings:"wdth" 125}
.room-top .bluf{margin:0 0 30px; font-size:clamp(18px,1.4vw,21px); max-width:600px}
.room-top .actions .go{background:var(--ink); color:#fff; box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}
.room-top .actions .go:hover{background:#000}
.room-top .actions .why{border-color:var(--shade)}
.showcase{position:relative; justify-self:stretch; aspect-ratio:1.1; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 95% at 28% 18%,var(--glaze) 0%,#f3f5f4 40%,#e3e7e6 72%,var(--shade) 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.95),inset 0 -22px 46px rgba(40,30,25,.10),0 50px 90px -34px rgba(40,25,15,.45)}
.showcase .screen.phone{height:86%}
.showcase .screen.wide{width:86%}
.showcase .screen.photo{width:72%}
.showcase .note{position:absolute; left:-4%; bottom:4%; font-size:clamp(17px,1.5vw,22px); color:var(--walnut); transform:rotate(-4deg)}

.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0; margin:0; padding-top:clamp(64px,8vw,112px); padding-bottom:clamp(40px,6vw,72px)}
.facts div{padding:22px 24px 22px 0; border-top:1px solid var(--shade)}
.facts dt{font-size:15px; color:var(--quiet); margin-bottom:6px}
.facts dd{margin:0; font-size:clamp(19px,1.5vw,23px); line-height:1.35; letter-spacing:-.01em}

.quote{position:relative; background:var(--walnut) url("/assets/house/veneer.jpg") center/cover; color:var(--on-wood); padding-top:clamp(80px,10vw,150px); padding-bottom:clamp(80px,10vw,150px); margin:clamp(24px,4vw,56px) 0}
.quote::before{content:""; position:absolute; inset:0; background:rgba(20,9,4,.6)}
.quote > *{position:relative}
.quote blockquote{margin:0; max-width:1100px; font-weight:280; font-size:clamp(28px,3.4vw,54px); line-height:1.14; letter-spacing:-.025em; font-variation-settings:"wdth" 112}
.quote figcaption{margin-top:28px; font-size:16px; color:var(--on-wood-quiet)}
.quote figcaption a{color:var(--on-wood); min-height:44px; display:inline-flex; align-items:center}

.qa{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:clamp(24px,5vw,80px); padding-top:clamp(56px,7vw,96px); padding-bottom:clamp(24px,3vw,40px)}
.qa h2{margin:0; font-weight:300; font-size:clamp(28px,2.8vw,44px); line-height:1.08; letter-spacing:-.025em; font-variation-settings:"wdth" 118}
.qa p{margin:0 0 16px; max-width:640px}
.qa ul{margin:8px 0 0; padding:0; list-style:none}
.qa li a{display:flex; align-items:center; min-height:48px; border-bottom:1px solid var(--shade); text-decoration:none; justify-content:space-between; gap:16px}
.qa li a:hover{border-color:var(--ink)}

.next{display:block; position:relative; margin-top:clamp(64px,8vw,120px); background:var(--walnut) url("/assets/house/veneer.jpg") center/cover; color:var(--on-wood); text-decoration:none; padding-top:clamp(72px,9vw,130px); padding-bottom:clamp(72px,9vw,130px)}
.next::before{content:""; position:absolute; inset:0; background:rgba(20,9,4,.55); transition:background .4s}
.next:hover::before{background:rgba(20,9,4,.42)}
.next > *{position:relative; display:block}
.next small{font-size:16px; color:var(--on-wood-quiet); margin-bottom:12px}
.next strong{font-weight:250; font-size:clamp(48px,8vw,140px); line-height:.95; letter-spacing:-.04em; font-variation-settings:"wdth" 125}
.room-foot{background:var(--walnut); color:var(--on-wood-quiet); padding-top:28px; padding-bottom:28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; font-size:15px}
.room-foot a{min-height:44px; display:inline-flex; align-items:center; text-decoration:none}

@media (max-width:860px){
  .room-top{grid-template-columns:minmax(0,1fr); padding-top:88px; border-radius:0 0 50% 50% / 0 0 32px 32px}
  .showcase{order:-1; max-width:520px; width:100%; justify-self:center}
  .showcase .note{display:none}
  .qa{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Contact, set into the walnut ---------- */
.ask{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 20px; max-width:980px; margin-top:8px}
.ask .field{display:flex; flex-direction:column; gap:8px}
.ask .wide-field{grid-column:1 / -1}
.ask label{font-size:15px; color:var(--on-wood-quiet)}
.ask input,.ask select,.ask textarea{font:inherit; font-size:17px; color:var(--ink); background:linear-gradient(180deg,#fff,#eef0ef); border:0; border-radius:18px; padding:13px 16px; min-height:50px; box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.ask textarea{resize:vertical; min-height:130px; border-radius:24px}
.ask input:focus-visible,.ask select:focus-visible,.ask textarea:focus-visible{outline:2px solid var(--on-wood); outline-offset:2px}
.ask .send{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px}
.ask button{border:0; cursor:pointer; font:inherit; font-weight:500}
.ask button:disabled{opacity:.6; cursor:progress}
.form-note{margin:0; font-size:16px; color:var(--on-wood)}
.form-note a{color:var(--on-wood)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
@media (max-width:860px){.ask{grid-template-columns:minmax(0,1fr)}}