/* ==========================================================================
   Kefy Studio — the home page
   Loaded by index.html only, after kefy.css, and built on its tokens.

   The page is finished without script. Every scroll-driven value below has a
   resting default (laptops open, words lit), and the two classes that change
   layout or hide anything, .has-motion and .motion-live, are set by script.
   ========================================================================== */

.home {
  --stage:      #0B0D13;   /* the showroom floor */
  --stage-line: #262B38;
  --ink-soft:   #858C99;   /* large display type only, 3.2:1 on the canvas */
  --on-blue-2:  #E4EBFF;   /* secondary text on the blue field, 4.9:1 */
  --blue-deep:  #1B3A93;
  --go:         #23A26D;   /* the open light */
  --ease:       cubic-bezier(.16, 1, .3, 1);
  --ease-io:    cubic-bezier(.65, 0, .35, 1);
  --pad:        clamp(20px, 4.4vw, 56px);
  --round:      clamp(24px, 3.4vw, 48px);
  background: var(--canvas-top);
  overflow-x: clip;
}
.home .wrap { max-width: 1360px; padding-inline: var(--pad); }

/* registered as numbers so the hero can animate them over time in CSS alone */
@property --open { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --lit  { syntax: "<number>"; inherits: true; initial-value: 1; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand-mark { display: block; flex: none; }
.ic {
  width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.skip {
  position: fixed; z-index: 90; top: 12px; left: 12px;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--canvas); font-weight: 600;
  transform: translateY(-200%);
}
.home a.skip:focus-visible { transform: none; }
.home a.skip:hover { color: var(--canvas); }

/* ==========================================================================
   The call to action — a pill with an arrow that leaves and comes back
   ========================================================================== */
.cta {
  --bg: var(--accent); --bg-on: var(--accent-2); --fg: #fff;
  --chip: #fff; --chip-fg: var(--accent);
  --ox: 150%; --oy: 0%;
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 6px 6px 6px 26px;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--bg); color: var(--fg);
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: -.012em; line-height: 1; white-space: nowrap;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.home a.cta:hover, .home button.cta:hover { background: var(--bg-on); color: var(--fg); }
.cta--out { --oy: -150%; }
.cta--ghost {
  --bg: transparent; --bg-on: var(--card); --fg: var(--ink);
  --chip: var(--ink); --chip-fg: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.cta--light { --bg: #fff; --bg-on: #fff; --fg: var(--ink); --chip: var(--accent); --chip-fg: #fff; }
.cta--sm { min-height: 44px; padding: 4px 4px 4px 18px; gap: 10px; font-size: 15px; }

.cta-chip {
  position: relative; width: 44px; height: 44px; flex: none; overflow: hidden;
  border-radius: 50%; background: var(--chip); color: var(--chip-fg); font-size: 18px;
  transition: transform .5s var(--ease);
}
.cta--sm .cta-chip { width: 36px; height: 36px; font-size: 16px; }
.cta-chip .ic { position: absolute; inset: 0; margin: auto; transition: transform .55s var(--ease); }
.cta-chip .ic + .ic { transform: translate(calc(var(--ox) * -1), calc(var(--oy) * -1)); }
.cta:hover .cta-chip .ic:first-child { transform: translate(var(--ox), var(--oy)); }
.cta:hover .cta-chip .ic + .ic { transform: none; }
.cta:active .cta-chip { transform: scale(.92); }

/* ==========================================================================
   Navigation — a capsule that steps aside while you read
   ========================================================================== */
.nav {
  position: fixed; z-index: 50; top: 14px; left: 0; right: 0;
  pointer-events: none;
  transition: transform .7s var(--ease);
}
.nav.is-away { transform: translate3d(0, -170%, 0); }
.nav-in {
  pointer-events: auto;
  width: min(1296px, calc(100% - 24px)); margin-inline: auto;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 18px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 0 0 1px rgba(21, 23, 28, .07), 0 12px 28px -14px rgba(21, 23, 28, .28);
}
.nav .brand { margin-right: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-right: 10px; font-size: 15px; }
.nav-links a {
  padding: 10px 14px; border-radius: var(--r-pill); color: var(--ink-2);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.home .nav-links a:hover { background: rgba(21, 23, 28, .06); color: var(--ink); }
.nav-menu {
  display: none; align-items: center;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--ink); color: var(--canvas);
  font-family: var(--display); font-size: 15px; font-weight: 600;
}

/* ---- the full-screen menu, small screens only ---------------------------- */
.menu {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--ink); color: var(--dark-ink);
}
.menu::backdrop { background: transparent; }
.menu :focus-visible { outline-color: var(--accent-3); }
.menu[open] { animation: menu-open .7s var(--ease) both; }
@keyframes menu-open {
  from { clip-path: circle(0 at calc(100% - 56px) 42px); }
  to   { clip-path: circle(160vmax at calc(100% - 56px) 42px); }
}
.menu-in { display: flex; flex-direction: column; min-height: 100%; padding: 22px var(--pad) 32px; }
.menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9vh; }
.menu-top .brand-name { color: #fff; }
.menu-close {
  display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%;
  cursor: pointer; background: #fff; color: var(--ink); font-size: 20px;
}
.menu-links { display: grid; gap: 4px; }
.menu-links a {
  display: block; padding: 6px 0; color: #fff;
  font-family: var(--display); font-weight: 700; font-size: clamp(40px, 12.5vw, 76px);
  line-height: 1.06; letter-spacing: -.04em;
}
.home .menu a:hover { color: var(--accent-3); }
.menu[open] .menu-links a, .menu[open] .menu-foot {
  animation: rise-in .9s var(--ease) both;
  animation-delay: calc(140ms + var(--n, 0) * 70ms);
}
.menu-foot {
  --n: 5; margin-top: auto; padding-top: 28px; border-top: 1px solid var(--dark-line);
  display: grid; gap: 8px; font-size: 17px;
}
.menu-foot a { color: var(--dark-ink); }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 34px, 0); } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow-x: clip;
  padding: clamp(104px, 13vh, 148px) 0 clamp(64px, 8vw, 120px);
}
.hero-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46vw 46vw at var(--gx, 76%) var(--gy, 22%), rgba(43, 91, 215, .17), transparent 64%),
    radial-gradient(38vw 38vw at 4% 100%, rgba(143, 176, 255, .2), transparent 62%);
}
.hero-head { position: relative; z-index: 2; }
.hero-h {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(40px, 6.1vw, 90px); line-height: .98; letter-spacing: -.04em;
}
/* each line rises out of its own slot, once, on arrival */
.ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.ln > span { display: block; white-space: nowrap; animation: ln-up 1.1s var(--ease) both; }
.ln + .ln > span { animation-delay: 110ms; }
.ln--accent { color: var(--accent); }
.br-s { display: none; }
@keyframes ln-up { from { transform: translate3d(0, 108%, 0); } }

