/* SRS Dynamic, the site's one stylesheet.
 *
 * Design system in one paragraph: a dark room, then the light. The page opens
 * on a short dark film and turns to paper; the type is near black, and the only accent
 * is the amber of the calibration lines this company projects onto walls and
 * tables during an installation (sampled from its own photographs, not
 * picked). Every corner is square, because the mark is a square being fitted.
 * One family, Archivo, carries everything; its width axis is the kinetic
 * device, type stretches the way a projected image is stretched onto a
 * surface. Geist Mono appears only where a value is a measurement.
 *
 * docs/DESIGN_SYSTEM.md explains the reasoning; this file is the system.
 */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Michroma";
  src: url("/fonts/michroma-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geistmono-latin.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

/* ── tokens ─────────────────────────────────────────────────────────── */
/* The page is light. Only the opening film is dark: the site begins in a
   dark room and the light comes on as the visitor scrolls out of it. */
:root {
  --bg: #ebebe8;              /* paper: a neutral light grey, not cream */
  --bg-2: #e0e0dc;
  --fg: #121211;
  --fg-2: rgb(18 18 17 / .70);
  --fg-3: rgb(18 18 17 / .62);
  --line: rgb(18 18 17 / .16);
  --night: #0b0b0a;           /* the film and the photographs' own dark */
  --on-night: #efeeea;
  --signal: #e8680c;          /* the calibration amber, on paper */
  --signal-lit: #ff8a1e;      /* the same light, on the night ground */
  --signal-text: #a54800;     /* 5.5:1 on paper */
  --signal-large: #d95f0b;    /* 3.1:1 on paper: the orange for large type only */
  color-scheme: light;
}

:root {
  --sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --display: "Michroma", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --gut: clamp(16px, 4vw, 56px);          /* page side gutter */
  --col: min(100% - 2 * var(--gut), 1440px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --nav-h: 64px;
  /* type scale, fluid between a 360px phone and a 1600px screen */
  --t-body: clamp(1rem, .95rem + .25vw, 1.125rem);
  --t-lead: clamp(1.25rem, 1.05rem + .9vw, 1.9rem);
  --t-h2: clamp(2rem, 1.3rem + 3.2vw, 4.6rem);
  --t-mega: clamp(3.4rem, 1rem + 10.5vw, 13rem);
}

/* ── base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--t-body)/1.55 var(--sans);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--signal); color: #fff; }
:focus-visible { outline: 2px solid var(--signal-text); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; left: var(--gut); top: 8px; z-index: 100;
  padding: 10px 14px; background: var(--fg); color: var(--bg);
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

.wrap { width: var(--col); margin-inline: auto; }

/* one link style for running text: an underline of light */
.ul {
  background: linear-gradient(var(--signal), var(--signal)) 0 100% / 100% 1px no-repeat;
  transition: background-size .35s var(--ease), color .2s;
}
.ul:hover { color: var(--signal-text); }

/* ── the logo ───────────────────────────────────────────────────────── */
.logo { height: 22px; width: auto; fill: currentColor; overflow: visible; }
.mark { width: 28px; height: 28px; fill: currentColor; overflow: visible; }

/* ── navigation ─────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding-inline: var(--gut);
  color: var(--fg);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease), color .35s, opacity .35s var(--ease);
}
/* On the front page the bar waits and then forms out of the opening's
   big logo (home.js): away until the mark and SRS have travelled onto its
   logo; DYNAMIC LTD joins when the big one has left at the foot; the menu
   comes in last, on the right. A keyboard user who tabs into the bar gets
   all of it at once. */
.nav.away { opacity: 0; pointer-events: none; }
.nav.away:focus-within { opacity: 1; pointer-events: auto; }
#nav .logo path:nth-of-type(3) { transition: opacity .4s var(--ease), transform .4s var(--ease); transform-box: fill-box; }
.nav.no-name .logo path:nth-of-type(3) { opacity: 0; transform: translateY(60%); }
.nav__links, .nav__menu { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.nav.no-menu .nav__links, .nav.no-menu .nav__menu { opacity: 0; transform: translateX(12px); pointer-events: none; }
.nav:focus-within .logo path:nth-of-type(3), .nav:focus-within .nav__links, .nav:focus-within .nav__menu { opacity: 1; transform: none; pointer-events: auto; }
.nav.solid { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.nav.night { color: var(--on-night); }
.home .foot { --bg: var(--night); --fg: var(--on-night); --fg-2: rgb(239 238 234 / .68); --line: rgb(239 238 234 / .14); --signal: var(--signal-lit); --signal-text: #ff9a3d; color: var(--fg-2); }
.no-js .nav { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.no-js img[data-defer] { display: none; }
.nav.night .nav__cta { background: var(--on-night); color: var(--night); }
.nav__home { display: inline-flex; align-items: center; min-height: 44px; }
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.nav__links a { white-space: nowrap;
  font-size: .9375rem; font-weight: 500; letter-spacing: .01em;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav__links a:not(.nav__cta):hover { color: var(--signal-text); }
/* About stands in the orange in the bar and the phone menu (Noel,
   2026-09-26: "das About im Menü in unserem Orange"). The logo's orange is
   2.7:1 on paper, too faint to read, so on paper the menu's large letters
   take the nearest orange that reads as large type (--signal-large) and
   the bar's small ones the text orange (--signal-text); on the night bar
   it is the lit orange itself */
.nav__about { color: var(--signal-text); }
.sheet .nav__about { color: var(--signal-large); }
.nav.night .nav__about { color: var(--signal-lit); }
/* the page you are on: the logo's square stands before its entry, in the
   bar and in the phone menu (aria-current, set by build.sh) */
.nav__links a[aria-current="page"]::before { content: ""; width: 6px; height: 6px; margin-right: 8px; background: var(--signal); }
.sheet li a[aria-current="page"]::after { content: ""; display: inline-block; width: .19em; height: .19em; margin-left: .1em; background: var(--signal); }
/* without script the menu button could open nothing: the entries stand in
   the page instead, wrapped under the logo */
@media (max-width: 960px) {
  .no-js .nav { position: relative; height: auto; flex-wrap: wrap; padding-block: 8px; }
  .no-js .nav__menu { display: none; }
  .no-js .nav__links { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .no-js .sheet { display: none; }
}
.nav__cta {
  padding: 0 16px; min-height: 44px !important;
  background: var(--fg); color: var(--bg);
  transition: background-color .2s, color .2s, transform .15s;
}
.nav__cta:hover { background: var(--signal); color: #0e0e0d; }
.nav__cta:active { transform: translateY(1px); }
.nav__menu { display: none; }

/* eight entries since 2026-10-05: below 1040 px they stand closer, and
   below 960 px the bar hands over to the menu button, so the logo is never
   squeezed */
@media (min-width: 961px) { .nav__home { flex: none; } }
@media (max-width: 1040px) {
  .nav__links { gap: 14px; }
  .nav__links a { font-size: .875rem; }
}
@media (max-width: 960px) {
  :root { --nav-h: 58px; }
  .nav__links { display: none; }
  .nav__menu {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding-left: 12px;
    font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  }
  .nav__menu i { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .3s var(--ease); }
  .nav__menu i::after { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 2px; background: currentColor; transition: transform .3s var(--ease), width .3s; }
  .menu-open .nav__menu i { transform: translateY(3px) rotate(45deg); }
  .menu-open .nav__menu i::after { top: 0; width: 18px; transform: rotate(-90deg); }
}

/* the phone menu: a full screen, in the page's own ink */
.sheet {
  position: fixed; inset: 0; z-index: 45;
  background: var(--bg);
  padding: calc(var(--nav-h) + 6vh) var(--gut) 32px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0;
  transition: opacity .35s var(--ease), visibility 0s .35s;
}
.menu-open .sheet { visibility: visible; opacity: 1; transition: opacity .35s var(--ease); }
.menu-open { overflow: hidden; }
.sheet ul { list-style: none; margin: 0; padding: 0; }
.sheet li a {
  display: block; padding: .15em 0;
  /* INSTALLATIONS, the longest entry, measures 9.15 em: sized so it always
     fits the width of the phone instead of running off the edge */
  font-size: min(4.5rem, calc((100vw - 2 * var(--gut)) / 9.4)); font-weight: 700; font-stretch: 118%;
  line-height: 1.04; letter-spacing: -.02em; text-transform: uppercase;
}
.sheet li { transform: translateY(18px); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.menu-open .sheet li { transform: none; opacity: 1; }
.menu-open .sheet li:nth-child(2) { transition-delay: .04s; }
.menu-open .sheet li:nth-child(3) { transition-delay: .08s; }
.menu-open .sheet li:nth-child(4) { transition-delay: .12s; }
.menu-open .sheet li:nth-child(5) { transition-delay: .16s; }
.menu-open .sheet li:nth-child(6) { transition-delay: .2s; }
.sheet__foot { flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; color: var(--fg-2); font-size: .9375rem; }
.sheet__foot a { min-height: 44px; display: inline-flex; align-items: center; }
.sheet__foot a[href^="mailto"], .sheet__foot a[href^="https://wa.me"] { grid-column: 1 / -1; }

/* ── shared section scaffolding ─────────────────────────────────────── */
.sec { position: relative; padding-block: clamp(96px, 14vw, 200px); }
.h2 { font-size: var(--t-h2); font-weight: 600; font-stretch: 108%; line-height: 1; letter-spacing: -.025em; }
.lead { font-size: var(--t-lead); line-height: 1.35; font-weight: 400; letter-spacing: -.01em; color: var(--fg-2); max-width: 34ch; }
.mono { font-family: var(--mono); font-size: .8125rem; letter-spacing: .02em; }


/* ── night: sections that sit in the dark room ───────────────────── */
.night {
  --bg: var(--night); --bg-2: #161615; --fg: var(--on-night);
  --fg-2: rgb(239 238 234 / .68); --fg-3: rgb(239 238 234 / .58); --line: rgb(239 238 234 / .14);
  --signal: var(--signal-lit); --signal-text: #ff9a3d;
  background: var(--bg); color: var(--fg);
}

/* ── 1b · the line, in daylight ─────────────────────────────────────── */
.lines { background: var(--bg); padding: clamp(48px, 7vw, 96px) var(--gut) clamp(40px, 6vw, 80px); display: grid; gap: .1em;
  font-size: clamp(2.4rem, .8rem + 6vw, 7.6rem); font-weight: 700; font-stretch: 112%; line-height: .94; letter-spacing: -.035em; }
.lines p { margin: 0; max-width: 12ch; }
.lines__b { justify-self: end; text-align: right; max-width: 13ch !important; }
.lines__dot { display: inline-block; width: .2em; height: .2em; margin-left: .06em; background: var(--signal); }
/* the full stop of every heading and line of large type, as the logo's
   square (build.sh wraps it); the period itself stays in the text, unseen */
.pt {
  display: inline-block; width: .19em; height: .19em; margin-left: .05em; overflow: hidden;
  line-height: 0; color: transparent; background: var(--signal); vertical-align: baseline;
}

/* ── 2 · in daylight: what the company is ──────────────────────────── */
/* No bottom padding: the next section (.how) sits on the same paper and
   carries the one gap between them. With both carrying one the gap doubled
   into an empty screen on a phone (Noel's screenshot, 2026-09-25). */
.day { background: var(--bg); padding-block: 0; overflow: hidden; }
.day__w {
  display: block; width: fit-content;
  font-size: clamp(4rem, 1rem + 14vw, 19rem); font-weight: 800;
  font-stretch: var(--ws, 125%); line-height: .82; letter-spacing: -.035em; text-transform: uppercase;
  padding-inline: var(--gut);
}
.day__w:nth-child(2) { margin-left: auto; }
.day__w:nth-child(3) { margin-inline: auto; }
.day__w b { color: var(--signal); font-weight: inherit; }
.day__grid { width: var(--col); margin: clamp(64px, 9vw, 140px) auto 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px 24px; }
.day__lead { grid-column: 1 / 9; text-wrap: balance; font-size: clamp(1.6rem, 1rem + 2.2vw, 3.1rem); font-weight: 600; font-stretch: 104%; line-height: 1.08; letter-spacing: -.025em; }
@media (max-width: 820px) { .day__lead { grid-column: 1 / -1; } }

/* ── 4 · how a room gets its light: five steps in a slider ──────────
   Since 2026-10-01 a plain horizontal scroller with snap points (home.js,
   data-strip): swiped on a phone, the two arrows on a desktop. Until then
   the section stood while the cards ran sideways with the page's scroll,
   which on a phone read as the page sliding away (Noel, 2026-10-01).
   Without script or with reduced motion the cards are an ordinary grid. */
.how { position: relative; background: var(--bg); }
.how__stage { padding-block: clamp(72px, 9vw, 140px); }
.how__head { width: var(--col); margin: 0 auto clamp(28px, 4vw, 56px); display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.how__nav { display: none; }
.js:not(.rm) .how__nav { display: flex; flex: none; gap: 10px; }
.how__nav button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; transition: border-color .2s, color .2s, opacity .2s; }
.how__nav button:hover:not(:disabled) { border-color: var(--fg); }
.how__nav button:disabled { opacity: .3; cursor: default; }
.how__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.how__track { list-style: none; width: var(--col); margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 40px 24px; }
.js:not(.rm) .how__track {
  --pad: max(var(--gut), (100% - 1440px) / 2);
  position: relative; width: auto; margin: 0; display: flex; gap: clamp(20px, 3vw, 44px);
  padding-inline: var(--pad); scroll-padding-inline: var(--pad);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.js:not(.rm) .how__track::-webkit-scrollbar { display: none; }
.step { flex: none; margin: 0; display: grid; gap: 14px; align-content: start; }
.js:not(.rm) .step { width: clamp(260px, 29vw, 430px); scroll-snap-align: start; }
.step__img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-2); }
.step__img img { width: 100%; height: 100%; object-fit: cover; }
.step h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); font-weight: 600; font-stretch: 106%; letter-spacing: -.02em; line-height: 1.1; }
.step p { color: var(--fg-2); max-width: 40ch; }
.how__bar { display: none; }
.js:not(.rm) .how__bar { display: block; width: var(--col); height: 1px; margin: clamp(28px, 4vw, 48px) auto 0; background: var(--line); }
.how__bar i { display: block; height: 100%; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 820px) {
  .js:not(.rm) .step { width: 80vw; }
  .how__nav button { width: 44px; height: 44px; }
}

/* ── 5 · the one thing to touch: fitting the frame ─────────────────── */
.try { background: var(--bg); padding-bottom: clamp(96px, 12vw, 180px); }
.try__head { width: var(--col); margin: 0 auto clamp(28px, 4vw, 48px); }
.fit { width: var(--col); margin: 0 auto; display: grid; gap: 18px; }
.fit__frame {
  position: relative; width: min(100%, 60svh * 1049 / 693, 980px); margin-inline: auto; aspect-ratio: 1049 / 693;
  overflow: hidden; background: #140c0c; touch-action: none; user-select: none; -webkit-user-select: none;
}
.fit__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fit__light {
  position: absolute; left: 0; top: 0; width: 400px; height: 300px;
  transform-origin: 0 0; pointer-events: none; mix-blend-mode: screen;
}
.fit__light svg { width: 100%; height: 100%; overflow: visible; }
.fit__light .grid { stroke: var(--signal-lit); stroke-width: 1.2; opacity: .55; vector-effect: non-scaling-stroke; fill: none; }
.fit__light .edge { stroke: var(--signal-lit); stroke-width: 2.6; vector-effect: non-scaling-stroke; fill: rgb(255 138 30 / .07); }
.fit.done .fit__light .grid { opacity: 0; transition: opacity .6s; }
.fit.done .fit__light .edge { fill: rgb(255 138 30 / .2); transition: fill .6s; }
.fit__h {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: grid; place-items: center; cursor: grab; touch-action: none;
  transform: translate(var(--x), var(--y));
}
.fit__h::before { content: ""; width: 14px; height: 14px; background: var(--signal-lit); box-shadow: 0 0 0 2px #0e0e0d; transition: transform .2s var(--ease); }
.fit__h:hover::before, .fit__h.drag::before { transform: scale(1.35); }
.fit__h.drag { cursor: grabbing; }
.fit__h:focus-visible { outline: none; }
.fit__h:focus-visible::before { box-shadow: 0 0 0 2px #0e0e0d, 0 0 0 4px #fff; }
.fit.done .fit__h::before { transform: scale(.7); }
.fit__bar { width: min(100%, 60svh * 1049 / 693, 980px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 20px 48px; align-items: start; padding-top: 6px; }
.fit__bar p { max-width: 58ch; color: var(--fg-2); }
/* the readout is an instrument, not a sentence: a ruled row with the
   measurement on the left and the reset as a real button on the right */
.fit__ctl { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.fit__read { color: var(--fg-3); white-space: nowrap; font-size: .875rem; }
.fit__read b { font-weight: 500; color: var(--signal-text); }
.fit__reset { font-size: .9375rem; min-height: 44px; padding: 0 18px; color: var(--fg); border: 1px solid var(--line); transition: border-color .2s, background-color .2s; }
.fit__reset:hover { border-color: var(--fg); }
.fit__reset:active { transform: translateY(1px); }
@media (max-width: 820px) {
  .fit { width: 100%; }
  .fit__bar { padding-inline: var(--gut); grid-template-columns: 1fr; gap: 20px; }
}

/* installations: the line is the page's opening, below the bar */
.lines--top { padding-top: calc(var(--nav-h) + clamp(48px, 9vw, 128px)); }

/* ── 9 · the offer pages (services, community), since 2026-09-25 ──────
   One vocabulary for every page an offer links to: a dark opening whose
   photograph settles in (hx), rows with a word in light weight against
   the bold (svc), on community a dark band with one statement and two
   short paragraphs (flow), and one large call (cta). No index numbers, no
   label rows, no scroll cue, no staggered entrances: Noel asked on
   2026-09-25 for nothing that reads as generated. */
.hx { position: relative; min-height: 88svh; display: grid; align-items: end; overflow: hidden; background: var(--night); color: var(--on-night); }
.hx__img { position: absolute; inset: 0; margin: 0; }
.hx__img img { width: 100%; height: 100%; object-fit: cover; opacity: .42; transform: scale(1.08); animation: hx-in 2.8s var(--ease) forwards; }
.hx--day .hx__img img { opacity: .66; }
.hx__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 11 10 / .55) 0%, rgb(11 11 10 / .1) 40%, rgb(11 11 10 / .85) 100%); }
@keyframes hx-in { to { transform: scale(1); } }
.hx__in { position: relative; width: var(--col); margin: 0 auto; padding: calc(var(--nav-h) + 12vh) 0 clamp(64px, 12vh, 140px); display: grid; gap: clamp(20px, 3vw, 36px); }
.hx__h { margin: 0; font-size: clamp(3.2rem, .6rem + 10vw, 11.5rem); font-weight: 700; font-stretch: 116%; line-height: .9; letter-spacing: -.045em; max-width: 12ch; }
.hx__lead { margin: 0; max-width: 38ch; font-size: var(--t-lead); line-height: 1.35; color: rgb(239 238 234 / .78); }

.svc { background: var(--bg); padding-block: clamp(64px, 10vw, 160px) 0; }
/* since 2026-09-25 the services come in three groups, each under its own
   heading: on site, in Cyprus, for your business */
.svc + .svc { padding-top: clamp(56px, 8vw, 120px); }
.svc__g { width: var(--col); margin: 0 auto clamp(20px, 3vw, 36px); font-size: var(--t-h2); font-weight: 600; font-stretch: 108%; line-height: 1; letter-spacing: -.025em; }
.svc__list { list-style: none; margin: 0 auto; padding: 0; width: var(--col); }
.svc__row { display: grid; grid-template-columns: 7fr 5fr; gap: 12px 24px; align-items: start; padding-block: clamp(28px, 4vw, 56px); border-top: 1px solid var(--line); }
.svc__row:last-child { border-bottom: 1px solid var(--line); }
.svc__t { margin: 0; font-size: clamp(1.8rem, .8rem + 3.2vw, 4.2rem); font-weight: 700; font-stretch: 112%; line-height: .94; letter-spacing: -.04em; }
.svc__t em { font-style: normal; font-weight: 300; }
.svc__p { margin: 0; padding-top: .6em; color: var(--fg-2); font-size: var(--t-lead); line-height: 1.35; max-width: 34ch; }
.svc__img { grid-column: 1 / -1; margin: clamp(16px, 2vw, 28px) 0 0; aspect-ratio: 21 / 9; overflow: hidden; background: var(--bg-2); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
  .svc__row { grid-template-columns: 1fr; }
  .svc__img { grid-column: 1; aspect-ratio: 4 / 3; }
}

.flow { padding-block: clamp(80px, 12vw, 180px); }
.flow__in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: end; }
.flow__h { grid-column: 1 / 8; margin: 0; max-width: 12ch; font-size: clamp(2.4rem, 1rem + 4vw, 5rem); font-weight: 700; font-stretch: 112%; letter-spacing: -.04em; line-height: .95; }
.flow__list { grid-column: 8 / 13; display: grid; gap: 24px; }
.flow__list p { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--fg-2); font-size: var(--t-lead); line-height: 1.35; max-width: 34ch; }
@media (max-width: 820px) { .flow__h, .flow__list { grid-column: 1 / -1; } }
/* the band with a photograph: cut to the mark like the opening's, above the
   heading, the paragraphs beside both */
.flow__pic { position: relative; grid-column: 1 / 6; grid-row: 1; margin: 0; max-width: 440px; aspect-ratio: 1; }
.flow__pic img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(0 30.23%, 74.42% 13.06%, 74.42% 25.58%, 89.03% 25.58%, 81.4% 100%, 0 100%); }
.flow__pic::after { content: ""; position: absolute; top: 0; right: 0; width: 18.6%; aspect-ratio: 1; background: var(--signal); }
.flow--pic .flow__h { grid-row: 2; }
.flow--pic .flow__list { grid-row: 1 / 3; align-self: end; }
@media (max-width: 820px) {
  .flow__pic { grid-column: 1 / -1; width: 72%; }
  .flow--pic .flow__h { grid-row: auto; }
  .flow--pic .flow__list { grid-row: auto; }
}
/* one wide photograph between two sections, edge to edge; taller on a phone,
   where a portrait photograph has room */
.view { margin: 0; aspect-ratio: 21 / 9; overflow: hidden; background: var(--bg-2); }
.view img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
@media (max-width: 820px) { .view { aspect-ratio: 4 / 5; } .view img { object-position: 50% 100%; } }

.cta { background: var(--bg); width: var(--col); margin: 0 auto; padding-block: clamp(96px, 14vw, 220px); display: grid; gap: clamp(28px, 4vw, 48px); }
.cta__h { margin: 0; font-size: clamp(3rem, .8rem + 8vw, 10rem); font-weight: 700; font-stretch: 116%; line-height: .9; letter-spacing: -.045em; max-width: 12ch; }
.cta__p { margin: 0; max-width: 40ch; color: var(--fg-2); font-size: var(--t-lead); line-height: 1.35; }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; }
.cta__btn { display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 28px; background: var(--fg); color: var(--bg); font-weight: 600; font-size: 1.125rem; text-decoration: none; transition: background-color .3s, transform .2s; }
.cta__btn svg { width: 22px; height: 22px; transition: transform .35s var(--ease); }
.cta__btn:hover { background: var(--signal-text); }
.cta__btn:hover svg { transform: translateX(6px); }
.cta__btn:active { transform: translateY(1px); }
.cta__alt { font-size: 1.125rem; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }

.who2 { background: var(--bg); width: var(--col); margin: 0 auto; padding-block: clamp(80px, 12vw, 180px); display: grid; gap: clamp(28px, 4vw, 48px); }
.who2__h { margin: 0; max-width: 16ch; font-size: clamp(2.6rem, 1rem + 5vw, 6.4rem); font-weight: 700; font-stretch: 112%; line-height: .94; letter-spacing: -.04em; }
.who2__p { margin: 0; max-width: 40ch; color: var(--fg-2); font-size: var(--t-lead); line-height: 1.35; justify-self: end; }


/* the offer pages' one motion, the photograph settling: off with reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hx__img img { animation: none; transform: none; }
}

/* ── 7 · founder ────────────────────────────────────────────────────── */
.who { background: var(--bg); padding-top: clamp(56px, 8vw, 120px); }
.who__grid { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 24px; align-items: end; }
/* the portrait is kept modest (Noel: "nicht so groß ... nicht selbstverliebt") */
.who__img { grid-column: 1 / 5; grid-row: 1; margin: 0; position: relative; }
/* the portrait is cut to the mark (Noel, 2026-09-26: "so schneiden wie das
   Logo", the photo need not fit whole): the box is the mark's own 43 unit
   square, 4 to 47 across and 1 to 44 down in its 48 unit drawing, so the
   polygon is the surface with the handle's knockout, in percent of that
   square, and the amber handle sits in its corner. home.js cuts the light
   copy of the heading to the same polygon, so the two must change together.
   The photo is framed tight above the hat, so it is set lower than cover
   would put it (-60%), and the strip it leaves is filled with its own sky. */
.who__img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% -60%; background: #dad8d6; filter: grayscale(1) contrast(1.05);
  clip-path: polygon(0 30.23%, 74.42% 13.06%, 74.42% 25.58%, 89.03% 25.58%, 81.4% 100%, 0 100%); }
.who__img::after { content: ""; position: absolute; top: 0; right: 0; width: 18.6%; aspect-ratio: 1; background: var(--signal); }
.who__text { grid-column: 4 / 13; grid-row: 1; position: relative; padding-bottom: 8%; display: grid; gap: 28px; }
/* the name is light where it lies on the photograph and dark on the paper:
   white under difference blending inverts whatever is behind it, and the
   photograph is black and white, so the result is clean light and dark */
/* the heading runs over the photo: where it does, a white copy clipped to
   the photo's rectangle (src/home.js) lies on top; over the paper it is dark */
.who__head { position: relative; }
.who__text .h2 { max-width: 15ch; margin: 0; font-weight: 600; text-wrap: balance; }
.who__text > p { margin-left: calc((100% + 24px) / 8); }
.who__text > p { color: var(--fg-2); max-width: 36ch; font-size: var(--t-lead); line-height: 1.3; }
/* his road, told under the portrait row so the heading keeps its place on
   the photograph however long the story gets */
/* three sentences and a button: the story itself is on the about page
   (Noel, 2026-09-25, evening) */
.who__story { grid-column: 5 / 13; grid-row: 2; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 1.4em; max-width: 46ch; font-size: var(--t-lead); line-height: 1.35; }
.who__story p { margin: 0; color: var(--fg-2); }
.who__go { display: inline-flex; align-items: center; gap: 12px; justify-self: start; min-height: 52px; padding: 0 22px; background: var(--fg); color: var(--bg); font-weight: 600; font-size: 1.0625rem; text-decoration: none; transition: background-color .3s; }
.who__go .arr { width: 22px; height: 22px; transition: transform .35s var(--ease); }
.who__go:hover .arr, .who__go:focus-visible .arr { transform: translateX(6px); }
@media (max-width: 820px) {
  .who__img { grid-column: 1 / 8; }
  .who__text { grid-column: 1 / -1; grid-row: 2; padding: 0; margin-top: -18vw; }
  .who__text > p { margin-left: 0; }
  .who__story { grid-column: 1 / -1; grid-row: 3; }
}

/* ── 8 · journal ────────────────────────────────────────────────────── */
.jr { background: var(--bg); padding-top: 0; }
.jr__head { width: var(--col); margin: 0 auto clamp(28px, 4vw, 56px); display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.jr__list { width: var(--col); margin: 0 auto; list-style: none; padding: 0; border-top: 1px solid var(--line); }
.jr__list a {
  display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 8px 32px; align-items: baseline;
  padding: clamp(20px, 2.6vw, 34px) 0;
}
.jr__list li + li a { border-top: 1px solid var(--line); }
.jr__t { font-size: clamp(1.3rem, 1rem + 1.2vw, 2.1rem); font-weight: 600; font-stretch: 106%; line-height: 1.1; letter-spacing: -.02em; transition: color .2s; }
.jr__d { color: var(--fg-2); }
.jr__a { width: 22px; height: 22px; transition: transform .35s var(--ease); }
.jr__list a:hover .jr__t { color: var(--signal-text); }
.jr__list a:hover .jr__a { transform: translateX(6px); }
@media (max-width: 820px) {
  .jr__list a { grid-template-columns: 1fr auto; }
  .jr__d { grid-column: 1 / -1; grid-row: 2; }
}

/* ── the front page in the logo's voice ─────────────────────────────
   Noel, 2026-09-25: "Die Schrift auf der Homepage, da muss jetzt auch die
   Schrift verwendet werden wie bei dem Logo." The logo is drawn, not set, so
   its nearest typeface stands in for it: Michroma (OFL), wide, one light
   even stroke, the S squared off with round corners; its capitals also set
   DYNAMIC LTD in the logo itself. It carries the front page's display lines:
   the three offers, the founder heading and the address (the opening is
   the logo itself, below). It has one weight and no width axis, so every size below is
   measured from its advance widths (in ems, noted beside each) rather than
   left to a clamp; the running text stays in Archivo, which reads better
   at length. */
.front .offer h3 { font-family: var(--display); font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.04;
  font-size: min(5.4rem, calc((100vw - 2 * var(--gut) - 2 * var(--op)) / 9)); }          /* environments 8.75 em */
.front .who__text .h2 { font-family: var(--display); font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.12;
  font-size: clamp(1.5rem, .9rem + 2.3vw, 3.4rem); max-width: 17ch; }
.front .ask__mail { font-family: var(--display); font-weight: 400; font-stretch: 100%; letter-spacing: 0;
  font-size: min(3.2rem, calc((100vw - 2 * var(--gut)) / 17.6)); overflow-wrap: normal; white-space: nowrap; } /* 17.03 em */

/* the opening is the logo itself (Noel, 2026-09-25: "genauso wie das Logo
   oben links"): the display lockup in two halves from make.py, the mark
   and SRS, and DYNAMIC over LTD. Both share the lockup's frame (1142.047 by
   110.256 units together, the halves 700 and 384.047 wide with 58 between),
   so at one height they stand exactly as the lockup does; home.js sets
   them side by side at rest and parts them up and down as the photographs
   come in between. The row is as wide as the column allows, at most
   1100 px. */
/* before the script's first frame, the same rest position in CSS */

/* ── the way behind the scenes (since 2026-09-30) ──────────────────────
   Only the words, the button, and a line to Instagram. */
.reel { background: var(--bg); padding-block: clamp(48px, 7vw, 110px); }
.reel__in { width: var(--col); margin: 0 auto; display: grid; gap: clamp(22px, 3vw, 32px); justify-items: start; }
.front .reel .h2 { font-family: var(--display); font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.12; }
.reel__follow { font-size: 1rem; }

/* ── 9 · contact ────────────────────────────────────────────────────── */
.ask { padding-block: clamp(40px, 6vw, 80px) clamp(80px, 10vw, 140px); }
.ask__in { width: var(--col); margin: 0 auto; display: grid; gap: clamp(36px, 5vw, 64px); }
.ask__mail {
  justify-self: start;
  font-size: clamp(1.35rem, .6rem + 3.6vw, 4.2rem); font-weight: 500; font-stretch: 112%; letter-spacing: -.02em;
  line-height: 1.15; overflow-wrap: anywhere;
}
.ask__rows { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 24px; border-top: 1px solid var(--line); padding-top: 32px; }
.ask__rows > * { grid-column: span 4; display: grid; gap: 6px; align-content: start; }
.ask__rows h3 { font-size: .9375rem; font-weight: 500; color: var(--fg-3); }
.ask__rows a { min-height: 44px; display: inline-flex; align-items: center; justify-self: start; }
/* a link inside a sentence stays in the line: the 44 pixel box above is for
   the links that stand alone, and pushed this one off the baseline */
.ask__rows p a { display: inline; min-height: 0; }
.ask__rows p { color: var(--fg-2); }
@media (max-width: 820px) { .ask__rows > * { grid-column: 1 / -1; } }

/* ── footer ─────────────────────────────────────────────────────────── */
.foot { background: var(--bg); border-top: 1px solid var(--line); }
.foot__in {
  width: var(--col); margin: 0 auto; padding-block: 40px calc(40px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px 24px; align-items: start;
  color: var(--fg-2); font-size: .9375rem;
}
.foot__brand { grid-column: 1 / 5; display: grid; gap: 16px; color: var(--fg); }
.foot__brand > a { min-height: 44px; display: inline-flex; align-items: center; justify-self: start; }
.foot__addr { grid-column: 5 / 9; font-style: normal; }
.foot__links { grid-column: 9 / 13; display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: flex-end; align-items: center; }
.foot__links a { min-height: 44px; display: inline-flex; align-items: center; }
.foot__links a:hover { color: var(--fg); }
@media (max-width: 820px) {
  .foot__brand, .foot__addr, .foot__links { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── subpages: journal, legal notice, privacy, 404 ──────────────────── */
.sub .nav { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.page { padding: calc(var(--nav-h) + clamp(56px, 10vw, 140px)) 0 clamp(80px, 10vw, 140px); }
.page__in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
.page__head { grid-column: 1 / 11; display: grid; gap: 22px; margin-bottom: clamp(40px, 6vw, 80px); }
.page__head h1 { font-size: clamp(2.4rem, 1rem + 5vw, 6rem); font-weight: 700; font-stretch: 108%; line-height: .96; letter-spacing: -.035em; }
.page__kick { color: var(--fg-3); }
.page__head .dim { color: var(--fg-2); font-size: var(--t-lead); line-height: 1.35; max-width: 36ch; }
/* one left edge for the heading, the text and the foot (2026-10-10) */
.article { grid-column: 1 / 9; display: grid; gap: 1.1em; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.62; }
.article h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-stretch: 106%; letter-spacing: -.02em; line-height: 1.15; margin-top: 1.1em; }
.article .lead { font-size: var(--t-lead); color: var(--fg); max-width: none; line-height: 1.35; }
.article .close { color: var(--fg); font-weight: 500; }
.article a { background: linear-gradient(var(--signal), var(--signal)) 0 100% / 100% 1px no-repeat; }
.article a:hover { color: var(--signal-text); }
.article ul { margin: 0; padding-left: 1.2em; display: grid; gap: .4em; }
.page__foot { grid-column: 1 / 9; margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.page__foot a { min-height: 44px; display: inline-flex; align-items: center; background: linear-gradient(var(--signal), var(--signal)) 0 calc(50% + .8em) / 100% 1px no-repeat; }
/* every journal entry ends with a way to write (build.sh) */
.page__ask { grid-column: 1 / 9; margin-top: clamp(36px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.page__ask .ul { min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.page__foot a:hover { color: var(--signal-text); }
.jlist { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
@media (max-width: 820px) {
  .page__head, .article, .page__foot, .page__ask { grid-column: 1 / -1; }
}

/* ── about: a calm page with one motion ─────────────────────────────── */
/* Since 2026-10-01 (Noel: "zu viele Animationen", the installer walking
   with the timeline kept). Light like the rest of the site: the founder,
   what the company does, the road as the one dark section, his story.
   Only the road moves (about.js, data-road); the rules without .is-on are
   the plain page, which reduced motion, no script and a small screen get. */
.ab-kick { color: var(--fg-3); text-transform: uppercase; letter-spacing: .14em; }
.ab-hero { padding: calc(var(--nav-h) + clamp(40px, 7vw, 112px)) 0 clamp(72px, 10vw, 160px); }
.ab-hero__in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 24px; align-items: end; }
.ab-hero__pic { grid-column: 1 / 4; position: relative; margin: 0; }
.ab-hero__pic img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; background: var(--bg-2); filter: grayscale(1) contrast(1.05); }
/* the logo's square, in the amber, on the photograph's corner */
.ab-hero__pic::after { content: ""; position: absolute; top: 0; right: 0; width: 14%; aspect-ratio: 1; background: var(--signal); }
.ab-hero__txt { grid-column: 5 / 13; min-width: 0; display: grid; gap: 22px; padding-bottom: 4px; }
.ab-hero__h { font-family: var(--display); font-size: clamp(1.9rem, 7.4vw, 4.4rem); font-weight: 400; line-height: 1.08; letter-spacing: 0; text-wrap: balance; }
.ab-nw { white-space: nowrap; }
.ab-hero__role { color: var(--fg-2); font-size: var(--t-lead); line-height: 1.35; max-width: 30ch; }
.ab-words { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--fg); text-transform: uppercase; letter-spacing: .14em; }
.ab-words span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px .12em 0; background: var(--signal); }
@media (max-width: 820px) {
  .ab-hero__pic { grid-column: 1 / -1; max-width: 168px; }
  .ab-hero__txt { grid-column: 1 / -1; }
}
.ab-does { padding-bottom: clamp(96px, 14vw, 200px); }
.ab-does__in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px 24px; padding-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line); }
.about__line { grid-column: 1 / 7; margin: 0; font-size: clamp(1.8rem, .8rem + 3.4vw, 4rem); font-weight: 700; font-stretch: 112%; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.about__line span { display: block; }
.ab-does__txt { grid-column: 8 / 13; display: grid; gap: 20px; align-content: start; }
.ab-does__txt .h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); }
.ab-does__txt .dim { color: var(--fg-2); font-size: var(--t-lead); line-height: 1.4; }
@media (max-width: 820px) { .about__line, .ab-does__txt { grid-column: 1 / -1; } }

/* the road here: the one dark section. Plain, a timeline with the
   installer standing still above it; .is-on, he walks in place and the
   ground and the stations move under him (sizes in pixels from about.js) */
.ab-road__stage { width: var(--col); margin: 0 auto; padding-block: clamp(80px, 11vw, 160px); display: grid; gap: clamp(24px, 4vw, 48px); }
.road, .road__edge, .cv__tick { display: none; }
.rm .ab-road .road, .ab-road:not(.is-on) .road { display: block; }
.ab-road:not(.is-on) .road__walker { width: 150px; height: auto; }
.ab-road:not(.is-on) .road__line, .ab-road:not(.is-on) .road__dash { display: none; }
.ab-road .cv__y { color: var(--signal-lit); }
.ab-road .cv__list li { border-top-color: rgb(255 138 30 / .28); }
.ab-road .cv__list li:last-child { border-bottom-color: rgb(255 138 30 / .28); }
.road__walker { display: block; }
.ab-road.is-on .ab-road__stage { position: sticky; top: 0; width: 100%; height: 100vh; height: 100svh; padding: 0; overflow: hidden; overflow: clip; display: block; }
.ab-road.is-on .h2 { position: absolute; left: var(--gut); top: calc(var(--nav-h) + clamp(12px, 3svh, 40px)); margin: 0; }
.ab-road.is-on .road { display: block; position: absolute; inset: 0; }
.ab-road.is-on .road__walker { position: absolute; left: 0; top: 0; }
.road__line, .road__dash { position: absolute; left: 0; top: 0; height: 1px; }
.road__line { width: 100%; background: rgb(239 238 234 / .14); }
.road__dash { width: calc(100% + 80px); background: repeating-linear-gradient(90deg, rgb(239 238 234 / .2) 0 16px, transparent 16px 40px); will-change: transform; }
.ab-road.is-on .cv__list { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; will-change: transform; }
.ab-road.is-on .cv__list li { position: relative; flex: none; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 8px; padding: 30px 0 0; border: 0; text-align: center; }
.ab-road.is-on .cv__tick { display: block; position: absolute; left: 50%; top: -7px; width: 1px; height: 14px; background: var(--signal-lit); opacity: .3; }
.ab-road.is-on .road__edge { display: block; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none; }
.road__edge--l { left: 0; background: linear-gradient(90deg, var(--night), transparent); }
.road__edge--r { right: 0; background: linear-gradient(270deg, var(--night), transparent); }

/* his story, in his own words */
.ab-story { padding-block: clamp(96px, 14vw, 200px); }
.ab-hero + .ab-story { padding-top: clamp(8px, 2vw, 32px); }
.ab-story__in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.ab-story__in > .ab-kick { grid-column: 1 / 4; font-weight: 400; padding-top: .5em; }
.ab-story__txt { grid-column: 4 / 11; display: grid; gap: 32px; }
.ab-story__txt p:not(.ab-story__next) { margin: 0; font-size: var(--t-lead); line-height: 1.42; letter-spacing: -.01em; }
.ab-story__next { font-size: var(--t-lead); }
@media (max-width: 820px) { .ab-story__in > .ab-kick, .ab-story__txt { grid-column: 1 / -1; } }

.sub .nav.night, .front .nav.night { background: transparent; box-shadow: none; }
/* away from the top of the page the bar over a dark section is dark, not
   clear: text passing under a clear bar ran through the logo */
html:not(.menu-open) #nav.night:not(.top) { background: var(--night); box-shadow: 0 1px 0 rgb(239 238 234 / .14); }
/* with the phone menu open the bar belongs to the paper sheet under it,
   on every page and over every section */
.menu-open .nav, .menu-open .nav.night {
  /* literal paper and ink: on the bar, .night has already remapped the tokens */
  --bg: #ebebe8; --fg: #121211; --line: rgb(18 18 17 / .16);
  background: #ebebe8; color: #121211; box-shadow: 0 1px 0 rgb(18 18 17 / .16);
}
.about__img { grid-column: 1 / -1; margin: 0 0 clamp(48px, 7vw, 96px); }
.about__img img { width: 100%; max-height: 80svh; object-fit: cover; }
/* about: the road here, a plain timeline */
.cv { grid-column: 1 / -1; display: grid; gap: clamp(24px, 4vw, 48px); margin-top: clamp(24px, 4vw, 48px); }
.cv__list { list-style: none; margin: 0; padding: 0; }
.cv__list li { display: grid; grid-template-columns: minmax(96px, 2fr) 10fr; gap: 24px; padding-block: 18px; border-top: 1px solid var(--line); }
.cv__list li:last-child { border-bottom: 1px solid var(--line); }
.cv__y { font-size: .9375rem; color: var(--fg-3); padding-top: .2em; font-variant-numeric: tabular-nums; }
.cv__list p { margin: 0; max-width: 56ch; font-size: var(--t-lead); line-height: 1.35; }
@media (max-width: 820px) { .cv__list li { grid-template-columns: 1fr; gap: 6px; } }
.about__where { font-size: var(--t-lead); line-height: 1.35; }
.careers__work { grid-column: 1 / 9; margin: 0 0 clamp(48px, 7vw, 96px); font-size: var(--t-lead); line-height: 1.35; max-width: 40ch; }
.careers__apply { grid-column: 1 / 9; display: grid; gap: 20px; }
.careers__apply p { color: var(--fg-2); font-size: var(--t-lead); line-height: 1.3; max-width: 40ch; }
.careers__note { font-size: .9375rem !important; }
.careers__mail { justify-self: start; font-size: clamp(1.35rem, .6rem + 3vw, 3.4rem); font-weight: 500; font-stretch: 112%; letter-spacing: -.02em; overflow-wrap: anywhere; }
@media (max-width: 820px) {
  .careers__work, .careers__apply { grid-column: 1 / -1; }
}

/* ── the front page since 2026-10-05 ─────────────────────────────────
   One visitor, one promise (Noel: the site had become "sehr verspielt",
   "die Botschaft stimmt noch nicht"; it has to look "sehr professionell
   und aufwendig"). Nothing here moves by itself except the opening
   photograph settling once; no script belongs to this page. A phone and a
   wide screen get different layouts on purpose (Noel, same day): on a
   phone the evening sky fills the screen behind the words and the way to
   WhatsApp stays at the thumb; on a wide screen the same photograph
   stands beside them, cut to the mark like a surface being fitted. */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; max-width: 100%; padding: 12px 24px; background: var(--fg); color: var(--bg);
  font-weight: 600; font-size: 1.0625rem; text-decoration: none;
  transition: background-color .25s, color .25s, transform .15s;
}
.btn .arr { width: 22px; height: 22px; flex: none; transition: transform .35s var(--ease); }
.btn:hover, .btn:focus-visible { background: var(--signal); color: #0e0e0d; }
.btn:hover .arr, .btn:focus-visible .arr { transform: translateX(6px); }
.btn:active { transform: translateY(1px); }

.after { position: relative; }

/* on a phone the way to WhatsApp stays at the thumb once the opening has
   passed: sticky inside .after, so it is not there over the opening (which
   has its own button) and comes to rest above the contact section */
.reach { display: none; }
@media (max-width: 820px) {
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .reach {
    position: sticky; bottom: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
    padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background: var(--bg); box-shadow: 0 -1px 0 var(--line);
  }
  /* it waits below the edge until the lower part of the page (site.js sets
     .is-up from 60% of the way down); without script it is simply there */
  .js .reach { transform: translateY(110%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
  .js .reach.is-up { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
  .reach .btn { min-height: 48px; justify-content: center; }
  .reach__mail { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--line); font-weight: 600; }
}
/* at the end of the front page the bar would rest as a light strip between
   two dark sections: the contact section, which has both ways to write, is
   drawn over it instead */
@media (max-width: 820px) {
  .front .after + .ask { position: relative; z-index: 41; margin-top: calc(-72px - env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .js .reach, .js .reach.is-up { transition: none; } }
@media print { .reach { display: none; } }
/* small links that stand alone are still 44 px to the finger */
.ask__mail, .jr__head a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── 10 · the rebuild of 2026-10-09 ──────────────────────────────────
   Noel: "eine dermaßen krasse Website", nothing that hangs, not a page
   like everyone else's. The identity stays (the mark, the orange, Michroma
   for headings, Archivo for text, square corners, the full stop as the
   logo's square); the rest is new.

   How it stays smooth: every moving thing animates transform or opacity
   only, and is driven by the browser's own scroll timelines
   (animation-timeline), which run off the main thread. No script listens
   to scrolling. Where a browser has no scroll timelines, everything simply
   stands in its finished state. Every animation sits inside
   .js and prefers-reduced-motion: no-preference, so without script and
   with reduced motion the page is still and complete. */

/* page to page: the browser cross-fades between pages of this site, the
   bar stays where it is (cross-document view transitions; a browser
   without them just loads the page) */
@view-transition { navigation: auto; }
#nav { view-transition-name: nav; }
::view-transition-old(root) { animation: vt-out .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .46s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* the sun: the logo's square walks down the right edge of every page as
   it is read, rising at the top and setting at the contact */
.sun { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .sun { display: block; position: fixed; top: 0; right: clamp(3px, calc(var(--gut) / 2 - 5px), 40px); width: 10px; height: 100vh; height: 100svh; z-index: 30; pointer-events: none; --arc: calc(var(--gut) * -.4); }
    .js .sun i {
      position: absolute; left: 0; top: 0; width: 10px; height: 10px; background: var(--signal-lit);
      box-shadow: 0 0 16px 3px rgb(255 138 30 / .5);
      animation: sun-path linear both; animation-timeline: scroll(root block);
    }
    .menu-open .sun { opacity: 0; }
  }
}
@media (max-width: 820px) { .sun { --arc: -2px !important; } }
@keyframes sun-path {
  0% { transform: translate(0, calc(var(--nav-h) + 20px)); opacity: 0; }
  3% { opacity: 1; }
  50% { transform: translate(var(--arc), 50vh); }
  100% { transform: translate(0, calc(100vh - 30px)); opacity: 1; }
}

/* shared: headings in the logo's voice. Michroma has one weight and is
   wide, so its sizes are smaller than Archivo's were */
.disp { font-family: var(--display); font-weight: 400; letter-spacing: 0; line-height: 1.12; }
.kick { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }

/* ── the opening ──────────────────────────────────────────────────── */
.op { position: relative; overflow: hidden; background: var(--night); }
.op__pic { position: absolute; inset: 0; margin: 0; }
.op__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.op__pic::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(11 11 10 / .78) 0%, rgb(11 11 10 / .5) 42%, rgb(11 11 10 / .05) 68%, rgb(11 11 10 / .6) 100%); }
.op__in {
  position: relative; z-index: 2; width: var(--col); margin: 0 auto;
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + clamp(28px, 6vh, 64px)) 0 calc(24px + env(safe-area-inset-bottom));
}
.op__h { font-family: var(--display); font-weight: 400; line-height: 1.1; letter-spacing: 0;
  font-size: min(3.4rem, calc((100vw - 2 * var(--gut)) / 11.2)); }
.op__h > span { display: block; white-space: nowrap; }
/* what kind of company speaks, above the headline (Noel, 2026-10-10: the
   visitor understands at the start that this is an installation company) */
.op__kick { margin: 0 0 clamp(12px, 1.6vw, 18px); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: rgb(239 238 234 / .72); }
.op__kick::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--signal); }
.op__lead { margin-top: clamp(18px, 2.6vw, 30px); max-width: 34ch; font-size: var(--t-lead); line-height: 1.36; color: rgb(239 238 234 / .88); }
.op__row { margin-top: auto; padding-top: 24px; display: grid; gap: 6px; }
.op__more { justify-self: center; min-height: 48px; display: inline-flex; align-items: center; background-position: 0 calc(100% - 12px); }
.op__where { display: none; }
.op--paper .op__in, .op--plain .op__in { min-height: 0; }
@media (min-width: 900px) {
  .op {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto; column-gap: clamp(32px, 5vw, 96px); align-items: end;
    min-height: min(100vh, 1040px); min-height: min(100svh, 1040px);
    padding: calc(var(--nav-h) + 40px) max(var(--gut), (100% - 1440px) / 2) clamp(28px, 5vh, 56px);
  }
  .op__in { grid-column: 1; grid-row: 1; width: auto; margin: 0; min-height: 0; padding: 0; justify-content: flex-end; }
  .op__h { font-size: min(4.6rem, calc((min(100vw - 2 * var(--gut), 1440px) * .58 - 56px) / 11.2)); }
  .op__row { margin-top: clamp(28px, 3.4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
  .op__more { justify-self: auto; }
  .op__pic { position: relative; inset: auto; grid-column: 2; grid-row: 1; justify-self: end; width: min(100%, 64vh); aspect-ratio: 1; }
  .op__pic::before { content: none; }
  .op__pic img { clip-path: polygon(0 30.23%, 74.42% 13.06%, 74.42% 25.58%, 89.03% 25.58%, 81.4% 100%, 0 100%); }
  .op__pic::after { content: ""; position: absolute; top: 0; right: 0; width: 18.6%; aspect-ratio: 1; background: var(--signal); }
  .op__where {
    grid-column: 1 / -1; grid-row: 2; position: relative; display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline;
    margin-top: clamp(32px, 7vh, 88px); padding-top: 18px; border-top: 1px solid var(--line);
    font-size: .9375rem; color: var(--fg-2);
  }
  .op__where i { position: absolute; left: 0; top: -4px; width: 7px; height: 7px; background: var(--signal); }
  .op__where .mono { margin-left: auto; color: var(--fg-3); }
}
.op--air .op__pic img { object-position: 50% 44%; }
.op--work .op__pic img { object-position: 50% 60%; }
/* an opening with a landscape photograph: on a wide screen it stands as a
   wide band cut to the mark's slant rather than a square */
@media (min-width: 900px) {
  .op--work .op__pic { aspect-ratio: 4 / 3; width: 100%; }
}
/* /company.html: the mark as the sheet our own registration is written on */
.op__card { position: relative; width: min(72%, 300px); aspect-ratio: 1; margin: 0 var(--gut) 36px; color: #121211; }
.op__card::before { content: ""; position: absolute; inset: 0; background: var(--on-night); clip-path: polygon(0 30.23%, 74.42% 13.06%, 74.42% 25.58%, 89.03% 25.58%, 81.4% 100%, 0 100%); }
.op__card::after { content: ""; position: absolute; top: 0; right: 0; width: 18.6%; aspect-ratio: 1; background: var(--signal); }
.op__card p { position: absolute; left: 9%; right: 24%; bottom: 9%; display: grid; gap: .35em; font-size: clamp(.8125rem, .6rem + .5vw, 1.0625rem); line-height: 1.25; }
.op__card b { font-size: 1.5em; font-weight: 700; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.05; }
.op__card .mono { font-size: 1.9em; letter-spacing: -.01em; line-height: 1.1; }
.op--paper { display: flex; flex-direction: column; }
.op--paper .op__in { order: -1; padding-bottom: 36px; }
.op--paper .op__row { margin-top: clamp(28px, 6vw, 40px); }
@media (min-width: 900px) {
  .op--paper { display: grid; }
  .op--paper .op__in { order: 0; padding-bottom: 0; }
  .op__card { grid-column: 2; grid-row: 1; justify-self: end; width: min(100%, 60vh); margin: 0; }
}

/* the opening's motion: the two lines of the heading rise out of their
   own line once on arrival, the photograph settles; as the page leaves
   the opening, the photograph drifts up slower than the words */
@media (prefers-reduced-motion: no-preference) {
  .js .op__h > span { animation: op-line .9s var(--ease) both; }
  .js .op__h > span + span { animation-delay: .09s; }
  .js .op__lead, .js .op__row { animation: op-fade .9s .25s var(--ease) both; }
  .js .op__pic img { animation: op-settle 2.4s var(--ease) both; }
  .js .op__card { animation: op-fade 1s .15s var(--ease) both; }
}
@keyframes op-line { from { opacity: 0; transform: translateY(.55em); } }
@keyframes op-fade { from { opacity: 0; transform: translateY(14px); } }
@keyframes op-settle { from { transform: scale(1.1); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .op__pic { animation: op-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .js .op__in { animation: op-leave linear both; animation-timeline: view(); animation-range: exit 10% exit 90%; }
  }
}
@keyframes op-drift { to { transform: translateY(14%) scale(1.04); } }
@keyframes op-leave { to { transform: translateY(-8%); opacity: .2; } }

/* ── the front page's opening rises (2026-10-10) ──────────────────────
   Noel: the page has to start spectacularly, the visitor is convinced
   and amazed at once. The logo's square is the sun: the screen is dark,
   the square stands exactly where the sun is in his photograph, light
   spreads from it and the photograph comes up around it. On a wide
   screen the square then travels to its corner of the mark and the sky's
   colours fill the whole screen behind the words; on a phone it sinks
   into the sun. Once, on arrival, transform and opacity only; without
   script or with reduced motion everything stands in its final state.
   The sun's place is measured in the photograph (58.2% across, 61.2%
   down) and carried through object-fit by the container's own units. */
.op--rise {
  --dw: max(100cqw, 75cqh); --dh: max(100cqh, 133.334cqw);
  --sx: calc((100cqw - var(--dw)) * .6 + var(--dw) * .5823);
  --sy: calc((100cqh - var(--dh)) * .45 + var(--dh) * .6116);
}
.op--rise .op__pic { container-type: size; }
.op--rise .op__clip { position: absolute; inset: 0; overflow: hidden; }
.op--rise .op__pic img { transform-origin: var(--sx) var(--sy); }
.op__sky, .op__sun { display: none; }
.op__halo {
  position: absolute; left: var(--sx); top: var(--sy); width: 170cqmax; height: 170cqmax; margin: -85cqmax 0 0 -85cqmax;
  border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgb(255 196 120 / .95) 0, rgb(255 138 30 / .6) 9%, rgb(255 138 30 / .2) 28%, rgb(255 138 30 / 0) 56%);
}
.op--rise .op__lead { max-width: 32ch; }
@media (min-width: 900px) {
  .op--rise {
    isolation: isolate; grid-template-columns: minmax(0, 1fr); align-items: center;
    min-height: 100vh; min-height: 100svh;
  }
  .op--rise .op__in { position: relative; z-index: 3; justify-content: center; }
  .op--rise .op__where { z-index: 3; margin-top: 0; }
  .op--rise .op__h { font-size: min(7rem, calc(min(100vw - 2 * var(--gut), 1440px) * .62 / 8.5)); line-height: 1.06; }
  .op--rise .op__lead { margin-top: clamp(22px, 3vh, 36px); }
  .op--rise .op__pic {
    position: absolute; z-index: 1; top: var(--nav-h); bottom: 64px; right: max(var(--gut), (100% - 1440px) / 2); margin-block: auto;
    width: min(76vh, 50vw); height: min(76vh, 50vw); aspect-ratio: auto;
  }
  .op--rise .op__pic::after { content: none; }
  .op--rise .op__pic img { clip-path: none; }
  .op--rise .op__clip { clip-path: polygon(0 30.23%, 74.42% 13.06%, 74.42% 25.58%, 89.03% 25.58%, 81.4% 100%, 0 100%); }
  /* the words run onto the photograph: its left side falls into the dark */
  .op--rise .op__clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 11 10 / .72) 0%, rgb(11 11 10 / .3) 30%, rgb(11 11 10 / 0) 58%); }
  .op--rise .op__sun { display: block; position: absolute; z-index: 2; top: 0; right: 0; width: 18.6%; aspect-ratio: 1; background: var(--signal); }
  /* the sky's colours behind everything, out of focus, so the whole screen
     glows and not only the photograph */
  .op--rise .op__sky {
    display: block; position: absolute; z-index: -1; left: -8%; top: -8%; width: 116%; height: 116%; max-width: none;
    object-fit: cover; object-position: 50% 62%; filter: blur(56px) saturate(1.3); opacity: .5;
  }
  .op--rise::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, rgb(11 11 10 / .86) 0%, rgb(11 11 10 / .7) 34%, rgb(11 11 10 / .2) 72%, rgb(11 11 10 / .45) 100%), linear-gradient(180deg, rgb(11 11 10 / .7) 0%, rgb(11 11 10 / 0) 26%, rgb(11 11 10 / 0) 70%, rgb(11 11 10 / .9) 100%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js .op--rise .op__h > span { animation: op-line 1s .5s var(--ease) both; }
  .js .op--rise .op__h > span + span { animation-delay: .62s; }
  .js .op--rise .op__lead, .js .op--rise .op__row { animation: op-fade 1s .95s var(--ease) both; }
  .js .op--rise .op__where { animation: rise-in 1s 1.2s var(--ease) both; }
  .js .op--rise .op__pic img { animation: rise-in 1.3s .3s cubic-bezier(.3, 0, .2, 1) both, rise-settle 3s .1s var(--ease) both; }
  .js .op--rise .op__halo { animation: rise-halo 1.9s .25s cubic-bezier(.2, .6, .2, 1) both; }
  .js .op--rise .op__sun {
    display: block; position: absolute; z-index: 2; left: var(--sx); top: var(--sy); width: max(14px, 4.6cqmin); height: max(14px, 4.6cqmin);
    margin: calc(max(14px, 4.6cqmin) / -2) 0 0 calc(max(14px, 4.6cqmin) / -2);
    background: var(--signal-lit); box-shadow: 0 0 34px 10px rgb(255 138 30 / .55);
    animation: rise-sun 1.9s var(--ease) both;
  }
  @media (min-width: 900px) {
    .js .op--rise .op__sun {
      left: auto; top: 0; right: 0; width: 18.6%; height: auto; margin: 0; background: var(--signal); box-shadow: none;
      --ax: calc(var(--sx) - 90.7cqw); --ay: calc(var(--sy) - 9.3cqw);
      animation: rise-sun-wide 2.1s both;
    }
    .js .op--rise .op__sun::after { content: ""; position: absolute; inset: 0; box-shadow: 0 0 120px 40px rgb(255 138 30 / .6); animation: rise-glow 2.1s both; }
    .js .op--rise .op__sky { animation: rise-sky 2.4s .35s var(--ease) both; }
    /* the pointer gives the three layers depth: a few pixels each */
    .op--rise .op__sky { translate: calc(var(--px, 0) * -28px) calc(var(--py, 0) * -18px); transition: translate .9s var(--ease); }
    .op--rise .op__clip { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 7px); transition: translate .9s var(--ease); }
    .op--rise .op__sun { translate: calc(var(--px, 0) * 20px) calc(var(--py, 0) * 14px); transition: translate .9s var(--ease); }
  }
}
@keyframes rise-in { from { opacity: 0; } }
@keyframes rise-settle { from { transform: scale(1.18); } }
@keyframes rise-sky { from { opacity: 0; transform: scale(1.12); } }
@keyframes rise-halo { 0% { opacity: 0; transform: scale(.03); } 14% { opacity: 1; } 55% { opacity: .55; } 100% { opacity: 0; transform: scale(1); } }
@keyframes rise-sun {
  0% { opacity: 0; transform: scale(0); } 12% { opacity: 1; transform: scale(1.25); } 22% { transform: scale(1); }
  62% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.35); }
}
@keyframes rise-sun-wide {
  0% { opacity: 0; transform: translate(var(--ax), var(--ay)) scale(0); }
  10% { opacity: 1; transform: translate(var(--ax), var(--ay)) scale(.32); animation-timing-function: linear; }
  50% { transform: translate(var(--ax), var(--ay)) scale(.26); animation-timing-function: cubic-bezier(.7, 0, .15, 1); }
  100% { transform: none; }
}
@keyframes rise-glow { 0% { opacity: 0; } 12% { opacity: 1; } 55% { opacity: .9; } 100% { opacity: 0; } }

/* ── the front page's opening as a journey (2026-10-10) ───────────────
   Light settles on the island (src/voyage.js draws it). The class
   "voyage" on <html> is set in the head when the browser can draw it and
   the visitor has not asked for less motion; without it everything below
   is off and the opening above stands. The section is tall, its stage
   sticks, and the page scrolls natively: nothing takes the wheel away.
   The stage is as high as the largest viewport, so a phone's address bar
   folding away never resizes the drawing; what must stay on screen is
   placed inside the smallest one. */
.op__stage { display: contents; }
.vy { display: none; }
.voyage .op--rise { display: block; z-index: 2; height: calc(100lvh + 380vh); min-height: 0; padding: 0; overflow: clip; background: none; pointer-events: none; }
/* the page that follows lies under the last screen of the stage, so when
   the square has flooded it and the stage fades, the question stands
   there at once and no empty screen has to be scrolled through */
.voyage .after { margin-top: -100lvh; }
.voyage .op--rise .op__in { pointer-events: auto; }
.voyage .op--rise::before { content: none; }
.voyage .op__stage { display: block; position: sticky; top: 0; height: 100lvh; overflow: hidden; background: var(--night); will-change: opacity; }
.voyage .op__pic, .voyage .op__sky, .voyage .op__where { display: none; }
.voyage .vy { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vy canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vy i, .vy p { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; will-change: transform, opacity; }
.vy i.vy__sun { width: 100px; height: 100px; margin: -50px 0 0 -50px; background: var(--signal); }
.vy i.vy__glow { width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; background: radial-gradient(circle, rgb(255 138 30 / .6) 0, rgb(255 138 30 / .18) 34%, rgb(255 138 30 / 0) 68%); }
.vy i.vy__pin { width: 1px; height: 1px; margin-left: -.5px; transform-origin: 0 0; background: rgb(239 238 234 / .5); }
.vy p.vy__tag { display: grid; gap: 3px; white-space: nowrap; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-night); }
.vy__tag b { font-weight: 500; }
.vy__tag span { color: rgb(239 238 234 / .56); }
.vy__tag.is-short span { display: none; }
.vy__lines { position: absolute; left: max(var(--gut), (100% - 1440px) / 2); right: max(var(--gut), (100% - 1440px) / 2); top: 0; height: 100svh; display: grid; align-items: start; padding-top: calc(var(--nav-h) + 7svh); }
.vy p.vy__line {
  position: static; grid-area: 1 / 1; color: var(--on-night);
  font-size: clamp(2.3rem, 1rem + 5.4vw, 6rem); font-weight: 700; font-stretch: 112%; line-height: .96; letter-spacing: -.035em;
}
.vy__line em { display: block; font-style: normal; font-weight: 300; }
.vy p.vy__hint { display: none; left: 50%; top: calc(100svh - 58px); translate: -50% 0; padding-bottom: 26px; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: rgb(239 238 234 / .7); }
.vy__hint::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 18px; background: currentColor; transform-origin: 0 0; animation: vy-hint 2.2s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .vy__hint::after { animation: none; } }
@keyframes vy-hint { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
/* the small square that walks down the edge waits until the large one is done */
.sun { transition: opacity .5s; }
.vy-in .sun { opacity: 0; }
.voyage .op--rise .op__in {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 100svh; min-height: 0; margin: 0 auto;
  justify-content: flex-end; padding: var(--nav-h) 0 calc(28px + env(safe-area-inset-bottom));
  animation: none; will-change: transform, opacity;
}
.voyage .op--rise .op__row { margin-top: 0; padding-top: 22px; }
/* the words stand on the sea: a little night under them, so the points
   passing behind never cost a letter its contrast */
.voyage .op--rise .op__in::before { content: ""; position: absolute; z-index: -1; left: -100vw; right: -100vw; bottom: 0; height: 62svh; background: linear-gradient(0deg, rgb(11 11 10 / .92) 0%, rgb(11 11 10 / .7) 55%, rgb(11 11 10 / 0) 100%); }
/* a window wider than a phone and not yet a desktop (the app's browser pane):
   the sentence runs wider, so the words leave the island its room */
@media (min-width: 600px) and (max-width: 899px) { .voyage .op--rise .op__lead { max-width: 54ch; } }
@media (min-width: 900px) {
  .voyage .op--rise .op__in { left: max(var(--gut), (100% - 1440px) / 2); right: auto; width: min(46vw, 660px); margin: 0; justify-content: center; padding: var(--nav-h) 0 0; }
  .voyage .op--rise .op__in::before { left: -30vw; right: -22vw; top: 0; height: auto; background: linear-gradient(90deg, rgb(11 11 10 / .88) 0%, rgb(11 11 10 / .6) 62%, rgb(11 11 10 / 0) 100%); }
  .voyage .op--rise .op__h { font-size: min(5.4rem, calc(min(46vw, 660px) / 8.5)); }
  .voyage .op--rise .op__row { margin-top: clamp(28px, 3.4vw, 44px); padding-top: 0; }
  .vy__lines { padding-top: calc(var(--nav-h) + 9svh); }
  .vy p.vy__hint { display: block; }
}

/* ── what brings you here: the switcher ───────────────────────────────
   Without script every panel stands below the next, each under its own
   heading. With script (site.js) the row of tabs appears and one panel
   shows at a time; where the browser has view transitions the orange
   square moves to the chosen tab and the panels cross-fade. */
.pick { padding-block: clamp(72px, 10vw, 152px); }
.pick__in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); }
.pick__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; align-items: end; }
.pick__h { grid-column: 1 / 8; font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, .8rem + 2.7vw, 3.6rem); line-height: 1.12; }
.pick__lead { grid-column: 8 / 13; color: var(--fg-2); font-size: var(--t-lead); line-height: 1.36; max-width: 32ch; }
.pick__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.pick__tabs[hidden] { display: none; }
.pick__tab {
  position: relative; min-height: 52px; padding: 0 20px; border: 1px solid var(--line); background: transparent;
  font-weight: 600; font-size: 1rem; white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s;
}
.pick__tab:hover { border-color: var(--fg); }
.pick__tab[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pick__dot { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; background: var(--signal); opacity: 0; }
.pick__tab[aria-selected="true"] .pick__dot { opacity: 1; view-transition-name: pick-dot; }
.pick__panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 24px; padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.pick__panel[hidden] { display: none; }
.js .pick.is-tabs .pick__panel { view-transition-name: pick-panel; }
.pick__t { grid-column: 1 / 5; font-size: clamp(1.9rem, 1rem + 2.2vw, 3.2rem); font-weight: 700; font-stretch: 112%; line-height: .96; letter-spacing: -.035em; }
.pick__t em { display: block; font-style: normal; font-weight: 300; }
.pick__cols { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 56px); }
.pick__k { margin: 0 0 12px; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.pick__list { list-style: none; margin: 0; padding: 0; }
.pick__list li { position: relative; padding: 14px 0 14px 22px; border-top: 1px solid var(--line); line-height: 1.4; }
.pick__list li::before { content: ""; position: absolute; left: 0; top: calc(14px + .55em); width: 7px; height: 7px; background: var(--signal); }
.pick__list b { font-weight: 700; color: var(--signal-text); font-variant-numeric: tabular-nums; }
.pick__go { grid-column: 5 / 13; justify-self: start; }
@media (max-width: 820px) {
  .pick__h, .pick__lead, .pick__t, .pick__cols, .pick__go { grid-column: 1 / -1; }
  .pick__cols { grid-template-columns: 1fr; }
  .pick__go { justify-self: stretch; }
  /* the tabs as one row the thumb swipes, running to the screen's edges */
  .pick__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gut)); padding: 6px var(--gut); scroll-padding-inline: var(--gut); scrollbar-width: none; scroll-snap-type: x proximity; }
  .pick__tabs::-webkit-scrollbar { display: none; }
  .pick__tab { scroll-snap-align: start; flex: none; }
}
.no-js .pick__panel + .pick__panel, .pick:not(.is-tabs) .pick__panel + .pick__panel { margin-top: clamp(28px, 4vw, 48px); }
::view-transition-old(pick-panel) { animation: pk-out .18s ease-in both; }
::view-transition-new(pick-panel) { animation: pk-in .4s var(--ease) both; }
::view-transition-group(pick-dot) { animation-duration: .45s; animation-timing-function: var(--ease); }
@keyframes pk-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes pk-in { from { opacity: 0; transform: translateY(14px); } }

