/* =========================================================================
   Ethermedia — Apple HIG-inspired homepage
   Dark appearance only. Every colour below is a community-measured
   APPROXIMATION of an Apple system colour's dark variant. Components only
   ever reference the ROLE tokens (--label, --accent, --system-background …),
   never raw hex.
   ========================================================================= */
:root {
  color-scheme: dark;

  /* ---- Colour roles (dark appearance only — the site has no light mode) ---- */
  --accent:            #0A84FF;  /* ~systemBlue (dark): icons, indicators, focus */
  --accent-fill:       #0071E3;  /* systemBlue, contrast-tuned for white labels (WCAG AA) */
  --accent-fill-hover: #0077ED;
  --accent-text:       #2997FF;  /* systemBlue, contrast-tuned for text links on black */
  --success:           #30D158;
  --danger:            #FF453A;

  --label:             #FFFFFF;
  --secondary-label:   rgba(235, 235, 245, .64);
  --tertiary-label:    rgba(235, 235, 245, .32);
  --separator:         rgba(84, 84, 88, .55);

  --system-background:            #000000;
  --system-grouped-background:    #000000;
  --secondary-grouped-background: #1C1C1E;
  --secondary-system-background:  #1C1C1E;
  /* the page glows, as "r, g, b" so the alpha can stay in the gradient:
     a cool tone, a warm accent and a third in between. Each page overrides
     them with its own hero palette (see html[data-palette] below). */
  --glow-a: 10, 132, 255;   /* blue */
  --glow-b: 255, 159, 10;   /* orange */
  --glow-c: 64, 200, 224;   /* teal */

  --system-gray:  #8E8E93;
  --system-gray2: #636366;
  --system-gray3: #48484A;
  --system-gray4: #3A3A3C;
  --system-gray5: #2C2C2E;
  --system-gray6: #1C1C1E;

  --fill:           rgba(120, 120, 128, .36);
  --secondary-fill: rgba(120, 120, 128, .32);
  --tertiary-fill:  rgba(118, 118, 128, .24);

  --glass-bar:       rgba(22, 22, 23, .72);
  --glass:           rgba(28, 28, 30, .52);
  --glass-stroke:    rgba(255, 255, 255, .12);
  --glass-highlight: rgba(255, 255, 255, .16);
  --glass-shadow:    0 8px 32px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);

  /* ---- Hero "ether" palette (dark variants of the blue system family) ---- */
  --ether-blue:      #0A84FF;  /* ~systemBlue */
  --ether-indigo:    #5E5CE6;  /* ~systemIndigo */
  --ether-cyan:      #64D2FF;  /* ~systemCyan */
  --ether-teal:      #40C8E0;  /* ~systemTeal — cool side of the teal/orange grade */
  --ether-orange:    #FF9F0A;  /* ~systemOrange — the sun, warm side of the grade */

  /* ---- Typography: one family (Montserrat), weight carries hierarchy ---- */
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, monospace;

  /* Apple reference metrics (iOS, Large size) */
  --type-large-title: 34px;
  --type-title1:      28px;
  --type-title2:      22px;
  --type-title3:      20px;
  --type-headline:    17px;
  --type-body:        17px;
  --type-callout:     16px;
  --type-subhead:     15px;
  --type-footnote:    13px;
  --type-caption1:    12px;
  --type-caption2:    11px;
  /* Web "Dynamic Type": titles scale up with the viewport, never below the HIG size */
  --type-display: clamp(40px, 4.4vw + 18px, 80px);
  --type-section: clamp(34px, 2.2vw + 20px, 56px);

  /* ---- Layout: 8pt grid, 4pt subdivisions ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px;
  --sp-10: 64px; --sp-12: 96px; --sp-16: 128px;

  --tap: 44px;                       /* HIG minimum tap target */
  --nav-h: 56px;
  --edge-band: 96px;              /* scroll-edge band under the nav (blur + smear) */
  --maxw: 1120px;
  --gutter: 24px;
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 1024px) { :root { --gutter: 40px; } }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--sp-4)); }
body {
  margin: 0;
  position: relative;
  background: var(--system-background);
  color: var(--label);
  font-family: var(--font);
  font-size: var(--type-body);
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- Soft colour glows on the black, below the first screen ----
   The page stays black; faint glows of the page's hero palette alternate
   sides on the way down. The layer starts one screen down and the pattern
   repeats to the very bottom, whatever the page length. It is one static,
   non-fixed layer: painted once, nothing to compute on scroll. */
body::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: 100vh; bottom: 0;
  background:
    radial-gradient(70vw 60vh at 8% 70vh, rgba(var(--glow-a), .10), transparent 70%),
    radial-gradient(60vw 55vh at 92% 190vh, rgba(var(--glow-b), .065), transparent 70%),
    radial-gradient(70vw 60vh at 10% 330vh, rgba(var(--glow-c), .075), transparent 70%),
    radial-gradient(60vw 55vh at 90% 460vh, rgba(var(--glow-b), .055), transparent 70%);
  background-size: 100% 560vh;
  background-repeat: repeat-y;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  background: var(--accent-fill); color: #fff; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-s);
}
.skip-link:focus { top: var(--sp-4); }

/* ---- Type roles ---- */
.t-large-title { font-size: var(--type-large-title); line-height: 1.14; font-weight: 700; letter-spacing: -.02em; }
.t-title1      { font-size: var(--type-title1); line-height: 1.16; font-weight: 700; letter-spacing: -.016em; }
.t-title2      { font-size: var(--type-title2); line-height: 1.2;  font-weight: 600; letter-spacing: -.01em; }
.t-title3      { font-size: var(--type-title3); line-height: 1.24; font-weight: 600; letter-spacing: -.008em; }
.t-headline    { font-size: var(--type-headline); line-height: 1.29; font-weight: 600; }
.t-callout     { font-size: var(--type-callout); line-height: 1.31; }
.t-subhead     { font-size: var(--type-subhead); line-height: 1.4; letter-spacing: 0; }
.t-footnote    { font-size: var(--type-footnote); line-height: 1.4; letter-spacing: .005em; }
.t-caption1    { font-size: var(--type-caption1); line-height: 1.33; letter-spacing: 0; }
.secondary     { color: var(--secondary-label); }

