/* =========================================================================
   Aetheron — /Marketing.html  ·  Marketing
   Standalone stylesheet. Nothing here is loaded by the landing page, by
   /hosting/ or by /cloud/, and nothing from any of those is loaded here.

   Sections 1–6b and 12–15 are the shared system, duplicated verbatim from
   /cloud/style.css on purpose: each page must stay independently editable,
   and a shared file across folders is the one thing the brief rules out.
   If you change a token in one, change it in all of them.

   THIS PAGE RUNS CREAM, like the landing page and /cloud/. The hero and the
   contact panel are the only dark surfaces.

   Colour discipline, --brand (#1081fa), five roles:
     1. primary CTA fill              .btn--primary
     2. form input focus ring         .field :focus
     3. audit field focus ring        .aud__field :focus-within
     4. nav + footer underline        .nav__links / .footer__col
     5. the active nav item           .nav__links a[aria-current]
   Nothing else. Not headings, not borders, not card backgrounds.

   PHOTOGRAPHY. Section 10 is the only proof this page has — there are no
   client case studies yet, so there are no logos, no testimonials and no
   numbers anywhere on the page. Four photographs of the actual audience
   carry it instead. They are remote (images.unsplash.com), which is a
   deliberate trade: swap them for shot-for-us images before this is a
   page anyone is paying to send traffic to.
   ========================================================================= */

/* -------------------------------------------------------------- 1. tokens */

:root {
  --cream:        #e9e3d6;
  --cream-light:  #f1ece0;
  --tile:         #fbf8f2;
  --panel:        #181818;
  --ink:          #1a1917;
  --ink-muted:    rgba(26, 25, 23, 0.60);
  --ink-faint:    rgba(26, 25, 23, 0.40);
  --line:         rgba(26, 25, 23, 0.10);
  --line-mid:     rgba(26, 25, 23, 0.18);
  --brand:        #1081fa;
  --brand-deep:   #066ede;

  --on-dark:       #ffffff;
  --on-dark-soft:  rgba(255, 255, 255, 0.82);
  --on-dark-muted: rgba(255, 255, 255, 0.45);
  --on-dark-faint: rgba(255, 255, 255, 0.30);
  --on-dark-line:  rgba(255, 255, 255, 0.28);

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans:  'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 1400px;
  --pad: 22px;
  --nav-h: 58px;

  --card-radius: 20px;
  --card-pad: clamp(28px, 4.4vw, 64px);
  --r-pill: 999px;
  --r-tile: 24px;

  --sp-section: clamp(84px, 11vw, 168px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-mask: cubic-bezier(0.6, 0.01, 0.05, 0.95);
}

@media (max-width: 760px) { :root { --pad: 12px; } }

/* -------------------------------------------------------------- 2. reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  /* `clip`, not `hidden`: overflow-x:hidden forces the other axis to `auto`,
     which turns the element into a scroll container and breaks fixed/sticky. */
  overflow-x: clip;
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-hyphens: auto;
  hyphens: auto;
}

img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  -webkit-hyphens: auto;
  hyphens: auto;
}
h1 { font-weight: 200; font-size: clamp(38px, 5.4vw, 76px); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-weight: 300; font-size: clamp(30px, 4vw, 56px);  line-height: 1.1;  letter-spacing: -0.025em; }
h3 { font-weight: 300; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.02em; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--ink); color: var(--cream); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 300;
        background: var(--ink); color: var(--cream); padding: 12px 20px; }
.skip:focus { left: 8px; top: 8px; }

.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px;
      padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- 3. layout */

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sp-section); }

.label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-faint);
}

.lede { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; max-width: 52ch; color: var(--ink-muted); }

.head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px clamp(32px, 6vw, 96px);
  margin-bottom: clamp(44px, 6vw, 84px);
}
@media (min-width: 900px) { .head { grid-template-columns: 7fr 5fr; align-items: end; } }

/* ================================================================ 4. GLASS */