/* ── Cyprus, in numbers ───────────────────────────────────────────────
   Large figures, each with its source, swiped sideways on a phone with a
   line that fills as the strip moves, a grid on a wide screen. Every
   figure is in docs/SOURCES.md with the date it was checked. */
.facts { padding-block: clamp(80px, 11vw, 168px); }
.facts__in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); view-timeline: --facts block; }
.facts__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; align-items: end; }
.facts__h { grid-column: 1 / 8; font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, .8rem + 2.7vw, 3.6rem); line-height: 1.12; }
.facts__lead { grid-column: 8 / 13; color: var(--fg-2); font-size: var(--t-lead); line-height: 1.36; max-width: 34ch; }
.facts__as { color: var(--fg); white-space: nowrap; }
.facts__scroll { timeline-scope: --strip; }
.facts__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fact { position: relative; container-type: inline-size; display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.4vw, 34px); background: var(--bg); min-height: 300px; }
.fact::before { content: ""; position: absolute; top: -1px; left: -1px; width: 9px; height: 9px; background: var(--signal); }
.fact:first-child { grid-column: span 2; }
.fact__n { overflow: hidden; padding-bottom: .06em; margin-bottom: 8px; font-family: var(--sans); font-weight: 300; font-stretch: 125%; letter-spacing: -.035em; font-size: clamp(2.6rem, 17cqi, 6.4rem); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fact:first-child .fact__n { font-size: clamp(3rem, 15cqi, 9rem); }
.fact__n span { display: inline-block; }
.fact__n small { font-size: .42em; font-weight: 500; letter-spacing: 0; color: var(--signal); margin-left: .04em; }
.fact__t { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); font-weight: 600; font-stretch: 106%; letter-spacing: -.015em; line-height: 1.2; }
.fact__p { color: var(--fg-2); max-width: 36ch; }
.fact__src { margin-top: auto; padding-top: 14px; font-family: var(--mono); font-size: .75rem; letter-spacing: .02em; color: var(--fg-3); }
.facts__bar { display: none; }
.facts__note { max-width: 70ch; color: var(--fg-2); font-size: .9375rem; }
.facts__note a { margin-left: 14px; color: var(--fg); white-space: nowrap; }
@media (max-width: 1100px) { .facts__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .facts__h, .facts__lead { grid-column: 1 / -1; }
  .facts__track {
    display: flex; overflow-x: auto; gap: 10px; background: none; border: 0;
    margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut);
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    scroll-timeline: --strip inline;
  }
  .facts__track::-webkit-scrollbar { display: none; }
  .fact { flex: none; width: 80vw; max-width: 340px; scroll-snap-align: start; border: 1px solid var(--line); min-height: 340px; }
  .fact:first-child { width: 80vw; }
  .fact::before { top: -1px; left: -1px; }
  .fact__n, .fact:first-child .fact__n { font-size: clamp(2.6rem, 19cqi, 5rem); }
  .facts__bar { display: block; position: relative; height: 2px; margin-top: 18px; background: var(--line); }
  .facts__bar i { position: absolute; inset: 0; background: var(--signal); transform-origin: 0 50%; transform: scaleX(.12); }
}
@supports (animation-timeline: scroll()) {
  @media (max-width: 820px) {
    .facts__bar i { animation: bar-grow linear both; animation-timeline: --strip; }
  }
}
/* on the front page the figures stand first after the journey, in the dark
   the journey ends in, and smaller: one compact band, not a chapter
   (Noel, 2026-10-10) */