.display {
  font-size: var(--type-display);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* a line break that only makes sense on wide screens; phones balance the lines themselves */
@media (max-width: 734px) { .br-wide { display: none; } }
.section-title {
  font-size: var(--type-section);
  line-height: 1.07;
  font-weight: 700;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.eyebrow {
  font-size: var(--type-headline);
  font-weight: 600;
  color: var(--secondary-label);
  margin-bottom: var(--sp-3);
}
.lede {
  font-size: clamp(var(--type-body), 1vw + 12px, var(--type-title3) + 4px);
  line-height: 1.38;
  color: var(--secondary-label);
  text-wrap: pretty;
}

/* ---- Icons (SF Symbols-style line glyphs, weight matched to text) ---- */
.icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon--bold { stroke-width: 2.25; }

/* ---- Buttons & links ---- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-5);
  border-radius: 999px;
  font-size: var(--type-body); font-weight: 400; line-height: 1;
  white-space: nowrap;
  transition: background-color .2s var(--ease), transform .15s var(--ease), opacity .2s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn--filled { background: var(--accent-fill); color: #fff; }
.btn--filled:hover { background: var(--accent-fill-hover); }
/* liquid: a soft blob spreads out from wherever the pointer touched down */
.btn__label { position: relative; z-index: 1; }
.btn__liq {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden; pointer-events: none;
}
.btn__liq i {
  position: absolute; left: var(--lx, 50%); top: var(--ly, 50%);
  width: 240%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .42), rgba(120, 195, 255, .5) 42%, rgba(10, 132, 255, 0) 70%);
  opacity: 0; transform: scale(.2);
  transition: transform .55s var(--ease-out), opacity .45s var(--ease);
}
.btn--filled:hover .btn__liq i,
.btn--filled.is-liq .btn__liq i {
  opacity: 1; transform: scale(1);
  animation: liquid 5s ease-in-out infinite;
}
@keyframes liquid {
  0%, 100% { border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%; }
  33%      { border-radius: 56% 44% 47% 53% / 44% 56% 44% 56%; }
  66%      { border-radius: 48% 52% 57% 43% / 56% 48% 52% 44%; }
}

.btn--gray { background: var(--secondary-fill); color: var(--label); }
.btn--gray:hover { background: var(--fill); }
.btn--large { min-height: 52px; padding: 0 var(--sp-6); }
/* compact visual pill that still owns a 44pt hit area */
.btn--compact { min-height: 32px; padding: 0 var(--sp-4); font-size: var(--type-subhead); }
.btn--compact::before { content: ""; position: absolute; inset: -6px -2px; }

.link-chevron {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: var(--tap);
  font-size: var(--type-body);
  color: var(--accent-text);
}
.link-chevron .icon { font-size: .82em; stroke-width: 2.25; transform: translateY(.04em); transition: transform .2s var(--ease); }
.link-chevron:hover .icon, a:hover > .link-chevron .icon { transform: translate(2px, .04em); }
.link-chevron--large { font-size: var(--type-title3); }

/* ---- Liquid Glass ---- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--secondary-grouped-background); }
  .nav__edge::before { background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .85) 55%, rgba(0, 0, 0, 0) 100%); }
}

/* =========================================================================
   Navigation — no hard bar: a scroll edge effect lets content dissolve
   into a progressive blur as it slides up under the controls (WebGL
   pictures additionally smear into RGB-split streaks in the same band)
   ========================================================================= */
/* translateZ(0): its own compositing layer, so WebKit keeps it above the hero's
   promoted intro text; not a backdrop root, so the edge blur still works */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transform: translateZ(0); }
.nav__edge {
  position: absolute; inset: 0 0 auto; z-index: -1;
  height: var(--edge-band);
  pointer-events: none;
}
.nav__edge i, .nav__edge b { position: absolute; inset: 0; }
/* Chromium: real pixel-stretch + RGB split on everything under the band */
.edge-smear .nav__edge b {
  -webkit-backdrop-filter: url(#edge-smear); backdrop-filter: url(#edge-smear);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, #000 30%, #000 52%, rgba(0,0,0,0) 80%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, #000 30%, #000 52%, rgba(0,0,0,0) 80%);
}
/* with the smear on, the blur only softens it */
.edge-smear .nav__edge i:nth-child(n+3),
.edge-smear-el .nav__edge i:nth-child(n+3) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* three graded layers — light at the content edge, strong under the bar */
.nav__edge i:nth-child(2) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, #000 15%, #000 40%, rgba(0,0,0,0) 55%); mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, #000 15%, #000 40%, rgba(0,0,0,0) 55%); }
.nav__edge i:nth-child(3) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 30%, #000 50%, #000 65%, rgba(0,0,0,0) 80%); mask-image: linear-gradient(to top, rgba(0,0,0,0) 30%, #000 50%, #000 65%, rgba(0,0,0,0) 80%); }
.nav__edge i:nth-child(4) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 60%, #000 80%, #000 100%); mask-image: linear-gradient(to top, rgba(0,0,0,0) 60%, #000 80%, #000 100%); }
.no-edge-blur .nav__edge i, .no-edge-blur .nav__edge b { display: none; }
/* tint keeps the controls legible over anything bright */
.nav__edge::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .6) 34%, rgba(0, 0, 0, .16) 56%, rgba(0, 0, 0, .06) 80%, rgba(0, 0, 0, 0) 100%);
}
.nav__bar-wrap {
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.nav.is-open .nav__bar-wrap {
  background: rgba(18, 18, 20, .94);
  border-bottom-color: var(--separator);
}
.nav.is-open .nav__edge { display: none; }
.nav__bar { display: flex; align-items: center; gap: var(--sp-5); height: var(--nav-h); }
.nav__logo { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--label); margin-right: auto; transition: color .3s var(--ease); }
.nav__logo:hover { text-decoration: none; }
.logo { width: 132px; height: auto; fill: currentColor; }
.nav__links ul { display: flex; gap: var(--sp-1); }
.nav__links a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 var(--sp-3);
  font-size: var(--type-subhead);
  color: var(--secondary-label);
  border-radius: 999px;
  transition: color .3s var(--ease);
}
.nav__links a:hover { color: var(--label); text-decoration: none; }
.nav__links a[aria-current="page"] { color: var(--label); font-weight: 600; }
/* language switch: a quiet label next to the contact button */
.nav__lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  font-size: var(--type-footnote); font-weight: 600; letter-spacing: .06em;
  color: var(--secondary-label); border-radius: 999px;
  transition: color .3s var(--ease);
}
.nav__lang:hover { color: var(--label); text-decoration: none; }
.nav__toggle {
  display: none; width: var(--tap); height: var(--tap);
  align-items: center; justify-content: center; margin-right: calc(var(--sp-3) * -1);
  font-size: 22px; color: var(--label); border-radius: 999px;
}
.nav__toggle .icon-close { display: none; }
.nav.is-open .nav__toggle .icon-menu { display: none; }
.nav.is-open .nav__toggle .icon-close { display: block; }