.glass {
  position: relative;
  background: linear-gradient(178deg,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0.34) 42%,
      rgba(238, 233, 223, 0.40) 100%);
  backdrop-filter: blur(22px) saturate(185%) brightness(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.30),
    inset 0 0 22px rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(74, 62, 44, 0.06),
    0 10px 30px rgba(74, 62, 44, 0.10),
    0 26px 60px rgba(74, 62, 44, 0.07);
}

.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.10) 26%,
      transparent 52%);
}

.glass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(168deg,
      transparent 58%,
      rgba(214, 208, 196, 0.20) 82%,
      rgba(232, 222, 204, 0.30) 100%);
}

/* the same system inverted, for glass sitting on --panel rather than cream */
.glass--dark {
  background: linear-gradient(178deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 44px rgba(0, 0, 0, 0.35);
}
.glass--dark::before {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.04) 30%,
      transparent 56%);
}
.glass--dark::after { background: none; }

/* ------------------------------------------------------------ 5. buttons */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  /* isolate so the specular ::before blends against this button only, and so
     its z-index:-1 stays above the button's own fill */
  isolation: isolate;
  transition: background-color 500ms ease-out, border-color 500ms ease-out, color 500ms ease-out;
}

/* ---- the flat fallback. This is what ships wherever backdrop-filter is
   unavailable, so it has to be a complete button on its own, never a
   transparent shape that disappears into whatever is behind it. ---- */

