/* Foreglow: the hour before sunrise. Tokens, type, layout, components. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 200 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #08090b;
  --ink: #15171b;
  --paper: #efe9dd;
  --glow: #e39a52;
  --ember: #b8642c;
  --p84: rgba(239, 233, 221, 0.84);
  --p78: rgba(239, 233, 221, 0.78);
  --p74: rgba(239, 233, 221, 0.74);
  --line: rgba(239, 233, 221, 0.16);
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --g: clamp(16px, 4.2vw, 72px);
  --gap: 24px;
  /* type: one ratio, about 1.2, from 16 px text (13, 16, 19, 23); one h3 size; display sizes jump further
     (design audit 2026-10-11: there were 13 sizes, seven of them 6% apart). Phones and tablets reset them below */
  --t-s: 13px;
  --t-m: 16px;
  --t-l: 19px;
  --t-xl: 23px;
  --h3: clamp(24px, calc(3.35 * var(--vh)), 36px);
  /* spacing: one 4 px scale (same audit: 27 hard-coded values, many off the grid) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --bar: 76px;
  --hz: 62svh;               /* the horizon at rest; main.js sets the exact pixel value */
  --vh: 1svh;                /* the page's screen-height unit; phones: main.js fixes it per width (see there) */
  /* one size for every section heading (the work, What we build, How it works, the questions); the first
     screen's headline and Contact's, the finale, are bigger */
  --h2: clamp(36px, min(3.4vw, calc(5.6 * var(--vh))), 52px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  color-scheme: dark;
  accent-color: var(--glow);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: rgba(239, 233, 221, 0.28) var(--night); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font: 400 var(--t-m)/1.6 var(--sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, canvas { display: block; }
a { color: inherit; }
::selection { background: rgba(227, 154, 82, 0.42); color: var(--paper); }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; border-radius: 2px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The dawn: one fixed canvas behind everything (sky, ground, sun, the lit g) */
.dawn, .dawn-still {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
}
.dawn-still { display: none; background: var(--night) center / cover no-repeat; }
.no-gl .dawn { display: none; }
.no-gl .dawn-still { display: block; }
/* a menu link that jumps far (the top to Contact) dips to the night for a moment instead of racing through
   the whole page; the top bar stays put (main.js) */
.veil { position: fixed; inset: 0; z-index: 15; background: var(--night); opacity: 0; pointer-events: none; transition: opacity 0.38s var(--ease-out); }
.is-cut .veil { opacity: 1; transition-duration: 0.14s; }
[tabindex="-1"]:focus { outline: none; }   /* a section a menu link moved the focus to */

.skip {
  position: fixed; left: var(--g); top: 12px; z-index: 30;
  padding: var(--s3) var(--s4); border-radius: 999px; background: var(--paper); color: var(--ink);
  font-weight: 500; text-decoration: none; transform: translateY(-160%); transition: transform 0.2s var(--ease-out);
}
.skip:focus-visible { transform: none; }

/* Top bar: transparent over the first screen at rest; once the page moves, content fades under an edge effect */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--bar);
  display: flex; align-items: center; gap: var(--s6);
  padding: 0 var(--g);
  padding-top: env(safe-area-inset-top);
}
.bar::before {
  content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 9, 11, 0.82), rgba(8, 9, 11, 0.5) 62%, rgba(8, 9, 11, 0));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.is-scrolled .bar::before { opacity: 1; }
.brand { margin-right: auto; display: block; }
.brand img { width: 132px; height: auto; }
.nav { display: flex; gap: var(--s6); }
.nav a {
  color: var(--p84); text-decoration: none; font-size: var(--t-m); letter-spacing: 0.005em;
  padding: var(--s3) 0; transition: color 0.15s;
}
.nav a:hover { color: var(--paper); }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 var(--s5); border-radius: 2px;
  font: 500 var(--t-m)/1 var(--sans); letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  transition: transform 0.1s, background-color 0.2s, border-color 0.2s;
}
.btn:active { transform: scale(0.975); }
/* Solid, 2 px corners, no shadow (blueprint 2026-10-15: the glass buttons went with the AI tells): every
   action, "Book a call" first, on the night (the brightest thing on screen after the g) */
.btn--solid {
  color: var(--ink); background: var(--paper); border: 1px solid var(--paper);
}
.btn--solid:hover { background: #f8f4ec; border-color: #f8f4ec; }
.btn--small { min-height: 40px; padding: 0 var(--s4); position: relative; }
.btn--small::after { content: ""; position: absolute; inset: -4px -2px; }   /* a touch area of 48 px, the look unchanged */
.link {
  font: 500 var(--t-m)/1.2 var(--sans); color: var(--paper);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: rgba(239, 233, 221, 0.5);
  display: inline-block; padding: var(--s3) 0;
  transition: text-decoration-color 0.2s, color 0.2s;
}
.link:hover { text-decoration-color: var(--glow); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .bar::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--night); -webkit-mask-image: none; mask-image: none; }
}

/* Type */
h1, h2 { font-family: var(--serif); font-weight: 280; letter-spacing: -0.018em; text-wrap: balance; }
.lede { font-size: var(--t-l); line-height: 1.55; color: var(--p84); max-width: 30em; }

main { position: relative; z-index: 1; }

/* 1. First screen: the headline stands on the horizon, the g beside it */
.hero { position: relative; height: calc(100 * var(--vh)); min-height: 600px; }
.hero__title {
  position: absolute; left: var(--g); top: var(--h1-top, calc(var(--hz) - 1.9em));
  font-size: clamp(52px, 6.3vw, 96px); line-height: 0.98;
}
.baseline { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.hero__under { position: absolute; left: var(--g); top: calc(var(--hz) + 38px); max-width: 540px; }
.actions { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s6); }