.hero-open {
  position: absolute; z-index: 5; top: .5em; right: 0; margin: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 7px 7px 16px; border-radius: var(--r-pill);
  background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(21, 23, 28, .3);
  font-size: 14px; color: var(--ink-2);
  animation: rise-in 1s var(--ease) .45s both;
}
.hero-tel {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border-radius: var(--r-pill); background: var(--raised); color: var(--ink);
  font-family: var(--display); font-weight: 600;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.home a.hero-tel:hover { background: var(--ink); color: var(--canvas); }

/* the open light: green while the phone is being answered */
.open { display: inline-flex; align-items: center; gap: 9px; }
.open::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--ink-4);
}
.open[data-state="open"]::before { background: var(--go); animation: beat 2.4s ease-out infinite; }
@keyframes beat {
  0%        { box-shadow: 0 0 0 0 rgba(35, 162, 109, .55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(35, 162, 109, 0); }
}

.hero-body {
  display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr);
  gap: clamp(28px, 4.6vw, 72px);
  margin-top: clamp(28px, 3.4vw, 52px);
}
.hero-side { display: flex; flex-direction: column; animation: rise-in 1.1s var(--ease) .25s both; }
.hero-lead {
  margin: 0 0 30px; max-width: 33ch; text-wrap: pretty;
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.hero-facts {
  list-style: none; margin: auto 0 0; padding: 22px 0 6px;
  border-top: 1px solid var(--line-2);
  display: grid; gap: 10px; font-size: 15px; color: var(--ink-2);
}
.hero-facts li { display: flex; align-items: center; gap: 10px; }
.hero-facts .ic { color: var(--accent); font-size: 17px; stroke-width: 2.4; }

/* the shopfront, on a laptop that opens as the page arrives */
.hero-fig {
  --open: 1; --lit: 1; --scr: 0; --tx: 0; --ty: 0; --dir: -1;
  position: relative; margin: 0; display: grid; place-items: center;
  animation: lid-up 2.2s var(--ease-io) .2s both;
}
@keyframes lid-up {
  0%   { --open: 0; --lit: 0; }
  64%  { --lit: 0; }
  100% { --open: 1; --lit: 1; }
}
.hero-fig::before {   /* the light it throws on the wall behind it */
  content: ""; position: absolute; z-index: 0; pointer-events: none; inset: -8% -16% 2%;
  background: radial-gradient(closest-side, rgba(43, 91, 215, .3), rgba(43, 91, 215, .09) 58%, transparent 78%);
  opacity: var(--lit); filter: blur(22px);
}
.hero-fig .laptop { --w: min(50vw, 700px, 62vh); transform: translate3d(0, var(--lift, 0px), 0); }
.hero-fig .lt-view { --paper: #F8F9FD; display: grid; align-items: center; }
.hero-fig .lt-site { transform: none; }
.hero-fig .lt-shadow { background: radial-gradient(closest-side, rgba(21, 23, 28, .36), rgba(21, 23, 28, .12) 62%, transparent); }

/* ==========================================================================
   The statement — it lights up as it is read
   ========================================================================== */
.say { padding: clamp(64px, 9vw, 152px) 0 clamp(48px, 6vw, 96px); }
.say-p {
  margin: 0; max-width: 20em;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(27px, 3.75vw, 56px); line-height: 1.16; letter-spacing: -.032em;
}
.say-p em { font-style: normal; color: var(--accent); }
.say-p .w { opacity: clamp(.13, calc((var(--k, 999) - var(--i)) * .34 + .13), 1); }

/* ==========================================================================
   The marquee — who it is for
   ========================================================================== */
.mq { overflow: clip; padding: clamp(12px, 2vw, 32px) 0 clamp(72px, 9vw, 144px); }
.mq-row {
  display: flex; width: max-content;
  transform: translate3d(var(--x, 0px), 0, 0);
  animation: mq 60s linear infinite;
}
.mq-row.is-live { animation: none; will-change: transform; }
@keyframes mq { to { transform: translate3d(-50%, 0, 0); } }
.mq-set { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; }
.mq-set li {
  display: flex; align-items: center; gap: .26em; white-space: nowrap;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(44px, 7.2vw, 96px); line-height: 1.16; letter-spacing: -.04em;
}
.mq-set li span { color: var(--ink-soft); }
.mq-set img { width: .64em; height: .64em; margin: 0 .5em; border-radius: 22%; box-shadow: 0 0 0 1px var(--line); }

/* ==========================================================================
   The showroom
   ========================================================================== */
.work {
  position: relative; overflow-x: clip;
  background: var(--stage); color: var(--dark-ink);
  border-radius: var(--round) var(--round) 0 0;
  padding-bottom: var(--round);
}
.work ::selection { background: var(--accent-3); color: var(--ink); }
.work :focus-visible { outline-color: var(--accent-3); }
.work-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 4vw, 64px); align-items: end;
  padding-top: clamp(72px, 9vw, 144px); padding-bottom: clamp(20px, 3vw, 48px);
}
.work-h {
  margin: 0; max-width: 11ch; text-wrap: balance; color: #fff;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(40px, 5.6vw, 84px); line-height: .98; letter-spacing: -.04em;
}
.work-lead {
  margin: 0 0 .4em; max-width: 36ch; text-wrap: pretty;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--dark-ink-2);
}