/* BLUE 1 of 6 — the primary call to action */
.btn--primary { background: var(--brand); color: #fff; border-color: transparent; }
.btn--primary:hover { background: var(--brand-deep); }

.btn--outline { background: transparent; color: var(--on-dark); border-color: var(--on-dark-line); }
.btn--outline:hover { border-color: rgba(255, 255, 255, 0.6); }

.btn--quiet, .btn--ink { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--quiet:hover, .btn--ink:hover { border-color: var(--ink); }

/* ---- liquid glass. Two variants, because one clear style cannot serve both
   surfaces: a clear primary next to a clear secondary has no hierarchy left.
   Default rules target the dark surfaces (hero, contact panel); .on-light
   raises the tint for cream so the button does not wash out. ---- */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

  .btn--primary,
  .btn--outline,
  .btn--quiet,
  .btn--ink {
    transition: transform 0.4s var(--ease),
                box-shadow 0.4s var(--ease),
                background 0.4s var(--ease),
                border-color 0.4s var(--ease);
  }

  .btn--primary::before,
  .btn--outline::before,
  .btn--quiet::before,
  .btn--ink::before {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit; pointer-events: none;
    mix-blend-mode: screen;
    /* the label is a bare text node and cannot be raised above a positioned
       pseudo-element, so the highlight goes under it instead — otherwise
       screen-blending washes out dark text on the cream variants */
    z-index: -1;
  }

  /* ---------- primary: blue-tinted glass ---------- */
  .btn--primary {
    color: #fff;
    background: linear-gradient(178deg,
        rgba(56, 150, 255, 0.72)  0%,
        rgba(16, 129, 250, 0.56) 45%,
        rgba(6, 110, 222, 0.62) 100%);
    backdrop-filter: blur(16px) saturate(190%);
    -webkit-backdrop-filter: blur(16px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -1px 0 rgba(255, 255, 255, 0.10),
      inset 0 0 18px rgba(255, 255, 255, 0.14),
      0 2px 6px rgba(6, 52, 110, 0.18),
      0 12px 30px rgba(6, 52, 110, 0.24);
  }

  .btn--primary::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.08) 34%,
        transparent 58%);
  }

  .btn--primary:hover {
    background: linear-gradient(178deg,
        rgba(56, 150, 255, 0.80)  0%,
        rgba(16, 129, 250, 0.64) 45%,
        rgba(6, 110, 222, 0.70) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 -1px 0 rgba(255, 255, 255, 0.10),
      inset 0 0 18px rgba(255, 255, 255, 0.14),
      0 2px 8px rgba(6, 52, 110, 0.20),
      0 16px 42px rgba(6, 52, 110, 0.28);
  }

  /* on cream the tint has to carry itself — at 0.72 it reads as pale blue */
  .btn--primary.on-light {
    background: linear-gradient(178deg,
        rgba(56, 150, 255, 0.90)  0%,
        rgba(16, 129, 250, 0.82) 45%,
        rgba(6, 110, 222, 0.86) 100%);
    border: 1px solid rgba(255, 255, 255, 0.48);
  }

  .btn--primary.on-light:hover {
    background: linear-gradient(178deg,
        rgba(56, 150, 255, 0.98)  0%,
        rgba(16, 129, 250, 0.90) 45%,
        rgba(6, 110, 222, 0.94) 100%);
  }

  /* ---------- secondary: clear glass ---------- */
  .btn--outline {
    color: #fff;
    background: linear-gradient(178deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.07) 50%,
        rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      0 8px 24px rgba(0, 0, 0, 0.10);
  }

  .btn--outline::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.21) 0%,
        rgba(255, 255, 255, 0.04) 34%,
        transparent 58%);
  }

  .btn--outline:hover {
    background: linear-gradient(178deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.13) 50%,
        rgba(255, 255, 255, 0.09) 100%);
    border-color: rgba(255, 255, 255, 0.45);
  }

  /* the same clear glass on cream: whites swapped for ink at low opacity,
     because a white-on-white edge has nothing to define it */
  .btn--quiet, .btn--ink, .btn--outline.on-light {
    color: var(--ink);
    background: linear-gradient(178deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.28) 100%);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(26, 25, 23, 0.12);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.70),
      0 8px 24px rgba(74, 62, 44, 0.10);
  }

  .btn--quiet::before, .btn--ink::before, .btn--outline.on-light::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.21) 0%,
        rgba(255, 255, 255, 0.04) 34%,
        transparent 58%);
  }

  .btn--quiet:hover, .btn--ink:hover, .btn--outline.on-light:hover {
    background: linear-gradient(178deg,
        rgba(255, 255, 255, 0.61) 0%,
        rgba(255, 255, 255, 0.34) 100%);
    border-color: rgba(26, 25, 23, 0.28);
  }

  /* ---------- states ---------- */
  /* the only transform allowed on a button anywhere on the site: a glass
     surface that does not answer a press reads as dead */
  .btn--primary:active,
  .btn--outline:active,
  .btn--quiet:active,
  .btn--ink:active {
    transform: scale(0.985);
    transition-duration: 0.15s;
  }
  .btn--primary:active {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      inset 0 0 18px rgba(255, 255, 255, 0.14),
      0 1px 3px rgba(6, 52, 110, 0.16),
      0 4px 12px rgba(6, 52, 110, 0.18);
  }
  .btn--outline:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 3px 10px rgba(0, 0, 0, 0.08); }
  .btn--quiet:active, .btn--ink:active, .btn--outline.on-light:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 3px 10px rgba(74, 62, 44, 0.08);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn--primary:active, .btn--outline:active,
    .btn--quiet:active, .btn--ink:active { transform: none; }
  }
}

.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.arrow { width: 11px; height: 11px; flex: 0 0 auto; transition: transform 0.4s ease-out; }

/* ---------------------------------------------------------------- 6. nav */

.nav-shell {
  position: fixed;
  top: calc(var(--pad) + 12px);
  left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 var(--pad);
  pointer-events: none;
}

.nav {
  pointer-events: auto;
  width: 100%;
  max-width: 1180px;
  height: var(--nav-h);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px 0 18px;
  transition: max-width 620ms var(--ease),
              height    460ms var(--ease),
              padding   460ms var(--ease),
              border-radius 460ms var(--ease);
}

.nav__logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav__logo img { height: 26px; width: auto; transition: height 420ms var(--ease); }

.nav__links {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0 auto;
  white-space: nowrap;
}
.nav__links a {
  position: relative;
  font-weight: 500;
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-block: 2px;
}
/* BLUE 4 of 6 — underline wipe, nav and footer only */
.nav__links a::after,
.footer__col a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-soft);
}
.nav__links a:hover::after,
.footer__col a:hover::after { transform: scaleX(1); }

