/* =========================================================================
   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;
  /* below the hero the page lifts off pure black, to a near-neutral dark that
     carries both the cool and the warm glow */
  --page-background:              #0C0D12;
  /* 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;
  /* The hero stays black (the ether scene fades into it); from there the page
     eases into a soft dark, with the hero's blue / orange grade echoed in faint
     glows that alternate sides on the way down.
     One static layer on the canvas: painted once, costs nothing on scroll. */
  background:
    radial-gradient(70vw 60vh at 8% 165vh, rgba(var(--glow-a), .10), transparent 70%),
    radial-gradient(60vw 55vh at 92% 275vh, rgba(var(--glow-b), .065), transparent 70%),
    radial-gradient(70vw 60vh at 90% 430vh, rgba(var(--glow-c), .075), transparent 70%),
    radial-gradient(60vw 55vh at 10% 590vh, rgba(var(--glow-b), .055), transparent 70%),
    radial-gradient(70vw 60vh at 85% 760vh, rgba(var(--glow-a), .07), transparent 70%),
    linear-gradient(to bottom, var(--system-background) 0, var(--system-background) 100vh, var(--page-background) 175vh) no-repeat,
    var(--page-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;
}
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); }
}