/* ---- one site, one scene ------------------------------------------------- */
.proj { --open: 1; --lit: 1; --scr: 0; --prog: 1; --tx: 0; --ty: 0; --dir: 1; position: relative; }
.proj--flip { --dir: -1; }
.proj-pin { padding: clamp(40px, 6vw, 88px) 0; }
.proj-grid {
  display: grid; grid-template-columns: minmax(0, 7.3fr) minmax(0, 4.7fr);
  gap: clamp(24px, 4vw, 72px); align-items: center;
}
.proj--flip .proj-grid { grid-template-columns: minmax(0, 4.7fr) minmax(0, 7.3fr); }
.proj--flip .proj-stage { order: 2; }

/* with room to do it, each site holds the screen while its laptop opens */
@media (min-width: 901px) and (min-height: 600px) {
  .has-motion .proj { height: 215vh; }
  .has-motion .proj-pin {
    position: sticky; top: 0; height: 100vh; height: 100svh;
    display: grid; align-items: center; padding: 0;
  }
}

.proj-stage { position: relative; display: grid; place-items: center; }
.proj-stage::before {   /* stage light: it comes up as the screen does */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -14% -24% -8%;
  background: radial-gradient(closest-side, rgba(64, 114, 255, .6), rgba(43, 91, 215, .2) 52%, transparent 76%);
  opacity: calc(.08 + var(--lit) * .92);
  filter: blur(26px);
}

/* ---- the laptop: real geometry, hinged where a laptop is hinged -----------
   Everything is sized from --w. The lid turns on its bottom edge, the deck
   lies flat in front of it, and the rig is pitched so the camera looks down. */
.laptop {
  --w: min(50vw, 740px, 84vh);
  --h: calc(var(--w) * .652);
  --d: calc(var(--w) * .66);
  --t: calc(var(--w) * .013);
  --b: calc(var(--w) * .021);
  --r: calc(var(--w) * .024);
  position: relative; z-index: 1;
  width: var(--w); padding-bottom: calc(var(--w) * .32);
  perspective: calc(var(--w) * 3.1); perspective-origin: 50% 28%;
}
.laptop.is-link { cursor: pointer; }
.lt-rig, .lt-lid { transform-style: preserve-3d; }
.lt-rig {
  position: relative; width: var(--w); height: var(--h);
  transform-origin: 50% 100%;
  transform:
    translate3d(0, calc((1 - var(--open)) * var(--w) * -.25), 0)
    rotateX(calc(-29deg + var(--open) * 14deg + var(--ty) * 1deg))
    rotateY(calc(var(--dir) * (25deg - var(--open) * 18deg) + var(--tx) * 1deg))
    scale(calc(.86 + var(--open) * .14));
}
.lt-rig div { position: absolute; }