/* BLUE 6 of 6 — you are here. The underline is already the nav's hover
   language, so the active page simply wears it permanently rather than
   inventing a second marker. */
.nav__links a[aria-current='page']::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }

.nav__keep { font-weight: 500; font-size: 14px; color: var(--ink); white-space: nowrap; padding: 0 4px; }

.lang {
  position: relative;
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: var(--r-pill);
  background: rgba(26, 25, 23, 0.055);
  box-shadow: inset 0 1px 2px rgba(26, 25, 23, 0.07),
              inset 0 -1px 0 rgba(255, 255, 255, 0.6);
}
.lang__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 40px; height: calc(100% - 6px);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #ffffff, #F4EFE6);
  box-shadow: 0 1px 2px rgba(74, 62, 44, 0.16), inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lang.is-en .lang__thumb { transform: translateX(40px); }
.lang__opt {
  position: relative; z-index: 1;
  width: 40px; height: 28px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--ink-faint);
  transition: color 300ms var(--ease-soft);
}
.lang__opt.is-on { color: var(--ink); }

.nav__cta { height: 38px; padding: 0 18px; font-size: 14px; }

.burger {
  position: relative;
  display: grid;
  place-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  padding: 0; border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(26, 25, 23, 0.05);
  cursor: pointer;
  color: var(--ink);
  /* out at the top of the page — it blurs in, it does not fade in */
  opacity: 0;
  filter: blur(6px);
  transform: scale(0.5);
  pointer-events: none;
  transition: opacity 350ms var(--ease), filter 350ms var(--ease), transform 350ms var(--ease);
}
.burger span {
  display: block;
  width: 17px; height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 380ms var(--ease), opacity 200ms;
}

.nav.is-min { max-width: 520px; height: 48px; padding: 0 8px 0 14px; }
.nav.is-min .nav__logo img { height: 23px; }

.nav__links, .nav__lang, .nav__cta {
  transition: opacity 350ms var(--ease), filter 350ms var(--ease), transform 350ms var(--ease);
}
.nav.is-min .nav__links,
.nav.is-min .nav__lang,
.nav.is-min .nav__cta {
  opacity: 0;
  filter: blur(6px);
  transform: scale(0.94);
  pointer-events: none;
  position: absolute;
  left: 50%;
}
.nav.is-min .nav__lang, .nav.is-min .nav__cta { left: auto; right: 64px; }

.nav.is-min .burger { opacity: 1; filter: blur(0); transform: scale(1); pointer-events: auto; }

@media (max-width: 999px) {
  .nav { max-width: 520px; height: 48px; padding: 0 8px 0 14px; }
  .nav .nav__links, .nav .nav__lang, .nav .nav__cta {
    opacity: 0; filter: blur(6px); transform: scale(0.94);
    pointer-events: none; position: absolute; left: 50%;
  }
  .nav .nav__lang, .nav .nav__cta { left: auto; right: 64px; }
  /* `.nav .burger` on purpose: the base .burger rule sets these at equal
     specificity and would win on source order, leaving it unclickable. */
  .nav .burger { opacity: 1; filter: blur(0); transform: scale(1); pointer-events: auto; }
  .nav .nav__logo img { height: 23px; }
}
@media (min-width: 1000px) { .nav:not(.is-min) .nav__keep { display: none; } }

/* ------------------------------------------------ 6b. fullscreen menu */

.menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 6vw, 88px);
  background: var(--panel);
  color: var(--cream);
  overflow: hidden;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1),
              visibility 0s linear 0.6s;
}
.menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.6s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s;
}

