/* The white world after the phone: Apple-light, with the navy of the
   Deep Blue iPhone for the dark beats and liquid glass for what floats. */

/* ---------- what we build: four tiles you swipe through ---------- */
.bygger{ background:var(--porcelain); padding:clamp(70px, 12vh, 140px) 0 clamp(40px, 8vh, 90px); }
.bygger .sec-head{ margin-bottom:clamp(28px, 5vh, 52px); }
.tiles{ display:flex; gap:clamp(14px, 1.6vw, 22px); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:var(--gut);
  padding:6px var(--gut) 30px; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.tiles::-webkit-scrollbar{ display:none; }
.tile{ position:relative; flex:0 0 min(84vw, 420px); height:min(150vw, 600px); scroll-snap-align:start; border-radius:32px; overflow:hidden; isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 30px 60px -36px rgba(14,15,16,.4); }
.tile-t{ position:relative; z-index:2; padding:clamp(24px, 2.4vw, 32px); }
.tile-t .mono{ font:400 11.5px/16px var(--mono); opacity:.7; margin-bottom:12px; }
.tile-t h3{ font:500 clamp(26px, 2.4vw, 34px)/1.05 var(--sans); letter-spacing:-.035em; max-width:14ch; }
.tile-t p:last-child{ margin-top:12px; font:400 15px/1.45 var(--sans); max-width:30ch; opacity:.78; }
.tile-v{ position:absolute; inset:0; z-index:1; background:50% 100% / cover no-repeat; }
html.pg-js .tile-film{ opacity:0; }
/* Safari flickers a video inside a rounded, scrolling, clipped box unless
   the box is its own layer with its own mask */
.tile{ -webkit-mask-image:-webkit-radial-gradient(white, black); transform:translateZ(0); }
.tile-film{ -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:translateZ(0); }
/* each tile is a film, filling it; what matters in it sits low, under the words */
.tile-film{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 100%; }
/* wider screens get taller tiles, so the film keeps its place under the words */
@media (min-width:700px){ .tile{ height:clamp(600px, 82vh, 760px); } }
.tile-apps{ background:#05080F; color:var(--porcelain); }
.tile-sys{ background:#0B0908; color:var(--porcelain); }
.tile-int{ background:#05080F; color:var(--porcelain); }
.tile-web{ background:#05080F; color:var(--porcelain); }
.tiles-nav{ display:none; gap:10px; justify-content:flex-end; padding:0 var(--gut); max-width:1440px; margin:0 auto; }
@media (hover:hover) and (min-width:900px){ .tiles-nav{ display:flex; } }
.tn{ width:44px; height:44px; border-radius:22px; display:grid; place-items:center; color:var(--obsidian);
  background:linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(14,15,16,.08), 0 6px 16px -8px rgba(14,15,16,.4);
  transition:transform .3s var(--ease), opacity .3s; }
.tn svg{ width:16px; height:16px; }
.tn-prev svg{ transform:scaleX(-1); }
.tn:disabled{ opacity:.35; cursor:default; }
@media (hover:hover){ .tn:not(:disabled):hover{ transform:scale(1.06); } }


/* ---------- why Lesreg: what a job costs ----------
   Left: the heading and three benefits. Right: a Smoke glass panel (tint
   .5, frost, the 1 px specular edge lit from -45 deg) floating over coloured
   light it blurs; in it the kinds of job as LA31 Control / Chip (44 px
   capsules; the chosen one solid porcelain, the rest glass), LA31 Data /
   Figure for what you keep and two LA31 Data / Ledger rows. Under it all,
   Lesreg's typical hours per kind of job on one scale of 0-300 hours. */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.rc{ position:relative; overflow:hidden; color:var(--porcelain); background:radial-gradient(80% 70% at 70% 100%, #2B3F7C, #101A33 50%, #05080F); background-color:#05080F; }
.rc-in{ position:relative; max-width:1440px; margin:0 auto; padding:clamp(96px, 12vh, 128px) 72px clamp(56px, 8vh, 88px);
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); grid-template-areas:"l glass" "more more" "src src"; column-gap:clamp(32px, 5vw, 96px); align-items:center; }
.rc-l{ grid-area:l; }
.rc-l .label{ color:rgba(246,244,239,.6); }
.rc-h{ margin-top:16px; font:500 64px/64px var(--sans); letter-spacing:-.035em; }
.rc-h .acc{ display:block; color:rgba(246,244,239,.72); }
.rc-lead{ margin-top:24px; max-width:30em; font:400 20px/30px var(--sans); letter-spacing:-.005em; color:rgba(246,244,239,.78); }
.rc-ben{ list-style:none; margin:32px 0 0; padding:0; display:grid; gap:12px; }
.rc-ben li{ display:flex; align-items:center; gap:12px; font:400 16px/26px var(--sans); color:var(--porcelain); }
.rc-ck{ flex:none; width:16px; height:16px; fill:none; stroke:var(--porcelain); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* the glass, and the light it is held over */
.rc-glass{ grid-area:glass; position:relative; }
.rc-bloom{ position:absolute; inset:-12% -10%; z-index:0; pointer-events:none; filter:blur(10px);
  background:radial-gradient(34% 40% at 22% 30%, rgba(36,54,232,.85), transparent 70%), radial-gradient(30% 36% at 82% 72%, rgba(242,138,62,.55), transparent 70%),
    radial-gradient(28% 32% at 70% 18%, rgba(110,170,255,.5), transparent 70%); animation:rc-drift 14s var(--ease) infinite alternate; }
@keyframes rc-drift{ to{ transform:translate3d(3%, -2%, 0) rotate(4deg); } }
.rc-panel{ position:relative; z-index:1; isolation:isolate; padding:32px; border-radius:32px; box-shadow:12px 24px 56px rgba(13,13,15,.35); }
.rc-panel::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:rgba(14,15,16,.5);
  -webkit-backdrop-filter:blur(28px) saturate(1.5); backdrop-filter:blur(28px) saturate(1.5); }
.rc-panel::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.12) 45%, rgba(255,255,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }

/* LA31 Control / Chip: 44 px capsules; chosen = solid porcelain */
.rc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.rc-chip{ position:relative; isolation:isolate; height:44px; padding:0 18px; border:0; border-radius:22px; background:none; cursor:pointer; white-space:nowrap;
  font:400 14px/16px var(--sans); color:rgba(246,244,239,.85); transition:color 180ms var(--ease); -webkit-tap-highlight-color:transparent; }
.rc-chip::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:rgba(255,255,255,.08); transition:background 180ms var(--ease), transform 180ms var(--ease); }
.rc-chip::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.08) 45%, rgba(255,255,255,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
@media (hover:hover){ .rc-chip:not(.on):hover::before{ background:rgba(255,255,255,.14); } }
.rc-chip.on{ color:var(--obsidian); font-weight:500; }
.rc-chip.on::before{ background:var(--porcelain); box-shadow:3px 6px 16px rgba(13,13,15,.25); }
.rc-chip:active::before{ transform:scale(.96); }
.rc-chip:focus-visible{ outline:none; box-shadow:0 0 0 2px #101A33, 0 0 0 4px var(--ultra); }

/* LA31 Data / Figure on the glass: Lesreg's own price, the hero */
.rc-fig{ margin-top:28px; }
.rc-fig .label{ color:rgba(246,244,239,.6); }
.rc-v{ display:flex; align-items:flex-start; margin-top:14px; white-space:nowrap; }
.rc-v > span{ font:300 120px/112px var(--sans); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.rc-v small{ margin:22px 0 0 14px; font:500 20px/24px var(--sans); color:rgba(246,244,239,.8); }
.rc-d{ margin-top:14px; font:400 12.5px/18px var(--sans); letter-spacing:.005em; color:rgba(246,244,239,.75); }

/* the two prices as bars on one scale: the agency's runs the whole way,
   Lesreg's barely starts */
.rc-bars{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:18px; }
.rc-bar{ display:grid; grid-template-columns:minmax(0, 1fr) auto; row-gap:8px; align-items:baseline; }
.rc-bn{ display:flex; align-items:baseline; gap:10px; font:400 14px/22px var(--sans); white-space:nowrap; }
.rc-bn small{ font:400 12.5px/18px var(--sans); color:rgba(246,244,239,.55); }
.rc-ba{ font:400 14px/22px var(--sans); font-variant-numeric:tabular-nums; text-align:right; }
.rc-bt{ grid-column:1 / -1; position:relative; height:10px; border-radius:5px; background:rgba(255,255,255,.07); overflow:hidden; }
.rc-bt > i{ position:absolute; left:0; top:0; bottom:0; border-radius:inherit; transform-origin:0 50%; transition:transform 1.4s cubic-bezier(.2,.8,.2,1); }
.rc-bar.them .rc-bn, .rc-bar.them .rc-ba{ color:rgba(246,244,239,.7); }
.rc-bar.them .rc-bt > i{ width:100%; background:linear-gradient(90deg, rgba(246,244,239,.22), rgba(246,244,239,.42)); }
.rc-bar.us .rc-bn > span{ font-weight:500; }
.rc-bar.us .rc-ba{ font-weight:500; }
.rc-bar.us .rc-bt > i{ width:calc(100% * 50 / 900); min-width:10px; background:var(--porcelain); box-shadow:0 0 12px rgba(246,244,239,.5); }
html.pg-js .rc:not(.rc-seen) .rc-bt > i{ transform:scaleX(0); }
.rc-bar.us .rc-bt > i{ transition-duration:.5s; transition-delay:.9s; }

/* what it comes to for them: what they save, said in so many words */
.rc-save{ display:flex; align-items:center; gap:10px; margin-top:28px; padding:16px 20px; border-radius:20px; background:var(--porcelain); color:var(--obsidian);
  font:500 16px/22px var(--sans); box-shadow:6px 12px 32px rgba(13,13,15,.3); }
.rc-save svg{ flex:none; width:20px; height:20px; padding:3px; border-radius:50%; background:var(--ultra); fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rc-save b{ margin-left:auto; font:500 24px/30px var(--sans); letter-spacing:-.015em; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ .rc-bt > i{ transition:none; } }

/* for a job not among them: a tailored estimate, and the way to ask */
.rc-more{ grid-area:more; display:flex; align-items:center; justify-content:space-between; gap:32px; margin-top:clamp(48px, 8vh, 80px); padding-top:32px; border-top:1px solid rgba(246,244,239,.14); }
.rc-more h3{ font:500 24px/30px var(--sans); letter-spacing:-.015em; }
.rc-more p{ margin-top:8px; max-width:40em; font:400 16px/26px var(--sans); color:rgba(246,244,239,.75); }
.rc-more .btn{ flex:none; }
.rc-src{ grid-area:src; margin-top:24px; font:400 12.5px/18px var(--sans); letter-spacing:.005em; color:rgba(246,244,239,.5); }

@media (max-width:1199px){
  .rc-in{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"l" "glass" "more" "src"; row-gap:44px; padding:clamp(96px, 12vh, 120px) 40px 64px; }
  .rc-more{ margin-top:0; }
  .rc-src{ margin-top:-24px; }
}
@media (max-width:767px){
  .rc-in{ padding:80px 20px 48px; row-gap:32px; }
  .rc-h{ font-size:40px; line-height:44px; letter-spacing:-.025em; }
  .rc-lead{ margin-top:16px; font-size:16px; line-height:26px; }
  .rc-ben{ margin-top:20px; gap:8px; }
  .rc-ben li{ font-size:15px; line-height:24px; }
  .rc-panel{ padding:20px; border-radius:26px; }
  /* chips scroll sideways on a phone, as the library says */
  /* they stay inside the glass, and fade out at its edge where more follow */
  .rc-chips{ flex-wrap:nowrap; overflow-x:auto; margin:0 -20px; padding:2px 20px 6px; scrollbar-width:none; border-radius:0;
    -webkit-mask:linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent); mask:linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent); }
  .rc-panel{ overflow:hidden; }
  .rc-chips::-webkit-scrollbar{ display:none; }
  .rc-fig{ margin-top:18px; }
  .rc-v > span{ font-size:min(19vw, 88px); line-height:min(19vw, 88px); }
  .rc-v small{ margin:18px 0 0 10px; }
  .rc-save{ padding:14px 16px; }
  .rc-save b{ font-size:20px; line-height:26px; }
  .rc-more{ flex-direction:column; align-items:flex-start; gap:20px; padding-top:28px; }
  .rc-more h3{ font-size:20px; line-height:26px; }
  .rc-more p{ font-size:15px; line-height:24px; }
}
@media (prefers-reduced-motion: reduce){ .rc-bloom{ animation:none; } .rc-chip::before{ transition:none; } }

/* ---------- talk to us ----------
   A stage the navy of the tiles, r 32, on the paper. The words left: H1
   64/64 with the accent, Lead 20/30, the kinds of job as LA31 Chips on the
   glass and the LA32 button. Right, the iPhone of the opening rising from
   the stage's lower edge, on it Messages: the message to Lesreg types itself
   into the field, goes, and is answered. */
.kt{ background:var(--porcelain); padding:clamp(72px, 12vh, 140px) 0; }
.kt-stage{ position:relative; max-width:1296px; margin:0 auto; border-radius:32px; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 500px); column-gap:48px; color:var(--porcelain);
  background:radial-gradient(70% 90% at 75% 115%, #2B3F7C, #101A33 55%, #05080F); background-color:#05080F;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 30px 60px -36px rgba(14,15,16,.4); }
@media (max-width:1440px){ .kt-stage{ margin:0 var(--gut); } }
/* the light behind the phone, drifting slowly */
.kt-stage::before{ content:""; position:absolute; inset:-10%; z-index:-1; pointer-events:none; filter:blur(12px);
  background:radial-gradient(28% 36% at 74% 40%, rgba(36,54,232,.55), transparent 70%), radial-gradient(24% 30% at 90% 78%, rgba(242,138,62,.3), transparent 70%), radial-gradient(30% 40% at 12% 100%, rgba(80,140,220,.22), transparent 70%);
  animation:kt-drift 14s ease-in-out infinite alternate; }
/* (paused while off screen: page.js marks what is seen) */
.rc:not(.vis) .rc-bloom, .kt-stage:not(.vis)::before{ animation-play-state:paused; }
@keyframes kt-drift{ to{ transform:translate3d(-3%, 2%, 0) scale(1.05); } }
.kt-l{ padding:72px 0 72px 72px; align-self:center; }
.kt .label{ color:rgba(246,244,239,.6); }
.kt-h{ margin-top:16px; font:500 64px/64px var(--sans); letter-spacing:-.035em; }
.kt-h .acc{ display:block; color:rgba(246,244,239,.72); }
.kt-lead{ margin-top:24px; max-width:27em; font:400 20px/30px var(--sans); letter-spacing:-.005em; color:rgba(246,244,239,.78); }
.kt-chips{ margin-top:32px; }
.kt-go{ display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px; margin-top:32px; }
.kt-mail{ font:400 16px/26px var(--sans); color:rgba(246,244,239,.7); text-decoration:underline; text-decoration-color:rgba(246,244,239,.3); text-underline-offset:4px; }
@media (hover:hover){ .kt-mail:hover{ color:var(--porcelain); } }

/* the whole phone, so the field it is typed into can be seen */
.kt-ph{ position:relative; align-self:center; display:grid; place-items:center; padding:56px 0; }
.kt-ph .dev-iph{ width:330px; filter:drop-shadow(0 30px 60px rgba(0,0,0,.45)); }

/* Messages, in points of a 402-pt screen as cqw */
.ktm{ position:absolute; inset:0; display:grid; grid-template-rows:auto 1fr auto auto; grid-template-columns:minmax(0, 1fr); background:#fff; color:#000;
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; letter-spacing:-.1cqw; }
.ktm-nav{ height:37cqw; padding:14.4cqw 3cqw 2.4cqw; display:grid; grid-template-columns:20cqw 1fr 20cqw; align-items:end;
  background:rgba(249,249,249,.94); box-shadow:0 .12cqw 0 rgba(0,0,0,.18); }
.ktm-back{ align-self:start; margin-top:3cqw; color:#007aff; }
.ktm-back svg{ width:3cqw; height:5cqw; }
.ktm-who{ display:flex; flex-direction:column; align-items:center; gap:1.2cqw; font-size:3.2cqw; }
.ktm-av{ width:13cqw; height:13cqw; border-radius:50%; background:#0E0F10; display:grid; place-items:center; }
.ktm-av svg{ width:6.4cqw; height:6.4cqw; }
.ktm-body{ display:flex; flex-direction:column; gap:1.4cqw; padding:4cqw 3.5cqw; overflow:hidden; }
.ktm-time{ text-align:center; font-size:2.8cqw; line-height:1.35; color:#8e8e93; margin-bottom:2cqw; }
.ktm-time b{ font-weight:600; }
.ktm-b{ max-width:76%; padding:2.2cqw 3.4cqw; border-radius:4.6cqw; font-size:4.1cqw; line-height:1.28; }
.ktm-b.me{ align-self:flex-end; background:#0A84FF; color:#fff; border-bottom-right-radius:1.4cqw; }
.ktm-b.them{ align-self:flex-start; background:#e9e9eb; color:#000; border-bottom-left-radius:1.4cqw; }
.ktm-del{ align-self:flex-end; font-size:2.8cqw; color:#8e8e93; margin:-.6cqw .6cqw 1cqw; }
.ktm-dots{ display:flex; gap:1.1cqw; padding:3cqw 3.6cqw; }
.ktm-dots i{ width:2cqw; height:2cqw; border-radius:50%; background:#8e8e93; animation:dot 1.2s infinite ease-in-out; }
.ktm-dots i:nth-child(2){ animation-delay:.15s; } .ktm-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes dot{ 0%, 60%, 100%{ opacity:.35; transform:none; } 30%{ opacity:1; transform:translateY(-.6cqw); } }
.ktm-bar{ display:flex; align-items:center; gap:2.4cqw; padding:2.4cqw 3.5cqw; }
/* the iOS keyboard, in points of the 402-pt screen; the key being typed lights */
.ktm-kb{ overflow:hidden; padding:2cqw .8cqw 13cqw; background:#D1D3D9; display:flex; flex-direction:column; gap:2.9cqw; font-family:inherit; }
.ktm-row{ display:flex; justify-content:center; gap:1.2cqw; }
.ktm-k{ flex:1 1 0; min-width:0; max-width:8.6cqw; height:10.6cqw; border-radius:1.4cqw; background:#fff; box-shadow:0 .25cqw 0 rgba(0,0,0,.3); display:grid; place-items:center; font-size:5.6cqw; line-height:1; color:#000; transition:background .12s; }
.ktm-k.fn{ flex:0 0 11.5cqw; max-width:none; background:#ABB0BA; font-size:3.8cqw; }
.ktm-k.sp{ flex:1 1 auto; max-width:none; font-size:3.8cqw; }
.ktm-k.ret{ flex:0 0 22cqw; max-width:none; background:#ABB0BA; font-size:3.8cqw; }
.ktm-k.hit{ background:#ABB0BA; transition:none; }
.ktm-plus{ flex:none; width:8cqw; height:8cqw; border-radius:50%; background:#e9e9eb; display:grid; place-items:center; color:#3c3c43; font-size:5cqw; line-height:1; }
.ktm-field{ position:relative; flex:1; min-height:8.4cqw; border-radius:4.2cqw; border:.25cqw solid #c7c7cc; display:flex; align-items:center; padding:1.2cqw 9cqw 1.2cqw 3.2cqw; font-size:3.8cqw; line-height:1.3; color:#000; }
.ktm-ph{ color:#b5b5ba; }
.ktm-typed:not(:empty) ~ .ktm-ph{ display:none; }
.ktm-caret{ display:none; width:.35cqw; height:4.4cqw; margin-left:.2cqw; background:#007aff; animation:caret 1s steps(1) infinite; }
.kt-typing .ktm-caret{ display:inline-block; }
@keyframes caret{ 50%{ opacity:0; } }
.ktm-up{ position:absolute; right:1cqw; bottom:1cqw; width:6.4cqw; height:6.4cqw; border-radius:50%; background:#007aff; display:grid; place-items:center; transform:scale(0); transition:transform .25s cubic-bezier(.2,1.4,.3,1); }
.ktm-up svg{ width:3.6cqw; height:3.6cqw; }
.kt-ready .ktm-up{ transform:none; }

/* the conversation, step by step (set by page.js) */
.ktm-b.me, .ktm-del, .ktm-dots, .ktm-re{ display:none; }
.kt-m1 .ktm-b.me, .kt-m1 .ktm-del{ display:block; animation:kt-pop .5s cubic-bezier(.2,1.3,.3,1) both; }
.kt-m1 .ktm-b.me{ transform-origin:100% 100%; }
.kt-m1 .ktm-del{ animation-delay:.25s; }
.kt-m2 .ktm-dots{ display:flex; animation:kt-pop .4s cubic-bezier(.2,1.3,.3,1) both; transform-origin:0 100%; }
.kt-m3 .ktm-dots{ display:none; }
.kt-m3 .ktm-re{ display:block; animation:kt-pop .5s cubic-bezier(.2,1.3,.3,1) both; transform-origin:0 100%; }
@keyframes kt-pop{ from{ opacity:0; transform:translate3d(0, 3cqw, 0) scale(.9); } }

@media (max-width:1199px){
  .kt-stage{ grid-template-columns:minmax(0, 1fr) minmax(0, 400px); column-gap:24px; }
  .kt-l{ padding:56px 0 56px 48px; }
  .kt-ph .dev-iph{ width:300px; }
}
@media (max-width:899px){
  .kt-stage{ grid-template-columns:minmax(0, 1fr); min-height:0; }
  .kt-l{ padding:48px 40px 8px; }
  .kt-ph{ padding:40px 0 48px; }
}
@media (max-width:767px){
  .kt{ padding:56px 0; }
  .kt-stage{ border-radius:28px; }
  .kt-l{ padding:40px 20px 0; }
  .kt-h{ font-size:40px; line-height:44px; letter-spacing:-.025em; }
  .kt-lead{ margin-top:16px; font-size:16px; line-height:26px; }
  .kt-chips{ margin:24px -20px 0; flex-wrap:nowrap; overflow-x:auto; padding:2px 20px 6px; scrollbar-width:none;
    -webkit-mask:linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent); mask:linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent); }
  .kt-chips::-webkit-scrollbar{ display:none; }
  .kt-go{ margin-top:24px; }
  .kt-send{ width:100%; justify-content:space-between; }
  .kt-mail{ font-size:15px; }
  .kt-ph{ padding:36px 0 32px; }
  .kt-ph .dev-iph{ width:250px; }
}
@media (prefers-reduced-motion: reduce){ .kt-stage::before{ animation:none; } }

/* ---------- Callster: the owner texts, it handles it ---------- */
.case-cs .cs-vis{ display:grid; place-items:center; padding:0; }
.case-cs .cs-phone{ width:min(70%, 330px); }
.case-cs .dev-iph{ position:relative; left:auto; bottom:auto; }
.msg{ position:absolute; inset:0; display:grid; grid-template-rows:auto 1fr auto; background:#fff; color:#000;
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; letter-spacing:-.1cqw; }
.msg-nav{ position:relative; height:37cqw; padding:14.4cqw 3cqw 2.4cqw; display:grid; grid-template-columns:20cqw 1fr 20cqw; align-items:end;
  background:rgba(249,249,249,.94); box-shadow:0 .12cqw 0 rgba(0,0,0,.18); }
.msg-back{ align-self:start; margin-top:3cqw; display:flex; align-items:center; gap:.8cqw; color:#007aff; }
.msg-back svg{ width:3cqw; height:5cqw; }
.msg-back b{ min-width:6.5cqw; height:5.5cqw; padding:0 1.7cqw; border-radius:2.8cqw; background:#007aff; color:#fff; font:500 3.5cqw/5.5cqw inherit; text-align:center; }
.msg-who{ display:flex; flex-direction:column; align-items:center; gap:1.2cqw; font-size:3.2cqw; }
.msg-av{ width:13cqw; height:13cqw; border-radius:50%; background:radial-gradient(circle at 60% 55%, #E86A4A 0 14%, #1d1d2b 15% 30%, #c9b9a6 31% 55%, #e8e0d6 56%); }
.msg-cam{ justify-self:end; align-self:start; margin-top:3cqw; color:#007aff; }
.msg-cam svg{ width:6.5cqw; height:4cqw; }
.msg-body{ display:flex; flex-direction:column; justify-content:flex-end; gap:1.4cqw; padding:3cqw 3.5cqw; overflow:hidden; }
.msg-time{ text-align:center; font-size:2.8cqw; line-height:1.35; color:#8e8e93; margin-bottom:2cqw; }
.msg-time b{ font-weight:600; }
.bub{ max-width:74%; padding:2.2cqw 3.4cqw; border-radius:4.6cqw; font-size:4.1cqw; line-height:1.28; }
.bub.me{ align-self:flex-end; background:#34c759; color:#fff; border-bottom-right-radius:1.4cqw; }
.bub.them{ align-self:flex-start; background:#e9e9eb; color:#000; border-bottom-left-radius:1.4cqw; }
.msg-del{ align-self:flex-end; font-size:2.8cqw; color:#8e8e93; margin:-.6cqw .6cqw 1cqw; }
.typing{ display:flex; gap:1.1cqw; padding:3cqw 3.6cqw; }
.typing i{ width:2cqw; height:2cqw; border-radius:50%; background:#8e8e93; animation:dot 1.2s infinite ease-in-out; }
.typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes dot{ 0%, 60%, 100%{ opacity:.35; transform:none; } 30%{ opacity:1; transform:translateY(-.6cqw); } }
.msg-bar{ display:flex; align-items:center; gap:2.4cqw; padding:2.4cqw 3.5cqw 7.5cqw; }
.msg-plus{ width:8cqw; height:8cqw; border-radius:50%; background:#e9e9eb; display:grid; place-items:center; color:#3c3c43; font-size:5cqw; line-height:1; }
.msg-field{ flex:1; height:8.4cqw; border-radius:4.2cqw; border:.25cqw solid #c7c7cc; display:flex; align-items:center; padding:0 3.2cqw; color:#b5b5ba; font-size:3.8cqw; }
/* the conversation plays when it is seen */
html.pg-js .msg .bub, html.pg-js .msg .msg-del{ opacity:0; transform:translate3d(0, 3cqw, 0) scale(.96); transition:opacity .35s ease, transform .55s cubic-bezier(.2,1.3,.3,1); }
html.pg-js .msg .typing{ display:none; }
html.pg-js .msg.m1 .bub.me, html.pg-js .msg.m1 .msg-del{ opacity:1; transform:none; }
html.pg-js .msg.m2 .typing{ display:flex; opacity:1; transform:none; }
html.pg-js .msg.m3 .typing{ display:none; }
html.pg-js .msg.m3 .reply{ opacity:1; transform:none; }

/* ---------- process ---------- */
.proc{ background:var(--porcelain); padding:clamp(90px, 14vh, 160px) 0; }
.proc .sec-head{ margin-bottom:clamp(40px, 7vh, 72px); }
.proc-l{ position:relative; list-style:none; max-width:1440px; margin:0 auto; padding:0 var(--gut); display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(14px, 2vw, 28px); }
.proc-l .steps-line{ position:absolute; left:var(--gut); right:var(--gut); top:9px; height:1px; background:var(--travertine); }
.proc-l .steps-line > i{ position:absolute; inset:0; background:var(--navy-700); transform-origin:0 50%; transform:scaleX(0); }
.proc-l .step{ position:relative; padding-top:44px; display:flex; flex-direction:column; gap:8px; }
.proc-l .step b{ font:500 clamp(24px, 2.2vw, 34px)/1.05 var(--sans); letter-spacing:-.035em; }
.proc-l .step p{ font:400 15.5px/1.5 var(--sans); color:var(--graphite); max-width:28ch; }
.proc-l .step.on::before{ background:var(--deep); box-shadow:0 0 0 4px var(--ultra-tint); }
@media (max-width:760px){
  .proc-l{ grid-template-columns:1fr; gap:30px; }
  .proc-l .steps-line{ left:calc(var(--gut) + 7px); right:auto; top:9px; bottom:40px; width:1px; height:auto; }
  .proc-l .steps-line > i{ transform-origin:50% 0; transform:scaleY(0); }
  .proc-l .step{ padding:0 0 0 40px; }
  .proc-l .step::before{ top:6px; }
}

/* ---------- talk to us, on navy ---------- */
.cta{ position:relative; overflow:hidden; color:var(--porcelain);
  background:radial-gradient(80% 90% at 85% 10%, var(--deep), transparent 60%), radial-gradient(70% 80% at 0% 100%, var(--navy-700), transparent 60%), var(--navy-950); }
.cta-in{ max-width:1440px; margin:0 auto; padding:clamp(110px, 20vh, 220px) var(--gut) clamp(80px, 14vh, 140px); }
.cta .label{ color:var(--travertine); display:block; margin-bottom:24px; }
.cta-h{ font:500 clamp(54px, 9.6vw, 168px)/.92 var(--sans); letter-spacing:-.05em; }
.cta-mail{ display:inline-block; margin-top:clamp(28px, 5vh, 48px); font:400 clamp(22px, 2.6vw, 40px)/1.2 var(--sans); letter-spacing:-.02em; border-bottom:1px solid rgba(246,244,239,.4); padding-bottom:6px; }
.cta-row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:34px; color:var(--travertine); }

/* ---------- what we make: one idea, and all it can become ----------
   One long scene on navy, the words on one side and the thing being made
   on the other: an icon opens into an app, a system stands behind it, the
   tools it is connected to, the code it is built of, the search that finds
   it. Glass only for what floats; ultramarine only for what is now. */
.alt{ position:relative; height:1150vh; height:1150svh; background:#05070D; color:var(--porcelain); }
.alt-pin{ position:sticky; top:0; height:100vh; height:100lvh; overflow:hidden; }
.alt-glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 55% at 68% 56%, rgba(43,63,124,.55), rgba(16,26,51,.35) 45%, rgba(5,7,13,0) 75%),
             radial-gradient(40% 30% at 20% 20%, rgba(36,54,232,.12), rgba(36,54,232,0) 70%); }
.alt-glow2{ position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(60vmax 50vmax at var(--gx, 50%) var(--gy, 50%), rgba(43,63,124,.5), rgba(16,26,51,.32) 45%, rgba(5,7,13,0) 75%); }
.alt-words{ position:absolute; z-index:3; left:var(--gut); top:50%; width:min(36vw, 540px); transform:translateY(-50%); }
.alt-label{ color:var(--ash); margin-bottom:22px; display:block; }
.alt-say{ list-style:none; margin:0; padding:0; position:relative; height:clamp(220px, 34vh, 320px); }
.alt-say > li{ position:absolute; left:0; right:0; top:0; }
.alt-say > li > div{ will-change:transform, opacity; }
html.pg-js .alt-say > li > div{ opacity:0; }
.alt-h{ font:500 clamp(34px, min(4vw, 7vh), 68px)/1.02 var(--sans); letter-spacing:-.045em; text-wrap:balance; }
.alt-h em{ font-family:var(--accent); font-style:italic; font-weight:300; letter-spacing:-.025em; }
.alt-p{ margin-top:clamp(14px, 2.4vh, 22px); max-width:34ch; font:400 clamp(15px, 1.2vw, 19px)/1.5 var(--sans); color:var(--travertine); }
.alt-end{ position:absolute; z-index:4; left:var(--gut); top:50%; width:min(40vw, 600px); transform:translateY(-50%); opacity:0; pointer-events:none; }
.alt-end.on{ pointer-events:auto; }

.alt-obj{ position:absolute; z-index:2; left:40vw; right:var(--gut); top:15%; bottom:5%; --u:40px; }
/* no will-change here: Safari keeps a will-change layer at the sharpness it
   was first drawn at, so anything that grows would go soft */
.alt-obj > *{ position:absolute; left:50%; top:50%; }
html.pg-js .alt-obj > *{ opacity:0; }
/* the icon is laid out at the largest it is ever shown (2.4 times its size)
   and only ever scaled down, so it stays sharp */
.a-icon{ width:calc(var(--u) * 5.28); height:calc(var(--u) * 5.28); margin:calc(var(--u) * -2.64) 0 0 calc(var(--u) * -2.64); border-radius:22.5%;
  box-shadow:0 43px 96px rgba(0,0,0,.45), 0 0 0 2.4px rgba(255,255,255,.08); }
.a-ph{ width:calc(var(--u) * 2.9); aspect-ratio:1120 / 2336; margin:calc(var(--u) * -3.024) 0 0 calc(var(--u) * -1.45); filter:drop-shadow(0 24px 40px rgba(0,0,0,.5)); }
.a-ph .a-frame{ position:absolute; inset:0; width:100%; height:100%; }
.a-scr{ position:absolute; left:5.37%; top:2.4%; width:89.17%; height:95.2%; border-radius:13% / 6.2%; overflow:hidden; background:#000; }
.a-scr img{ width:100%; height:100%; object-fit:cover; }
.a-pad{ width:calc(var(--u) * 10); margin:calc(var(--u) * -3.615) 0 0 calc(var(--u) * -5); }
.a-pad img{ width:100%; height:auto; display:block; }
.a-lines{ left:0; top:0; width:100%; height:100%; overflow:visible; }
.a-lines path{ fill:none; stroke:rgba(216,209,197,.7); stroke-width:1.2; stroke-dasharray:1; vector-effect:non-scaling-stroke; }
.a-lines circle{ fill:var(--ultra); }
/* a tool: its mark on a solid core inside an even rim of glass, the light
   from −45° on the rim's edge; the core is baked with the mark centred */
.a-logo{ width:calc(var(--u) * 1.25); height:calc(var(--u) * 1.25); margin:calc(var(--u) * -.625) 0 0 calc(var(--u) * -.625); border-radius:50%; padding:calc(var(--u) * .085); box-sizing:border-box;
  background:linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.08) 48%, rgba(255,255,255,.2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px rgba(0,0,0,.5); }
.a-logo img{ display:block; width:100%; height:100%; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.35); }
/* the code: Smoke glass, a window of it */
.a-code{ width:calc(var(--u) * 8.2); margin:calc(var(--u) * -2.5) 0 0 calc(var(--u) * -4.1); border-radius:calc(var(--u) * .5); overflow:hidden;
  background:linear-gradient(165deg, rgba(40,42,48,.9), rgba(14,15,16,.94)); color:var(--porcelain);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08), 9px 18px 44px rgba(0,0,0,.5); }
.a-code-bar{ display:flex; align-items:center; gap:calc(var(--u) * .12); height:calc(var(--u) * .62); padding:0 calc(var(--u) * .3); border-bottom:1px solid rgba(255,255,255,.07);
  font:400 calc(var(--u) * .22)/1 var(--mono); color:var(--ash); }
.a-code-bar i{ width:calc(var(--u) * .16); height:calc(var(--u) * .16); border-radius:50%; background:rgba(255,255,255,.18); }
.a-code-bar span{ margin-left:auto; margin-right:auto; }
.a-code pre{ margin:0; padding:calc(var(--u) * .34) calc(var(--u) * .4) calc(var(--u) * .42); font:400 calc(var(--u) * .3)/1.7 var(--mono); white-space:pre; }
.a-code .l{ display:block; clip-path:inset(0 100% 0 0); color:var(--porcelain); }
.a-code .l.c, .a-code .l s{ color:var(--ash); text-decoration:none; }
.a-code .l b{ font-weight:400; color:#fff; }
.a-code .caret{ display:inline-block; width:calc(var(--u) * .1); height:calc(var(--u) * .3); margin-left:2px; vertical-align:-2px; background:var(--ultra); }
/* found: a search, its first answer, and an assistant's */
.a-find{ width:calc(var(--u) * 8.4); margin:calc(var(--u) * -2.7) 0 0 calc(var(--u) * -4.2); display:flex; flex-direction:column; gap:calc(var(--u) * .26); }
.a-q{ height:calc(var(--u) * 1); border-radius:calc(var(--u) * .5); display:flex; align-items:center; gap:calc(var(--u) * .2); padding:0 calc(var(--u) * .34);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,244,239,.92)); color:var(--obsidian); font:400 calc(var(--u) * .3)/1 var(--sans);
  box-shadow:inset 0 1px 0 #fff, 6px 12px 32px rgba(0,0,0,.35); white-space:nowrap; overflow:hidden; }
.a-q svg{ width:calc(var(--u) * .34); height:calc(var(--u) * .34); flex:none; fill:none; stroke:var(--graphite); stroke-width:2; stroke-linecap:round; }
.a-q .a-typed::after{ content:""; display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-.15em; background:var(--ultra); }
.a-res{ display:flex; gap:calc(var(--u) * .24); padding:calc(var(--u) * .3) calc(var(--u) * .34); border-radius:calc(var(--u) * .36); background:#fff; color:var(--obsidian);
  box-shadow:inset 0 0 0 1px var(--travertine), 6px 12px 32px rgba(0,0,0,.3); }
.a-n{ flex:none; width:calc(var(--u) * .44); height:calc(var(--u) * .44); border-radius:50%; display:grid; place-items:center; background:var(--ultra); color:#fff; font:400 calc(var(--u) * .22)/1 var(--mono); }
.a-site{ display:flex; align-items:center; gap:calc(var(--u) * .14); }
.a-site img{ width:calc(var(--u) * .42); height:calc(var(--u) * .42); border-radius:22%; }
.a-site b{ display:block; font:500 calc(var(--u) * .23)/1.2 var(--sans); }
.a-url{ font:400 calc(var(--u) * .2)/1.3 var(--mono); color:var(--graphite); }
.a-links{ display:flex; flex-wrap:wrap; gap:calc(var(--u) * .1); margin-top:calc(var(--u) * .16); }
.a-links span{ height:calc(var(--u) * .44); padding:0 calc(var(--u) * .2); border-radius:calc(var(--u) * .22); display:inline-flex; align-items:center;
  box-shadow:inset 0 0 0 1px var(--travertine); font:400 calc(var(--u) * .22)/1 var(--sans); color:var(--obsidian); }
.a-t{ margin-top:calc(var(--u) * .06); font:500 calc(var(--u) * .32)/1.2 var(--sans); letter-spacing:-.01em; }
.a-d{ margin-top:calc(var(--u) * .06); font:400 calc(var(--u) * .24)/1.4 var(--sans); color:var(--graphite); }
.a-ai{ padding:calc(var(--u) * .3) calc(var(--u) * .34); border-radius:calc(var(--u) * .36); color:var(--porcelain);
  background:linear-gradient(165deg, rgba(52,54,62,.92), rgba(20,22,28,.94)); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08), 6px 12px 32px rgba(0,0,0,.35); }
.a-spark{ display:flex; align-items:center; gap:calc(var(--u) * .12); font:400 calc(var(--u) * .2)/1 var(--mono); color:var(--travertine); text-transform:uppercase; letter-spacing:.06em; }
.a-spark svg{ width:calc(var(--u) * .28); height:calc(var(--u) * .28); fill:#8E99FF; }
.a-ai p{ margin-top:calc(var(--u) * .14); font:400 calc(var(--u) * .27)/1.45 var(--sans); }

@media (max-aspect-ratio:1/1), (max-width:760px){
  .alt-words{ left:20px; right:20px; width:auto; top:calc(86px + env(safe-area-inset-top)); transform:none; }
  .alt-label{ margin-bottom:14px; }
  .alt-say{ height:150px; }
  .alt-h{ font-size:min(8.2vw, 34px); line-height:1.08; }
  .alt-p{ margin-top:10px; font-size:15px; line-height:1.45; }
  .alt-obj{ left:6px; right:6px; top:38%; bottom:2%; }
  .alt-end{ left:20px; right:20px; width:auto; top:calc(86px + env(safe-area-inset-top)); transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .alt{ height:auto; }
  .alt-pin{ position:relative; height:auto; min-height:100svh; }
}
/* asked: the question people now put to an assistant, and three answers
   that name the business */
.a-ask{ width:calc(var(--u) * 8.6); height:calc(var(--u) * 6); margin:calc(var(--u) * -3) 0 0 calc(var(--u) * -4.3); }
.a-prompt{ position:relative; height:calc(var(--u) * 1.04); border-radius:calc(var(--u) * .52); display:flex; align-items:center; gap:calc(var(--u) * .22); padding:0 calc(var(--u) * .36);
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,244,239,.93)); color:var(--obsidian); font:400 calc(var(--u) * .3)/1 var(--sans);
  box-shadow:inset 0 1px 0 #fff, 6px 12px 32px rgba(0,0,0,.35); white-space:nowrap; overflow:hidden; }
.a-prompt .a-spark svg{ width:calc(var(--u) * .34); height:calc(var(--u) * .34); fill:var(--ultra); }
.a-prompt .a-typed2::after{ content:""; display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-.15em; background:var(--ultra); }
.a-ans{ position:absolute; left:0; right:0; top:calc(var(--u) * 1.75); padding:calc(var(--u) * .34) calc(var(--u) * .4) calc(var(--u) * .4); border-radius:calc(var(--u) * .42);
  background:linear-gradient(165deg, rgba(56,58,66,.95), rgba(20,22,28,.97)); color:var(--porcelain); transform-origin:50% 0; will-change:transform, opacity;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.08), 9px 18px 44px rgba(0,0,0,.5); }
.a-who{ display:flex; align-items:center; gap:calc(var(--u) * .14); font:400 calc(var(--u) * .21)/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--travertine); }
.a-who::before{ content:""; width:calc(var(--u) * .14); height:calc(var(--u) * .14); border-radius:50%; background:#8E99FF; }
.a-say{ margin-top:calc(var(--u) * .2); font:400 calc(var(--u) * .31)/1.42 var(--sans); opacity:var(--c, 1); }
.a-ans .a-src{ opacity:var(--c, 1); }
.a-say b{ font-weight:500; color:#fff; box-shadow:inset 0 calc(var(--u) * -.05) 0 var(--ultra); }
.a-src{ display:inline-flex; align-items:center; margin-top:calc(var(--u) * .24); height:calc(var(--u) * .44); padding:0 calc(var(--u) * .2); border-radius:calc(var(--u) * .22);
  background:rgba(246,244,239,.1); box-shadow:inset 0 0 0 1px rgba(246,244,239,.16); font:400 calc(var(--u) * .2)/1 var(--mono); color:var(--travertine); }
.a-src img{ width:calc(var(--u) * .26); height:calc(var(--u) * .26); border-radius:22%; margin-right:calc(var(--u) * .1); }

/* ---------- the finale: paper ---------- */
.alt-fin{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.alt-fin > *{ position:absolute; will-change:transform, opacity; }
html.pg-js .alt-fin > *{ opacity:0; }
.fin-paper{ left:0; top:0; width:100%; height:100%; }
.fin-brand{ left:50%; top:var(--fy, 42%); display:flex; align-items:center; gap:clamp(14px, 2vw, 26px); transform:translate(-50%, -50%); }
.fin-mark{ width:clamp(84px, 9vw, 132px); height:auto; flex:none; overflow:visible; filter:drop-shadow(6px 14px 26px rgba(0,0,0,.45)); }
.fin-word{ font:500 clamp(54px, 7vw, 112px)/1 var(--sans); letter-spacing:-.05em; color:var(--porcelain); }
/* the sentence, under the house: two lines that rise out of their own
   edge, the second in the accent; what we make, quietly, in mono; and
   the two ways on */
.alt-end{ left:50% !important; right:auto !important; top:var(--ey, 64%) !important; width:min(92vw, 980px) !important; text-align:center; transform:translate(-50%, 0); }
.alt-fin-h{ font:500 clamp(38px, min(4.6vw, 7.4vh), 78px)/1.02 var(--sans); letter-spacing:-.045em; color:var(--porcelain); }
.alt-fin-h .ln{ display:block; overflow:hidden; padding:.04em 0 .1em; margin-bottom:-.1em; }
.alt-fin-h .ln > *{ display:inline-block; max-width:100%; text-wrap:balance; will-change:transform; }
.alt-fin-h em{ font:300 italic 1.12em/1 var(--accent); letter-spacing:-.025em; color:#fff; }
.alt-fin-what{ margin-top:clamp(18px, 3vh, 28px); font:400 clamp(11px, .9vw, 13px)/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ash); }
.alt-fin-p{ margin-top:12px; font:400 clamp(15px, 1.2vw, 18px)/1.5 var(--sans); color:var(--travertine); }
.alt-fin-cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:clamp(22px, 3.6vh, 34px); }
@media (max-aspect-ratio:1/1), (max-width:760px){
  .fin-brand{ gap:12px; }
  .fin-mark{ width:64px; }
  .fin-word{ font-size:52px; }
  .alt-fin-h{ font-size:min(9vw, 38px); line-height:1.06; }
  .alt-fin-what{ font-size:10.5px; letter-spacing:.1em; }
  .alt-fin-cta .btn{ height:46px; }
}

/* ---------- questions and answers: a solid reading column (Liquid Atelier:
   structure is solid, only floating things are glass) ---------- */
.faq{ background:var(--porcelain); padding:clamp(90px, 14vh, 160px) 0; border-top:1px solid var(--travertine); }
.faq-in{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(28px, 5vw, 96px); max-width:1440px; margin:0 auto; padding:0 var(--gut); }
.faq .faq-head{ padding:0; margin:0; align-self:start; position:sticky; top:120px; }
.faq-l{ border-top:1px solid var(--travertine); }
.qa{ border-bottom:1px solid var(--travertine); }
.qa summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px; padding:18px 0;
  font:500 clamp(18px, 1.5vw, 22px)/1.3 var(--sans); letter-spacing:-.015em; color:var(--obsidian); }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--porcelain), 0 0 0 4px var(--ultra); border-radius:6px; }
/* the plus: two strokes in a lens; the upright one lies down as it opens */
.qa .pm{ position:relative; flex:none; width:40px; height:40px; border-radius:50%; background:var(--white); box-shadow:var(--contact-s), inset 0 0 0 1px rgba(0,0,0,.06); transition:background .18s var(--ease); }
.qa .pm::before, .qa .pm::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:1.5px; margin:-.75px 0 0 -7px; border-radius:1px; background:var(--obsidian); transition:transform .22s var(--ease), background .18s var(--ease); }
.qa .pm::after{ transform:rotate(90deg); }
.qa[open] .pm{ background:var(--obsidian); }
.qa[open] .pm::before, .qa[open] .pm::after{ background:var(--porcelain); }
.qa[open] .pm::after{ transform:rotate(0deg); }
@media (hover:hover){ .qa summary:hover .pm{ box-shadow:var(--contact-m), inset 0 0 0 1px rgba(0,0,0,.08); } }
.qa .a p{ font:400 16.5px/1.6 var(--sans); color:var(--graphite); max-width:60ch; padding:0 56px 26px 0; }
/* where the browser allows it, the answer opens rather than appears */
@supports (interpolate-size:allow-keywords){
  .faq{ interpolate-size:allow-keywords; }
  .qa::details-content{ height:0; overflow:clip; transition:height .32s var(--ease), content-visibility .32s allow-discrete; }
  .qa[open]::details-content{ height:auto; }
}
@media (max-width:860px){
  .faq-in{ grid-template-columns:1fr; gap:34px; }
  .faq .faq-head{ position:static; }
  .qa summary{ min-height:64px; font-size:17.5px; }
  .qa .a p{ padding-right:0; font-size:16px; }
}
@media (prefers-reduced-motion:reduce){ .qa .pm, .qa .pm::before, .qa .pm::after{ transition:none; } .qa::details-content{ transition:none; } }

/* ---------- the tile is the way into its sheet, and the sheet it opens ---------- */
/* no mark on the tile: the whole of it is the button, and it gives a little under the finger */
.tile{ transition:transform .2s var(--ease); }
.tile-more{ position:absolute; z-index:4; inset:0; width:100%; height:100%; border:0; padding:0; margin:0; border-radius:inherit; cursor:pointer; background:none; -webkit-tap-highlight-color:transparent; }
.tile:has(.tile-more:active){ transform:scale(.985); }
.sh-x i{ position:absolute; inset:0; }
.sh-x:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--obsidian), 0 0 0 4px var(--ultra); }
/* the tile clips what lies outside it, so its focus ring is drawn inside */
.tile-more:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px var(--ultra); }

html.sheet-open{ overflow:hidden; }
.sheet{ border:0; padding:0; margin:auto; width:min(720px, calc(100vw - 48px)); max-height:min(86vh, 900px); border-radius:28px; overflow:auto; overscroll-behavior:contain;
  background:var(--porcelain); color:var(--obsidian); box-shadow:12px 24px 56px rgba(13,13,15,.32); }
.sheet::backdrop{ background:rgba(14,15,16,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.sheet[open]{ animation:sh-in .32s var(--ease) both; }
.sheet[open]::backdrop{ animation:sh-dim .32s var(--ease) both; }
.sheet.going{ animation:sh-out .26s var(--ease) both; }
.sheet.going::backdrop{ animation:sh-dim .26s var(--ease) reverse both; }
@keyframes sh-in{ from{ opacity:0; transform:translateY(18px) scale(.97); } }
@keyframes sh-out{ to{ opacity:0; transform:translateY(14px) scale(.98); } }
@keyframes sh-dim{ from{ opacity:0; } }
.sh-in{ position:relative; padding:clamp(28px, 4vw, 48px); }
.sh-x{ position:sticky; float:right; top:0; margin:-8px -8px 0 16px; width:44px; height:44px; border:0; border-radius:50%; cursor:pointer; z-index:2;
  background:var(--white); box-shadow:var(--contact-s), inset 0 0 0 1px rgba(0,0,0,.06); }
.sh-x i::before, .sh-x i::after{ content:""; position:absolute; left:50%; top:50%; width:15px; height:1.6px; margin:-.8px 0 0 -7.5px; border-radius:1px; background:var(--obsidian); transform:rotate(45deg); }
.sh-x i::after{ transform:rotate(-45deg); }
.sheet .mono{ font:400 12px/16px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ash); margin-bottom:14px; }
.sheet h3{ font:500 clamp(30px, 3.4vw, 44px)/1.04 var(--sans); letter-spacing:-.035em; max-width:16ch; }
.sh-lead{ margin-top:18px; font:400 clamp(17px, 1.4vw, 19px)/1.55 var(--sans); color:var(--graphite); max-width:56ch; }
.sh-lab{ margin:34px 0 12px; font:400 12px/16px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ash); }
.sh-get{ list-style:none; border-top:1px solid var(--travertine); }
.sh-get li{ display:flex; gap:14px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--travertine); font:500 17px/1.4 var(--sans); }
.sh-get li::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--obsidian); transform:translateY(-3px); }
.sh-steps{ list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.sh-steps li{ padding:16px; border-radius:18px; background:var(--white); box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); display:flex; flex-direction:column; gap:6px; font:400 14px/1.4 var(--sans); color:var(--graphite); }
.sh-steps b{ font:500 16px/1.2 var(--sans); color:var(--obsidian); }
.sh-ex{ font:400 17px/1.55 var(--sans); color:var(--obsidian); max-width:56ch; }
.sh-cta{ margin-top:30px; }
@media (max-width:700px){
  /* on a phone: a sheet that rises from the bottom edge */
  .sheet{ width:100vw; max-width:100vw; max-height:92svh; margin:auto 0 0; border-radius:28px 28px 0 0; }
  .sheet[open]{ animation-name:sh-up; }
  .sheet.going{ animation-name:sh-down; }
  .sh-in{ padding:28px 20px calc(28px + env(safe-area-inset-bottom)); }
  .sh-steps{ grid-template-columns:1fr 1fr; }
}
@keyframes sh-up{ from{ transform:translateY(100%); } }
@keyframes sh-down{ to{ transform:translateY(100%); } }
@media (prefers-reduced-motion:reduce){ .sheet[open], .sheet.going, .sheet[open]::backdrop{ animation:none; } }
/* on screens wider than the page: the words and the object line up with
   the bar and the rest of the page instead of the edges of the window */
@media (min-width:1441px){
  .alt-words{ left:calc((100vw - 1296px) / 2); }
  .alt-obj{ right:calc((100vw - 1296px) / 2); }
}