.lt-lid {
  inset: 0; transform-origin: 50% 100%;
  transform: rotateX(calc(-90deg + var(--open) * 105deg));
}
.lt-face, .lt-shell { inset: 0; border-radius: var(--r) var(--r) calc(var(--r) * .35) calc(var(--r) * .35); }
.lt-face {
  padding: calc(var(--w) * .016) calc(var(--w) * .016) calc(var(--w) * .03);
  background: #08090C; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.lt-face::before {   /* the camera */
  content: ""; position: absolute; top: calc(var(--w) * .0052); left: 50%;
  width: calc(var(--w) * .006); height: calc(var(--w) * .006); margin-left: calc(var(--w) * -.003);
  border-radius: 50%; background: #20232B;
}
.lt-shell {
  display: grid; place-items: center;
  background: linear-gradient(158deg, #E6E8EC 0%, #C8CCD3 48%, #A6ABB5 100%);
  transform: translateZ(calc(var(--t) * -1)) rotateY(180deg);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/* turned so the mark reads the right way up while the lid is still shut */
.lt-shell img { width: 13%; height: auto; border-radius: 22%; transform: rotate(180deg); }
.lt-edge { background: #AEB3BC; }
.lt-edge--top { left: var(--r); right: var(--r); top: 0; height: var(--t); transform-origin: 50% 0; transform: rotateX(-90deg); }
.lt-edge--l, .lt-edge--r { top: var(--r); bottom: 0; width: var(--t); transform-origin: 0 50%; transform: rotateY(90deg); }
.lt-edge--l { left: 0; }
.lt-edge--r { left: 100%; }

.lt-rig .lt-screen {
  position: relative; display: flex; flex-direction: column;
  width: 100%; height: 100%; overflow: hidden;
  border-radius: calc(var(--r) * .4); background: #000;
}
.lt-rig .lt-bar {
  position: relative; flex: none; display: flex; align-items: center; gap: calc(var(--w) * .008);
  height: calc(var(--w) * .036); padding: 0 calc(var(--w) * .014);
  background: #ECEDF0; color: #4B505A; font-size: calc(var(--w) * .0138); line-height: 1;
}
.lt-bar i { width: calc(var(--w) * .009); height: calc(var(--w) * .009); border-radius: 50%; background: #C6C9D0; }
.lt-bar span {
  margin-inline: auto; padding: calc(var(--w) * .005) calc(var(--w) * .034);
  border-radius: var(--r-pill); background: #fff; white-space: nowrap;
  transform: translateX(calc(var(--w) * -.02));
}
.lt-rig .lt-view { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--paper, #fff); }
.lt-view picture { display: block; }
/* the capture is two and a half screens long; --scr winds it past the glass */
.lt-site {
  display: block; width: 100%; height: auto; max-width: none;
  transform: translate3d(0, calc(var(--scr) * -76.4%), 0);
}
.lt-off { inset: 0; background: #020203; opacity: calc(1 - var(--lit)); }
.lt-glare { inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 30%); }

.lt-deck {
  left: 0; top: 100%; width: var(--w); height: var(--d);
  transform-origin: 50% 0; transform: rotateX(90deg);
  border-radius: calc(var(--r) * .3) calc(var(--r) * .3) var(--r) var(--r);
  background: linear-gradient(180deg, #B3B8C1 0%, #D3D6DC 14%, #E5E7EB 100%);
}
.lt-deck::before {   /* the hinge */
  content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 3.2%;
  border-radius: 0 0 99px 99px; background: #1C1F26;
}
.lt-deck::after {    /* light from the screen, spilled onto the keys */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(120, 160, 255, .5), rgba(120, 160, 255, 0) 62%);
  opacity: var(--lit);
}
.lt-keys {
  left: 5.5%; right: 5.5%; top: 9%; height: 50%; border-radius: calc(var(--w) * .008);
  background-color: #0C0D11;
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 14 - var(--w) * .0045), #0C0D11 calc(100% / 14 - var(--w) * .0045), #0C0D11 calc(100% / 14)),
    repeating-linear-gradient(180deg, #2A2E37 0, #1D2027 calc(20% - var(--w) * .0045), #0C0D11 calc(20% - var(--w) * .0045), #0C0D11 20%);
  box-shadow: 0 0 0 calc(var(--w) * .004) #0C0D11;
}
.lt-keys::after {    /* the space bar */
  content: ""; position: absolute; left: calc(100% / 14 * 4); width: calc(100% / 14 * 5 - var(--w) * .0045);
  top: 80%; height: calc(20% - var(--w) * .0045); background: linear-gradient(180deg, #2A2E37, #1D2027);
}
.lt-pad {
  left: 32%; right: 32%; top: 65%; bottom: 6%; border-radius: calc(var(--w) * .012);
  background: rgba(21, 23, 28, .05); box-shadow: inset 0 0 0 1px rgba(21, 23, 28, .1);
}
.lt-front {
  left: 0; top: 100%; width: var(--w); height: var(--b);
  transform: translateZ(var(--d));
  border-radius: 0 0 calc(var(--b) * .9) calc(var(--b) * .9);
  background: linear-gradient(180deg, #D0D3D9, #868B96);
}
.lt-front::before {  /* the thumb scoop */
  content: ""; position: absolute; left: 43%; right: 43%; top: 0; height: 36%;
  border-radius: 0 0 99px 99px; background: rgba(21, 23, 28, .28);
}
.lt-side {
  top: 100%; width: var(--d); height: var(--b);
  transform-origin: 0 0; transform: rotateY(-90deg);
  background: linear-gradient(180deg, #BFC3CB, #868B96);
}
.lt-side--l { left: 0; }
.lt-side--r { left: 100%; }
.lt-shadow {
  left: -14%; top: 100%; width: 128%; height: calc(var(--d) * 1.3);
  transform-origin: 50% 0;
  transform: translateY(var(--b)) rotateX(90deg) translateY(-11%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 62%, transparent);
  filter: blur(calc(var(--w) * .03));
}

/* ---- the same laptop, drawn from a 3D model once that has loaded -----------
   laptop3d.js puts a canvas in each laptop and marks it .is-3d after the first
   frame. Until then, and wherever WebGL is missing, the CSS laptop above shows. */
.lt-3d {
  position: absolute; z-index: 2; pointer-events: none;
  left: -28%; width: 156%; top: -12%; height: 146%;
  opacity: 0;
}
.laptop.is-3d .lt-3d { opacity: 1; }
.laptop.is-3d .lt-rig { opacity: 0; }

/* Where the model will be used, the hero laptop is held back, lid shut, until
   it is ready (index.html lets go after three seconds whatever happens), so the
   opening is seen on the real thing rather than swapped half-way through. */
.hero-fig .laptop { transition: opacity .5s var(--ease); }
.wait-3d .hero-fig { animation-play-state: paused; }
.wait-3d .hero-fig .laptop { opacity: 0; }

/* ---- the words beside it -------------------------------------------------- */
.proj-copy { position: relative; z-index: 2; }
.proj-name {
  margin: 0 0 12px; text-wrap: balance; color: #fff;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, min(3.8vw, 7vh), 56px); line-height: 1.02; letter-spacing: -.036em;
}
.proj-kind { margin: 0 0 clamp(18px, 2.4vw, 32px); font-size: 16px; color: var(--accent-3); }
.proj-facts { display: grid; gap: 18px; margin: 0 0 clamp(22px, 2.6vw, 36px); }
.proj-facts dt { margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--dark-ink-3); }
.proj-facts dd { margin: 0; max-width: 44ch; text-wrap: pretty; font-size: 16px; line-height: 1.6; color: var(--dark-ink-2); }
.proj-count {
  display: flex; align-items: center; gap: 14px; margin: clamp(24px, 3vw, 44px) 0 0;
  font-size: 14px; font-variant-numeric: tabular-nums; color: var(--dark-ink-3);
}
.proj-count i { flex: 1; max-width: 168px; height: 2px; border-radius: 2px; background: var(--stage-line); overflow: hidden; }
.proj-count i::after {
  content: ""; display: block; height: 100%; background: var(--accent-3);
  transform-origin: 0 50%; transform: scaleX(var(--prog));
}

/* the words arrive once the lid is up; hidden only while script is driving */
.motion-live .proj-copy > * {
  opacity: 0; filter: blur(8px); transform: translate3d(0, 28px, 0);
  transition: opacity .35s linear, filter .35s linear, transform .35s var(--ease-io);
}
.motion-live .proj.is-open .proj-copy > * {
  opacity: 1; filter: none; transform: none;
  transition: opacity .7s linear, filter .7s linear, transform 1s var(--ease);
  transition-delay: calc(var(--n, 0) * 75ms);
}
.proj-copy > :nth-child(2) { --n: 1; }
.proj-copy > :nth-child(3) { --n: 2; }
.proj-copy > :nth-child(4) { --n: 3; }
.proj-copy > :nth-child(5) { --n: 4; }

/* the pointer, over an open laptop */
.peek { position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; }
.peek span {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-radius: var(--r-pill); white-space: nowrap;
  background: #fff; color: var(--ink);
  font-family: var(--display); font-size: 14px; font-weight: 600;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .6);
  transform: translate(18px, 18px) scale(0); transform-origin: 0 0;
  transition: transform .45s var(--ease);
}
.peek.is-on span { transform: translate(18px, 18px) scale(1); }

/* ==========================================================================
   How it works — a line that draws itself down the three steps
   ========================================================================== */
.how {
  position: relative; z-index: 1;
  margin-top: calc(var(--round) * -1);
  border-radius: var(--round) var(--round) 0 0;
  background: var(--canvas);
  padding: clamp(80px, 10vw, 160px) 0 clamp(88px, 11vw, 176px);
}
.how-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 112px); align-items: start;
}
.how-head { position: sticky; top: 112px; }
.how-h {
  margin: 0 0 22px; text-wrap: balance;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 4.3vw, 64px); line-height: 1.02; letter-spacing: -.038em;
}
.how-lead { margin: 0 0 34px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); }
.how-steps { list-style: none; margin: 0; padding: 0; }
.how-step {
  --f: 1;
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 36px); padding-bottom: clamp(48px, 6vw, 96px);
}
.how-step:last-child { padding-bottom: 0; }
.how-step:not(:last-child)::before, .how-step:not(:last-child)::after {
  content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px;
  background: var(--line-2);
}
.how-step:not(:last-child)::after {
  background: var(--accent); transform-origin: 50% 0; transform: scaleY(var(--f));
}
.how-n {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff; box-shadow: 0 12px 24px -10px rgba(43, 91, 215, .7);
  font-family: var(--display); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), transform .7s var(--ease);
}
.how-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 6px 0 14px; }
.how-t {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 2.8vw, 42px); line-height: 1.06; letter-spacing: -.032em;
  transition: color .5s var(--ease);
}
.how-when {
  padding: 6px 14px; border-radius: var(--r-pill); background: var(--raised);
  font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.how-b { margin: 0; max-width: 46ch; text-wrap: pretty; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

/* until the line reaches a step, its marker waits */
.motion-live .how-step:not(.is-on) .how-n {
  background: var(--card); color: var(--ink-3);
  box-shadow: inset 0 0 0 1.5px var(--line-2); transform: scale(.86);
}
.motion-live .how-step:not(.is-on) .how-t { color: var(--ink-3); }

/* ==========================================================================
   Contact — the door, under the awning
   ========================================================================== */
.contact {
  position: relative; background: var(--accent); color: #fff;
  padding: clamp(120px, 13vw, 208px) 0 calc(clamp(80px, 10vw, 152px) + var(--round));
}
.contact ::selection { background: #fff; color: var(--accent-2); }
.contact :focus-visible { outline-color: #fff; }
.contact .card :focus-visible, .contact .hc-card :focus-visible { outline-color: var(--accent); }

.awning-hang { position: absolute; left: 0; right: 0; top: 0; filter: drop-shadow(0 12px 12px rgba(12, 28, 92, .32)); }
.awning {
  --s: clamp(40px, 5.2vw, 72px);
  height: calc(var(--s) * 1.22);
  background: repeating-linear-gradient(90deg, var(--blue-deep) 0, var(--blue-deep) var(--s), var(--on-blue-2) var(--s), var(--on-blue-2) calc(var(--s) * 2));
  -webkit-mask:
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--s) / 2 + 1px) no-repeat,
    radial-gradient(circle at 50% 0, #000 calc(var(--s) / 2 - .6px), transparent calc(var(--s) / 2)) 0 100% / var(--s) calc(var(--s) / 2) repeat-x;
  mask:
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--s) / 2 + 1px) no-repeat,
    radial-gradient(circle at 50% 0, #000 calc(var(--s) / 2 - .6px), transparent calc(var(--s) / 2)) 0 100% / var(--s) calc(var(--s) / 2) repeat-x;
}

.contact-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(36px, 6vw, 112px); align-items: start;
}
.contact-h {
  margin: 0 0 24px; text-wrap: balance;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 5.2vw, 78px); line-height: 1; letter-spacing: -.04em;
}
.contact-lead {
  margin: 0 0 clamp(32px, 4vw, 52px); max-width: 40ch; text-wrap: pretty;
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--on-blue-2);
}
.reach { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .26); }
.reach li {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: baseline; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .26);
}
.reach-k { font-size: 14px; color: var(--on-blue-2); }
.reach-v {
  color: #fff; font-family: var(--display); font-weight: 600;
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.028em;
}
a.reach-v {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .6s var(--ease);
}
.home a.reach-v:hover, .home .hc:focus-within a.reach-v { color: #fff; background-size: 100% 2px; }
.reach-note { font-size: 17px; line-height: 1.5; color: #fff; }
.reach-note .open { display: flex; margin-top: 6px; font-size: 14px; color: var(--on-blue-2); }
.reach-note .open::before { background: rgba(255, 255, 255, .5); }
.reach-note .open[data-state="open"]::before { background: #6FE3B1; animation-name: beat-light; }
@keyframes beat-light {
  0%        { box-shadow: 0 0 0 0 rgba(111, 227, 177, .6); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(111, 227, 177, 0); }
}
.contact-note {
  margin: clamp(28px, 3vw, 40px) 0 0; max-width: 30ch;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: 19px; line-height: 1.45; color: var(--on-blue-2);
}

.contact .card {
  border: 0; border-radius: 28px; color: var(--ink);
  box-shadow: 0 2px 4px rgba(12, 28, 92, .12), 0 40px 90px -30px rgba(8, 20, 70, .7);
}
.contact .card--pad { padding: clamp(24px, 3vw, 40px); }
.contact .btn { border-radius: var(--r-pill); min-height: 56px; font-size: 17px; }
.home .contact .card a:not(.btn):hover { color: var(--accent); }

/* ==========================================================================
   The cards that open over the phone number and the email address
   ========================================================================== */
.hc { position: relative; display: inline-block; }
.hc-pop {
  position: absolute; z-index: 30; left: calc(-18px + var(--hc-x, 0px)); bottom: 100%;
  width: max-content; max-width: min(352px, calc(100vw - 24px)); padding-bottom: 14px;
  visibility: hidden; opacity: 0; pointer-events: none;
  filter: blur(8px);
  transform: translate3d(0, 12px, 0) scale(.93); transform-origin: 44px 100%;
  transition: opacity .16s linear, filter .16s linear, transform .18s var(--ease-io), visibility 0s linear .18s;
}
.hc--below .hc-pop {
  bottom: auto; top: 100%; padding: 14px 0 0;
  transform: translate3d(0, -12px, 0) scale(.93); transform-origin: 44px 0;
}
.hc:has(:focus-visible) .hc-pop {
  visibility: visible; opacity: 1; pointer-events: auto; filter: none; transform: none;
  transition: opacity .22s linear, filter .3s linear, transform .55s var(--ease), visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
  .hc:hover .hc-pop {
    visibility: visible; opacity: 1; pointer-events: auto; filter: none; transform: none;
    transition: opacity .22s linear 70ms, filter .3s linear 70ms, transform .55s var(--ease) 70ms, visibility 0s linear 70ms;
  }
}
.hc.hc--off .hc-pop { visibility: hidden; opacity: 0; pointer-events: none; }

.hc-card {
  display: grid; gap: 16px; padding: 18px; border-radius: 22px;
  background: var(--card); color: var(--ink); text-align: left; white-space: normal;
  font-family: var(--text); font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: 0;
  box-shadow:
    0 0 0 1px rgba(21, 23, 28, .06),
    0 2px 6px rgba(21, 23, 28, .06),
    0 20px 44px -14px rgba(21, 23, 28, .36),
    0 44px 88px -34px rgba(21, 23, 28, .46);
}
.hc-top { display: flex; align-items: center; gap: 12px; }
.hc-top img { width: 44px; height: 44px; flex: none; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.hc-who { display: grid; gap: 3px; min-width: 0; }
.hc-who b { font-family: var(--display); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.hc-sub { font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.hc-big {
  font-family: var(--display); font-size: 27px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.032em; white-space: nowrap; color: var(--ink);
}
.hc-actions { display: flex; gap: 8px; }
.hc-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--raised); color: var(--ink); white-space: nowrap;
  font-family: var(--display); font-size: 14px; font-weight: 600; line-height: 1;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.hc-btn .ic { font-size: 16px; }
.home a.hc-btn:hover, .home button.hc-btn:hover { background: var(--line); color: var(--ink); }
.hc-btn:active { transform: scale(.96); }
.hc-btn--main { background: var(--accent); color: #fff; }
.home a.hc-btn--main:hover { background: var(--accent-2); color: #fff; }
.home button.hc-btn.is-done, .home button.hc-btn.is-done:hover { background: var(--sage-wash); color: var(--sage-ink); }

/* the three rows of the card settle one after another */
.hc-card > * { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .12s linear, transform .12s linear; }
.hc:has(:focus-visible) .hc-card > * { opacity: 1; transform: none; transition: opacity .3s linear, transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .hc:hover .hc-card > * {
    opacity: 1; transform: none;
    transition: opacity .3s linear, transform .6s var(--ease);
    transition-delay: calc(110ms + var(--n, 0) * 55ms);
  }
}
.hc-card > :nth-child(2) { --n: 1; }
.hc-card > :nth-child(3) { --n: 2; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot {
  position: relative; z-index: 1;
  margin-top: calc(var(--round) * -1);
  border-radius: var(--round) var(--round) 0 0;
  background: var(--ink); color: var(--dark-ink);
}
.foot ::selection { background: var(--accent-3); color: var(--ink); }
.foot :focus-visible { outline-color: var(--accent-3); }
.foot .hc-card :focus-visible { outline-color: var(--accent); }
.foot-top {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 6vw, 96px); align-items: start;
  padding-top: clamp(64px, 8vw, 128px);
}
.foot-say {
  margin: 0 0 32px; max-width: 16em; text-wrap: balance; color: #fff;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(26px, 3.1vw, 46px); line-height: 1.16; letter-spacing: -.032em;
}
.foot-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; }
.foot-label { margin: 0 0 14px; font-size: 13px; color: var(--dark-ink-3); }
.foot-list { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 16px; }
.foot-list > a, .foot-list > .hc > a { color: var(--dark-ink); }
.home .foot-list > a:hover, .home .foot-list > .hc > a:hover { color: var(--accent-3); }
.foot-list .open { font-size: 14px; color: var(--dark-ink-2); }
.foot-list .open::before { background: var(--dark-ink-3); }
.foot-list .open[data-state="open"]::before { background: #4FD39B; }
.foot-base { margin: clamp(48px, 6vw, 88px) 0 0; font-size: 13px; color: var(--dark-ink-3); }

/* the wordmark: lit from the floor, and from wherever the pointer is */
.foot-clip { overflow: hidden; margin-top: clamp(8px, 2vw, 32px); }
.foot-mark {
  margin: 0 0 -.14em; text-align: center; white-space: nowrap; user-select: none;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(120px, 36vw, 580px); line-height: .82; letter-spacing: -.05em;
  color: #20242E;
  transform: translate3d(0, calc((1 - var(--fm, 1)) * 30%), 0);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .foot-mark {
    background: radial-gradient(30vw 30vw at var(--fx, 50%) var(--fy, 128%), #5C88FF, #2B5BD7 36%, #20242E 72%) #20242E;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* ==========================================================================
   Smaller screens
   ========================================================================== */
@media (max-width: 1180px) {
  .hero-open { position: static; width: max-content; max-width: 100%; margin-top: 22px; }
}
@media (max-width: 900px) {
  .nav .cta-chip { display: none; }
  .nav .cta--sm { padding: 4px 18px; }

  .hero-body, .work-head, .how-grid, .contact-grid, .foot-top { grid-template-columns: minmax(0, 1fr); }
  .hero-fig { order: -1; }
  .hero-actions { margin-bottom: 32px; }
  .hero-facts { margin-top: 0; }

  .proj-grid, .proj--flip .proj-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .proj--flip .proj-stage { order: 0; }
  .proj-pin { padding: 28px 0 44px; }
  .laptop, .hero-fig .laptop { --w: min(78vw, 560px); perspective: calc(var(--w) * 4.4); }
  .lt-bar span { display: none; }

  .how-head { position: static; }
  .work-h { max-width: none; }
}
/* Where the bar runs out of room the section links fold into the menu. The way
   in for clients never does: it stays on the bar at every width. */
@media (max-width: 760px) {
  .nav-links { margin-right: 2px; }
  .nav-links a:not(.nav-login) { display: none; }
  .nav-menu { display: inline-flex; }
}
@media (max-width: 480px) {
  .nav-in { gap: 6px; padding-left: 14px; }
  .nav .brand { gap: 8px; }
  .nav-links { margin-right: 0; }
  .nav-links .nav-login { padding: 10px 8px; text-transform: capitalize; white-space: nowrap; }
  .nav-login-pre { display: none; }
  .nav .cta--sm { padding: 4px 13px; white-space: nowrap; }
  .nav-menu { padding: 0 13px; }
}
/* the narrowest phones: the menu button becomes two bars, which leaves room
   for the rest (its name is still "Menu" to a screen reader) */
@media (max-width: 380px) {
  .nav-in { gap: 5px; padding-left: 12px; }
  .nav .cta--sm { padding: 4px 12px; }
  .nav-menu { flex: none; width: 44px; padding: 0; justify-content: center; font-size: 0; }
  .nav-menu::before { content: ""; box-sizing: border-box; width: 18px; height: 9px; border-block: 2px solid currentColor; }
}
@media (max-width: 340px) {
  .nav .brand-name { display: none; }
}
@media (max-width: 640px) {
  .hero-h { font-size: clamp(33px, 10.1vw, 64px); }
  .ln > span { white-space: normal; }
  .hero-open { width: auto; flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; border-radius: 20px; }
  .hero-tel { white-space: nowrap; }
  .br-s { display: inline; }
  .say-p, .foot-say { line-height: 1.22; }
  .reach li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .how-step { grid-template-columns: 48px minmax(0, 1fr); }
  .how-n { width: 48px; height: 48px; font-size: 15px; }
  .how-step:not(:last-child)::before, .how-step:not(:last-child)::after { left: 23px; top: 48px; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
}