.menu__close {
  position: absolute;
  top: clamp(20px, 3vw, 34px);
  right: clamp(20px, 3vw, 34px);
  opacity: 1;
  filter: none;
  transform: none;
  pointer-events: auto;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.menu__close span:nth-child(1) { transform: translateY(3.3px) rotate(45deg); }
.menu__close span:nth-child(2) { transform: translateY(-3.3px) rotate(-45deg); }

.menu__links {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.menu__mask {
  display: block;
  overflow: hidden;
  /* the size lives here, not on the <a>, so the 0.12em headroom below is
     relative to the display size rather than the inherited 17px body */
  font-size: clamp(28px, 4.4vw, 56px);
  /* the mask clips, so descenders on g j y need headroom that costs no layout */
  padding-top: 0.12em;
  margin-top: -0.12em;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.menu__mask > a {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: inherit;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--cream);
  transform: translateY(110%);
  transition: transform 0.6s var(--ease);
}
.menu.is-open .menu__mask > a {
  transform: none;
  transition-delay: calc(200ms + var(--i) * 60ms);
}
.menu__mask > a > span { display: inline-block; transition: transform 0.4s ease-out; }
.menu__links a:hover > span { transform: translateX(12px); }
/* you are here, in the takeover as well as the bar */
.menu__mask > a[aria-current='page'] > span { opacity: 0.45; }

@media (max-height: 700px) {
  .menu__mask { font-size: clamp(24px, 6vw, 34px); }
  .menu { padding: clamp(20px, 5vw, 40px); }
}

.menu__foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}
.menu__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--cream);
  opacity: 0.6;
}
.menu__contact a { transition: opacity 0.3s var(--ease-soft); }
.menu__contact a:hover { opacity: 0.75; }

.menu .lang { background: rgba(255, 255, 255, 0.09); box-shadow: none; }
.menu .lang__thumb { background: rgba(255, 255, 255, 0.92); box-shadow: none; }
.menu .lang__opt { color: rgba(255, 255, 255, 0.55); }
.menu .lang__opt.is-on { color: var(--panel); }

/* ========================================================= 7. HERO / PHOTO
   The same full-viewport dark panel as /cloud/, with a photograph where the
   globe sits there. No video and no canvas: this page has nothing to
   animate that would be true, and one honest photograph of the person the
   page is written for does more than a generated surface would.

   The image bleeds off the right edge and is masked back into the panel on
   its left, so it reads as part of the surface rather than as a picture
   dropped into a box. */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 80px) 0 clamp(60px, 8vw, 110px);
  background: var(--panel);
  color: var(--on-dark-soft);
  overflow: hidden;
  isolation: isolate;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

 /* wider than /cloud/'s 640px and a step smaller than the shared h1: the
    headline here is a full sentence carried over from the landing page's
    marketing chapter, and it has to break into three lines without either
    hyphenating or running under the photograph. */
.hero__copy { max-width: 900px; }
.hero__label { color: rgba(233, 227, 214, 0.45); }

.hero h1 {
  color: var(--cream);
  margin-top: 22px;
  font-weight: 200;
  font-size: clamp(33px, 4.6vw, 62px);
}

.hero__sub {
  margin-top: clamp(20px, 2.2vw, 30px);
  max-width: 52ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.65;
  color: rgba(233, 227, 214, 0.70);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 38px); }

/* ---- the photograph ---- */
.hero__shot {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 1;
  width: 58%;
  pointer-events: none;
}

.hero__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  opacity: 0.62;
  filter: saturate(0.72) contrast(1.02);
}

/* the fade back into the panel — horizontal on wide screens, and a second
   pass from the bottom so the copy never sits on top of the picture */
.hero__shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--panel) 0%, rgba(24, 24, 24, 0.86) 22%, rgba(24, 24, 24, 0.10) 62%, transparent 100%),
    linear-gradient(0deg, rgba(24, 24, 24, 0.55) 0%, transparent 40%);
}

/* Below the two-column break the photograph is behind the copy, not beside
   it, so it drops to a wash — text on a photograph is the one thing this
   layout must never become. */
@media (max-width: 899px) {
  .hero__shot { width: 100%; }
  .hero__shot img { opacity: 0.30; object-position: 50% 26%; }
  .hero__shot::after {
    background: linear-gradient(180deg, rgba(24, 24, 24, 0.72) 0%, rgba(24, 24, 24, 0.88) 55%, var(--panel) 100%);
  }
}