/* mobile menu: a panel only as tall as its links, over a dimmed, blurred page */
.nav__scrim {
  position: fixed; inset: 0; z-index: 49;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(12px) saturate(.9); backdrop-filter: blur(12px) saturate(.9);
  animation: scrim-in .3s var(--ease) both;
}
@keyframes scrim-in { from { opacity: 0; } }
.nav__sheet {
  background: rgba(18, 18, 20, .94);   /* near-solid; the blur lives on the scrim behind it */
  border-bottom: 1px solid var(--separator);
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
  max-height: calc(100dvh - var(--nav-h) - var(--sp-12));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform-origin: top center;
  animation: sheet-in .35s var(--ease-out) both;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px); } }
.nav__sheet ul { padding: var(--sp-4) 0 var(--sp-6); }
.nav__sheet a {
  display: flex; align-items: center; min-height: 52px;
  font-size: var(--type-title2); font-weight: 600; color: var(--label);
  border-bottom: 1px solid var(--separator);
}
.nav__sheet li:last-child a { border-bottom: 0; }
.nav__sheet .btn { margin-top: var(--sp-5); width: 100%; font-size: var(--type-body); font-weight: 400; color: #fff; border: 0; }

/* the cookie bar (z-index 60) dims under the scrim with the rest of the page */
.menu-open .cookie { z-index: 48; }

@media (max-width: 919px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
}
@media (min-width: 920px) { .nav__sheet, .nav__scrim { display: none !important; } }

/* =========================================================================
   Hero — full screen; the ether scene lives behind it
   ========================================================================= */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + var(--sp-8)) 0 max(26vh, 176px);
  background: var(--system-background);
  color: var(--label);
}
/* The page glows follow the same palette as the page's hero, so colour carries
   on below the first section. The build puts the palette on <html>. */
html[data-palette="violet"] { --glow-a: 94, 92, 230;  --glow-b: 255, 79, 139;  --glow-c: 185, 140, 255; }
html[data-palette="mint"]   { --glow-a: 31, 168, 160; --glow-b: 255, 210, 90;  --glow-c: 46, 204, 143; }
html[data-palette="amber"]  { --glow-a: 76, 91, 212;  --glow-b: 255, 179, 64;  --glow-c: 201, 138, 75; }
html[data-palette="ice"]    { --glow-a: 44, 123, 229; --glow-b: 127, 224, 255; --glow-c: 69, 198, 232; }
html[data-palette="coral"]  { --glow-a: 122, 75, 208; --glow-b: 255, 107, 90;  --glow-c: 194, 90, 216; }
/* Each page stirs a different gas: the scene reads the five --ether tokens
   from its own element, so a palette is just a token override. */
.hero__ether[data-palette="violet"] {
  --ether-blue: #5E5CE6; --ether-indigo: #7B4BE0; --ether-cyan: #B98CFF;
  --ether-teal: #6F5BF0; --ether-orange: #FF4F8B;
}
.hero__ether[data-palette="mint"] {
  --ether-blue: #1FA8A0; --ether-indigo: #12796F; --ether-cyan: #66D4CF;
  --ether-teal: #2ECC8F; --ether-orange: #FFD25A;
}
.hero__ether[data-palette="amber"] {
  --ether-blue: #4C5BD4; --ether-indigo: #6D4BC0; --ether-cyan: #9FB4FF;
  --ether-teal: #C98A4B; --ether-orange: #FFB340;
}
.hero__ether[data-palette="ice"] {
  --ether-blue: #2C7BE5; --ether-indigo: #3F5BD8; --ether-cyan: #7FE0FF;
  --ether-teal: #45C6E8; --ether-orange: #DCE9FF;
}
.hero__ether[data-palette="coral"] {
  --ether-blue: #7A4BD0; --ether-indigo: #A03FC0; --ether-cyan: #E39BFF;
  --ether-teal: #C25AD8; --ether-orange: #FF6B5A;
}
.hero__ether {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__ether.is-ready { opacity: 1; }
/* soft hand-off to the page: the last stretch of the scene fades to pure black */
.hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 22%; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .18) 30%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .86) 84%, #000 100%);
}
.hero__ether canvas { display: block; width: 100%; height: 100%; }
.hero__intro { text-align: center; max-width: 880px; }
/* the homepage headline is two full sentences — give it room to stay in two lines */
.hero:not(.hero--page) .hero__intro { max-width: 1040px; }
.hero__intro .lede { max-width: 640px; margin: var(--sp-5) auto 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6); }
.hero__intro .actions { justify-content: center; margin-top: var(--sp-8); }
.hero__cue {
  position: absolute; left: 50%; bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); margin-left: calc(var(--tap) / -2);
  border-radius: 999px; color: var(--secondary-label); font-size: 20px;
}
.hero__cue:hover { color: var(--label); }
.hero__cue .icon { animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-2px); opacity: .55; } 50% { transform: translateY(4px); opacity: 1; } }

/* =========================================================================
   Sections
   ========================================================================= */
.section { padding-block: var(--sp-12); }
@media (min-width: 1024px) { .section { padding-block: var(--sp-16); } }

.section__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-8);
}