.g-handle {
  position: fixed; z-index: 2; left: 0; top: 0; width: 0; height: 0;
  cursor: grab; touch-action: pan-y; border-radius: 40% / 30%;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.g-handle.is-dragging { cursor: grabbing; }
.g-handle[hidden] { display: none; }
.g-hint {
  position: fixed; z-index: 2; left: 0; top: 0; width: 160px; margin-left: -80px;
  text-align: center; font-size: var(--t-s); color: var(--p78); pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
.g-hint.is-off { opacity: 0; }
.no-gl .g-hint, .no-gl .g-handle { display: none; }   /* no sky canvas, no g to turn */

/* 2. Work: each project is a lit window that plays while you scroll, then makes room for its words */
/* How a launch is made (blueprint 2026-10-15, Solenne since 2026-10-29): a browser window on the night horizon;
   the g walks the horizon below it and its beam turns a drawing of Solenne into the live site, whose sun then
   moves. main.js sets --p (how far the light has swept, 0..1), data-f (which sun picture is up), --wl/--ww/--wt
   (the window's place in the stage), --hz-make (the horizon) and --g-above/--g-below (the g's height above it
   and its glow below it). Without scripts or WebGL: the live site, all three steps listed. */
.make { position: relative; --p: 1; }
.make__stage { position: relative; padding: calc(var(--bar) + 40px) var(--g) 64px; }
.make__title { font-size: var(--h2); line-height: 1.02; }
.make__steps { list-style: none; display: grid; gap: var(--s4); margin-top: var(--s5); }
.make__step h3 { font: 500 var(--t-l)/1.3 var(--sans); color: var(--paper); margin-top: var(--s1); }
.make__step p { color: var(--p84); max-width: 34ch; margin-top: var(--s1); }
.make__actions { flex-wrap: wrap; gap: var(--s3) var(--s5); margin-top: var(--s5); }
.make__site { margin: var(--s6) 0 0; border-radius: 2px; overflow: hidden; background: #f9f7f2; box-shadow: 0 0 0 1px rgba(239, 233, 221, 0.16); }
.make__chrome { height: 32px; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3); background: #1b1d22; color: var(--p74); font-size: var(--t-s); }
.make__chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(239, 233, 221, 0.28); }
.make__addr { display: none; min-width: 0; margin-left: var(--s3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line, even in a narrow window */
.make__addr[data-at="3"], .make[data-s="1"] .make__addr[data-at="1"], .make[data-s="2"] .make__addr[data-at="2"] { display: block; }
.make[data-s="1"] .make__addr[data-at="3"], .make[data-s="2"] .make__addr[data-at="3"] { display: none; }
.make__view { position: relative; aspect-ratio: 1440 / 790; overflow: hidden; }
.make__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.make__live { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
/* then the site's sun moves: each later picture fades in over the one before, so nothing flashes between */
.make__sun { opacity: 0; transition: opacity 0.5s var(--ease-out); }
.make[data-f="1"] .make__sun[data-f="1"], .make[data-f="2"] .make__sun:is([data-f="1"], [data-f="2"]), .make[data-f="3"] .make__sun { opacity: 1; }
.make__wash { position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 100% - 160px); width: 160px; pointer-events: none;
  background: linear-gradient(90deg, rgba(227, 154, 82, 0), rgba(227, 154, 82, 0.28)); opacity: calc(min(1, var(--p) * 20) * min(1, (1 - var(--p)) * 20)); }
.make__beam, .make__rail { display: none; }

.js:not(.no-gl) .make { height: calc(200 * var(--vh)); --p: 0; }
.js:not(.no-gl) .make__stage { position: sticky; top: 0; height: calc(100 * var(--vh)); padding: 0; }
.js:not(.no-gl) .make__words { position: absolute; left: var(--g); top: calc(var(--bar) + 40px); width: calc(37vw - var(--g) - 48px); }
.js:not(.no-gl) .make__steps { grid-template-areas: "step"; }
.js:not(.no-gl) .make__step { grid-area: step; opacity: 0; transition: opacity 0.35s var(--ease-out); }
.js:not(.no-gl) .make__step.is-current { opacity: 1; }
.js:not(.no-gl) .make__site { position: absolute; left: 37vw; width: 55vw; top: calc(var(--bar) + 40px); margin: 0; }
.js:not(.no-gl) .make__beam { display: block; position: absolute; z-index: 2; pointer-events: none;
  left: calc(var(--wl, 37vw) + var(--p) * var(--ww, 55vw)); top: var(--wt, 116px); width: 2px; margin-left: -1px;
  height: max(0px, calc(var(--hz-make, 86vh) - var(--g-above, 150px) - var(--wt, 116px) + 6px));
  background: linear-gradient(#ffe2b8, #ffd9a8 70%, rgba(255, 217, 168, 0.35));
  box-shadow: 0 0 18px 4px rgba(227, 154, 82, 0.7), 0 0 64px 16px rgba(227, 154, 82, 0.26); }
.js:not(.no-gl) .make__rail { display: block; position: absolute; left: var(--wl, 37vw); width: var(--ww, 55vw);
  top: calc(var(--hz-make, 86vh) + var(--g-below, 40px) + 8px); height: 24px; font-size: var(--t-s); color: var(--p74); }
.make__beam, .make__rail { transition: opacity 0.3s var(--ease-out); }
.make.is-leaving .make__beam, .make.is-leaving .make__rail { opacity: 0; }
.make__rail span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; transition: color 0.3s; }
.make__rail span[data-at="1"] { left: 0; transform: none; }
.make__rail span[data-at="2"] { left: 50%; }
.make__rail span[data-at="3"] { left: 100%; transform: translateX(-100%); }
.make[data-s="1"] .make__rail [data-at="1"], .make[data-s="2"] .make__rail [data-at="2"], .make[data-s="3"] .make__rail [data-at="3"] { color: var(--paper); font-weight: 500; }
@media (max-width: 759px), (max-aspect-ratio: 9/10) {
  .js:not(.no-gl) .make__words { position: relative; left: auto; top: auto; width: auto; padding: calc(var(--bar) + 16px) var(--g) 0; }
  .js:not(.no-gl) .make__steps { margin-top: var(--s3); }
  .js:not(.no-gl) .make__site { position: relative; left: auto; top: auto; width: auto; margin: var(--s5) var(--g) 0; }
}
@media (max-width: 759px) {
  .js:not(.no-gl) .make__cta { display: none; }
  .js:not(.no-gl) .make__actions { margin-top: var(--s3); }
  .js:not(.no-gl) .make__site { margin: var(--s5) 56px 0; }   /* the g stays whole at both ends of its walk */
  .make__view { aspect-ratio: 3 / 2; }   /* phones get the phone site: the whole tower on its ground line, its clock and slider */
}

.work { position: relative; margin-top: calc(10 * var(--vh)); }
.case { position: relative; height: calc(140 * var(--vh)); }
.case__stage {
  position: sticky; top: 0; height: calc(100 * var(--vh));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-content: center; padding: var(--bar) var(--g) 0;
}
.case__win {
  grid-column: 5 / 13; grid-row: 1; align-self: start;
  position: relative; display: block; aspect-ratio: 16 / 10; max-height: calc(100 * var(--vh) - var(--bar) - 96px);
  justify-self: end; width: 100%;
  border-radius: 2px; overflow: hidden; background: #050608 center / cover no-repeat;   /* main.js puts the first picture here */
  box-shadow: 0 0 0 1px rgba(239, 233, 221, 0.14);
  transition: transform 0.6s var(--ease-io), box-shadow 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}
/* each window's first picture, tiny and blurred, inside this stylesheet: on a slow line the window shows it at once
   instead of black, until the sharp one arrives (tools/foreglow/previews.py writes these) */
#lista .case__win { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAUACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDmIrbeoOa09O0T7c0oEoTy0L8jr7VnQzbe9b3h68VNQCM2BIjKcn2rzZNlIzLrTPImKBsjAIP1GapzWuwEk1salcLmPDAnbg4PoTWTNNu70RkwZRVjUgdvWiitWITcQMUxmNFFCA//2Q=="); }
@media (max-width: 759px), (max-aspect-ratio: 9/10) { #lista .case__win { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAoACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDkVSpViJ6CrEGCADXbxafYzeG4X8hRIycyL8rZ+tedKpGKvJlJXOBeFl6qR9RULJXV6rDGdOs5RnKboiTyfl6fzrCnK7SAMU4yT2Cw2A9K7vRZBP4VkjOCULD+tefRviuw8I3G+yvrcnjAb+YqZIaIbs79HuFI/wBTcA/gwrm5z1roAc2uoQjoYA4+qtXMyPmpprRBLcrq9Wba/ubMs1rIyF12kg9RRRW7SJIzdTuzPLNIzMMHLdqiZ6KKEgP/2Q=="); } }
#solenne .case__win { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAUACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDi+nQ0IqmRd4yM801rq2MQKB95/hNSPLabfkkJfGRxxn0rpc42M1FkciAyNsGBnjmk8v3FP861SAHzCZMcqBTI7qAk+ajDjgjmhTVg5WZyucGl3kgZoornLFJxzgGlKgordzRRQM//2Q=="); }
@media (max-width: 759px), (max-aspect-ratio: 9/10) { #solenne .case__win { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAoACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDiTSbSTgDNOqWCQxyqy/KQeorreiuZLUrlSDgjBpuKsTs0kzMzFjnqe9IEAHK5oTurg9yeK385N8Z3L60k9uYU3twMiqUF5cW8bRxt8rj8qQ3s7RiKaQsnBwe1ZOpdWLUS7b2ryxbxyCTzSyQeUQJG25BPNUk1O4ggMMJAXnnHPNQzXUs53SuW+tCqWVg5SHBMmAcVJ5R/ibFFFTbQLkZLDo1OLurAtk/rRRSsrDuf/9k="); } }
#etabli .case__win { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAUACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCe3sWkYKqkmt+w0ZEw8/J9K04LaKBcIoHvReGRbOUw58wKduBzmobKSJBbxEAFBj6U5beNfujFNtS5tozJneVG7PrU4NICEVW1J2j06d0YqwQkEdqKKHsOO5LYMz2ULMSWKAknvUkzFV4oooWwPc//2Q=="); }
@media (max-width: 759px), (max-aspect-ratio: 9/10) { #etabli .case__win { background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAoACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCzFbljhVya17LSi2GkFaNrYxwgcc1dUY6VBRBHZwquNgpTYwt0GKsCnigCICqup3bWVk86ruK44q3VHWbaa7sGhgALEjqcUntoNWvqWLCc3VnFOwwXXOKtCqelwyW+nxQzY3oMHBzVsULYHvoMrP1u7ms7HzYCA24DJGaKKUtmOG6JtJuJLrT45piC7ZzgVdooojsKW7P/2Q=="); } }
.js .case:not(.is-settled) .case__win { transform: translateX(var(--play-dx, 0px)); }
/* the window is a link to the live demo: it brightens when pointed at, or when its button is */
.case__win:hover, .case:has(.case__cta:hover) .case__win { filter: brightness(1.06); }
.case__win:focus-visible { outline-offset: 6px; }
.case__win::after {
  content: ""; position: absolute; inset: 0; background: #050608; opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}
.js .case:not(.is-lit) .case__win::after { opacity: 0.62; }   /* scripts light the window as it arrives */
.case__canvas, .case__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__canvas { z-index: 1; opacity: 0; }
.case__still { z-index: 0; }
/* without scripts the window shows its last frame (the noscript still) and the words are simply there */

/* the words stand the window's full height: the label on its top edge, the button on its bottom edge */
.case__copy {
  grid-column: 1 / 5; grid-row: 1; align-self: stretch;
  display: flex; flex-direction: column; align-items: flex-start;
  transition: opacity 0.4s var(--ease-out) 0.25s;
  position: relative; isolation: isolate;
}
/* a soft shade on the sky behind the words, so a lit cloud passing behind never weakens them (measured
   2026-10-10 over the Établi frame: 4.4:1 without, 6.5:1 with) */
.js:not(.no-gl) .case__copy::before {
  content: ""; position: absolute; z-index: -1; inset: -90px -120px -90px -140px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 12, 28, 0.42), rgba(10, 12, 28, 0.28) 55%, rgba(10, 12, 28, 0));
}
/* while the window plays the words are faded out, not hidden, so screen readers still find them wherever the
   page is; only the button leaves the tab order meanwhile (the window itself links to the same demo) */
.js .case:not(.is-settled) .case__copy { opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease-out); }
.case__cta { transition: visibility 0s; }
.js .case:not(.is-settled) .case__cta { visibility: hidden; transition: visibility 0s linear 0.4s; }
.meta { font-size: var(--t-s); color: var(--p78); letter-spacing: 0.005em; }
.case__copy .meta { line-height: 1; margin-top: -2px; color: var(--p84); }   /* over lit clouds: 4.3:1 at 78%, 4.8 at 84% */
.case__copy h2 { font-size: var(--h2); line-height: 1.04; margin: var(--s4) 0 var(--s5); }
.case__copy .body { font-size: var(--t-m); line-height: 1.6; color: var(--p84); max-width: 30em; }
.case__cta { margin-top: auto; }

/* 3. What we build (Jeet 2026-10-15, the final design): the dawn clouds stay behind the section; a laptop rises
   and opens with the scroll (frames rendered in Blender by tools/foreglow/laptop.py) and its screen shows the
   three offers in turn: Solenne from night to first light, an ordinary watch shop that a dragged light turns into
   our Établi, Lista's can in one beam of light. The words sit beside it on a soft shade. lit.js keeps the scroll
   as the one source of truth: the laptop opens in the first 16% of the section, then each offer holds ~28%. */
.lit { position: relative; }
.lit__stage { position: relative; height: calc(100 * var(--vh)); overflow: hidden; }
.js .lit { height: calc(220 * var(--vh)); }
.js .lit__stage { position: sticky; top: 0; }
/* the shade (Jeet: "a slight black background made the text readable"): on the whole section, behind
   everything and over the sky only, left of the laptop on wide screens and even on upright ones; it fades in and
   out over 30% of a screen beyond the section's ends (inside the pinned stage it stood as a hard band at the
   stage's top and bottom edges while the stage came in and left) */
.lit::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-30 * var(--vh)); bottom: calc(-30 * var(--vh)); pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 9, 11, 0.76), rgba(8, 9, 11, 0.58) 32%, rgba(8, 9, 11, 0) 60%);
  -webkit-mask-image: linear-gradient(transparent, #000 calc(30 * var(--vh)), #000 calc(100% - 30 * var(--vh)), transparent);
  mask-image: linear-gradient(transparent, #000 calc(30 * var(--vh)), #000 calc(100% - 30 * var(--vh)), transparent); }
/* a phone on its side: the words run further right over the bright horizon low on a short screen */
@media (max-height: 500px) and (min-aspect-ratio: 9/10) {
  .lit::before { background: linear-gradient(90deg, rgba(8, 9, 11, 0.82), rgba(8, 9, 11, 0.7) 44%, rgba(8, 9, 11, 0) 72%); }
}
.lit__head { position: absolute; z-index: 2; left: var(--g); top: calc(var(--bar) + 32px); }
.lit__title { font-size: var(--h2); line-height: 1.02; }
.lit__offer { margin-top: var(--s3); display: flex; align-items: baseline; gap: var(--s4); }
.lit__count { font-size: var(--t-s); color: var(--p84); white-space: nowrap; }
.lit__name { font: 300 var(--t-xl)/1.2 var(--serif); color: var(--paper); }
@media (prefers-reduced-motion: no-preference) {
  .lit__offer.is-new .lit__name { animation: lit-in 0.5s var(--ease-out) both; }
}
@keyframes lit-in { from { opacity: 0; } to { opacity: 1; } }
.lit__panel { position: absolute; z-index: 2; left: var(--g); bottom: 40px; display: grid; gap: var(--s3); width: var(--panel-w, 440px); max-width: calc(100% - 2 * var(--g)); }
.lit__now { color: rgba(239, 233, 221, 0.92); }   /* over the clouds low on the screen: 4.2:1 at 84%, above 4.5 at 92% */
.lit__line { display: block; font: 300 var(--t-xl)/1.25 var(--serif); color: var(--paper); text-wrap: balance; }
.nw { white-space: nowrap; }
.lit__note { color: rgba(239, 233, 221, 0.92); }
.lit__stage.is-tight .lit__note { display: none; }   /* a short screen: the note every offer repeats steps aside */
/* the laptop: lit.js sizes and places it (--lw, --lx, --ly; --rise while it comes up); the frames fill it and the
   screen sits exactly on the open render's screen (corners printed by tools/foreglow/laptop.py) */
.lap { position: absolute; z-index: 1; width: var(--lw, min(64.6vw, 118vh)); aspect-ratio: 1800 / 1500;
  left: var(--lx, calc(100% - var(--g) - 0.925 * min(64.6vw, 118vh))); top: var(--ly, calc(var(--bar) + 40px - 0.05 * min(64.6vw, 118vh)));
  translate: 0 var(--rise, 0px); }
.lap__frames { position: absolute; inset: 0; width: 100%; height: 100%; }
.lap__frames:not(.is-drawn) { background: url("data:image/png;base64,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") 0 0 / 100% 100% no-repeat; }   /* the closed laptop, tiny, until its frames are drawn */
.lap__screen { position: absolute; left: 18.403%; top: 5.993%; width: 63.194%; height: 47.395%; overflow: hidden; background: #000;
  opacity: 0; transition: opacity 0.5s var(--ease-out); }
.lap.is-open .lap__screen { opacity: 1; }
/* the glass: the open render's own soft reflections laid over whatever the screen shows */
.lap__glass { position: absolute; inset: 0; pointer-events: none; background: 0 0 / 100% 100% no-repeat; mix-blend-mode: screen;
  clip-path: inset(5.993% 18.403% 46.612% 18.403%); opacity: 0; transition: opacity 0.5s var(--ease-out); }
.lap.is-open .lap__glass { opacity: 1; }
html:not(.js) .lap__frames { background: url("../img/build/laptop/d/open.webp") 0 0 / 100% 100% no-repeat; }
html:not(.js) .lap__screen { opacity: 1; }
/* the offers on the screen */
.sc { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease-out); margin: 0; }
.sc.is-on { opacity: 1; pointer-events: auto; transition-duration: 0.25s; }   /* only the lit scene takes the pointer (the drag) */
.sc--launch { background: #050608 url("../img/solenne/d-23.webp") center / cover no-repeat; }
.sc--launch canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.sc--launch canvas.is-drawn { opacity: 1; }
/* redesigns (Jeet 2026-10-15: "make a random shitty website for that watch, then the drag"): an ordinary
   template shop right of the light, our Établi left of it; the light sweeps in once, then follows a drag */
.re { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.sc--re img { -webkit-user-drag: none; }   /* a mouse drag moves the light, never drags the picture out */
.after { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x, 0%)) 0 0); }
.after img { width: 100%; height: 100%; object-fit: cover; }
.before { position: absolute; inset: 0; overflow: hidden; background: #fff; color: #555; font: 400 1.15cqw/1.35 Verdana, Arial, sans-serif; clip-path: inset(0 0 0 var(--x, 0%)); }
.before p, .before h3, .before h4 { margin: 0; }
.b-sale { background: #e30613; color: #ffef00; font: 700 1.25cqw/1 Arial, sans-serif; padding: 0.6cqw 0; white-space: nowrap; overflow: hidden; }
.b-sale span { display: inline-block; padding-left: 100%; }
.b-top { display: flex; align-items: center; gap: 2cqw; padding: 1.1cqw 2cqw; background: linear-gradient(#ffffff, #e6ecf5); border-bottom: 0.25cqw solid #1d4fa8; }
.b-logo { font: italic 700 2.6cqw/1 "Times New Roman", Times, serif; color: #1d4fa8; text-shadow: 0.15cqw 0.15cqw 0 #a9bde3; white-space: nowrap; }
.b-logo sup { font-size: 0.5em; }
.b-search { flex: 1; display: flex; align-items: center; justify-content: space-between; border: 1px solid #999; background: #fff; color: #aaa; padding-left: 0.8cqw; font-size: 1.05cqw; white-space: nowrap; }
.b-search i { font-style: normal; background: #f90; color: #fff; font-weight: 700; padding: 0.5cqw 1cqw; }
.b-acct { font-size: 0.95cqw; color: #1d4fa8; text-decoration: underline; white-space: nowrap; }
.b-nav { background: linear-gradient(#64748b, #2c3e50); color: #fff; font: 700 1cqw/1 Arial, sans-serif; padding: 0.9cqw 2cqw; white-space: nowrap; overflow: hidden; }
.b-nav em { font-style: normal; color: #ff0; }
.b-hero { display: grid; grid-template-columns: auto 0.7fr 1.3fr auto; align-items: center; gap: 1.6cqw; padding: 1.8cqw 1.2cqw;
  background: repeating-linear-gradient(45deg, #f7f7f7 0 1.2cqw, #eeeeee 1.2cqw 2.4cqw); border-bottom: 1px solid #ddd; }
.b-arr { font: 700 3.6cqw/1 Arial, sans-serif; color: #fff; background: rgba(0, 0, 0, 0.35); padding: 0.1cqw 0.8cqw 0.5cqw; border-radius: 4px; }
.b-photo { position: relative; justify-self: center; border: 0.35cqw solid #fff; outline: 1px solid #ccc; box-shadow: 0.4cqw 0.4cqw 0.8cqw rgba(0, 0, 0, 0.35); }
.b-photo img { display: block; width: 13cqw; height: auto; image-rendering: pixelated; }
.b-badge { position: absolute; left: -1.4cqw; top: 1cqw; background: #e30613; color: #fff; font: 700 1cqw/1 Arial, sans-serif; padding: 0.5cqw 0.8cqw; rotate: -12deg; box-shadow: 0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.4); }
.b-copy { text-align: center; display: grid; gap: 0.7cqw; justify-items: center; }
.b-copy h3 { font: 700 2.5cqw/1.1 "Times New Roman", Times, serif; color: #c00; text-shadow: 0.1cqw 0.1cqw 0 #fcc; }
.b-copy p { color: #777; font-size: 1.05cqw; }
.b-stars { color: #f5a623 !important; font-size: 1.3cqw !important; }
.b-stars u { color: #1d4fa8; font-size: 0.95cqw; }
.b-price s { color: #999; }
.b-price b { color: #e30613; font-size: 2cqw; }
.b-buy { background: linear-gradient(#7ed957, #2e9e1f); color: #fff; font: 700 1.35cqw/1 Arial, sans-serif; padding: 0.9cqw 2.4cqw; border-radius: 0.6cqw; border: 1px solid #1f7a12; box-shadow: 0 0.3cqw 0 #1f7a12; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.b-feat { padding: 1cqw 2cqw 0; }
.b-feat h4 { font: 700 1.3cqw/1 "Comic Sans MS", "Comic Sans", cursive; color: #2c3e50; border-bottom: 2px dotted #ccc; padding-bottom: 0.5cqw; margin-bottom: 0.8cqw; }
.b-feat > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
.b-feat span { display: grid; justify-items: center; gap: 0.3cqw; border: 1px solid #ddd; padding: 0.6cqw; color: #e30613; font-weight: 700; font-size: 1.05cqw; }
.b-feat img { width: 4.6cqw; height: auto; image-rendering: pixelated; }
.b-pop { position: absolute; right: 3cqw; top: 16cqw; width: 22cqw; z-index: 2; background: #fffbe6; border: 0.3cqw dashed #e30613; padding: 1.3cqw; text-align: center; font: 1.05cqw/1.4 Arial, sans-serif; color: #333; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, 0.4); }
.b-pop b { color: #e30613; font-size: 1.6cqw; }
.b-x { position: absolute; right: 0.6cqw; top: 0.2cqw; font-size: 1.6cqw; color: #999; }
.b-mail { display: block; margin: 0.9cqw 0 0.6cqw; border: 1px solid #aaa; background: #fff; color: #aaa; text-align: left; padding: 0.5cqw 0.8cqw; }
.b-sub { display: inline-block; background: #e30613; color: #fff; font-weight: 700; padding: 0.6cqw 1.6cqw; }
.b-chat { position: absolute; right: 1.6cqw; bottom: 1.6cqw; z-index: 2; background: #1d4fa8; color: #fff; font: 700 1.05cqw/1 Arial, sans-serif; padding: 1cqw 1.6cqw; border-radius: 2cqw 2cqw 0.3cqw 2cqw; box-shadow: 0 0.6cqw 1.6cqw rgba(0, 0, 0, 0.35); }
.beam { position: absolute; top: 0; bottom: 0; left: var(--x, 0%); width: 2px; margin-left: -1px; z-index: 3; background: #ffe3c4;
  box-shadow: 0 0 14px 3px rgba(255, 196, 140, 0.75), 0 0 48px 12px rgba(255, 170, 110, 0.35); }
.beam span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: rgba(255, 236, 214, 0.94); display: grid; place-items: center; color: #3a2414; font: 600 12px/1 var(--sans); }
/* one-page sites: one product in one beam */
.sc--one { background: radial-gradient(60% 45% at 50% 70%, #15100d, #050608 70%); }
.cone { position: absolute; left: 50%; top: -10%; width: 56%; height: 100%; translate: -50% 0; opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 228, 196, 0.34), rgba(255, 210, 160, 0.06) 80%, rgba(255, 210, 160, 0));
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(8px); }
.pool { position: absolute; left: 50%; top: 74%; width: 34%; height: 9%; translate: -50% 0; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 214, 170, 0.45), rgba(255, 214, 170, 0)); }
.sc--one img { position: absolute; left: 0; right: 0; top: 9%; height: 64%; width: 100%; object-fit: contain; filter: brightness(0.06); }
@media (max-width: 759px), (max-aspect-ratio: 9/10) {
  .lit__panel { bottom: 24px; right: var(--g); width: auto; max-width: 720px; }
  .lit::before { background: rgba(8, 9, 11, 0.52); }
  .beam span { width: 36px; height: 36px; margin: -18px 0 0 -18px; font-size: 11px; }
}

/* 5. Before you book a call: the questions in the left half, over the clouds (the camera looks up) */
.sec { position: relative; min-height: calc(100 * var(--vh)); padding: calc(var(--bar) + 64px) var(--g) 88px; }
.sec__title { font-size: var(--h2); line-height: 1.02; }

/* questions: the browser's own open and close (keyboard and screen readers included) */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-content: start; }
/* laptops: the heading left, the questions right, so the clouded sky is shared on both sides; the heading
   and its button stay in view while the questions go by */
.faq__head { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--bar) + 64px); }
.faq__cta { margin-top: var(--s6); }
.faq__list { grid-column: 6 / 13; border-top: 1px solid var(--line); }
/* the camera lifts and pulls back into the clouds over the screen before the questions arrive; after them a
   stretch of sky, so the sunrise rises from the bottom only once the last answers have moved up (an open
   answer low on the screen over the glow measured 1.9:1) */
.js:not(.no-gl) .faq { margin-top: calc(60 * var(--vh)); padding-bottom: calc(50 * var(--vh)); }
/* a soft shade under the questions (Jeet 2026-10-15: "a slight black background, more readable"), feathered at
   its top and bottom so no band edge shows on the clouds */
.faq { isolation: isolate; }
.js:not(.no-gl) .faq::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-10 * var(--vh)); bottom: calc(28 * var(--vh));
  pointer-events: none; background: rgba(8, 9, 11, 0.54);
  -webkit-mask-image: linear-gradient(transparent, #000 calc(14 * var(--vh)), #000 calc(100% - 14 * var(--vh)), transparent);
  mask-image: linear-gradient(transparent, #000 calc(14 * var(--vh)), #000 calc(100% - 14 * var(--vh)), transparent); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s5);
  padding: var(--s4) 0; font: 300 var(--t-xl)/1.25 var(--serif); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 26px/1 var(--sans); color: var(--p78); transition: transform 0.25s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--s5); font-size: var(--t-m); line-height: 1.6; color: var(--p84); max-width: 40em; }
/* over the clouds an open answer can sit low on the screen, by the brighter clouds: 4.4:1 at 84%, 4.9:1 at
   92% (measured 2026-10-10) */
.js:not(.no-gl) .faq details p { color: rgba(239, 233, 221, 0.92); }

/* 6. Contact: the sun rises and the ground turns to daybreak paper. The sky canvas draws the paper; without
   it (no WebGL, no scripts) the section has its own paper. */
.contact { position: relative; min-height: calc(70 * var(--vh)); padding-top: var(--hz-contact, calc(20 * var(--vh))); display: flex; flex-direction: column; }
.contact__paper {
  flex: 1; color: var(--ink); background: var(--paper); padding: 56px var(--g) 24px;   /* room for the far g's base */
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-content: start;
  color-scheme: light;   /* paper is light; it also lets Cal.com's light page show see-through on it (under a
                            dark scheme the browser painted the calendar's frame opaque white) */
}
.js:not(.no-gl) .contact__paper, .js:not(.no-gl) .foot { background: transparent; }
/* laptops: the heading left and the call's points with Jeet's card right (level with the lede, clear of the
   far g above), then the calendar across the whole width, then the email */
.contact__head { grid-column: 1 / 8; grid-row: 1 / 3; }
.oncall { grid-column: 9 / 13; grid-row: 1; align-self: end; }
.founder { grid-column: 9 / 13; grid-row: 2; margin-top: var(--s5); }
.cal { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s7); max-width: 1040px; }   /* Cal.com's card is at most 1040 wide: left-aligned with the heading */
.mail { grid-column: 1 / -1; grid-row: 4; margin-top: var(--s4); }
/* wide laptops: the calendar beside the words, so the whole of it is on Contact's first screen (Cal.com keeps
   its three columns, the call, the month and the times, from 890 px wide) */
@media (min-width: 1420px) and (min-aspect-ratio: 9/10) {
  .contact__paper { grid-template-columns: minmax(340px, 1fr) min(1040px, max(890px, calc(100% - 460px))); column-gap: var(--s7); grid-template-rows: auto auto auto auto 1fr; }
  .contact__head, .oncall, .founder, .mail { grid-column: 1; }
  .contact__head { grid-row: 1; }
  .oncall { grid-row: 2; align-self: start; margin-top: var(--s6); }
  .founder { grid-row: 3; margin-top: var(--s6); }
  .mail { grid-row: 4; margin-top: var(--s6); }
  .cal { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
}
/* the homepage's band has the calendar only on wide laptops, with scripts (contact.js loads it once the band
   is a screen away): it fills the column under the g (Jeet 2026-10-29: the space looked empty), starts clear
   of the g's foot (8.7% of the screen's height below the horizon) and stands in for Book a call; the budget
   question sits with the words, so the two columns end level and the page stays under 10 screens. Narrower,
   Book a call opens the Contact page and the homepage stays short */
.contact:not(.contact--page) .cal, .contact:not(.contact--page) .budget { display: none; }
@media (min-width: 1420px) and (min-aspect-ratio: 9/10) {
  .js .contact:not(.contact--page) .cal { display: flex; flex-direction: column; margin-top: max(0px, calc(8.7 * var(--vh) - 40px)); }
  .js .contact:not(.contact--page) .budget { display: flex; grid-column: 1; grid-row: 2; margin: var(--s6) 0 0; }
  .js .contact:not(.contact--page) .budget__label { flex-basis: 100%; margin-bottom: var(--s1); }
  .js .contact:not(.contact--page) .contact__cta { display: none; }
}
.contact h2 { font-size: clamp(48px, 4.6vw, 68px); line-height: 1; letter-spacing: -0.02em; }
.contact .lede { color: rgba(21, 23, 27, 0.8); margin-top: var(--s5); max-width: 31em; }
/* the homepage's last way to book: ink on the paper (the light button vanished there) */
.contact__cta { margin-top: var(--s6); }
.contact .btn--solid { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.contact .btn--solid:hover { background: #2a2d33; border-color: #2a2d33; }
.oncall { display: grid; gap: var(--s2); font-size: var(--t-m); color: rgba(21, 23, 27, 0.84); }
.oncall li { display: flex; align-items: baseline; gap: var(--s3); }
.oncall li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); transform: translateY(-2px); }
.founder { display: flex; align-items: center; gap: var(--s4); }
.founder img { width: 88px; height: 88px; border-radius: 50%; flex: none; }
.founder p { font-size: var(--t-m); line-height: 1.5; color: rgba(21, 23, 27, 0.8); }
.founder b { display: block; font-weight: 500; color: var(--ink); }
.mail { font-size: var(--t-m); color: rgba(21, 23, 27, 0.72); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.mail a { color: var(--ink); text-decoration-color: rgba(184, 100, 44, 0.85); text-underline-offset: 5px; }
.mail button {
  font: 500 var(--t-s)/1 var(--sans); color: var(--ink); background: none; cursor: pointer;
  border: 1px solid rgba(21, 23, 27, 0.32); border-radius: 2px; padding: 0 var(--s4); min-height: 40px;
}
/* the calendar: without scripts, Cal.com's own booking page in a frame; with them, its embed page, which draws
   only its card straight on the paper, in our colours, as tall as what it shows (main.js) */
.cal__box { position: relative; }
.cal__frame { display: block; width: 100%; height: 640px; border: 1px solid rgba(21, 23, 27, 0.12); background: #f8f6f1; }
.cal.is-embed .cal__frame { border: 0; background: transparent; height: 570px; }
/* while it loads: an empty card where Cal.com's will be, never a blank box */
.cal__wait { display: none; }
.cal.is-embed .cal__wait {
  display: grid; place-items: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 1038px); height: calc(100% - 80px); margin: 0; pointer-events: none;
  border: 1px solid rgba(21, 23, 27, 0.1); border-radius: 6px; background: #fbf8f2;
  font-size: var(--t-s); color: rgba(21, 23, 27, 0.62); transition: opacity 0.35s var(--ease-out);
}
.cal.is-ready .cal__wait { opacity: 0; }
.cal__open { display: none; }
.cal.is-slow .cal__wait { pointer-events: auto; gap: var(--s4); align-content: center; }
.cal.is-slow .cal__open { display: inline-flex; }
/* touch screens: Cal.com's own page is one tap away above the calendar, not below its long list of times */
@media (pointer: coarse) {
  .cal { display: flex; flex-direction: column; }
  .cal__alt { order: -1; margin: 0 0 var(--s3); text-align: left; }
}
.cal__alt { margin-top: var(--s3); text-align: right; font-size: var(--t-s); color: rgba(21, 23, 27, 0.7); }
.cal__alt a { color: var(--ink); text-underline-offset: 4px; }
.contact :focus-visible, .foot :focus-visible { outline-color: var(--ember); }
/* the amber ring is 1.9:1 on paper: ember there (3.55:1), on the Contact page and on the bar once it's ink */
.contact-page main :focus-visible, .is-paper-bar .bar :focus-visible { outline-color: var(--ember); }

/* The Contact page (2026-10-29): under the sunrise, Book a call and the questions on daybreak paper. The
   calendar keeps its styles above; the budget question sits over it (contact.js). Laptops: the words left,
   the budget and the calendar right; narrower: the words, then the calendar across; phones: as the
   homepage's Contact was */
.contact-page { background: var(--paper); color: var(--ink); color-scheme: light;
  --daybreak-h: max(300px, 20.41vw); --daybreak-foot: calc(var(--daybreak-h) * 0.2317); }
.contact-page .bar::before { opacity: 1; }
.contact-page [id] { scroll-margin-top: calc(var(--bar) + 16px); }
/* the sunrise the page opens on (Jeet 2026-10-29: the paper alone looked plain): the homepage's last frame,
   the sun behind the g (tools/foreglow/dawn.py). The box is the sky down to the horizon; the picture runs on
   to the g's foot, over paper of the page's own colour. Cover, anchored at the g and the bottom, keeps the
   horizon and the g in place at every width; the bar is light over it and turns ink below it (contact.js) */
.daybreak { position: relative; height: calc(var(--daybreak-h) * 0.7283);
  background: linear-gradient(#534138, #625042 28%, #9e6d34 56%, #af6c1d 80%, #944718); }   /* the sky's colours while it loads */
.daybreak img { position: absolute; top: 0; left: 0; width: 100%; height: var(--daybreak-h); object-fit: cover; object-position: 68.6% 100%; }
@media (max-width: 600px) {
  .contact-page { --daybreak-h: 76.92vw; --daybreak-foot: calc(var(--daybreak-h) * 0.2277); }
  .daybreak { height: calc(var(--daybreak-h) * 0.7323); }
  .daybreak img { object-position: 80.2% 100%; }
}
.contact.contact--page { min-height: 0; padding-top: 0; }
.contact--page .contact__paper { padding: 40px var(--g) var(--s7); background: transparent; }   /* the g's foot shows through */
.contact--page h1 { font-size: clamp(48px, 4.6vw, 68px); line-height: 1; letter-spacing: -0.02em; }
.contact--page .mail { grid-column: 9 / 13; grid-row: 3; margin-top: var(--s5); }
.contact--page .cal { grid-row: 4; }
/* smaller laptops: the call's points start 16 px clear of the g's foot above them */
@media (min-width: 760px) and (max-width: 1419px) and (min-aspect-ratio: 9/10) {
  .contact--page .oncall { margin-top: max(0px, calc(var(--daybreak-foot) - 24px)); }
}
@media (min-width: 1420px) and (min-aspect-ratio: 9/10) {
  .contact--page .mail { grid-column: 1; grid-row: 4; margin-top: var(--s6); }
  .contact--page .cal { grid-row: 1 / -1; margin-top: max(0px, calc(var(--daybreak-foot) - 24px)); }   /* 16 px clear of the g's foot */
}
/* the budget: one row of ranges to tap (the radios themselves, see-through over each chip, so keys and screen
   readers work as usual); a line under them says where the answer goes */
.budget { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; margin: 0 0 var(--s5); padding: 0; border: 0; }
.budget__label { margin-right: var(--s3); font-size: var(--t-m); color: rgba(21, 23, 27, 0.84); }
.budget__label span { color: rgba(21, 23, 27, 0.66); }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border: 1px solid rgba(21, 23, 27, 0.32);
  border-radius: 2px; font: 500 var(--t-s)/1 var(--sans); color: var(--ink); white-space: nowrap; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 2px; }
.budget__note { flex-basis: 100%; min-height: 1.5em; font-size: var(--t-s); color: rgba(21, 23, 27, 0.7); }
@media (pointer: coarse) {   /* touch: 44 px to tap (launch list 14) */
  .chip span, .mail button { min-height: 44px; }
  .mail a, .cal__alt a { display: inline-flex; align-items: center; min-height: 44px; }
}
.cal .budget { order: -2; }   /* first, also where touch screens lift Cal.com's own link above the calendar */
/* the questions on the paper: ink instead of light */
.contact-page .faq { padding: calc(10 * var(--vh)) var(--g) calc(4 * var(--vh)); }
.contact-page .faq .sec__title { --hc: var(--ink); --g1: #b8642c; --g2: #e39a52; }
.contact-page .faq__head { top: calc(var(--bar) + 32px); }
.contact-page .faq__list, .contact-page .faq details { border-color: rgba(21, 23, 27, 0.14); }
.contact-page .faq summary::after { color: rgba(21, 23, 27, 0.6); }
.contact-page .faq details p { color: rgba(21, 23, 27, 0.8); }
@media (max-width: 759px), (max-aspect-ratio: 9/10) {
  .contact--page .mail, .contact--page .cal { grid-column: 1; grid-row: auto; }
  .contact--page .mail { order: 3; }   /* the email before the calendar: its list of times runs long on phones */
  .contact--page .cal { order: 4; }
  .contact--page h1 { font-size: 40px; }
  .budget__label { flex-basis: 100%; }
}
@media (min-width: 700px) and (max-aspect-ratio: 9/10) {
  .contact--page h1 { font-size: clamp(48px, 7vw, 68px); }
}

/* Footer: the wordmark, large and drawn in outline (as on Solenne), then the small print */
.foot { position: relative; z-index: 1; padding: calc(10 * var(--vh)) var(--g) env(safe-area-inset-bottom); background: var(--paper); color: rgba(21, 23, 27, 0.7); font-size: var(--t-s); }
.foot__mark { display: block; width: 100%; height: auto; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s5); margin-top: calc(6 * var(--vh)); padding: var(--s2) 0 var(--s4); border-top: 1px solid rgba(21, 23, 27, 0.14); }
.foot__row p { margin-right: auto; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.foot a, .foot__btn { color: inherit; text-underline-offset: 4px; padding: var(--s3) 0; }
.foot__btn { font: inherit; background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(21, 23, 27, 0.35); }

/* the top bar over daybreak paper (the footer): ink instead of light */
.brand__ink { display: none; }
.is-paper-bar .brand img { display: none; }
.is-paper-bar .brand .brand__ink { display: block; }
.is-paper-bar .bar::before { background: linear-gradient(to bottom, rgba(239, 233, 221, 0.94), rgba(239, 233, 221, 0.6) 62%, rgba(239, 233, 221, 0)); }
.is-paper-bar .nav a { color: rgba(21, 23, 27, 0.78); }
.is-paper-bar .nav a:hover { color: var(--ink); }
.is-paper-bar .bar .btn--solid { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* Cookie choice (js/site.js): a slim bar along the bottom, below the first screen's buttons (site.js moves it
   under the top bar when a short window would put them behind it); Accept and Decline look and weigh the same */
.consent {
  position: fixed; z-index: 40; left: var(--g); bottom: calc(14px + env(safe-area-inset-bottom));
  width: fit-content; max-width: calc(100vw - 2 * var(--g));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5);
  /* the corners nest: the card's radius is the buttons' (20 px, half their height) plus the 8 px padding and 1 px border around them */
  padding: var(--s2) var(--s2) var(--s2) var(--s5); border-radius: 29px; background: rgba(13, 14, 18, 0.95); color: var(--paper);
  border: 1px solid rgba(239, 233, 221, 0.14); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45); font-size: var(--t-s); line-height: 1.45;
}
.consent--top { top: calc(var(--bar) + 6px + env(safe-area-inset-top)); bottom: auto; }
.consent__text { flex: 1 1 340px; color: var(--p84); }
.consent__text b { font-weight: 500; color: var(--paper); }
.consent a { color: var(--paper); text-underline-offset: 3px; }
.consent__choose { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
/* the bar itself too: its display: flex above outranks the browser's own [hidden], so after a choice it stayed
   on screen and the buttons looked dead (the choice was saved all along; bug found by Jeet 2026-10-11) */
.consent[hidden], .consent [hidden] { display: none; }
.consent__choose label { display: flex; align-items: center; gap: var(--s2); min-height: 40px; cursor: pointer; }
.consent__choose input { width: 18px; height: 18px; margin: 0; }
.consent__actions { display: flex; gap: var(--s2); flex: none; }
.consent button {
  min-width: 98px; min-height: 40px; padding: 0 var(--s4); border-radius: 999px; cursor: pointer; font: 500 var(--t-s)/1 var(--sans); color: var(--paper);
  background: rgba(239, 233, 221, 0.1); border: 1px solid rgba(239, 233, 221, 0.3);
}
.consent button:hover { background: rgba(239, 233, 221, 0.18); }

/* Policy pages: plain reading pages under the night sky */
.legal-page .bar::before { opacity: 1; }
.legal { max-width: 46em; padding: calc(var(--bar) + 72px) var(--g) 12svh; }
.legal h1 { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.02; }
.legal__date { margin-top: var(--s3); font-size: var(--t-s); color: var(--p78); }
.legal .lead { margin-top: var(--s5); font-size: var(--t-l); line-height: 1.55; }
.legal h2 { margin-top: var(--s7); font: 300 28px/1.15 var(--serif); letter-spacing: -0.01em; }
.legal p, .legal li { color: var(--p84); max-width: 40em; }
.legal p { margin-top: var(--s4); }
.legal ul { margin-top: var(--s3); padding-left: 1.2em; list-style: disc; display: grid; gap: var(--s2); }
.legal b, .legal th { color: var(--paper); font-weight: 500; }
.legal a { color: var(--paper); text-decoration-color: rgba(227, 154, 82, 0.7); text-underline-offset: 4px; }
.legal .scroll { overflow-x: auto; margin-top: var(--s4); }
.legal table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--t-s); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--line); color: var(--p84); }
.legal .btn { margin-top: var(--s5); }

/* 404: the horizon, the words standing on it, and the way back */
body.nf { min-height: 100svh; background: linear-gradient(to bottom, #0b0d1a 0%, #23284a 40%, #5d4a63 53%, #b67d5c 61.6%, var(--night) 62%) no-repeat; }
body.nf main { position: static; }   /* the words are placed against the screen, not the empty main */
.nf__brand { position: absolute; left: var(--g); top: 22px; }
.nf__brand img { width: 132px; height: auto; }
.nf h1 { position: absolute; left: var(--g); right: var(--g); bottom: 38svh; font-size: clamp(42px, 6vw, 88px); line-height: 1; transform: translateY(0.2em); }
.nf__under { position: absolute; left: var(--g); right: var(--g); top: calc(62svh + 34px); }
.nf__under p { color: var(--p84); max-width: 32em; }

/* Phones and narrow portrait screens: words above and below the g; windows above their words */
@media (max-width: 759px), (max-aspect-ratio: 9/10) {
  :root {
    --bar: 62px; --hz: 52svh; --h2: clamp(28px, min(8.4vw, calc(4.2 * var(--vh))), 38px);
    /* phones: a tighter ratio (about 1.15) from 15 px text, so the scenes' words fit one screen */
    --t-m: 15px; --t-l: 17px; --t-xl: 20px;
    --h3: clamp(20px, calc(2.85 * var(--vh)), 26px);
  }
  .bar { gap: 0; }
  .brand img { width: 112px; }
  .nav { display: none; }
  .btn--small { min-height: 36px; }
  /* phones: all the words above the g, so scrolling only ever moves them apart */
  .hero { padding: calc(var(--bar) + 22px) var(--g) 0; }
  .hero__title { position: static; font-size: clamp(40px, 13.3vw, 64px); line-height: 1; }
  .hero__under { position: static; margin-top: var(--s4); max-width: 34em; }
  .actions { margin-top: var(--s5); }
  .g-hint { display: none; }

  .case__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content auto; align-content: start; padding-top: calc(var(--bar) + 12px); row-gap: var(--s4); }
  .case__win {
    /* the room left after the bar, the gaps (12 + 16 + 16 px) and the words' own height (work.js) */
    grid-column: 1; aspect-ratio: 4 / 5; max-height: calc(100 * var(--vh) - var(--bar) - 44px - var(--copy-h, 202px)); justify-self: center;
  }
  .js .case:not(.is-settled) .case__win { transform: translateY(var(--play-dy, 0px)); }
  .case__copy { grid-column: 1; grid-row: 2; align-self: start; }
  .case__copy .meta { margin-top: 0; }
  .case__copy h2 { margin: var(--s3) 0; }
  .case__copy .body { line-height: 1.55; }
  .case__cta { margin-top: var(--s4); }

  .sec { padding: calc(var(--bar) + 34px) var(--g) 64px; }
  .faq__cta { display: none; }   /* phones: the bar's Book a call is always in reach */
  /* stacked under the window the words span the screen, so their shade is an even band with soft top and
     bottom edges (the round one faded out toward the sides: 4.2:1 over Établi's lit clouds on an iPad mini) */
  .js:not(.no-gl) .case__copy::before {
    inset: -56px calc(-1 * var(--g));
    background: linear-gradient(to bottom, rgba(10, 12, 28, 0), rgba(10, 12, 28, 0.42) 56px, rgba(10, 12, 28, 0.42) calc(100% - 56px), rgba(10, 12, 28, 0));
  }
  .faq__head, .faq__list { grid-column: 1 / -1; }
  .faq__head { position: static; }
  .faq__list { margin-top: var(--s5); }
  /* phones: the heading, Jeet's card (who you'll talk to), the calendar across the width, the email, then
     what the call covers */
  .contact { padding-top: var(--hz-contact, calc(20 * var(--vh))); }
  .contact__paper { padding: 72px var(--g) var(--s5); grid-template-columns: minmax(0, 1fr); }
  .contact__head, .oncall, .founder, .cal, .mail { grid-column: 1; grid-row: auto; }
  .contact__head { order: 1; }
  .founder { order: 2; margin-top: var(--s5); }
  .founder img { width: 64px; height: 64px; }
  .cal { order: 3; margin-top: var(--s5); }
  .mail { order: 4; }
  .oncall { order: 5; margin-top: var(--s5); align-self: start; }
  .cal__frame { height: 900px; }
  .cal.is-embed .cal__frame { height: 880px; }
  .cal.is-embed .cal__wait { height: 100%; }
  .cal__alt { text-align: left; }
  .contact h2 { font-size: 40px; }
  .contact .lede { margin-top: var(--s4); }
  .foot__links { gap: 0 var(--s4); }
  .consent { left: 10px; right: 10px; width: auto; max-width: none; bottom: calc(10px + env(safe-area-inset-bottom)); padding: var(--s3); gap: var(--s3); border-radius: 35px; }   /* 22 px buttons + 12 px padding + 1 px border */
  .consent--top { top: calc(var(--bar) + 4px + env(safe-area-inset-top)); }
  .consent__text { flex-basis: 100%; }
  .consent__actions { width: 100%; }
  .consent button { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--s3); }
  .legal { padding-top: calc(var(--bar) + 40px); }
}

/* Upright tablets (700 px wide and up, taller than wide): the phone layout with laptop-size type; the phone
   sizes read like footnotes on a 13-inch iPad (Jeet, 2026-10-10) */
@media (min-width: 700px) and (max-aspect-ratio: 9/10) {
  :root { --bar: 70px; --h2: clamp(36px, min(5.6vw, calc(4.4 * var(--vh))), 54px); --t-m: 16px; --t-l: 19px; --t-xl: 23px; --h3: clamp(24px, calc(2.7 * var(--vh)), 34px); }
  .brand img { width: 128px; }
  .btn--small { min-height: 40px; }
  .hero__title { font-size: clamp(56px, 9vw, 96px); }
  .case__copy h2 { margin: var(--s4) 0; }
  .case__copy .body { line-height: 1.6; }
  .contact h2 { font-size: clamp(48px, 7vw, 68px); }
  .contact .lede { margin-top: var(--s5); }
  .founder img { width: 80px; height: 80px; }
}

/* The cursor (js/cursor.js; laptops and desktops only): a point of light, and a ring that answers what is
   under it. The ring's position and its look live on separate elements, so pressing can scale the look. */
.has-cursor, .has-cursor * { cursor: none !important; }
.cursor { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; transition: opacity 0.2s; }
.cursor.is-hidden { opacity: 0; }
.cursor__ring, .cursor__dot { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.cursor__halo {
  --s: 34px;
  position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s);
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(239, 233, 221, 0.42);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), left 0.3s var(--ease-out), top 0.3s var(--ease-out),
    background-color 0.3s, border-color 0.3s, transform 0.12s;
}
.cursor__dot::before {
  --d: 8px;
  content: ""; position: absolute; left: calc(var(--d) / -2); top: calc(var(--d) / -2); width: var(--d); height: var(--d);
  border-radius: 50%; background: #f6c27e; box-shadow: 0 0 12px 3px rgba(227, 154, 82, 0.5);
  transition: width 0.2s, height 0.2s, left 0.2s, top 0.2s, opacity 0.2s;
}
.cursor__label { font: 500 12px/1 var(--sans); letter-spacing: 0.02em; color: var(--paper); opacity: 0; transition: opacity 0.2s; }
.cursor[data-mode="link"] .cursor__halo { --s: 54px; background: rgba(239, 233, 221, 0.07); border-color: rgba(239, 233, 221, 0.62); }
.cursor[data-mode="link"] .cursor__dot::before { --d: 5px; }
.cursor[data-mode="drag"] .cursor__halo, .cursor[data-mode="open"] .cursor__halo {
  --s: 76px; background: rgba(8, 9, 11, 0.52); border-color: rgba(239, 233, 221, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cursor[data-mode="drag"] .cursor__label, .cursor[data-mode="open"] .cursor__label { opacity: 1; }
.cursor[data-mode="drag"] .cursor__dot::before, .cursor[data-mode="open"] .cursor__dot::before { opacity: 0; }
.cursor.is-down .cursor__halo { transform: scale(0.86); }
/* on daybreak paper (Contact) the light turns to ink */
.cursor.is-paper .cursor__halo { border-color: rgba(21, 23, 27, 0.42); }
.cursor.is-paper[data-mode="link"] .cursor__halo { background: rgba(21, 23, 27, 0.06); border-color: rgba(21, 23, 27, 0.6); }
.cursor.is-paper .cursor__dot::before { background: var(--ember); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .cursor__halo, .cursor__dot::before, .cursor__label { transition: none; }
  html { scroll-behavior: auto; }
  .case__win, .case__copy, .case__win::after, .g-hint, .bar::before, .make__step, .make__sun, .sc, .lit__name, .veil, .cal__wait { transition: none !important; }
  .re__l { transition: opacity 0.5s ease; }   /* the redesign's one change, a cross-fade in place */
}

/* ---------------------------------------------------------------- motion (2026-10-12)
   Opening: the headline rises line by line, the horizon line draws out from it and fades into the sky's own
   horizon, then the lede and the buttons; the sky and the g's light come up with them (director.intro, 1.4 s).
   On load only, never with reduced motion. The lines clip with room for ascenders and the g's descender. */
.hero__title .ln { display: block; overflow: clip; padding: 0.12em 0 0.22em; margin: -0.12em 0 -0.22em; }
.hero__title .ln > span:first-child { display: inline-block; }
.hz-line {
  position: fixed; left: 0; right: 0; top: var(--hz); height: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(243, 182, 122, 0), rgba(243, 182, 122, 0.85) var(--g), rgba(255, 236, 214, 0.7) 45%, rgba(243, 182, 122, 0));
  transform-origin: var(--g) 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__title .ln > span:first-child { animation: fg-rise 1.15s var(--ease-out) 0.15s both; }
  .hero__title .ln + .ln > span:first-child { animation-delay: 0.27s; }
  .hz-line { animation: fg-draw 1.5s var(--ease-out) 0.35s both, fg-out 1.6s ease-in-out 1.7s forwards; }
  .hero__under .lede { animation: fg-in 1s var(--ease-out) 0.7s both; }
  .hero__under .actions { animation: fg-in 1s var(--ease-out) 0.9s both; }
}
@keyframes fg-rise { from { transform: translateY(118%); } }
@keyframes fg-in { from { opacity: 0; } }
@keyframes fg-draw { from { transform: scaleX(0); opacity: 1; } to { opacity: 1; } }
@keyframes fg-out { from { opacity: 1; } to { opacity: 0; } }

/* Section headings catch the light as they appear: a warm glint passes across them once (the dawn reaching the
   words). The band starts and ends outside the words, so before and after it they look exactly as they did. */
.case__copy h2, .make__title, .lit__title, .faq .sec__title, .contact h2 {
  --hc: var(--paper); --g1: #f0b072; --g2: #fff0da;
  background: linear-gradient(100deg, var(--hc) 0 41%, var(--g1) 47%, var(--g2) 50%, var(--g1) 53%, var(--hc) 59% 100%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.contact h2 { --hc: var(--ink); --g1: #b8642c; --g2: #e39a52; }
@media (prefers-reduced-motion: no-preference) {
  .case.is-settled .case__copy h2, .make__title.is-seen, .lit__title.is-seen, .faq .sec__title.is-seen, .contact h2.is-seen {
    animation: fg-glint 1.9s cubic-bezier(0.45, 0, 0.25, 1) 0.2s both;
  }
}
@keyframes fg-glint { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (forced-colors: active) {
  .case__copy h2, .make__title, .lit__title, .faq .sec__title, .contact h2 { background: none; color: CanvasText; }
}

/* Questions open and close smoothly where the browser can animate to their natural height; elsewhere at once */
@media (prefers-reduced-motion: no-preference) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height 0.5s var(--ease-out), content-visibility 0.5s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* Light follows the pointer: motion.js sets --mx/--my (and on buttons a lean of a few pixels, --tx/--ty).
   Fine pointers only; the glow sits between a button's fill and its words. */
.btn { position: relative; isolation: isolate; translate: var(--tx, 0px) var(--ty, 0px); transition: transform 0.1s, translate 0.6s var(--ease-out), background-color 0.2s, border-color 0.2s; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(64px circle at var(--mx, 50%) var(--my, 50%), var(--glow-c, rgba(227, 154, 82, 0.5)), rgba(227, 154, 82, 0) 72%);
  transition: opacity 0.35s var(--ease-out);
}
.case__win::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 228, 196, 0.2), rgba(255, 228, 196, 0) 70%);
  transition: opacity 0.4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before, .case__win:hover::before { opacity: 1; }
}