/* ---- the credit, bottom-left ---- */
.hero__credit {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: clamp(18px, 2.6vw, 30px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(233, 227, 214, 0.30);
}
.hero__credit a { transition: color 400ms var(--ease-soft); }
.hero__credit a:hover { color: rgba(233, 227, 214, 0.62); }

@media (max-height: 620px) { .hero__credit { display: none; } }
/* ------------------------------------------------- 7b. masked line reveal */

.line {
  display: block;
  overflow: hidden;
  padding-top: 0.14em;
  margin-top: -0.14em;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.line > span { display: block; transform: translateY(105%); }

.js .hero.is-ready .line > span {
  transform: none;
  transition: transform 700ms var(--ease-mask);
}
.js .hero.is-ready .line:nth-child(1) > span { transition-delay: 200ms; }
.js .hero.is-ready .line:nth-child(2) > span { transition-delay: 320ms; }
.js .hero.is-ready .line:nth-child(3) > span { transition-delay: 440ms; }

.js .hero .fade { opacity: 0; transform: translateY(12px); }
.js .hero.is-ready .fade {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft);
  transition-delay: var(--d, 0ms);
}
.no-js .line > span { transform: none; }

/* --------------------------------------------------------- 8. statement */
/* Sticky scroll-linked word reveal. Used ONCE on the page: it costs two
   viewport heights, and a second one would read as a tic. */

.stmt { position: relative; height: 200svh; }

.stmt__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stmt__label { margin-bottom: clamp(24px, 3vw, 40px); }

.stmt__text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 4.2vw, 62px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 20ch;      /* forces short lines, which is the point */
  text-wrap: normal;
}

.stmt__text span {
  display: inline-block;
  opacity: 0.18;
  transform: translateY(4px);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .stmt { height: auto; }
  .stmt__inner { position: static; height: auto; padding-block: var(--sp-section); }
  .stmt__text span { opacity: 1 !important; transform: none !important; }
}
/* ---------------------------------------------------------- 9. services */
/* Four rows separated by hairlines. Not cards: no border, no background, no
   icon, no lift. On hover the title moves and nothing else does. Copied
   behaviour-for-behaviour from /hosting/'s CO JE V CENĚ list, which is the
   house pattern for "a list of things we do" and the reason there is no
   white-tile-with-an-icon anywhere on this site. */

.svcs { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 80px); }
@media (min-width: 900px) { .svcs { grid-template-columns: 5fr 7fr; align-items: start; } }

.svcs__intro { max-width: 46ch; }
.svcs__intro h2 { max-width: 15ch; }
.svcs__intro p { margin-top: 18px; font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.7; color: var(--ink-muted); }

.svcs__list { border-top: 1px solid var(--line-mid); }
@media (max-width: 899px) { .svcs__list { margin-top: clamp(34px, 4vw, 52px); } }

.svcs__list li { border-bottom: 1px solid var(--line); padding: clamp(20px, 2.4vw, 28px) 0; }

.svc__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: transform 500ms var(--ease);
}
.svcs__list li:hover .svc__title { transform: translateX(6px); }

.svc__desc { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); max-width: 58ch; }

/* what the service actually includes — a plain comma-free run of hairline
   separated fragments, so it stays readable without becoming a second list */