/* ---- What we do: one pinned card, words on the picture, a step bar above ---- */
.svc__head { margin-bottom: var(--sp-7); }
.svc__steps { display: none; }
.svc__cards { display: grid; gap: var(--sp-5); margin: 0; padding: 0; list-style: none; }
.svc__card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  border-radius: var(--radius-l);
  background: var(--system-background); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
/* stacked (phones, tablets): picture on top, words right beneath it */
.svc__card picture { position: relative; display: block; aspect-ratio: 7 / 8; }
@media (min-width: 600px) { .svc__card picture { aspect-ratio: 16 / 10; } }
.svc__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-m, 50% 50%); }
@media (min-width: 600px) { .svc__card img { object-position: var(--pos, 50% 50%); } }
.svc__card::before { display: none; }
.svc__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background:
    radial-gradient(130% 95% at 0% 0%, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .58) 34%, rgba(0, 0, 0, 0) 68%),
    linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 40%);
}
.svc__caption { padding: var(--sp-5) var(--sp-5) var(--sp-6); max-width: 560px; }
@media (min-width: 600px) { .svc__caption { padding: var(--sp-6) var(--sp-7) var(--sp-7); } }
.svc__num { display: block; font-size: var(--type-footnote); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); margin-bottom: var(--sp-2); }
.svc__title { font-size: clamp(var(--type-title1), 2vw + 16px, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -.03em; }
.svc__caption p {
  margin-top: var(--sp-3);
  font-size: clamp(var(--type-body), .5vw + 14px, var(--type-title3)); line-height: 1.4;
  color: var(--secondary-label); text-wrap: pretty;
}
.svc__caption strong { color: var(--label); font-weight: 600; }

@media (min-width: 1024px) and (min-height: 640px) {
  .svc { padding-block: 0; }
  .svc__scroller { height: calc(100svh + (var(--steps) - 1) * 62svh); }
  .svc__sticky {
    position: sticky; top: 0; height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--edge-band) + var(--sp-2)) 0 var(--sp-6);
  }
  .svc__head { margin-bottom: var(--sp-5); }
  .svc__steps {
    display: grid; grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); gap: var(--sp-3);
    margin: 0 0 var(--sp-4); padding: 0; list-style: none;
  }
  .svc__step { display: block; width: 100%; min-height: var(--tap); padding: var(--sp-2) 0 0; text-align: left; }
  .svc__step span {
    display: block; font-size: var(--type-subhead); font-weight: 600; color: var(--tertiary-label);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .4s var(--ease);
  }
  .svc__step:hover span, .svc__step[aria-current="step"] span { color: var(--label); }
  .svc__step i { display: block; height: 2px; margin-top: var(--sp-3); border-radius: 2px; background: var(--fill); overflow: hidden; }
  .svc__step b { display: block; height: 100%; background: var(--label); transform-origin: left; transform: scaleX(var(--p, 0)); }
  .svc__cards { position: relative; display: block; height: clamp(340px, calc(100svh - var(--edge-band) - 240px), 720px); }
  .svc__card { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .8s var(--ease); }
  /* pinned: the words sit on the picture, top-left, over a soft scrim */
  .svc__card picture { position: absolute; inset: 0; aspect-ratio: auto; z-index: -2; }
  .svc__card::before { display: block; }
  .svc__caption { padding: var(--sp-8); }
  .svc__card img { transform: scale(1.06); transition: transform 1.8s var(--ease-out); }
  .svc__caption > * { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
  .svc__card.is-active { opacity: 1; }
  .svc__card.is-active img { transform: none; }
  .svc__card.is-active .svc__caption > * { opacity: 1; transform: none; }
  /* product shots on pure black keep to the right and melt into the card */
  .svc__card:has(.svc__pic--side) .svc__caption { max-width: min(560px, 46%); }
  /* whole picture, centred at its own 3:2 height so its top and bottom edges can fade out */
  .svc__card picture.svc__pic--contain img {
    top: 50%; bottom: auto; height: auto; max-height: 100%; aspect-ratio: 3 / 2; translate: 0 -50%;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0), #000 14%, #000 86%, rgba(0,0,0,0));
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0), #000 14%, #000 86%, rgba(0,0,0,0));
  }
  .svc__card picture.svc__pic--side {
    left: auto; width: var(--side-w, 68%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 24%);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 24%);
  }
  .svc__card.is-active .svc__caption > :nth-child(2) { transition-delay: .08s; }
  @media (min-height: 960px) { .svc__card picture.svc__pic--grow { width: 100%; } }
  .svc__card.is-active .svc__caption > :nth-child(3) { transition-delay: .16s; }
}

/* ---- Selected work (sticky aside + large project images) ---- */
.works { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) { .works { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: var(--sp-10) var(--sp-12); } }
.works__aside .lede { margin-top: var(--sp-5); max-width: 34ch; }
.works__aside .link-chevron { margin-top: var(--sp-4); }
@media (min-width: 1024px) {
  .works__sticky {
    position: sticky; top: calc(var(--edge-band) + var(--sp-2));
    display: flex; flex-direction: column;
    min-height: calc(100svh - var(--nav-h) - var(--sp-16));
  }
}
.works__now { display: none; margin-top: auto; padding-top: var(--sp-8); }
@media (min-width: 1024px) { .works__now { display: flex; align-items: center; gap: var(--sp-3); } }
.works__now-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.works__now small { display: block; font-size: var(--type-caption1); color: var(--secondary-label); letter-spacing: .02em; }
.works__now strong { display: block; font-size: var(--type-headline); font-weight: 600; transition: opacity .3s var(--ease); }
.works__now.is-changing strong { opacity: 0; }