.facts--top { padding-block: calc(var(--nav-h) + clamp(28px, 4vw, 56px)) clamp(40px, 5vw, 72px); }
/* while the stage lifts, the room above the band is dark too, not paper */
.voyage .facts--top { box-shadow: 0 -40vh 0 var(--night); }
.facts--top .facts__in { gap: clamp(20px, 2.4vw, 32px); }
.facts--top .facts__h { font-size: clamp(1.35rem, .8rem + 1.8vw, 2.4rem); }
.facts--top .facts__lead { font-size: 1rem; line-height: 1.45; max-width: 46ch; }
.facts--top .fact { min-height: 0; padding: clamp(16px, 1.5vw, 22px); gap: 6px; }
.facts--top .fact__n, .facts--top .fact:first-child .fact__n { font-size: clamp(2rem, 20cqi, 3.4rem); margin-bottom: 4px; }
.facts--top .fact__t { font-size: 1rem; }
.facts--top .fact__p { font-size: .875rem; line-height: 1.45; }
.facts--top .fact__src { padding-top: 8px; font-size: .6875rem; }
.facts--top .facts__note { font-size: .8125rem; }
@media (min-width: 1101px) { .facts--top .facts__track { grid-template-columns: repeat(7, minmax(0, 1fr)); } .facts--top .fact:first-child { grid-column: auto; } }
@media (min-width: 821px) and (max-width: 1100px) { .facts--top .facts__track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .facts--top .fact, .facts--top .fact:first-child { width: 64vw; max-width: 260px; min-height: 0; }
  .facts--top .fact__n, .facts--top .fact:first-child .fact__n { font-size: clamp(2rem, 18cqi, 3rem); }
  .facts--top .facts__bar { margin-top: 14px; }
}
@keyframes bar-grow { from { transform: scaleX(.12); } to { transform: scaleX(1); } }
/* the figures rise out of their line as the band comes up the screen */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .fact__n span { animation: n-rise linear both; animation-timeline: --facts; animation-range: entry calc(30% + var(--k, 0) * 6%) entry calc(80% + var(--k, 0) * 6%); }
  }
}
@keyframes n-rise { from { transform: translateY(105%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── everything we do: a ruled grid, each cell one link ───────────── */
.all { padding-block: clamp(80px, 11vw, 168px) clamp(56px, 7vw, 104px); }
.all__in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
.all__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; align-items: end; }
.all__h { grid-column: 1 / 8; font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, .8rem + 2.7vw, 3.6rem); line-height: 1.12; }
.all__lead { grid-column: 8 / 13; color: var(--fg-2); font-size: var(--t-lead); line-height: 1.36; max-width: 34ch; }
.all__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.all__grid > li { display: grid; background: var(--bg); }
.cell { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: clamp(22px, 2.6vw, 36px); min-height: 230px; background: var(--bg); transition: background-color .3s var(--ease); }
.cell::before { content: ""; position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; background: var(--signal); opacity: 0; transform: scale(.4); transform-origin: 100% 0; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.cell__t { font-size: clamp(1.45rem, 1rem + 1.1vw, 2.1rem); font-weight: 700; font-stretch: 112%; line-height: 1; letter-spacing: -.03em; }
.cell__t em { display: block; font-style: normal; font-weight: 300; }
.cell__p { color: var(--fg-2); max-width: 38ch; }
.cell .arr { width: 24px; height: 24px; justify-self: end; transition: transform .35s var(--ease); }
a.cell:hover, a.cell:focus-visible { background: var(--bg-2); }
a.cell:hover::before, a.cell:focus-visible::before { opacity: 1; transform: none; }
a.cell:hover .arr, a.cell:focus-visible .arr { transform: translateX(6px); }
div.cell { grid-template-rows: auto 1fr; }
.line { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) 28px; gap: 8px 24px; align-items: center; padding-block: 22px; border-bottom: 1px solid var(--line); }
.line__t { font-weight: 700; font-stretch: 110%; font-size: 1.15rem; letter-spacing: -.01em; }
.line__p { color: var(--fg-2); }
.line .arr { width: 24px; height: 24px; transition: transform .35s var(--ease); }
.line:hover .line__t, .line:focus-visible .line__t { color: var(--signal-text); }
.line:hover .arr, .line:focus-visible .arr { transform: translateX(6px); }
@media (max-width: 1100px) { .all__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .all__h, .all__lead { grid-column: 1 / -1; }
  .all__grid { grid-template-columns: 1fr; }
  .cell { min-height: 0; grid-template-columns: minmax(0, 1fr) 24px; grid-template-rows: auto auto; }
  .cell__p { grid-column: 1; }
  .cell .arr { grid-column: 2; grid-row: 1; align-self: start; }
  .line { grid-template-columns: minmax(0, 1fr) 24px; }
  .line__p { grid-column: 1; grid-row: 2; }
  .line .arr { grid-column: 2; grid-row: 1; }
}
.night .cell, .night .all__grid > li { background: var(--bg); }

/* ── how it goes: a line that draws itself as the steps pass ──────── */
.steps { padding-block: clamp(72px, 10vw, 152px); border-top: 1px solid var(--line); }
.steps--top { border-top: 0; }
.steps__in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
.steps__head { grid-column: 1 / 5; position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 18px; }
.steps__h { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, .8rem + 2.7vw, 3.6rem); line-height: 1.12; }
.steps__lead { color: var(--fg-2); font-size: var(--t-lead); line-height: 1.36; max-width: 28ch; }
.steps__list { grid-column: 6 / 13; position: relative; list-style: none; margin: 0; padding: 0 0 0 clamp(36px, 4vw, 56px); view-timeline: --steps block; }
.steps__list::before, .steps__list::after { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.steps__list::after { width: 2px; left: 3.5px; background: var(--signal); transform-origin: 50% 0; }
.stp { position: relative; padding-block: 0 clamp(36px, 5vw, 64px); display: grid; gap: 10px; }
.stp:last-child { padding-bottom: 0; }
.stp::before { content: ""; position: absolute; left: calc(-1 * clamp(36px, 4vw, 56px)); top: .45em; width: 10px; height: 10px; background: var(--signal); }
.stp__t { font-size: clamp(1.35rem, 1rem + 1vw, 2rem); font-weight: 700; font-stretch: 110%; letter-spacing: -.025em; line-height: 1.08; }
.stp__p { color: var(--fg-2); max-width: 46ch; font-size: clamp(1rem, .96rem + .2vw, 1.125rem); }
.stp dl { margin: 6px 0 0; display: grid; gap: 14px; }
.stp dl > div { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.stp dt { font-weight: 600; }
.stp dd { margin: 0; color: var(--fg-2); max-width: 46ch; }
@media (max-width: 820px) {
  .steps__head, .steps__list { grid-column: 1 / -1; }
  .steps__head { position: static; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .steps__list::after { animation: draw linear both; animation-timeline: --steps; animation-range: cover 20% cover 70%; }
    .js .stp::before { animation: node linear both; animation-timeline: view(); animation-range: entry 70% cover 40%; }
  }
}
@keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes node { from { transform: scale(.5); opacity: .25; } to { transform: none; opacity: 1; } }

/* ── the story: the photograph cut to the mark, drifting as it passes ─ */
.story { padding-block: clamp(80px, 11vw, 168px); overflow: hidden; }
.story__in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: center; }
.story__pic { position: relative; grid-column: 1 / 6; margin: 0; aspect-ratio: 1; max-width: 520px; }
.story__clip { position: absolute; inset: 0; overflow: hidden; clip-path: polygon(0 30.23%, 74.42% 13.06%, 74.42% 25.58%, 89.03% 25.58%, 81.4% 100%, 0 100%); }
.story__clip img { width: 100%; height: 100%; object-fit: cover; }
.story__pic::after { content: ""; position: absolute; top: 0; right: 0; width: 18.6%; aspect-ratio: 1; background: var(--signal); }
.story__txt { grid-column: 7 / 13; display: grid; gap: 18px; }
.story__h { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, .8rem + 2.7vw, 3.4rem); line-height: 1.12; margin-bottom: 8px; }
.story__txt > p { color: var(--fg-2); font-size: var(--t-lead); line-height: 1.36; max-width: 34ch; }
.story__who { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: center; margin-top: 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.story__face { position: relative; margin: 0; width: 80px; }
.story__face img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 8%; filter: grayscale(1) contrast(1.05); background: var(--bg-2); }
.story__face::after { content: ""; position: absolute; top: 0; right: 0; width: 18.6%; aspect-ratio: 1; background: var(--signal); }
.story__who p { color: var(--fg-2); }
.story__who b { color: var(--fg); font-weight: 600; }
@media (max-width: 820px) {
  .story__pic { grid-column: 1 / -1; width: 78%; }
  .story__txt { grid-column: 1 / -1; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .story__clip img { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .js .story__pic::after { animation: handle linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  }
}
@keyframes drift { from { transform: translateY(-7%) scale(1.16); } to { transform: translateY(7%) scale(1.16); } }
@keyframes handle { from { transform: translate(-60%, 60%) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── contact: the film of the waves beside the words ─────────────── */
.ask__big { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, .9rem + 3.4vw, 4.4rem); line-height: 1.1; max-width: 14ch; }
.ask--film { padding-top: clamp(80px, 11vw, 168px); }
.ask--film .ask__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.ask--film .ask__big, .ask--film .ask__mail, .ask--film .ask__soc, .ask--film .ask__rows { grid-column: 1 / 9; }
/* Instagram, Facebook and LinkedIn as framed lines under the address: the
   glyphs are drawn here, nothing is fetched from anyone (Noel, 2026-10-10) */
.ask__soc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(clamp(36px, 5vw, 64px) * -.5); }
@media (max-width: 560px) { .ask__soc { display: grid; } .ask__soc .ask__ig { display: grid; justify-self: stretch; grid-template-columns: 28px 1fr 24px; } }
.ask__ig { justify-self: start; align-self: start; display: inline-grid; grid-template-columns: 28px auto 24px; align-items: center; gap: 16px; min-height: 64px; padding: 10px 20px; border: 1px solid var(--line); transition: border-color .3s, background-color .3s; }
.ask__ig:hover, .ask__ig:focus-visible { border-color: var(--signal); background: rgb(255 138 30 / .08); }
.ask__ig-mark { width: 28px; height: 28px; color: var(--signal); }
.ask__ig-t { display: grid; gap: 2px; padding-right: 12px; }
.ask__ig-t .mono { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.ask__ig-t b { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
.ask__ig .arr { width: 24px; height: 24px; transition: transform .35s var(--ease); }
.ask__ig:hover .arr { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .ask__ig .arr { transition: none; } }
.film { position: relative; grid-column: 9 / 13; grid-row: 1 / 5; align-self: start; margin: 0; aspect-ratio: 464 / 824; max-height: 78vh; justify-self: end; width: 100%; }
.film__clip { position: absolute; inset: 0; overflow: hidden; clip-path: polygon(0 17%, 74.42% 7.35%, 74.42% 14.4%, 89.03% 14.4%, 81.4% 100%, 0 100%); background: #1a1a18; }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film::after { content: ""; position: absolute; top: 0; right: 0; width: 18.6%; aspect-ratio: 1; background: var(--signal); }
.film__btn { position: absolute; left: 10px; bottom: 10px; min-height: 44px; padding: 0 14px; background: rgb(11 11 10 / .6); color: var(--on-night); font-size: .8125rem; font-weight: 600; }
.film__btn:hover { background: rgb(11 11 10 / .85); }
@media (max-width: 820px) {
  .ask--film .ask__big, .ask--film .ask__mail, .ask--film .ask__soc, .ask--film .ask__rows { grid-column: 1 / -1; }
  .film { grid-column: 1 / -1; grid-row: auto; width: 62%; justify-self: start; max-height: none; }
}

/* ── the offer pages ──────────────────────────────────────────────── */
/* what Cyprus gives you: one row per advantage, the figure large where a
   checked figure exists, words where none does */
.gives { padding-block: clamp(72px, 10vw, 152px); }
.gives__in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); }
.gives__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; align-items: end; }
.gives__h { grid-column: 1 / 8; font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, .8rem + 2.7vw, 3.6rem); line-height: 1.12; }
.gives__lead { grid-column: 8 / 13; color: var(--fg-2); font-size: var(--t-lead); line-height: 1.36; max-width: 34ch; }
.gives__group { margin: clamp(16px, 2vw, 28px) 0 0; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.gives__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.gv { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 10px 24px; padding-block: clamp(22px, 3vw, 40px); border-top: 1px solid var(--line); }
.gv::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; background: var(--signal); }
.gv__n { font-family: var(--sans); font-weight: 300; font-stretch: 125%; letter-spacing: -.035em; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.8rem); line-height: 1; overflow: hidden; padding-bottom: .06em; white-space: nowrap; }
.gv__n span { display: inline-block; }
.gv__n small { font-size: .5em; color: var(--signal); }
.gv__n--w { font-family: var(--sans); font-size: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); font-weight: 700; font-stretch: 112%; letter-spacing: -.03em; white-space: normal; line-height: 1.05; }
.gv__b { display: grid; gap: 8px; }
.gv__t { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); font-weight: 600; font-stretch: 106%; letter-spacing: -.015em; line-height: 1.2; }
.gv__p { color: var(--fg-2); max-width: 58ch; }
.gv__src { font-family: var(--mono); font-size: .75rem; color: var(--fg-3); }
@media (max-width: 820px) {
  .gives__h, .gives__lead { grid-column: 1 / -1; }
  .gv { grid-template-columns: 1fr; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .gv__n span { animation: n-rise linear both; animation-timeline: view(); animation-range: entry 40% entry 100%; }
  }
}
/* the honest part: what someone leaving Germany has to know */
.warn { padding-block: 0 clamp(72px, 10vw, 152px); }
.warn__in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 24px; padding: clamp(24px, 3.4vw, 48px); border: 1px solid var(--fg); position: relative; }
.warn__in::before { content: ""; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px; background: var(--signal); }
.warn__h { grid-column: 1 / 5; font-size: clamp(1.45rem, 1rem + 1.2vw, 2.2rem); font-weight: 700; font-stretch: 112%; letter-spacing: -.03em; line-height: 1.02; }
.warn__list { grid-column: 5 / 13; display: grid; gap: 18px; }
.warn__list p { color: var(--fg-2); max-width: 62ch; }
.warn__list b { color: var(--fg); }
@media (max-width: 820px) { .warn__h, .warn__list { grid-column: 1 / -1; } }