.svc__in {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.svc__in li { border: 0; padding: 0; }
.svc__in li + li { border-left: 1px solid var(--line-mid); padding-left: 14px; }

@media (prefers-reduced-motion: reduce) {
  .svcs__list li:hover .svc__title { transform: none; }
}

/* ------------------------------------------------------- 10. photographs */
/* The proof section. There are no client logos, no testimonials and no
   numbers on this page because there are no case studies yet — so this
   stands on showing who the page is written for instead of claiming who
   has already bought. Captions state what is in the frame; none of them
   claims a result. */

.shots__head { max-width: 46ch; margin-bottom: clamp(36px, 4.5vw, 60px); }
.shots__head p { margin-top: 18px; font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.7; color: var(--ink-muted); }

.shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.2vw, 30px);
}
@media (min-width: 640px) { .shots { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .shots { grid-template-columns: repeat(12, 1fr); }
  /* deliberately uneven: four equal tiles is the grid every generated page
     reaches for, and it flattens the difference between the pictures */
  .shots li:nth-child(1) { grid-column: span 7; }
  .shots li:nth-child(2) { grid-column: span 5; }
  .shots li:nth-child(3) { grid-column: span 5; }
  .shots li:nth-child(4) { grid-column: span 7; }
}

.shots figure { margin: 0; }

.shots__img {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-tile);
  background: rgba(26, 25, 23, 0.06);
  aspect-ratio: 4 / 3;
}
/* On the twelve-column grid the tiles differ in WIDTH only. A fixed height
   in place of the ratio is what keeps the captions in a row sitting on the
   same line — two different ratios across two different widths staggers
   them, which reads as a bug rather than as composition. */
@media (min-width: 1100px) {
  .shots__img { aspect-ratio: auto; height: clamp(300px, 27vw, 420px); }
}

.shots__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 900ms var(--ease);
}
.shots li:hover .shots__img img { transform: scale(1.04); }

.shots figcaption {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.shots figcaption b {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.shots__credit {
  margin-top: clamp(26px, 3vw, 36px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.shots__credit a { border-bottom: 1px solid var(--line-mid); }
.shots__credit a:hover { border-bottom-color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .shots li:hover .shots__img img { transform: scale(1.01); }
}

/* ------------------------------------------------------- 11. the audit */
/* The conversion moment. It gets its own dark panel and its own vertical
   space because it is the only thing on this page anyone can act on today,
   and because the offer — one page back, in two days, free — is the same
   thing the landing page's marketing chapter promises. If that offer
   changes there, change it here.

   Sparse and large on purpose: the web half of the studio earns density
   with seventeen real screenshots, this half has none, so it goes the
   other way. No cards, no tiles, no numbers. */

.audit { padding: 20px; }
@media (max-width: 767px) { .audit { padding: 0; } }

.audit__card {
  background: var(--panel);
  border-radius: var(--card-radius);
  padding: clamp(36px, 6vw, 104px) clamp(28px, 5vw, 88px);
  color: var(--on-dark-soft);
}
@media (max-width: 767px) { .audit__card { border-radius: 0; } }

.audit__label { color: var(--on-dark-muted); }

.aud__l {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(30px, 5vw, 68px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--cream);
  max-width: 18ch;
}
.aud__l:first-of-type { margin-top: clamp(22px, 3vw, 34px); }
.aud__l + .aud__l { color: var(--on-dark-muted); }

/* ---- the field ---- */
.aud__form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(30px, 4vw, 48px);
}

.aud__field {
  flex: 1 1 320px;
  display: block;
  position: relative;
}

.aud__field input {
  width: 100%;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-pill);
  color: var(--on-dark);
  font-size: 16px;
  transition: border-color 500ms ease-out, background-color 500ms ease-out;
}
.aud__field input::placeholder { color: rgba(255, 255, 255, 0.34); }
.aud__field input:hover { border-color: rgba(255, 255, 255, 0.45); }

/* BLUE 3 of 5 — the audit field focus ring */
.aud__field input:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(255, 255, 255, 0.09);
}
.aud__field input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.aud__go { flex: 0 0 auto; padding-inline: 34px; }

.aud__fine { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--on-dark-muted); max-width: 44ch; }

/* ---- the three steps ----
   The numeral is a small mono index at the head of the row, NOT a giant
   faint figure sitting behind the text. That treatment is banned here and
   the ban is the reason this looks like a table of contents instead. */
.aud__list {
  margin-top: clamp(44px, 6vw, 76px);
  border-top: 1px solid var(--on-dark-line);
}

.aud__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 18px;
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.aud__n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--on-dark-faint);
}

.aud__t {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 1.9vw, 25px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--on-dark);
}
/* -------------------------------------------------------------- 12. faq */