.projects { display: grid; gap: var(--sp-10); margin: 0; padding: 0; list-style: none; }
.project a { display: block; color: var(--label); }
.project a:hover { text-decoration: none; }
.project__media {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  background: var(--system-gray6);
}
.project__media img, .project__media canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.project__media img { object-fit: cover; }
/* product shots on black are shown whole, melting into a black frame */
.project__media:has(img[data-fit="contain"]) { background: #000; }
.project__media img[data-fit="contain"] { object-fit: contain; }
.project__media canvas { z-index: 1; pointer-events: none; }
.project__media.has-gl img { visibility: hidden; }
.project__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-4);
  padding-top: var(--sp-4);
}
.project__meta h3 { font-size: var(--type-title3); font-weight: 600; letter-spacing: -.01em; }
.project__meta p { font-size: var(--type-subhead); color: var(--secondary-label); }
.project .link-chevron { min-height: 32px; font-size: var(--type-callout); }
/* scroll-in: the frame wipes open from the bottom while the picture settles */
.js .project__media { clip-path: inset(100% 0 0 0 round var(--radius-m)); transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1); }
.js .project__media img { transform: scale(1.35); transition: transform 1.4s var(--ease-out); }
.js .project.is-visible .project__media { clip-path: inset(0 0 0 0 round var(--radius-m)); }
.js .project.is-visible .project__media img { transform: none; }
/* images WebGL can't read (cross-origin) still answer the pointer, quietly */
.js .project.is-visible a:hover .project__media:not(.has-gl) img { transform: scale(1.03); }
.works__more { display: flex; justify-content: center; }
@media (min-width: 1024px) { .works__more { grid-column: 2; } }

/* clients: an endless, slow strip of logos right under the hero */
.marquee { --gap: 40px; --dur: 44s; padding: var(--sp-8) 0 var(--sp-4); }
@media (min-width: 734px) { .marquee { --gap: 72px; --dur: 64s; } }
.marquee__title {
  margin-bottom: var(--sp-6); text-align: center;
  font-size: var(--type-footnote); letter-spacing: .02em; color: var(--secondary-label);
}
.marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee var(--dur) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(calc(-100% / 3), 0, 0); } }
.marquee__list {
  display: flex; flex-shrink: 0; align-items: center; gap: var(--gap);
  margin: 0; padding: 0 var(--gap) 0 0; list-style: none;
}
.marquee__list li { display: flex; align-items: center; min-height: 64px; }
.marquee img {
  display: block; width: var(--w, 96px); max-width: none; height: auto;
  filter: brightness(0) invert(1); opacity: .6;
  transition: opacity .3s var(--ease);
}
@media (max-width: 733px) { .marquee img { width: calc(var(--w, 96px) * .8); } }
.marquee img.is-badge { filter: grayscale(1) invert(1); }
.marquee li:hover img { opacity: 1; }

/* ---- Statement (big type + highlighted copy) ---- */
.statement { text-align: center; }
.statement__title {
  font-size: clamp(40px, 6vw, 88px); line-height: 1.04; font-weight: 700; letter-spacing: -.04em;
  text-wrap: balance;
}
.statement__copy {
  max-width: 780px; margin: var(--sp-7) auto 0;
  font-size: clamp(19px, .8vw + 13px, 24px); line-height: 1.42; font-weight: 600;
  color: var(--secondary-label);
  text-wrap: pretty;
}
.statement__copy strong { color: var(--label); font-weight: 600; }
.features { display: grid; gap: var(--sp-8) var(--sp-6); grid-template-columns: 1fr; margin-top: var(--sp-12); text-align: left; }
@media (min-width: 734px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(4, 1fr); } }
.feature { padding-top: var(--sp-5); border-top: 1px solid var(--separator); }
.feature .icon { display: block; font-size: 32px; color: var(--accent); margin-bottom: var(--sp-4); }
.feature h3 { font-size: var(--type-headline); font-weight: 600; line-height: 1.3; margin-bottom: var(--sp-2); }
.feature p { font-size: var(--type-callout); line-height: 1.45; color: var(--secondary-label); }

/* ---- Stats ---- */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8) var(--sp-5);
}
@media (min-width: 820px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { display: flex; flex-direction: column-reverse; gap: var(--sp-1); padding-top: var(--sp-4); border-top: 1px solid var(--separator); }
.stat dd {
  font-size: clamp(var(--type-title1), 2.4vw + 14px, 56px);
  line-height: 1.06; font-weight: 700; letter-spacing: -.024em;
  font-variant-numeric: tabular-nums;
}
.stat dt { font-size: var(--type-subhead); color: var(--secondary-label); }

/* =========================================================================
   Rólunk (about)
   ========================================================================= */
.hero--page { min-height: 82vh; min-height: 82svh; padding-bottom: var(--sp-12); }

/* team: one person per row — portrait beside a single highlighted line;
   the full bio waits behind "Bővebben" */
.team { display: grid; gap: var(--sp-12); margin: 0; padding: 0; list-style: none; }
.person { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) {
  .team { gap: var(--sp-16); }
  .person { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: var(--sp-12); }
  .person:nth-child(even) .person__photo { order: 2; }
}
.person__photo {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; max-width: 460px; aspect-ratio: 4 / 5; border-radius: var(--radius-l);
  background: var(--system-gray6);
}
@media (min-width: 900px) { .person:nth-child(even) .person__photo { justify-self: end; } }
.person__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.35) contrast(1.04);
  transition: transform 1.2s var(--ease-out), filter .8s var(--ease);
}
.person:hover .person__photo img { transform: scale(1.03); filter: none; }
.person__text { max-width: 560px; }
.person__name {
  font-size: clamp(var(--type-title1), 2.2vw + 12px, 48px); line-height: 1.06; font-weight: 700; letter-spacing: -.03em;
  color: var(--label);
}
.person__lead {
  margin-top: var(--sp-4);
  font-size: clamp(var(--type-title3), .6vw + 14px, 24px); line-height: 1.32; font-weight: 600; letter-spacing: -.012em;
  color: var(--secondary-label); text-wrap: pretty;
}
.person__lead strong { color: var(--label); font-weight: 700; }
.person__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.person__tags li {
  padding: 6px var(--sp-3); border-radius: 999px;
  font-size: var(--type-subhead); font-weight: 500;
  background: var(--tertiary-fill); color: var(--label);
}
.person__more { margin-top: var(--sp-5); }
.person__more summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap);
  list-style: none; cursor: pointer;
  font-size: var(--type-body); color: var(--accent-text);
}
.person__more summary::-webkit-details-marker { display: none; }
.person__more summary .icon { font-size: .8em; stroke-width: 2.25; transition: transform .3s var(--ease); }
.person__more[open] summary .icon { transform: rotate(180deg); }
.person__more p { margin-top: var(--sp-2); max-width: 52ch; color: var(--secondary-label); }

