:root { --paper: #F7F8FA; --ink: #14213D; --muted: #4A5468; --line: #E3E6EC; --primary: #0B68E3; --deep: #054CB3; --cream: #F5EFE0; --error: #B3261E; --sans: Geist, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --max: 1200px; --gutter: max(48px, calc((100% - var(--max)) / 2));
  /* The sky follows the visitor's clock: a script in the page head sets data-sky on <html>. Day is the default. */
  --sky-top: rgb(10 74 190); --sky: rgb(10 74 190) 0%, rgb(15 88 206) 35%, rgb(22 102 220) 64%, rgb(44 132 240) 75%, rgb(76 162 252) 87%, rgb(96 182 255) 100%; --tint: transparent; --cloud-filter: none;
  /* A soft navy shadow under cream text on the sky. */
  --halo: 0 1px 3px rgb(8 30 90 / .25), 0 2px 22px rgb(8 30 90 / .3); }
:root[data-sky="dawn"] { --sky-top: rgb(30 72 160); --sky: rgb(30 72 160) 0%, rgb(44 92 182) 35%, rgb(70 118 204) 60%, rgb(132 160 222) 74%, rgb(196 196 232) 86%, rgb(236 216 228) 100%; --tint: #EADCEF; --cloud-filter: sepia(.18) hue-rotate(-25deg) saturate(1.1); }
:root[data-sky="dusk"] { --sky-top: rgb(26 46 122); --sky: rgb(26 46 122) 0%, rgb(38 62 148) 35%, rgb(62 82 170) 60%, rgb(112 104 186) 74%, rgb(170 132 190) 86%, rgb(214 160 184) 100%; --tint: #B4A6D8; --cloud-filter: sepia(.3) hue-rotate(-40deg) saturate(1.15) brightness(.92); }
:root[data-sky="night"] { --sky-top: rgb(7 14 40); --sky: rgb(7 14 40) 0%, rgb(10 22 56) 40%, rgb(16 34 78) 70%, rgb(30 54 104) 100%; --tint: #34457E; --cloud-filter: brightness(.38) saturate(.6); }
@font-face { font-family: Geist; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/geist-latin.woff2?v=rebuild-05) format('woff2'); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--primary); }
a:hover { color: var(--deep); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 30; padding: 1rem; background: white; color: var(--ink); }
.skip-link:focus { top: 1rem; }
h1, h2, h3, p { margin-top: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Header: open over the hero sky, a navy bar once the page scrolls (motion.js adds .scrolled).
   Without JavaScript it is always the navy bar. */
.site-header { position: fixed; z-index: 10; top: 16px; left: calc(var(--gutter) - 18px); right: calc(var(--gutter) - 10px); display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 8px 8px 8px 18px; background: var(--ink); border-radius: 20px; box-shadow: 0 10px 32px #0A1A3A40; transition: background-color 300ms, box-shadow 300ms; }
.js .site-header:not(.scrolled) { background: #14213D00; box-shadow: none; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand img { display: block; width: 38px; height: auto; }
.site-header .brand, .site-header .brand:hover { color: var(--cream); }
nav { display: flex; align-items: center; gap: 30px; }
nav a { color: var(--cream); display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; text-decoration: none; }
nav a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.site-header :focus-visible { outline-color: var(--cream); }
.js .site-header:not(.scrolled) :is(.brand, nav > a:not(.button)) { text-shadow: var(--halo); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 999px; background: var(--primary); color: white; text-decoration: none; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .2s; }
nav a.button { padding-inline: 22px; }
.header-cta, .hero-cta { background: var(--cream); color: var(--ink); text-shadow: none; }
nav a.header-cta, nav a.header-cta:hover { color: var(--ink); text-decoration: none; }
.header-cta:hover, .hero-cta:hover { background: #fff; color: var(--ink); }
.button:hover { background: var(--deep); color: white; text-decoration: none; }
.button span { font-size: 20px; line-height: 1; transition: transform 200ms ease; }
.button:hover span { transform: translateX(4px); }

/* Hero */
.hero { --hero-h: clamp(720px, 59vw, 960px); max-width: 1672px; margin-inline: auto; position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-start; height: var(--hero-h); padding: 150px var(--gutter) 100px; background: var(--sky-top); }
.hero-copy { max-width: 860px; color: var(--cream); text-shadow: var(--halo); }

/* The picture is built from layers in the coordinates of the 1672x941 source:
   a CSS sky, stars (night only), drifting clouds, then the hill and desk with the sky cut out.
   Positions inside .scene are percentages of that source image. On narrower desktops
   the scene sits lower so the hill stays below the text; the hero background matches
   the top of the sky, so the gap above it doesn't show. */
.scene { position: absolute; z-index: -1; bottom: calc(-12px - max(0px, (1400px - 100vw) * .3)); left: 70%; translate: -70% 0; width: max(100% + 40px, (var(--hero-h) + 24px) * 1.7768); aspect-ratio: 1672 / 941; background: linear-gradient(var(--sky)); }
.scene img { display: block; }
.stars, .ground, .clouds { position: absolute; inset: 0; }
.ground, .clouds { transition: translate 600ms cubic-bezier(.2,.7,.2,1); }
.ground { translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -7px); }
.hill { width: 100%; height: 100%; }

.stars { display: none; background: url(/assets/stars.svg?v=rebuild-05) 0 0 / 100% 100%; animation: twinkle 7s ease-in-out infinite alternate; }
[data-sky="night"] .stars { display: block; }
@keyframes twinkle { from { opacity: 1; } to { opacity: .55; } }

/* A few clouds drift slowly right to left across the whole sky, 9 to 13 minutes each. Four cloud pictures,
   reused at different sizes, flipped or stretched a little so no two look alike. Negative delays spread them out on load.
   On wide screens the clouds turn partly see-through while they pass behind the text (a soft mask), so the headline stays readable. */
.clouds { translate: calc(var(--mx, 0) * -5px) calc(var(--my, 0) * -2px); filter: var(--cloud-filter); }
.cloud-track { position: absolute; left: 0; width: 100%; animation: cloud-x var(--t) linear calc(var(--t) * var(--at) * -1) infinite; }
.cloud-track img { position: absolute; left: 100%; width: var(--w); height: auto; transform: scale(var(--sx, 1), var(--sy, 1)); }
.c1 { top: 4%; --w: 34%; --t: 620s; --at: .62; }
.c2 { top: 30%; --w: 15%; --t: 520s; --at: .25; --sx: -1; }
.c3 { top: 46%; --w: 26%; --t: 700s; --at: .05; --sy: 1.3; }
.c4 { top: 16%; --w: 9%; --t: 760s; --at: .45; }
.c5 { top: 22%; --w: 22%; --t: 580s; --at: .86; --sx: -1; --sy: .85; }
.c6 { top: 2%; --w: 12%; --t: 680s; --at: .12; --sy: 1.15; }
@media (min-width: 1101px) {
  .clouds { mask-image: radial-gradient(35% 30% at 37% 38%, rgb(0 0 0 / .45) 55%, #000 100%); }
}
@keyframes cloud-x { to { transform: translateX(-140%); } }

/* Time-of-day tint, clipped to the hill and desk so the sky is untouched. */
.hill-tint { position: absolute; inset: 0; background: var(--tint); mix-blend-mode: multiply; mask: url(/assets/hero-hill.webp?v=rebuild-05) 0 0 / 100% 100%; pointer-events: none; }

/* Soft cloud shadows and a slow wind sheen, clipped to the hill. */
.hill-light { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mask: url(/assets/hero-hill.webp?v=rebuild-05) 0 0 / 100% 100%; }
.shadow { position: absolute; top: 58%; left: 100%; width: 34%; height: 30%; border-radius: 50%; background: radial-gradient(closest-side, #0A2A1033, transparent); animation: shadow-x var(--t) linear var(--d) infinite; }
.s1 { --t: 120s; --d: -70s; }
.s2 { top: 74%; width: 46%; height: 36%; --t: 150s; --d: -20s; }
@keyframes shadow-x { to { transform: translateX(-450%); } }
.sheen { position: absolute; inset: 40% 0 0 -60%; width: 60%; background: linear-gradient(100deg, transparent 20%, #FFFDE81a 50%, transparent 80%); animation: sheen 14s ease-in-out 3s infinite; }
@keyframes sheen { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(270%); } }
[data-sky="night"] .sheen { display: none; }

/* The CRT screen: the logo bouncing around like an old screensaver. Hover wakes it to "Let's talk". */
.crt { position: absolute; left: 65.91%; top: 36.03%; width: 4.61%; height: 6.16%; overflow: hidden; border-radius: 14% / 16%; background: #E9F4FF; container-type: size; cursor: pointer; }
.crt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(#0000 0 2px, #14213D14 2px 3px), radial-gradient(#fff3 30%, #14213D33); box-shadow: inset 0 0 6px #fffc; animation: flicker 6s steps(1) infinite; }
@keyframes flicker { 0%, 97% { opacity: 1; } 98% { opacity: .75; } }
[data-sky="night"] .crt { box-shadow: 0 0 18px 6px #9CCBFF55; }
.bounce { position: absolute; inset: 0; transition: opacity 250ms; }
.bounce img { position: absolute; height: 46cqh; width: auto; animation: bounce-x 7s linear infinite alternate, bounce-y 5.2s linear infinite alternate; }
@keyframes bounce-x { from { left: 0; } to { left: calc(100cqw - 42.5cqh); } }
@keyframes bounce-y { from { top: 0; } to { top: 54cqh; } }
.wake { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 250ms; color: var(--ink); font: 600 18cqh/1 ui-monospace, Menlo, monospace; white-space: nowrap; }
.wake i { display: inline-block; width: .55em; height: 1em; margin-left: .1em; background: currentColor; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.crt:hover .bounce { opacity: 0; }
.crt:hover .wake { opacity: 1; }
.led { position: absolute; left: 70.2%; top: 42.95%; width: .3%; aspect-ratio: 1; border-radius: 50%; background: #7CFF6B; box-shadow: 0 0 4px 1px #7CFF6Baa; }

/* First visit in a session only (a script in the page head adds .intro to <html>): about one second, nothing waits on it. */
.intro .hero .hero-copy { animation: arrive 900ms cubic-bezier(.2,.7,.2,1) both; }
.intro .hero .hill, .intro .hero .hill-tint { animation: rise 1100ms cubic-bezier(.2,.7,.2,1) both; }
.intro .hero .clouds { animation: fade-in 1400ms ease-out both; }
.intro .crt::before { content: ''; position: absolute; inset: 0; z-index: 1; background: #20262E; animation: power-on 1300ms ease-out both; }
@keyframes rise { from { transform: translateY(5%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes power-on { 0%, 44% { clip-path: inset(0); background: #20262E; } 45% { clip-path: inset(49% 0); background: #fff; } 58% { clip-path: inset(0); background: #fff; opacity: 1; } 100% { clip-path: inset(0); background: #fff; opacity: 0; } }
h1 { margin-bottom: 26px; font: 600 clamp(52px, 5vw, 76px)/1.02 var(--sans); letter-spacing: -.035em; }
.hero-intro { max-width: 470px; margin-bottom: 36px; font-size: 20px; line-height: 1.5; }
@keyframes arrive { from { opacity: .7; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Sections */
.section { padding: 104px var(--gutter); scroll-margin-top: 96px; }
h2 { margin-bottom: 40px; font: 600 clamp(36px, 3.6vw, 52px)/1.08 var(--sans); letter-spacing: -.035em; }
h3 { margin-bottom: 14px; font: 600 22px/1.2 var(--sans); letter-spacing: -.02em; }
p { margin-bottom: 20px; line-height: 1.6; }

/* Services: a bento on a 12-column grid. Each row adds up to 12 (7+5, 5+7, 4+4+4, 6+6), with widths chosen so
   cards in a row hold about the same amount of text. Every tile has its visual on top (same height everywhere, so
   rows line up) and the text below. Tablets: two columns, the 7-wide tiles span both. Phones: one column. */
.services-intro { max-width: 640px; margin: -20px 0 40px; color: var(--muted); font-size: 19px; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.tile { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 10px 30px #14213D0a; transition: transform 300ms cubic-bezier(.2,.7,.2,1), box-shadow 300ms; }
.s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; }
/* Each tile's picture is a small product-style visual (lock screen, flow diagram, invoice...) in the Ramp look:
   white cards on a pale stage, one blue accent. Sizes are in em, and the em follows the tile's width.
   motion.js plays each visual's loop while it is on screen: [data-t] items appear (and leave at data-off),
   [data-step] items fill, the flow diagram runs a pulse. Reduced motion shows the finished state. */
.tile { container-type: inline-size; }
.art { position: relative; flex: none; display: grid; place-items: center; height: 300px; padding: 1.4em; overflow: hidden; background: white; border-bottom: 1px solid var(--line); color: var(--ink); font-size: clamp(10px, 3cqw, 13px); line-height: 1.35; }
.ui { position: relative; text-align: left; }
.card { border: 1px solid var(--line); border-radius: 1.1em; background: white; box-shadow: 0 1px 2px #14213D0f, 0 8px 24px #14213D12; }
.k { color: var(--muted); font: 600 .8em/1 var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .08em; text-transform: uppercase; }
.pill { display: inline-block; padding: .3em .8em; border-radius: 99px; font-size: .85em; font-style: normal; font-weight: 600; white-space: nowrap; }
.pill.blue { background: #E8F0FD; color: var(--primary); }
.pill.green { background: #E3F4EA; color: #1E7A45; }
.pill.amber { background: #FFF3D6; color: #8A5A00; }
.pill.grey { background: #EEF1F6; color: var(--muted); }
.head { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: 1em; }
.dots { display: flex; gap: .3em; width: fit-content; padding: .8em 1em; border-radius: 1em; background: #EEF1F6; }
.dots i { width: .45em; height: .45em; border-radius: 50%; background: var(--muted); animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.js .art [data-t] { opacity: 0; transform: translateY(.6em); transition: opacity 450ms, transform 500ms cubic-bezier(.2,.7,.2,1); }
.js .art [data-t].on { opacity: 1; transform: none; }

/* Phone: a lock screen that collects notifications. It sits high and runs off the bottom of the tile. */
.art:has(.phone) { grid-template-rows: minmax(0, 1fr); place-items: start center; padding-bottom: 0; }
.phone { min-height: 0; overflow: hidden; }
.phone { align-self: stretch; width: 30em; margin-top: .4em; padding: 1.6em 1.4em 0; border-radius: 3em 3em 0 0; background: #F8F9FB; box-shadow: 0 0 0 .55em var(--ink), 0 1.4em 3em #14213D29; }
.phone .notif { background: white; }
.clock { text-align: center; font-size: 3.2em; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.date { margin-bottom: .9em; text-align: center; color: var(--muted); font-size: 1em; }
.notif { margin-top: .6em; padding: .7em 1em; border: 1px solid var(--line); border-radius: 1.3em; background: #F4F6FA; font-size: .95em; }
.notif .top { display: flex; align-items: center; gap: .55em; margin-bottom: .3em; color: var(--muted); font-size: .82em; text-transform: uppercase; letter-spacing: .02em; }
.notif .top span:last-child { margin-left: auto; text-transform: none; }
.app { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: .45em; color: white; font-size: .9em; font-weight: 700; }
.notif strong { display: block; font-size: 1.05em; }

/* Phone, live call: the AI receptionist on a call, with a moving voice wave and the conversation as a transcript
   that scrolls up as each line arrives. */
.call { display: flex; flex-direction: column; }
.call-head { display: flex; align-items: center; gap: .8em; padding-bottom: .9em; border-bottom: 1px solid var(--line); }
.call-head div { display: grid; }
.avatar.ai { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--primary); color: white; font-weight: 700; font-size: .95em; }
.oncall { display: inline-flex; align-items: center; gap: .4em; color: #1E7A45; font-size: .88em; font-weight: 600; }
.oncall i { width: .55em; height: .55em; border-radius: 50%; background: #2DB36B; }
.play .oncall i { animation: livedot 1.4s infinite; }
@keyframes livedot { 70% { box-shadow: 0 0 0 .45em #2DB36B00; } 0% { box-shadow: 0 0 0 0 #2DB36B66; } }
.call .wave { display: flex; align-items: center; gap: 3px; height: 2.2em; margin: .8em 0 .4em; }
.call .wave i { flex: 1; height: 15%; border-radius: 2px; background: var(--primary); opacity: .35; }
.play .call .wave i { opacity: .85; animation: bar .9s ease-in-out infinite alternate; }
.call .wave i:nth-child(3n) { animation-delay: -.3s; } .call .wave i:nth-child(3n+1) { animation-delay: -.6s; } .call .wave i:nth-child(4n) { animation-duration: .7s; }
@keyframes bar { from { height: 15%; } to { height: 100%; } }
.transcript { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: .5em; min-height: 0; overflow: hidden; padding-bottom: 1em; mask-image: linear-gradient(transparent, #000 2.2em); }
.line { max-width: 86%; padding: .55em .8em; border-radius: 1em 1em 1em .3em; background: white; border: 1px solid var(--line); }
.line b { display: block; color: var(--muted); font-size: .72em; letter-spacing: .06em; text-transform: uppercase; }
.line.ai { align-self: flex-end; border: 0; border-radius: 1em 1em .3em 1em; background: var(--primary); color: white; }
.line.ai b { color: #CFE0FA; }
.line.done { align-self: center; padding: .4em .9em; border: 0; border-radius: 99px; background: #E3F4EA; color: #1E7A45; font-size: .9em; font-weight: 600; }
.js .art .line:not(.on) { max-height: 0; padding-block: 0; margin-block: -.25em; border-width: 0; overflow: hidden; }
.js .art .line { max-height: 6em; transition: max-height 450ms, padding 450ms, margin 450ms, opacity 400ms, transform 450ms; }

/* Reminders: a follow-up sequence ticking through to a booking. */
.art:has(.seq) { place-items: start center; padding-top: 2.2em; }
.seq { width: 28.5em; padding: 1.1em 1.3em; }
.seq .head { margin-bottom: .6em; }
.fu-who { color: var(--muted); font-weight: 500; }
.fu-log { display: flex; flex-direction: column; gap: .45em; }
.fu-ev { display: grid; grid-template-columns: 1.7em 1fr auto; gap: .65em; align-items: center; }
.fu-ev em { color: var(--muted); font-style: normal; font-size: .88em; }
.fu-ic { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: .5em; background: #E8F0FD; }
.fu-ic svg, .inv-log svg { width: 1.05em; height: 1.05em; fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fu-ev.ok span { color: #1E7A45; font-weight: 600; } .fu-ev.ok .fu-ic { background: #E3F4EA; } .fu-ev.ok svg { stroke: #1E7A45; } .fu-ev.ok em { color: #1E7A45; font-weight: 700; }
.fu-ev.later { color: var(--muted); } .fu-ev.later .fu-ic { background: none; border: 1px dashed #C5CDDA; } .fu-ev.later svg { stroke: var(--muted); }
.fu-bub { max-width: 80%; padding: .5em .8em; border-radius: 1em 1em .3em 1em; background: var(--primary); color: white; font-size: .92em; }
.fu-bub.out { align-self: flex-end; margin-left: 2.35em; }
.fu-bub.in { align-self: flex-start; margin-left: 2.35em; border-radius: 1em 1em 1em .3em; background: #EEF1F6; color: var(--ink); }
.fu-bub .dots { padding: .25em .1em; background: none; }
/* Items that grow into place (instead of leaving a gap while hidden). */
.js .art .grow { max-height: 5em; transition: max-height 450ms, padding 450ms, margin 450ms, opacity 400ms, transform 450ms; }
.js .art .grow:not(.on) { max-height: 0; padding-block: 0; margin-block: -.225em; overflow: hidden; }

/* Website chat: a small browser with a chat widget answering after hours. */
.browser { width: min(34em, 100%); height: 22em; overflow: hidden; }
.browser .bar { display: flex; align-items: center; gap: .4em; padding: .7em .9em; border-bottom: 1px solid var(--line); background: #F8F9FB; }
.browser .bar i { width: .65em; height: .65em; border-radius: 50%; background: #D5DBE6; }
.browser .bar span { margin-left: 1em; padding: .2em 1em; border-radius: 99px; background: white; border: 1px solid var(--line); color: var(--muted); font-size: .85em; }
.site-nav { display: flex; align-items: center; gap: 1em; padding: .7em 1em; border-bottom: 1px solid var(--line); font-size: .82em; color: var(--muted); }
.site-nav b { margin-right: auto; color: var(--ink); font-size: 1.1em; }
.site-hero { display: grid; justify-items: start; gap: .35em; width: 46%; padding: 1.2em 1em; }
.site-hero b { font-size: 1.35em; line-height: 1.15; letter-spacing: -.02em; }
.site-hero span { color: var(--muted); font-size: .85em; }
.site-hero em { margin-top: .5em; padding: .45em .9em; border-radius: .5em; background: var(--ink); color: white; font-style: normal; font-size: .85em; font-weight: 600; }
.widget { position: absolute; right: .9em; bottom: .9em; display: grid; gap: .45em; width: 18em; padding: .8em; border: 1px solid var(--line); border-radius: 1.1em; background: white; box-shadow: 0 .8em 2em #14213D24; }
.whead { display: flex; align-items: center; gap: .5em; font-weight: 600; }
.whead .live { width: .55em; height: .55em; border-radius: 50%; background: #2DB36B; }
.whead .time { margin-left: auto; color: var(--muted); font-weight: 500; font-size: .85em; }
.say { width: fit-content; max-width: 88%; padding: .55em .8em; border-radius: 1em 1em 1em .3em; background: #EEF1F6; }
.say.ai { justify-self: end; border-radius: 1em 1em .3em 1em; background: var(--primary); color: white; }
.quick-replies { display: flex; flex-wrap: wrap; gap: .4em; justify-content: flex-end; }
.quick-replies span { padding: .3em .75em; border: 1px solid var(--primary); border-radius: 99px; color: var(--primary); font-size: .85em; font-weight: 600; }

/* Invoice: the status moves from Sent to Paid while the progress fills. */
.invoice { width: 28.5em; padding: 1.5em 1.6em; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; }
.inv-total { position: relative; }
.amount { display: block; margin-top: .3em; font-size: 2.4em; letter-spacing: -.03em; }
.inv-status { position: relative; min-width: 8em; height: 2em; }
.inv-status span { position: absolute; right: 0; padding: .35em .85em; border-radius: 99px; font-size: .9em; font-weight: 600; white-space: nowrap; }
.s-sent { background: #E8F0FD; color: var(--primary); }
.s-rem { background: #FFF3D6; color: #8A5A00; }
.s-paid { background: #E3F4EA; color: #1E7A45; }
.inv-meta { display: flex; gap: 2em; margin: .9em 0 1.2em; color: var(--muted); font-size: .9em; }
.inv-meta b { display: block; color: var(--ink); }
.inv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; padding-top: 1.1em; border-top: 1px solid var(--line); color: var(--muted); font-size: .88em; }
.inv-step i { display: block; height: .35em; margin-bottom: .6em; border-radius: 99px; background: var(--line); overflow: hidden; }
.inv-step i::after { content: ''; display: block; width: 0; height: 100%; background: var(--primary); transition: width 600ms ease-out; }
.inv-step.on i::after { width: 100%; }
.inv-step.paid i::after { background: #1E7A45; }
.inv-step b { display: block; color: var(--ink); }
.inv-log { display: grid; margin-top: 1em; padding: .6em .8em; border-radius: .7em; background: #F6F8FB; font-size: .9em; }
.inv-log > * { grid-area: 1 / 1; display: flex; align-items: center; gap: .5em; }
.inv-log .ok { color: #1E7A45; font-weight: 600; }
.inv-stamp { position: absolute; left: 100%; top: 1.15em; margin-left: .35em; padding: .15em .5em; border: .14em solid #1E7A45; border-radius: .3em; color: #1E7A45; font: 800 1.35em/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.js .art .inv-stamp[data-t] { transform: rotate(-12deg) scale(1.8); transition: opacity 250ms, transform 350ms cubic-bezier(.3,1.5,.5,1); }
.js .art .inv-stamp[data-t].on { transform: rotate(-12deg); opacity: .9; }

/* Paperwork: a real receipt is read and lands as a new row in the expenses spreadsheet, then gets approved. */
.extract { display: grid; grid-template-columns: 12em auto minmax(0, 27em); gap: 1.1em; align-items: center; }
.receipt { position: relative; display: grid; gap: .35em; padding: 1.1em 1em 1.2em; overflow: hidden; border: 1px solid var(--line); background: #FFFDF7; box-shadow: 0 .5em 1.4em #14213D14; transform: rotate(-2deg); font: .82em/1.3 var(--mono, ui-monospace, Menlo, monospace); }
.receipt b { text-align: center; letter-spacing: .08em; }
.receipt b, .receipt small, .ri.total { position: relative; }
.receipt b, .receipt small { justify-self: center; }
.rx-hl { position: absolute; inset: -.15em -.25em; border: 1.5px solid var(--primary); border-radius: .3em; background: #0B68E314; }
.js .art .rx-hl[data-t] { transform: scale(1.15); }
.rx-ai { margin-left: .3em; padding: .05em .35em; border-radius: .3em; background: var(--primary); color: white; font: 700 .7em/1.4 var(--sans); font-style: normal; vertical-align: .1em; }
.art:has(.extract) { font-size: clamp(10px, 2.3cqw, 15px); }
.js .art .sr.new span[data-t] { transform: none; transition: opacity 300ms; }
.receipt small { margin-bottom: .4em; text-align: center; color: var(--muted); }
.ri { display: flex; justify-content: space-between; gap: .6em; }
.ri.total { margin-top: .3em; padding-top: .45em; border-top: 1px dashed #C9C2AE; font-weight: 700; }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 2.6em; background: linear-gradient(#0B68E300, #0B68E333 60%, #0B68E3 61%, #0B68E300 62%); opacity: 0; }
.play .scan { animation: scan 2.1s ease-in-out .25s 1 both; }
@keyframes scan { 0% { opacity: 1; transform: translateY(-2.6em); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(14em); } }
.extract .arrow { color: var(--primary); font-size: 1.6em; font-weight: 700; }
.sheet { overflow: hidden; font-size: .92em; }
.sheet-head { display: flex; align-items: center; gap: .5em; padding: .7em .9em; border-bottom: 1px solid var(--line); }
.sheet-head i { width: 1.1em; height: 1.35em; border-radius: .2em; background: #1E8E3E; box-shadow: inset 0 0 0 .25em #1E8E3E, inset 0 0 0 .32em #fff; }
.sheet-head span { margin-left: auto; color: var(--muted); font-size: .85em; }
.sr { display: grid; grid-template-columns: 4.2em 1.4fr 1fr 4.4em; gap: .5em; padding: .42em .9em; border-bottom: 1px solid #EEF1F6; }
.sr span:last-child { text-align: right; }
.sr.sh { color: var(--muted); font-size: .8em; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: #F8F9FB; }
.sr.new { background: #E8F0FD; font-weight: 600; }
.approved { display: flex; justify-content: flex-end; padding: .55em .9em; }

/* Reporting: sales, bookings and accounting feed one dashboard, which is also emailed every Monday. */
.report { display: grid; width: min(29em, 100%); }
.sources { display: flex; justify-content: space-between; }
.srcchip { display: inline-flex; align-items: center; gap: .45em; padding: .4em .7em; border: 1px solid var(--line); border-radius: 99px; background: white; font-size: .9em; font-weight: 600; box-shadow: 0 1px 2px #14213D0f; }
.srcchip i { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: .4em; color: white; font-size: .78em; font-style: normal; font-weight: 700; }
.feeds { width: 100%; height: 2.4em; }
.feeds path { fill: none; stroke: #C9D3E3; stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.play .feeds path { stroke: var(--primary); animation: feed .8s linear 3; }
@keyframes feed { to { stroke-dashoffset: -14; } }
.dash { padding: 1em 1.1em 1.1em; }
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: .6em; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin: .8em 0; }
.kpis div { display: grid; gap: .15em; padding: .6em .7em; border-radius: .7em; background: #F4F6FA; }
.kpis span { color: var(--muted); font-size: .85em; }
.kpis b { font-size: 1.2em; letter-spacing: -.02em; }
.kpis em { color: var(--muted); font-style: normal; font-size: .8em; }
.kpis em.up { color: #1E7A45; font-weight: 600; }
.chart { display: flex; align-items: flex-end; gap: .5em; height: 4.2em; }
.chart i { flex: 1; height: 8%; border-radius: .3em .3em 0 0; background: #CFE0FA; transition: height 600ms cubic-bezier(.2,.7,.2,1); }
.chart i.on { height: var(--h); }
.chart i.now { background: var(--primary); }

/* Software working together: one booking flows through a hub to three tools, each ticking off. */
.flow { width: min(40em, 100%); aspect-ratio: 360 / 230; font-size: .9em; }
.flow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wire { fill: none; stroke: #C9D3E3; stroke-width: 1.5; stroke-dasharray: 4 4; }
.pulse { fill: var(--primary); stroke: #0B68E333; stroke-width: 5; }
.node { position: absolute; display: flex; align-items: center; gap: .6em; padding: .7em .85em; white-space: nowrap; font-weight: 600; border-radius: .9em; transition: border-color 200ms, box-shadow 200ms; }
.node small { display: block; color: var(--muted); font-size: .82em; font-weight: 500; }
.node .ic { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: .5em; color: white; font-size: .95em; }
.node .tick { margin-left: auto; color: #1E7A45; opacity: 0; transform: scale(.6); transition: opacity 200ms, transform 250ms cubic-bezier(.3,1.6,.5,1); }
.node.hit { border-color: #1E7A4566; }
.node.hit .tick { opacity: 1; transform: none; }
.node.hit { box-shadow: 0 0 0 3px #1E7A4514, 0 8px 24px #14213D12; }
.n-src { left: 0; top: 50%; translate: 0 -50%; width: 28%; display: grid; gap: .15em; white-space: normal; font-weight: 500; }
.n-src .k { margin-bottom: .3em; }
.n-src b { font-size: 1.05em; }
.n-src span:not(.k) { color: var(--muted); font-size: .9em; }
.n-a, .n-b, .n-c { left: 54%; width: 46%; translate: 0 -50%; }
.n-a { top: 17%; } .n-b { top: 50%; } .n-c { top: 83%; }
.hub { position: absolute; left: 37%; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 9.25%; aspect-ratio: 1; border-radius: 1.2em; background: var(--primary); color: white; font-size: 1em; box-shadow: 0 .6em 1.4em #0B68E359; }
.hub.busy { animation: breathe 1.2s ease-in-out 2; }
@keyframes breathe { 50% { transform: scale(1.07); } }

/* Custom software: the order spreadsheet steps back, its rows move across into a clean app one by one, the
   spreadsheet is retired, and the app takes over the tile while a pointer uses it. Classes come from data-at. */
.cs2 { width: 29em; height: 20.5em; }
.cs-tag { position: absolute; top: -.85em; left: 1em; z-index: 2; padding: .2em .7em; border-radius: 99px; font-size: .78em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sheet-tag { background: #FFF3D6; color: #8A5A00; } .app-tag { background: #E3F4EA; color: #1E7A45; }
.cs2-sheet { position: absolute; left: 0; top: 0; width: 23em; transform-origin: 0 0; transform: translate(3em, 2.2em); transition: transform 900ms cubic-bezier(.6,0,.2,1), filter 600ms, opacity 600ms; }
.cs2.split .cs2-sheet { transform: scale(.66) rotate(-3deg); }
.cs2.retired .cs2-sheet { filter: grayscale(1) opacity(.55); }
.cs2.big .cs2-sheet { opacity: 0; transform: translate(-2em, -2em) scale(.5) rotate(-8deg); }
.cs-grid { position: relative; display: grid; grid-template-columns: 1.6em 1.1fr 1fr .9fr .9fr; overflow: hidden; border: 1px solid var(--line); border-radius: 1.1em; background: white; box-shadow: 0 8px 24px #14213D14; font-size: .78em; }
.cs-grid span { height: 2.1em; padding: .42em .45em; border-right: 1px solid #E3E6EC; border-bottom: 1px solid #E3E6EC; line-height: 1.25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-grid .h { background: #F3F4F6; color: var(--muted); text-align: center; font-weight: 600; }
.cs-grid .y { background: #FFF6B8; } .cs-grid .r { color: #C62828; font-weight: 700; } .cs-grid .g { background: #DDF3E3; } .cs-grid .o { background: #FFE0C2; }
.cs-grid .note { grid-column: span 2; background: #FFF6B8; color: #8A5A00; font-weight: 700; font-style: italic; }
.cs-grid .err { color: #C62828; font-family: ui-monospace, Menlo, monospace; }
.cs2-hl { position: absolute; left: 0; right: 0; height: 2.1em; border: 2px solid var(--primary); background: #0B68E31a; }
.js .art .cs2-hl[data-t] { transform: none; }
.cs2-stamp { position: absolute; left: 50%; top: 45%; padding: .1em .45em; border: .16em solid #C62828; border-radius: .3em; background: #FFFFFFcc; color: #C62828; font: 800 1.7em/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.js .art .cs2-stamp[data-t] { transform: translate(-50%, -50%) rotate(-12deg) scale(1.8); transition: opacity 250ms, transform 350ms cubic-bezier(.3,1.5,.5,1); }
.js .art .cs2-stamp[data-t].on { transform: translate(-50%, -50%) rotate(-12deg); }
.cs2-arrow { position: absolute; z-index: 2; left: 4.6em; top: 9.4em; width: 4.6em; height: 3.9em; opacity: 0; transition: opacity 400ms 700ms; }
.cs2.split .cs2-arrow { opacity: 1; }
.cs2.big .cs2-arrow { opacity: 0; transition-delay: 0ms; }
.cs2-arrow path { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-dasharray: 3 3; stroke-linecap: round; stroke-linejoin: round; }
.cs2-arrow .tip { stroke-dasharray: none; }
.cs2-app { position: absolute; right: 0; top: 6.6em; width: 19.5em; padding: 1em 1.1em .7em; opacity: 0; transform-origin: 50% 0; transform: translateX(3em); transition: opacity 500ms 300ms, transform 800ms 300ms cubic-bezier(.2,.7,.2,1); }
.cs2.split .cs2-app { opacity: 1; transform: none; }
.cs2.big .cs2-app { transform: translate(-4.75em, -5.4em) scale(1.2); transition-delay: 0ms; }
.cs2-app .head { margin-bottom: .6em; }
.cs-new { padding: .35em .7em; border-radius: .6em; background: var(--primary); color: white; font-size: .8em; font-weight: 600; white-space: nowrap; }
.play .cs-new { animation: cs-press 14.5s both; }
@keyframes cs-press { 0%, 79.6% { transform: none; } 80.3% { transform: scale(.9); } 81.3%, 100% { transform: none; } }
.cs-row { display: grid; grid-template-columns: 3.4em 1fr auto; gap: .6em; align-items: center; padding: .5em .1em; border-bottom: 1px solid #EEF1F6; }
.cs-row b { font-weight: 600; } .cs-row small { color: var(--muted); font-size: .9em; }
.js .art .cs2-app .cs-row[data-t] { transform: translate(-6em, -4em) scale(.85); transition: opacity 350ms, transform 650ms cubic-bezier(.3,.9,.3,1); }
.js .art .cs2-app .cs-row.cs2-added[data-t] { transform: translateY(.6em); transition: max-height 450ms, padding 450ms, margin 450ms, opacity 400ms, transform 450ms; }
.js .art .cs2-app .cs-row[data-t].on { transform: none; }
.cs2-added.on { background: #F4F8FF; }
.swap { position: relative; justify-self: end; display: grid; }
.swap > * { grid-area: 1 / 1; justify-self: end; }
.jb-toast { position: absolute; left: 50%; bottom: -1.1em; translate: -50% 0; padding: .55em 1em; border-radius: 99px; background: var(--ink); color: white; font-size: .9em; font-weight: 600; white-space: nowrap; box-shadow: 0 .6em 1.6em #14213D40; }
.jb-cursor { position: absolute; left: 60%; top: 115%; width: 1.3em; opacity: 0; pointer-events: none; filter: drop-shadow(0 .15em .25em #14213D40); }
.jb-cursor svg { display: block; fill: var(--ink); stroke: white; stroke-width: 1.2; stroke-linejoin: round; }
/* The pointer, once the app has taken over: marks Smith's deposit paid, then adds a new order, then leaves. */
.play .jb-cursor { animation: jb-cursor 14.5s cubic-bezier(.45,0,.25,1) both; }
@keyframes jb-cursor {
  0%, 59% { left: 55%; top: 110%; opacity: 0; transform: none; }
  61% { opacity: 1; }
  64.8% { left: 84%; top: 48%; transform: none; } 66.2% { transform: scale(.82); } 67.2% { left: 84%; top: 48%; transform: none; }
  78.6% { left: 86%; top: 12%; transform: none; } 80% { transform: scale(.82); } 81% { left: 86%; top: 12%; transform: none; opacity: 1; }
  86% { left: 70%; top: 80%; opacity: 0; } 100% { left: 70%; top: 80%; opacity: 0; } }

/* AI implementation: a team workspace laid out like an AI app. Project files and rules on the left, a model
   picker on top; the assistant searches the files before it answers, and a rule stops a card number being sent. */
.workspace { display: grid; grid-template-columns: 12em minmax(0, 1fr); width: min(42em, 100%); overflow: hidden; }
.workspace aside { display: grid; align-content: start; gap: .45em; padding: 1em .9em; border-right: 1px solid var(--line); background: #F8F9FB; font-size: .88em; }
.proj { display: flex; align-items: center; gap: .5em; margin-bottom: .4em; }
.proj-ic { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: .45em; background: var(--ink); color: white; font-size: .85em; font-weight: 700; }
.workspace aside .k { margin-top: .6em; font-size: .78em; }
.file { padding: .3em .5em; border: 1px solid var(--line); border-radius: .5em; background: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file::before { content: '▤ '; color: var(--primary); }
.rule-on { padding: .3em .5em; border-radius: .5em; background: #E3F4EA; color: #1E7A45; font-weight: 600; }
.rule-on::before { content: '⛨ '; }
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: .6em 1em; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .88em; }
.model { padding: .2em .6em; border: 1px solid var(--line); border-radius: .5em; color: var(--ink); font-weight: 600; }
.thread { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: .5em; min-height: 11em; padding: .8em 1em; overflow: hidden; }
.msg.user { align-self: flex-end; max-width: 80%; padding: .5em .8em; border-radius: 1em 1em .3em 1em; background: #EEF1F6; }
.msg.ai { max-width: 92%; font-weight: 500; }
.tool { display: flex; align-items: center; gap: .5em; width: fit-content; padding: .3em .7em; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: .82em; }
.tool b { color: #1E7A45; }
.spin { width: .9em; height: .9em; border: 2px solid #CFE0FA; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.guard { display: flex; align-items: center; gap: .55em; padding: .45em .7em; border-radius: .6em; background: #FDF0EE; color: #8A2A1E; font-size: .86em; font-weight: 600; }
.guard b { display: grid; place-items: center; flex: none; width: 1.4em; height: 1.4em; border-radius: 50%; background: #B3261E; color: white; font-size: .78em; }
.composer { display: flex; align-items: center; gap: .6em; margin: 0 .8em .8em; padding: .45em .5em .45em .7em; border: 1px solid var(--line); border-radius: .9em; box-shadow: 0 1px 3px #14213D0f; }
.plus { color: var(--muted); font-size: 1.1em; }
.compose-text { display: grid; flex: 1; min-width: 0; color: #9AA3B5; white-space: nowrap; }
.compose-text > * { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; }
.compose-text .typed { color: var(--ink); }
.send { display: grid; place-items: center; flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--ink); color: white; font-weight: 700; }
.js .art .tool.working:not(.on), .js .art .guard:not(.on), .js .art .msg:not(.on), .js .art .tool:not(.on) { display: none; }

/* The closing tile, one card: text on the left; a wall of everyday chores drifting behind the right side; a small
   copy of the contact form floating on the wall, filling in as the "Help me with..." box types. Sending collapses the
   copy into the visitor's note, which flies to the real form as a paper plane, and their note joins the wall. */
.cta-tile { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 10px 30px #14213D0a; }
.wish-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 48px 52px; }
.wish-wall { position: absolute; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center; gap: 14px; opacity: .85;
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 68%), linear-gradient(transparent, #000 16%, #000 84%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 44%, #000 68%), linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-composite: intersect; }
.wish-row { display: flex; gap: 10px; width: max-content; animation: drift var(--d, 70s) linear infinite; }
.wish-row:nth-child(even) { animation-direction: reverse; }
@keyframes drift { to { transform: translateX(-50%); } }
.wish-chore { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: #FAFBFD; color: #5B6578; font: 500 14px var(--sans); white-space: nowrap; box-shadow: 0 2px 6px #14213D0a; }
.wish-chore::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C9D8F2; }
.wish-chore.theirs { border-color: var(--primary); background: var(--primary); color: white; font-weight: 600; box-shadow: 0 10px 24px #0B68E340; }
.wish-chore.theirs::before { background: white; }
.wish-float { display: grid; place-items: center; padding: 40px 48px 40px 0; }
.wish-form { width: min(360px, 100%); padding: 22px; border-radius: 16px; background: white; box-shadow: 0 24px 60px #14213D29, 0 0 0 1px #14213D0d; font: 13px/1.4 var(--sans); }
.wish-form { background: #FFFDF8; }
.wf-head { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; padding-bottom: 12px; border-bottom: 1px solid #ECE6D8; }
.wf-head img { width: 28px; height: 28px; padding: 4px; border-radius: 8px; background: var(--ink); }
.wf-head b { display: block; font-size: 13px; }
.wf-head small { color: var(--muted); font-size: 11px; }
.wf-letter { margin: 0 0 16px; font-size: 15px; line-height: 1.75; font-weight: 500; letter-spacing: -.01em; }
.wf-letter > span:first-child { display: block; }
.wf-blank { display: inline-block; width: 5.5em; height: 1em; vertical-align: -.15em; border-bottom: 2px solid #D3CBB8; }
.wf-blank.short { width: 4em; }
.wf-note { padding: 0 2px; border-bottom: 2px solid #D3CBB8; color: var(--primary); font-weight: 600; overflow-wrap: anywhere; }
.wf-note .caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; }
.wf-send { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 12px; background: var(--ink); color: white; font-weight: 600; transition: transform 120ms, background-color 120ms; }
.wf-send svg { width: 20px; fill: currentColor; }
.cta-tile.sending .wf-send { transform: scale(.95); background: #0A1A3A; }
.wish { display: flex; align-items: center; gap: .45em; width: 100%; padding: .75em 1.2em; border: 1px solid var(--line); border-radius: 99px; background: #F8F9FB; font-size: 18px; text-align: left; cursor: text; box-shadow: inset 0 1px 2px #14213D0a; transition: border-color 200ms, box-shadow 200ms, background-color 200ms; }
.wish:focus-within { border-color: var(--primary); background: white; box-shadow: 0 0 0 4px #0B68E31f; }
.wish-label { flex: none; color: var(--muted); }
.wish-area { display: grid; flex: 1; min-width: 0; }
.wish-area > * { grid-area: 1 / 1; }
.wish-type { display: flex; align-items: center; min-width: 0; font-weight: 600; white-space: nowrap; pointer-events: none; transition: opacity 250ms, transform 300ms cubic-bezier(.2,.7,.2,1); }
.wish-text { overflow: hidden; text-overflow: ellipsis; }
.wish input[type="text"] { display: block; width: 100%; min-width: 0; padding: .35em 0; border: 0; border-radius: 0; background: none; color: var(--ink); font: 600 1em var(--sans); line-height: 1.3; outline: none; opacity: 0; }
.wish input[type="text"]::placeholder { color: #9AA3B5; font-weight: 500; }
.cta-tile.active .wish-type { opacity: 0; transform: translateY(-.7em); }
.cta-tile.active .wish input[type="text"] { opacity: 1; }
.caret { flex: none; width: 2px; height: 1.2em; margin-left: 2px; background: var(--primary); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.wish.nudge { animation: nudge 400ms ease-in-out; }
@keyframes nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.wish-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.wish-chips button { padding: 8px 14px; border: 1.5px solid #D5DBE6; border-radius: 99px; background: white; color: var(--ink); font: 500 15px var(--sans); cursor: pointer; transition: border-color 150ms, background-color 150ms, color 150ms; }
.wish-chips button:hover { border-color: var(--primary); }
.wish-chips button[aria-pressed="true"] { border-color: var(--primary); background: #E8F0FD; color: var(--primary); font-weight: 600; }
/* The paper plane that carries the visitor's note down to the contact form (motion.js). */
.plane { position: fixed; z-index: 40; inset: 0 auto auto 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; background: none; overflow: visible; pointer-events: none; }
.plane > * { position: absolute; left: 0; top: 0; }
.plane-note { width: max-content; max-width: 260px; padding: 10px 14px; box-sizing: border-box; transform: translate(-50%, -50%); border: 1.2px solid var(--line); border-radius: 12px; background: white; color: var(--ink); font: 600 15px/1.35 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 12px 30px #14213D2e; }
.plane-paper { width: 100px; height: 75px; overflow: visible; opacity: 0; will-change: transform, opacity; }
.plane-shadow { width: 58px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, #14213D55, #14213D00); opacity: 0; will-change: transform, opacity; }
.plane-trail { width: 100vw; height: 100vh; overflow: visible; fill: #14213D; }
/* Where it lands: the message box glows once and the picked topics pop. */
.landed { animation: landed 900ms ease-out; }
@keyframes landed { 0% { box-shadow: 0 0 0 0 #0B68E366; border-color: var(--primary); } 100% { box-shadow: 0 0 0 14px #0B68E300; } }
@keyframes pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
.cta-tile h3 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.02em; }
.cta-tile p { max-width: 560px; margin: 0 0 22px; color: var(--muted); font-size: 17px; line-height: 1.55; }

@media (pointer: fine) {
  .tile:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), 0 18px 40px #14213D1f; }
}
.tile-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.tile h3 { margin: 0 0 8px; font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; text-wrap: balance; }
.tile p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.services-more { margin: 40px 0 0; font-size: 18px; }
.services-more a { font-weight: 600; }

/* How I work: four panels in a 2x2 grid, read left to right then down. Each shows a clay scene of George working
   with the owner and a small note from that moment. A four-part bar fills a little more on each panel, so the order
   reads as time passing without step numbers. The notes float gently; reduced motion holds them still. */
.approach { background: linear-gradient(#FFFFFF, #F3F6FB 30%, #EEF3FA); }
.approach-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.approach-head h2 { margin-bottom: 16px; }
.approach-head p { margin: 0; color: var(--muted); font-size: 19px; }
.steps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.steps > li { --glow: #CFE2FF; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-height: 540px; padding: 36px 36px 0; border-radius: 32px; background: white; box-shadow: 0 1px 2px #14213D0d, 0 20px 50px #14213D12; }
.steps > li:nth-child(1) { grid-column: span 7; }
.steps > li:nth-child(2) { grid-column: span 5; --glow: #F7E7C6; }
.steps > li:nth-child(3) { grid-column: span 5; --glow: #D7ECDF; }
.steps > li:nth-child(4) { grid-column: span 7; --glow: #DDD9F6; }
.when { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--muted); font-size: 14px; font-weight: 600; }
.when .bar { display: flex; gap: 4px; }
.when .bar i { width: 18px; height: 5px; border-radius: 3px; background: #14213D1a; }
.steps > li:nth-child(1) .bar i:nth-child(-n+1), .steps > li:nth-child(2) .bar i:nth-child(-n+2),
.steps > li:nth-child(3) .bar i:nth-child(-n+3), .steps > li:nth-child(4) .bar i { background: var(--primary); }
.steps h3 { margin: 0 0 10px; font-size: 26px; letter-spacing: -.025em; }
.steps p { max-width: 38ch; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.stage { position: relative; display: grid; place-items: end center; min-height: 320px; }
.stage::before { content: ''; position: absolute; z-index: -1; left: 50%; bottom: -16%; width: min(92%, 460px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff 0%, var(--glow) 70%); }
.stage img { display: block; width: min(100%, 430px); height: auto; margin-bottom: -8px; filter: drop-shadow(0 24px 30px #14213D1f); }
.chip { position: absolute; display: flex; align-items: center; gap: 10px; max-width: 250px; padding: 12px 16px; border: 1px solid #ffffffb3; border-radius: 18px; background: #ffffffe0; backdrop-filter: blur(10px); box-shadow: 0 12px 30px #14213D1f; font-size: 15px; font-weight: 500; line-height: 1.3; animation: float 6s ease-in-out infinite; }
.chip i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: white; font-size: 14px; font-style: normal; }
.chip.green i { background: #2DB36B; }
.chip.quote { border-radius: 18px 18px 18px 4px; }
.chip small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.chip.late { animation-delay: -3s; }
/* A short text exchange: the owner's message, then George's reply in blue on the right. */
.convo { position: absolute; display: grid; gap: 8px; width: min(270px, 80%); }
.convo .chip { position: static; max-width: none; }
.convo .chip.me { justify-self: end; margin-left: 24px; border-color: transparent; border-radius: 18px 18px 4px 18px; background: var(--primary); color: white; }
.convo .chip.me small { color: #CFE0FA; }
@keyframes float { 50% { translate: 0 -8px; } }

/* ---------- The letter: the contact form, written as a short note on stationery. It lives in the
   #contact-pop popover that every "Let's talk" opens (contact.js). The same centered card at every screen size. */
.contact-pop { --lt-paper: #FFFDF8; --lt-line: #D3CBB8; --lt-hint: #A9A291;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .13 0 0 0 0 .24 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  position: fixed; inset: 0; width: min(500px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none;
  border: 0; border-radius: 18px; background: var(--lt-paper) var(--grain); color: var(--ink);
  box-shadow: 0 2px 6px #0A1A3A40, 0 50px 90px -20px #0A1A3AAA; opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.2,.8,.2,1), overlay 240ms allow-discrete, display 240ms allow-discrete; }
.contact-pop::-webkit-scrollbar { display: none; }
.contact-pop:popover-open { opacity: 1; transform: none; }
@starting-style { .contact-pop:popover-open { opacity: 0; transform: translateY(12px) scale(.98); } }
.contact-pop::backdrop { background: #0A1A3A40; backdrop-filter: blur(3px); }
.lt-head { display: flex; align-items: center; gap: 12px; padding: 24px 26px 16px; border-bottom: 1px solid #ECE6D8; }
.lt-head img { width: 38px; height: 38px; padding: 5px; border-radius: 10px; background: var(--ink); }
.lt-head h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; outline: none; }
.lt-head small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.lt-head small::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22A06B; box-shadow: 0 0 0 3px #22A06B26; }
.lt-close { display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; border: 0; border-radius: 50%; background: #F1ECE0; color: var(--muted); font: 400 22px/1 var(--sans); cursor: pointer; }
.lt-close:hover { color: var(--ink); }
.lt-page { position: relative; padding: 20px 26px 24px; }
.lt-date { margin: 0 0 14px; text-align: right; color: var(--muted); font-size: 14px; }
.lt-text { margin: 0; font-size: clamp(19px, 1.4vw + 14px, 23px); line-height: 1.8; letter-spacing: -.015em; font-weight: 500; }
.lt-hi { display: block; margin-bottom: 2px; }
.lt-nw { white-space: nowrap; }
.lt-blank { width: 7ch; min-width: 3ch; max-width: 100%; padding: 0 2px; border: 0; border-bottom: 2px solid var(--lt-line); border-radius: 0; background: transparent; color: var(--primary); font: inherit; font-weight: 600; outline: none; transition: border-color .2s, color .2s; }
.lt-blank::placeholder { color: var(--lt-hint); font-weight: 400; font-style: italic; }
.lt-blank:focus { border-color: var(--primary); }
.lt-blank.filled { border-color: var(--ink); color: var(--ink); }
.lt-blank.miss { border-color: var(--error); animation: lt-shake .4s; }
.lt-blank.miss::placeholder { color: var(--error); }
@keyframes lt-shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.lt-suggest { display: flex; flex-wrap: wrap; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s, opacity .25s, margin .3s; }
.lt-suggest.show { max-height: 120px; opacity: 1; margin-top: 10px; }
.lt-suggest button { padding: 6px 12px; border: 1px solid #E2DACA; border-radius: 999px; background: #fff; color: var(--ink); font: 400 14px var(--sans); cursor: pointer; }
.lt-suggest button:hover { border-color: var(--primary); background: #F3F7FE; }
.lt-ps-toggle { margin-top: 14px; padding: 0; border: 0; background: none; color: var(--primary); font: 600 15px var(--sans); cursor: pointer; }
.lt-ps { display: none; margin-top: 12px; gap: 8px; }
.lt-ps.show { display: flex; }
.lt-ps label { font-weight: 600; font-size: 19px; line-height: 34px; }
.lt-ps textarea { flex: 1; min-height: 102px; padding: 3px 0 0; border: 0; background: transparent repeating-linear-gradient(transparent 0 33px, #E4DCCB 33px 34px); color: var(--ink); font: 19px/34px var(--sans); resize: none; outline: none; }
.lt-sign { min-height: 30px; margin: 16px 0 0; color: var(--muted); font-size: 18px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.lt-sign.show { opacity: 1; transform: none; }
.lt-sign em { color: var(--ink); font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lt-send { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; margin-top: 20px; border: 0; border-radius: 16px; background: var(--ink); color: #fff; font: 600 16px var(--sans); cursor: pointer; transition: background .2s, transform .1s; }
.lt-send:hover { background: #1D2F57; }
.lt-send:active { transform: scale(.985); }
.lt-send[disabled] { opacity: .7; cursor: progress; }
.lt-send svg { width: 22px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: transform .3s; }
.lt-send:hover svg { transform: translate(3px, -2px) rotate(-8deg); }
.lt-fine { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.contact-pop .form-status:empty { display: none; }
.contact-pop .form-status { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #FBEDEB; border-left: 3px solid var(--error); font-size: 15px; line-height: 1.5; outline: none; }
.contact-pop .form-status p { margin: 0; }
.lt-postmark { position: absolute; right: 18px; bottom: 92px; width: 112px; color: var(--primary); opacity: 0; transform: scale(1.6) rotate(-20deg); pointer-events: none; }
.lt-postmark.on { animation: lt-thump .35s cubic-bezier(.3,1.4,.5,1) forwards; }
@keyframes lt-thump { to { opacity: .85; transform: scale(1) rotate(-12deg); } }
.lt-sheet { transform-origin: 50% 0; transition: transform .6s cubic-bezier(.6,0,.4,1), opacity .4s; }
.lt-sheet.fold { transform: perspective(1400px) rotateX(68deg) scale(.55); opacity: 0; }
.lt-receipt { display: flex; flex-direction: column; align-items: center; padding: 40px 28px 26px; text-align: center; animation: lt-rise .5s cubic-bezier(.2,.8,.2,1) both; }
.lt-receipt[hidden] { display: none; }
@keyframes lt-rise { from { opacity: 0; transform: translateY(20px); } }
.lt-check { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px; border-radius: 50%; background: #E8F7EF; }
.lt-check svg { width: 28px; fill: none; stroke: #22A06B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: lt-draw .4s .3s forwards; }
@keyframes lt-draw { to { stroke-dashoffset: 0; } }
.lt-receipt h3 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.03em; outline: none; }
.lt-receipt > p { margin: 0 0 22px; color: var(--muted); }
.lt-slip { width: 100%; margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--paper); font: 14px/1 ui-monospace, Menlo, monospace; text-align: left; }
.lt-slip div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed #D4DAE5; }
.lt-slip div:last-child { border: 0; }
.lt-slip dt { color: var(--muted); }
.lt-slip dd { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-vcard { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; }
.lt-vcard:hover { border-color: var(--ink); color: var(--ink); }
.lt-again { margin-top: 18px; padding: 10px; border: 0; background: none; color: var(--primary); font: 600 15px var(--sans); cursor: pointer; }

/* ---------- Take my card: the end of the page. A small "printer" prints George's business card when asked
   (card.js). Front: the hero scene in layers, tilting for depth. Back: a classic letterpress card.
   The card has its own sky picker, so it uses its own sky variables (--tc-*), not the page's. */
.tc { --tc-day: rgb(10 74 190) 0%, rgb(15 88 206) 35%, rgb(22 102 220) 64%, rgb(44 132 240) 75%, rgb(76 162 252) 87%, rgb(96 182 255) 100%;
  --tc-dawn: rgb(30 72 160) 0%, rgb(44 92 182) 35%, rgb(70 118 204) 60%, rgb(132 160 222) 74%, rgb(196 196 232) 86%, rgb(236 216 228) 100%;
  --tc-dusk: rgb(26 46 122) 0%, rgb(38 62 148) 35%, rgb(62 82 170) 60%, rgb(112 104 186) 74%, rgb(170 132 190) 86%, rgb(214 160 184) 100%;
  --tc-night: rgb(7 14 40) 0%, rgb(10 22 56) 40%, rgb(16 34 78) 70%, rgb(30 54 104) 100%;
  --tc-sky: var(--tc-day); --tc-tint: transparent; --tc-cloud: none; --tc-stars: 0; --tc-screen: .35; --tc-bloom: 0;
  --tc-bone: #F3ECDA; --tc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .12 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --tc-cotton: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23c)'/%3E%3C/svg%3E");
  --w: min(540px, calc(100vw - 48px)); --h: calc(var(--w) / 1.75);
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--cream);
  background: radial-gradient(70% 55% at 50% 58%, #24396F 0%, #16264F 45%, #0E1A3C 75%, #0B1430 100%); }
.tc[data-sky="dawn"] { --tc-sky: var(--tc-dawn); --tc-tint: #EADCEF; --tc-cloud: sepia(.18) hue-rotate(-25deg) saturate(1.1); --tc-screen: .7; --tc-bloom: .35; }
.tc[data-sky="dusk"] { --tc-sky: var(--tc-dusk); --tc-tint: #B4A6D8; --tc-cloud: sepia(.3) hue-rotate(-40deg) saturate(1.15) brightness(.92); --tc-screen: .85; --tc-bloom: .55; }
.tc[data-sky="night"] { --tc-sky: var(--tc-night); --tc-tint: #34457E; --tc-cloud: brightness(.38) saturate(.6); --tc-stars: 1; --tc-screen: 1; --tc-bloom: 1; }
.tc h2 { margin-bottom: 12px; color: var(--cream); font-size: clamp(46px, 6vw, 84px); line-height: 1; letter-spacing: -.05em; }
.tc-sub { margin: 0; color: #B8C2DA; font-size: clamp(16px, 1.6vw, 19px); }
.tc-rig { position: relative; width: min(640px, 100%); margin-top: calc(var(--h) + 96px); perspective: 1600px; }
.tc-panel { position: relative; padding: 46px 28px 24px; border-radius: 26px; text-align: left; background: linear-gradient(#1C2E60, #15234C); box-shadow: inset 0 1px 0 #ffffff24, inset 0 -1px 0 #0006, 0 40px 70px -30px #000c, 0 0 0 1px #0A1430; }
.tc-slot { position: absolute; left: 50%; top: 18px; width: calc(var(--w) + 22px); max-width: calc(100% - 20px); height: 12px; translate: -50% 0; border-radius: 8px; background: #050A1C; box-shadow: inset 0 3px 6px #000, 0 1px 0 #ffffff1f; }
.tc-slot::after { content: ''; position: absolute; left: 12px; right: 12px; top: 4px; height: 2px; border-radius: 2px; background: #7FB2FF; opacity: 0; box-shadow: 0 0 14px 3px #3D85E8; transition: opacity .3s; }
.tc-busy .tc-slot::after { opacity: 1; animation: tc-head .18s steps(2) infinite; }
@keyframes tc-head { 50% { opacity: .55; } }
.tc-mouth { position: absolute; left: 50%; bottom: calc(100% - 24px); width: var(--w); height: calc(var(--h) + 60px); translate: -50% 0; overflow: hidden; pointer-events: none; }
.tc-out .tc-mouth { overflow: visible; pointer-events: auto; }
.tc-states { display: grid; grid-template-rows: 1fr 0fr; transition: grid-template-rows .55s cubic-bezier(.3,.9,.3,1); }
.tc-printed .tc-states { grid-template-rows: 0fr 1fr; transition-delay: .3s; }
.tc-compose, .tc-dock { min-height: 0; overflow: hidden; transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.tc-compose > div, .tc-dock > div { padding: 3px; }
.tc-printed .tc-compose, .tc-busy:not(.tc-printed) .tc-compose { opacity: 0; transform: translateY(8px); pointer-events: none; }
.tc-dock { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.tc-dock > div { display: flex; flex-direction: column; gap: 14px; }
.tc-printed .tc-dock { opacity: 1; transform: none; pointer-events: auto; transition-delay: .5s; }
.tc-sentence { margin: 0 0 18px; color: var(--cream); font-size: clamp(20px, 2.4vw, 25px); letter-spacing: -.02em; font-weight: 500; }
.tc-blank { width: 9ch; min-width: 6ch; max-width: 100%; padding: 0 2px; border: 0; border-bottom: 2px solid #ffffff38; border-radius: 0; background: transparent; color: #fff; font: inherit; font-weight: 600; outline: none; transition: border-color .2s; }
.tc-blank::placeholder { color: #ffffff59; font-weight: 400; font-style: italic; }
.tc-blank:focus { border-color: #7FB2FF; }
.tc-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px; color: #C4CCDD; font-size: 15px; font-weight: 500; }
.tc-label em { font-style: normal; font-size: 13px; color: #7FB2FF; text-align: right; }
.tc-skies { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 5px; border-radius: 16px; background: #0B1430; box-shadow: inset 0 1px 3px #0008, 0 1px 0 #ffffff14; }
.tc-skies button { position: relative; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 10px; border: 0; border-radius: 11px; background: transparent; color: #B8C2DA; font: 500 15px var(--sans); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.tc-skies button:hover { color: #fff; background: #ffffff10; }
.tc-skies button[aria-checked="true"] { background: #22366B; color: #fff; box-shadow: inset 0 1px 0 #ffffff26, 0 4px 10px #0006; }
.tc-skies i { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px #ffffff40, inset 0 -3px 4px #0003; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.tc-skies button:hover i { transform: scale(1.12); }
.tc-skies [data-sky="dawn"] i { background: linear-gradient(var(--tc-dawn)) 0 100% / 100% 220%; } .tc-skies [data-sky="day"] i { background: linear-gradient(var(--tc-day)) 0 100% / 100% 220%; }
.tc-skies [data-sky="dusk"] i { background: linear-gradient(var(--tc-dusk)) 0 100% / 100% 220%; } .tc-skies [data-sky="night"] i { background: linear-gradient(var(--tc-night)) 0 100% / 100% 220%; }
.tc-dock .tc-skies button:not([aria-checked="true"])::after { content: 'Reprint'; position: absolute; right: 9px; color: #7FB2FF; font-size: 11px; font-weight: 600; letter-spacing: .04em; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.tc-dock .tc-skies button:not([aria-checked="true"]):hover::after { opacity: 1; transform: none; }
.tc-dock .tc-skies.tc-nudge { animation: tc-nudge 1.6s 1.4s ease-in-out; }
@keyframes tc-nudge { 30% { box-shadow: inset 0 1px 3px #0008, 0 0 0 2px #7FB2FF88, 0 0 24px #3D85E866; } }
.tc :is(.tc-skies button, .tc-seg button, .tc-link, .tc-qr-btn, .tc-blank):focus-visible { outline: 2px solid #7FB2FF; outline-offset: 2px; }
.tc .button { white-space: nowrap; border-radius: 16px; background: var(--cream); color: var(--ink); box-shadow: inset 0 -2px 0 #0000001f, 0 8px 20px -8px #000a; }
.tc .button:hover { background: #fff; color: var(--ink); }
.tc .button:focus-visible { outline-color: #7FB2FF; }
.tc-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-print { width: 100%; margin-top: 18px; gap: 10px; }
.tc-row { display: flex; align-items: center; gap: 10px; }
.tc-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 16px; background: #0B1430; box-shadow: inset 0 1px 3px #0008, 0 1px 0 #ffffff14; }
.tc-seg::before { content: ''; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 11px; background: #22366B; box-shadow: inset 0 1px 0 #ffffff26, 0 4px 10px #0006; transition: transform .45s cubic-bezier(.3,1.3,.4,1); }
.tc-seg[data-side="back"]::before { transform: translateX(100%); }
.tc-seg button { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 11px; background: transparent; color: #B8C2DA; font: 500 16px var(--sans); cursor: pointer; transition: color .2s; }
.tc-seg button[aria-pressed="true"] { color: #fff; }
.tc-seg i { width: 20px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 1px #ffffff55; }
.tc-seg [data-side="front"] i { background: linear-gradient(var(--tc-sky)); }
.tc-seg [data-side="back"] i { background: var(--tc-bone); }
.tc-save { flex: 1; gap: 10px; }
.tc-qr-btn { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border: 0; border-radius: 16px; background: #0B1430; color: #C4CCDD; cursor: pointer; box-shadow: inset 0 1px 3px #0008, 0 1px 0 #ffffff14; }
.tc-qr-btn:hover, .tc-qr-btn[aria-expanded="true"] { color: #fff; }
.tc-qr { position: absolute; z-index: 5; right: 28px; bottom: calc(100% - 40px); width: 200px; padding: 14px 14px 12px; border-radius: 18px; background: var(--tc-bone) var(--tc-grain); color: var(--ink); text-align: center; box-shadow: 0 30px 60px -20px #000c; opacity: 0; visibility: hidden; transform: translateY(8px) scale(.96); transform-origin: 85% 100%; transition: opacity .2s, transform .3s cubic-bezier(.2,1.2,.3,1), visibility 0s .3s; }
.tc-qr.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tc-qr img { display: block; width: 100%; }
.tc-qr p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.tc-links { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 0; }
.tc-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: #B8C2DA; font: 500 15px var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .2s; }
.tc-link:hover { color: #fff; }
.tc-link .tc-i { width: 16px; height: 16px; transition: transform .25s; }
.tc-link:hover .tc-go { transform: translateX(3px); }

/* The card */
.tc-card { position: absolute; left: 0; bottom: 0; width: var(--w); aspect-ratio: 1.75; transform-style: preserve-3d; outline: none; cursor: pointer;
  transform: translate3d(0, var(--feed, 105%), 0) translate3d(0, var(--lift, 0px), var(--z, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)); }
.tc-card.ease { transition: transform .9s cubic-bezier(.22, 1.25, .36, 1); }
.tc-card.sink { transition: transform .45s cubic-bezier(.5, 0, .7, .4); }
.tc-card:focus-visible .tc-front, .tc-card:focus-visible .tc-back { outline: 3px solid #7FB2FF; outline-offset: 6px; }
.tc-face, .tc-edge { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; }
.tc-edge { background: var(--primary); backface-visibility: visible; } /* a painted edge in sky blue */
.tc-edge.e1 { transform: translateZ(1.5px); } .tc-edge.e2 { transform: translateZ(.5px); } .tc-edge.e3 { transform: translateZ(-.5px); } .tc-edge.e4 { transform: translateZ(-1.5px); }
.tc-front { transform: translateZ(2px); overflow: hidden; background: linear-gradient(var(--tc-sky)); box-shadow: 0 50px 80px -30px #000d, 0 16px 26px -16px #000a; }
.tc-back { transform: rotateY(180deg) translateZ(2px); overflow: hidden; color: var(--ink); background: var(--tc-bone) var(--tc-cotton); box-shadow: 0 50px 80px -30px #000d; }
.tc-layer { position: absolute; inset: -5%; pointer-events: none; }
.tc-stars { background: url(/assets/stars.svg?v=rebuild-05) center / cover; opacity: var(--tc-stars); translate: calc(var(--px, 0) * -3px) calc(var(--py, 0) * -2px); }
.tc-clouds { filter: var(--tc-cloud); translate: calc(var(--px, 0) * -7px) calc(var(--py, 0) * -4px); }
.tc-clouds img { position: absolute; top: var(--t); left: -30%; width: var(--cw); opacity: var(--op, 1); transform: scaleX(var(--sx, 1)); animation: tc-float var(--d) linear calc(var(--d) * var(--o) * -1) infinite; }
@keyframes tc-float { from { left: -30%; } to { left: 108%; } } /* each cloud its own height, size and speed, spread out */
.tc-hill { inset: auto -4% -4% -4%; height: 104%; translate: calc(var(--px, 0) * -3px) calc(var(--py, 0) * -2px); }
.tc-hill img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.tc-tint, .tc-crt { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 1672 / 941; pointer-events: none; }
.tc-tint { background: var(--tc-tint); mix-blend-mode: multiply; -webkit-mask: url(/assets/hero-hill-840.webp?v=rebuild-05) 0 0 / 100% 100%; mask: url(/assets/hero-hill-840.webp?v=rebuild-05) 0 0 / 100% 100%; }
/* The computer screen on the hill (66% across, 36% down the hill picture): a breathing glow, a scan line, a cursor. Strongest at night. */
.tc-bloom { position: absolute; left: 68.3%; top: 39.2%; width: 20%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #9FC8FFb3 0%, #7FB2FF40 30%, transparent 62%); mix-blend-mode: screen; opacity: var(--tc-bloom); animation: tc-breathe 5s ease-in-out infinite; }
.tc-glass { position: absolute; left: 65.9%; top: 36%; width: 4.75%; height: 6.4%; overflow: hidden; border-radius: 22%; background: linear-gradient(#E4F0FF, #A9D1FF 70%, #8CBFFF); box-shadow: 0 0 calc(var(--w) * .012) #9FC8FF; opacity: var(--tc-screen); animation: tc-flicker 7s infinite; }
.tc-glass::before { content: ''; position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(transparent, #ffffff99, transparent); animation: tc-scan 3.2s linear infinite; }
.tc-glass::after { content: ''; position: absolute; left: 18%; bottom: 22%; width: 14%; height: 16%; background: #2B5FB8; animation: blink 1.06s steps(1) infinite; }
@keyframes tc-breathe { 50% { opacity: calc(var(--tc-bloom) * .6); scale: .92; } }
@keyframes tc-flicker { 0%, 90%, 94%, 100% { filter: none; } 92% { filter: brightness(.75); } }
@keyframes tc-scan { from { top: -30%; } to { top: 100%; } }
.tc-words { position: absolute; inset: 0; padding: 7.5% 8%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; translate: calc(var(--px, 0) * 2px) calc(var(--py, 0) * 1px); }
.tc-name { color: var(--cream); font-size: calc(var(--w) * .074); font-weight: 650; letter-spacing: -.035em; line-height: 1; text-shadow: 0 -1px 0 #08205a99, 0 1px 0 #ffffff55, 0 2px 18px #08205a66; }
.tc-role { margin-top: .5em; color: #F5EFE0D9; font-size: calc(var(--w) * .028); letter-spacing: .01em; text-shadow: 0 1px 2px #08205a66; }
.tc-mark { position: absolute; right: 7%; top: 8%; width: calc(var(--w) * .07); filter: drop-shadow(0 1px 0 #ffffff40) drop-shadow(0 -1px 0 #08205a80); }
.tc-frame { position: absolute; inset: 3.2%; border-radius: 9px; box-shadow: inset 0 1px 0 #08205a55, inset 0 -1px 0 #ffffff3a, 0 1px 0 #ffffff2e, 0 -1px 0 #08205a40; pointer-events: none; }
.tc-paper { position: absolute; inset: 0; background: var(--tc-grain); mix-blend-mode: multiply; pointer-events: none; }
.tc-glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: var(--glare, 0); background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), #fffe 0%, #fff7 20%, transparent 55%); }
.tc-sweep { position: absolute; inset: -40%; pointer-events: none; background: linear-gradient(105deg, transparent 40%, #ffffff40 49%, #ffffff66 50%, #ffffff40 51%, transparent 60%); transform: translateX(-70%); }
.tc-card.shine .tc-sweep { animation: tc-sweep 1.1s .1s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes tc-sweep { to { transform: translateX(70%); } }
/* Back: generous margins, one strong element (the brand wordmark), everything else small and quiet,
   aligned to two edges. Ink pressed into cotton stock gets a light lip below. */
.tc-back { --u: calc(var(--w) / 100); padding: calc(var(--u) * 8.2) calc(var(--u) * 8.6) calc(var(--u) * 8.4); display: grid; grid-template: auto 1fr auto / 1fr auto; text-align: left; }
.tc-press { filter: drop-shadow(0 1px 0 #ffffffd9) drop-shadow(0 -.5px 0 #14213D40); }
.tc-head { grid-column: 1 / -1; }
.tc-wordmark { display: block; width: calc(var(--u) * 50); aspect-ratio: 333 / 47; background: var(--ink); -webkit-mask: url(/assets/wordmark.svg?v=rebuild-05) 0 0 / 100% 100% no-repeat; mask: url(/assets/wordmark.svg?v=rebuild-05) 0 0 / 100% 100% no-repeat; }
.tc-title, .tc-place { color: #3B4763; font-size: calc(var(--u) * 2.15); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.tc-title { display: block; margin-top: calc(var(--u) * 2.6); }
.tc-rule { grid-column: 1 / -1; height: 1px; margin: calc(var(--u) * 4) 0 calc(var(--u) * 3.2); background: linear-gradient(90deg, var(--primary) 0 calc(var(--u) * 5), transparent calc(var(--u) * 5)); }
.tc-contact { grid-column: 1; align-self: end; font-size: calc(var(--u) * 2.75); line-height: 1.75; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tc-contact a { display: block; width: fit-content; color: var(--ink); text-decoration: none; }
.tc-contact a:hover { color: var(--primary); }
.tc-place { grid-column: 2; align-self: end; text-align: right; }
.tc-place span { display: block; line-height: calc(var(--u) * 4.8); }
.tc-edition { position: absolute; left: calc(var(--u) * 8.6); right: calc(var(--u) * 8.6); bottom: calc(var(--u) * 3); display: flex; justify-content: space-between; color: #8A8370; font: calc(var(--u) * 1.45)/1 ui-monospace, Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.tc-edition b { color: var(--primary); font-weight: 600; }
.tc-back-glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: calc(var(--glare, 0) * .8); background: radial-gradient(circle at calc(100% - var(--gx, 50%)) var(--gy, 30%), #fff 0%, #fff6 25%, transparent 60%); }
/* Paused while off screen (card.js) so the page doesn't animate what nobody sees. */
.tc-off .tc-clouds img, .tc-off .tc-crt i, .tc-off .tc-glass::before, .tc-off .tc-glass::after { animation-play-state: paused; }
/* Without JavaScript the card is simply out and showing its back. */
html:not(.js) .tc-card { --feed: 0%; --lift: -56px; --ry: 180deg; }
html:not(.js) .tc-mouth { overflow: visible; pointer-events: auto; }
html:not(.js) .tc-states { display: none; }
.tc-toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; padding: 12px 18px; border-radius: 14px; background: var(--cream); color: var(--ink); font-size: 15px; font-weight: 500; box-shadow: 0 20px 40px -10px #000a; opacity: 0; transform: translate(-50%, 160%); transition: transform .45s cubic-bezier(.2,1.2,.3,1), opacity .3s; }
.tc-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 560px) {
  .tc-panel { padding: 40px 16px 18px; }
  .tc-skies { grid-template-columns: repeat(2, 1fr); }
  .tc-seg button { padding: 0 12px; }
  .tc-seg button span, .tc-x, .tc-qr-btn, .tc-qr, .tc-dock .tc-skies button::after { display: none; }
  .tc-link { font-size: 14px; }
  .tc .button { padding: 0 16px; font-size: 15px; }
}
@media (pointer: coarse) { .tc-qr-btn, .tc-qr { display: none; } }

/* Footer */
footer { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding: 32px var(--gutter); }
footer .brand { font-size: 19px; }
footer .brand img { width: 32px; }
.footer-details { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; color: var(--muted); font-size: 15px; }
.footer-details li { padding-block: 10px; }
.footer-details li:has(a) { padding-block: 0; }
.footer-details a { display: inline-block; padding-block: 10px; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  /* Phones and tablets: text on the sky at the top, then the hill rising to the right with the desk near the top of it. */
  .hero { flex-direction: column; align-items: stretch; height: auto; padding: 132px 0 0; }
  .hero-copy { max-width: 640px; padding: 0 32px; }
  h1 { font-size: clamp(40px, 9vw, 60px); }
  .scene { --w: max(150%, 820px); order: 2; position: relative; bottom: auto; left: auto; translate: none; width: var(--w); margin: -20% 0 0 calc(56% - var(--w) * .66); }
  .section { padding-block: 80px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s4, .s5, .s6 { grid-column: span 1; } .s7 { grid-column: 1 / -1; }
  .steps > li:nth-child(n) { grid-column: span 6; }
}
@media (max-width: 900px) {
  nav > a:not(.header-cta) { display: none; }
  .section { padding: 72px 32px; }
  /* Phones: the desk peeks out under the form. The hill is 1.46 screen-widths tall, so place it by the screen width. */
}
@media (max-width: 760px) {
  .site-header { top: 12px; left: 12px; right: 12px; gap: 12px; padding: 6px 6px 6px 14px; }
  .site-header .brand { font-size: 18px; gap: 10px; }
  .site-header .brand img { width: 32px; }
  .header-cta { min-height: 44px; padding: 10px 18px; font-size: 15px; }
  .hero { padding-top: 104px; }
  .hero-copy { padding-inline: 24px; }
  .hero-intro { font-size: 18px; margin-bottom: 28px; }
  .section { padding: 64px 24px; scroll-margin-top: 80px; }
  h2 { font-size: clamp(32px, 9vw, 40px); margin-bottom: 28px; }
  /* Phones: one column, every picture on top of its text. */
  .services-intro { margin: -12px 0 28px; font-size: 17px; }
  .bento { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .s4, .s5, .s6, .s7 { grid-column: auto; }
  .art { height: auto; min-height: 220px; padding: 1.2em; }
  .art, .art:has(.extract) { font-size: clamp(9px, 2.6cqw, 12px); }
  .art:has(.phone) { height: 300px; }
  .phone { width: 28em; }
  .art:has(.workspace) .workspace { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .art:has(.workspace) aside { display: none; }
  .art:has(.workspace) { height: 300px; }
  .art:has(.extract) .extract { grid-template-columns: 10.5em minmax(0, 1fr); gap: .8em; }
  .receipt { font-size: .72em; }
  .extract .arrow { display: none; }
  .sr { grid-template-columns: 3.6em 1fr 4em; } .sr span:nth-child(3) { display: none; }
  .wish { font-size: 16px; padding-left: 1em; }
  .wish-chips button { font-size: 14px; padding: 7px 12px; }
  .cta-tile { grid-template-columns: minmax(0, 1fr); }
  .wish-copy { padding: 28px 20px 32px; }
  .wish-wall { justify-content: flex-start; padding-top: 6px; -webkit-mask-image: linear-gradient(#000 36%, transparent 50%); mask-image: linear-gradient(#000 36%, transparent 50%); }
  .wish-float { order: -1; padding: 74px 20px 0; }
  .tile-body { padding: 16px 18px 20px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .steps > li, .steps > li:nth-child(n) { grid-column: auto; min-height: 0; padding: 28px 24px 0; border-radius: 26px; }
  .stage { min-height: 0; padding-top: 16px; }
  .stage img { width: min(100%, 340px); }
  .steps h3 { font-size: 23px; }
  .chip, .convo { display: none; }
  .approach-head { margin-bottom: 32px; }
  .approach-head p { font-size: 17px; }
  .lt-head { padding: 20px 20px 14px; }
  .lt-page { padding: 16px 20px 20px; }
  footer { padding: 28px 24px; flex-direction: column; align-items: flex-start; }
  .footer-details { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 360px) {
  .site-header .brand { font-size: 16px; }
  .header-cta { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro .hero *, .intro .crt::before { animation: none; }
  .hero *, .crt::after { animation-play-state: paused; }
  .button, .button span, .tile { transition: none; }
  .caret { animation: none; }
  .dots i, .hub, .scan, .wish-row, .chip { animation: none !important; }
    .tile:hover { transform: none; }
  .contact-pop, .contact-pop:popover-open { transition: opacity 150ms; transform: none; }
  .tc-card.ease, .tc-card.sink, .lt-sheet { transition: none; }
  .tc-clouds img, .tc-crt i, .tc-glass::before, .tc-glass::after, .tc-skies.tc-nudge, .lt-blank.miss, .lt-receipt { animation: none; }
}

/* 404 and the no-JavaScript form reply */
.not-found { min-height: 100svh; display: grid; place-items: center; }
.error-content { padding: 64px 24px; max-width: 640px; }
.error-content .brand { margin-bottom: 64px; }
.error-content h1 { font-size: clamp(52px, 10vw, 88px); }
.error-content > p { color: var(--muted); max-width: 420px; }

/* The desk Easter egg (egg.js): the close-up of the hero CRT, with the conversation on its glass. */
.egg-open { overflow: hidden; }
.crt.egg-wake { background: #2C7BF2; transition: background 300ms; }
.crt.egg-wake::after { display: none; }
.crt.egg-wake .wake { opacity: 0; }
.crt.egg-bye .bounce { opacity: 0; }
.crt.egg-bye .wake { opacity: 1; font-size: 14cqh; }
.egg { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--fill, #218AFA); color: var(--cream); }
.egg::backdrop { background: transparent; }
.egg-scene { position: absolute; }
.egg-drift { position: absolute; inset: 0; transition: translate 900ms cubic-bezier(.2,.7,.2,1); animation: egg-drift 28s ease-in-out infinite alternate; }
@keyframes egg-drift { to { transform: scale(1.018) translate(-.4%, .3%); } }
.egg-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.egg-gap .egg-photo { mask-image: linear-gradient(transparent, #000 7%); }
/* Clouds drift through the photo's sky only: the sky mask hides them behind the monitor. Hero clouds and tints. */
.egg-clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: var(--sky-mask) 0 0 / 100% 100% no-repeat; mask: var(--sky-mask) 0 0 / 100% 100% no-repeat; filter: var(--cloud-filter); }
.egg-clouds img { position: absolute; top: var(--y); left: var(--x0); width: var(--w); height: auto; transform: scaleX(var(--sx, 1)); animation: egg-cloud var(--t) linear calc(var(--t) * var(--at) * -1) infinite; }
@keyframes egg-cloud { to { left: var(--x1); } }
.egg[data-shape="wide"] .egg-clouds img { --x0: 101%; --x1: 30%; }
.egg[data-shape="wide"] .c1 { --w: 21%; --y: 7%; --t: 100s; --at: .1; }
.egg[data-shape="wide"] .c3 { --w: 16%; --y: 38%; --t: 125s; --at: .6; }
.egg[data-shape="tall"] .egg-clouds img { --x0: 101%; --x1: -75%; }
.egg[data-shape="tall"] .c1 { --w: 55%; --y: 3%; --t: 90s; --at: .2; }
.egg[data-shape="tall"] .c3 { --w: 40%; --y: 13%; --t: 120s; --at: .7; }

/* The screen. No background of its own: the photo's glow is the screen. A faint glass layer sits over the type. */
.egg-ui { position: absolute; container-type: size; display: flex; flex-direction: column; padding: 7.5cqh 9cqw 7cqh; mix-blend-mode: screen; text-shadow: 0 0 1.4cqw rgba(255,236,200,.35); }
.egg-ui::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 5cqw; background: linear-gradient(120deg, rgba(255,255,255,.07), transparent 35%), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(4,16,48,.22)); animation: egg-breathe 7s ease-in-out infinite alternate; }
@keyframes egg-breathe { to { opacity: .55; } }
.egg-ui > * { transition: opacity 500ms ease; }
.egg-ui.is-saver > :not(.egg-saver), .egg-ui.is-welcome > :not(.egg-welcome) { opacity: 0; pointer-events: none; }

.egg-bar { flex: none; display: flex; justify-content: space-between; align-items: center; font-size: max(10px, 1.45cqw); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.egg-brand { display: inline-flex; align-items: center; gap: .8em; }
.egg-brand img { height: 2.1em; width: auto; }
.egg-log { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .45em; margin: 3cqh 0 0; padding: 0; overflow: hidden; list-style: none; font-size: max(12px, 1.85cqw); line-height: 1.45; mask-image: linear-gradient(transparent, #000 30%); }
.egg-log .george { opacity: .9; max-width: 46ch; }
.egg-log .you { opacity: .5; }
.egg-log .you::before { content: '› '; }
.egg-count { flex: none; margin: 3.2cqh 0 1cqh; font-size: max(10px, 1.3cqw); letter-spacing: .12em; text-transform: uppercase; opacity: .5; }
.egg-count:empty { display: none; }
.egg-q { flex: none; position: relative; margin: 0; max-width: 21ch; text-wrap: balance; font-size: max(21px, 5.2cqw); font-weight: 300; line-height: 1.08; letter-spacing: -.025em; }
.egg-ghost { position: absolute; left: 0; bottom: 0; pointer-events: none; }
.egg-q:has(+ .egg-answer[hidden]) .egg-type::after, .egg-ui.is-done .egg-type::after { content: ''; display: inline-block; width: .06em; height: .9em; margin-left: .08em; vertical-align: -.08em; background: currentColor; animation: blink 1.1s steps(1) infinite; }
.egg-answer { flex: none; display: flex; align-items: center; gap: 2cqw; margin-top: 3.5cqh; padding-bottom: 1.4cqh; border-bottom: 1px solid rgba(245,239,224,.38); }
.egg-answer[hidden] { display: none; }
.egg-answer.is-waiting { opacity: 0; }
.egg .egg-input { flex: 1; min-width: 0; width: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: 400 max(16px, 2.5cqw)/1.3 var(--sans); caret-color: currentColor; outline: none; text-shadow: inherit; }
.egg-input::placeholder { color: rgba(245,239,224,.42); }
.egg-enter { font-size: max(10px, 1.25cqw); letter-spacing: .1em; text-transform: uppercase; opacity: .55; white-space: nowrap; }
.egg-chips { flex: none; display: flex; flex-wrap: wrap; gap: 1.1cqw; margin-top: 1cqh; padding: 1px 0; }
.egg-chips:empty { display: none; }
/* Small glass (phones): one row of chips that scrolls sideways, fading at the right edge. */
@container (max-width: 480px) { .egg-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); } .egg-chips button { flex: none; } .egg-chips::-webkit-scrollbar { display: none; } .egg-log { min-height: 2.95em; margin-top: 1.5cqh; } .egg-count { display: none; } .egg-note { min-height: 0; } }
.egg-chips button, .egg-done button { padding: .45em 1em; border: 1px solid rgba(245,239,224,.42); border-radius: 999px; background: transparent; color: inherit; font: 500 max(12px, 1.5cqw)/1.2 var(--sans); cursor: pointer; transition: background .2s, border-color .2s; }
.egg-chips button:hover, .egg-done button:hover, .egg-chips button:focus-visible, .egg-done button:focus-visible { background: rgba(245,239,224,.14); border-color: var(--cream); outline: none; }
.egg-done { flex: none; display: flex; flex-wrap: wrap; gap: 1.4cqw; margin-top: 2.4cqh; }
.egg-done[hidden] { display: none; }
.egg-done .egg-save { background: rgba(245,239,224,.16); border-color: var(--cream); }
.egg-note { flex: none; min-height: 1.45em; margin: 1.6cqh 0 0; font-size: max(13px, 1.7cqw); opacity: .78; }
.egg-note a { color: inherit; }
.egg-sign { position: absolute; right: 9cqw; bottom: 7cqh; width: 24cqw; aspect-ratio: 333 / 47; background: var(--cream); -webkit-mask: url(/assets/wordmark.svg?v=rebuild-05) center / contain no-repeat; mask: url(/assets/wordmark.svg?v=rebuild-05) center / contain no-repeat; opacity: 0; }
.egg-ui.is-done .egg-sign { opacity: .8; }
.egg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Screensaver (the hero's bouncing logo, full size) and the welcome card. */
.egg-saver, .egg-welcome { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.egg-ui.is-saver .egg-saver, .egg-ui.is-welcome .egg-welcome { opacity: 1; }
.egg-saver img { position: absolute; height: 22cqh; width: auto; animation: egg-bx 9s linear infinite alternate, egg-by 6.3s linear infinite alternate; }
@keyframes egg-bx { from { left: 6cqw; } to { left: calc(94cqw - 20.3cqh); } }
@keyframes egg-by { from { top: 7cqh; } to { top: 71cqh; } }
.egg-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqh; }
.egg-wordmark { width: 62cqw; aspect-ratio: 333 / 47; background: var(--cream); -webkit-mask: url(/assets/wordmark.svg?v=rebuild-05) center / contain no-repeat; mask: url(/assets/wordmark.svg?v=rebuild-05) center / contain no-repeat; }
.egg-welcome span:last-child { font-size: max(11px, 1.5cqw); letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.egg-ui.is-welcome .egg-wordmark { animation: egg-rise 1100ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes egg-rise { from { opacity: 0; transform: translateY(2cqh); letter-spacing: .02em; } }

.egg-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 0; border-radius: 999px; background: rgba(8,24,64,.28); backdrop-filter: blur(8px); color: #fff; font: 500 14px var(--sans); cursor: pointer; }
.egg-close:hover { background: rgba(8,24,64,.45); }
.egg-close kbd { font: 500 11px var(--sans); letter-spacing: .08em; opacity: .7; }
@media (hover: none) { .egg-close kbd, .egg-enter { display: none; } }
@media (prefers-reduced-motion: reduce) { .egg-drift, .egg-ui::after, .egg-saver img, .egg-ui.is-welcome .egg-wordmark, .egg-clouds img { animation: none; } }