.faq { border-top: 1px solid var(--line-mid); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: clamp(18px, 2.2vw, 26px) 0;
  cursor: pointer; list-style: none;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(19px, 2vw, 26px);
  letter-spacing: -0.02em; line-height: 1.3;
  color: var(--ink);
  transition: color 400ms var(--ease-soft);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ink-muted); }
.faq summary::after {
  content: ''; flex: 0 0 auto;
  width: 13px; height: 13px; margin-top: 9px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat;
  transition: transform 400ms var(--ease-soft);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq__a { padding-bottom: clamp(20px, 2.4vw, 28px); max-width: 66ch; font-size: 16px; }
.faq__a p + p { margin-top: 12px; }

/* ---------------------------------------------------------- 13. contact */

.contact { padding: 20px; }
@media (max-width: 767px) { .contact { padding: 0; } }

.contact__card {
  background: var(--panel);
  border-radius: var(--card-radius);
  padding: clamp(32px, 5vw, 88px);
  color: var(--on-dark-soft);
}
@media (max-width: 767px) { .contact__card { border-radius: 0; } }

.contact__grid { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 80px); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 5fr 6fr; } }

.contact h2 { color: var(--on-dark); }
.contact__lede { margin-top: 18px; max-width: 44ch; font-size: 16px; line-height: 1.65; color: var(--on-dark-soft); }

.contact__direct { margin-top: clamp(28px, 3.5vw, 44px); }
.contact__direct dt { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--on-dark-muted); }
.contact__direct dd {
  margin: 5px 0 20px;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em;
  color: var(--on-dark);
}
.contact__direct a { transition: opacity 400ms var(--ease-soft); }
.contact__direct a:hover { opacity: 0.72; }

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--on-dark-muted); }
.field .opt { text-transform: none; letter-spacing: 0.03em; opacity: 0.7; }

.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--on-dark-line);
  border-radius: 10px;
  color: var(--on-dark);
  font-size: 16px;
  transition: border-color 500ms ease-out, background-color 500ms ease-out;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.34); }
.field input:hover, .field textarea:hover { border-color: rgba(255, 255, 255, 0.45); }

/* BLUE 3 of 6 — the form focus ring. #1081fa on #181818 is ~4.6:1,
   comfortably past the 3:1 WCAG asks of a non-text focus indicator. */
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(255, 255, 255, 0.09);
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.form__note { font-size: 13px; line-height: 1.5; color: var(--on-dark-muted); max-width: 32ch; }

/* ----------------------------------------------------------- 14. footer */

.site-footer { background: var(--cream-light); padding: clamp(56px, 7vw, 96px) var(--pad) var(--pad); }

.footer-tile {
  max-width: var(--measure);
  margin-inline: auto;
  border-radius: var(--r-tile);
  padding: clamp(30px, 3.4vw, 52px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 52px);
}
@media (min-width: 860px) { .footer-tile { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.footer__brand { position: relative; }
.footer__brand img { height: 28px; width: auto; }
.footer__brand p { margin-top: 16px; font-size: 15px; line-height: 1.65; color: var(--ink-muted); max-width: 30ch; }

.footer__col { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.footer__col h4 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-faint);
}
.footer__col a, .footer__col span {
  position: relative;
  font-size: 16px;
  color: var(--ink-muted);
  padding: 6px 0;
  overflow-wrap: anywhere;
  transition: color 400ms var(--ease-soft);
}
.footer__col a { width: fit-content; }
.footer__col a:hover { color: var(--ink); }

.footer__bar {
  position: relative;
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: 12px 24px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-faint);
}

.clock { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-muted); }
.clock__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-muted); animation: tick 2s ease-in-out infinite; }
@keyframes tick { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.8; } }

/* ----------------------------------------------------------- 15. motion */

.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft);
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .line > span { transform: none !important; }
  .js .hero .fade { opacity: 1; transform: none; }
  .clock__dot { animation: none; opacity: 0.6; }
  .nav__links, .nav__lang, .nav__cta, .burger, .nav { filter: none !important; }
  .menu { transition: none !important; }
  .menu__mask > a { transform: none !important; }
  .shots__img img { transform: none !important; }
}