/* principles: numbered, two columns, hairlines between */
.values { display: grid; gap: 0 var(--sp-10); grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 820px) { .values { grid-template-columns: repeat(2, 1fr); } }
.value { padding: var(--sp-7) 0 var(--sp-8); border-top: 1px solid var(--separator); }
.value__num { display: block; margin-bottom: var(--sp-4); font-size: var(--type-footnote); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); }
.value h3 { font-size: clamp(var(--type-title2), 1.2vw + 14px, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.value p { margin-top: var(--sp-3); max-width: 46ch; color: var(--secondary-label); }

/* legal pages: company data in two columns, then the running text */
.legal-h { margin-bottom: var(--sp-6); font-size: clamp(var(--type-title2), 1.2vw + 14px, 32px); font-weight: 700; letter-spacing: -.02em; }
.legal-facts {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5) var(--sp-10);
  margin: 0 0 var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--separator);
}
@media (min-width: 734px) { .legal-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.legal-facts dt { font-size: var(--type-footnote); letter-spacing: .02em; color: var(--secondary-label); }
.legal-facts dd { margin: var(--sp-2) 0 0; font-size: var(--type-headline); font-weight: 600; }

/* thank-you page */
.thanks__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: var(--sp-6);
  border-radius: 999px; font-size: 30px;
  color: var(--success); background: rgba(48, 209, 88, .14);
  box-shadow: inset 0 0 0 1px rgba(48, 209, 88, .35);
}
.thanks__text { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* contact: the form and the details beside it */
.hero--short { min-height: 0; padding: calc(var(--nav-h) + var(--sp-12)) 0 var(--sp-8); }
@media (min-width: 734px) { .hero--short { padding-top: calc(var(--nav-h) + var(--sp-16)); } }
.contact { padding-top: var(--sp-8); }
.contact__grid { display: grid; gap: var(--sp-12); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: var(--sp-16); } }
.contact__title { font-size: clamp(28px, 1.6vw + 18px, 40px); }
.contact__note { margin-top: var(--sp-4); max-width: 46ch; color: var(--secondary-label); }
.form { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 600px) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); } }
.field { display: grid; gap: var(--sp-2); }
.field--wide, .form__legal, .form__actions { grid-column: 1 / -1; }
.field label { font-size: var(--type-subhead); font-weight: 600; }
.field__opt { font-weight: 400; color: var(--secondary-label); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--tap); padding: var(--sp-3) var(--sp-4);
  font: inherit; color: var(--label);
  background: var(--secondary-grouped-background);
  border: 1px solid var(--separator); border-radius: var(--radius-s);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--secondary-label) 50%), linear-gradient(135deg, var(--secondary-label) 50%, transparent 50%); background-position: right 22px center, right 16px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--system-gray3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--system-gray6); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }
.choices { border: 0; margin: 0; padding: 0; }
.choices legend { padding: 0; font-size: var(--type-subhead); font-weight: 600; }
.choices__list { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice span {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 var(--sp-5); border-radius: 999px;
  border: 1px solid var(--separator); color: var(--secondary-label);
  font-size: var(--type-subhead);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.choice:hover span { border-color: var(--system-gray3); color: var(--label); }
.choice input:checked + span { border-color: var(--accent); background: rgba(10, 132, 255, .16); color: var(--label); }
.choice input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }

.consent { grid-column: 1 / -1; display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; }
.consent input {
  flex: none; width: 22px; height: 22px; margin: 1px 0 0;
  accent-color: var(--accent-fill); cursor: pointer;
}
.consent span { font-size: var(--type-subhead); color: var(--secondary-label); }
.consent input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; border-radius: 4px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); }
.form__status { margin: 0; font-size: var(--type-subhead); color: var(--secondary-label); }
.form__status.is-error { color: var(--danger); }
.contact__block + .contact__block { margin-top: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid var(--separator); }
.contact__label { font-size: var(--type-footnote); letter-spacing: .02em; color: var(--secondary-label); }
.contact__value { margin-top: var(--sp-2); font-size: var(--type-title3); font-weight: 600; }
.contact__sub { margin-top: var(--sp-3); color: var(--secondary-label); font-size: var(--type-subhead); }
.contact__links { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); padding: 0; list-style: none; }