/* the services page: groups of cells under a heading each */
.svx { padding-block: clamp(56px, 8vw, 120px) 0; }
.svx:last-of-type { padding-bottom: clamp(56px, 8vw, 120px); }
.svx__in { width: var(--col); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); }
.svx__h { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, .8rem + 2vw, 2.8rem); line-height: 1.12; }

/* the other pages take the same voice: headings in Michroma */
.hx__h, .cta__h, .who2__h, .flow__h { font-family: var(--display); font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.1; }
.hx__h { font-size: clamp(2rem, .9rem + 4.2vw, 5.2rem); max-width: 16ch; }
.cta__h { font-size: clamp(2rem, .9rem + 4.4vw, 5.4rem); max-width: 14ch; }
.who2__h { font-size: clamp(1.7rem, .9rem + 3vw, 3.8rem); max-width: 18ch; }
.flow__h { font-size: clamp(1.6rem, .8rem + 2.7vw, 3.4rem); max-width: 14ch; }
.svc__g { font-family: var(--display); font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.12; font-size: clamp(1.4rem, .8rem + 2vw, 2.8rem); }
.page__head h1 { font-family: var(--display); font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.1; font-size: clamp(1.9rem, .9rem + 3.6vw, 4.4rem); }
.sub .h2 { font-family: var(--display); font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.12; font-size: clamp(1.5rem, .9rem + 2.2vw, 3rem); }


@media (min-width: 1101px) { .gives--needs .all__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gives--needs { padding-top: 0; }
.all--on { border-top: 1px solid var(--line); }

/* ── motion preferences ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

@media print {
  .nav, .sheet, .fit { display: none !important; }
  .three__stage { position: static !important; height: auto !important; }
  body { background: #fff; color: #000; }
}

/* two sections on the same ground: the second one gives up most of its top
   padding, so the gap between them is one gap and not two (2026-10-10) */
.front .pick + .all { padding-top: clamp(24px, 3vw, 48px); }
.front .after + .ask--film { padding-top: clamp(24px, 3vw, 48px); }