/* blog: the listing, the empty state and the article body */
.posts { display: grid; gap: var(--sp-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); } }
.post-card a {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; height: 100%; padding: var(--sp-6);
  border: 1px solid rgba(var(--post-rgb), .24); border-radius: var(--radius-l);
  background: linear-gradient(160deg, rgba(var(--post-rgb), .10), rgba(var(--post-rgb), .02) 55%), var(--system-background);
  color: var(--label);
  transition: border-color .3s var(--ease), transform .4s var(--ease-out);
}
/* a soft glow of the category colour in the corner */
.post-card a::before {
  content: ""; position: absolute; z-index: -1; top: -35%; right: -25%;
  width: 75%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--post-rgb), .38), rgba(var(--post-rgb), 0) 66%);
  opacity: .75; transition: opacity .4s var(--ease), transform .8s var(--ease-out);
}
.post-card a:hover { text-decoration: none; border-color: rgba(var(--post-rgb), .55); }
.post-card a:hover::before { opacity: 1; transform: scale(1.15); }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); font-size: var(--type-footnote); color: var(--secondary-label); letter-spacing: .02em; }
.post-card__cat {
  padding: 4px 10px; border-radius: 999px;
  background: rgba(var(--post-rgb), .16); color: rgb(var(--post-rgb));
  font-weight: 600;
}
.post-card__title { margin-top: var(--sp-3); font-size: clamp(var(--type-title2), 1vw + 14px, 28px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.post-card__lead { margin-top: var(--sp-3); color: var(--secondary-label); }
.post-card .link-chevron { margin-top: auto; padding-top: var(--sp-5); }
.empty {
  padding: var(--sp-12) var(--sp-6); text-align: center;
  border: 1px solid var(--separator); border-radius: var(--radius-l);
}
.empty__title { font-size: clamp(var(--type-title2), 1vw + 14px, 28px); font-weight: 700; letter-spacing: -.02em; }
.empty__text { margin: var(--sp-4) auto 0; max-width: 52ch; color: var(--secondary-label); }
.empty .btn { margin-top: var(--sp-6); }
.post__title { font-size: clamp(34px, 3vw + 18px, 56px); }
.post__body { max-width: 68ch; }
.post__body h2 { margin-top: var(--sp-10); font-size: clamp(var(--type-title2), 1.2vw + 14px, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.post__body p { margin-top: var(--sp-4); color: var(--secondary-label); font-size: clamp(var(--type-body), .4vw + 15px, var(--type-title3)); line-height: 1.6; }

/* services page: a list that sticks beside the blocks and follows the scroll */
.svc-split { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) { .svc-split { grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-12); } }
.svc-index { display: none; }
@media (min-width: 1024px) {
  .svc-index {
    display: block; position: sticky; top: calc(var(--edge-band) + var(--sp-4));
    align-self: start;
  }
}
.svc-index__title { margin-bottom: var(--sp-5); font-size: var(--type-footnote); letter-spacing: .02em; color: var(--secondary-label); }
.svc-index ul { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.svc-index__link {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
  border-left: 2px solid var(--separator);
  color: var(--secondary-label); font-size: var(--type-title3); font-weight: 600; letter-spacing: -.01em;
  transition: color .3s var(--ease), border-color .3s var(--ease), padding-left .3s var(--ease);
}
.svc-index__link:hover { color: var(--label); text-decoration: none; }
.svc-index__num { font-size: var(--type-caption1); font-variant-numeric: tabular-nums; color: var(--tertiary-label); transition: color .3s var(--ease); }
.svc-index__link.is-active { color: var(--label); border-color: var(--accent); padding-left: var(--sp-5); }
.svc-index__link.is-active .svc-index__num { color: var(--accent); }

/* services page: the picture leads, the text and the list sit under it */
.svc-block { display: grid; gap: var(--sp-6); }
.svc-block + .svc-block { margin-top: var(--sp-12); padding-top: var(--sp-12); border-top: 1px solid var(--separator); }
@media (min-width: 1024px) { .svc-block { scroll-margin-top: calc(var(--edge-band) + var(--sp-6)); } }
.svc-block__pic .project__media { aspect-ratio: 4 / 3; border-radius: var(--radius-l); }
.svc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-m, 50% 50%); }
@media (min-width: 600px) { .svc-video { object-position: var(--pos, 50% 50%); } }
@media (min-width: 600px) { .svc-block__pic .project__media { aspect-ratio: 16 / 9; } }
.svc-block__title { margin-top: var(--sp-2); font-size: clamp(var(--type-title1), 1.6vw + 16px, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; }
.svc-block__lead { margin-top: var(--sp-4); max-width: 60ch; color: var(--secondary-label); font-size: clamp(var(--type-body), .4vw + 15px, var(--type-title3)); line-height: 1.5; }
.svc-block__lead strong { color: var(--label); font-weight: 600; }
.svc-block__list { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); padding: 0; list-style: none; }
@media (min-width: 734px) { .svc-block__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-8); max-width: 46rem; } }
.svc-block__list li { position: relative; padding-left: var(--sp-5); color: var(--secondary-label); }
.svc-block__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }

/* case study: one project, told in full */
.case-hero { padding: calc(var(--nav-h) + var(--sp-12)) 0 var(--sp-6); }
@media (min-width: 734px) { .case-hero { padding-top: calc(var(--nav-h) + var(--sp-16)); } }
.link-chevron--back { margin-bottom: var(--sp-6); }
.link-chevron--back .icon { transform: scaleX(-1); }
.link-chevron--back:hover .icon { transform: translateX(-2px) scaleX(-1); }
.case-hero__lead { margin-top: var(--sp-5); max-width: 60ch; }
.case-facts {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5) var(--sp-10);
  margin-top: var(--sp-8); padding-top: var(--sp-6);
  border-top: 1px solid var(--separator);
}
@media (min-width: 600px) { .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case-facts dt { font-size: var(--type-footnote); letter-spacing: .02em; color: var(--secondary-label); }
.case-facts dd { margin-top: var(--sp-2); font-size: var(--type-headline); font-weight: 600; }
.case-shot .project__media { aspect-ratio: 16 / 10; }
@media (min-width: 734px) { .case-shot .project__media { aspect-ratio: 16 / 9; } }
.case-body { padding-top: var(--sp-10); }
.case-part { display: grid; gap: var(--sp-4); }
@media (min-width: 1024px) { .case-part { grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); gap: var(--sp-12); } }
.case-part + .case-part { margin-top: var(--sp-10); padding-top: var(--sp-10); border-top: 1px solid var(--separator); }
.case-part h3 { font-size: clamp(var(--type-title2), 1.2vw + 14px, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.case-part p { max-width: 62ch; color: var(--secondary-label); font-size: clamp(var(--type-body), .4vw + 15px, var(--type-title3)); line-height: 1.5; }
.case-next a { color: var(--label); }

/* work collection: a grid of the projects, the first one across the top */
.works-grid { display: grid; gap: var(--sp-10) var(--sp-8); margin: 0; padding: 0; list-style: none; }
@media (min-width: 734px) { .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 734px) { .works-grid > li:first-child { grid-column: 1 / -1; } }
@media (min-width: 734px) { .works-grid > li:first-child .project__media { aspect-ratio: 16 / 9; } }
.works-grid .project__meta { cursor: default; }

/* FAQ: plain rows that open on click */
.faq { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--separator); }
.faq__item { border-bottom: 1px solid var(--separator); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
  padding: var(--sp-6) 0; cursor: pointer; list-style: none;
  font-size: clamp(var(--type-title3), .6vw + 15px, 24px); font-weight: 600; letter-spacing: -.01em;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center/14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center/2px 14px no-repeat;
  color: var(--secondary-label);
  transition: transform .3s var(--ease), color .2s var(--ease);
}
.faq summary:hover { color: var(--accent-text); }
.faq summary:hover::after { color: var(--accent-text); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { max-width: 68ch; padding-bottom: var(--sp-6); color: var(--secondary-label); }

/* clients: a still logo grid — 21 logos read as 3 × 7 on phones, 7 × 3 above */
.brands {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--separator); border-left: 1px solid var(--separator);
}
@media (min-width: 734px) { .brands { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .brands { grid-template-columns: repeat(7, 1fr); } }
.brands li {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px; padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid var(--separator); border-bottom: 1px solid var(--separator);
  transition: background-color .3s var(--ease);
}
@media (min-width: 734px) { .brands li { min-height: 136px; } }
.brands img {
  display: block; width: calc(var(--w, 96px) * .72); max-width: 100%; height: auto;
  filter: brightness(0) invert(1); opacity: .6;
  transition: opacity .3s var(--ease);
}
@media (min-width: 734px) { .brands img { width: var(--w, 96px); } }
.brands img.is-badge { filter: grayscale(1) invert(1); }
.brands li:hover { background: rgba(255, 255, 255, .03); }
.brands li:hover img { opacity: 1; }
/* a handful of logos read better as centred rows than as a ragged grid */
.brands--flow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-8) var(--sp-10); padding: var(--sp-10) var(--sp-4);
  border-left: 0; border-bottom: 1px solid var(--separator);
}
@media (min-width: 734px) { .brands--flow { gap: var(--sp-10) 0; } }
.brands--flow li { min-height: 0; padding: 0 var(--sp-5); border: 0; }
/* tablet: two even rows; desktop: a single line of seven */
@media (min-width: 734px) { .brands--flow li { flex: 0 0 25%; } }
@media (min-width: 1024px) {
  .brands--flow li { flex: 0 0 calc(100% / 7); padding: 0 var(--sp-3); }
  .brands--flow img { width: calc(var(--w, 96px) * .82); }
}
.brands--flow img { width: var(--w, 96px); }

.brands__more { margin-top: var(--sp-5); max-width: 72ch; font-size: var(--type-subhead); color: var(--secondary-label); }

/* ---- E-mail address shown on request (keeps it away from harvesting bots) ---- */
.email-reveal:not(.btn):not(.link-chevron) {
  color: var(--accent-text); text-decoration: underline dotted; text-underline-offset: .2em;
}
.email-reveal:not(.btn):not(.link-chevron):hover { text-decoration-style: solid; }

/* ---- Honeypot: invisible to people, irresistible to form-filling bots ---- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Off-screen sections skip rendering until they come close ---- */
.section:not(.svc):not(#munkak):not(#szolgaltatasok):not(#services), .footer {
  content-visibility: auto; contain-intrinsic-size: auto 900px;
}

/* ---- Closing CTA ---- */
.cta { text-align: center; }
.cta .actions { justify-content: center; }

/* ---- Footer ---- */
.footer {
  background: transparent;
  border-top: 1px solid var(--separator);
  color: var(--secondary-label);
  font-size: var(--type-footnote);
  padding: var(--sp-10) 0 calc(var(--sp-8) + env(safe-area-inset-bottom));
}
.footer .logo { width: 120px; color: var(--label); }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--separator); }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); padding: var(--sp-4) 0; }
.footer__links a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--secondary-label); }
.footer__links a:hover { color: var(--label); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--separator); }
.footer__bottom a { color: var(--accent-text); display: inline-flex; align-items: center; min-height: var(--tap); margin-block: calc((var(--tap) - 1.38em) / -2); }

/* ---- Cookie sheet ---- */
.cookie {
  position: fixed; z-index: 60;
  left: 50%; bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(100% - 2 * var(--sp-4), 640px);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border-radius: var(--radius-l);
  font-size: var(--type-subhead);
}
.cookie p { flex: 1 1 260px; }
.cookie__actions { display: flex; gap: var(--sp-2); margin-left: auto; }
.cookie .btn { font-size: var(--type-subhead); padding: 0 var(--sp-5); }

/* ---- Hero opening sequence (html.intro → html.intro-reveal) ---- */
.intro .hero__intro > *, .intro .hero__cue, .intro .nav { opacity: 0; }
.intro .hero__intro > * { transform: translateY(20px); filter: blur(8px); }
.intro-reveal .hero__intro > *, .intro-reveal .hero__cue {
  opacity: 1; transform: none; filter: none;
  transition: opacity 1.2s var(--ease-out), transform 1.6s var(--ease-out), filter 1.2s var(--ease-out);
}
.intro-reveal .nav { opacity: 1; transition: opacity 1.2s var(--ease-out); }
.intro-reveal .hero__intro > :nth-child(2) { transition-delay: .14s; }
.intro-reveal .hero__intro > :nth-child(3) { transition-delay: .34s; }
.intro-reveal .hero__intro > :nth-child(4) { transition-delay: .5s; }
.intro-reveal .nav { transition-delay: .6s; }
.intro-reveal .hero__cue { transition-delay: 1.1s; }
/* failsafe: if the script never reveals, show everything anyway */
@keyframes intro-failsafe { to { opacity: 1; transform: none; filter: none; } }
@keyframes intro-failsafe-nav { to { opacity: 1; } }
.intro:not(.intro-reveal) .hero__intro > *,
.intro:not(.intro-reveal) .hero__cue { animation: intro-failsafe .8s var(--ease-out) 5s forwards; }
.intro:not(.intro-reveal) .nav { animation: intro-failsafe-nav .8s var(--ease-out) 5s forwards; }

/* ---- Reveal (progressive: content visible without JS) ---- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .svc__card img { transform: none !important; }
  .js .project__media { clip-path: none; }
  .js .project__media img { transform: none; }
  .hero__cue .icon { animation: none; }
  .btn__liq i { transition: opacity .2s; animation: none; transform: scale(1); }

  /* no motion: one centred, wrapping row of logos */
  .marquee__track { width: auto; animation: none; }
  .marquee__viewport { -webkit-mask-image: none; mask-image: none; }
  .marquee__list { flex-wrap: wrap; justify-content: center; width: 100%; padding: 0 var(--sp-5); row-gap: var(--sp-6); }
  .marquee__list[aria-hidden] { display: none; }
}
@media (prefers-contrast: more) {
  :root { --secondary-label: rgba(235, 235, 245, .82); --separator: rgba(235, 235, 245, .35); --glass: var(--secondary-grouped-background); --glass-bar: var(--system-background); }
}